fix(workflowengine): adapt check operator FileSystemTag to use web component

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

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/file.js

@@ -80,8 +80,25 @@ const FileChecks = [
 			{ operator: 'is', name: t('workflowengine', 'is tagged with') },
 			{ operator: '!is', name: t('workflowengine', 'is not tagged with') },
 		],
-		component: FileSystemTag,
+		webComponent: registerWebComponent(FileSystemTag, 'oca-workflowengine-file_system_tag'),
 	},
 ]
 
+/**
+ *
+ * @param VueComponent
+ * @param webComponentId
+ */
+function registerWebComponent(VueComponent, webComponentId) {
+	const WrappedComponent = wrap(Vue, VueComponent)
+	window.customElements.define(webComponentId, 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 webComponentId
+}
+
 export default FileChecks

package-lock.json

@@ -33,6 +33,7 @@
         "@nextcloud/vue": "^8.23.1",
         "@simplewebauthn/browser": "^10.0.0",
         "@skjnldsv/sanitize-svg": "^1.0.2",
+        "@vue/web-component-wrapper": "^1.3.0",
         "@vueuse/components": "^11.0.0",
         "@vueuse/core": "^11.0.0",
         "@vueuse/integrations": "^11.0.0",
@@ -7312,6 +7313,12 @@
         }
       }
     },
+    "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.3.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-11.3.0.tgz",

package.json

@@ -61,6 +61,7 @@
     "@nextcloud/vue": "^8.23.1",
     "@simplewebauthn/browser": "^10.0.0",
     "@skjnldsv/sanitize-svg": "^1.0.2",
+    "@vue/web-component-wrapper": "^1.3.0",
     "@vueuse/components": "^11.0.0",
     "@vueuse/core": "^11.0.0",
     "@vueuse/integrations": "^11.0.0",