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

package/es/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;

package/es/ele-modal/index.js

@@ -1,10 +1,12 @@
-import { defineComponent, ref, computed, watch, onMounted, onActivated, onDeactivated, createBlock, openBlock, Teleport, createVNode, unref, mergeProps, createSlots, withCtx, normalizeStyle, normalizeClass, renderSlot, createElementVNode, createElementBlock, createCommentVNode, createTextVNode, toDisplayString, withModifiers, resolveDynamicComponent, nextTick } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, onActivated, onDeactivated, createBlock, openBlock, Teleport, createVNode, unref, mergeProps, createSlots, withCtx, normalizeStyle, normalizeClass, renderSlot, createElementVNode, createElementBlock, createCommentVNode, createTextVNode, toDisplayString, withModifiers, resolveDynamicComponent } from "vue";
 import { ElDialog, ElIcon } from "element-plus";
 import { CompressOutlined, ExpandOutlined, CloseOutlined, ResizeOutlined } from "../icons/index";
 import { pick } from "../utils/common";
-import ReceiverView from "../ele-config-provider/components/receiver-view";
+import { useMoveEvent } from "../utils/hook";
+import MainContent from "../ele-loading/components/main-content";
+import LoadingSpinner from "../ele-loading/components/loading-spinner";
 import { useLayoutState, useResponsive } from "../ele-pro-layout/util";
-import { wrapperClass, getModalContainer, useModalEvent, closedClass } from "./util";
+import { wrapperClass, getPositionMargin, getModalContainer, canMoveOut, closedClass, getMaxZIndex } from "./util";
 import { modalEmits, modalProps, dialogPropKeys } from "./props";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "EleModal", inheritAttrs: false },
@@ -18,15 +20,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isResponsive = useResponsive(props);
     const dialogRef = ref(null);
     const isFullscreen = ref(props.fullscreen ?? false);
