Merge pull request #50783 from nextcloud/fix/49909/workflow-vue-compat

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

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"
+			:operator="check.operator"
+			: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) {
+			// If we do not set it, the check`s value would remain empty. Unsure why Vue behaves this way.
+			this.$refs.checkComponent.modelValue = undefined
+		} 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,15 @@ export default {
 			this.check.invalid = !this.valid
 			this.$emit('validate', this.valid)
 		},
-		updateCheck() {
-			const matchingOperator = this.operators.findIndex((operator) => this.check.operator === operator.operator)
+		updateCheck(event) {
+			const selectedOperator = event?.operator || this.currentOperator?.operator || this.check.operator
+			const matchingOperator = this.operators.findIndex((operator) => selectedOperator === 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

apps/workflowengine/src/components/Checks/FileMimeType.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<div>
-		<NcSelect :value="currentValue"
+		<NcSelect :model-value="currentValue"
 			:placeholder="t('workflowengine', 'Select a file type')"
 			label="label"
 			:options="options"
@@ -30,8 +30,8 @@
 			</template>
 		</NcSelect>
 		<input v-if="!isPredefined"
-			type="text"
 			:value="currentValue.id"
+			type="text"
 			:placeholder="t('workflowengine', 'e.g. httpd/unix-directory')"
 			@input="updateCustom">
 	</div>
@@ -40,7 +40,6 @@
 <script>
 import NcEllipsisedOption from '@nextcloud/vue/components/NcEllipsisedOption'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
-import valueMixin from './../../mixins/valueMixin.js'
 import { imagePath } from '@nextcloud/router'
 
 export default {
@@ -49,9 +48,15 @@ export default {
 		NcEllipsisedOption,
 		NcSelect,
 	},
-	mixins: [
-		valueMixin,
-	],
+	props: {
+		modelValue: {
+			type: String,
+			default: '',
+		},
+	},
+
+	emits: ['update:model-value'],
+
 	data() {
 		return {
 			predefinedTypes: [
@@ -76,6 +81,7 @@ export default {
 					id: 'application/pdf',
 				},
 			],
+			newValue: '',
 		}
 	},
 	computed: {
@@ -108,21 +114,30 @@ export default {
 			}
 		},
 	},
+	watch: {
+		modelValue() {
+			this.updateInternalValue()
+		},
+	},
+
 	methods: {
 		validateRegex(string) {
 			const regexRegex = /^\/(.*)\/([gui]{0,3})$/
 			const result = regexRegex.exec(string)
 			return result !== null
 		},
+		updateInternalValue() {
+			this.newValue = this.modelValue
+		},
 		setValue(value) {
 			if (value !== null) {
 				this.newValue = value.id
-				this.$emit('input', this.newValue)
+				this.$emit('update:model-value', this.newValue)
 			}
 		},
 		updateCustom(event) {
-			this.newValue = event.target.value
-			this.$emit('input', this.newValue)
+			this.newValue = event.target.value || event.detail[0]
+			this.$emit('update:model-value', this.newValue)
 		},
 	},
 }

apps/workflowengine/src/components/Checks/FileSystemTag.vue

@@ -17,18 +17,21 @@ export default {
 		NcSelectTags,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
 	},
+
+	emits: ['update:model-value'],
+
 	data() {
 		return {
 			newValue: [],
 		}
 	},
 	watch: {
-		value() {
+		modelValue() {
 			this.updateValue()
 		},
 	},
@@ -37,14 +40,14 @@ export default {
 	},
 	methods: {
 		updateValue() {
-			if (this.value !== '') {
-				this.newValue = parseInt(this.value)
+			if (this.modelValue !== '') {
+				this.newValue = parseInt(this.modelValue)
 			} else {
 				this.newValue = null
 			}
 		},
 		update() {
-			this.$emit('input', this.newValue || '')
+			this.$emit('update:model-value', this.newValue || '')
 		},
 	},
 }

apps/workflowengine/src/components/Checks/RequestTime.vue

@@ -27,7 +27,6 @@
 <script>
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import moment from 'moment-timezone'
-import valueMixin from '../../mixins/valueMixin.js'
 
 const zones = moment.tz.names()
 export default {
@@ -35,15 +34,13 @@ export default {
 	components: {
 		NcSelect,
 	},
-	mixins: [
-		valueMixin,
-	],
 	props: {
-		value: {
+		modelValue: {
 			type: String,
-			default: '',
+			default: '[]',
 		},
 	},
+	emits: ['update:model-value'],
 	data() {
 		return {
 			timezones: zones,
@@ -53,21 +50,31 @@ export default {
 				endTime: null,
 				timezone: moment.tz.guess(),
 			},
+			stringifiedValue: '[]',
 		}
 	},
-	mounted() {
-		this.validate()
+	watch: {
+		modelValue() {
+			this.updateInternalValue()
+		},
+	},
+	beforeMount() {
+		// this is necessary to keep so the value is re-applied when a different
+		// check is being removed.
+		this.updateInternalValue()
 	},
 	methods: {
-		updateInternalValue(value) {
+		updateInternalValue() {
 			try {
-				const data = JSON.parse(value)
+				const data = JSON.parse(this.modelValue)
 				if (data.length === 2) {
 					this.newValue = {
 						startTime: data[0].split(' ', 2)[0],
 						endTime: data[1].split(' ', 2)[0],
 						timezone: data[0].split(' ', 2)[1],
 					}
+					this.stringifiedValue = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
+					this.validate()
 				}
 			} catch (e) {
 				// ignore invalid values
@@ -89,8 +96,8 @@ export default {
 				this.newValue.timezone = moment.tz.guess()
 			}
 			if (this.validate()) {
-				const output = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
-				this.$emit('input', output)
+				this.stringifiedValue = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
+				this.$emit('update:model-value', this.stringifiedValue)
 			}
 		},
 	},

apps/workflowengine/src/components/Checks/RequestURL.vue

@@ -4,7 +4,8 @@
 -->
 <template>
 	<div>
-		<NcSelect :value="currentValue"
+		<NcSelect v-model="newValue"
+			:value="currentValue"
 			:placeholder="t('workflowengine', 'Select a request URL')"
 			label="label"
 			:clearable="false"
@@ -45,6 +46,19 @@ export default {
 	mixins: [
 		valueMixin,
 	],
+	props: {
+		modelValue: {
+			type: String,
+			default: '',
+		},
+		operator: {
+			type: String,
+			default: '',
+		},
+	},
+
+	emits: ['update:model-value'],
+
 	data() {
 		return {
 			newValue: '',
@@ -62,7 +76,7 @@ export default {
 			return [...this.predefinedTypes, this.customValue]
 		},
 		placeholder() {
-			if (this.check.operator === 'matches' || this.check.operator === '!matches') {
+			if (this.operator === 'matches' || this.operator === '!matches') {
 				return '/^https\\:\\/\\/localhost\\/index\\.php$/i'
 			}
 			return 'https://localhost/index.php'
@@ -102,12 +116,12 @@ export default {
 			// TODO: check if value requires a regex and set the check operator according to that
 			if (value !== null) {
 				this.newValue = value.id
-				this.$emit('input', this.newValue)
+				this.$emit('update:model-value', this.newValue)
 			}
 		},
 		updateCustom(event) {
 			this.newValue = event.target.value
-			this.$emit('input', this.newValue)
+			this.$emit('update:model-value', this.newValue)
 		},
 	},
 }

apps/workflowengine/src/components/Checks/RequestUserAgent.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<div>
-		<NcSelect :value="currentValue"
+		<NcSelect v-model="currentValue"
 			:placeholder="t('workflowengine', 'Select a user agent')"
 			label="label"
 			:options="options"
@@ -24,8 +24,8 @@
 			</template>
 		</NcSelect>
 		<input v-if="!isPredefined"
+			v-model="newValue"
 			type="text"
-			:value="currentValue.id"
 			@input="updateCustom">
 	</div>
 </template>
@@ -44,6 +44,13 @@ export default {
 	mixins: [
 		valueMixin,
 	],
+	props: {
+		modelValue: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: ['update:model-value'],
 	data() {
 		return {
 			newValue: '',
@@ -73,15 +80,20 @@ export default {
 				id: '',
 			}
 		},
-		currentValue() {
-			if (this.matchingPredefined) {
-				return this.matchingPredefined
-			}
-			return {
-				icon: 'icon-settings-dark',
-				label: t('workflowengine', 'Custom user agent'),
-				id: this.newValue,
-			}
+		currentValue: {
+			get() {
+				if (this.matchingPredefined) {
+					return this.matchingPredefined
+				}
+				return {
+					icon: 'icon-settings-dark',
+					label: t('workflowengine', 'Custom user agent'),
+					id: this.newValue,
+				}
+			},
+			set(value) {
+				this.newValue = value
+			},
 		},
 	},
 	methods: {
@@ -94,12 +106,12 @@ export default {
 			// TODO: check if value requires a regex and set the check operator according to that
 			if (value !== null) {
 				this.newValue = value.id
-				this.$emit('input', this.newValue)
+				this.$emit('update:model-value', this.newValue)
 			}
 		},
-		updateCustom(event) {
-			this.newValue = event.target.value
-			this.$emit('input', this.newValue)
+		updateCustom() {
+			this.newValue = this.currentValue.id
+			this.$emit('update:model-value', this.newValue)
 		},
 	},
 }

apps/workflowengine/src/components/Checks/RequestUserGroup.vue

@@ -10,10 +10,10 @@
 			:loading="status.isLoading && groups.length === 0"
 			:placeholder="t('workflowengine', 'Type to search for group …')"
 			:options="groups"
-			:value="currentValue"
+			:model-value="currentValue"
 			label="displayname"
 			@search="searchAsync"
-			@input="(value) => $emit('input', value.id)" />
+			@input="update" />
 	</div>
 </template>
 
@@ -35,7 +35,7 @@ export default {
 		NcSelect,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
@@ -44,15 +44,27 @@ export default {
 			default: () => { return {} },
 		},
 	},
+	emits: ['update:model-value'],
 	data() {
 		return {
 			groups,
 			status,
+			newValue: '',
 		}
 	},
 	computed: {
-		currentValue() {
-			return this.groups.find(group => group.id === this.value) || null
+		currentValue: {
+			get() {
+				return this.groups.find(group => group.id === this.newValue) || null
+			},
+			set(value) {
+				this.newValue = value
+			},
+		},
+	},
+	watch: {
+		modelValue() {
+			this.updateInternalValue()
 		},
 	},
 	async mounted() {
@@ -61,8 +73,8 @@ export default {
 			await this.searchAsync('')
 		}
 		// If a current group is set but not in our list of groups then search for that group
-		if (this.currentValue === null && this.value) {
-			await this.searchAsync(this.value)
+		if (this.currentValue === null && this.newValue) {
+			await this.searchAsync(this.newValue)
 		}
 	},
 	methods: {
@@ -86,12 +98,19 @@ export default {
 				console.error('Error while loading group list', error.response)
 			})
 		},
+		updateInternalValue() {
+			this.newValue = this.modelValue
+		},
 		addGroup(group) {
 			const index = this.groups.findIndex((item) => item.id === group.id)
 			if (index === -1) {
 				this.groups.push(group)
 			}
 		},
+		update(value) {
+			this.newValue = value.id
+			this.$emit('update:model-value', this.newValue)
+		},
 	},
 }
 </script>

apps/workflowengine/src/components/Checks/file.js

@@ -4,6 +4,7 @@
  */
 
 import { stringValidator, validateIPv4, validateIPv6 } from '../../helpers/validators.js'
+import { registerCustomElement } from '../../helpers/window.js'
 import FileMimeType from './FileMimeType.vue'
 import FileSystemTag from './FileSystemTag.vue'
 
@@ -34,7 +35,7 @@ const FileChecks = [
 		class: 'OCA\\WorkflowEngine\\Check\\FileMimeType',
 		name: t('workflowengine', 'File MIME type'),
 		operators: stringOrRegexOperators,
-		component: FileMimeType,
+		element: registerCustomElement(FileMimeType, 'oca-workflowengine-checks-file_mime_type'),
 	},
 
 	{
@@ -80,7 +81,7 @@ const FileChecks = [
 			{ operator: 'is', name: t('workflowengine', 'is tagged with') },
 			{ operator: '!is', name: t('workflowengine', 'is not tagged with') },
 		],
-		component: FileSystemTag,
+		element: registerCustomElement(FileSystemTag, 'oca-workflowengine-file_system_tag'),
 	},
 ]
 

apps/workflowengine/src/components/Checks/request.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { registerCustomElement } from '../../helpers/window.js'
 import RequestUserAgent from './RequestUserAgent.vue'
 import RequestTime from './RequestTime.vue'
 import RequestURL from './RequestURL.vue'
@@ -18,7 +19,7 @@ const RequestChecks = [
 			{ operator: 'matches', name: t('workflowengine', 'matches') },
 			{ operator: '!matches', name: t('workflowengine', 'does not match') },
 		],
-		component: RequestURL,
+		element: registerCustomElement(RequestURL, 'oca-workflowengine-checks-request_url'),
 	},
 	{
 		class: 'OCA\\WorkflowEngine\\Check\\RequestTime',
@@ -27,7 +28,7 @@ const RequestChecks = [
 			{ operator: 'in', name: t('workflowengine', 'between') },
 			{ operator: '!in', name: t('workflowengine', 'not between') },
 		],
-		component: RequestTime,
+		element: registerCustomElement(RequestTime, 'oca-workflowengine-checks-request_time'),
 	},
 	{
 		class: 'OCA\\WorkflowEngine\\Check\\RequestUserAgent',
@@ -38,7 +39,7 @@ const RequestChecks = [
 			{ operator: 'matches', name: t('workflowengine', 'matches') },
 			{ operator: '!matches', name: t('workflowengine', 'does not match') },
 		],
-		component: RequestUserAgent,
+		element: registerCustomElement(RequestUserAgent, 'oca-workflowengine-checks-request_user_agent'),
 	},
 	{
 		class: 'OCA\\WorkflowEngine\\Check\\UserGroupMembership',
@@ -47,7 +48,7 @@ const RequestChecks = [
 			{ operator: 'is', name: t('workflowengine', 'is member of') },
 			{ operator: '!is', name: t('workflowengine', 'is not member of') },
 		],
-		component: RequestUserGroup,
+		element: registerCustomElement(RequestUserGroup, 'oca-workflowengine-checks-request_user_group'),
 	},
 ]
 

apps/workflowengine/src/components/Rule.vue

@@ -29,8 +29,13 @@
 		<div class="flow-icon icon-confirm" />
 		<div class="action">
 			<Operation :operation="operation" :colored="false">
+				<component :is="operation.element"
+					v-if="operation.element"
+					ref="operationComponent"
+					:model-value="inputValue"
+					@update:model-value="updateOperationByEvent" />
 				<component :is="operation.options"
-					v-if="operation.options"
+					v-else-if="operation.options"
 					v-model="rule.operation"
 					@input="updateOperation" />
 			</Operation>
@@ -95,9 +100,14 @@ export default {
 			error: null,
 			dirty: this.rule.id < 0,
 			originalRule: null,
+			element: null,
+			inputValue: '',
 		}
 	},
 	computed: {
+		/**
+		 * @return {OperatorPlugin}
+		 */
 		operation() {
 			return this.$store.getters.getOperationForRule(this.rule)
 		},
@@ -123,11 +133,24 @@ export default {
 	},
 	mounted() {
 		this.originalRule = JSON.parse(JSON.stringify(this.rule))
+
+		if (this.operation?.element) {
+			this.$refs.operationComponent.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.element` instead.')
+		}
 	},
 	methods: {
 		async updateOperation(operation) {
 			this.$set(this.rule, 'operation', operation)
-			await this.updateRule()
+			this.updateRule()
+		},
+		async updateOperationByEvent(event) {
+			this.inputValue = event.detail[0]
+			this.$set(this.rule, 'operation', event.detail[0])
+			this.updateRule()
 		},
 		validate(/* state */) {
 			this.error = null
@@ -164,6 +187,7 @@ export default {
 			if (this.rule.id < 0) {
 				this.$store.dispatch('removeRule', this.rule)
 			} else {
+				this.inputValue = this.originalRule.operation
 				this.$store.dispatch('updateRule', this.originalRule)
 				this.originalRule = JSON.parse(JSON.stringify(this.rule))
 				this.dirty = false

apps/workflowengine/src/helpers/window.js

@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import wrap from '@vue/web-component-wrapper'
+import Vue from 'vue'
+
+/**
+ *
+ * @param VueComponent {Object} The Vue component to turn into a Web Components custom element.
+ * @param customElementId {string} The element name, it must be unique. Recommended pattern oca-$appid-(checks|operations)-$use_case, example: oca-my_app-checks-request_user_agent
+ */
+function registerCustomElement(VueComponent, customElementId) {
+	const WrappedComponent = wrap(Vue, VueComponent)
+	if (window.customElements.get(customElementId)) {
+		console.error('Custom element with ID ' + customElementId + ' is already defined!')
+		throw new Error('Custom element with ID ' + customElementId + ' is already defined!')
+	}
+	window.customElements.define(customElementId, WrappedComponent)
+
+	// In Vue 2, wrap doesn't support disabling shadow :(
+	// Disable with a hack
+	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', { value() { return this } })
+	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', { get() { return this } })
+
+	return customElementId
+}
+
+export { registerCustomElement }

apps/workflowengine/src/mixins/valueMixin.js

@@ -4,32 +4,19 @@
  */
 
 const valueMixin = {
-	props: {
-		value: {
-			type: String,
-			default: '',
-		},
-		check: {
-			type: Object,
-			default: () => { return {} },
-		},
-	},
 	data() {
 		return {
-			newValue: '',
+			newValue: [],
 		}
 	},
 	watch: {
-		value: {
-			immediate: true,
-			handler(value) {
-				this.updateInternalValue(value)
-			},
+		modelValue() {
+			this.updateInternalValue()
 		},
 	},
 	methods: {
-		updateInternalValue(value) {
-			this.newValue = value
+		updateInternalValue() {
+			this.newValue = this.modelValue
 		},
 	},
 }

apps/workflowengine/src/store.js

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

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.
  */
 
 /**
@@ -30,10 +38,18 @@ 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 `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 {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.
  */
 
 /**

package-lock.json

@@ -32,6 +32,7 @@
         "@nextcloud/upload": "^1.9.1",
         "@nextcloud/vue": "^8.24.0",
         "@simplewebauthn/browser": "^12.0.0",
+        "@vue/web-component-wrapper": "^1.3.0",
         "@vueuse/components": "^11.1.0",
         "@vueuse/core": "^11.0.1",
         "@vueuse/integrations": "^11.3.0",
@@ -6778,6 +6779,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vue/web-component-wrapper": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
+      "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
+      "license": "MIT"
+    },
     "node_modules/@vueuse/components": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-11.1.0.tgz",

package.json

@@ -63,6 +63,7 @@
     "@nextcloud/upload": "^1.9.1",
     "@nextcloud/vue": "^8.24.0",
     "@simplewebauthn/browser": "^12.0.0",
+    "@vue/web-component-wrapper": "^1.3.0",
     "@vueuse/components": "^11.1.0",
     "@vueuse/core": "^11.0.1",
     "@vueuse/integrations": "^11.3.0",