fix(workflowengine): require a VueConstructor object as operation plugin

solves an incompatibility issue when the providing app registers their code
from an incompatible nextcloud-vue version.

Also changes and clarifies WorkflowEngine API. This is necessary to stay
compatible with the original way, but also promotes usage of the originally
declared but never used "component" attribute on registration.

Signed-off-by: Arthur Schiwon <[email protected]>

apps/workflowengine/src/components/Rule.vue

@@ -29,8 +29,11 @@
 		<div class="flow-icon icon-confirm" />
 		<div class="action">
 			<Operation :operation="operation" :colored="false">
+				<div v-if="operation.component"
+					ref="operationComponent" >
+				</div>
 				<component :is="operation.options"
-					v-if="operation.options"
+					v-else-if="operation.options"
 					v-model="rule.operation"
 					@input="updateOperation" />
 			</Operation>
@@ -98,9 +101,13 @@ export default {
 			error: null,
 			dirty: this.rule.id < 0,
 			originalRule: null,
+			component: null,
 		}
 	},
 	computed: {
+		/**
+		 * @returns {OperatorPlugin}
+		 */
 		operation() {
 			return this.$store.getters.getOperationForRule(this.rule)
 		},
@@ -126,10 +133,22 @@ export default {
 	},
 	mounted() {
 		this.originalRule = JSON.parse(JSON.stringify(this.rule))
+
+		if (this.operation?.component) {
+			this.component = new this.operation.component()
+			this.component.$mount(this.$refs.operationComponent)
+			this.component.$on('input', this.updateOperation)
+			this.component.$props.value = this.rule.operation
+		} else if (this.operation?.options) {
+			// 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: `OperatorPlugin.options` is deprecated. Use `OperatorPlugin.components` instead.')
+		}
 	},
 	methods: {
 		async updateOperation(operation) {
 			this.$set(this.rule, 'operation', operation)
+			this.component.$props.value = operation
 			await this.updateRule()
 		},
 		validate(/* state */) {

apps/workflowengine/src/store.js

@@ -127,6 +127,9 @@ const store = new Store({
 				return rule1.id - rule2.id || rule2.class - rule1.class
 			})
 		},
+		/**
+		 * @return {OperatorPlugin}
+		 */
 		getOperationForRule(state) {
 			return (rule) => state.operations[rule.class]
 		},

apps/workflowengine/src/workflowengine.js

@@ -30,10 +30,17 @@ import ShippedChecks from './components/Checks/index.js'
  * @property {string} id - The PHP class name of the check
  * @property {string} operation - Default value for the operation field
  * @property {string} color - Custom color code to be applied for the operator selector
- * @property {Vue} component - A vue component to handle the rendering of options
+ * @property {object} [options] - Deprecated: **Use `component` 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 {VueConstructor} [component] - A vue constructor as returned by `Vue.extend()`.
+ *  It has to emit the `$input` event when a value was changed.
+ *  The `value` property will be set initially with the rule operation value.
  */
 
 /**