@ticatec/uniface-element 0.1.17 → 0.1.19
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/action-bar/ButtonAction.d.ts +1 -1
- package/dist/dialog/CommonDialog.svelte +34 -0
- package/dist/dialog/CommonDialog.svelte.d.ts +36 -0
- package/dist/dialog/Dialog.svelte +5 -9
- package/dist/dialog/Dialog.svelte.d.ts +5 -5
- package/dist/dialog/DialogBoard.svelte +11 -18
- package/dist/dialog/Dialogs.d.ts +6 -0
- package/dist/dialog/Dialogs.js +21 -0
- package/dist/dialog/index.d.ts +2 -0
- package/dist/dialog/index.js +2 -0
- package/package.json +5 -1
- package/dist/dialog/DialogBox.svelte +0 -25
- package/dist/dialog/DialogBox.svelte.d.ts +0 -22
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
|
|
3
|
+
import Dialog from "./Dialog.svelte";
|
|
4
|
+
import type {ButtonAction, ButtonActions} from "../action-bar";
|
|
5
|
+
import type {DialogCloseConfirm, MouseClickHandler} from "..";
|
|
6
|
+
import i18n from "@ticatec/i18n";
|
|
7
|
+
|
|
8
|
+
export let title: string;
|
|
9
|
+
export let closeConfirm: DialogCloseConfirm | null = null;
|
|
10
|
+
export let content$style: string = '';
|
|
11
|
+
export let closeHandler: () => void;
|
|
12
|
+
export let enableConfirm: boolean = true;
|
|
13
|
+
export let confirmHandler: MouseClickHandler;
|
|
14
|
+
export let confirmText: string | null = null;
|
|
15
|
+
|
|
16
|
+
let confirmAction: ButtonAction = {
|
|
17
|
+
label: confirmText??i18n.getText('uniface.btnConfirm', 'OK'),
|
|
18
|
+
type: "primary",
|
|
19
|
+
disabled: enableConfirm,
|
|
20
|
+
handler: confirmHandler
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
let actions: ButtonActions = [confirmAction];
|
|
24
|
+
|
|
25
|
+
$: {
|
|
26
|
+
confirmAction.disabled = !enableConfirm;
|
|
27
|
+
actions = [...actions];
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<Dialog {title} {content$style} {closeHandler} {actions} {closeConfirm}>
|
|
33
|
+
<slot></slot>
|
|
34
|
+
</Dialog>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { DialogCloseConfirm, MouseClickHandler } from "..";
|
|
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
|
+
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
16
|
+
default: any;
|
|
17
|
+
} ? Props extends Record<string, never> ? any : {
|
|
18
|
+
children?: any;
|
|
19
|
+
} : {});
|
|
20
|
+
declare const CommonDialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
21
|
+
title: string;
|
|
22
|
+
closeConfirm?: DialogCloseConfirm | null;
|
|
23
|
+
content$style?: string;
|
|
24
|
+
closeHandler: () => void;
|
|
25
|
+
enableConfirm?: boolean;
|
|
26
|
+
confirmHandler: MouseClickHandler;
|
|
27
|
+
confirmText?: string | null;
|
|
28
|
+
}, {
|
|
29
|
+
default: {};
|
|
30
|
+
}>, {
|
|
31
|
+
[evt: string]: CustomEvent<any>;
|
|
32
|
+
}, {
|
|
33
|
+
default: {};
|
|
34
|
+
}, {}, string>;
|
|
35
|
+
type CommonDialog = InstanceType<typeof CommonDialog>;
|
|
36
|
+
export default CommonDialog;
|
|
@@ -2,18 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
import {fade} from "svelte/transition";
|
|
4
4
|
import type {DialogCloseConfirm} from "./DialogCloseConfirm";
|
|
5
|
-
import ActionBar, {type ButtonActions} from "../action-bar";
|
|
5
|
+
import ActionBar, {type ButtonAction, type ButtonActions} from "../action-bar";
|
|
6
6
|
import i18n from "@ticatec/i18n";
|
|
7
7
|
import {onMount} from "svelte";
|
|
8
8
|
|
|
9
|
-
export let title: string
|
|
10
|
-
export let actions: ButtonActions;
|
|
11
|
-
export let closeConfirm: DialogCloseConfirm;
|
|
9
|
+
export let title: string;
|
|
10
|
+
export let actions: ButtonActions | null = null;
|
|
11
|
+
export let closeConfirm: DialogCloseConfirm | null = null;
|
|
12
12
|
export let content$style: string = '';
|
|
13
13
|
export let closeHandler: () => void;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
export let closeAction: any;
|
|
14
|
+
export let closeAction: ButtonAction | null = null;
|
|
17
15
|
|
|
18
16
|
export const close = async () => {
|
|
19
17
|
let confirm = closeConfirm ? await closeConfirm() : true;
|
|
@@ -50,10 +48,8 @@
|
|
|
50
48
|
type: 'secondary'
|
|
51
49
|
};
|
|
52
50
|
closeAction.handler = close;
|
|
53
|
-
dialogActions = actions ? [...actions, closeAction] : [closeAction];
|
|
54
51
|
})
|
|
55
52
|
|
|
56
|
-
$:console.log(closeAction)
|
|
57
53
|
$: dialogActions = actions ? [...actions, closeAction] : [closeAction];
|
|
58
54
|
|
|
59
55
|
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DialogCloseConfirm } from "./DialogCloseConfirm";
|
|
2
|
-
import { type ButtonActions } from "../action-bar";
|
|
2
|
+
import { type ButtonAction, type ButtonActions } from "../action-bar";
|
|
3
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
4
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
5
5
|
$$bindings?: Bindings;
|
|
@@ -19,12 +19,12 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
|
19
19
|
children?: any;
|
|
20
20
|
} : {});
|
|
21
21
|
declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
22
|
-
title
|
|
23
|
-
actions
|
|
24
|
-
closeConfirm
|
|
22
|
+
title: string;
|
|
23
|
+
actions?: ButtonActions | null;
|
|
24
|
+
closeConfirm?: DialogCloseConfirm | null;
|
|
25
25
|
content$style?: string;
|
|
26
26
|
closeHandler: () => void;
|
|
27
|
-
closeAction
|
|
27
|
+
closeAction?: ButtonAction | null;
|
|
28
28
|
close?: () => Promise<void>;
|
|
29
29
|
}, {
|
|
30
30
|
default: {};
|
|
@@ -3,16 +3,18 @@
|
|
|
3
3
|
|
|
4
4
|
import {onDestroy, onMount} from "svelte";
|
|
5
5
|
import {initialize} from "./IDialog";
|
|
6
|
-
|
|
6
|
+
|
|
7
|
+
import {dialogs} from "./Dialogs";
|
|
7
8
|
|
|
8
9
|
export const open = (component: any, params: any) => {
|
|
9
|
-
let dialog = {component, params}
|
|
10
|
-
params.closeHandler =
|
|
11
|
-
|
|
10
|
+
let dialog = {id: (new Date().getTime()).toString(36) ,component, params};
|
|
11
|
+
params.closeHandler = () => {
|
|
12
|
+
dialogs.removeDialog(dialog.id);
|
|
13
|
+
}
|
|
14
|
+
dialogs.showDialog(dialog);
|
|
12
15
|
}
|
|
13
16
|
|
|
14
|
-
let
|
|
15
|
-
let board:any;
|
|
17
|
+
let board: any;
|
|
16
18
|
|
|
17
19
|
onMount(() => {
|
|
18
20
|
document.body.appendChild(board);
|
|
@@ -26,20 +28,11 @@
|
|
|
26
28
|
board && board.remove();
|
|
27
29
|
});
|
|
28
30
|
|
|
29
|
-
const remove = (dialog:any) => () => {
|
|
30
|
-
let pos = dialogs.indexOf(dialog);
|
|
31
|
-
if (pos > -1) {
|
|
32
|
-
dialogs.splice(pos, 1);
|
|
33
|
-
dialogs = [...dialogs];
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
31
|
|
|
38
32
|
</script>
|
|
39
33
|
|
|
40
|
-
<div bind:this={board} class="uniface-dialog-board" style="display: {dialogs.length > 0 ? 'block' : 'none'}">
|
|
41
|
-
{#each dialogs as dialog}
|
|
42
|
-
<
|
|
43
|
-
</DialogBox>
|
|
34
|
+
<div bind:this={board} class="uniface-dialog-board" style="display: {$dialogs.length > 0 ? 'block' : 'none'}">
|
|
35
|
+
{#each $dialogs as dialog}
|
|
36
|
+
<svelte:component this={dialog.component} {...dialog.params}></svelte:component>
|
|
44
37
|
{/each}
|
|
45
38
|
</div>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { writable } from "svelte/store";
|
|
2
|
+
const initialDialogs = [];
|
|
3
|
+
function createDialogStore() {
|
|
4
|
+
const { subscribe, set, update } = writable(initialDialogs);
|
|
5
|
+
return {
|
|
6
|
+
subscribe,
|
|
7
|
+
showDialog(dialog) {
|
|
8
|
+
update(dialogs => {
|
|
9
|
+
const newDialog = { ...dialog };
|
|
10
|
+
return [...dialogs, newDialog];
|
|
11
|
+
});
|
|
12
|
+
},
|
|
13
|
+
removeDialog(id) {
|
|
14
|
+
update(dialogs => dialogs.filter(dialog => dialog.id !== id));
|
|
15
|
+
},
|
|
16
|
+
clear() {
|
|
17
|
+
set([]);
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
export const dialogs = createDialogStore();
|
package/dist/dialog/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import Dialog from "./Dialog.svelte";
|
|
|
2
2
|
import DialogBoard from "./DialogBoard.svelte";
|
|
3
3
|
import type IDialog from "./IDialog";
|
|
4
4
|
import type { DialogCloseConfirm } from "./DialogCloseConfirm";
|
|
5
|
+
import CommonDialog from "./CommonDialog.svelte";
|
|
5
6
|
declare global {
|
|
6
7
|
interface Window {
|
|
7
8
|
Dialog: IDialog;
|
|
@@ -11,3 +12,4 @@ export { type IDialog };
|
|
|
11
12
|
export { type DialogCloseConfirm };
|
|
12
13
|
export { DialogBoard };
|
|
13
14
|
export default Dialog;
|
|
15
|
+
export { CommonDialog };
|
package/dist/dialog/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ticatec/uniface-element",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.19",
|
|
4
4
|
"description": "uniface web elements",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -132,6 +132,10 @@
|
|
|
132
132
|
"types": "./dist/dialog/index.d.ts",
|
|
133
133
|
"import": "./dist/dialog/index.js"
|
|
134
134
|
},
|
|
135
|
+
"./CommonDialog": {
|
|
136
|
+
"types": "./dist/dialog/CommonDialog.svelte.d.ts",
|
|
137
|
+
"import": "./dist/dialog/CommonDialog.svelte"
|
|
138
|
+
},
|
|
135
139
|
"./DialogBoard": {
|
|
136
140
|
"types": "./dist/dialog/DialogBoard.svelte.d.ts",
|
|
137
141
|
"import": "./dist/dialog/DialogBoard.svelte"
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
import Dialog from "./Dialog.svelte";
|
|
4
|
-
import type {ButtonActions} from "../action-bar";
|
|
5
|
-
import type {DialogCloseConfirm} from "..";
|
|
6
|
-
|
|
7
|
-
export let dialog: any;
|
|
8
|
-
export let params: any;
|
|
9
|
-
export let closeHandler: () => void;
|
|
10
|
-
let actions: ButtonActions = null as unknown as ButtonActions;
|
|
11
|
-
|
|
12
|
-
let title: string;
|
|
13
|
-
|
|
14
|
-
let instance: any;
|
|
15
|
-
|
|
16
|
-
let closeConfirm: DialogCloseConfirm;
|
|
17
|
-
let closeAction: any;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
</script>
|
|
21
|
-
|
|
22
|
-
<Dialog bind:this={instance} {title} {closeHandler} {closeConfirm} {actions} {closeAction}>
|
|
23
|
-
<svelte:component this={dialog} dialog={instance} bind:title bind:actions bind:closeConfirm bind:closeAction
|
|
24
|
-
{...params}></svelte:component>
|
|
25
|
-
</Dialog>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
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> {
|
|
2
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
-
$$bindings?: Bindings;
|
|
4
|
-
} & Exports;
|
|
5
|
-
(internal: unknown, props: Props & {
|
|
6
|
-
$$events?: Events;
|
|
7
|
-
$$slots?: Slots;
|
|
8
|
-
}): Exports & {
|
|
9
|
-
$set?: any;
|
|
10
|
-
$on?: any;
|
|
11
|
-
};
|
|
12
|
-
z_$$bindings?: Bindings;
|
|
13
|
-
}
|
|
14
|
-
declare const DialogBox: $$__sveltets_2_IsomorphicComponent<{
|
|
15
|
-
dialog: any;
|
|
16
|
-
params: any;
|
|
17
|
-
closeHandler: () => void;
|
|
18
|
-
}, {
|
|
19
|
-
[evt: string]: CustomEvent<any>;
|
|
20
|
-
}, {}, {}, string>;
|
|
21
|
-
type DialogBox = InstanceType<typeof DialogBox>;
|
|
22
|
-
export default DialogBox;
|