WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

feat(ui): build LayoutSplitter and CustomScrollbar for real
Quality / quality (ubuntu-latest) (push) Failing after 6m8s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source 
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:
Clintchiz
2026-08-08 11:22:45 +05:30
co-authored by Claude Opus 5
parent b3a4d80df3
commit b56cb8cba5
15 changed files with 794 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/component-reference.json
+45 -44
View File
@@ -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"
},
{