@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.
Files changed (94) hide show
  1. package/dist/Components/AccordionGroup.svelte +46 -46
  2. package/dist/Components/AccordionGroupButton.svelte +76 -76
  3. package/dist/Components/Action.svelte +136 -136
  4. package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +712 -702
  5. package/dist/Components/Base/BaseModal.svelte +125 -125
  6. package/dist/Components/Base/ContextWrapper.svelte +72 -72
  7. package/dist/Components/Base/Pagination.svelte +198 -198
  8. package/dist/Components/Base/Snippets.svelte +36 -36
  9. package/dist/Components/BigRadioSet.svelte +38 -38
  10. package/dist/Components/Bubble.svelte +101 -101
  11. package/dist/Components/Button.svelte +209 -209
  12. package/dist/Components/Checkbox.svelte +86 -86
  13. package/dist/Components/Contexts/ContextMenu.svelte +164 -164
  14. package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
  15. package/dist/Components/Contexts/ContextMenuOption.svelte +60 -60
  16. package/dist/Components/Contexts/ToastContainer.svelte +65 -65
  17. package/dist/Components/Contexts/Tooltip.svelte +37 -37
  18. package/dist/Components/DataMatrixIcon.svelte +112 -112
  19. package/dist/Components/DateInput.svelte +148 -148
  20. package/dist/Components/DatePicker.svelte +300 -300
  21. package/dist/Components/DesktopModal.svelte +90 -90
  22. package/dist/Components/Dial.svelte +204 -204
  23. package/dist/Components/DimensionInput.svelte +170 -170
  24. package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
  25. package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
  26. package/dist/Components/FileCard.svelte +24 -24
  27. package/dist/Components/FileUpload.svelte +236 -236
  28. package/dist/Components/GridInputSet.svelte +29 -29
  29. package/dist/Components/HorizontalTabGroup.svelte +82 -82
  30. package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
  31. package/dist/Components/Icon.svelte +128 -128
  32. package/dist/Components/Icons.js +357 -357
  33. package/dist/Components/LoadingAnimation.svelte +29 -29
  34. package/dist/Components/LoadingModal.svelte +45 -45
  35. package/dist/Components/LoadingOverlay.svelte +25 -25
  36. package/dist/Components/Modal.svelte +258 -258
  37. package/dist/Components/MultiSelect.svelte +220 -220
  38. package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
  39. package/dist/Components/Nav/NavTab.svelte +62 -62
  40. package/dist/Components/Nav/ServicesNav.svelte +80 -80
  41. package/dist/Components/NumberInput.svelte +157 -157
  42. package/dist/Components/PageHeading.svelte +25 -25
  43. package/dist/Components/PasswordInput.svelte +88 -88
  44. package/dist/Components/Portal.svelte +36 -36
  45. package/dist/Components/QuerySelect.svelte +366 -366
  46. package/dist/Components/SingleSelect.svelte +250 -250
  47. package/dist/Components/StepButton.svelte +70 -70
  48. package/dist/Components/StepForm.svelte +140 -140
  49. package/dist/Components/Switch.svelte +69 -69
  50. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
  51. package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
  52. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
  53. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
  54. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
  55. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
  56. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
  57. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
  58. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
  59. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
  60. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
  61. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
  62. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
  63. package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
  64. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
  65. package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
  66. package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
  67. package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
  68. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
  69. package/dist/Components/TextArea.svelte +130 -130
  70. package/dist/Components/TextInput.svelte +176 -176
  71. package/dist/Components/ThreeStateRadio.svelte +131 -131
  72. package/dist/Components/Touch/BoolCard.svelte +45 -45
  73. package/dist/Components/Touch/DateModal.svelte +209 -209
  74. package/dist/Components/Touch/EditCard.svelte +59 -59
  75. package/dist/Components/Touch/InfoCard.svelte +31 -31
  76. package/dist/Components/Touch/InfoTextCard.svelte +28 -28
  77. package/dist/Components/Touch/ModalExplanation.svelte +17 -17
  78. package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
  79. package/dist/Components/Touch/NumberModal.svelte +79 -79
  80. package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
  81. package/dist/Components/Touch/SummaryCard.svelte +93 -93
  82. package/dist/Components/Touch/TextAreaModal.svelte +95 -95
  83. package/dist/Components/Touch/TextModal.svelte +106 -106
  84. package/dist/Components/Touch/TouchCard.svelte +33 -33
  85. package/dist/Components/Touch/TouchModal.svelte +274 -274
  86. package/dist/Components/Touch/UtilityButton.svelte +109 -109
  87. package/dist/Components/VerticalTabGroup.svelte +79 -79
  88. package/dist/Components/VerticalTabGroupButton.svelte +58 -58
  89. package/dist/Helpers/Datamatrix.d.ts +19 -19
  90. package/dist/Helpers/Datamatrix.js +291 -291
  91. package/dist/Types/Examples/ExampleModal.svelte +35 -35
  92. package/dist/scss/_motion.scss +57 -57
  93. package/dist/scss/_sizing.scss +85 -85
  94. 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>