ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/lib/ele-modal/index.cjs

@@ -3,7 +3,9 @@ const vue = require("vue");
 const elementPlus = require("element-plus");
 const index = require("../icons/index");
 const common = require("../utils/common");
-const ReceiverView = require("../ele-config-provider/components/receiver-view");
+const hook = require("../utils/hook");
+const MainContent = require("../ele-loading/components/main-content");
+const LoadingSpinner = require("../ele-loading/components/loading-spinner");
 const util = require("../ele-pro-layout/util");
 const util$1 = require("./util");
 const props = require("./props");
@@ -19,15 +21,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const isResponsive = util.useResponsive(props$1);
     const dialogRef = vue.ref(null);
     const isFullscreen = vue.ref(props$1.fullscreen ?? false);
-    const isActivated = vue.ref(true);
+    const modalPositionTop = vue.ref();
+    const modalPositionLeft = vue.ref();
+    const modalResizedWidth = vue.ref();
+    const modalResizedHeight = vue.ref();
+    const modalZIndex = vue.ref(props$1.zIndex);
+    const modalIsMoving = vue.ref(false);
+    const isActivated = vue.ref(!props$1.isDeactivated);
     const dialogClass = vue.computed(() => {
       const classes = [util$1.wrapperClass];
       if (isResponsive.value) {
         classes.push("ele-modal-responsive");
       }
-      if (props$1.alignCenter || props$1.position === "center") {
-        classes.push("ele-modal-center");
-      } else if (props$1.position === "top") {
+      if (props$1.maxHeight == null || props$1.maxHeight != null && props$1.maxHeight !== "") {
+        classes.push("ele-modal-fluid");
+      }
+      if (props$1.position === "top") {
         classes.push("ele-modal-top");
       } else if (props$1.position === "bottom") {
         classes.push("ele-modal-bottom");
@@ -65,11 +74,35 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (props$1.inner) {
         classes.push("ele-modal-inner");
       }
+      if (props$1.compLoading && !props$1.loading) {
+        classes.push("ele-modal-comp-loading");
+      }
+      if (props$1.flexTable === "auto") {
+        classes.push("ele-modal-flex-auto-table");
+      } else if (props$1.flexTable) {
+        classes.push("ele-modal-flex-table");
+      }
+      if (props$1.customFooter) {
+        classes.push("ele-modal-custom-footer");
+      }
       if (props$1.modalClass) {
         classes.push(props$1.modalClass);
       }
       return classes.join(" ");
     });
+    const modalIsAbsolute = vue.computed(() => {
+      return modalPositionTop.value != null || modalPositionLeft.value != null;
+    });
+    const modalPositionMargin = vue.computed(() => {
+      if (typeof props$1.position === "string") {
+        return;
+      }
+      return util$1.getPositionMargin({
+        top: props$1.top,
+        ...props$1.alignCenter ? { top: "auto", left: "auto", right: "auto", bottom: "auto" } : {},
+        ...props$1.position || {}
+      });
+    });
     const teleportTo = vue.computed(() => {
       return util$1.getModalContainer(
         props$1.inner,
@@ -79,43 +112,182 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       );
     });
     const teleportDisabled = vue.computed(() => {
-      const appendTo = props$1.appendTo || "body";
-      const disabled = appendTo === "body" ? !props$1.appendToBody : false;
+      const bodyAppend = "body";
+      const appendTo = props$1.appendTo || bodyAppend;
+      const disabled = appendTo === bodyAppend ? !props$1.appendToBody : false;
       return props$1.multiple || props$1.inner ? false : disabled;
     });
+    const getModalEl = () => {
+      const el = vue.unref(dialogRef.value?.dialogContentRef)?.$el;
+      return el;
+    };
+    const topModal = () => {
+      const zIndex = util$1.getMaxZIndex(getModalEl(), props$1.zIndex);
+      if (zIndex != null && modalZIndex.value !== zIndex) {
+        modalZIndex.value = zIndex;
+      }
+    };
+    const moveEventOption = {
+      modalEl: null,
+      wrapEl: null,
+      downOL: null,
+      downOT: null,
+      downW: null,
+      downH: null,
+      fixTop: 0.65,
+      fixLeft: 0.65
+    };
+    const {
+      handleMousedown: handleHeaderMousedown,
+      handleTouchstart: handleHeaderTouchstart
+    } = hook.useMoveEvent({
+      start: () => {
+        moveEventOption.modalEl = getModalEl();
+        moveEventOption.wrapEl = moveEventOption.modalEl?.parentElement;
+        if (!moveEventOption.modalEl || !moveEventOption.wrapEl || !props$1.draggable || isFullscreen.value) {
+          return;
+        }
+        modalIsMoving.value = true;
+        moveEventOption.downOL = moveEventOption.modalEl.offsetLeft;
+        moveEventOption.downOT = moveEventOption.modalEl.offsetTop;
+      },
+      move: ({ distanceX, distanceY, e }) => {
+        if (!moveEventOption.modalEl || !moveEventOption.wrapEl || moveEventOption.downOL == null || moveEventOption.downOT == null || distanceX == null || distanceY == null) {
+          return;
+        }
+        e.preventDefault();
+        let positionLeft = distanceX + moveEventOption.downOL;
+        let positionTop = distanceY + moveEventOption.downOT;
+        const limitL = moveEventOption.wrapEl.clientWidth - moveEventOption.modalEl.clientWidth - moveEventOption.fixLeft;
+        const limitT = moveEventOption.wrapEl.clientHeight - moveEventOption.modalEl.clientHeight - moveEventOption.fixTop;
+        if (!props$1.moveOut) {
+          if (positionLeft < 0) {
+            positionLeft = 0;
+          } else if (positionLeft > limitL) {
+            positionLeft = limitL;
+          }
+          if (positionTop > limitT) {
+            positionTop = limitT;
+          }
+          if (positionTop < 0) {
+            positionTop = 0;
+          }
+        } else {
+          if (!util$1.canMoveOut(props$1.moveOut, "left") && positionLeft < 0) {
+            positionLeft = 0;
+          }
+          if (!util$1.canMoveOut(props$1.moveOut, "right") && positionLeft > limitL) {
+            positionLeft = limitL;
+          }
+          if (!util$1.canMoveOut(props$1.moveOut, "bottom") && positionTop > limitT) {
+            positionTop = limitT;
+          }
+          if (!util$1.canMoveOut(props$1.moveOut, "top") && positionTop < 0) {
+            positionTop = 0;
+          }
+          const minLimitL = moveEventOption.wrapEl.clientWidth - 48;
+          if (positionLeft > minLimitL) {
+            positionLeft = minLimitL;
+          }
+          const minLimitT = moveEventOption.wrapEl.clientHeight - 48;
+          if (props$1.multiple && positionTop > minLimitT) {
+            positionTop = minLimitT;
+          }
+        }
+        modalPositionLeft.value = `${Math.floor(positionLeft)}px`;
+        modalPositionTop.value = `${Math.floor(positionTop)}px`;
+      },
+      end: () => {
+        modalIsMoving.value = false;
+        moveEventOption.downOL = null;
+        moveEventOption.downOT = null;
+      },
+      touchmoveOptions: { passive: false }
+    });
     const {
-      handleHeaderMousedown,
-      handleHeaderTouchstart,
-      handleResizeMousedown,
-      handleResizeTouchstart,
-      bindAutoTopEvent,
-      unbindAutoTopEvent,
-      topModal,
-      setInitPosition,
-      resetModalStyle
-    } = util$1.useModalEvent(dialogRef, props$1, isFullscreen);
+      handleMousedown: handleResizeMousedown,
+      handleTouchstart: handleResizeTouchstart
+    } = hook.useMoveEvent({
+      start: () => {
+        moveEventOption.modalEl = getModalEl();
+        moveEventOption.wrapEl = moveEventOption.modalEl?.parentElement;
+        if (!moveEventOption.modalEl || !moveEventOption.wrapEl || !props$1.resizable || isFullscreen.value) {
+          return;
+        }
+        modalIsMoving.value = true;
+        moveEventOption.downW = moveEventOption.modalEl.clientWidth;
+        moveEventOption.downH = moveEventOption.modalEl.clientHeight;
+      },
+      move: ({ distanceX, distanceY, e }) => {
+        if (!moveEventOption.modalEl || !moveEventOption.wrapEl || moveEventOption.downW == null || moveEventOption.downH == null || distanceX == null || distanceY == null) {
+          return;
+        }
+        e.preventDefault();
+        if (modalPositionLeft.value == null) {
+          modalPositionLeft.value = `${moveEventOption.modalEl.offsetLeft}px`;
+        }
+        if (modalPositionTop.value == null) {
+          modalPositionTop.value = `${moveEventOption.modalEl.offsetTop}px`;
+        }
+        if (props$1.resizable !== "vertical") {
+          const w = distanceX + moveEventOption.downW;
+          const maxW = moveEventOption.wrapEl.clientWidth - moveEventOption.modalEl.offsetLeft - moveEventOption.fixLeft;
+          const nw = (w < props$1.minWidth ? props$1.minWidth : !util$1.canMoveOut(props$1.moveOut, "right") && w > maxW ? maxW : w) + "px";
+          modalResizedWidth.value = nw;
+        }
+        if (props$1.resizable !== "horizontal") {
+          const h = distanceY + moveEventOption.downH;
+          const maxH = moveEventOption.wrapEl.clientHeight - moveEventOption.modalEl.offsetTop - moveEventOption.fixTop;
+          const nh = (h < props$1.minHeight ? props$1.minHeight : !util$1.canMoveOut(props$1.moveOut, "bottom") && h > maxH ? maxH : h) + "px";
+          modalResizedHeight.value = nh;
+        }
+      },
+      end: () => {
+        modalIsMoving.value = false;
+        moveEventOption.downW = null;
+        moveEventOption.downH = null;
+      },
+      touchmoveOptions: { passive: false }
+    });
+    const mousedownListener = () => {
+      if (props$1.multiple) {
+        topModal();
+      }
+    };
+    const bindAutoTopEvent = () => {
+      const modalEl = getModalEl();
+      if (modalEl) {
+        modalEl.addEventListener("mousedown", mousedownListener);
+        modalEl.addEventListener("touchstart", mousedownListener, {
+          passive: true
+        });
+      }
+    };
+    const unbindAutoTopEvent = () => {
+      const modalEl = getModalEl();
+      if (modalEl) {
+        modalEl.removeEventListener("mousedown", mousedownListener);
+        modalEl.removeEventListener("touchstart", mousedownListener);
+      }
+    };
     const updateModelValue = (modelValue) => {
       emit("update:modelValue", modelValue);
     };
     const toggleFullscreen = (fullscreen) => {
       isFullscreen.value = !isFullscreen.value;
-      vue.nextTick(() => {
-        topModal();
-      });
+      topModal();
       emit("update:fullscreen", isFullscreen.value);
     };
+    const resetPosition = () => {
+      isFullscreen.value = props$1.fullscreen ?? false;
+      modalPositionTop.value = void 0;
+      modalPositionLeft.value = void 0;
+      modalResizedWidth.value = void 0;
+      modalResizedHeight.value = void 0;
+      modalIsMoving.value = false;
+    };
     const handleOpen = () => {
-      if (props$1.resetOnClose || props$1.destroyOnClose) {
-        isFullscreen.value = props$1.fullscreen ?? false;
-      }
-      vue.nextTick(() => {
-        if (props$1.resetOnClose) {
-          resetModalStyle();
-        } else {
-          setInitPosition();
-        }
-        topModal();
-      });
+      topModal();
       emit("open");
     };
     const handleOpened = () => {
@@ -127,6 +299,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       emit("close");
     };
     const handleClosed = () => {
+      if (props$1.resetOnClose || props$1.destroyOnClose) {
+        resetPosition();
+      }
       emit("closed");
     };
     const handleOpenAutoFocus = () => {
@@ -135,23 +310,41 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handleCloseAutoFocus = () => {
       emit("closeAutoFocus");
     };
-    const resetPosition = () => {
-      resetModalStyle();
-    };
     const closeModal = () => {
-      dialogRef.value && dialogRef.value.handleClose();
+      if (dialogRef.value) {
+        dialogRef.value.handleClose();
+      } else {
+        updateModelValue(false);
+      }
     };
+    vue.watch(
+      () => props$1.zIndex,
+      (zIndex) => {
+        modalZIndex.value = zIndex;
+      }
+    );
     vue.watch(
       () => props$1.fullscreen,
       (fullscreen) => {
         isFullscreen.value = fullscreen ?? false;
       }
     );
+    vue.watch(
+      () => props$1.isDeactivated,
+      (deactivated) => {
+        isActivated.value = !deactivated;
+      }
+    );
     vue.onMounted(() => {
       if (props$1.modelValue) {
-        setInitPosition();
+        topModal();
       }
     });
+    vue.onBeforeUnmount(() => {
+      moveEventOption.modalEl = null;
+      moveEventOption.wrapEl = null;
+      unbindAutoTopEvent();
+    });
     vue.onActivated(() => {
       isActivated.value = true;
     });
@@ -171,27 +364,29 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         vue.createVNode(vue.unref(elementPlus.ElDialog), vue.mergeProps({ ..._ctx.$attrs, ...vue.unref(common.pick)(_ctx.$props, vue.unref(props.dialogPropKeys)) }, {
           ref_key: "dialogRef",
           ref: dialogRef,
-          modelValue: _ctx.modelValue,
-          title: _ctx.title,
-          width: _ctx.width,
           fullscreen: false,
           modal: _ctx.multiple ? false : _ctx.modal,
           modalClass: dialogClass.value,
           appendToBody: false,
           lockScroll: _ctx.inner || _ctx.multiple ? false : _ctx.lockScroll,
-          openDelay: _ctx.openDelay,
-          closeDelay: _ctx.closeDelay,
-          closeOnClickModal: _ctx.closeOnClickModal,
-          closeOnPressEscape: _ctx.closeOnPressEscape,
           showClose: false,
-          beforeClose: _ctx.beforeClose,
           draggable: false,
           overflow: false,
-          center: _ctx.center,
           alignCenter: false,
-          destroyOnClose: _ctx.destroyOnClose,
-          zIndex: _ctx.zIndex,
-          headerAriaLevel: _ctx.headerAriaLevel,
+          zIndex: modalZIndex.value,
+          style: {
+            margin: modalIsAbsolute.value ? 0 : modalPositionMargin.value,
+            position: modalIsAbsolute.value ? "absolute" : void 0,
+            top: modalPositionTop.value,
+            left: modalPositionLeft.value,
+            width: modalResizedWidth.value,
+            maxWidth: modalResizedWidth.value,
+            minWidth: modalResizedWidth.value,
+            height: modalResizedHeight.value ?? (typeof _ctx.height === "number" ? `${_ctx.height}px` : _ctx.height),
+            maxHeight: modalResizedHeight.value ?? (typeof _ctx.maxHeight === "number" ? `${_ctx.maxHeight}px` : _ctx.maxHeight),
+            minHeight: modalResizedHeight.value,
+            userSelect: modalIsMoving.value ? "none" : void 0
+          },
           "onUpdate:modelValue": updateModelValue,
           onOpen: handleOpen,
           onOpened: handleOpened,
@@ -206,7 +401,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               class: "ele-modal-header",
               onMousedown: _cache[6] || (_cache[6] = //@ts-ignore
               (...args) => vue.unref(handleHeaderMousedown) && vue.unref(handleHeaderMousedown)(...args)),
-              onTouchstart: _cache[7] || (_cache[7] = //@ts-ignore
+              onTouchstartPassive: _cache[7] || (_cache[7] = //@ts-ignore
               (...args) => vue.unref(handleHeaderTouchstart) && vue.unref(handleHeaderTouchstart)(...args))
             }, [
               vue.createElementVNode("div", {
@@ -228,7 +423,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 onClick: _cache[0] || (_cache[0] = ($event) => toggleFullscreen()),
                 onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
                 }, ["stop"])),
-                onTouchstart: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+                onTouchstartPassive: _cache[2] || (_cache[2] = vue.withModifiers(() => {
                 }, ["stop"]))
               }, [
                 vue.renderSlot(_ctx.$slots, "maxIcon", { fullscreen: isFullscreen.value }, () => [
@@ -247,7 +442,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 onClick: _cache[3] || (_cache[3] = ($event) => updateModelValue(false)),
                 onMousedown: _cache[4] || (_cache[4] = vue.withModifiers(() => {
                 }, ["stop"])),
-                onTouchstart: _cache[5] || (_cache[5] = vue.withModifiers(() => {
+                onTouchstartPassive: _cache[5] || (_cache[5] = vue.withModifiers(() => {
                 }, ["stop"]))
               }, [
                 vue.renderSlot(_ctx.$slots, "closeIcon", {}, () => [
@@ -262,15 +457,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ], 36),
             _ctx.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: vue.normalizeClass([
-                "ele-modal-resize-icon",
+              class: vue.normalizeClass(["ele-modal-resize-icon", [
                 { "is-horizontal": _ctx.resizable === "horizontal" },
                 { "is-vertical": _ctx.resizable === "vertical" }
-              ]),
+              ]]),
               style: vue.normalizeStyle(_ctx.resizeIconStyle),
               onMousedown: _cache[8] || (_cache[8] = //@ts-ignore
               (...args) => vue.unref(handleResizeMousedown) && vue.unref(handleResizeMousedown)(...args)),
-              onTouchstart: _cache[9] || (_cache[9] = //@ts-ignore
+              onTouchstartPassive: _cache[9] || (_cache[9] = //@ts-ignore
               (...args) => vue.unref(handleResizeTouchstart) && vue.unref(handleResizeTouchstart)(...args))
             }, [
               vue.renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
@@ -284,22 +478,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ], 38)) : vue.createCommentVNode("", true)
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(ReceiverView), {
-              wrapHeight: _ctx.bodyHeight,
-              wrapPosition: false,
-              class: vue.normalizeClass([
-                "ele-modal-body",
-                { "is-fluid-body": _ctx.bodyHeight != null },
-                { "is-form": _ctx.form },
-                _ctx.modalBodyClass
-              ]),
+            vue.createVNode(MainContent, {
+              class: vue.normalizeClass(["ele-modal-body", [{ "is-form": _ctx.form }, _ctx.modalBodyClass]]),
               style: vue.normalizeStyle(_ctx.bodyStyle)
             }, {
               default: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "default")
               ]),
               _: 3
-            }, 8, ["wrapHeight", "class", "style"])
+            }, 8, ["class", "style"]),
+            vue.createVNode(LoadingSpinner, vue.mergeProps(_ctx.loadingProps || {}, {
+              loading: _ctx.compLoading || _ctx.loading,
+              plain: true
+            }), null, 16, ["loading"])
           ]),
           _: 2
         }, [
@@ -315,7 +506,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["modelValue", "title", "width", "modal", "modalClass", "lockScroll", "openDelay", "closeDelay", "closeOnClickModal", "closeOnPressEscape", "beforeClose", "center", "destroyOnClose", "zIndex", "headerAriaLevel"])
+        ]), 1040, ["modal", "modalClass", "lockScroll", "zIndex", "style"])
       ], 8, ["to", "disabled"]);
     };
   }

