@lavalogic/scoria 0.39.2 → 0.40.0

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 (141) hide show
  1. package/README.md +58 -58
  2. package/dist/Components/AccordionGroup.svelte +46 -46
  3. package/dist/Components/AccordionGroupButton.svelte +76 -76
  4. package/dist/Components/Action.svelte +136 -136
  5. package/dist/Components/AlertModal.svelte +195 -195
  6. package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +729 -729
  7. package/dist/Components/Base/BaseModal.svelte +125 -125
  8. package/dist/Components/Base/ContextWrapper.svelte +72 -72
  9. package/dist/Components/Base/Pagination.svelte +198 -198
  10. package/dist/Components/Base/Snippets.svelte +36 -36
  11. package/dist/Components/BigRadioSet.svelte +38 -38
  12. package/dist/Components/Bubble.svelte +101 -101
  13. package/dist/Components/Button.svelte +209 -209
  14. package/dist/Components/Checkbox.svelte +86 -86
  15. package/dist/Components/CollapsibleCard.svelte +78 -78
  16. package/dist/Components/ConditionBuilder/ConditionBuilder.svelte +212 -0
  17. package/dist/Components/ConditionBuilder/ConditionBuilder.svelte.d.ts +25 -0
  18. package/dist/Components/ConditionBuilder/ConditionBuilderProps.d.ts +45 -0
  19. package/dist/Components/ConditionBuilder/ConditionBuilderProps.js +1 -0
  20. package/dist/Components/ConditionBuilder/ConditionTree.d.ts +27 -0
  21. package/dist/Components/ConditionBuilder/ConditionTree.js +9 -0
  22. package/dist/Components/Contexts/ContextMenu.svelte +164 -164
  23. package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
  24. package/dist/Components/Contexts/ContextMenuOption.svelte +60 -60
  25. package/dist/Components/Contexts/Toast.svelte +86 -86
  26. package/dist/Components/Contexts/ToastContainer.svelte +65 -65
  27. package/dist/Components/Contexts/Tooltip.svelte +37 -37
  28. package/dist/Components/DataMatrixIcon.svelte +112 -112
  29. package/dist/Components/DateInput.svelte +148 -148
  30. package/dist/Components/DatePicker.svelte +300 -300
  31. package/dist/Components/DesktopModal.svelte +90 -90
  32. package/dist/Components/Dial.svelte +204 -204
  33. package/dist/Components/DimensionInput.svelte +170 -170
  34. package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
  35. package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
  36. package/dist/Components/FileCard.svelte +24 -24
  37. package/dist/Components/FileUpload.svelte +236 -236
  38. package/dist/Components/GridInput.svelte +196 -196
  39. package/dist/Components/GridInputSet.svelte +29 -29
  40. package/dist/Components/HorizontalTabGroup.svelte +82 -82
  41. package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
  42. package/dist/Components/Icon.svelte +128 -128
  43. package/dist/Components/Icons.js +357 -357
  44. package/dist/Components/InfoAlert.svelte +35 -35
  45. package/dist/Components/LoadingAnimation.svelte +29 -29
  46. package/dist/Components/LoadingModal.svelte +45 -45
  47. package/dist/Components/LoadingOverlay.svelte +25 -25
  48. package/dist/Components/Modal.svelte +258 -258
  49. package/dist/Components/MultiSelect.svelte +220 -220
  50. package/dist/Components/Nav/Nav.svelte +110 -110
  51. package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
  52. package/dist/Components/Nav/NavTab.svelte +62 -62
  53. package/dist/Components/Nav/ServiceMenuItem.svelte +112 -112
  54. package/dist/Components/Nav/ServicesNav.svelte +80 -80
  55. package/dist/Components/NumberInput.svelte +157 -157
  56. package/dist/Components/PageHeading.svelte +25 -25
  57. package/dist/Components/PasswordInput.svelte +88 -88
  58. package/dist/Components/Portal.svelte +36 -36
  59. package/dist/Components/ProgressBubble.svelte +107 -107
  60. package/dist/Components/QuerySelect.svelte +366 -366
  61. package/dist/Components/SingleSelect.svelte +250 -250
  62. package/dist/Components/StepButton.svelte +70 -70
  63. package/dist/Components/StepForm.svelte +140 -140
  64. package/dist/Components/Switch.svelte +69 -69
  65. package/dist/Components/Table/ARCHITECTURE.md +298 -298
  66. package/dist/Components/Table/Body/QuickSearchCell.svelte +679 -679
  67. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
  68. package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
  69. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +454 -454
  70. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
  71. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -185
  72. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
  73. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
  74. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +234 -234
  75. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
  76. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
  77. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
  78. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
  79. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
  80. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
  81. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -252
  82. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
  83. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -221
  84. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
  85. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
  86. package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
  87. package/dist/Components/Table/Body/TableBody.svelte +155 -155
  88. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
  89. package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
  90. package/dist/Components/Table/Headers/TableHead.svelte +415 -415
  91. package/dist/Components/Table/Misc/ColumnPanel.svelte +39 -39
  92. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +39 -39
  93. package/dist/Components/Table/Misc/FilterInput.svelte +641 -641
  94. package/dist/Components/Table/Misc/FilterPanel.svelte +190 -190
  95. package/dist/Components/Table/Misc/FilterPanelModal.svelte +31 -31
  96. package/dist/Components/Table/Misc/ShareViewModal.svelte +291 -291
  97. package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
  98. package/dist/Components/Table/Misc/TableConfigurationModal.svelte +644 -644
  99. package/dist/Components/Table/Misc/TableFooter.svelte +340 -340
  100. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +140 -140
  101. package/dist/Components/Table/Misc/TableSidebar.svelte +200 -200
  102. package/dist/Components/Table/Misc/TableViewDropdown.svelte +105 -105
  103. package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
  104. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
  105. package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +192 -192
  106. package/dist/Components/Table/NestedTable.svelte +130 -130
  107. package/dist/Components/Table/Table.svelte +692 -692
  108. package/dist/Components/Test/TestContextConsumer.svelte +13 -13
  109. package/dist/Components/TextArea.svelte +130 -130
  110. package/dist/Components/TextInput.svelte +176 -176
  111. package/dist/Components/ThreeStateRadio.svelte +131 -131
  112. package/dist/Components/Touch/BoolCard.svelte +45 -45
  113. package/dist/Components/Touch/DateModal.svelte +209 -209
  114. package/dist/Components/Touch/EditCard.svelte +59 -59
  115. package/dist/Components/Touch/InfoCard.svelte +31 -31
  116. package/dist/Components/Touch/InfoTextCard.svelte +28 -28
  117. package/dist/Components/Touch/ModalExplanation.svelte +17 -17
  118. package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
  119. package/dist/Components/Touch/NumberModal.svelte +79 -79
  120. package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
  121. package/dist/Components/Touch/SelectModal.svelte +127 -127
  122. package/dist/Components/Touch/SummaryCard.svelte +93 -93
  123. package/dist/Components/Touch/TextAreaModal.svelte +95 -95
  124. package/dist/Components/Touch/TextModal.svelte +106 -106
  125. package/dist/Components/Touch/TouchCard.svelte +33 -33
  126. package/dist/Components/Touch/TouchModal.svelte +274 -274
  127. package/dist/Components/Touch/UtilityButton.svelte +109 -109
  128. package/dist/Components/VerticalTabGroup.svelte +79 -79
  129. package/dist/Components/VerticalTabGroupButton.svelte +58 -58
  130. package/dist/Helpers/Datamatrix.d.ts +19 -19
  131. package/dist/Helpers/Datamatrix.js +291 -291
  132. package/dist/Types/Examples/ExampleModal.svelte +35 -35
  133. package/dist/index.d.ts +3 -0
  134. package/dist/index.js +2 -0
  135. package/dist/scss/_basics.scss +12 -12
  136. package/dist/scss/_colours.scss +134 -134
  137. package/dist/scss/_mixins.scss +3392 -3392
  138. package/dist/scss/_motion.scss +57 -57
  139. package/dist/scss/_sizing.scss +85 -85
  140. package/dist/scss/_transitions.scss +8 -8
  141. 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>