@cloudparker/moldex.js 0.0.34 → 0.0.36
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/dist/services/dialog/dialog-service.d.ts +38 -1
- package/dist/services/dialog/dialog-service.js +102 -3
- package/dist/services/utils/utils-service.js +6 -0
- package/dist/tailwind.css +1 -1
- package/dist/views/core/content-area/components/content-area.svelte +47 -0
- package/dist/views/core/{content-with-sidebar/components/content-with-sidebar.svelte.d.ts → content-area/components/content-area.svelte.d.ts} +4 -3
- package/dist/views/core/content-area/index.d.ts +2 -0
- package/dist/views/core/content-area/index.js +5 -0
- package/dist/views/core/dialog/components/cropper-dialog/cropper-dialog.svelte +55 -0
- package/dist/views/core/dialog/components/cropper-dialog/cropper-dialog.svelte.d.ts +28 -0
- package/dist/views/core/dialog/components/dialog/dialog.svelte +97 -81
- package/dist/views/core/dialog/components/dialog/dialog.svelte.d.ts +42 -38
- package/dist/views/core/dialog/components/loading-dialog/loading-dialog.svelte +42 -0
- package/dist/views/core/dialog/components/loading-dialog/loading-dialog.svelte.d.ts +25 -0
- package/dist/views/core/dialog/components/msg-dialog/msg-dialog.svelte +1 -1
- package/dist/views/core/dialog/components/text-field-dialog/text-field-dialog.svelte +47 -0
- package/dist/views/core/dialog/components/text-field-dialog/text-field-dialog.svelte.d.ts +28 -0
- package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte +56 -0
- package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte.d.ts +28 -0
- package/dist/views/core/dialog/index.d.ts +1 -2
- package/dist/views/core/dialog/index.js +1 -2
- package/dist/views/core/index.d.ts +1 -1
- package/dist/views/core/index.js +1 -1
- package/dist/views/core/input/components/input-field/input-field.svelte +1 -1
- package/dist/views/core/input/components/text-field/text-field.svelte +16 -3
- package/dist/views/core/input/components/text-field/text-field.svelte.d.ts +1 -1
- package/dist/views/core/input/components/textarea-field/textarea-field.svelte +7 -2
- package/dist/views/core/input/components/textarea-field/textarea-field.svelte.d.ts +1 -1
- package/dist/views/core/sidebar/components/sidebar.svelte +14 -2
- package/dist/views/core/sidebar/components/sidebar.svelte.d.ts +1 -0
- package/package.json +2 -1
- package/dist/views/core/content-with-sidebar/components/content-with-sidebar.svelte +0 -36
- package/dist/views/core/content-with-sidebar/index.d.ts +0 -2
- package/dist/views/core/content-with-sidebar/index.js +0 -5
|
@@ -9,57 +9,58 @@
|
|
|
9
9
|
*/
|
|
10
10
|
export type DialogCloseButtonClickType = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
|
|
11
11
|
|
|
12
|
-
export type DialogSizeType = 'sm' | 'md' | 'lg' | 'full';
|
|
12
|
+
export type DialogSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
13
13
|
|
|
14
14
|
export type DialogPropsType = {
|
|
15
|
-
|
|
15
|
+
backdropClassName?: string;
|
|
16
|
+
bodyClassName?: string;
|
|
17
|
+
bodyComponent?: any;
|
|
18
|
+
bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
|
|
16
19
|
cancelable?: boolean;
|
|
20
|
+
children?: Snippet;
|
|
17
21
|
className?: string;
|
|
22
|
+
component?: any;
|
|
18
23
|
containerClassName?: string;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
footerClassName?: string;
|
|
25
|
+
footerCloseButtonClassName?: string;
|
|
26
|
+
footerCloseButtonLabel?: string;
|
|
27
|
+
footerOkButtonClassName?: string;
|
|
28
|
+
footerOkButtonDisabled?: boolean;
|
|
29
|
+
footerOkButtonSpinner?: boolean;
|
|
30
|
+
footerOkButtonType?: 'button' | 'submit' | 'reset';
|
|
31
|
+
footerOkButtonLable?: string;
|
|
32
|
+
footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
|
|
33
|
+
hasFooter?: boolean;
|
|
34
|
+
hasFooterCloseButton?: boolean;
|
|
35
|
+
hasFooterOkButton?: boolean;
|
|
36
|
+
hasFooterShadow?: boolean;
|
|
26
37
|
hasHeader?: boolean;
|
|
38
|
+
hasHeaderBack?: boolean;
|
|
39
|
+
hasHeaderClose?: boolean;
|
|
27
40
|
hasHeaderShadow?: boolean;
|
|
41
|
+
hasSubtitle?: boolean;
|
|
42
|
+
hasTitle?: boolean;
|
|
43
|
+
headerBackButtonClassName?: string;
|
|
44
|
+
headerBackIconClassName?: string;
|
|
45
|
+
headerBackIconPath?: string;
|
|
28
46
|
headerClassName?: string;
|
|
29
|
-
hasHeaderClose?: boolean;
|
|
30
47
|
headerCloseButtonClassName?: string;
|
|
31
|
-
headerCloseIconPath?: string;
|
|
32
48
|
headerCloseIconClassName?: string;
|
|
33
|
-
|
|
34
|
-
headerBackButtonClassName?: string;
|
|
35
|
-
headerBackIconPath?: string;
|
|
36
|
-
headerBackIconClassName?: string;
|
|
37
|
-
hasFooter?: boolean;
|
|
38
|
-
hasFooterShadow?: boolean;
|
|
39
|
-
hasFooterCloseButton?: boolean;
|
|
40
|
-
hasFooterOkButton?: boolean;
|
|
41
|
-
footerClassName?: string;
|
|
42
|
-
footerCloseLabel?: string;
|
|
43
|
-
footerCloseButtonClassName?: string;
|
|
44
|
-
footerOkLable?: string;
|
|
45
|
-
footerOkButtonClassName?: string;
|
|
46
|
-
footerOkButtonType?: 'button' | 'submit' | 'reset';
|
|
47
|
-
footerOkButtonSpinner?: boolean;
|
|
48
|
-
footerOkButtonDisabled?: boolean;
|
|
49
|
-
submitButtonFormId?: string;
|
|
50
|
-
bodyClassName?: string;
|
|
51
|
-
bodyComponent?: any;
|
|
52
|
-
component?: any;
|
|
53
|
-
props?: any;
|
|
54
|
-
size?: DialogSizeType;
|
|
55
|
-
children?: Snippet;
|
|
49
|
+
headerCloseIconPath?: string;
|
|
56
50
|
headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
|
|
57
|
-
|
|
58
|
-
footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
|
|
51
|
+
id?: string;
|
|
59
52
|
onClose?: () => void;
|
|
60
|
-
onResult?: (value: any) => void;
|
|
61
|
-
onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
|
|
62
53
|
onCloseClick?: DialogCloseButtonClickType;
|
|
54
|
+
onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
|
|
55
|
+
onResult?: (value: any) => void;
|
|
56
|
+
onData?: (data: any) => void;
|
|
57
|
+
props?: any;
|
|
58
|
+
size?: DialogSizeType;
|
|
59
|
+
submitButtonFormId?: string;
|
|
60
|
+
subtitle?: string;
|
|
61
|
+
subtitleClassName?: string;
|
|
62
|
+
title?: string;
|
|
63
|
+
titleClassName?: string;
|
|
63
64
|
};
|
|
64
65
|
|
|
65
66
|
export type DialogExportsType = {
|
|
@@ -69,6 +70,7 @@
|
|
|
69
70
|
setOkDisabled: (value: boolean) => void;
|
|
70
71
|
setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
|
|
71
72
|
setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
|
|
73
|
+
setOnData: (listener: (data: any) => void) => void;
|
|
72
74
|
};
|
|
73
75
|
</script>
|
|
74
76
|
|
|
@@ -79,54 +81,55 @@
|
|
|
79
81
|
import { mdiArrowLeft, mdiClose } from '../../../icon';
|
|
80
82
|
|
|
81
83
|
let {
|
|
82
|
-
|
|
84
|
+
backdropClassName = '',
|
|
85
|
+
bodyClassName = '',
|
|
86
|
+
bodyComponent,
|
|
87
|
+
bodySnippet,
|
|
83
88
|
cancelable = true,
|
|
89
|
+
children,
|
|
84
90
|
className = '',
|
|
91
|
+
component,
|
|
85
92
|
containerClassName = '',
|
|
86
|
-
|
|
93
|
+
footerClassName = '',
|
|
94
|
+
footerCloseButtonClassName = '',
|
|
95
|
+
footerCloseButtonLabel = 'Close',
|
|
96
|
+
footerOkButtonClassName = '',
|
|
97
|
+
footerOkButtonDisabled = false,
|
|
98
|
+
footerOkButtonSpinner = false,
|
|
99
|
+
footerOkButtonType = 'button',
|
|
100
|
+
footerOkButtonLable = 'Save',
|
|
101
|
+
footerSnippet,
|
|
102
|
+
hasFooter = false,
|
|
103
|
+
hasFooterCloseButton = false,
|
|
104
|
+
hasFooterOkButton = false,
|
|
105
|
+
hasFooterShadow = false,
|
|
106
|
+
hasHeader = false,
|
|
107
|
+
hasHeaderBack = false,
|
|
108
|
+
hasHeaderClose = false,
|
|
87
109
|
hasHeaderShadow = false,
|
|
88
|
-
hasTitle = false,
|
|
89
110
|
hasSubtitle = false,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
hasHeader = false,
|
|
111
|
+
hasTitle = false,
|
|
112
|
+
headerBackButtonClassName = '',
|
|
113
|
+
headerBackIconClassName = '',
|
|
114
|
+
headerBackIconPath = mdiArrowLeft,
|
|
95
115
|
headerClassName = '',
|
|
96
|
-
hasHeaderClose = false,
|
|
97
116
|
headerCloseButtonClassName = '',
|
|
98
|
-
headerCloseIconPath = mdiClose,
|
|
99
117
|
headerCloseIconClassName = '',
|
|
100
|
-
|
|
101
|
-
headerBackButtonClassName = '',
|
|
102
|
-
headerBackIconPath = mdiArrowLeft,
|
|
103
|
-
headerBackIconClassName = '',
|
|
104
|
-
hasFooter = false,
|
|
105
|
-
hasFooterShadow = false,
|
|
106
|
-
hasFooterCloseButton = false,
|
|
107
|
-
hasFooterOkButton = false,
|
|
108
|
-
footerClassName = '',
|
|
109
|
-
footerCloseLabel = 'Close',
|
|
110
|
-
footerCloseButtonClassName = '',
|
|
111
|
-
footerOkLable = 'Save',
|
|
112
|
-
footerOkButtonClassName = '',
|
|
113
|
-
footerOkButtonType = 'button',
|
|
114
|
-
footerOkButtonSpinner = false,
|
|
115
|
-
footerOkButtonDisabled = false,
|
|
116
|
-
submitButtonFormId = undefined,
|
|
117
|
-
size = 'sm',
|
|
118
|
-
bodyClassName = '',
|
|
119
|
-
bodyComponent,
|
|
120
|
-
component,
|
|
121
|
-
props = {},
|
|
122
|
-
children,
|
|
118
|
+
headerCloseIconPath = mdiClose,
|
|
123
119
|
headerSnippet,
|
|
124
|
-
|
|
125
|
-
footerSnippet,
|
|
120
|
+
id = '',
|
|
126
121
|
onClose,
|
|
127
|
-
|
|
122
|
+
onCloseClick,
|
|
128
123
|
onOkClick,
|
|
129
|
-
|
|
124
|
+
onResult,
|
|
125
|
+
onData,
|
|
126
|
+
props = {},
|
|
127
|
+
size = 'sm',
|
|
128
|
+
submitButtonFormId = undefined,
|
|
129
|
+
subtitle = '',
|
|
130
|
+
subtitleClassName = '',
|
|
131
|
+
title = '',
|
|
132
|
+
titleClassName = ''
|
|
130
133
|
}: DialogPropsType = $props();
|
|
131
134
|
|
|
132
135
|
let dialogExports: DialogExportsType = {
|
|
@@ -135,7 +138,8 @@
|
|
|
135
138
|
setOkSpinner,
|
|
136
139
|
setOkDisabled,
|
|
137
140
|
setOnCloseClick,
|
|
138
|
-
setOnOkClick
|
|
141
|
+
setOnOkClick,
|
|
142
|
+
setOnData
|
|
139
143
|
};
|
|
140
144
|
|
|
141
145
|
let isPlaced: boolean = $state(false);
|
|
@@ -147,15 +151,19 @@
|
|
|
147
151
|
|
|
148
152
|
let result: any;
|
|
149
153
|
|
|
150
|
-
let
|
|
151
|
-
let
|
|
152
|
-
let
|
|
154
|
+
let xsSizeClassName = 'w-64';
|
|
155
|
+
let smSizeClassName = 'w-96';
|
|
156
|
+
let mdSizeClassName = 'w-1/3';
|
|
157
|
+
let lgSizeClassName = 'w-1/2';
|
|
158
|
+
let xlSizeClassName = 'w-7/10';
|
|
153
159
|
let fullSizeClassName = 'fixed inset-0 w-screen h-screen ';
|
|
154
160
|
|
|
155
161
|
let screenSizeClassNameMap: { [key: string]: string } = {
|
|
162
|
+
xs: xsSizeClassName,
|
|
156
163
|
sm: smSizeClassName,
|
|
157
164
|
md: mdSizeClassName,
|
|
158
165
|
lg: lgSizeClassName,
|
|
166
|
+
xl: xlSizeClassName,
|
|
159
167
|
full: fullSizeClassName
|
|
160
168
|
};
|
|
161
169
|
|
|
@@ -198,6 +206,10 @@
|
|
|
198
206
|
footerOkButtonSpinner = value;
|
|
199
207
|
}
|
|
200
208
|
|
|
209
|
+
export function setOnData(listener: (data: any) => void) {
|
|
210
|
+
onData = listener;
|
|
211
|
+
}
|
|
212
|
+
|
|
201
213
|
export function setOnOkClick(
|
|
202
214
|
onclick: (event: MouseEvent | TouchEvent, options: DialogExportsType) => void
|
|
203
215
|
) {
|
|
@@ -208,6 +220,10 @@
|
|
|
208
220
|
onCloseClick = onclick;
|
|
209
221
|
}
|
|
210
222
|
|
|
223
|
+
export function postData(data: any) {
|
|
224
|
+
onData && onData(data);
|
|
225
|
+
}
|
|
226
|
+
|
|
211
227
|
function handleBackdropClick() {
|
|
212
228
|
if (cancelable) {
|
|
213
229
|
closeDialog();
|
|
@@ -333,7 +349,7 @@
|
|
|
333
349
|
form={submitButtonFormId}
|
|
334
350
|
type={submitButtonFormId ? 'submit' : footerOkButtonType}
|
|
335
351
|
className="p-2 px-5 rounded bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-700 text-white {footerOkButtonClassName}"
|
|
336
|
-
label={
|
|
352
|
+
label={footerOkButtonLable}
|
|
337
353
|
disabled={footerOkButtonDisabled}
|
|
338
354
|
spinner={footerOkButtonSpinner}
|
|
339
355
|
spinnerClassName="text-white w-4 h-4"
|
|
@@ -345,7 +361,7 @@
|
|
|
345
361
|
id="btn-close"
|
|
346
362
|
type="button"
|
|
347
363
|
className="p-2 px-5 rounded bg-gray-100 hover:bg-gray-200 {footerCloseButtonClassName}"
|
|
348
|
-
label={
|
|
364
|
+
label={footerCloseButtonLabel}
|
|
349
365
|
onClick={handleClose}
|
|
350
366
|
/>
|
|
351
367
|
{/if}
|
|
@@ -4,56 +4,57 @@
|
|
|
4
4
|
* true -> Close dialog
|
|
5
5
|
*/
|
|
6
6
|
export type DialogCloseButtonClickType = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
|
|
7
|
-
export type DialogSizeType = 'sm' | 'md' | 'lg' | 'full';
|
|
7
|
+
export type DialogSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
8
8
|
export type DialogPropsType = {
|
|
9
|
-
|
|
9
|
+
backdropClassName?: string;
|
|
10
|
+
bodyClassName?: string;
|
|
11
|
+
bodyComponent?: any;
|
|
12
|
+
bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
|
|
10
13
|
cancelable?: boolean;
|
|
14
|
+
children?: Snippet;
|
|
11
15
|
className?: string;
|
|
16
|
+
component?: any;
|
|
12
17
|
containerClassName?: string;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
footerClassName?: string;
|
|
19
|
+
footerCloseButtonClassName?: string;
|
|
20
|
+
footerCloseButtonLabel?: string;
|
|
21
|
+
footerOkButtonClassName?: string;
|
|
22
|
+
footerOkButtonDisabled?: boolean;
|
|
23
|
+
footerOkButtonSpinner?: boolean;
|
|
24
|
+
footerOkButtonType?: 'button' | 'submit' | 'reset';
|
|
25
|
+
footerOkButtonLable?: string;
|
|
26
|
+
footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
|
|
27
|
+
hasFooter?: boolean;
|
|
28
|
+
hasFooterCloseButton?: boolean;
|
|
29
|
+
hasFooterOkButton?: boolean;
|
|
30
|
+
hasFooterShadow?: boolean;
|
|
20
31
|
hasHeader?: boolean;
|
|
32
|
+
hasHeaderBack?: boolean;
|
|
33
|
+
hasHeaderClose?: boolean;
|
|
21
34
|
hasHeaderShadow?: boolean;
|
|
35
|
+
hasSubtitle?: boolean;
|
|
36
|
+
hasTitle?: boolean;
|
|
37
|
+
headerBackButtonClassName?: string;
|
|
38
|
+
headerBackIconClassName?: string;
|
|
39
|
+
headerBackIconPath?: string;
|
|
22
40
|
headerClassName?: string;
|
|
23
|
-
hasHeaderClose?: boolean;
|
|
24
41
|
headerCloseButtonClassName?: string;
|
|
25
|
-
headerCloseIconPath?: string;
|
|
26
42
|
headerCloseIconClassName?: string;
|
|
27
|
-
|
|
28
|
-
headerBackButtonClassName?: string;
|
|
29
|
-
headerBackIconPath?: string;
|
|
30
|
-
headerBackIconClassName?: string;
|
|
31
|
-
hasFooter?: boolean;
|
|
32
|
-
hasFooterShadow?: boolean;
|
|
33
|
-
hasFooterCloseButton?: boolean;
|
|
34
|
-
hasFooterOkButton?: boolean;
|
|
35
|
-
footerClassName?: string;
|
|
36
|
-
footerCloseLabel?: string;
|
|
37
|
-
footerCloseButtonClassName?: string;
|
|
38
|
-
footerOkLable?: string;
|
|
39
|
-
footerOkButtonClassName?: string;
|
|
40
|
-
footerOkButtonType?: 'button' | 'submit' | 'reset';
|
|
41
|
-
footerOkButtonSpinner?: boolean;
|
|
42
|
-
footerOkButtonDisabled?: boolean;
|
|
43
|
-
submitButtonFormId?: string;
|
|
44
|
-
bodyClassName?: string;
|
|
45
|
-
bodyComponent?: any;
|
|
46
|
-
component?: any;
|
|
47
|
-
props?: any;
|
|
48
|
-
size?: DialogSizeType;
|
|
49
|
-
children?: Snippet;
|
|
43
|
+
headerCloseIconPath?: string;
|
|
50
44
|
headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
|
|
51
|
-
|
|
52
|
-
footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
|
|
45
|
+
id?: string;
|
|
53
46
|
onClose?: () => void;
|
|
54
|
-
onResult?: (value: any) => void;
|
|
55
|
-
onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
|
|
56
47
|
onCloseClick?: DialogCloseButtonClickType;
|
|
48
|
+
onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;
|
|
49
|
+
onResult?: (value: any) => void;
|
|
50
|
+
onData?: (data: any) => void;
|
|
51
|
+
props?: any;
|
|
52
|
+
size?: DialogSizeType;
|
|
53
|
+
submitButtonFormId?: string;
|
|
54
|
+
subtitle?: string;
|
|
55
|
+
subtitleClassName?: string;
|
|
56
|
+
title?: string;
|
|
57
|
+
titleClassName?: string;
|
|
57
58
|
};
|
|
58
59
|
export type DialogExportsType = {
|
|
59
60
|
closeDialog: () => void;
|
|
@@ -62,6 +63,7 @@ export type DialogExportsType = {
|
|
|
62
63
|
setOkDisabled: (value: boolean) => void;
|
|
63
64
|
setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
|
|
64
65
|
setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
|
|
66
|
+
setOnData: (listener: (data: any) => void) => void;
|
|
65
67
|
};
|
|
66
68
|
import { type Snippet } from 'svelte';
|
|
67
69
|
import '../../../../../tailwind.css';
|
|
@@ -87,8 +89,10 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogPropsType, {
|
|
|
87
89
|
setResult: (value: any) => void;
|
|
88
90
|
setOkDisabled: (value: boolean) => void;
|
|
89
91
|
setOkSpinner: (value: boolean) => void;
|
|
92
|
+
setOnData: (listener: (data: any) => void) => void;
|
|
90
93
|
setOnOkClick: (onclick: (event: MouseEvent | TouchEvent, options: DialogExportsType) => void) => void;
|
|
91
94
|
setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
|
|
95
|
+
postData: (data: any) => void;
|
|
92
96
|
}, "">;
|
|
93
97
|
type Dialog = InstanceType<typeof Dialog>;
|
|
94
98
|
export default Dialog;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Spinner } from '../../../spinner';
|
|
3
|
+
import type { DialogExportsType } from '../dialog/dialog.svelte';
|
|
4
|
+
|
|
5
|
+
type PropsType = {
|
|
6
|
+
msg?: string;
|
|
7
|
+
msgClassName?: string;
|
|
8
|
+
spinnerClassName?: string;
|
|
9
|
+
containerClassName?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
msg = 'Please wait...',
|
|
15
|
+
msgClassName,
|
|
16
|
+
spinnerClassName,
|
|
17
|
+
containerClassName,
|
|
18
|
+
className,
|
|
19
|
+
setOnOkClick,
|
|
20
|
+
setResult,
|
|
21
|
+
closeDialog,
|
|
22
|
+
setOnData,
|
|
23
|
+
...props
|
|
24
|
+
}: PropsType & DialogExportsType = $props();
|
|
25
|
+
|
|
26
|
+
setOnData((data: any) => {
|
|
27
|
+
if (data?.msg) {
|
|
28
|
+
msg = data?.msg || '';
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
</script>
|
|
32
|
+
|
|
33
|
+
<div class="p-6 {containerClassName}">
|
|
34
|
+
<div class="flex items-center gap-4 {className}">
|
|
35
|
+
<div>
|
|
36
|
+
<Spinner className={spinnerClassName} />
|
|
37
|
+
</div>
|
|
38
|
+
<div class="text-gray-400 {msgClassName}">
|
|
39
|
+
{@html msg || ''}
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { DialogExportsType } from '../dialog/dialog.svelte';
|
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
+
$$bindings?: Bindings;
|
|
5
|
+
} & Exports;
|
|
6
|
+
(internal: unknown, props: Props & {
|
|
7
|
+
$$events?: Events;
|
|
8
|
+
$$slots?: Slots;
|
|
9
|
+
}): Exports & {
|
|
10
|
+
$set?: any;
|
|
11
|
+
$on?: any;
|
|
12
|
+
};
|
|
13
|
+
z_$$bindings?: Bindings;
|
|
14
|
+
}
|
|
15
|
+
declare const LoadingDialog: $$__sveltets_2_IsomorphicComponent<{
|
|
16
|
+
msg?: string;
|
|
17
|
+
msgClassName?: string;
|
|
18
|
+
spinnerClassName?: string;
|
|
19
|
+
containerClassName?: string;
|
|
20
|
+
className?: string;
|
|
21
|
+
} & DialogExportsType, {
|
|
22
|
+
[evt: string]: CustomEvent<any>;
|
|
23
|
+
}, {}, {}, "">;
|
|
24
|
+
type LoadingDialog = InstanceType<typeof LoadingDialog>;
|
|
25
|
+
export default LoadingDialog;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { showToast } from '../../../../../services';
|
|
3
|
+
import { TextField } from '../../../input';
|
|
4
|
+
import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
|
|
5
|
+
import type { DialogExportsType } from '../dialog/dialog.svelte';
|
|
6
|
+
|
|
7
|
+
type PropsType = {
|
|
8
|
+
value?: InputValueType;
|
|
9
|
+
label?: string;
|
|
10
|
+
name?: string;
|
|
11
|
+
maxlength?: number;
|
|
12
|
+
className?: string;
|
|
13
|
+
autofocus?: boolean;
|
|
14
|
+
required?: boolean;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
let {
|
|
18
|
+
value = $bindable(''),
|
|
19
|
+
label,
|
|
20
|
+
name,
|
|
21
|
+
maxlength,
|
|
22
|
+
className,
|
|
23
|
+
autofocus,
|
|
24
|
+
required,
|
|
25
|
+
setOnOkClick,
|
|
26
|
+
setResult,
|
|
27
|
+
closeDialog,
|
|
28
|
+
...props
|
|
29
|
+
}: PropsType & DialogExportsType = $props();
|
|
30
|
+
|
|
31
|
+
function handleSubmit(ev: SubmitEvent) {
|
|
32
|
+
ev?.preventDefault();
|
|
33
|
+
value = ((value as string) || '').trim();
|
|
34
|
+
if (required && !value) {
|
|
35
|
+
showToast({ msg: 'This is a required field!' });
|
|
36
|
+
} else {
|
|
37
|
+
setResult(value);
|
|
38
|
+
closeDialog();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<div class="p-6">
|
|
44
|
+
<form id="text-field-dialog-form" onsubmit={handleSubmit}>
|
|
45
|
+
<TextField {...props} {label} {name} {maxlength} {className} {autofocus} {required} bind:value />
|
|
46
|
+
</form>
|
|
47
|
+
</div>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
|
|
2
|
+
import type { DialogExportsType } from '../dialog/dialog.svelte';
|
|
3
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
4
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
5
|
+
$$bindings?: Bindings;
|
|
6
|
+
} & Exports;
|
|
7
|
+
(internal: unknown, props: Props & {
|
|
8
|
+
$$events?: Events;
|
|
9
|
+
$$slots?: Slots;
|
|
10
|
+
}): Exports & {
|
|
11
|
+
$set?: any;
|
|
12
|
+
$on?: any;
|
|
13
|
+
};
|
|
14
|
+
z_$$bindings?: Bindings;
|
|
15
|
+
}
|
|
16
|
+
declare const TextFieldDialog: $$__sveltets_2_IsomorphicComponent<{
|
|
17
|
+
value?: InputValueType;
|
|
18
|
+
label?: string;
|
|
19
|
+
name?: string;
|
|
20
|
+
maxlength?: number;
|
|
21
|
+
className?: string;
|
|
22
|
+
autofocus?: boolean;
|
|
23
|
+
required?: boolean;
|
|
24
|
+
} & DialogExportsType, {
|
|
25
|
+
[evt: string]: CustomEvent<any>;
|
|
26
|
+
}, {}, {}, "value">;
|
|
27
|
+
type TextFieldDialog = InstanceType<typeof TextFieldDialog>;
|
|
28
|
+
export default TextFieldDialog;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { showToast } from '../../../../../services';
|
|
3
|
+
import { TextareaField, TextField } from '../../../input';
|
|
4
|
+
import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
|
|
5
|
+
import type { DialogExportsType } from '../dialog/dialog.svelte';
|
|
6
|
+
|
|
7
|
+
type PropsType = {
|
|
8
|
+
value?: InputValueType;
|
|
9
|
+
label?: string;
|
|
10
|
+
name?: string;
|
|
11
|
+
maxlength?: number;
|
|
12
|
+
className?: string;
|
|
13
|
+
autofocus?: boolean;
|
|
14
|
+
required?: boolean;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
let {
|
|
18
|
+
value = $bindable(''),
|
|
19
|
+
label,
|
|
20
|
+
name,
|
|
21
|
+
maxlength,
|
|
22
|
+
className,
|
|
23
|
+
autofocus,
|
|
24
|
+
required,
|
|
25
|
+
setOnOkClick,
|
|
26
|
+
setResult,
|
|
27
|
+
closeDialog,
|
|
28
|
+
...props
|
|
29
|
+
}: PropsType & DialogExportsType = $props();
|
|
30
|
+
|
|
31
|
+
function handleSubmit(ev: SubmitEvent) {
|
|
32
|
+
ev?.preventDefault();
|
|
33
|
+
value = ((value as string) || '').trim();
|
|
34
|
+
if (required && !value) {
|
|
35
|
+
showToast({ msg: 'This is a required field!' });
|
|
36
|
+
} else {
|
|
37
|
+
setResult(value);
|
|
38
|
+
closeDialog();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<div class="p-6">
|
|
44
|
+
<form id="textarea-field-dialog-form" onsubmit={handleSubmit}>
|
|
45
|
+
<TextareaField
|
|
46
|
+
{...props}
|
|
47
|
+
{label}
|
|
48
|
+
{name}
|
|
49
|
+
{maxlength}
|
|
50
|
+
{className}
|
|
51
|
+
{autofocus}
|
|
52
|
+
{required}
|
|
53
|
+
bind:value
|
|
54
|
+
/>
|
|
55
|
+
</form>
|
|
56
|
+
</div>
|
package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { InputValueType } from '../../../input/components/input-field/input-field.svelte';
|
|
2
|
+
import type { DialogExportsType } from '../dialog/dialog.svelte';
|
|
3
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
4
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
5
|
+
$$bindings?: Bindings;
|
|
6
|
+
} & Exports;
|
|
7
|
+
(internal: unknown, props: Props & {
|
|
8
|
+
$$events?: Events;
|
|
9
|
+
$$slots?: Slots;
|
|
10
|
+
}): Exports & {
|
|
11
|
+
$set?: any;
|
|
12
|
+
$on?: any;
|
|
13
|
+
};
|
|
14
|
+
z_$$bindings?: Bindings;
|
|
15
|
+
}
|
|
16
|
+
declare const TextareaFieldDialog: $$__sveltets_2_IsomorphicComponent<{
|
|
17
|
+
value?: InputValueType;
|
|
18
|
+
label?: string;
|
|
19
|
+
name?: string;
|
|
20
|
+
maxlength?: number;
|
|
21
|
+
className?: string;
|
|
22
|
+
autofocus?: boolean;
|
|
23
|
+
required?: boolean;
|
|
24
|
+
} & DialogExportsType, {
|
|
25
|
+
[evt: string]: CustomEvent<any>;
|
|
26
|
+
}, {}, {}, "value">;
|
|
27
|
+
type TextareaFieldDialog = InstanceType<typeof TextareaFieldDialog>;
|
|
28
|
+
export default TextareaFieldDialog;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { DialogExportsType, DialogPropsType, DialogSizeType } from './components/dialog/dialog.svelte';
|
|
2
2
|
import Dialog from './components/dialog/dialog.svelte';
|
|
3
|
-
|
|
4
|
-
export { Dialog, MsgDialog };
|
|
3
|
+
export { Dialog, };
|
|
5
4
|
export type { DialogExportsType, DialogPropsType, DialogSizeType };
|
package/dist/views/core/index.js
CHANGED