|
|
|
|
@@ -1,16 +1,38 @@
|
|
|
|
|
<script lang="ts" module>
|
|
|
|
|
export type ComboboxOption = {
|
|
|
|
|
/** Value of the option */
|
|
|
|
|
value: string;
|
|
|
|
|
/**
|
|
|
|
|
* Label of the option displayed in the picker and, if the option is
|
|
|
|
|
* selected, in the main input field. Preview overrides label if provided
|
|
|
|
|
* and the combobox is open (see usePreview prop for exceptions).
|
|
|
|
|
*/
|
|
|
|
|
label?: string;
|
|
|
|
|
infotext?: string;
|
|
|
|
|
/**
|
|
|
|
|
* Preview text for the option, displayed in the main input field when
|
|
|
|
|
* the option is selected. See usePreview prop for controlling when
|
|
|
|
|
* preview takes precedence over label.
|
|
|
|
|
*/
|
|
|
|
|
preview?: string;
|
|
|
|
|
/**
|
|
|
|
|
* Additional information text for the option, displayed beside the
|
|
|
|
|
* label in the picker and, if the option is selected, in the main
|
|
|
|
|
* input field.
|
|
|
|
|
*/
|
|
|
|
|
infotext?: string;
|
|
|
|
|
/** An optional icon for the option, displayed in the picker and,
|
|
|
|
|
* if the option is selected, in the main input field.
|
|
|
|
|
*/
|
|
|
|
|
icon?: IconDef;
|
|
|
|
|
/** Whether the option is disabled */
|
|
|
|
|
disabled?: boolean;
|
|
|
|
|
icon?: Snippet<[item: ComboboxOption]>;
|
|
|
|
|
render?: Snippet<[item: ComboboxOption]>;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getLabel = (item: ComboboxOption | undefined): string => item?.label ?? item?.value ?? '';
|
|
|
|
|
const getPreview = (item: ComboboxOption | undefined): string => item?.preview ?? getLabel(item);
|
|
|
|
|
/** returns option label, falling back to value or 'Undefined Option' if no option provided */
|
|
|
|
|
const getLabel = (opt: ComboboxOption | undefined): string =>
|
|
|
|
|
opt ? (opt.label ?? opt.value) : 'Undefined Option';
|
|
|
|
|
/** returns option preview, falling back to getLabel if missing */
|
|
|
|
|
const getPreview = (opt: ComboboxOption | undefined): string => opt?.preview ?? getLabel(opt);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
@@ -19,51 +41,146 @@
|
|
|
|
|
import Label from './Label.svelte';
|
|
|
|
|
import StyledRawInput from './StyledRawInput.svelte';
|
|
|
|
|
import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
|
|
|
|
|
import type { Action } from 'svelte/action';
|
|
|
|
|
import { onMount, tick, untrack, type Snippet } from 'svelte';
|
|
|
|
|
import { Portal } from '@jsrob/svelte-portal';
|
|
|
|
|
import { scale } from 'svelte/transition';
|
|
|
|
|
import { generateIdentifier, type IconDef } from './util';
|
|
|
|
|
import type { ClassValue } from 'svelte/elements';
|
|
|
|
|
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
|
|
|
|
|
import { matchSorter } from 'match-sorter';
|
|
|
|
|
import Spinner from './Spinner.svelte';
|
|
|
|
|
import type { KeyOption } from 'match-sorter';
|
|
|
|
|
import { Tween } from 'svelte/motion';
|
|
|
|
|
import { cubicOut } from 'svelte/easing';
|
|
|
|
|
import type { Attachment } from 'svelte/attachments';
|
|
|
|
|
import { Popover } from './floating.svelte';
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
name?: string;
|
|
|
|
|
value?: ComboboxOption;
|
|
|
|
|
open?: boolean;
|
|
|
|
|
usePreview?: boolean | 'auto';
|
|
|
|
|
matchWidth?: boolean;
|
|
|
|
|
options: ComboboxOption[];
|
|
|
|
|
required?: boolean;
|
|
|
|
|
invalidMessage?: string | null;
|
|
|
|
|
label?: string;
|
|
|
|
|
placeholder?: string;
|
|
|
|
|
/** displayed by default if no item is selected that has its own icon */
|
|
|
|
|
icon?: IconDef;
|
|
|
|
|
/**
|
|
|
|
|
* enables loading spinner and fallback text if no items are found. may be changed
|
|
|
|
|
* internally if lazy is enabled. loading is, however, not bindable, so don't expect
|
|
|
|
|
* any internal changes to be propagated outward.
|
|
|
|
|
* Name of the input, used for form submission. The currently selected
|
|
|
|
|
* option's value will be submitted under this name.
|
|
|
|
|
*/
|
|
|
|
|
name?: string;
|
|
|
|
|
/** Optional label for the combobox */
|
|
|
|
|
label?: string;
|
|
|
|
|
/** Optional placeholder for the main input field */
|
|
|
|
|
placeholder?: string;
|
|
|
|
|
/** Whether an option must be selected to continue (default: false) */
|
|
|
|
|
required?: boolean;
|
|
|
|
|
/**
|
|
|
|
|
* Message displayed below the main input field when required but no
|
|
|
|
|
* option is selected (default: 'Please select an option'). If set to
|
|
|
|
|
* null, no message is displayed.
|
|
|
|
|
*/
|
|
|
|
|
invalidMessage?: string | null;
|
|
|
|
|
/**
|
|
|
|
|
* Allows the user to select an option without updating the value
|
|
|
|
|
* (events are still triggered).
|
|
|
|
|
*/
|
|
|
|
|
stateless?: boolean;
|
|
|
|
|
|
|
|
|
|
/** Bindable value of the combobox, the currently selected option */
|
|
|
|
|
value?: ComboboxOption;
|
|
|
|
|
/** Array of ComboboxOptions for the picker */
|
|
|
|
|
options: ComboboxOption[];
|
|
|
|
|
/**
|
|
|
|
|
* Overrides label render behaviour for all options. Receives the option
|
|
|
|
|
* as an argument. If not provided, the option's `label` field is used.
|
|
|
|
|
* Option `label` field must still be present for search, accessibility,
|
|
|
|
|
* and visibility in the main input field.
|
|
|
|
|
*/
|
|
|
|
|
labelRender?: Snippet<[opt: ComboboxOption]>;
|
|
|
|
|
/**
|
|
|
|
|
* Overrides infotext render behaviour for all options. Receives the option
|
|
|
|
|
* as an argument. If not provided, the option's `infotext` field is used.
|
|
|
|
|
* Option `infotext` field must still be present for search and accessibility.
|
|
|
|
|
*/
|
|
|
|
|
infotextRender?: Snippet<[opt: ComboboxOption]>;
|
|
|
|
|
/**
|
|
|
|
|
* Overrides icon render behaviour for all options and the main input. Receives
|
|
|
|
|
* the option as an argument. If not provided, the option's `icon` field is used,
|
|
|
|
|
* based on the phosphor `IconDef` structure.
|
|
|
|
|
*/
|
|
|
|
|
iconRender?: Snippet<[opt: ComboboxOption]>;
|
|
|
|
|
|
|
|
|
|
/** Bindable open state of the combobox */
|
|
|
|
|
open?: boolean;
|
|
|
|
|
/**
|
|
|
|
|
* Determines picker width based on content with four options:
|
|
|
|
|
* `match`: matches the input width
|
|
|
|
|
* `average`: calculates average width based on the length of option
|
|
|
|
|
* content, with a reasonable minimum
|
|
|
|
|
* `longest`: sets width based on the longest option, which can lead to
|
|
|
|
|
* excessively wide pickers but tries to prevent wrapping
|
|
|
|
|
* `max-match` (default): sets width based on the maximum of the input
|
|
|
|
|
* width and the longest option
|
|
|
|
|
*/
|
|
|
|
|
pickerWidth?: 'match' | 'average' | 'longest' | 'max-match';
|
|
|
|
|
/** Uses a compact layout for the search input with less padding and smaller text */
|
|
|
|
|
compact?: boolean;
|
|
|
|
|
/**
|
|
|
|
|
* Optional icon displayed as long as the selected option does not have
|
|
|
|
|
* its own icon.
|
|
|
|
|
*/
|
|
|
|
|
icon?: IconDef | Snippet;
|
|
|
|
|
/**
|
|
|
|
|
* Bindable loading state controls visibility of spinner and fallback
|
|
|
|
|
* text if no options are found (see notFoundMessage). Only changed
|
|
|
|
|
* internally if lazy loading is used.
|
|
|
|
|
*/
|
|
|
|
|
loading?: boolean;
|
|
|
|
|
/** applies the loading state on first interaction */
|
|
|
|
|
lazy?: boolean;
|
|
|
|
|
/** uses a compact layout for the search input with less padding and smaller text */
|
|
|
|
|
compact?: boolean;
|
|
|
|
|
/** allows the user to select an option without selecting a value (events are still triggered) */
|
|
|
|
|
stateless?: boolean;
|
|
|
|
|
notFoundMessage?: string;
|
|
|
|
|
/** Special always-disabled option displayed when loading */
|
|
|
|
|
loadingOption?: ComboboxOption;
|
|
|
|
|
/**
|
|
|
|
|
* Applies the loading state when the picker is opened, allowing for
|
|
|
|
|
* asynchronous loading of options.
|
|
|
|
|
* `always`: applies loading state each time the picker is opened
|
|
|
|
|
* `true`: applies loading state only the first time the picker is opened
|
|
|
|
|
* `false` (default): loading state must be controlled externally
|
|
|
|
|
*/
|
|
|
|
|
lazy?: 'always' | boolean;
|
|
|
|
|
/**
|
|
|
|
|
* Controls when the option preview should take precedence over the
|
|
|
|
|
* label in the main input field.
|
|
|
|
|
* `auto` (default): uses preview only when the picker is closed
|
|
|
|
|
* `true`: always uses preview
|
|
|
|
|
* `false`: never uses preview
|
|
|
|
|
*/
|
|
|
|
|
usePreview?: boolean | 'auto';
|
|
|
|
|
/** Special always-disabled option displayed when no options match the search */
|
|
|
|
|
notFoundOption?: ComboboxOption;
|
|
|
|
|
/**
|
|
|
|
|
* Configures which option fields are included in the search
|
|
|
|
|
* (default: 'label' and 'value'). An empty array triggers fallback
|
|
|
|
|
* to searching by value only.
|
|
|
|
|
*/
|
|
|
|
|
searchKeys?: ('value' | 'label' | 'preview' | 'infotext')[];
|
|
|
|
|
|
|
|
|
|
/** Additional classes applied to the persistent div container */
|
|
|
|
|
class?: ClassValue | null | undefined;
|
|
|
|
|
/** Optional action applied to the main input */
|
|
|
|
|
use?: () => void;
|
|
|
|
|
|
|
|
|
|
/** Callback when the input value changes, triggering validation */
|
|
|
|
|
onvalidate?: (e: InputValidatorEvent) => void;
|
|
|
|
|
onchange?: (item: ComboboxOption) => void;
|
|
|
|
|
/** Callback when the selected option changes */
|
|
|
|
|
onchange?: (opt: ComboboxOption) => void;
|
|
|
|
|
/** Callback when a search is performed */
|
|
|
|
|
onsearch?: (query: string) => boolean | void;
|
|
|
|
|
onscroll?: (detail: { event: UIEvent; top: boolean; bottom: boolean }) => void;
|
|
|
|
|
/** this callback runs only once on the first interaction if lazy is enabled */
|
|
|
|
|
onlazy?: () => void;
|
|
|
|
|
onopen?: () => void;
|
|
|
|
|
onclose?: () => void;
|
|
|
|
|
/** Callback when the picker is scrolled */
|
|
|
|
|
onscroll?: (detail: {
|
|
|
|
|
event: UIEvent;
|
|
|
|
|
top: boolean;
|
|
|
|
|
bottom: boolean;
|
|
|
|
|
searchInput: string;
|
|
|
|
|
}) => void;
|
|
|
|
|
/**
|
|
|
|
|
* Callback when options should be lazily loaded, see lazy prop.
|
|
|
|
|
* Expects a promise to be returned, allowing for loading state
|
|
|
|
|
* to be automatically managed.
|
|
|
|
|
*/
|
|
|
|
|
onlazy?: () => Promise<void>;
|
|
|
|
|
/** Callback when the picker is opened or closed */
|
|
|
|
|
onopenchange?: (open: boolean) => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let {
|
|
|
|
|
@@ -71,18 +188,20 @@
|
|
|
|
|
value = $bindable<ComboboxOption | undefined>(undefined),
|
|
|
|
|
open = $bindable(false),
|
|
|
|
|
usePreview = 'auto',
|
|
|
|
|
matchWidth = false,
|
|
|
|
|
pickerWidth = 'average',
|
|
|
|
|
options,
|
|
|
|
|
required = false,
|
|
|
|
|
invalidMessage = 'Please select an option',
|
|
|
|
|
label,
|
|
|
|
|
placeholder,
|
|
|
|
|
icon,
|
|
|
|
|
loading = false,
|
|
|
|
|
loading = $bindable(false),
|
|
|
|
|
lazy = false,
|
|
|
|
|
compact = false,
|
|
|
|
|
stateless = false,
|
|
|
|
|
notFoundMessage = 'No results found',
|
|
|
|
|
loadingOption = { value: 'special-loading', label: 'Loading...' },
|
|
|
|
|
notFoundOption = { value: 'special-not-found', label: 'No options found' },
|
|
|
|
|
searchKeys = ['label', 'value'],
|
|
|
|
|
class: classValue,
|
|
|
|
|
use,
|
|
|
|
|
onvalidate,
|
|
|
|
|
@@ -90,32 +209,70 @@
|
|
|
|
|
onsearch,
|
|
|
|
|
onscroll,
|
|
|
|
|
onlazy,
|
|
|
|
|
onopen,
|
|
|
|
|
onclose
|
|
|
|
|
onopenchange,
|
|
|
|
|
labelRender,
|
|
|
|
|
infotextRender,
|
|
|
|
|
iconRender
|
|
|
|
|
}: Props = $props();
|
|
|
|
|
|
|
|
|
|
let id = $derived(generateIdentifier('combobox', name));
|
|
|
|
|
const id = $derived(generateIdentifier('combobox', name));
|
|
|
|
|
const searchKeySet = $derived(new Set(searchKeys));
|
|
|
|
|
const conditionalUse = $derived(use ? use : () => {});
|
|
|
|
|
const popover = new Popover({
|
|
|
|
|
interaction: 'manual',
|
|
|
|
|
placement: 'bottom-start',
|
|
|
|
|
offset: 0,
|
|
|
|
|
ontoggle: async (isOpen) => {
|
|
|
|
|
open = isOpen;
|
|
|
|
|
|
|
|
|
|
if (isOpen) {
|
|
|
|
|
scrollToHighlighted();
|
|
|
|
|
|
|
|
|
|
// focus & select search input after 100ms
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
searchInput?.focus();
|
|
|
|
|
searchInput?.select();
|
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
|
|
// handle lazy loading behaviour
|
|
|
|
|
if (lazy === 'always' || (lazy === true && !lazyApplied)) {
|
|
|
|
|
lazyApplied = true;
|
|
|
|
|
loading = true;
|
|
|
|
|
await onlazy?.();
|
|
|
|
|
loading = false;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
searchValue = ''; // clear search value for next time picker opens
|
|
|
|
|
searching = false; // reset searching state
|
|
|
|
|
highlighted = value; // reset highlighted item to current value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log('combobox open', isOpen);
|
|
|
|
|
onopenchange?.(isOpen);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let valid = $state(true);
|
|
|
|
|
let searchValue = $state('');
|
|
|
|
|
let pickerPosition = $state<'top' | 'bottom'>('bottom');
|
|
|
|
|
let searching = $state(false);
|
|
|
|
|
let iconWidth = $state<number | undefined>(undefined);
|
|
|
|
|
|
|
|
|
|
let searchInput = $state<HTMLInputElement | null>(null);
|
|
|
|
|
let searchContainer = $state<HTMLDivElement | null>(null);
|
|
|
|
|
let pickerContainer = $state<HTMLDivElement | null>(null);
|
|
|
|
|
|
|
|
|
|
/** stores options filtered according to search value */
|
|
|
|
|
/** options filtered by search value and searchKeys */
|
|
|
|
|
const filteredItems = $derived.by(() => {
|
|
|
|
|
const arr = matchSorter(options, searchValue, { keys: [(item) => getLabel(item)] });
|
|
|
|
|
// if (loading) {
|
|
|
|
|
// arr.push({ value: 'loading', label: 'Loading more...', disabled: true });
|
|
|
|
|
// }
|
|
|
|
|
let keys: KeyOption<ComboboxOption>[] = [];
|
|
|
|
|
if (searchKeySet.has('label')) keys.push((item) => getLabel(item));
|
|
|
|
|
if (searchKeySet.has('preview')) keys.push((item) => getPreview(item));
|
|
|
|
|
if (searchKeySet.has('infotext')) keys.push('infotext');
|
|
|
|
|
if (searchKeySet.has('value') || keys.length === 0) keys.push('value');
|
|
|
|
|
const arr = matchSorter(options, searchValue, { keys });
|
|
|
|
|
return arr;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/** stores currently highlighted option (according to keyboard navigation or default item) */
|
|
|
|
|
/** currently highlighted option, updated by keyboard navigation or defaults to first item */
|
|
|
|
|
let highlighted = $derived.by((): ComboboxOption | undefined => {
|
|
|
|
|
if (!searching) return undefined; // otherwise, the first item is highlighted on first open
|
|
|
|
|
if (filteredItems.length === 0) return undefined;
|
|
|
|
|
@@ -123,20 +280,50 @@
|
|
|
|
|
if (!filteredItems[0]?.disabled) return filteredItems[0];
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/** controls whether an icon should be displayed */
|
|
|
|
|
let iconVisible = $derived(
|
|
|
|
|
/**
|
|
|
|
|
* Whether an icon should be displayed with the main input.
|
|
|
|
|
* The icon is determined by the following precedence:
|
|
|
|
|
* highlighted option (only when the picker is open) > selected value > icon prop
|
|
|
|
|
*/
|
|
|
|
|
const iconVisible = $derived(
|
|
|
|
|
(open && highlighted && highlighted.icon) ||
|
|
|
|
|
(value && value.icon && searchValue === '') ||
|
|
|
|
|
loading ||
|
|
|
|
|
icon !== undefined
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
/** controls whether the highlighted option should be used in the selection preview */
|
|
|
|
|
let useHighlighted = $derived.by(() => {
|
|
|
|
|
/** whether the highlighted option should be used in the selection preview */
|
|
|
|
|
const useHighlighted = $derived.by(() => {
|
|
|
|
|
return open && highlighted;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const validateOpts: ValidatorOptions = { required };
|
|
|
|
|
/** validation options build from props */
|
|
|
|
|
const validateOpts: ValidatorOptions = $derived({ required });
|
|
|
|
|
|
|
|
|
|
/** calculates padding for the input based on icon visibility and size */
|
|
|
|
|
const calculatePadding = () => {
|
|
|
|
|
const gap = 5; // gap between icon and text
|
|
|
|
|
// base padding when no icon is visible, see StyledRawInput padding
|
|
|
|
|
const basePadding = compact ? 12 : 18;
|
|
|
|
|
// if icon is visible, padding is icon width + gap + base padding,
|
|
|
|
|
// otherwise it's just base padding
|
|
|
|
|
return iconVisible ? iconWidth + gap + basePadding : basePadding;
|
|
|
|
|
};
|
|
|
|
|
let iconWidth = $state<number>(0);
|
|
|
|
|
/** tweens main input padding */
|
|
|
|
|
const inputPadding = new Tween(calculatePadding(), {
|
|
|
|
|
duration: 150,
|
|
|
|
|
easing: cubicOut
|
|
|
|
|
});
|
|
|
|
|
$effect(() => {
|
|
|
|
|
if (iconWidth >= 0) {
|
|
|
|
|
untrack(() => {
|
|
|
|
|
inputPadding.target = calculatePadding();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/*** HELPER FUNCTIONS ***/
|
|
|
|
|
|
|
|
|
|
/** returns the index of the highlighted item in filteredItems */
|
|
|
|
|
const getHighlightedIndex = () => {
|
|
|
|
|
@@ -172,104 +359,66 @@
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let lazyApplied = false;
|
|
|
|
|
/** opens combobox picker and propages any necessary events */
|
|
|
|
|
const openPicker = () => {
|
|
|
|
|
open = true;
|
|
|
|
|
|
|
|
|
|
// if lazy and not applied, enable loading state once and run callback
|
|
|
|
|
if (lazy && !lazyApplied) {
|
|
|
|
|
lazyApplied = true;
|
|
|
|
|
loading = true;
|
|
|
|
|
onlazy?.();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
updatePickerRect(); // update picker position
|
|
|
|
|
scrollToHighlighted(); // scroll to highlighted item
|
|
|
|
|
onopen?.(); // trigger onopen event if defined
|
|
|
|
|
};
|
|
|
|
|
/** closes combobox picker and propages any necessary events */
|
|
|
|
|
const closePicker = () => {
|
|
|
|
|
open = false;
|
|
|
|
|
|
|
|
|
|
searchValue = ''; // clear search value for next time picker opens
|
|
|
|
|
searching = false; // reset searching state
|
|
|
|
|
highlighted = value; // reset highlighted item to current value
|
|
|
|
|
onclose?.(); // trigger onclose event if defined
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** updates the value of the combobox and triggers any callbacks, including closing the picker */
|
|
|
|
|
const updateValue = (newValue: ComboboxOption) => {
|
|
|
|
|
if (!stateless) value = newValue;
|
|
|
|
|
closePicker();
|
|
|
|
|
popover.setOpen(false);
|
|
|
|
|
onchange?.(newValue);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** action to set the minimum width of the combobox based on the number of options */
|
|
|
|
|
const minWidth: Action<HTMLDivElement, { options: ComboboxOption[] }> = (
|
|
|
|
|
container,
|
|
|
|
|
buildOpts
|
|
|
|
|
) => {
|
|
|
|
|
const f = (opts: typeof buildOpts) => {
|
|
|
|
|
if (matchWidth && searchInput) {
|
|
|
|
|
container.style.width = searchInput.scrollWidth + 'px';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const options = opts.options;
|
|
|
|
|
if (options.length === 0) return;
|
|
|
|
|
const avg = options.reduce((acc, item) => acc + getLabel(item).length, 0) / options.length;
|
|
|
|
|
container.style.width = `${avg * 2.5}ch`;
|
|
|
|
|
/**
|
|
|
|
|
* Calculates average width based on provided options returning an estimated
|
|
|
|
|
* width in 'ch' units or a reasonable minimum when no options are provided.
|
|
|
|
|
*/
|
|
|
|
|
const calculateAvgWidth = (opts: ComboboxOption[]) => {
|
|
|
|
|
if (opts.length === 0) return '10ch'; // reasonable minimum width when no options
|
|
|
|
|
const labelAvg = opts.reduce((acc, item) => acc + getLabel(item).length, 0) / opts.length;
|
|
|
|
|
const infotextAvg =
|
|
|
|
|
opts.reduce((acc, item) => acc + (item.infotext ? item.infotext.length : 0), 0) / opts.length;
|
|
|
|
|
const avgWidth = labelAvg * 2 + infotextAvg * 1.5 + (infotextAvg > 0 ? 10 : 0);
|
|
|
|
|
return `${Math.max(avgWidth, 10)}ch`;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
f(buildOpts);
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
update: (updateOpts: typeof buildOpts) => {
|
|
|
|
|
f(updateOpts);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
/**
|
|
|
|
|
* Calculates longest width based on provided options, attempting to prevent
|
|
|
|
|
* wrapping by returning a width in 'ch' units based on the longest label and
|
|
|
|
|
* infotext, or a reasonable minimum when no options are provided.
|
|
|
|
|
*/
|
|
|
|
|
const calculateLongestWidth = (opts: ComboboxOption[]) => {
|
|
|
|
|
if (opts.length === 0) return '10ch'; // reasonable minimum width when no options
|
|
|
|
|
const longestLabel = Math.max(...opts.map((item) => getLabel(item).length));
|
|
|
|
|
const longestInfotext = Math.max(
|
|
|
|
|
...opts.map((item) => (item.infotext ? item.infotext.length : 0))
|
|
|
|
|
);
|
|
|
|
|
const longestWidth = longestLabel * 2 + longestInfotext * 1.5 + (longestInfotext > 0 ? 10 : 0);
|
|
|
|
|
return `${Math.max(longestWidth, 10)}ch`;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** updates the position of the picker */
|
|
|
|
|
const updatePickerRect = async () => {
|
|
|
|
|
if (!searchContainer || !pickerContainer) {
|
|
|
|
|
await tick();
|
|
|
|
|
if (!searchContainer || !pickerContainer) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const overlay = pickerContainer;
|
|
|
|
|
const target = searchContainer;
|
|
|
|
|
const targetRect = target.getBoundingClientRect();
|
|
|
|
|
|
|
|
|
|
if (!open) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// choose whether the overlay should be above or below the target
|
|
|
|
|
const availableSpaceBelow = window.innerHeight - targetRect.bottom;
|
|
|
|
|
const availableSpaceAbove = targetRect.top;
|
|
|
|
|
const outerMargin = 24;
|
|
|
|
|
|
|
|
|
|
if (availableSpaceBelow < availableSpaceAbove) {
|
|
|
|
|
// overlay should be above the target
|
|
|
|
|
overlay.style.bottom = `${window.innerHeight - targetRect.top - window.scrollY}px`;
|
|
|
|
|
overlay.style.top = 'auto';
|
|
|
|
|
overlay.style.maxHeight = `${availableSpaceAbove - outerMargin}px`;
|
|
|
|
|
pickerPosition = 'top';
|
|
|
|
|
overlay.dataset.side = 'top';
|
|
|
|
|
/** sets minimum width of the picker as configured by props */
|
|
|
|
|
const minWidth = (opts: {
|
|
|
|
|
options: ComboboxOption[];
|
|
|
|
|
matchElem: HTMLInputElement | null;
|
|
|
|
|
mode: Props['pickerWidth'];
|
|
|
|
|
}): Attachment<HTMLDivElement> => {
|
|
|
|
|
return (elem) => {
|
|
|
|
|
if ((opts.mode === 'match' || opts.options.length === 0) && opts.matchElem) {
|
|
|
|
|
// match width if explicitly enabled, or no options to average
|
|
|
|
|
elem.style.width = opts.matchElem.offsetWidth + 'px';
|
|
|
|
|
} else {
|
|
|
|
|
// overlay should be below the target
|
|
|
|
|
overlay.style.top = `${targetRect.bottom + window.scrollY}px`;
|
|
|
|
|
overlay.style.bottom = 'auto';
|
|
|
|
|
overlay.style.maxHeight = `${availableSpaceBelow - outerMargin}px`;
|
|
|
|
|
pickerPosition = 'bottom';
|
|
|
|
|
overlay.dataset.side = 'bottom';
|
|
|
|
|
// otherwise, set width based on average content width
|
|
|
|
|
let val = '10ch';
|
|
|
|
|
if (opts.mode === 'average') {
|
|
|
|
|
val = calculateAvgWidth(opts.options);
|
|
|
|
|
} else if (opts.mode === 'longest' || opts.mode === 'max-match') {
|
|
|
|
|
val = calculateLongestWidth(opts.options);
|
|
|
|
|
if (opts.mode === 'max-match') {
|
|
|
|
|
elem.style.maxWidth = opts.matchElem ? opts.matchElem.offsetWidth + 'px' : 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// set overlay left position
|
|
|
|
|
overlay.style.left = `${targetRect.left}px`;
|
|
|
|
|
}
|
|
|
|
|
elem.style.width = val;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** scrolls the picker to the highlighted item */
|
|
|
|
|
@@ -292,7 +441,7 @@
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const conditionalUse = $derived(use ? use : () => {});
|
|
|
|
|
/*** EXPORTED API ***/
|
|
|
|
|
|
|
|
|
|
/** focuses the combobox search input */
|
|
|
|
|
export const focus = () => {
|
|
|
|
|
@@ -309,18 +458,21 @@
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// when the value (or, in some circumstances, highlighted item) changes, update the search input
|
|
|
|
|
/*** EFFECTS & WINDOW CALLBACKS ***/
|
|
|
|
|
|
|
|
|
|
// when the value (or, in some circumstances, highlighted item) changes,
|
|
|
|
|
// update the search input
|
|
|
|
|
//
|
|
|
|
|
// expected triggers include: value, highlighted, useHighlighted, usePreview,
|
|
|
|
|
// searchInput, searching, and open
|
|
|
|
|
$effect(() => {
|
|
|
|
|
if (!searchInput) return;
|
|
|
|
|
if (!searchInput || searching) return;
|
|
|
|
|
|
|
|
|
|
if (useHighlighted && !searching) {
|
|
|
|
|
if ((!value && !highlighted) || (useHighlighted && !highlighted)) {
|
|
|
|
|
searchInput.value = '';
|
|
|
|
|
} else if (useHighlighted) {
|
|
|
|
|
searchInput.value = getLabel(highlighted);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (untrack(() => searching)) return;
|
|
|
|
|
|
|
|
|
|
if (!usePreview || (usePreview === 'auto' && open)) {
|
|
|
|
|
} else if (!usePreview || (usePreview === 'auto' && open)) {
|
|
|
|
|
searchInput.value = getLabel(value);
|
|
|
|
|
} else {
|
|
|
|
|
searchInput.value = getPreview(value);
|
|
|
|
|
@@ -334,37 +486,26 @@
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
|
// set initial picker position on load
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
updatePickerRect();
|
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
|
|
// update picker position on window resize
|
|
|
|
|
window.addEventListener('resize', updatePickerRect);
|
|
|
|
|
|
|
|
|
|
// add window click listener to close picker
|
|
|
|
|
window.addEventListener('click', (e) => {
|
|
|
|
|
if (!searchContainer || !pickerContainer) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// close picker if clicked outside
|
|
|
|
|
const handleWindowClick: MouseEventHandler<Window> = (e) => {
|
|
|
|
|
if (!open || !searchContainer || !pickerContainer) return;
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
searchContainer.contains(e.target as Node) ||
|
|
|
|
|
pickerContainer.contains(e.target as Node) ||
|
|
|
|
|
!open
|
|
|
|
|
e.target instanceof Node &&
|
|
|
|
|
!searchContainer.contains(e.target) &&
|
|
|
|
|
!pickerContainer.contains(e.target)
|
|
|
|
|
) {
|
|
|
|
|
return;
|
|
|
|
|
popover.setOpen(false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
closePicker();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<svelte:window onclick={handleWindowClick} />
|
|
|
|
|
|
|
|
|
|
<!-- Combobox picker -->
|
|
|
|
|
<Portal target="body">
|
|
|
|
|
{#if open}
|
|
|
|
|
<!-- Picker container -->
|
|
|
|
|
<div
|
|
|
|
|
class={[
|
|
|
|
|
'picker absolute top-0 left-0 z-50 overflow-y-auto px-2 py-3',
|
|
|
|
|
@@ -374,13 +515,12 @@
|
|
|
|
|
open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]',
|
|
|
|
|
open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]'
|
|
|
|
|
]}
|
|
|
|
|
use:minWidth={{ options: options }}
|
|
|
|
|
bind:this={pickerContainer}
|
|
|
|
|
transition:scale={{ duration: 200 }}
|
|
|
|
|
role="listbox"
|
|
|
|
|
onkeydown={(e) => {
|
|
|
|
|
if (e.key === 'Escape') {
|
|
|
|
|
closePicker();
|
|
|
|
|
popover.setOpen(false);
|
|
|
|
|
searchInput?.focus();
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
@@ -392,72 +532,27 @@
|
|
|
|
|
const margin = 10; // 10px margin for top & bottom
|
|
|
|
|
const atTop = target.scrollTop < margin;
|
|
|
|
|
const atBottom = target.scrollTop + target.clientHeight > target.scrollHeight - margin;
|
|
|
|
|
onscroll({ event: e, top: atTop, bottom: atBottom });
|
|
|
|
|
onscroll({ event: e, top: atTop, bottom: atBottom, searchInput: searchInput?.value ?? '' });
|
|
|
|
|
}}
|
|
|
|
|
tabindex="0"
|
|
|
|
|
{@attach minWidth({ options, mode: pickerWidth, matchElem: searchInput })}
|
|
|
|
|
{...popover.floating()}
|
|
|
|
|
>
|
|
|
|
|
{#each filteredItems as item, i (item.value)}
|
|
|
|
|
<div
|
|
|
|
|
data-id={item.value}
|
|
|
|
|
aria-selected={value?.value === item.value}
|
|
|
|
|
aria-label={getLabel(item)}
|
|
|
|
|
aria-disabled={item.disabled}
|
|
|
|
|
class={[
|
|
|
|
|
!compact
|
|
|
|
|
? 'mb-0.5 min-h-10 py-2.5 pr-1.5 pl-5'
|
|
|
|
|
: 'mb-0.25 min-h-8 py-1.5 pr-1.5 pl-2.5',
|
|
|
|
|
'flex flex-wrap items-center',
|
|
|
|
|
'rounded-sm text-sm capitalize outline-hidden select-none',
|
|
|
|
|
'hover:bg-sui-accent-500/30 dark:hover:bg-sui-accent-700/30',
|
|
|
|
|
item.value === highlighted?.value && 'bg-sui-accent-500/80 dark:bg-sui-accent-700/80',
|
|
|
|
|
item.disabled && 'cursor-not-allowed opacity-50'
|
|
|
|
|
]}
|
|
|
|
|
role="option"
|
|
|
|
|
onclick={() => {
|
|
|
|
|
if (item.disabled) return;
|
|
|
|
|
updateValue(item);
|
|
|
|
|
searchInput?.focus();
|
|
|
|
|
}}
|
|
|
|
|
onkeydown={() => {}}
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
>
|
|
|
|
|
{#if item.icon}
|
|
|
|
|
{@render item.icon(item)}
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<div class={['mr-8', item.icon && 'ml-2']}>
|
|
|
|
|
{#if item.render}
|
|
|
|
|
{@render item.render(item)}
|
|
|
|
|
{#each filteredItems as opt (opt.value)}
|
|
|
|
|
{@render option(opt)}
|
|
|
|
|
{:else}
|
|
|
|
|
{getLabel(item)}
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{#if item?.infotext}
|
|
|
|
|
<div class="text-sui-text/80 dark:text-sui-background/80 ml-auto text-sm">
|
|
|
|
|
{item.infotext}
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if value?.value === item.value}
|
|
|
|
|
<div class={[item?.infotext ? 'ml-2' : 'ml-auto']}>
|
|
|
|
|
<Check />
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
{:else}
|
|
|
|
|
<span class="block px-5 py-2 text-sm">
|
|
|
|
|
<!-- Display loading state or not found if no options available -->
|
|
|
|
|
{#if loading}
|
|
|
|
|
Loading...
|
|
|
|
|
{@render option(loadingOption, true)}
|
|
|
|
|
{:else}
|
|
|
|
|
{notFoundMessage}
|
|
|
|
|
{@render option(notFoundOption, true)}
|
|
|
|
|
{/if}
|
|
|
|
|
</span>
|
|
|
|
|
{/each}
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
</Portal>
|
|
|
|
|
|
|
|
|
|
<!-- Combobox main input container -->
|
|
|
|
|
<div class={classValue}>
|
|
|
|
|
<!-- Combobox Label -->
|
|
|
|
|
{#if label}
|
|
|
|
|
@@ -490,34 +585,98 @@
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{#snippet optionIcon(opt: ComboboxOption)}
|
|
|
|
|
{#if iconRender}
|
|
|
|
|
{@render iconRender(opt)}
|
|
|
|
|
{:else if opt.icon}
|
|
|
|
|
<opt.icon.component {...opt.icon.props} />
|
|
|
|
|
{/if}
|
|
|
|
|
{/snippet}
|
|
|
|
|
|
|
|
|
|
<!-- Combobox option -->
|
|
|
|
|
{#snippet option(opt: ComboboxOption, forceDisabled?: boolean)}
|
|
|
|
|
{@const optDisabled = opt.disabled || forceDisabled}
|
|
|
|
|
<!-- Option container -->
|
|
|
|
|
<div
|
|
|
|
|
data-id={opt.value}
|
|
|
|
|
aria-selected={value?.value === opt.value}
|
|
|
|
|
aria-label={getLabel(opt)}
|
|
|
|
|
aria-disabled={optDisabled}
|
|
|
|
|
class={[
|
|
|
|
|
!compact ? 'mb-0.5 min-h-10 py-2.5 pr-1.5 pl-5' : 'mb-0.25 min-h-8 py-1.5 pr-1.5 pl-2.5',
|
|
|
|
|
'flex flex-wrap items-center',
|
|
|
|
|
'rounded-sm text-sm capitalize outline-hidden select-none',
|
|
|
|
|
'hover:bg-sui-accent-500/30 dark:hover:bg-sui-accent-700/30',
|
|
|
|
|
opt.value === highlighted?.value && 'bg-sui-accent-500/80 dark:bg-sui-accent-700/80',
|
|
|
|
|
optDisabled && 'cursor-not-allowed opacity-50'
|
|
|
|
|
]}
|
|
|
|
|
role="option"
|
|
|
|
|
onclick={() => {
|
|
|
|
|
if (optDisabled) return;
|
|
|
|
|
updateValue(opt);
|
|
|
|
|
searchInput?.focus();
|
|
|
|
|
}}
|
|
|
|
|
onkeydown={() => {}}
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
>
|
|
|
|
|
<!-- Option icon -->
|
|
|
|
|
{@render optionIcon(opt)}
|
|
|
|
|
|
|
|
|
|
<!-- Option label -->
|
|
|
|
|
<div class={['mr-8', opt.icon && 'ml-2']}>
|
|
|
|
|
{@render snippetOrString(opt, labelRender || getLabel(opt))}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Option infotext (always right-aligned) -->
|
|
|
|
|
{#if opt.infotext || infotextRender}
|
|
|
|
|
<div class="text-sui-text/80 dark:text-sui-background/80 ml-auto text-sm">
|
|
|
|
|
{@render snippetOrString(opt, infotextRender || opt.infotext)}
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<!-- Option checkmark, visible if selected -->
|
|
|
|
|
{#if value?.value === opt.value}
|
|
|
|
|
<div class={[opt?.infotext ? 'ml-2' : 'ml-auto']}>
|
|
|
|
|
<Check />
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
{/snippet}
|
|
|
|
|
|
|
|
|
|
<!-- Search input box -->
|
|
|
|
|
{#snippet searchInputBox(caret: boolean = true)}
|
|
|
|
|
<div class="relative">
|
|
|
|
|
<div class="relative" {...popover.reference()}>
|
|
|
|
|
<!-- Persistant OR selected option icon, if visible -->
|
|
|
|
|
{#if iconVisible}
|
|
|
|
|
<div
|
|
|
|
|
class={[
|
|
|
|
|
(iconWidth === undefined || iconWidth === 0) && 'opacity-0',
|
|
|
|
|
'pointer-events-none absolute top-1/2 left-3.5 -translate-y-1/2 transform select-none'
|
|
|
|
|
'pointer-events-none absolute top-1/2 left-3.5 -translate-y-1/2 transform select-none',
|
|
|
|
|
iconWidth === 0 && 'opacity-0'
|
|
|
|
|
]}
|
|
|
|
|
transition:scale
|
|
|
|
|
bind:clientWidth={iconWidth}
|
|
|
|
|
>
|
|
|
|
|
{#if loading}
|
|
|
|
|
<Spinner class="stroke-sui-accent! -mt-0.5" size="1em" />
|
|
|
|
|
{:else if useHighlighted && highlighted?.icon}
|
|
|
|
|
{@render highlighted.icon(highlighted)}
|
|
|
|
|
{:else if value?.icon}
|
|
|
|
|
{@render value.icon(value)}
|
|
|
|
|
{:else if useHighlighted && highlighted}
|
|
|
|
|
{@render optionIcon(highlighted)}
|
|
|
|
|
{:else if value}
|
|
|
|
|
{@render optionIcon(value)}
|
|
|
|
|
{:else if icon}
|
|
|
|
|
{#if typeof icon === 'function'}
|
|
|
|
|
{@render icon()}
|
|
|
|
|
{:else}
|
|
|
|
|
<icon.component {...icon.props} />
|
|
|
|
|
{/if}
|
|
|
|
|
{:else}
|
|
|
|
|
❌
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<!-- Combobox input box -->
|
|
|
|
|
<StyledRawInput
|
|
|
|
|
style={iconWidth && iconVisible ? `padding-left: ${iconWidth + 14 + 10}px` : undefined}
|
|
|
|
|
style={`padding-left: ${inputPadding.current}px`}
|
|
|
|
|
class={[caret && 'pr-9', !valid && 'border-red-500!']}
|
|
|
|
|
{compact}
|
|
|
|
|
type="text"
|
|
|
|
|
@@ -526,13 +685,7 @@
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
bind:ref={searchInput}
|
|
|
|
|
onclick={() => {
|
|
|
|
|
if (!open) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
searchInput?.select();
|
|
|
|
|
}, 100);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
openPicker();
|
|
|
|
|
popover.setOpen(true);
|
|
|
|
|
}}
|
|
|
|
|
onkeydown={(e) => {
|
|
|
|
|
if (!searchInput) return;
|
|
|
|
|
@@ -542,17 +695,17 @@
|
|
|
|
|
updateValue(highlighted);
|
|
|
|
|
}
|
|
|
|
|
if (e.key === 'Enter') {
|
|
|
|
|
closePicker();
|
|
|
|
|
popover.setOpen(false);
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
} else if (e.key === 'Escape') {
|
|
|
|
|
closePicker();
|
|
|
|
|
popover.setOpen(false);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// open the picker
|
|
|
|
|
openPicker();
|
|
|
|
|
popover.setOpen(true);
|
|
|
|
|
|
|
|
|
|
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
|
|
|
searching = false;
|
|
|
|
|
@@ -578,7 +731,8 @@
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext)}
|
|
|
|
|
<!-- Right-aligned infotext (overlay) -->
|
|
|
|
|
{#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext) || infotextRender}
|
|
|
|
|
<div
|
|
|
|
|
class={[
|
|
|
|
|
'pointer-events-none absolute top-1/2 -translate-y-1/2 transform text-sm select-none',
|
|
|
|
|
@@ -586,7 +740,11 @@
|
|
|
|
|
caret ? 'end-10' : 'end-[1.125rem]'
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
{useHighlighted && highlighted?.infotext ? highlighted.infotext : value?.infotext}
|
|
|
|
|
{#if useHighlighted && highlighted}
|
|
|
|
|
{@render snippetOrString(highlighted, infotextRender || highlighted.infotext)}
|
|
|
|
|
{:else if value}
|
|
|
|
|
{@render snippetOrString(value, infotextRender || value.infotext)}
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
@@ -594,14 +752,24 @@
|
|
|
|
|
<CaretUpDown
|
|
|
|
|
class="absolute end-2.5 top-1/2 size-6 -translate-y-1/2"
|
|
|
|
|
onclick={() => {
|
|
|
|
|
open = !open;
|
|
|
|
|
if (open) searchInput?.focus();
|
|
|
|
|
popover.setOpen(!open);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
{/snippet}
|
|
|
|
|
|
|
|
|
|
{#snippet snippetOrString(
|
|
|
|
|
opt: ComboboxOption,
|
|
|
|
|
value: string | Snippet<[item: ComboboxOption]> | undefined
|
|
|
|
|
)}
|
|
|
|
|
{#if typeof value === 'function'}
|
|
|
|
|
{@render value(opt)}
|
|
|
|
|
{:else}
|
|
|
|
|
{value}
|
|
|
|
|
{/if}
|
|
|
|
|
{/snippet}
|
|
|
|
|
|
|
|
|
|
<style lang="postcss">
|
|
|
|
|
@reference "./styles/reference.css";
|
|
|
|
|
|
|
|
|
|
|
