| <script lang="ts"> | |
| import { fly } from 'svelte/transition'; | |
| import { Input } from '$lib/components/ui/input'; | |
| import { Label } from '$lib/components/ui/label'; | |
| interface Props { | |
| name: string; | |
| value: string; | |
| suggestions?: string[]; | |
| isLoadingSuggestions?: boolean; | |
| isAutocompleteActive?: boolean; | |
| autocompleteIndex?: number; | |
| onInput: (value: string) => void; | |
| onKeydown: (event: KeyboardEvent) => void; | |
| onBlur: () => void; | |
| onFocus: () => void; | |
| onSelectSuggestion: (value: string) => void; | |
| } | |
| let { | |
| name, | |
| value = '', | |
| suggestions = [], | |
| isLoadingSuggestions = false, | |
| isAutocompleteActive = false, | |
| autocompleteIndex = 0, | |
| onInput, | |
| onKeydown, | |
| onBlur, | |
| onFocus, | |
| onSelectSuggestion | |
| }: Props = $props(); | |
| </script> | |
| <div class="relative grid gap-1"> | |
| <Label for="tpl-arg-{name}" class="mb-1 text-muted-foreground"> | |
| <span> | |
| {name} | |
| <span class="text-destructive">*</span> | |
| </span> | |
| {#if isLoadingSuggestions} | |
| <span class="text-xs text-muted-foreground/50">...</span> | |
| {/if} | |
| </Label> | |
| <Input | |
| id="tpl-arg-{name}" | |
| type="text" | |
| {value} | |
| oninput={(e) => onInput(e.currentTarget.value)} | |
| onkeydown={onKeydown} | |
| onblur={onBlur} | |
| onfocus={onFocus} | |
| placeholder="Enter {name}" | |
| autocomplete="off" | |
| /> | |
| {#if isAutocompleteActive && suggestions.length > 0} | |
| <div | |
| class="absolute top-full right-0 left-0 z-10 mt-1 max-h-32 overflow-y-auto rounded-lg border border-border/50 bg-background shadow-lg" | |
| transition:fly={{ y: -5, duration: 100 }} | |
| > | |
| {#each suggestions as suggestion, i (suggestion)} | |
| <button | |
| type="button" | |
| onmousedown={() => onSelectSuggestion(suggestion)} | |
| class="w-full px-3 py-1.5 text-left text-sm hover:bg-accent {i === autocompleteIndex | |
| ? 'bg-accent' | |
| : ''}" | |
| > | |
| {suggestion} | |
| </button> | |
| {/each} | |
| </div> | |
| {/if} | |
| </div> | |