@pathscale/ui 1.1.12 → 1.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/components/pagination/Pagination.css +121 -0
  2. package/dist/components/pagination/Pagination.d.ts +8 -2
  3. package/dist/components/pagination/Pagination.js +113 -7
  4. package/dist/components/select/Select.css +244 -0
  5. package/dist/components/select/Select.d.ts +44 -13
  6. package/dist/components/select/Select.js +618 -41
  7. package/dist/components/select/index.d.ts +2 -1
  8. package/dist/components/streaming-table/StreamingTable.js +39 -92
  9. package/dist/components/table/EnhancedTable.d.ts +1 -1
  10. package/dist/components/table/EnhancedTable.js +131 -195
  11. package/dist/components/table/{table.css → Table.css} +138 -0
  12. package/dist/components/table/Table.d.ts +69 -7
  13. package/dist/components/table/Table.js +302 -28
  14. package/dist/components/table/hooks/helpers.d.ts +7 -0
  15. package/dist/components/table/hooks/helpers.js +26 -0
  16. package/dist/components/table/hooks/index.d.ts +9 -0
  17. package/dist/components/table/hooks/index.js +18 -0
  18. package/dist/components/table/hooks/useAnchoredOverlayPosition.d.ts +16 -0
  19. package/dist/components/table/hooks/useAnchoredOverlayPosition.js +61 -0
  20. package/dist/components/table/hooks/useTableExpansion.d.ts +13 -0
  21. package/dist/components/table/hooks/useTableExpansion.js +17 -0
  22. package/dist/components/table/hooks/useTableFiltering.d.ts +30 -0
  23. package/dist/components/table/hooks/useTableFiltering.js +67 -0
  24. package/dist/components/table/hooks/useTableModel.d.ts +27 -0
  25. package/dist/components/table/hooks/useTableModel.js +56 -0
  26. package/dist/components/table/hooks/useTablePagination.d.ts +20 -0
  27. package/dist/components/table/hooks/useTablePagination.js +48 -0
  28. package/dist/components/table/hooks/useTableSelection.d.ts +14 -0
  29. package/dist/components/table/hooks/useTableSelection.js +17 -0
  30. package/dist/components/table/hooks/useTableSorting.d.ts +19 -0
  31. package/dist/components/table/hooks/useTableSorting.js +21 -0
  32. package/dist/components/table/index.d.ts +4 -1
  33. package/dist/components/table/index.js +26 -1
  34. package/dist/index.d.ts +3 -1
  35. package/dist/index.js +10 -1
  36. package/package.json +1 -1
  37. package/dist/components/select/select.css +0 -351
package/dist/components/table/EnhancedTable.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
2
- import "./table.css";
2
+ import "./Table.css";
3
3
  import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
4
4
  import * as __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__ from "@tanstack/solid-table";
5
5
  import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
@@ -10,6 +10,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__input_Input_js_ae745814__ from "../input/
10
10
  import * as __WEBPACK_EXTERNAL_MODULE__dropdown_Dropdown_js_1eafe997__ from "../dropdown/Dropdown.js";
11
11
  import * as __WEBPACK_EXTERNAL_MODULE__loading_Loading_js_1fa096bd__ from "../loading/Loading.js";
12
12
  import * as __WEBPACK_EXTERNAL_MODULE__menu_Menu_js_2e8cbfbf__ from "../menu/Menu.js";
13
+ import * as __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__ from "./hooks/index.js";
13
14
  var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="cursor-pointer ml-auto shrink-0">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=mb-2></div><div class="flex gap-2 justify-end">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex items-center gap-2"><span class=opacity-70>Rows per page</span></div><div class="flex items-center gap-3 ml-4"><span class=opacity-70>Page <!> of </span><div class=join>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-2"><div class=truncate>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex gap-2">');
14
15
  function EnhancedTable_EnhancedTable(props) {
15
16
  const [local, tableProps] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -48,67 +49,64 @@ function EnhancedTable_EnhancedTable(props) {
48
49
  "nextPageIcon",
49
50
  "lastPageIcon"
50
51
  ]);
