ele-admin-plus 1.1.9-beta.10 → 1.1.9-beta.12

package/lib/ele-modal/index.cjs

@@ -2,7 +2,6 @@
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const icons = require("../icons");
-const core = require("../utils/core");
 const receiver = require("../ele-config-provider/receiver");
 const ReceiverView = require("../ele-config-provider/components/receiver-view");
 const util = require("./util");
@@ -15,195 +14,166 @@ const _sfc_main = vue.defineComponent({
     CloseOutlined: icons.CloseOutlined,
     CompressOutlined: icons.CompressOutlined,
     ExpandOutlined: icons.ExpandOutlined,
+    ResizeOutlined: icons.ResizeOutlined,
     ReceiverView
   },
   inheritAttrs: false,
   props: props.modalProps,
   emits: props.modalEmits,
-  setup(props$1, { emit, attrs }) {
+  setup(props2, { emit }) {
+    const state = { isInit: true };
     const layoutProvide = receiver.useLayoutState();
     const dialogRef = vue.ref(null);
-    const teleportTo = vue.ref(
-      util.getModalContainer(props$1.multiple, props$1.appendTo)
-    );
-    const isFullscreen = vue.ref(props$1.fullscreen ?? false);
+    const isFullscreen = vue.ref(props2.fullscreen ?? false);
     const isActivated = vue.ref(true);
-    const dialogEnable = vue.ref(
-      props$1.destroyOnClose && !props$1.modelValue ? false : true
-    );
     const dialogClass = vue.computed(() => {
-      const layoutState = vue.unref(layoutProvide);
       const classes = [util.wrapperClass];
-      if (props$1.responsive ?? (layoutState == null ? void 0 : layoutState.responsive) ?? true) {
-        classes.push(util.responsiveClass);
+      if (props2.responsive ?? layoutProvide.responsive ?? true) {
+        classes.push("ele-modal-responsive");
       }
-      if (props$1.form) {
-        classes.push("ele-modal-form");
-      }
-      if (props$1.position) {
-        if (props$1.position === "top") {
-          classes.push("ele-modal-top");
-        } else if (props$1.position === "bottom") {
-          classes.push("ele-modal-bottom");
-        } else if (props$1.position === "left") {
-          classes.push("ele-modal-left");
-        } else if (props$1.position === "right") {
-          classes.push("ele-modal-right");
-        } else if (props$1.position === "leftTop") {
-          classes.push("ele-modal-left-top");
-        } else if (props$1.position === "leftBottom") {
-          classes.push("ele-modal-left-bottom");
-        } else if (props$1.position === "rightTop") {
-          classes.push("ele-modal-right-top");
-        } else if (props$1.position === "rightBottom") {
-          classes.push("ele-modal-right-bottom");
-        } else if (props$1.position === "center") {
-          classes.push("ele-modal-center");
-        }
-      } else if (props$1.alignCenter) {
+      if (props2.alignCenter || props2.position === "center") {
         classes.push("ele-modal-center");
+      } else if (props2.position === "top") {
+        classes.push("ele-modal-top");
+      } else if (props2.position === "bottom") {
+        classes.push("ele-modal-bottom");
+      } else if (props2.position === "left") {
+        classes.push("ele-modal-left");
+      } else if (props2.position === "right") {
+        classes.push("ele-modal-right");
+      } else if (props2.position === "leftTop") {
+        classes.push("ele-modal-left-top");
+      } else if (props2.position === "leftBottom") {
+        classes.push("ele-modal-left-bottom");
+      } else if (props2.position === "rightTop") {
+        classes.push("ele-modal-right-top");
+      } else if (props2.position === "rightBottom") {
+        classes.push("ele-modal-right-bottom");
       }
-      if (props$1.draggable) {
-        classes.push(util.movableClass);
+      if (props2.draggable) {
+        classes.push("ele-modal-movable");
       }
-      if (props$1.resizable) {
-        classes.push(util.resizableClass);
-        if (typeof props$1.resizable === "string") {
-          classes.push(util.resizableClass + "-" + props$1.resizable);
-        }
+      if (props2.resizable) {
+        classes.push("ele-modal-resizable");
       }
-      if (props$1.multiple) {
-        classes.push(util.multipleClass);
+      if (props2.multiple) {
+        classes.push("ele-modal-multiple");
       }
       if (isFullscreen.value) {
-        classes.push(util.fullscreenClass);
+        classes.push("ele-modal-fullscreen");
       }
-      if (!props$1.modelValue) {
+      if (!props2.modelValue) {
         classes.push(util.closedClass);
       }
-      if (!isActivated.value && props$1.modelValue) {
-        classes.push(util.hideClass);
+      if (!isActivated.value && props2.modelValue) {
+        classes.push("ele-modal-hide");
       }
-      if (props$1.inner) {
-        classes.push(util.innerClass);
-        if (layoutState && layoutState.sidebar != null) {
-          if (layoutState.collapse && !layoutState.topLayout) {
-            classes.push(util.collapseClass);
-          }
-          if (layoutState.compact && layoutState.mixSidebar && !layoutState.topLayout) {
-            classes.push(util.compactClass);
-          }
-          if (layoutState.maximized) {
-            classes.push(util.maximizedClass);
-          }
-          if (layoutState.tabBar) {
-            classes.push(util.hasTabClass);
-          }
-          if (layoutState.mixSidebar && !layoutState.topLayout) {
-            classes.push(util.mixSidebarClass);
-            if (!layoutState.sidebar) {
-              classes.push(util.singleSidebarClass);
-            }
-          }
-          if (layoutState.topLayout) {
-            classes.push(util.topLayoutClass);
-          }
-          if (layoutState.maximized && layoutState.expanded) {
-            classes.push(util.expandedClass);
-          }
-          if (layoutState.mobile) {
-            classes.push(util.mobileClass);
-          }
-        }
+      if (props2.inner) {
+        classes.push("ele-modal-inner");
       }
-      if (props$1.modalClass) {
-        classes.push(props$1.modalClass);
+      if (props2.modalClass) {
+        classes.push(props2.modalClass);
       }
       return classes.join(" ");
     });
-    const dialogProps = vue.computed(() => {
-      const option = {
-        fullscreen: false,
-        modal: props$1.multiple ? false : props$1.modal,
-        appendToBody: false,
-        showClose: false,
-        draggable: false,
-        alignCenter: false,
-        destroyOnClose: false,
-        modalClass: dialogClass.value
-      };
-      return Object.assign({}, attrs, core.pick(props$1, props.dialogPropKeys), option);
+    const teleportTo = vue.computed(() => {
+      return util.getModalContainer(
+        props2.inner,
+        props2.multiple,
+        props2.appendTo,
+        layoutProvide.modalsEl
+      );
     });
     const teleportDisabled = vue.computed(() => {
-      const appendTo = props$1.appendTo || "body";
-      const disabled = appendTo === "body" ? !props$1.appendToBody : false;
-      return props$1.multiple ? false : disabled;
+      const appendTo = props2.appendTo || "body";
+      const disabled = appendTo === "body" ? !props2.appendToBody : false;
+      return props2.multiple || props2.inner ? false : disabled;
     });
     const getModalEl = () => {
       var _a, _b;
       return (_b = vue.unref((_a = vue.unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
     };
     const getZIndex = () => {
-      return props$1.zIndex ?? 2e3;
+      return props2.zIndex ?? 2e3;
+    };
+    const getPosition = () => {
+      if (props2.alignCenter) {
+        return "center";
+      }
+      if (props2.top != null && props2.top !== "") {
+        return { top: props2.top };
+      }
+      return props2.position;
+    };
+    const setInitPosition = () => {
+      if (state.isInit) {
+        state.isInit = false;
+        const modalEl = getModalEl();
+        const margin = util.getPositionMargin(getPosition());
+        if (modalEl && margin != null) {
+          modalEl.style.margin = margin;
+        }
+      }
+    };
+    const mousedownListener = (event) => {
+      if (props2.multiple) {
+        util.topModal(event.currentTarget, getZIndex());
+      }
+    };
+    const handleHeaderMousedown = (event) => {
+      const modalEl = getModalEl();
+      if (!modalEl || !props2.draggable || isFullscreen.value) {
+        return;
+      }
+      util.handleMove(modalEl, event, props2);
+    };
+    const handleResizeMousedown = (event) => {
+      const modalEl = getModalEl();
+      if (!modalEl || !props2.resizable || isFullscreen.value) {
+        return;
+      }
+      util.handleResize(modalEl, event, props2);
     };
     const updateModelValue = (modelValue) => {
       emit("update:modelValue", modelValue);
     };
     const toggleFullscreen = (fullscreen) => {
-      isFullscreen.value = fullscreen == null ? !isFullscreen.value : fullscreen;
+      isFullscreen.value = fullscreen ?? !isFullscreen.value;
       vue.nextTick(() => {
-        util.setModalTop(getModalEl(), getZIndex());
+        util.topModal(getModalEl(), getZIndex());
       });
       emit("update:fullscreen", isFullscreen.value);
     };
-    const mousedownListener = (event) => {
-      util.handleMovable(event, props$1);
-      util.handleResizable(event, props$1);
-      util.setModalTop(event.currentTarget, getZIndex());
-    };
     const onOpen = () => {
-      if (props$1.resetOnClose || props$1.destroyOnClose) {
-        isFullscreen.value = props$1.fullscreen ?? false;
-      }
-      if (!dialogEnable.value) {
-        dialogEnable.value = true;
+      if (props2.resetOnClose || props2.destroyOnClose) {
+        isFullscreen.value = props2.fullscreen ?? false;
       }
       vue.nextTick(() => {
         const modalEl = getModalEl();
-        if (props$1.resetOnClose) {
-          util.resetModalStyle(modalEl, props$1.width, props$1.top);
+        if (props2.resetOnClose) {
+          util.resetModalStyle(modalEl, props2.width, getPosition());
+        } else {
+          setInitPosition();
         }
-        if (props$1.position && typeof props$1.position === "object") {
-          util.setInitPosition(
-            modalEl,
-            props$1.resizable,
-            props$1.position,
-            props$1.moveOut,
-            props$1.resetOnClose
-          );
-        }
-        util.setModalTop(modalEl, getZIndex());
+        util.topModal(modalEl, getZIndex());
       });
       emit("open");
     };
     const onOpened = () => {
-      const el = getModalEl();
-      if (el) {
-        el.addEventListener("mousedown", mousedownListener);
+      const modalEl = getModalEl();
+      if (modalEl) {
+        modalEl.addEventListener("mousedown", mousedownListener);
       }
       emit("opened");
     };
     const onClose = () => {
-      const el = getModalEl();
-      if (el) {
-        el.removeEventListener("mousedown", mousedownListener);
+      const modalEl = getModalEl();
+      if (modalEl) {
+        modalEl.removeEventListener("mousedown", mousedownListener);
       }
       emit("close");
     };
     const onClosed = () => {
-      if (props$1.destroyOnClose && dialogEnable.value) {
-        dialogEnable.value = false;
-      }
       emit("closed");
     };
     const onOpenAutoFocus = () => {
@@ -213,51 +183,16 @@ const _sfc_main = vue.defineComponent({
       emit("closeAutoFocus");
     };
     vue.watch(
-      () => props$1.multiple,
-      (multiple) => {
-        teleportTo.value = util.getModalContainer(multiple, props$1.appendTo);
-      }
-    );
-    vue.watch(
-      () => props$1.appendTo,
-      (appendTo) => {
-        if (!props$1.multiple) {
-          teleportTo.value = util.getModalContainer(false, appendTo);
-        }
-      }
-    );
-    vue.watch(
-      () => props$1.fullscreen,
+      () => props2.fullscreen,
       (fullscreen) => {
         isFullscreen.value = fullscreen ?? false;
       }
     );
-    vue.watch(
-      () => props$1.position,
-      (position) => {
-        if (props$1.modelValue && position && typeof position === "object") {
-          util.setInitPosition(
-            getModalEl(),
-            props$1.resizable,
-            position,
-            props$1.moveOut,
-            true
-          );
-        }
-      }
-    );
-    vue.watch(
-      () => props$1.destroyOnClose,
-      (destroyOnClose) => {
-        if (destroyOnClose) {
-          if (!props$1.modelValue && dialogEnable.value) {
-            dialogEnable.value = false;
-          }
-        } else if (!dialogEnable.value) {
-          dialogEnable.value = true;
-        }
+    vue.onMounted(() => {
+      if (props2.modelValue) {
+        setInitPosition();
       }
-    );
+    });
     vue.onActivated(() => {
       isActivated.value = true;
     });
@@ -266,11 +201,12 @@ const _sfc_main = vue.defineComponent({
     });
     return {
       dialogRef,
-      teleportTo,
       isFullscreen,
-      dialogEnable,
-      dialogProps,
+      dialogClass,
+      teleportTo,
       teleportDisabled,
+      handleHeaderMousedown,
+      handleResizeMousedown,
       updateModelValue,
       toggleFullscreen,
       onOpen,
@@ -289,20 +225,41 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _hoisted_1 = ["onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CompressOutlined = vue.resolveComponent("CompressOutlined");
   const _component_ExpandOutlined = vue.resolveComponent("ExpandOutlined");
   const _component_ElIcon = vue.resolveComponent("ElIcon");
   const _component_CloseOutlined = vue.resolveComponent("CloseOutlined");
+  const _component_ResizeOutlined = vue.resolveComponent("ResizeOutlined");
   const _component_ReceiverView = vue.resolveComponent("ReceiverView");
   const _component_ElDialog = vue.resolveComponent("ElDialog");
   return vue.openBlock(), vue.createBlock(vue.Teleport, {
     to: _ctx.teleportTo,
     disabled: _ctx.teleportDisabled
   }, [
-    vue.createVNode(_component_ElDialog, vue.mergeProps(_ctx.dialogProps, {
+    vue.createVNode(_component_ElDialog, vue.mergeProps(_ctx.$attrs, {
       ref: "dialogRef",
+      modelValue: _ctx.modelValue,
+      title: _ctx.title,
+      width: _ctx.width,
+      fullscreen: false,
+      modal: _ctx.multiple ? false : _ctx.modal,
+      modalClass: _ctx.dialogClass,
+      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,
       "onUpdate:modelValue": _ctx.updateModelValue,
       onOpen: _ctx.onOpen,
       onOpened: _ctx.onOpened,
@@ -313,11 +270,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }), vue.createSlots({
       header: vue.withCtx(({ close, titleId, titleClass }) => [
         vue.createElementVNode("div", {
+          style: vue.normalizeStyle(_ctx.headerStyle),
           class: "ele-modal-header",
-          style: vue.normalizeStyle(_ctx.headerStyle)
+          onMousedown: _cache[4] || (_cache[4] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args))
         }, [
-          _ctx.dialogEnable ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
+          vue.createElementVNode("div", {
             class: "ele-modal-title",
             style: vue.normalizeStyle(_ctx.titleStyle)
           }, [
@@ -328,12 +285,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, () => [
               vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
             ])
-          ], 4)) : vue.createCommentVNode("", true),
-          _ctx.dialogEnable && _ctx.maxable ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
+          ], 4),
+          _ctx.maxable ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
             class: "ele-modal-tool",
             style: vue.normalizeStyle(_ctx.fullscreenBtnStyle),
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen())
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
+            onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+            }, ["stop"]))
           }, [
             vue.renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
               vue.createVNode(_component_ElIcon, null, {
@@ -343,53 +302,72 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 _: 1
               })
             ])
-          ], 4)) : vue.createCommentVNode("", true),
-          _ctx.dialogEnable && _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 2,
+          ], 36)) : vue.createCommentVNode("", true),
+          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
             class: "ele-modal-tool",
             style: vue.normalizeStyle(_ctx.closeBtnStyle),
-            onClick: close
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.updateModelValue(false)),
+            onMousedown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
+            }, ["stop"]))
           }, [
             vue.renderSlot(_ctx.$slots, "closeIcon", {}, () => [
               vue.createVNode(_component_ElIcon, null, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_component_CloseOutlined)
+                  _ctx.closeIcon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon), { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_CloseOutlined, { key: 1 }))
                 ]),
                 _: 1
               })
             ])
-          ], 12, _hoisted_1)) : vue.createCommentVNode("", true)
-        ], 4)
+          ], 36)) : vue.createCommentVNode("", true)
+        ], 36),
+        _ctx.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass([
+            "ele-modal-resize-icon",
+            { "is-horizontal": _ctx.resizable === "horizontal" },
+            { "is-vertical": _ctx.resizable === "vertical" }
+          ]),
+          style: vue.normalizeStyle(_ctx.resizeIconStyle),
+          onMousedown: _cache[5] || (_cache[5] = (...args) => _ctx.handleResizeMousedown && _ctx.handleResizeMousedown(...args))
+        }, [
+          vue.renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
+            vue.createVNode(_component_ElIcon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_ResizeOutlined)
+              ]),
+              _: 1
+            })
+          ])
+        ], 38)) : vue.createCommentVNode("", true)
       ]),
       default: vue.withCtx(() => [
-        _ctx.dialogEnable ? (vue.openBlock(), vue.createBlock(_component_ReceiverView, {
-          key: 0,
+        vue.createVNode(_component_ReceiverView, {
           wrapPosition: false,
-          class: "ele-modal-body",
+          class: vue.normalizeClass(["ele-modal-body", { "is-form": _ctx.form }]),
           style: vue.normalizeStyle(_ctx.bodyStyle)
         }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "default")
           ]),
           _: 3
-        }, 8, ["style"])) : vue.createCommentVNode("", true)
+        }, 8, ["class", "style"])
       ]),
       _: 2
     }, [
       _ctx.$slots.footer ? {
         name: "footer",
         fn: vue.withCtx(() => [
-          _ctx.dialogEnable ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
+          vue.createElementVNode("div", {
             class: "ele-modal-footer",
             style: vue.normalizeStyle(_ctx.footerStyle)
           }, [
             vue.renderSlot(_ctx.$slots, "footer")
-          ], 4)) : vue.createCommentVNode("", true)
+          ], 4)
         ]),
         key: "0"
       } : void 0
-    ]), 1040, ["onUpdate:modelValue", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus"])
+    ]), 1040, ["modelValue", "title", "width", "modal", "modalClass", "lockScroll", "openDelay", "closeDelay", "closeOnClickModal", "closeOnPressEscape", "beforeClose", "center", "destroyOnClose", "zIndex", "headerAriaLevel", "onUpdate:modelValue", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus"])
   ], 8, ["to", "disabled"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);