release: WRNexusJS 0.3.4
This commit is contained in:
@@ -11,59 +11,71 @@ component AnalyticsDashboardPreview {
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
|
||||
<div
|
||||
class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:items-center lg:p-8"
|
||||
>
|
||||
<div>
|
||||
<section class="wire-analytics-preview {class}">
|
||||
<div class="wire-analytics-preview__surface">
|
||||
<div class="wire-analytics-preview__visual">
|
||||
{#if image}
|
||||
<img
|
||||
src="{image}"
|
||||
alt="{alt}"
|
||||
class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover"
|
||||
/>
|
||||
<img
|
||||
src="{image}"
|
||||
alt="{alt}"
|
||||
class="wire-analytics-preview__image"
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-5"
|
||||
role="img"
|
||||
aria-label="Delivery trend rising over seven days"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4 text-sm">
|
||||
<strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
|
||||
<span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
|
||||
</div>
|
||||
<svg
|
||||
class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]"
|
||||
viewBox="0 0 700 250"
|
||||
aria-hidden="true"
|
||||
<div
|
||||
class="wire-analytics-preview__chart"
|
||||
role="img"
|
||||
aria-label="Delivery trend rising over seven days"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="wire-analytics-area"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
|
||||
<stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
|
||||
<path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
|
||||
<path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
|
||||
</svg>
|
||||
<div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
|
||||
</div>
|
||||
<div class="wire-analytics-preview__chart-header">
|
||||
<strong>Delivery trend</strong>
|
||||
<span>↗ 18.4%</span>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
class="wire-analytics-preview__chart-svg"
|
||||
viewBox="0 0 700 250"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="currentColor" stop-opacity=".3"></stop>
|
||||
<stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" stroke="var(--wire-color-border,#e2e8f0)">
|
||||
<path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path>
|
||||
</g>
|
||||
<path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
|
||||
<path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
|
||||
</svg>
|
||||
|
||||
<div class="wire-analytics-preview__days">
|
||||
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
|
||||
{#if title}<h2 class="mt-4 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
|
||||
{#if description}<p class="mt-4 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
|
||||
<div class="mt-5"><slot /></div>
|
||||
{#if href}<a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline">{actionLabel}<span aria-hidden="true">→</span></a>{/if}
|
||||
<div class="wire-analytics-preview__content">
|
||||
{#if eyebrow}
|
||||
<p class="wire-analytics-preview__eyebrow">{eyebrow}</p>
|
||||
{/if}
|
||||
|
||||
{#if title}
|
||||
<h2 class="wire-analytics-preview__title">{title}</h2>
|
||||
{/if}
|
||||
|
||||
{#if description}
|
||||
<p class="wire-analytics-preview__description">{description}</p>
|
||||
{/if}
|
||||
|
||||
<div class="wire-analytics-preview__metrics"><slot /></div>
|
||||
|
||||
{#if href}
|
||||
<a href="{href}" class="wire-analytics-preview__action">
|
||||
{actionLabel}<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -2,26 +2,32 @@ component MetricGrid {
|
||||
props {
|
||||
label = "Platform metrics"
|
||||
metrics = []
|
||||
compact = false
|
||||
columns = 4
|
||||
class = ""
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
|
||||
<div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<section
|
||||
class="wire-metric-grid-shell {compact ? 'wire-metric-grid-shell--compact' : ''} {class}"
|
||||
aria-label="{label}"
|
||||
>
|
||||
<div
|
||||
class="wire-metric-grid"
|
||||
class:wire-metric-grid--compact='{compact}'
|
||||
data-columns="{columns}"
|
||||
>
|
||||
{#each metrics as metric}
|
||||
<article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))]">
|
||||
<strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
|
||||
{metric.value}
|
||||
</strong>
|
||||
<span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
|
||||
<article class="wire-metric-card" class:wire-metric-card--compact='{compact}'>
|
||||
<strong class="wire-metric-card__value">{metric.value}</strong>
|
||||
<span class="wire-metric-card__label">{metric.label}</span>
|
||||
|
||||
{#if metric.description}
|
||||
<p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
|
||||
<p class="wire-metric-card__description">{metric.description}</p>
|
||||
{/if}
|
||||
</article>
|
||||
{:empty}
|
||||
<p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
|
||||
No metrics available.
|
||||
</p>
|
||||
<p class="wire-metric-grid__empty">No metrics available.</p>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
component SegmentedButtonGroup {
|
||||
props {
|
||||
label = "Options"
|
||||
items = []
|
||||
active = ""
|
||||
size = "md"
|
||||
fullWidth = false
|
||||
class = ""
|
||||
}
|
||||
|
||||
state current = active
|
||||
|
||||
view {
|
||||
<div
|
||||
class="wire-segmented-group {fullWidth ? 'wire-segmented-group--full' : ''} wire-segmented-group--{size} {class}"
|
||||
role="tablist"
|
||||
aria-label="{label}"
|
||||
>
|
||||
{#each items as item, index}
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected="{current === item.value}"
|
||||
disabled="{item.disabled}"
|
||||
class="wire-segmented-group__button"
|
||||
class:wire-segmented-group__button--active='{current === item.value}'
|
||||
@click="current = item.value"
|
||||
>
|
||||
{#if item.icon}
|
||||
<span class="wire-segmented-group__icon {item.icon}" aria-hidden="true"></span>
|
||||
{/if}
|
||||
|
||||
<span class="wire-segmented-group__label">{item.label}</span>
|
||||
|
||||
{#if item.badge}
|
||||
<span class="wire-segmented-group__badge">{item.badge}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{:empty}
|
||||
<span class="wire-segmented-group__empty">No options available</span>
|
||||
{/each}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user