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

package/es/ele-modal/style/index.scss

@@ -1,5 +1,6 @@
 @use '../../style/themes/default.scss' as *;
 @use '../../style/util.scss' as *;
+@use '../../ele-pro-table/style/css-var.scss' as *;
 @use './css-var.scss' as *;
 
 @include set-modal-var($ele);
@@ -17,12 +18,18 @@
     align-items: center;
 
     & > .el-dialog {
-      padding: 0;
       flex-shrink: 0;
-      position: relative;
+      padding: 0;
+      margin: auto;
       background: eleVar('modal', 'bg');
       border-radius: eleVar('modal', 'radius');
-      margin-bottom: eleVar('modal', 'mobile-space');
+      position: relative;
+      top: auto;
+      left: auto;
+      right: auto;
+      bottom: auto;
+      display: flex;
+      flex-direction: column;
 
       & > .el-dialog__header,
       & > .el-dialog__footer {
@@ -33,6 +40,7 @@
       }
 
       & > .el-dialog__body {
+        flex: auto;
         padding: 0;
         color: inherit;
         font-size: inherit;
@@ -64,11 +72,18 @@
   box-sizing: border-box;
 }
 
-.is-show-header-border > .el-dialog__header > .ele-modal-header {
+/* 强制显示头部边框 */
+.ele-modal-show-header-border > .el-dialog__header > .ele-modal-header {
   padding: eleVar('modal', 'bordered-header-padding');
   border-bottom: eleVar('modal', 'bordered-header-border');
 }
 
+/* 强制显示底部边框 */
+.ele-modal-show-footer-border > .el-dialog__footer > .ele-modal-footer {
+  padding: eleVar('modal', 'bordered-footer-padding');
+  border-top: eleVar('modal', 'bordered-footer-border');
+}
+
 /* 图标按钮 */
 .ele-modal-tool {
   flex-shrink: 0;
@@ -100,15 +115,13 @@
   padding: eleVar('modal', 'body-padding');
   box-sizing: border-box;
 
-  &.is-fluid-body {
-    max-height: 100%;
-    min-height: 100%;
-    overflow: auto;
-  }
-
   &.is-form {
     padding: eleVar('modal', 'form-body-padding');
   }
+
+  & + .ele-loading-spinner {
+    border-radius: eleVar('modal', 'radius');
+  }
 }
 
 /* footer */
@@ -123,10 +136,6 @@
   margin: 0;
 }
 
-.ele-modal-center > .el-overlay-dialog > .el-dialog {
-  margin: auto;
-}
-
 .ele-modal-bottom > .el-overlay-dialog > .el-dialog {
   margin: auto auto 0 auto;
 }
@@ -182,15 +191,10 @@
   }
 }
 
-.ele-modal-resizable > .el-overlay-dialog > .el-dialog,
-.ele-modal-fullscreen > .el-overlay-dialog > .el-dialog {
-  display: flex;
-  flex-direction: column;
-
-  & > .el-dialog__body {
-    flex: auto;
-    overflow: auto;
-  }
+.ele-modal-fluid > .el-overlay-dialog > .el-dialog > .el-dialog__body,
+.ele-modal-resizable > .el-overlay-dialog > .el-dialog > .el-dialog__body,
+.ele-modal-fullscreen > .el-overlay-dialog > .el-dialog > .el-dialog__body {
+  overflow: eleVar('modal', 'default-overflow');
 }
 
 /* 全屏 */
@@ -250,6 +254,11 @@
   display: none !important;
 }
 
