@finema/core 2.23.1 → 2.24.0
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/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/components/Dialog/index.vue +6 -2
- package/dist/runtime/components/Table/index.vue +89 -89
- package/dist/runtime/composables/useDialog.d.ts +4 -1
- package/dist/runtime/composables/useDialog.js +16 -5
- package/dist/runtime/theme/dialog.d.ts +6 -0
- package/dist/runtime/theme/dialog.js +7 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -20,8 +20,10 @@
|
|
|
20
20
|
>
|
|
21
21
|
{{ propsSafe.description }}
|
|
22
22
|
</AlertDialogDescription>
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
<div
|
|
24
|
+
v-if="propsSafe.type !== DialogType.LOADING"
|
|
25
|
+
:class="theme.buttonGroup()"
|
|
26
|
+
>
|
|
25
27
|
<Button
|
|
26
28
|
v-if="propsSafe.isShowCancelBtn"
|
|
27
29
|
type="button"
|
|
@@ -94,6 +96,8 @@ const getIcon = computed(() => {
|
|
|
94
96
|
return icons.iconInfo;
|
|
95
97
|
case DialogType.WARNING:
|
|
96
98
|
return icons.iconWarning;
|
|
99
|
+
case DialogType.LOADING:
|
|
100
|
+
return icons.iconLoading;
|
|
97
101
|
default:
|
|
98
102
|
return icons.iconInfo;
|
|
99
103
|
}
|
|
@@ -1,101 +1,101 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div ref="tableContainer">
|
|
3
|
-
<div
|
|
4
|
-
v-if="options.isEnabledSearch"
|
|
2
|
+
<div ref="tableContainer">
|
|
3
|
+
<div
|
|
4
|
+
v-if="options.isEnabledSearch"
|
|
5
5
|
:class="theme.searchContainer({
|
|
6
6
|
class: [ui?.searchContainer]
|
|
7
|
-
})"
|
|
8
|
-
>
|
|
9
|
-
<Input
|
|
10
|
-
v-model="q"
|
|
11
|
-
icon="i-heroicons-magnifying-glass"
|
|
12
|
-
:placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
|
|
13
|
-
/>
|
|
14
|
-
</div>
|
|
15
|
-
<UTable
|
|
16
|
-
v-bind="$attrs"
|
|
17
|
-
:loading="options.status.isLoading"
|
|
18
|
-
:data="options.rawData"
|
|
19
|
-
:columns="options.columns"
|
|
20
|
-
:ui="ui"
|
|
21
|
-
>
|
|
22
|
-
<template #empty>
|
|
23
|
-
<slot
|
|
24
|
-
v-if="options.status.isLoading"
|
|
25
|
-
name="loading"
|
|
26
|
-
>
|
|
27
|
-
<Loader
|
|
28
|
-
:loading="true"
|
|
29
|
-
/>
|
|
30
|
-
</slot>
|
|
31
|
-
<slot
|
|
32
|
-
v-else-if="options.status.isError"
|
|
33
|
-
name="error"
|
|
34
|
-
>
|
|
35
|
-
<div
|
|
7
|
+
})"
|
|
8
|
+
>
|
|
9
|
+
<Input
|
|
10
|
+
v-model="q"
|
|
11
|
+
icon="i-heroicons-magnifying-glass"
|
|
12
|
+
:placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
|
|
13
|
+
/>
|
|
14
|
+
</div>
|
|
15
|
+
<UTable
|
|
16
|
+
v-bind="$attrs"
|
|
17
|
+
:loading="options.status.isLoading"
|
|
18
|
+
:data="options.rawData"
|
|
19
|
+
:columns="options.columns"
|
|
20
|
+
:ui="ui"
|
|
21
|
+
>
|
|
22
|
+
<template #empty>
|
|
23
|
+
<slot
|
|
24
|
+
v-if="options.status.isLoading"
|
|
25
|
+
name="loading"
|
|
26
|
+
>
|
|
27
|
+
<Loader
|
|
28
|
+
:loading="true"
|
|
29
|
+
/>
|
|
30
|
+
</slot>
|
|
31
|
+
<slot
|
|
32
|
+
v-else-if="options.status.isError"
|
|
33
|
+
name="error"
|
|
34
|
+
>
|
|
35
|
+
<div
|
|
36
36
|
class="
|
|
37
37
|
text-error-400 flex h-[200px] items-center justify-center text-2xl
|
|
38
|
-
"
|
|
39
|
-
>
|
|
40
|
-
{{ StringHelper.getError(options.status.errorData) }}
|
|
41
|
-
</div>
|
|
42
|
-
</slot>
|
|
43
|
-
|
|
44
|
-
<slot
|
|
45
|
-
v-else
|
|
46
|
-
name="error"
|
|
47
|
-
>
|
|
48
|
-
<Empty />
|
|
49
|
-
</slot>
|
|
50
|
-
</template>
|
|
51
|
-
<template
|
|
52
|
-
v-for="column in options.columns.filter((item) => !!item.type)"
|
|
53
|
-
#[`${column.accessorKey}-cell`]="{ row }"
|
|
54
|
-
:key="column.accessorKey"
|
|
55
|
-
>
|
|
56
|
-
<component
|
|
57
|
-
:is="column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]"
|
|
58
|
-
v-if="column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]"
|
|
59
|
-
:value="transformValue(column, row)"
|
|
60
|
-
:column="column"
|
|
61
|
-
:row="row"
|
|
62
|
-
/>
|
|
63
|
-
</template>
|
|
64
|
-
<template
|
|
65
|
-
v-for="(_, slotName) of $slots"
|
|
66
|
-
#[slotName]="slotProps"
|
|
67
|
-
>
|
|
68
|
-
<slot
|
|
69
|
-
:name="slotName"
|
|
70
|
-
v-bind="slotProps || {}"
|
|
71
|
-
/>
|
|
72
|
-
</template>
|
|
73
|
-
</UTable>
|
|
74
|
-
|
|
75
|
-
<div
|
|
76
|
-
v-if="!options.isHidePagination"
|
|
38
|
+
"
|
|
39
|
+
>
|
|
40
|
+
{{ StringHelper.getError(options.status.errorData) }}
|
|
41
|
+
</div>
|
|
42
|
+
</slot>
|
|
43
|
+
|
|
44
|
+
<slot
|
|
45
|
+
v-else
|
|
46
|
+
name="error"
|
|
47
|
+
>
|
|
48
|
+
<Empty />
|
|
49
|
+
</slot>
|
|
50
|
+
</template>
|
|
51
|
+
<template
|
|
52
|
+
v-for="column in options.columns.filter((item) => !!item.type)"
|
|
53
|
+
#[`${column.accessorKey}-cell`]="{ row }"
|
|
54
|
+
:key="column.accessorKey"
|
|
55
|
+
>
|
|
56
|
+
<component
|
|
57
|
+
:is="column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]"
|
|
58
|
+
v-if="column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]"
|
|
59
|
+
:value="transformValue(column, row)"
|
|
60
|
+
:column="column"
|
|
61
|
+
:row="row"
|
|
62
|
+
/>
|
|
63
|
+
</template>
|
|
64
|
+
<template
|
|
65
|
+
v-for="(_, slotName) of $slots"
|
|
66
|
+
#[slotName]="slotProps"
|
|
67
|
+
>
|
|
68
|
+
<slot
|
|
69
|
+
:name="slotName"
|
|
70
|
+
v-bind="slotProps || {}"
|
|
71
|
+
/>
|
|
72
|
+
</template>
|
|
73
|
+
</UTable>
|
|
74
|
+
|
|
75
|
+
<div
|
|
76
|
+
v-if="!options.isHidePagination"
|
|
77
77
|
:class="theme.paginationContainer({
|
|
78
78
|
class: [ui?.paginationContainer]
|
|
79
|
-
})"
|
|
80
|
-
>
|
|
81
|
-
<p
|
|
79
|
+
})"
|
|
80
|
+
>
|
|
81
|
+
<p
|
|
82
82
|
:class="theme.paginationInfo({
|
|
83
83
|
class: [ui?.paginationInfo]
|
|
84
|
-
})"
|
|
85
|
-
>
|
|
86
|
-
{{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
|
|
87
|
-
</p>
|
|
88
|
-
<Pagination
|
|
89
|
-
v-if="options.pageOptions.totalPage > 1"
|
|
90
|
-
v-model:page="page"
|
|
91
|
-
:default-page="options.pageOptions?.currentPage || 1"
|
|
92
|
-
:items-per-page="options.pageOptions.limit"
|
|
93
|
-
:total="options.pageOptions.totalCount"
|
|
94
|
-
:to="options.isRouteChange ? to : void 0"
|
|
95
|
-
@update:page="onPageChange"
|
|
96
|
-
/>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
84
|
+
})"
|
|
85
|
+
>
|
|
86
|
+
{{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
|
|
87
|
+
</p>
|
|
88
|
+
<Pagination
|
|
89
|
+
v-if="options.pageOptions.totalPage > 1"
|
|
90
|
+
v-model:page="page"
|
|
91
|
+
:default-page="options.pageOptions?.currentPage || 1"
|
|
92
|
+
:items-per-page="options.pageOptions.limit"
|
|
93
|
+
:total="options.pageOptions.totalCount"
|
|
94
|
+
:to="options.isRouteChange ? to : void 0"
|
|
95
|
+
@update:page="onPageChange"
|
|
96
|
+
/>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
99
|
</template>
|
|
100
100
|
|
|
101
101
|
<script setup>
|
|
@@ -2,7 +2,8 @@ export declare const enum DialogType {
|
|
|
2
2
|
ERROR = "error",
|
|
3
3
|
INFO = "info",
|
|
4
4
|
SUCCESS = "success",
|
|
5
|
-
WARNING = "warning"
|
|
5
|
+
WARNING = "warning",
|
|
6
|
+
LOADING = "loading"
|
|
6
7
|
}
|
|
7
8
|
export interface IDialogMetaItem {
|
|
8
9
|
title: string;
|
|
@@ -21,5 +22,7 @@ export interface IDialog {
|
|
|
21
22
|
success: (payload: IDialogMetaItem) => Promise<boolean>;
|
|
22
23
|
warning: (payload: IDialogMetaItem) => Promise<boolean>;
|
|
23
24
|
confirm: (payload: IDialogMetaItem) => Promise<boolean>;
|
|
25
|
+
loading: (payload: Partial<IDialogMetaItem>) => Promise<boolean>;
|
|
26
|
+
close: () => Promise<void>;
|
|
24
27
|
}
|
|
25
28
|
export declare const useDialog: () => IDialog;
|
|
@@ -5,15 +5,14 @@ export var DialogType = /* @__PURE__ */ ((DialogType2) => {
|
|
|
5
5
|
DialogType2["INFO"] = "info";
|
|
6
6
|
DialogType2["SUCCESS"] = "success";
|
|
7
7
|
DialogType2["WARNING"] = "warning";
|
|
8
|
+
DialogType2["LOADING"] = "loading";
|
|
8
9
|
return DialogType2;
|
|
9
10
|
})(DialogType || {});
|
|
10
11
|
export const useDialog = () => {
|
|
11
12
|
const overlay = useOverlay();
|
|
13
|
+
const modal = overlay.create(Dialog);
|
|
12
14
|
const openDialog = async (payload) => {
|
|
13
|
-
const
|
|
14
|
-
props: payload
|
|
15
|
-
});
|
|
16
|
-
const result = await modal.open();
|
|
15
|
+
const result = await modal.open(payload);
|
|
17
16
|
const res = await result.result;
|
|
18
17
|
return new Promise((resolve, reject) => {
|
|
19
18
|
if (res) {
|
|
@@ -54,11 +53,23 @@ export const useDialog = () => {
|
|
|
54
53
|
isConfirm: true
|
|
55
54
|
});
|
|
56
55
|
};
|
|
56
|
+
const loading = async (payload = {}) => {
|
|
57
|
+
return openDialog({
|
|
58
|
+
...payload,
|
|
59
|
+
title: payload.title || "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14...",
|
|
60
|
+
type: "loading" /* LOADING */
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
const close = async () => {
|
|
64
|
+
return modal.close();
|
|
65
|
+
};
|
|
57
66
|
return {
|
|
58
67
|
error,
|
|
59
68
|
success,
|
|
60
69
|
info,
|
|
61
70
|
warning,
|
|
62
|
-
confirm
|
|
71
|
+
confirm,
|
|
72
|
+
loading,
|
|
73
|
+
close
|
|
63
74
|
};
|
|
64
75
|
};
|
|
@@ -5,6 +5,7 @@ export declare const dialogTheme: {
|
|
|
5
5
|
iconWarning: string;
|
|
6
6
|
iconError: string;
|
|
7
7
|
iconConfirm: string;
|
|
8
|
+
iconLoading: string;
|
|
8
9
|
};
|
|
9
10
|
slots: {
|
|
10
11
|
base: string;
|
|
@@ -32,6 +33,11 @@ export declare const dialogTheme: {
|
|
|
32
33
|
error: {
|
|
33
34
|
icon: string;
|
|
34
35
|
};
|
|
36
|
+
loading: {
|
|
37
|
+
icon: string;
|
|
38
|
+
base: string;
|
|
39
|
+
wrapper: string;
|
|
40
|
+
};
|
|
35
41
|
};
|
|
36
42
|
confirm: {
|
|
37
43
|
true: {
|
|
@@ -4,7 +4,8 @@ export const dialogTheme = {
|
|
|
4
4
|
iconInfo: "i-heroicons-information-circle",
|
|
5
5
|
iconWarning: "i-heroicons-exclamation-circle",
|
|
6
6
|
iconError: "i-heroicons-x-circle",
|
|
7
|
-
iconConfirm: "i-heroicons-information-circle"
|
|
7
|
+
iconConfirm: "i-heroicons-information-circle",
|
|
8
|
+
iconLoading: "i-svg-spinners:180-ring-with-bg"
|
|
8
9
|
},
|
|
9
10
|
slots: {
|
|
10
11
|
base: "flex space-x-4 shadow-lg ring ring-default z-[100] text-sm fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white p-[25px] focus:outline-none",
|
|
@@ -31,6 +32,11 @@ export const dialogTheme = {
|
|
|
31
32
|
},
|
|
32
33
|
error: {
|
|
33
34
|
icon: "text-error"
|
|
35
|
+
},
|
|
36
|
+
loading: {
|
|
37
|
+
icon: "text-primary",
|
|
38
|
+
base: "max-w-[400px]",
|
|
39
|
+
wrapper: "justify-center"
|
|
34
40
|
}
|
|
35
41
|
},
|
|
36
42
|
confirm: {
|