-    const isActivated = ref(true);
+    const modalPositionTop = ref();
+    const modalPositionLeft = ref();
+    const modalResizedWidth = ref();
+    const modalResizedHeight = ref();
+    const modalZIndex = ref(props.zIndex);
+    const modalIsMoving = ref(false);
+    const isActivated = ref(!props.isDeactivated);
     const dialogClass = computed(() => {
       const classes = [wrapperClass];
       if (isResponsive.value) {
         classes.push("ele-modal-responsive");
       }
-      if (props.alignCenter || props.position === "center") {
-        classes.push("ele-modal-center");
-      } else if (props.position === "top") {
+      if (props.maxHeight == null || props.maxHeight != null && props.maxHeight !== "") {
+        classes.push("ele-modal-fluid");
+      }
+      if (props.position === "top") {
         classes.push("ele-modal-top");
       } else if (props.position === "bottom") {
         classes.push("ele-modal-bottom");
@@ -64,11 +73,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.inner) {
         classes.push("ele-modal-inner");
       }
+      if (props.compLoading && !props.loading) {
+        classes.push("ele-modal-comp-loading");
+      }
+      if (props.flexTable === "auto") {
+        classes.push("ele-modal-flex-auto-table");
+      } else if (props.flexTable) {
+        classes.push("ele-modal-flex-table");
+      }
+      if (props.customFooter) {
+        classes.push("ele-modal-custom-footer");
+      }
       if (props.modalClass) {
         classes.push(props.modalClass);
       }
       return classes.join(" ");
     });
+    const modalIsAbsolute = computed(() => {
+      return modalPositionTop.value != null || modalPositionLeft.value != null;
+    });
+    const modalPositionMargin = computed(() => {
+      if (typeof props.position === "string") {
+        return;
+      }
+      return getPositionMargin({
+        top: props.top,
+        ...props.alignCenter ? { top: "auto", left: "auto", right: "auto", bottom: "auto" } : {},
+        ...props.position || {}
+      });
+    });
     const teleportTo = computed(() => {
       return getModalContainer(
         props.inner,
@@ -78,43 +111,182 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       );
     });
     const teleportDisabled = computed(() => {
-      const appendTo = props.appendTo || "body";
-      const disabled = appendTo === "body" ? !props.appendToBody : false;
+      const bodyAppend = "body";
+      const appendTo = props.appendTo || bodyAppend;
+      const disabled = appendTo === bodyAppend ? !props.appendToBody : false;
       return props.multiple || props.inner ? false : disabled;
     });
+    const getModalEl = () => {
+      const el = unref(dialogRef.value?.dialogContentRef)?.$el;
+      return el;
+    };
+    const topModal = () => {
+      const zIndex = getMaxZIndex(getModalEl(), props.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
+    } = useMoveEvent({
+      start: () => {
+        moveEventOption.modalEl = getModalEl();
+        moveEventOption.wrapEl = moveEventOption.modalEl?.parentElement;
+        if (!moveEventOption.modalEl || !moveEventOption.wrapEl || !props.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.moveOut) {
+          if (positionLeft < 0) {
+            positionLeft = 0;
+          } else if (positionLeft > limitL) {
+            positionLeft = limitL;
+          }
+          if (positionTop > limitT) {
+            positionTop = limitT;
+          }
+          if (positionTop < 0) {
+            positionTop = 0;
+          }
+        } else {
+          if (!canMoveOut(props.moveOut, "left") && positionLeft < 0) {
+            positionLeft = 0;
+          }
+          if (!canMoveOut(props.moveOut, "right") && positionLeft > limitL) {
+            positionLeft = limitL;
+          }
+          if (!canMoveOut(props.moveOut, "bottom") && positionTop > limitT) {
+            positionTop = limitT;
+          }
+          if (!canMoveOut(props.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.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
-    } = useModalEvent(dialogRef, props, isFullscreen);
+      handleMousedown: handleResizeMousedown,
+      handleTouchstart: handleResizeTouchstart
+    } = useMoveEvent({
+      start: () => {
+        moveEventOption.modalEl = getModalEl();
+        moveEventOption.wrapEl = moveEventOption.modalEl?.parentElement;
+        if (!moveEventOption.modalEl || !moveEventOption.wrapEl || !props.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.resizable !== "vertical") {
+          const w = distanceX + moveEventOption.downW;
+          const maxW = moveEventOption.wrapEl.clientWidth - moveEventOption.modalEl.offsetLeft - moveEventOption.fixLeft;
+          const nw = (w < props.minWidth ? props.minWidth : !canMoveOut(props.moveOut, "right") && w > maxW ? maxW : w) + "px";
+          modalResizedWidth.value = nw;
+        }
+        if (props.resizable !== "horizontal") {
+          const h = distanceY + moveEventOption.downH;
+          const maxH = moveEventOption.wrapEl.clientHeight - moveEventOption.modalEl.offsetTop - moveEventOption.fixTop;
+          const nh = (h < props.minHeight ? props.minHeight : !canMoveOut(props.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.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;
-      nextTick(() => {
-        topModal();
-      });
+      topModal();
       emit("update:fullscreen", isFullscreen.value);
     };
+    const resetPosition = () => {
+      isFullscreen.value = props.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.resetOnClose || props.destroyOnClose) {
-        isFullscreen.value = props.fullscreen ?? false;
-      }
-      nextTick(() => {
-        if (props.resetOnClose) {
-          resetModalStyle();
-        } else {
-          setInitPosition();
-        }
-        topModal();
-      });
+      topModal();
       emit("open");
     };
     const handleOpened = () => {
@@ -126,6 +298,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("close");
     };
     const handleClosed = () => {
+      if (props.resetOnClose || props.destroyOnClose) {
+        resetPosition();
+      }
       emit("closed");
     };
     const handleOpenAutoFocus = () => {
@@ -134,23 +309,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleCloseAutoFocus = () => {
       emit("closeAutoFocus");
     };
-    const resetPosition = () => {
-      resetModalStyle();
-    };
     const closeModal = () => {
-      dialogRef.value && dialogRef.value.handleClose();
+      if (dialogRef.value) {
+        dialogRef.value.handleClose();
+      } else {
+        updateModelValue(false);
+      }
     };
+    watch(
+      () => props.zIndex,
+      (zIndex) => {
+        modalZIndex.value = zIndex;
+      }
+    );
     watch(
       () => props.fullscreen,
       (fullscreen) => {
         isFullscreen.value = fullscreen ?? false;
       }
     );
+    watch(
+      () => props.isDeactivated,
+      (deactivated) => {
+        isActivated.value = !deactivated;
+      }
+    );
     onMounted(() => {
       if (props.modelValue) {
-        setInitPosition();
+        topModal();
       }
     });
+    onBeforeUnmount(() => {
+      moveEventOption.modalEl = null;
+      moveEventOption.wrapEl = null;
+      unbindAutoTopEvent();
+    });
     onActivated(() => {
       isActivated.value = true;
     });
@@ -170,27 +363,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createVNode(unref(ElDialog), mergeProps({ ..._ctx.$attrs, ...unref(pick)(_ctx.$props, unref(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,
@@ -205,7 +400,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: "ele-modal-header",
               onMousedown: _cache[6] || (_cache[6] = //@ts-ignore
               (...args) => unref(handleHeaderMousedown) && unref(handleHeaderMousedown)(...args)),
-              onTouchstart: _cache[7] || (_cache[7] = //@ts-ignore
+              onTouchstartPassive: _cache[7] || (_cache[7] = //@ts-ignore
               (...args) => unref(handleHeaderTouchstart) && unref(handleHeaderTouchstart)(...args))
             }, [
               createElementVNode("div", {
@@ -227,7 +422,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onClick: _cache[0] || (_cache[0] = ($event) => toggleFullscreen()),
                 onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
                 }, ["stop"])),
-                onTouchstart: _cache[2] || (_cache[2] = withModifiers(() => {
+                onTouchstartPassive: _cache[2] || (_cache[2] = withModifiers(() => {
                 }, ["stop"]))
               }, [
                 renderSlot(_ctx.$slots, "maxIcon", { fullscreen: isFullscreen.value }, () => [
@@ -246,7 +441,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onClick: _cache[3] || (_cache[3] = ($event) => updateModelValue(false)),
                 onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {
                 }, ["stop"])),
-                onTouchstart: _cache[5] || (_cache[5] = withModifiers(() => {
+                onTouchstartPassive: _cache[5] || (_cache[5] = withModifiers(() => {
                 }, ["stop"]))
               }, [
                 renderSlot(_ctx.$slots, "closeIcon", {}, () => [
@@ -261,15 +456,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], 36),
             _ctx.resizable ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: normalizeClass([
-                "ele-modal-resize-icon",
+              class: normalizeClass(["ele-modal-resize-icon", [
                 { "is-horizontal": _ctx.resizable === "horizontal" },
                 { "is-vertical": _ctx.resizable === "vertical" }
-              ]),
+              ]]),
               style: normalizeStyle(_ctx.resizeIconStyle),
               onMousedown: _cache[8] || (_cache[8] = //@ts-ignore
               (...args) => unref(handleResizeMousedown) && unref(handleResizeMousedown)(...args)),
-              onTouchstart: _cache[9] || (_cache[9] = //@ts-ignore
+              onTouchstartPassive: _cache[9] || (_cache[9] = //@ts-ignore
               (...args) => unref(handleResizeTouchstart) && unref(handleResizeTouchstart)(...args))
             }, [
               renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
@@ -283,22 +477,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], 38)) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createVNode(unref(ReceiverView), {
-              wrapHeight: _ctx.bodyHeight,
-              wrapPosition: false,
-              class: normalizeClass([
-                "ele-modal-body",
-                { "is-fluid-body": _ctx.bodyHeight != null },
-                { "is-form": _ctx.form },
-                _ctx.modalBodyClass
-              ]),
+            createVNode(MainContent, {
+              class: normalizeClass(["ele-modal-body", [{ "is-form": _ctx.form }, _ctx.modalBodyClass]]),
               style: normalizeStyle(_ctx.bodyStyle)
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "default")
               ]),
               _: 3
-            }, 8, ["wrapHeight", "class", "style"])
+            }, 8, ["class", "style"]),
+            createVNode(LoadingSpinner, mergeProps(_ctx.loadingProps || {}, {
+              loading: _ctx.compLoading || _ctx.loading,
+              plain: true
+            }), null, 16, ["loading"])
           ]),
           _: 2
         }, [
@@ -314,7 +505,7 @@ const _sfc_main = /* @__PURE__ */ 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"]);
     };
   }