chore(vue3): Migrate NcSelect*

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
nextcloud-libraries · Oct 8, 2023 · 61bb1f9 · 61bb1f9
1 parent aa52cea
commit 61bb1f9
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -97,7 +97,8 @@
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "vue": "^3.3.4",
-    "vue-material-design-icons": "^5.1.2"
+    "vue-material-design-icons": "^5.1.2",
+    "vue-select": "^4.0.0-beta.6"
   },
   "peerDependencies": {
     "vue": "^3.3.4"

diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -127,15 +127,14 @@ It might be used for list rendering or within the multiselect for example
 <template>
 	<span :id="id"
 		class="option"
-		:style="cssVars"
-		v-on="$listeners">
-		<NcAvatar v-bind="$attrs"
+		:style="cssVars">
+		<!-- <NcAvatar v-bind="$attrs"
 			:disable-menu="true"
 			:disable-tooltip="true"
 			:display-name="displayName || name"
 			:is-no-user="isNoUser"
 			:size="avatarSize"
-			class="option__avatar" />
+			class="option__avatar" /> -->
 		<div class="option__details">
 			<NcHighlight class="option__lineone"
 				:text="name"
@@ -165,7 +164,8 @@ It might be used for list rendering or within the multiselect for example
 </template>
 
 <script>
-import NcAvatar from '../NcAvatar/index.js'
+// TODO: bring back avatar once migrated
+// import NcAvatar from '../NcAvatar/index.js'
 import NcHighlight from '../NcHighlight/index.js'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
@@ -179,7 +179,7 @@ export default {
 	name: 'NcListItemIcon',
 
 	components: {
-		NcAvatar,
+		// NcAvatar,
 		NcHighlight,
 		NcIconSvgWrapper,
 	},

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
@@ -481,8 +481,8 @@ export default {
 			'select--no-wrap': noWrap,
 		}"
 		v-bind="propsToForward"
-		v-on="$listeners"
-		@search="searchString => search = searchString">
+		@search="search = $event"
+		@update:model-value="$emit('update:modelValue', $event)">
 		<template #search="{ attributes, events }">
 			<input :class="['vs__search', inputClass]"
 				v-bind="attributes"
@@ -518,16 +518,19 @@ export default {
 		<template #no-options>
 			{{ t('No results') }}
 		</template>
-		<template v-for="(_, name) in $scopedSlots" #[name]="data">
+		<template v-for="(_, name) in $slots" #[name]="data">
 			<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->
 			<slot :name="name" v-bind="data" />
 		</template>
 	</VueSelect>
 </template>
 
 <script>
-import { VueSelect } from '@nextcloud/vue-select'
-import '@nextcloud/vue-select/dist/vue-select.css'
+// TODO: Use @nextcloud/vue-select once a vue 3 version is available.
+// Until then, all @nextcloud/vue-select specific improvements won't be available.
+// E.g. the `limit` prop has no effect, currently.
+import VueSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
 import {
 	autoUpdate,
 	computePosition,
@@ -546,6 +549,8 @@ import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
 import l10n from '../../mixins/l10n.js'
 
+import { h } from 'vue'
+
 export default {
 	name: 'NcSelect',
 
@@ -610,14 +615,12 @@ export default {
 			type: Object,
 			default: () => ({
 				Deselect: {
-					render: createElement => createElement(Close, {
-						props: {
-							size: 20,
-							fillColor: 'var(--vs-controls-color)',
-						},
-						style: {
-							cursor: 'pointer',
-						},
+					render: () => h(Close, {
+						size: 20,
+						fillColor: 'var(--vs-controls-color)',
+						style: [
+							{ cursor: 'pointer' },
+						],
 					}),
 				},
 			}),
@@ -841,7 +844,7 @@ export default {
 		 *
 		 * @see https://vue-select.org/api/props.html#value
 		 */
-		value: {
+		modelValue: {
 			type: [String, Number, Object, Array],
 			default: null,
 		},
@@ -862,6 +865,7 @@ export default {
 		 */
 		// Not an actual event but needed to show in vue-styleguidist docs
 		' ',
+		'update:modelValue',
 	],
 
 	data() {

diff --git a/src/components/NcSelectTags/NcSelectTags.vue b/src/components/NcSelectTags/NcSelectTags.vue
@@ -134,12 +134,9 @@ export default {
 	<NcSelect v-bind="propsToForward"
 		:options="availableOptions"
 		:close-on-select="!multiple"
-		:value="passthru ? value : localValue"
-		@search="searchString => search = searchString"
-		v-on="{
-			...$listeners,
-			input: passthru ? $listeners.input : handleInput,
-		}">
+		:model-value="localValue"
+		@search="search = $event"
+		@update:model-value="handleInput">
 		<template #option="option">
 			<NcEllipsisedOption :name="getOptionLabel(option)"
 				:search="search" />
@@ -148,7 +145,7 @@ export default {
 			<NcEllipsisedOption :name="getOptionLabel(selectedOption)"
 				:search="search" />
 		</template>
-		<template v-for="(_, name) in $scopedSlots" #[name]="data">
+		<template v-for="(_, name) in $slots" #[name]="data">
 			<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->
 			<slot :name="name" v-bind="data" />
 		</template>
@@ -259,7 +256,7 @@ export default {
 		/**
 		 * Currently selected value
 		 */
-		value: {
+		modelValue: {
 			type: [Number, Array],
 			default: null,
 		},
@@ -275,7 +272,7 @@ export default {
 	},
 
 	emits: [
-		'input',
+		'update:modelValue',
 		/**
 		 * All events from https://vue-select.org/api/events.html
 		 */
@@ -299,15 +296,18 @@ export default {
 		},
 
 		localValue() {
+			if (this.passthru) {
+				return this.modelValue
+			}
 			if (this.tags.length === 0) {
 				return []
 			}
 			if (this.multiple) {
-				return this.value
+				return this.modelValue
 					.filter(tag => tag !== '')
 					.map(id => this.tags.find(tag2 => tag2.id === id))
 			} else {
-				return this.tags.find(tag => tag.id === this.value)
+				return this.tags.find(tag => tag.id === this.modelValue)
 			}
 		},
 
@@ -346,18 +346,22 @@ export default {
 
 	methods: {
 		handleInput(value) {
+			if (this.passthru) {
+				this.$emit('update:modelValue', value)
+				return
+			}
 			if (this.multiple) {
 				/**
 				 * Emitted on input events of the multiselect field
 				 *
 				 * @type {number|number[]}
 				 */
-				this.$emit('input', value.map(element => element.id))
+				this.$emit('update:modelValue', value.map(element => element.id))
 			} else {
 				if (value === null) {
-					this.$emit('input', null)
+					this.$emit('update:modelValue', null)
 				} else {
-					this.$emit('input', value.id)
+					this.$emit('update:modelValue', value.id)
 				}
 			}
 		},

diff --git a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue b/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
@@ -52,7 +52,7 @@ section * {
 <template>
 	<div>
 		<label v-if="label" :for="id" class="hidden-visually">{{ label }}</label>
-		<NcSelect :value="inputValue"
+		<NcSelect :model-value="inputValue"
 			:options="groupsArray"
 			:placeholder="placeholder || label"
 			:filter-by="filterGroups"
@@ -62,7 +62,7 @@ section * {
 			:multiple="true"
 			:close-on-select="false"
 			:disabled="disabled"
-			@input="update"
+			@update:model-value="update"
 			@search="onSearch" />
 		<div v-show="hasError" class="select-group-error">
 			{{ errorMessage }}
@@ -117,7 +117,7 @@ export default {
 		 * value of the select group input
 		 * A list of group IDs can be provided
 		 */
-		value: {
+		modelValue: {
 			type: Array,
 			default: () => [],
 		},
@@ -156,7 +156,7 @@ export default {
 		 * @return {string[]}
 		 */
 		filteredValue() {
-			return this.value.filter((group) => group !== '' && typeof group === 'string')
+			return this.modelValue.filter((group) => group !== '' && typeof group === 'string')
 		},
 
 		/**
@@ -183,7 +183,7 @@ export default {
 		 * @return {object[]}
 		 */
 		groupsArray() {
-			return Object.values(this.groups).filter(g => !this.value.includes(g.id))
+			return Object.values(this.groups).filter(g => !this.modelValue.includes(g.id))
 		},
 	},
 	watch: {
@@ -227,7 +227,7 @@ export default {
 		update(updatedValue) {
 			const value = updatedValue.map((element) => element.id)
 			/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */
-			this.$emit('input', value)
+			this.$emit('update:modelValue', value)
 		},
 
 		/**

diff --git a/src/components/index.js b/src/components/index.js
@@ -75,7 +75,7 @@ export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.js'
 
 // Not yet adjusted for vue3
 // export { default as NcListItem } from './NcListItem/index.js'
-// export { default as NcListItemIcon } from './NcListItemIcon/index.js'
+export { default as NcListItemIcon } from './NcListItemIcon/index.js'
 export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'
 // export { default as NcModal } from './NcModal/index.js'
 export { default as NcNoteCard } from './NcNoteCard/index.js'
@@ -86,9 +86,11 @@ export { default as NcProgressBar } from './NcProgressBar/index.js'
 // export { default as NcRichContenteditable, NcAutoCompleteResult, NcMentionBubble } from './NcRichContenteditable/index.js'
 // export { default as NcRichText } from './NcRichText/index.js'
 export { default as NcSavingIndicatorIcon } from './NcSavingIndicatorIcon/index.js'
-// export { default as NcSelect } from './NcSelect/index.js'
-// export { default as NcSelectTags } from './NcSelectTags/index.js'
-// export { default as NcSettingsSection } from './NcSettingsSection/index.js'
+export { default as NcSelect } from './NcSelect/index.js'
+export { default as NcSelectTags } from './NcSelectTags/index.js'
+export { default as NcSettingsInputText } from './NcSettingsInputText/index.js'
+export { default as NcSettingsSection } from './NcSettingsSection/index.js'
+export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/index.js'
 export { default as NcTextField } from './NcTextField/index.js'
 // export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
 // export { default as NcUserBubble } from './NcUserBubble/index.js'
diff --git a/src/mixins/index.js b/src/mixins/index.js
@@ -22,6 +22,6 @@
 
 export { default as clickOutsideOptions } from './clickOutsideOptions/index.js'
 export { default as isFullscreen } from './isFullscreen/index.js'
-export { default as isMobile } from './isMobile/index.js'
-export { default as richEditor } from './richEditor/index.js'
+// export { default as isMobile } from './isMobile/index.js'
+// export { default as richEditor } from './richEditor/index.js'
 export { default as userStatus } from './userStatus.js'
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -183,18 +183,19 @@ module.exports = async () => {
 							'src/components/Nc*Field/*.vue',
 						],
 					},
-				// 	{
-				// 		name: 'NcListItems',
-				// 		components: [
-				// 			'src/components/NcListItem*/*.vue',
-				// 		],
-				// 	},
-				// 	{
-				// 		name: 'NcSelect',
-				// 		components: [
-				// 			'src/components/NcSelect*/*.vue',
-				// 		],
-				// 	},
+					{
+						name: 'NcListItems',
+						components: [
+							//'src/components/NcListItem*/*.vue',
+							'src/components/NcListItemIcon/*.vue',
+						],
+					},
+					{
+						name: 'NcSelect',
+						components: [
+							'src/components/NcSelect*/*.vue',
+						],
+					},
 					{
 						name: 'NcPickers',
 						components: [
@@ -210,12 +211,12 @@ module.exports = async () => {
 				// 			'src/components/NcRichText/NcRichText.vue',
 				// 		],
 				// 	},
-				// 	{
-				// 		name: 'NcSettings',
-				// 		components: [
-				// 			'src/components/NcSettings*/*.vue',
-				// 		],
-				// 	},
+				 	{
+						name: 'NcSettings',
+						components: [
+							'src/components/NcSettings*/*.vue',
+						],
+					},
 				],
 			},
 		],