feat: Migrate to NcSelect

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud · Jun 7, 2024 · 6cfbd4a · 6cfbd4a
1 parent 99c889c
commit 6cfbd4a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/src/components/GroupSelect.vue b/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: {

diff --git a/src/components/LanguageSelect.vue b/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: {

diff --git a/src/views/GuestSettings.vue b/src/views/GuestSettings.vue
@@ -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,