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

examples/component-showcase/app/pages/components/tabs.wrn
+222 -212
View File
@@ -23,7 +23,7 @@ page TabsDetail {
<span class="showcase-eyebrow">Navigation component</span>
<h1>Tabs</h1>
<p>Switch between related responsive content panels with horizontal or vertical orientation and selection events.</p>
<div class="detail-badges"><span>9 props</span><span>2 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
<div class="detail-badges"><span>9 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
@@ -35,119 +35,121 @@ page TabsDetail {
<div class="playground-preview-source" data-playground-preview><Tabs color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' mode='{playground_mode}' param='{playground_param}' label='{playground_label}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Tabs
items='[
<span>&#123;</span>
"id": "tabs-0-1",
"key": "tabs-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#tabs-demo",
"actionHref": "#tabs-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "tabs-0-2",
"key": "tabs-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#tabs-demo",
"actionHref": "#tabs-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'&gt;
&lt;div data-slot="panel-<span>&#123;</span>valueOf(item, index)<span>&#125;</span>"&gt;
&lt;div class="showcase-slot"&gt;panel-<span>&#123;</span>value Of(item, index)<span>&#125;</span> slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Tabs&gt;</code></pre>
<pre><code data-playground-code>page TabsExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"id": "tabs-0-1",
"key": "tabs-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#tabs-demo",
"actionHref": "#tabs-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "tabs-0-2",
"key": "tabs-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#tabs-demo",
"actionHref": "#tabs-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Tabs
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -281,30 +283,32 @@ page TabsDetail {
</div>
<section class="demo-code" aria-label="Horizontal content tabs usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Tabs
items='[
<span>&#123;</span>
"label": "Overview",
"value": "overview",
"content": "Overview content"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Requirements",
"value": "requirements",
"content": "Requirements content"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Process",
"value": "process",
"content": "Process content"
<span>&#125;</span>
]'
active="overview"
label="Service information"&gt;
&lt;div data-slot="panel-<span>&#123;</span>valueOf(item, index)<span>&#125;</span>"&gt;
&lt;div class="showcase-slot"&gt;panel-<span>&#123;</span>value Of(item, index)<span>&#125;</span> slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Tabs&gt;</code></pre>
<pre><code>page TabsExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Overview",
"value": "overview",
"content": "Overview content"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Requirements",
"value": "requirements",
"content": "Requirements content"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Process",
"value": "process",
"content": "Process content"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Tabs
items="<span>&#123;</span>items<span>&#125;</span>"
active="overview"
label="Service information"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -321,32 +325,34 @@ page TabsDetail {
</div>
<section class="demo-code" aria-label="Mirrored into the URL usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Tabs
size="sm"
items='[
<span>&#123;</span>
"label": "Account",
"value": "account",
"description": "Profile and credentials."
<span>&#125;</span>,
<span>&#123;</span>
"label": "Billing",
"value": "billing",
"description": "Invoices and payment method."
<span>&#125;</span>,
<span>&#123;</span>
"label": "Team",
"value": "team",
"description": "Members and their roles."
<span>&#125;</span>
]'
active="account"
mode="url"
label="Account settings"&gt;
&lt;div data-slot="panel-<span>&#123;</span>valueOf(item, index)<span>&#125;</span>"&gt;
&lt;div class="showcase-slot"&gt;panel-<span>&#123;</span>value Of(item, index)<span>&#125;</span> slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Tabs&gt;</code></pre>
<pre><code>page TabsExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Account",
"value": "account",
"description": "Profile and credentials."
<span>&#125;</span>,
<span>&#123;</span>
"label": "Billing",
"value": "billing",
"description": "Invoices and payment method."
<span>&#125;</span>,
<span>&#123;</span>
"label": "Team",
"value": "team",
"description": "Members and their roles."
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Tabs
size="sm"
items="<span>&#123;</span>items<span>&#125;</span>"
active="account"
mode="url"
label="Account settings"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -363,28 +369,30 @@ page TabsDetail {
</div>
<section class="demo-code" aria-label="Compact application tabs usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Tabs
size="sm"
items='[
<span>&#123;</span>
"label": "Details",
"value": "details"
<span>&#125;</span>,
<span>&#123;</span>
"label": "History",
"value": "history"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Files",
"value": "files"
<span>&#125;</span>
]'
active="details"
label="Record views"&gt;
&lt;div data-slot="panel-<span>&#123;</span>valueOf(item, index)<span>&#125;</span>"&gt;
&lt;div class="showcase-slot"&gt;panel-<span>&#123;</span>value Of(item, index)<span>&#125;</span> slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Tabs&gt;</code></pre>
<pre><code>page TabsExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Details",
"value": "details"
<span>&#125;</span>,
<span>&#123;</span>
"label": "History",
"value": "history"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Files",
"value": "files"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Tabs
size="sm"
items="<span>&#123;</span>items<span>&#125;</span>"
active="details"
label="Record views"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -401,32 +409,34 @@ page TabsDetail {
</div>
<section class="demo-code" aria-label="Vertical settings tabs usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Tabs
size="lg"
items='[
<span>&#123;</span>
"label": "Profile",
"value": "profile",
"icon": "icon-[lucide--user]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Security",
"value": "security",
"icon": "icon-[lucide--shield]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Notifications",
"value": "notifications",
"icon": "icon-[lucide--bell]"
<span>&#125;</span>
]'
active="security"
orientation="vertical"
label="Settings"&gt;
&lt;div data-slot="panel-<span>&#123;</span>valueOf(item, index)<span>&#125;</span>"&gt;
&lt;div class="showcase-slot"&gt;panel-<span>&#123;</span>value Of(item, index)<span>&#125;</span> slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Tabs&gt;</code></pre>
<pre><code>page TabsExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Profile",
"value": "profile",
"icon": "icon-[lucide--user]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Security",
"value": "security",
"icon": "icon-[lucide--shield]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Notifications",
"value": "notifications",
"icon": "icon-[lucide--bell]"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Tabs
size="lg"
items="<span>&#123;</span>items<span>&#125;</span>"
active="security"
orientation="vertical"
label="Settings"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article></div></section>