jky-component-lib 0.0.80 → 0.0.88
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/es/components.d.ts +1 -0
- package/dist/es/components.js +4 -1
- package/dist/es/index.js +2 -0
- package/dist/es/modal/Footer.vue.d.ts +10 -0
- package/dist/es/modal/Footer.vue.js +59 -0
- package/dist/es/modal/Footer.vue2.js +4 -0
- package/dist/es/modal/Header.vue.d.ts +37 -0
- package/dist/es/modal/Header.vue.js +79 -0
- package/dist/es/modal/Header.vue2.js +4 -0
- package/dist/es/modal/Modal.vue.d.ts +75 -0
- package/dist/es/modal/Modal.vue.js +224 -0
- package/dist/es/modal/Modal.vue3.js +5 -0
- package/dist/es/modal/index.d.ts +5 -0
- package/dist/es/modal/index.js +8 -0
- package/dist/es/modal/style.css +8 -0
- package/dist/es/package.json.js +1 -1
- package/dist/es/page-layout/PageLayout.vue.d.ts +1 -0
- package/dist/es/page-layout/PageLayout.vue.js +10 -10
- package/dist/es/style.css +116 -0
- package/dist/lib/components.d.ts +1 -0
- package/dist/lib/components.js +21 -18
- package/dist/lib/index.js +14 -12
- package/dist/lib/modal/Footer.vue.d.ts +10 -0
- package/dist/lib/modal/Footer.vue.js +59 -0
- package/dist/lib/modal/Footer.vue2.js +4 -0
- package/dist/lib/modal/Header.vue.d.ts +37 -0
- package/dist/lib/modal/Header.vue.js +79 -0
- package/dist/lib/modal/Header.vue2.js +4 -0
- package/dist/lib/modal/Modal.vue.d.ts +75 -0
- package/dist/lib/modal/Modal.vue.js +224 -0
- package/dist/lib/modal/Modal.vue3.js +5 -0
- package/dist/lib/modal/index.d.ts +5 -0
- package/dist/lib/modal/index.js +8 -0
- package/dist/lib/modal/style.css +8 -0
- package/dist/lib/package.json.js +1 -1
- package/dist/lib/page-layout/PageLayout.vue.d.ts +1 -0
- package/dist/lib/page-layout/PageLayout.vue.js +9 -9
- package/dist/lib/style.css +116 -0
- package/package.json +5 -4
package/dist/es/components.d.ts
CHANGED
package/dist/es/components.js
CHANGED
|
@@ -4,6 +4,7 @@ import { JkyButtonNav } from "./button-nav/index.js";
|
|
|
4
4
|
import { JkyCodeMirrorEditor } from "./code-mirror-editor/index.js";
|
|
5
5
|
import { JkyForm } from "./form/index.js";
|
|
6
6
|
import { JkyMenu } from "./menu/index.js";
|
|
7
|
+
import { JkyModal } from "./modal/index.js";
|
|
7
8
|
import { JkyPageHeader } from "./page-header/index.js";
|
|
8
9
|
import { JkyPageLayout } from "./page-layout/index.js";
|
|
9
10
|
import { JkyPageTable } from "./page-table/index.js";
|
|
@@ -22,7 +23,8 @@ const components = [
|
|
|
22
23
|
JkyRichEditor,
|
|
23
24
|
JkyPageTable,
|
|
24
25
|
JkyPageLayout,
|
|
25
|
-
JkyTabs
|
|
26
|
+
JkyTabs,
|
|
27
|
+
JkyModal
|
|
26
28
|
];
|
|
27
29
|
export {
|
|
28
30
|
JkyAddInput,
|
|
@@ -31,6 +33,7 @@ export {
|
|
|
31
33
|
JkyCodeMirrorEditor,
|
|
32
34
|
JkyForm,
|
|
33
35
|
JkyMenu,
|
|
36
|
+
JkyModal,
|
|
34
37
|
JkyPageHeader,
|
|
35
38
|
JkyPageLayout,
|
|
36
39
|
JkyPageTable,
|
package/dist/es/index.js
CHANGED
|
@@ -8,6 +8,7 @@ import { JkyButtonNav } from "./button-nav/index.js";
|
|
|
8
8
|
import { JkyCodeMirrorEditor } from "./code-mirror-editor/index.js";
|
|
9
9
|
import { JkyForm } from "./form/index.js";
|
|
10
10
|
import { JkyMenu } from "./menu/index.js";
|
|
11
|
+
import { JkyModal } from "./modal/index.js";
|
|
11
12
|
import { JkyPageHeader } from "./page-header/index.js";
|
|
12
13
|
import { JkyPageLayout } from "./page-layout/index.js";
|
|
13
14
|
import { JkyPageTable } from "./page-table/index.js";
|
|
@@ -27,6 +28,7 @@ export {
|
|
|
27
28
|
JkyComponentLibResolver,
|
|
28
29
|
JkyForm,
|
|
29
30
|
JkyMenu,
|
|
31
|
+
JkyModal,
|
|
30
32
|
JkyPageHeader,
|
|
31
33
|
JkyPageLayout,
|
|
32
34
|
JkyPageTable,
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ModalProps } from './types';
|
|
2
|
+
type __VLS_Props = Pick<ModalProps, 'confirmText' | 'cancelText'>;
|
|
3
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
4
|
+
cancel: (...args: any[]) => void;
|
|
5
|
+
confirm: (...args: any[]) => void;
|
|
6
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
7
|
+
onCancel?: ((...args: any[]) => any) | undefined;
|
|
8
|
+
onConfirm?: ((...args: any[]) => any) | undefined;
|
|
9
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { defineComponent, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createTextVNode, toDisplayString } from "vue";
|
|
21
|
+
const _hoisted_1 = { class: "w-full sticky bottom-0 bg-white flex justify-end items-center p-4" };
|
|
22
|
+
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
|
|
23
|
+
name: "JkyModalFooter"
|
|
24
|
+
}), {
|
|
25
|
+
__name: "Footer",
|
|
26
|
+
props: {
|
|
27
|
+
confirmText: {},
|
|
28
|
+
cancelText: {}
|
|
29
|
+
},
|
|
30
|
+
emits: ["confirm", "cancel"],
|
|
31
|
+
setup(__props) {
|
|
32
|
+
const props = __props;
|
|
33
|
+
return (_ctx, _cache) => {
|
|
34
|
+
const _component_el_button = resolveComponent("el-button");
|
|
35
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
36
|
+
createVNode(_component_el_button, {
|
|
37
|
+
type: "primary",
|
|
38
|
+
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("confirm"))
|
|
39
|
+
}, {
|
|
40
|
+
default: withCtx(() => [
|
|
41
|
+
createTextVNode(toDisplayString(props.confirmText || "确认"), 1)
|
|
42
|
+
]),
|
|
43
|
+
_: 1
|
|
44
|
+
}),
|
|
45
|
+
createVNode(_component_el_button, {
|
|
46
|
+
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("cancel"))
|
|
47
|
+
}, {
|
|
48
|
+
default: withCtx(() => [
|
|
49
|
+
createTextVNode(toDisplayString(props.cancelText || "取消"), 1)
|
|
50
|
+
]),
|
|
51
|
+
_: 1
|
|
52
|
+
})
|
|
53
|
+
]);
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
}));
|
|
57
|
+
export {
|
|
58
|
+
_sfc_main as default
|
|
59
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
title: string;
|
|
3
|
+
fullscreen: boolean;
|
|
4
|
+
mode?: 'dialog' | 'drawer';
|
|
5
|
+
drawerDirection?: 'rtl' | 'ltr' | 'ttb' | 'btt';
|
|
6
|
+
};
|
|
7
|
+
declare function __VLS_template(): {
|
|
8
|
+
attrs: Partial<{}>;
|
|
9
|
+
slots: {
|
|
10
|
+
default?(_: {}): any;
|
|
11
|
+
direction?(_: {}): any;
|
|
12
|
+
toggle?(_: {}): any;
|
|
13
|
+
fullscreen?(_: {}): any;
|
|
14
|
+
close?(_: {}): any;
|
|
15
|
+
};
|
|
16
|
+
refs: {};
|
|
17
|
+
rootEl: HTMLDivElement;
|
|
18
|
+
};
|
|
19
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
20
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
21
|
+
close: () => any;
|
|
22
|
+
toggle: () => any;
|
|
23
|
+
fullscreen: () => any;
|
|
24
|
+
toggleDirection: () => any;
|
|
25
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
26
|
+
onClose?: (() => any) | undefined;
|
|
27
|
+
onToggle?: (() => any) | undefined;
|
|
28
|
+
onFullscreen?: (() => any) | undefined;
|
|
29
|
+
onToggleDirection?: (() => any) | undefined;
|
|
30
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
31
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
32
|
+
export default _default;
|
|
33
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
34
|
+
new (): {
|
|
35
|
+
$slots: S;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, toDisplayString, createCommentVNode, normalizeClass } from "vue";
|
|
21
|
+
const _hoisted_1 = { class: "jky-modal-header w-full flex items-center justify-between p-4 border-b border-solid border-b-black/15" };
|
|
22
|
+
const _hoisted_2 = { class: "flex-1 truncate jky-modal-header__title" };
|
|
23
|
+
const _hoisted_3 = { class: "flex-none flex items-center text-lg gap-x-2 jky-modal-header__btns" };
|
|
24
|
+
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
|
|
25
|
+
name: "JkyModalHeader"
|
|
26
|
+
}), {
|
|
27
|
+
__name: "Header",
|
|
28
|
+
props: {
|
|
29
|
+
title: {},
|
|
30
|
+
fullscreen: { type: Boolean },
|
|
31
|
+
mode: {},
|
|
32
|
+
drawerDirection: {}
|
|
33
|
+
},
|
|
34
|
+
emits: ["toggle", "fullscreen", "close", "toggleDirection"],
|
|
35
|
+
setup(__props) {
|
|
36
|
+
return (_ctx, _cache) => {
|
|
37
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
38
|
+
createElementVNode("div", _hoisted_2, [
|
|
39
|
+
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
40
|
+
createElementVNode("span", null, toDisplayString(__props.title), 1)
|
|
41
|
+
])
|
|
42
|
+
]),
|
|
43
|
+
createElementVNode("div", _hoisted_3, [
|
|
44
|
+
__props.mode === "drawer" ? renderSlot(_ctx.$slots, "direction", { key: 0 }, () => [
|
|
45
|
+
createElementVNode("span", {
|
|
46
|
+
title: "切换方向(左/右)",
|
|
47
|
+
class: "icon-[streamline-ultimate--direction-button-2] hover:text-(--el-color-primary) cursor-pointer",
|
|
48
|
+
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggleDirection"))
|
|
49
|
+
})
|
|
50
|
+
]) : createCommentVNode("", true),
|
|
51
|
+
renderSlot(_ctx.$slots, "toggle", {}, () => [
|
|
52
|
+
createElementVNode("span", {
|
|
53
|
+
title: "切换风格(弹窗/抽屉)",
|
|
54
|
+
class: "icon-[mi--switch] hover:text-(--el-color-primary) cursor-pointer",
|
|
55
|
+
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("toggle"))
|
|
56
|
+
})
|
|
57
|
+
]),
|
|
58
|
+
renderSlot(_ctx.$slots, "fullscreen", {}, () => [
|
|
59
|
+
createElementVNode("span", {
|
|
60
|
+
title: "切换全屏",
|
|
61
|
+
class: normalizeClass(["cursor-pointer hover:text-(--el-color-primary)", [__props.fullscreen ? "icon-[radix-icons--exit-full-screen]" : "icon-[mdi--fullscreen]"]]),
|
|
62
|
+
onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("fullscreen"))
|
|
63
|
+
}, null, 2)
|
|
64
|
+
]),
|
|
65
|
+
renderSlot(_ctx.$slots, "close", {}, () => [
|
|
66
|
+
createElementVNode("span", {
|
|
67
|
+
title: "关闭",
|
|
68
|
+
class: "icon-[carbon--close] hover:text-(--el-color-primary) cursor-pointer",
|
|
69
|
+
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("close"))
|
|
70
|
+
})
|
|
71
|
+
])
|
|
72
|
+
])
|
|
73
|
+
]);
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
}));
|
|
77
|
+
export {
|
|
78
|
+
_sfc_main as default
|
|
79
|
+
};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { ModalDirection, ModalProps } from './types';
|
|
2
|
+
type __VLS_Props = ModalProps;
|
|
3
|
+
declare function handleTypeChange(): void;
|
|
4
|
+
declare function toggleFullscreen(): void;
|
|
5
|
+
declare function toggleDirection(): void;
|
|
6
|
+
declare function handleClose(): void;
|
|
7
|
+
type __VLS_PublicProps = {
|
|
8
|
+
modelValue?: boolean;
|
|
9
|
+
'mode'?: 'dialog' | 'drawer';
|
|
10
|
+
'fullscreen'?: boolean;
|
|
11
|
+
'direction'?: ModalDirection;
|
|
12
|
+
} & __VLS_Props;
|
|
13
|
+
declare function __VLS_template(): {
|
|
14
|
+
attrs: Partial<{}>;
|
|
15
|
+
slots: {
|
|
16
|
+
header?(_: {
|
|
17
|
+
fullscreen: boolean;
|
|
18
|
+
close: typeof handleClose;
|
|
19
|
+
toggleFullscreen: typeof toggleFullscreen;
|
|
20
|
+
toggleType: typeof handleTypeChange;
|
|
21
|
+
}): any;
|
|
22
|
+
header?(_: {
|
|
23
|
+
fullscreen: boolean;
|
|
24
|
+
close: typeof handleClose;
|
|
25
|
+
toggleFullscreen: typeof toggleFullscreen;
|
|
26
|
+
toggleType: typeof handleTypeChange;
|
|
27
|
+
toggleDirection: typeof toggleDirection;
|
|
28
|
+
}): any;
|
|
29
|
+
default?(_: {}): any;
|
|
30
|
+
default?(_: {}): any;
|
|
31
|
+
footer?(_: {}): any;
|
|
32
|
+
footer?(_: {}): any;
|
|
33
|
+
};
|
|
34
|
+
refs: {};
|
|
35
|
+
rootEl: any;
|
|
36
|
+
};
|
|
37
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
38
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
39
|
+
"update:modelValue": (value: boolean) => any;
|
|
40
|
+
"update:mode": (value: "dialog" | "drawer") => any;
|
|
41
|
+
"update:fullscreen": (value: boolean) => any;
|
|
42
|
+
"update:direction": (value: ModalDirection) => any;
|
|
43
|
+
} & {
|
|
44
|
+
"update:modelValue": (value: boolean) => any;
|
|
45
|
+
cancel: () => any;
|
|
46
|
+
close: () => any;
|
|
47
|
+
open: () => any;
|
|
48
|
+
confirm: () => any;
|
|
49
|
+
opened: () => any;
|
|
50
|
+
closed: () => any;
|
|
51
|
+
typeChange: (type: import('./types').ModalType) => any;
|
|
52
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
53
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
54
|
+
onCancel?: (() => any) | undefined;
|
|
55
|
+
onClose?: (() => any) | undefined;
|
|
56
|
+
onOpen?: (() => any) | undefined;
|
|
57
|
+
onConfirm?: (() => any) | undefined;
|
|
58
|
+
onOpened?: (() => any) | undefined;
|
|
59
|
+
onClosed?: (() => any) | undefined;
|
|
60
|
+
"onUpdate:mode"?: ((value: "dialog" | "drawer") => any) | undefined;
|
|
61
|
+
"onUpdate:fullscreen"?: ((value: boolean) => any) | undefined;
|
|
62
|
+
"onUpdate:direction"?: ((value: ModalDirection) => any) | undefined;
|
|
63
|
+
onTypeChange?: ((type: import('./types').ModalType) => any) | undefined;
|
|
64
|
+
}>, {
|
|
65
|
+
title: string;
|
|
66
|
+
cancelText: string;
|
|
67
|
+
confirmText: string;
|
|
68
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
69
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
70
|
+
export default _default;
|
|
71
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
72
|
+
new (): {
|
|
73
|
+
$slots: S;
|
|
74
|
+
};
|
|
75
|
+
};
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { defineComponent, useAttrs, useModel, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, mergeModels } from "vue";
|
|
21
|
+
import { ElDialog, ElScrollbar, ElDrawer } from "element-plus";
|
|
22
|
+
import _sfc_main$1 from "./Footer.vue.js";
|
|
23
|
+
import _sfc_main$2 from "./Header.vue.js";
|
|
24
|
+
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
|
|
25
|
+
name: "JkyModal",
|
|
26
|
+
inheritAttrs: false
|
|
27
|
+
}), {
|
|
28
|
+
__name: "Modal",
|
|
29
|
+
props: /* @__PURE__ */ mergeModels({
|
|
30
|
+
title: { default: "" },
|
|
31
|
+
dialogProps: {},
|
|
32
|
+
drawerProps: {},
|
|
33
|
+
confirmText: { default: "确认" },
|
|
34
|
+
cancelText: { default: "取消" }
|
|
35
|
+
}, {
|
|
36
|
+
"modelValue": __spreadValues({ type: Boolean }, {
|
|
37
|
+
default: false
|
|
38
|
+
}),
|
|
39
|
+
"modelModifiers": {},
|
|
40
|
+
"mode": {
|
|
41
|
+
default: "drawer"
|
|
42
|
+
},
|
|
43
|
+
"modeModifiers": {},
|
|
44
|
+
"fullscreen": __spreadValues({ type: Boolean }, {
|
|
45
|
+
default: false
|
|
46
|
+
}),
|
|
47
|
+
"fullscreenModifiers": {},
|
|
48
|
+
"direction": {
|
|
49
|
+
default: "rtl"
|
|
50
|
+
},
|
|
51
|
+
"directionModifiers": {}
|
|
52
|
+
}),
|
|
53
|
+
emits: /* @__PURE__ */ mergeModels(["update:modelValue", "open", "opened", "close", "closed", "typeChange", "confirm", "cancel"], ["update:modelValue", "update:mode", "update:fullscreen", "update:direction"]),
|
|
54
|
+
setup(__props, { emit: __emit }) {
|
|
55
|
+
const props = __props;
|
|
56
|
+
const emit = __emit;
|
|
57
|
+
const attrs = useAttrs();
|
|
58
|
+
const modelValue = useModel(__props, "modelValue");
|
|
59
|
+
const mode = useModel(__props, "mode");
|
|
60
|
+
const fullscreen = useModel(__props, "fullscreen");
|
|
61
|
+
const direction = useModel(__props, "direction");
|
|
62
|
+
function handleTypeChange() {
|
|
63
|
+
if (fullscreen.value) {
|
|
64
|
+
fullscreen.value = false;
|
|
65
|
+
setTimeout(() => {
|
|
66
|
+
mode.value = mode.value === "drawer" ? "dialog" : "drawer";
|
|
67
|
+
}, 150);
|
|
68
|
+
} else {
|
|
69
|
+
mode.value = mode.value === "drawer" ? "dialog" : "drawer";
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
function toggleFullscreen() {
|
|
73
|
+
fullscreen.value = !fullscreen.value;
|
|
74
|
+
}
|
|
75
|
+
function toggleDirection() {
|
|
76
|
+
const directions = ["rtl", "ltr", "ttb", "btt"];
|
|
77
|
+
const currentIndex = directions.indexOf(direction.value);
|
|
78
|
+
const nextIndex = (currentIndex + 1) % directions.length;
|
|
79
|
+
direction.value = directions[nextIndex];
|
|
80
|
+
}
|
|
81
|
+
function handleClose() {
|
|
82
|
+
modelValue.value = false;
|
|
83
|
+
}
|
|
84
|
+
function handleConfirm() {
|
|
85
|
+
handleClose();
|
|
86
|
+
emit("confirm");
|
|
87
|
+
}
|
|
88
|
+
function handleCancel() {
|
|
89
|
+
handleClose();
|
|
90
|
+
emit("cancel");
|
|
91
|
+
}
|
|
92
|
+
const footerClass = computed(
|
|
93
|
+
() => {
|
|
94
|
+
return [
|
|
95
|
+
"p-0 pt-0! sticky bottom-0 bg-white border-t border-solid border-t-black/15",
|
|
96
|
+
attrs.footerClass || attrs["footer-class"]
|
|
97
|
+
].filter(Boolean).join(" ");
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
const bodyClass = computed(() => {
|
|
101
|
+
return [
|
|
102
|
+
"px-4!",
|
|
103
|
+
attrs.bodyClass || attrs["body-class"]
|
|
104
|
+
].filter(Boolean).join(" ");
|
|
105
|
+
});
|
|
106
|
+
const headerClass = computed(() => {
|
|
107
|
+
return [
|
|
108
|
+
"p-0 mb-0!",
|
|
109
|
+
attrs.headerClass || attrs["header-class"]
|
|
110
|
+
].filter(Boolean).join(" ");
|
|
111
|
+
});
|
|
112
|
+
return (_ctx, _cache) => {
|
|
113
|
+
var _a, _b, _c;
|
|
114
|
+
return mode.value === "dialog" ? (openBlock(), createBlock(unref(ElDialog), mergeProps({
|
|
115
|
+
key: 0,
|
|
116
|
+
modelValue: modelValue.value,
|
|
117
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
|
|
118
|
+
title: __props.title,
|
|
119
|
+
width: typeof ((_a = props.dialogProps) == null ? void 0 : _a.width) === "number" ? `${props.dialogProps.width}px` : (_b = props.dialogProps) == null ? void 0 : _b.width,
|
|
120
|
+
class: "p-0! jky-modal",
|
|
121
|
+
"body-class": bodyClass.value,
|
|
122
|
+
"footer-class": footerClass.value,
|
|
123
|
+
"header-class": headerClass.value
|
|
124
|
+
}, props.dialogProps, {
|
|
125
|
+
"show-close": false,
|
|
126
|
+
fullscreen: fullscreen.value,
|
|
127
|
+
style: { "--el-dialog-padding-primary": 0 },
|
|
128
|
+
onOpened: _cache[1] || (_cache[1] = ($event) => emit("opened")),
|
|
129
|
+
onClosed: _cache[2] || (_cache[2] = ($event) => emit("closed"))
|
|
130
|
+
}), {
|
|
131
|
+
header: withCtx(() => [
|
|
132
|
+
_ctx.$slots.header ? renderSlot(_ctx.$slots, "header", {
|
|
133
|
+
key: 0,
|
|
134
|
+
fullscreen: fullscreen.value,
|
|
135
|
+
close: handleClose,
|
|
136
|
+
toggleFullscreen,
|
|
137
|
+
toggleType: handleTypeChange
|
|
138
|
+
}) : (openBlock(), createBlock(_sfc_main$2, {
|
|
139
|
+
key: 1,
|
|
140
|
+
fullscreen: fullscreen.value,
|
|
141
|
+
mode: mode.value,
|
|
142
|
+
title: __props.title,
|
|
143
|
+
onFullscreen: toggleFullscreen,
|
|
144
|
+
onClose: handleClose,
|
|
145
|
+
onToggle: handleTypeChange
|
|
146
|
+
}, null, 8, ["fullscreen", "mode", "title"]))
|
|
147
|
+
]),
|
|
148
|
+
footer: withCtx(() => [
|
|
149
|
+
_ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : (openBlock(), createBlock(_sfc_main$1, {
|
|
150
|
+
key: 1,
|
|
151
|
+
"confirm-text": __props.confirmText,
|
|
152
|
+
"cancel-text": __props.cancelText,
|
|
153
|
+
onConfirm: handleConfirm,
|
|
154
|
+
onCancel: handleCancel
|
|
155
|
+
}, null, 8, ["confirm-text", "cancel-text"]))
|
|
156
|
+
]),
|
|
157
|
+
default: withCtx(() => [
|
|
158
|
+
createVNode(unref(ElScrollbar), {
|
|
159
|
+
"max-height": fullscreen.value ? "100%" : "60vh"
|
|
160
|
+
}, {
|
|
161
|
+
default: withCtx(() => [
|
|
162
|
+
renderSlot(_ctx.$slots, "default")
|
|
163
|
+
]),
|
|
164
|
+
_: 3
|
|
165
|
+
}, 8, ["max-height"])
|
|
166
|
+
]),
|
|
167
|
+
_: 3
|
|
168
|
+
}, 16, ["modelValue", "title", "width", "body-class", "footer-class", "header-class", "fullscreen"])) : (openBlock(), createBlock(unref(ElDrawer), mergeProps({
|
|
169
|
+
key: 1,
|
|
170
|
+
modelValue: modelValue.value,
|
|
171
|
+
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modelValue.value = $event),
|
|
172
|
+
title: __props.title,
|
|
173
|
+
direction: direction.value,
|
|
174
|
+
class: "p-0! jky-modal jky-modal--drawer",
|
|
175
|
+
"body-class": bodyClass.value,
|
|
176
|
+
"footer-class": footerClass.value,
|
|
177
|
+
"header-class": headerClass.value
|
|
178
|
+
}, props.drawerProps, {
|
|
179
|
+
"show-close": false,
|
|
180
|
+
size: fullscreen.value ? "100%" : (_c = props.drawerProps) == null ? void 0 : _c.size,
|
|
181
|
+
style: { "--el-drawer-padding-primary": 0 },
|
|
182
|
+
onOpened: _cache[4] || (_cache[4] = ($event) => emit("opened")),
|
|
183
|
+
onClosed: _cache[5] || (_cache[5] = ($event) => emit("closed"))
|
|
184
|
+
}), {
|
|
185
|
+
header: withCtx(() => [
|
|
186
|
+
_ctx.$slots.header ? renderSlot(_ctx.$slots, "header", {
|
|
187
|
+
key: 0,
|
|
188
|
+
fullscreen: fullscreen.value,
|
|
189
|
+
close: handleClose,
|
|
190
|
+
toggleFullscreen,
|
|
191
|
+
toggleType: handleTypeChange,
|
|
192
|
+
toggleDirection
|
|
193
|
+
}) : (openBlock(), createBlock(_sfc_main$2, {
|
|
194
|
+
key: 1,
|
|
195
|
+
fullscreen: fullscreen.value,
|
|
196
|
+
mode: mode.value,
|
|
197
|
+
"drawer-direction": direction.value,
|
|
198
|
+
title: __props.title,
|
|
199
|
+
onFullscreen: toggleFullscreen,
|
|
200
|
+
onClose: handleClose,
|
|
201
|
+
onToggle: handleTypeChange,
|
|
202
|
+
onToggleDirection: toggleDirection
|
|
203
|
+
}, null, 8, ["fullscreen", "mode", "drawer-direction", "title"]))
|
|
204
|
+
]),
|
|
205
|
+
footer: withCtx(() => [
|
|
206
|
+
_ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : (openBlock(), createBlock(_sfc_main$1, {
|
|
207
|
+
key: 1,
|
|
208
|
+
"confirm-text": __props.confirmText,
|
|
209
|
+
"cancel-text": __props.cancelText,
|
|
210
|
+
onConfirm: handleConfirm,
|
|
211
|
+
onCancel: handleCancel
|
|
212
|
+
}, null, 8, ["confirm-text", "cancel-text"]))
|
|
213
|
+
]),
|
|
214
|
+
default: withCtx(() => [
|
|
215
|
+
renderSlot(_ctx.$slots, "default")
|
|
216
|
+
]),
|
|
217
|
+
_: 3
|
|
218
|
+
}, 16, ["modelValue", "title", "direction", "body-class", "footer-class", "header-class", "size"]));
|
|
219
|
+
};
|
|
220
|
+
}
|
|
221
|
+
}));
|
|
222
|
+
export {
|
|
223
|
+
_sfc_main as default
|
|
224
|
+
};
|
package/dist/es/package.json.js
CHANGED
|
@@ -13,5 +13,6 @@ declare const _default: import('vue').DefineComponent<PageLayoutProps, {}, {}, {
|
|
|
13
13
|
cardPadding: string;
|
|
14
14
|
topMenuTrigger: "hover" | "click";
|
|
15
15
|
topMenuSingleLevel: boolean;
|
|
16
|
+
sideMenuWithParent: boolean;
|
|
16
17
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
17
18
|
export default _default;
|