Migrate to vue 3

Signed-off-by: Raimund Schlüßler <[email protected]>

package.json

@@ -40,7 +40,8 @@
 		"dist"
 	],
 	"dependencies": {
-		"@floating-ui/dom": "^1.1.0",
+		"@floating-ui/dom": "^1.1.1",
+		"@ckpack/vue-color": "^1.3.0",
 		"@nextcloud/auth": "^2.0.0",
 		"@nextcloud/axios": "^2.0.0",
 		"@nextcloud/browser-storage": "^0.2.0",
@@ -53,60 +54,66 @@
 		"@nextcloud/logger": "^2.2.1",
 		"@nextcloud/router": "^2.0.0",
 		"@skjnldsv/sanitize-svg": "^1.0.2",
+		"click-outside-vue3": "^4.0.1",
 		"debounce": "1.2.1",
 		"emoji-mart-vue-fast": "^12.0.1",
 		"escape-html": "^1.0.3",
-		"floating-vue": "^1.0.0-beta.19",
-		"focus-trap": "^7.1.0",
+		"floating-vue": "^2.0.0-beta.20",
+		"focus-trap": "^7.2.0",
 		"hammerjs": "^2.0.8",
 		"linkify-string": "^4.0.0",
 		"md5": "^2.3.0",
-		"splitpanes": "^2.4.1",
+		"splitpanes": "^3.1.1",
 		"string-length": "^5.0.1",
 		"striptags": "^3.2.0",
 		"tributejs": "^5.1.3",
-		"v-click-outside": "^3.2.0",
-		"vue": "^2.7.14",
-		"vue-color": "^2.8.1",
+		"vue": "^3.2.45",
+		"vue-datepicker-next": "^1.0.2",
 		"vue-material-design-icons": "^5.1.2",
-		"vue-multiselect": "^2.1.6",
-		"vue-select": "^3.20.2",
-		"vue2-datepicker": "^3.11.0"
+		"vue-multiselect": "^3.0.0-alpha.2",
+		"vue-select": "^4.0.0-beta.6"
+	},
+	"peerDependencies": {
+		"vue": "^3.2.45"
 	},
 	"engines": {
 		"node": "^16.0.0",
 		"npm": "^7.0.0 || ^8.0.0"
 	},
 	"devDependencies": {
-		"@cypress/vue2": "^2.0.1",
+		"@cypress/vue": "^5.0.3",
+		"@cypress/webpack-dev-server": "^3.1.0",
+		"@cypress/webpack-preprocessor": "5.15.6",
 		"@fontsource/roboto": "^4.5.8",
 		"@mdi/svg": "^7.0.96",
 		"@nextcloud/babel-config": "^1.0.0",
 		"@nextcloud/browserslist-config": "^2.3.0",
-		"@nextcloud/eslint-config": "^8.1.3",
+		"@nextcloud/eslint-config": "github:nextcloud/eslint-config#8fe45614b68e95639b64d6d3bac2d6821c1bb1af",
 		"@nextcloud/stylelint-config": "^2.3.0",
-		"@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#master",
-		"@vue/test-utils": "^1.3.0",
-		"@vue/tsconfig": "^0.1.3",
-		"@vue/vue2-jest": "^29.0.0",
-		"babel-jest": "^29.0.1",
+		"@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
+		"@vue/compiler-sfc": "^3.2.41",
+		"@vue/test-utils": "^2.1.0",
+		"@vue/vue3-jest": "^29.1.1",
+		"babel-jest": "^29.2.0",
+		"babel-loader": "^8.2.5",
 		"babel-loader-exclude-node-modules-except": "^1.2.1",
-		"cypress": "^12.3.0",
-		"cypress-visual-regression": "^1.5.0",
-		"eslint-plugin-cypress": "^2.11.1",
+		"css-loader": "^6.7.1",
+		"cypress": "^12.4.1",
+		"cypress-visual-regression": "^1.7.0",
+		"eslint-plugin-cypress": "^2.12.1",
 		"file-loader": "^6.2.0",
 		"gettext-extractor": "^3.5.4",
 		"gettext-parser": "^6.0.0",
 		"glob": "^8.0.3",
-		"jest": "^29.0.1",
+		"jest": "^29.4.1",
 		"jest-environment-jsdom": "29.4.1",
 		"jest-serializer-vue": "^3.1.0",
 		"jest-transform-stub": "^2.0.0",
 		"resolve-url-loader": "^5.0.0",
 		"sanitize-filename": "^1.6.3",
 		"url-loader": "^4.1.1",
 		"vue-eslint-parser": "^9.0.3",
-		"vue-styleguidist": "~4.56.2",
+		"vue-styleguidist": "~4.56.5",
 		"vue-template-compiler": "^2.7.14",
 		"webpack-node-externals": "^3.0.0"
 	},
@@ -116,13 +123,19 @@
 			"vue"
 		],
 		"testEnvironment": "jsdom",
+		"testEnvironmentOptions": {
+			"customExportConditions": [
+				"node",
+				"node-addons"
+			]
+		},
 		"transform": {
 			"^.+\\.js$": "babel-jest",
-			"^.+\\.vue$": "@vue/vue2-jest",
+			"^.+\\.vue$": "@vue/vue3-jest",
 			".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
 		},
 		"transformIgnorePatterns": [
-			"/node_modules/(?!vue-material-design-icons)"
+			"/node_modules/(?!(.*vue-material-design-icons|.*vue-multiselect))"
 		],
 		"snapshotSerializers": [
 			"<rootDir>/node_modules/jest-serializer-vue"

src/components/NcActionInput/NcActionInput.vue

@@ -126,8 +126,7 @@ For the multiselect component, all events will be passed through. Please see the
 					:disabled="disabled"
 					:class="{ focusable: isFocusable }"
 					class="action-input__multi"
-					v-bind="$attrs"
-					v-on="$listeners" />
+					v-bind="$attrs" />
 
 				<template v-else>
 					<div class="action-input__container">

src/components/NcActionRouter/NcActionRouter.vue

@@ -28,7 +28,7 @@
 			class="action-router focusable"
 			:aria-label="ariaLabel"
 			rel="nofollow noreferrer noopener"
-			@click.native="onClick">
+			@click="onClick">
 			<!-- @slot Manually provide icon -->
 			<slot name="icon">
 				<span :class="[isIconUrl ? 'action-router__icon--url' : icon]"