Migrate to vue3

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

package.json

@@ -39,6 +39,7 @@
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue": "^5.3.1",
 		"@nextcloud/vue-dashboard": "^2.0.1",
+		"click-outside-vue3": "^4.0.1",
 		"color-convert": "^2.0.1",
 		"debounce": "^1.2.1",
 		"ical.js": "^1.5.0",
@@ -52,25 +53,23 @@
 		"p-limit": "^4.0.0",
 		"p-queue": "^6.6.2",
 		"uuid": "^8.3.2",
-		"v-click-outside": "^3.1.2",
 		"v-tooltip": "^2.1.3",
-		"vue": "^2.6.14",
+		"vue": "^3.2.33",
 		"vue-clipboard2": "^0.3.3",
 		"vue-material-design-icons": "^5.0.0",
-		"vue-router": "^3.5.3",
-		"vuedraggable": "^2.24.3",
-		"vuex": "^3.6.2",
-		"vuex-router-sync": "^5.0.0"
+		"vue-router": "^4.0.14",
+		"vuedraggable": "^4.1.0",
+		"vuex": "^4.0.2",
+		"vuex-router-sync": "^6.0.0-rc.1"
 	},
 	"devDependencies": {
-		"@nextcloud/babel-config": "^1.0.0-beta.1",
+		"@nextcloud/babel-config": "^1.0.0",
 		"@nextcloud/browserslist-config": "^2.2.0",
-		"@nextcloud/eslint-config": "^8.0.0",
+		"@nextcloud/eslint-config": "github:nextcloud/eslint-config#vue3",
 		"@nextcloud/stylelint-config": "^2.1.2",
-		"@nextcloud/webpack-vue-config": "^5.0.0",
-		"@vue/test-utils": "^1.3.0",
-		"@vue/vue2-jest": "^27.0.0-alpha.4",
-		"babel-core": "^7.0.0-bridge.0",
+		"@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
+		"@vue/test-utils": "^2.0.0-rc.21",
+		"@vue/vue3-jest": "^27.0.0-alpha.4",
 		"babel-jest": "^27.5.1",
 		"jest": "^27.5.1",
 		"jest-environment-jsdom": "^27.5.1",
@@ -102,7 +101,7 @@
 		"testEnvironment": "jsdom",
 		"transform": {
 			"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-			".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue2-jest"
+			".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue3-jest"
 		},
 		"transformIgnorePatterns": [
 			"/node_modules/(?!(.*vue-material-design-icons))"

src/App.vue

@@ -21,9 +21,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<Content app-name="tasks">
-		<AppNavigation @click.native="closeAppSidebar($event)" />
+		<AppNavigation @click="closeAppSidebar($event)" />
 
-		<AppContent @click.native="closeAppSidebar($event)">
+		<AppContent @click="closeAppSidebar($event)">
 			<RouterView />
 		</AppContent>
 
@@ -35,7 +35,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 import AppNavigation from './views/AppNavigation.vue'
 import client from './services/cdav.js'
 
-import { emit } from '@nextcloud/event-bus'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import Content from '@nextcloud/vue/dist/Components/Content'
@@ -49,12 +49,27 @@ export default {
 		AppContent,
 		Content,
 	},
+	data() {
+		return {
+			searchString: '',
+		}
+	},
 	computed: {
 		...mapGetters({
 			calendars: 'getTaskCalendars',
 		}),
 	},
+	mounted() {
+		subscribe('nextcloud:unified-search.search', this.filterProxy)
+		subscribe('nextcloud:unified-search.reset', this.cleanSearch)
+	},
+	beforeUnmount() {
+		unsubscribe('nextcloud:unified-search.search', this.filterProxy)
+		unsubscribe('nextcloud:unified-search.reset', this.cleanSearch)
+	},
 	async beforeMount() {
+		this.$store.dispatch('loadCollections')
+		this.$store.dispatch('loadSettings')
 		// get calendars then get tasks
 		await client.connect({ enableCalDAV: true })
 		await this.$store.dispatch('fetchCurrentUserPrincipal')
@@ -105,6 +120,15 @@ export default {
 				emit('tasks:close-appsidebar')
 			}
 		},
+		filterProxy({ query }) {
+			this.filter(query)
+		},
+		filter(query) {
+			this.$store.commit('setSearchQuery', query)
+		},
+		cleanSearch() {
+			this.$store.commit('setSearchQuery', '')
+		},
 	},
 }
 </script>

