fix(workflowengine): require a web component as check plugin

Similar case as with operator plugins (check previous commit). Although we
are not aware of an existign problem, it is there in principle, and
asjusting the API we stay consistent with that one from the operations.

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

2 files changed, 40 insertions, 5 deletions

diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index f560303b360..ce64d859139 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -19,8 +19,18 @@
 			:clearable="false"
 			:placeholder="t('workflowengine', 'Select a comparator')"
 			@input="updateCheck" />
+		<component :is="currentElement"
+			v-if="currentElement"
+			ref="checkComponent"
+			:disabled="!currentOption"
+			:check="check"
+			:model-value="check.value"
+			class="option"
+			@update:model-value="updateCheck"
+			@valid="(valid=true) && validate()"
+			@invalid="!(valid=false) && validate()" />
 		<component :is="currentOption.component"
-			v-if="currentOperator && currentComponent"
+			v-else-if="currentOperator && currentComponent"
 			v-model="check.value"
 			:disabled="!currentOption"
 			:check="check"
@@ -52,7 +62,6 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 
 import CloseIcon from 'vue-material-design-icons/Close.vue'
-
 import ClickOutside from 'vue-click-outside'
 
 export default {
@@ -99,6 +108,12 @@ export default {
 			}
 			return operators
 		},
+		currentElement() {
+			if (!this.check.class) {
+				return false
+			}
+			return this.checks[this.check.class].element
+		},
 		currentComponent() {
 			if (!this.currentOption) { return [] }
 			return this.checks[this.currentOption.class].component
@@ -120,6 +135,15 @@ export default {
 		this.currentOption = this.checks[this.check.class]
 		this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)
 
+		if (this.currentElement) {
+			console.error(this.$refs)
+			this.$refs.checkComponent.value = this.currentOption
+		} else if (this.currentOption?.component) {
+			// keeping this in an else for apps that try to be backwards compatible and may ship both
+			// to be removed in 03/2028
+			console.warn('Developer warning: `CheckPlugin.options` is deprecated. Use `CheckPlugin.element` instead.')
+		}
+
 		if (this.check.class === null) {
 			this.$nextTick(() => this.$refs.checkSelector.$el.focus())
 		}
@@ -141,11 +165,14 @@ export default {
 			this.check.invalid = !this.valid
 			this.$emit('validate', this.valid)
 		},
-		updateCheck() {
+		updateCheck(event) {
 			const matchingOperator = this.operators.findIndex((operator) => this.check.operator === operator.operator)
 			if (this.check.class !== this.currentOption.class || matchingOperator === -1) {
 				this.currentOperator = this.operators[0]
 			}
+			if (event?.detail) {
+				this.check.value = event.detail[0]
+			}
 			// eslint-disable-next-line vue/no-mutating-props
 			this.check.class = this.currentOption.class
 			// eslint-disable-next-line vue/no-mutating-props
diff --git a/apps/workflowengine/src/workflowengine.js b/apps/workflowengine/src/workflowengine.js
index 00612ee0478..5a99ac54ef2 100644
--- a/apps/workflowengine/src/workflowengine.js
+++ b/apps/workflowengine/src/workflowengine.js
@@ -15,12 +15,20 @@ import ShippedChecks from './components/Checks/index.js'
  * @typedef {object} CheckPlugin
  * @property {string} class - The PHP class name of the check
  * @property {Comparison[]} operators - A list of possible comparison operations running on the check
- * @property {Vue} component - A vue component to handle the rendering of options
+ * @property {Vue} component - Deprecated: **Use `element` instead**
+ *
+ *  A vue component to handle the rendering of options.
  *  The component should handle the v-model directive properly,
  *  so it needs a value property to receive data and emit an input
- *  event once the data has changed
+ *  event once the data has changed.
+ *
+ *  Will be removed in 03/2028.
  * @property {Function} placeholder - Return a placeholder of no custom component is used
  * @property {Function} validate - validate a check if no custom component is used
+ * @property {string} [element] - A web component id as used in window.customElements.define()`.
+ *  It is expected that the ID is prefixed with the app namespace, e.g. oca-myapp-flow_do_this_operation
+ *  It has to emit the `update:model-value` event when a value was changed.
+ *  The `model-value` property will be set initially with the rule operation value.
  */
 
 /**