diff options
Diffstat (limited to 'apps/workflowengine/src')
| -rw-r--r-- | apps/workflowengine/src/components/Check.vue | 33 | ||||
| -rw-r--r-- | apps/workflowengine/src/workflowengine.js | 12 |
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. */ /** |