src/components/AppNavigation/Colorpicker.vue

@@ -59,6 +59,7 @@ export default {
 			default: '#31CC7C',
 		},
 	},
+	emits: ['color-selected'],
 	data() {
 		return {
 			random: '#31CC7C',

src/components/AppNavigation/ListItemCalendar.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>
 			<AppNavigationIconBullet :color="calendar.color" />
 		</template>
@@ -49,7 +49,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			<Avatar v-if="calendar.isSharedWithMe && loadedOwnerPrincipal" :user="ownerUserId" :display-name="ownerDisplayname" />
 			<div v-if="calendar.isSharedWithMe && !loadedOwnerPrincipal" class="icon icon-loading" />
 			<AppNavigationCounter v-if="calendarCount">
-				{{ calendarCount | counterFormatter }}
+				{{ counterFormatter(calendarCount) }}
 			</AppNavigationCounter>
 		</template>
 
@@ -159,7 +159,7 @@ import Pencil from 'vue-material-design-icons/Pencil'
 import ShareVariant from 'vue-material-design-icons/ShareVariant'
 import Undo from 'vue-material-design-icons/Undo'
 
-import ClickOutside from 'v-click-outside'
+import ClickOutside from 'click-outside-vue3'
 import { mapGetters, mapActions } from 'vuex'
 
 const CD_DURATION = 7
@@ -186,18 +186,6 @@ export default {
 	directives: {
 		clickOutside: ClickOutside.directive,
 	},
-	filters: {
-		counterFormatter(count) {
-			switch (false) {
-			case count !== 0:
-				return ''
-			case count < 999:
-				return '999+'
-			default:
-				return count
-			}
-		},
-	},
 	props: {
 		calendar: {
 			type: Object,
@@ -313,6 +301,16 @@ export default {
 			'deleteCalendar',
 			'moveTask',
 		]),
+		counterFormatter(count) {
+			switch (false) {
+			case count !== 0:
+				return ''
+			case count < 999:
+				return '999+'
+			default:
+				return count
+			}
+		},
 		/**
 		 * Handle the drag over
 		 *

src/components/AppNavigation/Trashbin.vue

@@ -53,8 +53,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">
@@ -66,10 +66,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">
 									<button @click="restore(item)">
 										{{ t('tasks','Restore') }}
 									</button>

src/components/AppSidebar/CalendarPickerItem.vue

@@ -72,6 +72,7 @@ export default {
 			required: false,
 		},
 	},
+	emits: ['change-calendar'],
 	computed: {
 		isDisabled() {
 			return this.calendars.length < 2 || this.disabled

src/components/AppSidebar/CheckboxItem.vue

@@ -56,6 +56,7 @@ export default {
 			default: '',
 		},
 	},
+	emits: ['set-checked'],
 }
 </script>
 

src/components/AppSidebar/MultiselectItem.vue

@@ -82,6 +82,7 @@ export default {
 			default: null,
 		},
 	},
+	emits: ['change-value'],
 	computed: {
 		isDisabled() {
 			return this.options.length < 2 || this.disabled

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>
@@ -52,7 +52,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/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

@@ -85,6 +85,10 @@ export default {
 			default: null,
 		},
 	},
+	emits: [
+		'add-tag',
+		'set-tags',
+	],
 	methods: {
 		t,
 

src/components/Header.vue

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

src/components/TaskBody.vue

@@ -149,7 +149,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"
@@ -184,7 +184,7 @@ import SortVariant from 'vue-material-design-icons/SortVariant'
 import Star from 'vue-material-design-icons/Star'
 import Undo from 'vue-material-design-icons/Undo'
 
-import ClickOutside from 'v-click-outside'
+import ClickOutside from 'click-outside-vue3'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 
 export default {

src/components/TaskCheckbox.vue

@@ -71,6 +71,7 @@ export default {
 			default: '',
 		},
 	},
+	emits: ['toggle-completed'],
 	computed: {
 		ariaLabel() {
 			if (this.cancelled && !this.completed) {

src/components/TaskCreateDialog.vue

@@ -112,6 +112,7 @@ export default {
 			default: '',
 		},
 	},
+	emits: ['close'],
 	data() {
 		return {
 			pendingTitle: '',

src/components/TaskStatusDisplay.vue

@@ -58,6 +58,10 @@ export default {
 			default: null,
 		},
 	},
+	emits: [
+		'status-clicked',
+		'reset-status',
+	],
 	data() {
 		return {
 			resetStatusTimeout: null,