@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,128 +1,128 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="T extends object, RowIdType extends Primitive"
6
- >
7
- import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
8
- import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
9
- import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
10
- import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
11
- import { Validity } from '../../../../../Types/Internal/Validity.js';
12
- import { getContext, tick } from 'svelte';
13
- import type { ChangeEventHandler } from 'svelte/elements';
14
- import type { TableCheckboxProps } from './TableCheckboxProps.js';
15
-
16
- const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
17
-
18
- const value = $derived(!!cell.getValue());
19
-
20
- const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
21
-
22
- const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
23
- tableContext._focus.getFocusDetailsFor(cell)
24
- );
25
-
26
- let inputRef: HTMLInputElement | undefined = $state();
27
-
28
- /**
29
- * Commits the new value through `TableContext.onEditCell` and forwards the
30
- * native event to the optional parent handler. The `tick` reconcile fixes a
31
- * race where the table edit was rejected by validation but the input
32
- * already showed the new checked state.
33
- */
34
- const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
35
- tableContext
36
- .onEditCell(
37
- cell.row.original,
38
- focusDetails.coordinates,
39
- (e.target as HTMLInputElement).checked
40
- )
41
- .catch(devCatch);
42
- parentOnchange?.(e);
43
-
44
- tick()
45
- .then(() => {
46
- if (inputRef && value != inputRef.checked) {
47
- inputRef.checked = value;
48
- }
49
- })
50
- .catch(devCatch);
51
- };
52
-
53
- let validity: Validity = $state(Validity.Valid);
54
- $effect(() => {
55
- const validityPromise = focusDetails.validity;
56
-
57
- validityPromise
58
- .then((v) => {
59
- if (!v) {
60
- validity = Validity.Neutral;
61
- } else if (isValidityTuple(v)) {
62
- validity = v.value;
63
- } else {
64
- validity = v;
65
- }
66
- })
67
- .catch(devCatch);
68
- });
69
- </script>
70
-
71
- <!-- svelte-ignore a11y_mouse_events_have_key_events -->
72
- <!-- svelte-ignore a11y_no_static_element_interactions -->
73
- <div
74
- class="checkbox-cell"
75
- onmousedown={(e) => {
76
- // start focus only on left click
77
- if (e.button === 0) {
78
- if (e.shiftKey) {
79
- e.preventDefault();
80
- tableContext.setFocusEnd(focusDetails.coordinates);
81
- } else {
82
- tableContext.startFocus(focusDetails.coordinates);
83
- }
84
- }
85
- }}
86
- onkeyup={(e: KeyboardEvent) => {
87
- if (e.key === 'Enter') {
88
- e.stopPropagation();
89
- tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
90
- }
91
- }}
92
- onkeydown={(e: KeyboardEvent) => {
93
- if (e.key == 'Enter' || e.key == 'F2') {
94
- e.stopPropagation();
95
- }
96
- }}
97
- onmouseover={() => {
98
- if (tableContext.isMousingDown) {
99
- tableContext.setFocusEnd(focusDetails.coordinates);
100
- }
101
- }}
102
- onmouseup={() => {
103
- tableContext.endFocus(focusDetails.coordinates);
104
- }}
105
- class:info={validity == Validity.Info}
106
- class:success={validity == Validity.Valid}
107
- class:warning={validity == Validity.Warning}
108
- class:error={validity == Validity.Invalid}
109
- >
110
- &nbsp;
111
- <label
112
- class:multifocus={focusDetails.isMultiFocused}
113
- class:multifocus-start={focusDetails.isMultiFocusStart}
114
- style={focusDetails.outline}
115
- >
116
- <input
117
- bind:this={inputRef}
118
- id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
119
- {onchange}
120
- type="checkbox"
121
- checked={value}
122
- />
123
- </label>
124
- </div>
125
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="T extends object, RowIdType extends Primitive"
6
+ >
7
+ import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
8
+ import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
9
+ import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
10
+ import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
11
+ import { Validity } from '../../../../../Types/Internal/Validity.js';
12
+ import { getContext, tick } from 'svelte';
13
+ import type { ChangeEventHandler } from 'svelte/elements';
14
+ import type { TableCheckboxProps } from './TableCheckboxProps.js';
15
+
16
+ const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
17
+
18
+ const value = $derived(!!cell.getValue());
19
+
20
+ const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
21
+
22
+ const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
23
+ tableContext._focus.getFocusDetailsFor(cell)
24
+ );
25
+
26
+ let inputRef: HTMLInputElement | undefined = $state();
27
+
28
+ /**
29
+ * Commits the new value through `TableContext.onEditCell` and forwards the
30
+ * native event to the optional parent handler. The `tick` reconcile fixes a
31
+ * race where the table edit was rejected by validation but the input
32
+ * already showed the new checked state.
33
+ */
34
+ const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
35
+ tableContext
36
+ .onEditCell(
37
+ cell.row.original,
38
+ focusDetails.coordinates,
39
+ (e.target as HTMLInputElement).checked
40
+ )
41
+ .catch(devCatch);
42
+ parentOnchange?.(e);
43
+
44
+ tick()
45
+ .then(() => {
46
+ if (inputRef && value != inputRef.checked) {
47
+ inputRef.checked = value;
48
+ }
49
+ })
50
+ .catch(devCatch);
51
+ };
52
+
53
+ let validity: Validity = $state(Validity.Valid);
54
+ $effect(() => {
55
+ const validityPromise = focusDetails.validity;
56
+
57
+ validityPromise
58
+ .then((v) => {
59
+ if (!v) {
60
+ validity = Validity.Neutral;
61
+ } else if (isValidityTuple(v)) {
62
+ validity = v.value;
63
+ } else {
64
+ validity = v;
65
+ }
66
+ })
67
+ .catch(devCatch);
68
+ });
69
+ </script>
70
+
71
+ <!-- svelte-ignore a11y_mouse_events_have_key_events -->
72
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
73
+ <div
74
+ class="checkbox-cell"
75
+ onmousedown={(e) => {
76
+ // start focus only on left click
77
+ if (e.button === 0) {
78
+ if (e.shiftKey) {
79
+ e.preventDefault();
80
+ tableContext.setFocusEnd(focusDetails.coordinates);
81
+ } else {
82
+ tableContext.startFocus(focusDetails.coordinates);
83
+ }
84
+ }
85
+ }}
86
+ onkeyup={(e: KeyboardEvent) => {
87
+ if (e.key === 'Enter') {
88
+ e.stopPropagation();
89
+ tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
90
+ }
91
+ }}
92
+ onkeydown={(e: KeyboardEvent) => {
93
+ if (e.key == 'Enter' || e.key == 'F2') {
94
+ e.stopPropagation();
95
+ }
96
+ }}
97
+ onmouseover={() => {
98
+ if (tableContext.isMousingDown) {
99
+ tableContext.setFocusEnd(focusDetails.coordinates);
100
+ }
101
+ }}
102
+ onmouseup={() => {
103
+ tableContext.endFocus(focusDetails.coordinates);
104
+ }}
105
+ class:info={validity == Validity.Info}
106
+ class:success={validity == Validity.Valid}
107
+ class:warning={validity == Validity.Warning}
108
+ class:error={validity == Validity.Invalid}
109
+ >
110
+ &nbsp;
111
+ <label
112
+ class:multifocus={focusDetails.isMultiFocused}
113
+ class:multifocus-start={focusDetails.isMultiFocusStart}
114
+ style={focusDetails.outline}
115
+ >
116
+ <input
117
+ bind:this={inputRef}
118
+ id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
119
+ {onchange}
120
+ type="checkbox"
121
+ checked={value}
122
+ />
123
+ </label>
124
+ </div>
125
+
126
126
  <style>.focusable,
