454 lines
13 KiB
Plaintext
454 lines
13 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="wrn-portal-dashboard wrn-component--color-{color} wrn-component--size-{size} {class}">
|
|
<header class="wrn-portal-dashboard__hero">
|
|
<div>
|
|
{#if eyebrowKey}<span class="wrn-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
|
|
{#if !eyebrowKey}<span class="wrn-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="wrn-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
|
|
</header>
|
|
|
|
<section class="wrn-portal-dashboard__metrics" aria-label="Summary">
|
|
{#each metrics as item}
|
|
<article class="wrn-portal-dashboard__metric">
|
|
<span class="wrn-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="wrn-portal-dashboard__grid">
|
|
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--actions">
|
|
<div class="wrn-portal-dashboard__panel-heading"><div><small>Shortcuts</small><h2>Quick actions</h2></div></div>
|
|
<div class="wrn-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="wrn-portal-dashboard__panel">
|
|
<div class="wrn-portal-dashboard__panel-heading"><div><small>Priority</small><h2>Tasks requiring attention</h2></div></div>
|
|
<div class="wrn-portal-dashboard__list">
|
|
{#each tasks as item, index}
|
|
<a href="{item.href || '#'}" @click="chooseNavigation(item, index)">
|
|
<span class="wrn-portal-dashboard__status wrn-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="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--updates">
|
|
<div class="wrn-portal-dashboard__panel-heading"><div><small>Latest</small><h2>Recent updates</h2></div></div>
|
|
<div class="wrn-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>
|
|
}
|
|
|
|
style {
|
|
.wrn-portal-dashboard__status--urgent {
|
|
background: var(--wrn-color-danger);
|
|
}
|
|
|
|
.wrn-portal-dashboard__status--warning {
|
|
background: var(--wrn-color-warning);
|
|
}
|
|
|
|
.wrn-portal-dashboard__status--success {
|
|
background: var(--wrn-color-success);
|
|
}
|
|
|
|
/* Reusable responsive portal dashboard */
|
|
.wrn-portal-dashboard {
|
|
width: min(100%, 96rem);
|
|
margin-inline: auto;
|
|
color: var(--wrn-color-text);
|
|
}
|
|
|
|
.wrn-portal-dashboard__hero {
|
|
display: flex;
|
|
padding: clamp(1.25rem, 3vw, 2rem);
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: 1rem;
|
|
background:
|
|
radial-gradient(
|
|
circle at 85% 0%,
|
|
color-mix(in srgb, var(--wrn-color-primary) 20%, transparent),
|
|
transparent 34%
|
|
),
|
|
var(--wrn-color-surface);
|
|
box-shadow: var(--wrn-shadow-sm);
|
|
}
|
|
|
|
.wrn-portal-dashboard__eyebrow,
|
|
.wrn-portal-dashboard__panel-heading small {
|
|
color: var(--wrn-color-primary);
|
|
font-size: 0.7rem;
|
|
font-weight: 650;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wrn-portal-dashboard__hero h1 {
|
|
margin: 0.35rem 0 0;
|
|
font-size: clamp(1.4rem, 3vw, 2.25rem);
|
|
font-weight: 650;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.wrn-portal-dashboard__hero p {
|
|
max-width: 48rem;
|
|
margin: 0.5rem 0 0;
|
|
color: var(--wrn-color-muted);
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.wrn-portal-dashboard__metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
margin-top: 1rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.wrn-portal-dashboard__metric {
|
|
display: flex;
|
|
min-width: 0;
|
|
padding: 1rem;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: 0.85rem;
|
|
background: var(--wrn-color-surface);
|
|
box-shadow: var(--wrn-shadow-sm);
|
|
}
|
|
|
|
.wrn-portal-dashboard__metric-icon {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
flex: none;
|
|
padding: 0.55rem;
|
|
border-radius: 0.7rem;
|
|
color: var(--wrn-color-primary);
|
|
background: color-mix(in srgb, var(--wrn-color-primary) 12%, transparent);
|
|
}
|
|
|
|
.wrn-portal-dashboard__metric div {
|
|
display: grid;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wrn-portal-dashboard__metric small,
|
|
.wrn-portal-dashboard__metric span {
|
|
overflow: hidden;
|
|
color: var(--wrn-color-muted);
|
|
font-size: 0.7rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wrn-portal-dashboard__metric strong {
|
|
margin-block: 0.1rem;
|
|
font-size: 1.3rem;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.wrn-portal-dashboard__grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
|
|
margin-top: 1rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.wrn-portal-dashboard__panel {
|
|
min-width: 0;
|
|
padding: 1.1rem;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: 0.9rem;
|
|
background: var(--wrn-color-surface);
|
|
box-shadow: var(--wrn-shadow-sm);
|
|
}
|
|
|
|
.wrn-portal-dashboard__panel--actions {
|
|
grid-row: span 2;
|
|
}
|
|
|
|
.wrn-portal-dashboard__panel-heading {
|
|
display: flex;
|
|
margin-bottom: 0.9rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.wrn-portal-dashboard__panel-heading h2 {
|
|
margin: 0.2rem 0 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wrn-portal-dashboard__actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.wrn-portal-dashboard__actions a,
|
|
.wrn-portal-dashboard__list a {
|
|
display: flex;
|
|
min-width: 0;
|
|
padding: 0.8rem;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: 0.7rem;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition:
|
|
border-color 150ms ease,
|
|
background 150ms ease,
|
|
transform 150ms ease;
|
|
}
|
|
|
|
.wrn-portal-dashboard__actions a:hover,
|
|
.wrn-portal-dashboard__list a:hover {
|
|
border-color: color-mix(in srgb, var(--wrn-color-primary) 45%, var(--wrn-color-border));
|
|
background: var(--wrn-color-surface-2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.wrn-portal-dashboard__actions a > span:first-child {
|
|
width: 1.15rem;
|
|
height: 1.15rem;
|
|
flex: none;
|
|
color: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-portal-dashboard__actions a > span:nth-child(2),
|
|
.wrn-portal-dashboard__list a > span:nth-child(2) {
|
|
display: grid;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.wrn-portal-dashboard__actions a > span:last-child {
|
|
width: 0.9rem;
|
|
height: 0.9rem;
|
|
color: var(--wrn-color-muted);
|
|
}
|
|
|
|
.wrn-portal-dashboard__actions strong,
|
|
.wrn-portal-dashboard__list strong,
|
|
.wrn-portal-dashboard__timeline strong {
|
|
font-size: 0.8rem;
|
|
font-weight: 550;
|
|
}
|
|
|
|
.wrn-portal-dashboard__actions small,
|
|
.wrn-portal-dashboard__list small,
|
|
.wrn-portal-dashboard__timeline p,
|
|
.wrn-portal-dashboard__timeline small {
|
|
margin: 0.15rem 0 0;
|
|
color: var(--wrn-color-muted);
|
|
font-size: 0.7rem;
|
|
font-style: normal;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.wrn-portal-dashboard__list {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.wrn-portal-dashboard__list a {
|
|
border: 0;
|
|
border-bottom: 1px solid var(--wrn-color-border);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.wrn-portal-dashboard__status {
|
|
width: 0.55rem;
|
|
height: 0.55rem;
|
|
flex: none;
|
|
border-radius: 999px;
|
|
background: var(--wrn-color-muted);
|
|
}
|
|
|
|
.wrn-portal-dashboard__list em {
|
|
color: var(--wrn-color-muted);
|
|
font-size: 0.7rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
.wrn-portal-dashboard__timeline {
|
|
display: grid;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.wrn-portal-dashboard__timeline article {
|
|
display: flex;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.wrn-portal-dashboard__timeline article > span {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-top: 0.15rem;
|
|
flex: none;
|
|
color: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-portal-dashboard__timeline p {
|
|
margin-block: 0.15rem;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.wrn-portal-dashboard__metrics {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.wrn-portal-dashboard__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.wrn-portal-dashboard__panel--actions {
|
|
grid-row: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.wrn-portal-dashboard__hero {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
.wrn-portal-dashboard__metrics,
|
|
.wrn-portal-dashboard__actions {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Shared component foundation. */
|
|
|
|
.wrn-component {
|
|
--wrn-component-color: var(--wrn-color-primary);
|
|
--wrn-component-scale: 1;
|
|
margin: 0;
|
|
color: var(--wrn-color-text);
|
|
font-family: var(--wrn-font-sans, inherit);
|
|
}
|
|
|
|
.wrn-component--color-primary {
|
|
--wrn-component-color: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-component--color-secondary {
|
|
--wrn-component-color: var(--wrn-color-secondary);
|
|
}
|
|
|
|
.wrn-component--color-success {
|
|
--wrn-component-color: var(--wrn-color-success);
|
|
}
|
|
|
|
.wrn-component--color-warning {
|
|
--wrn-component-color: var(--wrn-color-warning);
|
|
}
|
|
|
|
.wrn-component--color-danger {
|
|
--wrn-component-color: var(--wrn-color-danger);
|
|
}
|
|
|
|
.wrn-component--color-info {
|
|
--wrn-component-color: var(--wrn-color-info);
|
|
}
|
|
|
|
.wrn-component--size-xs {
|
|
--wrn-component-scale: 0.78;
|
|
}
|
|
|
|
.wrn-component--size-sm {
|
|
--wrn-component-scale: 0.88;
|
|
}
|
|
|
|
.wrn-component--size-default,
|
|
.wrn-component--size-md {
|
|
--wrn-component-scale: 1;
|
|
}
|
|
|
|
.wrn-component--size-lg {
|
|
--wrn-component-scale: 1.14;
|
|
}
|
|
|
|
.wrn-component--size-xl {
|
|
--wrn-component-scale: 1.28;
|
|
}
|
|
|
|
.wrn-component:not(.wrn-btn) {
|
|
font-size: calc(1em * var(--wrn-component-scale));
|
|
}
|
|
|
|
.wrn-component :is(a, button, input, select, textarea):focus-visible {
|
|
outline-color: var(--wrn-component-color);
|
|
}
|
|
|
|
.wrn-component p {
|
|
margin: 0;
|
|
color: var(--wrn-color-muted);
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
}
|