package/lib/ele-modal/index.d.ts

@@ -23,7 +23,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
-    bodyHeight: (StringConstructor | NumberConstructor)[];
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
     position: import('vue').PropType<import('./types').Position>;
@@ -50,10 +51,16 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fullscreenBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     resizeIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     modalBodyClass: StringConstructor;
+    isDeactivated: BooleanConstructor;
+    compLoading: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingProps: import('vue').PropType<import('../ele-app/plus').EleLoadingProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
+    flexTable: import('vue').PropType<boolean | "auto">;
+    customFooter: BooleanConstructor;
     form: BooleanConstructor;
     appendTo: {
         readonly type: import('vue').PropType<string | HTMLElement>;
@@ -102,6 +109,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     } & {
         readonly default: true;
     };
+    modalPenetrable: BooleanConstructor;
     openDelay: {
         readonly type: import('vue').PropType<number>;
         readonly required: false;
@@ -150,15 +158,37 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     } & {
         readonly default: "2";
     };
+    transition: {
+        readonly type: import('vue').PropType<import('element-plus').DialogTransition>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     center: BooleanConstructor;
-    alignCenter: BooleanConstructor;
+    alignCenter: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     closeIcon: {
         readonly type: import('vue').PropType<string | import('vue').Component>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    overflow: BooleanConstructor;
+    overflow: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     fullscreen: BooleanConstructor;
     showClose: {
         readonly type: import('vue').PropType<boolean>;
@@ -192,11 +222,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     close: () => void;
     open: () => void;
     "update:modelValue": (value: boolean) => void;
-    opened: () => void;
     closed: () => void;
+    "update:fullscreen": (_fullscreen: boolean) => void;
+    opened: () => void;
     openAutoFocus: () => void;
     closeAutoFocus: () => void;
-    "update:fullscreen": (_fullscreen: boolean) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     appendToBody: {
         type: BooleanConstructor;
@@ -206,7 +236,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
-    bodyHeight: (StringConstructor | NumberConstructor)[];
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
     position: import('vue').PropType<import('./types').Position>;
@@ -233,10 +264,16 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fullscreenBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     resizeIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     modalBodyClass: StringConstructor;
+    isDeactivated: BooleanConstructor;
+    compLoading: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingProps: import('vue').PropType<import('../ele-app/plus').EleLoadingProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
+    flexTable: import('vue').PropType<boolean | "auto">;
+    customFooter: BooleanConstructor;
     form: BooleanConstructor;
     appendTo: {
         readonly type: import('vue').PropType<string | HTMLElement>;
@@ -285,6 +322,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     } & {
         readonly default: true;
     };
+    modalPenetrable: BooleanConstructor;
     openDelay: {
         readonly type: import('vue').PropType<number>;
         readonly required: false;
@@ -333,15 +371,37 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     } & {
         readonly default: "2";
     };
+    transition: {
+        readonly type: import('vue').PropType<import('element-plus').DialogTransition>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     center: BooleanConstructor;
-    alignCenter: BooleanConstructor;
+    alignCenter: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     closeIcon: {
         readonly type: import('vue').PropType<string | import('vue').Component>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    overflow: BooleanConstructor;
+    overflow: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     fullscreen: BooleanConstructor;
     showClose: {
         readonly type: import('vue').PropType<boolean>;
@@ -371,27 +431,30 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
+    "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
+    onOpened?: (() => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
     onCloseAutoFocus?: (() => any) | undefined;
-    "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
 }>, {
     form: boolean;
     title: string;
     center: boolean;
     modelValue: boolean;
     appendTo: string | HTMLElement;
+    loading: boolean;
     appendToBody: boolean;
     destroyOnClose: boolean;
     closeOnClickModal: boolean;
     closeOnPressEscape: boolean;
     lockScroll: boolean;
     modal: boolean;
+    modalPenetrable: boolean;
     openDelay: number;
     closeDelay: number;
     trapFocus: boolean;
     headerAriaLevel: string;
+    transition: import('element-plus').DialogTransition;
     alignCenter: boolean;
     draggable: boolean;
     overflow: boolean;
@@ -401,10 +464,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     multiple: boolean;
     minWidth: number;
     minHeight: number;
+    responsive: boolean;
+    inner: boolean;
     resetOnClose: boolean;
     maxable: boolean;
-    inner: boolean;
-    responsive: boolean;
+    isDeactivated: boolean;
+    compLoading: boolean;
+    customFooter: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;