@bexis2/bexis2-core-ui 0.3.1 → 0.3.3

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 (90) hide show
  1. package/README.md +14 -1
  2. package/dist/TableView.svelte +1 -1
  3. package/dist/components/File/FileIcon.svelte +45 -45
  4. package/dist/components/File/FileInfo.svelte +13 -13
  5. package/dist/components/ListView.svelte +5 -5
  6. package/dist/components/Table/Table.svelte +165 -100
  7. package/dist/components/Table/TableFilter.svelte +1 -0
  8. package/dist/components/form/Checkbox.svelte +13 -13
  9. package/dist/components/form/CheckboxKvPList.svelte +16 -16
  10. package/dist/components/form/CheckboxList.svelte +10 -10
  11. package/dist/components/form/DateInput.svelte +14 -14
  12. package/dist/components/form/DropdownKvP.svelte +54 -54
  13. package/dist/components/form/NumberInput.svelte +15 -15
  14. package/dist/components/form/TextArea.svelte +14 -14
  15. package/dist/components/form/TextInput.svelte +15 -15
  16. package/dist/components/page/Alert.svelte +28 -28
  17. package/dist/components/page/BackToTop.svelte +30 -30
  18. package/dist/components/page/Docs.svelte +22 -22
  19. package/dist/components/page/ErrorMessage.svelte +8 -8
  20. package/dist/components/page/Footer.svelte +5 -5
  21. package/dist/components/page/Header.svelte +5 -5
  22. package/dist/components/page/HelpPopUp.svelte +30 -30
  23. package/dist/components/page/PageCaller.js +19 -19
  24. package/dist/components/page/Spinner.svelte +14 -14
  25. package/dist/components/page/menu/MenuDataCaller.js +10 -10
  26. package/dist/css/core.ui.postcss +17 -17
  27. package/dist/css/themes/theme-bexis2.css +96 -96
  28. package/dist/css/themes/theme-crimson.css +101 -101
  29. package/dist/css/themes/theme-gold-nouveau.css +140 -140
  30. package/dist/css/themes/theme-hamlindigo.css +112 -112
  31. package/dist/css/themes/theme-modern.css +127 -127
  32. package/dist/css/themes/theme-rocket.css +119 -119
  33. package/dist/css/themes/theme-sahara.css +128 -128
  34. package/dist/css/themes/theme-seafoam.css +122 -122
  35. package/dist/css/themes/theme-seasonal.css +115 -115
  36. package/dist/css/themes/theme-skeleton.css +118 -118
  37. package/dist/css/themes/theme-vintage.css +125 -125
  38. package/dist/models/Models.d.ts +2 -0
  39. package/dist/services/BaseCaller.js +16 -16
  40. package/dist/stores/pageStores.js +1 -1
  41. package/dist/themes/theme-bexis2.js +104 -91
  42. package/package.json +2 -2
  43. package/src/lib/TableView.svelte +1 -1
  44. package/src/lib/components/CodeEditor/CodeEditor.svelte +1 -1
  45. package/src/lib/components/ListView.svelte +11 -11
  46. package/src/lib/components/Table/Table.svelte +198 -125
  47. package/src/lib/components/Table/TableFilter.svelte +7 -3
  48. package/src/lib/components/Table/filter.ts +141 -141
  49. package/src/lib/components/file/FileIcon.svelte +45 -45
  50. package/src/lib/components/file/FileInfo.svelte +13 -13
  51. package/src/lib/components/form/Checkbox.svelte +24 -24
  52. package/src/lib/components/form/CheckboxKvPList.svelte +29 -29
  53. package/src/lib/components/form/CheckboxList.svelte +21 -21
  54. package/src/lib/components/form/DateInput.svelte +27 -27
  55. package/src/lib/components/form/DropdownKvP.svelte +54 -54
  56. package/src/lib/components/form/NumberInput.svelte +30 -30
  57. package/src/lib/components/form/TextArea.svelte +28 -28
  58. package/src/lib/components/form/TextInput.svelte +28 -28
  59. package/src/lib/components/page/Alert.svelte +41 -41
  60. package/src/lib/components/page/BackToTop.svelte +30 -30
  61. package/src/lib/components/page/Docs.svelte +46 -46
  62. package/src/lib/components/page/ErrorMessage.svelte +10 -10
  63. package/src/lib/components/page/Footer.svelte +18 -18
  64. package/src/lib/components/page/Header.svelte +18 -18
  65. package/src/lib/components/page/HelpPopUp.svelte +72 -72
  66. package/src/lib/components/page/Notification.svelte +42 -47
  67. package/src/lib/components/page/Page.svelte +0 -1
  68. package/src/lib/components/page/PageCaller.js +19 -19
  69. package/src/lib/components/page/Spinner.svelte +20 -20
  70. package/src/lib/components/page/menu/MenuDataCaller.js +10 -10
  71. package/src/lib/css/core.ui.postcss +17 -17
  72. package/src/lib/css/themes/theme-bexis2.css +96 -96
  73. package/src/lib/css/themes/theme-crimson.css +101 -101
  74. package/src/lib/css/themes/theme-gold-nouveau.css +140 -140
  75. package/src/lib/css/themes/theme-hamlindigo.css +112 -112
  76. package/src/lib/css/themes/theme-modern.css +127 -127
  77. package/src/lib/css/themes/theme-rocket.css +119 -119
  78. package/src/lib/css/themes/theme-sahara.css +128 -128
  79. package/src/lib/css/themes/theme-seafoam.css +122 -122
  80. package/src/lib/css/themes/theme-seasonal.css +115 -115
  81. package/src/lib/css/themes/theme-skeleton.css +118 -118
  82. package/src/lib/css/themes/theme-vintage.css +125 -125
  83. package/src/lib/index.ts +1 -1
  84. package/src/lib/models/Models.ts +6 -4
  85. package/src/lib/models/Page.ts +40 -40
  86. package/src/lib/services/Api.ts +55 -55
  87. package/src/lib/services/BaseCaller.js +16 -16
  88. package/src/lib/stores/apiStores.ts +34 -34
  89. package/src/lib/stores/pageStores.ts +3 -3
  90. package/src/lib/themes/theme-bexis2.ts +107 -96
