@cloudparker/moldex.js 4.1.20 → 4.1.22
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 +27 -2
- package/dist/services/dialog/dialog-service.js +37 -1
- package/dist/views/core/dialog/components/date-field-dialog/date-field-dialog.svelte +56 -0
- package/dist/views/core/dialog/components/date-field-dialog/date-field-dialog.svelte.d.ts +15 -0
- package/dist/views/core/dialog/components/datetime-field-dialog/datetime-field-dialog.svelte +56 -0
- package/dist/views/core/dialog/components/datetime-field-dialog/datetime-field-dialog.svelte.d.ts +15 -0
- package/dist/views/core/dialog/index.d.ts +2 -0
- package/dist/views/core/dialog/index.js +2 -0
- package/dist/views/core/input/components/combobox-field/combobox-field.svelte +12 -9
- package/package.json +1 -1
|
@@ -40,16 +40,41 @@ export declare function openNumberFieldDialog({ title, value, label, name, maxle
|
|
|
40
40
|
export declare function openTextFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
|
|
41
41
|
fieldClassName?: string;
|
|
42
42
|
}): Promise<unknown>;
|
|
43
|
-
export declare function
|
|
43
|
+
export declare function openDateFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params }?: DialogProps & InputFieldProps & {
|
|
44
44
|
fieldClassName?: string;
|
|
45
45
|
}): Promise<unknown>;
|
|
46
|
+
export declare function openDateTimeFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params }?: DialogProps & InputFieldProps & {
|
|
47
|
+
fieldClassName?: string;
|
|
48
|
+
value?: Date | string | null;
|
|
49
|
+
}): Promise<Date>;
|
|
50
|
+
export declare function openTextareaFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params }?: DialogProps & InputFieldProps & {
|
|
51
|
+
fieldClassName?: string;
|
|
52
|
+
value?: Date | string | null;
|
|
53
|
+
}): Promise<Date>;
|
|
46
54
|
export declare function openLoadingDialog({ msg, loadingDialogContainerClassName, loadingDialogClassName, loadingDialogSpinnerClassName, loadingDialogMsgClassName, ...params }?: DialogProps & {
|
|
47
55
|
msg?: string;
|
|
48
56
|
loadingDialogContainerClassName?: string;
|
|
49
57
|
loadingDialogClassName?: string;
|
|
50
58
|
loadingDialogSpinnerClassName?: string;
|
|
51
59
|
loadingDialogMsgClassName?: string;
|
|
52
|
-
}): Promise<
|
|
60
|
+
}): Promise<{
|
|
61
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
62
|
+
$set?(props: Partial<DialogProps>): void;
|
|
63
|
+
} & {
|
|
64
|
+
toggleDialog: () => void;
|
|
65
|
+
openDialog: () => void;
|
|
66
|
+
closeDialog: (value?: any) => Promise<any>;
|
|
67
|
+
setResult: (value: any) => void;
|
|
68
|
+
setOkEnabled: (value: boolean) => void;
|
|
69
|
+
setOkSpinner: (value: boolean) => void;
|
|
70
|
+
setOnData: (listener: (data: any) => void) => void;
|
|
71
|
+
setOnOkClick: (onclick: (event: MouseEvent | TouchEvent, options: import("../../views/index.js").DialogExports) => void) => void;
|
|
72
|
+
setOnCloseClick: (onclick: import("../../views/index.js").DialogCloseButtonClickFunction) => void;
|
|
73
|
+
postData: (data: any) => void;
|
|
74
|
+
setHeaderSnippet: (snippet: import("svelte").Snippet) => void;
|
|
75
|
+
setFooterSnippet: (snippet: import("svelte").Snippet) => void;
|
|
76
|
+
setDialogTitle: (dialogTitle: string) => void;
|
|
77
|
+
}>;
|
|
53
78
|
/**
|
|
54
79
|
* Return Cropped Image DataUrl
|
|
55
80
|
* @param props
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { mount } from 'svelte';
|
|
2
2
|
import { cropImageFile, FilePickerAccepts, ImageCaptureEnum, OutputImageFormatEnum, processImageFile } from '../utils/image-service';
|
|
3
|
-
import { CropperDialog, Dialog, LoadingDialog, MsgDialog, NumberFieldDialog, PickerDialog, TextareaFieldDialog, TextFieldDialog } from '../../views/index.js';
|
|
3
|
+
import { CropperDialog, DateFieldDialog, DatetimeFieldDialog, Dialog, LoadingDialog, MsgDialog, NumberFieldDialog, PickerDialog, TextareaFieldDialog, TextFieldDialog } from '../../views/index.js';
|
|
4
4
|
import { getDialogSize, isMobileScreen } from '../screen/screen-service';
|
|
5
5
|
export var DialogSizeEnum;
|
|
6
6
|
(function (DialogSizeEnum) {
|
|
@@ -150,6 +150,42 @@ export async function openTextFieldDialog({ title, value, label, name, maxlength
|
|
|
150
150
|
targetFormId: 'text-field-dialog-form'
|
|
151
151
|
});
|
|
152
152
|
}
|
|
153
|
+
export async function openDateFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params } = {}) {
|
|
154
|
+
return await openDialog({
|
|
155
|
+
bodyComponent: DateFieldDialog,
|
|
156
|
+
props: { value, label, name, maxlength, className: fieldClassName, autofocus, required, appearance, size, floatingLabel, rows },
|
|
157
|
+
...params,
|
|
158
|
+
hasHeader: true,
|
|
159
|
+
hasHeaderBack: isMobileScreen(),
|
|
160
|
+
hasHeaderClose: !isMobileScreen(),
|
|
161
|
+
size: isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM,
|
|
162
|
+
hasTitle: true,
|
|
163
|
+
title: title || 'Prompt',
|
|
164
|
+
hasFooter: true,
|
|
165
|
+
hasFooterCloseButton: true,
|
|
166
|
+
hasFooterOkButton: true,
|
|
167
|
+
footerOkButtonType: 'submit',
|
|
168
|
+
targetFormId: 'date-field-dialog-form'
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
export async function openDateTimeFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params } = {}) {
|
|
172
|
+
return await openDialog({
|
|
173
|
+
bodyComponent: DatetimeFieldDialog,
|
|
174
|
+
props: { value, label, name, maxlength, className: fieldClassName, autofocus, required, appearance, size, floatingLabel, rows },
|
|
175
|
+
...params,
|
|
176
|
+
hasHeader: true,
|
|
177
|
+
hasHeaderBack: isMobileScreen(),
|
|
178
|
+
hasHeaderClose: !isMobileScreen(),
|
|
179
|
+
size: isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM,
|
|
180
|
+
hasTitle: true,
|
|
181
|
+
title: title || 'Prompt',
|
|
182
|
+
hasFooter: true,
|
|
183
|
+
hasFooterCloseButton: true,
|
|
184
|
+
hasFooterOkButton: true,
|
|
185
|
+
footerOkButtonType: 'submit',
|
|
186
|
+
targetFormId: 'datetime-field-dialog-form'
|
|
187
|
+
});
|
|
188
|
+
}
|
|
153
189
|
export async function openTextareaFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params } = {}) {
|
|
154
190
|
return await openDialog({
|
|
155
191
|
bodyComponent: TextareaFieldDialog,
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { showToast } from '../../../../../services/index.js';
|
|
3
|
+
import type { InputValue } from '../../../input';
|
|
4
|
+
import DatetimeField from '../../../input/components/datetime-field/datetime-field.svelte';
|
|
5
|
+
import type { DialogExports } from '../../types';
|
|
6
|
+
|
|
7
|
+
type PropsType = {
|
|
8
|
+
value?: InputValue;
|
|
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 & DialogExports = $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="date-field-dialog-form" onsubmit={handleSubmit}>
|
|
45
|
+
<DatetimeField
|
|
46
|
+
{...props}
|
|
47
|
+
{label}
|
|
48
|
+
{name}
|
|
49
|
+
{maxlength}
|
|
50
|
+
{className}
|
|
51
|
+
{autofocus}
|
|
52
|
+
{required}
|
|
53
|
+
bind:value
|
|
54
|
+
/>
|
|
55
|
+
</form>
|
|
56
|
+
</div>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { InputValue } from '../../../input';
|
|
2
|
+
import type { DialogExports } from '../../types';
|
|
3
|
+
type PropsType = {
|
|
4
|
+
value?: InputValue;
|
|
5
|
+
label?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
maxlength?: number;
|
|
8
|
+
className?: string;
|
|
9
|
+
autofocus?: boolean;
|
|
10
|
+
required?: boolean;
|
|
11
|
+
};
|
|
12
|
+
type $$ComponentProps = PropsType & DialogExports;
|
|
13
|
+
declare const DateFieldDialog: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
14
|
+
type DateFieldDialog = ReturnType<typeof DateFieldDialog>;
|
|
15
|
+
export default DateFieldDialog;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { showToast } from '../../../../../services/index.js';
|
|
3
|
+
import type { InputValue } from '../../../input';
|
|
4
|
+
import DatetimeField from '../../../input/components/datetime-field/datetime-field.svelte';
|
|
5
|
+
import type { DialogExports } from '../../types';
|
|
6
|
+
|
|
7
|
+
type PropsType = {
|
|
8
|
+
value?: InputValue;
|
|
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 & DialogExports = $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="datetime-field-dialog-form" onsubmit={handleSubmit}>
|
|
45
|
+
<DatetimeField
|
|
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/datetime-field-dialog/datetime-field-dialog.svelte.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { InputValue } from '../../../input';
|
|
2
|
+
import type { DialogExports } from '../../types';
|
|
3
|
+
type PropsType = {
|
|
4
|
+
value?: InputValue;
|
|
5
|
+
label?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
maxlength?: number;
|
|
8
|
+
className?: string;
|
|
9
|
+
autofocus?: boolean;
|
|
10
|
+
required?: boolean;
|
|
11
|
+
};
|
|
12
|
+
type $$ComponentProps = PropsType & DialogExports;
|
|
13
|
+
declare const DatetimeFieldDialog: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
14
|
+
type DatetimeFieldDialog = ReturnType<typeof DatetimeFieldDialog>;
|
|
15
|
+
export default DatetimeFieldDialog;
|
|
@@ -6,4 +6,6 @@ export { default as NumberFieldDialog } from './components/number-field-dialog/n
|
|
|
6
6
|
export { default as PickerDialog } from './components/picker-dialog/picker-dialog.svelte';
|
|
7
7
|
export { default as TextFieldDialog } from './components/text-field-dialog/text-field-dialog.svelte';
|
|
8
8
|
export { default as TextareaFieldDialog } from './components/textarea-field-dialog/textarea-field-dialog.svelte';
|
|
9
|
+
export { default as DateFieldDialog } from './components/date-field-dialog/date-field-dialog.svelte';
|
|
10
|
+
export { default as DatetimeFieldDialog } from './components/datetime-field-dialog/datetime-field-dialog.svelte';
|
|
9
11
|
export * from './types';
|
|
@@ -6,4 +6,6 @@ export { default as NumberFieldDialog } from './components/number-field-dialog/n
|
|
|
6
6
|
export { default as PickerDialog } from './components/picker-dialog/picker-dialog.svelte';
|
|
7
7
|
export { default as TextFieldDialog } from './components/text-field-dialog/text-field-dialog.svelte';
|
|
8
8
|
export { default as TextareaFieldDialog } from './components/textarea-field-dialog/textarea-field-dialog.svelte';
|
|
9
|
+
export { default as DateFieldDialog } from './components/date-field-dialog/date-field-dialog.svelte';
|
|
10
|
+
export { default as DatetimeFieldDialog } from './components/datetime-field-dialog/datetime-field-dialog.svelte';
|
|
9
11
|
export * from './types';
|
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
|
|
2
1
|
<script lang="ts">
|
|
3
2
|
import ButtonListItem from '../../../button/components/button-list-item/button-list-item.svelte';
|
|
4
3
|
import Button from '../../../button/components/button/button.svelte';
|
|
5
|
-
|
|
4
|
+
|
|
6
5
|
import VirtualScrollingList from '../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte';
|
|
7
6
|
import Icon from '../../../icon/components/icon/icon.svelte';
|
|
8
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
mdiCheckCircle,
|
|
9
|
+
mdiCheckCircleOutline,
|
|
10
|
+
mdiUnfoldMoreHorizontal
|
|
11
|
+
} from '../../../icon/index.js';
|
|
9
12
|
import NoData from '../../../no-data/components/no-data/no-data.svelte';
|
|
10
13
|
import { SvelteSet } from 'svelte/reactivity';
|
|
11
|
-
import InputField
|
|
14
|
+
import InputField from '../input-field/input-field.svelte';
|
|
12
15
|
import SearchField from '../search-field/search-field.svelte';
|
|
13
16
|
import type { ComboboxFieldProps, InputFieldProps } from '../../types';
|
|
14
17
|
|
|
@@ -328,7 +331,7 @@
|
|
|
328
331
|
<div class="flex items-center {displayClassName}" title={displayItemsTitle}>
|
|
329
332
|
{#each displayItems?.slice(0, displayItemsCount) as item, index}
|
|
330
333
|
<div
|
|
331
|
-
class="inline-flex items-center bg-neutral-200
|
|
334
|
+
class="mx-1 inline-flex items-center rounded-full bg-neutral-200 px-2 text-sm font-medium text-nowrap text-neutral-700 {chipClassName}"
|
|
332
335
|
>
|
|
333
336
|
{item}
|
|
334
337
|
</div>
|
|
@@ -379,7 +382,7 @@
|
|
|
379
382
|
<!-- svelte-ignore a11y_interactive_supports_focus -->
|
|
380
383
|
<div
|
|
381
384
|
bind:clientHeight={dropdownHeight}
|
|
382
|
-
class="absolute z-10 {placementClassName} max-h-80 w-full flex
|
|
385
|
+
class="absolute z-10 {placementClassName} flex max-h-80 w-full flex-col rounded-md bg-white text-neutral-600 shadow-lg focus:outline-none sm:text-sm dark:bg-neutral-900 {hasDropdownHeader
|
|
383
386
|
? ''
|
|
384
387
|
: 'pt-1'} {hasDropdownFooter ? '' : 'pb-1'} {dropdownClassName}"
|
|
385
388
|
id="options"
|
|
@@ -389,7 +392,7 @@
|
|
|
389
392
|
{#if hasDropdownHeader}
|
|
390
393
|
<div
|
|
391
394
|
id="dropdown-header"
|
|
392
|
-
class=" flex items-center p-2 px-3
|
|
395
|
+
class=" my-1 flex w-full items-center p-2 px-3 {dropdownHeaderClassName}"
|
|
393
396
|
>
|
|
394
397
|
{#if dropdownHeaderSnippet}
|
|
395
398
|
{@render dropdownHeaderSnippet()}
|
|
@@ -407,7 +410,7 @@
|
|
|
407
410
|
{/if}
|
|
408
411
|
<div
|
|
409
412
|
id="dropdown-body"
|
|
410
|
-
class="flex-grow overflow-y-auto
|
|
413
|
+
class="h-60 flex-grow overflow-y-auto {dropdownBodyClassName}"
|
|
411
414
|
bind:clientHeight={bodyHeight}
|
|
412
415
|
>
|
|
413
416
|
{#if dropdownBodySnippet}
|
|
@@ -422,7 +425,7 @@
|
|
|
422
425
|
{#snippet itemSnippet(item, index)}
|
|
423
426
|
{@const isSelected = selectedItemsSet.has(item[identityFieldName])}
|
|
424
427
|
<li
|
|
425
|
-
class="select-none
|
|
428
|
+
class="h-full select-none"
|
|
426
429
|
id="item-{index}"
|
|
427
430
|
role="option"
|
|
428
431
|
tabindex="-1"
|