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

package/lib/ele-menus/props.d.ts

@@ -1,6 +1,6 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import { menuProps } from 'element-plus';
-import { MenuItem, MenuMode, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps, TextEllipsisTooltip } from './types';
+import { MenuItem, MenuMode, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps, TextEllipsisTooltip, MenuItemClickType } from './types';
 
 /**
  * 属性
@@ -142,7 +142,7 @@ export declare const menuPropKeys: MenuPropKeys;
  */
 export declare const menusEmits: {
     /** 子菜单项点击事件 */
-    itemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    itemClick: (_item: MenuItem, _e: MouseEvent, _type?: MenuItemClickType) => boolean;
     /** 子菜单项鼠标进入事件 */
     itemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
     /** 子菜单项鼠标离开事件 */

package/lib/ele-menus/types.d.ts

@@ -61,10 +61,19 @@ export type PopupMenuTheme = 'auto' | MenuTheme;
  */
 export type PopupColorful = 'auto' | boolean;
 
+/**
+ * 菜单项点击事件的菜单项类型
+ */
+export type MenuItemClickType = 'parent' | 'group' | undefined;
+
 /**
  * 子菜单项点击事件
  */
-export type MenuItemEvent = (item: MenuItem, e: MouseEvent) => void;
+export type MenuItemEvent = (
+  item: MenuItem,
+  e: MouseEvent,
+  type?: MenuItemClickType
+) => void;
 
 /**
  * 省略菜单的属性

package/lib/ele-menus/util.cjs

@@ -29,18 +29,17 @@ function getMenuItems(menus, index, horizontal) {
     return { ...d, group: false };
   });
   if (index == null || index < 0 || index >= data.length) {
-    return { items: data, activeIndex: `/item${index}` };
+    return { items: data, activeIndex: `/${index}item` };
   }
   const items = index === 0 ? [] : data.slice(0, index);
   const moreItems = index === 0 ? data : data.slice(index);
   moreItems.forEach((d) => {
-    var _a;
     items.push({
       ...d,
       key: `overflow-${d.key || d.index || d.path}`,
       index: `overflow-${d.index || d.path}`,
       overflow: true,
-      children: ((_a = d.children) == null ? void 0 : _a.length) ? [null] : void 0
+      children: d.children?.length ? [null] : void 0
     });
   });
   return { items, moreItems };

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 (props$1.responsive ?? isResponsive.value ?? true) {
+      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 {
-      handleHeaderMousedown,
-      handleHeaderTouchstart,
-      handleResizeMousedown,
-      handleResizeTouchstart,
-      bindAutoTopEvent,
-      unbindAutoTopEvent,
-      topModal,
-      setInitPosition,
-      resetModalStyle
-    } = util$1.useModalEvent(dialogRef, props$1, isFullscreen);
+      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 {
+      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,16 +478,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ], 38)) : vue.createCommentVNode("", true)
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(ReceiverView), {
-              wrapPosition: false,
-              class: vue.normalizeClass(["ele-modal-body", { "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, ["class", "style"])
+            }, 8, ["class", "style"]),
+            vue.createVNode(LoadingSpinner, vue.mergeProps(_ctx.loadingProps || {}, {
+              loading: _ctx.compLoading || _ctx.loading,
+              plain: true
+            }), null, 16, ["loading"])
           ]),
           _: 2
         }, [
@@ -309,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"]);
     };
   }