Merge pull request #1971 from nextcloud/vue3

chore: migrate the app to vue 3

package.json

@@ -31,14 +31,14 @@
     "@nextcloud/axios": "^2.4.0",
     "@nextcloud/calendar-js": "6.1.0",
     "@nextcloud/cdav-library": "1.1.0",
-    "@nextcloud/dialogs": "^5.1.1",
+    "@nextcloud/dialogs": "4.1.0",
     "@nextcloud/event-bus": "^3.1.0",
     "@nextcloud/initial-state": "2.1.0",
     "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/logger": "^2.7.0",
     "@nextcloud/moment": "^1.3.1",
     "@nextcloud/router": "^2.2.1",
-    "@nextcloud/vue": "8.5.1",
+    "@nextcloud/vue": "9.0.0-alpha.0",
     "@vueuse/components": "^10.7.2",
     "color-convert": "^2.0.1",
     "debounce": "^2.0.0",
@@ -51,25 +51,22 @@
     "markdown-it-task-lists": "^2.1.1",
     "md5": "^2.3.0",
     "p-limit": "^5.0.0",
+    "sortablejs-vue3": "^1.2.11",
     "uuid": "^9.0.1",
-    "vue": "^2.7.16",
-    "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": "^3.4.15",
+    "vue-material-design-icons": "^5.3.0",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^3.0.0",
-    "@nextcloud/eslint-config": "^8.3.0",
+    "@nextcloud/eslint-config": "github:nextcloud-libraries/eslint-config#vue3",
     "@nextcloud/stylelint-config": "^2.4.0",
-    "@nextcloud/vite-config": "^1.2.0",
-    "@vue/test-utils": "^1.3.6",
-    "babel-core": "^7.0.0-bridge.0",
-    "happy-dom": "^13.3.1",
+    "@nextcloud/vite-config": "github:nextcloud-libraries/nextcloud-vite-config#vue3",
+    "@vue/test-utils": "^2.4.4",
+    "happy-dom": "^13.3.8",
     "mockdate": "^3.0.5",
-    "regenerator-runtime": "^0.14.1",
     "vitest": "^1.2.2"
   },
   "engines": {

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/CalendarSharee.vue

@@ -39,8 +39,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 		<template #counter>
 			<NcCheckboxRadioSwitch :disabled="loading"
-				:checked="writeable"
-				@update:checked="editSharee">
+				:model-value="writeable"
+				@update:model-value="editSharee">
 				{{ t('tasks', 'Can edit') }}
 			</NcCheckboxRadioSwitch>
 		</template>

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="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

@@ -70,8 +70,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">
@@ -83,10 +83,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">
 									<NcDateTime class="timestamp" :timestamp="item.deletedAt" :ignore-seconds="true" />
 								</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/AppSidebar/TextItem.vue

@@ -36,7 +36,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				<input ref="input"
 					v-model="newValue"
 					type="string"
-					@keyup.27="setEditing(false)"
+					@keyup.escape="setEditing(false)"
 					@keydown.enter.prevent="setValue()">
 			</div>
 		</div>

src/components/FilterDropdown.vue

@@ -36,8 +36,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			:multiple="true"
 			:append-to-body="true"
 			:options="tags"
-			:value="filter.tags"
-			@input="setTags">
+			:model-value="filter.tags"
+			@update:model-value="setTags">
 			<template #icon>
 				<TagMultiple :size="20" />
 			</template>

src/components/HeaderBar.vue

@@ -24,7 +24,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		<div v-if="$route.params.collectionId !== 'completed' && calendar && !calendar.readOnly"
 			class="header__input">
 			<NcTextField ref="input"
-				:value.sync="newTaskName"
+				v-model="newTaskName"
 				:label="placeholder"
 				autocomplete="off"
 				class="reactive"
@@ -35,7 +35,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				@keyup.esc="clearNewTask($event)"
 				@keyup.enter="addTask"
 				@paste.stop="addMultipleTasks">
-				<Plus :size="20" />
+				<template #icon>
+					<Plus :size="20" />
+				</template>
 			</NcTextField>
 		</div>
 		<FilterDropdown />

src/components/TaskBody.vue

@@ -80,7 +80,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>
@@ -151,7 +151,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="newTaskName"
 					:placeholder="subtasksCreationPlaceholder"
 					:label-outside="true"
 					:disabled="isAddingTask"
@@ -164,7 +164,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					@keyup.esc="showSubtaskInput = false"
 					@keyup.enter="addTask"
 					@paste.stop="addMultipleTasks">
-					<Plus :size="20" />
+					<template #icon>
+						<Plus :size="20" />
+					</template>
 				</NcTextField>
 			</div>
 			<TaskDragContainer :tasks="filteredSubtasksShown"

src/components/TaskDragContainer.vue

@@ -20,31 +20,32 @@ 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'
 
 export default {
 	name: 'TaskDragContainer',
 	components: {
-		draggable,
+		Sortable,
 	},
 	props: {
 		tasks: {
@@ -182,20 +183,23 @@ export default {
 		 *
 		 * @param {object} $event The event which caused the drop
 		 */
-		onAdd($event) {
+		async onAdd($event) {
 			let task
 			// The task to move
 			const taskAttribute = $event.item.attributes['task-id']
 			if (taskAttribute) {
 				task = this.getTask(taskAttribute.value)
 			}
+			// Remove the drag item from the DOM, so it doesn't show up twice.
+			const item = $event.item
+			item.parentElement?.removeChild(item)
 			/**
 			 * We have to adjust the sortOrder property of the tasks
 			 * to achieve the desired sort order.
 			 */
 			this.adjustSortOrder(task, $event.newIndex, -1)
 			// Move the task to a new calendar or parent.
-			this.prepareMoving(task, $event)
+			await this.prepareMoving(task, $event)
 			this.prepareCollecting(task, $event)
 			$event.stopPropagation()
 		},
@@ -244,7 +248,7 @@ export default {
 		 * @param {Task} task The task to change
 		 * @param {object} $event The event which caused the move
 		 */
-		prepareMoving(task, $event) {
+		async prepareMoving(task, $event) {
 			let parent, calendar
 			// The new calendar --> make the moved task a root task
 			const calendarAttribute = $event.to.attributes['calendar-id']
@@ -263,7 +267,7 @@ export default {
 				calendar = task.calendar
 			}
 			// Move the task to the appropriate calendar and parent.
-			this.moveTask({ task, calendar, parent })
+			await this.moveTask({ task, calendar, parent })
 		},
 
 		/**

src/dashboard.js

@@ -25,21 +25,13 @@
 import Dashboard from './views/Dashboard.vue'
 import store from './store/store.js'
 
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-Vue.prototype.$OC = OC
-Vue.prototype.$OCA = OCA
+import { createApp } from 'vue'
 
 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
 	})
 })