@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,202 +1,198 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- module
6
- >
7
- import { dev } from '$app/environment';
8
- import { loadingText } from '../Helpers/Helpers.svelte.js';
9
- import type { GridItem } from '../Types/Internal/GridItem.js';
10
- import type {
11
- GridMultiSelectItem,
12
- GridMultiSelectItemAsObject,
13
- GridMultiSelectItemAsPrimitive,
14
- } from '../Types/Internal/GridMultiSelectItem.js';
15
- import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
16
- import type {
17
- GridSingleSelectItem,
18
- GridSingleSelectItemAsObject,
19
- GridSingleSelectItemAsPrimitive,
20
- } from '../Types/Internal/GridSingleSelectItem.js';
21
- import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
22
- import type { ValueProp } from '../Types/Internal/Misc.js';
23
- import type { GridInputProps } from './GridInputProps.js';
24
- import MultiSelect from './MultiSelect.svelte';
25
- import SingleSelect from './SingleSelect.svelte';
26
- import TextInput from './TextInput.svelte';
27
-
28
- const textTypes = new Set(['text', 'email', 'tel']);
29
- </script>
30
-
31
- <script
32
- lang="ts"
33
- generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
34
- >
35
- const { item, first, last }: GridInputProps<V, VP> = $props();
36
-
37
- let value = $derived(isText(item) ? (item.value ?? '') : '');
38
-
39
- function isText<V extends Record<string, unknown>, VP extends ValueProp<V>>(
40
- item: GridItem<V, VP>
41
- ): item is GridTextItem {
42
- return item.type == null || textTypes.has(item.type);
43
- }
44
-
45
- function isSelect(item: GridItem<V, VP>): item is GridSelectItem<V, VP> {
46
- return item.type == 'select';
47
- }
48
-
49
- function isMultiSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
50
- item: GridSelectItem<A, B>
51
- ): item is GridMultiSelectItem<A, B> {
52
- return 'multi' in item && item.multi === true;
53
- }
54
-
55
- function isMultiSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
56
- item: GridMultiSelectItem<A, B>
57
- ): item is GridMultiSelectItemAsPrimitive<A, B> {
58
- return 'valueAsObject' in item && !item.valueAsObject;
59
- }
60
-
61
- function isMultiSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
62
- item: GridMultiSelectItem<A, B>
63
- ): item is GridMultiSelectItemAsObject<A, B> {
64
- return 'valueAsObject' in item && item.valueAsObject;
65
- }
66
-
67
- function isSingleSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
68
- item: GridSelectItem<A, B>
69
- ): item is GridSingleSelectItem<A, B> {
70
- return !('multi' in item) || item.multi === false;
71
- }
72
-
73
- function isSingleSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
74
- item: GridSingleSelectItem<A, B>
75
- ): item is GridSingleSelectItemAsPrimitive<A, B> {
76
- return 'valueAsObject' in item && !item.valueAsObject;
77
- }
78
-
79
- function isSingleSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
80
- item: GridSingleSelectItem<A, B>
81
- ): item is GridSingleSelectItemAsObject<A, B> {
82
- return 'valueAsObject' in item && item.valueAsObject;
83
- }
84
- </script>
85
-
86
- <label
87
- class:first
88
- class:last
89
- >
90
- <div class="left">
91
- <span
92
- class:first
93
- class:last>{item.label}</span
94
- >
95
- </div>
96
- {#if isText(item)}
97
- <TextInput
98
- disabled={item.disabled}
99
- bind:value
100
- oninput={() => {
101
- item.updater(value);
102
- }}
103
- required={item.required}
104
- invalid={item.invalid}
105
- />
106
- {:else if isSelect(item)}
107
- {#if isMultiSelect(item)}
108
- {#await item.options}
109
- {loadingText}
110
- {:then options}
111
- {#if isMultiSelectObject<V, VP>(item)}
112
- <MultiSelect
113
- name={item.name}
114
- {options}
115
- valueAsObject={true}
116
- labelProp={item.labelProp}
117
- valueProp={item.valueProp}
118
- selectedValues={item.value}
119
- invalid={item.invalid}
120
- onchange={(v: Array<V>) => {
121
- item.updater(v);
122
- }}
123
- />
124
- {:else if isMultiSelectPrimitive(item)}
125
- <MultiSelect
126
- name={item.name}
127
- {options}
128
- valueAsObject={false}
129
- labelProp={item.labelProp}
130
- valueProp={item.valueProp}
131
- selectedValues={item.value}
132
- invalid={item.invalid}
133
- onchange={(v: Array<V[VP]>) => {
134
- // Phase 7.6: `valueAsObject={false}` means MultiSelect
135
- // hands us the primitives directly; no more `.map`
136
- // to dig `.value` off each option object.
137
- item.updater(v);
138
- }}
139
- />
140
- {/if}
141
- {/await}
142
- {:else if isSingleSelect(item)}
143
- {#await item.options}
144
- {loadingText}
145
- {:then options}
146
- {#if isSingleSelectObject(item)}
147
- <SingleSelect
148
- {options}
149
- name={item.name}
150
- valueAsObject={true}
151
- labelProp={item.labelProp}
152
- valueProp={item.valueProp}
153
- value={item.value}
154
- required={item.required}
155
- clearable={!item.required}
156
- disabled={item.disabled}
157
- invalid={item.invalid}
158
- onchange={(v: V | null) => {
159
- item.updater(v);
160
- }}
161
- />
162
- {:else if isSingleSelectPrimitive(item)}
163
- <SingleSelect
164
- {options}
165
- name={item.name}
166
- valueAsObject={false}
167
- labelProp={item.labelProp}
168
- valueProp={item.valueProp}
169
- value={item.value}
170
- required={item.required}
171
- clearable={!item.required}
172
- disabled={item.disabled}
173
- invalid={item.invalid}
174
- onchange={(
175
- // Phase 7.6: `valueAsObject={false}` means SingleSelect
176
- // already passes the primitive key value; no need to
177
- // dig it back out of an option object. `clearable` is
178
- // enabled when the field is not `required`, so the
179
- // callback must accept `null` to satisfy the
180
- // SingleSelect prop signature. The annotation collapses
181
- // to `unknown` because `V extends Record<string,
182
- // unknown>` makes `V[VP]` itself `unknown`.
183
- // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
184
- v: V[VP] | null
185
- ) => {
186
- item.updater(v);
187
- }}
188
- />
189
- {/if}
190
- {/await}
191
- {/if}
192
- {:else if dev}
193
- {@const type = item.type}
194
- unknown type: {type}
195
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
196
- {@debug type}
197
- {/if}
198
- </label>
199
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ module
6
+ >
7
+ import { dev } from '$app/environment';
8
+ import { loadingText } from '../Helpers/Helpers.svelte.js';
9
+ import type { GridItem } from '../Types/Internal/GridItem.js';
10
+ import type {
11
+ GridMultiSelectItem,
12
+ GridMultiSelectItemAsObject,
13
+ GridMultiSelectItemAsPrimitive,
14
+ } from '../Types/Internal/GridMultiSelectItem.js';
15
+ import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
16
+ import type {
17
+ GridSingleSelectItem,
18
+ GridSingleSelectItemAsObject,
19
+ GridSingleSelectItemAsPrimitive,
20
+ } from '../Types/Internal/GridSingleSelectItem.js';
21
+ import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
22
+ import type { ValueProp } from '../Types/Internal/Misc.js';
23
+ import type { GridInputProps } from './GridInputProps.js';
24
+ import MultiSelect from './MultiSelect.svelte';
25
+ import SingleSelect from './SingleSelect.svelte';
26
+ import TextInput from './TextInput.svelte';
27
+
28
+ const textTypes = new Set(['text', 'email', 'tel']);
29
+ </script>
30
+
31
+ <script
32
+ lang="ts"
33
+ generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
34
+ >
35
+ const { item, first, last }: GridInputProps<V, VP> = $props();
36
+
37
+ let value = $derived(isText(item) ? (item.value ?? '') : '');
38
+
39
+ function isText<V extends Record<string, unknown>, VP extends ValueProp<V>>(
40
+ item: GridItem<V, VP>
41
+ ): item is GridTextItem {
42
+ return item.type == null || textTypes.has(item.type);
43
+ }
44
+
45
+ function isSelect(item: GridItem<V, VP>): item is GridSelectItem<V, VP> {
46
+ return item.type == 'select';
47
+ }
48
+
49
+ function isMultiSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
50
+ item: GridSelectItem<A, B>
51
+ ): item is GridMultiSelectItem<A, B> {
52
+ return 'multi' in item && item.multi === true;
53
+ }
54
+
55
+ function isMultiSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
56
+ item: GridMultiSelectItem<A, B>
57
+ ): item is GridMultiSelectItemAsPrimitive<A, B> {
58
+ return 'valueAsObject' in item && !item.valueAsObject;
59
+ }
60
+
61
+ function isMultiSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
62
+ item: GridMultiSelectItem<A, B>
63
+ ): item is GridMultiSelectItemAsObject<A, B> {
64
+ return 'valueAsObject' in item && item.valueAsObject;
65
+ }
66
+
67
+ function isSingleSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
68
+ item: GridSelectItem<A, B>
69
+ ): item is GridSingleSelectItem<A, B> {
70
+ return !('multi' in item) || item.multi === false;
71
+ }
72
+
73
+ function isSingleSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
74
+ item: GridSingleSelectItem<A, B>
75
+ ): item is GridSingleSelectItemAsPrimitive<A, B> {
76
+ return 'valueAsObject' in item && !item.valueAsObject;
77
+ }
78
+
79
+ function isSingleSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
80
+ item: GridSingleSelectItem<A, B>
81
+ ): item is GridSingleSelectItemAsObject<A, B> {
82
+ return 'valueAsObject' in item && item.valueAsObject;
83
+ }
84
+ </script>
85
+
86
+ <label
87
+ class:first
88
+ class:last
89
+ >
90
+ <div class="left">
91
+ <span
92
+ class:first
93
+ class:last>{item.label}</span
94
+ >
95
+ </div>
96
+ {#if isText(item)}
97
+ <TextInput
98
+ disabled={item.disabled}
99
+ bind:value
100
+ oninput={() => {
101
+ item.updater(value);
102
+ }}
103
+ required={item.required}
104
+ invalid={item.invalid}
105
+ />
106
+ {:else if isSelect(item)}
107
+ {#if isMultiSelect(item)}
108
+ {#await item.options}
109
+ {loadingText}
110
+ {:then options}
111
+ {#if isMultiSelectObject<V, VP>(item)}
112
+ <MultiSelect
113
+ name={item.name}
114
+ {options}
115
+ valueAsObject={true}
116
+ labelProp={item.labelProp}
117
+ valueProp={item.valueProp}
118
+ selectedValues={item.value}
119
+ invalid={item.invalid}
120
+ onchange={(v: Array<V>) => {
121
+ item.updater(v);
122
+ }}
123
+ />
124
+ {:else if isMultiSelectPrimitive(item)}
125
+ <MultiSelect
126
+ name={item.name}
127
+ {options}
128
+ valueAsObject={false}
129
+ labelProp={item.labelProp}
130
+ valueProp={item.valueProp}
131
+ selectedValues={item.value}
132
+ invalid={item.invalid}
133
+ onchange={(v: Array<V[VP]>) => {
134
+ // `valueAsObject={false}` → primitives, not SelectOption objects.
135
+ item.updater(v);
136
+ }}
137
+ />
138
+ {/if}
139
+ {/await}
140
+ {:else if isSingleSelect(item)}
141
+ {#await item.options}
142
+ {loadingText}
143
+ {:then options}
144
+ {#if isSingleSelectObject(item)}
145
+ <SingleSelect
146
+ {options}
147
+ name={item.name}
148
+ valueAsObject={true}
149
+ labelProp={item.labelProp}
150
+ valueProp={item.valueProp}
151
+ value={item.value}
152
+ required={item.required}
153
+ clearable={!item.required}
154
+ disabled={item.disabled}
155
+ invalid={item.invalid}
156
+ onchange={(v: V | null) => {
157
+ item.updater(v);
158
+ }}
159
+ />
160
+ {:else if isSingleSelectPrimitive(item)}
161
+ <SingleSelect
162
+ {options}
163
+ name={item.name}
164
+ valueAsObject={false}
165
+ labelProp={item.labelProp}
166
+ valueProp={item.valueProp}
167
+ value={item.value}
168
+ required={item.required}
169
+ clearable={!item.required}
170
+ disabled={item.disabled}
171
+ invalid={item.invalid}
172
+ onchange={(
173
+ // `valueAsObject={false}` → primitive value, not a
174
+ // SelectOption. `clearable` is on (since the field is
175
+ // not required) so the callback must accept null.
176
+ // The annotation collapses to `unknown | null` because
177
+ // `V extends Record<string, unknown>` makes `V[VP]`
178
+ // itself `unknown`.
179
+ // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
180
+ v: V[VP] | null
181
+ ) => {
182
+ item.updater(v);
183
+ }}
184
+ />
185
+ {/if}
186
+ {/await}
187
+ {/if}
188
+ {:else if dev}
189
+ {@const type = item.type}
190
+ unknown type: {type}
191
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
192
+ {@debug type}
193
+ {/if}
194
+ </label>
195
+
200
196
  <style>label {
201
197
  display: contents;
202
198
  --input-border-radius: 0;
@@ -215,4 +211,4 @@ label.first {
215
211
  }
216
212
  label.last {
217
213
  border-radius: 0 0 4px 4px;
218
- }</style>
214
+ }</style>
@@ -1,31 +1,31 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
6
- >
7
- import type { ValueProp } from '../Types/Internal/Misc.js';
8
- import GridInput from './GridInput.svelte';
9
- import type { GridInputSetProps } from './GridInputSetProps.js';
10
-
11
- const { items, header }: GridInputSetProps<V, VP> = $props();
12
-
13
- const lastIndex = $derived(items.length - 1);
14
- </script>
15
-
16
- <div class="grid">
17
- {#if header}
18
- {@render header()}
19
- {/if}
20
- {#each items as item, index (item.label)}
21
- <GridInput
22
- {item}
23
- first={index == 0}
24
- last={index == lastIndex}
25
- />
26
- {/each}
27
- </div>
28
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
6
+ >
7
+ import type { ValueProp } from '../Types/Internal/Misc.js';
8
+ import GridInput from './GridInput.svelte';
9
+ import type { GridInputSetProps } from './GridInputSetProps.js';
10
+
11
+ const { items, header }: GridInputSetProps<V, VP> = $props();
12
+
13
+ const lastIndex = $derived(items.length - 1);
14
+ </script>
15
+
16
+ <div class="grid">
17
+ {#if header}
18
+ {@render header()}
19
+ {/if}
20
+ {#each items as item, index (item.label)}
21
+ <GridInput
22
+ {item}
23
+ first={index == 0}
24
+ last={index == lastIndex}
25
+ />
26
+ {/each}
27
+ </div>
28
+
29
29
  <style>.grid {
30
30
  display: grid;
31
31
  grid-template-columns: [label] 16rem [value] 1fr;
@@ -33,4 +33,4 @@
33
33
  border: solid 1px #dae0e5;
34
34
  border-radius: 4px;
35
35
  background-color: #dae0e5;
36
- }</style>
36
+ }</style>
@@ -1,84 +1,84 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="CommonDenominator"
6
- >
7
- import { ellipses } from '../Helpers/Helpers.svelte.js';
8
- import { Colour } from '../scss/colours.js';
9
- import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
10
- import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
11
- import TextInput from './TextInput.svelte';
12
- const {
13
- tabComponent,
14
- tabs,
15
- selected,
16
- noRadius = false,
17
- grow = false,
18
- dense = false,
19
- filterable = false,
20
- filterFn,
21
- }: HorizontalTabGroupProps<CommonDenominator> = $props();
22
-
23
- let searchValue = $state('');
24
-
25
- // Debounce only the search value, not the tabs array. This way a parent
26
- // rebuilding `tabs` shows the new list immediately, while typing still
27
- // pays the 300ms cost.
28
- let debouncedSearch = $state('');
29
- $effect(() => {
30
- const term = searchValue;
31
- const id = setTimeout(() => {
32
- debouncedSearch = term;
33
- }, 300);
34
- return () => {
35
- clearTimeout(id);
36
- };
37
- });
38
-
39
- const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debouncedSearch)) : tabs);
40
- </script>
41
-
42
- <div
43
- class="wrapper"
44
- class:no-radius={noRadius}
45
- class:grow
46
- class:dense
47
- >
48
- <div class="tabs">
49
- <div class="sticky">
50
- {#if filterable}
51
- <div class="searchbar">
52
- <TextInput
53
- bind:value={searchValue}
54
- placeholder="Search any keyword to find matches{ellipses}"
55
- rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
56
- />
57
- </div>
58
- {/if}
59
- </div>
60
- {#if tabComponent}
61
- {#each filteredTabs as option (option.label)}
62
- {@render tabComponent(option, selected?.label === option.label)}
63
- {/each}
64
- {:else}
65
- {#each filteredTabs as option (option.label)}
66
- <HorizontalTabGroupButton
67
- {option}
68
- noRadius={noRadius || filterable}
69
- selected={selected?.label === option.label}
70
- />
71
- {/each}
72
- {/if}
73
- </div>
74
-
75
- <div class="content">
76
- {#if selected}
77
- {@render selected.content(selected.args)}
78
- {/if}
79
- </div>
80
- </div>
81
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="CommonDenominator"
6
+ >
7
+ import { ellipses } from '../Helpers/Helpers.svelte.js';
8
+ import { Colour } from '../scss/colours.js';
9
+ import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
10
+ import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
11
+ import TextInput from './TextInput.svelte';
12
+ const {
13
+ tabComponent,
14
+ tabs,
15
+ selected,
16
+ noRadius = false,
17
+ grow = false,
18
+ dense = false,
19
+ filterable = false,
20
+ filterFn,
21
+ }: HorizontalTabGroupProps<CommonDenominator> = $props();
22
+
23
+ let searchValue = $state('');
24
+
25
+ // Debounce only the search value, not the tabs array. This way a parent
26
+ // rebuilding `tabs` shows the new list immediately, while typing still
27
+ // pays the 300ms cost.
28
+ let debouncedSearch = $state('');
29
+ $effect(() => {
30
+ const term = searchValue;
31
+ const id = setTimeout(() => {
32
+ debouncedSearch = term;
33
+ }, 300);
34
+ return () => {
35
+ clearTimeout(id);
36
+ };
37
+ });
38
+
39
+ const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debouncedSearch)) : tabs);
40
+ </script>
41
+
42
+ <div
43
+ class="wrapper"
44
+ class:no-radius={noRadius}
45
+ class:grow
46
+ class:dense
47
+ >
48
+ <div class="tabs">
49
+ <div class="sticky">
50
+ {#if filterable}
51
+ <div class="searchbar">
52
+ <TextInput
53
+ bind:value={searchValue}
54
+ placeholder="Search any keyword to find matches{ellipses}"
55
+ rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
56
+ />
57
+ </div>
58
+ {/if}
59
+ </div>
60
+ {#if tabComponent}
61
+ {#each filteredTabs as option (option.label)}
62
+ {@render tabComponent(option, selected?.label === option.label)}
63
+ {/each}
64
+ {:else}
65
+ {#each filteredTabs as option (option.label)}
66
+ <HorizontalTabGroupButton
67
+ {option}
68
+ noRadius={noRadius || filterable}
69
+ selected={selected?.label === option.label}
70
+ />
71
+ {/each}
72
+ {/if}
73
+ </div>
74
+
75
+ <div class="content">
76
+ {#if selected}
77
+ {@render selected.content(selected.args)}
78
+ {/if}
79
+ </div>
80
+ </div>
81
+
82
82
  <style>.searchbar {
83
83
  display: flex;
84
84
  width: 100%;
@@ -132,4 +132,4 @@
132
132
  flex-grow: 1;
133
133
  overflow: visible;
134
134
  border-radius: 0 4px 0 4px;
135
- }</style>
135
+ }</style>