@lavalogic/scoria 0.40.31 → 0.40.33

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 (137) hide show
  1. package/README.md +58 -58
  2. package/dist/Components/AccordionGroup.svelte +28 -28
  3. package/dist/Components/AccordionGroupButton.svelte +60 -60
  4. package/dist/Components/Action.svelte +48 -48
  5. package/dist/Components/AlertModal.svelte +102 -102
  6. package/dist/Components/Base/ContextWrapper.svelte +45 -45
  7. package/dist/Components/Base/Pagination.svelte +135 -135
  8. package/dist/Components/Base/Snippets.svelte +25 -25
  9. package/dist/Components/BigRadioSet.svelte +34 -34
  10. package/dist/Components/Bubble.svelte +38 -38
  11. package/dist/Components/Button.svelte +83 -83
  12. package/dist/Components/Checkbox.svelte +71 -71
  13. package/dist/Components/CollapsibleCard.svelte +59 -59
  14. package/dist/Components/CollapsibleMenuGroup.svelte +43 -43
  15. package/dist/Components/ConditionBuilder/ConditionBuilder.svelte +101 -101
  16. package/dist/Components/Contexts/ContextMenu.svelte +76 -76
  17. package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
  18. package/dist/Components/Contexts/ContextMenuOption.svelte +38 -38
  19. package/dist/Components/Contexts/Toast.svelte +71 -71
  20. package/dist/Components/Contexts/ToastContainer.svelte +34 -34
  21. package/dist/Components/Contexts/Tooltip.svelte +32 -32
  22. package/dist/Components/DataMatrixIcon.svelte +37 -37
  23. package/dist/Components/DateInput.svelte +80 -80
  24. package/dist/Components/DatePicker.svelte +86 -86
  25. package/dist/Components/DesktopModal.svelte +65 -65
  26. package/dist/Components/Dial.svelte +35 -35
  27. package/dist/Components/DimensionInput.svelte +95 -95
  28. package/dist/Components/DragMenu/DragMenuHolder.svelte +53 -53
  29. package/dist/Components/DragMenu/DraggableCard.svelte +49 -49
  30. package/dist/Components/FileCard.svelte +18 -18
  31. package/dist/Components/FileUpload.svelte +115 -115
  32. package/dist/Components/GridInput.svelte +123 -123
  33. package/dist/Components/GridInputSet.svelte +21 -21
  34. package/dist/Components/HorizontalTabGroup.svelte +54 -54
  35. package/dist/Components/HorizontalTabGroupButton.svelte +32 -32
  36. package/dist/Components/Icon.svelte +68 -68
  37. package/dist/Components/Icons.d.ts +3 -3
  38. package/dist/Components/Icons.js +11 -11
  39. package/dist/Components/InfoAlert.svelte +32 -32
  40. package/dist/Components/LoadingAnimation.svelte +228 -227
  41. package/dist/Components/LoadingModal.svelte +19 -19
  42. package/dist/Components/LoadingOverlay.svelte +20 -20
  43. package/dist/Components/Modal.svelte +127 -127
  44. package/dist/Components/MultiSelect.svelte +126 -126
  45. package/dist/Components/Nav/Nav.svelte +71 -71
  46. package/dist/Components/Nav/NavServiceMenuList.svelte +37 -37
  47. package/dist/Components/Nav/NavTab.svelte +46 -46
  48. package/dist/Components/Nav/ServiceMenuItem.svelte +62 -62
  49. package/dist/Components/Nav/ServicesNav.svelte +50 -50
  50. package/dist/Components/NumberInput.svelte +98 -98
  51. package/dist/Components/OptionCards.svelte +58 -58
  52. package/dist/Components/PageHeading.svelte +21 -21
  53. package/dist/Components/PasswordInput.svelte +61 -61
  54. package/dist/Components/PopoverButton.svelte +53 -53
  55. package/dist/Components/Portal.svelte +7 -7
  56. package/dist/Components/ProgressBubble.svelte +42 -42
  57. package/dist/Components/QuerySelect.svelte +102 -102
  58. package/dist/Components/ResourceCalendar/ResourceCalendar.svelte +241 -241
  59. package/dist/Components/SidebarPanel.svelte +32 -32
  60. package/dist/Components/SingleSelect.svelte +122 -122
  61. package/dist/Components/StepButton.svelte +48 -48
  62. package/dist/Components/StepForm.svelte +58 -58
  63. package/dist/Components/Switch.svelte +43 -43
  64. package/dist/Components/Table/ARCHITECTURE.md +298 -298
  65. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +30 -30
  66. package/dist/Components/Table/Body/Rows/ColumnList.svelte +24 -24
  67. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +165 -165
  68. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +13 -13
  69. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +120 -120
  70. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +81 -81
  71. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +92 -92
  72. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +110 -110
  73. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +54 -54
  74. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +35 -35
  75. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +64 -64
  76. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +82 -82
  77. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +88 -88
  78. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +90 -90
  79. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +96 -96
  80. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +71 -71
  81. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +124 -124
  82. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +91 -91
  83. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +88 -88
  84. package/dist/Components/Table/Body/Rows/TableRow.svelte +127 -127
  85. package/dist/Components/Table/Body/TableBody.svelte +92 -92
  86. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +25 -25
  87. package/dist/Components/Table/Headers/SelectAllHeader.svelte +20 -20
  88. package/dist/Components/Table/Headers/TableHead.svelte +175 -175
  89. package/dist/Components/Table/Misc/ColumnPanel.svelte +32 -32
  90. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +29 -29
  91. package/dist/Components/Table/Misc/FilterInput.svelte +326 -326
  92. package/dist/Components/Table/Misc/FilterPanel.svelte +79 -79
  93. package/dist/Components/Table/Misc/FilterPanelModal.svelte +21 -21
  94. package/dist/Components/Table/Misc/ShareViewModal.svelte +118 -118
  95. package/dist/Components/Table/Misc/SidePanel.svelte +24 -24
  96. package/dist/Components/Table/Misc/TableConfigurationModal.svelte +318 -318
  97. package/dist/Components/Table/Misc/TableFooter.svelte +201 -201
  98. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +112 -112
  99. package/dist/Components/Table/Misc/TableSidebar.svelte +116 -116
  100. package/dist/Components/Table/Misc/TableViewDropdown.svelte +25 -25
  101. package/dist/Components/Table/Misc/ToolboxPanel.svelte +60 -60
  102. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +63 -63
  103. package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +101 -101
  104. package/dist/Components/Table/NestedTable.svelte +29 -29
  105. package/dist/Components/Table/Table.svelte +140 -140
  106. package/dist/Components/Test/TestContextConsumer.svelte +8 -8
  107. package/dist/Components/TextArea.svelte +92 -90
  108. package/dist/Components/TextInput.svelte +128 -117
  109. package/dist/Components/ThreeStateRadio.svelte +101 -101
  110. package/dist/Components/Touch/BoolCard.svelte +27 -27
  111. package/dist/Components/Touch/DateModal.svelte +98 -98
  112. package/dist/Components/Touch/EditCard.svelte +44 -44
  113. package/dist/Components/Touch/InfoCard.svelte +25 -25
  114. package/dist/Components/Touch/InfoTextCard.svelte +22 -22
  115. package/dist/Components/Touch/ModalExplanation.svelte +13 -13
  116. package/dist/Components/Touch/NumberKeyboard.svelte +81 -81
  117. package/dist/Components/Touch/NumberModal.svelte +49 -49
  118. package/dist/Components/Touch/PlusMinusCard.svelte +40 -40
  119. package/dist/Components/Touch/SelectModal.svelte +86 -86
  120. package/dist/Components/Touch/SummaryCard.svelte +74 -74
  121. package/dist/Components/Touch/TextAreaModal.svelte +53 -53
  122. package/dist/Components/Touch/TextModal.svelte +56 -56
  123. package/dist/Components/Touch/TouchCard.svelte +28 -28
  124. package/dist/Components/Touch/TouchModal.svelte +141 -141
  125. package/dist/Components/Touch/UtilityButton.svelte +63 -63
  126. package/dist/Components/VerticalTabGroup.svelte +38 -38
  127. package/dist/Components/VerticalTabGroupButton.svelte +46 -46
  128. package/dist/Helpers/Datamatrix.d.ts +19 -19
  129. package/dist/Helpers/Datamatrix.js +291 -291
  130. package/dist/Types/Examples/ExampleModal.svelte +27 -27
  131. package/dist/paraglide/README.md +1 -1
  132. package/dist/scss/_basics.scss +12 -12
  133. package/dist/scss/_colours.scss +140 -140
  134. package/dist/scss/_motion.scss +57 -57
  135. package/dist/scss/_sizing.scss +85 -85
  136. package/dist/scss/_transitions.scss +8 -8
  137. package/package.json +1 -1
