This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,7 @@
import Dialog from './src/dialog.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElDialog: SFCWithInstall<typeof Dialog>;
export default ElDialog;
export * from './src/use-dialog';
export * from './src/dialog';
export * from './src/constants';

View File

@@ -0,0 +1,10 @@
import Dialog from './src/dialog2.mjs';
export { useDialog } from './src/use-dialog.mjs';
export { dialogContextKey, dialogEmits, dialogProps } from './src/dialog.mjs';
export { DEFAULT_DIALOG_TRANSITION, dialogInjectionKey } from './src/constants.mjs';
import { withInstall } from '../../utils/vue/install.mjs';
const ElDialog = withInstall(Dialog);
export { ElDialog, ElDialog as default };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/dialog/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Dialog from './src/dialog.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElDialog: SFCWithInstall<typeof Dialog> = withInstall(Dialog)\nexport default ElDialog\n\nexport * from './src/use-dialog'\nexport * from './src/dialog'\nexport * from './src/constants'\n"],"names":[],"mappings":";;;;;;AAEY,MAAC,QAAQ,GAAG,WAAW,CAAC,MAAM;;;;"}

View File

@@ -0,0 +1,12 @@
import type { CSSProperties, ComputedRef, InjectionKey, Ref } from 'vue';
import type { UseNamespaceReturn } from 'element-plus/es/hooks';
export type DialogContext = {
dialogRef: Ref<HTMLElement | undefined>;
headerRef: Ref<HTMLElement | undefined>;
bodyId: Ref<string>;
ns: UseNamespaceReturn;
rendered: Ref<boolean>;
style: ComputedRef<CSSProperties>;
};
export declare const dialogInjectionKey: InjectionKey<DialogContext>;
export declare const DEFAULT_DIALOG_TRANSITION = "dialog-fade";

View File

@@ -0,0 +1,5 @@
const dialogInjectionKey = Symbol("dialogInjectionKey");
const DEFAULT_DIALOG_TRANSITION = "dialog-fade";
export { DEFAULT_DIALOG_TRANSITION, dialogInjectionKey };
//# sourceMappingURL=constants.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"constants.mjs","sources":["../../../../../../packages/components/dialog/src/constants.ts"],"sourcesContent":["import type { CSSProperties, ComputedRef, InjectionKey, Ref } from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\n\nexport type DialogContext = {\n dialogRef: Ref<HTMLElement | undefined>\n headerRef: Ref<HTMLElement | undefined>\n bodyId: Ref<string>\n ns: UseNamespaceReturn\n rendered: Ref<boolean>\n style: ComputedRef<CSSProperties>\n}\n\nexport const dialogInjectionKey: InjectionKey<DialogContext> =\n Symbol('dialogInjectionKey')\n\nexport const DEFAULT_DIALOG_TRANSITION = 'dialog-fade'\n"],"names":[],"mappings":"AAAY,MAAC,kBAAkB,GAAG,MAAM,CAAC,oBAAoB,EAAE;AACnD,MAAC,yBAAyB,GAAG;;;;"}

View File

@@ -0,0 +1,22 @@
export declare const dialogContentProps: {
readonly center: BooleanConstructor;
readonly alignCenter: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly draggable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly overflow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly fullscreen: BooleanConstructor;
readonly headerClass: StringConstructor;
readonly bodyClass: StringConstructor;
readonly footerClass: StringConstructor;
readonly showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly ariaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
};
export declare const dialogContentEmits: {
close: () => boolean;
};

View File