127
127
  .checkbox-cell,
128
128
  .input-cell,
@@ -198,4 +198,4 @@ label.multifocus.multifocus-start {
198
198
  .input-cell.error,
199
199
  .select-cell.error {
200
200
  background-color: #f9e9e9;
201
- }</style>
201
+ }</style>
@@ -1,159 +1,159 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- module
6
- >
7
- import { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
8
- import { DisplayType } from '../../../Types/Columns/DisplayType.js';
9
- import type { TableCell } from '../../../Types/Columns/TableCell.js';
10
- import type { Component, Snippet } from 'svelte';
11
- import ActionsCell from './ActionsCell.svelte';
12
- import BubbleCell from './BubbleCell.svelte';
13
- import ExpandCell from './ExpandCell.svelte';
14
- import FocusableImmutableCell from './FocusableImmutableCell.svelte';
15
-
16
- import { ColumnType } from '../../../Types/Columns/ColumnType.js';
17
- import { ActionsDef } from '../../../Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
18
- import { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
19
- import { ProgressBarDef } from '../../../Types/Columns/Definitions/Display/ProgressBarDef.svelte.js';
20
- import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
21
- import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
22
- import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
23
- import AccessorComponent from './AccessorComponent.svelte';
24
- import type { ActionsTableCell } from './ActionsTableCell.js';
25
- import ProgressCell from './ProgressCell.svelte';
26
- import TableRowSelectionCheckbox from './TableRowSelectionCheckbox.svelte';
27
- import type { TableColumnProps } from './TableColumnProps.js';
28
- import ValidityCell from './ValidityCell.svelte';
29
-
30
- /** Narrowing type-guard distinguishing a progress-bar cell by its `columnDef` instance. */
31
- function isProgressBarTableCell<T extends object>(
32
- cell: TableCell<T>
33
- ): cell is ProgressBarTableCell<T, unknown> {
34
- return cell.column.columnDef instanceof ProgressBarDef;
35
- }
36
- </script>
37
-
38
- <script
39
- lang="ts"
40
- generics="T extends object"
41
- >
42
- import { dev } from '$app/environment';
43
- import { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
44
- import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
45
- import type { RowSelectionTableCell } from './RowSelectionTableCell.js';
46
-
47
- let { cell, expandedColumnDef, onExpandChange }: TableColumnProps<T> = $props();
48
-
49
- /** Narrowing type-guard distinguishing the row-selection cell. */
50
- function isRowSelectionCell<T extends object>(
51
- cell: TableCell<T>
52
- ): cell is RowSelectionTableCell<T> {
53
- return cell.column.columnDef instanceof RowSelectionDef;
54
- }
55
-
56
- /**
57
- * Returns true when the accessor output is a Svelte component constructor.
58
- * Distinguishing a Svelte 5 component (a function) from a snippet is a
59
- * runtime-only heuristic (both are typeof 'function'); the
60
- * constructor-only branch is reached first because TableColumn checks
61
- * `valueOrComponentIsConstructor` before `isSnippet`. Tightening this to
62
- * a real type-level discriminator is tracked under the
63
- * RowGenericThreading follow-up.
64
- */
65
- function valueOrComponentIsConstructor(
66
- valueOrComponent: unknown
67
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
68
- ): valueOrComponent is Component<any> {
69
- return typeof valueOrComponent === 'function';
70
- }
71
-
72
- /** Narrowing type-guard distinguishing an actions cell. */
73
- function isActionsDef(cell: TableCell<T>): cell is ActionsTableCell<T, unknown> {
74
- return cell.column.columnDef instanceof ActionsDef;
75
- }
76
-
77
- /** Narrowing type-guard distinguishing the expand-row cell. */
78
- function isExpandTableCell(
79
- cell: TableCell<T>
80
- ): cell is ExpandTableCell<T, object, Primitive, unknown> {
81
- return cell.column.columnDef instanceof ExpandDef;
82
- }
83
-
84
- /** Heuristic snippet check; both Snippets and Components are functions at runtime. */
85
- function isSnippet(value: unknown): value is Snippet<[TableCell<T>]> {
86
- return !!value && typeof value == 'function';
87
- }
88
- </script>
89
-
90
- {#if cell.column.getIsVisible()}
91
- {@const columnDef = cell.column.columnDef}
92
-
93
- {#if isRowSelectionCell(cell)}
94
- <TableRowSelectionCheckbox {cell} />
95
- {:else if isActionsDef(cell)}
96
- <ActionsCell {cell} />
97
- {:else if isExpandTableCell(cell)}
98
- <ExpandCell
99
- {cell}
100
- {expandedColumnDef}
101
- {onExpandChange}
102
- />
103
- {:else if columnDef.columnType !== ColumnType.Display}
104
- <AccessorComponent {cell} />
105
- {:else if cell.column.columnDef instanceof AbstractDisplayDef}
106
- {#if cell.column.columnDef.displayType === DisplayType.Bubbles}
107
- <BubbleCell {cell} />
108
- {:else if cell.column.columnDef.displayType === DisplayType.Validity}
109
- <ValidityCell {cell} />
110
- {:else if isProgressBarTableCell(cell)}
111
- <ProgressCell {cell} />
112
- {:else if cell.column.columnDef.displayType === DisplayType.Normal}
113
- <FocusableImmutableCell {cell} />
114
- {:else}
115
- {#if dev}
116
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
117
- {@debug cell}
118
- {/if}
119
- Unknown Cell Type
120
- {/if}
121
- {:else}
122
- {@const valueOrComponentPromise =
123
- cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
124
- cell.row.original[cell.column.id as keyof typeof cell.row.original]}
125
-
126
- {#await valueOrComponentPromise}
127
- <FocusableImmutableCell {cell} />
128
- {:then Value}
129
- {#if typeof Value === 'string' || typeof Value == 'number'}
130
- <FocusableImmutableCell {cell} />
131
- {:else if valueOrComponentIsConstructor(Value)}
132
- <FocusableImmutableCell {cell}>
133
- <Value {cell} />
134
- </FocusableImmutableCell>
135
- {:else if isSnippet(Value)}
136
- <FocusableImmutableCell {cell}>
137
- <!-- eslint-disable-next-line @typescript-eslint/no-unsafe-call -->
138
- {@render Value(cell)}
139
- </FocusableImmutableCell>
140
- {:else}
141
- {#if dev}
142
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
143
- {@debug cell}
144
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
145
- {@debug Value}
146
- {/if}
147
- Unknown Cell or value Type
148
- {/if}
149
- {:catch e}
150
- <FocusableImmutableCell {cell}>
151
- {#if dev}
152
- {getErrorMessage(e)}
153
- {:else}
154
- Error rendering cell
155
- {/if}
156
- </FocusableImmutableCell>
157
- {/await}
158
- {/if}
159
- {/if}
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ module
6
+ >
7
+ import { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
8
+ import { DisplayType } from '../../../Types/Columns/DisplayType.js';
9
+ import type { TableCell } from '../../../Types/Columns/TableCell.js';
10
+ import type { Component, Snippet } from 'svelte';
11
+ import ActionsCell from './ActionsCell.svelte';
12
+ import BubbleCell from './BubbleCell.svelte';
13
+ import ExpandCell from './ExpandCell.svelte';
14
+ import FocusableImmutableCell from './FocusableImmutableCell.svelte';
15
+
16
+ import { ColumnType } from '../../../Types/Columns/ColumnType.js';
17
+ import { ActionsDef } from '../../../Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
18
+ import { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
19
+ import { ProgressBarDef } from '../../../Types/Columns/Definitions/Display/ProgressBarDef.svelte.js';
20
+ import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
21
+ import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
22
+ import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
23
+ import AccessorComponent from './AccessorComponent.svelte';
24
+ import type { ActionsTableCell } from './ActionsTableCell.js';
25
+ import ProgressCell from './ProgressCell.svelte';
26
+ import TableRowSelectionCheckbox from './TableRowSelectionCheckbox.svelte';
27
+ import type { TableColumnProps } from './TableColumnProps.js';
28
+ import ValidityCell from './ValidityCell.svelte';
29
+
30
+ /** Narrowing type-guard distinguishing a progress-bar cell by its `columnDef` instance. */
31
+ function isProgressBarTableCell<T extends object>(
32
+ cell: TableCell<T>
33
+ ): cell is ProgressBarTableCell<T, unknown> {
34
+ return cell.column.columnDef instanceof ProgressBarDef;
35
+ }
36
+ </script>
37
+
38
+ <script
39
+ lang="ts"
40
+ generics="T extends object"
41
+ >
42
+ import { dev } from '$app/environment';
43
+ import { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
44
+ import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
45
+ import type { RowSelectionTableCell } from './RowSelectionTableCell.js';
46
+
47
+ let { cell, expandedColumnDef, onExpandChange }: TableColumnProps<T> = $props();
48
+
49
+ /** Narrowing type-guard distinguishing the row-selection cell. */
50
+ function isRowSelectionCell<T extends object>(
51
+ cell: TableCell<T>
52
+ ): cell is RowSelectionTableCell<T> {
53
+ return cell.column.columnDef instanceof RowSelectionDef;
54
+ }
55
+
56
+ /**
57
+ * Returns true when the accessor output is a Svelte component constructor.
58
+ * Distinguishing a Svelte 5 component (a function) from a snippet is a
59
+ * runtime-only heuristic (both are typeof 'function'); the
60
+ * constructor-only branch is reached first because TableColumn checks
61
+ * `valueOrComponentIsConstructor` before `isSnippet`. Tightening this to
62
+ * a real type-level discriminator is tracked under the
63
+ * RowGenericThreading follow-up.
64
+ */
65
+ function valueOrComponentIsConstructor(
66
+ valueOrComponent: unknown
67
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
68
+ ): valueOrComponent is Component<any> {
69
+ return typeof valueOrComponent === 'function';
70
+ }
71
+
72
+ /** Narrowing type-guard distinguishing an actions cell. */
73
+ function isActionsDef(cell: TableCell<T>): cell is ActionsTableCell<T, unknown> {
74
+ return cell.column.columnDef instanceof ActionsDef;
75
+ }
76
+
77
+ /** Narrowing type-guard distinguishing the expand-row cell. */
78
+ function isExpandTableCell(
79
+ cell: TableCell<T>
80
+ ): cell is ExpandTableCell<T, object, Primitive, unknown> {
81
+ return cell.column.columnDef instanceof ExpandDef;
82
+ }
83
+
84
+ /** Heuristic snippet check; both Snippets and Components are functions at runtime. */
85
+ function isSnippet(value: unknown): value is Snippet<[TableCell<T>]> {
86
+ return !!value && typeof value == 'function';
87
+ }
88
+ </script>
89
+
90
+ {#if cell.column.getIsVisible()}
91
+ {@const columnDef = cell.column.columnDef}
92
+
93
+ {#if isRowSelectionCell(cell)}
94
+ <TableRowSelectionCheckbox {cell} />
95
+ {:else if isActionsDef(cell)}
96
+ <ActionsCell {cell} />
97
+ {:else if isExpandTableCell(cell)}
98
+ <ExpandCell
99
+ {cell}
100
+ {expandedColumnDef}
101
+ {onExpandChange}
102
+ />
103
+ {:else if columnDef.columnType !== ColumnType.Display}
104
+ <AccessorComponent {cell} />
105
+ {:else if cell.column.columnDef instanceof AbstractDisplayDef}
106
+ {#if cell.column.columnDef.displayType === DisplayType.Bubbles}
107
+ <BubbleCell {cell} />
108
+ {:else if cell.column.columnDef.displayType === DisplayType.Validity}
109
+ <ValidityCell {cell} />
110
+ {:else if isProgressBarTableCell(cell)}
111
+ <ProgressCell {cell} />
112
+ {:else if cell.column.columnDef.displayType === DisplayType.Normal}
113
+ <FocusableImmutableCell {cell} />
114
+ {:else}
115
+ {#if dev}
116
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
117
+ {@debug cell}
118
+ {/if}
119
+ Unknown Cell Type
120
+ {/if}
121
+ {:else}
122
+ {@const valueOrComponentPromise =
123
+ cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
124
+ cell.row.original[cell.column.id as keyof typeof cell.row.original]}
125
+
126
+ {#await valueOrComponentPromise}
127
+ <FocusableImmutableCell {cell} />
128
+ {:then Value}
129
+ {#if typeof Value === 'string' || typeof Value == 'number'}
130
+ <FocusableImmutableCell {cell} />
131
+ {:else if valueOrComponentIsConstructor(Value)}
132
+ <FocusableImmutableCell {cell}>
133
+ <Value {cell} />
134
+ </FocusableImmutableCell>
135
+ {:else if isSnippet(Value)}
136
+ <FocusableImmutableCell {cell}>
137
+ <!-- eslint-disable-next-line @typescript-eslint/no-unsafe-call -->
138
+ {@render Value(cell)}
139
+ </FocusableImmutableCell>
140
+ {:else}
141
+ {#if dev}
142
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
143
+ {@debug cell}
144
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
145
+ {@debug Value}
146
+ {/if}
147
+ Unknown Cell or value Type
148
+ {/if}
149
+ {:catch e}
150
+ <FocusableImmutableCell {cell}>
151
+ {#if dev}
152
+ {getErrorMessage(e)}
153
+ {:else}
154
+ Error rendering cell
155
+ {/if}
156
+ </FocusableImmutableCell>
157
+ {/await}
158
+ {/if}
159
+ {/if}