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