51
- const [openFilterFor, setOpenFilterFor] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
52
52
  const [pageSizeMenuOpen, setPageSizeMenuOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
53
- const [pageSizeMenuStyle, setPageSizeMenuStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
54
- position: "fixed",
55
- top: "0px",
56
- left: "0px",
57
- "min-width": "96px",
58
- "z-index": 1300
53
+ const sortingModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableSorting)({
54
+ sorting: local.sorting,
55
+ setSorting: local.setSorting,
56
+ initialSorting: []
57
+ });
58
+ const paginationModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTablePagination)({
59
+ pagination: local.pagination,
60
+ setPagination: local.setPagination,
61
+ initialPagination: {
62
+ pageIndex: 0,
63
+ pageSize: 10
64
+ },
65
+ pageSizeOptions: [
66
+ 10,
67
+ 25,
68
+ 50,
69
+ 100
70
+ ]
71
+ });
72
+ const selectionModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableSelection)({
73
+ rowSelection: local.rowSelection,
74
+ setRowSelection: local.setRowSelection,
75
+ initialRowSelection: {}
76
+ });
77
+ const filteringModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableFiltering)({
78
+ columnFilters: local.columnFilters,
79
+ setColumnFilters: local.setColumnFilters,
80
+ initialColumnFilters: [],
81
+ globalFilter: local.globalFilter,
82
+ setGlobalFilter: local.setGlobalFilter,
83
+ initialGlobalFilter: ""
84
+ });
85
+ const expansionModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableExpansion)({
86
+ expanded: local.expanded,
87
+ setExpanded: local.setExpanded,
88
+ initialExpanded: {}
59
89
  });
60
- const pageSizeOptions = [
61
- 10,
62
- 25,
63
- 50,
64
- 100
65
- ];
66
90
  let pageSizeToggleRef;
67
91
  let pageSizeMenuRef;
68
- const table = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.createSolidTable)({
69
- get data () {
70
- return local.data;
71
- },
72
- get columns () {
73
- return local.columns;
74
- },
75
- state: {
76
- get sorting () {
77
- return local.sorting?.() || [];
78
- },
79
- get columnFilters () {
80
- return local.columnFilters?.() || [];
81
- },
82
- get pagination () {
83
- return local.pagination?.() || {
84
- pageIndex: 0,
85
- pageSize: 10
86
- };
87
- },
88
- get globalFilter () {
89
- return local.globalFilter?.() || "";
90
- },
91
- get rowSelection () {
92
- return local.rowSelection?.() || {};
93
- },
94
- get expanded () {
95
- return local.expanded?.() || {};
96
- }
97
- },
98
- onSortingChange: local.setSorting,
99
- onColumnFiltersChange: local.setColumnFilters,
100
- onPaginationChange: local.setPagination,
101
- onGlobalFilterChange: local.setGlobalFilter,
102
- onRowSelectionChange: local.setRowSelection,
103
- onExpandedChange: local.setExpanded,
104
- getCoreRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getCoreRowModel)(),
105
- getSortedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getSortedRowModel)(),
106
- getFilteredRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getFilteredRowModel)(),
107
- getPaginationRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getPaginationRowModel)(),
108
- getExpandedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getExpandedRowModel)(),
92
+ const table = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableModel)({
93
+ data: ()=>local.data,
94
+ columns: ()=>local.columns,
95
+ sorting: sortingModel.sorting,
96
+ setSorting: sortingModel.setSorting,
97
+ columnFilters: filteringModel.columnFilters,
98
+ setColumnFilters: filteringModel.setColumnFilters,
99
+ pagination: paginationModel.pagination,
100
+ setPagination: paginationModel.setPagination,
101
+ globalFilter: filteringModel.globalFilter,
102
+ setGlobalFilter: filteringModel.setGlobalFilter,
103
+ rowSelection: selectionModel.rowSelection,
104
+ setRowSelection: selectionModel.setRowSelection,
105
+ expanded: expansionModel.expanded,
106
+ setExpanded: expansionModel.setExpanded,
109
107
  enableSorting: false !== local.enableSorting,
110
108
  enableFilters: !!local.enableFilters,
111
- manualPagination: !local.enablePagination,
109
+ enablePagination: !!local.enablePagination,
112
110
  enableRowSelection: !!local.enableRowSelection,
113
111
  enableExpanding: true,
114
112
  getRowCanExpand: ()=>!!local.expandable
@@ -127,66 +125,37 @@ function EnhancedTable_EnhancedTable(props) {
127
125
  return pageCount > 1 || totalRows > pageSize;
128
126
  });
129
127
  const headerGroups = ()=>table.getHeaderGroups();
128
+ const sortDescriptor = sortingModel.sortDescriptor;
129
+ const handleSortChange = sortingModel.setSortDescriptor;
130
130
  const totalColumns = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>table.getVisibleLeafColumns().length + (local.enableRowSelection ? 1 : 0) + (local.expandable ? 1 : 0));
