Migrate to vue3

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

Author: raimund-schluessler

package-lock.json

@@ -37,7 +37,8 @@
 		"@nextcloud/logger": "^2.3.0",
 		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/router": "^2.0.0",
-		"@nextcloud/vue": "^6.0.0",
+		"@nextcloud/vue": "github:nextcloud/nextcloud-vue#vue3",
+		"click-outside-vue3": "^4.0.1",
 		"color-convert": "^2.0.1",
 		"debounce": "^1.2.1",
 		"ical.js": "^1.5.0",
@@ -51,23 +52,20 @@
 		"p-limit": "^4.0.0",
 		"p-queue": "^6.6.2",
 		"uuid": "^8.3.2",
-		"v-click-outside": "^3.2.0",
-		"vue": "^2.7.13",
+		"vue": "^3.2.39",
 		"vue-material-design-icons": "^5.1.2",
-		"vue-router": "^3.6.5",
-		"vuedraggable": "^2.24.3",
-		"vuex": "^3.6.2",
-		"vuex-router-sync": "^5.0.0"
+		"vue-router": "^4.1.5",
+		"vuedraggable": "^4.1.0",
+		"vuex": "^4.0.2"
 	},
 	"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.1.2",
+		"@nextcloud/eslint-config": "github:nextcloud/eslint-config#vue3",
 		"@nextcloud/stylelint-config": "^2.3.0",
-		"@nextcloud/webpack-vue-config": "^5.3.0",
-		"@vue/test-utils": "^1.3.0",
-		"@vue/vue2-jest": "^29.1.1",
-		"babel-core": "^7.0.0-bridge.0",
+		"@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
+		"@vue/test-utils": "^2.1.0",
+		"@vue/vue3-jest": "^29.1.1",
 		"babel-jest": "^29.2.1",
 		"jest": "^29.2.1",
 		"jest-environment-jsdom": "^29.2.1",
@@ -100,11 +98,11 @@
 		"testEnvironment": "jsdom",
 		"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": [
-			"/node_modules/(?!(.*vue-material-design-icons)|(uuid))"
+			"/node_modules/(?!(.*vue-material-design-icons|.*vue-multiselect)|(uuid))"
 		],
 		"snapshotSerializers": [
 			"<rootDir>/node_modules/jest-serializer-vue"

package.json

@@ -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/App.vue

@@ -27,10 +27,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		:title="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,7 +120,6 @@ 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"
 					:placeholder="t('tasks', 'Save')"
 					@trailing-button-click="save(calendar)"
@@ -157,7 +157,7 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
 
-import ClickOutside from 'v-click-outside'
+import ClickOutside from 'click-outside-vue3'
 import { mapGetters, mapActions } from 'vuex'
 
 const CD_DURATION = 7

src/components/AppNavigation/ListItemCalendar.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/AppNavigation/Trashbin.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>
@@ -53,7 +53,7 @@ import Mila from 'markdown-it-link-attributes'
 import MarkdownItEmoji from 'markdown-it-emoji'
 import Mitl from 'markdown-it-task-lists'
 
-import ClickOutside from 'v-click-outside'
+import ClickOutside from 'click-outside-vue3'
 
 export default {
 	name: 'NotesItem',

src/components/AppSidebar/NotesItem.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/SliderItem.vue

@@ -29,7 +29,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					:placeholder="placeholder"
 					autocomplete="off"
 					class="reactive"
-					@keyup.27="clearNewTask($event)">
+					@keyup.escape="clearNewTask($event)">
 			</form>
 		</div>
 		<SortorderDropdown />

src/components/HeaderBar.vue

@@ -151,7 +151,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 						v-model="newTaskName"
 						:placeholder="subtasksCreationPlaceholder"
 						:disabled="isAddingTask"
-						@keyup.27="showSubtaskInput = false">
+						@keyup.escape="showSubtaskInput = false">
 				</form>
 			</div>
 			<TaskDragContainer :tasks="filteredSubtasksShown"
@@ -188,7 +188,7 @@ import CalendarClock from 'vue-material-design-icons/CalendarClock.vue'
 import Star from 'vue-material-design-icons/Star.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
 
-import ClickOutside from 'v-click-outside'
+import ClickOutside from 'click-outside-vue3'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 
 export default {

src/components/TaskBody.vue

@@ -20,41 +20,40 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<draggable tag="ol"
+	<!-- <draggable tag="ol"
 		:list="['']"
 		:set-data="setDragData"
 		v-bind="{group: 'tasks', swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3, disabled: disabled, filter: '.readOnly'}"
 		:move="onMove"
 		@add="onAdd"
-		@end="onEnd">
+		@end="onEnd"> -->
+	<ol>
 		<TaskBody v-for="task in sortedTasks"
 			:key="task.key"
 			:task="task"
 			:collection-string="collectionString" />
-	</draggable>
+	</ol>
+	<!-- </draggable> -->
 </template>
 
 <script>
 import Task from '../models/task.js'
 import { sort } from '../store/storeHelper.js'
 
-import draggable from 'vuedraggable'
+// import draggable from 'vuedraggable'
 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')),
+		// draggable,
 	},
 	props: {
 		tasks: {

src/components/TaskDragContainer.vue

@@ -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/dashboard.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)
 	})
 }