@bagelink/vue 1.4.109 → 1.4.115

package/src/components/form/inputs/SelectInput.vue

@@ -1,12 +1,24 @@
 <script lang="ts" setup>
 import type { IconType, Option } from '@bagelink/vue'
 import type { AlignedPlacement } from '../../Dropdown.vue'
-import { Btn, Card,	Skeleton, Dropdown, Icon, TextInput, useSearch } from '@bagelink/vue'
+import { Btn, Card, Skeleton, Dropdown, Icon, TextInput, useSearch } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 import 'floating-vue/style.css'
 
+type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
+const props = withDefaults(defineProps<PropTypes>(), {
+	placeholder: 'Select',
+	placement: 'bottom-start',
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isAsyncSource = (src: OptionsSource): src is (q: string) => Promise<Option[]> => typeof src === 'function'
+
+type Primitive = string | number | boolean
+
 interface PropTypes {
-	options: Option[]
+	options: OptionsSource
 	placeholder?: string
 	disabled?: boolean
 	modelValue?: Option
@@ -21,16 +33,8 @@ interface PropTypes {
 	clearable?: boolean
 	placement?: AlignedPlacement
 	searchPlaceholder?: string
-	onSearch?: (search: string) => Promise<Option[]>
 }
 
-const props = withDefaults(defineProps<PropTypes>(), {
-	placeholder: 'Select',
-	placement: 'bottom-start',
-})
-
-const emit = defineEmits(['update:modelValue']) // Add 'search' event
-
 const searchInput = $ref<HTMLElement | undefined>()
 
 let selectedItems = $ref<Option[]>([])
@@ -55,7 +59,12 @@ const selectedLabel = $computed((): string => {
 })
 const searchPlaceholder = $computed(() => props.searchPlaceholder ?? selectedLabel ?? 'Search')
 
-const { results, isLoading } = useSearch<Option>({ searchTerm: () => searchTerm, serverSearch: props.onSearch, items: () => props.options })
+const { results, isLoading } = useSearch<Option>({
+	searchTerm: () => searchTerm,
+	serverSearch: isAsyncSource(props.options) ? props.options : undefined,
+	items: () => (Array.isArray(props.options) ? props.options : []),
+	minChars: isAsyncSource(props.options) ? 0 : 2,
+})
 
 let highlightedIndex = $ref(-1)
 
@@ -81,20 +90,35 @@ function navigate(direction: 'up' | 'down') {
 
 const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
 
+function scrollToSelectedItem() {
+	if (!selectOptions || selectedItemCount === 0) return
+
+	// Find the first selected item in the results
+	const selectedIndex = results.value.findIndex(option => isSelected(option))
+	if (selectedIndex === -1) return
+
+	// Get the selected option element
+	const selectedElement = selectOptions.children[selectedIndex] as HTMLElement
+	if (!selectedElement) return
+
+	// Scroll the selected item into view
+	selectedElement.scrollIntoView({
+		block: 'center',
+		behavior: 'instant'
+	})
+}
+
 function getLabel(option: Option) {
-	if (!option) return ''
-	if (typeof option === 'string') return option
-	if (typeof option === 'number') return `${option}`
+	if (option == null) return ''
+	if (typeof option === 'object') return option.label ?? String((option as any).value ?? '')
 	if (typeof option === 'boolean') return option ? 'Yes' : 'No'
-	return option.label
+	return String(option)
 }
 
-function getValue(option?: Option) {
-	if (!option) return
-	if (typeof option === 'string') return option
-	if (typeof option === 'number') return option
-	if (typeof option === 'boolean') return option ? 'Yes' : 'No'
-	return option.value
+function getValue(option?: Option): Primitive | undefined {
+	if (option == null) return
+	if (typeof option === 'object') return option.value as Primitive
+	return option as Primitive
 }
 
 function focusInput() {
@@ -109,14 +133,16 @@ function select(option: Option) {
 	const existingIndex = selectedItems.findIndex(
 		item => getValue(item) === getValue(option),
 	)
-	if (existingIndex > -1) { selectedItems.splice(existingIndex, 1)
+	if (existingIndex > -1) {
+		selectedItems.splice(existingIndex, 1)
 	}
 	else if (props.multiselect) {
 		const current = [...selectedItems]
 		current.push(option)
 
 		selectedItems = current
-	} else { selectedItems.splice(0, selectedItemCount, option)
+	} else {
+		selectedItems.splice(0, selectedItemCount, option)
 	}
 
 	if (!props.multiselect) open = false
@@ -135,17 +161,18 @@ function emitUpdate() {
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
 	if (arr1.length !== arr2.length) return false
-	const arr1Values = [...arr1].map(a => getValue(a)).filter(Boolean)
-	const arr2Values = [...arr2].map(a => getValue(a)).filter(Boolean)
-	const isSame = arr1Values.every((item: Option) => arr2Values.includes(item))
-	return isSame
+	const s1 = arr1.map(getValue).filter(Boolean).map(String).sort()
+	const s2 = arr2.map(getValue).filter(Boolean).map(String).sort()
+	return s1.every((v, i) => v === s2[i])
 }
 
 watch(
 	() => props.modelValue,
 	(newVal: Option | Option[]) => {
 		if (!props.multiselect) {
-			const newOption = props.options.find(o => getValue(o) === newVal) ?? newVal
+			const newOption = Array.isArray(props.options)
+				? (props.options.find(o => getValue(o) === newVal) ?? newVal)
+				: newVal
 			if (newOption && !isSelected(newOption)) selectedItems = [newOption]
 		} else {
 			const newData = [newVal].flat()
@@ -161,15 +188,19 @@ watch(
 watch(() => open, (value) => {
 	if (value) {
 		highlightedIndex = -1
+		// Scroll to selected item when dropdown opens
+		setTimeout(() => { scrollToSelectedItem() }, 10)
 	}
 })
 
 watch(
 	() => props.options,
 	() => {
+		const opts = props.options
+		if (!Array.isArray(opts)) return
 		selectedItems.forEach((option, i) => {
-			const exists = props.options.find(
-				o => getValue(o) === getValue(option),
+			const exists = opts.find(
+				(o: Option) => getValue(o) === getValue(option),
 			)
 			if (exists === undefined) selectedItems.splice(i, 1)
 			else selectedItems.splice(i, 1, exists)
@@ -182,9 +213,10 @@ watch(
 )
 
 onMounted(() => {
-	if (props.defaultValue !== undefined) {
-		const defaultOption = props.options.find(
-			o => getValue(o) === getValue(props.defaultValue),
+	const opts = props.options
+	if (props.defaultValue !== undefined && Array.isArray(opts)) {
+		const defaultOption = opts.find(
+			(o: Option) => getValue(o) === getValue(props.defaultValue),
 		)
 
 		if (defaultOption === undefined) return
@@ -196,11 +228,7 @@ onMounted(() => {
 
 <template>
 	<Dropdown
-		ref="dropdown"
-		v-model:shown="open"
-		:placement="placement"
-		class="bagel-input selectinput"
-		no-auto-focus
+		ref="dropdown" v-model:shown="open" :placement="placement" class="bagel-input selectinput" no-auto-focus
 		@click.stop
 	>
 		<template #trigger>
@@ -208,24 +236,13 @@ onMounted(() => {
 				{{ label }} <span v-if="required && label">*</span>
 				<div class="flex gap-05">
 					<TextInput
-						v-if="searchable && open"
-						ref="searchInput"
-						v-model="searchTerm"
-						class="mb-0"
-						:placeholder="searchPlaceholder"
-						icon="search"
-						@input="selected = false"
-						@click="focusInput"
-						@keydown.down.prevent="navigate('down')"
-						@keydown.up.prevent="navigate('up')"
+						v-if="searchable && open" ref="searchInput" v-model="searchTerm" class="mb-0"
+						:placeholder="searchPlaceholder" icon="search" @input="selected = false" @click="focusInput"
+						@keydown.down.prevent="navigate('down')" @keydown.up.prevent="navigate('up')"
 					/>
 					<button
-						v-else
-						:disabled="disabled"
-						type="button"
-						class="selectinput-btn"
-						:class="{ isEmpty: selectedItemCount === 0 }"
-						@keydown.down.prevent="navigate('down')"
+						v-else :disabled="disabled" type="button" class="selectinput-btn"
+						:class="{ isEmpty: selectedItemCount === 0 }" @keydown.down.prevent="navigate('down')"
 						@keydown.up.prevent="navigate('up')"
 					>
 						<Icon v-if="icon" :icon="icon" />
@@ -234,61 +251,31 @@ onMounted(() => {
 						</p>
 
 						<div v-if="clearable && selectedItemCount > 0" class="ms-auto ps-05 me-05">
-							<Btn
-								flat
-								thin
-								icon="clear"
-								class="color-gray"
-								@click="selectedItems = []; emitUpdate()"
-							/>
+							<Btn flat thin icon="clear" class="color-gray" @click="selectedItems = []; emitUpdate()" />
 						</div>
-						<Icon
-							v-if="!disabled"
-							thin
-							v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
-						/>
+						<Icon v-if="!disabled" thin v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }" />
 					</button>
 					<input
-						v-if="required"
-						tabindex="-1"
-						style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
-						:value="selectedItems"
+						v-if="required" tabindex="-1"
+						style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1" :value="selectedItems"
 						required
 					>
 				</div>
 			</label>
 		</template>
 		<Skeleton v-if="isLoading" :count="6" width="200px" height="25px" class="mx-1 my-1" />
-		<Card
-			class="p-05"
-			:style="{ width: fullWidth ? '100%' : 'auto' }"
-			@click.stop
-		>
+		<Card class="p-05" :style="{ width: fullWidth ? '100%' : 'auto' }" @click.stop>
 			<div ref="selectOptions" class="selectinput-options" :class="{ multiselect }">
 				<div
-					v-for="(option, i) in results"
-					:key="`${option}${i}`"
-					class="selectinput-option hover gap-1 align-items-center"
-					:class="{ selected: isSelected(option) }"
-					role="option"
-					tabindex="0"
-					:aria-selected="isSelected(option)"
-					@click="select(option)"
-					@keydown.enter="select(option)"
-					@keydown.down.prevent="navigate('down')"
+					v-for="(option, i) in results" :key="`${String(getValue(option))}-${i}`"
+					class="selectinput-option hover gap-1 align-items-center" :class="{ selected: isSelected(option) }"
+					role="option" tabindex="0" :aria-selected="isSelected(option)" @click="select(option)"
+					@keydown.enter="select(option)" @keydown.down.prevent="navigate('down')"
 					@keydown.up.prevent="navigate('up')"
 				>
 					<template v-if="multiselect">
-						<Icon
-							v-if="isSelected(option)" :size="1.1"
-							icon="select_check_box"
-						/>
-						<Icon
-							v-if="!isSelected(option)"
-							class="opacity-3"
-							icon="check_box_outline_blank"
-							:size="1.1"
-						/>
+						<Icon v-if="isSelected(option)" :size="1.1" icon="select_check_box" />
+						<Icon v-if="!isSelected(option)" class="opacity-3" icon="check_box_outline_blank" :size="1.1" />
 					</template>
 					<span class="block">
 						{{ getLabel(option) }}
@@ -311,15 +298,17 @@ onMounted(() => {
 	border-radius: 5px;
 	transition: all 0.2s;
 	display: grid;
-	grid-template-columns:1fr;
+	grid-template-columns: 1fr;
 	justify-content: space-between;
 	width: 100%;
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font{
+
+.selectinput-option .bgl_icon-font {
 	line-height: normal;
 }
+
 .selectinput-options.multiselect .selectinput-option {
 	grid-template-columns: 10px 1fr;
 
@@ -330,14 +319,17 @@ onMounted(() => {
 	overflow-y: auto;
 }
 
-.selectinput-option:hover, .highlight {
+.selectinput-option:hover,
+.highlight {
 	background: var(--bgl-gray-tint);
 }
+
 .isEmpty p {
 	opacity: 0.3;
 }
-.selected{
-	/* background: var(--bgl-primary-tint); */
+
+.selected {
+	color: var(--bgl-primary);
 	background: var(--bgl-selected);
 }
 </style>
@@ -361,7 +353,8 @@ onMounted(() => {
 	font-family: inherit;
 	font-size: var(--input-font-size);
 }
-.selectinput-btn p{
+
+.selectinput-btn p {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;