Update to Vue 3 and switch to Vite

.eslintrc.js → .eslintrc.cjs

@@ -5,18 +5,20 @@
 
 module.exports = {
 	globals: {
-		appVersion: true
+		appVersion: true,
 	},
 	parserOptions: {
-		requireConfigFile: false
+		requireConfigFile: false,
 	},
 	extends: [
-		'@nextcloud'
+		'@nextcloud',
 	],
 	rules: {
 		'jsdoc/require-jsdoc': 'off',
 		'jsdoc/tag-lines': 'off',
 		'vue/first-attribute-linebreak': 'off',
-		'import/extensions': 'off'
-	}
+		'import/extensions': 'off',
+		'import/no-unresolved': ['error', { ignore: ['\\?raw'] }],
+		'vue/no-v-model-argument': 'off',
+	},
 }

package.json

@@ -4,10 +4,9 @@
   "description": "Approval",
   "main": "index.js",
   "scripts": {
-    "build": "webpack --node-env production --progress",
-    "dev": "webpack --node-env development --progress",
-    "watch": "webpack --node-env development --progress --watch",
-    "serve": "webpack --node-env development serve --progress",
+    "build": "NODE_ENV=production vite --mode production build",
+    "dev": "NODE_ENV=development vite --mode development build",
+    "watch": "NODE_ENV=development vite --mode development build --watch",
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --ext .js,.vue src --fix",
     "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
@@ -30,32 +29,32 @@
     "extends @nextcloud/browserslist-config"
   ],
   "engines": {
-    "node": "^20.0.0",
-    "npm": "^9.0.0"
+    "node": "^22.0.0",
+    "npm": "^10.0.0"
   },
+  "type": "module",
   "dependencies": {
     "@mdi/svg": "^7.3.67",
     "@nextcloud/auth": "^2.0.0",
     "@nextcloud/axios": "^2.1.0",
-    "@nextcloud/dialogs": "^6.3.1",
+    "@nextcloud/dialogs": "^7.0.0-rc.1",
     "@nextcloud/event-bus": "^3.3.0",
-    "@nextcloud/files": "^3.0.0",
+    "@nextcloud/files": "^3.10.2",
     "@nextcloud/initial-state": "^2.0.0",
     "@nextcloud/l10n": "^3.1.0",
     "@nextcloud/moment": "^1.3.1",
     "@nextcloud/router": "^3.0.0",
-    "@nextcloud/vue": "^8.3.0",
-    "@nextcloud/vue-dashboard": "^2.0.1",
-    "vue": "^2.6.14",
+    "@nextcloud/vue": "^9.0.0-rc.2",
+    "vue": "^3.5.16",
     "vue-material-design-icons": "^5.1.1"
   },
   "devDependencies": {
-    "@nextcloud/babel-config": "^1.0.0",
-    "@nextcloud/browserslist-config": "^3.0.0",
-    "@nextcloud/eslint-config": "^8.2.1",
+    "@nextcloud/babel-config": "^1.2.0",
+    "@nextcloud/browserslist-config": "^3.0.1",
+    "@nextcloud/eslint-config": "^8.4.2",
     "@nextcloud/stylelint-config": "^3.0.1",
-    "@nextcloud/webpack-vue-config": "^6.0.0",
-    "eslint-webpack-plugin": "^4.0.1",
-    "stylelint-webpack-plugin": "^5.0.0"
+    "@nextcloud/vite-config": "^2.3.5",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-stylelint": "^6.0.0"
   }
 }

src/adminSettings.js

@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
-import './bootstrap.js'
+import { createApp } from 'vue'
 import AdminSettings from './components/AdminSettings.vue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
-Vue.directive('tooltip', Tooltip)
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
-const View = Vue.extend(AdminSettings)
-new View().$mount('#approval_prefs')
+const app = createApp(AdminSettings)
+
+app.mixin({ methods: { t, n } })
+app.mount('#approval_prefs')

src/approvalTab.js

@@ -3,15 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import ApprovalSvgIcon from '../img/app-no-color.svg'
-import { getRequestToken } from '@nextcloud/auth'
-import Vue from 'vue'
+import ApprovalSvgIcon from '../img/app-no-color.svg?raw'
+import { createApp } from 'vue'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import ApprovalTab from './views/ApprovalTab.vue'
 
