@pathscale/ui 1.1.12 → 1.1.13

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 (14) hide show
  1. package/dist/components/glass-panel/GlassPanel.js +3 -5
  2. package/dist/components/pagination/Pagination.css +121 -0
  3. package/dist/components/pagination/Pagination.d.ts +8 -2
  4. package/dist/components/pagination/Pagination.js +113 -7
  5. package/dist/components/streaming-table/StreamingTable.js +39 -92
  6. package/dist/components/table/EnhancedTable.d.ts +1 -1
  7. package/dist/components/table/EnhancedTable.js +68 -51
  8. package/dist/components/table/{table.css → Table.css} +106 -9
  9. package/dist/components/table/Table.d.ts +51 -7
  10. package/dist/components/table/Table.js +220 -28
  11. package/dist/components/table/index.d.ts +2 -1
  12. package/dist/components/table/index.js +14 -1
  13. package/dist/index.d.ts +2 -1
  14. package/package.json +1 -2
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";
@@ -127,6 +127,22 @@ function EnhancedTable_EnhancedTable(props) {
127
127
  return pageCount > 1 || totalRows > pageSize;
128
128
  });
129
129
  const headerGroups = ()=>table.getHeaderGroups();
130
+ const sortDescriptor = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
131
+ const activeSort = table.getState().sorting[0];
132
+ if (!activeSort) return;
133
+ return {
134
+ column: activeSort.id,
135
+ direction: activeSort.desc ? "descending" : "ascending"
136
+ };
137
+ });
138
+ const handleSortChange = (descriptor)=>{
139
+ table.setSorting([
140
+ {
141
+ id: descriptor.column,
142
+ desc: "descending" === descriptor.direction
143
+ }
144
+ ]);
145
+ };
130
146
  const totalColumns = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>table.getVisibleLeafColumns().length + (local.enableRowSelection ? 1 : 0) + (local.expandable ? 1 : 0));
131
147
  const filterTriggerRefs = new Map();
132
148
  const [filterPanelStyle, setFilterPanelStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
@@ -322,6 +338,10 @@ function EnhancedTable_EnhancedTable(props) {
322
338
  get ["class"] () {
323
339
  return (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(tableProps.class, "table-auto");
324
340
  },
341
+ get sortDescriptor () {
342
+ return sortDescriptor();
343
+ },
344
+ onSortChange: handleSortChange,
325
345
  get children () {
326
346
  return [
327
347
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Table_js_0edb6f6c__["default"].Header, {
@@ -339,6 +359,7 @@ function EnhancedTable_EnhancedTable(props) {
339
359
  },
340
360
  get children () {
341
361
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Table_js_0edb6f6c__["default"].Column, {
362
+ id: "expand-control",
342
363
  class: "w-6"
343
364
  });
344
365
  }
@@ -349,6 +370,7 @@ function EnhancedTable_EnhancedTable(props) {
349
370
  },
350
371
  get children () {
351
372
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Table_js_0edb6f6c__["default"].Column, {
373
+ id: "selection-control",
352
374
  class: "w-8",
353
375
  get children () {
354
376
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__checkbox_Checkbox_js_9a9489db__["default"], {
@@ -375,57 +397,52 @@ function EnhancedTable_EnhancedTable(props) {
375
397
  const canSort = local.enableSorting && false !== header.column.columnDef.enableSorting && header.column.getCanSort();
376
398
  const canFilter = local.enableFilters && false !== header.column.columnDef.enableColumnFilter && header.column.getCanFilter();
377
399
  return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Table_js_0edb6f6c__["default"].Column, {
400
+ id: colId,
401
+ allowsSorting: canSort,
378
402
  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
- }
403
+ children: ({ sortDirection })=>(()=>{
404
+ var _el$13 = _tmpl$4(), _el$14 = _el$13.firstChild;
405
+ (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()));
406
+ (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, {
407
+ when: "ascending" === sortDirection,
408
+ get children () {
409
+ return local.sortAscIcon;
410
+ }
411
+ }), null);
412
+ (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, {
413
+ when: "descending" === sortDirection,
414
+ get children () {
415
+ return local.sortDescIcon;
416
+ }
417
+ }), null);
418
+ (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, {
419
+ get when () {
420
+ return canSort && void 0 === sortDirection && local.sortNeutralIcon;
421
+ },
422
+ get children () {
423
+ return local.sortNeutralIcon;
424
+ }
425
+ }), null);
426
+ (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, {
427
+ when: canFilter,
428
+ get children () {
429
+ return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FilterIconTrigger, {
430
+ colId: colId
431
+ });
432
+ }
433
+ }), null);
434
+ (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, {
435
+ when: canFilter,
436
+ get children () {
437
+ return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FilterPanel, {
438
+ get column () {
439
+ return header.column;
440
+ }
441
+ });
442
+ }
443
+ }), null);
444
+ return _el$13;
445
+ })()
429
446
  });
430
447
  }
431
448
  })
