release: WRNexusJS 0.4.0
This commit is contained in:
Clintchiz committed
1 parent
8b728a3e5d
commit
30e5721e84
250 files changed
+10065
-3923
No files matched your search
@@ -46,11 +46,11 @@ page AdvancedFormsShowcase {
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="InputNumber" size="md" color="primary" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
|
||||
<div class="catalog-card-stage"><div data-component="InputNumber" size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Advanced Forms</span><h2>Input Number</h2><p>Theme-aware, responsive input number component.</p></div>
|
||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/input-number">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>40 props · 0 slots</span><a href="/components/input-number">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
|
||||
@@ -10,7 +10,7 @@ page BaseShowcase {
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Base</h1>
|
||||
<p class="showcase-description">27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>27 components</span><span>Multiple use cases</span><span>81 live configurations</span></div>
|
||||
<div class="category-meta"><span>27 components</span><span>Multiple use cases</span><span>86 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card">
|
||||
|
||||
@@ -70,7 +70,7 @@ page ButtonDetail {
|
||||
<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>
|
||||
<div><span class="demo-case-eyebrow">Default</span><h2>Primary action</h2><p>The standard high-emphasis action for forms and product workflows.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
@@ -78,7 +78,7 @@ page ButtonDetail {
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="Button" label="Save & Submit" as="button" type="submit" class="showcase-instance showcase-instance--1"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<section class="demo-code" aria-label="Primary action usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Button
|
||||
label="Save & Submit"
|
||||
@@ -90,7 +90,7 @@ page ButtonDetail {
|
||||
</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>
|
||||
<div><span class="demo-case-eyebrow">Outline · Small</span><h2>Secondary navigation</h2><p>A compact link button with an end icon and restrained emphasis.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
@@ -98,7 +98,7 @@ page ButtonDetail {
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="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>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<section class="demo-code" aria-label="Secondary navigation usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Button
|
||||
label="Learn more"
|
||||
@@ -114,7 +114,7 @@ page ButtonDetail {
|
||||
</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>
|
||||
<div><span class="demo-case-eyebrow">Secondary · Large · Pill</span><h2>Prominent rounded action</h2><p>A large secondary action using the optional pill shape.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
@@ -122,7 +122,7 @@ page ButtonDetail {
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="Button" label="Upgrade plan" as="button" variant="secondary" size="lg" pill="true" class="showcase-instance showcase-instance--3"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<section class="demo-code" aria-label="Prominent rounded action usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Button
|
||||
label="Upgrade plan"
|
||||
@@ -130,6 +130,113 @@ page ButtonDetail {
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
pill="true"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Ghost · Icon</span><h2>Accessible icon action</h2><p>An icon-only control with its accessible name supplied through props.</p></div>
|
||||
<span class="demo-case-number">04</span>
|
||||
</header>
|
||||
<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"><div data-component="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>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Accessible icon action usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Button
|
||||
label="Open settings"
|
||||
as="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
icon="icon-[lucide--settings]"
|
||||
ariaLabel="Open settings"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Destructive</span><h2>Dangerous action</h2><p>A destructive treatment for irreversible or high-risk operations.</p></div>
|
||||
<span class="demo-case-number">05</span>
|
||||
</header>
|
||||
<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"><div data-component="Button" label="Delete project" as="button" variant="destructive" icon="icon-[lucide--trash-2]" class="showcase-instance showcase-instance--5"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dangerous action usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Button
|
||||
label="Delete project"
|
||||
as="button"
|
||||
variant="destructive"
|
||||
icon="icon-[lucide--trash-2]"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Link</span><h2>Inline action</h2><p>A low-chrome action that behaves and reads like an inline link.</p></div>
|
||||
<span class="demo-case-number">06</span>
|
||||
</header>
|
||||
<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"><div data-component="Button" label="Read documentation" as="a" href="#button-demo" variant="link" class="showcase-instance showcase-instance--6"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline action usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Button
|
||||
label="Read documentation"
|
||||
as="a"
|
||||
href="#button-demo"
|
||||
variant="link"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Loading</span><h2>Pending action</h2><p>The button owns its busy state, loading label, spinner, and disabled behavior.</p></div>
|
||||
<span class="demo-case-number">07</span>
|
||||
</header>
|
||||
<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"><div data-component="Button" label="Publish" loadingLabel="Publishing…" as="button" loading="true" class="showcase-instance showcase-instance--7"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pending action usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Button
|
||||
label="Publish"
|
||||
loadingLabel="Publishing…"
|
||||
as="button"
|
||||
loading="true"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Disabled</span><h2>Unavailable action</h2><p>A visibly and semantically disabled control.</p></div>
|
||||
<span class="demo-case-number">08</span>
|
||||
</header>
|
||||
<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"><div data-component="Button" label="Unavailable action" as="button" variant="outline" disabled="true" class="showcase-instance showcase-instance--8"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Unavailable action usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Button
|
||||
label="Unavailable action"
|
||||
as="button"
|
||||
variant="outline"
|
||||
disabled="true"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -138,7 +245,7 @@ page ButtonDetail {
|
||||
<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>label</code></td><td>string</td><td><code>"Button"</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading…"</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>as</code></td><td>string</td><td><code>""</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>type</code></td><td>string</td><td><code>"button"</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>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>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>pill</code></td><td>boolean</td><td><code>false</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>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>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaPressed</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaExpanded</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaControls</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>autofocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controlClass</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">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-demo-1">Production default</a><a href="#button-demo-2">Compact application</a><a href="#button-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-demo-1">Primary action</a><a href="#button-demo-2">Secondary navigation</a><a href="#button-demo-3">Prominent rounded action</a><a href="#button-demo-4">Accessible icon action</a><a href="#button-demo-5">Dangerous action</a><a href="#button-demo-6">Inline action</a><a href="#button-demo-7">Pending action</a><a href="#button-demo-8">Unavailable action</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -3,17 +3,44 @@ page InputNumberDetail {
|
||||
layout = "showcase"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Number"
|
||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||
state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
|
||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? "default-quantity"
|
||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "1"
|
||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
|
||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "number"
|
||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? "0"
|
||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? "99"
|
||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? "1"
|
||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||
state playground_precision = ctx.url.searchParams.get("pg_precision") ?? "auto"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? ""
|
||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
|
||||
state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
|
||||
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||
state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
|
||||
state playground_prefix = ctx.url.searchParams.get("pg_prefix") ?? ""
|
||||
state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? ""
|
||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
|
||||
state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off"
|
||||
state playground_inputMode = ctx.url.searchParams.get("pg_inputMode") ?? "decimal"
|
||||
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? ""
|
||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||
state playground_inputDisabled = ctx.url.searchParams.get("pg_inputDisabled") ?? "false"
|
||||
state playground_buttonsDisabled = ctx.url.searchParams.get("pg_buttonsDisabled") ?? "false"
|
||||
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||
state playground_allowInput = ctx.url.searchParams.get("pg_allowInput") ?? "true"
|
||||
state playground_keyboard = ctx.url.searchParams.get("pg_keyboard") ?? "true"
|
||||
state playground_wheel = ctx.url.searchParams.get("pg_wheel") ?? "false"
|
||||
state playground_clamp = ctx.url.searchParams.get("pg_clamp") ?? "true"
|
||||
state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
|
||||
state playground_showButtons = ctx.url.searchParams.get("pg_showButtons") ?? "true"
|
||||
state playground_showValidationMessage = ctx.url.searchParams.get("pg_showValidationMessage") ?? "true"
|
||||
state playground_decrementLabel = ctx.url.searchParams.get("pg_decrementLabel") ?? "Decrease value"
|
||||
state playground_incrementLabel = ctx.url.searchParams.get("pg_incrementLabel") ?? "Increase value"
|
||||
state playground_controlsLabel = ctx.url.searchParams.get("pg_controlsLabel") ?? "Quantity controls"
|
||||
state playground_requiredMessage = ctx.url.searchParams.get("pg_requiredMessage") ?? "A value is required."
|
||||
state playground_minMessage = ctx.url.searchParams.get("pg_minMessage") ?? "Value is below the minimum."
|
||||
state playground_maxMessage = ctx.url.searchParams.get("pg_maxMessage") ?? "Value is above the maximum."
|
||||
seo {
|
||||
title = "Input Number"
|
||||
description = "Theme-aware, responsive input number component."
|
||||
@@ -27,7 +54,7 @@ page InputNumberDetail {
|
||||
<span class="showcase-eyebrow">Advanced Forms component</span>
|
||||
<h1>Input Number</h1>
|
||||
<p>Theme-aware, responsive input number component.</p>
|
||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>40 props</span><span>0 slots</span><span>4 events</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>
|
||||
@@ -36,7 +63,7 @@ page InputNumberDetail {
|
||||
<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><div data-component="InputNumber" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||
<div class="playground-preview-source" data-playground-preview><div data-component="InputNumber" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}" id="{playground_id}" name="{playground_name}" value="{playground_value}" min="{playground_min}" max="{playground_max}" step="{playground_step}" precision="{playground_precision}" label="{playground_label}" description="{playground_description}" helpText="{playground_helpText}" error="{playground_error}" invalid="{playground_invalid}" prefix="{playground_prefix}" suffix="{playground_suffix}" placeholder="{playground_placeholder}" autocomplete="{playground_autocomplete}" inputMode="{playground_inputMode}" ariaLabel="{playground_ariaLabel}" required="{playground_required}" disabled="{playground_disabled}" inputDisabled="{playground_inputDisabled}" buttonsDisabled="{playground_buttonsDisabled}" readonly="{playground_readonly}" allowInput="{playground_allowInput}" keyboard="{playground_keyboard}" wheel="{playground_wheel}" clamp="{playground_clamp}" fullWidth="{playground_fullWidth}" showButtons="{playground_showButtons}" showValidationMessage="{playground_showValidationMessage}" decrementLabel="{playground_decrementLabel}" incrementLabel="{playground_incrementLabel}" controlsLabel="{playground_controlsLabel}" requiredMessage="{playground_requiredMessage}" minMessage="{playground_minMessage}" maxMessage="{playground_maxMessage}"></div></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><InputNumber
|
||||
@@ -45,14 +72,13 @@ page InputNumberDetail {
|
||||
value="1"
|
||||
min="0"
|
||||
max="99"
|
||||
step="1"
|
||||
/></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>13 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-input-number-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-number-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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><option value="xl">xl</option></select></label><label class="playground-field" for="playground-input-number-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-number-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-input-number-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-number-label" name="pg_label" type="text" value="Input Number" /></label><label class="playground-field" for="playground-input-number-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-number-name" name="pg_name" type="text" value="default-quantity" /></label><label class="playground-field" for="playground-input-number-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-number-value" name="pg_value" type="text" value="1" /></label><label class="playground-field" for="playground-input-number-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-number-placeholder" name="pg_placeholder" type="text" value="" /></label><label class="playground-field" for="playground-input-number-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-number-type" name="pg_type" type="text" value="number" /></label><label class="playground-field" for="playground-input-number-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-number-min" name="pg_min" type="text" value="0" /></label><label class="playground-field" for="playground-input-number-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-number-max" name="pg_max" type="text" value="99" /></label><label class="playground-field" for="playground-input-number-step"><span><strong>step</strong><small>string</small></span><input id="playground-input-number-step" name="pg_step" type="text" value="1" /></label><label class="playground-toggle" for="playground-input-number-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-number-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-number-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-number-class" name="pg_class" type="text" value="" /></label></div>
|
||||
<header><div><span>Component props</span><strong>40 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-input-number-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-number-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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><option value="xl">xl</option></select></label><label class="playground-field" for="playground-input-number-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-number-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-input-number-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-input-number-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="compact">compact</option><option value="horizontal">horizontal</option><option value="labeled">labeled</option><option value="seat">seat</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-input-number-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-number-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-input-number-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-number-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-number-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-number-name" name="pg_name" type="text" value="default-quantity" /></label><label class="playground-field" for="playground-input-number-value"><span><strong>value</strong><small>number</small></span><input id="playground-input-number-value" name="pg_value" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-number-min" name="pg_min" type="text" value="0" /></label><label class="playground-field" for="playground-input-number-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-number-max" name="pg_max" type="text" value="99" /></label><label class="playground-field" for="playground-input-number-step"><span><strong>step</strong><small>number</small></span><input id="playground-input-number-step" name="pg_step" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-precision"><span><strong>precision</strong><small>string</small></span><input id="playground-input-number-precision" name="pg_precision" type="text" value="auto" /></label><label class="playground-field" for="playground-input-number-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-number-label" name="pg_label" type="text" value="" /></label><label class="playground-field" for="playground-input-number-description"><span><strong>description</strong><small>string</small></span><input id="playground-input-number-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-input-number-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-input-number-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-field" for="playground-input-number-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-number-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-input-number-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-input-number-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-input-number-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-input-number-suffix" name="pg_suffix" type="text" valueLine truncated
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -67,7 +93,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"><div data-component="InputNumber" size="md" color="primary" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default controls usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -77,7 +103,6 @@ page InputNumberDetail {
|
||||
value="1"
|
||||
min="0"
|
||||
max="99"
|
||||
step="1"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -90,18 +115,18 @@ 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"><div data-component="InputNumber" size="md" color="primary" label="Select quantity" name="labeled-quantity" value="1" min="1" max="25" step="1"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Labeled input style usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><InputNumber
|
||||
size="md"
|
||||
label="Select quantity"
|
||||
variant="labeled"
|
||||
name="labeled-quantity"
|
||||
value="1"
|
||||
min="1"
|
||||
max="25"
|
||||
step="1"
|
||||
label="Select quantity"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -114,17 +139,18 @@ 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"><div data-component="InputNumber" size="md" color="primary" label="Select quantity" name="vertical-quantity" value="1" min="0" max="20"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical buttons usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><InputNumber
|
||||
size="md"
|
||||
label="Select quantity"
|
||||
variant="vertical"
|
||||
name="vertical-quantity"
|
||||
value="1"
|
||||
min="0"
|
||||
max="20"
|
||||
label="Select quantity"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -137,12 +163,13 @@ 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"><div data-component="InputNumber" size="md" color="primary" name="horizontal-quantity" value="1" min="0" max="20"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal buttons usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><InputNumber
|
||||
size="md"
|
||||
variant="horizontal"
|
||||
name="horizontal-quantity"
|
||||
value="1"
|
||||
min="0"
|
||||
@@ -159,14 +186,14 @@ 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"><div data-component="InputNumber" size="sm" color="primary" name="compact-quantity" value="0" min="0" max="10"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact size usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><InputNumber
|
||||
size="sm"
|
||||
variant="compact"
|
||||
name="compact-quantity"
|
||||
value="0"
|
||||
min="0"
|
||||
max="10"
|
||||
/></code></pre>
|
||||
@@ -181,17 +208,18 @@ 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"><div data-component="InputNumber" size="md" color="primary" label="Additional seats" name="additional-seats" value="0" min="0" max="50"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Seat quantity selector usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><InputNumber
|
||||
size="md"
|
||||
label="Additional seats"
|
||||
variant="seat"
|
||||
name="additional-seats"
|
||||
value="0"
|
||||
min="0"
|
||||
max="50"
|
||||
label="Additional seats"
|
||||
description="$39 monthly"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -204,7 +232,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"><div data-component="InputNumber" size="md" color="primary" name="disabled-input" value="10"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="disabled-input" value="10" inputDisabled="true"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled input usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -212,6 +240,7 @@ page InputNumberDetail {
|
||||
size="md"
|
||||
name="disabled-input"
|
||||
value="10"
|
||||
inputDisabled="true"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -224,7 +253,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"><div data-component="InputNumber" size="md" color="primary" name="disabled-buttons" value="10"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled buttons usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -232,6 +261,7 @@ page InputNumberDetail {
|
||||
size="md"
|
||||
name="disabled-buttons"
|
||||
value="10"
|
||||
buttonsDisabled="true"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -251,7 +281,6 @@ page InputNumberDetail {
|
||||
<pre><code><InputNumber
|
||||
size="md"
|
||||
name="custom-step"
|
||||
value="0"
|
||||
min="0"
|
||||
max="20"
|
||||
step="2"
|
||||
@@ -311,7 +340,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"><div data-component="InputNumber" size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5"></div></div>
|
||||
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit"></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation states usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -321,12 +350,13 @@ page InputNumberDetail {
|
||||
value="10"
|
||||
min="0"
|
||||
max="5"
|
||||
error="Out of limit"
|
||||
/></code></pre>
|
||||
</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>"Input Number"</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>value</code></td><td>string</td><td><code>""</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>type</code></td><td>string</td><td><code>"number"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</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>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</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>"quantity"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>precision</code></td><td>string</td><td><code>"auto"</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>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</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>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>inputMode</code></td><td>string</td><td><code>"decimal"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</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>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>inputDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>buttonsDisabled</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>allowInput</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>keyboard</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>wheel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>clamp</code></td><td>boolean</td><td><code>true</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>showButtons</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValidationMessage</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>decrementLabel</code></td><td>string</td><td><code>"Decrease value"</code></td><td>No</td></tr><tr><td><code>incrementLabel</code></td><td>string</td><td><code>"Increase value"</code></td><td>No</td></tr><tr><td><code>controlsLabel</code></td><td>string</td><td><code>"Quantity controls"</code></td><td>No</td></tr><tr><td><code>requiredMessage</code></td><td>string</td><td><code>"A value is required."</code></td><td>No</td></tr><tr><td><code>minMessage</code></td><td>string</td><td><code>"Value is below the minimum."</code></td><td>No</td></tr><tr><td><code>maxMessage</code></td><td>string</td><td><code>"Value is above the maximum."</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="#input-number-demo-1">Default controls</a><a href="#input-number-demo-2">Labeled input style</a><a href="#input-number-demo-3">Vertical buttons</a><a href="#input-number-demo-4">Horizontal buttons</a><a href="#input-number-demo-5">Compact size</a><a href="#input-number-demo-6">Seat quantity selector</a><a href="#input-number-demo-7">Disabled input</a><a href="#input-number-demo-8">Disabled buttons</a><a href="#input-number-demo-9">Custom step size</a><a href="#input-number-demo-10">Negative values</a><a href="#input-number-demo-11">Maximum limit</a><a href="#input-number-demo-12">Validation states</a><a href="#api">Props API</a></div>
|
||||
|
||||
@@ -17,11 +17,11 @@ page ComponentShowcase {
|
||||
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>85 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/blocks">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
|
||||
<section class="showcase-stats">
|
||||
<div class="showcase-stat"><strong>85</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>343</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>348</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
|
||||
<div class="showcase-stat"><strong>8</strong><span>Focused categories</span></div>
|
||||
</section>
|
||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/advanced-forms"><span class="home-category-index">01</span><div><strong>Advanced Forms</strong><p>9 components · 115 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/base"><span class="home-category-index">02</span><div><strong>Base</strong><p>27 components · 81 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/forms"><span class="home-category-index">03</span><div><strong>Forms</strong><p>11 components · 33 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/integrations"><span class="home-category-index">04</span><div><strong>Integrations</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/layout"><span class="home-category-index">05</span><div><strong>Layout</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/navigation"><span class="home-category-index">06</span><div><strong>Navigation</strong><p>9 components · 27 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/overlays"><span class="home-category-index">07</span><div><strong>Overlays</strong><p>6 components · 18 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/tables"><span class="home-category-index">08</span><div><strong>Tables</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/advanced-forms"><span class="home-category-index">01</span><div><strong>Advanced Forms</strong><p>9 components · 115 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/base"><span class="home-category-index">02</span><div><strong>Base</strong><p>27 components · 86 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/forms"><span class="home-category-index">03</span><div><strong>Forms</strong><p>11 components · 33 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/integrations"><span class="home-category-index">04</span><div><strong>Integrations</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/layout"><span class="home-category-index">05</span><div><strong>Layout</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/navigation"><span class="home-category-index">06</span><div><strong>Navigation</strong><p>9 components · 27 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/overlays"><span class="home-category-index">07</span><div><strong>Overlays</strong><p>6 components · 18 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/tables"><span class="home-category-index">08</span><div><strong>Tables</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1269,6 +1269,9 @@ function inputNumberConfiguration(variation) {
|
||||
|
||||
function demoUses(component) {
|
||||
switch (component.name) {
|
||||
case "Button":
|
||||
return buttonUses;
|
||||
|
||||
case "AdvancedSelect":
|
||||
return advancedSelectUses;
|
||||
|
||||
|
||||
@@ -85,9 +85,9 @@ test("every component has a detail page with its expected live use cases", () =>
|
||||
return [...source.matchAll(/<div data-component="([^"]+)"/g)].map((match) => match[1]);
|
||||
});
|
||||
|
||||
// Every detail page has one playground plus three standard demos. Button,
|
||||
// AdvancedSelect, ComboBox, PinInput, and TogglePassword add specialized capability demos.
|
||||
expect(detailMounts).toHaveLength(reference.count * 4 + 83);
|
||||
// Every detail page has one playground plus three standard demos. Interactive
|
||||
// components add specialized capability demos beyond that shared baseline.
|
||||
expect(detailMounts).toHaveLength(reference.count * 4 + 95);
|
||||
for (const component of reference.components) {
|
||||
const expectedMounts =
|
||||
component.mount === "Button"
|
||||
@@ -96,11 +96,15 @@ test("every component has a detail page with its expected live use cases", () =>
|
||||
? 42
|
||||
: component.mount === "ComboBox"
|
||||
? 22
|
||||
: component.mount === "PinInput"
|
||||
? 19
|
||||
: component.mount === "TogglePassword"
|
||||
? 11
|
||||
: 4;
|
||||
: component.mount === "InputNumber"
|
||||
? 13
|
||||
: component.mount === "PinInput"
|
||||
? 19
|
||||
: component.mount === "StrongPassword"
|
||||
? 7
|
||||
: component.mount === "TogglePassword"
|
||||
? 11
|
||||
: 4;
|
||||
expect(detailMounts.filter((mount) => mount === component.mount)).toHaveLength(expectedMounts);
|
||||
}
|
||||
}, 15_000);
|
||||
|
||||
Reference in new issue
Block a user