diff --git a/src/lib/holocene/combobox/combobox-option.svelte b/src/lib/holocene/combobox/combobox-option.svelte index b52fd8a5c2..3fe6e5a84f 100644 --- a/src/lib/holocene/combobox/combobox-option.svelte +++ b/src/lib/holocene/combobox/combobox-option.svelte @@ -5,11 +5,12 @@ import MenuItem from '$lib/holocene/menu/menu-item.svelte'; interface BaseProps { - label: string; + label?: string; class?: ClassNameValue; onclick?: () => void; leading?: Snippet; trailing?: Snippet; + children?: Snippet; } interface EnabledProps extends BaseProps { @@ -30,11 +31,12 @@ active = false, selected = false, disabled = false, - label, + label = '', class: className = '', onclick, leading, trailing, + children, }: Props = $props(); @@ -50,5 +52,9 @@ {leading} {trailing} > - {label} + {#if children} + {@render children()} + {:else} + {label} + {/if} diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte index ea8d92819e..499836ddef 100644 --- a/src/lib/holocene/combobox/combobox.svelte +++ b/src/lib/holocene/combobox/combobox.svelte @@ -95,6 +95,7 @@ class?: string; optionClass?: string; action?: Snippet; + optionLabel?: Snippet<[string | T, string]>; onchange?: (value: string | T) => void; onclose?: (selected: string | T) => void; oninput?: (value: string) => void; @@ -166,6 +167,7 @@ open = writable(false), maxMenuHeight = 'max-h-[20rem]', action, + optionLabel, chipLimit = 5, displayChips = true, selectAllLabel = 'Select All', @@ -659,12 +661,23 @@ {/if} {#each list as option, i (i)} - handleSelectOption(option)} - selected={isSelected(option, value)} - label={getDisplayValue(option)} - class={optionClass} - /> + {#if optionLabel} + handleSelectOption(option)} + selected={isSelected(option, value)} + label={getDisplayValue(option)} + class={optionClass} + > + {@render optionLabel(option, filterValue)} + + {:else} + handleSelectOption(option)} + selected={isSelected(option, value)} + label={getDisplayValue(option)} + class={optionClass} + /> + {/if} {:else} {#if !showAddCustom && loading === false}