68 lines
1.4 KiB
Svelte
68 lines
1.4 KiB
Svelte
<script>
|
|
/**
|
|
* @typedef {Object} Props
|
|
* @property {any} value
|
|
* @property {any} query
|
|
* @property {boolean} [is_required]
|
|
* @property {any} [on_change]
|
|
* @property {import('svelte').Snippet<[any]>} [children]
|
|
*/
|
|
|
|
/** @type {Props} */
|
|
let {
|
|
value = $bindable(),
|
|
query,
|
|
is_required = true,
|
|
on_change = () => {},
|
|
children
|
|
} = $props();
|
|
</script>
|
|
|
|
{#if is_required}
|
|
<select
|
|
required
|
|
bind:value
|
|
onchange={on_change}
|
|
class="w-full h-min p-2
|
|
border-2 border-black dark:border-none
|
|
bg-white dark:bg-black
|
|
text-black dark:text-white
|
|
appearance-none">
|
|
{#await query then vtypes}
|
|
{#each vtypes as vtype}
|
|
{#if vtype.id === value}
|
|
<option selected value={vtype.id}>
|
|
{@render children?.({ vtype, })}
|
|
</option>
|
|
{:else}
|
|
<option value={vtype.id}>
|
|
{@render children?.({ vtype, })}
|
|
</option>
|
|
{/if}
|
|
{/each}
|
|
{/await}
|
|
</select>
|
|
{:else}
|
|
<select
|
|
bind:value
|
|
class="w-full p-2 mx-2
|
|
border-2 border-black dark:border-none
|
|
bg-white dark:bg-black
|
|
text-black dark:text-white
|
|
appearance-none">
|
|
{#await query then vtypes}
|
|
{#each vtypes as vtype}
|
|
{#if vtype.id === value}
|
|
<option selected value={vtype.id}>
|
|
{@render children?.({ vtype, })}
|
|
</option>
|
|
{:else}
|
|
<option value={vtype.id}>
|
|
{@render children?.({ vtype, })}
|
|
</option>
|
|
{/if}
|
|
{/each}
|
|
{/await}
|
|
</select>
|
|
{/if}
|