@lavalogic/scoria 0.37.44 → 0.37.46

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 (239) hide show
  1. package/README.md +58 -58
  2. package/dist/Components/AccordionGroup.svelte +46 -46
  3. package/dist/Components/AccordionGroupButton.svelte +76 -76
  4. package/dist/Components/Action.svelte +136 -136
  5. package/dist/Components/ActionProps.d.ts +2 -6
  6. package/dist/Components/AlertModal.svelte +195 -183
  7. package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +702 -702
  8. package/dist/Components/Base/BaseModal.svelte +125 -125
  9. package/dist/Components/Base/ContextWrapper.svelte +72 -72
  10. package/dist/Components/Base/Pagination.svelte +198 -198
  11. package/dist/Components/Base/Snippets.svelte +36 -36
  12. package/dist/Components/BigRadioSet.svelte +38 -38
  13. package/dist/Components/Bubble.svelte +101 -101
  14. package/dist/Components/Button.svelte +209 -209
  15. package/dist/Components/ButtonProps.d.ts +2 -6
  16. package/dist/Components/Checkbox.svelte +86 -86
  17. package/dist/Components/CollapsibleCard.svelte +78 -78
  18. package/dist/Components/Contexts/ContextMenu.svelte +164 -164
  19. package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
  20. package/dist/Components/Contexts/ContextMenuOption.svelte +60 -60
  21. package/dist/Components/Contexts/Toast.svelte +86 -83
  22. package/dist/Components/Contexts/Toast.svelte.d.ts +8 -5
  23. package/dist/Components/Contexts/ToastContainer.svelte +65 -65
  24. package/dist/Components/Contexts/Tooltip.svelte +37 -37
  25. package/dist/Components/DataMatrixIcon.svelte +112 -112
  26. package/dist/Components/DataMatrixIconProps.d.ts +3 -13
  27. package/dist/Components/DateInput.svelte +148 -148
  28. package/dist/Components/DatePicker.svelte +300 -300
  29. package/dist/Components/DesktopModal.svelte +90 -90
  30. package/dist/Components/Dial.svelte +204 -204
  31. package/dist/Components/DialProps.d.ts +1 -18
  32. package/dist/Components/DimensionInput.svelte +170 -170
  33. package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
  34. package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
  35. package/dist/Components/FileCard.svelte +24 -24
  36. package/dist/Components/FileUpload.svelte +236 -236
  37. package/dist/Components/GridInput.svelte +196 -200
  38. package/dist/Components/GridInputSet.svelte +29 -29
  39. package/dist/Components/HorizontalTabGroup.svelte +82 -82
  40. package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
  41. package/dist/Components/Icon.svelte +128 -128
  42. package/dist/Components/IconProps.d.ts +2 -7
  43. package/dist/Components/Icons.js +357 -357
  44. package/dist/Components/LoadingAnimation.svelte +29 -29
  45. package/dist/Components/LoadingModal.svelte +45 -45
  46. package/dist/Components/LoadingOverlay.svelte +25 -25
  47. package/dist/Components/LoadingOverlayProps.d.ts +3 -7
  48. package/dist/Components/Modal.svelte +258 -258
  49. package/dist/Components/ModalProps.d.ts +0 -3
  50. package/dist/Components/MultiSelect.svelte +220 -220
  51. package/dist/Components/MultiSelectCommonProps.d.ts +6 -17
  52. package/dist/Components/Nav/Nav.svelte +110 -99
  53. package/dist/Components/Nav/NavProps.d.ts +4 -11
  54. package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
  55. package/dist/Components/Nav/NavTab.svelte +62 -62
  56. package/dist/Components/Nav/ServiceMenuItem.svelte +100 -100
  57. package/dist/Components/Nav/ServicesNav.svelte +80 -80
  58. package/dist/Components/NumberInput.svelte +157 -157
  59. package/dist/Components/PageHeading.svelte +25 -25
  60. package/dist/Components/PasswordInput.svelte +88 -88
  61. package/dist/Components/Portal.svelte +36 -36
  62. package/dist/Components/ProgressBubble.svelte +107 -108
  63. package/dist/Components/ProgressBubbleProps.d.ts +3 -3
  64. package/dist/Components/QuerySelect.svelte +366 -366
  65. package/dist/Components/QuerySelectProps.d.ts +4 -14
  66. package/dist/Components/SingleSelect.svelte +250 -250
  67. package/dist/Components/SingleSelectCommonProps.d.ts +3 -19
  68. package/dist/Components/StepButton.svelte +70 -70
  69. package/dist/Components/StepForm.svelte +140 -140
  70. package/dist/Components/Switch.svelte +69 -69
  71. package/dist/Components/Table/ARCHITECTURE.md +298 -0
  72. package/dist/Components/Table/Body/QuickSearchCell.svelte +683 -694
  73. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
  74. package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
  75. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +456 -478
  76. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
  77. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -188
  78. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
  79. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
  80. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +230 -230
  81. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
  82. package/dist/Components/Table/Body/Rows/Columns/SelectColumn.d.ts +12 -9
  83. package/dist/Components/Table/Body/Rows/Columns/SelectTableCell.d.ts +5 -5
  84. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
  85. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
  86. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
  87. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
  88. package/dist/Components/Table/Body/Rows/Columns/TableDatePickerProps.d.ts +4 -4
  89. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
  90. package/dist/Components/Table/Body/Rows/Columns/TableQueryCell.d.ts +6 -5
  91. package/dist/Components/Table/Body/Rows/Columns/TableQueryColumn.d.ts +7 -6
  92. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -257
  93. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
  94. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -229
  95. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte.d.ts +11 -11
  96. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
  97. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
  98. package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
  99. package/dist/Components/Table/Body/TableBody.svelte +155 -155
  100. package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js +2 -3
  101. package/dist/Components/Table/ColumnFactory.svelte.d.ts +9 -11
  102. package/dist/Components/Table/ColumnFactory.svelte.js +110 -143
  103. package/dist/Components/Table/ColumnKindRegistry.d.ts +112 -0
  104. package/dist/Components/Table/ColumnKindRegistry.js +63 -0
  105. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
  106. package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
  107. package/dist/Components/Table/Headers/TableHead.svelte +415 -413
  108. package/dist/Components/Table/Misc/ColumnPanel.svelte +94 -94
  109. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +112 -112
  110. package/dist/Components/Table/Misc/FilterInput.svelte +620 -644
  111. package/dist/Components/Table/Misc/FilterInput.svelte.d.ts +12 -12
  112. package/dist/Components/Table/Misc/FilterInputProps.d.ts +2 -2
  113. package/dist/Components/Table/Misc/FilterPanel.svelte +257 -257
  114. package/dist/Components/Table/Misc/FilterPanelModal.svelte +30 -30
  115. package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
  116. package/dist/Components/Table/Misc/TableFooter.svelte +311 -311
  117. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +125 -125
  118. package/dist/Components/Table/Misc/TableSidebar.svelte +157 -157
  119. package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
  120. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
  121. package/dist/Components/Table/NestedTable.svelte +130 -133
  122. package/dist/Components/Table/SubApis.svelte.d.ts +1 -5
  123. package/dist/Components/Table/SubApis.svelte.js +33 -32
  124. package/dist/Components/Table/Table.svelte +692 -745
  125. package/dist/Components/Table/TableHelpers.svelte.d.ts +6 -19
  126. package/dist/Components/Table/TableHelpers.svelte.js +6 -14
  127. package/dist/Components/Table/Types/Columns/Column.d.ts +2 -2
  128. package/dist/Components/Table/Types/Columns/DateColumn.d.ts +3 -3
  129. package/dist/Components/Table/Types/Columns/DateTableCell.d.ts +7 -7
  130. package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.d.ts +7 -8
  131. package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.js +4 -5
  132. package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.d.ts +11 -14
  133. package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js +3 -4
  134. package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.d.ts +7 -11
  135. package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.js +3 -3
  136. package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.d.ts +13 -18
  137. package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js +4 -5
  138. package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.d.ts +5 -5
  139. package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.js +2 -2
  140. package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts +15 -12
  141. package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.js +4 -5
  142. package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.d.ts +8 -12
  143. package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.js +3 -3
  144. package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.d.ts +6 -6
  145. package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js +3 -3
  146. package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts +49 -16
  147. package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js +27 -5
  148. package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.d.ts +7 -7
  149. package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js +4 -4
  150. package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts +5 -5
  151. package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js +2 -2
  152. package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.d.ts +5 -5
  153. package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.js +2 -2
  154. package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.d.ts +5 -5
  155. package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.js +2 -2
  156. package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.d.ts +5 -5
  157. package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.js +2 -2
  158. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts +11 -19
  159. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js +4 -8
  160. package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.d.ts +6 -7
  161. package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.js +3 -4
  162. package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.d.ts +9 -9
  163. package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js +4 -4
  164. package/dist/Components/Table/Types/Columns/ExpandTableCell.d.ts +5 -5
  165. package/dist/Components/Table/Types/Columns/ProgressBarTableCell.d.ts +6 -6
  166. package/dist/Components/Table/Types/Columns/TableCell.d.ts +7 -6
  167. package/dist/Components/Table/Types/Context/ClipboardState.svelte.d.ts +98 -0
  168. package/dist/Components/Table/Types/Context/ClipboardState.svelte.js +290 -0
  169. package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.d.ts +17 -45
  170. package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.js +17 -45
  171. package/dist/Components/Table/Types/Context/FilteringState.svelte.d.ts +9 -20
  172. package/dist/Components/Table/Types/Context/FilteringState.svelte.js +9 -20
  173. package/dist/Components/Table/Types/Context/FocusState.svelte.d.ts +23 -42
  174. package/dist/Components/Table/Types/Context/FocusState.svelte.js +32 -59
  175. package/dist/Components/Table/Types/Context/ITable.d.ts +5 -8
  176. package/dist/Components/Table/Types/Context/PreferencesState.svelte.d.ts +29 -56
  177. package/dist/Components/Table/Types/Context/PreferencesState.svelte.js +28 -55
  178. package/dist/Components/Table/Types/Context/QueryValuesState.svelte.d.ts +50 -0
  179. package/dist/Components/Table/Types/Context/QueryValuesState.svelte.js +62 -0
  180. package/dist/Components/Table/Types/Context/SelectionState.svelte.d.ts +17 -28
  181. package/dist/Components/Table/Types/Context/SelectionState.svelte.js +17 -28
  182. package/dist/Components/Table/Types/Context/SortingState.svelte.d.ts +15 -29
  183. package/dist/Components/Table/Types/Context/SortingState.svelte.js +17 -31
  184. package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts +212 -325
  185. package/dist/Components/Table/Types/Context/TableContext.svelte.js +292 -706
  186. package/dist/Components/Table/Types/Context/VirtualisationState.svelte.d.ts +62 -79
  187. package/dist/Components/Table/Types/Context/VirtualisationState.svelte.js +54 -73
  188. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.d.ts +16 -27
  189. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.js +16 -27
  190. package/dist/Components/Table/Types/DataRepository/IDataRepository.d.ts +12 -15
  191. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts +15 -30
  192. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.js +16 -28
  193. package/dist/Components/Table/Types/Header.d.ts +4 -4
  194. package/dist/Components/Table/Types/HeaderGroup.d.ts +5 -5
  195. package/dist/Components/Table/Types/Public/index.d.ts +2 -4
  196. package/dist/Components/Table/Types/Public/index.js +2 -4
  197. package/dist/Components/Table/clipboardEscape.d.ts +32 -0
  198. package/dist/Components/Table/clipboardEscape.js +45 -0
  199. package/dist/Components/Table/createTable.svelte.d.ts +8 -18
  200. package/dist/Components/Table/createTable.svelte.js +19 -47
  201. package/dist/Components/Test/TestContextConsumer.svelte +13 -13
  202. package/dist/Components/TextArea.svelte +130 -130
  203. package/dist/Components/TextInput.svelte +176 -176
  204. package/dist/Components/ThreeStateRadio.svelte +131 -131
  205. package/dist/Components/Touch/BoolCard.svelte +45 -45
  206. package/dist/Components/Touch/DateModal.svelte +209 -209
  207. package/dist/Components/Touch/EditCard.svelte +59 -59
  208. package/dist/Components/Touch/InfoCard.svelte +31 -31
  209. package/dist/Components/Touch/InfoTextCard.svelte +28 -28
  210. package/dist/Components/Touch/ModalExplanation.svelte +17 -17
  211. package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
  212. package/dist/Components/Touch/NumberModal.svelte +79 -79
  213. package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
  214. package/dist/Components/Touch/SelectModal.svelte +123 -123
  215. package/dist/Components/Touch/SummaryCard.svelte +93 -93
  216. package/dist/Components/Touch/TextAreaModal.svelte +95 -95
  217. package/dist/Components/Touch/TextModal.svelte +106 -106
  218. package/dist/Components/Touch/TouchCard.svelte +33 -33
  219. package/dist/Components/Touch/TouchModal.svelte +274 -274
  220. package/dist/Components/Touch/UtilityButton.svelte +109 -109
  221. package/dist/Components/VerticalTabGroup.svelte +79 -79
  222. package/dist/Components/VerticalTabGroupButton.svelte +58 -58
  223. package/dist/Contexts/ToastContext.svelte.js +3 -4
  224. package/dist/Helpers/Datamatrix.d.ts +19 -19
  225. package/dist/Helpers/Datamatrix.js +291 -291
  226. package/dist/Helpers/Helpers.svelte.d.ts +47 -4
  227. package/dist/Helpers/Helpers.svelte.js +97 -4
  228. package/dist/Helpers/dropdownPortal.d.ts +26 -41
  229. package/dist/Helpers/dropdownPortal.js +62 -116
  230. package/dist/Types/Examples/ExampleModal.svelte +35 -35
  231. package/dist/index.d.ts +1 -2
  232. package/dist/index.js +1 -1
  233. package/dist/scss/_basics.scss +12 -12
  234. package/dist/scss/_colours.scss +134 -134
  235. package/dist/scss/_mixins.scss +3358 -3360
  236. package/dist/scss/_motion.scss +57 -57
  237. package/dist/scss/_sizing.scss +85 -85
  238. package/dist/scss/_transitions.scss +8 -8
  239. package/package.json +8 -6
