feat(ui): make inputselect also handle value+label options
This commit is contained in:
@@ -1,16 +1,24 @@
|
||||
<script lang="ts">
|
||||
type SelectOption = string | { value: number; label: string };
|
||||
|
||||
interface Props {
|
||||
options?: string[];
|
||||
options?: SelectOption[];
|
||||
value?: number;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
let { options = [], value = $bindable(0), id = '' }: Props = $props();
|
||||
|
||||
const normalized = $derived(
|
||||
options.map((opt, i) =>
|
||||
typeof opt === 'string' ? { value: i, label: opt } : opt
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
<select {id} bind:value class="bg-layer-2 text-text">
|
||||
{#each options as label, i (label)}
|
||||
<option value={i}>{label}</option>
|
||||
{#each normalized as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user