@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,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}