@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.
- package/README.md +58 -58
- package/dist/Components/AccordionGroup.svelte +28 -28
- package/dist/Components/AccordionGroupButton.svelte +60 -60
- package/dist/Components/Action.svelte +48 -48
- package/dist/Components/AlertModal.svelte +102 -102
- package/dist/Components/Base/ContextWrapper.svelte +45 -45
- package/dist/Components/Base/Pagination.svelte +135 -135
- package/dist/Components/Base/Snippets.svelte +25 -25
- package/dist/Components/BigRadioSet.svelte +34 -34
- package/dist/Components/Bubble.svelte +38 -38
- package/dist/Components/Button.svelte +83 -83
- package/dist/Components/Checkbox.svelte +71 -71
- package/dist/Components/CollapsibleCard.svelte +59 -59
- package/dist/Components/CollapsibleMenuGroup.svelte +43 -43
- package/dist/Components/ConditionBuilder/ConditionBuilder.svelte +101 -101
- package/dist/Components/Contexts/ContextMenu.svelte +76 -76
- package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
- package/dist/Components/Contexts/ContextMenuOption.svelte +38 -38
- package/dist/Components/Contexts/Toast.svelte +71 -71
- package/dist/Components/Contexts/ToastContainer.svelte +34 -34
- package/dist/Components/Contexts/Tooltip.svelte +32 -32
- package/dist/Components/DataMatrixIcon.svelte +37 -37
- package/dist/Components/DateInput.svelte +80 -80
- package/dist/Components/DatePicker.svelte +86 -86
- package/dist/Components/DesktopModal.svelte +65 -65
- package/dist/Components/Dial.svelte +35 -35
- package/dist/Components/DimensionInput.svelte +95 -95
- package/dist/Components/DragMenu/DragMenuHolder.svelte +53 -53
- package/dist/Components/DragMenu/DraggableCard.svelte +49 -49
- package/dist/Components/FileCard.svelte +18 -18
- package/dist/Components/FileUpload.svelte +115 -115
- package/dist/Components/GridInput.svelte +123 -123
- package/dist/Components/GridInputSet.svelte +21 -21
- package/dist/Components/HorizontalTabGroup.svelte +54 -54
- package/dist/Components/HorizontalTabGroupButton.svelte +32 -32
- package/dist/Components/Icon.svelte +68 -68
- package/dist/Components/InfoAlert.svelte +32 -32
- package/dist/Components/LoadingAnimation.svelte +228 -227
- package/dist/Components/LoadingModal.svelte +19 -19
- package/dist/Components/LoadingOverlay.svelte +20 -20
- package/dist/Components/Modal.svelte +127 -127
- package/dist/Components/MultiSelect.svelte +126 -126
- package/dist/Components/Nav/Nav.svelte +71 -71
- package/dist/Components/Nav/NavServiceMenuList.svelte +37 -37
- package/dist/Components/Nav/NavTab.svelte +46 -46
- package/dist/Components/Nav/ServiceMenuItem.svelte +62 -62
- package/dist/Components/Nav/ServicesNav.svelte +50 -50
- package/dist/Components/NumberInput.svelte +98 -98
- package/dist/Components/OptionCards.svelte +58 -58
- package/dist/Components/PageHeading.svelte +21 -21
- package/dist/Components/PasswordInput.svelte +61 -61
- package/dist/Components/PopoverButton.svelte +53 -53
- package/dist/Components/Portal.svelte +7 -7
- package/dist/Components/ProgressBubble.svelte +42 -42
- package/dist/Components/QuerySelect.svelte +102 -102
- package/dist/Components/ResourceCalendar/ResourceCalendar.svelte +241 -241
- package/dist/Components/SidebarPanel.svelte +32 -32
- package/dist/Components/SingleSelect.svelte +122 -122
- package/dist/Components/StepButton.svelte +48 -48
- package/dist/Components/StepForm.svelte +58 -58
- package/dist/Components/Switch.svelte +43 -43
- package/dist/Components/Table/ARCHITECTURE.md +298 -298
- package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +30 -30
- package/dist/Components/Table/Body/Rows/ColumnList.svelte +24 -24
- package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +165 -165
- package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +13 -13
- package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +120 -120
- package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +81 -81
- package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +92 -92
- package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +110 -110
- package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +54 -54
- package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +35 -35
- package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +64 -64
- package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +82 -82
- package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +88 -88
- package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +90 -90
- package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +96 -96
- package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +71 -71
- package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +124 -124
- package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +91 -91
- package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +88 -88
- package/dist/Components/Table/Body/Rows/TableRow.svelte +127 -127
- package/dist/Components/Table/Body/TableBody.svelte +92 -92
- package/dist/Components/Table/Headers/HighlightAllHeader.svelte +25 -25
- package/dist/Components/Table/Headers/SelectAllHeader.svelte +20 -20
- package/dist/Components/Table/Headers/TableHead.svelte +175 -175
- package/dist/Components/Table/Misc/ColumnPanel.svelte +32 -32
- package/dist/Components/Table/Misc/ColumnPanelModal.svelte +29 -29
- package/dist/Components/Table/Misc/FilterInput.svelte +326 -326
- package/dist/Components/Table/Misc/FilterPanel.svelte +79 -79
- package/dist/Components/Table/Misc/FilterPanelModal.svelte +21 -21
- package/dist/Components/Table/Misc/ShareViewModal.svelte +118 -118
- package/dist/Components/Table/Misc/SidePanel.svelte +24 -24
- package/dist/Components/Table/Misc/TableConfigurationModal.svelte +318 -318
- package/dist/Components/Table/Misc/TableFooter.svelte +201 -201
- package/dist/Components/Table/Misc/TableHorizontalBar.svelte +112 -112
- package/dist/Components/Table/Misc/TableSidebar.svelte +116 -116
- package/dist/Components/Table/Misc/TableViewDropdown.svelte +25 -25
- package/dist/Components/Table/Misc/ToolboxPanel.svelte +60 -60
- package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +63 -63
- package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +101 -101
- package/dist/Components/Table/NestedTable.svelte +29 -29
- package/dist/Components/Table/Table.svelte +140 -140
- package/dist/Components/Test/TestContextConsumer.svelte +8 -8
- package/dist/Components/TextArea.svelte +92 -90
- package/dist/Components/TextInput.svelte +128 -117
- package/dist/Components/ThreeStateRadio.svelte +101 -101
- package/dist/Components/Touch/BoolCard.svelte +27 -27
- package/dist/Components/Touch/DateModal.svelte +98 -98
- package/dist/Components/Touch/EditCard.svelte +44 -44
- package/dist/Components/Touch/InfoCard.svelte +25 -25
- package/dist/Components/Touch/InfoTextCard.svelte +22 -22
- package/dist/Components/Touch/ModalExplanation.svelte +13 -13
- package/dist/Components/Touch/NumberKeyboard.svelte +81 -81
- package/dist/Components/Touch/NumberModal.svelte +49 -49
- package/dist/Components/Touch/PlusMinusCard.svelte +40 -40
- package/dist/Components/Touch/SelectModal.svelte +86 -86
- package/dist/Components/Touch/SummaryCard.svelte +74 -74
- package/dist/Components/Touch/TextAreaModal.svelte +53 -53
- package/dist/Components/Touch/TextModal.svelte +56 -56
- package/dist/Components/Touch/TouchCard.svelte +28 -28
- package/dist/Components/Touch/TouchModal.svelte +141 -141
- package/dist/Components/Touch/UtilityButton.svelte +63 -63
- package/dist/Components/VerticalTabGroup.svelte +38 -38
- package/dist/Components/VerticalTabGroupButton.svelte +46 -46
- package/dist/Helpers/Datamatrix.d.ts +19 -19
- package/dist/Helpers/Datamatrix.js +291 -291
- package/dist/Types/Examples/ExampleModal.svelte +27 -27
- package/dist/paraglide/README.md +1 -1
- package/dist/scss/_basics.scss +12 -12
- package/dist/scss/_colours.scss +140 -140
- package/dist/scss/_motion.scss +57 -57
- package/dist/scss/_sizing.scss +85 -85
- package/dist/scss/_transitions.scss +8 -8
- package/package.json +1 -1
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<!--
|
|
4
|
-
@component
|
|
5
|
-
Application-level wrapper that mounts the global context hosts and
|
|
6
|
-
instantiates the contexts they depend on. Mount it once near the root
|
|
7
|
-
of a SvelteKit app, in `+layout.svelte` or `+page.svelte`, so that
|
|
8
|
-
every descendant can read the contexts via `getContext`.
|
|
9
|
-
|
|
10
|
-
### Hosts mounted
|
|
11
|
-
|
|
12
|
-
| Host | Driving context | Notes |
|
|
13
|
-
| ---------------- | ---------------------- | -------------------------------------------------- |
|
|
14
|
-
| `ContextMenu` | `ContextMenuContext` | Right-click / programmatic menus. |
|
|
15
|
-
| `Tooltip` | `TooltipContext` | Hover tooltips driven by Button / Action. |
|
|
16
|
-
| `ToastContainer` | `ToastContext` | Queue of toast notifications. |
|
|
17
|
-
| `AlertModal` | `AlertContext` | Mounts only when `alertContext.showModal` is true. |
|
|
18
|
-
|
|
19
|
-
`UntypedInputContext` is registered alongside the visual hosts. The
|
|
20
|
-
wrapper installs a `svelte:window onkeydown` listener that forwards
|
|
21
|
-
key events to `untypedListenerContext.handleGlobalKeydown` so barcode
|
|
22
|
-
scanners and similar untyped input sources reach the context queue.
|
|
23
|
-
|
|
24
|
-
### Usage
|
|
25
|
-
|
|
26
|
-
```svelte
|
|
27
|
-
<script lang="ts">
|
|
28
|
-
import { ContextWrapper } from '@lavalogic/scoria';
|
|
29
|
-
</script>
|
|
30
|
-
|
|
31
|
-
<ContextWrapper>
|
|
32
|
-
{@render children()}
|
|
33
|
-
</ContextWrapper>
|
|
34
|
-
```
|
|
35
|
-
-->
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<!--
|
|
4
|
+
@component
|
|
5
|
+
Application-level wrapper that mounts the global context hosts and
|
|
6
|
+
instantiates the contexts they depend on. Mount it once near the root
|
|
7
|
+
of a SvelteKit app, in `+layout.svelte` or `+page.svelte`, so that
|
|
8
|
+
every descendant can read the contexts via `getContext`.
|
|
9
|
+
|
|
10
|
+
### Hosts mounted
|
|
11
|
+
|
|
12
|
+
| Host | Driving context | Notes |
|
|
13
|
+
| ---------------- | ---------------------- | -------------------------------------------------- |
|
|
14
|
+
| `ContextMenu` | `ContextMenuContext` | Right-click / programmatic menus. |
|
|
15
|
+
| `Tooltip` | `TooltipContext` | Hover tooltips driven by Button / Action. |
|
|
16
|
+
| `ToastContainer` | `ToastContext` | Queue of toast notifications. |
|
|
17
|
+
| `AlertModal` | `AlertContext` | Mounts only when `alertContext.showModal` is true. |
|
|
18
|
+
|
|
19
|
+
`UntypedInputContext` is registered alongside the visual hosts. The
|
|
20
|
+
wrapper installs a `svelte:window onkeydown` listener that forwards
|
|
21
|
+
key events to `untypedListenerContext.handleGlobalKeydown` so barcode
|
|
22
|
+
scanners and similar untyped input sources reach the context queue.
|
|
23
|
+
|
|
24
|
+
### Usage
|
|
25
|
+
|
|
26
|
+
```svelte
|
|
27
|
+
<script lang="ts">
|
|
28
|
+
import { ContextWrapper } from '@lavalogic/scoria';
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<ContextWrapper>
|
|
32
|
+
{@render children()}
|
|
33
|
+
</ContextWrapper>
|
|
34
|
+
```
|
|
35
|
+
-->
|
|
36
36
|
<script lang="ts">import { AlertContext } from "../../Contexts/AlertContext.svelte.js";
|
|
37
37
|
import { ContextMenuContext } from "../../Contexts/ContextMenuContext.svelte.js";
|
|
38
38
|
import { ToastContext } from "../../Contexts/ToastContext.svelte.js";
|
|
@@ -55,13 +55,13 @@ setContext(AlertContext.identifier, alertContext);
|
|
|
55
55
|
// svelte-ignore state_referenced_locally
|
|
56
56
|
const untypedListenerContext = new UntypedInputContext(debug);
|
|
57
57
|
setContext(UntypedInputContext.identifier, untypedListenerContext);
|
|
58
|
-
</script>
|
|
59
|
-
|
|
60
|
-
<ContextMenu />
|
|
61
|
-
<Tooltip />
|
|
62
|
-
<ToastContainer />
|
|
63
|
-
{#if alertContext.showModal}
|
|
64
|
-
<AlertModal />
|
|
65
|
-
{/if}
|
|
66
|
-
<svelte:window onkeydown={untypedListenerContext.handleGlobalKeydown} />
|
|
67
|
-
{@render children()}
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<ContextMenu />
|
|
61
|
+
<Tooltip />
|
|
62
|
+
<ToastContainer />
|
|
63
|
+
{#if alertContext.showModal}
|
|
64
|
+
<AlertModal />
|
|
65
|
+
{/if}
|
|
66
|
+
<svelte:window onkeydown={untypedListenerContext.handleGlobalKeydown} />
|
|
67
|
+
{@render children()}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<!--
|
|
4
|
-
@component
|
|
5
|
-
Generic local-collection paginator. Renders a window of items via a
|
|
6
|
-
`snippet` plus a control bar with page-number buttons, a jump-to-page
|
|
7
|
-
input, and previous/next buttons. The component is generic over
|
|
8
|
-
`T extends object` with a `key: keyof T` used as the
|
|
9
|
-
`{#each}` key inside the rendered page.
|
|
10
|
-
|
|
11
|
-
### Usage
|
|
12
|
-
|
|
13
|
-
```svelte
|
|
14
|
-
<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
The `pageButtons` window (up to five numbered buttons) is recomputed
|
|
18
|
-
via `$derived`, not via an `$effect`, so the page bar diffs in a
|
|
19
|
-
single reactive pass and the keyed `{#each pageButtons as page ...}`
|
|
20
|
-
preserves button identity across page changes.
|
|
21
|
-
-->
|
|
22
|
-
<script
|
|
23
|
-
lang="ts"
|
|
24
|
-
generics="T extends object"
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<!--
|
|
4
|
+
@component
|
|
5
|
+
Generic local-collection paginator. Renders a window of items via a
|
|
6
|
+
`snippet` plus a control bar with page-number buttons, a jump-to-page
|
|
7
|
+
input, and previous/next buttons. The component is generic over
|
|
8
|
+
`T extends object` with a `key: keyof T` used as the
|
|
9
|
+
`{#each}` key inside the rendered page.
|
|
10
|
+
|
|
11
|
+
### Usage
|
|
12
|
+
|
|
13
|
+
```svelte
|
|
14
|
+
<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The `pageButtons` window (up to five numbered buttons) is recomputed
|
|
18
|
+
via `$derived`, not via an `$effect`, so the page bar diffs in a
|
|
19
|
+
single reactive pass and the keyed `{#each pageButtons as page ...}`
|
|
20
|
+
preserves button identity across page changes.
|
|
21
|
+
-->
|
|
22
|
+
<script
|
|
23
|
+
lang="ts"
|
|
24
|
+
generics="T extends object"
|
|
25
25
|
>import { m as i18n } from "../../paraglide/messages.js";
|
|
26
26
|
import { autoPluralise, generateWeakId } from "../../Helpers/Helpers.svelte.js";
|
|
27
27
|
import { Colour } from "../../scss/colours.js";
|
|
@@ -70,116 +70,116 @@ function getPageWindow(currentIndex, totalPages, windowSize) {
|
|
|
70
70
|
return out;
|
|
71
71
|
}
|
|
72
72
|
const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
|
|
73
|
-
</script>
|
|
74
|
-
|
|
75
|
-
<div
|
|
76
|
-
class="wrapper"
|
|
77
|
-
class:border
|
|
78
|
-
style:padding
|
|
79
|
-
style:gap
|
|
80
|
-
style:height
|
|
81
|
-
>
|
|
82
|
-
{#each pageItems as item, index (item[key])}
|
|
83
|
-
{@render snippet(item, index)}
|
|
84
|
-
{/each}
|
|
85
|
-
<div class="spread_row bottom_row">
|
|
86
|
-
<div class="block">
|
|
87
|
-
<span
|
|
88
|
-
>{countLabel
|
|
89
|
-
? countLabel(items.length)
|
|
90
|
-
: i18n['scoria.text.item_count']({
|
|
91
|
-
count: items.length,
|
|
92
|
-
noun: autoPluralise(itemName, items.length),
|
|
93
|
-
})}</span
|
|
94
|
-
>
|
|
95
|
-
</div>
|
|
96
|
-
|
|
97
|
-
<div class="block records-per-page">
|
|
98
|
-
<span>{i18n['scoria.label.records_per_page']()} {pageSize}</span>
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
<div class="spacer"></div>
|
|
102
|
-
|
|
103
|
-
<div
|
|
104
|
-
class="scrollable"
|
|
105
|
-
role="navigation"
|
|
106
|
-
aria-label={i18n['scoria.label.pagination']()}
|
|
107
|
-
>
|
|
108
|
-
<div class="block">
|
|
109
|
-
<Icon
|
|
110
|
-
name="paper"
|
|
111
|
-
colour={Colour['$ui-blue-6']}
|
|
112
|
-
/>
|
|
113
|
-
<span>{i18n['scoria.text.page_count']({ count: lastPage })}</span>
|
|
114
|
-
</div>
|
|
115
|
-
|
|
116
|
-
<div class="block">
|
|
117
|
-
<label for="{_uuid}-jump-to-page"
|
|
118
|
-
><Icon
|
|
119
|
-
name="arrow-move-horizontal"
|
|
120
|
-
colour={Colour['$ui-blue-6']}
|
|
121
|
-
/></label
|
|
122
|
-
>
|
|
123
|
-
|
|
124
|
-
<label for="{_uuid}-jump-to-page">{i18n['scoria.label.jump_to_page']()}</label>
|
|
125
|
-
|
|
126
|
-
<NumberInput
|
|
127
|
-
id="{_uuid}-jump-to-page"
|
|
128
|
-
value={pageValue}
|
|
129
|
-
oninput={onNumberInput}
|
|
130
|
-
/>
|
|
131
|
-
</div>
|
|
132
|
-
|
|
133
|
-
<div class="block nopad page-arrow">
|
|
134
|
-
<Button
|
|
135
|
-
variant={Variant.Toolbar}
|
|
136
|
-
disabled={pageIndex === 0}
|
|
137
|
-
side={Side.Bottom}
|
|
138
|
-
onclick={() => {
|
|
139
|
-
pageIndex = Math.max(pageIndex - 1, 0);
|
|
140
|
-
}}
|
|
141
|
-
size={Size.FillHeight}
|
|
142
|
-
iconLeft={{
|
|
143
|
-
name: 'left-close',
|
|
144
|
-
size: Size.FillHeight,
|
|
145
|
-
}}>{i18n['scoria.action.previous_page']()}</Button
|
|
146
|
-
>
|
|
147
|
-
</div>
|
|
148
|
-
|
|
149
|
-
{#each pageButtons as pageNumber (pageNumber)}
|
|
150
|
-
<div class="block nopad">
|
|
151
|
-
<Button
|
|
152
|
-
variant={Variant.Toolbar}
|
|
153
|
-
side={Side.Bottom}
|
|
154
|
-
size={Size.FillHeight}
|
|
155
|
-
toggled={pageIndex + 1 === pageNumber}
|
|
156
|
-
label={i18n['scoria.action.go_to_page']({ number: pageNumber })}
|
|
157
|
-
onclick={() => {
|
|
158
|
-
pageIndex = pageNumber - 1;
|
|
159
|
-
}}>{pageNumber}</Button
|
|
160
|
-
>
|
|
161
|
-
</div>
|
|
162
|
-
{/each}
|
|
163
|
-
|
|
164
|
-
<div class="block nopad page-arrow">
|
|
165
|
-
<Button
|
|
166
|
-
variant={Variant.Toolbar}
|
|
167
|
-
side={Side.Bottom}
|
|
168
|
-
size={Size.FillHeight}
|
|
169
|
-
onclick={() => {
|
|
170
|
-
pageIndex = Math.min(pageIndex + 1, lastPageIndex);
|
|
171
|
-
}}
|
|
172
|
-
disabled={pageIndex == lastPageIndex}
|
|
173
|
-
iconRight={{
|
|
174
|
-
name: 'right-close',
|
|
175
|
-
size: Size.FillHeight,
|
|
176
|
-
}}>{i18n['scoria.action.next_page']()}</Button
|
|
177
|
-
>
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
180
|
-
</div>
|
|
181
|
-
</div>
|
|
182
|
-
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<div
|
|
76
|
+
class="wrapper"
|
|
77
|
+
class:border
|
|
78
|
+
style:padding
|
|
79
|
+
style:gap
|
|
80
|
+
style:height
|
|
81
|
+
>
|
|
82
|
+
{#each pageItems as item, index (item[key])}
|
|
83
|
+
{@render snippet(item, index)}
|
|
84
|
+
{/each}
|
|
85
|
+
<div class="spread_row bottom_row">
|
|
86
|
+
<div class="block">
|
|
87
|
+
<span
|
|
88
|
+
>{countLabel
|
|
89
|
+
? countLabel(items.length)
|
|
90
|
+
: i18n['scoria.text.item_count']({
|
|
91
|
+
count: items.length,
|
|
92
|
+
noun: autoPluralise(itemName, items.length),
|
|
93
|
+
})}</span
|
|
94
|
+
>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div class="block records-per-page">
|
|
98
|
+
<span>{i18n['scoria.label.records_per_page']()} {pageSize}</span>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div class="spacer"></div>
|
|
102
|
+
|
|
103
|
+
<div
|
|
104
|
+
class="scrollable"
|
|
105
|
+
role="navigation"
|
|
106
|
+
aria-label={i18n['scoria.label.pagination']()}
|
|
107
|
+
>
|
|
108
|
+
<div class="block">
|
|
109
|
+
<Icon
|
|
110
|
+
name="paper"
|
|
111
|
+
colour={Colour['$ui-blue-6']}
|
|
112
|
+
/>
|
|
113
|
+
<span>{i18n['scoria.text.page_count']({ count: lastPage })}</span>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="block">
|
|
117
|
+
<label for="{_uuid}-jump-to-page"
|
|
118
|
+
><Icon
|
|
119
|
+
name="arrow-move-horizontal"
|
|
120
|
+
colour={Colour['$ui-blue-6']}
|
|
121
|
+
/></label
|
|
122
|
+
>
|
|
123
|
+
|
|
124
|
+
<label for="{_uuid}-jump-to-page">{i18n['scoria.label.jump_to_page']()}</label>
|
|
125
|
+
|
|
126
|
+
<NumberInput
|
|
127
|
+
id="{_uuid}-jump-to-page"
|
|
128
|
+
value={pageValue}
|
|
129
|
+
oninput={onNumberInput}
|
|
130
|
+
/>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="block nopad page-arrow">
|
|
134
|
+
<Button
|
|
135
|
+
variant={Variant.Toolbar}
|
|
136
|
+
disabled={pageIndex === 0}
|
|
137
|
+
side={Side.Bottom}
|
|
138
|
+
onclick={() => {
|
|
139
|
+
pageIndex = Math.max(pageIndex - 1, 0);
|
|
140
|
+
}}
|
|
141
|
+
size={Size.FillHeight}
|
|
142
|
+
iconLeft={{
|
|
143
|
+
name: 'left-close',
|
|
144
|
+
size: Size.FillHeight,
|
|
145
|
+
}}>{i18n['scoria.action.previous_page']()}</Button
|
|
146
|
+
>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
{#each pageButtons as pageNumber (pageNumber)}
|
|
150
|
+
<div class="block nopad">
|
|
151
|
+
<Button
|
|
152
|
+
variant={Variant.Toolbar}
|
|
153
|
+
side={Side.Bottom}
|
|
154
|
+
size={Size.FillHeight}
|
|
155
|
+
toggled={pageIndex + 1 === pageNumber}
|
|
156
|
+
label={i18n['scoria.action.go_to_page']({ number: pageNumber })}
|
|
157
|
+
onclick={() => {
|
|
158
|
+
pageIndex = pageNumber - 1;
|
|
159
|
+
}}>{pageNumber}</Button
|
|
160
|
+
>
|
|
161
|
+
</div>
|
|
162
|
+
{/each}
|
|
163
|
+
|
|
164
|
+
<div class="block nopad page-arrow">
|
|
165
|
+
<Button
|
|
166
|
+
variant={Variant.Toolbar}
|
|
167
|
+
side={Side.Bottom}
|
|
168
|
+
size={Size.FillHeight}
|
|
169
|
+
onclick={() => {
|
|
170
|
+
pageIndex = Math.min(pageIndex + 1, lastPageIndex);
|
|
171
|
+
}}
|
|
172
|
+
disabled={pageIndex == lastPageIndex}
|
|
173
|
+
iconRight={{
|
|
174
|
+
name: 'right-close',
|
|
175
|
+
size: Size.FillHeight,
|
|
176
|
+
}}>{i18n['scoria.action.next_page']()}</Button
|
|
177
|
+
>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
183
|
<style>.wrapper {
|
|
184
184
|
display: flex;
|
|
185
185
|
flex: 1;
|
|
@@ -254,4 +254,4 @@ const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
|
|
|
254
254
|
}
|
|
255
255
|
.spread_row .spacer {
|
|
256
256
|
flex-grow: 2;
|
|
257
|
-
}</style>
|
|
257
|
+
}</style>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<!-- @component
|
|
4
|
-
An empty component that only exists to export common snippets
|
|
5
|
-
(`pending` and `failed`) for re-use by `{#await}` blocks and other
|
|
6
|
-
async-status surfaces. The component itself renders nothing.
|
|
7
|
-
-->
|
|
8
|
-
<script
|
|
9
|
-
lang="ts"
|
|
10
|
-
module
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<!-- @component
|
|
4
|
+
An empty component that only exists to export common snippets
|
|
5
|
+
(`pending` and `failed`) for re-use by `{#await}` blocks and other
|
|
6
|
+
async-status surfaces. The component itself renders nothing.
|
|
7
|
+
-->
|
|
8
|
+
<script
|
|
9
|
+
lang="ts"
|
|
10
|
+
module
|
|
11
11
|
>import { getErrorMessage, loadingText } from "../../Helpers/Helpers.svelte.js";
|
|
12
12
|
import Button from "../Button.svelte";
|
|
13
13
|
import { m as i18n } from "../../paraglide/messages.js";
|
|
@@ -18,18 +18,18 @@ import { m as i18n } from "../../paraglide/messages.js";
|
|
|
18
18
|
// declaration and expose the un-prefixed name as the public surface.
|
|
19
19
|
export const pending = _pending;
|
|
20
20
|
export const failed = _failed;
|
|
21
|
-
</script>
|
|
22
|
-
|
|
23
|
-
{#snippet _pending()}
|
|
24
|
-
{loadingText()}
|
|
25
|
-
{/snippet}
|
|
26
|
-
{#snippet _failed(e: unknown, retry?: () => void)}
|
|
27
|
-
{i18n['scoria.text.error_prefix']({ message: getErrorMessage(e) })}
|
|
28
|
-
{#if retry}
|
|
29
|
-
<Button
|
|
30
|
-
onclick={() => {
|
|
31
|
-
retry();
|
|
32
|
-
}}>{i18n['scoria.action.retry_load']()}</Button
|
|
33
|
-
>
|
|
34
|
-
{/if}
|
|
35
|
-
{/snippet}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
{#snippet _pending()}
|
|
24
|
+
{loadingText()}
|
|
25
|
+
{/snippet}
|
|
26
|
+
{#snippet _failed(e: unknown, retry?: () => void)}
|
|
27
|
+
{i18n['scoria.text.error_prefix']({ message: getErrorMessage(e) })}
|
|
28
|
+
{#if retry}
|
|
29
|
+
<Button
|
|
30
|
+
onclick={() => {
|
|
31
|
+
retry();
|
|
32
|
+
}}>{i18n['scoria.action.retry_load']()}</Button
|
|
33
|
+
>
|
|
34
|
+
{/if}
|
|
35
|
+
{/snippet}
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
generics="T"
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="T"
|
|
6
6
|
>let { name, options, selected = $bindable(), onchange } = $props();
|
|
7
7
|
export {};
|
|
8
|
-
</script>
|
|
9
|
-
|
|
10
|
-
<div
|
|
11
|
-
class="wrapper"
|
|
12
|
-
role="radiogroup"
|
|
13
|
-
>
|
|
14
|
-
{#each options as option (option.value)}
|
|
15
|
-
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
16
|
-
{@render radio(option)}
|
|
17
|
-
{/each}
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
{#snippet radio(option: BigRadioOption<T>)}
|
|
21
|
-
<label class:selected={selected === option.value}>
|
|
22
|
-
<input
|
|
23
|
-
type="radio"
|
|
24
|
-
{name}
|
|
25
|
-
bind:group={selected}
|
|
26
|
-
value={option.value}
|
|
27
|
-
onchange={() => void onchange?.(option.value)}
|
|
28
|
-
/>
|
|
29
|
-
<div class="text">
|
|
30
|
-
<h5 class="title">{option.label}</h5>
|
|
31
|
-
<p class="note">{option.info}</p>
|
|
32
|
-
</div>
|
|
33
|
-
</label>
|
|
34
|
-
{/snippet}
|
|
35
|
-
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<div
|
|
11
|
+
class="wrapper"
|
|
12
|
+
role="radiogroup"
|
|
13
|
+
>
|
|
14
|
+
{#each options as option (option.value)}
|
|
15
|
+
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
16
|
+
{@render radio(option)}
|
|
17
|
+
{/each}
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
{#snippet radio(option: BigRadioOption<T>)}
|
|
21
|
+
<label class:selected={selected === option.value}>
|
|
22
|
+
<input
|
|
23
|
+
type="radio"
|
|
24
|
+
{name}
|
|
25
|
+
bind:group={selected}
|
|
26
|
+
value={option.value}
|
|
27
|
+
onchange={() => void onchange?.(option.value)}
|
|
28
|
+
/>
|
|
29
|
+
<div class="text">
|
|
30
|
+
<h5 class="title">{option.label}</h5>
|
|
31
|
+
<p class="note">{option.info}</p>
|
|
32
|
+
</div>
|
|
33
|
+
</label>
|
|
34
|
+
{/snippet}
|
|
35
|
+
|
|
36
36
|
<style>.wrapper {
|
|
37
37
|
display: flex;
|
|
38
38
|
flex-flow: row wrap;
|
|
@@ -85,4 +85,4 @@ label.selected {
|
|
|
85
85
|
}
|
|
86
86
|
label.selected h5 {
|
|
87
87
|
color: #ffffff;
|
|
88
|
-
}</style>
|
|
88
|
+
}</style>
|
|
@@ -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 { Size } from "../Types/Internal/Size.js";
|
|
7
7
|
import Icon from "./Icon.svelte";
|
|
8
8
|
// Per-size padding/typography. Only `Size.Large` has explicit overrides;
|
|
@@ -18,11 +18,11 @@ const DEFAULT_VERTICAL = "0.18rem";
|
|
|
18
18
|
const DEFAULT_HORIZONTAL_WITH_VALUE = "0.5rem";
|
|
19
19
|
const DEFAULT_HORIZONTAL_WITHOUT_VALUE = "0.75rem";
|
|
20
20
|
const DEFAULT_FONT_SIZE = "1rem";
|
|
21
|
-
</script>
|
|
22
|
-
|
|
23
|
-
<script
|
|
24
|
-
lang="ts"
|
|
25
|
-
generics="T = unknown"
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<script
|
|
24
|
+
lang="ts"
|
|
25
|
+
generics="T = unknown"
|
|
26
26
|
>// `BubbleProps<T>` is intentionally annotated with `<T>` even though
|
|
27
27
|
// the interface declares `T = unknown` as a default; the explicit
|
|
28
28
|
// substitution flows the generic from `<Bubble<MyType> ...>` consumers
|
|
@@ -48,33 +48,33 @@ const wrapperStyle = $derived.by(() => {
|
|
|
48
48
|
const radiusPart = isLarge ? `border-radius: ${LARGE_BORDER_RADIUS};` : "";
|
|
49
49
|
return `${colourPart} padding: var(--bubble-padding, ${verticalPadding} ${horizontalPadding}); font-size: ${fontSize}; ${radiusPart}`;
|
|
50
50
|
});
|
|
51
|
-
</script>
|
|
52
|
-
|
|
53
|
-
{#if onclick}
|
|
54
|
-
<button
|
|
55
|
-
class="contents"
|
|
56
|
-
{onclick}
|
|
57
|
-
>
|
|
58
|
-
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
59
|
-
{@render bubble()}
|
|
60
|
-
</button>
|
|
61
|
-
{:else}
|
|
62
|
-
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
63
|
-
{@render bubble()}
|
|
64
|
-
{/if}
|
|
65
|
-
|
|
66
|
-
{#snippet bubble()}
|
|
67
|
-
<span
|
|
68
|
-
class="bubble"
|
|
69
|
-
class:bold
|
|
70
|
-
class:hoverable={!!onclick}
|
|
71
|
-
style={wrapperStyle}
|
|
72
|
-
>{#if label}{label}: {/if}{displayLabel}{#if icon}<div class="icon">
|
|
73
|
-
<Icon {...icon} />
|
|
74
|
-
</div>{/if}</span
|
|
75
|
-
>
|
|
76
|
-
{/snippet}
|
|
77
|
-
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
{#if onclick}
|
|
54
|
+
<button
|
|
55
|
+
class="contents"
|
|
56
|
+
{onclick}
|
|
57
|
+
>
|
|
58
|
+
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
59
|
+
{@render bubble()}
|
|
60
|
+
</button>
|
|
61
|
+
{:else}
|
|
62
|
+
<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
|
|
63
|
+
{@render bubble()}
|
|
64
|
+
{/if}
|
|
65
|
+
|
|
66
|
+
{#snippet bubble()}
|
|
67
|
+
<span
|
|
68
|
+
class="bubble"
|
|
69
|
+
class:bold
|
|
70
|
+
class:hoverable={!!onclick}
|
|
71
|
+
style={wrapperStyle}
|
|
72
|
+
>{#if label}{label}: {/if}{displayLabel}{#if icon}<div class="icon">
|
|
73
|
+
<Icon {...icon} />
|
|
74
|
+
</div>{/if}</span
|
|
75
|
+
>
|
|
76
|
+
{/snippet}
|
|
77
|
+
|
|
78
78
|
<style>button.contents {
|
|
79
79
|
display: contents;
|
|
80
80
|
cursor: pointer;
|
|
@@ -105,4 +105,4 @@ const wrapperStyle = $derived.by(() => {
|
|
|
105
105
|
}
|
|
106
106
|
.bubble.bold {
|
|
107
107
|
font-weight: 700;
|
|
108
|
-
}</style>
|
|
108
|
+
}</style>
|