@lavalogic/scoria 0.40.32 → 0.40.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (135) hide show
  1. package/README.md +58 -58
  2. package/dist/Components/AccordionGroup.svelte +28 -28
  3. package/dist/Components/AccordionGroupButton.svelte +60 -60
  4. package/dist/Components/Action.svelte +48 -48
  5. package/dist/Components/AlertModal.svelte +102 -102
  6. package/dist/Components/Base/ContextWrapper.svelte +45 -45
  7. package/dist/Components/Base/Pagination.svelte +135 -135
  8. package/dist/Components/Base/Snippets.svelte +25 -25
  9. package/dist/Components/BigRadioSet.svelte +34 -34
  10. package/dist/Components/Bubble.svelte +38 -38
  11. package/dist/Components/Button.svelte +83 -83
  12. package/dist/Components/Checkbox.svelte +71 -71
  13. package/dist/Components/CollapsibleCard.svelte +59 -59
  14. package/dist/Components/CollapsibleMenuGroup.svelte +43 -43
  15. package/dist/Components/ConditionBuilder/ConditionBuilder.svelte +101 -101
  16. package/dist/Components/Contexts/ContextMenu.svelte +76 -76
  17. package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
  18. package/dist/Components/Contexts/ContextMenuOption.svelte +38 -38
  19. package/dist/Components/Contexts/Toast.svelte +71 -71
  20. package/dist/Components/Contexts/ToastContainer.svelte +34 -34
  21. package/dist/Components/Contexts/Tooltip.svelte +32 -32
  22. package/dist/Components/DataMatrixIcon.svelte +37 -37
  23. package/dist/Components/DateInput.svelte +80 -80
  24. package/dist/Components/DatePicker.svelte +86 -86
  25. package/dist/Components/DesktopModal.svelte +65 -65
  26. package/dist/Components/Dial.svelte +35 -35
  27. package/dist/Components/DimensionInput.svelte +95 -95
  28. package/dist/Components/DragMenu/DragMenuHolder.svelte +53 -53
  29. package/dist/Components/DragMenu/DraggableCard.svelte +49 -49
  30. package/dist/Components/FileCard.svelte +18 -18
  31. package/dist/Components/FileUpload.svelte +115 -115
  32. package/dist/Components/GridInput.svelte +123 -123
  33. package/dist/Components/GridInputSet.svelte +21 -21
  34. package/dist/Components/HorizontalTabGroup.svelte +54 -54
  35. package/dist/Components/HorizontalTabGroupButton.svelte +32 -32
  36. package/dist/Components/Icon.svelte +68 -68
  37. package/dist/Components/InfoAlert.svelte +32 -32
  38. package/dist/Components/LoadingAnimation.svelte +228 -227
  39. package/dist/Components/LoadingModal.svelte +19 -19
  40. package/dist/Components/LoadingOverlay.svelte +20 -20
  41. package/dist/Components/Modal.svelte +127 -127
  42. package/dist/Components/MultiSelect.svelte +126 -126
  43. package/dist/Components/Nav/Nav.svelte +71 -71
  44. package/dist/Components/Nav/NavServiceMenuList.svelte +37 -37
  45. package/dist/Components/Nav/NavTab.svelte +46 -46
  46. package/dist/Components/Nav/ServiceMenuItem.svelte +62 -62
  47. package/dist/Components/Nav/ServicesNav.svelte +50 -50
  48. package/dist/Components/NumberInput.svelte +98 -98
  49. package/dist/Components/OptionCards.svelte +58 -58
  50. package/dist/Components/PageHeading.svelte +21 -21
  51. package/dist/Components/PasswordInput.svelte +61 -61
  52. package/dist/Components/PopoverButton.svelte +53 -53
  53. package/dist/Components/Portal.svelte +7 -7
  54. package/dist/Components/ProgressBubble.svelte +42 -42
  55. package/dist/Components/QuerySelect.svelte +102 -102
  56. package/dist/Components/ResourceCalendar/ResourceCalendar.svelte +241 -241
  57. package/dist/Components/SidebarPanel.svelte +32 -32
  58. package/dist/Components/SingleSelect.svelte +122 -122
  59. package/dist/Components/StepButton.svelte +48 -48
  60. package/dist/Components/StepForm.svelte +58 -58
  61. package/dist/Components/Switch.svelte +43 -43
  62. package/dist/Components/Table/ARCHITECTURE.md +298 -298
  63. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +30 -30
  64. package/dist/Components/Table/Body/Rows/ColumnList.svelte +24 -24
  65. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +165 -165
  66. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +13 -13
  67. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +120 -120
  68. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +81 -81
  69. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +92 -92
  70. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +110 -110
  71. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +54 -54
  72. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +35 -35
  73. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +64 -64
  74. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +82 -82
  75. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +88 -88
  76. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +90 -90
  77. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +96 -96
  78. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +71 -71
  79. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +124 -124
  80. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +91 -91
  81. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +88 -88
  82. package/dist/Components/Table/Body/Rows/TableRow.svelte +127 -127
  83. package/dist/Components/Table/Body/TableBody.svelte +92 -92
  84. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +25 -25
  85. package/dist/Components/Table/Headers/SelectAllHeader.svelte +20 -20
  86. package/dist/Components/Table/Headers/TableHead.svelte +175 -175
  87. package/dist/Components/Table/Misc/ColumnPanel.svelte +32 -32
  88. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +29 -29
  89. package/dist/Components/Table/Misc/FilterInput.svelte +326 -326
  90. package/dist/Components/Table/Misc/FilterPanel.svelte +79 -79
  91. package/dist/Components/Table/Misc/FilterPanelModal.svelte +21 -21
  92. package/dist/Components/Table/Misc/ShareViewModal.svelte +118 -118
  93. package/dist/Components/Table/Misc/SidePanel.svelte +24 -24
  94. package/dist/Components/Table/Misc/TableConfigurationModal.svelte +318 -318
  95. package/dist/Components/Table/Misc/TableFooter.svelte +201 -201
  96. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +112 -112
  97. package/dist/Components/Table/Misc/TableSidebar.svelte +116 -116
  98. package/dist/Components/Table/Misc/TableViewDropdown.svelte +25 -25
  99. package/dist/Components/Table/Misc/ToolboxPanel.svelte +60 -60
  100. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +63 -63
  101. package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +101 -101
  102. package/dist/Components/Table/NestedTable.svelte +29 -29
  103. package/dist/Components/Table/Table.svelte +140 -140
  104. package/dist/Components/Test/TestContextConsumer.svelte +8 -8
  105. package/dist/Components/TextArea.svelte +92 -90
  106. package/dist/Components/TextInput.svelte +128 -117
  107. package/dist/Components/ThreeStateRadio.svelte +101 -101
  108. package/dist/Components/Touch/BoolCard.svelte +27 -27
  109. package/dist/Components/Touch/DateModal.svelte +98 -98
  110. package/dist/Components/Touch/EditCard.svelte +44 -44
  111. package/dist/Components/Touch/InfoCard.svelte +25 -25
  112. package/dist/Components/Touch/InfoTextCard.svelte +22 -22
  113. package/dist/Components/Touch/ModalExplanation.svelte +13 -13
  114. package/dist/Components/Touch/NumberKeyboard.svelte +81 -81
  115. package/dist/Components/Touch/NumberModal.svelte +49 -49
  116. package/dist/Components/Touch/PlusMinusCard.svelte +40 -40
  117. package/dist/Components/Touch/SelectModal.svelte +86 -86
  118. package/dist/Components/Touch/SummaryCard.svelte +74 -74
  119. package/dist/Components/Touch/TextAreaModal.svelte +53 -53
  120. package/dist/Components/Touch/TextModal.svelte +56 -56
  121. package/dist/Components/Touch/TouchCard.svelte +28 -28
  122. package/dist/Components/Touch/TouchModal.svelte +141 -141
  123. package/dist/Components/Touch/UtilityButton.svelte +63 -63
  124. package/dist/Components/VerticalTabGroup.svelte +38 -38
  125. package/dist/Components/VerticalTabGroupButton.svelte +46 -46
  126. package/dist/Helpers/Datamatrix.d.ts +19 -19
  127. package/dist/Helpers/Datamatrix.js +291 -291
  128. package/dist/Types/Examples/ExampleModal.svelte +27 -27
  129. package/dist/paraglide/README.md +1 -1
  130. package/dist/scss/_basics.scss +12 -12
  131. package/dist/scss/_colours.scss +140 -140
  132. package/dist/scss/_motion.scss +57 -57
  133. package/dist/scss/_sizing.scss +85 -85
  134. package/dist/scss/_transitions.scss +8 -8
  135. package/package.json +1 -1
