@lavalogic/scoria 0.37.44 → 0.37.45

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 (237) 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 +83 -83
  22. package/dist/Components/Contexts/ToastContainer.svelte +65 -65
  23. package/dist/Components/Contexts/Tooltip.svelte +37 -37
  24. package/dist/Components/DataMatrixIcon.svelte +112 -112
  25. package/dist/Components/DataMatrixIconProps.d.ts +3 -13
  26. package/dist/Components/DateInput.svelte +148 -148
  27. package/dist/Components/DatePicker.svelte +300 -300
  28. package/dist/Components/DesktopModal.svelte +90 -90
  29. package/dist/Components/Dial.svelte +204 -204
  30. package/dist/Components/DialProps.d.ts +1 -18
  31. package/dist/Components/DimensionInput.svelte +170 -170
  32. package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
  33. package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
  34. package/dist/Components/FileCard.svelte +24 -24
  35. package/dist/Components/FileUpload.svelte +236 -236
  36. package/dist/Components/GridInput.svelte +196 -200
  37. package/dist/Components/GridInputSet.svelte +29 -29
  38. package/dist/Components/HorizontalTabGroup.svelte +82 -82
  39. package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
  40. package/dist/Components/Icon.svelte +128 -128
  41. package/dist/Components/IconProps.d.ts +2 -7
  42. package/dist/Components/Icons.js +357 -357
  43. package/dist/Components/LoadingAnimation.svelte +29 -29
  44. package/dist/Components/LoadingModal.svelte +45 -45
  45. package/dist/Components/LoadingOverlay.svelte +25 -25
  46. package/dist/Components/LoadingOverlayProps.d.ts +3 -7
  47. package/dist/Components/Modal.svelte +258 -258
  48. package/dist/Components/ModalProps.d.ts +0 -3
  49. package/dist/Components/MultiSelect.svelte +220 -220
  50. package/dist/Components/MultiSelectCommonProps.d.ts +6 -17
  51. package/dist/Components/Nav/Nav.svelte +99 -99
  52. package/dist/Components/Nav/NavProps.d.ts +4 -11
  53. package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
  54. package/dist/Components/Nav/NavTab.svelte +62 -62
  55. package/dist/Components/Nav/ServiceMenuItem.svelte +100 -100
  56. package/dist/Components/Nav/ServicesNav.svelte +80 -80
  57. package/dist/Components/NumberInput.svelte +157 -157
  58. package/dist/Components/PageHeading.svelte +25 -25
  59. package/dist/Components/PasswordInput.svelte +88 -88
  60. package/dist/Components/Portal.svelte +36 -36
  61. package/dist/Components/ProgressBubble.svelte +107 -108
  62. package/dist/Components/ProgressBubbleProps.d.ts +3 -3
  63. package/dist/Components/QuerySelect.svelte +366 -366
  64. package/dist/Components/QuerySelectProps.d.ts +4 -14
  65. package/dist/Components/SingleSelect.svelte +250 -250
  66. package/dist/Components/SingleSelectCommonProps.d.ts +3 -19
  67. package/dist/Components/StepButton.svelte +70 -70
  68. package/dist/Components/StepForm.svelte +140 -140
  69. package/dist/Components/Switch.svelte +69 -69
  70. package/dist/Components/Table/ARCHITECTURE.md +298 -0
  71. package/dist/Components/Table/Body/QuickSearchCell.svelte +679 -694
  72. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
  73. package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
  74. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +456 -478
  75. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
  76. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -188
  77. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
  78. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
  79. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +230 -230
  80. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
  81. package/dist/Components/Table/Body/Rows/Columns/SelectColumn.d.ts +12 -9
  82. package/dist/Components/Table/Body/Rows/Columns/SelectTableCell.d.ts +5 -5
  83. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
  84. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
  85. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
  86. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
  87. package/dist/Components/Table/Body/Rows/Columns/TableDatePickerProps.d.ts +4 -4
  88. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
  89. package/dist/Components/Table/Body/Rows/Columns/TableQueryCell.d.ts +6 -5
  90. package/dist/Components/Table/Body/Rows/Columns/TableQueryColumn.d.ts +7 -6
  91. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -257
  92. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
  93. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -229
  94. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte.d.ts +11 -11
  95. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
  96. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
  97. package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
  98. package/dist/Components/Table/Body/TableBody.svelte +155 -155
  99. package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js +2 -3
  100. package/dist/Components/Table/ColumnFactory.svelte.d.ts +9 -11
  101. package/dist/Components/Table/ColumnFactory.svelte.js +101 -118
  102. package/dist/Components/Table/ColumnKindRegistry.d.ts +112 -0
  103. package/dist/Components/Table/ColumnKindRegistry.js +63 -0
  104. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
  105. package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
  106. package/dist/Components/Table/Headers/TableHead.svelte +415 -413
  107. package/dist/Components/Table/Misc/ColumnPanel.svelte +94 -94
  108. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +112 -112
  109. package/dist/Components/Table/Misc/FilterInput.svelte +620 -644
  110. package/dist/Components/Table/Misc/FilterInput.svelte.d.ts +12 -12
  111. package/dist/Components/Table/Misc/FilterInputProps.d.ts +2 -2
  112. package/dist/Components/Table/Misc/FilterPanel.svelte +257 -257
  113. package/dist/Components/Table/Misc/FilterPanelModal.svelte +30 -30
  114. package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
  115. package/dist/Components/Table/Misc/TableFooter.svelte +311 -311
  116. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +125 -125
  117. package/dist/Components/Table/Misc/TableSidebar.svelte +157 -157
  118. package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
  119. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
  120. package/dist/Components/Table/NestedTable.svelte +130 -133
  121. package/dist/Components/Table/SubApis.svelte.d.ts +1 -5
  122. package/dist/Components/Table/SubApis.svelte.js +33 -32
  123. package/dist/Components/Table/Table.svelte +692 -745
  124. package/dist/Components/Table/TableHelpers.svelte.d.ts +6 -19
  125. package/dist/Components/Table/TableHelpers.svelte.js +6 -14
  126. package/dist/Components/Table/Types/Columns/Column.d.ts +2 -2
  127. package/dist/Components/Table/Types/Columns/DateColumn.d.ts +3 -3
  128. package/dist/Components/Table/Types/Columns/DateTableCell.d.ts +7 -7
  129. package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.d.ts +7 -8
  130. package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.js +4 -5
  131. package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.d.ts +11 -14
  132. package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js +3 -4
  133. package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.d.ts +7 -11
  134. package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.js +3 -3
  135. package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.d.ts +13 -18
  136. package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js +4 -5
  137. package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.d.ts +5 -5
  138. package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.js +2 -2
  139. package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts +15 -12
  140. package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.js +4 -5
  141. package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.d.ts +8 -12
  142. package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.js +3 -3
  143. package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.d.ts +6 -6
  144. package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js +3 -3
  145. package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts +49 -16
  146. package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js +27 -5
  147. package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.d.ts +7 -7
  148. package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js +4 -4
  149. package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts +5 -5
  150. package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js +2 -2
  151. package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.d.ts +5 -5
  152. package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.js +2 -2
  153. package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.d.ts +5 -5
  154. package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.js +2 -2
  155. package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.d.ts +5 -5
  156. package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.js +2 -2
  157. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts +11 -19
  158. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js +4 -8
  159. package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.d.ts +6 -7
  160. package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.js +3 -4
  161. package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.d.ts +9 -9
  162. package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js +4 -4
  163. package/dist/Components/Table/Types/Columns/ExpandTableCell.d.ts +5 -5
  164. package/dist/Components/Table/Types/Columns/ProgressBarTableCell.d.ts +6 -6
  165. package/dist/Components/Table/Types/Columns/TableCell.d.ts +7 -6
  166. package/dist/Components/Table/Types/Context/ClipboardState.svelte.d.ts +98 -0
  167. package/dist/Components/Table/Types/Context/ClipboardState.svelte.js +290 -0
  168. package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.d.ts +17 -45
  169. package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.js +17 -45
  170. package/dist/Components/Table/Types/Context/FilteringState.svelte.d.ts +9 -20
  171. package/dist/Components/Table/Types/Context/FilteringState.svelte.js +9 -20
  172. package/dist/Components/Table/Types/Context/FocusState.svelte.d.ts +23 -42
  173. package/dist/Components/Table/Types/Context/FocusState.svelte.js +32 -59
  174. package/dist/Components/Table/Types/Context/ITable.d.ts +5 -8
  175. package/dist/Components/Table/Types/Context/PreferencesState.svelte.d.ts +29 -56
  176. package/dist/Components/Table/Types/Context/PreferencesState.svelte.js +28 -55
  177. package/dist/Components/Table/Types/Context/QueryValuesState.svelte.d.ts +50 -0
  178. package/dist/Components/Table/Types/Context/QueryValuesState.svelte.js +62 -0
  179. package/dist/Components/Table/Types/Context/SelectionState.svelte.d.ts +17 -28
  180. package/dist/Components/Table/Types/Context/SelectionState.svelte.js +17 -28
  181. package/dist/Components/Table/Types/Context/SortingState.svelte.d.ts +15 -29
  182. package/dist/Components/Table/Types/Context/SortingState.svelte.js +17 -31
  183. package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts +212 -325
  184. package/dist/Components/Table/Types/Context/TableContext.svelte.js +292 -706
  185. package/dist/Components/Table/Types/Context/VirtualisationState.svelte.d.ts +62 -79
  186. package/dist/Components/Table/Types/Context/VirtualisationState.svelte.js +54 -73
  187. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.d.ts +16 -27
  188. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.js +16 -27
  189. package/dist/Components/Table/Types/DataRepository/IDataRepository.d.ts +12 -15
  190. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts +15 -30
  191. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.js +16 -28
  192. package/dist/Components/Table/Types/Header.d.ts +4 -4
  193. package/dist/Components/Table/Types/HeaderGroup.d.ts +5 -5
  194. package/dist/Components/Table/Types/Public/index.d.ts +2 -4
  195. package/dist/Components/Table/Types/Public/index.js +2 -4
  196. package/dist/Components/Table/clipboardEscape.d.ts +32 -0
  197. package/dist/Components/Table/clipboardEscape.js +45 -0
  198. package/dist/Components/Table/createTable.svelte.d.ts +8 -18
  199. package/dist/Components/Table/createTable.svelte.js +19 -47
  200. package/dist/Components/Test/TestContextConsumer.svelte +13 -13
  201. package/dist/Components/TextArea.svelte +130 -130
  202. package/dist/Components/TextInput.svelte +176 -176
  203. package/dist/Components/ThreeStateRadio.svelte +131 -131
  204. package/dist/Components/Touch/BoolCard.svelte +45 -45
  205. package/dist/Components/Touch/DateModal.svelte +209 -209
  206. package/dist/Components/Touch/EditCard.svelte +59 -59
  207. package/dist/Components/Touch/InfoCard.svelte +31 -31
  208. package/dist/Components/Touch/InfoTextCard.svelte +28 -28
  209. package/dist/Components/Touch/ModalExplanation.svelte +17 -17
  210. package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
  211. package/dist/Components/Touch/NumberModal.svelte +79 -79
  212. package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
  213. package/dist/Components/Touch/SelectModal.svelte +123 -123
  214. package/dist/Components/Touch/SummaryCard.svelte +93 -93
  215. package/dist/Components/Touch/TextAreaModal.svelte +95 -95
  216. package/dist/Components/Touch/TextModal.svelte +106 -106
  217. package/dist/Components/Touch/TouchCard.svelte +33 -33
  218. package/dist/Components/Touch/TouchModal.svelte +274 -274
  219. package/dist/Components/Touch/UtilityButton.svelte +109 -109
  220. package/dist/Components/VerticalTabGroup.svelte +79 -79
  221. package/dist/Components/VerticalTabGroupButton.svelte +58 -58
  222. package/dist/Contexts/ToastContext.svelte.js +3 -4
  223. package/dist/Helpers/Datamatrix.d.ts +19 -19
  224. package/dist/Helpers/Datamatrix.js +291 -291
  225. package/dist/Helpers/Helpers.svelte.d.ts +2 -4
  226. package/dist/Helpers/Helpers.svelte.js +2 -4
  227. package/dist/Helpers/dropdownPortal.d.ts +26 -41
  228. package/dist/Helpers/dropdownPortal.js +62 -116
  229. package/dist/Types/Examples/ExampleModal.svelte +35 -35
  230. package/dist/index.d.ts +0 -1
  231. package/dist/scss/_basics.scss +12 -12
  232. package/dist/scss/_colours.scss +134 -134
  233. package/dist/scss/_mixins.scss +3348 -3360
  234. package/dist/scss/_motion.scss +57 -57
  235. package/dist/scss/_sizing.scss +85 -85
  236. package/dist/scss/_transitions.scss +8 -8
  237. package/package.json +2 -1
@@ -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>