Migrate to vue3

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

package.json

@@ -37,7 +37,7 @@
 		"@nextcloud/logger": "^2.5.0",
 		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/router": "^2.1.1",
-		"@nextcloud/vue": "^7.10.0",
+		"@nextcloud/vue": "github:nextcloud/nextcloud-vue#vue3",
 		"@vueuse/components": "^10.1.0",
 		"color-convert": "^2.0.1",
 		"debounce": "^1.2.1",
@@ -50,23 +50,21 @@
 		"markdown-it-task-lists": "^2.1.1",
 		"md5": "^2.3.0",
 		"p-limit": "^4.0.0",
+		"sortablejs-vue3": "^1.2.8",
 		"uuid": "^9.0.0",
-		"vue": "^2.7.14",
+		"vue": "^3.2.47",
 		"vue-material-design-icons": "^5.2.0",
-		"vue-router": "^3.6.5",
-		"vuedraggable": "^2.24.3",
-		"vuex": "^3.6.2",
-		"vuex-router-sync": "^5.0.0"
+		"vue-router": "^4.1.6",
+		"vuex": "^4.1.0"
 	},
 	"devDependencies": {
-		"@nextcloud/babel-config": "^1.0.0-beta.1",
+		"@nextcloud/babel-config": "^1.0.0",
 		"@nextcloud/browserslist-config": "^2.3.0",
-		"@nextcloud/eslint-config": "^8.2.1",
+		"@nextcloud/eslint-config": "github:nextcloud/eslint-config#fe67f6b84e3c13eb0ea2478f44939abc2fe7c99c",
 		"@nextcloud/stylelint-config": "^2.3.0",
-		"@nextcloud/webpack-vue-config": "^5.5.1",
-		"@vue/test-utils": "^1.3.4",
-		"@vue/vue2-jest": "^29.2.4",
-		"babel-core": "^7.0.0-bridge.0",
+		"@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#1f4277c6ab14be63810f425ef6b762d8ca59697b",
+		"@vue/test-utils": "^2.3.2",
+		"@vue/vue3-jest": "^29.2.4",
 		"babel-jest": "^29.5.0",
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
@@ -97,9 +95,15 @@
 			"^Views/(.*)$": "<rootDir>/src/views/$1"
 		},
 		"testEnvironment": "jsdom",
