Merge pull request #1971 from nextcloud/vue3

chore: migrate the app to vue 3

Author: raimund-schluessler

package-lock.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": {

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

@@ -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/CalendarSharee.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/ListItemCalendar.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/AppNavigation/Trashbin.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/CalendarPickerItem.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/MultiselectItem.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/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"