diff --git a/frontend/viewer/src/lib/components/field-editors/select.svelte b/frontend/viewer/src/lib/components/field-editors/select.svelte index 5a39aedeb6..306c6e0a94 100644 --- a/frontend/viewer/src/lib/components/field-editors/select.svelte +++ b/frontend/viewer/src/lib/components/field-editors/select.svelte @@ -26,8 +26,9 @@ filterPlaceholder?: string; emptyResultsPlaceholder?: string; drawerTitle?: string; - onchange?: (value: Value) => void; + onchange?: (value: Value | undefined) => void; class?: string; + nullOption?: string; } = $props(); const { @@ -40,7 +41,8 @@ emptyResultsPlaceholder, drawerTitle, onchange, - class: className + class: className, + nullOption, } = $derived(constProps); function getId(value: Value): Primitive { @@ -66,7 +68,7 @@ open = false; } - function selectValue(newValue: Value) { + function selectValue(newValue: Value | undefined) { value = newValue; onchange?.(newValue); open = false; @@ -96,7 +98,7 @@ {:else} - {placeholder ?? $t`None`} + {placeholder ?? nullOption ?? $t`None`}   @@ -123,6 +125,19 @@ {emptyResultsPlaceholder ?? $t`No items found`} + {#if nullOption} + {@const selected = value === undefined || value === null} + selectValue(undefined)} + class="group max-md:h-12 text-muted-foreground" + data-value-index={-1} + aria-label={nullOption} + > + + {nullOption} + + {/if} {#each renderedOptions as option, i (getId(option))} {@const label = getLabel(option)} {@const id = getId(option)} diff --git a/frontend/viewer/src/lib/components/ui/switch/switch.svelte b/frontend/viewer/src/lib/components/ui/switch/switch.svelte index 9ff4de22f3..ae31884ff3 100644 --- a/frontend/viewer/src/lib/components/ui/switch/switch.svelte +++ b/frontend/viewer/src/lib/components/ui/switch/switch.svelte @@ -20,7 +20,7 @@ bind:checked class={cn( 'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', - className, + !!label || className, )} {...restProps} > @@ -35,7 +35,7 @@ {/snippet} {#if label} -