+		"testEnvironmentOptions": {
+			"customExportConditions": [
+				"node",
+				"node-addons"
+			]
+		},
 		"transform": {
 			"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-			"^.+\\.vue$": "<rootDir>/node_modules/@vue/vue2-jest",
+			"^.+\\.vue$": "<rootDir>/node_modules/@vue/vue3-jest",
 			".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
 		},
 		"transformIgnorePatterns": [

src/App.vue

@@ -21,9 +21,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<NcContent app-name="tasks">
-		<AppNavigation @click.native="closeAppSidebar($event)" />
+		<AppNavigation @click="closeAppSidebar($event)" />
 
-		<NcAppContent @click.native="closeAppSidebar($event)">
+		<NcAppContent @click="closeAppSidebar($event)">
 			<RouterView />
 		</NcAppContent>
 
@@ -49,6 +49,7 @@ export default {
 		NcAppContent,
 		NcContent,
 	},
+	inject: ['$OCA'],
 	data() {
 		return {
 			searchString: '',

src/components/AppNavigation/ListItemCalendar.vue

@@ -27,10 +27,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		:name="calendar.displayName"
 		:class="{'list--edit': editing, 'list--deleted': !!deleteTimeout}"
 		class="list reactive"
-		@drop.native="dropTask"
-		@dragover.native="dragOver"
-		@dragenter.native="dragEnter"
-		@dragleave.native="dragLeave">
+		@drop="dropTask"
+		@dragover="dragOver"
+		@dragenter="dragEnter"
+		@dragleave="dragLeave">
 		<template #icon>
 			<NcAppNavigationIconBullet :color="calendar.color" />
 		</template>
@@ -111,6 +111,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			<ShareCalendar v-if="shareOpen && !calendar.readOnly && !deleteTimeout" :calendar="calendar" />
 			<div v-if="!deleteTimeout" :class="{error: nameError}" class="app-navigation-entry-edit">
 				<NcTextField ref="editListInput"
+					v-model:value="newCalendarName"
 					v-tooltip="{
 						content: tooltipMessage,
 						shown: showTooltip('list_' + calendar.id),
@@ -119,14 +120,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					type="text"
 					:show-trailing-button="newCalendarName !== ''"
 					trailing-button-icon="arrowRight"
-					:value.sync="newCalendarName"
 					:error="nameError"
 					:label="t('tasks', 'List name')"
 					@trailing-button-click="save(calendar)"
 					@keyup="checkName($event, calendar)">
 					<Pencil :size="16" />
 				</NcTextField>
-				<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
+				<Colorpicker :selected-color="selectedColor" @color-selected="setColor" />
 			</div>
 		</li>
 	</NcAppNavigationItem>

src/components/AppNavigation/Trashbin.vue

@@ -54,8 +54,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 							<div class="table__header">
 								&nbsp;
 							</div>
-							<template v-for="item in items">
-								<div :key="`${item.url}desc`" class="table__body">
+							<template v-for="item in items" :key="`${item.url}body`">
+								<div class="table__body">
 									<div class="icon-bullet"
 										:style="{ 'background-color': item.color }" />
 									<div class="item-description">
@@ -67,10 +67,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 										</div>
 									</div>
 								</div>
-								<div :key="`${item.url}date`" class="table__body table__body--deletedAt">
+								<div class="table__body table__body--deletedAt">
 									<Moment class="timestamp" :timestamp="item.deletedAt" />
 								</div>
-								<div :key="`${item.url}action`" class="table__body">
+								<div class="table__body">
 									<NcButton @click="restore(item)">
 										<template #icon>
 											<Undo :size="20" />

src/components/AppSidebar/CalendarPickerItem.vue

@@ -28,7 +28,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			:disabled="isDisabled"
 			:clearable="false"
 			:options="calendarsMap"
-			:value="calendarMap"
+			:model-value="calendarMap"
 			:placeholder="t('tasks', 'Select a calendar')"
 			:append-to-body="false"
 			@option:selected="change">

src/components/AppSidebar/MultiselectItem.vue

@@ -27,7 +27,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		<NcSelect label="displayName"
 			:disabled="isDisabled"
 			:options="options"
-			:value="value"
+			:model-value="value"
 			:placeholder="placeholder"
 			:multiple="false"
 			:searchable="false"

src/components/AppSidebar/NotesItem.vue

@@ -34,7 +34,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				<pre><span>{{ newValue }}</span><br><br></pre>
 				<textarea ref="note__editor"
 					v-model="newValue"
-					@keyup.27="setEditing(false)"
+					@keyup.escape="setEditing(false)"
 					@keydown.enter.ctrl.prevent="setValue()"
 					@change="setValue()" />
 			</div>
@@ -101,7 +101,7 @@ export default {
 	mounted() {
 		subscribe('tasks:edit-appsidebar-notes', this.setNotes)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		unsubscribe('tasks:edit-appsidebar-notes', this.setNotes)
 	},
 	methods: {

src/components/AppSidebar/SliderItem.vue

@@ -39,7 +39,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					type="number"
 					:min="minValue"
 					:max="maxValue"
-					@keyup.27="setEditing(false)"
+					@keyup.escape="setEditing(false)"
 					@keydown.enter.prevent="setValue()">
 				<input v-model="newValue"
 					type="range"

src/components/AppSidebar/TagsItem.vue

@@ -27,7 +27,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		<div class="multiselect__icon">
 			<component :is="icon" :size="20" />
 		</div>
-		<NcSelect :value="tags"
+		<NcSelect :model-value="tags"
 			taggable
 			:disabled="disabled"
 			:options="options"
@@ -36,7 +36,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			:close-on-select="false"
 			:append-to-body="false"
 			:tag-placeholder="t('tasks', 'Add this as a new tag')"
-			@input="setTags"
+			@update:model-value="setTags"
 			@tag="addTag">
 			<template #no-options>
 				{{ t('tasks', 'No tag available. Create one!') }}

src/components/HeaderBar.vue

@@ -23,7 +23,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 	<div class="header">
 		<div v-if="$route.params.collectionId !== 'completed' && calendar && !calendar.readOnly"
 			class="header__input">
-			<NcTextField :value.sync="newTaskName"
+			<NcTextField v-model:value="newTaskName"
 				:label="placeholder"
 				autocomplete="off"
 				class="reactive"

src/components/TaskBody.vue

@@ -81,7 +81,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					:size="20"
 					:title="t('tasks', 'Task has a note')"
 					@click="openAppSidebarTab($event, 'app-sidebar-tab-notes')"
-					@dblclick.native.stop="openAppSidebarTab($event, 'app-sidebar-tab-notes', true)" />
+					@dblclick.stop="openAppSidebarTab($event, 'app-sidebar-tab-notes', true)" />
 				<div v-if="task.due || task.completed" :class="{'date--overdue': overdue(task.dueMoment) && !task.completed}" class="date">
 					<span class="date__short" :class="{ 'date__short--completed': task.completed }">{{ dueDateShort }}</span>
 					<span class="date__long" :class="{ 'date__long--date-only': task.allDay && !task.completed, 'date__long--completed': task.completed }">{{ dueDateLong }}</span>
@@ -146,7 +146,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				v-click-outside="closeSubtaskInput"
 				class="task-item task-item__input">
 				<NcTextField ref="input"
-					:value.sync="newTaskName"
+					v-model:value="newTaskName"
 					:label="subtasksCreationPlaceholder"
 					:disabled="isAddingTask"
 					autocomplete="off"

src/components/TaskDragContainer.vue

@@ -20,41 +20,39 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<draggable tag="ol"
-		:list="['']"
+	<Sortable tag="ol"
+		:list="sortedTasks"
 		:set-data="setDragData"
-		v-bind="{group: 'tasks', swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3, disabled: disabled, filter: '.readOnly'}"
-		:move="onMove"
+		item-key="key"
+		:options="{group: 'tasks', swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3, disabled: disabled, filter: '.readOnly'}"
+		@move="onMove"
 		@add="onAdd"
 		@end="onEnd">
-		<TaskBody v-for="task in sortedTasks"
-			:key="task.key"
-			:task="task"
-			:collection-string="collectionString" />
-	</draggable>
+		<template #item="{element}">
+			<TaskBody :task="element"
+				:collection-string="collectionString" />
+		</template>
+	</Sortable>
 </template>
 
 <script>
 import Task from '../models/task.js'
 import { sort } from '../store/storeHelper.js'
 
-import draggable from 'vuedraggable'
+import { Sortable } from 'sortablejs-vue3'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 export default {
 	name: 'TaskDragContainer',
 	components: {
 		/**
 		 * We asynchronously import here, because we have a circular dependency
 		 * between TaskDragContainer and TaskBody which otherwise cannot be resolved.
-		 * See https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-		 *
-		 * We load it "eager", because the TaskBody will always be required.
-		 *
-		 * @return {object} The TaskBody component
+		 * See https://vuejs.org/guide/components/async.html#basic-usage
 		 */
-		TaskBody: () => import(/* webpackMode: "eager" */ './TaskBody.vue'),
-		draggable,
+		TaskBody: defineAsyncComponent(() => import('./TaskBody.vue')),
+		Sortable,
 	},
 	props: {
 		tasks: {
@@ -96,6 +94,7 @@ export default {
 		}),
 
 		setDragData: (dataTransfer) => {
+			console.debug('setDragData')
 			// We do nothing here, this just prevents
 			// vue.draggable from setting data on the
 			// dataTransfer object.
@@ -173,6 +172,7 @@ export default {
 		 * @param {object} $event The event which caused the drop
 		 */
 		onEnd($event) {
+			console.debug('end' + $event)
 			// Don't do anything if the tasks are not sorted but moved.
 			if ($event.to !== $event.from) {
 				return
@@ -193,6 +193,7 @@ export default {
 		 * @param {object} $event The event which caused the drop
 		 */
 		onAdd($event) {
+			console.debug('add' + $event)
 			let task
 			// The task to move
 			const taskAttribute = $event.item.attributes['task-id']
@@ -221,6 +222,7 @@ export default {
 		 * @return {boolean} If the drop is allowed
 		 */
 		onMove($event) {
+			console.debug('move' + $event)
 			// The task to move
 			const taskAttribute = $event.dragged.attributes['task-id']
 			if (taskAttribute) {

src/dashboard.js

@@ -29,32 +29,20 @@ import './css/dashboard.scss'
 
 import { generateFilePath } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
-import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
+import { createApp } from 'vue'
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(getRequestToken())
 
 // eslint-disable-next-line
 __webpack_public_path__ = generateFilePath('tasks', '', 'js/')
 
-Vue.prototype.t = t
-Vue.prototype.n = n
-Vue.prototype.$OC = OC
-Vue.prototype.$OCA = OCA
-Vue.prototype.$appVersion = appVersion
-
 document.addEventListener('DOMContentLoaded', () => {
 	OCA.Dashboard.register('tasks', (el) => {
-		const View = Vue.extend(Dashboard)
-		const vm = new View({
-			propsData: {},
-			store,
-		}).$mount(el)
-		return vm
+		const item = createApp(Dashboard)
+			.use(store)
+			.mount(el)
+		return item
 	})
 })

src/helpers/selector.js

@@ -25,27 +25,21 @@
  */
 import store from '../store/store.js'
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 const buildSelector = (selector, propsData = {}) => {
 	return new Promise((resolve, reject) => {
 		const container = document.createElement('div')
 		document.getElementById('body-user').append(container)
-		const View = Vue.extend(selector)
-		const ComponentVM = new View({
-			propsData,
-			store,
-		}).$mount(container)
-		ComponentVM.$root.$on('close', () => {
-			ComponentVM.$el.remove()
-			ComponentVM.$destroy()
-			reject(new Error('Selection canceled'))
-		})
-		ComponentVM.$root.$on('select', (id) => {
-			ComponentVM.$el.remove()
-			ComponentVM.$destroy()
-			resolve(id)
+		const dialog = createApp(selector, {
+			...propsData,
+			onClose() {
+				dialog.$el.remove()
+				reject(new Error('Selection canceled'))
+			},
 		})
+			.use(store)
+			.mount(container)
 	})
 }