43 lines
995 B
Svelte
43 lines
995 B
Svelte
<script lang="ts" generics="Value extends string">
|
|
import { tv } from 'tailwind-variants';
|
|
|
|
const select = tv({
|
|
base: 'cursor-pointer border-2 border-border focus:si-border-border focus:si-border-2 bg-surface px-2 py-1 text-xs font-bold text-text transition-opacity focus:outline-3'
|
|
});
|
|
|
|
type Option = {
|
|
value: Value;
|
|
label: string;
|
|
};
|
|
|
|
let {
|
|
value = $bindable(),
|
|
options = [] as Option[],
|
|
label,
|
|
id: propId,
|
|
class: className = ''
|
|
}: {
|
|
value: Value;
|
|
options: Option[];
|
|
label?: string;
|
|
id?: string;
|
|
class?: string;
|
|
} = $props();
|
|
|
|
const svelteId = $props.id();
|
|
const id = $derived(propId ?? svelteId);
|
|
</script>
|
|
|
|
<div class="flex items-center gap-2 {className}">
|
|
{#if label}
|
|
<label for={id} class="text-xs font-bold tracking-wider text-text-muted uppercase">
|
|
{label}
|
|
</label>
|
|
{/if}
|
|
<select {id} bind:value class={select()}>
|
|
{#each options as option (option.value)}
|
|
<option value={option.value}>{option.label}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|