@bexis2/bexis2-core-ui 0.2.23 → 0.2.25

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 (94) hide show
  1. package/README.md +6 -0
  2. package/dist/TableView.svelte +1 -1
  3. package/dist/components/CodeEditor/CodeEditor.svelte +24 -12
  4. package/dist/components/CodeEditor/CodeEditor.svelte.d.ts +6 -3
  5. package/dist/components/ListView.svelte +5 -5
  6. package/dist/components/Table/Table.svelte +11 -5
  7. package/dist/components/Table/TableFilter.svelte +2 -1
  8. package/dist/components/Table/TablePagination.svelte +6 -1
  9. package/dist/components/Table/TablePagination.svelte.d.ts +1 -0
  10. package/dist/components/file/FileIcon.svelte +45 -45
  11. package/dist/components/file/FileInfo.svelte +13 -13
  12. package/dist/components/file/FileUploader.svelte +3 -1
  13. package/dist/components/form/Checkbox.svelte +13 -13
  14. package/dist/components/form/CheckboxKvPList.svelte +16 -16
  15. package/dist/components/form/CheckboxList.svelte +10 -10
  16. package/dist/components/form/DateInput.svelte +13 -13
  17. package/dist/components/form/DropdownKvP.svelte +54 -54
  18. package/dist/components/form/InputContainer.svelte +1 -1
  19. package/dist/components/form/MultiSelect.svelte +178 -178
  20. package/dist/components/form/NumberInput.svelte +14 -14
  21. package/dist/components/form/TextArea.svelte +13 -13
  22. package/dist/components/form/TextInput.svelte +14 -14
  23. package/dist/components/page/Alert.svelte +28 -28
  24. package/dist/components/page/BackToTop.svelte +30 -30
  25. package/dist/components/page/Docs.svelte +22 -22
  26. package/dist/components/page/ErrorMessage.svelte +8 -8
  27. package/dist/components/page/Footer.svelte +5 -5
  28. package/dist/components/page/Header.svelte +5 -5
  29. package/dist/components/page/HelpPopUp.svelte +30 -30
  30. package/dist/components/page/PageCaller.js +19 -19
  31. package/dist/components/page/Spinner.svelte +14 -14
  32. package/dist/components/page/breadcrumb/Breadcrumb.svelte +19 -19
  33. package/dist/components/page/menu/MenuDataCaller.js +10 -10
  34. package/dist/css/core.ui.postcss +17 -17
  35. package/dist/css/themes/theme-bexis2.css +96 -96
  36. package/dist/css/themes/theme-crimson.css +101 -101
  37. package/dist/css/themes/theme-gold-nouveau.css +140 -140
  38. package/dist/css/themes/theme-hamlindigo.css +112 -112
  39. package/dist/css/themes/theme-modern.css +127 -127
  40. package/dist/css/themes/theme-rocket.css +119 -119
  41. package/dist/css/themes/theme-sahara.css +128 -128
  42. package/dist/css/themes/theme-seafoam.css +122 -122
  43. package/dist/css/themes/theme-seasonal.css +115 -115
  44. package/dist/css/themes/theme-skeleton.css +118 -118
  45. package/dist/css/themes/theme-vintage.css +125 -125
  46. package/dist/services/BaseCaller.js +16 -16
  47. package/package.json +3 -2
  48. package/src/lib/TableView.svelte +1 -1
  49. package/src/lib/components/CodeEditor/CodeEditor.svelte +25 -13
  50. package/src/lib/components/ListView.svelte +11 -11
  51. package/src/lib/components/Table/Table.svelte +11 -5
  52. package/src/lib/components/Table/TableFilter.svelte +2 -1
  53. package/src/lib/components/Table/TablePagination.svelte +6 -1
  54. package/src/lib/components/Table/filter.ts +141 -141
  55. package/src/lib/components/{File → file}/FileIcon.svelte +45 -45
  56. package/src/lib/components/{File → file}/FileInfo.svelte +13 -13
  57. package/src/lib/components/{File → file}/FileUploader.svelte +6 -1
  58. package/src/lib/components/form/Checkbox.svelte +24 -24
  59. package/src/lib/components/form/CheckboxKvPList.svelte +29 -29
  60. package/src/lib/components/form/CheckboxList.svelte +21 -21
  61. package/src/lib/components/form/DateInput.svelte +25 -25
  62. package/src/lib/components/form/DropdownKvP.svelte +54 -54
  63. package/src/lib/components/form/InputContainer.svelte +1 -1
  64. package/src/lib/components/form/MultiSelect.svelte +178 -178
  65. package/src/lib/components/form/NumberInput.svelte +28 -28
  66. package/src/lib/components/form/TextArea.svelte +26 -26
  67. package/src/lib/components/form/TextInput.svelte +26 -26
  68. package/src/lib/components/page/Alert.svelte +41 -41
  69. package/src/lib/components/page/BackToTop.svelte +30 -30
  70. package/src/lib/components/page/Docs.svelte +46 -46
  71. package/src/lib/components/page/ErrorMessage.svelte +10 -10
  72. package/src/lib/components/page/Footer.svelte +18 -18
  73. package/src/lib/components/page/Header.svelte +18 -18
  74. package/src/lib/components/page/HelpPopUp.svelte +72 -72
  75. package/src/lib/components/page/PageCaller.js +19 -19
  76. package/src/lib/components/page/Spinner.svelte +20 -20
  77. package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +39 -39
  78. package/src/lib/components/page/menu/MenuDataCaller.js +10 -10
  79. package/src/lib/css/core.ui.postcss +17 -17
  80. package/src/lib/css/themes/theme-bexis2.css +96 -96
  81. package/src/lib/css/themes/theme-crimson.css +101 -101
  82. package/src/lib/css/themes/theme-gold-nouveau.css +140 -140
  83. package/src/lib/css/themes/theme-hamlindigo.css +112 -112
  84. package/src/lib/css/themes/theme-modern.css +127 -127
  85. package/src/lib/css/themes/theme-rocket.css +119 -119
  86. package/src/lib/css/themes/theme-sahara.css +128 -128
  87. package/src/lib/css/themes/theme-seafoam.css +122 -122
  88. package/src/lib/css/themes/theme-seasonal.css +115 -115
  89. package/src/lib/css/themes/theme-skeleton.css +118 -118
  90. package/src/lib/css/themes/theme-vintage.css +125 -125
  91. package/src/lib/models/Page.ts +40 -40
  92. package/src/lib/services/Api.ts +55 -55
  93. package/src/lib/services/BaseCaller.js +16 -16
  94. package/src/lib/stores/apiStores.ts +31 -31
@@ -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>
@@ -147,7 +147,12 @@
147
147
  dispatch('submited');
148
148
 
149
149
  let message = files.accepted.length + ' is/are uploaded';
150
- dispatch('success', { text: message });
150
+
151
+ let fileList:string[] = [];
152
+ files.accepted.forEach(f => fileList.push(f.name))
153
+
154
+
155
+ dispatch('success', { text: message , files: fileList});
151
156
 
152
157
  files.accepted = [];
153
158
  }
@@ -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,25 +1,25 @@
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
- </script>
14
-
15
- <InputContainer {id} {label} {feedback} {required} {help}>
16
- <input
17
- {id}
18
- class="input variant-form-material"
19
- type="date"
20
- class:input-success={valid}
21
- class:input-error={invalid}
22
- bind:value
23
- on:input
24
- />
25
- </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
+ </script>
14
+
15
+ <InputContainer {id} {label} {feedback} {required} {help}>
16
+ <input
17
+ {id}
18
+ class="input variant-form-material"
19
+ type="date"
20
+ class:input-success={valid}
21
+ class:input-error={invalid}
22
+ bind:value
23
+ on:input
24
+ />
25
+ </InputContainer>