@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.
- package/README.md +58 -58
- package/dist/Components/AccordionGroup.svelte +28 -28
- package/dist/Components/AccordionGroupButton.svelte +60 -60
- package/dist/Components/Action.svelte +48 -48
- package/dist/Components/AlertModal.svelte +102 -102
- package/dist/Components/Base/ContextWrapper.svelte +45 -45
- package/dist/Components/Base/Pagination.svelte +135 -135
- package/dist/Components/Base/Snippets.svelte +25 -25
- package/dist/Components/BigRadioSet.svelte +34 -34
- package/dist/Components/Bubble.svelte +38 -38
- package/dist/Components/Button.svelte +83 -83
- package/dist/Components/Checkbox.svelte +71 -71
- package/dist/Components/CollapsibleCard.svelte +59 -59
- package/dist/Components/CollapsibleMenuGroup.svelte +43 -43
- package/dist/Components/ConditionBuilder/ConditionBuilder.svelte +101 -101
- package/dist/Components/Contexts/ContextMenu.svelte +76 -76
- package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
- package/dist/Components/Contexts/ContextMenuOption.svelte +38 -38
- package/dist/Components/Contexts/Toast.svelte +71 -71
- package/dist/Components/Contexts/ToastContainer.svelte +34 -34
- package/dist/Components/Contexts/Tooltip.svelte +32 -32
- package/dist/Components/DataMatrixIcon.svelte +37 -37
- package/dist/Components/DateInput.svelte +80 -80
- package/dist/Components/DatePicker.svelte +86 -86
- package/dist/Components/DesktopModal.svelte +65 -65
- package/dist/Components/Dial.svelte +35 -35
- package/dist/Components/DimensionInput.svelte +95 -95
- package/dist/Components/DragMenu/DragMenuHolder.svelte +53 -53
- package/dist/Components/DragMenu/DraggableCard.svelte +49 -49
- package/dist/Components/FileCard.svelte +18 -18
- package/dist/Components/FileUpload.svelte +115 -115
- package/dist/Components/GridInput.svelte +123 -123
- package/dist/Components/GridInputSet.svelte +21 -21
- package/dist/Components/HorizontalTabGroup.svelte +54 -54
- package/dist/Components/HorizontalTabGroupButton.svelte +32 -32
- package/dist/Components/Icon.svelte +68 -68
- package/dist/Components/InfoAlert.svelte +32 -32
- package/dist/Components/LoadingAnimation.svelte +228 -227
- package/dist/Components/LoadingModal.svelte +19 -19
- package/dist/Components/LoadingOverlay.svelte +20 -20
- package/dist/Components/Modal.svelte +127 -127
- package/dist/Components/MultiSelect.svelte +126 -126
- package/dist/Components/Nav/Nav.svelte +71 -71
- package/dist/Components/Nav/NavServiceMenuList.svelte +37 -37
- package/dist/Components/Nav/NavTab.svelte +46 -46
- package/dist/Components/Nav/ServiceMenuItem.svelte +62 -62
- package/dist/Components/Nav/ServicesNav.svelte +50 -50
- package/dist/Components/NumberInput.svelte +98 -98
- package/dist/Components/OptionCards.svelte +58 -58
- package/dist/Components/PageHeading.svelte +21 -21
- package/dist/Components/PasswordInput.svelte +61 -61
- package/dist/Components/PopoverButton.svelte +53 -53
- package/dist/Components/Portal.svelte +7 -7
- package/dist/Components/ProgressBubble.svelte +42 -42
- package/dist/Components/QuerySelect.svelte +102 -102
- package/dist/Components/ResourceCalendar/ResourceCalendar.svelte +241 -241
- package/dist/Components/SidebarPanel.svelte +32 -32
- package/dist/Components/SingleSelect.svelte +122 -122
- package/dist/Components/StepButton.svelte +48 -48
- package/dist/Components/StepForm.svelte +58 -58
- package/dist/Components/Switch.svelte +43 -43
- package/dist/Components/Table/ARCHITECTURE.md +298 -298
- package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +30 -30
- package/dist/Components/Table/Body/Rows/ColumnList.svelte +24 -24
- package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +165 -165
- package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +13 -13
- package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +120 -120
- package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +81 -81
- package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +92 -92
- package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +110 -110
- package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +54 -54
- package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +35 -35
- package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +64 -64
- package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +82 -82
- package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +88 -88
- package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +90 -90
- package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +96 -96
- package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +71 -71
- package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +124 -124
- package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +91 -91
- package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +88 -88
- package/dist/Components/Table/Body/Rows/TableRow.svelte +127 -127
- package/dist/Components/Table/Body/TableBody.svelte +92 -92
- package/dist/Components/Table/Headers/HighlightAllHeader.svelte +25 -25
- package/dist/Components/Table/Headers/SelectAllHeader.svelte +20 -20
- package/dist/Components/Table/Headers/TableHead.svelte +175 -175
- package/dist/Components/Table/Misc/ColumnPanel.svelte +32 -32
- package/dist/Components/Table/Misc/ColumnPanelModal.svelte +29 -29
- package/dist/Components/Table/Misc/FilterInput.svelte +326 -326
- package/dist/Components/Table/Misc/FilterPanel.svelte +79 -79
- package/dist/Components/Table/Misc/FilterPanelModal.svelte +21 -21
- package/dist/Components/Table/Misc/ShareViewModal.svelte +118 -118
- package/dist/Components/Table/Misc/SidePanel.svelte +24 -24
- package/dist/Components/Table/Misc/TableConfigurationModal.svelte +318 -318
- package/dist/Components/Table/Misc/TableFooter.svelte +201 -201
- package/dist/Components/Table/Misc/TableHorizontalBar.svelte +112 -112
- package/dist/Components/Table/Misc/TableSidebar.svelte +116 -116
- package/dist/Components/Table/Misc/TableViewDropdown.svelte +25 -25
- package/dist/Components/Table/Misc/ToolboxPanel.svelte +60 -60
- package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +63 -63
- package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +101 -101
- package/dist/Components/Table/NestedTable.svelte +29 -29
- package/dist/Components/Table/Table.svelte +140 -140
- package/dist/Components/Test/TestContextConsumer.svelte +8 -8
- package/dist/Components/TextArea.svelte +92 -90
- package/dist/Components/TextInput.svelte +128 -117
- package/dist/Components/ThreeStateRadio.svelte +101 -101
- package/dist/Components/Touch/BoolCard.svelte +27 -27
- package/dist/Components/Touch/DateModal.svelte +98 -98
- package/dist/Components/Touch/EditCard.svelte +44 -44
- package/dist/Components/Touch/InfoCard.svelte +25 -25
- package/dist/Components/Touch/InfoTextCard.svelte +22 -22
- package/dist/Components/Touch/ModalExplanation.svelte +13 -13
- package/dist/Components/Touch/NumberKeyboard.svelte +81 -81
- package/dist/Components/Touch/NumberModal.svelte +49 -49
- package/dist/Components/Touch/PlusMinusCard.svelte +40 -40
- package/dist/Components/Touch/SelectModal.svelte +86 -86
- package/dist/Components/Touch/SummaryCard.svelte +74 -74
- package/dist/Components/Touch/TextAreaModal.svelte +53 -53
- package/dist/Components/Touch/TextModal.svelte +56 -56
- package/dist/Components/Touch/TouchCard.svelte +28 -28
- package/dist/Components/Touch/TouchModal.svelte +141 -141
- package/dist/Components/Touch/UtilityButton.svelte +63 -63
- package/dist/Components/VerticalTabGroup.svelte +38 -38
- package/dist/Components/VerticalTabGroupButton.svelte +46 -46
- package/dist/Helpers/Datamatrix.d.ts +19 -19
- package/dist/Helpers/Datamatrix.js +291 -291
- package/dist/Types/Examples/ExampleModal.svelte +27 -27
- package/dist/paraglide/README.md +1 -1
- package/dist/scss/_basics.scss +12 -12
- package/dist/scss/_colours.scss +140 -140
- package/dist/scss/_motion.scss +57 -57
- package/dist/scss/_sizing.scss +85 -85
- package/dist/scss/_transitions.scss +8 -8
- 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>
|