Merge pull request #1210 from nextcloud/fix/noid/wfe-component

fix: adjust to workflowengine changes and register web component

Author: blizzz

package-lock.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@nextcloud/l10n": "^3.4.0",
     "@nextcloud/vue": "8.28.0",
+    "@vue/web-component-wrapper": "^1.3.0",
     "vue": "^2.7.16"
   },
   "browserslist": [

package.json

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcSelectTags :value="integerValue" :multiple="false" @input="emitInput" />
+	<NcSelectTags v-model="integerValue" :multiple="false" @input="emitInput" />
 </template>
 
 <script>
@@ -14,19 +14,21 @@ export default {
 	name: 'Tag',
 	components: { NcSelectTags },
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
 	},
+	emits: ['update:model-value'],
 	computed: {
 		integerValue() {
-			return parseInt(this.value)
+			const val = parseInt(this.modelValue)
+			return isNaN(val) ? -1 : val
 		},
 	},
 	methods: {
 		emitInput(value) {
-			this.$emit('input', '' + value)
+			this.$emit('update:model-value', '' + value)
 		},
 	},
 }

src/Tag.vue

@@ -3,13 +3,26 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import wrap from '@vue/web-component-wrapper'
+import Vue from 'vue'
+
 import Tag from './Tag.vue'
 
+const AutoTaggerComponent = wrap(Vue, Tag)
+const customElementId = 'oca-files_automatedtagging-operation-tag'
+
+window.customElements.define(customElementId, AutoTaggerComponent)
+
+// In Vue 2, wrap doesn't support disabling shadow :(
+// Disable with a hack
+Object.defineProperty(AutoTaggerComponent.prototype, 'attachShadow', { value() { return this } })
+Object.defineProperty(AutoTaggerComponent.prototype, 'shadowRoot', { get() { return this } })
+
 window.OCA.WorkflowEngine.registerOperator({
 	id: 'OCA\\FilesAutomatedTagging\\Operation',
 	name: t('files_automatedtagging', 'Tag a file'),
 	description: t('files_automatedtagging'),
 	color: 'var(--color-success)',
 	operation: '',
-	options: Tag,
+	element: customElementId,
 })