102 lines
4.4 KiB
Plaintext
102 lines
4.4 KiB
Plaintext
component PortalDashboard {
|
|
outputs {
|
|
action(payload: { item: string | number | boolean | null | object; value: string | number | boolean; index: number })
|
|
navigate(payload: { item: string | number | boolean | null | object; value: string | number | boolean; index: number })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
eyebrow: string = "Overview"
|
|
eyebrowKey: string = ""
|
|
title: string = "Dashboard"
|
|
titleKey: string = ""
|
|
description: string = ""
|
|
descriptionKey: string = ""
|
|
userName: string = ""
|
|
metrics: unknown[] = []
|
|
actions: unknown[] = []
|
|
updates: unknown[] = []
|
|
tasks: unknown[] = []
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
client function chooseAction(item, index) {
|
|
output.action({ item: item, value: item.value || "", index: index })
|
|
}
|
|
|
|
client function chooseNavigation(item, index) {
|
|
output.navigate({ item: item, value: item.value || "", index: index })
|
|
}
|
|
}
|
|
|
|
view {
|
|
<main class="wire-portal-dashboard wire-next--color-{color} wire-next--size-{size} {class}">
|
|
<header class="wire-portal-dashboard__hero">
|
|
<div>
|
|
{#if eyebrowKey}<span class="wire-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
|
|
{#if !eyebrowKey}<span class="wire-portal-dashboard__eyebrow">{eyebrow}</span>{/if}
|
|
<h1>
|
|
{#if titleKey}<span data-t="{titleKey}">{title}</span>{/if}
|
|
{#if !titleKey}<span>{title}</span>{/if}
|
|
{#if userName}, {userName}{/if}
|
|
</h1>
|
|
{#if descriptionKey}<p data-t="{descriptionKey}">{description}</p>{/if}
|
|
{#if !descriptionKey && description}<p>{description}</p>{/if}
|
|
</div>
|
|
<div class="wire-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
|
|
</header>
|
|
|
|
<section class="wire-portal-dashboard__metrics" aria-label="Summary">
|
|
{#each metrics as item}
|
|
<article class="wire-portal-dashboard__metric">
|
|
<span class="wire-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true"></span>
|
|
<div><small>{item.label}</small><strong>{item.value}</strong>{#if item.detail}<span>{item.detail}</span>{/if}</div>
|
|
</article>
|
|
{/each}
|
|
</section>
|
|
|
|
<div class="wire-portal-dashboard__grid">
|
|
<section class="wire-portal-dashboard__panel wire-portal-dashboard__panel--actions">
|
|
<div class="wire-portal-dashboard__panel-heading"><div><small>Shortcuts</small><h2>Quick actions</h2></div></div>
|
|
<div class="wire-portal-dashboard__actions">
|
|
{#each actions as item, index}
|
|
<a href="{item.href || '#'}" @click="chooseAction(item, index)">
|
|
<span class="{item.icon || 'icon-[lucide--arrow-up-right]'}" aria-hidden="true"></span>
|
|
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
|
|
<span class="icon-[lucide--chevron-right]" aria-hidden="true"></span>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wire-portal-dashboard__panel">
|
|
<div class="wire-portal-dashboard__panel-heading"><div><small>Priority</small><h2>Tasks requiring attention</h2></div></div>
|
|
<div class="wire-portal-dashboard__list">
|
|
{#each tasks as item, index}
|
|
<a href="{item.href || '#'}" @click="chooseNavigation(item, index)">
|
|
<span class="wire-portal-dashboard__status wire-portal-dashboard__status--{item.status || 'default'}"></span>
|
|
<span><strong>{item.label}</strong>{#if item.detail}<small>{item.detail}</small>{/if}</span>
|
|
{#if item.meta}<em>{item.meta}</em>{/if}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wire-portal-dashboard__panel wire-portal-dashboard__panel--updates">
|
|
<div class="wire-portal-dashboard__panel-heading"><div><small>Latest</small><h2>Recent updates</h2></div></div>
|
|
<div class="wire-portal-dashboard__timeline">
|
|
{#each updates as item}
|
|
<article>
|
|
<span class="{item.icon || 'icon-[lucide--bell]'}" aria-hidden="true"></span>
|
|
<div><strong>{item.label}</strong>{#if item.detail}<p>{item.detail}</p>{/if}<small>{item.time || ''}</small></div>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
}
|
|
}
|