@bexis2/bexis2-core-ui 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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/form/Checkbox.svelte +13 -13
  7. package/dist/components/form/CheckboxKvPList.svelte +16 -16
  8. package/dist/components/form/CheckboxList.svelte +10 -10
  9. package/dist/components/form/DateInput.svelte +14 -14
  10. package/dist/components/form/DropdownKvP.svelte +54 -54
  11. package/dist/components/form/NumberInput.svelte +15 -15
  12. package/dist/components/form/TextArea.svelte +14 -14
  13. package/dist/components/form/TextInput.svelte +15 -15
  14. package/dist/components/page/Alert.svelte +28 -28
  15. package/dist/components/page/BackToTop.svelte +30 -30
  16. package/dist/components/page/Docs.svelte +22 -22
  17. package/dist/components/page/ErrorMessage.svelte +8 -8
  18. package/dist/components/page/Footer.svelte +5 -5
  19. package/dist/components/page/Header.svelte +5 -5
  20. package/dist/components/page/HelpPopUp.svelte +30 -30
  21. package/dist/components/page/PageCaller.js +19 -19
  22. package/dist/components/page/Spinner.svelte +14 -14
  23. package/dist/components/page/menu/MenuDataCaller.js +10 -10
  24. package/dist/css/core.ui.postcss +17 -17
  25. package/dist/css/themes/theme-bexis2.css +96 -96
  26. package/dist/css/themes/theme-crimson.css +101 -101
  27. package/dist/css/themes/theme-gold-nouveau.css +140 -140
  28. package/dist/css/themes/theme-hamlindigo.css +112 -112
  29. package/dist/css/themes/theme-modern.css +127 -127
  30. package/dist/css/themes/theme-rocket.css +119 -119
  31. package/dist/css/themes/theme-sahara.css +128 -128
  32. package/dist/css/themes/theme-seafoam.css +122 -122
  33. package/dist/css/themes/theme-seasonal.css +115 -115
  34. package/dist/css/themes/theme-skeleton.css +118 -118
  35. package/dist/css/themes/theme-vintage.css +125 -125
  36. package/dist/index.d.ts +1 -0
  37. package/dist/index.js +2 -0
  38. package/dist/services/BaseCaller.js +16 -16
  39. package/dist/stores/pageStores.js +1 -1
  40. package/dist/themes/theme-bexis2.d.ts +1 -1
  41. package/dist/themes/theme-bexis2.js +93 -93
  42. package/package.json +1 -1
  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/filter.ts +141 -141
  47. package/src/lib/components/file/FileIcon.svelte +45 -45
  48. package/src/lib/components/file/FileInfo.svelte +13 -13
  49. package/src/lib/components/form/Checkbox.svelte +24 -24
  50. package/src/lib/components/form/CheckboxKvPList.svelte +29 -29
  51. package/src/lib/components/form/CheckboxList.svelte +21 -21
  52. package/src/lib/components/form/DateInput.svelte +27 -27
  53. package/src/lib/components/form/DropdownKvP.svelte +54 -54
  54. package/src/lib/components/form/NumberInput.svelte +30 -30
  55. package/src/lib/components/form/TextArea.svelte +28 -28
  56. package/src/lib/components/form/TextInput.svelte +28 -28
  57. package/src/lib/components/page/Alert.svelte +41 -41
  58. package/src/lib/components/page/BackToTop.svelte +30 -30
  59. package/src/lib/components/page/Docs.svelte +46 -46
  60. package/src/lib/components/page/ErrorMessage.svelte +10 -10
  61. package/src/lib/components/page/Footer.svelte +18 -18
  62. package/src/lib/components/page/Header.svelte +18 -18
  63. package/src/lib/components/page/HelpPopUp.svelte +72 -72
  64. package/src/lib/components/page/Notification.svelte +42 -47
  65. package/src/lib/components/page/Page.svelte +0 -1
  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/menu/MenuDataCaller.js +10 -10
  69. package/src/lib/css/core.ui.postcss +17 -17
  70. package/src/lib/css/themes/theme-bexis2.css +96 -96
  71. package/src/lib/css/themes/theme-crimson.css +101 -101
  72. package/src/lib/css/themes/theme-gold-nouveau.css +140 -140
  73. package/src/lib/css/themes/theme-hamlindigo.css +112 -112
  74. package/src/lib/css/themes/theme-modern.css +127 -127
  75. package/src/lib/css/themes/theme-rocket.css +119 -119
  76. package/src/lib/css/themes/theme-sahara.css +128 -128
  77. package/src/lib/css/themes/theme-seafoam.css +122 -122
  78. package/src/lib/css/themes/theme-seasonal.css +115 -115
  79. package/src/lib/css/themes/theme-skeleton.css +118 -118
  80. package/src/lib/css/themes/theme-vintage.css +125 -125
  81. package/src/lib/index.ts +5 -0
  82. package/src/lib/models/Page.ts +40 -40
  83. package/src/lib/services/Api.ts +55 -55
  84. package/src/lib/services/BaseCaller.js +16 -16
  85. package/src/lib/stores/apiStores.ts +34 -34
  86. package/src/lib/stores/pageStores.ts +4 -3
  87. package/src/lib/themes/theme-bexis2.ts +95 -97
@@ -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>