@@ -0,0 +1,43 @@
import { buildProps } from '../../../utils/vue/props/runtime.mjs';
import { iconPropType } from '../../../utils/vue/icon.mjs';
const dialogContentProps = buildProps({
center: Boolean,
alignCenter: {
type: Boolean,
default: void 0
},
closeIcon: {
type: iconPropType
},
draggable: {
type: Boolean,
default: void 0
},
overflow: {
type: Boolean,
default: void 0
},
fullscreen: Boolean,
headerClass: String,
bodyClass: String,
footerClass: String,
showClose: {
type: Boolean,
default: true
},
title: {
type: String,
default: ""
},
ariaLevel: {
type: String,
default: "2"
}
});
const dialogContentEmits = {
close: () => true
};
export { dialogContentEmits, dialogContentProps };
//# sourceMappingURL=dialog-content.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"dialog-content.mjs","sources":["../../../../../../packages/components/dialog/src/dialog-content.ts"],"sourcesContent":["import { buildProps, iconPropType } from '@element-plus/utils'\n\nexport const dialogContentProps = buildProps({\n /**\n * @description whether to align the header and footer in center\n */\n center: Boolean,\n /**\n * @description whether to align the dialog both horizontally and vertically\n */\n alignCenter: {\n type: Boolean,\n default: undefined,\n },\n /**\n * @description custom close icon, default is Close\n */\n closeIcon: {\n type: iconPropType,\n },\n /**\n * @description enable dragging feature for Dialog\n */\n draggable: {\n type: Boolean,\n default: undefined,\n },\n /**\n * @description draggable Dialog can overflow the viewport\n */\n overflow: {\n type: Boolean,\n default: undefined,\n },\n /**\n * @description whether the Dialog takes up full screen\n */\n fullscreen: Boolean,\n /**\n * @description custom class names for header wrapper\n */\n headerClass: String,\n /**\n * @description custom class names for body wrapper\n */\n bodyClass: String,\n /**\n * @description custom class names for footer wrapper\n */\n footerClass: String,\n /**\n * @description whether to show a close button\n */\n showClose: {\n type: Boolean,\n default: true,\n },\n /**\n * @description title of Dialog. Can also be passed with a named slot (see the following table)\n */\n title: {\n type: String,\n default: '',\n },\n /**\n * @description header's aria-level attribute\n */\n ariaLevel: {\n type: String,\n default: '2',\n },\n} as const)\n\nexport const dialogContentEmits = {\n close: () => true,\n}\n"],"names":[],"mappings":";;;AACY,MAAC,kBAAkB,GAAG,UAAU,CAAC;AAC7C,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,YAAY;AACtB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,WAAW,EAAE,MAAM;AACrB,EAAE,SAAS,EAAE,MAAM;AACnB,EAAE,WAAW,EAAE,MAAM;AACrB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,kBAAkB,GAAG;AAClC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB;;;;"}

View File

