@bexis2/bexis2-core-ui 0.2.29 → 0.2.31
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 +18 -2
- package/dist/TableView.svelte +1 -1
- package/dist/components/CodeEditor/CodeEditor.svelte +32 -8
- package/dist/components/CodeEditor/CodeEditor.svelte.d.ts +1 -0
- package/dist/components/{file → File}/FileIcon.svelte +45 -45
- package/{src/lib/components/file → dist/components/File}/FileInfo.svelte +13 -13
- package/dist/components/ListView.svelte +5 -5
- package/dist/components/Table/Table.svelte +17 -2
- package/dist/components/Table/TableFilter.svelte +13 -6
- package/dist/components/form/Checkbox.svelte +13 -13
- package/dist/components/form/CheckboxKvPList.svelte +16 -16
- package/dist/components/form/CheckboxList.svelte +10 -10
- package/dist/components/form/DateInput.svelte +14 -14
- package/dist/components/form/DropdownKvP.svelte +54 -54
- package/dist/components/form/MultiSelect.svelte +181 -181
- package/dist/components/form/NumberInput.svelte +15 -15
- package/dist/components/form/TextArea.svelte +14 -14
- package/dist/components/form/TextInput.svelte +15 -15
- package/dist/components/page/Alert.svelte +28 -28
- package/dist/components/page/BackToTop.svelte +30 -30
- package/dist/components/page/Docs.svelte +22 -22
- package/dist/components/page/ErrorMessage.svelte +8 -8
- package/dist/components/page/Footer.svelte +5 -5
- package/dist/components/page/Header.svelte +5 -5
- package/dist/components/page/HelpPopUp.svelte +30 -30
- package/dist/components/page/PageCaller.js +19 -19
- package/dist/components/page/Spinner.svelte +14 -14
- package/dist/components/page/breadcrumb/Breadcrumb.svelte +19 -19
- package/dist/components/page/menu/MenuDataCaller.js +10 -10
- package/dist/css/core.ui.postcss +17 -17
- package/dist/css/themes/theme-bexis2.css +96 -96
- package/dist/css/themes/theme-crimson.css +101 -101
- package/dist/css/themes/theme-gold-nouveau.css +140 -140
- package/dist/css/themes/theme-hamlindigo.css +112 -112
- package/dist/css/themes/theme-modern.css +127 -127
- package/dist/css/themes/theme-rocket.css +119 -119
- package/dist/css/themes/theme-sahara.css +128 -128
- package/dist/css/themes/theme-seafoam.css +122 -122
- package/dist/css/themes/theme-seasonal.css +115 -115
- package/dist/css/themes/theme-skeleton.css +118 -118
- package/dist/css/themes/theme-vintage.css +125 -125
- package/dist/index.d.ts +3 -3
- package/dist/index.js +3 -3
- package/dist/models/Models.d.ts +3 -3
- package/dist/services/BaseCaller.js +16 -16
- package/package.json +3 -1
- package/src/lib/TableView.svelte +1 -1
- package/src/lib/components/CodeEditor/CodeEditor.svelte +43 -9
- package/src/lib/components/{file → File}/FileIcon.svelte +45 -45
- package/{dist/components/file → src/lib/components/File}/FileInfo.svelte +13 -13
- package/src/lib/components/ListView.svelte +11 -11
- package/src/lib/components/Table/Table.svelte +19 -3
- package/src/lib/components/Table/TableFilter.svelte +15 -6
- package/src/lib/components/Table/filter.ts +141 -141
- package/src/lib/components/form/Checkbox.svelte +24 -24
- package/src/lib/components/form/CheckboxKvPList.svelte +29 -29
- package/src/lib/components/form/CheckboxList.svelte +21 -21
- package/src/lib/components/form/DateInput.svelte +27 -27
- package/src/lib/components/form/DropdownKvP.svelte +54 -54
- package/src/lib/components/form/MultiSelect.svelte +181 -181
- package/src/lib/components/form/NumberInput.svelte +30 -30
- package/src/lib/components/form/TextArea.svelte +28 -28
- package/src/lib/components/form/TextInput.svelte +28 -28
- package/src/lib/components/page/Alert.svelte +41 -41
- package/src/lib/components/page/BackToTop.svelte +30 -30
- package/src/lib/components/page/Docs.svelte +46 -46
- package/src/lib/components/page/ErrorMessage.svelte +10 -10
- package/src/lib/components/page/Footer.svelte +18 -18
- package/src/lib/components/page/Header.svelte +18 -18
- package/src/lib/components/page/HelpPopUp.svelte +72 -72
- package/src/lib/components/page/PageCaller.js +19 -19
- package/src/lib/components/page/Spinner.svelte +20 -20
- package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +39 -39
- package/src/lib/components/page/menu/MenuDataCaller.js +10 -10
- package/src/lib/css/core.ui.postcss +17 -17
- package/src/lib/css/themes/theme-bexis2.css +96 -96
- package/src/lib/css/themes/theme-crimson.css +101 -101
- package/src/lib/css/themes/theme-gold-nouveau.css +140 -140
- package/src/lib/css/themes/theme-hamlindigo.css +112 -112
- package/src/lib/css/themes/theme-modern.css +127 -127
- package/src/lib/css/themes/theme-rocket.css +119 -119
- package/src/lib/css/themes/theme-sahara.css +128 -128
- package/src/lib/css/themes/theme-seafoam.css +122 -122
- package/src/lib/css/themes/theme-seasonal.css +115 -115
- package/src/lib/css/themes/theme-skeleton.css +118 -118
- package/src/lib/css/themes/theme-vintage.css +125 -125
- package/src/lib/index.ts +3 -3
- package/src/lib/models/Models.ts +3 -3
- package/src/lib/models/Page.ts +40 -40
- package/src/lib/services/Api.ts +55 -55
- package/src/lib/services/BaseCaller.js +16 -16
- package/src/lib/stores/apiStores.ts +31 -31
- /package/dist/components/{file → File}/FileIcon.svelte.d.ts +0 -0
- /package/dist/components/{file → File}/FileInfo.svelte.d.ts +0 -0
- /package/dist/components/{file → File}/FileUploader.svelte +0 -0
- /package/dist/components/{file → File}/FileUploader.svelte.d.ts +0 -0
- /package/src/lib/components/{file → File}/FileUploader.svelte +0 -0
|
@@ -1,181 +1,181 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import InputContainer from './InputContainer.svelte';
|
|
3
|
-
|
|
4
|
-
import Select from 'svelte-select';
|
|
5
|
-
import { onMount } from 'svelte';
|
|
6
|
-
|
|
7
|
-
export let source;
|
|
8
|
-
export let target;
|
|
9
|
-
export let id;
|
|
10
|
-
export let title;
|
|
11
|
-
export let itemId = 'value';
|
|
12
|
-
export let itemLabel = 'label';
|
|
13
|
-
export let itemGroup = 'group';
|
|
14
|
-
export let isMulti = true;
|
|
15
|
-
export let complexSource = false;
|
|
16
|
-
export let complexTarget = false;
|
|
17
|
-
export let required = false;
|
|
18
|
-
export let feedback = [''];
|
|
19
|
-
export let placeholder = '-- Please select --';
|
|
20
|
-
export let invalid = false;
|
|
21
|
-
export let loading = false;
|
|
22
|
-
export let help = false;
|
|
23
|
-
export let clearable = true;
|
|
24
|
-
export let disabled = false;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
let isLoaded = false;
|
|
28
|
-
|
|
29
|
-
$: value = null;
|
|
30
|
-
$: updateTarget(value);
|
|
31
|
-
$: target, setValue(target);
|
|
32
|
-
|
|
33
|
-
let groupBy;
|
|
34
|
-
$: groupBy;
|
|
35
|
-
|
|
36
|
-
function updateTarget(selection) {
|
|
37
|
-
//console.log("UPDATE target",selection);
|
|
38
|
-
//different cases
|
|
39
|
-
//a) source is complex model is simple return array
|
|
40
|
-
if (complexSource && !complexTarget && isLoaded && isMulti) {
|
|
41
|
-
//console.log('a) source is complex model is simple');
|
|
42
|
-
|
|
43
|
-
target = [];
|
|
44
|
-
for (let i in selection) {
|
|
45
|
-
let item = selection[i];
|
|
46
|
-
target.push(item[itemId]);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
if (!complexSource && !complexTarget && isLoaded && isMulti) {
|
|
51
|
-
target = [];
|
|
52
|
-
|
|
53
|
-
for (let i in selection) {
|
|
54
|
-
target.push(selection[i].value);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
if (complexSource && complexTarget && isLoaded && isMulti) {
|
|
59
|
-
//console.log("both complex",selection);
|
|
60
|
-
target = selection;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
if (complexSource && complexTarget && isLoaded && !isMulti) {
|
|
64
|
-
target = selection;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
if (!complexSource && !complexTarget && isLoaded && !isMulti) {
|
|
68
|
-
target = selection.value;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
if (complexSource && !complexTarget && isLoaded && !isMulti) {
|
|
72
|
-
target = selection[itemLabel];
|
|
73
|
-
//console.log('selection', selection);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
//console.log('selection ' + title, selection);
|
|
77
|
-
//console.log('target ' + title, target);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
onMount(async () => {
|
|
81
|
-
//console.log("OnMount", target)
|
|
82
|
-
if(complexSource && complexTarget) // after on mount a setValue is needed when data is complex
|
|
83
|
-
{
|
|
84
|
-
setValue(target);
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
function setValue(t) {
|
|
89
|
-
//console.log("Set Value",t);
|
|
90
|
-
//a) source is complex model is simple
|
|
91
|
-
if (complexSource && !complexTarget && isMulti) {
|
|
92
|
-
let items = [];
|
|
93
|
-
// event.detail will be null unless isMulti is true and user has removed a single item
|
|
94
|
-
for (let i in t) {
|
|
95
|
-
let t = target[i];
|
|
96
|
-
items.push(source.find((item) => item[itemId] === t));
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
isLoaded = true;
|
|
100
|
-
if (items.length > 0) {
|
|
101
|
-
value = items;
|
|
102
|
-
}
|
|
103
|
-
////console.log(value);
|
|
104
|
-
groupBy = (item) => item[itemGroup];
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
if (complexSource && complexTarget && isMulti) {
|
|
108
|
-
value = t;
|
|
109
|
-
isLoaded = true;
|
|
110
|
-
groupBy = (item) => item[itemGroup];
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
//b) simple liust and simple model
|
|
114
|
-
if (!complexSource && !complexTarget && isMulti) {
|
|
115
|
-
//console.log('b) simple liust and simple model');
|
|
116
|
-
//console.log('source', source);
|
|
117
|
-
//console.log("target",t);
|
|
118
|
-
isLoaded = true;
|
|
119
|
-
//set target only if its nit empty
|
|
120
|
-
if (t != null && t !== undefined && t != '') {
|
|
121
|
-
//console.log('target', t);
|
|
122
|
-
value = t;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
if (!isMulti) {
|
|
127
|
-
//console.log("onmount",complexSource,complexTarget,value,target)
|
|
128
|
-
if (!complexSource && !complexTarget) {
|
|
129
|
-
value = {
|
|
130
|
-
value: t,
|
|
131
|
-
label: t
|
|
132
|
-
};
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
if (complexSource && complexTarget) {
|
|
136
|
-
value = t;
|
|
137
|
-
groupBy = (item) => item[itemGroup];
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
if (complexSource && !complexTarget) {
|
|
141
|
-
//value = target
|
|
142
|
-
console.log(
|
|
143
|
-
'this case is currently not supported (complexSource,complexTarget,isMulti)',
|
|
144
|
-
complexSource,
|
|
145
|
-
complexTarget,
|
|
146
|
-
isMulti
|
|
147
|
-
);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
isLoaded = true;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
//console.log(t,value)
|
|
154
|
-
}
|
|
155
|
-
</script>
|
|
156
|
-
|
|
157
|
-
<InputContainer {id} label={title} {feedback} {required} {help}>
|
|
158
|
-
<Select
|
|
159
|
-
{id}
|
|
160
|
-
items={source}
|
|
161
|
-
{groupBy}
|
|
162
|
-
{itemId}
|
|
163
|
-
label={itemLabel}
|
|
164
|
-
multiple={isMulti}
|
|
165
|
-
bind:value
|
|
166
|
-
{placeholder}
|
|
167
|
-
hasError={invalid}
|
|
168
|
-
{loading}
|
|
169
|
-
{clearable}
|
|
170
|
-
{disabled}
|
|
171
|
-
on:change
|
|
172
|
-
on:input
|
|
173
|
-
on:focus
|
|
174
|
-
on:blur
|
|
175
|
-
on:clear
|
|
176
|
-
on:loaded
|
|
177
|
-
on:error
|
|
178
|
-
on:filter
|
|
179
|
-
on:hoverItem
|
|
180
|
-
/>
|
|
181
|
-
</InputContainer>
|
|
1
|
+
<script>
|
|
2
|
+
import InputContainer from './InputContainer.svelte';
|
|
3
|
+
|
|
4
|
+
import Select from 'svelte-select';
|
|
5
|
+
import { onMount } from 'svelte';
|
|
6
|
+
|
|
7
|
+
export let source;
|
|
8
|
+
export let target;
|
|
9
|
+
export let id;
|
|
10
|
+
export let title;
|
|
11
|
+
export let itemId = 'value';
|
|
12
|
+
export let itemLabel = 'label';
|
|
13
|
+
export let itemGroup = 'group';
|
|
14
|
+
export let isMulti = true;
|
|
15
|
+
export let complexSource = false;
|
|
16
|
+
export let complexTarget = false;
|
|
17
|
+
export let required = false;
|
|
18
|
+
export let feedback = [''];
|
|
19
|
+
export let placeholder = '-- Please select --';
|
|
20
|
+
export let invalid = false;
|
|
21
|
+
export let loading = false;
|
|
22
|
+
export let help = false;
|
|
23
|
+
export let clearable = true;
|
|
24
|
+
export let disabled = false;
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
let isLoaded = false;
|
|
28
|
+
|
|
29
|
+
$: value = null;
|
|
30
|
+
$: updateTarget(value);
|
|
31
|
+
$: target, setValue(target);
|
|
32
|
+
|
|
33
|
+
let groupBy;
|
|
34
|
+
$: groupBy;
|
|
35
|
+
|
|
36
|
+
function updateTarget(selection) {
|
|
37
|
+
//console.log("UPDATE target",selection);
|
|
38
|
+
//different cases
|
|
39
|
+
//a) source is complex model is simple return array
|
|
40
|
+
if (complexSource && !complexTarget && isLoaded && isMulti) {
|
|
41
|
+
//console.log('a) source is complex model is simple');
|
|
42
|
+
|
|
43
|
+
target = [];
|
|
44
|
+
for (let i in selection) {
|
|
45
|
+
let item = selection[i];
|
|
46
|
+
target.push(item[itemId]);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (!complexSource && !complexTarget && isLoaded && isMulti) {
|
|
51
|
+
target = [];
|
|
52
|
+
|
|
53
|
+
for (let i in selection) {
|
|
54
|
+
target.push(selection[i].value);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (complexSource && complexTarget && isLoaded && isMulti) {
|
|
59
|
+
//console.log("both complex",selection);
|
|
60
|
+
target = selection;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (complexSource && complexTarget && isLoaded && !isMulti) {
|
|
64
|
+
target = selection;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (!complexSource && !complexTarget && isLoaded && !isMulti) {
|
|
68
|
+
target = selection.value;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (complexSource && !complexTarget && isLoaded && !isMulti) {
|
|
72
|
+
target = selection[itemLabel];
|
|
73
|
+
//console.log('selection', selection);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
//console.log('selection ' + title, selection);
|
|
77
|
+
//console.log('target ' + title, target);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
onMount(async () => {
|
|
81
|
+
//console.log("OnMount", target)
|
|
82
|
+
if(complexSource && complexTarget) // after on mount a setValue is needed when data is complex
|
|
83
|
+
{
|
|
84
|
+
setValue(target);
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
function setValue(t) {
|
|
89
|
+
//console.log("Set Value",t);
|
|
90
|
+
//a) source is complex model is simple
|
|
91
|
+
if (complexSource && !complexTarget && isMulti) {
|
|
92
|
+
let items = [];
|
|
93
|
+
// event.detail will be null unless isMulti is true and user has removed a single item
|
|
94
|
+
for (let i in t) {
|
|
95
|
+
let t = target[i];
|
|
96
|
+
items.push(source.find((item) => item[itemId] === t));
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
isLoaded = true;
|
|
100
|
+
if (items.length > 0) {
|
|
101
|
+
value = items;
|
|
102
|
+
}
|
|
103
|
+
////console.log(value);
|
|
104
|
+
groupBy = (item) => item[itemGroup];
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
if (complexSource && complexTarget && isMulti) {
|
|
108
|
+
value = t;
|
|
109
|
+
isLoaded = true;
|
|
110
|
+
groupBy = (item) => item[itemGroup];
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
//b) simple liust and simple model
|
|
114
|
+
if (!complexSource && !complexTarget && isMulti) {
|
|
115
|
+
//console.log('b) simple liust and simple model');
|
|
116
|
+
//console.log('source', source);
|
|
117
|
+
//console.log("target",t);
|
|
118
|
+
isLoaded = true;
|
|
119
|
+
//set target only if its nit empty
|
|
120
|
+
if (t != null && t !== undefined && t != '') {
|
|
121
|
+
//console.log('target', t);
|
|
122
|
+
value = t;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
if (!isMulti) {
|
|
127
|
+
//console.log("onmount",complexSource,complexTarget,value,target)
|
|
128
|
+
if (!complexSource && !complexTarget) {
|
|
129
|
+
value = {
|
|
130
|
+
value: t,
|
|
131
|
+
label: t
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
if (complexSource && complexTarget) {
|
|
136
|
+
value = t;
|
|
137
|
+
groupBy = (item) => item[itemGroup];
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
if (complexSource && !complexTarget) {
|
|
141
|
+
//value = target
|
|
142
|
+
console.log(
|
|
143
|
+
'this case is currently not supported (complexSource,complexTarget,isMulti)',
|
|
144
|
+
complexSource,
|
|
145
|
+
complexTarget,
|
|
146
|
+
isMulti
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
isLoaded = true;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
//console.log(t,value)
|
|
154
|
+
}
|
|
155
|
+
</script>
|
|
156
|
+
|
|
157
|
+
<InputContainer {id} label={title} {feedback} {required} {help}>
|
|
158
|
+
<Select
|
|
159
|
+
{id}
|
|
160
|
+
items={source}
|
|
161
|
+
{groupBy}
|
|
162
|
+
{itemId}
|
|
163
|
+
label={itemLabel}
|
|
164
|
+
multiple={isMulti}
|
|
165
|
+
bind:value
|
|
166
|
+
{placeholder}
|
|
167
|
+
hasError={invalid}
|
|
168
|
+
{loading}
|
|
169
|
+
{clearable}
|
|
170
|
+
{disabled}
|
|
171
|
+
on:change
|
|
172
|
+
on:input
|
|
173
|
+
on:focus
|
|
174
|
+
on:blur
|
|
175
|
+
on:clear
|
|
176
|
+
on:loaded
|
|
177
|
+
on:error
|
|
178
|
+
on:filter
|
|
179
|
+
on:hoverItem
|
|
180
|
+
/>
|
|
181
|
+
</InputContainer>
|
|
@@ -10,18 +10,18 @@ export let feedback = [""];
|
|
|
10
10
|
export let placeholder = "";
|
|
11
11
|
export let help = false;
|
|
12
12
|
export let disabled = false;
|
|
13
|
-
</script>
|
|
14
|
-
|
|
15
|
-
<InputContainer {id} {label} {feedback} {required} {help}>
|
|
16
|
-
<input
|
|
17
|
-
{id}
|
|
18
|
-
class="input variant-form-material"
|
|
19
|
-
type="number"
|
|
20
|
-
class:input-success={valid}
|
|
21
|
-
class:input-error={invalid}
|
|
22
|
-
bind:value
|
|
23
|
-
on:input
|
|
24
|
-
{placeholder}
|
|
25
|
-
{disabled}
|
|
26
|
-
/>
|
|
27
|
-
</InputContainer>
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<InputContainer {id} {label} {feedback} {required} {help}>
|
|
16
|
+
<input
|
|
17
|
+
{id}
|
|
18
|
+
class="input variant-form-material"
|
|
19
|
+
type="number"
|
|
20
|
+
class:input-success={valid}
|
|
21
|
+
class:input-error={invalid}
|
|
22
|
+
bind:value
|
|
23
|
+
on:input
|
|
24
|
+
{placeholder}
|
|
25
|
+
{disabled}
|
|
26
|
+
/>
|
|
27
|
+
</InputContainer>
|
|
@@ -9,17 +9,17 @@ export let feedback = [""];
|
|
|
9
9
|
export let placeholder = "";
|
|
10
10
|
export let help = false;
|
|
11
11
|
export let disabled = false;
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<InputContainer {id} {label} {feedback} {required} {help}>
|
|
15
|
-
<textarea
|
|
16
|
-
{id}
|
|
17
|
-
class="textarea variant-form-material"
|
|
18
|
-
class:input-success={valid}
|
|
19
|
-
class:input-error={invalid}
|
|
20
|
-
bind:value
|
|
21
|
-
on:input
|
|
22
|
-
{placeholder}
|
|
23
|
-
{disabled}
|
|
24
|
-
/>
|
|
25
|
-
</InputContainer>
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<InputContainer {id} {label} {feedback} {required} {help}>
|
|
15
|
+
<textarea
|
|
16
|
+
{id}
|
|
17
|
+
class="textarea variant-form-material"
|
|
18
|
+
class:input-success={valid}
|
|
19
|
+
class:input-error={invalid}
|
|
20
|
+
bind:value
|
|
21
|
+
on:input
|
|
22
|
+
{placeholder}
|
|
23
|
+
{disabled}
|
|
24
|
+
/>
|
|
25
|
+
</InputContainer>
|
|
@@ -9,18 +9,18 @@ export let feedback = [""];
|
|
|
9
9
|
export let placeholder = "";
|
|
10
10
|
export let help = false;
|
|
11
11
|
export let disabled = false;
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<InputContainer {id} {label} {feedback} {required} {help}>
|
|
15
|
-
<input
|
|
16
|
-
{id}
|
|
17
|
-
class="input variant-form-material"
|
|
18
|
-
type="text"
|
|
19
|
-
class:input-success={valid}
|
|
20
|
-
class:input-error={invalid}
|
|
21
|
-
bind:value
|
|
22
|
-
on:input
|
|
23
|
-
{placeholder}
|
|
24
|
-
{disabled}
|
|
25
|
-
/>
|
|
26
|
-
</InputContainer>
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<InputContainer {id} {label} {feedback} {required} {help}>
|
|
15
|
+
<input
|
|
16
|
+
{id}
|
|
17
|
+
class="input variant-form-material"
|
|
18
|
+
type="text"
|
|
19
|
+
class:input-success={valid}
|
|
20
|
+
class:input-error={invalid}
|
|
21
|
+
bind:value
|
|
22
|
+
on:input
|
|
23
|
+
{placeholder}
|
|
24
|
+
{disabled}
|
|
25
|
+
/>
|
|
26
|
+
</InputContainer>
|
|
@@ -7,31 +7,31 @@ export let cssClass = "";
|
|
|
7
7
|
export let deleteBtn = true;
|
|
8
8
|
$:
|
|
9
9
|
show = true;
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
{#if show}
|
|
13
|
-
<aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
|
|
14
|
-
<!-- Icon -->
|
|
15
|
-
<!-- <div>(icon)</div> -->
|
|
16
|
-
<!-- Message -->
|
|
17
|
-
<div class="alert-message">
|
|
18
|
-
{#if title}
|
|
19
|
-
<h3 class="h3">{title}</h3>
|
|
20
|
-
{/if}
|
|
21
|
-
<p>
|
|
22
|
-
{message}
|
|
23
|
-
<slot />
|
|
24
|
-
</p>
|
|
25
|
-
</div>
|
|
26
|
-
<!-- Actions -->
|
|
27
|
-
<div class="alert-actions">
|
|
28
|
-
<slot name="actions" />
|
|
29
|
-
|
|
30
|
-
{#if deleteBtn}
|
|
31
|
-
<button class="btn hover:text-primary-100" on:click={() => (show = false)}>
|
|
32
|
-
<Fa icon={faXmark} />
|
|
33
|
-
</button>
|
|
34
|
-
{/if}
|
|
35
|
-
</div>
|
|
36
|
-
</aside>
|
|
37
|
-
{/if}
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
{#if show}
|
|
13
|
+
<aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
|
|
14
|
+
<!-- Icon -->
|
|
15
|
+
<!-- <div>(icon)</div> -->
|
|
16
|
+
<!-- Message -->
|
|
17
|
+
<div class="alert-message">
|
|
18
|
+
{#if title}
|
|
19
|
+
<h3 class="h3">{title}</h3>
|
|
20
|
+
{/if}
|
|
21
|
+
<p>
|
|
22
|
+
{message}
|
|
23
|
+
<slot />
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
<!-- Actions -->
|
|
27
|
+
<div class="alert-actions">
|
|
28
|
+
<slot name="actions" />
|
|
29
|
+
|
|
30
|
+
{#if deleteBtn}
|
|
31
|
+
<button class="btn hover:text-primary-100" on:click={() => (show = false)}>
|
|
32
|
+
<Fa icon={faXmark} />
|
|
33
|
+
</button>
|
|
34
|
+
{/if}
|
|
35
|
+
</div>
|
|
36
|
+
</aside>
|
|
37
|
+
{/if}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let showOnPx = 150;
|
|
3
|
-
let hidden = true;
|
|
4
|
-
|
|
5
|
-
function goTop() {
|
|
6
|
-
document.body.scrollIntoView();
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
function scrollContainer() {
|
|
10
|
-
return document.documentElement || document.body;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function handleOnScroll() {
|
|
14
|
-
if (!scrollContainer()) {
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
if (scrollContainer().scrollTop > showOnPx) {
|
|
19
|
-
hidden = false;
|
|
20
|
-
} else {
|
|
21
|
-
hidden = true;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
</script>
|
|
25
|
-
|
|
26
|
-
<svelte:window on:scroll={handleOnScroll} />
|
|
27
|
-
|
|
28
|
-
<div class="w-full items-center">
|
|
29
|
-
<button class="btn ring back-to-top" on:click={goTop} class:hidden>Back to top</button>
|
|
30
|
-
</div>
|
|
1
|
+
<script>
|
|
2
|
+
export let showOnPx = 150;
|
|
3
|
+
let hidden = true;
|
|
4
|
+
|
|
5
|
+
function goTop() {
|
|
6
|
+
document.body.scrollIntoView();
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
function scrollContainer() {
|
|
10
|
+
return document.documentElement || document.body;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function handleOnScroll() {
|
|
14
|
+
if (!scrollContainer()) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
if (scrollContainer().scrollTop > showOnPx) {
|
|
19
|
+
hidden = false;
|
|
20
|
+
} else {
|
|
21
|
+
hidden = true;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<svelte:window on:scroll={handleOnScroll} />
|
|
27
|
+
|
|
28
|
+
<div class="w-full items-center">
|
|
29
|
+
<button class="btn ring back-to-top" on:click={goTop} class:hidden>Back to top</button>
|
|
30
|
+
</div>
|
|
@@ -12,25 +12,25 @@ const noteSettings = {
|
|
|
12
12
|
target: "noteTarget",
|
|
13
13
|
placement: "bottom"
|
|
14
14
|
};
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<div class="text-right p-2">
|
|
18
|
-
{#if note}
|
|
19
|
-
<span class="chip variant-soft hover:variant-filled" use:popup={noteSettings}>
|
|
20
|
-
<span><Fa icon={faQuestion} /></span>
|
|
21
|
-
</span>
|
|
22
|
-
|
|
23
|
-
<div
|
|
24
|
-
class="card p-4 variant-filled-primary w-60 z-50 text-left shadow-md"
|
|
25
|
-
data-popup="noteTarget"
|
|
26
|
-
>
|
|
27
|
-
{note}
|
|
28
|
-
</div>
|
|
29
|
-
{/if}
|
|
30
|
-
|
|
31
|
-
{#each links as link}
|
|
32
|
-
<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
|
|
33
|
-
<span>{link.label}</span>
|
|
34
|
-
</span>
|
|
35
|
-
{/each}
|
|
36
|
-
</div>
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<div class="text-right p-2">
|
|
18
|
+
{#if note}
|
|
19
|
+
<span class="chip variant-soft hover:variant-filled" use:popup={noteSettings}>
|
|
20
|
+
<span><Fa icon={faQuestion} /></span>
|
|
21
|
+
</span>
|
|
22
|
+
|
|
23
|
+
<div
|
|
24
|
+
class="card p-4 variant-filled-primary w-60 z-50 text-left shadow-md"
|
|
25
|
+
data-popup="noteTarget"
|
|
26
|
+
>
|
|
27
|
+
{note}
|
|
28
|
+
</div>
|
|
29
|
+
{/if}
|
|
30
|
+
|
|
31
|
+
{#each links as link}
|
|
32
|
+
<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
|
|
33
|
+
<span>{link.label}</span>
|
|
34
|
+
</span>
|
|
35
|
+
{/each}
|
|
36
|
+
</div>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<script>export let error;
|
|
2
|
-
</script>
|
|
3
|
-
|
|
4
|
-
<div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
|
|
5
|
-
<div class="p-5 space-y-4">
|
|
6
|
-
<h3 class="h3">{error.name}</h3>
|
|
7
|
-
<p>{error.message}</p>
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
|
|
5
|
+
<div class="p-5 space-y-4">
|
|
6
|
+
<h3 class="h3">{error.name}</h3>
|
|
7
|
+
<p>{error.message}</p>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|