package/dist/components/table/{table.css → Table.css} RENAMED
@@ -18,7 +18,7 @@
18
18
  background-color: var(--color-base-200);
19
19
  padding-inline: 0.25rem;
20
20
  padding-bottom: 0.25rem;
21
- border-radius: calc(var(--radius-box, 1rem) * 1.25);
21
+ border-radius: 0.75rem;
22
22
  }
23
23
 
24
24
  /* --------------------------------------------------------------------------
@@ -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
  -------------------------------------------------------------------------- */
@@ -94,13 +102,13 @@
94
102
  }
95
103
 
96
104
  .table-root--secondary .table__column:first-child {
97
- border-top-left-radius: 1rem;
98
- border-bottom-left-radius: 1rem;
105
+ border-top-left-radius: 0.75rem;
106
+ border-bottom-left-radius: 0.75rem;
99
107
  }
100
108
 
101
109
  .table-root--secondary .table__column:last-child {
102
- border-top-right-radius: 1rem;
103
- border-bottom-right-radius: 1rem;
110
+ border-top-right-radius: 0.75rem;
111
+ border-bottom-right-radius: 0.75rem;
104
112
  }
105
113
 
106
114
  .table-root--secondary .table__body tr:first-child td:first-child,
@@ -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;
@@ -197,19 +210,19 @@
197
210
  Table Body (<tbody>)
198
211
  -------------------------------------------------------------------------- */
199
212
  .table__body tr:first-child td:first-child {
200
- border-top-left-radius: 1rem;
213
+ border-top-left-radius: 0.5rem;
201
214
  }
202
215
 
203
216
  .table__body tr:first-child td:last-child {
204
- border-top-right-radius: 1rem;
217
+ border-top-right-radius: 0.5rem;
205
218
  }
206
219
 
207
220
  .table__body tr:last-child td:first-child {
208
- border-bottom-left-radius: 1rem;
221
+ border-bottom-left-radius: 0.5rem;
209
222
  }
210
223
 
211
224
  .table__body tr:last-child td:last-child {
212
- border-bottom-right-radius: 1rem;
225
+ border-bottom-right-radius: 0.5rem;
213
226
  }
214
227
 
215
228
  /* --------------------------------------------------------------------------
@@ -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
  -------------------------------------------------------------------------- */
@@ -279,4 +296,84 @@
279
296
  padding-inline: 1rem;
280
297
  padding-block: 0.625rem;
281
298
  }
299
+
300
+ /* --------------------------------------------------------------------------
301
+ Resizable Container
302
+ -------------------------------------------------------------------------- */
303
+ .table__resizable-container {
304
+ position: relative;
305
+ overflow: auto;
306
+ }
307
+
308
+ /* --------------------------------------------------------------------------
309
+ Column Resizer
310
+ -------------------------------------------------------------------------- */
311
+ .table__column-resizer {
312
+ position: absolute;
313
+ top: 50%;
314
+ right: 0;
315
+ box-sizing: content-box;
316
+ height: 1rem;
317
+ width: 1px;
318
+ padding-inline: 0.5rem;
319
+ transform: translate(50%, -50%);
320
+ border: 0;
321
+ border-radius: 1px;
322
+ background-color: transparent;
323
+ background-clip: content-box;
324
+ cursor: col-resize;
325
+ touch-action: none;
326
+ outline: none;
327
+ }
328
+
329
+ @supports (color: color-mix(in lab, red, red)) {
330
+ .table__column-resizer {
331
+ background-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
332
+ }
333
+ }
334
+
335
+ .table__column-resizer[data-hovered="true"],
336
+ .table__column-resizer:hover,
337
+ .table__column-resizer[data-resizing="true"] {
338
+ top: 0;
339
+ height: 100%;
340
+ width: 2px;
341
+ transform: translateX(50%);
342
+ background-color: var(--color-accent);
343
+ }
344
+
345
+ .table__column-resizer[data-focus-visible="true"],
346
+ .table__column-resizer:focus-visible {
347
+ top: 0;
348
+ height: 100%;
349
+ width: 2px;
350
+ transform: translateX(50%);
351
+ background-color: var(--color-focus, var(--color-accent));
352
+ }
353
+
354
+ .table__column:has(.table__column-resizer)::after {
355
+ content: none;
356
+ }
357
+
358
+ /* --------------------------------------------------------------------------
359
+ Load More
360
+ -------------------------------------------------------------------------- */
361
+ .table__load-more td,
362
+ .table__load-more [role="rowheader"] {
363
+ padding-block: 0.75rem;
364
+ text-align: center;
365
+ }
366
+
367
+ .table__load-more td > *,
368
+ .table__load-more [role="rowheader"] > * {
369
+ margin-inline: auto;
370
+ }
371
+
372
+ .table__load-more-content {
373
+ display: flex;
374
+ align-items: center;
375
+ justify-content: center;
376
+ gap: 0.5rem;
377
+ padding-block: 0.5rem;
378
+ }
282
379
  }