@@ -0,0 +1,65 @@
declare function __VLS_template(): {
header?(_: {}): any;
default?(_: {}): any;
footer?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
readonly center: BooleanConstructor;
readonly alignCenter: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly draggable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly overflow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly fullscreen: BooleanConstructor;
readonly headerClass: StringConstructor;
readonly bodyClass: StringConstructor;
readonly footerClass: StringConstructor;
readonly showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly ariaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
}, {
resetPosition: () => void;
updatePosition: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
close: () => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly center: BooleanConstructor;
readonly alignCenter: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly draggable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly overflow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly fullscreen: BooleanConstructor;
readonly headerClass: StringConstructor;
readonly bodyClass: StringConstructor;
readonly footerClass: StringConstructor;
readonly showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly ariaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
}>> & {
onClose?: (() => any) | undefined;
}, {
readonly title: string;
readonly center: boolean;
readonly overflow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly ariaLevel: string;
readonly alignCenter: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly draggable: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly showClose: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly fullscreen: boolean;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,94 @@
import { defineComponent, inject, computed, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, createElementVNode, renderSlot, toDisplayString, createVNode, withCtx, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
import { ElIcon } from '../../icon/index.mjs';
import { dialogInjectionKey } from './constants.mjs';
import { dialogContentProps, dialogContentEmits } from './dialog-content.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { FOCUS_TRAP_INJECTION_KEY } from '../../focus-trap/src/tokens.mjs';
import { useDraggable } from '../../../hooks/use-draggable/index.mjs';
import { CloseComponents } from '../../../utils/vue/icon.mjs';
import { composeRefs } from '../../../utils/vue/refs.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
const __default__ = defineComponent({ name: "ElDialogContent" });
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: dialogContentProps,
emits: dialogContentEmits,
setup(__props, { expose }) {
const props = __props;
const { t } = useLocale();
const { Close } = CloseComponents;
const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey);
const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY);
const composedDialogRef = composeRefs(focusTrapRef, dialogRef);
const draggable = computed(() => !!props.draggable);
const overflow = computed(() => !!props.overflow);
const { resetPosition, updatePosition, isDragging } = useDraggable(dialogRef, headerRef, draggable, overflow);
const dialogKls = computed(() => [
ns.b(),
ns.is("fullscreen", props.fullscreen),
ns.is("draggable", draggable.value),
ns.is("dragging", isDragging.value),
ns.is("align-center", !!props.alignCenter),
{ [ns.m("center")]: props.center }
]);
expose({
resetPosition,
updatePosition
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref: unref(composedDialogRef),
class: normalizeClass(unref(dialogKls)),
style: normalizeStyle(unref(style)),
tabindex: "-1"
}, [
createElementVNode("header", {
ref_key: "headerRef",
ref: headerRef,
class: normalizeClass([unref(ns).e("header"), _ctx.headerClass, { "show-close": _ctx.showClose }])
}, [
renderSlot(_ctx.$slots, "header", {}, () => [
createElementVNode("span", {
role: "heading",
"aria-level": _ctx.ariaLevel,
class: normalizeClass(unref(ns).e("title"))
}, toDisplayString(_ctx.title), 11, ["aria-level"])
]),
_ctx.showClose ? (openBlock(), createElementBlock("button", {
key: 0,
"aria-label": unref(t)("el.dialog.close"),
class: normalizeClass(unref(ns).e("headerbtn")),
type: "button",
onClick: ($event) => _ctx.$emit("close")
}, [
createVNode(unref(ElIcon), {
class: normalizeClass(unref(ns).e("close"))
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon || unref(Close))))
]),
_: 1
}, 8, ["class"])
], 10, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
], 2),
createElementVNode("div", {
id: unref(bodyId),
class: normalizeClass([unref(ns).e("body"), _ctx.bodyClass])
}, [
renderSlot(_ctx.$slots, "default")
], 10, ["id"]),
_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", {
key: 0,
class: normalizeClass([unref(ns).e("footer"), _ctx.footerClass])
}, [
renderSlot(_ctx.$slots, "footer")
], 2)) : createCommentVNode("v-if", true)
], 6);
};
}
});
var ElDialogContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "dialog-content.vue"]]);
export { ElDialogContent as default };
//# sourceMappingURL=dialog-content2.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"dialog-content2.mjs","sources":["../../../../../../packages/components/dialog/src/dialog-content.vue"],"sourcesContent":["<template>\n <div :ref=\"composedDialogRef\" :class=\"dialogKls\" :style=\"style\" tabindex=\"-1\">\n <header\n ref=\"headerRef\"\n :class=\"[ns.e('header'), headerClass, { 'show-close': showClose }]\"\n >\n <slot name=\"header\">\n <span role=\"heading\" :aria-level=\"ariaLevel\" :class=\"ns.e('title')\">\n {{ title }}\n </span>\n </slot>\n <button\n v-if=\"showClose\"\n :aria-label=\"t('el.dialog.close')\"\n :class=\"ns.e('headerbtn')\"\n type=\"button\"\n @click=\"$emit('close')\"\n >\n <el-icon :class=\"ns.e('close')\">\n <component :is=\"closeIcon || Close\" />\n </el-icon>\n </button>\n </header>\n <div :id=\"bodyId\" :class=\"[ns.e('body'), bodyClass]\">\n <slot />\n </div>\n <footer v-if=\"$slots.footer\" :class=\"[ns.e('footer'), footerClass]\">\n <slot name=\"footer\" />\n </footer>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'\nimport { useDraggable, useLocale } from '@element-plus/hooks'\nimport { CloseComponents, composeRefs } from '@element-plus/utils'\nimport { dialogInjectionKey } from './constants'\nimport { dialogContentEmits, dialogContentProps } from './dialog-content'\n\nconst { t } = useLocale()\nconst { Close } = CloseComponents\n\ndefineOptions({ name: 'ElDialogContent' })\nconst props = defineProps(dialogContentProps)\ndefineEmits(dialogContentEmits)\n\nconst { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey)!\nconst { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY)!\n\nconst composedDialogRef = composeRefs(focusTrapRef, dialogRef)\n\nconst draggable = computed(() => !!props.draggable)\nconst overflow = computed(() => !!props.overflow)\nconst { resetPosition, updatePosition, isDragging } = useDraggable(\n dialogRef,\n headerRef,\n draggable,\n overflow\n)\n\nconst dialogKls = computed(() => [\n ns.b(),\n ns.is('fullscreen', props.fullscreen),\n ns.is('draggable', draggable.value),\n ns.is('dragging', isDragging.value),\n ns.is('align-center', !!props.alignCenter),\n { [ns.m('center')]: props.center },\n])\n\ndefineExpose({\n resetPosition,\n updatePosition,\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_unref","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;;;;;;mCA4Cc,CAAA,EAAE,IAAM,EAAA,iBAAA,EAAkB,CAAA,CAAA;;;;;;;AAHxC,IAAM,MAAA,EAAE,CAAE,EAAA,GAAI,SAAU,EAAA,CAAA;AACxB,IAAM,MAAA,EAAE,OAAU,GAAA,eAAA,CAAA;AAMlB,IAAM,MAAA,EAAE,WAAW,SAAW,EAAA,MAAA,EAAQ,IAAI,KAAM,EAAA,GAAI,OAAO,kBAAkB,CAAA,CAAA;AAC7E,IAAA,MAAM,EAAE,YAAA,EAAiB,GAAA,MAAA,CAAO,wBAAwB,CAAA,CAAA;AAExD,IAAM,MAAA,iBAAA,GAAoB,WAAY,CAAA,YAAA,EAAc,SAAS,CAAA,CAAA;AAE7D,IAAA,MAAM,YAAY,QAAS,CAAA,MAAM,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA;AAClD,IAAA,MAAM,WAAW,QAAS,CAAA,MAAM,CAAC,CAAC,MAAM,QAAQ,CAAA,CAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAe,cAAgB,EAAA,UAAA,EAAe,GAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,CAAA;AAAA,IACpD,MAAA,SAAA,GAAA,QAAA,CAAA,MAAA;AAAA,MACA,EAAA,CAAA,CAAA,EAAA;AAAA,MACA,EAAA,CAAA,EAAA,CAAA,YAAA,EAAA,KAAA,CAAA,UAAA,CAAA;AAAA,MACA,EAAA,CAAA,EAAA,CAAA,WAAA,EAAA,SAAA,CAAA,KAAA,CAAA;AAAA,MACF,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,KAAA,CAAA;AAEA,MAAM,EAAA,CAAA,EAAA,CAAA,uBAA2B,CAAA,WAAA,CAAA;AAAA,MAC/B,GAAG,EAAE,CAAA,CAAA,CAAA,QAAA,CAAA,GAAA,KAAA,CAAA,MAAA,EAAA;AAAA,KAAA,CACL,CAAG;AAAiC,IAAA,MACjC,CAAA;AAA+B,MAClC,aAAkB;AAAgB,MAClC,cAAM;AAAmC,KACzC,CAAA,CAAA;AAAiC,IACnC,OAAC,CAAA,IAAA,EAAA,MAAA,KAAA;AAED,MAAa,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,QACX,GAAA,EAAAC,KAAA,CAAA,iBAAA,CAAA;AAAA,QACA,KAAA,EAAAC,cAAA,CAAAD,KAAA,CAAA,SAAA,CAAA,CAAA;AAAA,QACD,KAAA,EAAAE,cAAA,CAAAF,KAAA,CAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,84 @@
import type { ExtractPropTypes, InjectionKey, TransitionProps, __ExtractPublicPropTypes } from 'vue';
import type Dialog from './dialog.vue';
type DoneFn = (cancel?: boolean) => void;
export type DialogBeforeCloseFn = (done: DoneFn) => void;
export type DialogTransition = string | TransitionProps;
export declare const dialogProps: {
readonly appendToBody: BooleanConstructor;
readonly appendTo: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown, "body", boolean>;
readonly beforeClose: {
readonly type: import("vue").PropType<DialogBeforeCloseFn>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly destroyOnClose: BooleanConstructor;
readonly closeOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly lockScroll: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modalPenetrable: BooleanConstructor;
readonly openDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly closeDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly top: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly modelValue: BooleanConstructor;
readonly modalClass: StringConstructor;
readonly headerClass: StringConstructor;
readonly bodyClass: StringConstructor;
readonly footerClass: StringConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly zIndex: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly trapFocus: BooleanConstructor;
readonly headerAriaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
readonly transition: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | TransitionProps) | (() => DialogTransition) | ((new (...args: any[]) => string | TransitionProps) | (() => DialogTransition))[], unknown, unknown, undefined, boolean>;
readonly center: BooleanConstructor;
readonly alignCenter: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly draggable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly overflow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly fullscreen: BooleanConstructor;
readonly showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly ariaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
};
export type DialogProps = ExtractPropTypes<typeof dialogProps>;
export type DialogPropsPublic = __ExtractPublicPropTypes<typeof dialogProps>;
export declare const dialogEmits: {
open: () => boolean;
opened: () => boolean;
close: () => boolean;
closed: () => boolean;
"update:modelValue": (value: boolean) => boolean;
openAutoFocus: () => boolean;
closeAutoFocus: () => boolean;
};
export type DialogEmits = typeof dialogEmits;
export type DialogInstance = InstanceType<typeof Dialog> & unknown;
export interface DialogConfigContext {
alignCenter?: boolean;
draggable?: boolean;
overflow?: boolean;
transition?: DialogTransition;
}
export declare const dialogContextKey: InjectionKey<DialogConfigContext>;
export {};

