feat(ui): add DataTable and Toaster, drop the legacy Table, fix overlay dialogs
DataTable replaces the 20-line Table scaffold entirely: columns, sorting, filtering, pagination, selection, bulk actions, comparison layout, sticky first column, custom HTML cells, and a remote source driven by a `request` output rather than a function prop (props travel as HTML attributes, so a function arrives as its own source text). Toaster replaces the hand-rolled status div: tone icons, actions, hover pause/resume and a progress bar. Overlays audit -- Modal and Drawer declared aria-modal="true" but nothing ever moved focus into the panel, so the @keydown handler on their root never ran and closeOnEscape did nothing. Focus, focus restore, a Tab trap and a body scroll lock now live in the reactive runtime, shared by both. ContextMenu placed pointer menus by subtracting a guessed 340x420 from the viewport, which pushed every menu that was not that size away from the pointer; it now positions at the pointer and lets the anchored clamp pull it back once it can be measured. The reactive runtime size budget moves 150k -> 175k to cover anchored overlays, dialog behaviour, the toaster and the DataTable client half. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
"generatedFrom": "packages/ui/component-reference.json",
|
||||
"componentCount": 108,
|
||||
"categoryCount": 11,
|
||||
"totalDemoCount": 417,
|
||||
"totalDemoCount": 421,
|
||||
"components": [
|
||||
{
|
||||
"name": "Accordion",
|
||||
@@ -415,13 +415,22 @@
|
||||
"name": "DataTable",
|
||||
"mount": "DataTable",
|
||||
"slug": "data-table",
|
||||
"category": "integrations",
|
||||
"purpose": "Theme-aware, responsive data table component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 7,
|
||||
"category": "tables",
|
||||
"purpose": "Sortable, filterable, paginated data table with row selection.",
|
||||
"demoCount": 9,
|
||||
"propCount": 29,
|
||||
"slots": ["default"],
|
||||
"events": ["sort", "select", "change", "rowClick", "pageChange"],
|
||||
"profiled": false
|
||||
"events": [
|
||||
"sort",
|
||||
"search",
|
||||
"pageChange",
|
||||
"select",
|
||||
"change",
|
||||
"rowClick",
|
||||
"action",
|
||||
"request"
|
||||
],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "DatePicker",
|
||||
@@ -478,7 +487,7 @@
|
||||
"category": "overlays",
|
||||
"purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.",
|
||||
"demoCount": 3,
|
||||
"propCount": 19,
|
||||
"propCount": 20,
|
||||
"slots": ["trigger", "header", "default", "footer"],
|
||||
"events": ["open", "close", "cancel"],
|
||||
"profiled": true
|
||||
@@ -814,7 +823,7 @@
|
||||
"category": "overlays",
|
||||
"purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.",
|
||||
"demoCount": 3,
|
||||
"propCount": 28,
|
||||
"propCount": 29,
|
||||
"slots": ["trigger", "header", "default", "footer"],
|
||||
"events": ["open", "close", "cancel", "confirm"],
|
||||
"profiled": true
|
||||
@@ -1143,18 +1152,6 @@
|
||||
"events": ["input", "change", "focus", "blur"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "Table",
|
||||
"mount": "Table",
|
||||
"slug": "table",
|
||||
"category": "tables",
|
||||
"purpose": "Theme-aware, responsive table component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 7,
|
||||
"slots": ["default"],
|
||||
"events": ["sort", "select", "rowClick"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "Tabs",
|
||||
"mount": "Tabs",
|
||||
@@ -1239,6 +1236,18 @@
|
||||
"events": ["add", "dismiss", "clear", "action"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "Toaster",
|
||||
"mount": "Toaster",
|
||||
"slug": "toaster",
|
||||
"category": "core",
|
||||
"purpose": "Reusable toaster component.",
|
||||
"demoCount": 1,
|
||||
"propCount": 15,
|
||||
"slots": [],
|
||||
"events": ["show", "dismiss", "action"],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "ToggleCount",
|
||||
"mount": "ToggleCount",
|
||||
|
||||
Reference in New Issue
Block a user