combobox: add use property
This commit is contained in:
@@ -40,6 +40,7 @@
|
|||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
notFoundMessage?: string;
|
notFoundMessage?: string;
|
||||||
class?: ClassValue | null | undefined;
|
class?: ClassValue | null | undefined;
|
||||||
|
use?: () => void;
|
||||||
onvalidate?: (e: InputValidatorEvent) => void;
|
onvalidate?: (e: InputValidatorEvent) => void;
|
||||||
onchange?: (item: ComboboxOption) => void;
|
onchange?: (item: ComboboxOption) => void;
|
||||||
}
|
}
|
||||||
@@ -57,6 +58,7 @@
|
|||||||
placeholder,
|
placeholder,
|
||||||
notFoundMessage = 'No results found',
|
notFoundMessage = 'No results found',
|
||||||
class: classValue,
|
class: classValue,
|
||||||
|
use,
|
||||||
onvalidate,
|
onvalidate,
|
||||||
onchange
|
onchange
|
||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
@@ -183,10 +185,24 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const conditionalUse = $derived(use ? use : () => {});
|
||||||
|
|
||||||
export const focus = () => {
|
export const focus = () => {
|
||||||
searchInput?.focus();
|
searchInput?.focus();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const setValueByString = (searchVal: string) => {
|
||||||
|
const item = options.find((opt) => opt.value === searchVal);
|
||||||
|
if (item) {
|
||||||
|
value = item;
|
||||||
|
searchValue = '';
|
||||||
|
open = false;
|
||||||
|
onchange?.(item);
|
||||||
|
} else {
|
||||||
|
console.warn(`Combobox: No option found with value "${searchVal}"`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (browser) {
|
if (browser) {
|
||||||
// update picker position on window resize
|
// update picker position on window resize
|
||||||
window.addEventListener('resize', updatePickerRect);
|
window.addEventListener('resize', updatePickerRect);
|
||||||
@@ -444,6 +460,9 @@
|
|||||||
searchValue = searchInput.value;
|
searchValue = searchInput.value;
|
||||||
searching = true;
|
searching = true;
|
||||||
}}
|
}}
|
||||||
|
use={() => {
|
||||||
|
conditionalUse();
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext)}
|
{#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext)}
|
||||||
|
|||||||
Reference in New Issue
Block a user