feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88
- Sync app, public, scripts, test and examples from the framework's component-showcase: redesigned component demos, marketing blocks under /blocks, template and preview galleries, distinct Timeline/Section variants, Chat Bubble receipts, a top-placement Drawer demo, and the playground code panel fix (objects in array props no longer blank out). - Standalone adaptations kept: the generator and tests read component-reference.json from the published @wrnexus/ui, and tests use the published @wrnexus/compiler and @wrnexus/syntax. - Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88, styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed
1 parent
bec9ef2889
commit
c0ac38c572
171 files changed
+21983
-35658
No files matched your search
+479
-459
@@ -51,118 +51,123 @@ page RadioDetail {
|
||||
<div class="playground-preview-source" data-playground-preview><Radio size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' options='{playground_options}' checked='{playground_checked}' orientation='{playground_orientation}' card='{playground_card}' rightAligned='{playground_rightAligned}' list='{playground_list}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' 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><Radio
|
||||
placeholder="Enter a sample value"
|
||||
value="sample-1"
|
||||
options='[
|
||||
<span>{</span>
|
||||
"id": "radio-0-1",
|
||||
"key": "radio-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": "#radio-demo",
|
||||
"actionHref": "#radio-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>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "radio-0-2",
|
||||
"key": "radio-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-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>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
<pre><code data-playground-code>page RadioExample <span>{</span>
|
||||
state options = [
|
||||
<span>{</span>
|
||||
"id": "radio-0-1",
|
||||
"key": "radio-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": "#radio-demo",
|
||||
"actionHref": "#radio-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>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "radio-0-2",
|
||||
"key": "radio-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-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>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<Radio
|
||||
placeholder="Enter a sample value"
|
||||
value="sample-1"
|
||||
options="<span>{</span>options<span>}</span>"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</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>
|
||||
@@ -291,123 +296,128 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="default" label="Radio" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" options='[{"id":"radio-0-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"radio-0-2","key":"radio-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-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":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Radio
|
||||
placeholder="Enter a sample value"
|
||||
value="sample-1"
|
||||
options='[
|
||||
<span>{</span>
|
||||
"id": "radio-0-1",
|
||||
"key": "radio-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": "#radio-demo",
|
||||
"actionHref": "#radio-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>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "radio-0-2",
|
||||
"key": "radio-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-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>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
<pre><code>page RadioExample <span>{</span>
|
||||
state options = [
|
||||
<span>{</span>
|
||||
"id": "radio-0-1",
|
||||
"key": "radio-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": "#radio-demo",
|
||||
"actionHref": "#radio-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>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "radio-0-2",
|
||||
"key": "radio-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-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>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<Radio
|
||||
placeholder="Enter a sample value"
|
||||
value="sample-1"
|
||||
options="<span>{</span>options<span>}</span>"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
@@ -419,127 +429,132 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" options='[{"id":"radio-1-1","key":"radio-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"radio-1-2","key":"radio-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Radio
|
||||
size="sm"
|
||||
label="Compact example"
|
||||
placeholder="Enter a sample value"
|
||||
variant="secondary"
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
value="sample-2"
|
||||
options='[
|
||||
<span>{</span>
|
||||
"id": "radio-1-1",
|
||||
"key": "radio-1-1",
|
||||
"value": "primary",
|
||||
"label": "Secondary workflow",
|
||||
"title": "Secondary workflow",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 24,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "radio-1-2",
|
||||
"key": "radio-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 48,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
<pre><code>page RadioExample <span>{</span>
|
||||
state options = [
|
||||
<span>{</span>
|
||||
"id": "radio-1-1",
|
||||
"key": "radio-1-1",
|
||||
"value": "primary",
|
||||
"label": "Secondary workflow",
|
||||
"title": "Secondary workflow",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 24,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "radio-1-2",
|
||||
"key": "radio-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 48,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<Radio
|
||||
size="sm"
|
||||
label="Compact example"
|
||||
placeholder="Enter a sample value"
|
||||
variant="secondary"
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
value="sample-2"
|
||||
options="<span>{</span>options<span>}</span>"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
@@ -551,127 +566,132 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" options='[{"id":"radio-2-1","key":"radio-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"radio-2-2","key":"radio-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Radio
|
||||
size="lg"
|
||||
label="Advanced example"
|
||||
placeholder="Search by name, email, or identifier"
|
||||
variant="success"
|
||||
icon="icon-[lucide--trash-2]"
|
||||
value="sample-3"
|
||||
options='[
|
||||
<span>{</span>
|
||||
"id": "radio-2-1",
|
||||
"key": "radio-2-1",
|
||||
"value": "primary",
|
||||
"label": "Advanced workflow",
|
||||
"title": "Advanced workflow",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 32,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "radio-2-2",
|
||||
"key": "radio-2-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": true,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 64,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
<pre><code>page RadioExample <span>{</span>
|
||||
state options = [
|
||||
<span>{</span>
|
||||
"id": "radio-2-1",
|
||||
"key": "radio-2-1",
|
||||
"value": "primary",
|
||||
"label": "Advanced workflow",
|
||||
"title": "Advanced workflow",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 32,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "radio-2-2",
|
||||
"key": "radio-2-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#radio-demo",
|
||||
"actionHref": "#radio-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": true,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 64,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<Radio
|
||||
size="lg"
|
||||
label="Advanced example"
|
||||
placeholder="Search by name, email, or identifier"
|
||||
variant="success"
|
||||
icon="icon-[lucide--trash-2]"
|
||||
value="sample-3"
|
||||
options="<span>{</span>options<span>}</span>"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
Reference in new issue
Block a user