chore: update to vuejs3 and nc34

package.json

@@ -41,15 +41,15 @@
     "@mdi/svg": "^7.4.47",
     "@nextcloud/auth": "^2.5.1",
     "@nextcloud/axios": "^2.5.1",
-    "@nextcloud/dialogs": "^6.3.2",
+    "@nextcloud/dialogs": "^7.3.0",
     "@nextcloud/event-bus": "^3.3.3",
-    "@nextcloud/files": "^3.12.0",
+    "@nextcloud/files": "^4.0.0",
     "@nextcloud/l10n": "^3.1.0",
     "@nextcloud/moment": "^1.3.4",
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/sharing": "^0.2.5",
-    "@nextcloud/vue": "^8.27.0",
+    "@nextcloud/vue": "^9.5.0",
     "@raruto/leaflet-elevation": "^2.5.2",
     "axios": "^1.13.5",
     "geojson": "^0.5.0",
@@ -70,23 +70,21 @@
     "nouislider": "^15.8.1",
     "opening_hours": "^3.9.0",
     "ua-parser-js": "^2.0.5",
-    "vue": "^2.7.16",
-    "vue-click-outside": "^1.1.0",
-    "vue-loader": "^15.11.1",
+    "vue": "^3.4.21",
+    "vue-loader": "^17.4.2",
     "vue-material-design-icons": "^5.3.1",
     "vue-types": "^5.1.3",
-    "vue2-leaflet": "^2.6.0",
-    "vue2-leaflet-markercluster": "^3.1.0",
-    "vuex": "^3.6.2"
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@nextcloud/babel-config": "^1.3.0",
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/eslint-config": "^8.4.1",
     "@nextcloud/stylelint-config": "^3.1.0",
-    "@nextcloud/webpack-vue-config": "^6.3.0",
+    "@nextcloud/webpack-vue-config": "^7.0.0",
     "@types/leaflet": "^1.9.21",
+    "@vue/compiler-sfc": "^3.4.21",
     "@vue/tsconfig": "^0.5.1",
     "typescript": "^5.9.2"
   }

src/bootstrap.js

@@ -20,23 +20,13 @@
  *
  */
 
-import Vue from 'vue'
 import { Icon } from 'leaflet'
 
-Vue.prototype.t = window.t
-Vue.prototype.n = window.n
-Vue.prototype.OC = window.OC
-Vue.prototype.OCA = window.OCA
-
-/* if (process && process.env.NODE_ENV === 'development') {
-	Vue.config.devtools = true
-} */
-
 // this is needed to get default marker icons
 delete Icon.Default.prototype._getIconUrl
 
 Icon.Default.mergeOptions({
-	iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
-	iconUrl: require('leaflet/dist/images/marker-icon.png').default,
-	shadowUrl: require('leaflet/dist/images/marker-shadow.png').default,
-})
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+})

src/components/AppNavigationContactsItem.vue

@@ -8,68 +8,64 @@
 		:force-menu="false"
 		@click="onContactsClick"
 		@update:open="onUpdateOpen">
