@bexis2/bexis2-core-ui 0.2.31 → 0.2.32

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 (87) hide show
  1. package/README.md +5 -0
  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 +87 -25
  7. package/dist/components/Table/TableFilter.svelte +1 -1
  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/MultiSelect.svelte +181 -181
  14. package/dist/components/form/NumberInput.svelte +15 -15
  15. package/dist/components/form/TextArea.svelte +14 -14
  16. package/dist/components/form/TextInput.svelte +15 -15
  17. package/dist/components/page/Alert.svelte +28 -28
  18. package/dist/components/page/BackToTop.svelte +30 -30
  19. package/dist/components/page/Docs.svelte +22 -22
  20. package/dist/components/page/ErrorMessage.svelte +8 -8
  21. package/dist/components/page/Footer.svelte +5 -5
  22. package/dist/components/page/Header.svelte +5 -5
  23. package/dist/components/page/HelpPopUp.svelte +30 -30
  24. package/dist/components/page/PageCaller.js +19 -19
  25. package/dist/components/page/Spinner.svelte +14 -14
  26. package/dist/components/page/breadcrumb/Breadcrumb.svelte +19 -19
  27. package/dist/components/page/menu/MenuDataCaller.js +10 -10
  28. package/dist/css/core.ui.postcss +17 -17
  29. package/dist/css/themes/theme-bexis2.css +96 -96
  30. package/dist/css/themes/theme-crimson.css +101 -101
  31. package/dist/css/themes/theme-gold-nouveau.css +140 -140
  32. package/dist/css/themes/theme-hamlindigo.css +112 -112
  33. package/dist/css/themes/theme-modern.css +127 -127
  34. package/dist/css/themes/theme-rocket.css +119 -119
  35. package/dist/css/themes/theme-sahara.css +128 -128
  36. package/dist/css/themes/theme-seafoam.css +122 -122
  37. package/dist/css/themes/theme-seasonal.css +115 -115
  38. package/dist/css/themes/theme-skeleton.css +118 -118
  39. package/dist/css/themes/theme-vintage.css +125 -125
  40. package/dist/models/Models.d.ts +3 -0
  41. package/dist/services/BaseCaller.js +16 -16
  42. package/package.json +1 -1
  43. package/src/lib/TableView.svelte +1 -1
  44. package/src/lib/components/ListView.svelte +11 -11
  45. package/src/lib/components/Table/Table.svelte +107 -26
  46. package/src/lib/components/Table/TableFilter.svelte +2 -1
  47. package/src/lib/components/Table/filter.ts +141 -141
  48. package/src/lib/components/{File → file}/FileIcon.svelte +45 -45
  49. package/src/lib/components/{File → file}/FileInfo.svelte +13 -13
  50. package/src/lib/components/form/Checkbox.svelte +24 -24
  51. package/src/lib/components/form/CheckboxKvPList.svelte +29 -29
  52. package/src/lib/components/form/CheckboxList.svelte +21 -21
  53. package/src/lib/components/form/DateInput.svelte +27 -27
  54. package/src/lib/components/form/DropdownKvP.svelte +54 -54
  55. package/src/lib/components/form/MultiSelect.svelte +181 -181
  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/PageCaller.js +19 -19
  67. package/src/lib/components/page/Spinner.svelte +20 -20
  68. package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +39 -39
  69. package/src/lib/components/page/menu/MenuDataCaller.js +10 -10
  70. package/src/lib/css/core.ui.postcss +17 -17
  71. package/src/lib/css/themes/theme-bexis2.css +96 -96
  72. package/src/lib/css/themes/theme-crimson.css +101 -101
  73. package/src/lib/css/themes/theme-gold-nouveau.css +140 -140
  74. package/src/lib/css/themes/theme-hamlindigo.css +112 -112
  75. package/src/lib/css/themes/theme-modern.css +127 -127
  76. package/src/lib/css/themes/theme-rocket.css +119 -119
  77. package/src/lib/css/themes/theme-sahara.css +128 -128
  78. package/src/lib/css/themes/theme-seafoam.css +122 -122
  79. package/src/lib/css/themes/theme-seasonal.css +115 -115
  80. package/src/lib/css/themes/theme-skeleton.css +118 -118
  81. package/src/lib/css/themes/theme-vintage.css +125 -125
  82. package/src/lib/models/Models.ts +10 -7
  83. package/src/lib/models/Page.ts +40 -40
  84. package/src/lib/services/Api.ts +55 -55
  85. package/src/lib/services/BaseCaller.js +16 -16
  86. package/src/lib/stores/apiStores.ts +31 -31
  87. /package/src/lib/components/{File → file}/FileUploader.svelte +0 -0
@@ -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>