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

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

@@ -1,6 +1,7 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { PropType, ExtractPropTypes, EmitsToProps } from 'vue';
 import { dialogProps } from 'element-plus';
 import { StyleValue } from '../ele-app/types';
+import { EleLoadingProps } from '../ele-app/plus';
 import { Resizable, MoveOut, Position } from './types';
 
 /**
@@ -15,8 +16,10 @@ export declare const modalProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 弹窗主体高度 */
-    bodyHeight: (NumberConstructor | StringConstructor)[];
+    /** 弹窗高度 */
+    height: (NumberConstructor | StringConstructor)[];
+    /** 弹窗最大高度 */
+    maxHeight: (NumberConstructor | StringConstructor)[];
     /** 是否可以拖出边界 */
     moveOut: PropType<MoveOut>;
     /** 是否可以拉伸 */
@@ -60,11 +63,23 @@ export declare const modalProps: {
     resizeIconStyle: PropType<StyleValue>;
     /** 主体类名 */
     modalBodyClass: StringConstructor;
+    /** 是否是失活状态 */
+    isDeactivated: BooleanConstructor;
+    /** 异步内容组件时加载状态 */
+    compLoading: BooleanConstructor;
+    /** 加载状态 */
+    loading: BooleanConstructor;
+    /** 加载组件属性 */
+    loadingProps: PropType<EleLoadingProps>;
     /** 是否开启响应式 */
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
+    /** 内部表格弹性布局 */
+    flexTable: PropType<boolean | "auto">;
+    /** 是否是在内容区添加自定义底栏 */
+    customFooter: BooleanConstructor;
     /** 是否是表单弹窗 */
     form: BooleanConstructor;
     appendTo: {
@@ -114,6 +129,7 @@ export declare const modalProps: {
     } & {
         readonly default: true;
     };
+    modalPenetrable: BooleanConstructor;
     openDelay: {
         readonly type: PropType<number>;
         readonly required: false;
@@ -162,15 +178,37 @@ export declare const modalProps: {
     } & {
         readonly default: "2";
     };
+    transition: {
+        readonly type: 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: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     closeIcon: {
         readonly type: PropType<string | import('vue').Component>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    overflow: BooleanConstructor;
+    overflow: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     fullscreen: BooleanConstructor;
     showClose: {
         readonly type: PropType<boolean>;
@@ -212,8 +250,10 @@ export declare const modalEmits: {
     openAutoFocus: () => boolean;
     closeAutoFocus: () => boolean;
 };
-export type DialogPropKeys = Array<keyof typeof dialogProps>;
+export type ModalEmitsProps = EmitsToProps<typeof modalEmits>;
+export type ModalPropsAndEmits = ModalProps & ModalEmitsProps;
 /**
  * 弹窗组件属性名
  */
+export type DialogPropKeys = (keyof typeof dialogProps)[];
 export declare const dialogPropKeys: DialogPropKeys;

package/es/ele-modal/props.js

@@ -9,8 +9,10 @@ const modalProps = {
     type: Boolean,
     default: true
   },
-  /** 弹窗主体高度 */
-  bodyHeight: [String, Number],
+  /** 弹窗高度 */
+  height: [String, Number],
+  /** 弹窗最大高度 */
+  maxHeight: [String, Number],
   /** 是否可以拖出边界 */
   moveOut: [Boolean, Array],
   /** 是否可以拉伸 */
@@ -54,11 +56,23 @@ const modalProps = {
   resizeIconStyle: Object,
   /** 主体类名 */
   modalBodyClass: String,
+  /** 是否是失活状态 */
+  isDeactivated: Boolean,
+  /** 异步内容组件时加载状态 */
+  compLoading: Boolean,
+  /** 加载状态 */
+  loading: Boolean,
+  /** 加载组件属性 */
+  loadingProps: Object,
   /** 是否开启响应式 */
   responsive: {
     type: Boolean,
     default: null
   },
+  /** 内部表格弹性布局 */
+  flexTable: [Boolean, String],
+  /** 是否是在内容区添加自定义底栏 */
+  customFooter: Boolean,
   /** 是否是表单弹窗 */
   form: Boolean
 };
@@ -67,7 +81,9 @@ const modalEmits = {
   /** 更新全屏状态 */
   "update:fullscreen": (_fullscreen) => true
 };
-const dialogPropKeys = Object.keys(dialogProps);
+const dialogPropKeys = Object.keys(dialogProps).filter(
+  (k) => !["top", "closeIcon"].includes(k)
+);
 export {
   dialogPropKeys,
   modalEmits,

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

@@ -1,3 +1,4 @@
 import "element-plus/es/components/dialog/style/index";
 import "element-plus/es/components/icon/style/index";
+import "../../ele-loading/style/index";
 import "./index.scss";

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;