@@ -1,8 +1,8 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="T extends object, RowIdType extends Primitive"
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="T extends object, RowIdType extends Primitive"
6
6
  >import QuerySelect from "../../../../QuerySelect.svelte";
7
7
  import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
8
8
  import "../../../Types/Context/TableInitOptions.js";
@@ -119,96 +119,96 @@ function removeKeydownEvent() {
119
119
  $effect(() => editable.attachEditListener(tdref));
120
120
  // Ensure the keydown listener is dropped when the cell unmounts.
121
121
  $effect(() => removeKeydownEvent);
122
- </script>
123
-
124
- {#if editable.isBeingEdited}
125
- <div
126
- class="select-cell"
127
- bind:this={tdref}
128
- >
129
- {#await value then value}
130
- <QuerySelect
131
- focusOnLoad
132
- name={cell.column.columnDef.id}
133
- valueProp={'value' as never}
134
- labelProp={'label' as never}
135
- clearable={cell.column.columnDef.clearable}
136
- valueAsObject={false}
137
- value={value as never}
138
- query={(v: string) => columnDef.query(v, cell.row.original, cell.row.originalIndex)}
139
- bind:options={lastOptions as never}
140
- onfocus={addKeydownEvent}
141
- onchange={(newValue: unknown) => {
142
- // `valueAsObject={false}` makes QuerySelect emit the
143
- // primitive value directly. The `as never` casts work
144
- // around component-generic inference (see TableSelect
145
- // for the same workaround).
146
- if (newValue !== value) {
147
- tableContext
148
- .onEditCell(cell.row.original, editable.focusDetails.coordinates, newValue ?? null)
149
- .catch(devCatch);
150
- }
151
-
152
- removeKeydownEvent();
153
- tableContext.focusStartIsBeingEdited = false;
154
- tick()
155
- .then(() => {
156
- tdref?.focus();
157
- })
158
- .catch(devCatch);
159
- }}
160
- />
161
- {/await}
162
- </div>
163
- {:else}
164
- <!-- svelte-ignore a11y_mouse_events_have_key_events -->
165
- <!-- svelte-ignore a11y_no_static_element_interactions -->
166
- <div
167
- style={editable.focusDetails.outline}
168
- bind:this={tdref}
169
- tabIndex="0"
170
- id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
171
- class="focusable editable"
172
- class:multifocus={editable.focusDetails.isMultiFocused}
173
- class:multifocus-start={editable.focusDetails.isMultiFocusStart}
174
- class:info={editable.validity == Validity.Info}
175
- class:success={editable.validity == Validity.Valid}
176
- class:warning={editable.validity == Validity.Warning}
177
- class:error={editable.validity == Validity.Invalid}
178
- ondblclick={() => {
179
- editable.handleDoubleClickFocus();
180
- }}
181
- onmousedown={(e) => {
182
- // start focus only on left click
183
- if (e.button === 0) {
184
- if (e.shiftKey) {
185
- e.preventDefault();
186
- tableContext.setFocusEnd(editable.focusDetails.coordinates);
187
- } else {
188
- tableContext.startFocus(editable.focusDetails.coordinates);
189
- }
190
- }
191
- }}
192
- onmouseover={() => {
193
- if (tableContext.isMousingDown) {
194
- tableContext.setFocusEnd(editable.focusDetails.coordinates);
195
- }
196
- }}
197
- onmouseup={() => {
198
- const wasHandled = editable.handleSingleClickFocus();
199
- if (!wasHandled) {
200
- tableContext.endFocus(editable.focusDetails.coordinates);
201
- }
202
- }}
203
- >
204
- {#await visibleValue}
205
- {loadingText()}
206
- {:then v}
207
- {v}
208
- {/await}
209
- </div>
210
- {/if}
211
-
122
+ </script>
123
+
124
+ {#if editable.isBeingEdited}
125
+ <div
126
+ class="select-cell"
127
+ bind:this={tdref}
128
+ >
129
+ {#await value then value}
130
+ <QuerySelect
131
+ focusOnLoad
132
+ name={cell.column.columnDef.id}
133
+ valueProp={'value' as never}
134
+ labelProp={'label' as never}
135
+ clearable={cell.column.columnDef.clearable}
136
+ valueAsObject={false}
137
+ value={value as never}
138
+ query={(v: string) => columnDef.query(v, cell.row.original, cell.row.originalIndex)}
139
+ bind:options={lastOptions as never}
140
+ onfocus={addKeydownEvent}
141
+ onchange={(newValue: unknown) => {
142
+ // `valueAsObject={false}` makes QuerySelect emit the
143
+ // primitive value directly. The `as never` casts work
144
+ // around component-generic inference (see TableSelect
145
+ // for the same workaround).
146
+ if (newValue !== value) {
147
+ tableContext
148
+ .onEditCell(cell.row.original, editable.focusDetails.coordinates, newValue ?? null)
149
+ .catch(devCatch);
150
+ }
151
+
152
+ removeKeydownEvent();
153
+ tableContext.focusStartIsBeingEdited = false;
154
+ tick()
155
+ .then(() => {
156
+ tdref?.focus();
157
+ })
158
+ .catch(devCatch);
159
+ }}
160
+ />
161
+ {/await}
162
+ </div>
163
+ {:else}
164
+ <!-- svelte-ignore a11y_mouse_events_have_key_events -->
165
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
166
+ <div
167
+ style={editable.focusDetails.outline}
168
+ bind:this={tdref}
169
+ tabIndex="0"
170
+ id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
171
+ class="focusable editable"
172
+ class:multifocus={editable.focusDetails.isMultiFocused}
173
+ class:multifocus-start={editable.focusDetails.isMultiFocusStart}
174
+ class:info={editable.validity == Validity.Info}
175
+ class:success={editable.validity == Validity.Valid}
176
+ class:warning={editable.validity == Validity.Warning}
177
+ class:error={editable.validity == Validity.Invalid}
178
+ ondblclick={() => {
179
+ editable.handleDoubleClickFocus();
180
+ }}
181
+ onmousedown={(e) => {
182
+ // start focus only on left click
183
+ if (e.button === 0) {
184
+ if (e.shiftKey) {
185
+ e.preventDefault();
186
+ tableContext.setFocusEnd(editable.focusDetails.coordinates);
187
+ } else {
188
+ tableContext.startFocus(editable.focusDetails.coordinates);
189
+ }
190
+ }
191
+ }}
192
+ onmouseover={() => {
193
+ if (tableContext.isMousingDown) {
194
+ tableContext.setFocusEnd(editable.focusDetails.coordinates);
195
+ }
196
+ }}
197
+ onmouseup={() => {
198
+ const wasHandled = editable.handleSingleClickFocus();
199
+ if (!wasHandled) {
200
+ tableContext.endFocus(editable.focusDetails.coordinates);
201
+ }
202
+ }}
203
+ >
204
+ {#await visibleValue}
205
+ {loadingText()}
206
+ {:then v}
207
+ {v}
208
+ {/await}
209
+ </div>
210
+ {/if}
211
+
212
212
  <style>.focusable,
213
213
  .checkbox-cell,
214
214
  .input-cell,
@@ -285,4 +285,4 @@ $effect(() => removeKeydownEvent);
285
285
  --sv-item-wrap-padding: 0px 0.75rem;
286
286
  --input-height: var(--height);
287
287
  min-width: 0;
288
- }</style>
288
+ }</style>
@@ -1,18 +1,18 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- module
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ module
6
6
  >import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
7
7
  import "../../../Types/Context/TableInitOptions.js";
8
8
  import { devCatch, isValidityTuple } from "../../../../../Helpers/Helpers.svelte.js";
9
9
  import { Validity } from "../../../../../Types/Internal/Validity.js";
10
10
  import { getContext, tick, untrack } from "svelte";
11
- </script>
12
-
13
- <script
14
- lang="ts"
15
- generics="T extends object, RowIdType extends Primitive"
11
+ </script>
12
+
13
+ <script
14
+ lang="ts"
15
+ generics="T extends object, RowIdType extends Primitive"
16
16
  >const { cell } = $props();
17
17
  const tableContext = getContext(TableContext.identifier);
18
18
  const focusDetails = $derived(tableContext._focus.getFocusDetailsFor(cell));
@@ -79,66 +79,66 @@ const onchange = () => {
79
79
  tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
80
80
  };
81
81
  let inputRef = $state();
82
- </script>
83
-
84
- <!-- svelte-ignore a11y_mouse_events_have_key_events -->
85
- <!-- svelte-ignore a11y_no_static_element_interactions -->
86
- <div
87
- class="checkbox-cell"
88
- class:info={validity == Validity.Info}
89
- class:success={validity == Validity.Valid}
90
- class:warning={validity == Validity.Warning}
91
- class:error={validity == Validity.Invalid}
92
- onmousedown={(e) => {
93
- // start focus only on left click
94
- if (e.button === 0) {
95
- if (e.shiftKey) {
96
- e.preventDefault();
97
- tableContext.setFocusEnd(focusDetails.coordinates);
98
- } else {
99
- tableContext.startFocus(focusDetails.coordinates);
100
- }
101
- }
102
- }}
103
- onkeydown={(e) => {
104
- if (e.key === 'Enter') {
105
- e.stopPropagation();
106
- }
107
- }}
108
- onkeyup={(e) => {
109
- if (e.key === 'Enter') {
110
- e.stopPropagation();
111
-
112
- tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
113
-
114
- inputRef?.dispatchEvent(new InputEvent('change'));
115
- }
116
- }}
117
- onmouseover={() => {
118
- if (tableContext.isMousingDown) {
119
- tableContext.setFocusEnd(focusDetails.coordinates);
120
- }
121
- }}
122
- onmouseup={() => {
123
- tableContext.endFocus(focusDetails.coordinates);
124
- }}
125
- >
126
- <label
127
- class:multifocus={focusDetails.isMultiFocused}
128
- class:multifocus-start={focusDetails.isMultiFocusStart}
129
- style={focusDetails.outline}
130
- >
131
- <input
132
- id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
133
- bind:this={inputRef}
134
- {onchange}
135
- type="checkbox"
136
- checked={isSelected ?? _isSelectedAsync}
137
- disabled={!isSelectable || tableContext.showSelectedOnly}
138
- />
139
- </label>
140
- </div>
141
-
82
+ </script>
83
+
84
+ <!-- svelte-ignore a11y_mouse_events_have_key_events -->
85
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
86
+ <div
87
+ class="checkbox-cell"
88
+ class:info={validity == Validity.Info}
89
+ class:success={validity == Validity.Valid}
90
+ class:warning={validity == Validity.Warning}
91
+ class:error={validity == Validity.Invalid}
92
+ onmousedown={(e) => {
93
+ // start focus only on left click
94
+ if (e.button === 0) {
95
+ if (e.shiftKey) {
96
+ e.preventDefault();
97
+ tableContext.setFocusEnd(focusDetails.coordinates);
98
+ } else {
99
+ tableContext.startFocus(focusDetails.coordinates);
100
+ }
101
+ }
102
+ }}
103
+ onkeydown={(e) => {
104
+ if (e.key === 'Enter') {
105
+ e.stopPropagation();
106
+ }
107
+ }}
108
+ onkeyup={(e) => {
109
+ if (e.key === 'Enter') {
110
+ e.stopPropagation();
111
+
112
+ tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
113
+
114
+ inputRef?.dispatchEvent(new InputEvent('change'));
115
+ }
116
+ }}
117
+ onmouseover={() => {
118
+ if (tableContext.isMousingDown) {
119
+ tableContext.setFocusEnd(focusDetails.coordinates);
120
+ }
121
+ }}
122
+ onmouseup={() => {
123
+ tableContext.endFocus(focusDetails.coordinates);
124
+ }}
125
+ >
126
+ <label
127
+ class:multifocus={focusDetails.isMultiFocused}
128
+ class:multifocus-start={focusDetails.isMultiFocusStart}
129
+ style={focusDetails.outline}
130
+ >
131
+ <input
132
+ id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
133
+ bind:this={inputRef}
134
+ {onchange}
135
+ type="checkbox"
136
+ checked={isSelected ?? _isSelectedAsync}
137
+ disabled={!isSelectable || tableContext.showSelectedOnly}
138
+ />
139
+ </label>
140
+ </div>
141
+
142
142
  <style>.focusable,
143
143
  .checkbox-cell,
144
144
  .input-cell,
@@ -214,4 +214,4 @@ label.multifocus.multifocus-start {
214
214
  .input-cell.error,
215
215
  .select-cell.error {
216
216
  background-color: #f9e9e9;
217
- }</style>
217
+ }</style>
@@ -1,8 +1,8 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- module
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ module
6
6
  >import { dev } from "$app/environment";
7
7
  import { m as i18n } from "../../../../../paraglide/messages.js";
8
8
  import SingleSelect from "../../../../SingleSelect.svelte";
@@ -12,11 +12,11 @@ import { cssLength, devCatch, loadingText } from "../../../../../Helpers/Helpers
12
12
  import { Validity } from "../../../../../Types/Internal/Validity.js";
13
13
  import { getContext, tick } from "svelte";
14
14
  import { useAsyncEditable } from "./_helpers/useAsyncEditable.svelte.js";
15
- </script>
16
-
17
- <script
18
- lang="ts"
19
- generics="T extends object, FilterValueType, RowIdType extends Primitive"
15
+ </script>
16
+
17
+ <script
18
+ lang="ts"
19
+ generics="T extends object, FilterValueType, RowIdType extends Primitive"
20
20
  >const { cell } = $props();
21
21
  let tdref = $state();
22
22
  const selectValue = $derived(cell.getValue());
@@ -78,119 +78,119 @@ function removeKeydownEvent() {
78
78
  $effect(() => editable.attachEditListener(tdref));
79
79
  // Drop the keydown listener if the cell unmounts.
80
80
  $effect(() => removeKeydownEvent);
81
- </script>
82
-
83
- {#if editable.isBeingEdited}
84
- <div
85
- class="select-cell"
86
- bind:this={tdref}
87
- >
88
- {#await Promise.all([optionsPromise, selectValue])}
89
- {loadingText()}
90
- {:then [options, value]}
91
- <SingleSelect
92
- focusOnLoad
93
- name="Item"
94
- placeholder={i18n['scoria.label.select_item']()}
95
- valueProp={'value' as never}
96
- labelProp={'label' as never}
97
- value={(value ?? null) as never}
98
- options={options as never}
99
- width={cssLength('100%')}
100
- clearable={cell.column.columnDef.clearable}
101
- onfocus={addKeydownEvent}
102
- valueAsObject={false}
103
- onchange={(newValue: SelectOption<T>['value'] | null) => {
104
- // `valueAsObject={false}` makes SingleSelect's onchange
105
- // emit the primitive key value (`SelectOption<T>['value']`,
106
- // i.e. `T`) directly, which flows straight through to
107
- // `onEditCell`. The `as never` prop casts work around
108
- // the fact that Svelte component generics cannot be
109
- // passed explicitly in template syntax: the inferred V
110
- // (from `value: T`) clashes with the option type
111
- // (`SelectOption<T>`), and the casts let `V` be inferred
112
- // from the explicit `onchange` annotation.
113
- if (newValue !== value) {
114
- if (optional || newValue != null) {
115
- tableContext
116
- .onEditCell(cell.row.original, editable.focusDetails.coordinates, newValue ?? null)
117
- .catch(devCatch);
118
- }
119
- }
120
- removeKeydownEvent();
121
- tableContext.focusStartIsBeingEdited = false;
122
- tick()
123
- .then(() => {
124
- tdref?.focus();
125
- })
126
- .catch(devCatch);
127
- }}
128
- />
129
- {:catch e}
130
- {#if dev}
131
- error: {e}
132
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
133
- {@debug e}
134
- {/if}
135
- {i18n['scoria.text.options_not_retrieved']()}
136
- {/await}
137
- </div>
138
- {:else}
139
- <!-- svelte-ignore a11y_mouse_events_have_key_events -->
140
- <!-- svelte-ignore a11y_no_static_element_interactions -->
141
- <div
142
- bind:this={tdref}
143
- tabIndex="0"
144
- style={editable.focusDetails.outline}
145
- id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
146
- class="focusable editable"
147
- class:multifocus={editable.focusDetails.isMultiFocused}
148
- class:multifocus-start={editable.focusDetails.isMultiFocusStart}
149
- class:info={editable.validity == Validity.Info}
150
- class:success={editable.validity == Validity.Valid}
151
- class:warning={editable.validity == Validity.Warning}
152
- class:error={editable.validity == Validity.Invalid}
153
- ondblclick={() => {
154
- editable.handleDoubleClickFocus();
155
- }}
156
- onmousedown={(e) => {
157
- // start focus only on left click
158
- if (e.button === 0) {
159
- if (e.shiftKey) {
160
- e.preventDefault();
161
- tableContext.setFocusEnd(editable.focusDetails.coordinates);
162
- } else {
163
- tableContext.startFocus(editable.focusDetails.coordinates);
164
- }
165
- }
166
- }}
167
- onmouseover={() => {
168
- if (tableContext.isMousingDown) {
169
- tableContext.setFocusEnd(editable.focusDetails.coordinates);
170
- }
171
- }}
172
- onmouseup={() => {
173
- const wasHandled = editable.handleSingleClickFocus();
174
- if (!wasHandled) {
175
- tableContext.endFocus(editable.focusDetails.coordinates);
176
- }
177
- }}
178
- >
179
- {#await visibleValue}
180
- {loadingText()}
181
- {:then value}
182
- {value ?? '-'}
183
- {:catch e}
184
- {#if dev}
185
- error: {e}
186
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
187
- {@debug e}
188
- {/if}
189
- {i18n['scoria.text.options_not_retrieved']()}
190
- {/await}
191
- </div>
192
- {/if}
193
-
81
+ </script>
82
+
83
+ {#if editable.isBeingEdited}
84
+ <div
85
+ class="select-cell"
86
+ bind:this={tdref}
87
+ >
88
+ {#await Promise.all([optionsPromise, selectValue])}
89
+ {loadingText()}
90
+ {:then [options, value]}
91
+ <SingleSelect
92
+ focusOnLoad
93
+ name="Item"
94
+ placeholder={i18n['scoria.label.select_item']()}
95
+ valueProp={'value' as never}
96
+ labelProp={'label' as never}
97
+ value={(value ?? null) as never}
98
+ options={options as never}
99
+ width={cssLength('100%')}
100
+ clearable={cell.column.columnDef.clearable}
101
+ onfocus={addKeydownEvent}
102
+ valueAsObject={false}
103
+ onchange={(newValue: SelectOption<T>['value'] | null) => {
104
+ // `valueAsObject={false}` makes SingleSelect's onchange
105
+ // emit the primitive key value (`SelectOption<T>['value']`,
106
+ // i.e. `T`) directly, which flows straight through to
107
+ // `onEditCell`. The `as never` prop casts work around
108
+ // the fact that Svelte component generics cannot be
109
+ // passed explicitly in template syntax: the inferred V
110
+ // (from `value: T`) clashes with the option type
111
+ // (`SelectOption<T>`), and the casts let `V` be inferred
112
+ // from the explicit `onchange` annotation.
113
+ if (newValue !== value) {
114
+ if (optional || newValue != null) {
115
+ tableContext
116
+ .onEditCell(cell.row.original, editable.focusDetails.coordinates, newValue ?? null)
117
+ .catch(devCatch);
118
+ }
119
+ }
120
+ removeKeydownEvent();
121
+ tableContext.focusStartIsBeingEdited = false;
122
+ tick()
123
+ .then(() => {
124
+ tdref?.focus();
125
+ })
126
+ .catch(devCatch);
127
+ }}
128
+ />
129
+ {:catch e}
130
+ {#if dev}
131
+ error: {e}
132
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
133
+ {@debug e}
134
+ {/if}
135
+ {i18n['scoria.text.options_not_retrieved']()}
136
+ {/await}
137
+ </div>
138
+ {:else}
139
+ <!-- svelte-ignore a11y_mouse_events_have_key_events -->
140
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
141
+ <div
142
+ bind:this={tdref}
143
+ tabIndex="0"
144
+ style={editable.focusDetails.outline}
145
+ id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
146
+ class="focusable editable"
147
+ class:multifocus={editable.focusDetails.isMultiFocused}
148
+ class:multifocus-start={editable.focusDetails.isMultiFocusStart}
149
+ class:info={editable.validity == Validity.Info}
150
+ class:success={editable.validity == Validity.Valid}
151
+ class:warning={editable.validity == Validity.Warning}
152
+ class:error={editable.validity == Validity.Invalid}
153
+ ondblclick={() => {
154
+ editable.handleDoubleClickFocus();
155
+ }}
156
+ onmousedown={(e) => {
157
+ // start focus only on left click
158
+ if (e.button === 0) {
159
+ if (e.shiftKey) {
160
+ e.preventDefault();
161
+ tableContext.setFocusEnd(editable.focusDetails.coordinates);
162
+ } else {
163
+ tableContext.startFocus(editable.focusDetails.coordinates);
164
+ }
165
+ }
166
+ }}
167
+ onmouseover={() => {
168
+ if (tableContext.isMousingDown) {
169
+ tableContext.setFocusEnd(editable.focusDetails.coordinates);
170
+ }
171
+ }}
172
+ onmouseup={() => {
173
+ const wasHandled = editable.handleSingleClickFocus();
174
+ if (!wasHandled) {
175
+ tableContext.endFocus(editable.focusDetails.coordinates);
176
+ }
177
+ }}
178
+ >
179
+ {#await visibleValue}
180
+ {loadingText()}
181
+ {:then value}
182
+ {value ?? '-'}
183
+ {:catch e}
184
+ {#if dev}
185
+ error: {e}
186
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
187
+ {@debug e}
188
+ {/if}
189
+ {i18n['scoria.text.options_not_retrieved']()}
190
+ {/await}
191
+ </div>
192
+ {/if}
193
+
194
194
  <style>.focusable,
195
195
  .checkbox-cell,
196
196
  .input-cell,
@@ -267,4 +267,4 @@ $effect(() => removeKeydownEvent);
267
267
  --sv-item-wrap-padding: 0px 0.75rem;
268
268
  --input-height: var(--height);
269
269
  min-width: 0;
270
- }</style>
270
+ }</style>