WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refresh UI components and showcase; release updated framework packages

Browse Source
This commit is contained in:
Clintchiz committed 2026-09-20 18:13:24 +05:30
1 parent d800228585
commit c77f5e1cec
293 files changed
+22544 -35778
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/DataMap.wrn
+13 -87
View File
@@ -13,96 +13,22 @@ component DataMap {
variant: string = "default"
class: string = ""
}
state selectedLabel: string = ""
functions {
client function choose(item) { selectedLabel = item.label; output.select({ value: item.value, item: item }); output.change({ value: item.value, item: item }) }
shared function shade(item) { return Math.max(6, Math.min(35, (Number(item.value) || 0) / 3)) + "%" }
}
view {
<section class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--data-map wrn-next--variant-{variant} {class}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items}<div class="wrn-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
<slot />
</section>
<section {...attrs} class="wrn-data-map {class}">{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}<div class="wrn-data-map__grid" role="group" aria-label="{title}">{#each items as item}<button type="button" aria-pressed="{selectedLabel === item.label}" style="--heat:{shade(item)}" @click="choose(item)"><strong>{item.label}</strong><span>{item.value}</span></button>{/each}</div><small>Lower activity <span class="wrn-data-map__legend"></span> Higher activity</small><slot /></section>
}
style {
.wrn-next--data-map {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
}
.wrn-next--data-map > p { margin: 0; color: var(--wrn-color-muted); }
.wrn-next--data-map > .wrn-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wrn-next--data-map > .wrn-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wrn-radius-sm); background: var(--wrn-color-surface-2); }
/* 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;
}
.wrn-data-map { display:grid; gap:.85rem; color:var(--wrn-color-text); }
.wrn-data-map p { margin:0; color:var(--wrn-color-muted); font-size:.875rem; }
.wrn-data-map__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(6rem,1fr)); gap:.4rem; }
.wrn-data-map button { display:grid; gap:.35rem; padding:1rem .65rem; border:1px solid var(--wrn-color-border); border-radius:6px; background:color-mix(in srgb,var(--wrn-color-primary) var(--heat),var(--wrn-color-surface)); color:var(--wrn-color-text); font:inherit; font-size:.8rem; cursor:pointer; }
.wrn-data-map button[aria-pressed="true"] { outline:2px solid var(--wrn-color-primary-text); outline-offset:2px; }
.wrn-data-map small { display:flex; align-items:center; gap:.5rem; color:var(--wrn-color-muted); }
.wrn-data-map__legend { display:inline-block; width:4rem; height:.5rem; background:linear-gradient(90deg,var(--wrn-color-primary-soft),var(--wrn-color-primary)); border-radius:4px; }
}
}