57 lines
1.6 KiB
Svelte
57 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
// eslint-disable-next-line no-undef
|
|
type T = $$Generic;
|
|
|
|
export let id: string | null = null;
|
|
export let name: string | null = null;
|
|
export let disabled = false;
|
|
export let available: string[] | { [key: string]: T } = {};
|
|
export let value: T[] = [];
|
|
</script>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<select
|
|
{id}
|
|
{name}
|
|
class="select select-bordered select-xs"
|
|
disabled={disabled || available.length === 0}
|
|
on:change={(e) => {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
value.push(Object.values(available)[Object.keys(available).indexOf(e.target.value)]);
|
|
value = value;
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
e.target.value = '-';
|
|
}}
|
|
>
|
|
<option selected hidden>-</option>
|
|
{#each Object.keys(available) as badge}
|
|
<option
|
|
hidden={value.find(
|
|
(v) => v === Object.values(available)[Object.keys(available).indexOf(badge)]
|
|
) !== undefined}>{badge}</option
|
|
>
|
|
{/each}
|
|
</select>
|
|
<div class="flex flow flex-wrap gap-2">
|
|
{#each value as badge, i}
|
|
{#if Object.values(available).indexOf(badge) !== -1}
|
|
<div class="badge badge-outline gap-1" class:brightness-[60%]={disabled}>
|
|
<span class:cursor-not-allowed={disabled}>
|
|
<button
|
|
{disabled}
|
|
class:pointer-events-none={disabled}
|
|
on:click={() => {
|
|
value.splice(i, 1);
|
|
value = value;
|
|
}}>✕</button
|
|
>
|
|
</span>
|
|
{Object.keys(available)[Object.values(available).indexOf(badge)]}
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</div>
|