131
131
  const filterTriggerRefs = new Map();
132
- const [filterPanelStyle, setFilterPanelStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
133
- position: "fixed",
134
- top: "0px",
135
- left: "0px",
136
- "z-index": 1300
137
- });
138
132
  let filterPanelRef;
139
- const updateFilterPanelPosition = ()=>{
140
- const colId = openFilterFor();
141
- if (!colId) return;
142
- const triggerEl = filterTriggerRefs.get(colId);
143
- if (!triggerEl) return;
144
- const rect = triggerEl.getBoundingClientRect();
145
- const panelWidth = 224;
146
- const offset = 6;
147
- const viewportPadding = 8;
148
- let left = rect.right - panelWidth;
149
- left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));
150
- let top = rect.bottom + offset;
151
- if (filterPanelRef) {
152
- const panelHeight = filterPanelRef.getBoundingClientRect().height;
153
- if (top + panelHeight > window.innerHeight - viewportPadding) {
154
- const above = rect.top - panelHeight - offset;
155
- top = above >= viewportPadding ? above : Math.max(viewportPadding, window.innerHeight - panelHeight - viewportPadding);
156
- }
157
- }
158
- setFilterPanelStyle({
159
- position: "fixed",
160
- top: `${top}px`,
161
- left: `${left}px`,
162
- "z-index": 1300
163
- });
164
- };
165
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
166
- if (!openFilterFor()) return;
167
- requestAnimationFrame(()=>{
168
- updateFilterPanelPosition();
169
- requestAnimationFrame(updateFilterPanelPosition);
170
- });
171
- const onViewportChange = ()=>updateFilterPanelPosition();
172
- window.addEventListener("resize", onViewportChange);
173
- window.addEventListener("scroll", onViewportChange, true);
174
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
175
- window.removeEventListener("resize", onViewportChange);
176
- window.removeEventListener("scroll", onViewportChange, true);
177
- });
133
+ const filterPanelAnchor = ()=>filteringModel.openFilterFor() ? filterTriggerRefs.get(filteringModel.openFilterFor()) : void 0;
134
+ const filterPanelPosition = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useAnchoredOverlayPosition)({
135
+ isOpen: ()=>Boolean(filteringModel.openFilterFor()),
136
+ getAnchor: filterPanelAnchor,
137
+ getOverlay: ()=>filterPanelRef,
138
+ width: 224,
139
+ zIndex: 1300
140
+ });
141
+ const pageSizeMenuPosition = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useAnchoredOverlayPosition)({
142
+ isOpen: pageSizeMenuOpen,
143
+ getAnchor: ()=>pageSizeToggleRef,
144
+ getOverlay: ()=>pageSizeMenuRef,
145
+ minWidth: ()=>pageSizeToggleRef ? Math.max(pageSizeToggleRef.getBoundingClientRect().width, 96) : 96,
146
+ zIndex: 1300
178
147
  });