-		<NcCounterBubble v-show="enabled && contacts.length"
-			slot="counter">
-			{{ contacts.length > 99 ? '99+' : contacts.length }}
-		</NcCounterBubble>
-		<template v-if="enabled" slot="actions">
-			<NcActionButton
-				icon="icon-checkmark"
-				@click="onToggleAllClick">
-				{{ t('maps', 'Toggle all') }}
-			</NcActionButton>
-			<NcActionButton
-				icon="icon-search"
-				:close-after-click="true"
-				@click="onZoomAllClick">
-				{{ t('maps', 'Zoom') }}
-			</NcActionButton>
-			<NcActionButton v-if="!isPublic()"
-				icon="icon-share"
-				:close-after-click="true"
-				@click="$emit('add-to-map-all-contacts')">
-				{{ t('maps', 'Copy to map') }}
-			</NcActionButton>
-		</template>
-		<template slot="default">
-			<b v-show="false">dummy</b>
-			<NcAppNavigationItem
-				v-for="(g, gid) in groups"
-				:key="gid"
-				icon="icon-group"
-				:name="g.name"
-				:class="{ 'subitem-disabled': !g.enabled }"
-				:allow-collapse="false"
-				:force-menu="false"
-				@click="onGroupClick(gid)">
-				<NcCounterBubble v-show="enabled && g.enabled"
-					slot="counter">
-					{{ g.counter > 99 ? '99+' : g.counter }}
-				</NcCounterBubble>
-				<template slot="actions">
-					<NcActionButton v-if="enabled && g.enabled"
-						icon="icon-search"
-						:disabled="!g.enabled || g.counter === 0"
-						:close-after-click="true"
-						@click="onZoomGroupClick(gid)">
-						{{ t('maps', 'Zoom') }}
-					</NcActionButton>
-					<NcActionButton v-if="!isPublic()"
-						icon="icon-share"
-						:close-after-click="true"
-						@click="$emit('add-to-map-contact-group', gid)">
-						{{ t('maps', 'Copy to map') }}
-					</NcActionButton>
-				</template>
-			</NcAppNavigationItem>
-		</template>
+			<template #counter>
+				<NcCounterBubble v-show="enabled && contacts.length" :count="contacts.length" />
+			</template>
+			<template v-if="enabled" v-slot:actions>
+				<NcActionButton
+					icon="icon-checkmark"
+					@click="onToggleAllClick">
+					{{ t('maps', 'Toggle all') }}
+				</NcActionButton>
+				<NcActionButton
+					icon="icon-search"
+					:close-after-click="true"
+					@click="onZoomAllClick">
+					{{ t('maps', 'Zoom') }}
+				</NcActionButton>
+				<NcActionButton v-if="!isPublic()"
+					icon="icon-share"
+					:close-after-click="true"
+					@click="$emit('add-to-map-all-contacts')">
+					{{ t('maps', 'Copy to map') }}
+				</NcActionButton>
+			</template>
+			<template v-slot:default>
+				<b v-show="false">dummy</b>
+				<NcAppNavigationItem
+					v-for="(g, gid) in groups"
+					:key="gid"
+					icon="icon-group"
+					:name="g.name"
+					:class="{ 'subitem-disabled': !g.enabled }"
+					:allow-collapse="false"
+					:force-menu="false"
+					@click="onGroupClick(gid)">
+					<template #counter>
+						<NcCounterBubble v-show="enabled && g.enabled" :count="g.counter" />
+					</template>
+					<template v-slot:actions>
+						<NcActionButton v-if="enabled && g.enabled"
+							icon="icon-search"
+							:disabled="!g.enabled || g.counter === 0"
+							:close-after-click="true"
+							@click="onZoomGroupClick(gid)">
+							{{ t('maps', 'Zoom') }}
+						</NcActionButton>
+						<NcActionButton v-if="!isPublic()"
+							icon="icon-share"
+							:close-after-click="true"
+							@click="$emit('add-to-map-contact-group', gid)">
+							{{ t('maps', 'Copy to map') }}
+						</NcActionButton>
+					</template>
+				</NcAppNavigationItem>
+			</template>
 	</NcAppNavigationItem>
 </template>
 
 <script>
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import { NcAppNavigationItem, NcActionButton, NcCounterBubble} from '@nextcloud/vue'
 import optionsController from '../optionsController.js'
 import { isPublic } from '../utils/common.js'
 

src/components/AppNavigationDeviceItem.vue

@@ -5,7 +5,7 @@
 		:allow-collapse="false"
 		:force-menu="false"
 		@click="$emit('click', device)">
-		<template slot="icon">
+		<template v-slot:icon>
 			<div v-if="device.loading"
 				class="app-navigation-entry-icon icon-loading-small " />
 			<div v-else
@@ -20,10 +20,10 @@
 				@change="updateDeviceColor"
 				@click.stop="">
 		</template>
-		<template slot="counter">
+		<template #counter>
 			&nbsp;
 		</template>
-		<template slot="actions">
+		<template v-slot:actions>
 			<NcActionButton v-if="parentEnabled && device.enabled"
 				icon="icon-category-monitoring"
 				:close-after-click="true"
@@ -67,8 +67,7 @@
 </template>
 
 <script>
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import { NcAppNavigationItem, NcActionButton } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import { isComputer } from '../utils.js'
 import { isPublic } from '../utils/common.js'

src/components/AppNavigationDevicesItem.vue

@@ -8,11 +8,10 @@
 		:force-menu="false"
 		@click="onClick"
 		@update:open="onUpdateOpen">
-		<NcCounterBubble v-show="enabled && devices.length"
-			slot="counter">
-			{{ devices.length > 99 ? '99+' : devices.length }}
-		</NcCounterBubble>
-		<template v-if="enabled" slot="actions">
+		<template #counter>
+			<NcCounterBubble v-show="enabled && devices.length" :count="devices.length" />
+		</template>
+		<template v-if="enabled" #actions>
 			<NcActionButton
 				icon="icon-download"
 				:close-after-click="true"