package/dist/components/table/Table.d.ts CHANGED
@@ -1,22 +1,62 @@
1
- import "./table.css";
2
- import { type Component, type JSX } from "solid-js";
1
+ import "./Table.css";
2
+ import { type Accessor, type Component, type JSX } from "solid-js";
3
3
  import type { IComponentBaseProps } from "../types";
4
4
  type TableVariant = "primary" | "secondary";
5
- export declare const useTableContext: () => {
6
- variant: TableVariant;
5
+ type TableSortDirection = "ascending" | "descending";
6
+ type TableSortDescriptor = {
7
+ column: string;
8
+ direction: TableSortDirection;
7
9
  };
10
+ type TableColumnRenderProps = {
11
+ sortDirection: TableSortDirection | undefined;
12
+ };
13
+ type TableColumnChildren = JSX.Element | ((props: TableColumnRenderProps) => JSX.Element);
14
+ type TableContextValue = {
15
+ variant: Accessor<TableVariant>;
16
+ };
17
+ type TableContentContextValue = {
18
+ sortDescriptor: Accessor<TableSortDescriptor | undefined>;
19
+ onSortChange?: (descriptor: TableSortDescriptor) => void;
20
+ };
21
+ export declare const useTableContext: () => TableContextValue;
22
+ export declare const useTableContentContext: () => TableContentContextValue;
8
23
  export type TableRootProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
9
24
  variant?: TableVariant;
10
25
  };
26
+ declare const TableRoot: Component<TableRootProps>;
11
27
  export type TableScrollContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
12
- export type TableContentProps = JSX.HTMLAttributes<HTMLTableElement> & IComponentBaseProps;
28
+ declare const TableScrollContainer: Component<TableScrollContainerProps>;
29
+ export type TableContentProps = JSX.HTMLAttributes<HTMLTableElement> & IComponentBaseProps & {
30
+ sortDescriptor?: TableSortDescriptor;
31
+ onSortChange?: (descriptor: TableSortDescriptor) => void;
32
+ };
33
+ declare const TableContent: Component<TableContentProps>;
13
34
  export type TableHeaderProps = JSX.HTMLAttributes<HTMLTableSectionElement> & IComponentBaseProps;
14
- export type TableColumnProps = JSX.ThHTMLAttributes<HTMLTableCellElement> & IComponentBaseProps;
35
+ declare const TableHeader: Component<TableHeaderProps>;
36
+ export type TableColumnProps = Omit<JSX.ThHTMLAttributes<HTMLTableCellElement>, "id" | "children"> & IComponentBaseProps & {
37
+ id: string;
38
+ allowsSorting?: boolean;
39
+ children?: TableColumnChildren;
40
+ };
41
+ declare const TableColumn: Component<TableColumnProps>;
15
42
  export type TableBodyProps = JSX.HTMLAttributes<HTMLTableSectionElement> & IComponentBaseProps;
43
+ declare const TableBody: Component<TableBodyProps>;
16
44
  export type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps;
45
+ declare const TableRow: Component<TableRowProps>;
17
46
  export type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement> & IComponentBaseProps;
47
+ declare const TableCell: Component<TableCellProps>;
18
48
  export type TableFooterProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
19
- export type { TableVariant };
49
+ declare const TableFooter: Component<TableFooterProps>;
50
+ export type TableResizableContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
51
+ declare const TableResizableContainer: Component<TableResizableContainerProps>;
52
+ export type TableColumnResizerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
53
+ declare const TableColumnResizer: Component<TableColumnResizerProps>;
54
+ export type TableLoadMoreProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps;
55
+ declare const TableLoadMore: Component<TableLoadMoreProps>;
56
+ export type TableLoadMoreContentProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
57
+ declare const TableLoadMoreContent: Component<TableLoadMoreContentProps>;
58
+ export type { TableVariant, TableSortDirection, TableSortDescriptor, TableColumnRenderProps, };
59
+ export { TableRoot, TableScrollContainer, TableContent, TableHeader, TableColumn, TableBody, TableRow, TableCell, TableFooter, TableResizableContainer, TableColumnResizer, TableLoadMore, TableLoadMoreContent, };
20
60
  declare const _default: Component<TableRootProps> & {
21
61
  Root: Component<TableRootProps>;
22
62
  ScrollContainer: Component<TableScrollContainerProps>;
@@ -27,5 +67,9 @@ declare const _default: Component<TableRootProps> & {
27
67
  Row: Component<TableRowProps>;
28
68
  Cell: Component<TableCellProps>;
29
69
  Footer: Component<TableFooterProps>;
70
+ ResizableContainer: Component<TableResizableContainerProps>;
71
+ ColumnResizer: Component<TableColumnResizerProps>;
72
+ LoadMore: Component<TableLoadMoreProps>;
73
+ LoadMoreContent: Component<TableLoadMoreContentProps>;
30
74
  };
31
75
  export default _default;