179
148
  const FilterIconTrigger = (props)=>(()=>{
180
149
  var _el$ = _tmpl$();
181
150
  _el$.$$click = (e)=>{
182
151
  e.stopPropagation();
183
- if (!props.disabled) setOpenFilterFor((c)=>c === props.colId ? null : props.colId);
152
+ if (!props.disabled) filteringModel.toggleFilter(props.colId);
184
153
  };
185
154
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>filterTriggerRefs.set(props.colId, el), _el$);
186
155
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.filterIcon);
187
156
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.classList)(_el$, {
188
157
  "opacity-50 pointer-events-none": props.disabled,
189
- "text-primary": openFilterFor() === props.colId
158
+ "text-primary": filteringModel.openFilterFor() === props.colId
190
159
  }, _$p));
191
160
  return _el$;
192
161
  })();
@@ -195,7 +164,7 @@ function EnhancedTable_EnhancedTable(props) {
195
164
  const colId = col.id;
196
165
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
197
166
  get when () {
198
- return openFilterFor() === colId;
167
+ return filteringModel.openFilterFor() === colId;
199
168
  },
200
169
  get children () {
201
170
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
@@ -216,18 +185,18 @@ function EnhancedTable_EnhancedTable(props) {
216
185
  variant: "outline",
217
186
  onClick: ()=>{
218
187
  col.setFilterValue(void 0);
219
- setOpenFilterFor(null);
188
+ filteringModel.closeFilter();
220
189
  },
221
190
  children: "Clear"
222
191
  }), null);
223
192
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
224
193
  size: "sm",
225
194
  variant: "primary",
226
- onClick: ()=>setOpenFilterFor(null),
195
+ onClick: ()=>filteringModel.closeFilter(),
227
196
  children: "Apply"
228
197
  }), null);
229
198
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
230
- var _v$ = filterPanelStyle(), _v$2 = local.filterPanelClass ?? "z-[1300] w-56 border border-nf-border bg-nf-surface-1 shadow-lg rounded-box p-2";
199
+ var _v$ = filterPanelPosition.style(), _v$2 = local.filterPanelClass ?? "z-[1300] w-56 border border-nf-border bg-nf-surface-1 shadow-lg rounded-box p-2";
231
200
  _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, _v$, _p$.e);
232
201
  _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.t = _v$2);
233
202
  return _p$;
@@ -250,33 +219,6 @@ function EnhancedTable_EnhancedTable(props) {
250
219
  document.body.append(root);
251
220
  return root;
252
221
  };
253
- const updatePageSizeMenuPosition = ()=>{
254
- const toggleEl = pageSizeToggleRef;
255
- const menuEl = pageSizeMenuRef;
256
- if (!toggleEl || !menuEl) return;
257
- const viewportPadding = 8;
258
- const gap = 4;
259
- const toggleRect = toggleEl.getBoundingClientRect();
260
- const menuRect = menuEl.getBoundingClientRect();
261
- const menuWidth = menuRect.width || Math.max(toggleRect.width, 96);
262
- const menuHeight = menuRect.height || 0;
263
- const viewportWidth = window.innerWidth;
264
- const viewportHeight = window.innerHeight;
265
- let left = toggleRect.right - menuWidth;
266
- left = Math.max(viewportPadding, Math.min(left, viewportWidth - menuWidth - viewportPadding));
267
- const spaceBelow = viewportHeight - toggleRect.bottom;
268
- const spaceAbove = toggleRect.top;
269
- const shouldOpenUp = spaceBelow < menuHeight + gap && spaceAbove > menuHeight + gap;
270
- let top = shouldOpenUp ? toggleRect.top - menuHeight - gap : toggleRect.bottom + gap;
271
- top = Math.max(viewportPadding, Math.min(top, viewportHeight - menuHeight - viewportPadding));
272
- setPageSizeMenuStyle({
273
- position: "fixed",
274
- top: `${top}px`,
275
- left: `${left}px`,
276
- "min-width": `${Math.max(toggleRect.width, 96)}px`,
277
- "z-index": 1300
278
- });
279
- };
280
222
  const closePageSizeMenu = ()=>setPageSizeMenuOpen(false);
281
223
  const togglePageSizeMenu = ()=>setPageSizeMenuOpen((current)=>!current);