+/* 最大高度适应屏幕 */
+.ele-modal-fluid > .el-overlay-dialog > .el-dialog {
+  max-height: calc(100% - #{eleVar('modal', 'mobile-space')} * 2);
+}
+
 /* 最大宽度适应屏幕 */
 .ele-modal-responsive > .el-overlay-dialog > .el-dialog {
   max-width: calc(100% - #{eleVar('modal', 'mobile-space')} * 2);
@@ -260,3 +269,92 @@
   pointer-events: auto;
   position: absolute !important;
 }
+
+/* 内容异步组件加载状态 */
+.ele-modal-comp-loading > .el-overlay-dialog > .el-dialog > .el-dialog__body {
+  min-height: 128px;
+
+  & > .ele-loading {
+    background: none;
+    pointer-events: none;
+  }
+}
+
+/* 内部表格弹性布局 */
+.ele-modal-flex-table > .el-overlay-dialog > .el-dialog {
+  & > .el-dialog__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    & > .ele-modal-body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+
+      @include flex-pro-table();
+    }
+  }
+}
+
+.ele-modal-flex-auto-table > .el-overlay-dialog > .el-dialog {
+  & > .el-dialog__body {
+    flex: auto;
+    display: flex;
+    flex-direction: column;
+
+    & > .ele-modal-body {
+      flex: auto;
+      display: flex;
+      flex-direction: column;
+
+      @include flex-auto-pro-table();
+    }
+  }
+}
+
+/* 在内容区添加自定义底栏 */
+.ele-modal-custom-footer > .el-overlay-dialog > .el-dialog {
+  & > .el-dialog__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    & > .ele-modal-body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding: 0;
+
+      & > .ele-modal-custom-footer,
+      & > .ele-buttons.is-modal-footer {
+        flex-shrink: 0;
+        padding: eleVar('modal', 'footer-padding');
+        border-top: eleVar('modal', 'footer-border');
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+
+      & > .ele-modal-custom-body,
+      & > .el-form {
+        flex: 1;
+        box-sizing: border-box;
+        padding: eleVar('modal', 'body-padding');
+        overflow: auto;
+      }
+
+      &.is-form {
+        & > .ele-modal-custom-body,
+        & > .el-form {
+          padding: eleVar('modal', 'form-body-padding');
+        }
+      }
+    }
+  }
+}

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

@@ -1,10 +1,14 @@
-import { Ref } from 'vue';
-import { ElDialogInstance } from '../ele-app/el';
-import { ModalProps } from './props';
+import { MoveOut, MoveOutValue, Position } from './types';
 
 export declare const containerClass = "ele-modal-container";
 export declare const wrapperClass = "ele-modal";
 export declare const closedClass = "ele-modal-closed";
+/**
+ * 是否可拉出指定方向
+ * @param moveOut 拉出值
+ * @param direction 方向
+ */
+export declare function canMoveOut(moveOut?: MoveOut, direction?: MoveOutValue): boolean;
 /**
  * 获取弹窗容器
  * @param inner 是否限制在主体内部
@@ -14,39 +18,13 @@ export declare const closedClass = "ele-modal-closed";
  */
 export declare function getModalContainer(inner?: boolean, multiple?: boolean, appendTo?: string | HTMLElement, modalsEl?: HTMLElement | null): HTMLElement | string;
 /**
- * 弹窗支持移动
- * @param dialogRef 弹窗实例
- * @param props 属性
- * @param isFullscreen 全屏状态
- */
-export declare function useModalMove(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
-    handleHeaderMousedown: (e: MouseEvent) => void;
-    handleHeaderTouchstart: (e: TouchEvent) => void;
-};
-/**
- * 弹窗支持拉伸
- * @param dialogRef 弹窗实例
- * @param props 属性
- * @param isFullscreen 全屏状态
+ * 获取位置对应的外间距值
+ * @param position 位置
  */
-export declare function useModalResize(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
-    handleResizeMousedown: (e: MouseEvent) => void;
-    handleResizeTouchstart: (e: TouchEvent) => void;
-};
+export declare function getPositionMargin(position?: Position): string | undefined;
 /**
- * 弹窗事件处理
- * @param dialogRef 弹窗实例
- * @param props 属性
- * @param isFullscreen 全屏状态
+ * 获取弹窗最大层级
+ * @param modalEl 弹窗节点
+ * @param defaultZIndex 默认层级
  */
