@bexis2/bexis2-core-ui 0.2.11 → 0.2.13
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.
- package/README.md +273 -214
- package/dist/components/Table/Table.svelte +85 -85
- package/dist/components/Table/TableFilter.svelte +8 -8
- package/dist/components/Table/TablePagination.svelte +38 -38
- package/dist/components/file/FileUploader.svelte +34 -34
- package/dist/components/form/Checkbox.svelte.d.ts +1 -1
- package/dist/components/form/DropdownKvP.svelte +5 -11
- package/dist/components/form/InputContainer.svelte +20 -19
- package/dist/components/form/MultiSelect.svelte +163 -178
- package/dist/components/form/TextArea.svelte +13 -13
- package/dist/components/form/TextInput.svelte +0 -2
- package/dist/components/page/Alert.svelte +28 -30
- package/dist/components/page/BackToTop.svelte +30 -30
- package/dist/components/page/Docs.svelte +22 -19
- package/dist/components/page/Docs.svelte.d.ts +1 -1
- package/dist/components/page/ErrorMessage.svelte +8 -8
- package/dist/components/page/Footer.svelte +5 -5
- package/dist/components/page/Header.svelte +5 -4
- package/dist/components/page/HelpPopUp.svelte +31 -25
- package/dist/components/page/HelpPopUp.svelte.d.ts +5 -12
- package/dist/components/page/Page.svelte +57 -67
- package/dist/components/page/Page.svelte.d.ts +2 -2
- package/dist/components/page/PageCaller.js +19 -21
- package/dist/components/page/Spinner.svelte +9 -10
- package/dist/components/page/Spinner.svelte.d.ts +1 -1
- package/dist/components/page/breadcrumb/Breadcrumb.svelte +19 -23
- package/dist/components/page/menu/Menu.svelte +48 -22
- package/dist/components/page/menu/MenuBar.svelte +8 -14
- package/dist/components/page/menu/MenuBar.svelte.d.ts +1 -1
- package/dist/components/page/menu/MenuDataCaller.js +10 -11
- package/dist/components/page/menu/MenuItem.svelte +28 -15
- package/dist/components/page/menu/MenuItem.svelte.d.ts +2 -1
- package/dist/components/page/menu/MenuSublist.svelte +14 -16
- package/dist/components/page/menu/MenuSublist.svelte.d.ts +2 -3
- package/dist/components/page/menu/SettingsBar.svelte +22 -14
- package/dist/components/page/menu/SettingsBar.svelte.d.ts +2 -2
- package/dist/css/core.ui.postcss +10 -7
- package/dist/css/themes/theme-bexis2.css +12 -13
- package/dist/index.d.ts +3 -5
- package/dist/index.js +5 -5
- package/dist/models/Enums.d.ts +18 -0
- package/dist/models/Enums.js +22 -0
- package/dist/models/Models.d.ts +18 -0
- package/dist/models/Models.js +1 -2
- package/dist/models/Page.d.ts +31 -0
- package/dist/services/BaseCaller.js +16 -21
- package/dist/stores/pageStores.d.ts +4 -4
- package/dist/stores/pageStores.js +27 -27
- package/package.json +2 -2
- package/src/lib/components/Table/Table.svelte +246 -246
- package/src/lib/components/Table/TableFilter.svelte +8 -8
- package/src/lib/components/Table/TablePagination.svelte +61 -61
- package/src/lib/components/Table/filter.ts +141 -141
- package/src/lib/components/file/FileUploader.svelte +184 -184
- package/src/lib/components/form/Checkbox.svelte +1 -1
- package/src/lib/components/form/DateInput.svelte +0 -1
- package/src/lib/components/form/DropdownKvP.svelte +5 -11
- package/src/lib/components/form/InputContainer.svelte +36 -44
- package/src/lib/components/form/MultiSelect.svelte +163 -178
- package/src/lib/components/form/NumberInput.svelte +3 -5
- package/src/lib/components/form/TextArea.svelte +26 -27
- package/src/lib/components/form/TextInput.svelte +2 -5
- package/src/lib/components/page/Alert.svelte +41 -45
- package/src/lib/components/page/BackToTop.svelte +30 -30
- package/src/lib/components/page/Docs.svelte +46 -44
- package/src/lib/components/page/ErrorMessage.svelte +10 -12
- package/src/lib/components/page/Footer.svelte +18 -22
- package/src/lib/components/page/Header.svelte +18 -21
- package/src/lib/components/page/HelpPopUp.svelte +72 -66
- package/src/lib/components/page/Page.svelte +96 -109
- package/src/lib/components/page/PageCaller.js +19 -21
- package/src/lib/components/page/Spinner.svelte +13 -15
- package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +31 -43
- package/src/lib/components/page/menu/Menu.svelte +61 -43
- package/src/lib/components/page/menu/MenuBar.svelte +18 -29
- package/src/lib/components/page/menu/MenuDataCaller.js +10 -11
- package/src/lib/components/page/menu/MenuItem.svelte +45 -34
- package/src/lib/components/page/menu/MenuSublist.svelte +33 -41
- package/src/lib/components/page/menu/SettingsBar.svelte +39 -37
- package/src/lib/css/core.ui.postcss +10 -7
- package/src/lib/css/themes/theme-bexis2.css +12 -13
- package/src/lib/index.ts +78 -77
- package/src/lib/models/Enums.ts +32 -11
- package/src/lib/models/Models.ts +136 -113
- package/src/lib/models/Page.ts +40 -41
- package/src/lib/services/BaseCaller.js +16 -21
- package/src/lib/stores/apiStores.ts +31 -32
- package/src/lib/stores/pageStores.ts +121 -126
|
@@ -1,184 +1,184 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { fileUploaderModel, fileInfoType, filesType } from '../../models/Models.js';
|
|
3
|
-
|
|
4
|
-
import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
|
|
5
|
-
import Fa from 'svelte-fa/src/fa.svelte';
|
|
6
|
-
|
|
7
|
-
import Spinner from '../page/Spinner.svelte';
|
|
8
|
-
import { createEventDispatcher } from 'svelte';
|
|
9
|
-
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
|
10
|
-
import { faSave } from '@fortawesome/free-regular-svg-icons';
|
|
11
|
-
import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
|
|
12
|
-
|
|
13
|
-
import { Api } from '../../services/Api.js';
|
|
14
|
-
|
|
15
|
-
export let id = 0;
|
|
16
|
-
export let version = 1;
|
|
17
|
-
|
|
18
|
-
import { onMount } from 'svelte';
|
|
19
|
-
|
|
20
|
-
// export let description="";
|
|
21
|
-
// export let status=0;
|
|
22
|
-
|
|
23
|
-
//action to load fileupload model
|
|
24
|
-
export let start = '';
|
|
25
|
-
//action to save selected file
|
|
26
|
-
export let submit = '';
|
|
27
|
-
|
|
28
|
-
export let context = '';
|
|
29
|
-
|
|
30
|
-
export let data: fileUploaderModel | undefined;
|
|
31
|
-
|
|
32
|
-
$: model = data;
|
|
33
|
-
$: submitBt = 'submit';
|
|
34
|
-
|
|
35
|
-
let maxSize = 0;
|
|
36
|
-
|
|
37
|
-
const dispatch = createEventDispatcher();
|
|
38
|
-
|
|
39
|
-
let fx: fileInfoType[];
|
|
40
|
-
|
|
41
|
-
let files: filesType = { accepted: [], rejected: [] };
|
|
42
|
-
$: files;
|
|
43
|
-
|
|
44
|
-
onMount(async () => {
|
|
45
|
-
//console.log('fileupload - OnMount', data);
|
|
46
|
-
|
|
47
|
-
if (!data) {
|
|
48
|
-
load();
|
|
49
|
-
} else {
|
|
50
|
-
model = data;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
if (model) {
|
|
54
|
-
submitBt += context;
|
|
55
|
-
maxSize = model.maxSize * 1024 * 1024;
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
// load modal from server
|
|
60
|
-
async function load() {
|
|
61
|
-
let url = start + '?id=' + id + '&version=' + version;
|
|
62
|
-
|
|
63
|
-
// load menu froms server
|
|
64
|
-
const res = await Api.get(url);
|
|
65
|
-
model = await res.data();
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function handleFilesSelect(e: any) {
|
|
71
|
-
//console.log('handleFilesSelect', e);
|
|
72
|
-
console.log('files', files);
|
|
73
|
-
|
|
74
|
-
const { acceptedFiles, fileRejections } = e.detail;
|
|
75
|
-
|
|
76
|
-
files.accepted = [...files.accepted, ...acceptedFiles];
|
|
77
|
-
files.rejected = [...files.rejected, ...fileRejections];
|
|
78
|
-
|
|
79
|
-
//console.log('acceptedFiles', acceptedFiles);
|
|
80
|
-
console.log('files.accepted', files.accepted);
|
|
81
|
-
|
|
82
|
-
if (fileRejections.length > 0) {
|
|
83
|
-
//alert("the dropped file is not supported");
|
|
84
|
-
//console.log('the dropped file is not supported.');
|
|
85
|
-
console.log(files.rejected);
|
|
86
|
-
|
|
87
|
-
let messages = [''];
|
|
88
|
-
|
|
89
|
-
for (let index = 0; index < fileRejections.length; index++) {
|
|
90
|
-
const element = fileRejections[index];
|
|
91
|
-
messages.push(getErrorMessage(element));
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
//console.log(messages);
|
|
95
|
-
|
|
96
|
-
dispatch('error', { messages });
|
|
97
|
-
//list up the errors somewhere
|
|
98
|
-
files.rejected = [];
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
if (acceptedFiles.length > 0) {
|
|
102
|
-
document.getElementById(submitBt)?.click();
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
function getErrorMessage(rejected) {
|
|
107
|
-
let message = '';
|
|
108
|
-
message = rejected.file.path + ' : ';
|
|
109
|
-
let errors = rejected.errors;
|
|
110
|
-
for (let index = 0; index < errors.length; index++) {
|
|
111
|
-
const error = errors[index];
|
|
112
|
-
message += error.message;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
return message;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
async function handleSubmit() {
|
|
119
|
-
//console.log('SUBMIT');
|
|
120
|
-
|
|
121
|
-
dispatch('submit');
|
|
122
|
-
|
|
123
|
-
let url = submit + '?id=' + id;
|
|
124
|
-
|
|
125
|
-
// //console.log(model);
|
|
126
|
-
// //console.log(url);
|
|
127
|
-
//console.log('SUBMIT');
|
|
128
|
-
|
|
129
|
-
if (files.accepted.length > 0) {
|
|
130
|
-
//console.log(files);
|
|
131
|
-
|
|
132
|
-
const formData = new FormData();
|
|
133
|
-
formData.append('files', '123');
|
|
134
|
-
// Looping over all files and add it to FormData object
|
|
135
|
-
for (var i = 0; i < files.accepted.length; i++) {
|
|
136
|
-
formData.append(files.accepted[i].name, files.accepted[i]);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
const response = await Api.post(url, formData);
|
|
140
|
-
|
|
141
|
-
if (response.status == 200) {
|
|
142
|
-
dispatch('submited');
|
|
143
|
-
|
|
144
|
-
let message = files.accepted.length + ' is/are uploaded';
|
|
145
|
-
dispatch('success', { text: message });
|
|
146
|
-
|
|
147
|
-
files.accepted = [];
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
</script>
|
|
152
|
-
|
|
153
|
-
<form on:submit|preventDefault={handleSubmit}>
|
|
154
|
-
{#if model}
|
|
155
|
-
<!--if model exist -->
|
|
156
|
-
<div>
|
|
157
|
-
<DropZone
|
|
158
|
-
on:drop={handleFilesSelect}
|
|
159
|
-
accept={model.accept}
|
|
160
|
-
multiple={model.multiple}
|
|
161
|
-
{maxSize}
|
|
162
|
-
>
|
|
163
|
-
<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
|
|
164
|
-
<span
|
|
165
|
-
><b>Drag 'n' drop some files here, or click to select files</b>
|
|
166
|
-
<b>max file : {model.maxSize} mb</b></span
|
|
167
|
-
>
|
|
168
|
-
<p>
|
|
169
|
-
{#if model.accept}
|
|
170
|
-
{#each model.accept as ext}
|
|
171
|
-
{ext} ,
|
|
172
|
-
{/each}
|
|
173
|
-
{/if}
|
|
174
|
-
</p>
|
|
175
|
-
</DropZone>
|
|
176
|
-
</div>
|
|
177
|
-
|
|
178
|
-
<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
|
|
179
|
-
{:else}
|
|
180
|
-
<!-- while data is not loaded show a loading information -->
|
|
181
|
-
|
|
182
|
-
<Spinner />
|
|
183
|
-
{/if}
|
|
184
|
-
</form>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { fileUploaderModel, fileInfoType, filesType } from '../../models/Models.js';
|
|
3
|
+
|
|
4
|
+
import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
|
|
5
|
+
import Fa from 'svelte-fa/src/fa.svelte';
|
|
6
|
+
|
|
7
|
+
import Spinner from '../page/Spinner.svelte';
|
|
8
|
+
import { createEventDispatcher } from 'svelte';
|
|
9
|
+
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
|
10
|
+
import { faSave } from '@fortawesome/free-regular-svg-icons';
|
|
11
|
+
import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
|
|
12
|
+
|
|
13
|
+
import { Api } from '../../services/Api.js';
|
|
14
|
+
|
|
15
|
+
export let id = 0;
|
|
16
|
+
export let version = 1;
|
|
17
|
+
|
|
18
|
+
import { onMount } from 'svelte';
|
|
19
|
+
|
|
20
|
+
// export let description="";
|
|
21
|
+
// export let status=0;
|
|
22
|
+
|
|
23
|
+
//action to load fileupload model
|
|
24
|
+
export let start = '';
|
|
25
|
+
//action to save selected file
|
|
26
|
+
export let submit = '';
|
|
27
|
+
|
|
28
|
+
export let context = '';
|
|
29
|
+
|
|
30
|
+
export let data: fileUploaderModel | undefined;
|
|
31
|
+
|
|
32
|
+
$: model = data;
|
|
33
|
+
$: submitBt = 'submit';
|
|
34
|
+
|
|
35
|
+
let maxSize = 0;
|
|
36
|
+
|
|
37
|
+
const dispatch = createEventDispatcher();
|
|
38
|
+
|
|
39
|
+
let fx: fileInfoType[];
|
|
40
|
+
|
|
41
|
+
let files: filesType = { accepted: [], rejected: [] };
|
|
42
|
+
$: files;
|
|
43
|
+
|
|
44
|
+
onMount(async () => {
|
|
45
|
+
//console.log('fileupload - OnMount', data);
|
|
46
|
+
|
|
47
|
+
if (!data) {
|
|
48
|
+
load();
|
|
49
|
+
} else {
|
|
50
|
+
model = data;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
if (model) {
|
|
54
|
+
submitBt += context;
|
|
55
|
+
maxSize = model.maxSize * 1024 * 1024;
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
// load modal from server
|
|
60
|
+
async function load() {
|
|
61
|
+
let url = start + '?id=' + id + '&version=' + version;
|
|
62
|
+
|
|
63
|
+
// load menu froms server
|
|
64
|
+
const res = await Api.get(url);
|
|
65
|
+
model = await res.data();
|
|
66
|
+
|
|
67
|
+
console.log('fileupload', model);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function handleFilesSelect(e: any) {
|
|
71
|
+
//console.log('handleFilesSelect', e);
|
|
72
|
+
console.log('files', files);
|
|
73
|
+
|
|
74
|
+
const { acceptedFiles, fileRejections } = e.detail;
|
|
75
|
+
|
|
76
|
+
files.accepted = [...files.accepted, ...acceptedFiles];
|
|
77
|
+
files.rejected = [...files.rejected, ...fileRejections];
|
|
78
|
+
|
|
79
|
+
//console.log('acceptedFiles', acceptedFiles);
|
|
80
|
+
console.log('files.accepted', files.accepted);
|
|
81
|
+
|
|
82
|
+
if (fileRejections.length > 0) {
|
|
83
|
+
//alert("the dropped file is not supported");
|
|
84
|
+
//console.log('the dropped file is not supported.');
|
|
85
|
+
console.log(files.rejected);
|
|
86
|
+
|
|
87
|
+
let messages = [''];
|
|
88
|
+
|
|
89
|
+
for (let index = 0; index < fileRejections.length; index++) {
|
|
90
|
+
const element = fileRejections[index];
|
|
91
|
+
messages.push(getErrorMessage(element));
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
//console.log(messages);
|
|
95
|
+
|
|
96
|
+
dispatch('error', { messages });
|
|
97
|
+
//list up the errors somewhere
|
|
98
|
+
files.rejected = [];
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (acceptedFiles.length > 0) {
|
|
102
|
+
document.getElementById(submitBt)?.click();
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
function getErrorMessage(rejected) {
|
|
107
|
+
let message = '';
|
|
108
|
+
message = rejected.file.path + ' : ';
|
|
109
|
+
let errors = rejected.errors;
|
|
110
|
+
for (let index = 0; index < errors.length; index++) {
|
|
111
|
+
const error = errors[index];
|
|
112
|
+
message += error.message;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
return message;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
async function handleSubmit() {
|
|
119
|
+
//console.log('SUBMIT');
|
|
120
|
+
|
|
121
|
+
dispatch('submit');
|
|
122
|
+
|
|
123
|
+
let url = submit + '?id=' + id;
|
|
124
|
+
|
|
125
|
+
// //console.log(model);
|
|
126
|
+
// //console.log(url);
|
|
127
|
+
//console.log('SUBMIT');
|
|
128
|
+
|
|
129
|
+
if (files.accepted.length > 0) {
|
|
130
|
+
//console.log(files);
|
|
131
|
+
|
|
132
|
+
const formData = new FormData();
|
|
133
|
+
formData.append('files', '123');
|
|
134
|
+
// Looping over all files and add it to FormData object
|
|
135
|
+
for (var i = 0; i < files.accepted.length; i++) {
|
|
136
|
+
formData.append(files.accepted[i].name, files.accepted[i]);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
const response = await Api.post(url, formData);
|
|
140
|
+
|
|
141
|
+
if (response.status == 200) {
|
|
142
|
+
dispatch('submited');
|
|
143
|
+
|
|
144
|
+
let message = files.accepted.length + ' is/are uploaded';
|
|
145
|
+
dispatch('success', { text: message });
|
|
146
|
+
|
|
147
|
+
files.accepted = [];
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
</script>
|
|
152
|
+
|
|
153
|
+
<form on:submit|preventDefault={handleSubmit}>
|
|
154
|
+
{#if model}
|
|
155
|
+
<!--if model exist -->
|
|
156
|
+
<div>
|
|
157
|
+
<DropZone
|
|
158
|
+
on:drop={handleFilesSelect}
|
|
159
|
+
accept={model.accept}
|
|
160
|
+
multiple={model.multiple}
|
|
161
|
+
{maxSize}
|
|
162
|
+
>
|
|
163
|
+
<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
|
|
164
|
+
<span
|
|
165
|
+
><b>Drag 'n' drop some files here, or click to select files</b>
|
|
166
|
+
<b>max file : {model.maxSize} mb</b></span
|
|
167
|
+
>
|
|
168
|
+
<p>
|
|
169
|
+
{#if model.accept}
|
|
170
|
+
{#each model.accept as ext}
|
|
171
|
+
{ext} ,
|
|
172
|
+
{/each}
|
|
173
|
+
{/if}
|
|
174
|
+
</p>
|
|
175
|
+
</DropZone>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
|
|
179
|
+
{:else}
|
|
180
|
+
<!-- while data is not loaded show a loading information -->
|
|
181
|
+
|
|
182
|
+
<Spinner />
|
|
183
|
+
{/if}
|
|
184
|
+
</form>
|
|
@@ -19,24 +19,18 @@
|
|
|
19
19
|
|
|
20
20
|
function updatedSelectedValue(selection) {
|
|
21
21
|
if (selection != null) {
|
|
22
|
-
if(complexTarget)
|
|
23
|
-
{
|
|
22
|
+
if (complexTarget) {
|
|
24
23
|
selected = selection.id;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
{
|
|
28
|
-
selected = selection
|
|
24
|
+
} else {
|
|
25
|
+
selected = selection;
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
28
|
}
|
|
32
29
|
|
|
33
30
|
function updatedTarget(id) {
|
|
34
|
-
if(complexTarget)
|
|
35
|
-
{
|
|
31
|
+
if (complexTarget) {
|
|
36
32
|
target = source.find((opt) => opt.id === id);
|
|
37
|
-
}
|
|
38
|
-
else
|
|
39
|
-
{
|
|
33
|
+
} else {
|
|
40
34
|
target = id;
|
|
41
35
|
}
|
|
42
36
|
}
|
|
@@ -1,44 +1,36 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { helpStore } from '$store/pageStores'
|
|
3
|
-
|
|
4
|
-
export let id: string = '';
|
|
5
|
-
export let label: string = '';
|
|
6
|
-
export let required: boolean;
|
|
7
|
-
export let feedback: string[];
|
|
8
|
-
export let help:boolean=false;
|
|
9
|
-
|
|
10
|
-
function onMouseOver()
|
|
11
|
-
{
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
{
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
{#each feedback as message}
|
|
38
|
-
<li>{message}</li>
|
|
39
|
-
{/each}
|
|
40
|
-
</ul>
|
|
41
|
-
</span>
|
|
42
|
-
{/if}
|
|
43
|
-
</label>
|
|
44
|
-
</div>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { helpStore } from '$store/pageStores';
|
|
3
|
+
|
|
4
|
+
export let id: string = '';
|
|
5
|
+
export let label: string = '';
|
|
6
|
+
export let required: boolean;
|
|
7
|
+
export let feedback: string[];
|
|
8
|
+
export let help: boolean = false;
|
|
9
|
+
|
|
10
|
+
function onMouseOver() {
|
|
11
|
+
if (help) {
|
|
12
|
+
helpStore.show(id);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function onMouseOut() {}
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
|
|
20
|
+
<label class="label">
|
|
21
|
+
<span
|
|
22
|
+
>{label}
|
|
23
|
+
{#if required} <span class="text-sm text-red-600">*</span> {/if}
|
|
24
|
+
</span>
|
|
25
|
+
<slot />
|
|
26
|
+
{#if feedback}
|
|
27
|
+
<span class="text-sm text-error-600">
|
|
28
|
+
<ul>
|
|
29
|
+
{#each feedback as message}
|
|
30
|
+
<li>{message}</li>
|
|
31
|
+
{/each}
|
|
32
|
+
</ul>
|
|
33
|
+
</span>
|
|
34
|
+
{/if}
|
|
35
|
+
</label>
|
|
36
|
+
</div>
|