@ui-organized/svelte-table 0.0.0-stage → 6.0.0

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 (208) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +99 -2
  3. package/dist/DataTable/DataTable.svelte +62 -0
  4. package/dist/DataTable/DataTable.svelte.d.ts +29 -0
  5. package/dist/DataTable/DataTable.svelte.d.ts.map +1 -0
  6. package/dist/DataTable/DataTable.test.svelte.d.ts +2 -0
  7. package/dist/DataTable/DataTable.test.svelte.d.ts.map +1 -0
  8. package/dist/DataTable/DataTable.test.svelte.js +360 -0
  9. package/dist/DataTable/index.d.ts +2 -0
  10. package/dist/DataTable/index.d.ts.map +1 -0
  11. package/dist/DataTable/index.js +1 -0
  12. package/dist/components/Table/CellEditor.svelte +29 -0
  13. package/dist/components/Table/CellEditor.svelte.d.ts +8 -0
  14. package/dist/components/Table/CellEditor.svelte.d.ts.map +1 -0
  15. package/dist/components/Table/MoveButtons.svelte +60 -0
  16. package/dist/components/Table/MoveButtons.svelte.d.ts +8 -0
  17. package/dist/components/Table/MoveButtons.svelte.d.ts.map +1 -0
  18. package/dist/components/Table/ResizeHandle.svelte +82 -0
  19. package/dist/components/Table/ResizeHandle.svelte.d.ts +28 -0
  20. package/dist/components/Table/ResizeHandle.svelte.d.ts.map +1 -0
  21. package/dist/components/Table/Table.svelte +17 -0
  22. package/dist/components/Table/Table.svelte.d.ts +9 -0
  23. package/dist/components/Table/Table.svelte.d.ts.map +1 -0
  24. package/dist/components/Table/TableBody.svelte +78 -0
  25. package/dist/components/Table/TableBody.svelte.d.ts +30 -0
  26. package/dist/components/Table/TableBody.svelte.d.ts.map +1 -0
  27. package/dist/components/Table/TableCell.svelte +106 -0
  28. package/dist/components/Table/TableCell.svelte.d.ts +34 -0
  29. package/dist/components/Table/TableCell.svelte.d.ts.map +1 -0
  30. package/dist/components/Table/TableFooter.svelte +34 -0
  31. package/dist/components/Table/TableFooter.svelte.d.ts +9 -0
  32. package/dist/components/Table/TableFooter.svelte.d.ts.map +1 -0
  33. package/dist/components/Table/TableHeadCell.svelte +157 -0
  34. package/dist/components/Table/TableHeadCell.svelte.d.ts +29 -0
  35. package/dist/components/Table/TableHeadCell.svelte.d.ts.map +1 -0
  36. package/dist/components/Table/TableHeader.svelte +22 -0
  37. package/dist/components/Table/TableHeader.svelte.d.ts +7 -0
  38. package/dist/components/Table/TableHeader.svelte.d.ts.map +1 -0
  39. package/dist/components/Table/TableRow.svelte +84 -0
  40. package/dist/components/Table/TableRow.svelte.d.ts +32 -0
  41. package/dist/components/Table/TableRow.svelte.d.ts.map +1 -0
  42. package/dist/components/Table/TableViewport.svelte +69 -0
  43. package/dist/components/Table/TableViewport.svelte.d.ts +10 -0
  44. package/dist/components/Table/TableViewport.svelte.d.ts.map +1 -0
  45. package/dist/components/Table/index.d.ts +23 -0
  46. package/dist/components/Table/index.d.ts.map +1 -0
  47. package/dist/components/Table/index.js +22 -0
  48. package/dist/components/TableCards/TableCard.svelte +96 -0
  49. package/dist/components/TableCards/TableCard.svelte.d.ts +31 -0
  50. package/dist/components/TableCards/TableCard.svelte.d.ts.map +1 -0
  51. package/dist/components/TableCards/TableCards.svelte +61 -0
  52. package/dist/components/TableCards/TableCards.svelte.d.ts +7 -0
  53. package/dist/components/TableCards/TableCards.svelte.d.ts.map +1 -0
  54. package/dist/components/TableCards/index.d.ts +3 -0
  55. package/dist/components/TableCards/index.d.ts.map +1 -0
  56. package/dist/components/TableCards/index.js +2 -0
  57. package/dist/components/TableDetailSheet/TableDetailSheet.svelte +130 -0
  58. package/dist/components/TableDetailSheet/TableDetailSheet.svelte.d.ts +8 -0
  59. package/dist/components/TableDetailSheet/TableDetailSheet.svelte.d.ts.map +1 -0
  60. package/dist/components/TableDetailSheet/index.d.ts +2 -0
  61. package/dist/components/TableDetailSheet/index.d.ts.map +1 -0
  62. package/dist/components/TableDetailSheet/index.js +1 -0
  63. package/dist/components/TableFilters/TableFilterAdd.svelte +89 -0
  64. package/dist/components/TableFilters/TableFilterAdd.svelte.d.ts +15 -0
  65. package/dist/components/TableFilters/TableFilterAdd.svelte.d.ts.map +1 -0
  66. package/dist/components/TableFilters/TableFilterChip.svelte +164 -0
  67. package/dist/components/TableFilters/TableFilterChip.svelte.d.ts +9 -0
  68. package/dist/components/TableFilters/TableFilterChip.svelte.d.ts.map +1 -0
  69. package/dist/components/TableFilters/TableFilterEditor.svelte +40 -0
  70. package/dist/components/TableFilters/TableFilterEditor.svelte.d.ts +9 -0
  71. package/dist/components/TableFilters/TableFilterEditor.svelte.d.ts.map +1 -0
  72. package/dist/components/TableFilters/TableFilterValueEditor.svelte +209 -0
  73. package/dist/components/TableFilters/TableFilterValueEditor.svelte.d.ts +10 -0
  74. package/dist/components/TableFilters/TableFilterValueEditor.svelte.d.ts.map +1 -0
  75. package/dist/components/TableFilters/TableFilters.svelte +51 -0
  76. package/dist/components/TableFilters/TableFilters.svelte.d.ts +7 -0
  77. package/dist/components/TableFilters/TableFilters.svelte.d.ts.map +1 -0
  78. package/dist/components/TableFilters/index.d.ts +7 -0
  79. package/dist/components/TableFilters/index.d.ts.map +1 -0
  80. package/dist/components/TableFilters/index.js +6 -0
  81. package/dist/components/TableFilters/useAutoFocusField.d.ts +30 -0
  82. package/dist/components/TableFilters/useAutoFocusField.d.ts.map +1 -0
  83. package/dist/components/TableFilters/useAutoFocusField.js +59 -0
  84. package/dist/components/TablePagination/TablePagination.svelte +61 -0
  85. package/dist/components/TablePagination/TablePagination.svelte.d.ts +9 -0
  86. package/dist/components/TablePagination/TablePagination.svelte.d.ts.map +1 -0
  87. package/dist/components/TablePagination/index.d.ts +2 -0
  88. package/dist/components/TablePagination/index.d.ts.map +1 -0
  89. package/dist/components/TablePagination/index.js +1 -0
  90. package/dist/components/TableRowActions/TableRowActions.svelte +68 -0
  91. package/dist/components/TableRowActions/TableRowActions.svelte.d.ts +37 -0
  92. package/dist/components/TableRowActions/TableRowActions.svelte.d.ts.map +1 -0
  93. package/dist/components/TableRowActions/index.d.ts +2 -0
  94. package/dist/components/TableRowActions/index.d.ts.map +1 -0
  95. package/dist/components/TableRowActions/index.js +1 -0
  96. package/dist/components/TableSelectionBar/TableSelectionBar.svelte +88 -0
  97. package/dist/components/TableSelectionBar/TableSelectionBar.svelte.d.ts +30 -0
  98. package/dist/components/TableSelectionBar/TableSelectionBar.svelte.d.ts.map +1 -0
  99. package/dist/components/TableSelectionBar/index.d.ts +2 -0
  100. package/dist/components/TableSelectionBar/index.d.ts.map +1 -0
  101. package/dist/components/TableSelectionBar/index.js +1 -0
  102. package/dist/components/TableSelectionFooter/TableSelectionFooter.svelte +38 -0
  103. package/dist/components/TableSelectionFooter/TableSelectionFooter.svelte.d.ts +7 -0
  104. package/dist/components/TableSelectionFooter/TableSelectionFooter.svelte.d.ts.map +1 -0
  105. package/dist/components/TableSelectionFooter/index.d.ts +2 -0
  106. package/dist/components/TableSelectionFooter/index.d.ts.map +1 -0
  107. package/dist/components/TableSelectionFooter/index.js +1 -0
  108. package/dist/components/TableSheets/TableFilterSheet.svelte +150 -0
  109. package/dist/components/TableSheets/TableFilterSheet.svelte.d.ts +8 -0
  110. package/dist/components/TableSheets/TableFilterSheet.svelte.d.ts.map +1 -0
  111. package/dist/components/TableSheets/TableFilterSheetCondition.svelte +53 -0
  112. package/dist/components/TableSheets/TableFilterSheetCondition.svelte.d.ts +9 -0
  113. package/dist/components/TableSheets/TableFilterSheetCondition.svelte.d.ts.map +1 -0
  114. package/dist/components/TableSheets/TableSheetButton.svelte +44 -0
  115. package/dist/components/TableSheets/TableSheetButton.svelte.d.ts +15 -0
  116. package/dist/components/TableSheets/TableSheetButton.svelte.d.ts.map +1 -0
  117. package/dist/components/TableSheets/TableSortSheet.svelte +100 -0
  118. package/dist/components/TableSheets/TableSortSheet.svelte.d.ts +8 -0
  119. package/dist/components/TableSheets/TableSortSheet.svelte.d.ts.map +1 -0
  120. package/dist/components/TableSheets/index.d.ts +4 -0
  121. package/dist/components/TableSheets/index.d.ts.map +1 -0
  122. package/dist/components/TableSheets/index.js +3 -0
  123. package/dist/components/TableStates/TableEmpty.svelte +35 -0
  124. package/dist/components/TableStates/TableEmpty.svelte.d.ts +11 -0
  125. package/dist/components/TableStates/TableEmpty.svelte.d.ts.map +1 -0
  126. package/dist/components/TableStates/TableError.svelte +26 -0
  127. package/dist/components/TableStates/TableError.svelte.d.ts +10 -0
  128. package/dist/components/TableStates/TableError.svelte.d.ts.map +1 -0
  129. package/dist/components/TableStates/TableLoading.svelte +33 -0
  130. package/dist/components/TableStates/TableLoading.svelte.d.ts +8 -0
  131. package/dist/components/TableStates/TableLoading.svelte.d.ts.map +1 -0
  132. package/dist/components/TableStates/index.d.ts +4 -0
  133. package/dist/components/TableStates/index.d.ts.map +1 -0
  134. package/dist/components/TableStates/index.js +3 -0
  135. package/dist/components/TableSubBar/TableSubBar.svelte +34 -0
  136. package/dist/components/TableSubBar/TableSubBar.svelte.d.ts +7 -0
  137. package/dist/components/TableSubBar/TableSubBar.svelte.d.ts.map +1 -0
  138. package/dist/components/TableSubBar/index.d.ts +2 -0
  139. package/dist/components/TableSubBar/index.d.ts.map +1 -0
  140. package/dist/components/TableSubBar/index.js +1 -0
  141. package/dist/components/TableToolbar/TableActions.svelte +40 -0
  142. package/dist/components/TableToolbar/TableActions.svelte.d.ts +9 -0
  143. package/dist/components/TableToolbar/TableActions.svelte.d.ts.map +1 -0
  144. package/dist/components/TableToolbar/TableExportMenu.svelte +60 -0
  145. package/dist/components/TableToolbar/TableExportMenu.svelte.d.ts +8 -0
  146. package/dist/components/TableToolbar/TableExportMenu.svelte.d.ts.map +1 -0
  147. package/dist/components/TableToolbar/TableReorderToggle.svelte +27 -0
  148. package/dist/components/TableToolbar/TableReorderToggle.svelte.d.ts +7 -0
  149. package/dist/components/TableToolbar/TableReorderToggle.svelte.d.ts.map +1 -0
  150. package/dist/components/TableToolbar/TableScrollButtons.svelte +54 -0
  151. package/dist/components/TableToolbar/TableScrollButtons.svelte.d.ts +9 -0
  152. package/dist/components/TableToolbar/TableScrollButtons.svelte.d.ts.map +1 -0
  153. package/dist/components/TableToolbar/TableSearch.svelte +24 -0
  154. package/dist/components/TableToolbar/TableSearch.svelte.d.ts +9 -0
  155. package/dist/components/TableToolbar/TableSearch.svelte.d.ts.map +1 -0
  156. package/dist/components/TableToolbar/TableSortMenu.svelte +97 -0
  157. package/dist/components/TableToolbar/TableSortMenu.svelte.d.ts +8 -0
  158. package/dist/components/TableToolbar/TableSortMenu.svelte.d.ts.map +1 -0
  159. package/dist/components/TableToolbar/TableToolbar.svelte +113 -0
  160. package/dist/components/TableToolbar/TableToolbar.svelte.d.ts +9 -0
  161. package/dist/components/TableToolbar/TableToolbar.svelte.d.ts.map +1 -0
  162. package/dist/components/TableToolbar/TableViewOptions.svelte +69 -0
  163. package/dist/components/TableToolbar/TableViewOptions.svelte.d.ts +8 -0
  164. package/dist/components/TableToolbar/TableViewOptions.svelte.d.ts.map +1 -0
  165. package/dist/components/TableToolbar/index.d.ts +9 -0
  166. package/dist/components/TableToolbar/index.d.ts.map +1 -0
  167. package/dist/components/TableToolbar/index.js +8 -0
  168. package/dist/core/ActionsHeader.svelte +8 -0
  169. package/dist/core/ActionsHeader.svelte.d.ts +27 -0
  170. package/dist/core/ActionsHeader.svelte.d.ts.map +1 -0
  171. package/dist/core/SelectAllCell.svelte +21 -0
  172. package/dist/core/SelectAllCell.svelte.d.ts +19 -0
  173. package/dist/core/SelectAllCell.svelte.d.ts.map +1 -0
  174. package/dist/core/SelectCell.svelte +37 -0
  175. package/dist/core/SelectCell.svelte.d.ts +8 -0
  176. package/dist/core/SelectCell.svelte.d.ts.map +1 -0
  177. package/dist/core/createDataTable.svelte.d.ts +4 -0
  178. package/dist/core/createDataTable.svelte.d.ts.map +1 -0
  179. package/dist/core/createDataTable.svelte.js +1152 -0
  180. package/dist/core/createDataTable.test.svelte.d.ts +2 -0
  181. package/dist/core/createDataTable.test.svelte.d.ts.map +1 -0
  182. package/dist/core/createDataTable.test.svelte.js +156 -0
  183. package/dist/core/createDeferred.svelte.d.ts +38 -0
  184. package/dist/core/createDeferred.svelte.d.ts.map +1 -0
  185. package/dist/core/createDeferred.svelte.js +81 -0
  186. package/dist/core/elementRef.d.ts +17 -0
  187. package/dist/core/elementRef.d.ts.map +1 -0
  188. package/dist/core/elementRef.js +20 -0
  189. package/dist/core/props.d.ts +3 -0
  190. package/dist/core/props.d.ts.map +1 -0
  191. package/dist/core/props.js +46 -0
  192. package/dist/core/systemColumns.d.ts +16 -0
  193. package/dist/core/systemColumns.d.ts.map +1 -0
  194. package/dist/core/systemColumns.js +53 -0
  195. package/dist/core/tableContext.d.ts +7 -0
  196. package/dist/core/tableContext.d.ts.map +1 -0
  197. package/dist/core/tableContext.js +30 -0
  198. package/dist/core/trackStore.svelte.d.ts +24 -0
  199. package/dist/core/trackStore.svelte.d.ts.map +1 -0
  200. package/dist/core/trackStore.svelte.js +28 -0
  201. package/dist/core/types.d.ts +397 -0
  202. package/dist/core/types.d.ts.map +1 -0
  203. package/dist/core/types.js +1 -0
  204. package/dist/index.d.ts +31 -0
  205. package/dist/index.d.ts.map +1 -0
  206. package/dist/index.js +31 -0
  207. package/dist/styles.css +895 -0
  208. package/package.json +77 -3
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableScrollButtons.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/TableScrollButtons.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,gBAAgB,GAAI;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA4BtF,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
@@ -0,0 +1,24 @@
1
+ <script lang="ts">
2
+ import { clsx } from "clsx";
3
+ import { SearchInput } from "@ui-organized/svelte";
4
+ import { getTable } from "../../core/tableContext.js";
5
+
6
+ let {
7
+ placeholder = "Search",
8
+ label,
9
+ class: className,
10
+ }: { placeholder?: string; label?: string; class?: string } = $props();
11
+
12
+ const table = getTable();
13
+ const name = $derived(label ?? `Search ${table.label}`);
14
+ </script>
15
+
16
+ <SearchInput
17
+ class={clsx("data-table__search", className)}
18
+ size={table.size}
19
+ value={table.search}
20
+ {placeholder}
21
+ aria-label={name}
22
+ oninput={(event) => table.setSearch(event.currentTarget.value)}
23
+ onClear={() => table.setSearch("")}
24
+ />
@@ -0,0 +1,9 @@
1
+ type $$ComponentProps = {
2
+ placeholder?: string;
3
+ label?: string;
4
+ class?: string;
5
+ };
6
+ declare const TableSearch: import("svelte").Component<$$ComponentProps, {}, "">;
7
+ type TableSearch = ReturnType<typeof TableSearch>;
8
+ export default TableSearch;
9
+ //# sourceMappingURL=TableSearch.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableSearch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/TableSearch.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAoBnF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
@@ -0,0 +1,97 @@
1
+ <!--
2
+ Sorting, from the header rather than from a column.
3
+
4
+ The column headers already sort, so in table mode this is a convenience. In
5
+ **card mode it is the only sort control there is** — there are no headers to
6
+ click — and a table that silently loses the ability to sort at 640px is a table
7
+ that is broken on phones.
8
+
9
+ One column at a time. Multi-column sort stays where it is discoverable and
10
+ cheap: shift-clicking headers.
11
+ -->
12
+ <script lang="ts">
13
+ import {
14
+ Button,
15
+ Menu,
16
+ MenuContent,
17
+ MenuGroup,
18
+ MenuGroupLabel,
19
+ MenuItem,
20
+ MenuRadioGroup,
21
+ MenuRadioItem,
22
+ MenuSeparator,
23
+ MenuTrigger,
24
+ } from "@ui-organized/svelte";
25
+ import { getTable } from "../../core/tableContext.js";
26
+ import { internalGlyph as glyph } from "@ui-organized/svelte";
27
+
28
+ let { label = "Sort", class: className }: { label?: string; class?: string } = $props();
29
+ const table = getTable();
30
+
31
+ const columns = $derived(table.table.getAllLeafColumns().filter((c) => c.getCanSort()));
32
+ const active = $derived(table.state.sorting?.[0]);
33
+ const activeId = $derived(active?.id ?? "");
34
+ const direction = $derived(active?.desc ? "desc" : "asc");
35
+ const triggerIcon = $derived(glyph(activeId ? (active?.desc ? "sort-desc" : "sort-asc") : "sort"));
36
+
37
+ const headerOf = (column: (typeof columns)[number]) =>
38
+ typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
39
+ </script>
40
+
41
+ {#if columns.length > 0}
42
+ <Menu>
43
+ <MenuTrigger>
44
+ {#snippet asChild(props)}
45
+ <Button
46
+ {...(props() as Record<string, never>)}
47
+ intent="secondary"
48
+ size={table.size}
49
+ icon={triggerIcon}
50
+ aria-label={label}
51
+ class={className}
52
+ />
53
+ {/snippet}
54
+ </MenuTrigger>
55
+ <MenuContent align="end" class="data-table__sort-menu">
56
+ <MenuGroup>
57
+ <MenuGroupLabel>Sort by</MenuGroupLabel>
58
+ <MenuRadioGroup
59
+ value={activeId}
60
+ onValueChange={(id) =>
61
+ table.table.setSorting(id ? [{ id, desc: direction === "desc" }] : [])}
62
+ >
63
+ {#each columns as column (column.id)}
64
+ <MenuRadioItem value={column.id}>{headerOf(column)}</MenuRadioItem>
65
+ {/each}
66
+ </MenuRadioGroup>
67
+ </MenuGroup>
68
+
69
+ <MenuSeparator />
70
+
71
+ <MenuGroup>
72
+ <MenuGroupLabel>Direction</MenuGroupLabel>
73
+ <MenuRadioGroup
74
+ value={direction}
75
+ onValueChange={(next) => {
76
+ if (activeId) table.table.setSorting([{ id: activeId, desc: next === "desc" }]);
77
+ }}
78
+ >
79
+ <!--
80
+ Disabled rather than hidden: the choice is always part of the menu's
81
+ shape, and a menu that changes length as you use it is harder to aim
82
+ at the second time.
83
+ -->
84
+ <MenuRadioItem value="asc" disabled={!activeId}>Ascending</MenuRadioItem>
85
+ <MenuRadioItem value="desc" disabled={!activeId}>Descending</MenuRadioItem>
86
+ </MenuRadioGroup>
87
+ </MenuGroup>
88
+
89
+ {#if activeId}
90
+ <MenuSeparator />
91
+ <MenuItem value="clear-sorting" onSelect={() => table.table.setSorting([])}>
92
+ Clear sorting
93
+ </MenuItem>
94
+ {/if}
95
+ </MenuContent>
96
+ </Menu>
97
+ {/if}
@@ -0,0 +1,8 @@
1
+ type $$ComponentProps = {
2
+ label?: string;
3
+ class?: string;
4
+ };
5
+ declare const TableSortMenu: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type TableSortMenu = ReturnType<typeof TableSortMenu>;
7
+ export default TableSortMenu;
8
+ //# sourceMappingURL=TableSortMenu.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableSortMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/TableSortMenu.svelte.ts"],"names":[],"mappings":"AAkBC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA+D7D,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
@@ -0,0 +1,113 @@
1
+ <!--
2
+ The row above the table: search, filters, and the controls that change what the
3
+ table shows rather than what it contains.
4
+
5
+ Not a `Toolbar` — that component is a `role="toolbar"` with roving focus, which
6
+ is right for a cluster of icon buttons and wrong for a row containing a text
7
+ input.
8
+ -->
9
+ <script lang="ts">
10
+ import type { Snippet } from "svelte";
11
+ import { clsx } from "clsx";
12
+ import { Divider } from "@ui-organized/svelte";
13
+ import { getTable } from "../../core/tableContext.js";
14
+ import { TableFilterAdd } from "../TableFilters/index.js";
15
+ import { TableSelectionBar } from "../TableSelectionBar/index.js";
16
+ import { TableFilterSheet, TableSortSheet } from "../TableSheets/index.js";
17
+ import TableActions from "./TableActions.svelte";
18
+ import TableExportMenu from "./TableExportMenu.svelte";
19
+ import TableScrollButtons from "./TableScrollButtons.svelte";
20
+ import TableSearch from "./TableSearch.svelte";
21
+ import TableSortMenu from "./TableSortMenu.svelte";
22
+ import TableViewOptions from "./TableViewOptions.svelte";
23
+ import TableReorderToggle from "./TableReorderToggle.svelte";
24
+
25
+ let { class: className, children }: { class?: string; children?: Snippet } = $props();
26
+ const table = getTable();
27
+
28
+ const searchable = $derived(table.options.searchable ?? true);
29
+ const hideable = $derived(table.options.hideableColumns ?? false);
30
+ const exportable = $derived(table.options.exportable ?? false);
31
+ const filterable = $derived(table.options.filterable ?? true);
32
+ const actions = $derived(table.options.actions ?? []);
33
+ const sortMenu = $derived(
34
+ (table.options.sortMenu ?? true) &&
35
+ (table.options.sortable ?? true) &&
36
+ table.table.getAllLeafColumns().some((column) => column.getCanSort()),
37
+ );
38
+
39
+ const selecting = $derived(table.selection.count > 0);
40
+
41
+ /**
42
+ * `scroll.overflowing` counts: a table whose only chrome is the two scroll
43
+ * buttons still needs the row to put them in — columns off the right edge are
44
+ * no less hidden for the table having no search box. So does a selection: its
45
+ * bulk actions live in this row.
46
+ */
47
+ const render = $derived(
48
+ selecting ||
49
+ searchable ||
50
+ hideable ||
51
+ exportable ||
52
+ filterable ||
53
+ sortMenu ||
54
+ table.scroll.state.overflowing ||
55
+ table.reorder.mode === "toggle" ||
56
+ actions.length > 0,
57
+ );
58
+ </script>
59
+
60
+ {#if children}
61
+ <div class={clsx("data-table__toolbar", className)}>{@render children()}</div>
62
+ {:else if render}
63
+ <!--
64
+ One row. The filter chips sit on the line below, in `TableSubBar`: they
65
+ wrap, often onto a second and third line, and sharing this row with them
66
+ would shunt the controls around every time a filter is added.
67
+
68
+ While rows are selected, the bulk actions take the place of the table's own
69
+ controls. What to do with the selection is the decision in front of the
70
+ user, and sorting or adding a filter underneath it would change which rows
71
+ it means. Clearing the selection brings the controls back.
72
+ -->
73
+ <div class={clsx("data-table__toolbar", className)}>
74
+ {#if searchable}<TableSearch />{/if}
75
+ <div class="data-table__toolbar-spacer"></div>
76
+
77
+ {#if selecting}
78
+ <TableSelectionBar />
79
+ <!-- Stays: "Download selected rows" and "Copy selection" are actions on
80
+ the selection, and live nowhere else. -->
81
+ {#if exportable}<TableExportMenu />{/if}
82
+ {:else}
83
+ <TableActions />
84
+ <!--
85
+ Only when there is something on both sides of it. A rule with nothing to
86
+ its left is a rule separating the toolbar from its own edge, which says
87
+ nothing.
88
+ -->
89
+ {#if actions.length > 0}
90
+ <Divider orientation="vertical" class="data-table__toolbar-divider" />
91
+ {/if}
92
+
93
+ <!--
94
+ Card mode trades the two menus for labelled buttons that open a bottom
95
+ sheet each, with what is applied counted on the button: there are no
96
+ column headers to sort from and no room for a row of chips above the
97
+ cards.
98
+ -->
99
+ {#if table.mode === "cards"}
100
+ {#if sortMenu}<TableSortSheet />{/if}
101
+ {#if filterable}<TableFilterSheet />{/if}
102
+ {:else}
103
+ {#if sortMenu}<TableSortMenu />{/if}
104
+ {#if filterable}<TableFilterAdd iconOnly />{/if}
105
+ {/if}
106
+ {#if exportable}<TableExportMenu />{/if}
107
+ {#if hideable}<TableViewOptions />{/if}
108
+ <TableReorderToggle />
109
+ {/if}
110
+ <!-- Last, and only while the viewport is actually hiding columns. -->
111
+ <TableScrollButtons />
112
+ </div>
113
+ {/if}
@@ -0,0 +1,9 @@
1
+ import type { Snippet } from "svelte";
2
+ type $$ComponentProps = {
3
+ class?: string;
4
+ children?: Snippet;
5
+ };
6
+ declare const TableToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
7
+ type TableToolbar = ReturnType<typeof TableToolbar>;
8
+ export default TableToolbar;
9
+ //# sourceMappingURL=TableToolbar.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableToolbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/TableToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAerC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA2FjE,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
@@ -0,0 +1,69 @@
1
+ <!--
2
+ Column visibility, and — when reordering is on — the keyboard-reachable half of
3
+ reordering. A drag-only affordance fails the a11y gate, so the menu is the
4
+ primary control and the drag is the enhancement.
5
+ -->
6
+ <script lang="ts">
7
+ import {
8
+ Button,
9
+ Menu,
10
+ MenuCheckboxItem,
11
+ MenuContent,
12
+ MenuGroup,
13
+ MenuGroupLabel,
14
+ MenuItem,
15
+ MenuSeparator,
16
+ MenuTrigger,
17
+ } from "@ui-organized/svelte";
18
+ import { toggleableColumns } from "@ui-organized/table-core";
19
+ import { getTable } from "../../core/tableContext.js";
20
+ import { internalGlyph as glyph } from "@ui-organized/svelte";
21
+
22
+ let { label = "Columns", class: className }: { label?: string; class?: string } = $props();
23
+ const table = getTable();
24
+ const columns = $derived(toggleableColumns(table.table.getAllLeafColumns()));
25
+ const headerOf = (column: (typeof columns)[number]) =>
26
+ typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
27
+ </script>
28
+
29
+ {#if columns.length > 0}
30
+ <Menu>
31
+ <MenuTrigger>
32
+ {#snippet asChild(props)}
33
+ <Button
34
+ {...(props() as Record<string, never>)}
35
+ intent="secondary"
36
+ size={table.size}
37
+ icon={glyph("settings")}
38
+ aria-label={label}
39
+ />
40
+ {/snippet}
41
+ </MenuTrigger>
42
+ <MenuContent align="end" class={className}>
43
+ <MenuGroup>
44
+ <MenuGroupLabel>Visible columns</MenuGroupLabel>
45
+ {#each columns as column (column.id)}
46
+ <MenuCheckboxItem
47
+ value={column.id}
48
+ checked={column.getIsVisible()}
49
+ onCheckedChange={(checked) => column.toggleVisibility(checked)}
50
+ >
51
+ {headerOf(column)}
52
+ </MenuCheckboxItem>
53
+ {/each}
54
+ </MenuGroup>
55
+ {#if table.options.reorderable}
56
+ <MenuSeparator />
57
+ <MenuGroup>
58
+ <MenuGroupLabel>Reset</MenuGroupLabel>
59
+ <MenuItem value="reset-order" onSelect={() => table.table.resetColumnOrder()}>
60
+ Reset column order
61
+ </MenuItem>
62
+ <MenuItem value="reset-sizing" onSelect={() => table.table.resetColumnSizing()}>
63
+ Reset column widths
64
+ </MenuItem>
65
+ </MenuGroup>
66
+ {/if}
67
+ </MenuContent>
68
+ </Menu>
69
+ {/if}
@@ -0,0 +1,8 @@
1
+ type $$ComponentProps = {
2
+ label?: string;
3
+ class?: string;
4
+ };
5
+ declare const TableViewOptions: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type TableViewOptions = ReturnType<typeof TableViewOptions>;
7
+ export default TableViewOptions;
8
+ //# sourceMappingURL=TableViewOptions.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableViewOptions.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/TableViewOptions.svelte.ts"],"names":[],"mappings":"AAkBC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAiD7D,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,9 @@
1
+ export { default as TableToolbar } from "./TableToolbar.svelte";
2
+ export { default as TableActions } from "./TableActions.svelte";
3
+ export { default as TableSearch } from "./TableSearch.svelte";
4
+ export { default as TableSortMenu } from "./TableSortMenu.svelte";
5
+ export { default as TableViewOptions } from "./TableViewOptions.svelte";
6
+ export { default as TableReorderToggle } from "./TableReorderToggle.svelte";
7
+ export { default as TableExportMenu } from "./TableExportMenu.svelte";
8
+ export { default as TableScrollButtons } from "./TableScrollButtons.svelte";
9
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC"}
@@ -0,0 +1,8 @@
1
+ export { default as TableToolbar } from "./TableToolbar.svelte";
2
+ export { default as TableActions } from "./TableActions.svelte";
3
+ export { default as TableSearch } from "./TableSearch.svelte";
4
+ export { default as TableSortMenu } from "./TableSortMenu.svelte";
5
+ export { default as TableViewOptions } from "./TableViewOptions.svelte";
6
+ export { default as TableReorderToggle } from "./TableReorderToggle.svelte";
7
+ export { default as TableExportMenu } from "./TableExportMenu.svelte";
8
+ export { default as TableScrollButtons } from "./TableScrollButtons.svelte";
@@ -0,0 +1,8 @@
1
+ <!--
2
+ The actions column's header: a name for assistive tech and nothing visible.
3
+
4
+ A component rather than a plain string, because the string would be *shown* —
5
+ a column of ellipsis buttons under a visible "Actions" heading is not what the
6
+ design draws, and a column with no accessible name at all is worse.
7
+ -->
8
+ <span class="data-table__sr-only">Actions</span>
@@ -0,0 +1,27 @@
1
+ export default ActionsHeader;
2
+ type ActionsHeader = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const ActionsHeader: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
27
+ //# sourceMappingURL=ActionsHeader.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ActionsHeader.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/core/ActionsHeader.svelte.js"],"names":[],"mappings":";;;;;;;;AAgBA;;;;mBAAyH;6CAT5E,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
@@ -0,0 +1,21 @@
1
+ <!--
2
+ The header's tri-state checkbox: from empty it selects the rows on screen;
3
+ from checked or mixed it clears the selection. What the box shows decides the
4
+ click, not the box's own next state — see `headerToggleTarget`.
5
+ -->
6
+ <script lang="ts">
7
+ import { Checkbox } from "@ui-organized/svelte";
8
+ import { headerToggleTarget } from "@ui-organized/table-core";
9
+ import { getTable } from "./tableContext.js";
10
+
11
+ const table = getTable();
12
+ </script>
13
+
14
+ <span class="data-table__select-hit">
15
+ <Checkbox
16
+ checked={table.selection.header.checked}
17
+ indeterminate={table.selection.header.indeterminate}
18
+ aria-label={`Select the rows shown in ${table.label}`}
19
+ onCheckedChange={() => table.selection.togglePage(headerToggleTarget(table.selection.header))}
20
+ />
21
+ </span>
@@ -0,0 +1,19 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const SelectAllCell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, string>;
17
+ type SelectAllCell = InstanceType<typeof SelectAllCell>;
18
+ export default SelectAllCell;
19
+ //# sourceMappingURL=SelectAllCell.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SelectAllCell.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/core/SelectAllCell.svelte.ts"],"names":[],"mappings":"AAsBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,aAAa;;kBAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
@@ -0,0 +1,37 @@
1
+ <!--
2
+ A row's selection checkbox, with shift-click range selection.
3
+
4
+ Given a `Checkbox` with a closed prop API — no ref, no `onclick`, no `data-*`
5
+ passthrough — the wrapper records `shiftKey` from the pointer or keyboard event
6
+ that *precedes* the change, which the change handler then reads. It needs no
7
+ change to `@ui-organized/svelte`, which is the point: widening a component's
8
+ API to serve one consumer is how a design system's props turn into a junk
9
+ drawer.
10
+ -->
11
+ <script lang="ts">
12
+ import { Checkbox } from "@ui-organized/svelte";
13
+ import { getTable } from "./tableContext.js";
14
+
15
+ let { rowId, rowLabel }: { rowId: string; rowLabel: string } = $props();
16
+ const table = getTable();
17
+
18
+ let shift = false;
19
+ const remember = (event: MouseEvent | KeyboardEvent) => {
20
+ shift = event.shiftKey;
21
+ };
22
+ </script>
23
+
24
+ <span
25
+ class="data-table__select-hit"
26
+ onmousedowncapture={remember}
27
+ onkeydowncapture={remember}
28
+ >
29
+ <Checkbox
30
+ checked={table.selection.isSelected(rowId)}
31
+ aria-label={rowLabel}
32
+ onCheckedChange={(checked) => {
33
+ table.selection.toggle(rowId, checked, shift);
34
+ shift = false;
35
+ }}
36
+ />
37
+ </span>
@@ -0,0 +1,8 @@
1
+ type $$ComponentProps = {
2
+ rowId: string;
3
+ rowLabel: string;
4
+ };
5
+ declare const SelectCell: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type SelectCell = ReturnType<typeof SelectCell>;
7
+ export default SelectCell;
8
+ //# sourceMappingURL=SelectCell.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SelectCell.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/core/SelectCell.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAwB9D,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { type RowData } from "@ui-organized/table-core";
2
+ import type { DataTableApi, UseDataTableOptions } from "./types.js";
3
+ export declare function createDataTable<T extends RowData>(options: () => UseDataTableOptions<T>): DataTableApi<T>;
4
+ //# sourceMappingURL=createDataTable.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createDataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/core/createDataTable.svelte.ts"],"names":[],"mappings":"AA0CA,OAAO,EAmDL,KAAK,OAAO,EAoBb,MAAM,0BAA0B,CAAC;AAIlC,OAAO,KAAK,EAEV,YAAY,EAIZ,mBAAmB,EACpB,MAAM,YAAY,CAAC;AA6EpB,wBAAgB,eAAe,CAAC,CAAC,SAAS,OAAO,EAC/C,OAAO,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,GACpC,YAAY,CAAC,CAAC,CAAC,CA6nCjB"}