@lavalogic/scoria 0.37.44 → 0.37.45
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/ActionProps.d.ts +2 -6
- package/dist/Components/AlertModal.svelte +195 -183
- package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +702 -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/ButtonProps.d.ts +2 -6
- 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 +83 -83
- 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/DataMatrixIconProps.d.ts +3 -13
- 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/DialProps.d.ts +1 -18
- 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 -200
- 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/IconProps.d.ts +2 -7
- 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/LoadingOverlayProps.d.ts +3 -7
- package/dist/Components/Modal.svelte +258 -258
- package/dist/Components/ModalProps.d.ts +0 -3
- package/dist/Components/MultiSelect.svelte +220 -220
- package/dist/Components/MultiSelectCommonProps.d.ts +6 -17
- package/dist/Components/Nav/Nav.svelte +99 -99
- package/dist/Components/Nav/NavProps.d.ts +4 -11
- package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
- package/dist/Components/Nav/NavTab.svelte +62 -62
- package/dist/Components/Nav/ServiceMenuItem.svelte +100 -100
- 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 -108
- package/dist/Components/ProgressBubbleProps.d.ts +3 -3
- package/dist/Components/QuerySelect.svelte +366 -366
- package/dist/Components/QuerySelectProps.d.ts +4 -14
- package/dist/Components/SingleSelect.svelte +250 -250
- package/dist/Components/SingleSelectCommonProps.d.ts +3 -19
- 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 -0
- package/dist/Components/Table/Body/QuickSearchCell.svelte +679 -694
- 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 +456 -478
- package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
- package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -188
- package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
- package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
- package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +230 -230
- package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
- package/dist/Components/Table/Body/Rows/Columns/SelectColumn.d.ts +12 -9
- package/dist/Components/Table/Body/Rows/Columns/SelectTableCell.d.ts +5 -5
- 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/TableDatePickerProps.d.ts +4 -4
- package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
- package/dist/Components/Table/Body/Rows/Columns/TableQueryCell.d.ts +6 -5
- package/dist/Components/Table/Body/Rows/Columns/TableQueryColumn.d.ts +7 -6
- package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -257
- package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
- package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -229
- package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte.d.ts +11 -11
- 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/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js +2 -3
- package/dist/Components/Table/ColumnFactory.svelte.d.ts +9 -11
- package/dist/Components/Table/ColumnFactory.svelte.js +101 -118
- package/dist/Components/Table/ColumnKindRegistry.d.ts +112 -0
- package/dist/Components/Table/ColumnKindRegistry.js +63 -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 -413
- package/dist/Components/Table/Misc/ColumnPanel.svelte +94 -94
- package/dist/Components/Table/Misc/ColumnPanelModal.svelte +112 -112
- package/dist/Components/Table/Misc/FilterInput.svelte +620 -644
- package/dist/Components/Table/Misc/FilterInput.svelte.d.ts +12 -12
- package/dist/Components/Table/Misc/FilterInputProps.d.ts +2 -2
- package/dist/Components/Table/Misc/FilterPanel.svelte +257 -257
- package/dist/Components/Table/Misc/FilterPanelModal.svelte +30 -30
- package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
- package/dist/Components/Table/Misc/TableFooter.svelte +311 -311
- package/dist/Components/Table/Misc/TableHorizontalBar.svelte +125 -125
- package/dist/Components/Table/Misc/TableSidebar.svelte +157 -157
- package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
- package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
- package/dist/Components/Table/NestedTable.svelte +130 -133
- package/dist/Components/Table/SubApis.svelte.d.ts +1 -5
- package/dist/Components/Table/SubApis.svelte.js +33 -32
- package/dist/Components/Table/Table.svelte +692 -745
- package/dist/Components/Table/TableHelpers.svelte.d.ts +6 -19
- package/dist/Components/Table/TableHelpers.svelte.js +6 -14
- package/dist/Components/Table/Types/Columns/Column.d.ts +2 -2
- package/dist/Components/Table/Types/Columns/DateColumn.d.ts +3 -3
- package/dist/Components/Table/Types/Columns/DateTableCell.d.ts +7 -7
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.d.ts +7 -8
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.js +4 -5
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.d.ts +11 -14
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js +3 -4
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.d.ts +7 -11
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.js +3 -3
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.d.ts +13 -18
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js +4 -5
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.d.ts +5 -5
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.js +2 -2
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts +15 -12
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.js +4 -5
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.d.ts +8 -12
- package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.js +3 -3
- package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.d.ts +6 -6
- package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js +3 -3
- package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts +49 -16
- package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js +27 -5
- package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.d.ts +7 -7
- package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js +4 -4
- package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts +5 -5
- package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js +2 -2
- package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.d.ts +5 -5
- package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.js +2 -2
- package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.d.ts +5 -5
- package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.js +2 -2
- package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.d.ts +5 -5
- package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.js +2 -2
- package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts +11 -19
- package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js +4 -8
- package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.d.ts +6 -7
- package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.js +3 -4
- package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.d.ts +9 -9
- package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js +4 -4
- package/dist/Components/Table/Types/Columns/ExpandTableCell.d.ts +5 -5
- package/dist/Components/Table/Types/Columns/ProgressBarTableCell.d.ts +6 -6
- package/dist/Components/Table/Types/Columns/TableCell.d.ts +7 -6
- package/dist/Components/Table/Types/Context/ClipboardState.svelte.d.ts +98 -0
- package/dist/Components/Table/Types/Context/ClipboardState.svelte.js +290 -0
- package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.d.ts +17 -45
- package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.js +17 -45
- package/dist/Components/Table/Types/Context/FilteringState.svelte.d.ts +9 -20
- package/dist/Components/Table/Types/Context/FilteringState.svelte.js +9 -20
- package/dist/Components/Table/Types/Context/FocusState.svelte.d.ts +23 -42
- package/dist/Components/Table/Types/Context/FocusState.svelte.js +32 -59
- package/dist/Components/Table/Types/Context/ITable.d.ts +5 -8
- package/dist/Components/Table/Types/Context/PreferencesState.svelte.d.ts +29 -56
- package/dist/Components/Table/Types/Context/PreferencesState.svelte.js +28 -55
- package/dist/Components/Table/Types/Context/QueryValuesState.svelte.d.ts +50 -0
- package/dist/Components/Table/Types/Context/QueryValuesState.svelte.js +62 -0
- package/dist/Components/Table/Types/Context/SelectionState.svelte.d.ts +17 -28
- package/dist/Components/Table/Types/Context/SelectionState.svelte.js +17 -28
- package/dist/Components/Table/Types/Context/SortingState.svelte.d.ts +15 -29
- package/dist/Components/Table/Types/Context/SortingState.svelte.js +17 -31
- package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts +212 -325
- package/dist/Components/Table/Types/Context/TableContext.svelte.js +292 -706
- package/dist/Components/Table/Types/Context/VirtualisationState.svelte.d.ts +62 -79
- package/dist/Components/Table/Types/Context/VirtualisationState.svelte.js +54 -73
- package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.d.ts +16 -27
- package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.js +16 -27
- package/dist/Components/Table/Types/DataRepository/IDataRepository.d.ts +12 -15
- package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts +15 -30
- package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.js +16 -28
- package/dist/Components/Table/Types/Header.d.ts +4 -4
- package/dist/Components/Table/Types/HeaderGroup.d.ts +5 -5
- package/dist/Components/Table/Types/Public/index.d.ts +2 -4
- package/dist/Components/Table/Types/Public/index.js +2 -4
- package/dist/Components/Table/clipboardEscape.d.ts +32 -0
- package/dist/Components/Table/clipboardEscape.js +45 -0
- package/dist/Components/Table/createTable.svelte.d.ts +8 -18
- package/dist/Components/Table/createTable.svelte.js +19 -47
- 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 +123 -123
- 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/Contexts/ToastContext.svelte.js +3 -4
- package/dist/Helpers/Datamatrix.d.ts +19 -19
- package/dist/Helpers/Datamatrix.js +291 -291
- package/dist/Helpers/Helpers.svelte.d.ts +2 -4
- package/dist/Helpers/Helpers.svelte.js +2 -4
- package/dist/Helpers/dropdownPortal.d.ts +26 -41
- package/dist/Helpers/dropdownPortal.js +62 -116
- package/dist/Types/Examples/ExampleModal.svelte +35 -35
- package/dist/index.d.ts +0 -1
- package/dist/scss/_basics.scss +12 -12
- package/dist/scss/_colours.scss +134 -134
- package/dist/scss/_mixins.scss +3348 -3360
- package/dist/scss/_motion.scss +57 -57
- package/dist/scss/_sizing.scss +85 -85
- package/dist/scss/_transitions.scss +8 -8
- package/package.json +2 -1
|
@@ -1,111 +1,111 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script lang="ts">
|
|
4
|
-
import { passthrough } from '../../Helpers/Helpers.svelte.js';
|
|
5
|
-
import { ColourSet } from '../../scss/colours.js';
|
|
6
|
-
import { Side } from '../../Types/Internal/Side.js';
|
|
7
|
-
import { Size } from '../../Types/Internal/Size.js';
|
|
8
|
-
import { onMount } from 'svelte';
|
|
9
|
-
import DataMatrixIcon from '../DataMatrixIcon.svelte';
|
|
10
|
-
import Icon from '../Icon.svelte';
|
|
11
|
-
import type { DataMatrixSvg } from '../DataMatrixIconProps.js';
|
|
12
|
-
import type { UtilityButtonProps } from './UtilityButtonProps.js';
|
|
13
|
-
let {
|
|
14
|
-
type = 'button',
|
|
15
|
-
colourSet = ColourSet.Secondary,
|
|
16
|
-
icon,
|
|
17
|
-
side = Side.Top,
|
|
18
|
-
size: explicitSize,
|
|
19
|
-
notifications,
|
|
20
|
-
ref = $bindable(),
|
|
21
|
-
disabled = false,
|
|
22
|
-
label,
|
|
23
|
-
onEditBarcode,
|
|
24
|
-
onclick,
|
|
25
|
-
onfocus,
|
|
26
|
-
onblur,
|
|
27
|
-
children,
|
|
28
|
-
}: UtilityButtonProps = $props();
|
|
29
|
-
|
|
30
|
-
let isMounted = $state(false);
|
|
31
|
-
|
|
32
|
-
onMount(() => {
|
|
33
|
-
isMounted = true;
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
const size: Size = $derived.by(() => {
|
|
37
|
-
if (!isMounted) {
|
|
38
|
-
return Size.DoubleXLarge;
|
|
39
|
-
}
|
|
40
|
-
if (explicitSize !== undefined) {
|
|
41
|
-
return explicitSize;
|
|
42
|
-
}
|
|
43
|
-
if (icon instanceof SVGSVGElement) {
|
|
44
|
-
return Size.DoubleXLarge;
|
|
45
|
-
}
|
|
46
|
-
return icon?.size ?? Size.DoubleXLarge;
|
|
47
|
-
});
|
|
48
|
-
let slotSpan: HTMLSpanElement | undefined = $state();
|
|
49
|
-
</script>
|
|
50
|
-
|
|
51
|
-
<button
|
|
52
|
-
{type}
|
|
53
|
-
class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
|
|
54
|
-
{disabled}
|
|
55
|
-
class:left={side == Side.Left}
|
|
56
|
-
class:right={side == Side.Right}
|
|
57
|
-
class:top={side == Side.Top}
|
|
58
|
-
class:bottom={side == Side.Bottom}
|
|
59
|
-
bind:this={ref}
|
|
60
|
-
aria-label={label}
|
|
61
|
-
{onclick}
|
|
62
|
-
{onfocus}
|
|
63
|
-
{onblur}
|
|
64
|
-
oncontextmenu={(e) => {
|
|
65
|
-
if (onEditBarcode) {
|
|
66
|
-
e.preventDefault();
|
|
67
|
-
onEditBarcode();
|
|
68
|
-
}
|
|
69
|
-
}}
|
|
70
|
-
onkeydown={passthrough}
|
|
71
|
-
>
|
|
72
|
-
{#if isMounted && icon}
|
|
73
|
-
<div
|
|
74
|
-
class="expand"
|
|
75
|
-
class:left={side == Side.Left}
|
|
76
|
-
class:right={side == Side.Right}
|
|
77
|
-
class:top={side == Side.Top}
|
|
78
|
-
class:bottom={side == Side.Bottom}
|
|
79
|
-
>
|
|
80
|
-
{#if icon instanceof SVGSVGElement}
|
|
81
|
-
<!-- SECURITY: UtilityButton accepts a generic SVGSVGElement here for backwards
|
|
82
|
-
compatibility. The cast to DataMatrixSvg trusts the caller; DataMatrixIcon
|
|
83
|
-
additionally sanitises the cloned subtree before mounting. -->
|
|
84
|
-
<DataMatrixIcon
|
|
85
|
-
title={slotSpan?.textContent ?? '{unknown}'}
|
|
86
|
-
icon={{ kind: 'svg', svg: icon as DataMatrixSvg }}
|
|
87
|
-
/>
|
|
88
|
-
{:else}
|
|
89
|
-
{#if notifications}
|
|
90
|
-
<span class="notification">{notifications}</span>
|
|
91
|
-
{/if}
|
|
92
|
-
|
|
93
|
-
<Icon
|
|
94
|
-
{...icon}
|
|
95
|
-
{size}
|
|
96
|
-
/>
|
|
97
|
-
{/if}
|
|
98
|
-
</div>
|
|
99
|
-
{/if}
|
|
100
|
-
<span class="utility-label">
|
|
101
|
-
{#if notifications && icon instanceof SVGSVGElement}
|
|
102
|
-
<span class="notification-on-text">{notifications}</span>
|
|
103
|
-
{/if}<span bind:this={slotSpan}
|
|
104
|
-
>{#if children}{@render children()}{/if}</span
|
|
105
|
-
>
|
|
106
|
-
</span>
|
|
107
|
-
</button>
|
|
108
|
-
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script lang="ts">
|
|
4
|
+
import { passthrough } from '../../Helpers/Helpers.svelte.js';
|
|
5
|
+
import { ColourSet } from '../../scss/colours.js';
|
|
6
|
+
import { Side } from '../../Types/Internal/Side.js';
|
|
7
|
+
import { Size } from '../../Types/Internal/Size.js';
|
|
8
|
+
import { onMount } from 'svelte';
|
|
9
|
+
import DataMatrixIcon from '../DataMatrixIcon.svelte';
|
|
10
|
+
import Icon from '../Icon.svelte';
|
|
11
|
+
import type { DataMatrixSvg } from '../DataMatrixIconProps.js';
|
|
12
|
+
import type { UtilityButtonProps } from './UtilityButtonProps.js';
|
|
13
|
+
let {
|
|
14
|
+
type = 'button',
|
|
15
|
+
colourSet = ColourSet.Secondary,
|
|
16
|
+
icon,
|
|
17
|
+
side = Side.Top,
|
|
18
|
+
size: explicitSize,
|
|
19
|
+
notifications,
|
|
20
|
+
ref = $bindable(),
|
|
21
|
+
disabled = false,
|
|
22
|
+
label,
|
|
23
|
+
onEditBarcode,
|
|
24
|
+
onclick,
|
|
25
|
+
onfocus,
|
|
26
|
+
onblur,
|
|
27
|
+
children,
|
|
28
|
+
}: UtilityButtonProps = $props();
|
|
29
|
+
|
|
30
|
+
let isMounted = $state(false);
|
|
31
|
+
|
|
32
|
+
onMount(() => {
|
|
33
|
+
isMounted = true;
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
const size: Size = $derived.by(() => {
|
|
37
|
+
if (!isMounted) {
|
|
38
|
+
return Size.DoubleXLarge;
|
|
39
|
+
}
|
|
40
|
+
if (explicitSize !== undefined) {
|
|
41
|
+
return explicitSize;
|
|
42
|
+
}
|
|
43
|
+
if (icon instanceof SVGSVGElement) {
|
|
44
|
+
return Size.DoubleXLarge;
|
|
45
|
+
}
|
|
46
|
+
return icon?.size ?? Size.DoubleXLarge;
|
|
47
|
+
});
|
|
48
|
+
let slotSpan: HTMLSpanElement | undefined = $state();
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<button
|
|
52
|
+
{type}
|
|
53
|
+
class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
|
|
54
|
+
{disabled}
|
|
55
|
+
class:left={side == Side.Left}
|
|
56
|
+
class:right={side == Side.Right}
|
|
57
|
+
class:top={side == Side.Top}
|
|
58
|
+
class:bottom={side == Side.Bottom}
|
|
59
|
+
bind:this={ref}
|
|
60
|
+
aria-label={label}
|
|
61
|
+
{onclick}
|
|
62
|
+
{onfocus}
|
|
63
|
+
{onblur}
|
|
64
|
+
oncontextmenu={(e) => {
|
|
65
|
+
if (onEditBarcode) {
|
|
66
|
+
e.preventDefault();
|
|
67
|
+
onEditBarcode();
|
|
68
|
+
}
|
|
69
|
+
}}
|
|
70
|
+
onkeydown={passthrough}
|
|
71
|
+
>
|
|
72
|
+
{#if isMounted && icon}
|
|
73
|
+
<div
|
|
74
|
+
class="expand"
|
|
75
|
+
class:left={side == Side.Left}
|
|
76
|
+
class:right={side == Side.Right}
|
|
77
|
+
class:top={side == Side.Top}
|
|
78
|
+
class:bottom={side == Side.Bottom}
|
|
79
|
+
>
|
|
80
|
+
{#if icon instanceof SVGSVGElement}
|
|
81
|
+
<!-- SECURITY: UtilityButton accepts a generic SVGSVGElement here for backwards
|
|
82
|
+
compatibility. The cast to DataMatrixSvg trusts the caller; DataMatrixIcon
|
|
83
|
+
additionally sanitises the cloned subtree before mounting. -->
|
|
84
|
+
<DataMatrixIcon
|
|
85
|
+
title={slotSpan?.textContent ?? '{unknown}'}
|
|
86
|
+
icon={{ kind: 'svg', svg: icon as DataMatrixSvg }}
|
|
87
|
+
/>
|
|
88
|
+
{:else}
|
|
89
|
+
{#if notifications}
|
|
90
|
+
<span class="notification">{notifications}</span>
|
|
91
|
+
{/if}
|
|
92
|
+
|
|
93
|
+
<Icon
|
|
94
|
+
{...icon}
|
|
95
|
+
{size}
|
|
96
|
+
/>
|
|
97
|
+
{/if}
|
|
98
|
+
</div>
|
|
99
|
+
{/if}
|
|
100
|
+
<span class="utility-label">
|
|
101
|
+
{#if notifications && icon instanceof SVGSVGElement}
|
|
102
|
+
<span class="notification-on-text">{notifications}</span>
|
|
103
|
+
{/if}<span bind:this={slotSpan}
|
|
104
|
+
>{#if children}{@render children()}{/if}</span
|
|
105
|
+
>
|
|
106
|
+
</span>
|
|
107
|
+
</button>
|
|
108
|
+
|
|
109
109
|
<style>button {
|
|
110
110
|
background-color: #f4f7f9;
|
|
111
111
|
box-sizing: border-box;
|
|
@@ -194,4 +194,4 @@ button:not([disabled]).call-to-action:not([disabled]):focus, button:not([disable
|
|
|
194
194
|
}
|
|
195
195
|
button:not([disabled]).call-to-action:not([disabled]):focus {
|
|
196
196
|
outline-offset: -2px;
|
|
197
|
-
}</style>
|
|
197
|
+
}</style>
|
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
generics="CommonDenominator"
|
|
6
|
-
>
|
|
7
|
-
import { readJSON } from '../Helpers/Storage.js';
|
|
8
|
-
import { onMount, untrack } from 'svelte';
|
|
9
|
-
import VerticalTabGroupButton from './VerticalTabGroupButton.svelte';
|
|
10
|
-
import type { VerticalTabGroupProps } from './VerticalTabGroupProps.js';
|
|
11
|
-
const {
|
|
12
|
-
name,
|
|
13
|
-
tabs,
|
|
14
|
-
selected,
|
|
15
|
-
style,
|
|
16
|
-
noscroll,
|
|
17
|
-
noTabMessage,
|
|
18
|
-
nohistory = false,
|
|
19
|
-
dense = false,
|
|
20
|
-
}: VerticalTabGroupProps<CommonDenominator> = $props();
|
|
21
|
-
|
|
22
|
-
const isNonEmptyString = (raw: unknown): raw is string =>
|
|
23
|
-
typeof raw === 'string' && raw.length > 0;
|
|
24
|
-
|
|
25
|
-
const storageKey = (key: string): string => `scoria-vertical-tab-group:${key}:active-tab`;
|
|
26
|
-
|
|
27
|
-
onMount(() => {
|
|
28
|
-
if (name && !nohistory) {
|
|
29
|
-
const tabName = readJSON(sessionStorage, storageKey(name), isNonEmptyString, '');
|
|
30
|
-
if (tabName) {
|
|
31
|
-
tabs.find((it) => it.label === tabName)?.onclick();
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
$effect(() => {
|
|
37
|
-
if (name && selected) {
|
|
38
|
-
untrack(() => {
|
|
39
|
-
try {
|
|
40
|
-
sessionStorage.setItem(storageKey(name), JSON.stringify(selected.label));
|
|
41
|
-
} catch {
|
|
42
|
-
// storage unavailable (private browsing, quota); persistence is best-effort
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
</script>
|
|
48
|
-
|
|
49
|
-
<div
|
|
50
|
-
class="wrapper"
|
|
51
|
-
class:noscroll
|
|
52
|
-
class:dense
|
|
53
|
-
{style}
|
|
54
|
-
>
|
|
55
|
-
<div class="tabs">
|
|
56
|
-
{#each tabs as option (option.label)}
|
|
57
|
-
<VerticalTabGroupButton
|
|
58
|
-
{option}
|
|
59
|
-
selected={selected?.label === option.label}
|
|
60
|
-
/>
|
|
61
|
-
{/each}
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<div
|
|
65
|
-
class="content"
|
|
66
|
-
class:noscroll
|
|
67
|
-
class:dense
|
|
68
|
-
>
|
|
69
|
-
{#if selected}
|
|
70
|
-
{@render selected.content(selected.args)}
|
|
71
|
-
{:else}
|
|
72
|
-
<div class="wrapper bg">
|
|
73
|
-
<span class="red">{noTabMessage ?? 'No Tab Selected'}</span>
|
|
74
|
-
</div>
|
|
75
|
-
{/if}
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="CommonDenominator"
|
|
6
|
+
>
|
|
7
|
+
import { readJSON } from '../Helpers/Storage.js';
|
|
8
|
+
import { onMount, untrack } from 'svelte';
|
|
9
|
+
import VerticalTabGroupButton from './VerticalTabGroupButton.svelte';
|
|
10
|
+
import type { VerticalTabGroupProps } from './VerticalTabGroupProps.js';
|
|
11
|
+
const {
|
|
12
|
+
name,
|
|
13
|
+
tabs,
|
|
14
|
+
selected,
|
|
15
|
+
style,
|
|
16
|
+
noscroll,
|
|
17
|
+
noTabMessage,
|
|
18
|
+
nohistory = false,
|
|
19
|
+
dense = false,
|
|
20
|
+
}: VerticalTabGroupProps<CommonDenominator> = $props();
|
|
21
|
+
|
|
22
|
+
const isNonEmptyString = (raw: unknown): raw is string =>
|
|
23
|
+
typeof raw === 'string' && raw.length > 0;
|
|
24
|
+
|
|
25
|
+
const storageKey = (key: string): string => `scoria-vertical-tab-group:${key}:active-tab`;
|
|
26
|
+
|
|
27
|
+
onMount(() => {
|
|
28
|
+
if (name && !nohistory) {
|
|
29
|
+
const tabName = readJSON(sessionStorage, storageKey(name), isNonEmptyString, '');
|
|
30
|
+
if (tabName) {
|
|
31
|
+
tabs.find((it) => it.label === tabName)?.onclick();
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
$effect(() => {
|
|
37
|
+
if (name && selected) {
|
|
38
|
+
untrack(() => {
|
|
39
|
+
try {
|
|
40
|
+
sessionStorage.setItem(storageKey(name), JSON.stringify(selected.label));
|
|
41
|
+
} catch {
|
|
42
|
+
// storage unavailable (private browsing, quota); persistence is best-effort
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<div
|
|
50
|
+
class="wrapper"
|
|
51
|
+
class:noscroll
|
|
52
|
+
class:dense
|
|
53
|
+
{style}
|
|
54
|
+
>
|
|
55
|
+
<div class="tabs">
|
|
56
|
+
{#each tabs as option (option.label)}
|
|
57
|
+
<VerticalTabGroupButton
|
|
58
|
+
{option}
|
|
59
|
+
selected={selected?.label === option.label}
|
|
60
|
+
/>
|
|
61
|
+
{/each}
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div
|
|
65
|
+
class="content"
|
|
66
|
+
class:noscroll
|
|
67
|
+
class:dense
|
|
68
|
+
>
|
|
69
|
+
{#if selected}
|
|
70
|
+
{@render selected.content(selected.args)}
|
|
71
|
+
{:else}
|
|
72
|
+
<div class="wrapper bg">
|
|
73
|
+
<span class="red">{noTabMessage ?? 'No Tab Selected'}</span>
|
|
74
|
+
</div>
|
|
75
|
+
{/if}
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
79
|
<style>.bg {
|
|
80
80
|
padding: 1.5rem;
|
|
81
81
|
background-color: #f9e9e9;
|
|
@@ -124,4 +124,4 @@
|
|
|
124
124
|
.wrapper .content.dense {
|
|
125
125
|
flex-grow: 0;
|
|
126
126
|
overflow: visible;
|
|
127
|
-
}</style>
|
|
127
|
+
}</style>
|
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
generics="Args"
|
|
6
|
-
>
|
|
7
|
-
import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
|
|
8
|
-
import { Colour } from '../scss/colours.js';
|
|
9
|
-
import { Size } from '../Types/Internal/Size.js';
|
|
10
|
-
import Icon from './Icon.svelte';
|
|
11
|
-
import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
|
|
12
|
-
|
|
13
|
-
const { option, selected }: TabGroupButtonProps<Args> = $props();
|
|
14
|
-
|
|
15
|
-
const isValid = useAsyncFlag(() => option.isValid, true);
|
|
16
|
-
const disabled = useAsyncFlag(() => option.disabled, false);
|
|
17
|
-
const visible = useAsyncFlag(() => option.visible, true);
|
|
18
|
-
</script>
|
|
19
|
-
|
|
20
|
-
<button
|
|
21
|
-
class:selected
|
|
22
|
-
disabled={disabled.value}
|
|
23
|
-
onclick={() => {
|
|
24
|
-
option.onclick();
|
|
25
|
-
}}
|
|
26
|
-
type="button"
|
|
27
|
-
class="tab"
|
|
28
|
-
class:invalid={!isValid.value}
|
|
29
|
-
class:hidden={!visible.value}
|
|
30
|
-
>
|
|
31
|
-
<div
|
|
32
|
-
class="bordered"
|
|
33
|
-
class:invalid={!isValid.value}
|
|
34
|
-
>
|
|
35
|
-
{#if option.iconLeft}
|
|
36
|
-
<Icon
|
|
37
|
-
{...option.iconLeft}
|
|
38
|
-
colour={Colour['$brand-primary']}
|
|
39
|
-
/>
|
|
40
|
-
{/if}
|
|
41
|
-
{option.label}
|
|
42
|
-
{#if !isValid.value}
|
|
43
|
-
<Icon
|
|
44
|
-
name="error"
|
|
45
|
-
colour={Colour['$error-border']}
|
|
46
|
-
size={Size.Small}
|
|
47
|
-
/>
|
|
48
|
-
{:else if option.iconRight}
|
|
49
|
-
<Icon
|
|
50
|
-
colour={Colour['$brand-primary']}
|
|
51
|
-
size={Size.Small}
|
|
52
|
-
{...option.iconRight}
|
|
53
|
-
/>
|
|
54
|
-
{/if}
|
|
55
|
-
</div>
|
|
56
|
-
</button>
|
|
57
|
-
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="Args"
|
|
6
|
+
>
|
|
7
|
+
import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
|
|
8
|
+
import { Colour } from '../scss/colours.js';
|
|
9
|
+
import { Size } from '../Types/Internal/Size.js';
|
|
10
|
+
import Icon from './Icon.svelte';
|
|
11
|
+
import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
|
|
12
|
+
|
|
13
|
+
const { option, selected }: TabGroupButtonProps<Args> = $props();
|
|
14
|
+
|
|
15
|
+
const isValid = useAsyncFlag(() => option.isValid, true);
|
|
16
|
+
const disabled = useAsyncFlag(() => option.disabled, false);
|
|
17
|
+
const visible = useAsyncFlag(() => option.visible, true);
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<button
|
|
21
|
+
class:selected
|
|
22
|
+
disabled={disabled.value}
|
|
23
|
+
onclick={() => {
|
|
24
|
+
option.onclick();
|
|
25
|
+
}}
|
|
26
|
+
type="button"
|
|
27
|
+
class="tab"
|
|
28
|
+
class:invalid={!isValid.value}
|
|
29
|
+
class:hidden={!visible.value}
|
|
30
|
+
>
|
|
31
|
+
<div
|
|
32
|
+
class="bordered"
|
|
33
|
+
class:invalid={!isValid.value}
|
|
34
|
+
>
|
|
35
|
+
{#if option.iconLeft}
|
|
36
|
+
<Icon
|
|
37
|
+
{...option.iconLeft}
|
|
38
|
+
colour={Colour['$brand-primary']}
|
|
39
|
+
/>
|
|
40
|
+
{/if}
|
|
41
|
+
{option.label}
|
|
42
|
+
{#if !isValid.value}
|
|
43
|
+
<Icon
|
|
44
|
+
name="error"
|
|
45
|
+
colour={Colour['$error-border']}
|
|
46
|
+
size={Size.Small}
|
|
47
|
+
/>
|
|
48
|
+
{:else if option.iconRight}
|
|
49
|
+
<Icon
|
|
50
|
+
colour={Colour['$brand-primary']}
|
|
51
|
+
size={Size.Small}
|
|
52
|
+
{...option.iconRight}
|
|
53
|
+
/>
|
|
54
|
+
{/if}
|
|
55
|
+
</div>
|
|
56
|
+
</button>
|
|
57
|
+
|
|
58
58
|
<style>button.tab.hidden {
|
|
59
59
|
display: none !important;
|
|
60
60
|
}
|
|
@@ -101,4 +101,4 @@
|
|
|
101
101
|
}
|
|
102
102
|
.tab.selected.invalid {
|
|
103
103
|
border-bottom-color: #aa1414;
|
|
104
|
-
}</style>
|
|
104
|
+
}</style>
|
|
@@ -17,10 +17,9 @@ function isWrappedResponse(message) {
|
|
|
17
17
|
typeof message.payload.data == 'string');
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
|
-
* Narrows an object to {@link ToastMessage}: requires
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
* with a `result` property; tightened to actually validate the shape.
|
|
20
|
+
* Narrows an object to {@link ToastMessage}: requires a `result` field
|
|
21
|
+
* that is a recognised {@link Validity} value and a `message` field of
|
|
22
|
+
* type `string`.
|
|
24
23
|
*/
|
|
25
24
|
function isToastMessage(message) {
|
|
26
25
|
if (!('result' in message) || !('message' in message)) {
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import type { DataMatrixSvg } from '../Components/DataMatrixIconProps.js';
|
|
2
|
-
|
|
3
|
-
export interface IDatamatrixOptions {
|
|
4
|
-
msg: string;
|
|
5
|
-
dim?: number;
|
|
6
|
-
rct?: number;
|
|
7
|
-
pad?: number;
|
|
8
|
-
pal?: [string, string];
|
|
9
|
-
vrb?: number;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Build a DATAMatrix barcode SVG. The returned element is branded as
|
|
14
|
-
* {@link DataMatrixSvg} so it can be passed directly to
|
|
15
|
-
* `DataMatrixIcon` without further casting. The underlying JS
|
|
16
|
-
* implementation produces a vanilla `SVGSVGElement`; the brand is a
|
|
17
|
-
* compile-time discipline only.
|
|
18
|
-
*/
|
|
19
|
-
export declare function DATAMatrix(value: IDatamatrixOptions | string): DataMatrixSvg;
|
|
1
|
+
import type { DataMatrixSvg } from '../Components/DataMatrixIconProps.js';
|
|
2
|
+
|
|
3
|
+
export interface IDatamatrixOptions {
|
|
4
|
+
msg: string;
|
|
5
|
+
dim?: number;
|
|
6
|
+
rct?: number;
|
|
7
|
+
pad?: number;
|
|
8
|
+
pal?: [string, string];
|
|
9
|
+
vrb?: number;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Build a DATAMatrix barcode SVG. The returned element is branded as
|
|
14
|
+
* {@link DataMatrixSvg} so it can be passed directly to
|
|
15
|
+
* `DataMatrixIcon` without further casting. The underlying JS
|
|
16
|
+
* implementation produces a vanilla `SVGSVGElement`; the brand is a
|
|
17
|
+
* compile-time discipline only.
|
|
18
|
+
*/
|
|
19
|
+
export declare function DATAMatrix(value: IDatamatrixOptions | string): DataMatrixSvg;
|