@@ -1,126 +1,126 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="T extends object, FilterValueType, RowIdType extends Primitive"
6
- >
7
- import Bubble from '../../../../Bubble.svelte';
8
- import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
9
- import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
10
- import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
11
- import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
12
- import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
13
- import { Validity } from '../../../../../Types/Internal/Validity.js';
14
- import { getContext } from 'svelte';
15
- import type { BubbleCellProps } from './BubbleCellProps.js';
16
-
17
- const { cell }: BubbleCellProps<T, FilterValueType> = $props();
18
-
19
- /**
20
- * Awaited or sync array of string labels to render as Bubble chips. The cast
21
- * is unavoidable until `BubbleDef` carries a narrowed `TValue` generic and
22
- * the dispatch passes a `BubbleTableCell<T, FilterValueType>`; tracked under
23
- * the cross-cutting RowGenericThreading + BubbleDef.value work.
24
- */
25
- const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
26
-
27
- const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
28
-
29
- const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
30
- tableContext._focus.getFocusDetailsFor(cell)
31
- );
32
-
33
- let validity: Validity = $state(Validity.Valid);
34
- $effect(() => {
35
- const validityPromise = focusDetails.validity;
36
-
37
- validityPromise
38
- .then((v) => {
39
- if (!v) {
40
- validity = Validity.Neutral;
41
- } else if (isValidityTuple(v)) {
42
- validity = v.value;
43
- } else {
44
- validity = v;
45
- }
46
- })
47
- .catch(devCatch);
48
- });
49
- </script>
50
-
51
- <!-- svelte-ignore a11y_mouse_events_have_key_events -->
52
- <!-- svelte-ignore a11y_no_static_element_interactions -->
53
- <div
54
- id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
55
- tabIndex={0}
56
- class="focusable"
57
- class:multifocus={focusDetails.isMultiFocused}
58
- class:multifocus-start={focusDetails.isMultiFocusStart}
59
- style={focusDetails.outline}
60
- class:info={validity == Validity.Info}
61
- class:success={validity == Validity.Valid}
62
- class:warning={validity == Validity.Warning}
63
- class:error={validity == Validity.Invalid}
64
- onmousedown={(e) => {
65
- // start focus only on left click
66
- if (e.button === 0) {
67
- if (e.shiftKey) {
68
- e.preventDefault();
69
- tableContext.setFocusEnd(focusDetails.coordinates);
70
- } else {
71
- tableContext.startFocus(focusDetails.coordinates);
72
- }
73
- }
74
- }}
75
- onmouseover={() => {
76
- if (tableContext.isMousingDown) {
77
- tableContext.setFocusEnd(focusDetails.coordinates);
78
- }
79
- }}
80
- onmouseup={() => {
81
- tableContext.endFocus(focusDetails.coordinates);
82
- }}
83
- >
84
- <div class="bubble-parent">
85
- {#await values then values}
86
- <!-- `maxBubbles` (default 3) caps how many pills render inline;
87
- anything beyond gets a single `"+N more"` overflow chip with
88
- the hidden labels as a hover tooltip. Key combines index and
89
- value because duplicate labels would otherwise collapse and
90
- reordering with identical labels would force unrelated
91
- bubbles to swap. -->
92
- {@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
93
- {@const visibleBubbles = values.slice(0, maxBubbles)}
94
- {@const overflowCount = Math.max(0, values.length - maxBubbles)}
95
- {@const overflowTitle = values.slice(maxBubbles).join(', ')}
96
- {#each visibleBubbles as value, index (`${index}:${value}`)}
97
- {@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
98
- cell.row.original,
99
- cell.row.originalIndex,
100
- value
101
- )}
102
-
103
- {#if colourPromise == undefined}
104
- <Bubble {value} />
105
- {:else}
106
- {#await colourPromise then colour}
107
- <Bubble
108
- {value}
109
- colours={colour ?? undefined}
110
- />
111
- {/await}
112
- {/if}
113
- {/each}
114
- {#if overflowCount > 0}
115
- <span
116
- class="bubble-overflow"
117
- title={overflowTitle}
118
- >+{overflowCount} more</span>
119
- {/if}
120
- {/await}
121
- </div>
122
- </div>
123
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="T extends object, FilterValueType, RowIdType extends Primitive"
6
+ >
7
+ import Bubble from '../../../../Bubble.svelte';
8
+ import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
9
+ import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
10
+ import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
11
+ import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
12
+ import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
13
+ import { Validity } from '../../../../../Types/Internal/Validity.js';
14
+ import { getContext } from 'svelte';
15
+ import type { BubbleCellProps } from './BubbleCellProps.js';
16
+
17
+ const { cell }: BubbleCellProps<T, FilterValueType> = $props();
18
+
19
+ /**
20
+ * Awaited or sync array of string labels to render as Bubble chips.
21
+ * The cast is required because `BubbleDef` does not yet carry a
22
+ * narrowed `TValue` generic and the dispatch passes the loose
23
+ * `TableCell` rather than `BubbleTableCell<T, FilterValueType>`.
24
+ */
25
+ const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
26
+
27
+ const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
28
+
29
+ const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
30
+ tableContext._focus.getFocusDetailsFor(cell)
31
+ );
32
+
33
+ let validity: Validity = $state(Validity.Valid);
34
+ $effect(() => {
35
+ const validityPromise = focusDetails.validity;
36
+
37
+ validityPromise
38
+ .then((v) => {
39
+ if (!v) {
40
+ validity = Validity.Neutral;
41
+ } else if (isValidityTuple(v)) {
42
+ validity = v.value;
43
+ } else {
44
+ validity = v;
45
+ }
46
+ })
47
+ .catch(devCatch);
48
+ });
49
+ </script>
50
+
51
+ <!-- svelte-ignore a11y_mouse_events_have_key_events -->
52
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
53
+ <div
54
+ id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
55
+ tabIndex={0}
56
+ class="focusable"
57
+ class:multifocus={focusDetails.isMultiFocused}
58
+ class:multifocus-start={focusDetails.isMultiFocusStart}
59
+ style={focusDetails.outline}
60
+ class:info={validity == Validity.Info}
61
+ class:success={validity == Validity.Valid}
62
+ class:warning={validity == Validity.Warning}
63
+ class:error={validity == Validity.Invalid}
64
+ onmousedown={(e) => {
65
+ // start focus only on left click
66
+ if (e.button === 0) {
67
+ if (e.shiftKey) {
68
+ e.preventDefault();
69
+ tableContext.setFocusEnd(focusDetails.coordinates);
70
+ } else {
71
+ tableContext.startFocus(focusDetails.coordinates);
72
+ }
73
+ }
74
+ }}
75
+ onmouseover={() => {
76
+ if (tableContext.isMousingDown) {
77
+ tableContext.setFocusEnd(focusDetails.coordinates);
78
+ }
79
+ }}
80
+ onmouseup={() => {
81
+ tableContext.endFocus(focusDetails.coordinates);
82
+ }}
83
+ >
84
+ <div class="bubble-parent">
85
+ {#await values then values}
86
+ <!-- `maxBubbles` (default 3) caps how many pills render inline;
87
+ anything beyond gets a single `"+N more"` overflow chip with
88
+ the hidden labels as a hover tooltip. Key combines index and
89
+ value because duplicate labels would otherwise collapse and
90
+ reordering with identical labels would force unrelated
91
+ bubbles to swap. -->
92
+ {@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
93
+ {@const visibleBubbles = values.slice(0, maxBubbles)}
94
+ {@const overflowCount = Math.max(0, values.length - maxBubbles)}
95
+ {@const overflowTitle = values.slice(maxBubbles).join(', ')}
96
+ {#each visibleBubbles as value, index (`${index}:${value}`)}
97
+ {@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
98
+ cell.row.original,
99
+ cell.row.originalIndex,
100
+ value
101
+ )}
102
+
103
+ {#if colourPromise == undefined}
104
+ <Bubble {value} />
105
+ {:else}
106
+ {#await colourPromise then colour}
107
+ <Bubble
108
+ {value}
109
+ colours={colour ?? undefined}
110
+ />
111
+ {/await}
112
+ {/if}
113
+ {/each}
114
+ {#if overflowCount > 0}
115
+ <span
116
+ class="bubble-overflow"
117
+ title={overflowTitle}
118
+ >+{overflowCount} more</span>
119
+ {/if}
120
+ {/await}
121
+ </div>
122
+ </div>
123
+
124
124
  <style>.focusable,
125
125
  .checkbox-cell,
126
126
  .input-cell,
@@ -218,4 +218,4 @@ div.bubble-parent {
218
218
  font-weight: 500;
219
219
  white-space: nowrap;
220
220
  cursor: default;
221
- }</style>
221
+ }</style>
@@ -1,122 +1,122 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
6
- >
7
- import Action from '../../../../Action.svelte';
8
- import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
9
- import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
10
- import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
11
- import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
12
- import { ColourSet } from '../../../../../scss/colours.js';
13
- import { Size } from '../../../../../Types/Internal/Size.js';
14
- import { Validity } from '../../../../../Types/Internal/Validity.js';
15
- import { getContext } from 'svelte';
16
- import type { ExpandCellProps } from './ExpandCellProps.js';
17
-
18
- const {
19
- cell,
20
- expandedColumnDef,
21
- onExpandChange,
22
- }: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
23
-
24
- const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
25
- const focusDetails: TableFocusDetails<T, IdType> = $derived(
26
- tableContext._focus.getFocusDetailsFor(cell)
27
- );
28
-
29
- const enabled: boolean | Promise<boolean> = $derived(
30
- cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
31
- );
32
-
33
- let validity: Validity = $state(Validity.Valid);
34
- $effect(() => {
35
- const validityPromise = focusDetails.validity;
36
-
37
- validityPromise
38
- .then((v) => {
39
- if (!v) {
40
- validity = Validity.Neutral;
41
- } else if (isValidityTuple(v)) {
42
- validity = v.value;
43
- } else {
44
- validity = v;
45
- }
46
- })
47
- .catch(devCatch);
48
- });
49
- </script>
50
-
51
- <!-- svelte-ignore a11y_mouse_events_have_key_events -->
52
- <!-- svelte-ignore a11y_no_static_element_interactions -->
53
- <div
54
- class:info={validity == Validity.Info}
55
- class:success={validity == Validity.Valid}
56
- class:warning={validity == Validity.Warning}
57
- class:error={validity == Validity.Invalid}
58
- class="focusable"
59
- onmousedown={(e) => {
60
- // start focus only on left click
61
- if (e.button === 0) {
62
- if (e.shiftKey) {
63
- e.preventDefault();
64
- tableContext.setFocusEnd(focusDetails.coordinates);
65
- } else {
66
- tableContext.startFocus(focusDetails.coordinates);
67
- }
68
- }
69
- }}
70
- onmouseover={() => {
71
- if (tableContext.isMousingDown) {
72
- tableContext.setFocusEnd(focusDetails.coordinates);
73
- }
74
- }}
75
- onmouseup={() => {
76
- tableContext.endFocus(focusDetails.coordinates);
77
- }}
78
- >
79
- <div
80
- class="slot-wrapper"
81
- class:multifocus={focusDetails.isMultiFocused}
82
- class:multifocus-start={focusDetails.isMultiFocusStart}
83
- >
84
- {#await enabled}
85
- <!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
86
- {@render action(false)}
87
- {:then enabled}
88
- <!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
89
- {@render action(enabled)}
90
- {/await}
91
- </div>
92
- </div>
93
-
94
- {#snippet action(enabled: boolean)}
95
- <div class="noninteractive">
96
- <Action
97
- id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
98
- style={focusDetails.outline}
99
- disabled={!enabled}
100
- border={false}
101
- label="Expand Nested Table"
102
- size={Size.FillWidth}
103
- icon={{
104
- name: expandedColumnDef?.id === cell.column.columnDef.id ? 'minus' : 'plus',
105
- size: Size.Medium,
106
- }}
107
- colourSet={expandedColumnDef?.id === cell.column.columnDef.id
108
- ? ColourSet.Primary
109
- : ColourSet.Auxiliary}
110
- onclick={(e: MouseEvent) => {
111
- // FIXME why is this required? svelte bug?
112
- e.stopImmediatePropagation();
113
- // toastContext.toast("clicked")
114
- onExpandChange(cell.column.columnDef);
115
- }}
116
- />
117
- </div>
118
- {/snippet}
119
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
6
+ >
7
+ import Action from '../../../../Action.svelte';
8
+ import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
9
+ import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
10
+ import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
11
+ import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
12
+ import { ColourSet } from '../../../../../scss/colours.js';
13
+ import { Size } from '../../../../../Types/Internal/Size.js';
14
+ import { Validity } from '../../../../../Types/Internal/Validity.js';
15
+ import { getContext } from 'svelte';
16
+ import type { ExpandCellProps } from './ExpandCellProps.js';
17
+
18
+ const {
19
+ cell,
20
+ expandedColumnDef,
21
+ onExpandChange,
22
+ }: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
23
+
24
+ const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
25
+ const focusDetails: TableFocusDetails<T, IdType> = $derived(
26
+ tableContext._focus.getFocusDetailsFor(cell)
27
+ );
28
+
29
+ const enabled: boolean | Promise<boolean> = $derived(
30
+ cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
31
+ );
32
+
33
+ let validity: Validity = $state(Validity.Valid);
34
+ $effect(() => {
35
+ const validityPromise = focusDetails.validity;
36
+
37
+ validityPromise
38
+ .then((v) => {
39
+ if (!v) {
40
+ validity = Validity.Neutral;
41
+ } else if (isValidityTuple(v)) {
42
+ validity = v.value;
43
+ } else {
44
+ validity = v;
45
+ }
46
+ })
47
+ .catch(devCatch);
48
+ });
49
+ </script>
50
+
51
+ <!-- svelte-ignore a11y_mouse_events_have_key_events -->
52
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
53
+ <div
54
+ class:info={validity == Validity.Info}
55
+ class:success={validity == Validity.Valid}
56
+ class:warning={validity == Validity.Warning}
57
+ class:error={validity == Validity.Invalid}
58
+ class="focusable"
59
+ onmousedown={(e) => {
60
+ // start focus only on left click
61
+ if (e.button === 0) {
62
+ if (e.shiftKey) {
63
+ e.preventDefault();
64
+ tableContext.setFocusEnd(focusDetails.coordinates);
65
+ } else {
66
+ tableContext.startFocus(focusDetails.coordinates);
67
+ }
68
+ }
69
+ }}
70
+ onmouseover={() => {
71
+ if (tableContext.isMousingDown) {
72
+ tableContext.setFocusEnd(focusDetails.coordinates);
73
+ }
74
+ }}
75
+ onmouseup={() => {
76
+ tableContext.endFocus(focusDetails.coordinates);
77
+ }}
78
+ >
79
+ <div
80
+ class="slot-wrapper"
81
+ class:multifocus={focusDetails.isMultiFocused}
82
+ class:multifocus-start={focusDetails.isMultiFocusStart}
83
+ >
84
+ {#await enabled}
85
+ <!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
86
+ {@render action(false)}
87
+ {:then enabled}
88
+ <!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
89
+ {@render action(enabled)}
90
+ {/await}
91
+ </div>
92
+ </div>
93
+
94
+ {#snippet action(enabled: boolean)}
95
+ <div class="noninteractive">
96
+ <Action
97
+ id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
98
+ style={focusDetails.outline}
99
+ disabled={!enabled}
100
+ border={false}
101
+ label="Expand Nested Table"
102
+ size={Size.FillWidth}
103
+ icon={{
104
+ name: expandedColumnDef?.id === cell.column.columnDef.id ? 'minus' : 'plus',
105
+ size: Size.Medium,
106
+ }}
107
+ colourSet={expandedColumnDef?.id === cell.column.columnDef.id
108
+ ? ColourSet.Primary
109
+ : ColourSet.Auxiliary}
110
+ onclick={(e: MouseEvent) => {
111
+ // FIXME why is this required? svelte bug?
112
+ e.stopImmediatePropagation();
113
+ // toastContext.toast("clicked")
114
+ onExpandChange(cell.column.columnDef);
115
+ }}
116
+ />
117
+ </div>
118
+ {/snippet}
119
+
120
120
  <style>.focusable,
121
121
  .checkbox-cell,
122
122
  .input-cell,
@@ -199,4 +199,4 @@ div.slot-wrapper {
199
199
  .noninteractive {
200
200
  display: contents;
201
201
  user-select: none;
202
- }</style>
202
+ }</style>