@lavalogic/scoria 0.40.1 → 0.40.2
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 +46 -46
- package/dist/Components/AccordionGroupButton.svelte +76 -76
- package/dist/Components/Action.svelte +136 -136
- package/dist/Components/AlertModal.svelte +195 -195
- package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +729 -729
- package/dist/Components/Base/BaseModal.svelte +125 -125
- package/dist/Components/Base/ContextWrapper.svelte +72 -72
- package/dist/Components/Base/Pagination.svelte +198 -198
- package/dist/Components/Base/Snippets.svelte +36 -36
- package/dist/Components/BigRadioSet.svelte +38 -38
- package/dist/Components/Bubble.svelte +101 -101
- package/dist/Components/Button.svelte +209 -209
- package/dist/Components/Checkbox.svelte +86 -86
- package/dist/Components/CollapsibleCard.svelte +78 -78
- package/dist/Components/Contexts/ContextMenu.svelte +164 -164
- package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
- package/dist/Components/Contexts/ContextMenuOption.svelte +60 -60
- package/dist/Components/Contexts/Toast.svelte +86 -86
- package/dist/Components/Contexts/ToastContainer.svelte +65 -65
- package/dist/Components/Contexts/Tooltip.svelte +37 -37
- package/dist/Components/DataMatrixIcon.svelte +112 -112
- package/dist/Components/DateInput.svelte +148 -148
- package/dist/Components/DatePicker.svelte +300 -300
- package/dist/Components/DesktopModal.svelte +90 -90
- package/dist/Components/Dial.svelte +204 -204
- package/dist/Components/DimensionInput.svelte +170 -170
- package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
- package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
- package/dist/Components/FileCard.svelte +24 -24
- package/dist/Components/FileUpload.svelte +236 -236
- package/dist/Components/GridInput.svelte +196 -196
- package/dist/Components/GridInputSet.svelte +29 -29
- package/dist/Components/HorizontalTabGroup.svelte +82 -82
- package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
- package/dist/Components/Icon.svelte +128 -128
- package/dist/Components/Icons.js +357 -357
- package/dist/Components/InfoAlert.svelte +35 -35
- package/dist/Components/LoadingAnimation.svelte +29 -29
- package/dist/Components/LoadingModal.svelte +45 -45
- package/dist/Components/LoadingOverlay.svelte +25 -25
- package/dist/Components/Modal.svelte +258 -258
- package/dist/Components/MultiSelect.svelte +220 -220
- package/dist/Components/Nav/Nav.svelte +110 -110
- package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
- package/dist/Components/Nav/NavTab.svelte +62 -62
- package/dist/Components/Nav/ServiceMenuItem.svelte +112 -112
- package/dist/Components/Nav/ServicesNav.svelte +80 -80
- package/dist/Components/NumberInput.svelte +157 -157
- package/dist/Components/PageHeading.svelte +25 -25
- package/dist/Components/PasswordInput.svelte +88 -88
- package/dist/Components/Portal.svelte +36 -36
- package/dist/Components/ProgressBubble.svelte +107 -107
- package/dist/Components/QuerySelect.svelte +366 -366
- package/dist/Components/SingleSelect.svelte +250 -250
- package/dist/Components/StepButton.svelte +70 -70
- package/dist/Components/StepForm.svelte +140 -140
- package/dist/Components/Switch.svelte +69 -69
- package/dist/Components/Table/ARCHITECTURE.md +298 -298
- package/dist/Components/Table/Body/QuickSearchCell.svelte +679 -679
- package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
- package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
- package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +454 -454
- package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
- package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -185
- package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
- package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +131 -120
- package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +234 -234
- package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
- package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
- package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
- package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
- package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
- package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
- package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -252
- package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
- package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -221
- package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
- package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
- package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
- package/dist/Components/Table/Body/TableBody.svelte +155 -155
- package/dist/Components/Table/ColumnFactory.svelte.js +1 -0
- package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
- package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
- package/dist/Components/Table/Headers/TableHead.svelte +415 -415
- package/dist/Components/Table/Misc/ColumnPanel.svelte +39 -39
- package/dist/Components/Table/Misc/ColumnPanelModal.svelte +39 -39
- package/dist/Components/Table/Misc/FilterInput.svelte +641 -641
- package/dist/Components/Table/Misc/FilterPanel.svelte +190 -190
- package/dist/Components/Table/Misc/FilterPanelModal.svelte +31 -31
- package/dist/Components/Table/Misc/ShareViewModal.svelte +291 -291
- package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
- package/dist/Components/Table/Misc/TableConfigurationModal.svelte +644 -644
- package/dist/Components/Table/Misc/TableFooter.svelte +340 -340
- package/dist/Components/Table/Misc/TableHorizontalBar.svelte +140 -140
- package/dist/Components/Table/Misc/TableSidebar.svelte +200 -200
- package/dist/Components/Table/Misc/TableViewDropdown.svelte +105 -105
- package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
- package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
- package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +192 -192
- package/dist/Components/Table/NestedTable.svelte +130 -130
- package/dist/Components/Table/Table.svelte +692 -692
- package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts +5 -0
- package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js +3 -0
- package/dist/Components/Table/Types/Public/ColumnOptions.d.ts +10 -0
- package/dist/Components/Test/TestContextConsumer.svelte +13 -13
- package/dist/Components/TextArea.svelte +130 -130
- package/dist/Components/TextInput.svelte +176 -176
- package/dist/Components/ThreeStateRadio.svelte +131 -131
- package/dist/Components/Touch/BoolCard.svelte +45 -45
- package/dist/Components/Touch/DateModal.svelte +209 -209
- package/dist/Components/Touch/EditCard.svelte +59 -59
- package/dist/Components/Touch/InfoCard.svelte +31 -31
- package/dist/Components/Touch/InfoTextCard.svelte +28 -28
- package/dist/Components/Touch/ModalExplanation.svelte +17 -17
- package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
- package/dist/Components/Touch/NumberModal.svelte +79 -79
- package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
- package/dist/Components/Touch/SelectModal.svelte +127 -127
- package/dist/Components/Touch/SummaryCard.svelte +93 -93
- package/dist/Components/Touch/TextAreaModal.svelte +95 -95
- package/dist/Components/Touch/TextModal.svelte +106 -106
- package/dist/Components/Touch/TouchCard.svelte +33 -33
- package/dist/Components/Touch/TouchModal.svelte +274 -274
- package/dist/Components/Touch/UtilityButton.svelte +109 -109
- package/dist/Components/VerticalTabGroup.svelte +79 -79
- package/dist/Components/VerticalTabGroupButton.svelte +58 -58
- package/dist/Helpers/Datamatrix.d.ts +19 -19
- package/dist/Helpers/Datamatrix.js +291 -291
- package/dist/Types/Examples/ExampleModal.svelte +35 -35
- package/dist/scss/_basics.scss +12 -12
- package/dist/scss/_colours.scss +134 -134
- package/dist/scss/_mixins.scss +3392 -3392
- 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,107 +1,107 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
module
|
|
6
|
-
>
|
|
7
|
-
import ProgressBubble from '../../../../ProgressBubble.svelte';
|
|
8
|
-
import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
|
|
9
|
-
import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
|
|
10
|
-
import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
|
|
11
|
-
import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
|
|
12
|
-
import { Validity } from '../../../../../Types/Internal/Validity.js';
|
|
13
|
-
import { getContext } from 'svelte';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Props for {@link ProgressCell}. The cell renders a single `<ProgressBubble>`
|
|
17
|
-
* whose `[done, total]` tuple comes from `cell.getValue()`.
|
|
18
|
-
*/
|
|
19
|
-
export interface ProgressCellProps<T extends object, FilterValueType> {
|
|
20
|
-
/** Progress-bar table cell whose `[done, total]` value should be rendered. */
|
|
21
|
-
cell: ProgressBarTableCell<T, FilterValueType>;
|
|
22
|
-
}
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<script
|
|
26
|
-
lang="ts"
|
|
27
|
-
generics="T extends object, FilterValueType, RowIdType extends Primitive"
|
|
28
|
-
>
|
|
29
|
-
const { cell }: ProgressCellProps<T, FilterValueType> = $props();
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Tuple of `[done, total]`. The cast is unavoidable until `ProgressBarDef`
|
|
33
|
-
* carries a narrowed `TValue = [number, number]` generic; tracked under
|
|
34
|
-
* the cross-cutting RowGenericThreading + ProgressBarDef.value follow-up.
|
|
35
|
-
*/
|
|
36
|
-
const value: [number, number] = $derived(cell.getValue()) as [number, number];
|
|
37
|
-
|
|
38
|
-
const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
|
|
39
|
-
|
|
40
|
-
const focusDetails = $derived(tableContext._focus.getFocusDetailsFor(cell));
|
|
41
|
-
|
|
42
|
-
let validity: Validity = $state(Validity.Valid);
|
|
43
|
-
$effect(() => {
|
|
44
|
-
const validityPromise = focusDetails.validity;
|
|
45
|
-
|
|
46
|
-
validityPromise
|
|
47
|
-
.then((v) => {
|
|
48
|
-
if (!v) {
|
|
49
|
-
validity = Validity.Neutral;
|
|
50
|
-
} else if (isValidityTuple(v)) {
|
|
51
|
-
validity = v.value;
|
|
52
|
-
} else {
|
|
53
|
-
validity = v;
|
|
54
|
-
}
|
|
55
|
-
})
|
|
56
|
-
.catch(devCatch);
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
const colours = $derived(
|
|
60
|
-
cell.column.columnDef.getColour(cell.row.original, cell.row.originalIndex, value)
|
|
61
|
-
);
|
|
62
|
-
</script>
|
|
63
|
-
|
|
64
|
-
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
|
|
65
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
66
|
-
<div
|
|
67
|
-
id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
|
|
68
|
-
tabIndex={0}
|
|
69
|
-
class="focusable"
|
|
70
|
-
class:multifocus={focusDetails.isMultiFocused}
|
|
71
|
-
class:multifocus-start={focusDetails.isMultiFocusStart}
|
|
72
|
-
style={focusDetails.outline}
|
|
73
|
-
class:info={validity == Validity.Info}
|
|
74
|
-
class:success={validity == Validity.Valid}
|
|
75
|
-
class:warning={validity == Validity.Warning}
|
|
76
|
-
class:error={validity == Validity.Invalid}
|
|
77
|
-
onmousedown={(e) => {
|
|
78
|
-
// start focus only on left click
|
|
79
|
-
if (e.button === 0) {
|
|
80
|
-
if (e.shiftKey) {
|
|
81
|
-
e.preventDefault();
|
|
82
|
-
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
83
|
-
} else {
|
|
84
|
-
tableContext.startFocus(focusDetails.coordinates);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}}
|
|
88
|
-
onmouseover={() => {
|
|
89
|
-
if (tableContext.isMousingDown) {
|
|
90
|
-
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
91
|
-
}
|
|
92
|
-
}}
|
|
93
|
-
onmouseup={() => {
|
|
94
|
-
tableContext.endFocus(focusDetails.coordinates);
|
|
95
|
-
}}
|
|
96
|
-
>
|
|
97
|
-
<div class="bubble-parent">
|
|
98
|
-
<ProgressBubble
|
|
99
|
-
{value}
|
|
100
|
-
{colours}
|
|
101
|
-
/>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
module
|
|
6
|
+
>
|
|
7
|
+
import ProgressBubble from '../../../../ProgressBubble.svelte';
|
|
8
|
+
import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
|
|
9
|
+
import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
|
|
10
|
+
import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
|
|
11
|
+
import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
|
|
12
|
+
import { Validity } from '../../../../../Types/Internal/Validity.js';
|
|
13
|
+
import { getContext } from 'svelte';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Props for {@link ProgressCell}. The cell renders a single `<ProgressBubble>`
|
|
17
|
+
* whose `[done, total]` tuple comes from `cell.getValue()`.
|
|
18
|
+
*/
|
|
19
|
+
export interface ProgressCellProps<T extends object, FilterValueType> {
|
|
20
|
+
/** Progress-bar table cell whose `[done, total]` value should be rendered. */
|
|
21
|
+
cell: ProgressBarTableCell<T, FilterValueType>;
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<script
|
|
26
|
+
lang="ts"
|
|
27
|
+
generics="T extends object, FilterValueType, RowIdType extends Primitive"
|
|
28
|
+
>
|
|
29
|
+
const { cell }: ProgressCellProps<T, FilterValueType> = $props();
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Tuple of `[done, total]`. The cast is unavoidable until `ProgressBarDef`
|
|
33
|
+
* carries a narrowed `TValue = [number, number]` generic; tracked under
|
|
34
|
+
* the cross-cutting RowGenericThreading + ProgressBarDef.value follow-up.
|
|
35
|
+
*/
|
|
36
|
+
const value: [number, number] = $derived(cell.getValue()) as [number, number];
|
|
37
|
+
|
|
38
|
+
const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
|
|
39
|
+
|
|
40
|
+
const focusDetails = $derived(tableContext._focus.getFocusDetailsFor(cell));
|
|
41
|
+
|
|
42
|
+
let validity: Validity = $state(Validity.Valid);
|
|
43
|
+
$effect(() => {
|
|
44
|
+
const validityPromise = focusDetails.validity;
|
|
45
|
+
|
|
46
|
+
validityPromise
|
|
47
|
+
.then((v) => {
|
|
48
|
+
if (!v) {
|
|
49
|
+
validity = Validity.Neutral;
|
|
50
|
+
} else if (isValidityTuple(v)) {
|
|
51
|
+
validity = v.value;
|
|
52
|
+
} else {
|
|
53
|
+
validity = v;
|
|
54
|
+
}
|
|
55
|
+
})
|
|
56
|
+
.catch(devCatch);
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
const colours = $derived(
|
|
60
|
+
cell.column.columnDef.getColour(cell.row.original, cell.row.originalIndex, value)
|
|
61
|
+
);
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
|
|
65
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
66
|
+
<div
|
|
67
|
+
id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
|
|
68
|
+
tabIndex={0}
|
|
69
|
+
class="focusable"
|
|
70
|
+
class:multifocus={focusDetails.isMultiFocused}
|
|
71
|
+
class:multifocus-start={focusDetails.isMultiFocusStart}
|
|
72
|
+
style={focusDetails.outline}
|
|
73
|
+
class:info={validity == Validity.Info}
|
|
74
|
+
class:success={validity == Validity.Valid}
|
|
75
|
+
class:warning={validity == Validity.Warning}
|
|
76
|
+
class:error={validity == Validity.Invalid}
|
|
77
|
+
onmousedown={(e) => {
|
|
78
|
+
// start focus only on left click
|
|
79
|
+
if (e.button === 0) {
|
|
80
|
+
if (e.shiftKey) {
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
83
|
+
} else {
|
|
84
|
+
tableContext.startFocus(focusDetails.coordinates);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}}
|
|
88
|
+
onmouseover={() => {
|
|
89
|
+
if (tableContext.isMousingDown) {
|
|
90
|
+
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
91
|
+
}
|
|
92
|
+
}}
|
|
93
|
+
onmouseup={() => {
|
|
94
|
+
tableContext.endFocus(focusDetails.coordinates);
|
|
95
|
+
}}
|
|
96
|
+
>
|
|
97
|
+
<div class="bubble-parent">
|
|
98
|
+
<ProgressBubble
|
|
99
|
+
{value}
|
|
100
|
+
{colours}
|
|
101
|
+
/>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
105
|
<style>.focusable,
|
|
106
106
|
.checkbox-cell,
|
|
107
107
|
.input-cell,
|
|
@@ -188,4 +188,4 @@ div.bubble-parent {
|
|
|
188
188
|
align-items: center;
|
|
189
189
|
gap: 0.75rem;
|
|
190
190
|
--line-height: 1;
|
|
191
|
-
}</style>
|
|
191
|
+
}</style>
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
module
|
|
6
|
-
>
|
|
7
|
-
import Button from '../../../../Button.svelte';
|
|
8
|
-
import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
|
|
9
|
-
import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
|
|
10
|
-
import { ColourSet } from '../../../../../scss/colours.js';
|
|
11
|
-
import { Size } from '../../../../../Types/Internal/Size.js';
|
|
12
|
-
import type { ActionsTableCell } from './ActionsTableCell.js';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Props for {@link TableAction}. Renders a single row-action `<Button>`
|
|
16
|
-
* inside the actions popover; resolves the per-row label and enabled flag
|
|
17
|
-
* from the `action` callbacks (each may be sync or async).
|
|
18
|
-
*
|
|
19
|
-
* Kept inline because extracting it would change the public import path
|
|
20
|
-
* for the `TableActionProps` type (breaking); the sibling-Props file
|
|
21
|
-
* extraction is deferred to the cross-cutting Props-extraction sweep.
|
|
22
|
-
*/
|
|
23
|
-
export interface TableActionProps<T extends object, FilterValueType> {
|
|
24
|
-
/** The action button to render (one button per `cell.column.columnDef.actions[*]`). */
|
|
25
|
-
action: TableActionButton<T>;
|
|
26
|
-
/** The host actions-cell instance, used to resolve per-row state. */
|
|
27
|
-
cell: ActionsTableCell<T, FilterValueType>;
|
|
28
|
-
}
|
|
29
|
-
</script>
|
|
30
|
-
|
|
31
|
-
<script
|
|
32
|
-
lang="ts"
|
|
33
|
-
generics="T extends object, FilterValueType"
|
|
34
|
-
>
|
|
35
|
-
import { dev } from '$app/environment';
|
|
36
|
-
|
|
37
|
-
const { action, cell }: TableActionProps<T, FilterValueType> = $props();
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Resolved [label, isEnabled] tuple. Both sources are awaited in parallel
|
|
41
|
-
* via Promise.all so an async `getLabel` does not serialise behind an
|
|
42
|
-
* async `isDisabled`.
|
|
43
|
-
*/
|
|
44
|
-
const buttonStatePromise: Promise<[string, boolean]> = $derived.by(() => {
|
|
45
|
-
const disabledResult = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
|
|
46
|
-
|
|
47
|
-
const isEnabledPromise: Promise<boolean> =
|
|
48
|
-
disabledResult == null
|
|
49
|
-
? Promise.resolve(
|
|
50
|
-
cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex, action) ??
|
|
51
|
-
true
|
|
52
|
-
)
|
|
53
|
-
: typeof disabledResult === 'boolean'
|
|
54
|
-
? Promise.resolve(!disabledResult)
|
|
55
|
-
: disabledResult.then((it) => !it);
|
|
56
|
-
|
|
57
|
-
const labelPromise: Promise<string> = Promise.resolve(
|
|
58
|
-
action.getLabel(cell.row.original, cell.row.originalIndex)
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
return Promise.all([labelPromise, isEnabledPromise]);
|
|
62
|
-
});
|
|
63
|
-
</script>
|
|
64
|
-
|
|
65
|
-
{#await buttonStatePromise}
|
|
66
|
-
<!-- intentionally empty: the actions popover frame already conveys the loading state -->
|
|
67
|
-
{:then [label, isEnabled]}
|
|
68
|
-
<Button
|
|
69
|
-
fullWidth
|
|
70
|
-
size={Size.Medium}
|
|
71
|
-
colourSet={cell.column.columnDef.getColourSet?.(
|
|
72
|
-
cell.row.original,
|
|
73
|
-
cell.row.originalIndex,
|
|
74
|
-
action
|
|
75
|
-
) ?? ColourSet.Secondary}
|
|
76
|
-
disabled={!isEnabled}
|
|
77
|
-
onclick={() => {
|
|
78
|
-
action.callback(cell.row.original, cell.row.originalIndex);
|
|
79
|
-
}}>{label}</Button
|
|
80
|
-
>
|
|
81
|
-
{:catch e}
|
|
82
|
-
{#if dev}
|
|
83
|
-
Error Loading Button: {getErrorMessage(e)}
|
|
84
|
-
{:else}
|
|
85
|
-
Error Loading Button
|
|
86
|
-
{/if}
|
|
87
|
-
{/await}
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
module
|
|
6
|
+
>
|
|
7
|
+
import Button from '../../../../Button.svelte';
|
|
8
|
+
import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
|
|
9
|
+
import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
|
|
10
|
+
import { ColourSet } from '../../../../../scss/colours.js';
|
|
11
|
+
import { Size } from '../../../../../Types/Internal/Size.js';
|
|
12
|
+
import type { ActionsTableCell } from './ActionsTableCell.js';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Props for {@link TableAction}. Renders a single row-action `<Button>`
|
|
16
|
+
* inside the actions popover; resolves the per-row label and enabled flag
|
|
17
|
+
* from the `action` callbacks (each may be sync or async).
|
|
18
|
+
*
|
|
19
|
+
* Kept inline because extracting it would change the public import path
|
|
20
|
+
* for the `TableActionProps` type (breaking); the sibling-Props file
|
|
21
|
+
* extraction is deferred to the cross-cutting Props-extraction sweep.
|
|
22
|
+
*/
|
|
23
|
+
export interface TableActionProps<T extends object, FilterValueType> {
|
|
24
|
+
/** The action button to render (one button per `cell.column.columnDef.actions[*]`). */
|
|
25
|
+
action: TableActionButton<T>;
|
|
26
|
+
/** The host actions-cell instance, used to resolve per-row state. */
|
|
27
|
+
cell: ActionsTableCell<T, FilterValueType>;
|
|
28
|
+
}
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<script
|
|
32
|
+
lang="ts"
|
|
33
|
+
generics="T extends object, FilterValueType"
|
|
34
|
+
>
|
|
35
|
+
import { dev } from '$app/environment';
|
|
36
|
+
|
|
37
|
+
const { action, cell }: TableActionProps<T, FilterValueType> = $props();
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Resolved [label, isEnabled] tuple. Both sources are awaited in parallel
|
|
41
|
+
* via Promise.all so an async `getLabel` does not serialise behind an
|
|
42
|
+
* async `isDisabled`.
|
|
43
|
+
*/
|
|
44
|
+
const buttonStatePromise: Promise<[string, boolean]> = $derived.by(() => {
|
|
45
|
+
const disabledResult = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
|
|
46
|
+
|
|
47
|
+
const isEnabledPromise: Promise<boolean> =
|
|
48
|
+
disabledResult == null
|
|
49
|
+
? Promise.resolve(
|
|
50
|
+
cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex, action) ??
|
|
51
|
+
true
|
|
52
|
+
)
|
|
53
|
+
: typeof disabledResult === 'boolean'
|
|
54
|
+
? Promise.resolve(!disabledResult)
|
|
55
|
+
: disabledResult.then((it) => !it);
|
|
56
|
+
|
|
57
|
+
const labelPromise: Promise<string> = Promise.resolve(
|
|
58
|
+
action.getLabel(cell.row.original, cell.row.originalIndex)
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
return Promise.all([labelPromise, isEnabledPromise]);
|
|
62
|
+
});
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
{#await buttonStatePromise}
|
|
66
|
+
<!-- intentionally empty: the actions popover frame already conveys the loading state -->
|
|
67
|
+
{:then [label, isEnabled]}
|
|
68
|
+
<Button
|
|
69
|
+
fullWidth
|
|
70
|
+
size={Size.Medium}
|
|
71
|
+
colourSet={cell.column.columnDef.getColourSet?.(
|
|
72
|
+
cell.row.original,
|
|
73
|
+
cell.row.originalIndex,
|
|
74
|
+
action
|
|
75
|
+
) ?? ColourSet.Secondary}
|
|
76
|
+
disabled={!isEnabled}
|
|
77
|
+
onclick={() => {
|
|
78
|
+
action.callback(cell.row.original, cell.row.originalIndex);
|
|
79
|
+
}}>{label}</Button
|
|
80
|
+
>
|
|
81
|
+
{:catch e}
|
|
82
|
+
{#if dev}
|
|
83
|
+
Error Loading Button: {getErrorMessage(e)}
|
|
84
|
+
{:else}
|
|
85
|
+
Error Loading Button
|
|
86
|
+
{/if}
|
|
87
|
+
{/await}
|
|
@@ -1,128 +1,128 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
generics="T extends object, RowIdType extends Primitive"
|
|
6
|
-
>
|
|
7
|
-
import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
|
|
8
|
-
import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
|
|
9
|
-
import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
|
|
10
|
-
import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
|
|
11
|
-
import { Validity } from '../../../../../Types/Internal/Validity.js';
|
|
12
|
-
import { getContext, tick } from 'svelte';
|
|
13
|
-
import type { ChangeEventHandler } from 'svelte/elements';
|
|
14
|
-
import type { TableCheckboxProps } from './TableCheckboxProps.js';
|
|
15
|
-
|
|
16
|
-
const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
|
|
17
|
-
|
|
18
|
-
const value = $derived(!!cell.getValue());
|
|
19
|
-
|
|
20
|
-
const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
|
|
21
|
-
|
|
22
|
-
const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
|
|
23
|
-
tableContext._focus.getFocusDetailsFor(cell)
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
let inputRef: HTMLInputElement | undefined = $state();
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Commits the new value through `TableContext.onEditCell` and forwards the
|
|
30
|
-
* native event to the optional parent handler. The `tick` reconcile fixes a
|
|
31
|
-
* race where the table edit was rejected by validation but the input
|
|
32
|
-
* already showed the new checked state.
|
|
33
|
-
*/
|
|
34
|
-
const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
35
|
-
tableContext
|
|
36
|
-
.onEditCell(
|
|
37
|
-
cell.row.original,
|
|
38
|
-
focusDetails.coordinates,
|
|
39
|
-
(e.target as HTMLInputElement).checked
|
|
40
|
-
)
|
|
41
|
-
.catch(devCatch);
|
|
42
|
-
parentOnchange?.(e);
|
|
43
|
-
|
|
44
|
-
tick()
|
|
45
|
-
.then(() => {
|
|
46
|
-
if (inputRef && value != inputRef.checked) {
|
|
47
|
-
inputRef.checked = value;
|
|
48
|
-
}
|
|
49
|
-
})
|
|
50
|
-
.catch(devCatch);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
let validity: Validity = $state(Validity.Valid);
|
|
54
|
-
$effect(() => {
|
|
55
|
-
const validityPromise = focusDetails.validity;
|
|
56
|
-
|
|
57
|
-
validityPromise
|
|
58
|
-
.then((v) => {
|
|
59
|
-
if (!v) {
|
|
60
|
-
validity = Validity.Neutral;
|
|
61
|
-
} else if (isValidityTuple(v)) {
|
|
62
|
-
validity = v.value;
|
|
63
|
-
} else {
|
|
64
|
-
validity = v;
|
|
65
|
-
}
|
|
66
|
-
})
|
|
67
|
-
.catch(devCatch);
|
|
68
|
-
});
|
|
69
|
-
</script>
|
|
70
|
-
|
|
71
|
-
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
|
|
72
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
73
|
-
<div
|
|
74
|
-
class="checkbox-cell"
|
|
75
|
-
onmousedown={(e) => {
|
|
76
|
-
// start focus only on left click
|
|
77
|
-
if (e.button === 0) {
|
|
78
|
-
if (e.shiftKey) {
|
|
79
|
-
e.preventDefault();
|
|
80
|
-
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
81
|
-
} else {
|
|
82
|
-
tableContext.startFocus(focusDetails.coordinates);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}}
|
|
86
|
-
onkeyup={(e: KeyboardEvent) => {
|
|
87
|
-
if (e.key === 'Enter') {
|
|
88
|
-
e.stopPropagation();
|
|
89
|
-
tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
|
|
90
|
-
}
|
|
91
|
-
}}
|
|
92
|
-
onkeydown={(e: KeyboardEvent) => {
|
|
93
|
-
if (e.key == 'Enter' || e.key == 'F2') {
|
|
94
|
-
e.stopPropagation();
|
|
95
|
-
}
|
|
96
|
-
}}
|
|
97
|
-
onmouseover={() => {
|
|
98
|
-
if (tableContext.isMousingDown) {
|
|
99
|
-
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
100
|
-
}
|
|
101
|
-
}}
|
|
102
|
-
onmouseup={() => {
|
|
103
|
-
tableContext.endFocus(focusDetails.coordinates);
|
|
104
|
-
}}
|
|
105
|
-
class:info={validity == Validity.Info}
|
|
106
|
-
class:success={validity == Validity.Valid}
|
|
107
|
-
class:warning={validity == Validity.Warning}
|
|
108
|
-
class:error={validity == Validity.Invalid}
|
|
109
|
-
>
|
|
110
|
-
|
|
111
|
-
<label
|
|
112
|
-
class:multifocus={focusDetails.isMultiFocused}
|
|
113
|
-
class:multifocus-start={focusDetails.isMultiFocusStart}
|
|
114
|
-
style={focusDetails.outline}
|
|
115
|
-
>
|
|
116
|
-
<input
|
|
117
|
-
bind:this={inputRef}
|
|
118
|
-
id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
|
|
119
|
-
{onchange}
|
|
120
|
-
type="checkbox"
|
|
121
|
-
checked={value}
|
|
122
|
-
/>
|
|
123
|
-
</label>
|
|
124
|
-
</div>
|
|
125
|
-
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="T extends object, RowIdType extends Primitive"
|
|
6
|
+
>
|
|
7
|
+
import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
|
|
8
|
+
import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
|
|
9
|
+
import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
|
|
10
|
+
import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
|
|
11
|
+
import { Validity } from '../../../../../Types/Internal/Validity.js';
|
|
12
|
+
import { getContext, tick } from 'svelte';
|
|
13
|
+
import type { ChangeEventHandler } from 'svelte/elements';
|
|
14
|
+
import type { TableCheckboxProps } from './TableCheckboxProps.js';
|
|
15
|
+
|
|
16
|
+
const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
|
|
17
|
+
|
|
18
|
+
const value = $derived(!!cell.getValue());
|
|
19
|
+
|
|
20
|
+
const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
|
|
21
|
+
|
|
22
|
+
const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
|
|
23
|
+
tableContext._focus.getFocusDetailsFor(cell)
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
let inputRef: HTMLInputElement | undefined = $state();
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Commits the new value through `TableContext.onEditCell` and forwards the
|
|
30
|
+
* native event to the optional parent handler. The `tick` reconcile fixes a
|
|
31
|
+
* race where the table edit was rejected by validation but the input
|
|
32
|
+
* already showed the new checked state.
|
|
33
|
+
*/
|
|
34
|
+
const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
35
|
+
tableContext
|
|
36
|
+
.onEditCell(
|
|
37
|
+
cell.row.original,
|
|
38
|
+
focusDetails.coordinates,
|
|
39
|
+
(e.target as HTMLInputElement).checked
|
|
40
|
+
)
|
|
41
|
+
.catch(devCatch);
|
|
42
|
+
parentOnchange?.(e);
|
|
43
|
+
|
|
44
|
+
tick()
|
|
45
|
+
.then(() => {
|
|
46
|
+
if (inputRef && value != inputRef.checked) {
|
|
47
|
+
inputRef.checked = value;
|
|
48
|
+
}
|
|
49
|
+
})
|
|
50
|
+
.catch(devCatch);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
let validity: Validity = $state(Validity.Valid);
|
|
54
|
+
$effect(() => {
|
|
55
|
+
const validityPromise = focusDetails.validity;
|
|
56
|
+
|
|
57
|
+
validityPromise
|
|
58
|
+
.then((v) => {
|
|
59
|
+
if (!v) {
|
|
60
|
+
validity = Validity.Neutral;
|
|
61
|
+
} else if (isValidityTuple(v)) {
|
|
62
|
+
validity = v.value;
|
|
63
|
+
} else {
|
|
64
|
+
validity = v;
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
.catch(devCatch);
|
|
68
|
+
});
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
|
|
72
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
73
|
+
<div
|
|
74
|
+
class="checkbox-cell"
|
|
75
|
+
onmousedown={(e) => {
|
|
76
|
+
// start focus only on left click
|
|
77
|
+
if (e.button === 0) {
|
|
78
|
+
if (e.shiftKey) {
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
81
|
+
} else {
|
|
82
|
+
tableContext.startFocus(focusDetails.coordinates);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}}
|
|
86
|
+
onkeyup={(e: KeyboardEvent) => {
|
|
87
|
+
if (e.key === 'Enter') {
|
|
88
|
+
e.stopPropagation();
|
|
89
|
+
tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
|
|
90
|
+
}
|
|
91
|
+
}}
|
|
92
|
+
onkeydown={(e: KeyboardEvent) => {
|
|
93
|
+
if (e.key == 'Enter' || e.key == 'F2') {
|
|
94
|
+
e.stopPropagation();
|
|
95
|
+
}
|
|
96
|
+
}}
|
|
97
|
+
onmouseover={() => {
|
|
98
|
+
if (tableContext.isMousingDown) {
|
|
99
|
+
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
100
|
+
}
|
|
101
|
+
}}
|
|
102
|
+
onmouseup={() => {
|
|
103
|
+
tableContext.endFocus(focusDetails.coordinates);
|
|
104
|
+
}}
|
|
105
|
+
class:info={validity == Validity.Info}
|
|
106
|
+
class:success={validity == Validity.Valid}
|
|
107
|
+
class:warning={validity == Validity.Warning}
|
|
108
|
+
class:error={validity == Validity.Invalid}
|
|
109
|
+
>
|
|
110
|
+
|
|
111
|
+
<label
|
|
112
|
+
class:multifocus={focusDetails.isMultiFocused}
|
|
113
|
+
class:multifocus-start={focusDetails.isMultiFocusStart}
|
|
114
|
+
style={focusDetails.outline}
|
|
115
|
+
>
|
|
116
|
+
<input
|
|
117
|
+
bind:this={inputRef}
|
|
118
|
+
id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
|
|
119
|
+
{onchange}
|
|
120
|
+
type="checkbox"
|
|
121
|
+
checked={value}
|
|
122
|
+
/>
|
|
123
|
+
</label>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
126
|
<style>.focusable,
|
|
127
127
|
.checkbox-cell,
|
|
128
128
|
.input-cell,
|
|
@@ -198,4 +198,4 @@ label.multifocus.multifocus-start {
|
|
|
198
198
|
.input-cell.error,
|
|
199
199
|
.select-cell.error {
|
|
200
200
|
background-color: #f9e9e9;
|
|
201
|
-
}</style>
|
|
201
|
+
}</style>
|