feat: upgrade to packages for vue 3

- vue3-notification
- vue-advanced-cropper 2
- vuedraggable 4
- vue-shortkey -> moved in repo

src/views/list/views/Kanban.vue

@@ -27,17 +27,14 @@
 				group="buckets"
 				:disabled="!canWrite"
 				:class="{'dragging-disabled': !canWrite}"
+				tag="transition-group"
+				:item-key="({id}) => `bucket${id}`"
+				:component-data="bucketDraggableComponentData"
 			>
-				<transition-group
-					type="transition"
-					:name="!dragBucket ? 'move-bucket': null"
-					tag="div"
-					class="kanban-bucket-container">
+				<template #item="{element: bucket, index: bucketIndex }">
 					<div
-						:key="`bucket${bucket.id}`"
 						class="bucket"
 						:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
-						v-for="(bucket, k) in buckets"
 					>
 						<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
 							<span
@@ -136,16 +133,15 @@
 								:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
 								:disabled="!canWrite"
 								:class="{'dragging-disabled': !canWrite}"
-								:data-bucket-index="k"
+								:data-bucket-index="bucketIndex"
 								class="dropper"
+								tag="transition-group"
+								:item-key="(task) => `bucket${bucket.id}-task${task.id}`"
+								:component-data="taskDraggableTaskComponentData"
 							>
-								<transition-group type="transition" :name="!drag ? 'move-card': null" tag="div">
-									<kanban-card
-										:key="`bucket${bucket.id}-task${task.id}`"
-										v-for="task in bucket.tasks"
-										:task="task"
-									/>
-								</transition-group>
+								<template #item="{element: task}">
+									<kanban-card :task="task" />
+								</template>
 							</draggable>
 						</div>
 						<div class="bucket-footer" v-if="canWrite">
@@ -181,7 +177,7 @@
 							</x-button>
 						</div>
 					</div>
-				</transition-group>
+				</template>
 			</draggable>
 
 			<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
@@ -251,6 +247,15 @@ import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveC
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
 import KanbanCard from '../../../components/tasks/partials/kanban-card'
 
+const DRAG_OPTIONS = {
+	// sortable options
+	animation: 150,
+	ghostClass: 'ghost',
+	dragClass: 'task-dragging',
+	delayOnTouchOnly: true,
+	delay: 150,
+}
+
 export default {
 	name: 'Kanban',
 	components: {
@@ -261,6 +266,8 @@ export default {
 	},
 	data() {
 		return {
+			dragOptions: DRAG_OPTIONS,
+
 			drag: false,
 			dragBucket: false,
 			sourceBucket: 0,
@@ -305,6 +312,21 @@ export default {
 		'$route.params.listId': 'loadBuckets',
 	},
 	computed: {
+		bucketDraggableComponentData() {
+			return {
+				type: 'transition',
+				tag: 'div',
+				name: !this.dragBucket ? 'move-bucket': null,
+				class: 'kanban-bucket-container',
+			}
+		},
+		taskDraggableTaskComponentData() {
+			return {
+				type: 'transition',
+				tag: 'div',
+				name: !this.drag ? 'move-card': null,
+			}
+		},
 		buckets: {
 			get() {
 				return this.$store.state.kanban.buckets
@@ -313,17 +335,6 @@ export default {
 				this.$store.commit('kanban/setBuckets', value)
 			},
 		},
-		dragOptions() {
-			const options = {
-				animation: 150,
-				ghostClass: 'ghost',
-				dragClass: 'task-dragging',
-				delay: 150,
-				delayOnTouchOnly: true,
-			}
-
-			return options
-		},
 		...mapState({
 			loadedListId: state => state.kanban.listId,
 			loading: state => state[LOADING] && state[LOADING_MODULE] === 'kanban',

src/views/list/views/List.vue

@@ -89,27 +89,28 @@
 						handle=".handle"
 						:disabled="!canWrite"
 						:class="{'dragging-disabled': !canWrite}"
+						item-key="id"
 					>
-						<single-task-in-list
-							:show-list-color="false"
-							:disabled="!canWrite"
-							:key="t.id"
-							:the-task="t"
-							@taskUpdated="updateTasks"
-							task-detail-route="task.detail"
-							v-for="t in tasks"
-						>
-							<span class="icon handle">
-								<icon icon="grip-lines"/>
-							</span>
-							<div
-								@click="editTask(t.id)"
-								class="icon settings"
-								v-if="!list.isArchived && canWrite"
+						<template #item="{element: t}">
+							<single-task-in-list
+								:show-list-color="false"
+								:disabled="!canWrite"
+								:the-task="t"
+								@taskUpdated="updateTasks"
+								task-detail-route="task.detail"
 							>
-								<icon icon="pencil-alt"/>
-							</div>
-						</single-task-in-list>
+								<span class="icon handle">
+									<icon icon="grip-lines"/>
+								</span>
+								<div
+									@click="editTask(t.id)"
+									class="icon settings"
+									v-if="!list.isArchived && canWrite"
+								>
+									<icon icon="pencil-alt"/>
+								</div>
+							</single-task-in-list>
+						</template>
 					</draggable>
 				</div>
 				<card