282
224
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
@@ -285,10 +227,6 @@ function EnhancedTable_EnhancedTable(props) {
285
227
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
286
228
  if (!pageSizeMenuOpen()) return;
287
229
  ensurePortalRoot();
288
- requestAnimationFrame(()=>{
289
- updatePageSizeMenuPosition();
290
- requestAnimationFrame(updatePageSizeMenuPosition);
291
- });
292
230
  const onPointerDown = (event)=>{
293
231
  const target = event.target;
294
232
  if (!target) return;
@@ -299,16 +237,11 @@ function EnhancedTable_EnhancedTable(props) {
299
237
  const onKeyDown = (event)=>{
300
238
  if ("Escape" === event.key) closePageSizeMenu();
301
239
  };
302
- const onViewportChange = ()=>updatePageSizeMenuPosition();
303
240
  document.addEventListener("pointerdown", onPointerDown);
304
241
  document.addEventListener("keydown", onKeyDown);
305
- window.addEventListener("resize", onViewportChange);
306
- window.addEventListener("scroll", onViewportChange, true);
307
242
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
308
243
  document.removeEventListener("pointerdown", onPointerDown);
309
244
  document.removeEventListener("keydown", onKeyDown);
310
- window.removeEventListener("resize", onViewportChange);
311
- window.removeEventListener("scroll", onViewportChange, true);
312
245
  });
313
246
  });
314
247
  return [
@@ -322,6 +255,10 @@ function EnhancedTable_EnhancedTable(props) {
322
255
  get ["class"] () {
323
256
  return (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(tableProps.class, "table-auto");
324
257
  },
258
+ get sortDescriptor () {
259
+ return sortDescriptor();
260
+ },
261
+ onSortChange: handleSortChange,
325
262
  get children () {
326
263
  return [
327
264
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Table_js_0edb6f6c__["default"].Header, {
@@ -339,6 +276,7 @@ function EnhancedTable_EnhancedTable(props) {
339
276
  },
340
277
  get children () {
341
278
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Table_js_0edb6f6c__["default"].Column, {
279
+ id: "expand-control",
342
280
  class: "w-6"
343
281
  });
344
282
  }
@@ -349,6 +287,7 @@ function EnhancedTable_EnhancedTable(props) {
349
287
  },
350
288
  get children () {
351
289
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Table_js_0edb6f6c__["default"].Column, {
290
+ id: "selection-control",
352
291
  class: "w-8",
353
292
  get children () {
354
293
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__checkbox_Checkbox_js_9a9489db__["default"], {
@@ -375,57 +314,52 @@ function EnhancedTable_EnhancedTable(props) {
375
314
  const canSort = local.enableSorting && false !== header.column.columnDef.enableSorting && header.column.getCanSort();
376
315
  const canFilter = local.enableFilters && false !== header.column.columnDef.enableColumnFilter && header.column.getCanFilter();
377
316
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Table_js_0edb6f6c__["default"].Column, {
317
+ id: colId,
318
+ allowsSorting: canSort,
378
319
  class: canSort ? "relative cursor-pointer select-none" : "relative",
379
- get onClick () {
380
- return canSort ? header.column.getToggleSortingHandler() : void 0;
381
- },
382
- get children () {
383
- var _el$13 = _tmpl$4(), _el$14 = _el$13.firstChild;
384
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, ()=>(0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.flexRender)(header.column.columnDef.header, header.getContext()));
385
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
386
- get when () {
387
- return "asc" === header.column.getIsSorted();
388
- },
389
- get children () {
390
- return local.sortAscIcon;
391
- }
392
- }), null);
393
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
394
- get when () {
395
- return "desc" === header.column.getIsSorted();
396
- },
397
- get children () {
398
- return local.sortDescIcon;
399
- }
400
- }), null);
401
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
402
- get when () {
403
- return canSort && false === header.column.getIsSorted() && local.sortNeutralIcon;
404
- },
405
- get children () {
406
- return local.sortNeutralIcon;
407
- }
408
- }), null);
409
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
410
- when: canFilter,
411
- get children () {
412
- return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FilterIconTrigger, {
413
- colId: colId
414
- });
415
- }
416
- }), null);
417
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
418
- when: canFilter,
419
- get children () {
420
- return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FilterPanel, {
421
- get column () {
422
- return header.column;
423
- }
424
- });
425
- }
426
- }), null);
427
- return _el$13;
428
- }
320
+ children: ({ sortDirection })=>(()=>{
321
+ var _el$13 = _tmpl$4(), _el$14 = _el$13.firstChild;
322
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, ()=>(0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.flexRender)(header.column.columnDef.header, header.getContext()));
323
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
324
+ when: "ascending" === sortDirection,
325
+ get children () {
326
+ return local.sortAscIcon;
327
+ }
328
+ }), null);
329
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
330
+ when: "descending" === sortDirection,
331
+ get children () {
332
+ return local.sortDescIcon;
333
+ }
334
+ }), null);
335
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
336
+ get when () {
337
+ return canSort && void 0 === sortDirection && local.sortNeutralIcon;
338
+ },
339
+ get children () {
340
+ return local.sortNeutralIcon;
341
+ }
342
+ }), null);
343
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
344
+ when: canFilter,
345
+ get children () {
346
+ return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FilterIconTrigger, {
347
+ colId: colId
348
+ });
349
+ }
350
+ }), null);
351
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
352
+ when: canFilter,
353
+ get children () {
354
+ return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FilterPanel, {
355
+ get column () {
356
+ return header.column;
357
+ }
358
+ });
359
+ }
360
+ }), null);
361
+ return _el$13;
362
+ })()
429
363
  });
