@bexis2/bexis2-core-ui 0.2.11 → 0.2.12
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 +263 -214
- package/dist/components/Table/Table.svelte +85 -85
- package/dist/components/Table/TableFilter.svelte +109 -109
- 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 +25 -25
- package/dist/components/page/menu/MenuBar.svelte +7 -14
- package/dist/components/page/menu/MenuBar.svelte.d.ts +2 -2
- package/dist/components/page/menu/MenuDataCaller.js +10 -11
- package/dist/components/page/menu/MenuItem.svelte +9 -13
- package/dist/components/page/menu/MenuItem.svelte.d.ts +2 -1
- package/dist/components/page/menu/MenuSublist.svelte +18 -17
- package/dist/components/page/menu/MenuSublist.svelte.d.ts +2 -2
- package/dist/components/page/menu/SettingsBar.svelte +9 -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 +1 -3
- package/dist/index.js +4 -4
- package/dist/models/Models.js +0 -1
- 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 +222 -222
- 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 +40 -47
- package/src/lib/components/page/menu/MenuBar.svelte +20 -31
- package/src/lib/components/page/menu/MenuDataCaller.js +10 -11
- package/src/lib/components/page/menu/MenuItem.svelte +27 -33
- package/src/lib/components/page/menu/MenuSublist.svelte +43 -48
- package/src/lib/components/page/menu/SettingsBar.svelte +31 -40
- package/src/lib/css/core.ui.postcss +10 -7
- package/src/lib/css/themes/theme-bexis2.css +12 -13
- package/src/lib/index.ts +75 -77
- package/src/lib/models/Enums.ts +10 -11
- package/src/lib/models/Models.ts +113 -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
|
@@ -103,112 +103,112 @@ if (type === "object") {
|
|
|
103
103
|
type = "date";
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
-
</script>
|
|
107
|
-
|
|
108
|
-
<form class="">
|
|
109
|
-
<button
|
|
110
|
-
class:variant-filled-primary={active}
|
|
111
|
-
class="btn w-max p-2"
|
|
112
|
-
type="button"
|
|
113
|
-
use:popup={popupFeatured}
|
|
114
|
-
>
|
|
115
|
-
<Fa icon={faFilter} size="12" />
|
|
116
|
-
</button>
|
|
117
|
-
|
|
118
|
-
<div data-popup={`${popupId}`}>
|
|
119
|
-
<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
|
|
120
|
-
<button
|
|
121
|
-
class="btn variant-filled-primary btn-sm"
|
|
122
|
-
type="button"
|
|
123
|
-
on:click|preventDefault={() => {
|
|
124
|
-
firstOption = 'isequal';
|
|
125
|
-
firstValue = undefined;
|
|
126
|
-
secondOption = 'isequal';
|
|
127
|
-
secondValue = undefined;
|
|
128
|
-
|
|
129
|
-
$filterValue = [firstOption, firstValue, secondOption, secondValue];
|
|
130
|
-
active = false;
|
|
131
|
-
}}>Clear Filter</button
|
|
132
|
-
>
|
|
133
|
-
|
|
134
|
-
<label for="" class="label normal-case text-sm">Show rows with value that</label>
|
|
135
|
-
<div class="grid gap-2 w-full">
|
|
136
|
-
<select
|
|
137
|
-
class="select border border-primary-500 text-sm p-1"
|
|
138
|
-
aria-label="Show rows with value that"
|
|
139
|
-
bind:value={firstOption}
|
|
140
|
-
on:click|stopPropagation
|
|
141
|
-
>
|
|
142
|
-
{#each options[type] as option (option)}
|
|
143
|
-
<option value={option.value}>{option.label}</option>
|
|
144
|
-
{/each}
|
|
145
|
-
</select>
|
|
146
|
-
{#if type === 'number'}
|
|
147
|
-
<input
|
|
148
|
-
type="number"
|
|
149
|
-
class="input p-1 border border-primary-500"
|
|
150
|
-
bind:value={firstValue}
|
|
151
|
-
on:click|stopPropagation
|
|
152
|
-
/>
|
|
153
|
-
{:else if type === 'string'}
|
|
154
|
-
<input
|
|
155
|
-
type="text"
|
|
156
|
-
class="input p-1 border border-primary-500"
|
|
157
|
-
bind:value={firstValue}
|
|
158
|
-
on:click|stopPropagation
|
|
159
|
-
/>
|
|
160
|
-
{:else}
|
|
161
|
-
<input
|
|
162
|
-
type="date"
|
|
163
|
-
class="input p-1 border border-primary-500"
|
|
164
|
-
bind:value={firstValue}
|
|
165
|
-
on:click|stopPropagation
|
|
166
|
-
/>
|
|
167
|
-
{/if}
|
|
168
|
-
</div>
|
|
169
|
-
<label for="" class="label normal-case">And</label>
|
|
170
|
-
<div class="grid gap-2 w-max">
|
|
171
|
-
<select
|
|
172
|
-
class="select border border-primary-500 text-sm p-1"
|
|
173
|
-
aria-label="Show rows with value that"
|
|
174
|
-
bind:value={secondOption}
|
|
175
|
-
on:click|stopPropagation
|
|
176
|
-
>
|
|
177
|
-
{#each options[type] as option (option)}
|
|
178
|
-
<option value={option.value}>{option.label}</option>
|
|
179
|
-
{/each}
|
|
180
|
-
</select>
|
|
181
|
-
{#if type === 'number'}
|
|
182
|
-
<input
|
|
183
|
-
type="number"
|
|
184
|
-
class="input p-1 border border-primary-500"
|
|
185
|
-
bind:value={secondValue}
|
|
186
|
-
on:click|stopPropagation
|
|
187
|
-
/>
|
|
188
|
-
{:else if type === 'string'}
|
|
189
|
-
<input
|
|
190
|
-
type="text"
|
|
191
|
-
class="input p-1 border border-primary-500"
|
|
192
|
-
bind:value={secondValue}
|
|
193
|
-
on:click|stopPropagation
|
|
194
|
-
/>
|
|
195
|
-
{:else}
|
|
196
|
-
<input
|
|
197
|
-
type="date"
|
|
198
|
-
class="input p-1 border border-primary-500"
|
|
199
|
-
bind:value={secondValue}
|
|
200
|
-
on:click|stopPropagation
|
|
201
|
-
/>
|
|
202
|
-
{/if}
|
|
203
|
-
</div>
|
|
204
|
-
<button
|
|
205
|
-
class="btn variant-filled-primary btn-sm"
|
|
206
|
-
type="button"
|
|
207
|
-
on:click|preventDefault={() => {
|
|
208
|
-
active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
|
|
209
|
-
$filterValue = [firstOption, firstValue, secondOption, secondValue];
|
|
210
|
-
}}>Apply</button
|
|
211
|
-
>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
</form>
|
|
106
|
+
</script>
|
|
107
|
+
|
|
108
|
+
<form class="">
|
|
109
|
+
<button
|
|
110
|
+
class:variant-filled-primary={active}
|
|
111
|
+
class="btn w-max p-2"
|
|
112
|
+
type="button"
|
|
113
|
+
use:popup={popupFeatured}
|
|
114
|
+
>
|
|
115
|
+
<Fa icon={faFilter} size="12" />
|
|
116
|
+
</button>
|
|
117
|
+
|
|
118
|
+
<div data-popup={`${popupId}`}>
|
|
119
|
+
<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
|
|
120
|
+
<button
|
|
121
|
+
class="btn variant-filled-primary btn-sm"
|
|
122
|
+
type="button"
|
|
123
|
+
on:click|preventDefault={() => {
|
|
124
|
+
firstOption = 'isequal';
|
|
125
|
+
firstValue = undefined;
|
|
126
|
+
secondOption = 'isequal';
|
|
127
|
+
secondValue = undefined;
|
|
128
|
+
|
|
129
|
+
$filterValue = [firstOption, firstValue, secondOption, secondValue];
|
|
130
|
+
active = false;
|
|
131
|
+
}}>Clear Filter</button
|
|
132
|
+
>
|
|
133
|
+
|
|
134
|
+
<label for="" class="label normal-case text-sm">Show rows with value that</label>
|
|
135
|
+
<div class="grid gap-2 w-full">
|
|
136
|
+
<select
|
|
137
|
+
class="select border border-primary-500 text-sm p-1"
|
|
138
|
+
aria-label="Show rows with value that"
|
|
139
|
+
bind:value={firstOption}
|
|
140
|
+
on:click|stopPropagation
|
|
141
|
+
>
|
|
142
|
+
{#each options[type] as option (option)}
|
|
143
|
+
<option value={option.value}>{option.label}</option>
|
|
144
|
+
{/each}
|
|
145
|
+
</select>
|
|
146
|
+
{#if type === 'number'}
|
|
147
|
+
<input
|
|
148
|
+
type="number"
|
|
149
|
+
class="input p-1 border border-primary-500"
|
|
150
|
+
bind:value={firstValue}
|
|
151
|
+
on:click|stopPropagation
|
|
152
|
+
/>
|
|
153
|
+
{:else if type === 'string'}
|
|
154
|
+
<input
|
|
155
|
+
type="text"
|
|
156
|
+
class="input p-1 border border-primary-500"
|
|
157
|
+
bind:value={firstValue}
|
|
158
|
+
on:click|stopPropagation
|
|
159
|
+
/>
|
|
160
|
+
{:else}
|
|
161
|
+
<input
|
|
162
|
+
type="date"
|
|
163
|
+
class="input p-1 border border-primary-500"
|
|
164
|
+
bind:value={firstValue}
|
|
165
|
+
on:click|stopPropagation
|
|
166
|
+
/>
|
|
167
|
+
{/if}
|
|
168
|
+
</div>
|
|
169
|
+
<label for="" class="label normal-case">And</label>
|
|
170
|
+
<div class="grid gap-2 w-max">
|
|
171
|
+
<select
|
|
172
|
+
class="select border border-primary-500 text-sm p-1"
|
|
173
|
+
aria-label="Show rows with value that"
|
|
174
|
+
bind:value={secondOption}
|
|
175
|
+
on:click|stopPropagation
|
|
176
|
+
>
|
|
177
|
+
{#each options[type] as option (option)}
|
|
178
|
+
<option value={option.value}>{option.label}</option>
|
|
179
|
+
{/each}
|
|
180
|
+
</select>
|
|
181
|
+
{#if type === 'number'}
|
|
182
|
+
<input
|
|
183
|
+
type="number"
|
|
184
|
+
class="input p-1 border border-primary-500"
|
|
185
|
+
bind:value={secondValue}
|
|
186
|
+
on:click|stopPropagation
|
|
187
|
+
/>
|
|
188
|
+
{:else if type === 'string'}
|
|
189
|
+
<input
|
|
190
|
+
type="text"
|
|
191
|
+
class="input p-1 border border-primary-500"
|
|
192
|
+
bind:value={secondValue}
|
|
193
|
+
on:click|stopPropagation
|
|
194
|
+
/>
|
|
195
|
+
{:else}
|
|
196
|
+
<input
|
|
197
|
+
type="date"
|
|
198
|
+
class="input p-1 border border-primary-500"
|
|
199
|
+
bind:value={secondValue}
|
|
200
|
+
on:click|stopPropagation
|
|
201
|
+
/>
|
|
202
|
+
{/if}
|
|
203
|
+
</div>
|
|
204
|
+
<button
|
|
205
|
+
class="btn variant-filled-primary btn-sm"
|
|
206
|
+
type="button"
|
|
207
|
+
on:click|preventDefault={() => {
|
|
208
|
+
active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
|
|
209
|
+
$filterValue = [firstOption, firstValue, secondOption, secondValue];
|
|
210
|
+
}}>Apply</button
|
|
211
|
+
>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
</form>
|
|
@@ -20,41 +20,41 @@ $:
|
|
|
20
20
|
goToNextPageDisabled = !$hasNextPage;
|
|
21
21
|
$:
|
|
22
22
|
goToPreviousPageDisabled = !$hasPreviousPage;
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<div class="flex justify-center gap-1">
|
|
26
|
-
<button
|
|
27
|
-
class="btn btn-sm variant-filled-primary"
|
|
28
|
-
on:click|preventDefault={goToFirstPage}
|
|
29
|
-
disabled={goToFirstPageDisabled}
|
|
30
|
-
>
|
|
31
|
-
<Fa icon={faAnglesLeft} /></button
|
|
32
|
-
>
|
|
33
|
-
<button
|
|
34
|
-
class="btn btn-sm variant-filled-primary"
|
|
35
|
-
on:click|preventDefault={goToPreviousPage}
|
|
36
|
-
disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
|
|
37
|
-
>
|
|
38
|
-
|
|
39
|
-
<select
|
|
40
|
-
name="pageSize"
|
|
41
|
-
id="pageSize"
|
|
42
|
-
class="select variant-filled-primary w-min font-bold"
|
|
43
|
-
bind:value={$pageSize}
|
|
44
|
-
>
|
|
45
|
-
{#each pageSizes as size}
|
|
46
|
-
<option value={size}>{size}</option>
|
|
47
|
-
{/each}
|
|
48
|
-
</select>
|
|
49
|
-
|
|
50
|
-
<button
|
|
51
|
-
class="btn btn-sm variant-filled-primary"
|
|
52
|
-
on:click|preventDefault={goToNextPage}
|
|
53
|
-
disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
|
|
54
|
-
>
|
|
55
|
-
<button
|
|
56
|
-
class="btn btn-sm variant-filled-primary"
|
|
57
|
-
on:click|preventDefault={goToLastPage}
|
|
58
|
-
disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
|
|
59
|
-
>
|
|
60
|
-
</div>
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<div class="flex justify-center gap-1">
|
|
26
|
+
<button
|
|
27
|
+
class="btn btn-sm variant-filled-primary"
|
|
28
|
+
on:click|preventDefault={goToFirstPage}
|
|
29
|
+
disabled={goToFirstPageDisabled}
|
|
30
|
+
>
|
|
31
|
+
<Fa icon={faAnglesLeft} /></button
|
|
32
|
+
>
|
|
33
|
+
<button
|
|
34
|
+
class="btn btn-sm variant-filled-primary"
|
|
35
|
+
on:click|preventDefault={goToPreviousPage}
|
|
36
|
+
disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
|
|
37
|
+
>
|
|
38
|
+
|
|
39
|
+
<select
|
|
40
|
+
name="pageSize"
|
|
41
|
+
id="pageSize"
|
|
42
|
+
class="select variant-filled-primary w-min font-bold"
|
|
43
|
+
bind:value={$pageSize}
|
|
44
|
+
>
|
|
45
|
+
{#each pageSizes as size}
|
|
46
|
+
<option value={size}>{size}</option>
|
|
47
|
+
{/each}
|
|
48
|
+
</select>
|
|
49
|
+
|
|
50
|
+
<button
|
|
51
|
+
class="btn btn-sm variant-filled-primary"
|
|
52
|
+
on:click|preventDefault={goToNextPage}
|
|
53
|
+
disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
|
|
54
|
+
>
|
|
55
|
+
<button
|
|
56
|
+
class="btn btn-sm variant-filled-primary"
|
|
57
|
+
on:click|preventDefault={goToLastPage}
|
|
58
|
+
disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
|
|
59
|
+
>
|
|
60
|
+
</div>
|
|
@@ -88,37 +88,37 @@ async function handleSubmit() {
|
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
</script>
|
|
92
|
-
|
|
93
|
-
<form on:submit|preventDefault={handleSubmit}>
|
|
94
|
-
{#if model}
|
|
95
|
-
<!--if model exist -->
|
|
96
|
-
<div>
|
|
97
|
-
<DropZone
|
|
98
|
-
on:drop={handleFilesSelect}
|
|
99
|
-
accept={model.accept}
|
|
100
|
-
multiple={model.multiple}
|
|
101
|
-
{maxSize}
|
|
102
|
-
>
|
|
103
|
-
<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
|
|
104
|
-
<span
|
|
105
|
-
><b>Drag 'n' drop some files here, or click to select files</b>
|
|
106
|
-
<b>max file : {model.maxSize} mb</b></span
|
|
107
|
-
>
|
|
108
|
-
<p>
|
|
109
|
-
{#if model.accept}
|
|
110
|
-
{#each model.accept as ext}
|
|
111
|
-
{ext} ,
|
|
112
|
-
{/each}
|
|
113
|
-
{/if}
|
|
114
|
-
</p>
|
|
115
|
-
</DropZone>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
|
|
119
|
-
{:else}
|
|
120
|
-
<!-- while data is not loaded show a loading information -->
|
|
121
|
-
|
|
122
|
-
<Spinner />
|
|
123
|
-
{/if}
|
|
124
|
-
</form>
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<form on:submit|preventDefault={handleSubmit}>
|
|
94
|
+
{#if model}
|
|
95
|
+
<!--if model exist -->
|
|
96
|
+
<div>
|
|
97
|
+
<DropZone
|
|
98
|
+
on:drop={handleFilesSelect}
|
|
99
|
+
accept={model.accept}
|
|
100
|
+
multiple={model.multiple}
|
|
101
|
+
{maxSize}
|
|
102
|
+
>
|
|
103
|
+
<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
|
|
104
|
+
<span
|
|
105
|
+
><b>Drag 'n' drop some files here, or click to select files</b>
|
|
106
|
+
<b>max file : {model.maxSize} mb</b></span
|
|
107
|
+
>
|
|
108
|
+
<p>
|
|
109
|
+
{#if model.accept}
|
|
110
|
+
{#each model.accept as ext}
|
|
111
|
+
{ext} ,
|
|
112
|
+
{/each}
|
|
113
|
+
{/if}
|
|
114
|
+
</p>
|
|
115
|
+
</DropZone>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
|
|
119
|
+
{:else}
|
|
120
|
+
<!-- while data is not loaded show a loading information -->
|
|
121
|
+
|
|
122
|
+
<Spinner />
|
|
123
|
+
{/if}
|
|
124
|
+
</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
|
}
|
|
@@ -11,22 +11,23 @@ function onMouseOver() {
|
|
|
11
11
|
}
|
|
12
12
|
function onMouseOut() {
|
|
13
13
|
}
|
|
14
|
-
</script>
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
|
|
17
|
+
<label class="label">
|
|
18
|
+
<span
|
|
19
|
+
>{label}
|
|
20
|
+
{#if required} <span class="text-sm text-red-600">*</span> {/if}
|
|
21
|
+
</span>
|
|
22
|
+
<slot />
|
|
23
|
+
{#if feedback}
|
|
24
|
+
<span class="text-sm text-error-600">
|
|
25
|
+
<ul>
|
|
26
|
+
{#each feedback as message}
|
|
27
|
+
<li>{message}</li>
|
|
28
|
+
{/each}
|
|
29
|
+
</ul>
|
|
30
|
+
</span>
|
|
31
|
+
{/if}
|
|
32
|
+
</label>
|
|
33
|
+
</div>
|