@lavalogic/scoria 0.38.12 → 0.38.13
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/dist/Components/AccordionGroup.svelte +46 -46
- package/dist/Components/AccordionGroupButton.svelte +76 -76
- package/dist/Components/Action.svelte +136 -136
- package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +712 -702
- 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/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/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/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/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/NavServiceMenuList.svelte +43 -43
- package/dist/Components/Nav/NavTab.svelte +62 -62
- 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/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/Body/Rows/ColumnHighlight.svelte +51 -51
- package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
- package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
- package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
- 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/TableRowSelectionCheckbox.svelte +179 -179
- 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/Headers/HighlightAllHeader.svelte +41 -41
- package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
- package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
- package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
- package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
- 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/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/_motion.scss +57 -57
- package/dist/scss/_sizing.scss +85 -85
- package/package.json +30 -30
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
module
|
|
6
|
-
>
|
|
7
|
-
import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
|
|
8
|
-
import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
|
|
9
|
-
import type { Component } from 'svelte';
|
|
10
|
-
import type { AccessorComponentProps } from './AccessorComponentProps.js';
|
|
11
|
-
import FocusableImmutableCell from './FocusableImmutableCell.svelte';
|
|
12
|
-
import TableCheckbox from './TableCheckbox.svelte';
|
|
13
|
-
import TableDatePicker from './TableDatePicker.svelte';
|
|
14
|
-
import TableNumberInput from './TableNumberInput.svelte';
|
|
15
|
-
import TableQuerySelect from './TableQuerySelect.svelte';
|
|
16
|
-
import TableSelect from './TableSelect.svelte';
|
|
17
|
-
import TableTextInput from './TableTextInput.svelte';
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Loose structural type used for the cell-host dispatch table.
|
|
21
|
-
*
|
|
22
|
-
* Every accessor cell host (TableNumberInput, TableDatePicker, ...) is a
|
|
23
|
-
* Svelte 5 `Component` whose props include at minimum `{ cell: TableCell<T> }`
|
|
24
|
-
* plus host-specific extras. A fully discriminated `AccessorComponentMap<T>`
|
|
25
|
-
* keyed on `accessorType` was considered (see the RowGenericThreading
|
|
26
|
-
* follow-up workorder) but deferred: it would force every cell host to share
|
|
27
|
-
* an identical prop signature or each branch of the dispatch to be invoked
|
|
28
|
-
* through a type-narrowed switch, both of which have a large blast radius
|
|
29
|
-
* across the Table subtree. Using `Component<Record<string, unknown>>` keeps
|
|
30
|
-
* the residual loosening contained to a single line and removes the previous
|
|
31
|
-
* `Component<any>` from this file.
|
|
32
|
-
*/
|
|
33
|
-
type AccessorCellComponent = Component<Record<string, unknown>>;
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Frozen lookup from `AccessorDef.accessorType` discriminator to the matching
|
|
37
|
-
* cell-host Svelte component. Hoisted to module scope so the table does not
|
|
38
|
-
* allocate a fresh 6-key object per cell on each render (with 100 rows by
|
|
39
|
-
* roughly 10 accessor columns that would be 1000 redundant allocations per
|
|
40
|
-
* render).
|
|
41
|
-
*/
|
|
42
|
-
const cellTypes = Object.freeze({
|
|
43
|
-
Number: TableNumberInput,
|
|
44
|
-
Date: TableDatePicker,
|
|
45
|
-
Select: TableSelect,
|
|
46
|
-
Query: TableQuerySelect,
|
|
47
|
-
Checkbox: TableCheckbox,
|
|
48
|
-
Text: TableTextInput,
|
|
49
|
-
}) as unknown as Readonly<
|
|
50
|
-
Record<'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text', AccessorCellComponent>
|
|
51
|
-
>;
|
|
52
|
-
</script>
|
|
53
|
-
|
|
54
|
-
<script
|
|
55
|
-
lang="ts"
|
|
56
|
-
generics="T extends object"
|
|
57
|
-
>
|
|
58
|
-
/** Single cell to render for the supplied {@link TableCell}. The accessor type discriminator is read off `cell.column.columnDef`. */
|
|
59
|
-
const { cell }: AccessorComponentProps<T> = $props();
|
|
60
|
-
|
|
61
|
-
const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* Returns the cell-host component for `columnDef`'s discriminant. Falls back
|
|
65
|
-
* to `FocusableImmutableCell` when the column is not an `AccessorDef` (this
|
|
66
|
-
* branch is technically dead in the live dispatcher since `TableColumn`
|
|
67
|
-
* filters first, but the total function keeps this file safe to call
|
|
68
|
-
* directly from other dispatch sites).
|
|
69
|
-
*/
|
|
70
|
-
function getAppropriateAccessorDef(columnDef: ColumnDef<T>): AccessorCellComponent {
|
|
71
|
-
if (columnDef instanceof AccessorDef) {
|
|
72
|
-
return cellTypes[columnDef.accessorType];
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
return FocusableImmutableCell as unknown as AccessorCellComponent;
|
|
76
|
-
}
|
|
77
|
-
</script>
|
|
78
|
-
|
|
79
|
-
<CurrentComponent {cell} />
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
module
|
|
6
|
+
>
|
|
7
|
+
import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
|
|
8
|
+
import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
|
|
9
|
+
import type { Component } from 'svelte';
|
|
10
|
+
import type { AccessorComponentProps } from './AccessorComponentProps.js';
|
|
11
|
+
import FocusableImmutableCell from './FocusableImmutableCell.svelte';
|
|
12
|
+
import TableCheckbox from './TableCheckbox.svelte';
|
|
13
|
+
import TableDatePicker from './TableDatePicker.svelte';
|
|
14
|
+
import TableNumberInput from './TableNumberInput.svelte';
|
|
15
|
+
import TableQuerySelect from './TableQuerySelect.svelte';
|
|
16
|
+
import TableSelect from './TableSelect.svelte';
|
|
17
|
+
import TableTextInput from './TableTextInput.svelte';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Loose structural type used for the cell-host dispatch table.
|
|
21
|
+
*
|
|
22
|
+
* Every accessor cell host (TableNumberInput, TableDatePicker, ...) is a
|
|
23
|
+
* Svelte 5 `Component` whose props include at minimum `{ cell: TableCell<T> }`
|
|
24
|
+
* plus host-specific extras. A fully discriminated `AccessorComponentMap<T>`
|
|
25
|
+
* keyed on `accessorType` was considered (see the RowGenericThreading
|
|
26
|
+
* follow-up workorder) but deferred: it would force every cell host to share
|
|
27
|
+
* an identical prop signature or each branch of the dispatch to be invoked
|
|
28
|
+
* through a type-narrowed switch, both of which have a large blast radius
|
|
29
|
+
* across the Table subtree. Using `Component<Record<string, unknown>>` keeps
|
|
30
|
+
* the residual loosening contained to a single line and removes the previous
|
|
31
|
+
* `Component<any>` from this file.
|
|
32
|
+
*/
|
|
33
|
+
type AccessorCellComponent = Component<Record<string, unknown>>;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Frozen lookup from `AccessorDef.accessorType` discriminator to the matching
|
|
37
|
+
* cell-host Svelte component. Hoisted to module scope so the table does not
|
|
38
|
+
* allocate a fresh 6-key object per cell on each render (with 100 rows by
|
|
39
|
+
* roughly 10 accessor columns that would be 1000 redundant allocations per
|
|
40
|
+
* render).
|
|
41
|
+
*/
|
|
42
|
+
const cellTypes = Object.freeze({
|
|
43
|
+
Number: TableNumberInput,
|
|
44
|
+
Date: TableDatePicker,
|
|
45
|
+
Select: TableSelect,
|
|
46
|
+
Query: TableQuerySelect,
|
|
47
|
+
Checkbox: TableCheckbox,
|
|
48
|
+
Text: TableTextInput,
|
|
49
|
+
}) as unknown as Readonly<
|
|
50
|
+
Record<'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text', AccessorCellComponent>
|
|
51
|
+
>;
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<script
|
|
55
|
+
lang="ts"
|
|
56
|
+
generics="T extends object"
|
|
57
|
+
>
|
|
58
|
+
/** Single cell to render for the supplied {@link TableCell}. The accessor type discriminator is read off `cell.column.columnDef`. */
|
|
59
|
+
const { cell }: AccessorComponentProps<T> = $props();
|
|
60
|
+
|
|
61
|
+
const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Returns the cell-host component for `columnDef`'s discriminant. Falls back
|
|
65
|
+
* to `FocusableImmutableCell` when the column is not an `AccessorDef` (this
|
|
66
|
+
* branch is technically dead in the live dispatcher since `TableColumn`
|
|
67
|
+
* filters first, but the total function keeps this file safe to call
|
|
68
|
+
* directly from other dispatch sites).
|
|
69
|
+
*/
|
|
70
|
+
function getAppropriateAccessorDef(columnDef: ColumnDef<T>): AccessorCellComponent {
|
|
71
|
+
if (columnDef instanceof AccessorDef) {
|
|
72
|
+
return cellTypes[columnDef.accessorType];
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return FocusableImmutableCell as unknown as AccessorCellComponent;
|
|
76
|
+
}
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<CurrentComponent {cell} />
|
|
@@ -1,122 +1,122 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
|
|
6
|
-
>
|
|
7
|
-
import Action from '../../../../Action.svelte';
|
|
8
|
-
import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
|
|
9
|
-
import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
|
|
10
|
-
import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
|
|
11
|
-
import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
|
|
12
|
-
import { ColourSet } from '../../../../../scss/colours.js';
|
|
13
|
-
import { Size } from '../../../../../Types/Internal/Size.js';
|
|
14
|
-
import { Validity } from '../../../../../Types/Internal/Validity.js';
|
|
15
|
-
import { getContext } from 'svelte';
|
|
16
|
-
import type { ExpandCellProps } from './ExpandCellProps.js';
|
|
17
|
-
|
|
18
|
-
const {
|
|
19
|
-
cell,
|
|
20
|
-
expandedColumnDef,
|
|
21
|
-
onExpandChange,
|
|
22
|
-
}: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
|
|
23
|
-
|
|
24
|
-
const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
|
|
25
|
-
const focusDetails: TableFocusDetails<T, IdType> = $derived(
|
|
26
|
-
tableContext._focus.getFocusDetailsFor(cell)
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
const enabled: boolean | Promise<boolean> = $derived(
|
|
30
|
-
cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
|
|
31
|
-
);
|
|
32
|
-
|
|
33
|
-
let validity: Validity = $state(Validity.Valid);
|
|
34
|
-
$effect(() => {
|
|
35
|
-
const validityPromise = focusDetails.validity;
|
|
36
|
-
|
|
37
|
-
validityPromise
|
|
38
|
-
.then((v) => {
|
|
39
|
-
if (!v) {
|
|
40
|
-
validity = Validity.Neutral;
|
|
41
|
-
} else if (isValidityTuple(v)) {
|
|
42
|
-
validity = v.value;
|
|
43
|
-
} else {
|
|
44
|
-
validity = v;
|
|
45
|
-
}
|
|
46
|
-
})
|
|
47
|
-
.catch(devCatch);
|
|
48
|
-
});
|
|
49
|
-
</script>
|
|
50
|
-
|
|
51
|
-
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
|
|
52
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
53
|
-
<div
|
|
54
|
-
class:info={validity == Validity.Info}
|
|
55
|
-
class:success={validity == Validity.Valid}
|
|
56
|
-
class:warning={validity == Validity.Warning}
|
|
57
|
-
class:error={validity == Validity.Invalid}
|
|
58
|
-
class="focusable"
|
|
59
|
-
onmousedown={(e) => {
|
|
60
|
-
// start focus only on left click
|
|
61
|
-
if (e.button === 0) {
|
|
62
|
-
if (e.shiftKey) {
|
|
63
|
-
e.preventDefault();
|
|
64
|
-
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
65
|
-
} else {
|
|
66
|
-
tableContext.startFocus(focusDetails.coordinates);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
}}
|
|
70
|
-
onmouseover={() => {
|
|
71
|
-
if (tableContext.isMousingDown) {
|
|
72
|
-
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
73
|
-
}
|
|
74
|
-
}}
|
|
75
|
-
onmouseup={() => {
|
|
76
|
-
tableContext.endFocus(focusDetails.coordinates);
|
|
77
|
-
}}
|
|
78
|
-
>
|
|
79
|
-
<div
|
|
80
|
-
class="slot-wrapper"
|
|
81
|
-
class:multifocus={focusDetails.isMultiFocused}
|
|
82
|
-
class:multifocus-start={focusDetails.isMultiFocusStart}
|
|
83
|
-
>
|
|
84
|
-
{#await enabled}
|
|
85
|
-
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
86
|
-
{@render action(false)}
|
|
87
|
-
{:then enabled}
|
|
88
|
-
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
89
|
-
{@render action(enabled)}
|
|
90
|
-
{/await}
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
{#snippet action(enabled: boolean)}
|
|
95
|
-
<div class="noninteractive">
|
|
96
|
-
<Action
|
|
97
|
-
id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
|
|
98
|
-
style={focusDetails.outline}
|
|
99
|
-
disabled={!enabled}
|
|
100
|
-
border={false}
|
|
101
|
-
label="Expand Nested Table"
|
|
102
|
-
size={Size.FillWidth}
|
|
103
|
-
icon={{
|
|
104
|
-
name: expandedColumnDef?.id === cell.column.columnDef.id ? 'minus' : 'plus',
|
|
105
|
-
size: Size.Medium,
|
|
106
|
-
}}
|
|
107
|
-
colourSet={expandedColumnDef?.id === cell.column.columnDef.id
|
|
108
|
-
? ColourSet.Primary
|
|
109
|
-
: ColourSet.Auxiliary}
|
|
110
|
-
onclick={(e: MouseEvent) => {
|
|
111
|
-
// FIXME why is this required? svelte bug?
|
|
112
|
-
e.stopImmediatePropagation();
|
|
113
|
-
// toastContext.toast("clicked")
|
|
114
|
-
onExpandChange(cell.column.columnDef);
|
|
115
|
-
}}
|
|
116
|
-
/>
|
|
117
|
-
</div>
|
|
118
|
-
{/snippet}
|
|
119
|
-
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
|
|
6
|
+
>
|
|
7
|
+
import Action from '../../../../Action.svelte';
|
|
8
|
+
import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
|
|
9
|
+
import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
|
|
10
|
+
import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
|
|
11
|
+
import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
|
|
12
|
+
import { ColourSet } from '../../../../../scss/colours.js';
|
|
13
|
+
import { Size } from '../../../../../Types/Internal/Size.js';
|
|
14
|
+
import { Validity } from '../../../../../Types/Internal/Validity.js';
|
|
15
|
+
import { getContext } from 'svelte';
|
|
16
|
+
import type { ExpandCellProps } from './ExpandCellProps.js';
|
|
17
|
+
|
|
18
|
+
const {
|
|
19
|
+
cell,
|
|
20
|
+
expandedColumnDef,
|
|
21
|
+
onExpandChange,
|
|
22
|
+
}: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
|
|
23
|
+
|
|
24
|
+
const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
|
|
25
|
+
const focusDetails: TableFocusDetails<T, IdType> = $derived(
|
|
26
|
+
tableContext._focus.getFocusDetailsFor(cell)
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
const enabled: boolean | Promise<boolean> = $derived(
|
|
30
|
+
cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
let validity: Validity = $state(Validity.Valid);
|
|
34
|
+
$effect(() => {
|
|
35
|
+
const validityPromise = focusDetails.validity;
|
|
36
|
+
|
|
37
|
+
validityPromise
|
|
38
|
+
.then((v) => {
|
|
39
|
+
if (!v) {
|
|
40
|
+
validity = Validity.Neutral;
|
|
41
|
+
} else if (isValidityTuple(v)) {
|
|
42
|
+
validity = v.value;
|
|
43
|
+
} else {
|
|
44
|
+
validity = v;
|
|
45
|
+
}
|
|
46
|
+
})
|
|
47
|
+
.catch(devCatch);
|
|
48
|
+
});
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
|
|
52
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
53
|
+
<div
|
|
54
|
+
class:info={validity == Validity.Info}
|
|
55
|
+
class:success={validity == Validity.Valid}
|
|
56
|
+
class:warning={validity == Validity.Warning}
|
|
57
|
+
class:error={validity == Validity.Invalid}
|
|
58
|
+
class="focusable"
|
|
59
|
+
onmousedown={(e) => {
|
|
60
|
+
// start focus only on left click
|
|
61
|
+
if (e.button === 0) {
|
|
62
|
+
if (e.shiftKey) {
|
|
63
|
+
e.preventDefault();
|
|
64
|
+
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
65
|
+
} else {
|
|
66
|
+
tableContext.startFocus(focusDetails.coordinates);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}}
|
|
70
|
+
onmouseover={() => {
|
|
71
|
+
if (tableContext.isMousingDown) {
|
|
72
|
+
tableContext.setFocusEnd(focusDetails.coordinates);
|
|
73
|
+
}
|
|
74
|
+
}}
|
|
75
|
+
onmouseup={() => {
|
|
76
|
+
tableContext.endFocus(focusDetails.coordinates);
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
<div
|
|
80
|
+
class="slot-wrapper"
|
|
81
|
+
class:multifocus={focusDetails.isMultiFocused}
|
|
82
|
+
class:multifocus-start={focusDetails.isMultiFocusStart}
|
|
83
|
+
>
|
|
84
|
+
{#await enabled}
|
|
85
|
+
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
86
|
+
{@render action(false)}
|
|
87
|
+
{:then enabled}
|
|
88
|
+
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
89
|
+
{@render action(enabled)}
|
|
90
|
+
{/await}
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
{#snippet action(enabled: boolean)}
|
|
95
|
+
<div class="noninteractive">
|
|
96
|
+
<Action
|
|
97
|
+
id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
|
|
98
|
+
style={focusDetails.outline}
|
|
99
|
+
disabled={!enabled}
|
|
100
|
+
border={false}
|
|
101
|
+
label="Expand Nested Table"
|
|
102
|
+
size={Size.FillWidth}
|
|
103
|
+
icon={{
|
|
104
|
+
name: expandedColumnDef?.id === cell.column.columnDef.id ? 'minus' : 'plus',
|
|
105
|
+
size: Size.Medium,
|
|
106
|
+
}}
|
|
107
|
+
colourSet={expandedColumnDef?.id === cell.column.columnDef.id
|
|
108
|
+
? ColourSet.Primary
|
|
109
|
+
: ColourSet.Auxiliary}
|
|
110
|
+
onclick={(e: MouseEvent) => {
|
|
111
|
+
// FIXME why is this required? svelte bug?
|
|
112
|
+
e.stopImmediatePropagation();
|
|
113
|
+
// toastContext.toast("clicked")
|
|
114
|
+
onExpandChange(cell.column.columnDef);
|
|
115
|
+
}}
|
|
116
|
+
/>
|
|
117
|
+
</div>
|
|
118
|
+
{/snippet}
|
|
119
|
+
|
|
120
120
|
<style>.focusable,
|
|
121
121
|
.checkbox-cell,
|
|
122
122
|
.input-cell,
|
|
@@ -199,4 +199,4 @@ div.slot-wrapper {
|
|
|
199
199
|
.noninteractive {
|
|
200
200
|
display: contents;
|
|
201
201
|
user-select: none;
|
|
202
|
-
}</style>
|
|
202
|
+
}</style>
|
|
@@ -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>
|