430
364
  }
431
365
  })
@@ -659,14 +593,16 @@ function EnhancedTable_EnhancedTable(props) {
659
593
  pageSizeMenuRef = el;
660
594
  },
661
595
  get style () {
662
- return pageSizeMenuStyle();
596
+ return pageSizeMenuPosition.style();
663
597
  },
664
598
  class: "p-2 shadow bg-base-100 rounded-box border border-base-300 w-24",
665
599
  role: "menu",
666
600
  "aria-label": "Rows per page",
667
601
  get children () {
668
602
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
669
- each: pageSizeOptions,
603
+ get each () {
604
+ return paginationModel.pageSizeOptions();
605
+ },
670
606
  children: (size)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
671
607
  type: "button",
672
608
  size: "sm",
package/dist/components/table/{table.css → Table.css} RENAMED
@@ -44,6 +44,10 @@
44
44
  border-radius: 3px;
45
45
  }
46
46
 
47
+ .table__scroll-container::-webkit-scrollbar-thumb:hover {
48
+ background: oklch(0% 0 0 / 0.25);
49
+ }
50
+
47
51
  :is([data-theme="dark"], .dark) .table__scroll-container {
48
52
  scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
49
53
  }
@@ -52,6 +56,10 @@
52
56
  background: oklch(100% 0 0 / 0.15);
53
57
  }
54
58
 
59
+ :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb:hover {
60
+ background: oklch(100% 0 0 / 0.25);
61
+ }
62
+
55
63
  /* --------------------------------------------------------------------------
56
64
  Table Content (<table>)
57
65
  -------------------------------------------------------------------------- */
@@ -187,6 +195,11 @@
187
195
  }
188
196
  }
189
197
 
198
+ .table__column[data-sort-direction="ascending"],
199
+ .table__column[data-sort-direction="descending"] {
200
+ color: var(--color-base-content);
201
+ }
202
+
190
203
  .table__column:focus-visible {
191
204
  border-radius: 0.5rem;
192
205
  outline: none;
@@ -241,6 +254,10 @@
241
254
  box-shadow: inset 0 0 0 2px var(--color-accent);
242
255
  }
243
256
 
257
+ .table__row[data-hovered="true"] .table__cell {
258
+ background-color: var(--color-base-200);
259
+ }
260
+
244
261
  /* --------------------------------------------------------------------------
245
262
  Table Cell (<td>)
246
263
  -------------------------------------------------------------------------- */
@@ -270,6 +287,14 @@
270
287
  box-shadow: inset 0 0 0 2px var(--color-accent);
271
288
  }
272
289
 
