64 lines
1.2 KiB
Svelte
64 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
let {
|
|
children,
|
|
id,
|
|
name,
|
|
value = $bindable(),
|
|
label,
|
|
notice,
|
|
required = false,
|
|
disabled = false,
|
|
size = 'md',
|
|
pickyWidth = true,
|
|
onChange
|
|
}: {
|
|
children: Snippet;
|
|
id?: string;
|
|
name?: string;
|
|
value?: any;
|
|
label?: string;
|
|
notice?: string;
|
|
required?: boolean;
|
|
disabled?: boolean;
|
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
pickyWidth?: boolean;
|
|
onChange?: ({ value }: { value: any }) => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div>
|
|
{#if label}
|
|
<label class="label" for={id}>
|
|
<span class="label-text">
|
|
{label}
|
|
{#if required}
|
|
<span class="text-red-700">*</span>
|
|
{/if}
|
|
</span>
|
|
</label>
|
|
{/if}
|
|
<select
|
|
class="select select-bordered w-[100%]"
|
|
class:sm:max-w-[16rem]={pickyWidth}
|
|
class:select-xs={size === 'xs'}
|
|
class:select-sm={size === 'sm'}
|
|
class:select-md={size === 'md'}
|
|
class:select-lg={size === 'lg'}
|
|
{id}
|
|
{name}
|
|
{required}
|
|
{disabled}
|
|
bind:value
|
|
onchange={() => onChange && onChange({ value: value })}
|
|
>
|
|
{@render children()}
|
|
</select>
|
|
{#if notice}
|
|
<label class="label" for={id}>
|
|
<span class="label-text-alt">{notice}</span>
|
|
</label>
|
|
{/if}
|
|
</div>
|