View File

@@ -0,0 +1,79 @@
import { dialogContentProps } from './dialog-content.mjs';
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { teleportProps } from '../../teleport/src/teleport.mjs';
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
import { isBoolean } from '../../../utils/types.mjs';
const dialogProps = buildProps({
...dialogContentProps,
appendToBody: Boolean,
appendTo: {
type: teleportProps.to.type,
default: "body"
},
beforeClose: {
type: definePropType(Function)
},
destroyOnClose: Boolean,
closeOnClickModal: {
type: Boolean,
default: true
},
closeOnPressEscape: {
type: Boolean,
default: true
},
lockScroll: {
type: Boolean,
default: true
},
modal: {
type: Boolean,
default: true
},
modalPenetrable: Boolean,
openDelay: {
type: Number,
default: 0
},
closeDelay: {
type: Number,
default: 0
},
top: {
type: String
},
modelValue: Boolean,
modalClass: String,
headerClass: String,
bodyClass: String,
footerClass: String,
width: {
type: [String, Number]
},
zIndex: {
type: Number
},
trapFocus: Boolean,
headerAriaLevel: {
type: String,
default: "2"
},
transition: {
type: definePropType([String, Object]),
default: void 0
}
});
const dialogEmits = {
open: () => true,
opened: () => true,
close: () => true,
closed: () => true,
[UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
openAutoFocus: () => true,
closeAutoFocus: () => true
};
const dialogContextKey = Symbol("dialogContextKey");
export { dialogContextKey, dialogEmits, dialogProps };
//# sourceMappingURL=dialog.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,177 @@
declare function __VLS_template(): {
header?(_: {
close: () => void;
titleId: string;
titleClass: string;
}): any;
title?(_: {}): any;
default?(_: {}): any;
footer?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
readonly appendToBody: BooleanConstructor;
readonly appendTo: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown, "body", boolean>;
readonly beforeClose: {
readonly type: import("vue").PropType<import("./dialog").DialogBeforeCloseFn>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly destroyOnClose: BooleanConstructor;
readonly closeOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly lockScroll: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modalPenetrable: BooleanConstructor;
readonly openDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly closeDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly top: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly modelValue: BooleanConstructor;
readonly modalClass: StringConstructor;
readonly headerClass: StringConstructor;
readonly bodyClass: StringConstructor;
readonly footerClass: StringConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly zIndex: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly trapFocus: BooleanConstructor;
readonly headerAriaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
readonly transition: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | import("vue").TransitionProps) | (() => import("./dialog").DialogTransition) | ((new (...args: any[]) => string | import("vue").TransitionProps) | (() => import("./dialog").DialogTransition))[], unknown, unknown, undefined, boolean>;
readonly center: BooleanConstructor;
readonly alignCenter: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly draggable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly overflow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly fullscreen: BooleanConstructor;
readonly showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly ariaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
}, {
/** @description whether the dialog is visible */
visible: import("vue").Ref<boolean>;
dialogContentRef: import("vue").Ref<any>;
resetPosition: () => void;
handleClose: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
open: () => void;
"update:modelValue": (value: boolean) => void;
close: () => void;
opened: () => void;
closed: () => void;
openAutoFocus: () => void;
closeAutoFocus: () => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly appendToBody: BooleanConstructor;
readonly appendTo: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown, "body", boolean>;
readonly beforeClose: {
readonly type: import("vue").PropType<import("./dialog").DialogBeforeCloseFn>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly destroyOnClose: BooleanConstructor;
readonly closeOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly lockScroll: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modalPenetrable: BooleanConstructor;
readonly openDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly closeDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly top: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly modelValue: BooleanConstructor;
readonly modalClass: StringConstructor;
readonly headerClass: StringConstructor;
readonly bodyClass: StringConstructor;
readonly footerClass: StringConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly zIndex: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly trapFocus: BooleanConstructor;
readonly headerAriaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
readonly transition: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | import("vue").TransitionProps) | (() => import("./dialog").DialogTransition) | ((new (...args: any[]) => string | import("vue").TransitionProps) | (() => import("./dialog").DialogTransition))[], unknown, unknown, undefined, boolean>;
readonly center: BooleanConstructor;
readonly alignCenter: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly draggable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly overflow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly fullscreen: BooleanConstructor;
readonly showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly ariaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
}>> & {
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
onOpen?: (() => any) | undefined;
onClose?: (() => any) | undefined;
onOpened?: (() => any) | undefined;
onClosed?: (() => any) | undefined;
onOpenAutoFocus?: (() => any) | undefined;
onCloseAutoFocus?: (() => any) | undefined;
}, {
readonly title: string;
readonly center: boolean;
readonly overflow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly transition: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").TransitionProps) | (() => import("./dialog").DialogTransition) | ((new (...args: any[]) => string | import("vue").TransitionProps) | (() => import("./dialog").DialogTransition))[], unknown, unknown>;
readonly modelValue: boolean;
readonly ariaLevel: string;
readonly appendTo: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>;
readonly alignCenter: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly draggable: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly showClose: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly fullscreen: boolean;
readonly closeOnClickModal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly closeOnPressEscape: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly lockScroll: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly modal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly openDelay: number;
readonly closeDelay: number;
readonly headerAriaLevel: string;
readonly appendToBody: boolean;
readonly destroyOnClose: boolean;
readonly modalPenetrable: boolean;
readonly trapFocus: boolean;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,179 @@
import { defineComponent, useSlots, computed, ref, provide, openBlock, createBlock, unref, withCtx, createVNode, Transition, mergeProps, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createSlots, renderSlot, createCommentVNode, vShow } from 'vue';
import { ElOverlay } from '../../overlay/index.mjs';
import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
import { ElTeleport } from '../../teleport/index.mjs';
import ElDialogContent from './dialog-content2.mjs';
import { dialogInjectionKey } from './constants.mjs';
import { dialogProps, dialogEmits } from './dialog.mjs';
import { useDialog } from './use-dialog.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useSameTarget } from '../../../hooks/use-same-target/index.mjs';
const __default__ = defineComponent({
name: "ElDialog",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: dialogProps,
emits: dialogEmits,
setup(__props, { expose }) {
const props = __props;
const slots = useSlots();
useDeprecated({
scope: "el-dialog",
from: "the title slot",
replacement: "the header slot",
version: "3.0.0",
ref: "https://element-plus.org/en-US/component/dialog.html#slots"
}, computed(() => !!slots.title));
const ns = useNamespace("dialog");
const dialogRef = ref();
const headerRef = ref();
const dialogContentRef = ref();
const {
visible,
titleId,
bodyId,
style,
overlayDialogStyle,
rendered,
transitionConfig,
zIndex,
_draggable,
_alignCenter,
_overflow,
handleClose,
onModalClick,
onOpenAutoFocus,
onCloseAutoFocus,
onCloseRequested,
onFocusoutPrevented
} = useDialog(props, dialogRef);
provide(dialogInjectionKey, {
dialogRef,
headerRef,
bodyId,
ns,
rendered,
style
});
const overlayEvent = useSameTarget(onModalClick);
const penetrable = computed(() => props.modalPenetrable && !props.modal && !props.fullscreen);
const resetPosition = () => {
var _a;
(_a = dialogContentRef.value) == null ? void 0 : _a.resetPosition();
};
expose({
visible,
dialogContentRef,
resetPosition,
handleClose
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElTeleport), {
to: _ctx.appendTo,
disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
}, {
default: withCtx(() => [
createVNode(Transition, mergeProps(unref(transitionConfig), { persisted: "" }), {
default: withCtx(() => {
var _a;
return [
withDirectives(createVNode(unref(ElOverlay), {
"custom-mask-event": "",
mask: _ctx.modal,
"overlay-class": [
(_a = _ctx.modalClass) != null ? _a : "",
`${unref(ns).namespace.value}-modal-dialog`,
unref(ns).is("penetrable", unref(penetrable))
],
"z-index": unref(zIndex)
}, {
default: withCtx(() => [
createElementVNode("div", {
role: "dialog",
"aria-modal": "true",
"aria-label": _ctx.title || void 0,
"aria-labelledby": !_ctx.title ? unref(titleId) : void 0,
"aria-describedby": unref(bodyId),
class: normalizeClass(`${unref(ns).namespace.value}-overlay-dialog`),
style: normalizeStyle(unref(overlayDialogStyle)),
onClick: unref(overlayEvent).onClick,
onMousedown: unref(overlayEvent).onMousedown,
onMouseup: unref(overlayEvent).onMouseup
}, [
createVNode(unref(ElFocusTrap), {
loop: "",
trapped: unref(visible),
"focus-start-el": "container",
onFocusAfterTrapped: unref(onOpenAutoFocus),
onFocusAfterReleased: unref(onCloseAutoFocus),
onFocusoutPrevented: unref(onFocusoutPrevented),
onReleaseRequested: unref(onCloseRequested)
}, {
default: withCtx(() => [
unref(rendered) ? (openBlock(), createBlock(ElDialogContent, mergeProps({
key: 0,
ref_key: "dialogContentRef",
ref: dialogContentRef
}, _ctx.$attrs, {
center: _ctx.center,
"align-center": unref(_alignCenter),
"close-icon": _ctx.closeIcon,
draggable: unref(_draggable),
overflow: unref(_overflow),
fullscreen: _ctx.fullscreen,
"header-class": _ctx.headerClass,
"body-class": _ctx.bodyClass,
"footer-class": _ctx.footerClass,
"show-close": _ctx.showClose,
title: _ctx.title,
"aria-level": _ctx.headerAriaLevel,
onClose: unref(handleClose)
}), createSlots({
header: withCtx(() => [
!_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
key: 0,
close: unref(handleClose),
titleId: unref(titleId),
titleClass: unref(ns).e("title")
}) : renderSlot(_ctx.$slots, "title", { key: 1 })
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 2
}, [
_ctx.$slots.footer ? {
name: "footer",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "footer")
])
} : void 0
]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "header-class", "body-class", "footer-class", "show-close", "title", "aria-level", "onClose"])) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
], 46, ["aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
]),
_: 3
}, 8, ["mask", "overlay-class", "z-index"]), [
[vShow, unref(visible)]
])
];
}),
_: 3
}, 16)
]),
_: 3
}, 8, ["to", "disabled"]);
};
}
});
var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "dialog.vue"]]);
export { Dialog as default };
//# sourceMappingURL=dialog2.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
import type { CSSProperties, Ref, TransitionProps } from 'vue';
import type { DialogProps } from './dialog';
export declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undefined>) => {
afterEnter: () => void;
afterLeave: () => void;
beforeLeave: () => void;
handleClose: () => void;
onModalClick: () => void;
close: () => void;
doClose: () => void;
onOpenAutoFocus: () => void;
onCloseAutoFocus: () => void;
onCloseRequested: () => void;
onFocusoutPrevented: (event: CustomEvent) => void;
titleId: Ref<string>;
bodyId: Ref<string>;
closed: Ref<boolean>;
style: import("vue").ComputedRef<CSSProperties>;
overlayDialogStyle: import("vue").ComputedRef<CSSProperties>;
rendered: Ref<boolean>;
visible: Ref<boolean>;
zIndex: Ref<number>;
transitionConfig: import("vue").ComputedRef<TransitionProps | {
name: string | TransitionProps;
onAfterEnter: () => void;
onBeforeLeave: () => void;
onAfterLeave: () => void;
}>;
_draggable: import("vue").ComputedRef<boolean>;
_alignCenter: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
_overflow: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
};

