@lavalogic/scoria 0.40.1 → 0.40.2
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/AlertModal.svelte +195 -195
- package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +729 -729
- package/dist/Components/Base/BaseModal.svelte +125 -125
- package/dist/Components/Base/ContextWrapper.svelte +72 -72
- package/dist/Components/Base/Pagination.svelte +198 -198
- package/dist/Components/Base/Snippets.svelte +36 -36
- package/dist/Components/BigRadioSet.svelte +38 -38
- package/dist/Components/Bubble.svelte +101 -101
- package/dist/Components/Button.svelte +209 -209
- package/dist/Components/Checkbox.svelte +86 -86
- package/dist/Components/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 +86 -86
- package/dist/Components/Contexts/ToastContainer.svelte +65 -65
- package/dist/Components/Contexts/Tooltip.svelte +37 -37
- package/dist/Components/DataMatrixIcon.svelte +112 -112
- package/dist/Components/DateInput.svelte +148 -148
- package/dist/Components/DatePicker.svelte +300 -300
- package/dist/Components/DesktopModal.svelte +90 -90
- package/dist/Components/Dial.svelte +204 -204
- package/dist/Components/DimensionInput.svelte +170 -170
- package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
- package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
- package/dist/Components/FileCard.svelte +24 -24
- package/dist/Components/FileUpload.svelte +236 -236
- package/dist/Components/GridInput.svelte +196 -196
- package/dist/Components/GridInputSet.svelte +29 -29
- package/dist/Components/HorizontalTabGroup.svelte +82 -82
- package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
- package/dist/Components/Icon.svelte +128 -128
- package/dist/Components/Icons.js +357 -357
- package/dist/Components/InfoAlert.svelte +35 -35
- package/dist/Components/LoadingAnimation.svelte +29 -29
- package/dist/Components/LoadingModal.svelte +45 -45
- package/dist/Components/LoadingOverlay.svelte +25 -25
- package/dist/Components/Modal.svelte +258 -258
- package/dist/Components/MultiSelect.svelte +220 -220
- package/dist/Components/Nav/Nav.svelte +110 -110
- package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
- package/dist/Components/Nav/NavTab.svelte +62 -62
- package/dist/Components/Nav/ServiceMenuItem.svelte +112 -112
- 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 -107
- package/dist/Components/QuerySelect.svelte +366 -366
- package/dist/Components/SingleSelect.svelte +250 -250
- package/dist/Components/StepButton.svelte +70 -70
- package/dist/Components/StepForm.svelte +140 -140
- package/dist/Components/Switch.svelte +69 -69
- package/dist/Components/Table/ARCHITECTURE.md +298 -298
- package/dist/Components/Table/Body/QuickSearchCell.svelte +679 -679
- 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 +454 -454
- package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
- package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -185
- package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
- package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +131 -120
- package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +234 -234
- package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
- package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
- package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
- package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
- package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
- package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
- package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -252
- package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
- package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -221
- 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/ColumnFactory.svelte.js +1 -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 -415
- package/dist/Components/Table/Misc/ColumnPanel.svelte +39 -39
- package/dist/Components/Table/Misc/ColumnPanelModal.svelte +39 -39
- package/dist/Components/Table/Misc/FilterInput.svelte +641 -641
- package/dist/Components/Table/Misc/FilterPanel.svelte +190 -190
- package/dist/Components/Table/Misc/FilterPanelModal.svelte +31 -31
- package/dist/Components/Table/Misc/ShareViewModal.svelte +291 -291
- package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
- package/dist/Components/Table/Misc/TableConfigurationModal.svelte +644 -644
- package/dist/Components/Table/Misc/TableFooter.svelte +340 -340
- package/dist/Components/Table/Misc/TableHorizontalBar.svelte +140 -140
- package/dist/Components/Table/Misc/TableSidebar.svelte +200 -200
- package/dist/Components/Table/Misc/TableViewDropdown.svelte +105 -105
- package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
- package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
- package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +192 -192
- package/dist/Components/Table/NestedTable.svelte +130 -130
- package/dist/Components/Table/Table.svelte +692 -692
- package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts +5 -0
- package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js +3 -0
- package/dist/Components/Table/Types/Public/ColumnOptions.d.ts +10 -0
- 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 +127 -127
- package/dist/Components/Touch/SummaryCard.svelte +93 -93
- package/dist/Components/Touch/TextAreaModal.svelte +95 -95
- package/dist/Components/Touch/TextModal.svelte +106 -106
- package/dist/Components/Touch/TouchCard.svelte +33 -33
- package/dist/Components/Touch/TouchModal.svelte +274 -274
- package/dist/Components/Touch/UtilityButton.svelte +109 -109
- package/dist/Components/VerticalTabGroup.svelte +79 -79
- package/dist/Components/VerticalTabGroupButton.svelte +58 -58
- package/dist/Helpers/Datamatrix.d.ts +19 -19
- package/dist/Helpers/Datamatrix.js +291 -291
- package/dist/Types/Examples/ExampleModal.svelte +35 -35
- package/dist/scss/_basics.scss +12 -12
- package/dist/scss/_colours.scss +134 -134
- package/dist/scss/_mixins.scss +3392 -3392
- 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,102 +1,102 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
generics="T extends object, IdType extends Primitive"
|
|
6
|
-
>
|
|
7
|
-
import Checkbox from '../../Checkbox.svelte';
|
|
8
|
-
import { Size } from '../../../Types/Internal/Size.js';
|
|
9
|
-
import { getContext } from 'svelte';
|
|
10
|
-
import type { Primitive } from '../Types/Context/TableInitOptions.js';
|
|
11
|
-
import { TableContext } from '../Types/Context/TableContext.svelte.js';
|
|
12
|
-
|
|
13
|
-
const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
|
|
14
|
-
|
|
15
|
-
const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
|
|
16
|
-
tableContext.setIsCompact(e.currentTarget.checked);
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
|
|
20
|
-
tableContext.setSingleClickEditing(e.currentTarget.checked);
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const onAlternateRowColoursChange = (
|
|
24
|
-
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
25
|
-
) => {
|
|
26
|
-
tableContext.setAlternateRowColours(e.currentTarget.checked);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
const onChangeColourOnHoverChange = (
|
|
30
|
-
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
31
|
-
) => {
|
|
32
|
-
tableContext.setChangeColourOnHover(e.currentTarget.checked);
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const onCopyWithHeadersChange = (
|
|
36
|
-
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
37
|
-
) => {
|
|
38
|
-
tableContext.setCopyWithHeaders(e.currentTarget.checked);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
const onCommaSeparatedCopyChange = (
|
|
42
|
-
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
43
|
-
) => {
|
|
44
|
-
tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
|
|
45
|
-
};
|
|
46
|
-
</script>
|
|
47
|
-
|
|
48
|
-
<section class="side-panel-section">
|
|
49
|
-
<header class="side-panel-header">
|
|
50
|
-
<h2>Settings</h2>
|
|
51
|
-
</header>
|
|
52
|
-
<div class="side-panel-body">
|
|
53
|
-
<Checkbox
|
|
54
|
-
label="Compact"
|
|
55
|
-
size={Size.MediumSmall}
|
|
56
|
-
id={`is-compact-${tableContext.tableName}`}
|
|
57
|
-
value={tableContext.isCompact}
|
|
58
|
-
onchange={onCompactChange}
|
|
59
|
-
/>
|
|
60
|
-
<Checkbox
|
|
61
|
-
label="Single Click Editing"
|
|
62
|
-
size={Size.MediumSmall}
|
|
63
|
-
id={`single-click-editing-${tableContext.tableName}`}
|
|
64
|
-
value={tableContext.singleClickEditing}
|
|
65
|
-
onchange={onSingleClickChange}
|
|
66
|
-
/>
|
|
67
|
-
<Checkbox
|
|
68
|
-
label="Alternate Row Colours"
|
|
69
|
-
size={Size.MediumSmall}
|
|
70
|
-
id={`alternate-row-colours-${tableContext.tableName}`}
|
|
71
|
-
value={tableContext.alternateRowColours}
|
|
72
|
-
onchange={onAlternateRowColoursChange}
|
|
73
|
-
/>
|
|
74
|
-
<Checkbox
|
|
75
|
-
label="Change Colour on Hover"
|
|
76
|
-
size={Size.MediumSmall}
|
|
77
|
-
id={`change-colour-on-hover-${tableContext.tableName}`}
|
|
78
|
-
value={tableContext.changeColourOnHover}
|
|
79
|
-
onchange={onChangeColourOnHoverChange}
|
|
80
|
-
/>
|
|
81
|
-
{#if tableContext.allowCopy}
|
|
82
|
-
<Checkbox
|
|
83
|
-
label="Include Headers When Copying"
|
|
84
|
-
size={Size.MediumSmall}
|
|
85
|
-
id={`copy-with-headers-${tableContext.tableName}`}
|
|
86
|
-
value={tableContext.copyWithHeaders}
|
|
87
|
-
onchange={onCopyWithHeadersChange}
|
|
88
|
-
/>
|
|
89
|
-
<Checkbox
|
|
90
|
-
label="Copy as Comma Separated Values"
|
|
91
|
-
size={Size.MediumSmall}
|
|
92
|
-
id={`comma-separated-copy-${tableContext.tableName}`}
|
|
93
|
-
value={tableContext.commaSeparatedCopy}
|
|
94
|
-
onchange={onCommaSeparatedCopyChange}
|
|
95
|
-
/>
|
|
96
|
-
{/if}
|
|
97
|
-
</div>
|
|
98
|
-
</section>
|
|
99
|
-
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="T extends object, IdType extends Primitive"
|
|
6
|
+
>
|
|
7
|
+
import Checkbox from '../../Checkbox.svelte';
|
|
8
|
+
import { Size } from '../../../Types/Internal/Size.js';
|
|
9
|
+
import { getContext } from 'svelte';
|
|
10
|
+
import type { Primitive } from '../Types/Context/TableInitOptions.js';
|
|
11
|
+
import { TableContext } from '../Types/Context/TableContext.svelte.js';
|
|
12
|
+
|
|
13
|
+
const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
|
|
14
|
+
|
|
15
|
+
const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
|
|
16
|
+
tableContext.setIsCompact(e.currentTarget.checked);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
|
|
20
|
+
tableContext.setSingleClickEditing(e.currentTarget.checked);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const onAlternateRowColoursChange = (
|
|
24
|
+
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
25
|
+
) => {
|
|
26
|
+
tableContext.setAlternateRowColours(e.currentTarget.checked);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const onChangeColourOnHoverChange = (
|
|
30
|
+
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
31
|
+
) => {
|
|
32
|
+
tableContext.setChangeColourOnHover(e.currentTarget.checked);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const onCopyWithHeadersChange = (
|
|
36
|
+
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
37
|
+
) => {
|
|
38
|
+
tableContext.setCopyWithHeaders(e.currentTarget.checked);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const onCommaSeparatedCopyChange = (
|
|
42
|
+
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
43
|
+
) => {
|
|
44
|
+
tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
|
|
45
|
+
};
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<section class="side-panel-section">
|
|
49
|
+
<header class="side-panel-header">
|
|
50
|
+
<h2>Settings</h2>
|
|
51
|
+
</header>
|
|
52
|
+
<div class="side-panel-body">
|
|
53
|
+
<Checkbox
|
|
54
|
+
label="Compact"
|
|
55
|
+
size={Size.MediumSmall}
|
|
56
|
+
id={`is-compact-${tableContext.tableName}`}
|
|
57
|
+
value={tableContext.isCompact}
|
|
58
|
+
onchange={onCompactChange}
|
|
59
|
+
/>
|
|
60
|
+
<Checkbox
|
|
61
|
+
label="Single Click Editing"
|
|
62
|
+
size={Size.MediumSmall}
|
|
63
|
+
id={`single-click-editing-${tableContext.tableName}`}
|
|
64
|
+
value={tableContext.singleClickEditing}
|
|
65
|
+
onchange={onSingleClickChange}
|
|
66
|
+
/>
|
|
67
|
+
<Checkbox
|
|
68
|
+
label="Alternate Row Colours"
|
|
69
|
+
size={Size.MediumSmall}
|
|
70
|
+
id={`alternate-row-colours-${tableContext.tableName}`}
|
|
71
|
+
value={tableContext.alternateRowColours}
|
|
72
|
+
onchange={onAlternateRowColoursChange}
|
|
73
|
+
/>
|
|
74
|
+
<Checkbox
|
|
75
|
+
label="Change Colour on Hover"
|
|
76
|
+
size={Size.MediumSmall}
|
|
77
|
+
id={`change-colour-on-hover-${tableContext.tableName}`}
|
|
78
|
+
value={tableContext.changeColourOnHover}
|
|
79
|
+
onchange={onChangeColourOnHoverChange}
|
|
80
|
+
/>
|
|
81
|
+
{#if tableContext.allowCopy}
|
|
82
|
+
<Checkbox
|
|
83
|
+
label="Include Headers When Copying"
|
|
84
|
+
size={Size.MediumSmall}
|
|
85
|
+
id={`copy-with-headers-${tableContext.tableName}`}
|
|
86
|
+
value={tableContext.copyWithHeaders}
|
|
87
|
+
onchange={onCopyWithHeadersChange}
|
|
88
|
+
/>
|
|
89
|
+
<Checkbox
|
|
90
|
+
label="Copy as Comma Separated Values"
|
|
91
|
+
size={Size.MediumSmall}
|
|
92
|
+
id={`comma-separated-copy-${tableContext.tableName}`}
|
|
93
|
+
value={tableContext.commaSeparatedCopy}
|
|
94
|
+
onchange={onCommaSeparatedCopyChange}
|
|
95
|
+
/>
|
|
96
|
+
{/if}
|
|
97
|
+
</div>
|
|
98
|
+
</section>
|
|
99
|
+
|
|
100
100
|
<style>.side-panel-section {
|
|
101
101
|
display: flex;
|
|
102
102
|
flex-flow: column nowrap;
|
|
@@ -147,4 +147,4 @@
|
|
|
147
147
|
gap: 0.75rem;
|
|
148
148
|
align-items: center;
|
|
149
149
|
box-sizing: border-box;
|
|
150
|
-
}</style>
|
|
150
|
+
}</style>
|
|
@@ -1,113 +1,113 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<script
|
|
4
|
-
lang="ts"
|
|
5
|
-
generics="T extends object, IdType extends Primitive"
|
|
6
|
-
>
|
|
7
|
-
import Checkbox from '../../Checkbox.svelte';
|
|
8
|
-
import DesktopModal from '../../DesktopModal.svelte';
|
|
9
|
-
import { Size } from '../../../Types/Internal/Size.js';
|
|
10
|
-
import { getContext } from 'svelte';
|
|
11
|
-
import { TableContext } from '../Types/Context/TableContext.svelte.js';
|
|
12
|
-
import type { Primitive } from '../Types/Context/TableInitOptions.js';
|
|
13
|
-
import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
|
|
14
|
-
|
|
15
|
-
let { onclose }: ToolboxPanelModalProps = $props();
|
|
16
|
-
|
|
17
|
-
const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
|
|
18
|
-
|
|
19
|
-
const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
|
|
20
|
-
tableContext.setIsCompact(e.currentTarget.checked);
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
|
|
24
|
-
tableContext.setSingleClickEditing(e.currentTarget.checked);
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const onAlternateRowColoursChange = (
|
|
28
|
-
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
29
|
-
) => {
|
|
30
|
-
tableContext.setAlternateRowColours(e.currentTarget.checked);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const onChangeColourOnHoverChange = (
|
|
34
|
-
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
35
|
-
) => {
|
|
36
|
-
tableContext.setChangeColourOnHover(e.currentTarget.checked);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const onCopyWithHeadersChange = (
|
|
40
|
-
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
41
|
-
) => {
|
|
42
|
-
tableContext.setCopyWithHeaders(e.currentTarget.checked);
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
const onCommaSeparatedCopyChange = (
|
|
46
|
-
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
47
|
-
) => {
|
|
48
|
-
tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
|
|
49
|
-
};
|
|
50
|
-
</script>
|
|
51
|
-
|
|
52
|
-
<DesktopModal
|
|
53
|
-
headerLabel="Table Settings"
|
|
54
|
-
onclose={() => onclose?.()}
|
|
55
|
-
buttons={[{ label: 'Close', callback: () => onclose?.() }]}
|
|
56
|
-
>
|
|
57
|
-
<div class="flex">
|
|
58
|
-
<div class="column-panel">
|
|
59
|
-
<Checkbox
|
|
60
|
-
label="Compact"
|
|
61
|
-
size={Size.MediumSmall}
|
|
62
|
-
id={`is-compact-${tableContext.tableName}-modal`}
|
|
63
|
-
value={tableContext.isCompact}
|
|
64
|
-
onchange={onCompactChange}
|
|
65
|
-
/>
|
|
66
|
-
<Checkbox
|
|
67
|
-
label="Single Click Editing"
|
|
68
|
-
size={Size.MediumSmall}
|
|
69
|
-
id={`single-click-editing-${tableContext.tableName}-modal`}
|
|
70
|
-
value={tableContext.singleClickEditing}
|
|
71
|
-
onchange={onSingleClickChange}
|
|
72
|
-
/>
|
|
73
|
-
<Checkbox
|
|
74
|
-
label="Alternate Row Colours"
|
|
75
|
-
size={Size.MediumSmall}
|
|
76
|
-
id={`alternate-row-colours-${tableContext.tableName}-modal`}
|
|
77
|
-
value={tableContext.alternateRowColours}
|
|
78
|
-
onchange={onAlternateRowColoursChange}
|
|
79
|
-
/>
|
|
80
|
-
<Checkbox
|
|
81
|
-
label="Change Colour on Hover"
|
|
82
|
-
size={Size.MediumSmall}
|
|
83
|
-
id={`change-colour-on-hover-${tableContext.tableName}-modal`}
|
|
84
|
-
value={tableContext.changeColourOnHover}
|
|
85
|
-
onchange={onChangeColourOnHoverChange}
|
|
86
|
-
/>
|
|
87
|
-
{#if tableContext.allowCopy}
|
|
88
|
-
<Checkbox
|
|
89
|
-
label="Include Headers When Copying"
|
|
90
|
-
size={Size.MediumSmall}
|
|
91
|
-
id={`copy-with-headers-${tableContext.tableName}-modal`}
|
|
92
|
-
value={tableContext.copyWithHeaders}
|
|
93
|
-
onchange={onCopyWithHeadersChange}
|
|
94
|
-
/>
|
|
95
|
-
<Checkbox
|
|
96
|
-
label="Copy as Comma Separated Values"
|
|
97
|
-
size={Size.MediumSmall}
|
|
98
|
-
id={`comma-separated-copy-${tableContext.tableName}-modal`}
|
|
99
|
-
value={tableContext.commaSeparatedCopy}
|
|
100
|
-
onchange={onCommaSeparatedCopyChange}
|
|
101
|
-
/>
|
|
102
|
-
{/if}
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
</DesktopModal>
|
|
106
|
-
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="T extends object, IdType extends Primitive"
|
|
6
|
+
>
|
|
7
|
+
import Checkbox from '../../Checkbox.svelte';
|
|
8
|
+
import DesktopModal from '../../DesktopModal.svelte';
|
|
9
|
+
import { Size } from '../../../Types/Internal/Size.js';
|
|
10
|
+
import { getContext } from 'svelte';
|
|
11
|
+
import { TableContext } from '../Types/Context/TableContext.svelte.js';
|
|
12
|
+
import type { Primitive } from '../Types/Context/TableInitOptions.js';
|
|
13
|
+
import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
|
|
14
|
+
|
|
15
|
+
let { onclose }: ToolboxPanelModalProps = $props();
|
|
16
|
+
|
|
17
|
+
const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
|
|
18
|
+
|
|
19
|
+
const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
|
|
20
|
+
tableContext.setIsCompact(e.currentTarget.checked);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
|
|
24
|
+
tableContext.setSingleClickEditing(e.currentTarget.checked);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const onAlternateRowColoursChange = (
|
|
28
|
+
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
29
|
+
) => {
|
|
30
|
+
tableContext.setAlternateRowColours(e.currentTarget.checked);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const onChangeColourOnHoverChange = (
|
|
34
|
+
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
35
|
+
) => {
|
|
36
|
+
tableContext.setChangeColourOnHover(e.currentTarget.checked);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const onCopyWithHeadersChange = (
|
|
40
|
+
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
41
|
+
) => {
|
|
42
|
+
tableContext.setCopyWithHeaders(e.currentTarget.checked);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const onCommaSeparatedCopyChange = (
|
|
46
|
+
e: Event & { currentTarget: EventTarget & HTMLInputElement }
|
|
47
|
+
) => {
|
|
48
|
+
tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<DesktopModal
|
|
53
|
+
headerLabel="Table Settings"
|
|
54
|
+
onclose={() => onclose?.()}
|
|
55
|
+
buttons={[{ label: 'Close', callback: () => onclose?.() }]}
|
|
56
|
+
>
|
|
57
|
+
<div class="flex">
|
|
58
|
+
<div class="column-panel">
|
|
59
|
+
<Checkbox
|
|
60
|
+
label="Compact"
|
|
61
|
+
size={Size.MediumSmall}
|
|
62
|
+
id={`is-compact-${tableContext.tableName}-modal`}
|
|
63
|
+
value={tableContext.isCompact}
|
|
64
|
+
onchange={onCompactChange}
|
|
65
|
+
/>
|
|
66
|
+
<Checkbox
|
|
67
|
+
label="Single Click Editing"
|
|
68
|
+
size={Size.MediumSmall}
|
|
69
|
+
id={`single-click-editing-${tableContext.tableName}-modal`}
|
|
70
|
+
value={tableContext.singleClickEditing}
|
|
71
|
+
onchange={onSingleClickChange}
|
|
72
|
+
/>
|
|
73
|
+
<Checkbox
|
|
74
|
+
label="Alternate Row Colours"
|
|
75
|
+
size={Size.MediumSmall}
|
|
76
|
+
id={`alternate-row-colours-${tableContext.tableName}-modal`}
|
|
77
|
+
value={tableContext.alternateRowColours}
|
|
78
|
+
onchange={onAlternateRowColoursChange}
|
|
79
|
+
/>
|
|
80
|
+
<Checkbox
|
|
81
|
+
label="Change Colour on Hover"
|
|
82
|
+
size={Size.MediumSmall}
|
|
83
|
+
id={`change-colour-on-hover-${tableContext.tableName}-modal`}
|
|
84
|
+
value={tableContext.changeColourOnHover}
|
|
85
|
+
onchange={onChangeColourOnHoverChange}
|
|
86
|
+
/>
|
|
87
|
+
{#if tableContext.allowCopy}
|
|
88
|
+
<Checkbox
|
|
89
|
+
label="Include Headers When Copying"
|
|
90
|
+
size={Size.MediumSmall}
|
|
91
|
+
id={`copy-with-headers-${tableContext.tableName}-modal`}
|
|
92
|
+
value={tableContext.copyWithHeaders}
|
|
93
|
+
onchange={onCopyWithHeadersChange}
|
|
94
|
+
/>
|
|
95
|
+
<Checkbox
|
|
96
|
+
label="Copy as Comma Separated Values"
|
|
97
|
+
size={Size.MediumSmall}
|
|
98
|
+
id={`comma-separated-copy-${tableContext.tableName}-modal`}
|
|
99
|
+
value={tableContext.commaSeparatedCopy}
|
|
100
|
+
onchange={onCommaSeparatedCopyChange}
|
|
101
|
+
/>
|
|
102
|
+
{/if}
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</DesktopModal>
|
|
106
|
+
|
|
107
107
|
<style>.flex {
|
|
108
108
|
display: flex;
|
|
109
109
|
flex-flow: column nowrap;
|
|
110
110
|
height: 100%;
|
|
111
111
|
width: 100%;
|
|
112
112
|
flex: 1;
|
|
113
|
-
}</style>
|
|
113
|
+
}</style>
|