45 lines
2.0 KiB
Svelte
45 lines
2.0 KiB
Svelte
<script lang="ts">
|
||
let {
|
||
items,
|
||
value = $bindable(''),
|
||
label,
|
||
placeholder = 'Search available items…',
|
||
disabledIds = [],
|
||
onchange
|
||
}: {
|
||
items: Array<{ id: string; name: string; iconUrl?: string; category?: string; pending?: boolean }>;
|
||
value?: string;
|
||
label: string;
|
||
placeholder?: string;
|
||
disabledIds?: string[];
|
||
onchange?: (id: string) => void;
|
||
} = $props();
|
||
let open = $state(false);
|
||
let query = $state('');
|
||
const selected = $derived(items.find((item) => item.id === value));
|
||
const results = $derived(items.filter((item) => item.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())).slice(0, 40));
|
||
const choose = (id: string) => { value = id; onchange?.(id); open = false; query = ''; };
|
||
</script>
|
||
|
||
<div class="builder-picker">
|
||
<span>{label}</span>
|
||
<button type="button" class="builder-picker-current" aria-expanded={open} onclick={() => open = !open}>
|
||
{#if selected?.iconUrl}<img src={selected.iconUrl} alt=""/>{:else}<i>◇</i>{/if}
|
||
<b>{selected?.name ?? 'SELECT ITEM'}</b><small>{selected?.category ?? (selected ? 'EQUIPPED' : 'UNASSIGNED')}</small><em>{open ? '×' : '＋'}</em>
|
||
</button>
|
||
{#if open}
|
||
<div class="builder-picker-panel">
|
||
<input type="search" bind:value={query} {placeholder} aria-label={placeholder}/>
|
||
<div>
|
||
{#if selected}<button type="button" class="builder-picker-clear" onclick={() => choose('')}><i>×</i><span><b>CLEAR SLOT</b><small>REMOVE CURRENT SELECTION</small></span><em>CLEAR</em></button>{/if}
|
||
{#each results as item}
|
||
<button type="button" class:selected={item.id === value} disabled={disabledIds.includes(item.id)} onclick={() => choose(item.id)}>
|
||
{#if item.iconUrl}<img src={item.iconUrl} alt=""/>{:else}<i>◇</i>{/if}
|
||
<span><b>{item.name}</b><small>{item.category ?? 'AVAILABLE'}</small></span><em>{item.id === value ? 'EQUIPPED' : disabledIds.includes(item.id) ? 'CONFLICT' : 'SELECT'}</em>
|
||
</button>
|
||
{:else}<p>NO MATCHING ITEMS</p>{/each}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</div>
|