fix(ui): release the scroll lock on closed drawers, add stepper wizard controls, slide tabs
The scroll lock was mine, and it broke every page carrying a Drawer or Modal. Making dialog visibility testable, I replaced a size check with a data-show check -- but a Drawer animates open, so its panel cannot be hidden with data-show at all: display:none is not transitionable. Every closed Drawer therefore looked open, took the body scroll lock and never released it, and the page could not be scrolled. Both components publish data-open, which is the signal that actually means open, and that is what is read now. Stepper gains the wizard surface: showPanel renders each step body and shows only the active one, the same contract Tabs uses, and controls adds Back, Skip and Next, which becomes Finish on the last step. nextDisabled lets a form hold the step; the component never validates anything itself, since the page owns the form. Stepper also gets a single root. The panels and controls were siblings of the list, so the component had several roots and anything scoped to data-ui-component missed most of it. Tabs panels now slide in the direction of travel rather than fading upward. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -85,11 +85,11 @@
|
||||
"packages/ui/components/Sidebar.wrn": "03f1bbce75ca6d50ed940e62df39c539610e89eadd2064fe24abc7d5470f98bf",
|
||||
"packages/ui/components/SplitHero.wrn": "70e843565ff869bcf413b11b6d9830b2e2bd229863a00904596f71e2dff0e76d",
|
||||
"packages/ui/components/StatsBar.wrn": "c7d1df3895f25b6d3a2e1012a18b97592c7f33e65418b880d486f20c2d490686",
|
||||
"packages/ui/components/Stepper.wrn": "09f216a44f888421091bd1bce760a076927500a573550d5b2b10c4f27f608e92",
|
||||
"packages/ui/components/Stepper.wrn": "df9093e4222ef3250963a8c6fbfec74477242735d23eabe896c29731c54fc14d",
|
||||
"packages/ui/components/StrongPassword.wrn": "c7c5ef26ece6170dd7db9882f0dc98cb2e4607f1e5d43eb3fd39e5d15bbd3a2e",
|
||||
"packages/ui/components/StyledIcon.wrn": "4a4504e357dee9dd0418edbe85fc90b824ccdb3752123a2125da95b77bf0b336",
|
||||
"packages/ui/components/Switch.wrn": "ccb74599fab72b0d68b09a7f1f90b7732cb2f9cbed67a84219e897575ce30c28",
|
||||
"packages/ui/components/Tabs.wrn": "4fa0c0854700532960043290700d7cf99663ec41692068101f0aae4c2b1a1181",
|
||||
"packages/ui/components/Tabs.wrn": "e38336d28876caa4e97da32a569749e3803b030284a85ce9f35fa788e51cc5b0",
|
||||
"packages/ui/components/TextLink.wrn": "30782039293eb36d63b7b3a4f32a71a47177a3a68c7e90184be7cf7b4385eb19",
|
||||
"packages/ui/components/Textarea.wrn": "ddf0b4f124b2cf0c0ab3d820d3ac0085f7c20466e977231949be264cd0cee8cf",
|
||||
"packages/ui/components/TimePicker.wrn": "2e8e7a90f6b6069a07e7ffd2725ba1e1031e84d55a4f1254025befbb314fa695",
|
||||
|
||||
@@ -8,6 +8,14 @@ page StepperDetail {
|
||||
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||
state playground_clickable = (ctx.url.searchParams.get("pg_clickable") ?? "false") === "true"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Stepper"
|
||||
state playground_showPanel = (ctx.url.searchParams.get("pg_showPanel") ?? "true") === "true"
|
||||
state playground_controls = (ctx.url.searchParams.get("pg_controls") ?? "false") === "true"
|
||||
state playground_allowSkip = (ctx.url.searchParams.get("pg_allowSkip") ?? "false") === "true"
|
||||
state playground_nextDisabled = (ctx.url.searchParams.get("pg_nextDisabled") ?? "false") === "true"
|
||||
state playground_backLabel = ctx.url.searchParams.get("pg_backLabel") ?? "Stepper"
|
||||
state playground_nextLabel = ctx.url.searchParams.get("pg_nextLabel") ?? "Stepper"
|
||||
state playground_skipLabel = ctx.url.searchParams.get("pg_skipLabel") ?? "Stepper"
|
||||
state playground_finishLabel = ctx.url.searchParams.get("pg_finishLabel") ?? "Stepper"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Stepper"
|
||||
@@ -22,16 +30,16 @@ page StepperDetail {
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Stepper</h1>
|
||||
<p>Theme-aware, responsive stepper component.</p>
|
||||
<div class="detail-badges"><span>8 props</span><span>2 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>16 props</span><span>3 slots</span><span>5 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="Stepper" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change">
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Stepper" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change,back,next,skip,finish">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Stepper</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><Stepper color='{playground_color}' size='{playground_size}' steps='{playground_steps}' active='{playground_active}' orientation='{playground_orientation}' clickable='{playground_clickable}' label='{playground_label}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Stepper color='{playground_color}' size='{playground_size}' steps='{playground_steps}' active='{playground_active}' orientation='{playground_orientation}' clickable='{playground_clickable}' label='{playground_label}' showPanel='{playground_showPanel}' controls='{playground_controls}' allowSkip='{playground_allowSkip}' nextDisabled='{playground_nextDisabled}' backLabel='{playground_backLabel}' nextLabel='{playground_nextLabel}' skipLabel='{playground_skipLabel}' finishLabel='{playground_finishLabel}' 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><Stepper
|
||||
@@ -143,17 +151,25 @@ page StepperDetail {
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
label="Stepper">
|
||||
label="Stepper"
|
||||
showPanel="true"
|
||||
backLabel="Stepper"
|
||||
nextLabel="Stepper"
|
||||
skipLabel="Stepper"
|
||||
finishLabel="Stepper">
|
||||
<div data-slot="step-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
<div data-slot="panel-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">panel-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
</Stepper></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>8 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>16 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-stepper-color"><span><strong>color</strong><small>string</small></span><select id="playground-stepper-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-stepper-size"><span><strong>size</strong><small>string</small></span><select id="playground-stepper-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-stepper-steps"><span><strong>steps</strong><small>unknown[]</small></span><textarea id="playground-stepper-steps" name="pg_steps" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "stepper-0-1",
|
||||
@@ -261,7 +277,7 @@ page StepperDetail {
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-stepper-active"><span><strong>active</strong><small>number</small></span><input id="playground-stepper-active" name="pg_active" type="number" value="0" /></label><label class="playground-field" for="playground-stepper-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-stepper-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-stepper-clickable"><span><strong>clickable</strong><small>boolean</small></span><input id="playground-stepper-clickable" name="pg_clickable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stepper-label"><span><strong>label</strong><small>string</small></span><input id="playground-stepper-label" name="pg_label" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-class"><span><strong>class</strong><small>string</small></span><input id="playground-stepper-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-stepper-active"><span><strong>active</strong><small>number</small></span><input id="playground-stepper-active" name="pg_active" type="number" value="0" /></label><label class="playground-field" for="playground-stepper-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-stepper-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-stepper-clickable"><span><strong>clickable</strong><small>boolean</small></span><input id="playground-stepper-clickable" name="pg_clickable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stepper-label"><span><strong>label</strong><small>string</small></span><input id="playground-stepper-label" name="pg_label" type="text" value="Stepper" /></label><label class="playground-toggle" for="playground-stepper-showPanel"><span><strong>show Panel</strong><small>boolean</small></span><input id="playground-stepper-showPanel" name="pg_showPanel" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stepper-controls"><span><strong>controls</strong><small>boolean</small></span><input id="playground-stepper-controls" name="pg_controls" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stepper-allowSkip"><span><strong>allow Skip</strong><small>boolean</small></span><input id="playground-stepper-allowSkip" name="pg_allowSkip" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stepper-nextDisabled"><span><strong>next Disabled</strong><small>boolean</small></span><input id="playground-stepper-nextDisabled" name="pg_nextDisabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stepper-backLabel"><span><strong>back Label</strong><small>string</small></span><input id="playground-stepper-backLabel" name="pg_backLabel" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-nextLabel"><span><strong>next Label</strong><small>string</small></span><input id="playground-stepper-nextLabel" name="pg_nextLabel" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-skipLabel"><span><strong>skip Label</strong><small>string</small></span><input id="playground-stepper-skipLabel" name="pg_skipLabel" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-finishLabel"><span><strong>finish Label</strong><small>string</small></span><input id="playground-stepper-finishLabel" name="pg_finishLabel" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-class"><span><strong>class</strong><small>string</small></span><input id="playground-stepper-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -277,7 +293,7 @@ page StepperDetail {
|
||||
<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" clickable="false" label="Stepper" class="showcase-instance showcase-instance--1" /></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" 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">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -301,6 +317,9 @@ page StepperDetail {
|
||||
<div data-slot="step-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
<div data-slot="panel-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">panel-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
</Stepper></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -314,7 +333,7 @@ page StepperDetail {
|
||||
<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" orientation="vertical" clickable="false" label="Compact example" class="showcase-instance showcase-instance--2" /></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" 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">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -340,6 +359,97 @@ page StepperDetail {
|
||||
<div data-slot="step-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
<div data-slot="panel-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">panel-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
</Stepper></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Wizard with content and controls</h2><p>showPanel renders each step body and shows only the active one, the same contract Tabs uses. controls adds Back, Skip and Next, which becomes Finish on the last step. nextDisabled is how a form holds the step: the component never validates anything itself, so the page sets it while the step is incomplete and clears it once the step passes.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<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, plus a billing address."},{"label":"Confirm","title":"Review","content":"Check everything before submitting."}]' active="1" 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">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Stepper
|
||||
size="lg"
|
||||
steps='[
|
||||
<span>{</span>
|
||||
"label": "Account",
|
||||
"title": "Your details",
|
||||
"content": "Name, email and a password."
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Billing",
|
||||
"title": "How you pay",
|
||||
"content": "Card or invoice, plus a billing address."
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Confirm",
|
||||
"title": "Review",
|
||||
"content": "Check everything before submitting."
|
||||
<span>}</span>
|
||||
]'
|
||||
active="1"
|
||||
label="Advanced example"
|
||||
showPanel="true"
|
||||
controls="true"
|
||||
allowSkip="true">
|
||||
<div data-slot="step-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
<div data-slot="panel-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">panel-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
</Stepper></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Held until the step is valid</h2><p>The same wizard with nextDisabled set. Next stays held, so a form can keep the reader on the step until it validates.</p></div>
|
||||
<span class="demo-case-number">04</span>
|
||||
</header>
|
||||
<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 has not been completed yet."},{"label":"Billing","title":"How you pay","content":"Card or invoice."}]' active="0" 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">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Stepper
|
||||
size="lg"
|
||||
steps='[
|
||||
<span>{</span>
|
||||
"label": "Account",
|
||||
"title": "Your details",
|
||||
"content": "This step has not been completed yet."
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Billing",
|
||||
"title": "How you pay",
|
||||
"content": "Card or invoice."
|
||||
<span>}</span>
|
||||
]'
|
||||
label="Advanced example"
|
||||
showPanel="true"
|
||||
controls="true"
|
||||
nextDisabled="true">
|
||||
<div data-slot="step-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
<div data-slot="panel-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">panel-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
</Stepper></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -347,13 +457,13 @@ page StepperDetail {
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Clickable steps</h2><p>With clickable the steps emit a change output and take arrow-key roving focus. Without it the stepper is read-only and stays out of the tab order.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
<span class="demo-case-number">05</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<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" clickable="true" label="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
<div class="demo-render"><Stepper size="lg" steps='[{"label":"One"},{"label":"Two"},{"label":"Three"}]' active="0" 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">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -375,23 +485,46 @@ page StepperDetail {
|
||||
<div data-slot="step-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
<div data-slot="panel-<span>{</span>index<span>}</span>">
|
||||
<div class="showcase-slot">panel-<span>{</span>index<span>}</span> slot</div>
|
||||
</div>
|
||||
</Stepper></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>@change</code><span>Fires when the component's committed value or selection changes.</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><Stepper
|
||||
<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>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@back</code><span>Fires when the component emits the back event.</span></div><div><code>@next</code><span>Fires when the component emits the next event.</span></div><div><code>@skip</code><span>Fires when the component emits the skip event.</span></div><div><code>@finish</code><span>Fires when the component emits the finish 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><Stepper
|
||||
@change='console.log(payload)'
|
||||
@back='console.log(payload)'
|
||||
@next='console.log(payload)'
|
||||
@skip='console.log(payload)'
|
||||
@finish='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=\"Stepper\"], [data-component=\"Stepper\"]")
|
||||
|
||||
if (component) registerOutputHandler(component, "change", (payload) => <span>{</span>
|
||||
console.log("change", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "back", (payload) => <span>{</span>
|
||||
console.log("back", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "next", (payload) => <span>{</span>
|
||||
console.log("next", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "skip", (payload) => <span>{</span>
|
||||
console.log("skip", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "finish", (payload) => <span>{</span>
|
||||
console.log("finish", 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>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>steps</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>number</td><td><code>0</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>clickable</code></td><td>boolean</td><td><code>false</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>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>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>steps</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>number</td><td><code>0</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>clickable</code></td><td>boolean</td><td><code>false</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>showPanel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controls</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>allowSkip</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>nextDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>backLabel</code></td><td>string</td><td><code>"Back"</code></td><td>No</td></tr><tr><td><code>nextLabel</code></td><td>string</td><td><code>"Next"</code></td><td>No</td></tr><tr><td><code>skipLabel</code></td><td>string</td><td><code>"Skip"</code></td><td>No</td></tr><tr><td><code>finishLabel</code></td><td>string</td><td><code>"Finish"</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="#stepper-demo-1">Horizontal progress</a><a href="#stepper-demo-2">Vertical with icons</a><a href="#stepper-demo-3">Clickable steps</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="#stepper-demo-1">Horizontal progress</a><a href="#stepper-demo-2">Vertical with icons</a><a href="#stepper-demo-3">Wizard with content and controls</a><a href="#stepper-demo-4">Held until the step is valid</a><a href="#stepper-demo-5">Clickable steps</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -17,11 +17,11 @@ page ComponentShowcase {
|
||||
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>108 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="/block-library">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>108</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>419</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>421</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
|
||||
<div class="showcase-stat"><strong>11</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>8 components · 112 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="/core"><span class="home-category-index">03</span><div><strong>Core</strong><p>5 components · 13 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="/data"><span class="home-category-index">04</span><div><strong>Data</strong><p>3 components · 9 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="/forms"><span class="home-category-index">05</span><div><strong>Forms</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--2" href="/integrations"><span class="home-category-index">06</span><div><strong>Integrations</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--3" href="/layout"><span class="home-category-index">07</span><div><strong>Layout</strong><p>15 components · 45 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="/marketing"><span class="home-category-index">08</span><div><strong>Marketing</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--1" href="/navigation"><span class="home-category-index">09</span><div><strong>Navigation</strong><p>10 components · 28 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="/overlays"><span class="home-category-index">010</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--3" href="/tables"><span class="home-category-index">011</span><div><strong>Tables</strong><p>1 components · 9 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>8 components · 112 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="/core"><span class="home-category-index">03</span><div><strong>Core</strong><p>5 components · 13 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="/data"><span class="home-category-index">04</span><div><strong>Data</strong><p>3 components · 9 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="/forms"><span class="home-category-index">05</span><div><strong>Forms</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--2" href="/integrations"><span class="home-category-index">06</span><div><strong>Integrations</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--3" href="/layout"><span class="home-category-index">07</span><div><strong>Layout</strong><p>15 components · 45 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="/marketing"><span class="home-category-index">08</span><div><strong>Marketing</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--1" href="/navigation"><span class="home-category-index">09</span><div><strong>Navigation</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="/overlays"><span class="home-category-index">010</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--3" href="/tables"><span class="home-category-index">011</span><div><strong>Tables</strong><p>1 components · 9 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ page NavigationShowcase {
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Navigation</h1>
|
||||
<p class="showcase-description">10 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>10 components</span><span>Multiple use cases</span><span>28 live configurations</span></div>
|
||||
<div class="category-meta"><span>10 components</span><span>Multiple use cases</span><span>30 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
@@ -96,11 +96,11 @@ page NavigationShowcase {
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><Stepper size="default" steps='[{"label":"Account","description":"Your details"},{"label":"Billing","description":"Payment method"},{"label":"Confirm","description":"Review and submit"}]' active="1" clickable="false" label="Stepper" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="catalog-card-stage"><Stepper size="default" steps='[{"label":"Account","description":"Your details"},{"label":"Billing","description":"Payment method"},{"label":"Confirm","description":"Review and submit"}]' active="1" 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>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Stepper</h2><p>Theme-aware, responsive stepper component.</p></div>
|
||||
<div class="catalog-card-footer"><span>8 props · 2 slots</span><a href="/components/stepper">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>16 props · 3 slots</span><a href="/components/stepper">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
|
||||
@@ -558,6 +558,15 @@ export const componentProfiles = {
|
||||
{ label: "Confirm", description: "Review and submit" },
|
||||
],
|
||||
active: 1,
|
||||
clickable: false,
|
||||
showPanel: false,
|
||||
controls: false,
|
||||
allowSkip: false,
|
||||
nextDisabled: false,
|
||||
backLabel: "Back",
|
||||
nextLabel: "Next",
|
||||
skipLabel: "Skip",
|
||||
finishLabel: "Finish",
|
||||
},
|
||||
),
|
||||
standard(
|
||||
@@ -571,6 +580,56 @@ export const componentProfiles = {
|
||||
],
|
||||
active: 2,
|
||||
orientation: "vertical",
|
||||
clickable: false,
|
||||
showPanel: false,
|
||||
controls: false,
|
||||
allowSkip: false,
|
||||
nextDisabled: false,
|
||||
backLabel: "Back",
|
||||
nextLabel: "Next",
|
||||
skipLabel: "Skip",
|
||||
finishLabel: "Finish",
|
||||
},
|
||||
),
|
||||
advanced(
|
||||
"Wizard with content and controls",
|
||||
"showPanel renders each step body and shows only the active one, the same contract Tabs uses. controls adds Back, Skip and Next, which becomes Finish on the last step.",
|
||||
{
|
||||
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,
|
||||
clickable: false,
|
||||
showPanel: true,
|
||||
controls: true,
|
||||
allowSkip: true,
|
||||
nextDisabled: false,
|
||||
backLabel: "Back",
|
||||
nextLabel: "Next",
|
||||
skipLabel: "Skip",
|
||||
finishLabel: "Finish",
|
||||
},
|
||||
),
|
||||
advanced(
|
||||
"Held until the step is valid",
|
||||
"The same wizard with nextDisabled set. The component never validates anything itself: the page owns the form, sets this while the step is incomplete, and clears it once the step passes.",
|
||||
{
|
||||
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,
|
||||
clickable: false,
|
||||
showPanel: true,
|
||||
controls: true,
|
||||
allowSkip: false,
|
||||
nextDisabled: true,
|
||||
backLabel: "Back",
|
||||
nextLabel: "Next",
|
||||
skipLabel: "Skip",
|
||||
finishLabel: "Finish",
|
||||
},
|
||||
),
|
||||
advanced(
|
||||
@@ -580,6 +639,14 @@ export const componentProfiles = {
|
||||
steps: [{ label: "One" }, { label: "Two" }, { label: "Three" }],
|
||||
active: 0,
|
||||
clickable: true,
|
||||
showPanel: false,
|
||||
controls: false,
|
||||
allowSkip: false,
|
||||
nextDisabled: false,
|
||||
backLabel: "Back",
|
||||
nextLabel: "Next",
|
||||
skipLabel: "Skip",
|
||||
finishLabel: "Finish",
|
||||
},
|
||||
),
|
||||
],
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"generatedFrom": "packages/ui/component-reference.json",
|
||||
"componentCount": 108,
|
||||
"categoryCount": 11,
|
||||
"totalDemoCount": 419,
|
||||
"totalDemoCount": 421,
|
||||
"components": [
|
||||
{
|
||||
"name": "Accordion",
|
||||
@@ -1110,10 +1110,10 @@
|
||||
"slug": "stepper",
|
||||
"category": "navigation",
|
||||
"purpose": "Theme-aware, responsive stepper component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 8,
|
||||
"slots": ["step-{index}", "default"],
|
||||
"events": ["change"],
|
||||
"demoCount": 5,
|
||||
"propCount": 16,
|
||||
"slots": ["step-{index}", "panel-{index}", "default"],
|
||||
"events": ["change", "back", "next", "skip", "finish"],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
|
||||
@@ -2953,6 +2953,15 @@ export const REACTIVE_RUNTIME = String.raw`
|
||||
if (!dialog || !dialog.isConnected) return false;
|
||||
if (dialog.hasAttribute("hidden")) return false;
|
||||
if (dialog.closest('[data-show="false"]')) return false;
|
||||
/*
|
||||
* data-open is the signal Modal and Drawer actually publish, and it is the
|
||||
* only one Drawer can publish: its panel animates open, so it cannot be
|
||||
* toggled with data-show, which sets display:none. Treating every dialog
|
||||
* without a data-show="false" ancestor as open meant a closed Drawer held
|
||||
* the body scroll lock forever and the page could not be scrolled.
|
||||
*/
|
||||
var owner = dialog.closest("[data-open]");
|
||||
if (owner) return owner.getAttribute("data-open") === "true";
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
@@ -1067,3 +1067,46 @@ test("json inside a textarea is left alone, not read as mustaches", () => {
|
||||
// evaluated {"id":"a-1","count":3} away and left it empty.
|
||||
expect(doc.querySelector("#editor")!.textContent).toBe('{"id":"a-1","count":3}');
|
||||
});
|
||||
|
||||
test("a closed drawer does not hold the body scroll lock", () => {
|
||||
const win = mount(
|
||||
`<div data-ui-component="Drawer" data-open="false">
|
||||
<div class="layer">
|
||||
<section role="dialog" aria-modal="true" tabindex="-1">
|
||||
<button id="inside">Inside</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>`,
|
||||
);
|
||||
const doc = win.document;
|
||||
/*
|
||||
* A drawer animates open, so its panel cannot be hidden with data-show --
|
||||
* display:none is not transitionable. It publishes data-open instead. Reading
|
||||
* only data-show made every closed drawer look open, which locked the body
|
||||
* and left the page unscrollable.
|
||||
*/
|
||||
expect(doc.body.style.overflow).not.toBe("hidden");
|
||||
|
||||
const outside = doc.querySelector("#inside") as unknown as HTMLElement;
|
||||
outside.focus();
|
||||
outside.dispatchEvent(keydown(win, "Tab"));
|
||||
// No trap either: focus is free to leave a closed dialog.
|
||||
expect(doc.activeElement!.id).toBe("inside");
|
||||
});
|
||||
|
||||
test("an open drawer locks the body scroll and traps Tab", () => {
|
||||
const win = mount(
|
||||
`<div data-ui-component="Drawer" data-open="true">
|
||||
<section role="dialog" aria-modal="true" tabindex="-1">
|
||||
<button id="first">First</button>
|
||||
<button id="last">Last</button>
|
||||
</section>
|
||||
</div>`,
|
||||
);
|
||||
const doc = win.document;
|
||||
expect(doc.body.style.overflow).toBe("hidden");
|
||||
const last = doc.querySelector("#last") as unknown as HTMLElement;
|
||||
last.focus();
|
||||
last.dispatchEvent(keydown(win, "Tab"));
|
||||
expect(doc.activeElement!.id).toBe("first");
|
||||
});
|
||||
|
||||
@@ -916,9 +916,9 @@ Theme-aware, responsive sidebar component.
|
||||
Theme-aware, responsive stepper component.
|
||||
|
||||
- Mount: `data-component="Stepper"`
|
||||
- Props: `color: string = "primary"`, `size: string = "default"`, `steps: unknown[] = []`, `active: number = 0`, `orientation: string = "horizontal"`, `clickable: boolean = false`, `label: string = "Progress"`, `class: string = ""`
|
||||
- Slots: `step-{index}`, `default`
|
||||
- Outputs: `change({ index: number; step: object })`
|
||||
- Props: `color: string = "primary"`, `size: string = "default"`, `steps: unknown[] = []`, `active: number = 0`, `orientation: string = "horizontal"`, `clickable: boolean = false`, `label: string = "Progress"`, `showPanel: boolean = false`, `controls: boolean = false`, `allowSkip: boolean = false`, `nextDisabled: boolean = false`, `backLabel: string = "Back"`, `nextLabel: string = "Next"`, `skipLabel: string = "Skip"`, `finishLabel: string = "Finish"`, `class: string = ""`
|
||||
- Slots: `step-{index}`, `panel-{index}`, `default`
|
||||
- Outputs: `change({ index: number; step: object })`, `back({ index: number; step: object })`, `next({ index: number; step: object })`, `skip({ index: number; step: object })`, `finish({ index: number; step: object })`
|
||||
|
||||
### Tabs
|
||||
|
||||
|
||||
@@ -11783,6 +11783,62 @@
|
||||
"default": "\"Progress\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "showPanel",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "controls",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "allowSkip",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "nextDisabled",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "backLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Back\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "nextLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Next\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "skipLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Skip\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "finishLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Finish\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
@@ -11791,14 +11847,30 @@
|
||||
"options": []
|
||||
}
|
||||
],
|
||||
"slots": ["step-{index}", "default"],
|
||||
"slots": ["step-{index}", "panel-{index}", "default"],
|
||||
"outputs": [
|
||||
{
|
||||
"name": "change",
|
||||
"payloadType": "{ index: number; step: object }"
|
||||
},
|
||||
{
|
||||
"name": "back",
|
||||
"payloadType": "{ index: number; step: object }"
|
||||
},
|
||||
{
|
||||
"name": "next",
|
||||
"payloadType": "{ index: number; step: object }"
|
||||
},
|
||||
{
|
||||
"name": "skip",
|
||||
"payloadType": "{ index: number; step: object }"
|
||||
},
|
||||
{
|
||||
"name": "finish",
|
||||
"payloadType": "{ index: number; step: object }"
|
||||
}
|
||||
],
|
||||
"events": ["change"],
|
||||
"events": ["change", "back", "next", "skip", "finish"],
|
||||
"source": "components/Stepper.wrn"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -14,6 +14,10 @@
|
||||
component Stepper {
|
||||
outputs {
|
||||
change(payload: { index: number; step: object })
|
||||
back(payload: { index: number; step: object })
|
||||
next(payload: { index: number; step: object })
|
||||
skip(payload: { index: number; step: object })
|
||||
finish(payload: { index: number; step: object })
|
||||
}
|
||||
|
||||
props {
|
||||
@@ -24,6 +28,19 @@ component Stepper {
|
||||
orientation: string = "horizontal"
|
||||
clickable: boolean = false
|
||||
label: string = "Progress"
|
||||
// Render each step body, showing only the active one -- same contract as
|
||||
// Tabs, so a wizard does not have to hand-roll the panel switching.
|
||||
showPanel: boolean = false
|
||||
controls: boolean = false
|
||||
allowSkip: boolean = false
|
||||
// Lets a form hold the step. The component never validates anything
|
||||
// itself: the page owns the form, so it sets this while the step is
|
||||
// incomplete and clears it once the step passes.
|
||||
nextDisabled: boolean = false
|
||||
backLabel: string = "Back"
|
||||
nextLabel: string = "Next"
|
||||
skipLabel: string = "Skip"
|
||||
finishLabel: string = "Finish"
|
||||
class: string = ""
|
||||
}
|
||||
|
||||
@@ -63,6 +80,48 @@ component Stepper {
|
||||
return orientation === "vertical" ? "vertical" : "horizontal"
|
||||
}
|
||||
|
||||
shared function isActiveStep(index) {
|
||||
return index === activeIndex()
|
||||
}
|
||||
|
||||
shared function lastIndex() {
|
||||
return Math.max(0, stepList().length - 1)
|
||||
}
|
||||
|
||||
shared function onLastStep() {
|
||||
return activeIndex() >= lastIndex()
|
||||
}
|
||||
|
||||
shared function activeStep() {
|
||||
var list = stepList()
|
||||
return list.length ? list[activeIndex()] : {}
|
||||
}
|
||||
|
||||
client function goBack() {
|
||||
var target = Math.max(0, activeIndex() - 1)
|
||||
output.back({ index: target, step: stepList()[target] || {} })
|
||||
output.change({ index: target, step: stepList()[target] || {} })
|
||||
}
|
||||
|
||||
client function goNext() {
|
||||
if (nextDisabled) {
|
||||
return
|
||||
}
|
||||
if (onLastStep()) {
|
||||
output.finish({ index: activeIndex(), step: activeStep() })
|
||||
return
|
||||
}
|
||||
var target = Math.min(lastIndex(), activeIndex() + 1)
|
||||
output.next({ index: target, step: stepList()[target] || {} })
|
||||
output.change({ index: target, step: stepList()[target] || {} })
|
||||
}
|
||||
|
||||
client function goSkip() {
|
||||
var target = Math.min(lastIndex(), activeIndex() + 1)
|
||||
output.skip({ index: target, step: stepList()[target] || {} })
|
||||
output.change({ index: target, step: stepList()[target] || {} })
|
||||
}
|
||||
|
||||
client function selectStep(index, step) {
|
||||
if (!clickable) {
|
||||
return
|
||||
@@ -72,7 +131,7 @@ component Stepper {
|
||||
}
|
||||
|
||||
view {
|
||||
<ol
|
||||
<div
|
||||
{...attrs}
|
||||
data-ui-component="Stepper"
|
||||
class='wire-stepper {class}'
|
||||
@@ -80,6 +139,9 @@ component Stepper {
|
||||
data-color='{color}'
|
||||
data-size='{size}'
|
||||
data-clickable='{clickable}'
|
||||
>
|
||||
<ol
|
||||
class="wire-stepper__list"
|
||||
data-wrn-roving='{rovingAxis()}'
|
||||
aria-label='{label}'
|
||||
>
|
||||
@@ -111,13 +173,62 @@ component Stepper {
|
||||
</span>
|
||||
</li>
|
||||
{/each}
|
||||
<slot />
|
||||
</ol>
|
||||
|
||||
<div class="wire-stepper__panels" data-show="showPanel">
|
||||
{#each stepList() as step, index}
|
||||
<div
|
||||
class="wire-stepper__panel"
|
||||
data-show='isActiveStep(index)'
|
||||
aria-hidden='{index === activeIndex() ? "false" : "true"}'
|
||||
>
|
||||
<h4 class="wire-stepper__panel-title" data-show="step.title">{step.title}</h4>
|
||||
<p class="wire-stepper__panel-body" data-show="step.content">{step.content}</p>
|
||||
<slot name="panel-{index}"></slot>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="wire-stepper__controls" data-show="controls">
|
||||
<button
|
||||
type="button"
|
||||
class="wire-stepper__button-control wire-stepper__back"
|
||||
disabled='{activeIndex() === 0}'
|
||||
@click='goBack()'
|
||||
>
|
||||
{backLabel}
|
||||
</button>
|
||||
<span class="wire-stepper__controls-spacer"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="wire-stepper__button-control wire-stepper__skip"
|
||||
data-show="allowSkip && !onLastStep()"
|
||||
@click='goSkip()'
|
||||
>
|
||||
{skipLabel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="wire-stepper__button-control wire-stepper__next"
|
||||
data-primary="true"
|
||||
disabled='{nextDisabled}'
|
||||
@click='goNext()'
|
||||
>
|
||||
{onLastStep() ? finishLabel : nextLabel}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-stepper {
|
||||
--stepper-accent: var(--wire-color-primary);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wire-stepper__list {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
@@ -150,7 +261,7 @@ component Stepper {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.wire-stepper[data-orientation="vertical"] {
|
||||
.wire-stepper[data-orientation="vertical"] .wire-stepper__list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -241,9 +352,89 @@ component Stepper {
|
||||
color: var(--wire-color-text-muted);
|
||||
}
|
||||
|
||||
.wire-stepper__panels {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.wire-stepper__panel {
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
animation: wire-stepper-in 200ms ease both;
|
||||
}
|
||||
|
||||
.wire-stepper__panel-title {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wire-stepper__panel-body {
|
||||
margin: 0;
|
||||
color: var(--wire-color-text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wire-stepper__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.85rem;
|
||||
}
|
||||
|
||||
.wire-stepper__controls-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.wire-stepper__button-control {
|
||||
appearance: none;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
font: inherit;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-stepper__button-control:hover:not(:disabled) {
|
||||
background: var(--wire-color-surface-soft);
|
||||
}
|
||||
|
||||
.wire-stepper__button-control:focus-visible {
|
||||
outline: 2px solid var(--stepper-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wire-stepper__button-control[data-primary="true"] {
|
||||
border-color: var(--stepper-accent);
|
||||
background: var(--stepper-accent);
|
||||
color: var(--wire-color-primary-contrast);
|
||||
}
|
||||
|
||||
/* A held step has to look held, or the button reads as broken. */
|
||||
.wire-stepper__button-control:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@keyframes wire-stepper-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(0.75rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* A horizontal stepper cannot stay side by side on a phone. */
|
||||
@media (max-width: 639px) {
|
||||
.wire-stepper {
|
||||
.wire-stepper__list {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,6 +28,9 @@ component Tabs {
|
||||
}
|
||||
|
||||
state activeValue = ""
|
||||
// Which way the panel should slide in. Set on every change so the animation
|
||||
// follows the direction of travel rather than always coming from one side.
|
||||
state slideFrom = "forward"
|
||||
|
||||
functions {
|
||||
shared function itemList() {
|
||||
@@ -80,6 +83,14 @@ component Tabs {
|
||||
return
|
||||
}
|
||||
var value = valueOf(item, index)
|
||||
var list = itemList()
|
||||
var previous = -1
|
||||
for (var scan = 0; scan < list.length; scan += 1) {
|
||||
if (valueOf(list[scan], scan) === currentValue()) {
|
||||
previous = scan
|
||||
}
|
||||
}
|
||||
slideFrom = previous > index ? "back" : "forward"
|
||||
activeValue = value
|
||||
|
||||
if (mode === "url" && window.history && window.history.pushState) {
|
||||
@@ -101,6 +112,7 @@ component Tabs {
|
||||
data-orientation='{orientation}'
|
||||
data-color='{color}'
|
||||
data-size='{size}'
|
||||
data-slide='{slideFrom}'
|
||||
data-mode='{mode}'
|
||||
data-param='{param}'
|
||||
>
|
||||
@@ -272,7 +284,16 @@ component Tabs {
|
||||
|
||||
.wire-tabs__panel {
|
||||
outline: none;
|
||||
animation: wire-tabs-in 200ms ease both;
|
||||
animation: wire-tabs-slide-forward 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.wire-tabs[data-slide="back"] .wire-tabs__panel {
|
||||
animation-name: wire-tabs-slide-back;
|
||||
}
|
||||
|
||||
/* The panels clip their own slide so it never widens the page. */
|
||||
.wire-tabs__panels {
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.wire-tabs__panel:focus-visible {
|
||||
@@ -297,10 +318,21 @@ component Tabs {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
@keyframes wire-tabs-in {
|
||||
@keyframes wire-tabs-slide-forward {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transform: translateX(1.25rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wire-tabs-slide-back {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-1.25rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
|
||||
@@ -2522,7 +2522,10 @@ test("stepper marks complete, current and upcoming steps", async () => {
|
||||
expect(items[1]!.getAttribute("data-status")).toBe("current");
|
||||
expect(items[2]!.getAttribute("data-status")).toBe("upcoming");
|
||||
expect(items[1]!.getAttribute("aria-current")).toBe("step");
|
||||
expect(dom.querySelector(".wire-stepper")!.tagName.toLowerCase()).toBe("ol");
|
||||
// One root wraps the list, the panels and the controls; the steps
|
||||
// themselves are still an ordered list, which is what carries the semantics.
|
||||
expect(dom.querySelector(".wire-stepper")!.tagName.toLowerCase()).toBe("div");
|
||||
expect(dom.querySelector(".wire-stepper__list")!.tagName.toLowerCase()).toBe("ol");
|
||||
});
|
||||
|
||||
test("stepper renders vertically and clamps an out-of-range active index", async () => {
|
||||
@@ -2887,3 +2890,57 @@ test("mega menu bridges the gap between its trigger and panel", async () => {
|
||||
expect(source).toContain(".wire-mega__panel::before");
|
||||
expect(source).toMatch(/\.wire-mega__panel::before \{[^}]*bottom: 100%/s);
|
||||
});
|
||||
|
||||
test("stepper shows only the active step content and offers back, next and skip", async () => {
|
||||
const source = readFileSync(uiComponentPath("Stepper"), "utf8");
|
||||
const html = await renderComponent(source, {
|
||||
steps: [
|
||||
{ label: "Account", content: "ACCOUNT BODY" },
|
||||
{ label: "Billing", content: "BILLING BODY" },
|
||||
{ label: "Confirm", content: "CONFIRM BODY" },
|
||||
],
|
||||
active: 1,
|
||||
showPanel: true,
|
||||
controls: true,
|
||||
allowSkip: true,
|
||||
});
|
||||
const dom = mountHtml(html);
|
||||
|
||||
const panels = [...dom.querySelectorAll(".wire-stepper__panel")];
|
||||
expect(panels).toHaveLength(3);
|
||||
/*
|
||||
* Asserted through aria-hidden rather than data-show. data-show is emitted
|
||||
* verbatim for the client runtime to evaluate, so its server-rendered value
|
||||
* is not a reliable statement about which step is showing; aria-hidden is
|
||||
* interpolated at render and says exactly that.
|
||||
*/
|
||||
expect(panels.map((p) => p.getAttribute("aria-hidden"))).toEqual(["true", "false", "true"]);
|
||||
|
||||
expect(dom.querySelector(".wire-stepper__back")).not.toBeNull();
|
||||
expect(dom.querySelector(".wire-stepper__next")).not.toBeNull();
|
||||
expect(dom.querySelector(".wire-stepper__skip")).not.toBeNull();
|
||||
});
|
||||
|
||||
test("stepper back is disabled on the first step and next becomes finish on the last", async () => {
|
||||
const source = readFileSync(uiComponentPath("Stepper"), "utf8");
|
||||
const steps = [{ label: "One" }, { label: "Two" }];
|
||||
|
||||
const first = mountHtml(await renderComponent(source, { steps, active: 0, controls: true }));
|
||||
expect(first.querySelector(".wire-stepper__back")!.getAttribute("disabled")).not.toBeNull();
|
||||
expect(first.querySelector(".wire-stepper__next")!.textContent).toContain("Next");
|
||||
|
||||
const last = mountHtml(await renderComponent(source, { steps, active: 1, controls: true }));
|
||||
expect(last.querySelector(".wire-stepper__next")!.textContent).toContain("Finish");
|
||||
});
|
||||
|
||||
test("stepper next can be gated so a form can hold it until the step validates", async () => {
|
||||
const source = readFileSync(uiComponentPath("Stepper"), "utf8");
|
||||
const html = await renderComponent(source, {
|
||||
steps: [{ label: "One" }, { label: "Two" }],
|
||||
active: 0,
|
||||
controls: true,
|
||||
nextDisabled: true,
|
||||
});
|
||||
const dom = mountHtml(html);
|
||||
expect(dom.querySelector(".wire-stepper__next")!.getAttribute("disabled")).not.toBeNull();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user