-export declare function useModalEvent(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
-    handleHeaderMousedown: (e: MouseEvent) => void;
-    handleHeaderTouchstart: (e: TouchEvent) => void;
-    handleResizeMousedown: (e: MouseEvent) => void;
-    handleResizeTouchstart: (e: TouchEvent) => void;
-    bindAutoTopEvent: () => void;
-    unbindAutoTopEvent: () => void;
-    topModal: (el?: HTMLElement) => void;
-    setInitPosition: () => void;
-    resetModalStyle: () => void;
-};
+export declare function getMaxZIndex(modalEl?: HTMLElement, defaultZIndex?: number): number | undefined;

package/es/ele-modal/util.js

@@ -1,24 +1,7 @@
-import { unref } from "vue";
 import { queryChild, getCurrentStyle } from "../utils/common";
-import { useMoveEvent } from "../utils/hook";
 const containerClass = "ele-modal-container";
 const wrapperClass = "ele-modal";
 const closedClass = "ele-modal-closed";
-const fixTop = 0.65;
-const fixLeft = 0.65;
-function getModalEl(dialogRef) {
-  var _a, _b;
-  const el = (_b = unref((_a = unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
-  return el;
-}
-function initModalStyle(modalEl) {
-  modalEl.style.top = modalEl.offsetTop + "px";
-  modalEl.style.left = modalEl.offsetLeft + "px";
-  modalEl.style.right = "auto";
-  modalEl.style.bottom = "auto";
-  modalEl.style.position = "absolute";
-  modalEl.style.margin = "0";
-}
 function canMoveOut(moveOut, direction) {
   if (direction && moveOut != null && Array.isArray(moveOut)) {
     return moveOut.includes(direction);
@@ -42,260 +25,44 @@ function getModalContainer(inner, multiple, appendTo, modalsEl) {
   }
   return appendTo || "body";
 }
-function useModalMove(dialogRef, props, isFullscreen) {
-  let modalEl = null;
-  let wrapEl = null;
-  let downOL = null;
-  let downOT = null;
-  const { handleMousedown, handleTouchstart } = useMoveEvent({
-    start: () => {
-      modalEl = getModalEl(dialogRef);
-      wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
-      if (!modalEl || !wrapEl || !props.draggable || isFullscreen.value) {
-        return;
-      }
-      modalEl.style.userSelect = "none";
-      initModalStyle(modalEl);
-      downOL = modalEl.offsetLeft;
-      downOT = modalEl.offsetTop;
-    },
-    move: ({ distanceX, distanceY, e }) => {
-      if (!modalEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
-        return;
-      }
-      e.preventDefault();
-      let positionLeft = distanceX + downOL;
-      let positionTop = distanceY + downOT;
-      const limitL = wrapEl.clientWidth - modalEl.clientWidth - fixLeft;
-      const limitT = wrapEl.clientHeight - modalEl.clientHeight - 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 = wrapEl.clientWidth - 48;
-        if (positionLeft > minLimitL) {
-          positionLeft = minLimitL;
-        }
-        const minLimitT = wrapEl.clientHeight - 48;
-        if (props.multiple && positionTop > minLimitT) {
-          positionTop = minLimitT;
-        }
-      }
-      modalEl.style.left = `${Math.floor(positionLeft)}px`;
-      modalEl.style.top = `${Math.floor(positionTop)}px`;
-    },
-    end: () => {
-      if (modalEl) {
-        modalEl.style.userSelect = "";
-      }
-      downOL = null;
-      downOT = null;
-      modalEl = null;
-      wrapEl = null;
-    },
-    touchmoveOptions: { passive: false }
-  });
-  return {
-    handleHeaderMousedown: handleMousedown,
-    handleHeaderTouchstart: handleTouchstart
-  };
-}
-function useModalResize(dialogRef, props, isFullscreen) {
-  let modalEl = null;
-  let wrapEl = null;
-  let downW = null;
-  let downH = null;
-  const { handleMousedown, handleTouchstart } = useMoveEvent({
-    start: () => {
-      modalEl = getModalEl(dialogRef);
-      wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
-      if (!modalEl || !wrapEl || !props.resizable || isFullscreen.value) {
-        return;
-      }
-      modalEl.style.userSelect = "none";
-      initModalStyle(modalEl);
-      downW = modalEl.clientWidth;
-      downH = modalEl.clientHeight;
-    },
-    move: ({ distanceX, distanceY, e }) => {
-      if (!modalEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
-        return;
-      }
-      e.preventDefault();
-      if (props.resizable !== "vertical") {
-        const w = distanceX + downW;
-        const maxW = wrapEl.clientWidth - modalEl.offsetLeft - fixLeft;
-        const nw = (w < props.minWidth ? props.minWidth : !canMoveOut(props.moveOut, "right") && w > maxW ? maxW : w) + "px";
-        modalEl.style.width = nw;
-        modalEl.style.maxWidth = nw;
-        modalEl.style.minWidth = nw;
-      }
-      if (props.resizable !== "horizontal") {
-        const h = distanceY + downH;
-        const maxH = wrapEl.clientHeight - modalEl.offsetTop - fixTop;
-        const nh = (h < props.minHeight ? props.minHeight : !canMoveOut(props.moveOut, "bottom") && h > maxH ? maxH : h) + "px";
-        modalEl.style.height = nh;
-        modalEl.style.maxHeight = nh;
-        modalEl.style.minHeight = nh;
-      }
-    },
-    end: () => {
-      if (modalEl) {
-        modalEl.style.userSelect = "";
-      }
-      downW = null;
-      downH = null;
-      modalEl = null;
-      wrapEl = null;
-    },
-    touchmoveOptions: { passive: false }
-  });
-  return {
-    handleResizeMousedown: handleMousedown,
-    handleResizeTouchstart: handleTouchstart
-  };
+function getPositionMargin(position) {
+  if (position == null || typeof position !== "object" || position.top == null && position.right == null && position.bottom == null && position.left == null) {
+    return;
+  }
+  return [position.top, position.right, position.bottom, position.left].map((p) => typeof p === "number" ? `${p}px` : p || "auto").join(" ");
 }
-function useModalEvent(dialogRef, props, isFullscreen) {
-  const { handleHeaderMousedown, handleHeaderTouchstart } = useModalMove(
-    dialogRef,
-    props,
-    isFullscreen
-  );
-  const { handleResizeMousedown, handleResizeTouchstart } = useModalResize(
-    dialogRef,
-    props,
-    isFullscreen
-  );
-  let isInitPosition = true;
-  const getZIndex = () => {
-    return props.zIndex ?? 2e3;
-  };
-  const topModal = (el) => {
-    var _a;
-    const modalEl = el ?? getModalEl(dialogRef);
-    const overlayEl = (_a = modalEl == null ? void 0 : modalEl.parentElement) == null ? void 0 : _a.parentElement;
-    if (!overlayEl) {
-      return;
-    }
-    const currentIndex = getCurrentStyle(overlayEl).zIndex;
-    const containerEl = overlayEl.parentElement;
-    const cls = `.${wrapperClass}:not(.${closedClass})`;
-    const modals = containerEl ? containerEl.querySelectorAll(cls) : void 0;
-    let maxIndex = 0;
-    (modals ? Array.from(modals) : []).forEach((modalEl2) => {
-      const zIndex = getCurrentStyle(modalEl2).zIndex;
-      if (zIndex != null) {
-        const index = Number(zIndex);
-        if (index >= maxIndex && (!overlayEl || modalEl2 !== overlayEl)) {
-          maxIndex = index + 1;
-        }
-      }
-    });
-    if (maxIndex > Number(currentIndex || getZIndex() || 0)) {
-      overlayEl.style.zIndex = String(maxIndex);
-    }
-  };
-  const mousedownListener = (event) => {
-    if (props.multiple) {
-      topModal(event.currentTarget);
-    }
-  };
-  const bindAutoTopEvent = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
-      modalEl.addEventListener("mousedown", mousedownListener);
-      modalEl.addEventListener("touchstart", mousedownListener);
-    }
-  };
-  const unbindAutoTopEvent = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
-      modalEl.removeEventListener("mousedown", mousedownListener);
-      modalEl.removeEventListener("touchstart", mousedownListener);
-    }
-  };
-  const getPositionMargin = (position) => {
-    if (position == null || typeof position !== "object" || position.top == null && position.right == null && position.bottom == null && position.left == null) {
-      return;
-    }
-    return [position.top, position.right, position.bottom, position.left].map((p) => typeof p === "number" ? `${p}px` : p || "auto").join(" ");
-  };
-  const getPosition = () => {
-    if (props.alignCenter) {
-      return "center";
-    }
-    if (props.top != null && props.top !== "") {
-      return { top: props.top };
-    }
-    return props.position;
-  };
-  const setInitPosition = () => {
-    if (isInitPosition) {
-      isInitPosition = false;
-      const modalEl = getModalEl(dialogRef);
-      const margin = getPositionMargin(getPosition());
-      if (modalEl && margin != null) {
-        modalEl.style.margin = margin;
+function getMaxZIndex(modalEl, defaultZIndex) {
+  if (!modalEl) {
+    return;
+  }
+  const overlayEl = modalEl.parentElement?.parentElement;
+  if (!overlayEl) {
+    return;
+  }
+  const currentIndex = getCurrentStyle(overlayEl).zIndex;
+  const containerEl = overlayEl.parentElement;
+  const cls = `.${wrapperClass}:not(.${closedClass})`;
+  const modals = containerEl ? containerEl.querySelectorAll(cls) : void 0;
+  let maxIndex = 0;
+  (modals ? Array.from(modals) : []).forEach((modalEl2) => {
+    const zIndex = getCurrentStyle(modalEl2).zIndex;
+    if (zIndex != null) {
+      const index = Number(zIndex);
+      if (index >= maxIndex && (!overlayEl || modalEl2 !== overlayEl)) {
+        maxIndex = index + 1;
       }
     }
-  };
-  const resetModalStyle = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
-      const w = props.width;
-      modalEl.style.margin = getPositionMargin(getPosition()) || "";
-      modalEl.style.position = "";
-      modalEl.style.top = "";
-      modalEl.style.left = "";
-      modalEl.style.right = "";
-      modalEl.style.bottom = "";
-      modalEl.style.height = "";
-      modalEl.style.maxHeight = "";
-      modalEl.style.minHeight = "";
-      modalEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
-      modalEl.style.maxWidth = "";
-      modalEl.style.minWidth = "";
-    }
-  };
-  return {
-    handleHeaderMousedown,
-    handleHeaderTouchstart,
-    handleResizeMousedown,
-    handleResizeTouchstart,
-    bindAutoTopEvent,
-    unbindAutoTopEvent,
-    topModal,
-    setInitPosition,
-    resetModalStyle
-  };
+  });
+  if (maxIndex > Number(currentIndex || (defaultZIndex ?? 2e3) || 0)) {
+    return maxIndex;
+  }
 }
 export {
+  canMoveOut,
   closedClass,
   containerClass,
+  getMaxZIndex,
   getModalContainer,
-  useModalEvent,
-  useModalMove,
-  useModalResize,
+  getPositionMargin,
   wrapperClass
 };

package/es/ele-modal-render/components/item-render.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { ModalItem, ModalItemId } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    item: {
+        type: PropType<ModalItem>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    removeItem: (_modalId?: ModalItemId | undefined) => void;
+    updateItemVisible: (_modalId?: ModalItemId | undefined, _visible?: boolean | undefined) => void;
+    updateItemProps: (_modalId?: ModalItemId | undefined, _opt?: Record<string, any> | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    item: {
+        type: PropType<ModalItem>;
+        required: true;
+    };
+}>> & Readonly<{
+    onRemoveItem?: ((_modalId?: ModalItemId | undefined) => any) | undefined;
+    onUpdateItemVisible?: ((_modalId?: ModalItemId | undefined, _visible?: boolean | undefined) => any) | undefined;
+    onUpdateItemProps?: ((_modalId?: ModalItemId | undefined, _opt?: Record<string, any> | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};