52 lines
2.9 KiB
Svelte
52 lines
2.9 KiB
Svelte
<script lang="ts">
|
||
import ItemIcon from './ItemIcon.svelte';
|
||
import DatabaseFacts from './DatabaseFacts.svelte';
|
||
import type { DatabaseRelatedItem } from '$lib/database/items';
|
||
|
||
let {
|
||
label,
|
||
items,
|
||
emptyLabel = 'NONE ASSIGNED'
|
||
}: {
|
||
label: string;
|
||
items: DatabaseRelatedItem[];
|
||
emptyLabel?: string;
|
||
} = $props();
|
||
let selected = $state<DatabaseRelatedItem | null>(null);
|
||
</script>
|
||
|
||
<svelte:window onkeydown={(event) => { if (event.key === 'Escape') selected = null; }}/>
|
||
|
||
<div class="item-icon-rail" aria-label={`${label}: ${items.length ? items.map((item) => item.name).join(', ') : emptyLabel}`}>
|
||
{#if items.length}
|
||
{#each items as item}
|
||
<button type="button" title={`View ${item.name}`} aria-label={`View ${item.name} details`} onclick={() => selected = item}>
|
||
<ItemIcon src={item.iconUrl} alt=""/>
|
||
</button>
|
||
{/each}
|
||
{:else}
|
||
<small>{emptyLabel}</small>
|
||
{/if}
|
||
</div>
|
||
|
||
{#if selected?.preview}
|
||
<div class="database-preview-backdrop" role="presentation" onclick={(event) => { if (event.target === event.currentTarget) selected = null; }}>
|
||
<div class="database-preview-dialog" role="dialog" aria-modal="true" aria-labelledby={`database-preview-${selected.id}`}>
|
||
<header><div><small>DATABASE QUICK VIEW</small><strong id={`database-preview-${selected.id}`}>{selected.preview.name}</strong></div><button type="button" aria-label="Close details" onclick={() => selected = null}>×</button></header>
|
||
<article class="database-item-card">
|
||
<header>
|
||
<div class="database-item-icon"><ItemIcon src={selected.preview.iconUrl} alt=""/></div>
|
||
<div><small>{selected.preview.kicker}</small><h2>{selected.preview.name}</h2></div>
|
||
</header>
|
||
{#if selected.preview.badges?.length}<div class="database-item-badges">{#each selected.preview.badges as badge}<span class={badge.tone ?? ''}>{badge.label}</span>{/each}</div>{/if}
|
||
<DatabaseFacts facts={selected.preview.facts} layout={selected.preview.factLayout}/>
|
||
{#if selected.preview.lines?.length}<div class="database-item-lines">{#each selected.preview.lines as line}<div><span>{line.label}</span><b>{line.value}</b></div>{/each}</div>{/if}
|
||
{#if selected.preview.description}<p class:data-description={selected.preview.descriptionStyle === 'data'}>{selected.preview.description}</p>{/if}
|
||
{#if selected.preview.secondaryDescription}<p class="secondary-description" class:data-description={selected.preview.descriptionStyle === 'data'}>{selected.preview.secondaryDescription}</p>{/if}
|
||
{#if selected.preview.afterLines?.length}<div class="database-item-lines after-description">{#each selected.preview.afterLines as line}<div><span>{line.label}</span><b>{line.value}</b></div>{/each}</div>{/if}
|
||
{#if selected.preview.actions?.length}<footer class="database-item-actions">{#each selected.preview.actions as action}<a href={action.href}>{action.label} →</a>{/each}</footer>{/if}
|
||
</article>
|
||
</div>
|
||
</div>
|
||
{/if}
|