Merge pull request #1169 from nextcloud/feat/upgrade-nc-vue

feat: Upgrade dependencies and migrate to nc/vue v8

package.json

@@ -33,28 +33,28 @@
     "stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.vue --fix"
   },
   "devDependencies": {
-    "@nextcloud/babel-config": "^1.0.0",
-    "@nextcloud/browserslist-config": "^3.0.0",
-    "@nextcloud/eslint-config": "^8.3.0",
-    "@nextcloud/eslint-plugin": "^2.0.0",
-    "@nextcloud/stylelint-config": "^2.4.0",
+    "@nextcloud/babel-config": "^1.2.0",
+    "@nextcloud/browserslist-config": "^3.0.1",
+    "@nextcloud/eslint-config": "^8.4.1",
+    "@nextcloud/eslint-plugin": "^2.2.1",
+    "@nextcloud/stylelint-config": "^3.0.1",
     "@nextcloud/webpack-vue-config": "^6.0.1",
-    "vue-template-compiler": "^2.7.15"
+    "vue-template-compiler": "^2.7.16"
   },
   "dependencies": {
-    "@nextcloud/axios": "^2.4.0",
-    "@nextcloud/dialogs": "^4.2.3",
-    "@nextcloud/event-bus": "^3.1.0",
-    "@nextcloud/router": "^2.2.0",
+    "@nextcloud/axios": "^2.5.0",
+    "@nextcloud/dialogs": "^5.3.1",
+    "@nextcloud/event-bus": "^3.3.1",
+    "@nextcloud/router": "^3.0.1",
     "@nextcloud/sharing": "^0.1.0",
-    "@nextcloud/vue": "^7.12.6",
+    "@nextcloud/vue": "^8.12.0",
     "email-validator": "^2.0.4",
-    "vue": "^2.7.15",
+    "vue": "^2.7.16",
     "vue-material-design-icons": "^5.3.0"
   },
   "engines": {
     "node": "^20.0.0",
-    "npm": "^9.0.0"
+    "npm": "^10.0.0"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"

src/components/GroupSelect.vue

@@ -1,23 +1,22 @@
 <template>
-	<NcMultiselect v-model="selected"
+	<NcSelect v-model="selected"
 		class="group-multiselect"
 		:placeholder="t('guests', 'None')"
-		track-by="gid"
 		label="name"
 		:options="groups"
 		:disabled="required && groups.length < 2"
-		open-direction="bottom"
+		placement="bottom"
 		:multiple="true"
-		:allow-empty="!required" />
+		:required="required" />
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 export default {
 	name: 'GroupSelect',
 	components: {
-		NcMultiselect,
+		NcSelect,
 	},
 	props: {
 		groups: {

src/components/GuestList.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="t('guests', 'Guests accounts')">
+	<NcSettingsSection :name="t('guests', 'Guests accounts')">
 		<div v-if="loaded && !error">
 			<table v-if="guests.length" class="table">
 				<thead>

src/components/LanguageSelect.vue

@@ -1,24 +1,23 @@
 <template>
-	<NcMultiselect v-model="language"
+	<NcSelect v-model="language"
 		class="lang-multiselect"
 		:placeholder="t('guests', 'Default')"
-		track-by="code"
 		label="name"
 		:options="merged"
 		:disabled="disabled"
-		open-direction="bottom"
-		:allow-empty="false" />
+		placement="bottom"
+		:required="true" />
 </template>
 
 <script>
 import { generateOcsUrl } from '@nextcloud/router'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import axios from '@nextcloud/axios'
 
 export default {
 	name: 'LanguageSelect',
 	components: {
-		NcMultiselect,
+		NcSelect,
 	},
 	props: {
 		value: {

src/views/GuestForm.vue

@@ -2,7 +2,7 @@
 	<NcModal v-if="isOpened"
 		id="app-guests"
 		:clear-view-delay="0"
-		:title="formatTitle"
+		:name="formatTitle"
 		@close="closeModal">
 		<!-- Main guest form -->
 		<div class="guest_model_content">

src/views/GuestSettings.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NcSettingsSection :title="t('guests', 'Guests')"
+		<NcSettingsSection :name="t('guests', 'Guests')"
 			:description="t('guests', 'Guest accounts are grouped under a virtual group in the account manager')">
 			<div>
 				<span v-if="error || saving || saved"
@@ -39,12 +39,11 @@
 				</NcCheckboxRadioSwitch>
 
 				<p v-if="config.useWhitelist" class="allowlist">
-					<NcMultiselect v-model="config.whitelist"
+					<NcSelect v-model="config.whitelist"
 						:options="config.whiteListableApps"
 						:multiple="true"
 						:close-on-select="false"
-						:clear-on-select="false"
-						:tag-width="75"
+						:clear-search-on-select="false"
 						@input="saveConfig" />
 					<NcButton type="secondary" class="reset-button" @click="reset">
 						<template #icon>
@@ -67,7 +66,7 @@ import { clearTimeout, setTimeout } from 'timers'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
@@ -78,7 +77,7 @@ export default {
 	name: 'GuestSettings',
 	components: {
 		GuestList,
-		NcMultiselect,
+		NcSelect,
 		NcSettingsSection,
 		NcCheckboxRadioSwitch,
 		NcButton,