svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename ComboboxItem -> ComboboxOption

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-04 02:32:06 -07:00
parent 12a79f0680
commit cc27f0599c
4 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/Combobox.svelte
View File

@@ -1,16 +1,16 @@
<script lang="ts" module>
export type ComboboxItem = {
export type ComboboxOption = {
value: string;
label?: string;
infotext?: string;
preview?: string;
disabled?: boolean;
icon?: Snippet<[item: ComboboxItem]>;
render?: Snippet<[item: ComboboxItem]>;
icon?: Snippet<[item: ComboboxOption]>;
render?: Snippet<[item: ComboboxOption]>;
};
const getLabel = (item: ComboboxItem | undefined): string => item?.label ?? item?.value ?? '';
const getPreview = (item: ComboboxItem | undefined): string => item?.preview ?? getLabel(item);
const getLabel = (item: ComboboxOption | undefined): string => item?.label ?? item?.value ?? '';
const getPreview = (item: ComboboxOption | undefined): string => item?.preview ?? getLabel(item);
</script>
<script lang="ts">
@@ -29,24 +29,24 @@
interface Props {
name?: string;
value?: ComboboxItem;
value?: ComboboxOption;
open?: boolean;
usePreview?: boolean | 'auto';
matchWidth?: boolean;
options: ComboboxItem[];
options: ComboboxOption[];
required?: boolean;
invalidMessage?: string;
invalidMessage?: string | null;
label?: string;
placeholder?: string;
notFoundMessage?: string;
class?: ClassValue | null | undefined;
onvalidate?: (e: InputValidatorEvent) => void;
onchange?: (item: ComboboxItem) => void;
onchange?: (item: ComboboxOption) => void;
}
let {
name,
value = $bindable<ComboboxItem | undefined>(undefined),
value = $bindable<ComboboxOption | undefined>(undefined),
open = $bindable(false),
usePreview = 'auto',
matchWidth = false,
@@ -78,7 +78,7 @@
: options.filter((item) => getLabel(item).toLowerCase().includes(searchValue.toLowerCase()))
);
let highlighted = $derived.by((): ComboboxItem | undefined => {
let highlighted = $derived.by((): ComboboxOption | undefined => {
if (filteredItems.length === 0) return undefined;
if (value !== undefined && filteredItems.find((v) => v.value === value?.value)) return value;
return filteredItems[0];
@@ -98,7 +98,10 @@
return filteredItems.findIndex((item) => item.value === highlighted?.value);
};
const minWidth: Action<HTMLDivElement, { options: ComboboxItem[] }> = (container, buildOpts) => {
const minWidth: Action<HTMLDivElement, { options: ComboboxOption[] }> = (
container,
buildOpts
) => {
const f = (opts: typeof buildOpts) => {
if (matchWidth && searchInput) {
container.style.width = searchInput.scrollWidth + 'px';
@@ -348,9 +351,11 @@
</div>
<!-- Error message if invalid -->
<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
<Label for={id} error>{invalidMessage}</Label>
</div>
{#if invalidMessage !== null}
<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
<Label for={id} error>{invalidMessage}</Label>
</div>
{/if}
</div>
{#snippet searchInputBox(caret: boolean = true)}