feat: deployable design studio and updated component showcase
This commit is contained in:
Clintchiz committed
1 parent
3dddcaac1a
commit
3987ddbcfe
113 files changed
+4544
-1039
No files matched your search
@@ -112,7 +112,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-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"><Accordion size="default" variant="default" class="showcase-instance showcase-instance--1" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="false" alwaysOpen="false" disabled="false" indicator="chevron" indicatorPosition="end" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Plain disclosure rows usage">
|
||||
@@ -158,7 +158,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-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"><Accordion size="sm" variant="secondary" class="showcase-instance showcase-instance--2" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="false" alwaysOpen="false" disabled="false" indicator="plus" indicatorPosition="start" showIndicator="true" bordered="true" separated="false" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bordered group usage">
|
||||
@@ -205,7 +205,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-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"><Accordion size="lg" variant="success" class="showcase-instance showcase-instance--3" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="true" alwaysOpen="false" disabled="false" indicator="chevron" indicatorPosition="end" showIndicator="true" bordered="true" separated="true" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Separate panels usage">
|
||||
|
||||
@@ -177,7 +177,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-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"><AdvancedSelect size="default" label="Default advanced select" name="advanced-select-1" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default advanced select usage">
|
||||
@@ -241,7 +241,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-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"><AdvancedSelect size="default" label="Grouped options" name="advanced-select-2" value="design" values='[]' options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped options usage">
|
||||
@@ -316,7 +316,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-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"><AdvancedSelect size="default" label="Fixed-position dropdown" name="advanced-select-3" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed-position dropdown usage">
|
||||
@@ -382,7 +382,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Placeholder with icon" name="advanced-select-4" value="" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a workspace" placeholderIcon="icon-[lucide--building-2]" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Placeholder with icon usage">
|
||||
@@ -448,7 +448,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Allow empty selection" name="advanced-select-5" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="true" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Allow empty selection usage">
|
||||
@@ -512,7 +512,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection" name="advanced-select-6" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection usage">
|
||||
@@ -580,7 +580,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with optgroups" name="advanced-select-7" value="" values='["design","engineering"]' options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with optgroups usage">
|
||||
@@ -658,7 +658,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with option templates" name="advanced-select-8" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with option templates usage">
|
||||
@@ -727,7 +727,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with counter" name="advanced-select-9" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with counter usage">
|
||||
@@ -796,7 +796,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with conditional counter" name="advanced-select-10" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with conditional counter usage">
|
||||
@@ -866,7 +866,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Counter with option templates" name="advanced-select-11" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Counter with option templates usage">
|
||||
@@ -933,7 +933,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Searchable dropdown" name="advanced-select-12" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Searchable dropdown usage">
|
||||
@@ -997,7 +997,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Minimum search length" name="advanced-select-13" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimum search length usage">
|
||||
@@ -1062,7 +1062,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Search result limit" name="advanced-select-14" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="3" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search result limit usage">
|
||||
@@ -1127,7 +1127,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Scroll to selected option" name="advanced-select-15" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Scroll to selected option usage">
|
||||
@@ -1192,7 +1192,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Search match mode" name="advanced-select-16" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search match mode usage">
|
||||
@@ -1257,7 +1257,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-17" class="demo-canvas demo-canvas--17">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Search labels and descriptions" name="advanced-select-17" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
||||
@@ -1321,7 +1321,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-18" class="demo-canvas demo-canvas--18">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Tag-style selection" name="advanced-select-18" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Tag-style selection usage">
|
||||
@@ -1387,7 +1387,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-19" class="demo-canvas demo-canvas--19">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Disabled tag selection" name="advanced-select-19" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="true" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled tag selection usage">
|
||||
@@ -1454,7 +1454,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-20" class="demo-canvas demo-canvas--20">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Option template with icons" name="advanced-select-20" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with icons usage">
|
||||
@@ -1520,7 +1520,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-21" class="demo-canvas demo-canvas--21">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Option template with avatars" name="advanced-select-21" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with avatars usage">
|
||||
@@ -1586,7 +1586,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-22" class="demo-canvas demo-canvas--22">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Option template with color indicators" name="advanced-select-22" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="color" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with color indicators usage">
|
||||
@@ -1652,7 +1652,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-23" class="demo-canvas demo-canvas--23">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="lg" label="Advanced select sizes" name="advanced-select-23" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Advanced select sizes usage">
|
||||
@@ -1718,7 +1718,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-24" class="demo-canvas demo-canvas--24">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Disabled advanced select" name="advanced-select-24" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled advanced select usage">
|
||||
@@ -1784,7 +1784,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-25" class="demo-canvas demo-canvas--25">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Inside a modal" name="advanced-select-25" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inside a modal usage">
|
||||
@@ -1849,7 +1849,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-26" class="demo-canvas demo-canvas--26">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="advanced-select-validation" class="demo-validation-form"><AdvancedSelect size="default" label="Validation states" name="advanced-select-26" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation states usage">
|
||||
@@ -1915,7 +1915,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-27" class="demo-canvas demo-canvas--27">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="advanced-select-dynamic-validation" class="demo-validation-form"><AdvancedSelect size="default" label="Dynamic validation styling" name="advanced-select-27" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dynamic validation styling usage">
|
||||
@@ -1981,7 +1981,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-28" class="demo-canvas demo-canvas--28">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Add or remove options" name="advanced-select-28" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Add or remove options usage">
|
||||
@@ -2046,7 +2046,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-29" class="demo-canvas demo-canvas--29">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Add or remove options in multiple mode" name="advanced-select-29" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Add or remove options in multiple mode usage">
|
||||
@@ -2114,7 +2114,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-30" class="demo-canvas demo-canvas--30">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Set a single value programmatically" name="advanced-select-30" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Set a single value programmatically usage">
|
||||
@@ -2179,7 +2179,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-31" class="demo-canvas demo-canvas--31">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Set multiple values programmatically" name="advanced-select-31" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Set multiple values programmatically usage">
|
||||
@@ -2247,7 +2247,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-32" class="demo-canvas demo-canvas--32">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Remote data source" name="advanced-select-32" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data source usage">
|
||||
@@ -2314,7 +2314,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-33" class="demo-canvas demo-canvas--33">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Remote data source (multiple)" name="advanced-select-33" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data source (multiple) usage">
|
||||
@@ -2384,7 +2384,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-34" class="demo-canvas demo-canvas--34">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Remote data tags" name="advanced-select-34" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data tags usage">
|
||||
@@ -2455,7 +2455,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-35" class="demo-canvas demo-canvas--35">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Option templates with remote data" name="advanced-select-35" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option templates with remote data usage">
|
||||
@@ -2523,7 +2523,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-36" class="demo-canvas demo-canvas--36">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Conditional counter with remote data" name="advanced-select-36" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Conditional counter with remote data usage">
|
||||
@@ -2592,7 +2592,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-37" class="demo-canvas demo-canvas--37">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Avatar template with remote data" name="advanced-select-37" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Avatar template with remote data usage">
|
||||
@@ -2660,7 +2660,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-38" class="demo-canvas demo-canvas--38">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Preselected values" name="advanced-select-38" value="engineering" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Preselected values usage">
|
||||
@@ -2725,7 +2725,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-39" class="demo-canvas demo-canvas--39">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Infinite scroll" name="advanced-select-39" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="true" hasMore="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Infinite scroll usage">
|
||||
@@ -2793,7 +2793,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-40" class="demo-canvas demo-canvas--40">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Inside overflow-hidden containers" name="advanced-select-40" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inside overflow-hidden containers usage">
|
||||
@@ -2859,7 +2859,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-41" class="demo-canvas demo-canvas--41">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Destroy and reinitialize" name="advanced-select-41" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Destroy and reinitialize usage">
|
||||
|
||||
@@ -85,7 +85,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-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"><Alert size="default" color="success" variant="soft" class="" radius="md" shadow="none" title="Changes saved" description="Your workspace settings are up to date." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--circle-check]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Success message usage">
|
||||
@@ -118,7 +118,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-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"><Alert size="default" color="info" variant="soft" class="" radius="md" shadow="none" title="Scheduled maintenance" description="The dashboard will be unavailable Sunday, 02:00–02:30 UTC." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--info]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Informational notice usage">
|
||||
@@ -150,7 +150,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-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"><Alert size="default" color="warning" variant="soft" class="" radius="md" shadow="none" title="Payment needs attention" description="Update your payment method to keep your subscription active." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--triangle-alert]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="Update payment" actionHref="#payment" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Action required usage">
|
||||
|
||||
@@ -120,7 +120,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-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"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -171,7 +171,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-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"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="sm" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -223,7 +223,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-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"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="grid" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -71,7 +71,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-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"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -93,7 +93,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-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"><Avatar src="" alt="Aisha Khan" initials="AK" size="sm" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -116,7 +116,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-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"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="online" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="Product designer" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -44,7 +44,7 @@ page BackToTopDetail {
|
||||
<pre><code data-playground-code><BackToTop /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>15 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -63,7 +63,7 @@ page BackToTopDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="back-to-top-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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="solid" shape="round" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Floating round control usage">
|
||||
@@ -82,7 +82,7 @@ page BackToTopDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="back-to-top-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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="true" alwaysVisible="true" size="default" color="primary" variant="soft" shape="pill" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pill control with label usage">
|
||||
@@ -104,7 +104,7 @@ page BackToTopDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="back-to-top-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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="left" offset="lg" behavior="smooth" showProgress="true" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="outline" shape="round" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Progress-aware control usage">
|
||||
@@ -119,7 +119,7 @@ page BackToTopDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alwaysVisible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"round"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -76,7 +76,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-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"><Badge label="Active" humanize="true" size="sm" color="success" variant="soft" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -98,7 +98,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-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"><Badge label="In review" humanize="true" size="sm" color="warning" variant="outline" class="showcase-instance showcase-instance--2" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -120,7 +120,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-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"><Badge label="Verified" humanize="true" size="sm" color="primary" variant="solid" class="showcase-instance showcase-instance--3" icon="icon-[lucide--check]" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="true" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -46,7 +46,7 @@ page BlockquoteDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -65,7 +65,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-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"><Blockquote citationTitle="Blockquote example" size="md" align="start" variant="default" quoteMark="true" italic="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -85,7 +85,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-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"><Blockquote citationTitle="Compact Blockquote" size="sm" align="center" variant="secondary" quoteMark="true" italic="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -107,7 +107,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-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"><Blockquote citationTitle="Advanced Blockquote" size="lg" align="end" variant="success" quoteMark="true" italic="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -121,7 +121,7 @@ page BlockquoteDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -285,7 +285,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-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"><Breadcrumb label="Breadcrumb" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Breadcrumb" homeHref="#breadcrumb-demo" size="small" variant="minimal" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimal page trail usage">
|
||||
@@ -327,7 +327,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-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"><Breadcrumb label="Compact example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Compact example" homeHref="#breadcrumb-demo" size="medium" variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Soft navigation trail usage">
|
||||
@@ -371,7 +371,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-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"><Breadcrumb label="Advanced example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' separator="slash" showHome="true" homeLabel="Advanced example" homeHref="#breadcrumb-demo" size="large" variant="outline" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large directory breadcrumb usage">
|
||||
|
||||
@@ -96,7 +96,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-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"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -135,7 +135,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-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"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="sm" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -175,7 +175,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-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"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="false" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -78,7 +78,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-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"><Button label="Save & Submit" as="button" type="submit" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Primary action usage">
|
||||
@@ -99,7 +99,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-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"><Button label="Learn more" as="a" href="#button-demo" variant="outline" size="sm" icon="icon-[lucide--arrow-right]" iconPosition="end" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Secondary navigation usage">
|
||||
@@ -124,7 +124,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-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"><Button label="Upgrade plan" as="button" variant="secondary" size="lg" pill="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Prominent rounded action usage">
|
||||
@@ -147,7 +147,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Open settings" as="button" variant="ghost" size="icon" icon="icon-[lucide--settings]" ariaLabel="Open settings" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Accessible icon action usage">
|
||||
@@ -171,7 +171,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Delete project" as="button" variant="destructive" icon="icon-[lucide--trash-2]" class="showcase-instance showcase-instance--5" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dangerous action usage">
|
||||
@@ -193,7 +193,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Read documentation" as="a" href="#button-demo" variant="link" class="showcase-instance showcase-instance--6" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline action usage">
|
||||
@@ -215,7 +215,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Publish" loadingLabel="Publishing…" as="button" loading="true" class="showcase-instance showcase-instance--7" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pending action usage">
|
||||
@@ -237,7 +237,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Unavailable action" as="button" variant="outline" disabled="true" class="showcase-instance showcase-instance--8" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Unavailable action usage">
|
||||
|
||||
@@ -108,7 +108,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-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"><Card title="Citizen service" icon="" titleKey="" subtitle="" subtitleKey="" description="Access a trusted online service." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Structured content card usage">
|
||||
@@ -145,7 +145,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-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"><Card title="Open requests" icon="" titleKey="" subtitle="" subtitleKey="" description="Requests waiting for assignment." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="compact" color="primary" variant="soft" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><strong class="showcase-card-value">38</strong></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact dashboard card usage">
|
||||
@@ -184,7 +184,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-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"><Card title="Featured guide" icon="" titleKey="" subtitle="" subtitleKey="" description="A complete guide to public safety and emergency readiness." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="lg" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><a href="#guide" class="showcase-action">Read guide</a></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Featured resource usage">
|
||||
@@ -222,7 +222,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Design your next chapter" icon="" titleKey="" subtitle="" subtitleKey="" description="A practical guide to building thoughtful products." descriptionKey="" showHeader="true" showFooter="true" header="" footer="6 min read" imageSrc="/showcase-images/green-hero.svg" imageAlt="Green abstract cover" imagePosition="top" actionLabel="Read guide" actionLabelKey="" actionHref="#guide" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image with footer usage">
|
||||
@@ -263,7 +263,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="Your workspace is ready. Invite your teammates to get started." descriptionKey="" showHeader="true" showFooter="true" header="" footer="Updated just now" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Without a header usage">
|
||||
@@ -299,7 +299,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="" descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="/showcase-images/blue-mountain.svg" imageAlt="Blue geometric landscape" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image-only card usage">
|
||||
@@ -335,7 +335,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="" descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><div data-slot="header"><strong>Team invitation</strong></div><Input label="Email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Send invitation" /></div></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom slots usage">
|
||||
|
||||
@@ -113,7 +113,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-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"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width, unframed usage">
|
||||
@@ -156,7 +156,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-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"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="true" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Framed gallery usage">
|
||||
@@ -200,7 +200,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-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"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="true" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Draggable slides usage">
|
||||
|
||||
+601
-62
@@ -5,6 +5,9 @@ page ChartDetail {
|
||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "Completed tasks this week"
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Mon\",\"value\":24},{\"label\":\"Tue\",\"value\":38},{\"label\":\"Wed\",\"value\":29},{\"label\":\"Thu\",\"value\":52},{\"label\":\"Fri\",\"value\":45}]")
|
||||
state playground_data = JSON.parse(ctx.url.searchParams.get("pg_data") ?? "[]")
|
||||
state playground_labels = JSON.parse(ctx.url.searchParams.get("pg_labels") ?? "[]")
|
||||
state playground_datasets = JSON.parse(ctx.url.searchParams.get("pg_datasets") ?? "[]")
|
||||
state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "{}")
|
||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? ""
|
||||
state playground_valueKey = ctx.url.searchParams.get("pg_valueKey") ?? "value"
|
||||
state playground_labelKey = ctx.url.searchParams.get("pg_labelKey") ?? "label"
|
||||
@@ -15,6 +18,17 @@ page ChartDetail {
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "bar"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||
state demo_obj_0 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_1 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_2 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_3 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_4 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_5 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_6 = JSON.parse("{\"datasets\":[{\"label\":\"Observations\",\"data\":[{\"x\":1,\"y\":4},{\"x\":3,\"y\":8},{\"x\":5,\"y\":3}]}]}")
|
||||
state demo_obj_7 = JSON.parse("{\"datasets\":[{\"label\":\"Observations\",\"data\":[{\"x\":1,\"y\":4,\"r\":8},{\"x\":3,\"y\":8,\"r\":16},{\"x\":5,\"y\":3,\"r\":12}]}]}")
|
||||
state demo_obj_8 = JSON.parse("{\"labels\":[\"Jan\",\"Feb\",\"Mar\"],\"datasets\":[{\"type\":\"bar\",\"label\":\"Actual\",\"data\":[20,35,28]},{\"type\":\"line\",\"label\":\"Target\",\"data\":[25,30,40]}]}")
|
||||
state demo_obj_9 = JSON.parse("{\"labels\":[\"Jan\",\"Feb\",\"Mar\"],\"datasets\":[{\"label\":\"A\",\"data\":[20,35,28]},{\"label\":\"B\",\"data\":[25,30,40]}]}")
|
||||
state demo_obj_10 = JSON.parse("{\"indexAxis\":\"y\",\"scales\":{\"x\":{\"stacked\":true},\"y\":{\"stacked\":true}}}")
|
||||
seo {
|
||||
title = "Chart"
|
||||
description = "Theme-aware, responsive chart component."
|
||||
@@ -28,7 +42,7 @@ page ChartDetail {
|
||||
<span class="showcase-eyebrow">Integrations component</span>
|
||||
<h1>Chart</h1>
|
||||
<p>Theme-aware, responsive chart component.</p>
|
||||
<div class="detail-badges"><span>14 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>17 props</span><span>1 slots</span><span>3 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>
|
||||
@@ -37,7 +51,7 @@ page ChartDetail {
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' data='{playground_data}' type='{playground_type}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' data='{playground_data}' labels='{playground_labels}' datasets='{playground_datasets}' options='{playground_options}' type='{playground_type}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' 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>page ChartExample <span>{</span>
|
||||
@@ -63,13 +77,15 @@ page ChartDetail {
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]
|
||||
state data = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Weekly activity"
|
||||
description="Completed tasks this week"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
/>
|
||||
@@ -80,7 +96,7 @@ page ChartDetail {
|
||||
<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>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<header><div><span>Component props</span><strong>17 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Weekly activity" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="Completed tasks this week" /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"label": "Mon",
|
||||
@@ -102,7 +118,7 @@ page ChartDetail {
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-data"><span><strong>data</strong><small>unknown[]</small></span><textarea id="playground-chart-data" name="pg_data" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-type"><span><strong>type</strong><small>string</small></span><select id="playground-chart-type" name="pg_type"><option value="" selected>Auto / default</option><option value="bar">bar</option><option value="line">line</option></select></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="220" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="" /></label></div>
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-data"><span><strong>data</strong><small>unknown</small></span><input id="playground-chart-data" name="pg_data" type="text" value="" /></label><label class="playground-field" for="playground-chart-labels"><span><strong>labels</strong><small>unknown[]</small></span><textarea id="playground-chart-labels" name="pg_labels" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-datasets"><span><strong>datasets</strong><small>unknown[]</small></span><textarea id="playground-chart-datasets" name="pg_datasets" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-options"><span><strong>options</strong><small>object</small></span><textarea id="playground-chart-options" name="pg_options" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-type"><span><strong>type</strong><small>string</small></span><select id="playground-chart-type" name="pg_type"><option value="" selected>Auto / default</option><option value="bar">bar</option><option value="line">line</option><option value="area">area</option><option value="pie">pie</option><option value="doughnut">doughnut</option><option value="radar">radar</option><option value="polarArea">polarArea</option><option value="scatter">scatter</option><option value="bubble">bubble</option></select></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="220" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -111,50 +127,53 @@ page ChartDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Bar chart</h2><p>Pass an array of label/value objects through data.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Bar chart</h2><p>Chart.js bars with positive and negative values.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-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"><Chart title="Weekly signups" description="Completed tasks this week" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample weekly changes" description="Sample data" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":-12},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' labels='[]' datasets='[]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bar chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state data = [
|
||||
<span>{</span>
|
||||
"label": "Mon",
|
||||
"value": 24
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Tue",
|
||||
"value": 38
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Wed",
|
||||
"value": 29
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Thu",
|
||||
"value": 52
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Weekly signups"
|
||||
description="Completed tasks this week"
|
||||
title="Sample weekly changes"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
data='[
|
||||
<span>{</span>
|
||||
"label": "Mon",
|
||||
"value": 24
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Tue",
|
||||
"value": -12
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Wed",
|
||||
"value": 29
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Thu",
|
||||
"value": 52
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
@@ -163,46 +182,566 @@ page ChartDetail {
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>Line chart</h2><p>Use type=line to compare a trend over time.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>line chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-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"><Chart title="Monthly revenue" description="Completed tasks this week" items='[]' data='[{"label":"Jan","value":20},{"label":"Feb","value":35},{"label":"Mar","value":28},{"label":"Apr","value":55}]' type="line" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample line" description="Sample data" items='[]' data='{demo_obj_0}' labels='[]' datasets='[]' type="line" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Line chart usage">
|
||||
<section class="demo-code" aria-label="line chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state data = [
|
||||
<span>{</span>
|
||||
"label": "Jan",
|
||||
"value": 20
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Feb",
|
||||
"value": 35
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Mar",
|
||||
"value": 28
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Apr",
|
||||
"value": 55
|
||||
<span>}</span>
|
||||
]
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Monthly revenue"
|
||||
description="Completed tasks this week"
|
||||
title="Sample line"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="line"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>area chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-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"><Chart title="Sample area" description="Sample data" items='[]' data='{demo_obj_1}' labels='[]' datasets='[]' type="area" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="area chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample area"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="area"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>pie chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">04</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample pie" description="Sample data" items='[]' data='{demo_obj_2}' labels='[]' datasets='[]' type="pie" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="pie chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample pie"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="pie"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>doughnut chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">05</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample doughnut" description="Sample data" items='[]' data='{demo_obj_3}' labels='[]' datasets='[]' type="doughnut" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="doughnut chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample doughnut"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="doughnut"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>radar chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">06</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample radar" description="Sample data" items='[]' data='{demo_obj_4}' labels='[]' datasets='[]' type="radar" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="radar chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample radar"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="radar"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>polarArea chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">07</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample polarArea" description="Sample data" items='[]' data='{demo_obj_5}' labels='[]' datasets='[]' type="polarArea" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="polarArea chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample polarArea"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="polarArea"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Scatter chart</h2><p>Pass native x/y coordinates without flattening them.</p></div>
|
||||
<span class="demo-case-number">08</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample coordinates" description="Sample data" items='[]' data='{demo_obj_6}' labels='[]' datasets='[]' type="scatter" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Scatter chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample coordinates"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Observations",
|
||||
"data": [
|
||||
<span>{</span>
|
||||
"x": 1,
|
||||
"y": 4
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 3,
|
||||
"y": 8
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 5,
|
||||
"y": 3
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="scatter"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Bubble chart</h2><p>Native x/y/r points preserve bubble radii.</p></div>
|
||||
<span class="demo-case-number">09</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample bubbles" description="Sample data" items='[]' data='{demo_obj_7}' labels='[]' datasets='[]' type="bubble" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bubble chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample bubbles"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Observations",
|
||||
"data": [
|
||||
<span>{</span>
|
||||
"x": 1,
|
||||
"y": 4,
|
||||
"r": 8
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 3,
|
||||
"y": 8,
|
||||
"r": 16
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 5,
|
||||
"y": 3,
|
||||
"r": 12
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bubble"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Mixed chart</h2><p>Set each dataset's type and pass native Chart.js options.</p></div>
|
||||
<span class="demo-case-number">010</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample mixed chart" description="Sample data" items='[]' data='{demo_obj_8}' labels='[]' datasets='[]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Mixed chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample mixed chart"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"type": "bar",
|
||||
"label": "Actual",
|
||||
"data": [
|
||||
20,
|
||||
35,
|
||||
28
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"type": "line",
|
||||
"label": "Target",
|
||||
"data": [
|
||||
25,
|
||||
30,
|
||||
40
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Horizontal stacked bars</h2><p>Configure indexAxis and stacked scales through options.</p></div>
|
||||
<span class="demo-case-number">011</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample stacked chart" description="Sample data" items='[]' data='{demo_obj_9}' labels='[]' datasets='[]' options='{demo_obj_10}' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal stacked bars usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample stacked chart"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "A",
|
||||
"data": [
|
||||
20,
|
||||
35,
|
||||
28
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "B",
|
||||
"data": [
|
||||
25,
|
||||
30,
|
||||
40
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
options='<span>{</span>
|
||||
"indexAxis": "y",
|
||||
"scales": <span>{</span>
|
||||
"x": <span>{</span>
|
||||
"stacked": true
|
||||
<span>}</span>,
|
||||
"y": <span>{</span>
|
||||
"stacked": true
|
||||
<span>}</span>
|
||||
<span>}</span>
|
||||
<span>}</span>'
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
@@ -228,10 +767,10 @@ if (component) registerOutputHandler(component, "dataPointClick", (payload) =>
|
||||
if (component) registerOutputHandler(component, "legendToggle", (payload) => <span>{</span>
|
||||
console.log("legendToggle", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>data</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>data</code></td><td>unknown</td><td><code>undefined</code></td><td>No</td></tr><tr><td><code>labels</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>datasets</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>object</td><td><code><span>{</span><span>}</span></code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Bar chart</a><a href="#chart-demo-2">Line chart</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Bar chart</a><a href="#chart-demo-2">line chart</a><a href="#chart-demo-3">area chart</a><a href="#chart-demo-4">pie chart</a><a href="#chart-demo-5">doughnut chart</a><a href="#chart-demo-6">radar chart</a><a href="#chart-demo-7">polarArea chart</a><a href="#chart-demo-8">Scatter chart</a><a href="#chart-demo-9">Bubble chart</a><a href="#chart-demo-10">Mixed chart</a><a href="#chart-demo-11">Horizontal stacked bars</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -153,7 +153,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-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"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -221,7 +221,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-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"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -289,7 +289,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-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"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -514,7 +514,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-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"><Checkbox size="default" label="Checkbox" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" values='[{"id":"checkbox-0-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-0-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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" indeterminate="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">
|
||||
@@ -756,7 +756,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-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"><Checkbox size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" values='[{"id":"checkbox-1-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-1-2","key":"checkbox-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-1-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-1-2","key":"checkbox-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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" indeterminate="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">
|
||||
@@ -1002,7 +1002,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-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"><Checkbox size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" values='[{"id":"checkbox-2-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-2-2","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-2-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-2-2","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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" indeterminate="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">
|
||||
|
||||
@@ -62,7 +62,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-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"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="false" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -81,7 +81,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-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"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -101,7 +101,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-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"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -494,7 +494,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-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"><Collapse size="default" items='[{"id":"collapse-0-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-0-2","key":"collapse-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-0-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-0-2","key":"collapse-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 1 example" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -735,7 +735,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-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"><Collapse size="sm" items='[{"id":"collapse-1-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-1-2","key":"collapse-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-1-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-1-2","key":"collapse-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 2 example" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -977,7 +977,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-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"><Collapse size="lg" items='[{"id":"collapse-2-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-2-2","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-2-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-2-2","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 3 example" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -71,7 +71,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-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"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#8b5cf6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -92,7 +92,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-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"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#14b8a6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -113,7 +113,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-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"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#3b82f6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -35,7 +35,7 @@ page ColumnsDetail {
|
||||
<pre><code data-playground-code><Columns /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -54,7 +54,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-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"><Columns size="default" columns="2" gap="lg" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Two-column content layout usage">
|
||||
@@ -74,7 +74,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-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"><Columns size="compact" columns="3" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Three compact columns usage">
|
||||
@@ -97,7 +97,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-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"><Columns size="lg" columns="4" gap="md" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width four columns usage">
|
||||
@@ -111,7 +111,7 @@ page ColumnsDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -165,7 +165,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-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"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default autocomplete usage">
|
||||
@@ -226,7 +226,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-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"><ComboBox label="Local HTML options" name="combobox-2" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Local HTML options usage">
|
||||
@@ -287,7 +287,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-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"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped suggestions usage">
|
||||
@@ -358,7 +358,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimum search length usage">
|
||||
@@ -420,7 +420,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search result limit usage">
|
||||
@@ -482,7 +482,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Starts-with matching usage">
|
||||
@@ -544,7 +544,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
||||
@@ -605,7 +605,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with icons usage">
|
||||
@@ -667,7 +667,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with avatars usage">
|
||||
@@ -729,7 +729,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with color indicators usage">
|
||||
@@ -791,7 +791,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Clearable value" name="combobox-11" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Clearable value usage">
|
||||
@@ -852,7 +852,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Custom text values" name="combobox-12" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom text values usage">
|
||||
@@ -914,7 +914,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Preselected value" name="combobox-13" value="engineering" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Preselected value usage">
|
||||
@@ -976,7 +976,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled combobox usage">
|
||||
@@ -1038,7 +1038,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation state usage">
|
||||
@@ -1100,7 +1100,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data with automatic preload usage">
|
||||
@@ -1164,7 +1164,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-17" class="demo-canvas demo-canvas--17">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote search API usage">
|
||||
@@ -1228,7 +1228,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-18" class="demo-canvas demo-canvas--18">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote query parameters usage">
|
||||
@@ -1292,7 +1292,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-19" class="demo-canvas demo-canvas--19">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Infinite remote suggestions usage">
|
||||
@@ -1358,7 +1358,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-20" class="demo-canvas demo-canvas--20">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed-position suggestions usage">
|
||||
@@ -1420,7 +1420,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-21" class="demo-canvas demo-canvas--21">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="JavaScript methods usage">
|
||||
|
||||
@@ -60,7 +60,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-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"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -81,7 +81,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-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"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -102,7 +102,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-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"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -38,7 +38,7 @@ page ContainerDetail {
|
||||
</Container></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -57,7 +57,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-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"><Container size="default" columns="2" maxWidth="xl" centered="true" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard content container usage">
|
||||
@@ -76,7 +76,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-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"><Container size="compact" columns="2" maxWidth="compact" centered="true" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact reading container usage">
|
||||
@@ -97,7 +97,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-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"><Container size="spacious" columns="2" maxWidth="full" centered="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width layout container usage">
|
||||
@@ -110,7 +110,7 @@ page ContainerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -36,7 +36,7 @@ page CustomScrollbarDetail {
|
||||
<pre><code data-playground-code><CustomScrollbar /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page CustomScrollbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-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"><CustomScrollbar size="default" axis="vertical" thickness="8" maxHeight="14rem" radius="999px" class="showcase-instance showcase-instance--1"><div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Themed scrolling region usage">
|
||||
@@ -75,7 +75,7 @@ page CustomScrollbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-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"><CustomScrollbar color="info" size="sm" axis="horizontal" thickness="14" maxHeight="8rem" radius="4px" class="showcase-instance showcase-instance--2"><div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal, thicker track usage">
|
||||
@@ -92,7 +92,7 @@ page CustomScrollbarDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>axis</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>thickness</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>maxHeight</code></td><td>string</td><td><code>"20rem"</code></td><td>No</td></tr><tr><td><code>radius</code></td><td>string</td><td><code>"999px"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -114,7 +114,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-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"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -165,7 +165,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-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"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -216,7 +216,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-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"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -531,7 +531,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-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"><DataTable size="default" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "TeLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sortable, searchable and paged usage">
|
||||
@@ -738,7 +738,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-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"><DataTable size="sm" columns="[{"key": "owner", "label": "From", "sortable": true}, {"key": "name", "label": "Subject", "sortable": true}, {"key": "plan", "label": "Folder", "align": "center"}, {"key": "statusHtml", "label": "State", "align": "center", "html": true}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, &quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bulk actions on selection usage">
|
||||
@@ -968,7 +968,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-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"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Numbered pagination usage">
|
||||
@@ -1176,7 +1176,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "statusHtml", "label": "Status", "align": "center", "html": true}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", &quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full gridlines and custom cell markup usage">
|
||||
@@ -1386,7 +1386,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true, "width": "40%"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true, "width": "20%"}, {"key": "plan", "label": "Plan", "align": "center", "width": "20%"}, {"key": "status", "label": "Status", "align": "end", "width": "20%"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id":Line truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed widths and alignment usage">
|
||||
@@ -1595,7 +1595,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Plan"}, {"key": "plan", "label": "Tier"}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "type": "number"}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", &qLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Comparison layout usage">
|
||||
@@ -1802,7 +1802,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sticky first column usage">
|
||||
@@ -2010,7 +2010,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact density, no pagination usage">
|
||||
@@ -2221,7 +2221,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Accounts" description="A richer configuration demonstrating additional content and hierarchy." searchable="true" searchPlaceholder="Enter a sample value" paginated="true" pageSize="35" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="true" bordered="true" emptyLabel="No accounts match this filter yet" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--9" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Empty state usage">
|
||||
|
||||
@@ -264,7 +264,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-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"><DatePicker size="default" label="Start date" name="start-date" value="2026-09-20" placeholder="Enter a sample value" type="date" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Date picker usage">
|
||||
@@ -385,7 +385,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-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"><DatePicker size="sm" label="Schedule for" name="schedule" value="2026-09-20T09:30" placeholder="Enter a sample value" type="datetime-local" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Date and time usage">
|
||||
@@ -509,7 +509,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-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"><DatePicker size="lg" label="Scheduled date" value="2026-09-22" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="success" inline="false" readonly="true" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled date usage">
|
||||
|
||||
@@ -286,7 +286,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-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"><DeviceFrame size="default" title="Device Frame example" description="A polished default device frame for a modern application." items='[{"id":"device-frame-0-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-0-2","key":"device-frame-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-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"]}]' variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -420,7 +420,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-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"><DeviceFrame size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"device-frame-1-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-1-2","key":"device-frame-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-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"]}]' variant="secondary" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -556,7 +556,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-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"><DeviceFrame size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"device-frame-2-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-2-2","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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"]}]' variant="success" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -37,7 +37,7 @@ page DividerDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -56,7 +56,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-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"><Divider size="default" label="Related information" orientation="horizontal" variant="solid" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal section divider usage">
|
||||
@@ -75,7 +75,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-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"><Divider size="sm" label="" orientation="horizontal" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimal unlabeled divider usage">
|
||||
@@ -95,7 +95,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-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"><Divider size="lg" color="info" label="Actions" orientation="vertical" variant="success" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical toolbar divider usage">
|
||||
@@ -110,7 +110,7 @@ page DividerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -90,7 +90,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-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"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -129,7 +129,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-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"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -168,7 +168,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-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"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page DrawflowCanvasDetail {
|
||||
layout = "showcase"
|
||||
state playground_nodes = JSON.parse(ctx.url.searchParams.get("pg_nodes") ?? "[]")
|
||||
state playground_toolbar = (ctx.url.searchParams.get("pg_toolbar") ?? "true") === "true"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Drawflow Canvas"
|
||||
description = "Reusable drawflow canvas component."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Drawflow Canvas</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Core component</span>
|
||||
<h1>Drawflow Canvas</h1>
|
||||
<p>Reusable drawflow canvas component.</p>
|
||||
<div class="detail-badges"><span>3 props</span><span>0 slots</span><span>4 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>
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="DrawflowCanvas" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="select,connect,move,add">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Drawflow Canvas</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><DrawflowCanvas nodes='{playground_nodes}' toolbar='{playground_toolbar}' 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><DrawflowCanvas /></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>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>3 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-drawflow-canvas-nodes"><span><strong>nodes</strong><small>string</small></span><textarea id="playground-drawflow-canvas-nodes" name="pg_nodes" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-drawflow-canvas-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-drawflow-canvas-toolbar" name="pg_toolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-drawflow-canvas-class"><span><strong>class</strong><small>string</small></span><input id="playground-drawflow-canvas-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<div class="detail-layout">
|
||||
<main class="detail-content">
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="drawflow-canvas-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"><DrawflowCanvas toolbar="true" 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><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="drawflow-canvas-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"><DrawflowCanvas toolbar="true" 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><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="drawflow-canvas-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"><DrawflowCanvas toolbar="true" 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><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@connect</code><span>Fires when the component emits the connect event.</span></div><div><code>@move</code><span>Fires when the component emits the move event.</span></div><div><code>@add</code><span>Fires when the component emits the add event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><DrawflowCanvas
|
||||
@select='console.log(payload)'
|
||||
@connect='console.log(payload)'
|
||||
@move='console.log(payload)'
|
||||
@add='console.log(payload)'
|
||||
/></code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>{</span> registerOutputHandler <span>}</span> from "@wrnexus/csr/outputs"
|
||||
|
||||
const component = document.querySelector("[data-ui-component=\"DrawflowCanvas\"], [data-component=\"DrawflowCanvas\"]")
|
||||
|
||||
if (component) registerOutputHandler(component, "select", (payload) => <span>{</span>
|
||||
console.log("select", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "connect", (payload) => <span>{</span>
|
||||
console.log("connect", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "move", (payload) => <span>{</span>
|
||||
console.log("move", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "add", (payload) => <span>{</span>
|
||||
console.log("add", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>nodes</code></td><td>string</td><td><code>[] palette=[] activeNode="" label="Workflow" arrangeLabel="Arrange nodes" connectLabel="Connect" color="primary" size="default"</code></td><td>No</td></tr><tr><td><code>toolbar</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawflow-canvas-demo-1">Production default</a><a href="#drawflow-canvas-demo-2">Compact application</a><a href="#drawflow-canvas-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/flow-canvas"><small>Next</small><strong>Flow Canvas →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-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"><FileInput size="default" name="attachment" label="Attachment" hiddenLabel="false" placeholder="Choose a file" value="" icon="" accept=".pdf,image/*" multiple="false" helperText="PDF or image" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Choose a document usage">
|
||||
@@ -95,7 +95,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-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"><FileInput size="sm" name="attachments" label="Attachments" hiddenLabel="false" placeholder="Choose files" value="" icon="icon-[lucide--arrow-right]" multiple="true" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple attachments usage">
|
||||
@@ -120,7 +120,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-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"><FileInput size="lg" name="disabled-file" label="Attachment" hiddenLabel="false" placeholder="Uploads unavailable" value="" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="true" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled upload usage">
|
||||
|
||||
@@ -67,7 +67,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-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"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="2.4 MB" status="uploading" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -89,7 +89,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-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"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="error" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -111,7 +111,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-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"><FileUploadProgress size="default" color="primary" label="Upload progress" value="100" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="complete" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -36,7 +36,7 @@ page GridDetail {
|
||||
<pre><code data-playground-code><Grid /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-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"><Grid size="default" columns="3" gap="md" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Responsive three-column grid usage">
|
||||
@@ -75,7 +75,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-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"><Grid size="compact" columns="4" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dense four-column grid usage">
|
||||
@@ -98,7 +98,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-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"><Grid size="spacious" columns="2" gap="xl" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width two-column grid usage">
|
||||
@@ -112,7 +112,7 @@ page GridDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -39,7 +39,7 @@ page ImageDetail {
|
||||
<pre><code data-playground-code><Image /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -58,7 +58,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-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"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Responsive content image usage">
|
||||
@@ -80,7 +80,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-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"><Image size="sm" src="/showcase-images/blue-mountain.svg" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rounded thumbnail usage">
|
||||
@@ -104,7 +104,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-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"><Image size="lg" src="/showcase-images/green-hero.svg" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Eager hero image usage">
|
||||
@@ -121,7 +121,7 @@ page ImageDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>fit</code></td><td>string</td><td><code>"cover"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -77,7 +77,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-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"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="https://" endText=".example.com" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -100,7 +100,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-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"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="icon-[lucide--search]" iconPosition="start" actionLabel="Search" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -123,7 +123,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-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"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -94,7 +94,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-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"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default controls usage">
|
||||
@@ -117,7 +117,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-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"><InputNumber size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Labeled input style usage">
|
||||
@@ -142,7 +142,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-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"><InputNumber size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical buttons usage">
|
||||
@@ -167,7 +167,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal buttons usage">
|
||||
@@ -191,7 +191,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact size usage">
|
||||
@@ -214,7 +214,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Seat quantity selector usage">
|
||||
@@ -239,7 +239,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="disabled-input" value="10" inputDisabled="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled input usage">
|
||||
@@ -261,7 +261,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled buttons usage">
|
||||
@@ -283,7 +283,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom step size usage">
|
||||
@@ -306,7 +306,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="negative-values" value="-10" min="-100" max="100" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Negative values usage">
|
||||
@@ -329,7 +329,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="maximum-limit" value="10" min="0" max="10" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Maximum limit usage">
|
||||
@@ -352,7 +352,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation states usage">
|
||||
|
||||
@@ -80,7 +80,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-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"><Input size="default" label="Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" 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">
|
||||
@@ -100,7 +100,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-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"><Input size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" 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">
|
||||
@@ -124,7 +124,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-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"><Input size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" 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">
|
||||
|
||||
@@ -35,7 +35,7 @@ page KbdDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -54,7 +54,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-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"><Kbd size="default" color="primary" label="⌘ K" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -73,7 +73,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-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"><Kbd size="default" color="primary" label="Esc" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -92,7 +92,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-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"><Kbd size="default" color="primary" label="Ctrl + Enter" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -103,7 +103,7 @@ page KbdDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -63,7 +63,7 @@ page LayoutSplitterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-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"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Drag or arrow the divider usage">
|
||||
@@ -89,7 +89,7 @@ page LayoutSplitterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-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"><LayoutSplitter size="60" orientation="vertical" minSize="25" step="10" label="Resize rows" class="showcase-instance showcase-instance--2"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Stacked panes usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page LegendIndicatorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="legend-indicator-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"><LegendIndicator size="default" title="Traffic sources" description="Select a source to toggle its visibility." items='[{"label":"Direct","color":"#8b5cf6","value":"42%"},{"label":"Search","color":"#14b8a6","value":"35%"},{"label":"Referral","color":"#f59e0b","value":"23%"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Chart legend usage">
|
||||
|
||||
@@ -40,7 +40,7 @@ page LinkDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -59,7 +59,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-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"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard navigation link usage">
|
||||
@@ -79,7 +79,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-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"><Link size="sm" label="WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="External resource link usage">
|
||||
@@ -102,7 +102,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-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"><Link size="lg" color="info" label="Explore framework guides" href="/framework-guides" external="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large emphasized link usage">
|
||||
@@ -116,7 +116,7 @@ page LinkDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>underline</code></td><td>string</td><td><code>"hover"</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -105,7 +105,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-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"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -151,7 +151,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-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"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -197,7 +197,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-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"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-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"><List size="default" title="Citizen resources" description="Commonly requested public information." items='[{"label":"Report crime","href":"#report","icon":"icon-[lucide--shield-alert]"},{"label":"Track complaint","href":"#track","icon":"icon-[lucide--scan-search]"},{"label":"Certificates","href":"#certificates","icon":"icon-[lucide--file-check-2]"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Linked resource list usage">
|
||||
@@ -320,7 +320,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-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"><List size="sm" title="Current status" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"Application received","status":"Complete"},{"label":"Verification","status":"In progress"},{"label":"Decision","status":"Pending"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact status list usage">
|
||||
@@ -361,7 +361,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-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"><List size="lg" title="Service requests" description="Recent requests and their current status." items='[{"label":"Address verification","description":"Submitted yesterday","status":"Review","href":"#request-1"},{"label":"Character certificate","description":"Submitted 3 days ago","status":"Approved","href":"#request-2"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich action list usage">
|
||||
|
||||
@@ -180,7 +180,7 @@ page MapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="map-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"><Map size="default" title="Bengaluru" description="Pan and zoom to explore the city" items='[]' variant="default" provider="openstreetmap" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="OpenStreetMap usage">
|
||||
@@ -206,7 +206,7 @@ page MapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="map-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"><Map size="sm" title="Google Maps" description="A compact configuration for dashboards and dense product surfaces." items='[]' variant="secondary" provider="google" apiKey="" query="Bengaluru" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Google Maps usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-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"><Marquee size="default" title="Supported capabilities" description="A polished default marquee for a modern application." items='[{"label":"SSR"},{"label":"CSR"},{"label":"Themes"},{"label":"Accessibility"},{"label":"Responsive UI"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Partner and capability strip usage">
|
||||
@@ -320,7 +320,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-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"><Marquee size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"All services operational"},{"label":"New components published"},{"label":"Documentation updated"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact announcement ticker usage">
|
||||
@@ -358,7 +358,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-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"><Marquee size="lg" color="info" title="Built for complete digital platforms" description="A richer configuration demonstrating additional content and hierarchy." items='[{"label":"Public portals","icon":"icon-[lucide--landmark]"},{"label":"Enterprise systems","icon":"icon-[lucide--building-2]"},{"label":"Developer tools","icon":"icon-[lucide--code-2]"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large visual marquee usage">
|
||||
|
||||
@@ -617,7 +617,7 @@ page MegaMenuDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-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"><MegaMenu size="default" label="Products" icon="icon-[lucide--box]" columns='[{"heading":"Platform","items":[{"label":"Runtime","href":"/runtime","description":"The browser half of the framework."},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript."}]},{"heading":"Tooling","items":[{"label":"CLI","href":"/cli","description":"Scaffold, build and deploy."},{"label":"Editor","href":"/editor","description":"Language server and syntax."}]}]' rail='[{"id":"mega-menu-0-1","key":"mega-menu-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":"#mega-menu-demo","actionHref":"#mega-menu-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":"mega-menu-0-2","key":"mega-menu-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-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"]}]' featured='{demo_obj_0}' variant="default" columnCount="3" fullWidth="false" openOnHover="true" actionLabel="Mega Menu" actionHref="#mega-menu-demo" defaultOpen="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped columns usage">
|
||||
@@ -839,7 +839,7 @@ page MegaMenuDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-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"><MegaMenu size="sm" label="Solutions" icon="icon-[lucide--arrow-right]" columns='[{"heading":"By team","items":[{"label":"Engineering","href":"/eng","icon":"icon-[lucide--code]"},{"label":"Design","href":"/design","icon":"icon-[lucide--palette]"},{"label":"Support","href":"/support","icon":"icon-[lucide--life-buoy]"}]},{"heading":"By size","items":[{"label":"Startup","href":"/startup"},{"label":"Enterprise","href":"/enterprise"}]}]' rail='[{"id":"mega-menu-1-1","key":"mega-menu-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":"#mega-menu-demo","actionHref":"#mega-menu-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":"mega-menu-1-2","key":"mega-menu-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-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"]}]' featured='{demo_obj_1}' variant="secondary" columnCount="7" fullWidth="false" openOnHover="true" actionLabel="Compact example" actionHref="#mega-menu-demo" footer="Not sure where to start? Talk to us." defaultOpen="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="With a footer note usage">
|
||||
|
||||
@@ -88,7 +88,7 @@ page MetricCardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="metric-card-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"><MetricCard label="Availability" value="99.9" description="Target service availability." icon="icon-[lucide--activity]" suffix="%" trend="Stable" trendLabel="30 days" trendDirection="positive" progress="-1" progressLabel="Metric Card" href="#status" external="false" actionLabel="Open status" showArrow="true" selectable="false" disabled="false" size="default" color="success" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Operational KPI usage">
|
||||
@@ -122,7 +122,7 @@ page MetricCardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="metric-card-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"><MetricCard label="Profile completion" value="72" description="Complete the remaining account and security steps." icon="icon-[lucide--circle-user-round]" suffix="%" trendLabel="Compact example" progress="72" progressLabel="Account setup" href="#metric-card-demo" external="false" actionLabel="Compact example" showArrow="true" selectable="false" disabled="false" size="sm" color="info" variant="soft" align="center" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Progress metric usage">
|
||||
@@ -157,7 +157,7 @@ page MetricCardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="metric-card-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"><MetricCard label="Open complaints" value="38" description="Cases waiting for review or assignment." icon="icon-[lucide--inbox]" badge="Needs review" trendLabel="Advanced example" progress="-1" progressLabel="Advanced example" href="#queue" external="false" actionLabel="Review queue" showArrow="true" selectable="true" disabled="false" size="lg" color="warning" variant="raised" hover="glow" align="end" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Selectable dashboard metric usage">
|
||||
|
||||
@@ -280,7 +280,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-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"><Nav size="default" items='[{"label":"Home","href":"/","value":"home","icon":"icon-[lucide--house]"},{"label":"Inbox","href":"/inbox","value":"inbox","badge":"9"},{"label":"Reports","href":"/reports","value":"reports"},{"label":"Archive","href":"/archive","value":"archive","disabled":true}]' active="inbox" label="Nav" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal links usage">
|
||||
@@ -331,7 +331,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-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"><Nav size="sm" items='[{"label":"Home","href":"/","value":"home"},{"label":"Products","value":"products","items":[{"label":"Overview","href":"/p","value":"p-overview"},{"label":"Platform","value":"p-platform","items":[{"label":"Runtime","href":"/p/runtime","value":"runtime"},{"label":"Compiler","href":"/p/compiler","value":"compiler"}]}]}]' active="p-overview" label="Compact example" collapsible="true" toggleLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Nested submenus usage">
|
||||
@@ -392,7 +392,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-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"><Nav size="lg" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"label":"Team","href":"/team","value":"team","icon":"icon-[lucide--users]"},{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]' active="team" orientation="vertical" label="Advanced example" collapsible="false" toggleLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical rail usage">
|
||||
|
||||
@@ -630,7 +630,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-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"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" floating="false" openOnHover="false" mobileLabel="Navbar" flushMobile="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Brand, links and actions usage">
|
||||
@@ -703,7 +703,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-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"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" floating="false" openOnHover="false" mobileLabel="Compact example" flushMobile="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dropdown and mega panel usage">
|
||||
@@ -808,7 +808,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-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"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" floating="false" openOnHover="false" mobileLabel="Toggle navigation" flushMobile="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sticky and compact usage">
|
||||
|
||||
@@ -61,7 +61,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-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"><Pagination color="primary" size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact arrows usage">
|
||||
@@ -81,7 +81,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-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"><Pagination color="primary" size="default" page="5" pageSize="10" total="200" variant="numbered" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Numbered pages usage">
|
||||
@@ -102,7 +102,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-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"><Pagination color="primary" size="default" page="8" pageSize="25" total="900" variant="numbered" siblingCount="2" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wider window usage">
|
||||
|
||||
@@ -77,7 +77,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-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"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default four-digit PIN usage">
|
||||
@@ -97,7 +97,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-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"><div class="pin-length-demo"><PinInput size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Different lengths usage">
|
||||
@@ -130,7 +130,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-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"><PinInput size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pre-filled verification code usage">
|
||||
@@ -152,7 +152,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Masked security PIN usage">
|
||||
@@ -173,7 +173,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Alphanumeric regex usage">
|
||||
@@ -196,7 +196,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped code with separator usage">
|
||||
@@ -219,7 +219,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Paste from clipboard usage">
|
||||
@@ -240,7 +240,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled PIN input usage">
|
||||
@@ -262,7 +262,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Read-only code usage">
|
||||
@@ -285,7 +285,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><PinInput size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation state usage">
|
||||
@@ -307,7 +307,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Supporting help text usage">
|
||||
@@ -329,7 +329,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large PIN cells usage">
|
||||
@@ -351,7 +351,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom placeholder usage">
|
||||
@@ -373,7 +373,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Automatic form submission usage">
|
||||
@@ -395,7 +395,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Completion events usage">
|
||||
@@ -416,7 +416,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="JavaScript methods usage">
|
||||
|
||||
@@ -69,7 +69,7 @@ page PreferenceSwitcherDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="preference-switcher-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"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -91,7 +91,7 @@ page PreferenceSwitcherDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="preference-switcher-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"><PreferenceSwitcher size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -113,7 +113,7 @@ page PreferenceSwitcherDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="preference-switcher-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"><PreferenceSwitcher size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -154,7 +154,7 @@ if (component) registerOutputHandler(component, "language", (payload) => <spa
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/flow-canvas"><small>Previous</small><strong>← Flow Canvas</strong></a>
|
||||
<a href="/components/toaster"><small>Next</small><strong>Toaster →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ page ProgressDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -57,7 +57,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-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"><Progress size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -76,7 +76,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-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"><Progress size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -97,7 +97,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-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"><Progress size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -110,7 +110,7 @@ page ProgressDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -296,7 +296,7 @@ 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">
|
||||
@@ -429,7 +429,7 @@ 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">
|
||||
@@ -566,7 +566,7 @@ 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">
|
||||
|
||||
@@ -84,7 +84,7 @@ page RangeSliderDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="range-slider-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"><RangeSlider size="default" color="primary" id="" name="volume" label="Scale" hiddenLabel="false" placeholder="" variant="normal" icon="" iconPosition="start" value="2.4" min="0" max="5" step="0.2" showValue="true" showBounds="true" showSteps="false" marks='[]' helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fractional steps usage">
|
||||
|
||||
@@ -69,7 +69,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-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"><Rating size="default" color="primary" title="Rate your experience" description="" items='[]' variant="default" value="3" max="5" step="1" readonly="false" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Whole stars usage">
|
||||
@@ -95,7 +95,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-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"><Rating size="default" color="primary" title="Half-star rating" description="" items='[]' variant="default" value="3.5" max="5" step="0.5" readonly="false" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Half stars usage">
|
||||
@@ -122,7 +122,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-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"><Rating size="default" color="primary" title="Detailed score" description="" items='[]' variant="default" value="4.2" max="5" step="0.2" readonly="true" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fine increments usage">
|
||||
|
||||
@@ -281,7 +281,7 @@ page ScrollspyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-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"><div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is connected up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" sticky="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Follows the reader usage">
|
||||
@@ -325,7 +325,7 @@ page ScrollspyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-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"><Scrollspy size="sm" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"}]' active="#installation" label="Compact example" heading="Sections" sticky="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact rail usage">
|
||||
|
||||
@@ -64,7 +64,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-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"><SearchBox size="default" label="Search documentation" name="site-search" value="sample-1" placeholder="Search components and guides" type="search" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Site search usage">
|
||||
@@ -86,7 +86,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-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"><SearchBox size="sm" label="Search stations" name="station-search" value="sample-2" placeholder="Name, district, or jurisdiction" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact directory search usage">
|
||||
@@ -109,7 +109,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-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"><SearchBox size="lg" color="info" label="Complaint reference" name="complaint-reference" value="sample-3" placeholder="Enter reference number" disabled="false" required="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Required service lookup usage">
|
||||
|
||||
@@ -41,7 +41,7 @@ page SectionDetail {
|
||||
</Section></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -60,7 +60,7 @@ page SectionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="section-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"><Section id="standard-section" size="default" variant="grid" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard content section usage">
|
||||
@@ -81,7 +81,7 @@ page SectionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="section-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"><Section id="compact-section" size="sm" variant="soft" spacing="sm" maxWidth="wide" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact dashboard content</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact dashboard section usage">
|
||||
@@ -105,7 +105,7 @@ page SectionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="section-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"><Section id="full-section" size="lg" variant="solid" maxWidth="full" fullWidth="true" borderTop="true" borderBottom="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width public page section</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width surface section usage">
|
||||
@@ -123,7 +123,7 @@ page SectionDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>spacing</code></td><td>string</td><td><code>"lg"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>borderTop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>borderBottom</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -509,7 +509,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-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"><Select size="default" label="Select" hiddenLabel="false" value="sample-1" values='[{"id":"select-0-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' options='[{"id":"select-0-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' placeholder="Enter a sample value" variant="normal" icon="" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -751,7 +751,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-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"><Select size="sm" label="Compact example" hiddenLabel="false" value="sample-2" values='[{"id":"select-1-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-1-2","key":"select-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' options='[{"id":"select-1-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-1-2","key":"select-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -997,7 +997,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-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"><Select size="lg" label="Advanced example" hiddenLabel="false" value="sample-3" values='[{"id":"select-2-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-2-2","key":"select-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":"#select-demo","actionHref":"#select-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"]}]' options='[{"id":"select-2-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-2-2","key":"select-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":"#select-demo","actionHref":"#select-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"]}]' placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -284,7 +284,7 @@ page SidebarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-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"><Sidebar size="default" label="Workspace" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"heading":"Projects","items":[{"label":"Active","href":"/active","value":"active","badge":"4"},{"label":"Archive","value":"archive","items":[{"label":"2025","href":"/a/2025","value":"a2025"},{"label":"2024","href":"/a/2024","value":"a2024"}]}]},{"heading":"Account","items":[{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]}]' active="active" mobileLabel="Sidebar" drawerTitle="Sidebar example" mobile="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Groups and nested levels usage">
|
||||
@@ -360,7 +360,7 @@ page SidebarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-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"><Sidebar size="sm" label="Operations" items='[{"label":"Queue","href":"/queue","value":"queue","icon":"icon-[lucide--inbox]"},{"label":"Reports","href":"/reports","value":"reports","icon":"icon-[lucide--chart-no-axes-column]"}]' active="queue" mobileLabel="Open navigation" drawerTitle="Operations" mobile="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Drawer on small screens usage">
|
||||
|
||||
@@ -36,7 +36,7 @@ page SkeletonDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>5 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-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"><Skeleton label="Skeleton" size="md" lines="3" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -74,7 +74,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-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"><Skeleton label="Compact example" size="sm" lines="3" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -94,7 +94,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-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"><Skeleton label="Advanced example" size="lg" lines="3" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -106,7 +106,7 @@ page SkeletonDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Loading"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>lines</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -36,7 +36,7 @@ page SpinnerDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>5 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-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"><Spinner label="Spinner" size="md" lines="3" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -74,7 +74,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-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"><Spinner label="Compact example" size="sm" lines="3" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -94,7 +94,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-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"><Spinner label="Advanced example" size="lg" lines="3" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -106,7 +106,7 @@ page SpinnerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Loading"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>lines</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -298,7 +298,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-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"><Stepper size="default" steps='[{"label":"Account","description":"Your details"},{"label":"Billing","description":"Payment method"},{"label":"Confirm","description":"Review and submit"}]' active="1" controlled="false" clickable="false" label="Stepper" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal progress usage">
|
||||
@@ -343,7 +343,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-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"><Stepper size="sm" steps='[{"label":"Cloned","icon":"icon-[lucide--git-branch]"},{"label":"Built","icon":"icon-[lucide--hammer]"},{"label":"Deployed","icon":"icon-[lucide--rocket]"}]' active="2" controlled="false" orientation="vertical" clickable="false" label="Compact example" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical with icons usage">
|
||||
@@ -390,7 +390,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-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"><Stepper size="lg" steps='[{"label":"Account","title":"Your details","content":"Name, email and a password."},{"label":"Billing","title":"How you pay","content":"Card or invoice."},{"label":"Confirm","title":"Review","content":"Check everything before submitting."}]' active="1" controlled="false" clickable="false" label="Advanced example" showPanel="true" controls="true" allowSkip="true" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wizard with content and controls usage">
|
||||
@@ -442,7 +442,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="lg" steps='[{"label":"Account","title":"Your details","content":"This step is not complete yet."},{"label":"Billing","title":"How you pay","content":"Card or invoice."}]' active="0" controlled="false" clickable="false" label="Advanced example" showPanel="true" controls="true" allowSkip="false" nextDisabled="true" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Held until the step is valid usage">
|
||||
@@ -488,7 +488,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="lg" steps='[{"label":"One"},{"label":"Two"},{"label":"Three"}]' active="0" controlled="false" clickable="true" label="Advanced example" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--5" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Clickable steps usage">
|
||||
|
||||
@@ -82,7 +82,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-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"><StrongPassword label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Live strength meter usage">
|
||||
@@ -104,7 +104,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-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"><StrongPassword label="Requirements and hint text" name="strong-password-2" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="Use a unique password you do not use for another account." disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Requirements and hint text usage">
|
||||
@@ -125,7 +125,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-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"><StrongPassword label="Requirements in a popover" name="strong-password-3" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="popover" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Requirements in a popover usage">
|
||||
@@ -146,7 +146,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Custom special characters" name="strong-password-4" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="@#_-." requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom special characters usage">
|
||||
@@ -167,7 +167,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Optional requirements" name="strong-password-5" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="false" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Optional requirements usage">
|
||||
@@ -188,7 +188,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Disabled password strength" name="strong-password-6" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="true" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled password strength usage">
|
||||
|
||||
@@ -46,7 +46,7 @@ page StyledIconDetail {
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -65,7 +65,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-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"><StyledIcon size="default" color="primary" title="Styled Icon" description="" items='[]' variant="default" icon="icon-[lucide--sparkles]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -90,7 +90,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-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"><StyledIcon size="sm" color="success" title="Styled Icon" description="" items='[]' variant="default" icon="icon-[lucide--check]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -118,7 +118,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-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"><StyledIcon size="default" color="primary" title="Styled Icon" description="" items='[]' variant="outline" icon="icon-[lucide--shield-check]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -137,7 +137,7 @@ page StyledIconDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Styled Icon"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--sparkles]"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -12,7 +12,7 @@ page SwitchDetail {
|
||||
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
||||
state playground_checked = (ctx.url.searchParams.get("pg_checked") ?? "false") === "true"
|
||||
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? ""
|
||||
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
|
||||
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||
@@ -56,7 +56,7 @@ page SwitchDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>20 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-switch-size"><span><strong>size</strong><small>string</small></span><select id="playground-switch-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-switch-color"><span><strong>color</strong><small>string</small></span><select id="playground-switch-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-switch-id"><span><strong>id</strong><small>string</small></span><input id="playground-switch-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-switch-name"><span><strong>name</strong><small>string</small></span><input id="playground-switch-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-switch-label"><span><strong>label</strong><small>string</small></span><input id="playground-switch-label" name="pg_label" type="text" value="Switch" /></label><label class="playground-toggle" for="playground-switch-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-switch-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-switch-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-switch-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-switch-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-switch-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-switch-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-switch-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-switch-value"><span><strong>value</strong><small>string</small></span><input id="playground-switch-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-toggle" for="playground-switch-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-switch-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-switch-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-switch-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-switch-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-switch-error"><span><strong>error</strong><small>string</small></span><input id="playground-switch-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-switch-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-switch-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-switch-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-switch-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-switchLine truncated
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-switch-size"><span><strong>size</strong><small>string</small></span><select id="playground-switch-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-switch-color"><span><strong>color</strong><small>string</small></span><select id="playground-switch-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-switch-id"><span><strong>id</strong><small>string</small></span><input id="playground-switch-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-switch-name"><span><strong>name</strong><small>string</small></span><input id="playground-switch-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-switch-label"><span><strong>label</strong><small>string</small></span><input id="playground-switch-label" name="pg_label" type="text" value="Switch" /></label><label class="playground-toggle" for="playground-switch-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-switch-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-switch-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-switch-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-switch-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-switch-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-switch-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-switch-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-switch-value"><span><strong>value</strong><small>string</small></span><input id="playground-switch-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-switch-checked"><span><strong>checked</strong><small>boolean | null</small></span><input id="playground-switch-checked" name="pg_checked" type="text" value="" /></label><label class="playground-field" for="playground-switch-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-switch-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-switch-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-switch-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-switch-error"><span><strong>error</strong><small>string</small></span><input id="playground-switch-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-switch-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-switch-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-switch-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-switch-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-switch-required" name="pg_required" type="checkbox" value=Line truncated
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -71,8 +71,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-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"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" 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>
|
||||
@@ -91,8 +91,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-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"><Switch size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" 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>
|
||||
@@ -115,8 +115,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-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"><Switch size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" 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>
|
||||
@@ -155,7 +155,7 @@ if (component) registerOutputHandler(component, "focus", (payload) => <span>&
|
||||
if (component) registerOutputHandler(component, "blur", (payload) => <span>{</span>
|
||||
console.log("blur", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Switch"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"on"</code></td><td>No</td></tr><tr><td><code>checked</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Switch"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"on"</code></td><td>No</td></tr><tr><td><code>checked</code></td><td>boolean | null</td><td><code>null</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#switch-demo-1">Production default</a><a href="#switch-demo-2">Compact application</a><a href="#switch-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
|
||||
@@ -278,7 +278,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-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"><Tabs size="default" items='[{"label":"Overview","value":"overview","content":"Overview content"},{"label":"Requirements","value":"requirements","content":"Requirements content"},{"label":"Process","value":"process","content":"Process content"}]' active="overview" orientation="horizontal" label="Service information" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal content tabs usage">
|
||||
@@ -320,7 +320,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-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"><Tabs size="sm" items='[{"label":"Account","value":"account","description":"Profile and credentials."},{"label":"Billing","value":"billing","description":"Invoices and payment method."},{"label":"Team","value":"team","description":"Members and their roles."}]' active="account" mode="url" param="tab" label="Account settings" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Mirrored into the URL usage">
|
||||
@@ -364,7 +364,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-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"><Tabs size="sm" items='[{"label":"Details","value":"details"},{"label":"History","value":"history"},{"label":"Files","value":"files"}]' active="details" label="Record views" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application tabs usage">
|
||||
@@ -404,7 +404,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Tabs size="lg" items='[{"label":"Profile","value":"profile","icon":"icon-[lucide--user]"},{"label":"Security","value":"security","icon":"icon-[lucide--shield]"},{"label":"Notifications","value":"notifications","icon":"icon-[lucide--bell]"}]' active="security" orientation="vertical" label="Settings" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical settings tabs usage">
|
||||
|
||||
@@ -65,7 +65,7 @@ page TextLinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="text-link-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"><TextLink label="Learn more" href="#learn" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline directional link usage">
|
||||
@@ -84,7 +84,7 @@ page TextLinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="text-link-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"><TextLink label="Read the complete guide" href="#guide" external="false" icon="icon-[lucide--arrow-right]" showArrow="false" underline="true" size="sm" variant="secondary" disabled="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Underlined content link usage">
|
||||
@@ -109,7 +109,7 @@ page TextLinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="text-link-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"><TextLink label="Open WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" icon="icon-[lucide--book-open]" iconPosition="start" showArrow="false" underline="false" size="lg" variant="soft" disabled="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="External developer link usage">
|
||||
|
||||
@@ -74,7 +74,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-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"><Textarea size="default" label="Textarea" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -94,7 +94,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-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"><Textarea size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -118,7 +118,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-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"><Textarea size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -156,7 +156,7 @@ page TimePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="time-picker-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"><TimePicker size="default" name="meeting-time" label="Meeting time" hiddenLabel="false" value="09:30" placeholder="Enter a sample value" variant="normal" icon="" inline="false" minuteStep="5" hours='["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]' minutes='["00","05","10","15","20","25","30","35","40","45","50","55"]' readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Time picker usage">
|
||||
|
||||
@@ -279,7 +279,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-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"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" numbered="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Application timeline usage">
|
||||
@@ -323,7 +323,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-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"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' variant="compact" numbered="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact activity history usage">
|
||||
@@ -364,7 +364,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-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"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' variant="alternate" numbered="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich milestone timeline usage">
|
||||
|
||||
@@ -65,7 +65,7 @@ page ToasterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toaster-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"><div class="showcase-toast-demo"><button type="button" @click='toast.success("Your changes are live", { title: "Published" })'>success</button><button type="button" @click='toast.error("We could not reach the server", { title: "Network error" })'>danger</button><button type="button" @click='toast.warning("Your trial ends in 3 days", { title: "Heads up", icon: "icon-[lucide--hourglass]" })'>warning + custom icon</button><button type="button" @click='toast.info("Export queued")'>info</button><button type="button" @click='toast("Note deleted", { title: "Deleted", actionLabel: "Undo" })'>one action</button><button type="button" @click='toast.warning("This file changed elsewhere", { title: "Conflict", duration: 0, actions: [{ label: "Keep mine" }, { label: "Discard", tone: "danger" }] })'>two actions (sticky)</button><button type="button" @click='toast("No icon on this one", { icon: false })'>icon suppressed</button><button type="button" @click='toast.success("Gone in 1.5s", { duration: 1500 })'>short duration</button><button type="button" @click='toast.clear()'>clear all</button></div><Toaster size="default" position="bottom-right" duration="4500" max="4" pauseOnHover="true" showIcon="true" closable="true" showProgress="true" closeLabel="Toaster" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Raise notifications from anywhere usage">
|
||||
|
||||
@@ -112,7 +112,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-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"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 1 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -155,7 +155,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-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"><ToggleCount size="sm" variant="secondary" class="showcase-instance showcase-instance--2" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 2 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="center" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -200,7 +200,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-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"><ToggleCount size="lg" variant="success" class="showcase-instance showcase-instance--3" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 3 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="end" fullWidth="true" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -85,7 +85,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-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"><TogglePassword size="default" label="Password" name="toggle-password-1" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline visibility button usage">
|
||||
@@ -112,7 +112,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-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"><TogglePassword size="default" label="Checkbox-controlled toggle" name="toggle-password-2" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="checkbox" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Checkbox-controlled toggle usage">
|
||||
@@ -141,7 +141,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-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"><TogglePassword size="default" label="Passwords" name="toggle-password-3" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[{"label":"New password","name":"new-password","placeholder":"Enter new password","autocomplete":"new-password"},{"label":"Current password","name":"current-password","value":"Northstar!2026","autocomplete":"current-password"}]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Synchronized password fields usage">
|
||||
@@ -181,7 +181,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Without visibility toggle" name="toggle-password-4" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="false" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Without visibility toggle usage">
|
||||
@@ -209,7 +209,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Supporting help text" name="toggle-password-5" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="Use at least eight characters and avoid passwords used on other sites." validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Supporting help text usage">
|
||||
@@ -237,7 +237,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="toggle-password-validation" class="demo-validation-form"><TogglePassword size="default" label="Required validation" name="toggle-password-6" value="" placeholder="Enter your password" autocomplete="current-password" minlength="8" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="true" invalid="false" helpText="" validationMessage="" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Required validation usage">
|
||||
@@ -266,7 +266,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Disabled password" name="toggle-password-7" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="true" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled password usage">
|
||||
@@ -294,7 +294,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Read-only password" name="toggle-password-8" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="true" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Read-only password usage">
|
||||
@@ -323,7 +323,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="lg" label="Large password field" name="toggle-password-9" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large password field usage">
|
||||
@@ -351,7 +351,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Toggle events" name="toggle-password-10" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Toggle events usage">
|
||||
|
||||
@@ -122,7 +122,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-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"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -176,7 +176,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-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"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -230,7 +230,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-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"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -37,7 +37,7 @@ page TypographyDetail {
|
||||
</Typography></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -56,7 +56,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-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"><Typography size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Readable content typography usage">
|
||||
@@ -75,7 +75,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-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"><Typography size="compact" columns="2" maxWidth="compact" class="showcase-instance showcase-instance--2"><div class="showcase-typography"><h3>Compact reference</h3><p>Focused content with reduced spacing.</p></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact documentation typography usage">
|
||||
@@ -96,7 +96,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-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"><Typography size="spacious" columns="2" gap="xl" maxWidth="wide" class="showcase-instance showcase-instance--3"><div class="showcase-typography"><h2>Long-form public information</h2><p>Structured editorial content can use a wider two-column layout on large screens.</p><p>Responsive behavior returns content to one column on smaller screens.</p></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wide editorial typography usage">
|
||||
@@ -110,7 +110,7 @@ page TypographyDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -67,7 +67,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-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"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="false" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -93,7 +93,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-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"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="false" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -119,7 +119,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-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"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="true" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
Reference in new issue
Block a user