| <script lang="ts"> | |
| import { Search, X } from '@lucide/svelte'; | |
| import { Input } from '$lib/components/ui/input'; | |
| import { ICON_CLASS_DEFAULT } from '$lib/constants'; | |
| interface Props { | |
| autofocus?: boolean; | |
| value?: string; | |
| placeholder?: string; | |
| onInput?: (value: string) => void; | |
| onClose?: () => void; | |
| onKeyDown?: (event: KeyboardEvent) => void; | |
| class?: string; | |
| id?: string; | |
| ref?: HTMLInputElement | null; | |
| isCancelAlwaysVisible?: boolean; | |
| } | |
| let { | |
| autofocus, | |
| class: className, | |
| id, | |
| isCancelAlwaysVisible = false, | |
| onClose, | |
| onInput, | |
| onKeyDown, | |
| placeholder = 'Search...', | |
| ref = $bindable(null), | |
| value = $bindable('') | |
| }: Props = $props(); | |
| let showClearButton = $derived(isCancelAlwaysVisible || !!value || !!onClose); | |
| function handleInput(event: Event) { | |
| const target = event.target as HTMLInputElement; | |
| value = target.value; | |
| onInput?.(target.value); | |
| } | |
| function handleClear() { | |
| if (value) { | |
| value = ''; | |
| onInput?.(''); | |
| ref?.focus({ preventScroll: true }); | |
| } else { | |
| onClose?.(); | |
| } | |
| } | |
| </script> | |
| <div class="relative {className}"> | |
| <Search | |
| class="absolute top-1/2 left-3 z-10 {ICON_CLASS_DEFAULT} -translate-y-1/2 transform text-muted-foreground" | |
| /> | |
| <Input | |
| bind:ref | |
| bind:value | |
| {autofocus} | |
| class="pl-9 {showClearButton ? 'pr-9' : ''}" | |
| {id} | |
| oninput={handleInput} | |
| onkeydown={onKeyDown} | |
| {placeholder} | |
| type="search" | |
| /> | |
| {#if showClearButton} | |
| <button | |
| aria-label={value ? 'Clear search' : 'Close'} | |
| class="absolute top-1/2 right-3 -translate-y-1/2 transform cursor-pointer text-muted-foreground transition-colors hover:text-foreground" | |
| onclick={handleClear} | |
| type="button" | |
| > | |
| <X class={ICON_CLASS_DEFAULT} /> | |
| </button> | |
| {/if} | |
| </div> | |