@@ -1,141 +1,141 @@
1
- import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
2
- import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
3
-
4
- const textFilter = (filterOption, filterValue, value) => {
5
- switch (filterOption) {
6
- case 'isequal':
7
- return value.toLowerCase() === filterValue.toLowerCase();
8
- case 'isnotequal':
9
- return value.toLowerCase() !== filterValue.toLowerCase();
10
- case 'starts':
11
- return value.toLowerCase().startsWith(filterValue.toLowerCase());
12
- case 'ends':
13
- return value.toLowerCase().endsWith(filterValue.toLowerCase());
14
- case 'contains':
15
- return value.toLowerCase().includes(filterValue.toLowerCase());
16
- case 'notcontains':
17
- return !value.toLowerCase().includes(filterValue.toLowerCase());
18
- default:
19
- return false;
20
- }
21
- };
22
-
23
- const numberFilter = (filterOption, filterValue, value) => {
24
- switch (filterOption) {
25
- case 'isequal':
26
- return value === filterValue;
27
- case 'isnotequal':
28
- return value !== filterValue;
29
- case 'isgreater':
30
- return value > filterValue;
31
- case 'isless':
32
- return value < filterValue;
33
- case 'isgreaterorequal':
34
- return value >= filterValue;
35
- case 'islessorequal':
36
- return value <= filterValue;
37
- default:
38
- return false;
39
- }
40
- };
41
-
42
- const dateFilter = (filterOption, filterValue, value) => {
43
- const filter = new Date(filterValue);
44
-
45
- switch (filterOption) {
46
- case 'ison':
47
- return value === filter;
48
- case 'isstartingfrom':
49
- return value >= filter;
50
- case 'isafter':
51
- return value > filter;
52
- case 'isuntil':
53
- return value <= filter;
54
- case 'isbefore':
55
- return value < filter;
56
- case 'isnoton':
57
- return value !== filter;
58
- default:
59
- return false;
60
- }
61
- };
62
-
63
- const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
64
- const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
65
- if (firstFilterValue == null && secondFilterValue == null) {
66
- return true;
67
- } else if (
68
- (firstFilterOption == null || firstFilterValue == null) &&
69
- secondFilterOption != null &&
70
- secondFilterValue != null
71
- ) {
72
- return numberFilter(secondFilterOption, secondFilterValue, value);
73
- } else if (
74
- (secondFilterOption == null || secondFilterValue == null) &&
75
- firstFilterOption != null &&
76
- firstFilterValue != null
77
- ) {
78
- return numberFilter(firstFilterOption, firstFilterValue, value);
79
- }
80
- return (
81
- numberFilter(firstFilterOption, firstFilterValue, value) &&
82
- numberFilter(secondFilterOption, secondFilterValue, value)
83
- );
84
- };
85
-
86
- const stringFilter: ColumnFilterFn = ({ filterValue, value }) => {
87
- const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
88
- if (!firstFilterValue?.length && !secondFilterValue?.length) {
89
- return true;
90
- } else if (
91
- (!firstFilterOption || !firstFilterValue) &&
92
- secondFilterOption &&
93
- secondFilterValue?.length
94
- ) {
95
- return textFilter(secondFilterOption, secondFilterValue, value);
96
- } else if (
97
- (!secondFilterOption || !secondFilterValue?.length) &&
98
- firstFilterOption &&
99
- firstFilterValue?.length
100
- ) {
101
- return textFilter(firstFilterOption, firstFilterValue, value);
102
- }
103
- return (
104
- textFilter(firstFilterOption, firstFilterValue, value) &&
105
- textFilter(secondFilterOption, secondFilterValue, value)
106
- );
107
- };
108
-
109
- const dateTypeFilter: ColumnFilterFn = ({ filterValue, value }) => {
110
- const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
111
- if (!firstFilterValue && !secondFilterValue) {
112
- return true;
113
- } else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
114
- return dateFilter(secondFilterOption, secondFilterValue, value);
115
- } else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
116
- return dateFilter(firstFilterOption, firstFilterValue, value);
117
- }
118
-
119
- return (
120
- dateFilter(firstFilterOption, firstFilterValue, value) &&
121
- dateFilter(secondFilterOption, secondFilterValue, value)
122
- );
123
- };
124
-
125
- export const columnFilter: ColumnFilterFn = ({ filterValue, value }) => {
126
- if (typeof value === 'string') {
127
- return stringFilter({ filterValue, value });
128
- } else if (typeof value === 'number') {
129
- return numericFilter({ filterValue, value });
130
- } else if (typeof value === 'object' && value instanceof Date) {
131
- return dateTypeFilter({ filterValue, value });
132
- }
133
- return false;
134
- };
135
-
136
- export const searchFilter: TableFilterFn = ({ filterValue, value }) => {
137
- if (value.toLowerCase().includes(filterValue.toLowerCase())) {
138
- return true;
139
- }
140
- return false;
141
- };
1
+ import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
2
+ import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
3
+
4
+ const textFilter = (filterOption, filterValue, value) => {
5
+ switch (filterOption) {
6
+ case 'isequal':
7
+ return value.toLowerCase() === filterValue.toLowerCase();
8
+ case 'isnotequal':
9
+ return value.toLowerCase() !== filterValue.toLowerCase();
10
+ case 'starts':
11
+ return value.toLowerCase().startsWith(filterValue.toLowerCase());
12
+ case 'ends':
13
+ return value.toLowerCase().endsWith(filterValue.toLowerCase());
14
+ case 'contains':
15
+ return value.toLowerCase().includes(filterValue.toLowerCase());
16
+ case 'notcontains':
17
+ return !value.toLowerCase().includes(filterValue.toLowerCase());
18
+ default:
19
+ return false;
20
+ }
21
+ };
22
+
23
+ const numberFilter = (filterOption, filterValue, value) => {
24
+ switch (filterOption) {
25
+ case 'isequal':
26
+ return value === filterValue;
27
+ case 'isnotequal':
28
+ return value !== filterValue;
29
+ case 'isgreater':
30
+ return value > filterValue;
31
+ case 'isless':
32
+ return value < filterValue;
33
+ case 'isgreaterorequal':
34
+ return value >= filterValue;
35
+ case 'islessorequal':
36
+ return value <= filterValue;
37
+ default:
38
+ return false;
39
+ }
40
+ };
41
+
42
+ const dateFilter = (filterOption, filterValue, value) => {
43
+ const filter = new Date(filterValue);
44
+
45
+ switch (filterOption) {
46
+ case 'ison':
47
+ return value === filter;
48
+ case 'isstartingfrom':
49
+ return value >= filter;
50
+ case 'isafter':
51
+ return value > filter;
52
+ case 'isuntil':
53
+ return value <= filter;
54
+ case 'isbefore':
55
+ return value < filter;
56
+ case 'isnoton':
57
+ return value !== filter;
58
+ default:
59
+ return false;
60
+ }
61
+ };
62
+
63
+ const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
64
+ const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
65
+ if (firstFilterValue == null && secondFilterValue == null) {
66
+ return true;
67
+ } else if (
68
+ (firstFilterOption == null || firstFilterValue == null) &&
69
+ secondFilterOption != null &&
70
+ secondFilterValue != null
71
+ ) {
72
+ return numberFilter(secondFilterOption, secondFilterValue, value);
73
+ } else if (
74
+ (secondFilterOption == null || secondFilterValue == null) &&
75
+ firstFilterOption != null &&
76
+ firstFilterValue != null
77
+ ) {
78
+ return numberFilter(firstFilterOption, firstFilterValue, value);
79
+ }
80
+ return (
81
+ numberFilter(firstFilterOption, firstFilterValue, value) &&
82
+ numberFilter(secondFilterOption, secondFilterValue, value)
83
+ );
84
+ };
85
+
86
+ const stringFilter: ColumnFilterFn = ({ filterValue, value }) => {
87
+ const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
88
+ if (!firstFilterValue?.length && !secondFilterValue?.length) {
89
+ return true;
90
+ } else if (
91
+ (!firstFilterOption || !firstFilterValue) &&
92
+ secondFilterOption &&
93
+ secondFilterValue?.length
94
+ ) {
95
+ return textFilter(secondFilterOption, secondFilterValue, value);
96
+ } else if (
97
+ (!secondFilterOption || !secondFilterValue?.length) &&
98
+ firstFilterOption &&
99
+ firstFilterValue?.length
100
+ ) {
101
+ return textFilter(firstFilterOption, firstFilterValue, value);
102
+ }
103
+ return (
104
+ textFilter(firstFilterOption, firstFilterValue, value) &&
105
+ textFilter(secondFilterOption, secondFilterValue, value)
106
+ );
107
+ };
108
+
109
+ const dateTypeFilter: ColumnFilterFn = ({ filterValue, value }) => {
110
+ const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
111
+ if (!firstFilterValue && !secondFilterValue) {
112
+ return true;
113
+ } else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
114
+ return dateFilter(secondFilterOption, secondFilterValue, value);
115
+ } else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
116
+ return dateFilter(firstFilterOption, firstFilterValue, value);
117
+ }
118
+
119
+ return (
120
+ dateFilter(firstFilterOption, firstFilterValue, value) &&
121
+ dateFilter(secondFilterOption, secondFilterValue, value)
122
+ );
123
+ };
124
+
125
+ export const columnFilter: ColumnFilterFn = ({ filterValue, value }) => {
126
+ if (typeof value === 'string') {
127
+ return stringFilter({ filterValue, value });
128
+ } else if (typeof value === 'number') {
129
+ return numericFilter({ filterValue, value });
130
+ } else if (typeof value === 'object' && value instanceof Date) {
131
+ return dateTypeFilter({ filterValue, value });
132
+ }
133
+ return false;
134
+ };
135
+
136
+ export const searchFilter: TableFilterFn = ({ filterValue, value }) => {
137
+ if (value.toLowerCase().includes(filterValue.toLowerCase())) {
138
+ return true;
139
+ }
140
+ return false;
141
+ };
@@ -1,45 +1,45 @@
1
- <script>
2
- import Fa from 'svelte-fa';
3
- import { faFileAudio } from '@fortawesome/free-regular-svg-icons';
4
- import { faFileVideo } from '@fortawesome/free-regular-svg-icons';
5
- import { faFileWord } from '@fortawesome/free-regular-svg-icons';
6
- import { faFilePdf } from '@fortawesome/free-regular-svg-icons';
7
- import { faFileExcel } from '@fortawesome/free-regular-svg-icons';
8
- import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
9
- import { faFileImage } from '@fortawesome/free-regular-svg-icons';
10
- import { faFileArchive } from '@fortawesome/free-regular-svg-icons';
11
-
12
- export let type = '';
13
- </script>
14
-
15
- {#if type.includes('excel') || type.includes('spreadsheetml')}
16
- <Fa icon={faFileExcel} />
17
- {/if}
18
-
19
- {#if type.includes('text')}
20
- <Fa icon={faFileAlt} />
21
- {/if}
22
-
23
- {#if type.includes('image')}
24
- <Fa icon={faFileImage} />
25
- {/if}
26
-
27
- {#if type.includes('audio')}
28
- <Fa icon={faFileAudio} />
29
- {/if}
30
-
31
- {#if type.includes('video')}
32
- <Fa icon={faFileVideo} />
33
- {/if}
34
-
35
- {#if type.includes('word')}
36
- <Fa icon={faFileWord} />
37
- {/if}
38
-
39
- {#if type.includes('pdf')}
40
- <Fa icon={faFilePdf} />
41
- {/if}
42
-
43
- {#if type.includes('zip')}
44
- <Fa icon={faFileArchive} />
45
- {/if}
1
+ <script>
2
+ import Fa from 'svelte-fa';
3
+ import { faFileAudio } from '@fortawesome/free-regular-svg-icons';
4
+ import { faFileVideo } from '@fortawesome/free-regular-svg-icons';
5
+ import { faFileWord } from '@fortawesome/free-regular-svg-icons';
6
+ import { faFilePdf } from '@fortawesome/free-regular-svg-icons';
7
+ import { faFileExcel } from '@fortawesome/free-regular-svg-icons';
8
+ import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
9
+ import { faFileImage } from '@fortawesome/free-regular-svg-icons';
10
+ import { faFileArchive } from '@fortawesome/free-regular-svg-icons';
11
+
12
+ export let type = '';
13
+ </script>
14
+
15
+ {#if type.includes('excel') || type.includes('spreadsheetml')}
16
+ <Fa icon={faFileExcel} />
17
+ {/if}
18
+
19
+ {#if type.includes('text')}
20
+ <Fa icon={faFileAlt} />
21
+ {/if}
22
+
23
+ {#if type.includes('image')}
24
+ <Fa icon={faFileImage} />
25
+ {/if}
26
+
27
+ {#if type.includes('audio')}
28
+ <Fa icon={faFileAudio} />
29
+ {/if}
30
+
31
+ {#if type.includes('video')}
32
+ <Fa icon={faFileVideo} />
33
+ {/if}
34
+
35
+ {#if type.includes('word')}
36
+ <Fa icon={faFileWord} />
37
+ {/if}
38
+
39
+ {#if type.includes('pdf')}
40
+ <Fa icon={faFilePdf} />
41
+ {/if}
42
+
43
+ {#if type.includes('zip')}
44
+ <Fa icon={faFileArchive} />
45
+ {/if}
@@ -1,13 +1,13 @@
1
- <script>
2
- import FileIcon from './FileIcon.svelte';
3
-
4
- export let name = '';
5
- export let type = '';
6
- // export let description;
7
- export let size = '';
8
- </script>
9
-
10
- <div style="font-size:{size}">
11
- <FileIcon {type} />
12
- {name}
13
- </div>
1
+ <script>
2
+ import FileIcon from './FileIcon.svelte';
3
+
4
+ export let name = '';
5
+ export let type = '';
6
+ // export let description;
7
+ export let size = '';
8
+ </script>
9
+
10
+ <div style="font-size:{size}">
11
+ <FileIcon {type} />
12
+ {name}
13
+ </div>
@@ -1,24 +1,24 @@
1
- <script lang="ts">
2
- import InputContainer from './InputContainer.svelte';
3
-
4
- export let id: string = '';
5
- export let label: string = '';
6
- export let checked: boolean = false;
7
-
8
- export let valid: boolean;
9
- export let invalid: boolean;
10
- export let required: boolean;
11
- export let feedback: [];
12
- </script>
13
-
14
- <InputContainer {label} {feedback} {required}>
15
- <input
16
- {id}
17
- class="input variant-form-material"
18
- type="checkbox"
19
- class:input-success={valid}
20
- class:input-error={invalid}
21
- bind:checked
22
- on:input
23
- />
24
- </InputContainer>
1
+ <script lang="ts">
2
+ import InputContainer from './InputContainer.svelte';
3
+
4
+ export let id: string = '';
5
+ export let label: string = '';
6
+ export let checked: boolean = false;
7
+
8
+ export let valid: boolean;
9
+ export let invalid: boolean;
10
+ export let required: boolean;
11
+ export let feedback: [];
12
+ </script>
13
+
14
+ <InputContainer {label} {feedback} {required}>
15
+ <input
16
+ {id}
17
+ class="input variant-form-material"
18
+ type="checkbox"
19
+ class:input-success={valid}
20
+ class:input-error={invalid}
21
+ bind:checked
22
+ on:input
23
+ />
24
+ </InputContainer>
@@ -1,29 +1,29 @@
1
- <script lang="ts">
2
- import InputContainer from './InputContainer.svelte';
3
-
4
- export let id;
5
- export let source;
6
- export let target;
7
- export let title;
8
- export let description = '';
9
- export let key;
10
- export let help = false;
11
-
12
- let required = false;
13
- let feedback: [];
14
- </script>
15
-
16
- <InputContainer {id} label={title} {feedback} {required} {help}>
17
- {#each source as item}
18
- <label class="flex items-center space-x-2" for={key}>
19
- <input
20
- class="checkbox"
21
- type="checkbox"
22
- bind:group={target}
23
- checked={item.key}
24
- value={item.key}
25
- />
26
- <p>{item.value}</p>
27
- </label>
28
- {/each}
29
- </InputContainer>
1
+ <script lang="ts">
2
+ import InputContainer from './InputContainer.svelte';
3
+
4
+ export let id;
5
+ export let source;
6
+ export let target;
7
+ export let title;
8
+ export let description = '';
9
+ export let key;
10
+ export let help = false;
11
+
12
+ let required = false;
13
+ let feedback: [];
14
+ </script>
15
+
16
+ <InputContainer {id} label={title} {feedback} {required} {help}>
17
+ {#each source as item}
18
+ <label class="flex items-center space-x-2" for={key}>
19
+ <input
20
+ class="checkbox"
21
+ type="checkbox"
22
+ bind:group={target}
23
+ checked={item.key}
24
+ value={item.key}
25
+ />
26
+ <p>{item.value}</p>
27
+ </label>
28
+ {/each}
29
+ </InputContainer>
@@ -1,21 +1,21 @@
1
- <script lang="ts">
2
- import InputContainer from './InputContainer.svelte';
3
-
4
- export let source;
5
- export let target;
6
- export let title;
7
- export let description = '';
8
- export let key;
9
-
10
- let required = false;
11
- let feedback: [];
12
- </script>
13
-
14
- <InputContainer label={title} {feedback} {required}>
15
- {#each source as item}
16
- <label class="flex items-center space-x-2" for={key}>
17
- <input class="checkbox" type="checkbox" bind:group={target} value={item} />
18
- <p>{item}</p>
19
- </label>
20
- {/each}
21
- </InputContainer>
1
+ <script lang="ts">
2
+ import InputContainer from './InputContainer.svelte';
3
+
4
+ export let source;
5
+ export let target;
6
+ export let title;
7
+ export let description = '';
8
+ export let key;
9
+
10
+ let required = false;
11
+ let feedback: [];
12
+ </script>
13
+
14
+ <InputContainer label={title} {feedback} {required}>
15
+ {#each source as item}
16
+ <label class="flex items-center space-x-2" for={key}>
17
+ <input class="checkbox" type="checkbox" bind:group={target} value={item} />
18
+ <p>{item}</p>
19
+ </label>
20
+ {/each}
21
+ </InputContainer>
@@ -1,27 +1,27 @@
1
- <script lang="ts">
2
- import InputContainer from './InputContainer.svelte';
3
-
4
- export let id: string = '';
5
- export let label: string = '';
6
- export let value: string = '';
7
-
8
- export let valid: boolean = false;
9
- export let invalid: boolean = false;
10
- export let required: boolean = false;
11
- export let feedback: string[] = [''];
12
- export let help = false;
13
- export let disabled: boolean = false;
14
- </script>
15
-
16
- <InputContainer {id} {label} {feedback} {required} {help}>
17
- <input
18
- {id}
19
- class="input variant-form-material"
20
- type="date"
21
- class:input-success={valid}
22
- class:input-error={invalid}
23
- bind:value
24
- on:input
25
- {disabled}
26
- />
27
- </InputContainer>
1
+ <script lang="ts">
2
+ import InputContainer from './InputContainer.svelte';
3
+
4
+ export let id: string = '';
5
+ export let label: string = '';
6
+ export let value: string = '';
7
+
8
+ export let valid: boolean = false;
9
+ export let invalid: boolean = false;
10
+ export let required: boolean = false;
11
+ export let feedback: string[] = [''];
12
+ export let help = false;
13
+ export let disabled: boolean = false;
14
+ </script>
15
+
16
+ <InputContainer {id} {label} {feedback} {required} {help}>
17
+ <input
18
+ {id}
19
+ class="input variant-form-material"
20
+ type="date"
21
+ class:input-success={valid}
22
+ class:input-error={invalid}
23
+ bind:value
24
+ on:input
25
+ {disabled}
26
+ />
27
+ </InputContainer>