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

package/es/ele-modal/index.js

@@ -1,11 +1,10 @@
-import { defineComponent, ref, computed, unref, watch, onActivated, onDeactivated, nextTick, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick, unref, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, withModifiers, createCommentVNode, resolveDynamicComponent, normalizeClass } from "vue";
 import { ElDialog, ElIcon } from "element-plus";
-import { CloseOutlined, CompressOutlined, ExpandOutlined } from "../icons";
-import { pick } from "../utils/core";
+import { CloseOutlined, CompressOutlined, ExpandOutlined, ResizeOutlined } from "../icons";
 import { useLayoutState } from "../ele-config-provider/receiver";
 import ReceiverView from "../ele-config-provider/components/receiver-view";
-import { getModalContainer, resizableClass, multipleClass, fullscreenClass, closedClass, hideClass, innerClass, collapseClass, compactClass, maximizedClass, hasTabClass, mixSidebarClass, singleSidebarClass, topLayoutClass, expandedClass, mobileClass, setInitPosition, wrapperClass, responsiveClass, movableClass, setModalTop, resetModalStyle, handleMovable, handleResizable } from "./util";
-import { modalProps, modalEmits, dialogPropKeys } from "./props";
+import { getModalContainer, wrapperClass, closedClass, getPositionMargin, handleMove, handleResize, topModal, resetModalStyle } from "./util";
+import { modalProps, modalEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleModal",
   components: {
@@ -14,129 +13,80 @@ const _sfc_main = defineComponent({
     CloseOutlined,
     CompressOutlined,
     ExpandOutlined,
+    ResizeOutlined,
     ReceiverView
   },
   inheritAttrs: false,
   props: modalProps,
   emits: modalEmits,
-  setup(props, { emit, attrs }) {
+  setup(props, { emit }) {
+    const state = { isInit: true };
     const layoutProvide = useLayoutState();
     const dialogRef = ref(null);
-    const teleportTo = ref(
-      getModalContainer(props.multiple, props.appendTo)
-    );
     const isFullscreen = ref(props.fullscreen ?? false);
     const isActivated = ref(true);
-    const dialogEnable = ref(
-      props.destroyOnClose && !props.modelValue ? false : true
-    );
     const dialogClass = computed(() => {
-      const layoutState = unref(layoutProvide);
       const classes = [wrapperClass];
-      if (props.responsive ?? (layoutState == null ? void 0 : layoutState.responsive) ?? true) {
-        classes.push(responsiveClass);
+      if (props.responsive ?? layoutProvide.responsive ?? true) {
+        classes.push("ele-modal-responsive");
       }
-      if (props.form) {
-        classes.push("ele-modal-form");
-      }
-      if (props.position) {
-        if (props.position === "top") {
-          classes.push("ele-modal-top");
-        } else if (props.position === "bottom") {
-          classes.push("ele-modal-bottom");
-        } else if (props.position === "left") {
-          classes.push("ele-modal-left");
-        } else if (props.position === "right") {
-          classes.push("ele-modal-right");
-        } else if (props.position === "leftTop") {
-          classes.push("ele-modal-left-top");
-        } else if (props.position === "leftBottom") {
-          classes.push("ele-modal-left-bottom");
-        } else if (props.position === "rightTop") {
-          classes.push("ele-modal-right-top");
-        } else if (props.position === "rightBottom") {
-          classes.push("ele-modal-right-bottom");
-        } else if (props.position === "center") {
-          classes.push("ele-modal-center");
-        }
-      } else if (props.alignCenter) {
+      if (props.alignCenter || props.position === "center") {
         classes.push("ele-modal-center");
+      } else if (props.position === "top") {
+        classes.push("ele-modal-top");
+      } else if (props.position === "bottom") {
+        classes.push("ele-modal-bottom");
+      } else if (props.position === "left") {
+        classes.push("ele-modal-left");
+      } else if (props.position === "right") {
+        classes.push("ele-modal-right");
+      } else if (props.position === "leftTop") {
+        classes.push("ele-modal-left-top");
+      } else if (props.position === "leftBottom") {
+        classes.push("ele-modal-left-bottom");
+      } else if (props.position === "rightTop") {
+        classes.push("ele-modal-right-top");
+      } else if (props.position === "rightBottom") {
+        classes.push("ele-modal-right-bottom");
       }
       if (props.draggable) {
-        classes.push(movableClass);
+        classes.push("ele-modal-movable");
       }
       if (props.resizable) {
-        classes.push(resizableClass);
-        if (typeof props.resizable === "string") {
-          classes.push(resizableClass + "-" + props.resizable);
-        }
+        classes.push("ele-modal-resizable");
       }
       if (props.multiple) {
-        classes.push(multipleClass);
+        classes.push("ele-modal-multiple");
       }
       if (isFullscreen.value) {
-        classes.push(fullscreenClass);
+        classes.push("ele-modal-fullscreen");
       }
       if (!props.modelValue) {
         classes.push(closedClass);
       }
       if (!isActivated.value && props.modelValue) {
-        classes.push(hideClass);
+        classes.push("ele-modal-hide");
       }
       if (props.inner) {
-        classes.push(innerClass);
-        if (layoutState && layoutState.sidebar != null) {
-          if (layoutState.collapse && !layoutState.topLayout) {
-            classes.push(collapseClass);
-          }
-          if (layoutState.compact && layoutState.mixSidebar && !layoutState.topLayout) {
-            classes.push(compactClass);
-          }
-          if (layoutState.maximized) {
-            classes.push(maximizedClass);
-          }
-          if (layoutState.tabBar) {
-            classes.push(hasTabClass);
-          }
-          if (layoutState.mixSidebar && !layoutState.topLayout) {
-            classes.push(mixSidebarClass);
-            if (!layoutState.sidebar) {
-              classes.push(singleSidebarClass);
-            }
-          }
-          if (layoutState.topLayout) {
-            classes.push(topLayoutClass);
-          }
-          if (layoutState.maximized && layoutState.expanded) {
-            classes.push(expandedClass);
-          }
-          if (layoutState.mobile) {
-            classes.push(mobileClass);
-          }
-        }
+        classes.push("ele-modal-inner");
       }
       if (props.modalClass) {
         classes.push(props.modalClass);
       }
       return classes.join(" ");
     });
-    const dialogProps = computed(() => {
-      const option = {
-        fullscreen: false,
-        modal: props.multiple ? false : props.modal,
-        appendToBody: false,
-        showClose: false,
-        draggable: false,
-        alignCenter: false,
-        destroyOnClose: false,
-        modalClass: dialogClass.value
-      };
-      return Object.assign({}, attrs, pick(props, dialogPropKeys), option);
+    const teleportTo = computed(() => {
+      return getModalContainer(
+        props.inner,
+        props.multiple,
+        props.appendTo,
+        layoutProvide.modalsEl
+      );
     });
     const teleportDisabled = computed(() => {
       const appendTo = props.appendTo || "body";
       const disabled = appendTo === "body" ? !props.appendToBody : false;
-      return props.multiple ? false : disabled;
+      return props.multiple || props.inner ? false : disabled;
     });
     const getModalEl = () => {
       var _a, _b;
@@ -145,64 +95,84 @@ const _sfc_main = defineComponent({
     const getZIndex = () => {
       return props.zIndex ?? 2e3;
     };
+    const getPosition = () => {
+      if (props.alignCenter) {
+        return "center";
+      }
+      if (props.top != null && props.top !== "") {
+        return { top: props.top };
+      }
+      return props.position;
+    };
+    const setInitPosition = () => {
+      if (state.isInit) {
+        state.isInit = false;
+        const modalEl = getModalEl();
+        const margin = getPositionMargin(getPosition());
+        if (modalEl && margin != null) {
+          modalEl.style.margin = margin;
+        }
+      }
+    };
+    const mousedownListener = (event) => {
+      if (props.multiple) {
+        topModal(event.currentTarget, getZIndex());
+      }
+    };
+    const handleHeaderMousedown = (event) => {
+      const modalEl = getModalEl();
+      if (!modalEl || !props.draggable || isFullscreen.value) {
+        return;
+      }
+      handleMove(modalEl, event, props);
+    };
+    const handleResizeMousedown = (event) => {
+      const modalEl = getModalEl();
+      if (!modalEl || !props.resizable || isFullscreen.value) {
+        return;
+      }
+      handleResize(modalEl, event, props);
+    };
     const updateModelValue = (modelValue) => {
       emit("update:modelValue", modelValue);
     };
     const toggleFullscreen = (fullscreen) => {
-      isFullscreen.value = fullscreen == null ? !isFullscreen.value : fullscreen;
+      isFullscreen.value = fullscreen ?? !isFullscreen.value;
       nextTick(() => {
-        setModalTop(getModalEl(), getZIndex());
+        topModal(getModalEl(), getZIndex());
       });
       emit("update:fullscreen", isFullscreen.value);
     };
-    const mousedownListener = (event) => {
-      handleMovable(event, props);
-      handleResizable(event, props);
-      setModalTop(event.currentTarget, getZIndex());
-    };
     const onOpen = () => {
       if (props.resetOnClose || props.destroyOnClose) {
         isFullscreen.value = props.fullscreen ?? false;
       }
-      if (!dialogEnable.value) {
-        dialogEnable.value = true;
-      }
       nextTick(() => {
         const modalEl = getModalEl();
         if (props.resetOnClose) {
-          resetModalStyle(modalEl, props.width, props.top);
-        }
-        if (props.position && typeof props.position === "object") {
-          setInitPosition(
-            modalEl,
-            props.resizable,
-            props.position,
-            props.moveOut,
-            props.resetOnClose
-          );
+          resetModalStyle(modalEl, props.width, getPosition());
+        } else {
+          setInitPosition();
         }
-        setModalTop(modalEl, getZIndex());
+        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.destroyOnClose && dialogEnable.value) {
-        dialogEnable.value = false;
-      }
       emit("closed");
     };
     const onOpenAutoFocus = () => {
@@ -211,52 +181,17 @@ const _sfc_main = defineComponent({
     const onCloseAutoFocus = () => {
       emit("closeAutoFocus");
     };
-    watch(
-      () => props.multiple,
-      (multiple) => {
-        teleportTo.value = getModalContainer(multiple, props.appendTo);
-      }
-    );
-    watch(
-      () => props.appendTo,
-      (appendTo) => {
-        if (!props.multiple) {
-          teleportTo.value = getModalContainer(false, appendTo);
-        }
-      }
-    );
     watch(
       () => props.fullscreen,
       (fullscreen) => {
         isFullscreen.value = fullscreen ?? false;
       }
     );
-    watch(
-      () => props.position,
-      (position) => {
-        if (props.modelValue && position && typeof position === "object") {
-          setInitPosition(
-            getModalEl(),
-            props.resizable,
-            position,
-            props.moveOut,
-            true
-          );
-        }
-      }
-    );
-    watch(
-      () => props.destroyOnClose,
-      (destroyOnClose) => {
-        if (destroyOnClose) {
-          if (!props.modelValue && dialogEnable.value) {
-            dialogEnable.value = false;
-          }
-        } else if (!dialogEnable.value) {
-          dialogEnable.value = true;
-        }
+    onMounted(() => {
+      if (props.modelValue) {
+        setInitPosition();
       }
-    );
+    });
     onActivated(() => {
       isActivated.value = true;
     });
@@ -265,11 +200,12 @@ const _sfc_main = defineComponent({
     });
     return {
       dialogRef,
-      teleportTo,
       isFullscreen,
-      dialogEnable,
-      dialogProps,
+      dialogClass,
+      teleportTo,
       teleportDisabled,
+      handleHeaderMousedown,
+      handleResizeMousedown,
       updateModelValue,
       toggleFullscreen,
       onOpen,
@@ -288,20 +224,41 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = ["onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CompressOutlined = resolveComponent("CompressOutlined");
   const _component_ExpandOutlined = resolveComponent("ExpandOutlined");
   const _component_ElIcon = resolveComponent("ElIcon");
   const _component_CloseOutlined = resolveComponent("CloseOutlined");
+  const _component_ResizeOutlined = resolveComponent("ResizeOutlined");
   const _component_ReceiverView = resolveComponent("ReceiverView");
   const _component_ElDialog = resolveComponent("ElDialog");
   return openBlock(), createBlock(Teleport, {
     to: _ctx.teleportTo,
     disabled: _ctx.teleportDisabled
   }, [
-    createVNode(_component_ElDialog, mergeProps(_ctx.dialogProps, {
+    createVNode(_component_ElDialog, 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,
@@ -312,11 +269,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }), createSlots({
       header: withCtx(({ close, titleId, titleClass }) => [
         createElementVNode("div", {
+          style: normalizeStyle(_ctx.headerStyle),
           class: "ele-modal-header",
-          style: normalizeStyle(_ctx.headerStyle)
+          onMousedown: _cache[4] || (_cache[4] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args))
         }, [
-          _ctx.dialogEnable ? (openBlock(), createElementBlock("div", {
-            key: 0,
+          createElementVNode("div", {
             class: "ele-modal-title",
             style: normalizeStyle(_ctx.titleStyle)
           }, [
@@ -327,12 +284,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, () => [
               createTextVNode(toDisplayString(_ctx.title), 1)
             ])
-          ], 4)) : createCommentVNode("", true),
-          _ctx.dialogEnable && _ctx.maxable ? (openBlock(), createElementBlock("div", {
-            key: 1,
+          ], 4),
+          _ctx.maxable ? (openBlock(), createElementBlock("div", {
+            key: 0,
             class: "ele-modal-tool",
             style: normalizeStyle(_ctx.fullscreenBtnStyle),
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen())
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
+            onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["stop"]))
           }, [
             renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
               createVNode(_component_ElIcon, null, {
@@ -342,53 +301,72 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 _: 1
               })
             ])
-          ], 4)) : createCommentVNode("", true),
-          _ctx.dialogEnable && _ctx.showClose ? (openBlock(), createElementBlock("div", {
-            key: 2,
+          ], 36)) : createCommentVNode("", true),
+          _ctx.showClose ? (openBlock(), createElementBlock("div", {
+            key: 1,
             class: "ele-modal-tool",
             style: normalizeStyle(_ctx.closeBtnStyle),
-            onClick: close
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.updateModelValue(false)),
+            onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {
+            }, ["stop"]))
           }, [
             renderSlot(_ctx.$slots, "closeIcon", {}, () => [
               createVNode(_component_ElIcon, null, {
                 default: withCtx(() => [
-                  createVNode(_component_CloseOutlined)
+                  _ctx.closeIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon), { key: 0 })) : (openBlock(), createBlock(_component_CloseOutlined, { key: 1 }))
                 ]),
                 _: 1
               })
             ])
-          ], 12, _hoisted_1)) : createCommentVNode("", true)
-        ], 4)
+          ], 36)) : createCommentVNode("", true)
+        ], 36),
+        _ctx.resizable ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([
+            "ele-modal-resize-icon",
+            { "is-horizontal": _ctx.resizable === "horizontal" },
+            { "is-vertical": _ctx.resizable === "vertical" }
+          ]),
+          style: normalizeStyle(_ctx.resizeIconStyle),
+          onMousedown: _cache[5] || (_cache[5] = (...args) => _ctx.handleResizeMousedown && _ctx.handleResizeMousedown(...args))
+        }, [
+          renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
+            createVNode(_component_ElIcon, null, {
+              default: withCtx(() => [
+                createVNode(_component_ResizeOutlined)
+              ]),
+              _: 1
+            })
+          ])
+        ], 38)) : createCommentVNode("", true)
       ]),
       default: withCtx(() => [
-        _ctx.dialogEnable ? (openBlock(), createBlock(_component_ReceiverView, {
-          key: 0,
+        createVNode(_component_ReceiverView, {
           wrapPosition: false,
-          class: "ele-modal-body",
+          class: normalizeClass(["ele-modal-body", { "is-form": _ctx.form }]),
           style: normalizeStyle(_ctx.bodyStyle)
         }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
           _: 3
-        }, 8, ["style"])) : createCommentVNode("", true)
+        }, 8, ["class", "style"])
       ]),
       _: 2
     }, [
       _ctx.$slots.footer ? {
         name: "footer",
         fn: withCtx(() => [
-          _ctx.dialogEnable ? (openBlock(), createElementBlock("div", {
-            key: 0,
+          createElementVNode("div", {
             class: "ele-modal-footer",
             style: normalizeStyle(_ctx.footerStyle)
           }, [
             renderSlot(_ctx.$slots, "footer")
-          ], 4)) : 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]]);

package/es/ele-modal/props.d.ts

@@ -53,6 +53,8 @@ export declare const modalProps: {
     closeBtnStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 自定义全屏按钮样式 */
     fullscreenBtnStyle: PropType<Partial<import('vue').CSSProperties>>;
+    /** 拉伸图标样式 */
+    resizeIconStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 是否开启响应式 */
     responsive: {
         type: BooleanConstructor;
@@ -99,7 +101,7 @@ export declare const modalProps: {
     center: BooleanConstructor;
     alignCenter: BooleanConstructor;
     closeIcon: {
-        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>))[], unknown, unknown>>;
+        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;

package/es/ele-modal/props.js

@@ -48,6 +48,8 @@ const modalProps = {
   closeBtnStyle: Object,
   /** 自定义全屏按钮样式 */
   fullscreenBtnStyle: Object,
+  /** 拉伸图标样式 */
+  resizeIconStyle: Object,
   /** 是否开启响应式 */
   responsive: {
     type: Boolean,