View File

@@ -0,0 +1,248 @@
import { getCurrentInstance, ref, computed, watch, nextTick, onMounted } from 'vue';
import { useTimeoutFn, isClient } from '@vueuse/core';
import { DEFAULT_DIALOG_TRANSITION } from './constants.mjs';
import { useLockscreen } from '../../../hooks/use-lockscreen/index.mjs';
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
import { useId } from '../../../hooks/use-id/index.mjs';
import { useGlobalConfig } from '../../config-provider/src/hooks/use-global-config.mjs';
import { defaultNamespace } from '../../../hooks/use-namespace/index.mjs';
import { addUnit } from '../../../utils/dom/style.mjs';
import { isObject, isArray, isFunction } from '@vue/shared';
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
const useDialog = (props, targetRef) => {
var _a;
const instance = getCurrentInstance();
const emit = instance.emit;
const { nextZIndex } = useZIndex();
let lastPosition = "";
const titleId = useId();
const bodyId = useId();
const visible = ref(false);
const closed = ref(false);
const rendered = ref(false);
const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
let openTimer = void 0;
let closeTimer = void 0;
const config = useGlobalConfig();
const namespace = computed(() => {
var _a2, _b;
return (_b = (_a2 = config.value) == null ? void 0 : _a2.namespace) != null ? _b : defaultNamespace;
});
const globalConfig = computed(() => {
var _a2;
return (_a2 = config.value) == null ? void 0 : _a2.dialog;
});
const style = computed(() => {
const style2 = {};
const varPrefix = `--${namespace.value}-dialog`;
if (!props.fullscreen) {
if (props.top) {
style2[`${varPrefix}-margin-top`] = props.top;
}
if (props.width) {
style2[`${varPrefix}-width`] = addUnit(props.width);
}
}
return style2;
});
const _draggable = computed(() => {
var _a2, _b, _c;
return ((_c = (_b = props.draggable) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.draggable) != null ? _c : false) && !props.fullscreen;
});
const _alignCenter = computed(() => {
var _a2, _b, _c;
return (_c = (_b = props.alignCenter) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.alignCenter) != null ? _c : false;
});
const _overflow = computed(() => {
var _a2, _b, _c;
return (_c = (_b = props.overflow) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.overflow) != null ? _c : false;
});
const overlayDialogStyle = computed(() => {
if (_alignCenter.value) {
return { display: "flex" };
}
return {};
});
const transitionConfig = computed(() => {
var _a2, _b, _c;
const transition = (_c = (_b = props.transition) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.transition) != null ? _c : DEFAULT_DIALOG_TRANSITION;
const baseConfig = {
name: transition,
onAfterEnter: afterEnter,
onBeforeLeave: beforeLeave,
onAfterLeave: afterLeave
};
if (isObject(transition)) {
const config2 = { ...transition };
const _mergeHook = (userHook, defaultHook) => {
return (el) => {
if (isArray(userHook)) {
userHook.forEach((fn) => {
if (isFunction(fn))
fn(el);
});
} else if (isFunction(userHook)) {
userHook(el);
}
defaultHook();
};
};
config2.onAfterEnter = _mergeHook(config2.onAfterEnter, afterEnter);
config2.onBeforeLeave = _mergeHook(config2.onBeforeLeave, beforeLeave);
config2.onAfterLeave = _mergeHook(config2.onAfterLeave, afterLeave);
if (!config2.name) {
config2.name = DEFAULT_DIALOG_TRANSITION;
}
return config2;
}
return baseConfig;
});
function afterEnter() {
emit("opened");
}
function afterLeave() {
emit("closed");
emit(UPDATE_MODEL_EVENT, false);
if (props.destroyOnClose) {
rendered.value = false;
}
}
function beforeLeave() {
emit("close");
}
function open() {
closeTimer == null ? void 0 : closeTimer();
openTimer == null ? void 0 : openTimer();
if (props.openDelay && props.openDelay > 0) {
({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
} else {
doOpen();
}
}
function close() {
openTimer == null ? void 0 : openTimer();
closeTimer == null ? void 0 : closeTimer();
if (props.closeDelay && props.closeDelay > 0) {
({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay));
} else {
doClose();
}
}
function handleClose() {
function hide(shouldCancel) {
if (shouldCancel)
return;
closed.value = true;
visible.value = false;
}
if (props.beforeClose) {
props.beforeClose(hide);
} else {
close();
}
}
function onModalClick() {
if (props.closeOnClickModal) {
handleClose();
}
}
function doOpen() {
if (!isClient)
return;
visible.value = true;
}
function doClose() {
visible.value = false;
}
function onOpenAutoFocus() {
emit("openAutoFocus");
}
function onCloseAutoFocus() {
emit("closeAutoFocus");
}
function onFocusoutPrevented(event) {
var _a2;
if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
event.preventDefault();
}
}
if (props.lockScroll) {
useLockscreen(visible);
}
function onCloseRequested() {
if (props.closeOnPressEscape) {
handleClose();
}
}
watch(() => props.zIndex, () => {
var _a2;
zIndex.value = (_a2 = props.zIndex) != null ? _a2 : nextZIndex();
});
watch(() => props.modelValue, (val) => {
var _a2;
if (val) {
closed.value = false;
open();
rendered.value = true;
zIndex.value = (_a2 = props.zIndex) != null ? _a2 : nextZIndex();
nextTick(() => {
emit("open");
if (targetRef.value) {
targetRef.value.parentElement.scrollTop = 0;
targetRef.value.parentElement.scrollLeft = 0;
targetRef.value.scrollTop = 0;
}
});
} else {
if (visible.value) {
close();
}
}
});
watch(() => props.fullscreen, (val) => {
if (!targetRef.value)
return;
if (val) {
lastPosition = targetRef.value.style.transform;
targetRef.value.style.transform = "";
} else {
targetRef.value.style.transform = lastPosition;
}
});
onMounted(() => {
if (props.modelValue) {
visible.value = true;
rendered.value = true;
open();
}
});
return {
afterEnter,
afterLeave,
beforeLeave,
handleClose,
onModalClick,
close,
doClose,
onOpenAutoFocus,
onCloseAutoFocus,
onCloseRequested,
onFocusoutPrevented,
titleId,
bodyId,
closed,
style,
overlayDialogStyle,
rendered,
visible,
zIndex,
transitionConfig,
_draggable,
_alignCenter,
_overflow
};
};
export { useDialog };
//# sourceMappingURL=use-dialog.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,3 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/theme-chalk/el-dialog.css';
import 'element-plus/es/components/overlay/style/css';

View File

@@ -0,0 +1,4 @@
import '../../base/style/css.mjs';
import 'element-plus/theme-chalk/el-dialog.css';
import '../../overlay/style/css.mjs';
//# sourceMappingURL=css.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

View File

@@ -0,0 +1,3 @@
import 'element-plus/es/components/base/style';
import 'element-plus/theme-chalk/src/dialog.scss';
import 'element-plus/es/components/overlay/style';

View File

@@ -0,0 +1,4 @@
import '../../base/style/index.mjs';
import 'element-plus/theme-chalk/src/dialog.scss';
import '../../overlay/style/index.mjs';
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}