Refresh UI components and showcase; release updated framework packages
This commit is contained in:
Clintchiz committed
1 parent
d800228585
commit
c77f5e1cec
293 files changed
+22544
-35778
No files matched your search
@@ -33,118 +33,123 @@ page ListDetail {
|
||||
<div class="playground-preview-source" data-playground-preview><List size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' 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><List
|
||||
title="List example"
|
||||
description="A polished default list for a modern application."
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "list-0-1",
|
||||
"key": "list-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": "#list-demo",
|
||||
"actionHref": "#list-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": "list-0-2",
|
||||
"key": "list-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#list-demo",
|
||||
"actionHref": "#list-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 ListExample <span>{</span>
|
||||
state items = [
|
||||
<span>{</span>
|
||||
"id": "list-0-1",
|
||||
"key": "list-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": "#list-demo",
|
||||
"actionHref": "#list-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": "list-0-2",
|
||||
"key": "list-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#list-demo",
|
||||
"actionHref": "#list-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>
|
||||
<List
|
||||
title="List example"
|
||||
description="A polished default list for a modern application."
|
||||
items="<span>{</span>items<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>
|
||||
@@ -278,27 +283,32 @@ page ListDetail {
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Linked resource list usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><List
|
||||
title="Citizen resources"
|
||||
description="Commonly requested public information."
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Report crime",
|
||||
"href": "#report",
|
||||
"icon": "icon-[lucide--shield-alert]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Track complaint",
|
||||
"href": "#track",
|
||||
"icon": "icon-[lucide--scan-search]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Certificates",
|
||||
"href": "#certificates",
|
||||
"icon": "icon-[lucide--file-check-2]"
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
<pre><code>page ListExample <span>{</span>
|
||||
state items = [
|
||||
<span>{</span>
|
||||
"label": "Report crime",
|
||||
"href": "#report",
|
||||
"icon": "icon-[lucide--shield-alert]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Track complaint",
|
||||
"href": "#track",
|
||||
"icon": "icon-[lucide--scan-search]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Certificates",
|
||||
"href": "#certificates",
|
||||
"icon": "icon-[lucide--file-check-2]"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<List
|
||||
title="Citizen resources"
|
||||
description="Commonly requested public information."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
@@ -315,26 +325,31 @@ page ListDetail {
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact status list usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><List
|
||||
size="sm"
|
||||
title="Current status"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Application received",
|
||||
"status": "Complete"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Verification",
|
||||
"status": "In progress"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Decision",
|
||||
"status": "Pending"
|
||||
<span>}</span>
|
||||
]'
|
||||
variant="soft"
|
||||
/></code></pre>
|
||||
<pre><code>page ListExample <span>{</span>
|
||||
state items = [
|
||||
<span>{</span>
|
||||
"label": "Application received",
|
||||
"status": "Complete"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Verification",
|
||||
"status": "In progress"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Decision",
|
||||
"status": "Pending"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<List
|
||||
size="sm"
|
||||
title="Current status"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
variant="soft"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
@@ -351,26 +366,31 @@ page ListDetail {
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich action list usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><List
|
||||
size="lg"
|
||||
title="Service requests"
|
||||
description="Recent requests and their current status."
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Address verification",
|
||||
"description": "Submitted yesterday",
|
||||
"status": "Review",
|
||||
"href": "#request-1"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Character certificate",
|
||||
"description": "Submitted 3 days ago",
|
||||
"status": "Approved",
|
||||
"href": "#request-2"
|
||||
<span>}</span>
|
||||
]'
|
||||
variant="raised"
|
||||
/></code></pre>
|
||||
<pre><code>page ListExample <span>{</span>
|
||||
state items = [
|
||||
<span>{</span>
|
||||
"label": "Address verification",
|
||||
"description": "Submitted yesterday",
|
||||
"status": "Review",
|
||||
"href": "#request-1"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Character certificate",
|
||||
"description": "Submitted 3 days ago",
|
||||
"status": "Approved",
|
||||
"href": "#request-2"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<List
|
||||
size="lg"
|
||||
title="Service requests"
|
||||
description="Recent requests and their current status."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
variant="raised"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
Reference in new issue
Block a user