Vue 3

package.json

@@ -36,6 +36,7 @@
 		"dist"
 	],
 	"dependencies": {
+		"@ckpack/vue-color": "^1.1.8",
 		"@nextcloud/auth": "^1.2.3",
 		"@nextcloud/axios": "^1.3.2",
 		"@nextcloud/browser-storage": "^0.1.1",
@@ -46,41 +47,44 @@
 		"@nextcloud/l10n": "^1.2.3",
 		"@nextcloud/logger": "^2.0.0",
 		"@nextcloud/router": "^2.0.0",
+		"@vue/compat": "^3.2.31",
+		"click-outside-vue3": "^4.0.1",
 		"debounce": "1.2.1",
 		"emoji-mart-vue-fast": "^10.2.1",
 		"escape-html": "^1.0.3",
+		"floating-vue": "^2.0.0-beta.14",
 		"hammerjs": "^2.0.8",
 		"linkify-string": "^3.0.2",
 		"md5": "^2.2.1",
-		"splitpanes": "^2.3.6",
+		"splitpanes": "^3.1.1",
 		"string-length": "^5.0.0",
 		"striptags": "^3.1.1",
 		"style-loader": "^3.3.1",
 		"tributejs": "^5.1.3",
-		"v-click-outside": "^3.0.1",
-		"v-tooltip": "^2.0.3",
-		"vue": "^2.6.14",
-		"vue-color": "^2.7.1",
+		"vue": "^3.2.31",
+		"vue-datepicker-next": "^1.0.2",
 		"vue-material-design-icons": "^5.0.0",
-		"vue-multiselect": "^2.1.6",
-		"vue2-datepicker": "^3.6.3"
+		"vue-multiselect": "^3.0.0-alpha.2"
+	},
+	"peerDependencies": {
+		"vue": "^3.2.31"
 	},
 	"engines": {
 		"node": "^14.0.0",
 		"npm": "^7.0.0"
 	},
 	"devDependencies": {
-		"@cypress/vue": "^2.2.4",
+		"@cypress/vue": "^3.1.1",
 		"@cypress/webpack-dev-server": "^1.8.4",
 		"@cypress/webpack-preprocessor": "5.11.1",
 		"@fontsource/roboto": "^4.5.5",
 		"@nextcloud/babel-config": "^1.0.0",
 		"@nextcloud/browserslist-config": "^2.1.0",
-		"@nextcloud/eslint-config": "^7.0.2",
+		"@nextcloud/eslint-config": "github:nextcloud/eslint-config#8fe45614b68e95639b64d6d3bac2d6821c1bb1af",
 		"@nextcloud/stylelint-config": "^2.1.2",
-		"@vue/test-utils": "^1.0.4",
-		"@vue/vue2-jest": "^27.0.0-alpha.4",
-		"babel-core": "^7.0.0-bridge.0",
+		"@vue/compiler-sfc": "^3.2.31",
+		"@vue/test-utils": "^2.0.0-rc.19",
+		"@vue/vue3-jest": "^27.0.0-alpha.4",
 		"babel-jest": "^27.0.1",
 		"babel-loader": "^8.1.0",
 		"babel-loader-exclude-node-modules-except": "^1.0.3",
@@ -105,9 +109,8 @@
 		"stylelint-webpack-plugin": "^3.2.0",
 		"url-loader": "^4.1.0",
 		"vue-eslint-parser": "^8.0.1",
-		"vue-loader": "^15.9.1",
+		"vue-loader": "^17.0.0",
 		"vue-styleguidist": "^4.44.27",
-		"vue-template-compiler": "^2.6.14",
 		"webpack": "^5.71.0",
 		"webpack-cli": "^4.0.0",
 		"webpack-merge": "^5.0.8",
@@ -121,7 +124,7 @@
 		"testEnvironment": "jsdom",
 		"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": [

src/components/Actions/Actions.vue

@@ -133,7 +133,7 @@ export default {
 </docs>
 <template>
 	<!-- if only one action, check if we need to bind to click or not -->
-	<element v-if="isValidSingleAction && !forceMenu"
+	<component v-if="isValidSingleAction && !forceMenu"
 		v-tooltip.auto="firstAction.text"
 		v-bind="firstActionBinding"
 		:class="{
@@ -156,7 +156,7 @@ export default {
 			<!-- @slot All action elements passed into the default slot will be used -->
 			<slot />
 		</span>
-	</element>
+	</component>
 
 	<!-- more than one action -->
 	<div v-else
@@ -451,7 +451,7 @@ export default {
 		},
 		// return the first action icon slot vnodes array
 		firstActionIconSlot() {
-			return this.firstAction?.$slots?.icon
+			return this.firstAction?.$slots.icon?.()
 		},
 		firstActionClass() {
 			const staticClass = this.firstActionVNode && this.firstActionVNode.data.staticClass
@@ -652,7 +652,7 @@ export default {
 		},
 		initActions() {
 			// filter out invalid slots
-			this.actions = (this.$slots.default || []).filter(node => !!node && !!node.componentOptions)
+			this.actions = (this.$slots.default?.() || []).filter(node => !!node && !!node.componentOptions)
 		},
 		onFocus(event) {
 			this.$emit('focus', event)

src/components/AppNavigationCaption/AppNavigationCaption.vue

@@ -46,7 +46,7 @@ export default {
 	computed: {
 		// Check if the actions slot is populated
 		hasActions() {
-			return !!this.$slots.actions
+			return !!this.$slots.actions()
 		},
 	},
 }

src/components/AppNavigationItem/AppNavigationItem.vue

@@ -134,7 +134,7 @@ Just set the `pinned` prop.
 			<!-- never show the icon over the collapsible if mobile -->
 			<div :class="{ 'icon-loading-small': loading, [icon]: icon && isIconShown }"
 				class="app-navigation-entry-icon">
-				<slot v-show="!loading && isIconShown" name="icon" />
+				<slot v-if="!loading && isIconShown" name="icon" />
 			</div>
 			<span v-if="!editingActive" class="app-navigation-entry__title" :title="title">
 				{{ title }}
@@ -202,7 +202,7 @@ Just set the `pinned` prop.
 </template>
 
 <script>
-import { directive as ClickOutside } from 'v-click-outside'
+import { directive as ClickOutside } from 'click-outside-vue3'
 
 import Actions from '../Actions/Actions'
 import ActionButton from '../ActionButton/ActionButton'
@@ -371,7 +371,7 @@ export default {
 	},
 	computed: {
 		collapsible() {
-			return this.allowCollapse && !!this.$slots.default
+			return this.allowCollapse && !!this.$slots?.default
 		},
 
 		// is the icon shown?
@@ -393,7 +393,7 @@ export default {
 		hasUtils() {
 			if (this.editing) {
 				return false
-			} else if (this.$slots.actions || this.$slots.counter || this.editable || this.undo) {
+			} else if (this.$slots?.actions || this.$slots?.counter || this.editable || this.undo) {
 				return true
 			} else {
 				return false

src/components/AppNavigationNewItem/AppNavigationNewItem.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import { directive as ClickOutside } from 'v-click-outside'
+import { directive as ClickOutside } from 'click-outside-vue3'
 
 import isMobile from '../../mixins/isMobile'
 import InputConfirmCancel from '../AppNavigationItem/InputConfirmCancel'

src/components/AppNavigationSettings/AppNavigationSettings.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { directive as ClickOutside } from 'v-click-outside'
+import { directive as ClickOutside } from 'click-outside-vue3'
 import { t } from '../../l10n'
 import { excludeClickOutsideClasses } from '../../mixins'
 

src/components/AppSettingsDialog/AppSettingsDialog.vue

@@ -58,6 +58,8 @@ import { t } from '../../l10n'
 
 import debounce from 'debounce'
 
+import { h } from 'vue'
+
 export default {
 
 	name: 'AppSettingsDialog',
@@ -119,7 +121,7 @@ export default {
 
 	mounted() {
 		// Select first settings section
-		this.selectedSection = this.$slots.default[0].componentOptions.propsData.title
+		this.selectedSection = this.$slots.default()[0].componentOptions.propsData.title
 	},
 
 	updated() {
@@ -204,26 +206,26 @@ export default {
 		},
 	},
 
-	render(createElement) {
+	render() {
 		/**
 		 * Build the navigation
 		 *
 		 * @return {object} the navigation
 		 */
 		const createAppSettingsNavigation = () => {
 			if (this.hasNavigation) {
-				return [createElement('div', {
+				return [h('div', {
 					attrs: {
 						class: 'app-settings__navigation',
 						role: 'tablist',
 						'aria-label': this.settingsNavigationAriaLabel,
 					},
-				}, [createElement('ul', {
+				}, [h('ul', {
 					attrs: {
 						class: 'navigation-list',
 						role: 'tablist',
 					},
-				}, this.getSettingsNavigation(this.$slots.default).map(item => {
+				}, this.getSettingsNavigation(this.$slots.default()).map(item => {
 					return createListElemtent(item)
 				}))])]
 			} else {
@@ -237,7 +239,7 @@ export default {
 		 * @param {object} item the navigation item
 		 * @return {object} the list element
 		 */
-		const createListElemtent = (item) => createElement('li', {}, [createElement('a', {
+		const createListElemtent = (item) => h('li', {}, [h('a', {
 			class: {
 				'navigation-list__link': true,
 				'navigation-list__link--active': item === this.selectedSection,
@@ -257,7 +259,7 @@ export default {
 
 		// Return value of the render function
 		if (this.open) {
-			return createElement('Modal', {
+			return h('Modal', {
 				attrs: {
 					container: this.container,
 					size: 'large',
@@ -266,17 +268,17 @@ export default {
 					close: () => { this.handleCloseModal() },
 				},
 			}, [
-				createElement('div', {
+				h('div', {
 					attrs: {
 						class: 'app-settings',
 					},
 				}, [...createAppSettingsNavigation(),
-					createElement('div', {
+					h('div', {
 						attrs: {
 							class: 'app-settings__content',
 						},
 						ref: 'settingsScroller',
-					}, this.$slots.default)]),
+					}, this.$slots.default())]),
 			])
 		} else {
 			return undefined

src/components/AppSidebar/AppSidebar.vue

@@ -265,7 +265,7 @@ import Tooltip from '../../directives/Tooltip'
 import AppSidebarTabs from './AppSidebarTabs'
 import EmptyContent from '../EmptyContent/EmptyContent'
 import { t } from '../../l10n'
-import { directive as ClickOutside } from 'v-click-outside'
+import { directive as ClickOutside } from 'click-outside-vue3'
 
 import Close from 'vue-material-design-icons/Close'
 import Star from 'vue-material-design-icons/Star'
@@ -407,7 +407,7 @@ export default {
 			return this.isStarred !== null
 		},
 		hasFigure() {
-			return this.$slots.header || this.background
+			return this.$slots.header() || this.background
 		},
 		hasFigureClickListener() {
 			return this.$listeners['figure-click']

src/components/AppSidebar/AppSidebarTabs.vue

@@ -46,7 +46,7 @@
 						role="tab"
 						@click.prevent="setActive(tab.id)">
 						<span class="app-sidebar-tabs__tab-icon">
-							<VNodes v-if="hasMdIcon(tab)" :vnodes="tab.$slots.icon[0]" />
+							<VNodes v-if="hasMdIcon(tab)" :vnodes="tab.$slots.icon()[0]" />
 							<span v-else :class="tab.icon" />
 						</span>
 						{{ tab.name }}
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+import { warn } from 'vue'
 
 import VNodes from '../VNodes/VNodes'
 
@@ -221,20 +221,20 @@ export default {
 		},
 
 		hasMdIcon(tab) {
-			return tab?.$slots?.icon
+			return tab?.$slots?.icon()
 		},
 
 		/**
 		 * Manually update the sidebar tabs according to $slots.default
 		 */
 		updateTabs() {
-			if (!this.$slots.default) {
+			if (!this.$slots.default()) {
 				this.tabs = []
 				return
 			}
 
 			// Find all valid children (AppSidebarTab, other components, text nodes, etc.)
-			const children = this.$slots.default.filter(elem => elem.tag || elem.text.trim())
+			const children = this.$slots.default().filter(elem => elem.tag || elem.text?.trim())
 
 			// Find all valid instances of AppSidebarTab
 			const invalidTabs = []
@@ -243,7 +243,7 @@ export default {
 				// Make sure all required props are provided and valid
 				if (IsValidString(tab?.name)
 					&& IsValidStringWithoutSpaces(tab?.id)
-					&& (IsValidStringWithoutSpaces(tab?.icon) || tab?.$slots?.icon)) {
+					&& (IsValidStringWithoutSpaces(tab?.icon) || tab?.$slots?.icon())) {
 					tabs.push(tab)
 				} else {
 					invalidTabs.push(tabNode)
@@ -253,7 +253,7 @@ export default {
 
 			// Tabs are optional, but you can use either tabs or non-tab-content only
 			if (tabs.length !== 0 && tabs.length !== children.length) {
-				Vue.util.warn('Mixing tabs and non-tab-content is not possible.')
+				warn('Mixing tabs and non-tab-content is not possible.')
 				invalidTabs.map(invalid => console.debug('Ignoring invalid tab', invalid))
 			}
 

src/components/Avatar/Avatar.vue

@@ -93,7 +93,7 @@
 <script>
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal'
 
-import { directive as ClickOutside } from 'v-click-outside'
+import { directive as ClickOutside } from 'click-outside-vue3'
 import { generateUrl } from '@nextcloud/router'
 import { getBuilder } from '@nextcloud/browser-storage'
 import { getCurrentUser } from '@nextcloud/auth'