fix: rename parameter names deprecated in vue3

Signed-off-by: grnd-alt <github@belakkaf.net>

package-lock.json

@@ -26,6 +26,7 @@
         "@vue/compat": "^3.5.13",
         "@vue/compiler-sfc": "^3.5.13",
         "@vue/vue3-jest": "^29.2.6",
+        "@vueuse/core": "^13.1.0",
         "blueimp-md5": "^2.19.0",
         "chroma-js": "^3.1.2",
         "dompurify": "^3.2.5",
@@ -3757,6 +3758,100 @@
         "vue": "^3.4.20"
       }
     },
+    "node_modules/@nextcloud/dialogs/node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
+    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/core": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.3.0.tgz",
+      "integrity": "sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "11.3.0",
+        "@vueuse/shared": "11.3.0",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/metadata": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.3.0.tgz",
+      "integrity": "sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/shared": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.3.0.tgz",
+      "integrity": "sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nextcloud/eslint-config": {
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/@nextcloud/eslint-config/-/eslint-config-8.4.2.tgz",
@@ -5381,9 +5476,9 @@
       "license": "MIT"
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.20",
+      "version": "0.0.21",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
-      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
       "license": "MIT"
     },
     "node_modules/@types/ws": {
@@ -5886,62 +5981,38 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "11.3.0",
+      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.1.0.tgz",
-      "integrity": "sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==",
+      "integrity": "sha512-PAauvdRXZvTWXtGLg8cPUFjiZEddTqmogdwYpnn60t08AA5a8Q4hZokBnpTOnVNqySlFlTcRYIC8OqreV4hv3Q==",
       "license": "MIT",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.20",
+        "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "11.3.0",
+        "@vueuse/metadata": "13.1.0",
-        "@vueuse/shared": "11.3.0",
+        "@vueuse/shared": "13.1.0"
-        "vue-demi": ">=0.14.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.3.0.tgz",
-      "integrity": "sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==",
-      "license": "MIT",
-      "dependencies": {
-        "vue-demi": ">=0.14.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.5.0"
-        "vue": "^3.0.0-0 || ^2.6.0"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.1.0.tgz",
+      "integrity": "sha512-IVS/qRRjhPTZ6C2/AM3jieqXACGwFZwWTdw5sNTSKk2m/ZpkuuN+ri+WCVUP8TqaKwJYt/KuMwmXspMAw8E6ew==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       },
-      "peerDependenciesMeta": {
+      "peerDependencies": {
-        "@vue/composition-api": {
+        "vue": "^3.5.0"
-          "optional": true
-        }
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "11.3.0",
+      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.1.0.tgz",
-      "integrity": "sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==",
+      "integrity": "sha512-+TDd7/a78jale5YbHX9KHW3cEDav1lz1JptwDvep2zSG8XjCsVE+9mHIzjTOaPbHUAk5XiE4jXLz51/tS+aKQw==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"

package.json

@@ -47,6 +47,7 @@
     "@vue/compat": "^3.5.13",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/vue3-jest": "^29.2.6",
+    "@vueuse/core": "^13.1.0",
     "blueimp-md5": "^2.19.0",
     "chroma-js": "^3.1.2",
     "dompurify": "^3.2.5",

src/App.vue

@@ -7,6 +7,10 @@ import { NcAppContent, NcContent, NcModal } from '@nextcloud/vue'
 import CardMoveDialog from './CardMoveDialog.vue'
 import AppNavigation from './components/navigation/AppNavigation.vue'
 import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
+import {BoardApi} from './services/BoardApi.js'
+
+const boardApi = new BoardApi()
+
 export default {
 	name: 'App',
 	components: {
@@ -22,6 +26,12 @@ export default {
 			return this.$store.getters.config('cardDetailsInModal')
 		},
 	},
+	provide() {
+		return {
+			boardApi,
+		}
+	},
+
 	methods: {
 		hideModal() {
 			this.$router.push({ name: 'board' })

src/CardMoveDialog.vue

@@ -72,7 +72,7 @@ export default {
 	mounted() {
 		subscribe('deck:card:show-move-dialog', this.openModal)
 	},
-	destroyed() {
+	unmounted() {
 		unsubscribe('deck:card:show-move-dialog', this.openModal)
 	},
 	methods: {

src/components/Controls.vue

@@ -278,6 +278,7 @@ import SessionList from './SessionList.vue'
 import { isNotifyPushEnabled } from '../sessions.js'
 import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
 import { getCurrentUser } from '@nextcloud/auth'
+import { onClickOutside } from '@vueuse/core'
 
 export default {
 	name: 'Controls',
@@ -363,6 +364,11 @@ export default {
 			}
 		},
 	},
+	created() {
+		onClickOutside(() => {
+			this.hideAddStack()
+		})
+	},
 	beforeMount() {
 		subscribe('deck:board:show-new-card', this.clickShowAddCardModel)
 		subscribe('deck:board:toggle-filter-popover', this.triggerOpenFilters)
@@ -370,7 +376,7 @@ export default {
 		subscribe('deck:board:toggle-filter-by-me', this.triggerFilterByMe)
 
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		unsubscribe('deck:board:show-new-card', this.clickShowAddCardModel)
 		unsubscribe('deck:board:toggle-filter-popover', this.triggerOpenFilters)
 		unsubscribe('deck:board:clear-filter', this.triggerClearFilter)

src/components/KeyboardShortcuts.vue

@@ -6,7 +6,6 @@
 	<!--  :style="{top:cardTop, left:cardLeft}" -->
 	<div v-if="card && selector"
 		ref="shortcutModal"
-		v-click-outside="close"
 		class="keyboard-shortcuts__modal"
 		tabindex="0"
 		@keydown.esc="close">
@@ -18,6 +17,7 @@
 </template>
 <script>
 import DueDateSelector from './card/DueDateSelector.vue'
+import { onClickOutside } from '@vueuse/core'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { mapState } from 'vuex'
 import TagSelector from './card/TagSelector.vue'
@@ -50,8 +50,9 @@ export default {
 		subscribe('deck:card:show-assignment-selector', this.handleShowAssignemnt)
 		subscribe('deck:card:show-due-date-selector', this.handleShowDueDate)
 		subscribe('deck:card:show-label-selector', this.handleShowLabel)
+		onClickOutside(this.close)
 	},
-	destroyed() {
+	unmounted() {
 		document.removeEventListener('keydown', this.onKeydown)
 		unsubscribe('deck:card:show-assignment-selector', this.handleShowAssignemnt)
 		unsubscribe('deck:card:show-due-date-selector', this.handleShowDueDate)
@@ -259,6 +260,7 @@ export default {
 			this.$refs.shortcutModal?.focus()
 		},
 		close() {
+			console.log("HHHHH")
 			this.card = null
 			this.selector = null
 		},

src/components/board/Board.vue

@@ -63,7 +63,10 @@
 						data-click-closes-sidebar="true"
 						data-dragscroll-enabled
 						class="stack-draggable-wrapper">
-						<Stack :stack="stack" :dragging="draggingStack" data-click-closes-sidebar="true" />
+						<Stack :stack="stack"
+							:dragging="draggingStack"
+							data-click-closes-sidebar="true"
+							@open-card="openCard" />
 					</Draggable>
 				</Container>
 			</div>
@@ -165,14 +168,14 @@ export default {
 	created() {
 		this.session = createSession(this.id)
 		this.fetchData()
-		this.$root.$on('open-card', (cardId) => {
-			this.localModal = cardId
-		})
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		this.session.close()
 	},
 	methods: {
+		openCard(cardId) {
+
+		},
 		async fetchData() {
 			this.loading = true
 			try {

src/components/board/Stack.vue

@@ -102,7 +102,10 @@
 				<transition :appear="animate && !card.animated && (card.animated=true)"
 					:appear-class="'zoom-appear-class'"
 					:appear-active-class="'zoom-appear-active-class'">
-					<CardItem :id="card.id" ref="card" :dragging="draggingCard" />
+					<CardItem :id="card.id"
+						ref="card"
+						:dragging="draggingCard"
+						@open-card="openCard" />
 				</transition>
 			</Draggable>
 		</Container>
@@ -171,6 +174,9 @@ export default {
 			default: undefined,
 		},
 	},
+	emits: [
+		'open-card',
+	],
 	data() {
 		return {
 			editing: false,
@@ -233,6 +239,9 @@ export default {
 	},
 
 	methods: {
+		openCard(cardId) {
+			this.$emit('open-card', cardId)
+		},
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
 			// so we have to ignore it

src/components/card/Description.vue

@@ -175,7 +175,7 @@ export default {
 	mounted() {
 		this.setupEditor()
 	},
-	async beforeDestroy() {
+	async beforeUnmount() {
 		await this.destroyEditor()
 	},
 	methods: {

src/components/cards/CardItem.vue

@@ -88,6 +88,7 @@ import CardMenu from './CardMenu.vue'
 import CardCover from './CardCover.vue'
 import DueDate from './badges/DueDate.vue'
 import { getCurrentUser } from '@nextcloud/auth'
+import { emit } from '@nextcloud/event-bus'
 
 const TITLE_EDITING_STATE = {
 	OFF: 0,
@@ -120,6 +121,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['open-card'],
 	data() {
 		return {
 			highlight: false,
@@ -226,8 +228,9 @@ export default {
 				this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
 				return
 			}
-
+			emit('open-card', {
-			this.$root.$emit('open-card', this.card.id)
+				cardId: this.card.id,
+			})
 		},
 		triggerEditTitle() {
 			this.editingTitle = TITLE_EDITING_STATE.PENDING

src/components/navigation/AppNavigationBoard.vue

@@ -152,7 +152,7 @@
 </template>
 
 <script>
-import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
@@ -186,6 +186,7 @@ export default {
 		CheckIcon,
 		BoardCloneModal,
 		BoardExportModal,
+		NcLoadingIcon,
 	},
 	directives: {
 		ClickOutside,