@@ -1,8 +1,8 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- module
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ module
6
6
  >import { m as i18n } from "../../../../../paraglide/messages.js";
7
7
  import { ExpandDef } from "../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js";
8
8
  import { DisplayType } from "../../../Types/Columns/DisplayType.js";
@@ -23,11 +23,11 @@ import ValidityCell from "./ValidityCell.svelte";
23
23
  function isProgressBarTableCell(cell) {
24
24
  return cell.column.columnDef instanceof ProgressBarDef;
25
25
  }
26
- </script>
27
-
28
- <script
29
- lang="ts"
30
- generics="T extends object"
26
+ </script>
27
+
28
+ <script
29
+ lang="ts"
30
+ generics="T extends object"
31
31
  >import { dev } from "$app/environment";
32
32
  import { RowSelectionDef } from "../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js";
33
33
  let { cell, expandedColumnDef, onExpandChange } = $props();
@@ -59,75 +59,75 @@ function isExpandTableCell(cell) {
59
59
  function isSnippet(value) {
60
60
  return !!value && typeof value == "function";
61
61
  }
62
- </script>
63
-
64
- {#if cell.column.getIsVisible()}
65
- {@const columnDef = cell.column.columnDef}
66
-
67
- {#if isRowSelectionCell(cell)}
68
- <TableRowSelectionCheckbox {cell} />
69
- {:else if isActionsDef(cell)}
70
- <ActionsCell {cell} />
71
- {:else if isExpandTableCell(cell)}
72
- <ExpandCell
73
- {cell}
74
- {expandedColumnDef}
75
- {onExpandChange}
76
- />
77
- {:else if columnDef.columnType !== ColumnType.Display}
78
- <AccessorComponent {cell} />
79
- {:else if cell.column.columnDef instanceof AbstractDisplayDef}
80
- {#if cell.column.columnDef.displayType === DisplayType.Bubbles}
81
- <BubbleCell {cell} />
82
- {:else if cell.column.columnDef.displayType === DisplayType.Validity}
83
- <ValidityCell {cell} />
84
- {:else if isProgressBarTableCell(cell)}
85
- <ProgressCell {cell} />
86
- {:else if cell.column.columnDef.displayType === DisplayType.Normal}
87
- <FocusableImmutableCell {cell} />
88
- {:else}
89
- {#if dev}
90
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
91
- {@debug cell}
92
- {/if}
93
- {i18n['scoria.text.unknown_cell_type']()}
94
- {/if}
95
- {:else}
96
- {@const valueOrComponentPromise =
97
- cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
98
- cell.row.original[cell.column.id as keyof typeof cell.row.original]}
99
-
100
- {#await valueOrComponentPromise}
101
- <FocusableImmutableCell {cell} />
102
- {:then Value}
103
- {#if typeof Value === 'string' || typeof Value == 'number'}
104
- <FocusableImmutableCell {cell} />
105
- {:else if valueOrComponentIsConstructor(Value)}
106
- <FocusableImmutableCell {cell}>
107
- <Value {cell} />
108
- </FocusableImmutableCell>
109
- {:else if isSnippet(Value)}
110
- <FocusableImmutableCell {cell}>
111
- <!-- eslint-disable-next-line @typescript-eslint/no-unsafe-call -->
112
- {@render Value(cell)}
113
- </FocusableImmutableCell>
114
- {:else}
115
- {#if dev}
116
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
117
- {@debug cell}
118
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
119
- {@debug Value}
120
- {/if}
121
- {i18n['scoria.text.unknown_cell_value_type']()}
122
- {/if}
123
- {:catch e}
124
- <FocusableImmutableCell {cell}>
125
- {#if dev}
126
- {getErrorMessage(e)}
127
- {:else}
128
- {i18n['scoria.text.error_rendering_cell']()}
129
- {/if}
130
- </FocusableImmutableCell>
131
- {/await}
132
- {/if}
133
- {/if}
62
+ </script>
63
+
64
+ {#if cell.column.getIsVisible()}
65
+ {@const columnDef = cell.column.columnDef}
66
+
67
+ {#if isRowSelectionCell(cell)}
68
+ <TableRowSelectionCheckbox {cell} />
69
+ {:else if isActionsDef(cell)}
70
+ <ActionsCell {cell} />
71
+ {:else if isExpandTableCell(cell)}
72
+ <ExpandCell
73
+ {cell}
74
+ {expandedColumnDef}
75
+ {onExpandChange}
76
+ />
77
+ {:else if columnDef.columnType !== ColumnType.Display}
78
+ <AccessorComponent {cell} />
79
+ {:else if cell.column.columnDef instanceof AbstractDisplayDef}
80
+ {#if cell.column.columnDef.displayType === DisplayType.Bubbles}
81
+ <BubbleCell {cell} />
82
+ {:else if cell.column.columnDef.displayType === DisplayType.Validity}
83
+ <ValidityCell {cell} />
84
+ {:else if isProgressBarTableCell(cell)}
85
+ <ProgressCell {cell} />
86
+ {:else if cell.column.columnDef.displayType === DisplayType.Normal}
87
+ <FocusableImmutableCell {cell} />
88
+ {:else}
89
+ {#if dev}
90
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
91
+ {@debug cell}
92
+ {/if}
93
+ {i18n['scoria.text.unknown_cell_type']()}
94
+ {/if}
95
+ {:else}
96
+ {@const valueOrComponentPromise =
97
+ cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
98
+ cell.row.original[cell.column.id as keyof typeof cell.row.original]}
99
+
100
+ {#await valueOrComponentPromise}
101
+ <FocusableImmutableCell {cell} />
102
+ {:then Value}
103
+ {#if typeof Value === 'string' || typeof Value == 'number'}
104
+ <FocusableImmutableCell {cell} />
105
+ {:else if valueOrComponentIsConstructor(Value)}
106
+ <FocusableImmutableCell {cell}>
107
+ <Value {cell} />
108
+ </FocusableImmutableCell>
109
+ {:else if isSnippet(Value)}
110
+ <FocusableImmutableCell {cell}>
111
+ <!-- eslint-disable-next-line @typescript-eslint/no-unsafe-call -->
112
+ {@render Value(cell)}
113
+ </FocusableImmutableCell>
114
+ {:else}
115
+ {#if dev}
116
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
117
+ {@debug cell}
118
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
119
+ {@debug Value}
120
+ {/if}
121
+ {i18n['scoria.text.unknown_cell_value_type']()}
122
+ {/if}
123
+ {:catch e}
124
+ <FocusableImmutableCell {cell}>
125
+ {#if dev}
126
+ {getErrorMessage(e)}
127
+ {:else}
128
+ {i18n['scoria.text.error_rendering_cell']()}
129
+ {/if}
130
+ </FocusableImmutableCell>
131
+ {/await}
132
+ {/if}
133
+ {/if}
@@ -1,8 +1,8 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="T extends object, RowIdType extends Primitive"
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="T extends object, RowIdType extends Primitive"
6
6
  >import { m as i18n } from "../../../../../paraglide/messages.js";
7
7
  import { dev } from "$app/environment";
8
8
  import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
@@ -118,88 +118,88 @@ $effect(() => {
118
118
  node.removeEventListener("edit", tryHandleDoubleClick);
119
119
  };
120
120
  });
121
- </script>
122
-
123
- <!-- svelte-ignore a11y_mouse_events_have_key_events -->
124
- <!-- svelte-ignore a11y_click_events_have_key_events -->
125
- <!-- svelte-ignore a11y_no_static_element_interactions -->
126
- <div
127
- {id}
128
- style={focusDetails.outline}
129
- aria-label={reason}
130
- tabIndex="0"
131
- bind:this={tdref}
132
- class:editable
133
- class="focusable"
134
- class:multifocus={focusDetails.isMultiFocused}
135
- class:multifocus-start={focusDetails.isMultiFocusStart}
136
- class:info={validity == Validity.Info}
137
- class:success={validity == Validity.Valid}
138
- class:warning={validity == Validity.Warning}
139
- class:error={validity == Validity.Invalid}
140
- onmousedown={(e) => {
141
- // start focus only on left click
142
- if (e.button === 0) {
143
- if (e.shiftKey) {
144
- e.preventDefault();
145
- tableContext.setFocusEnd(coordinates);
146
- } else {
147
- tableContext.startFocus(coordinates);
148
- }
149
- }
150
- }}
151
- onmouseover={() => {
152
- if (tableContext.isMousingDown) {
153
- tableContext.setFocusEnd(coordinates);
154
- }
155
- }}
156
- onmouseup={() => {
157
- tableContext.endFocus(coordinates);
158
- }}
159
- onclick={() => {
160
- handleSingleClick().catch(devCatch);
161
- }}
162
- ondblclick={() => {
163
- handleDoubleClick().catch(devCatch);
164
- }}
165
- >
166
- {#if modalLock}
167
- <DateModal
168
- header={i18n['scoria.label.edit_column']({
169
- name: typeof columnDef.header === 'string' ? columnDef.header : columnDef.id,
170
- })}
171
- value={dateValue ?? null}
172
- showTime={cell.column.columnDef.showTime}
173
- cancelEditing={() => {
174
- refocusTd();
175
- }}
176
- confirm={(e) => {
177
- tableContext.onEditCell(cell.row.original, coordinates, e).catch(devCatch);
178
- refocusTd();
179
- }}
180
- />
181
- {/if}
182
-
183
- {#if !value}
184
- -
185
- {:else if typeof value === 'string'}
186
- {@const parsed = new Date(value)}
187
- {isNaN(parsed.getFullYear()) ? value : parsed.toLocaleString()}
188
- {:else if value instanceof Date}
189
- {#if cell.column.columnDef.showTime}
190
- {value.toLocaleString()}
191
- {:else}
192
- {value.toLocaleDateString()}
193
- {/if}
194
- {:else if dev}
195
- <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
196
- {@debug value}
197
- {i18n['scoria.text.error_reading_value']()}
198
- {:else}
199
- -
200
- {/if}
201
- </div>
202
-
121
+ </script>
122
+
123
+ <!-- svelte-ignore a11y_mouse_events_have_key_events -->
124
+ <!-- svelte-ignore a11y_click_events_have_key_events -->
125
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
126
+ <div
127
+ {id}
128
+ style={focusDetails.outline}
129
+ aria-label={reason}
130
+ tabIndex="0"
131
+ bind:this={tdref}
132
+ class:editable
133
+ class="focusable"
134
+ class:multifocus={focusDetails.isMultiFocused}
135
+ class:multifocus-start={focusDetails.isMultiFocusStart}
136
+ class:info={validity == Validity.Info}
137
+ class:success={validity == Validity.Valid}
138
+ class:warning={validity == Validity.Warning}
139
+ class:error={validity == Validity.Invalid}
140
+ onmousedown={(e) => {
141
+ // start focus only on left click
142
+ if (e.button === 0) {
143
+ if (e.shiftKey) {
144
+ e.preventDefault();
145
+ tableContext.setFocusEnd(coordinates);
146
+ } else {
147
+ tableContext.startFocus(coordinates);
148
+ }
149
+ }
150
+ }}
151
+ onmouseover={() => {
152
+ if (tableContext.isMousingDown) {
153
+ tableContext.setFocusEnd(coordinates);
154
+ }
155
+ }}
156
+ onmouseup={() => {
157
+ tableContext.endFocus(coordinates);
158
+ }}
159
+ onclick={() => {
160
+ handleSingleClick().catch(devCatch);
161
+ }}
162
+ ondblclick={() => {
163
+ handleDoubleClick().catch(devCatch);
164
+ }}
165
+ >
166
+ {#if modalLock}
167
+ <DateModal
168
+ header={i18n['scoria.label.edit_column']({
169
+ name: typeof columnDef.header === 'string' ? columnDef.header : columnDef.id,
170
+ })}
171
+ value={dateValue ?? null}
172
+ showTime={cell.column.columnDef.showTime}
173
+ cancelEditing={() => {
174
+ refocusTd();
175
+ }}
176
+ confirm={(e) => {
177
+ tableContext.onEditCell(cell.row.original, coordinates, e).catch(devCatch);
178
+ refocusTd();
179
+ }}
180
+ />
181
+ {/if}
182
+
183
+ {#if !value}
184
+ -
185
+ {:else if typeof value === 'string'}
186
+ {@const parsed = new Date(value)}
187
+ {isNaN(parsed.getFullYear()) ? value : parsed.toLocaleString()}
188
+ {:else if value instanceof Date}
189
+ {#if cell.column.columnDef.showTime}
190
+ {value.toLocaleString()}
191
+ {:else}
192
+ {value.toLocaleDateString()}
193
+ {/if}
194
+ {:else if dev}
195
+ <!-- eslint-disable-next-line svelte/no-at-debug-tags -->
196
+ {@debug value}
197
+ {i18n['scoria.text.error_reading_value']()}
198
+ {:else}
199
+ -
200
+ {/if}
201
+ </div>
202
+
203
203
  <style>.focusable,
204
204
  .checkbox-cell,
205
205
  .input-cell,
@@ -265,4 +265,4 @@ $effect(() => {
265
265
 
266
266
  [role=cell] {
267
267
  position: static;
268
- }</style>
268
+ }</style>
@@ -1,14 +1,14 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- module
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ module
6
6
  >export {};
7
- </script>
8
-
9
- <script
10
- lang="ts"
11
- generics="T extends object, RowIdType extends Primitive"
7
+ </script>
8
+
9
+ <script
10
+ lang="ts"
11
+ generics="T extends object, RowIdType extends Primitive"
12
12
  >import NumberInput from "../../../../NumberInput.svelte";
13
13
  import { NumberInputDef } from "../../../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js";
14
14
  import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
@@ -96,85 +96,85 @@ function onInputFocus(e) {
96
96
  * listener is removed when `tdref` is remounted or the cell unmounts.
97
97
  */
98
98
  $effect(() => editable.attachEditListener(tdref));
99
- </script>
100
-
101
- {#if editable.isBeingEdited}
102
- <div class="input-cell">
103
- <NumberInput
104
- id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
105
- min={(cell.column.columnDef as NumberInputDef<T>).min}
106
- max={(cell.column.columnDef as NumberInputDef<T>).max}
107
- variant={InputVariant.Table}
108
- onkeydown={handleInputKeydown}
109
- bind:value={tempNumericValue}
110
- onfocus={onInputFocus}
111
- bind:inputRef
112
- />
113
- <!-- HACK this onBlur is now being called by an effect because otherwise it fires twice -->
114
- </div>
115
- {:else}
116
- <!-- svelte-ignore a11y_mouse_events_have_key_events -->
117
- <!-- svelte-ignore a11y_no_static_element_interactions -->
118
- <div
119
- style={editable.focusDetails.outline}
120
- id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
121
- onmousedown={(e) => {
122
- // start focus only on left click
123
- if (e.button === 0) {
124
- if (e.shiftKey) {
125
- e.preventDefault();
126
- tableContext.setFocusEnd(editable.focusDetails.coordinates);
127
- } else {
128
- tableContext.startFocus(editable.focusDetails.coordinates);
129
- }
130
- }
131
- }}
132
- onmouseover={() => {
133
- if (tableContext.isMousingDown) {
134
- tableContext.setFocusEnd(editable.focusDetails.coordinates);
135
- }
136
- }}
137
- onmouseup={() => {
138
- const wasHandled = editable.handleSingleClickFocus();
139
- if (wasHandled) {
140
- resetValue();
141
- tick()
142
- .then(() => {
143
- inputRef?.focus();
144
- })
145
- .catch(devCatch);
146
- } else {
147
- tableContext.endFocus(editable.focusDetails.coordinates);
148
- }
149
- }}
150
- bind:this={tdref}
151
- tabIndex="0"
152
- class:editable={editable.editable}
153
- class="focusable"
154
- class:multifocus={editable.focusDetails.isMultiFocused}
155
- class:multifocus-start={editable.focusDetails.isMultiFocusStart}
156
- class:info={editable.validity == Validity.Info}
157
- class:success={editable.validity == Validity.Valid}
158
- class:warning={editable.validity == Validity.Warning}
159
- class:error={editable.validity == Validity.Invalid}
160
- ondblclick={() => {
161
- const wasHandled = editable.handleDoubleClickFocus();
162
- if (wasHandled) {
163
- resetValue();
164
- tick()
165
- .then(() => {
166
- inputRef?.focus();
167
- })
168
- .catch(devCatch);
169
- }
170
- }}
171
- >
172
- {#await visibleValue}
173
- {loadingText()}
174
- {:then value}{value ?? '-'}{/await}
175
- </div>
176
- {/if}
177
-
99
+ </script>
100
+
101
+ {#if editable.isBeingEdited}
102
+ <div class="input-cell">
103
+ <NumberInput
104
+ id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
105
+ min={(cell.column.columnDef as NumberInputDef<T>).min}
106
+ max={(cell.column.columnDef as NumberInputDef<T>).max}
107
+ variant={InputVariant.Table}
108
+ onkeydown={handleInputKeydown}
109
+ bind:value={tempNumericValue}
110
+ onfocus={onInputFocus}
111
+ bind:inputRef
112
+ />
113
+ <!-- HACK this onBlur is now being called by an effect because otherwise it fires twice -->
114
+ </div>
115
+ {:else}
116
+ <!-- svelte-ignore a11y_mouse_events_have_key_events -->
117
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
118
+ <div
119
+ style={editable.focusDetails.outline}
120
+ id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
121
+ onmousedown={(e) => {
122
+ // start focus only on left click
123
+ if (e.button === 0) {
124
+ if (e.shiftKey) {
125
+ e.preventDefault();
126
+ tableContext.setFocusEnd(editable.focusDetails.coordinates);
127
+ } else {
128
+ tableContext.startFocus(editable.focusDetails.coordinates);
129
+ }
130
+ }
131
+ }}
132
+ onmouseover={() => {
133
+ if (tableContext.isMousingDown) {
134
+ tableContext.setFocusEnd(editable.focusDetails.coordinates);
135
+ }
136
+ }}
137
+ onmouseup={() => {
138
+ const wasHandled = editable.handleSingleClickFocus();
139
+ if (wasHandled) {
140
+ resetValue();
141
+ tick()
142
+ .then(() => {
143
+ inputRef?.focus();
144
+ })
145
+ .catch(devCatch);
146
+ } else {
147
+ tableContext.endFocus(editable.focusDetails.coordinates);
148
+ }
149
+ }}
150
+ bind:this={tdref}
151
+ tabIndex="0"
152
+ class:editable={editable.editable}
153
+ class="focusable"
154
+ class:multifocus={editable.focusDetails.isMultiFocused}
155
+ class:multifocus-start={editable.focusDetails.isMultiFocusStart}
156
+ class:info={editable.validity == Validity.Info}
157
+ class:success={editable.validity == Validity.Valid}
158
+ class:warning={editable.validity == Validity.Warning}
159
+ class:error={editable.validity == Validity.Invalid}
160
+ ondblclick={() => {
161
+ const wasHandled = editable.handleDoubleClickFocus();
162
+ if (wasHandled) {
163
+ resetValue();
164
+ tick()
165
+ .then(() => {
166
+ inputRef?.focus();
167
+ })
168
+ .catch(devCatch);
169
+ }
170
+ }}
171
+ >
172
+ {#await visibleValue}
173
+ {loadingText()}
174
+ {:then value}{value ?? '-'}{/await}
175
+ </div>
176
+ {/if}
177
+
178
178
  <style>.focusable,
179
179
  .checkbox-cell,
180
180
  .input-cell,
@@ -241,4 +241,4 @@ $effect(() => editable.attachEditListener(tdref));
241
241
  .input-cell {
242
242
  padding: unset;
243
243
  box-sizing: border-box;
244
- }</style>
244
+ }</style>