release: WRNexusJS 0.5.10

2026-07-30 13:36:29 +05:30
parent 8fc6f15402
commit d1b0c55b53
159 changed files with 7509 additions and 604 deletions
@@ -0,0 +1,98 @@
+component PortalDashboard {
+  props {
+    @event action = function
+    @event navigate = function
+    size = "default"
+    color = "primary"
+    eyebrow = "Overview"
+    eyebrowKey = ""
+    title = "Dashboard"
+    titleKey = ""
+    description = ""
+    descriptionKey = ""
+    userName = ""
+    metrics = []
+    actions = []
+    updates = []
+    tasks = []
+    class = ""
+  }
+
+  functions {
+    function chooseAction(item, index) {
+      $emit("action", { item: item, value: item.value || "", index: index })
+    }
+
+    function chooseNavigation(item, index) {
+      $emit("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>
+  }
+}