290
+ .table__expanded-row .table__expanded-cell {
291
+ background-color: color-mix(in oklch, var(--color-base-200) 75%, var(--color-base-100));
292
+ }
293
+
294
+ .table__expanded-cell {
295
+ padding-block: 0.875rem;
296
+ }
297
+
273
298
  /* --------------------------------------------------------------------------
274
299
  Table Footer (div outside <table>)
275
300
  -------------------------------------------------------------------------- */
@@ -279,4 +304,117 @@
279
304
  padding-inline: 1rem;
280
305
  padding-block: 0.625rem;
281
306
  }
307
+
308
+ .table__page-size {
309
+ display: inline-flex;
310
+ align-items: center;
311
+ gap: 0.5rem;
312
+ font-size: 0.75rem;
313
+ font-weight: 600;
314
+ letter-spacing: 0.16em;
315
+ text-transform: uppercase;
316
+ }
317
+
318
+ .table__page-size-label {
319
+ opacity: 0.7;
320
+ }
321
+
322
+ .table__page-size-select {
323
+ min-width: 4.5rem;
324
+ border-radius: 0.75rem;
325
+ border: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
326
+ background-color: var(--color-base-100);
327
+ padding-inline: 0.75rem;
328
+ padding-block: 0.5rem;
329
+ font-size: 0.875rem;
330
+ font-weight: 500;
331
+ letter-spacing: normal;
332
+ text-transform: none;
333
+ color: var(--color-base-content);
334
+ }
335
+
336
+ .table__page-size-select:focus-visible {
337
+ outline: none;
338
+ box-shadow: 0 0 0 2px var(--color-accent);
339
+ }
340
+
341
+ /* --------------------------------------------------------------------------
342
+ Resizable Container
343
+ -------------------------------------------------------------------------- */
344
+ .table__resizable-container {
345
+ position: relative;
346
+ overflow: auto;
347
+ }
348
+
349
+ /* --------------------------------------------------------------------------
350
+ Column Resizer
351
+ -------------------------------------------------------------------------- */
352
+ .table__column-resizer {
353
+ position: absolute;
354
+ top: 50%;
355
+ right: 0;
356
+ box-sizing: content-box;
357
+ height: 1rem;
358
+ width: 1px;
359
+ padding-inline: 0.5rem;
360
+ transform: translate(50%, -50%);
361
+ border: 0;
362
+ border-radius: 1px;
363
+ background-color: transparent;
364
+ background-clip: content-box;
365
+ cursor: col-resize;
366
+ touch-action: none;
367
+ outline: none;
368
+ }
369
+
370
+ @supports (color: color-mix(in lab, red, red)) {
371
+ .table__column-resizer {
372
+ background-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
373
+ }
374
+ }
375
+
376
+ .table__column-resizer[data-hovered="true"],
377
+ .table__column-resizer:hover,
378
+ .table__column-resizer[data-resizing="true"] {
379
+ top: 0;
380
+ height: 100%;
381
+ width: 2px;
382
+ transform: translateX(50%);
383
+ background-color: var(--color-accent);
384
+ }
385
+
386
+ .table__column-resizer[data-focus-visible="true"],
387
+ .table__column-resizer:focus-visible {
388
+ top: 0;
389
+ height: 100%;
390
+ width: 2px;
391
+ transform: translateX(50%);
392
+ background-color: var(--color-focus, var(--color-accent));
393
+ }
394
+
395
+ .table__column:has(.table__column-resizer)::after {
396
+ content: none;
397
+ }
398
+
399
+ /* --------------------------------------------------------------------------
400
+ Load More
401
+ -------------------------------------------------------------------------- */
402
+ .table__load-more td,
403
+ .table__load-more [role="rowheader"] {
404
+ padding-block: 0.75rem;
405
+ text-align: center;
406
+ }
407
+
408
+ .table__load-more td > *,
409
+ .table__load-more [role="rowheader"] > * {
410
+ margin-inline: auto;
411
+ }
412
+
413
+ .table__load-more-content {
414
+ display: flex;
415
+ align-items: center;
416
+ justify-content: center;
417
+ gap: 0.5rem;
418
+ padding-block: 0.5rem;
419
+ }
282
420
  }