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

package/lib/ele-modal/index.d.ts

@@ -23,6 +23,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
     position: import('vue').PropType<import('./types').Position>;
@@ -49,10 +51,16 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fullscreenBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     resizeIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     modalBodyClass: StringConstructor;
+    isDeactivated: BooleanConstructor;
+    compLoading: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingProps: import('vue').PropType<import('../ele-app/plus').EleLoadingProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
+    flexTable: import('vue').PropType<boolean | "auto">;
+    customFooter: BooleanConstructor;
     form: BooleanConstructor;
     appendTo: {
         readonly type: import('vue').PropType<string | HTMLElement>;
@@ -101,6 +109,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     } & {
         readonly default: true;
     };
+    modalPenetrable: BooleanConstructor;
     openDelay: {
         readonly type: import('vue').PropType<number>;
         readonly required: false;
@@ -149,15 +158,37 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     } & {
         readonly default: "2";
     };
+    transition: {
+        readonly type: import('vue').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: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     closeIcon: {
         readonly type: import('vue').PropType<string | import('vue').Component>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    overflow: BooleanConstructor;
+    overflow: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     fullscreen: BooleanConstructor;
     showClose: {
         readonly type: import('vue').PropType<boolean>;
@@ -191,9 +222,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     close: () => void;
     open: () => void;
     "update:modelValue": (value: boolean) => void;
+    closed: () => void;
     "update:fullscreen": (_fullscreen: boolean) => void;
     opened: () => void;
-    closed: () => void;
     openAutoFocus: () => void;
     closeAutoFocus: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -205,6 +236,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
     position: import('vue').PropType<import('./types').Position>;
@@ -231,10 +264,16 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fullscreenBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     resizeIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     modalBodyClass: StringConstructor;
+    isDeactivated: BooleanConstructor;
+    compLoading: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingProps: import('vue').PropType<import('../ele-app/plus').EleLoadingProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
+    flexTable: import('vue').PropType<boolean | "auto">;
+    customFooter: BooleanConstructor;
     form: BooleanConstructor;
     appendTo: {
         readonly type: import('vue').PropType<string | HTMLElement>;
@@ -283,6 +322,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     } & {
         readonly default: true;
     };
+    modalPenetrable: BooleanConstructor;
     openDelay: {
         readonly type: import('vue').PropType<number>;
         readonly required: false;
@@ -331,15 +371,37 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     } & {
         readonly default: "2";
     };
+    transition: {
+        readonly type: import('vue').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: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     closeIcon: {
         readonly type: import('vue').PropType<string | import('vue').Component>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    overflow: BooleanConstructor;
+    overflow: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
     fullscreen: BooleanConstructor;
     showClose: {
         readonly type: import('vue').PropType<boolean>;
@@ -369,9 +431,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClosed?: (() => any) | undefined;
     "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
-    onClosed?: (() => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
     onCloseAutoFocus?: (() => any) | undefined;
 }>, {
@@ -380,16 +442,19 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     center: boolean;
     modelValue: boolean;
     appendTo: string | HTMLElement;
+    loading: boolean;
     appendToBody: boolean;
     destroyOnClose: boolean;
     closeOnClickModal: boolean;
     closeOnPressEscape: boolean;
     lockScroll: boolean;
     modal: boolean;
+    modalPenetrable: boolean;
     openDelay: number;
     closeDelay: number;
     trapFocus: boolean;
     headerAriaLevel: string;
+    transition: import('element-plus').DialogTransition;
     alignCenter: boolean;
     draggable: boolean;
     overflow: boolean;
@@ -399,10 +464,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     multiple: boolean;
     minWidth: number;
     minHeight: number;
+    responsive: boolean;
+    inner: boolean;
     resetOnClose: boolean;
     maxable: boolean;
-    inner: boolean;
-    responsive: boolean;
+    isDeactivated: boolean;
+    compLoading: boolean;
+    customFooter: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/lib/ele-modal/props.cjs

@@ -11,6 +11,10 @@ const modalProps = {
     type: Boolean,
     default: true
   },
+  /** 弹窗高度 */
+  height: [String, Number],
+  /** 弹窗最大高度 */
+  maxHeight: [String, Number],
   /** 是否可以拖出边界 */
   moveOut: [Boolean, Array],
   /** 是否可以拉伸 */
@@ -54,11 +58,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 +83,9 @@ const modalEmits = {
   /** 更新全屏状态 */
   "update:fullscreen": (_fullscreen) => true
 };
-const dialogPropKeys = Object.keys(elementPlus.dialogProps);
+const dialogPropKeys = Object.keys(elementPlus.dialogProps).filter(
+  (k) => !["top", "closeIcon"].includes(k)
+);
 exports.dialogPropKeys = dialogPropKeys;
 exports.modalEmits = modalEmits;
 exports.modalProps = modalProps;

package/lib/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,6 +16,10 @@ export declare const modalProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 弹窗高度 */
+    height: (StringConstructor | NumberConstructor)[];
+    /** 弹窗最大高度 */
+    maxHeight: (StringConstructor | NumberConstructor)[];
     /** 是否可以拖出边界 */
     moveOut: PropType<MoveOut>;
     /** 是否可以拉伸 */
@@ -58,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: {
@@ -112,6 +129,7 @@ export declare const modalProps: {
     } & {
         readonly default: true;
     };
+    modalPenetrable: BooleanConstructor;
     openDelay: {
         readonly type: PropType<number>;
         readonly required: false;
@@ -160,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>;
@@ -210,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/lib/ele-modal/style/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
 require("element-plus/es/components/dialog/style/index");
 require("element-plus/es/components/icon/style/index");
+require("../../ele-loading/style/index");
 require("./index.scss");

package/lib/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,12 +40,18 @@
       }
 
       & > .el-dialog__body {
+        flex: auto;
         padding: 0;
         color: inherit;
         font-size: inherit;
       }
     }
   }
+
+  &.dialog-fade-enter-active .el-overlay-dialog *,
+  &.dialog-fade-leave-active .el-overlay-dialog * {
+    pointer-events: none !important;
+  }
 }
 
 /* header */
@@ -59,6 +72,18 @@
   box-sizing: border-box;
 }
 
+/* 强制显示头部边框 */
+.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;
@@ -93,6 +118,10 @@
   &.is-form {
     padding: eleVar('modal', 'form-body-padding');
   }
+
+  & + .ele-loading-spinner {
+    border-radius: eleVar('modal', 'radius');
+  }
 }
 
 /* footer */
@@ -107,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;
 }
@@ -166,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');
 }
 
 /* 全屏 */
@@ -234,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);
@@ -244,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');
+        }
+      }
+    }
+  }
+}