@@ -41,7 +40,7 @@
 				{{ t('maps', 'Delete all') }}
 			</NcActionButton>
 		</template>
-		<template slot="default">
+		<template #default>
 			<b v-show="false">dummy</b>
 			<AppNavigationDeviceItem
 				v-for="device in sortedDevices"
@@ -62,9 +61,7 @@
 </template>
 
 <script>
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import { NcAppNavigationItem, NcActionButton, NcCounterBubble } from '@nextcloud/vue'
 
 import AppNavigationDeviceItem from './AppNavigationDeviceItem.vue'
 import optionsController from '../optionsController.js'

src/components/AppNavigationFavoritesItem.vue

@@ -8,11 +8,10 @@
 		:force-menu="false"
 		@click="onFavoritesClick"
 		@update:open="onUpdateOpen">
-		<NcCounterBubble v-show="enabled && nbFavorites"
-			slot="counter">
-			{{ nbFavorites > 99 ? '99+' : nbFavorites }}
-		</NcCounterBubble>
-		<template v-if="enabled" slot="actions">
+		<template #counter>
+			<NcCounterBubble v-show="enabled && nbFavorites" :count="nbFavorites" />
+		</template>
+		<template v-if="enabled" #actions>
 			<NcActionButton v-if="!readOnly"
 				:icon="draggable ? 'icon-hand' : 'icon-hand-slash'"
 				:close-after-click="false"
@@ -43,7 +42,7 @@
 				{{ t('maps', 'Import') }}
 			</NcActionButton>
 		</template>
-		<template slot="default">
+		<template #default>
 			<NcAppNavigationNew
 				v-if="enabled && !readOnly"
 				:text="addFavoriteText"
@@ -65,11 +64,10 @@
 					<div :class="{ favoriteMarker: true, navigationFavoriteMarkerDark: isDarkTheme, navigationFavoriteMarker: !isDarkTheme }"
 						:style="'background-color: #' + c.color" />
 				</template>
-				<NcCounterBubble v-show="enabled && nbFavorites && c.enabled"
-					slot="counter">
-					{{ c.counter > 99 ? '99+' : c.counter }}
-				</NcCounterBubble>
-				<template slot="actions">
+				<template #counter>
+					<NcCounterBubble v-show="enabled && nbFavorites && c.enabled" :count="c.counter" />
+				</template>
+				<template #actions>
 					<NcActionButton v-if="enabled && nbFavorites && c.enabled && c.isUpdateable"
 						icon="icon-add"
 						:close-after-click="true"
@@ -125,11 +123,7 @@
 </template>
 
 <script>
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import { NcAppNavigationItem, NcAppNavigationNew, NcActionButton, NcActionCheckbox, NcCounterBubble } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
 import { isPublic } from '../utils/common.js'
@@ -237,9 +231,9 @@ export default {
 					console.debug(error)
 					showError(t('maps', 'Link {url} could not be copied to clipboard.', { url }))
 				}
-				this.$set(this.isLinkCopied, category.name, true)
+				this.isLinkCopied[category.name] = true
 				setTimeout(() => {
-					this.$delete(this.isLinkCopied, category.name)
+					delete this.isLinkCopied[category.name]
 				}, 5000)
 			} catch (error) {
 				console.debug(error)

src/components/AppNavigationMyMapItem.vue

@@ -8,7 +8,7 @@
 		:edit-label="t('maps', 'Rename')"
 		@click="$emit('click', myMap)"
 		@update:name="onRename">
-		<template slot="icon">
+		<template #icon>
 			<div class="icon icon-location" />
 			<input v-show="false"
 				ref="col"
@@ -18,10 +18,10 @@
 				@change="updateMyMapColor"
 				@click.stop="">
 		</template>
-		<template slot="counter">
+		<template #counter>
 			&nbsp;
 		</template>
-		<template slot="actions">
+		<template #actions>
 			<NcActionLink v-if="myMap.id"
 				target="_blank"
 				:href="folderUrl"
@@ -56,9 +56,7 @@
 </template>
 
 <script>
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import { NcAppNavigationItem, NcActionButton, NcActionLink } from '@nextcloud/vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
 import { generateUrl } from '@nextcloud/router'