-__webpack_nonce__ = btoa(getRequestToken()) // eslint-disable-line
-Vue.mixin({ methods: { t, n } })
-
-const View = Vue.extend(ApprovalTab)
 // Init approval tab component
 let TabInstance = null
 const approvalTab = new OCA.Files.Sidebar.Tab({
@@ -21,22 +17,27 @@ const approvalTab = new OCA.Files.Sidebar.Tab({
 
 	async mount(el, fileInfo, context) {
 		if (TabInstance) {
-			TabInstance.$destroy()
+			TabInstance.unmount()
 		}
-		TabInstance = new View({
-			// Better integration with vue parent component
-			parent: context,
-		})
+		const Tab = createApp(ApprovalTab)
+		Tab.mixin({ methods: { t, n } })
+
+		TabInstance = Tab.mount(el)
 		// Only mount after we have all the info we need
 		await TabInstance.update(fileInfo)
-		TabInstance.$mount(el)
 	},
+
 	update(fileInfo) {
-		TabInstance.update(fileInfo)
+		if (TabInstance && typeof TabInstance.update === 'function') {
+			TabInstance.update(fileInfo)
+		}
 	},
+
 	destroy() {
-		TabInstance.$destroy()
-		TabInstance = null
+		if (TabInstance) {
+			TabInstance.unmount()
+			TabInstance = null
+		}
 	},
 })
 

src/components/AdminSettings.vue

@@ -29,7 +29,7 @@
 				class="rules">
 				<ApprovalRule v-for="(rule, id) in rules"
 					:key="id"
-					v-model="rules[id]"
+					v-model:value="rules[id]"
 					class="approval-rule"
 					delete-icon="icon-delete"
 					@input="onRuleInput(id, $event)"
@@ -54,7 +54,7 @@
 				</NcEmptyContent>
 				<div v-if="newRule" class="new-rule">
 					<ApprovalRule
-						v-model="newRule"
+						v-model:value="newRule"
 						:delete-rule-label="newRuleDeleteLabel"
 						:focus="true"
 						@add-tag="onAddTagClick">
@@ -64,7 +64,7 @@
 								{{ newRuleDeleteLabel }}
 							</NcButton>
 							<NcButton
-								type="success"
+								variant="success"
 								:disabled="!newRuleIsValid"
 								@click="onValidateNewRule">
 								<template #icon>
@@ -120,8 +120,8 @@ import TagIcon from 'vue-material-design-icons/Tag.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcButton from '@nextcloud/vue/components/NcButton'
 
 import ApprovalRule from './ApprovalRule.vue'
 
@@ -168,6 +168,7 @@ export default {
 		},
 		invalidRuleMessage() {
 			const newRule = this.newRule
+			console.debug(newRule)
 			const noMissingField = newRule.description
 				&& newRule.tagPending
 				&& newRule.tagApproved
@@ -317,7 +318,7 @@ export default {
 					showSuccess(t('approval', 'New approval workflow created'))
 					const id = response.data
 					this.newRule = null
-					this.$set(this.rules, id, rule)
+					this.rules[id] = rule
 				}).catch((error) => {
 					showError(
 						t('approval', 'Failed to create approval workflow')
@@ -333,7 +334,7 @@ export default {
 			const url = generateUrl('/apps/approval/rule/' + id)
 			axios.delete(url).then((response) => {
 				showSuccess(t('approval', 'Approval workflow deleted'))
-				this.$delete(this.rules, id)
+				delete this.rules[id]
 			}).catch((error) => {
 				showError(
 					t('approval', 'Failed to delete approval workflow')

src/components/ApprovalButtons.vue

@@ -4,17 +4,13 @@
 -->
 <template>
 	<div class="buttons">
-		<NcButton
-			type="success"
-			@click="$emit('approve')">
+		<NcButton variant="success" @click="$emit('approve')">
 			<template #icon>
 				<CheckIcon :size="20" />
 			</template>
 			{{ approveText }}
 		</NcButton>
-		<NcButton
-			type="error"
-			@click="$emit('reject')">
+		<NcButton variant="error" @click="$emit('reject')">
 			<template #icon>
 				<CloseIcon :size="20" />
 			</template>
@@ -27,7 +23,7 @@
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcButton from '@nextcloud/vue/components/NcButton'
 
 export default {
 	name: 'ApprovalButtons',
@@ -49,36 +45,31 @@ export default {
 		},
 	},
 	data() {
-		return {
-		}
+		return {}
 	},
 
-	computed: {
-	},
+	computed: {},
 
-	watch: {
-	},
+	watch: {},
 
-	mounted() {
-	},
+	mounted() {},
 
-	methods: {
-	},
+	methods: {},
 }
 </script>
 
 <style scoped lang="scss">
 .buttons {
-	width: 100%;
-	display: flex;
-	// align-items: center;
-	// justify-content: center;
+  width: 100%;
+  display: flex;
+  // align-items: center;
+  // justify-content: center;
 
-	button {
-		margin: 0 4px 0 4px;
-		&:first-child {
-			margin-left: 0;
-		}
-	}
+  button {
+    margin: 0 4px 0 4px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
 }
 </style>