@lavalogic/scoria 0.40.32 → 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 (135) 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/InfoAlert.svelte +32 -32
  38. package/dist/Components/LoadingAnimation.svelte +228 -227
  39. package/dist/Components/LoadingModal.svelte +19 -19
  40. package/dist/Components/LoadingOverlay.svelte +20 -20
  41. package/dist/Components/Modal.svelte +127 -127
  42. package/dist/Components/MultiSelect.svelte +126 -126
  43. package/dist/Components/Nav/Nav.svelte +71 -71
  44. package/dist/Components/Nav/NavServiceMenuList.svelte +37 -37
  45. package/dist/Components/Nav/NavTab.svelte +46 -46
  46. package/dist/Components/Nav/ServiceMenuItem.svelte +62 -62
  47. package/dist/Components/Nav/ServicesNav.svelte +50 -50
  48. package/dist/Components/NumberInput.svelte +98 -98
  49. package/dist/Components/OptionCards.svelte +58 -58
  50. package/dist/Components/PageHeading.svelte +21 -21
  51. package/dist/Components/PasswordInput.svelte +61 -61
  52. package/dist/Components/PopoverButton.svelte +53 -53
  53. package/dist/Components/Portal.svelte +7 -7
  54. package/dist/Components/ProgressBubble.svelte +42 -42
  55. package/dist/Components/QuerySelect.svelte +102 -102
  56. package/dist/Components/ResourceCalendar/ResourceCalendar.svelte +241 -241
  57. package/dist/Components/SidebarPanel.svelte +32 -32
  58. package/dist/Components/SingleSelect.svelte +122 -122
  59. package/dist/Components/StepButton.svelte +48 -48
  60. package/dist/Components/StepForm.svelte +58 -58
  61. package/dist/Components/Switch.svelte +43 -43
  62. package/dist/Components/Table/ARCHITECTURE.md +298 -298
  63. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +30 -30
  64. package/dist/Components/Table/Body/Rows/ColumnList.svelte +24 -24
  65. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +165 -165
  66. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +13 -13
  67. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +120 -120
  68. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +81 -81
  69. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +92 -92
  70. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +110 -110
  71. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +54 -54
  72. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +35 -35
  73. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +64 -64
  74. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +82 -82
  75. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +88 -88
  76. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +90 -90
  77. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +96 -96
  78. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +71 -71
  79. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +124 -124
  80. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +91 -91
  81. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +88 -88
  82. package/dist/Components/Table/Body/Rows/TableRow.svelte +127 -127
  83. package/dist/Components/Table/Body/TableBody.svelte +92 -92
  84. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +25 -25
  85. package/dist/Components/Table/Headers/SelectAllHeader.svelte +20 -20
  86. package/dist/Components/Table/Headers/TableHead.svelte +175 -175
  87. package/dist/Components/Table/Misc/ColumnPanel.svelte +32 -32
  88. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +29 -29
  89. package/dist/Components/Table/Misc/FilterInput.svelte +326 -326
  90. package/dist/Components/Table/Misc/FilterPanel.svelte +79 -79
  91. package/dist/Components/Table/Misc/FilterPanelModal.svelte +21 -21
  92. package/dist/Components/Table/Misc/ShareViewModal.svelte +118 -118
  93. package/dist/Components/Table/Misc/SidePanel.svelte +24 -24
  94. package/dist/Components/Table/Misc/TableConfigurationModal.svelte +318 -318
  95. package/dist/Components/Table/Misc/TableFooter.svelte +201 -201
  96. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +112 -112
  97. package/dist/Components/Table/Misc/TableSidebar.svelte +116 -116
  98. package/dist/Components/Table/Misc/TableViewDropdown.svelte +25 -25
  99. package/dist/Components/Table/Misc/ToolboxPanel.svelte +60 -60
  100. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +63 -63
  101. package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +101 -101
  102. package/dist/Components/Table/NestedTable.svelte +29 -29
  103. package/dist/Components/Table/Table.svelte +140 -140
  104. package/dist/Components/Test/TestContextConsumer.svelte +8 -8
  105. package/dist/Components/TextArea.svelte +92 -90
  106. package/dist/Components/TextInput.svelte +128 -117
  107. package/dist/Components/ThreeStateRadio.svelte +101 -101
  108. package/dist/Components/Touch/BoolCard.svelte +27 -27
  109. package/dist/Components/Touch/DateModal.svelte +98 -98
  110. package/dist/Components/Touch/EditCard.svelte +44 -44
  111. package/dist/Components/Touch/InfoCard.svelte +25 -25
  112. package/dist/Components/Touch/InfoTextCard.svelte +22 -22
  113. package/dist/Components/Touch/ModalExplanation.svelte +13 -13
  114. package/dist/Components/Touch/NumberKeyboard.svelte +81 -81
  115. package/dist/Components/Touch/NumberModal.svelte +49 -49
  116. package/dist/Components/Touch/PlusMinusCard.svelte +40 -40
  117. package/dist/Components/Touch/SelectModal.svelte +86 -86
  118. package/dist/Components/Touch/SummaryCard.svelte +74 -74
  119. package/dist/Components/Touch/TextAreaModal.svelte +53 -53
  120. package/dist/Components/Touch/TextModal.svelte +56 -56
  121. package/dist/Components/Touch/TouchCard.svelte +28 -28
  122. package/dist/Components/Touch/TouchModal.svelte +141 -141
  123. package/dist/Components/Touch/UtilityButton.svelte +63 -63
  124. package/dist/Components/VerticalTabGroup.svelte +38 -38
  125. package/dist/Components/VerticalTabGroupButton.svelte +46 -46
  126. package/dist/Helpers/Datamatrix.d.ts +19 -19
  127. package/dist/Helpers/Datamatrix.js +291 -291
  128. package/dist/Types/Examples/ExampleModal.svelte +27 -27
  129. package/dist/paraglide/README.md +1 -1
  130. package/dist/scss/_basics.scss +12 -12
  131. package/dist/scss/_colours.scss +140 -140
  132. package/dist/scss/_motion.scss +57 -57
  133. package/dist/scss/_sizing.scss +85 -85
  134. package/dist/scss/_transitions.scss +8 -8
  135. 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>