feat(ui): build LayoutSplitter and CustomScrollbar for real
Both advertised behaviour they did not have. LayoutSplitter declared resizeStart, resize and resizeEnd with no pointer handling whatsoever, so a caller wired up @resize and received nothing, for ever, with no error, and its props were columns, gap and maxWidth copied from a grid scaffold. CustomScrollbar was the same shape with a scroll output. The splitter now resizes. Dragging lives in the reactive runtime behind data-wrn-splitter, because a pointermove fires far too often to route through a client function and a state write made in that callback is dropped; the resolved size is held on the container as a --wrn-split custom property and the component grids from it. The handle is a real separator: arrow keys step it, Home and End go to the bounds rather than to nothing, and it carries aria-valuenow, aria-valuemin and aria-valuemax. minSize fixes both bounds so neither pane can be dragged away and left unrecoverable. CustomScrollbar is CSS rather than script -- scrollbar-width and scrollbar-color with webkit rules for the engines that still need them -- and its fake scroll output is removed rather than left unimplemented, since a caller can listen for a plain scroll event. The test harness needed a fix too: mount did not bind the window CustomEvent, so the runtime built events from the host global and happy-dom listeners never matched them, which made anything dispatched look silently lost. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -29,7 +29,7 @@
|
||||
"packages/ui/components/Container.wrn": "be8fce140043eced8b78c8dd14ff85ace4ed2d91671251641ef83e0fe4da8f2a",
|
||||
"packages/ui/components/ContextMenu.wrn": "2e011e9cb1c09a3a2344ed3fa29dcc74331cd39f838535d8aee4b249dceef0ce",
|
||||
"packages/ui/components/CopyMarkup.wrn": "8d57a7d72e02c126f855a181fc36e1b969edb90f683dce6b6ffe546d49d2b29b",
|
||||
"packages/ui/components/CustomScrollbar.wrn": "4c1f7758b9cd47e20ecf922403e12b5b15b8127a2744383c6bd280ee20e5fdd1",
|
||||
"packages/ui/components/CustomScrollbar.wrn": "fedb2ab06cc2cf9499c130590945ca6971a3edfb60407b6658ef7756e4be9823",
|
||||
"packages/ui/components/DataMap.wrn": "65552d73ecd1a148427dbb10d611f9352ca36bd490f595ab1e1a47e173445ba1",
|
||||
"packages/ui/components/DataTable.wrn": "5a76e50e8559c724aaf01ec954958ac640c99758d44f1eef8e6eb1cb6dc4f862",
|
||||
"packages/ui/components/DatePicker.wrn": "18b07e59c27c2720bf960e9c04ad70d9e422ddcf0817fede74e71899811bb387",
|
||||
@@ -53,7 +53,7 @@
|
||||
"packages/ui/components/InputGroup.wrn": "0e23ea541a60e893c9d9e6f95113911ee459468d8d6105bf03aeb55395359123",
|
||||
"packages/ui/components/InputNumber.wrn": "a0aa4f4566bf54ffbef54c99648eab05b5f9870be6ea07639a4ecf3930afb631",
|
||||
"packages/ui/components/Kbd.wrn": "d51fa614b36f971f885410785b481c2e6900b2416e6e7c8868dfda1ebd5f3b4c",
|
||||
"packages/ui/components/LayoutSplitter.wrn": "dac5a80acb76bf58dfd25233c68190c67d1aa1b3b0d4250a0957ea40912cf722",
|
||||
"packages/ui/components/LayoutSplitter.wrn": "a86dc54b74aed6b05e770cd1802960d6309bba42fe80e899e8aaa8b1b7aa88e3",
|
||||
"packages/ui/components/LegendIndicator.wrn": "6a7607b27a17196f899132eb952203a1073e4077365a94935f485e700cbac665",
|
||||
"packages/ui/components/Link.wrn": "935ac24e8ebd067860dc9709ea9121710315ad6e02ce95cd5e982ae4d5978a02",
|
||||
"packages/ui/components/List.wrn": "02f960a8e82fa049aac477bac9c1d9371394c86d9c47513138f61bffc79dc7d8",
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page CustomScrollbarDetail {
|
||||
layout = "showcase"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
|
||||
state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
|
||||
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_axis = ctx.url.searchParams.get("pg_axis") ?? "vertical"
|
||||
state playground_thickness = Number(ctx.url.searchParams.get("pg_thickness") ?? "8")
|
||||
state playground_maxHeight = ctx.url.searchParams.get("pg_maxHeight") ?? "20rem"
|
||||
state playground_radius = ctx.url.searchParams.get("pg_radius") ?? "999px"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Custom Scrollbar"
|
||||
@@ -20,26 +21,26 @@ page CustomScrollbarDetail {
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Custom Scrollbar</h1>
|
||||
<p>Theme-aware, responsive custom scrollbar component.</p>
|
||||
<div class="detail-badges"><span>6 props</span><span>1 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 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="CustomScrollbar" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="scroll">
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="CustomScrollbar" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Custom Scrollbar</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><CustomScrollbar size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><CustomScrollbar color='{playground_color}' size='{playground_size}' axis='{playground_axis}' thickness='{playground_thickness}' maxHeight='{playground_maxHeight}' radius='{playground_radius}' class='{playground_class}'><div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div></CustomScrollbar></div>
|
||||
<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><CustomScrollbar /></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>6 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-custom-scrollbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-custom-scrollbar-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-custom-scrollbar-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-custom-scrollbar-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-custom-scrollbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-custom-scrollbar-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-custom-scrollbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-custom-scrollbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-custom-scrollbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-axis"><span><strong>axis</strong><small>string</small></span><input id="playground-custom-scrollbar-axis" name="pg_axis" type="text" value="vertical" /></label><label class="playground-field" for="playground-custom-scrollbar-thickness"><span><strong>thickness</strong><small>number</small></span><input id="playground-custom-scrollbar-thickness" name="pg_thickness" type="number" value="8" /></label><label class="playground-field" for="playground-custom-scrollbar-maxHeight"><span><strong>max Height</strong><small>string</small></span><input id="playground-custom-scrollbar-maxHeight" name="pg_maxHeight" type="text" value="20rem" /></label><label class="playground-field" for="playground-custom-scrollbar-radius"><span><strong>radius</strong><small>string</small></span><input id="playground-custom-scrollbar-radius" name="pg_radius" type="text" value="999px" /></label><label class="playground-field" for="playground-custom-scrollbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-custom-scrollbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -48,72 +49,54 @@ page CustomScrollbarDetail {
|
||||
<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">Recommended</span><h2>Themed scrolling region</h2><p>Scrollbar appearance is CSS rather than script: scrollbar-width and scrollbar-color are the standard properties, with webkit rules for the engines that still need them. The thumb follows the component colour.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><CustomScrollbar size="default" columns="2" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><CustomScrollbar size="default" axis="vertical" thickness="8" maxHeight="14rem" radius="999px" class="showcase-instance showcase-instance--1"><div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<section class="demo-code" aria-label="Themed scrolling region usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><CustomScrollbar /></code></pre>
|
||||
<pre><code><CustomScrollbar
|
||||
maxHeight="14rem">
|
||||
<div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div>
|
||||
</CustomScrollbar></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Horizontal, thicker track</h2><p>A horizontal region with a heavier track. thickness is clamped, since it arrives as an attribute and a scrollbar wider than its content helps nobody.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><CustomScrollbar size="sm" columns="2" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><CustomScrollbar color="info" size="sm" axis="horizontal" thickness="14" maxHeight="8rem" radius="4px" class="showcase-instance showcase-instance--2"><div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<section class="demo-code" aria-label="Horizontal, thicker track usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><CustomScrollbar
|
||||
color="info"
|
||||
size="sm"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-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"><CustomScrollbar size="lg" columns="2" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><CustomScrollbar
|
||||
size="lg"
|
||||
/></code></pre>
|
||||
axis="horizontal"
|
||||
thickness="14"
|
||||
maxHeight="8rem"
|
||||
radius="4px">
|
||||
<div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div>
|
||||
</CustomScrollbar></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>@scroll</code><span>Fires when the component emits the scroll 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><CustomScrollbar
|
||||
@scroll='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=\"CustomScrollbar\"], [data-component=\"CustomScrollbar\"]")
|
||||
|
||||
if (component) registerOutputHandler(component, "scroll", (payload) => <span>{</span>
|
||||
console.log("scroll", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>axis</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>thickness</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>maxHeight</code></td><td>string</td><td><code>"20rem"</code></td><td>No</td></tr><tr><td><code>radius</code></td><td>string</td><td><code>"999px"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#custom-scrollbar-demo-1">Production default</a><a href="#custom-scrollbar-demo-2">Compact application</a><a href="#custom-scrollbar-demo-3">Rich configuration</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="#custom-scrollbar-demo-1">Themed scrolling region</a><a href="#custom-scrollbar-demo-2">Horizontal, thicker track</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page LayoutSplitterDetail {
|
||||
layout = "showcase"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
|
||||
state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
|
||||
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
|
||||
state playground_size = Number(ctx.url.searchParams.get("pg_size") ?? "50")
|
||||
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||
state playground_minSize = Number(ctx.url.searchParams.get("pg_minSize") ?? "15")
|
||||
state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "5")
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Layout Splitter"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Layout Splitter"
|
||||
@@ -20,26 +21,34 @@ page LayoutSplitterDetail {
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Layout Splitter</h1>
|
||||
<p>Theme-aware, responsive layout splitter component.</p>
|
||||
<div class="detail-badges"><span>6 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>3 slots</span><span>1 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="LayoutSplitter" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="resizeStart,resize,resizeEnd">
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="LayoutSplitter" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="resize">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Layout Splitter</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><LayoutSplitter size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><LayoutSplitter color='{playground_color}' size='{playground_size}' orientation='{playground_orientation}' minSize='{playground_minSize}' step='{playground_step}' label='{playground_label}' 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><LayoutSplitter /></code></pre>
|
||||
<pre><code data-playground-code><LayoutSplitter
|
||||
label="Layout Splitter">
|
||||
<div data-slot="start">
|
||||
<div class="showcase-slot">start slot</div>
|
||||
</div>
|
||||
<div data-slot="end">
|
||||
<div class="showcase-slot">end slot</div>
|
||||
</div>
|
||||
</LayoutSplitter></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>6 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-layout-splitter-size"><span><strong>size</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-color"><span><strong>color</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-layout-splitter-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-layout-splitter-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-layout-splitter-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-layout-splitter-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-layout-splitter-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-layout-splitter-class"><span><strong>class</strong><small>string</small></span><input id="playground-layout-splitter-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-layout-splitter-color"><span><strong>color</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-size"><span><strong>size</strong><small>number</small></span><input id="playground-layout-splitter-size" name="pg_size" type="number" value="50" /></label><label class="playground-field" for="playground-layout-splitter-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-layout-splitter-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-layout-splitter-minSize"><span><strong>min Size</strong><small>number</small></span><input id="playground-layout-splitter-minSize" name="pg_minSize" type="number" value="15" /></label><label class="playground-field" for="playground-layout-splitter-step"><span><strong>step</strong><small>number</small></span><input id="playground-layout-splitter-step" name="pg_step" type="number" value="5" /></label><label class="playground-field" for="playground-layout-splitter-label"><span><strong>label</strong><small>string</small></span><input id="playground-layout-splitter-label" name="pg_label" type="text" value="Layout Splitter" /></label><label class="playground-field" for="playground-layout-splitter-class"><span><strong>class</strong><small>string</small></span><input id="playground-layout-splitter-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -48,82 +57,72 @@ page LayoutSplitterDetail {
|
||||
<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">Recommended</span><h2>Drag or arrow the divider</h2><p>Two panes with a movable divider. Drag it, or focus it and use the arrow keys; Home and End go to the bounds. The size is resolved in the runtime and written onto the container as a custom property, because a pointermove fires far too often to route through a client function.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><LayoutSplitter size="default" columns="2" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<section class="demo-code" aria-label="Drag or arrow the divider usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><LayoutSplitter /></code></pre>
|
||||
<pre><code><LayoutSplitter
|
||||
size="40"
|
||||
minSize="20">
|
||||
<div data-slot="start">
|
||||
<div class="showcase-slot">start slot</div>
|
||||
</div>
|
||||
<div data-slot="end">
|
||||
<div class="showcase-slot">end slot</div>
|
||||
</div>
|
||||
</LayoutSplitter></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Stacked panes</h2><p>Vertical orientation splits top from bottom and switches the arrow keys to up and down. Below the small breakpoint both orientations stack, because two panes side by side stop making sense on a phone.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><LayoutSplitter size="sm" columns="2" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><LayoutSplitter size="60" orientation="vertical" minSize="25" step="10" label="Resize rows" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<section class="demo-code" aria-label="Stacked panes usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><LayoutSplitter
|
||||
size="sm"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-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"><LayoutSplitter size="lg" columns="2" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><LayoutSplitter
|
||||
size="lg"
|
||||
/></code></pre>
|
||||
size="60"
|
||||
orientation="vertical"
|
||||
minSize="25"
|
||||
step="10"
|
||||
label="Resize rows">
|
||||
<div data-slot="start">
|
||||
<div class="showcase-slot">start slot</div>
|
||||
</div>
|
||||
<div data-slot="end">
|
||||
<div class="showcase-slot">end slot</div>
|
||||
</div>
|
||||
</LayoutSplitter></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>@resizeStart</code><span>Fires when the component emits the resizeStart event.</span></div><div><code>@resize</code><span>Fires when the component emits the resize event.</span></div><div><code>@resizeEnd</code><span>Fires when the component emits the resizeEnd 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><LayoutSplitter
|
||||
@resizeStart='console.log(payload)'
|
||||
<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>@resize</code><span>Fires when the component emits the resize 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><LayoutSplitter
|
||||
@resize='console.log(payload)'
|
||||
@resizeEnd='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=\"LayoutSplitter\"], [data-component=\"LayoutSplitter\"]")
|
||||
|
||||
if (component) registerOutputHandler(component, "resizeStart", (payload) => <span>{</span>
|
||||
console.log("resizeStart", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "resize", (payload) => <span>{</span>
|
||||
console.log("resize", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "resizeEnd", (payload) => <span>{</span>
|
||||
console.log("resizeEnd", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<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>number</td><td><code>50</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>minSize</code></td><td>number</td><td><code>15</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>5</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Resize panels"</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="#layout-splitter-demo-1">Production default</a><a href="#layout-splitter-demo-2">Compact application</a><a href="#layout-splitter-demo-3">Rich configuration</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="#layout-splitter-demo-1">Drag or arrow the divider</a><a href="#layout-splitter-demo-2">Stacked panes</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>421</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>419</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 · 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>
|
||||
<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 · 43 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 LayoutShowcase {
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Layout</h1>
|
||||
<p class="showcase-description">15 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>15 components</span><span>Multiple use cases</span><span>45 live configurations</span></div>
|
||||
<div class="category-meta"><span>15 components</span><span>Multiple use cases</span><span>43 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
@@ -36,11 +36,11 @@ page LayoutShowcase {
|
||||
<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"><CustomScrollbar size="default" columns="2" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="catalog-card-stage"><CustomScrollbar size="default" axis="vertical" thickness="8" maxHeight="14rem" radius="999px" class="showcase-instance showcase-instance--1"><div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Custom Scrollbar</h2><p>Theme-aware, responsive custom scrollbar component.</p></div>
|
||||
<div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/custom-scrollbar">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/custom-scrollbar">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
@@ -106,11 +106,11 @@ page LayoutShowcase {
|
||||
<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"><LayoutSplitter size="default" columns="2" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="catalog-card-stage"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Layout Splitter</h2><p>Theme-aware, responsive layout splitter component.</p></div>
|
||||
<div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/layout-splitter">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 3 slots</span><a href="/components/layout-splitter">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
|
||||
@@ -2960,3 +2960,31 @@ body {
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/*
|
||||
* CustomScrollbar demo content. A scrolling region shows nothing at all unless
|
||||
* its content overflows, so the demo has to supply enough of it.
|
||||
*/
|
||||
.showcase-scroll-demo {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.showcase-scroll-demo p {
|
||||
margin: 0;
|
||||
color: var(--wire-color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.showcase-scroll-demo--wide {
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 9rem;
|
||||
}
|
||||
|
||||
.showcase-scroll-demo--wide span {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@@ -336,6 +336,40 @@ export const componentProfiles = {
|
||||
),
|
||||
],
|
||||
},
|
||||
LayoutSplitter: {
|
||||
demos: [
|
||||
standard(
|
||||
"Drag or arrow the divider",
|
||||
"Two panes with a movable divider. Drag it, or focus it and use the arrow keys; Home and End go to the bounds. The size is resolved in the runtime and written onto the container as a custom property, because a pointermove fires far too often to route through a client function.",
|
||||
{ size: 40, minSize: 20, step: 5, orientation: "horizontal", label: "Resize panels" },
|
||||
),
|
||||
advanced(
|
||||
"Stacked panes",
|
||||
"Vertical orientation splits top from bottom and switches the arrow keys to up and down. Below the small breakpoint both orientations stack, because two panes side by side stop making sense on a phone.",
|
||||
{ size: 60, minSize: 25, step: 10, orientation: "vertical", label: "Resize rows" },
|
||||
),
|
||||
],
|
||||
},
|
||||
CustomScrollbar: {
|
||||
demos: [
|
||||
standard(
|
||||
"Themed scrolling region",
|
||||
"Scrollbar appearance is CSS rather than script: scrollbar-width and scrollbar-color are the standard properties, with webkit rules for the engines that still need them. The thumb follows the component colour.",
|
||||
{ axis: "vertical", thickness: 8, maxHeight: "14rem", radius: "999px" },
|
||||
{
|
||||
default: `<div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div>`,
|
||||
},
|
||||
),
|
||||
advanced(
|
||||
"Horizontal, thicker track",
|
||||
"A horizontal region with a heavier track. thickness is clamped, since it arrives as an attribute and a scrollbar wider than its content helps nobody.",
|
||||
{ axis: "horizontal", thickness: 14, maxHeight: "8rem", radius: "4px", color: "info" },
|
||||
{
|
||||
default: `<div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div>`,
|
||||
},
|
||||
),
|
||||
],
|
||||
},
|
||||
Scrollspy: {
|
||||
demos: [
|
||||
{
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"generatedFrom": "packages/ui/component-reference.json",
|
||||
"componentCount": 108,
|
||||
"categoryCount": 11,
|
||||
"totalDemoCount": 421,
|
||||
"totalDemoCount": 419,
|
||||
"components": [
|
||||
{
|
||||
"name": "Accordion",
|
||||
@@ -393,11 +393,11 @@
|
||||
"slug": "custom-scrollbar",
|
||||
"category": "layout",
|
||||
"purpose": "Theme-aware, responsive custom scrollbar component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 6,
|
||||
"demoCount": 2,
|
||||
"propCount": 7,
|
||||
"slots": ["default"],
|
||||
"events": ["scroll"],
|
||||
"profiled": false
|
||||
"events": [],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "DataMap",
|
||||
@@ -690,11 +690,11 @@
|
||||
"slug": "layout-splitter",
|
||||
"category": "layout",
|
||||
"purpose": "Theme-aware, responsive layout splitter component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 6,
|
||||
"slots": ["default"],
|
||||
"events": ["resizeStart", "resize", "resizeEnd"],
|
||||
"profiled": false
|
||||
"demoCount": 2,
|
||||
"propCount": 7,
|
||||
"slots": ["start", "end", "default"],
|
||||
"events": ["resize"],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "LegendIndicator",
|
||||
|
||||
@@ -3263,6 +3263,115 @@ export const REACTIVE_RUNTIME = String.raw`
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Resizable split panes.
|
||||
*
|
||||
* The resolved size is written onto the container as a --wrn-split custom
|
||||
* property and the component styles from it. Pointer moves fire far too
|
||||
* often to route through a client function, and a state write made inside a
|
||||
* pointermove callback is dropped, so the DOM holds the answer.
|
||||
*/
|
||||
var SPLITTER_SELECTOR = "[data-wrn-splitter]";
|
||||
|
||||
function splitterNumber(element, name, fallback) {
|
||||
var raw = Number(element.getAttribute(name));
|
||||
return isFinite(raw) && raw !== 0 ? raw : fallback;
|
||||
}
|
||||
|
||||
function splitterBounds(root) {
|
||||
var min = splitterNumber(root, "data-wrn-splitter-min", 10);
|
||||
return { min: min, max: 100 - min };
|
||||
}
|
||||
|
||||
function applySplit(root, handle, size) {
|
||||
var bounds = splitterBounds(root);
|
||||
var next = Math.min(bounds.max, Math.max(bounds.min, size));
|
||||
next = Math.round(next * 100) / 100;
|
||||
root.style.setProperty("--wrn-split", next + "%");
|
||||
if (handle) {
|
||||
handle.setAttribute("aria-valuenow", String(next));
|
||||
handle.setAttribute("aria-valuemin", String(bounds.min));
|
||||
handle.setAttribute("aria-valuemax", String(bounds.max));
|
||||
}
|
||||
// Named for the component output so a parent @resize binding receives it.
|
||||
root.dispatchEvent(new CustomEvent("resize", { detail: { size: next } }));
|
||||
return next;
|
||||
}
|
||||
|
||||
function currentSplit(root, handle) {
|
||||
var fromHandle = Number(handle && handle.getAttribute("aria-valuenow"));
|
||||
if (isFinite(fromHandle) && fromHandle) return fromHandle;
|
||||
var raw = String(root.style.getPropertyValue("--wrn-split") || "").replace("%", "");
|
||||
var parsed = Number(raw);
|
||||
return isFinite(parsed) && parsed ? parsed : 50;
|
||||
}
|
||||
|
||||
function handleSplitterKeydown(event) {
|
||||
var target = event.target;
|
||||
if (!target || !target.closest) return;
|
||||
var handle = target.closest("[data-wrn-splitter-handle]");
|
||||
if (!handle) return;
|
||||
var root = handle.closest(SPLITTER_SELECTOR);
|
||||
if (!root) return;
|
||||
|
||||
var vertical = root.getAttribute("data-wrn-splitter") === "vertical";
|
||||
var step = splitterNumber(root, "data-wrn-splitter-step", 5);
|
||||
var bounds = splitterBounds(root);
|
||||
var size = currentSplit(root, handle);
|
||||
var key = event.key;
|
||||
var next = size;
|
||||
|
||||
if (key === (vertical ? "ArrowDown" : "ArrowRight")) next = size + step;
|
||||
else if (key === (vertical ? "ArrowUp" : "ArrowLeft")) next = size - step;
|
||||
else if (key === "Home") next = bounds.min;
|
||||
else if (key === "End") next = bounds.max;
|
||||
else return;
|
||||
|
||||
event.preventDefault();
|
||||
applySplit(root, handle, next);
|
||||
}
|
||||
|
||||
function setupSplitters() {
|
||||
if (window.__wrnexusSplitterBound) return;
|
||||
window.__wrnexusSplitterBound = true;
|
||||
|
||||
document.addEventListener("keydown", handleSplitterKeydown, true);
|
||||
|
||||
var dragging = null;
|
||||
|
||||
document.addEventListener("pointerdown", function (event) {
|
||||
var target = event.target;
|
||||
var handle = target && target.closest ? target.closest("[data-wrn-splitter-handle]") : null;
|
||||
if (!handle) return;
|
||||
var root = handle.closest(SPLITTER_SELECTOR);
|
||||
if (!root) return;
|
||||
dragging = { root: root, handle: handle };
|
||||
root.setAttribute("data-wrn-splitter-dragging", "true");
|
||||
if (handle.setPointerCapture && event.pointerId !== undefined) {
|
||||
handle.setPointerCapture(event.pointerId);
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener("pointermove", function (event) {
|
||||
if (!dragging) return;
|
||||
var rect = dragging.root.getBoundingClientRect();
|
||||
var vertical = dragging.root.getAttribute("data-wrn-splitter") === "vertical";
|
||||
var span = vertical ? rect.height : rect.width;
|
||||
if (!span) return;
|
||||
var offset = vertical ? event.clientY - rect.top : event.clientX - rect.left;
|
||||
applySplit(dragging.root, dragging.handle, (offset / span) * 100);
|
||||
});
|
||||
|
||||
var endDrag = function () {
|
||||
if (!dragging) return;
|
||||
dragging.root.removeAttribute("data-wrn-splitter-dragging");
|
||||
dragging = null;
|
||||
};
|
||||
document.addEventListener("pointerup", endDrag);
|
||||
document.addEventListener("pointercancel", endDrag);
|
||||
}
|
||||
|
||||
function hydrateScopes(root) {
|
||||
var host = root || document;
|
||||
|
||||
@@ -5401,6 +5510,7 @@ export const REACTIVE_RUNTIME = String.raw`
|
||||
setupModalDialogs();
|
||||
setupRovingFocus();
|
||||
setupScrollspy();
|
||||
setupSplitters();
|
||||
startDocumentWatch();
|
||||
window.__wrnexusRepositionAnchored = repositionAnchored;
|
||||
window.__wrnexusHydrateScopes = hydrateScopes;
|
||||
|
||||
@@ -16,6 +16,14 @@ function mount(html: string): Window {
|
||||
(globalThis as Record<string, unknown>).MutationObserver = (
|
||||
win as unknown as { MutationObserver: unknown }
|
||||
).MutationObserver;
|
||||
/*
|
||||
* Bind the window CustomEvent too. Without it the runtime constructs events
|
||||
* from the host global, and a listener registered through happy-dom never
|
||||
* matches them, so anything dispatched looks silently lost.
|
||||
*/
|
||||
(globalThis as Record<string, unknown>).CustomEvent = (
|
||||
win as unknown as { CustomEvent: unknown }
|
||||
).CustomEvent;
|
||||
(0, eval)(REACTIVE_RUNTIME);
|
||||
// Hydrate deterministically (auto-init waits on DOMContentLoaded, which the
|
||||
// test window may not fire). setupScope is idempotent, so this is safe.
|
||||
@@ -1110,3 +1118,79 @@ test("an open drawer locks the body scroll and traps Tab", () => {
|
||||
last.dispatchEvent(keydown(win, "Tab"));
|
||||
expect(doc.activeElement!.id).toBe("first");
|
||||
});
|
||||
|
||||
test("splitter keyboard steps move the divider and clamp at the bounds", () => {
|
||||
const win = mount(
|
||||
`<div data-wrn-splitter="horizontal" data-wrn-splitter-min="20" data-wrn-splitter-step="10"
|
||||
style="--wrn-split: 50%">
|
||||
<div>left</div>
|
||||
<div data-wrn-splitter-handle role="separator" tabindex="0"
|
||||
aria-valuenow="50" aria-valuemin="20" aria-valuemax="80"></div>
|
||||
<div>right</div>
|
||||
</div>`,
|
||||
);
|
||||
const doc = win.document;
|
||||
const root = doc.querySelector("[data-wrn-splitter]") as unknown as HTMLElement;
|
||||
const handle = doc.querySelector("[data-wrn-splitter-handle]") as unknown as HTMLElement;
|
||||
|
||||
handle.dispatchEvent(keydown(win, "ArrowRight"));
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("60");
|
||||
expect(root.style.getPropertyValue("--wrn-split").trim()).toBe("60%");
|
||||
|
||||
handle.dispatchEvent(keydown(win, "ArrowLeft"));
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("50");
|
||||
|
||||
// Home and End go to the bounds, not to 0 and 100: a pane dragged to
|
||||
// nothing cannot be recovered with a pointer.
|
||||
handle.dispatchEvent(keydown(win, "Home"));
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("20");
|
||||
handle.dispatchEvent(keydown(win, "End"));
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("80");
|
||||
|
||||
// Already at the maximum; another step must not exceed it.
|
||||
handle.dispatchEvent(keydown(win, "ArrowRight"));
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("80");
|
||||
});
|
||||
|
||||
test("a vertical splitter responds to up and down instead", () => {
|
||||
const win = mount(
|
||||
`<div data-wrn-splitter="vertical" data-wrn-splitter-min="25" data-wrn-splitter-step="5"
|
||||
style="--wrn-split: 50%">
|
||||
<div>top</div>
|
||||
<div data-wrn-splitter-handle role="separator" tabindex="0"
|
||||
aria-valuenow="50" aria-valuemin="25" aria-valuemax="75"></div>
|
||||
<div>bottom</div>
|
||||
</div>`,
|
||||
);
|
||||
const handle = win.document.querySelector("[data-wrn-splitter-handle]") as unknown as HTMLElement;
|
||||
|
||||
handle.dispatchEvent(keydown(win, "ArrowDown"));
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("55");
|
||||
// The other axis is left alone so the page can still scroll sideways.
|
||||
handle.dispatchEvent(keydown(win, "ArrowRight"));
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("55");
|
||||
});
|
||||
|
||||
test("splitter emits a resize event carrying the new size", () => {
|
||||
const win = mount(
|
||||
`<div data-wrn-splitter="horizontal" data-wrn-splitter-min="10" data-wrn-splitter-step="10"
|
||||
style="--wrn-split: 50%">
|
||||
<div>left</div>
|
||||
<div data-wrn-splitter-handle role="separator" tabindex="0"
|
||||
aria-valuenow="50" aria-valuemin="10" aria-valuemax="90"></div>
|
||||
<div>right</div>
|
||||
</div>`,
|
||||
);
|
||||
const doc = win.document;
|
||||
const root = doc.querySelector("[data-wrn-splitter]") as unknown as HTMLElement;
|
||||
const seen: number[] = [];
|
||||
// A resize listener is typed as UIEvent, so the detail needs the wider cast.
|
||||
root.addEventListener("resize", (event) =>
|
||||
seen.push((event as unknown as CustomEvent).detail.size),
|
||||
);
|
||||
|
||||
(doc.querySelector("[data-wrn-splitter-handle]") as unknown as HTMLElement).dispatchEvent(
|
||||
keydown(win, "ArrowRight"),
|
||||
);
|
||||
expect(seen).toEqual([60]);
|
||||
});
|
||||
|
||||
@@ -633,9 +633,9 @@ Constrain and align page content with responsive gutters and compact, wide, or f
|
||||
Theme-aware, responsive custom scrollbar component.
|
||||
|
||||
- Mount: `data-component="CustomScrollbar"`
|
||||
- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
|
||||
- Props: `color: string = "primary"`, `size: string = "default"`, `axis: string = "vertical"`, `thickness: number = 8`, `maxHeight: string = "20rem"`, `radius: string = "999px"`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Outputs: `scroll({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`
|
||||
- Outputs: None
|
||||
|
||||
### Divider
|
||||
|
||||
@@ -696,9 +696,9 @@ Theme-aware, responsive kbd component.
|
||||
Theme-aware, responsive layout splitter component.
|
||||
|
||||
- Mount: `data-component="LayoutSplitter"`
|
||||
- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Outputs: `resizeStart({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `resize({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `resizeEnd({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`
|
||||
- Props: `color: string = "primary"`, `size: number = 50`, `orientation: string = "horizontal"`, `minSize: number = 15`, `step: number = 5`, `label: string = "Resize panels"`, `class: string = ""`
|
||||
- Slots: `start`, `end`, `default`
|
||||
- Outputs: `resize({ size: number })`
|
||||
|
||||
### Link
|
||||
|
||||
|
||||
@@ -4443,13 +4443,6 @@
|
||||
"category": "layout",
|
||||
"purpose": "Theme-aware, responsive custom scrollbar component.",
|
||||
"props": [
|
||||
{
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"default\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "color",
|
||||
"type": "string",
|
||||
@@ -4458,24 +4451,38 @@
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "columns",
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"default\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "axis",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"vertical\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "thickness",
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"default": "2",
|
||||
"default": "8",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "gap",
|
||||
"name": "maxHeight",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"md\"",
|
||||
"default": "\"20rem\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "maxWidth",
|
||||
"name": "radius",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"xl\"",
|
||||
"default": "\"999px\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
@@ -4487,13 +4494,8 @@
|
||||
}
|
||||
],
|
||||
"slots": ["default"],
|
||||
"outputs": [
|
||||
{
|
||||
"name": "scroll",
|
||||
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
|
||||
}
|
||||
],
|
||||
"events": ["scroll"],
|
||||
"outputs": [],
|
||||
"events": [],
|
||||
"source": "components/CustomScrollbar.wrn"
|
||||
},
|
||||
{
|
||||
@@ -7772,13 +7774,6 @@
|
||||
"category": "layout",
|
||||
"purpose": "Theme-aware, responsive layout splitter component.",
|
||||
"props": [
|
||||
{
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"default\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "color",
|
||||
"type": "string",
|
||||
@@ -7787,24 +7782,38 @@
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "columns",
|
||||
"name": "size",
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"default": "2",
|
||||
"default": "50",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "gap",
|
||||
"name": "orientation",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"md\"",
|
||||
"default": "\"horizontal\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "maxWidth",
|
||||
"name": "minSize",
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"default": "15",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "step",
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"default": "5",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "label",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"xl\"",
|
||||
"default": "\"Resize panels\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
@@ -7815,22 +7824,14 @@
|
||||
"options": []
|
||||
}
|
||||
],
|
||||
"slots": ["default"],
|
||||
"slots": ["start", "end", "default"],
|
||||
"outputs": [
|
||||
{
|
||||
"name": "resizeStart",
|
||||
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
|
||||
},
|
||||
{
|
||||
"name": "resize",
|
||||
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
|
||||
},
|
||||
{
|
||||
"name": "resizeEnd",
|
||||
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
|
||||
"payloadType": "{ size: number }"
|
||||
}
|
||||
],
|
||||
"events": ["resizeStart", "resize", "resizeEnd"],
|
||||
"events": ["resize"],
|
||||
"source": "components/LayoutSplitter.wrn"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,17 +1,122 @@
|
||||
// CustomScrollbar -- a scrolling region with a themed scrollbar.
|
||||
//
|
||||
// <CustomScrollbar maxHeight="20rem">...long content...</CustomScrollbar>
|
||||
//
|
||||
// Scrollbar appearance is CSS, not script: scrollbar-width and scrollbar-color
|
||||
// are the standard properties, and the ::-webkit-scrollbar rules cover the
|
||||
// browsers that still need them.
|
||||
//
|
||||
// This component used to declare a scroll output it never emitted, and its
|
||||
// props were columns, gap and maxWidth copied from a grid scaffold. The output
|
||||
// is removed rather than left unimplemented -- a caller can listen for a plain
|
||||
// scroll event on the element, which is what it would have been anyway.
|
||||
//
|
||||
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
|
||||
// and silently swallows the rule that follows it.
|
||||
component CustomScrollbar {
|
||||
outputs {
|
||||
scroll(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
|
||||
}
|
||||
|
||||
props {
|
||||
size: string = "default"
|
||||
color: string = "primary"
|
||||
columns: number = 2
|
||||
gap: string = "md"
|
||||
maxWidth: string = "xl"
|
||||
size: string = "default"
|
||||
axis: string = "vertical"
|
||||
// Track thickness in pixels. Clamped, because it arrives as an attribute
|
||||
// and a scrollbar wider than the content is not useful to anyone.
|
||||
thickness: number = 8
|
||||
maxHeight: string = "20rem"
|
||||
radius: string = "999px"
|
||||
class: string = ""
|
||||
}
|
||||
|
||||
functions {
|
||||
shared function trackSize() {
|
||||
var value = Number(thickness)
|
||||
if (!value || value < 2) {
|
||||
return 8
|
||||
}
|
||||
return Math.min(24, value)
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--custom-scrollbar wire-next--gap-{gap} wire-next--columns-{columns} wire-next--max-{maxWidth} {class}"><slot /></div>
|
||||
<div
|
||||
{...attrs}
|
||||
data-ui-component="CustomScrollbar"
|
||||
class='wire-scrollbar {class}'
|
||||
data-color='{color}'
|
||||
data-size='{size}'
|
||||
data-axis='{axis}'
|
||||
style='--scrollbar-thickness:{trackSize()}px;--scrollbar-radius:{radius};max-height:{maxHeight};'
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-scrollbar {
|
||||
--scrollbar-accent: var(--wire-color-primary);
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
/*
|
||||
* The standard properties. Firefox and current Chrome honour these; the
|
||||
* webkit rules below are only for the engines that still ignore them.
|
||||
*/
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: color-mix(in srgb, var(--scrollbar-accent) 55%, transparent) transparent;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.wire-scrollbar[data-color="secondary"] {
|
||||
--scrollbar-accent: var(--wire-color-secondary);
|
||||
}
|
||||
|
||||
.wire-scrollbar[data-color="success"] {
|
||||
--scrollbar-accent: var(--wire-color-success);
|
||||
}
|
||||
|
||||
.wire-scrollbar[data-color="danger"] {
|
||||
--scrollbar-accent: var(--wire-color-danger);
|
||||
}
|
||||
|
||||
.wire-scrollbar[data-color="info"] {
|
||||
--scrollbar-accent: var(--wire-color-info);
|
||||
}
|
||||
|
||||
.wire-scrollbar[data-axis="vertical"] {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wire-scrollbar[data-axis="horizontal"] {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.wire-scrollbar::-webkit-scrollbar {
|
||||
width: var(--scrollbar-thickness, 8px);
|
||||
height: var(--scrollbar-thickness, 8px);
|
||||
}
|
||||
|
||||
.wire-scrollbar::-webkit-scrollbar-track {
|
||||
background: var(--wire-color-surface-soft);
|
||||
border-radius: var(--scrollbar-radius, 999px);
|
||||
}
|
||||
|
||||
.wire-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--scrollbar-accent) 45%, transparent);
|
||||
border-radius: var(--scrollbar-radius, 999px);
|
||||
}
|
||||
|
||||
.wire-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-accent);
|
||||
}
|
||||
|
||||
/*
|
||||
* A pointer-less device paints its own overlay scrollbar and ignores the
|
||||
* width above, so the region keeps its own padding instead.
|
||||
*/
|
||||
@media (hover: none) {
|
||||
.wire-scrollbar {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,210 @@
|
||||
// LayoutSplitter -- two panes with a divider the reader can move.
|
||||
//
|
||||
// <LayoutSplitter size={40} minSize={20}>
|
||||
// <div data-slot="start">...</div>
|
||||
// <div data-slot="end">...</div>
|
||||
// </LayoutSplitter>
|
||||
//
|
||||
// The dragging lives in the reactive runtime behind data-wrn-splitter. Pointer
|
||||
// moves fire far too often to route through a client function, and a state
|
||||
// write made inside a pointermove callback is dropped, so the resolved size is
|
||||
// held in the DOM as the --wrn-split custom property and these styles read it.
|
||||
//
|
||||
// This component previously declared resizeStart, resize and resizeEnd with no
|
||||
// pointer handling whatsoever: a caller wired up @resize and received nothing,
|
||||
// for ever, with no error.
|
||||
//
|
||||
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
|
||||
// and silently swallows the rule that follows it.
|
||||
component LayoutSplitter {
|
||||
outputs {
|
||||
resizeStart(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
|
||||
resize(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
|
||||
resizeEnd(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
|
||||
resize(payload: { size: number })
|
||||
}
|
||||
|
||||
props {
|
||||
size: string = "default"
|
||||
color: string = "primary"
|
||||
columns: number = 2
|
||||
gap: string = "md"
|
||||
maxWidth: string = "xl"
|
||||
size: number = 50
|
||||
orientation: string = "horizontal"
|
||||
// Smallest share either pane may take, as a percentage. It also fixes the
|
||||
// upper bound at 100 - minSize, so neither pane can be dragged away to
|
||||
// nothing and left unrecoverable by pointer.
|
||||
minSize: number = 15
|
||||
step: number = 5
|
||||
label: string = "Resize panels"
|
||||
class: string = ""
|
||||
}
|
||||
|
||||
functions {
|
||||
shared function isVertical() {
|
||||
return orientation === "vertical"
|
||||
}
|
||||
|
||||
shared function lowerBound() {
|
||||
var value = Number(minSize)
|
||||
if (!value || value < 0) {
|
||||
return 15
|
||||
}
|
||||
return Math.min(45, value)
|
||||
}
|
||||
|
||||
shared function upperBound() {
|
||||
return 100 - lowerBound()
|
||||
}
|
||||
|
||||
// Sizes arrive as HTML attributes, so a value outside the bounds is
|
||||
// routine rather than exceptional. Clamp instead of rendering something
|
||||
// the reader cannot undo.
|
||||
shared function currentSize() {
|
||||
var value = Number(size)
|
||||
if (!value || value < 0) {
|
||||
return 50
|
||||
}
|
||||
return Math.min(upperBound(), Math.max(lowerBound(), value))
|
||||
}
|
||||
|
||||
shared function stepSize() {
|
||||
var value = Number(step)
|
||||
return value && value > 0 ? value : 5
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--layout-splitter wire-next--gap-{gap} wire-next--columns-{columns} wire-next--max-{maxWidth} {class}"><slot /></div>
|
||||
<div
|
||||
{...attrs}
|
||||
data-ui-component="LayoutSplitter"
|
||||
class='wire-splitter {class}'
|
||||
data-color='{color}'
|
||||
data-orientation='{orientation}'
|
||||
data-wrn-splitter='{isVertical() ? "vertical" : "horizontal"}'
|
||||
data-wrn-splitter-min='{lowerBound()}'
|
||||
data-wrn-splitter-step='{stepSize()}'
|
||||
style='--wrn-split:{currentSize()}%;'
|
||||
>
|
||||
<div class="wire-splitter__pane wire-splitter__pane--start">
|
||||
<slot name="start"></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="wire-splitter__handle"
|
||||
data-wrn-splitter-handle="true"
|
||||
role="separator"
|
||||
tabindex="0"
|
||||
aria-label='{label}'
|
||||
aria-orientation='{isVertical() ? "horizontal" : "vertical"}'
|
||||
aria-valuenow='{currentSize()}'
|
||||
aria-valuemin='{lowerBound()}'
|
||||
aria-valuemax='{upperBound()}'
|
||||
>
|
||||
<span class="wire-splitter__grip" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
<div class="wire-splitter__pane wire-splitter__pane--end">
|
||||
<slot name="end"></slot>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-splitter {
|
||||
--splitter-accent: var(--wire-color-primary);
|
||||
display: grid;
|
||||
/* The first track follows the size the runtime resolves. */
|
||||
grid-template-columns: var(--wrn-split, 50%) auto minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-splitter[data-color="secondary"] {
|
||||
--splitter-accent: var(--wire-color-secondary);
|
||||
}
|
||||
|
||||
.wire-splitter[data-color="success"] {
|
||||
--splitter-accent: var(--wire-color-success);
|
||||
}
|
||||
|
||||
.wire-splitter[data-color="danger"] {
|
||||
--splitter-accent: var(--wire-color-danger);
|
||||
}
|
||||
|
||||
.wire-splitter[data-color="info"] {
|
||||
--splitter-accent: var(--wire-color-info);
|
||||
}
|
||||
|
||||
.wire-splitter[data-orientation="vertical"] {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: var(--wrn-split, 50%) auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.wire-splitter__pane {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.wire-splitter__handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 0.25rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: col-resize;
|
||||
/* Without this the pointer drag selects the text in both panes. */
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wire-splitter[data-orientation="vertical"] .wire-splitter__handle {
|
||||
padding: 0.25rem 0;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.wire-splitter__grip {
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
min-height: 1.5rem;
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-border);
|
||||
transition: background 140ms ease;
|
||||
}
|
||||
|
||||
.wire-splitter[data-orientation="vertical"] .wire-splitter__grip {
|
||||
width: 100%;
|
||||
min-width: 1.5rem;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.wire-splitter__handle:hover .wire-splitter__grip,
|
||||
.wire-splitter[data-wrn-splitter-dragging="true"] .wire-splitter__grip {
|
||||
background: var(--splitter-accent);
|
||||
}
|
||||
|
||||
.wire-splitter__handle:focus-visible {
|
||||
outline: 2px solid var(--splitter-accent);
|
||||
outline-offset: -2px;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
}
|
||||
|
||||
/*
|
||||
* Two panes side by side stop making sense on a phone. Stacking them keeps
|
||||
* both readable, and the divider stops being draggable because the grid
|
||||
* no longer has a second track to trade against.
|
||||
*/
|
||||
@media (max-width: 639px) {
|
||||
.wire-splitter,
|
||||
.wire-splitter[data-orientation="vertical"] {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
|
||||
.wire-splitter__handle {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2944,3 +2944,78 @@ test("stepper next can be gated so a form can hold it until the step validates",
|
||||
const dom = mountHtml(html);
|
||||
expect(dom.querySelector(".wire-stepper__next")!.getAttribute("disabled")).not.toBeNull();
|
||||
});
|
||||
|
||||
test("layout splitter renders two panes and an operable separator", async () => {
|
||||
const source = readFileSync(uiComponentPath("LayoutSplitter"), "utf8");
|
||||
/*
|
||||
* It used to declare resizeStart, resize and resizeEnd with no pointer
|
||||
* handling at all, so a caller wired up @resize and received nothing for
|
||||
* ever. The behaviour now lives in the runtime behind these markers.
|
||||
*/
|
||||
expect(source).toContain("data-wrn-splitter");
|
||||
expect(source).toContain("data-wrn-splitter-handle");
|
||||
|
||||
const html = await renderComponent(source, {
|
||||
orientation: "horizontal",
|
||||
size: 40,
|
||||
minSize: 20,
|
||||
label: "Resize panels",
|
||||
});
|
||||
const dom = mountHtml(html);
|
||||
|
||||
const root = dom.querySelector(".wire-splitter") as HTMLElement;
|
||||
expect(root.getAttribute("data-wrn-splitter")).toBe("horizontal");
|
||||
expect(root.getAttribute("style")).toContain("--wrn-split");
|
||||
|
||||
const handle = dom.querySelector("[data-wrn-splitter-handle]") as HTMLElement;
|
||||
expect(handle.getAttribute("role")).toBe("separator");
|
||||
expect(handle.getAttribute("tabindex")).toBe("0");
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("40");
|
||||
expect(handle.getAttribute("aria-valuemin")).toBe("20");
|
||||
expect(handle.getAttribute("aria-valuemax")).toBe("80");
|
||||
expect(handle.getAttribute("aria-orientation")).toBe("vertical");
|
||||
|
||||
expect(dom.querySelectorAll(".wire-splitter__pane")).toHaveLength(2);
|
||||
});
|
||||
|
||||
test("layout splitter clamps an out-of-range size and flips orientation", async () => {
|
||||
const source = readFileSync(uiComponentPath("LayoutSplitter"), "utf8");
|
||||
const dom = mountHtml(
|
||||
await renderComponent(source, { orientation: "vertical", size: 95, minSize: 25 }),
|
||||
);
|
||||
const handle = dom.querySelector("[data-wrn-splitter-handle]") as HTMLElement;
|
||||
// 95 is past the 75 bound implied by minSize, so it clamps rather than
|
||||
// leaving one pane unrecoverable.
|
||||
expect(handle.getAttribute("aria-valuenow")).toBe("75");
|
||||
// A vertical splitter stacks, so its separator is a horizontal bar.
|
||||
expect(handle.getAttribute("aria-orientation")).toBe("horizontal");
|
||||
});
|
||||
|
||||
test("custom scrollbar styles the scrollbar and drops its fake output", async () => {
|
||||
const source = readFileSync(uiComponentPath("CustomScrollbar"), "utf8");
|
||||
/*
|
||||
* It declared a scroll output it never emitted, and its props were columns,
|
||||
* gap and maxWidth copied from a grid scaffold. A caller can listen for a
|
||||
* plain scroll event on the element, so the output is gone rather than left
|
||||
* unimplemented.
|
||||
*/
|
||||
expect(source).not.toContain("outputs {");
|
||||
// Matched as a declaration: the word still appears in the comment recording
|
||||
// why those props were wrong.
|
||||
expect(source).not.toMatch(/^\s*columns:/m);
|
||||
expect(source).not.toMatch(/^\s*gap:/m);
|
||||
expect(source).toContain("scrollbar-color");
|
||||
expect(source).toContain("::-webkit-scrollbar");
|
||||
|
||||
const html = await renderComponent(source, {
|
||||
axis: "vertical",
|
||||
thickness: 10,
|
||||
maxHeight: "18rem",
|
||||
});
|
||||
const dom = mountHtml(html);
|
||||
const root = dom.querySelector(".wire-scrollbar") as HTMLElement;
|
||||
expect(root.getAttribute("data-axis")).toBe("vertical");
|
||||
const style = root.getAttribute("style") || "";
|
||||
expect(style).toContain("--scrollbar-thickness");
|
||||
expect(style).toContain("18rem");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user