ele-admin-plus 1.1.9-beta.8 → 1.1.9

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

@@ -22,6 +22,7 @@
       position: relative;
       background: eleVar('modal', 'bg');
       border-radius: eleVar('modal', 'radius');
+      margin-bottom: eleVar('modal', 'mobile-space');
 
       & > .el-dialog__header,
       & > .el-dialog__footer {
@@ -38,119 +39,104 @@
       }
     }
   }
+}
 
-  /* header */
-  .ele-modal-header {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    padding: eleVar('modal', 'header-padding');
-    border-bottom: eleVar('modal', 'header-border');
-  }
+/* header */
+.ele-modal-header {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: eleVar('modal', 'header-padding');
+  border-bottom: eleVar('modal', 'header-border');
+}
 
-  .ele-modal-title {
-    flex: 1;
-    color: eleVar('modal', 'header-color');
-    font-size: eleVar('modal', 'header-font-size');
-    line-height: eleVar('modal', 'header-line-height');
-    font-weight: eleVar('modal', 'header-font-weight');
-    box-sizing: border-box;
-  }
+.ele-modal-title {
+  flex: 1;
+  color: eleVar('modal', 'header-color');
+  font-size: eleVar('modal', 'header-font-size');
+  line-height: eleVar('modal', 'header-line-height');
+  font-weight: eleVar('modal', 'header-font-weight');
+  box-sizing: border-box;
+}
 
-  /* 图标按钮 */
-  .ele-modal-tool {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: eleVar('modal', 'icon-size');
-    height: eleVar('modal', 'icon-size');
-    line-height: eleVar('modal', 'icon-size');
-    color: eleVar('modal', 'icon-color');
-    font-size: eleVar('modal', 'icon-font-size');
-    border-radius: eleVar('modal', 'icon-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
-    box-sizing: border-box;
-    cursor: pointer;
-
-    &:hover {
-      color: eleVar('modal', 'icon-hover-color');
-      background: eleVar('modal', 'icon-hover-bg');
-    }
+/* 图标按钮 */
+.ele-modal-tool {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('modal', 'icon-size');
+  height: eleVar('modal', 'icon-size');
+  line-height: eleVar('modal', 'icon-size');
+  color: eleVar('modal', 'icon-color');
+  font-size: eleVar('modal', 'icon-font-size');
+  border-radius: eleVar('modal', 'icon-radius');
+  transition: (color $ele-transition, background-color $ele-transition);
+  box-sizing: border-box;
+  cursor: pointer;
 
-    & + .ele-modal-tool {
-      margin-left: eleVar('modal', 'icon-space');
-    }
+  &:hover {
+    color: eleVar('modal', 'icon-hover-color');
+    background: eleVar('modal', 'icon-hover-bg');
   }
 
-  /* body */
-  .ele-modal-body {
-    padding: eleVar('modal', 'body-padding');
-    box-sizing: border-box;
+  & + .ele-modal-tool {
+    margin-left: eleVar('modal', 'icon-space');
   }
+}
 
-  /* footer */
-  .ele-modal-footer {
-    padding: eleVar('modal', 'footer-padding');
-    border-top: eleVar('modal', 'footer-border');
-    box-sizing: border-box;
-  }
+/* body */
+.ele-modal-body {
+  padding: eleVar('modal', 'body-padding');
+  box-sizing: border-box;
 
-  /* 表单弹窗 */
-  &.ele-modal-form > .el-overlay-dialog > .el-dialog > .el-dialog__body {
-    & > .ele-modal-body {
-      padding: eleVar('modal', 'form-body-padding');
-    }
+  &.is-form {
+    padding: eleVar('modal', 'form-body-padding');
   }
 }
 
+/* footer */
+.ele-modal-footer {
+  padding: eleVar('modal', 'footer-padding');
+  border-top: eleVar('modal', 'footer-border');
+  box-sizing: border-box;
+}
+
 /* 默认位置 */
-.ele-modal-center > .el-overlay-dialog > .el-dialog,
-.ele-modal-top > .el-overlay-dialog > .el-dialog,
-.ele-modal-bottom > .el-overlay-dialog > .el-dialog,
-.ele-modal-left > .el-overlay-dialog > .el-dialog,
-.ele-modal-right > .el-overlay-dialog > .el-dialog,
-.ele-modal-left-top > .el-overlay-dialog > .el-dialog,
-.ele-modal-left-bottom > .el-overlay-dialog > .el-dialog,
-.ele-modal-right-top > .el-overlay-dialog > .el-dialog,
-.ele-modal-right-bottom > .el-overlay-dialog > .el-dialog {
+.ele-modal-top > .el-overlay-dialog > .el-dialog {
   margin: 0;
 }
 
-.ele-modal-center > .el-overlay-dialog {
-  justify-content: center;
+.ele-modal-center > .el-overlay-dialog > .el-dialog {
+  margin: auto;
 }
 
-.ele-modal-bottom > .el-overlay-dialog {
-  justify-content: flex-end;
+.ele-modal-bottom > .el-overlay-dialog > .el-dialog {
+  margin: auto auto 0 auto;
 }
 
-.ele-modal-left > .el-overlay-dialog {
-  justify-content: center;
-  align-items: flex-start;
+.ele-modal-left > .el-overlay-dialog > .el-dialog {
+  margin: auto auto auto 0;
 }
 
-.ele-modal-right > .el-overlay-dialog {
-  justify-content: center;
-  align-items: flex-end;
+.ele-modal-right > .el-overlay-dialog > .el-dialog {
+  margin: auto 0 auto auto;
 }
 
-.ele-modal-left-top > .el-overlay-dialog {
-  align-items: flex-start;
+.ele-modal-left-top > .el-overlay-dialog > .el-dialog {
+  margin: 0 auto 0 0;
 }
 
-.ele-modal-left-bottom > .el-overlay-dialog {
-  justify-content: flex-end;
-  align-items: flex-start;
+.ele-modal-left-bottom > .el-overlay-dialog > .el-dialog {
+  margin: auto auto 0 0;
 }
 
-.ele-modal-right-top > .el-overlay-dialog {
-  align-items: flex-end;
+.ele-modal-right-top > .el-overlay-dialog > .el-dialog {
+  margin: 0 0 0 auto;
 }
 
-.ele-modal-right-bottom > .el-overlay-dialog {
-  justify-content: flex-end;
-  align-items: flex-end;
+.ele-modal-right-bottom > .el-overlay-dialog > .el-dialog {
+  margin: auto 0 0 auto;
 }
 
 /* 支持拖拽 */
@@ -160,26 +146,24 @@
 }
 
 /* 支持拉伸 */
-.ele-modal-resizable > .el-overlay-dialog > .el-dialog::after {
-  content: '';
+.ele-modal-resize-icon {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 12px;
-  height: 12px;
+  right: 2px;
+  bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: eleVar('modal', 'icon-color');
+  font-size: 12px;
   cursor: se-resize;
-  background-image: eleVar('modal', 'resize-bg');
-  background-position: 0 0;
-  background-size: 10px 10px;
-  background-repeat: no-repeat;
-}
 
-.ele-modal-resizable-horizontal > .el-overlay-dialog > .el-dialog::after {
-  cursor: e-resize;
-}
+  &.is-horizontal {
+    cursor: e-resize;
+  }
 
-.ele-modal-resizable-vertical > .el-overlay-dialog > .el-dialog::after {
-  cursor: s-resize;
+  &.is-vertical {
+    cursor: s-resize;
+  }
 }
 
 .ele-modal-resizable > .el-overlay-dialog > .el-dialog,
@@ -201,35 +185,36 @@
   width: 100% !important;
   height: 100% !important;
   display: flex !important;
-  max-width: inherit !important;
-  min-width: inherit !important;
-  max-height: inherit !important;
-  min-height: inherit !important;
-  border: eleVar('modal', 'fullscreen-border');
-  border-radius: 0;
+  max-width: none !important;
+  min-width: auto !important;
+  max-height: none !important;
+  min-height: auto !important;
+  border-radius: 0 !important;
 
   & > .el-dialog__header {
-    cursor: default !important;
-  }
+    cursor: default;
 
-  &::after {
-    display: none;
+    & > .ele-modal-resize-icon {
+      display: none;
+    }
   }
 }
 
-/* 支持打开多个 */
-#ele-modal-container {
+/* 同时打开多个 */
+.ele-modal-container {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
   z-index: elVar('index', 'popper');
 }
 
 .ele-modal-multiple {
-  pointer-events: none;
+  pointer-events: none !important;
   position: absolute !important;
 
   & > .el-overlay-dialog {
@@ -247,70 +232,13 @@
   display: none !important;
 }
 
-/* 移动端 */
+/* 最大宽度适应屏幕 */
 .ele-modal-responsive > .el-overlay-dialog > .el-dialog {
-  max-width: calc(100vw - #{eleVar('modal', 'mobile-space')} * 2);
+  max-width: calc(100% - #{eleVar('modal', 'mobile-space')} * 2);
 }
 
-/* 限制在内部并适配布局状态 */
-.ele-modal-inner {
-  &.ele-modal {
-    top: eleVar('header', 'height', 0);
-    left: eleVar('sidebar', 'width', 0);
-  }
-
-  &:not(.dialog-fade-leave-active):not(.dialog-fade-enter-active) {
-    transition: (width $ele-transition, left $ele-transition);
-  }
-
-  &.ele-state-has-tab {
-    top: calc(#{eleVar('header', 'height')} + #{eleVar('tab', 'height')});
-  }
-
-  &.ele-state-collapse {
-    left: eleVar('sidebar', 'collapse-width');
-  }
-
-  &.ele-state-mix-sidebar {
-    $box-width: eleVar('sidebox', 'width');
-    left: calc(#{$box-width} + #{eleVar('sidebar', 'mix-width')});
-
-    &.ele-state-collapse {
-      left: $box-width;
-    }
-
-    &.ele-state-single-sidebar {
-      left: $box-width;
-    }
-  }
-
-  &.ele-state-compact {
-    $collapse-width: eleVar('sidebar', 'collapse-width');
-    left: calc(#{$collapse-width} + #{eleVar('sidebar', 'mix-width')});
-
-    &.ele-state-single-sidebar {
-      left: $collapse-width;
-    }
-
-    &.ele-state-collapse {
-      left: $collapse-width;
-    }
-  }
-
-  &.ele-state-top-layout {
-    left: 0;
-  }
-
-  &.ele-state-maximized {
-    top: eleVar('tab', 'height');
-    left: 0 !important;
-  }
-
-  &.ele-state-expanded {
-    top: 0 !important;
-  }
-
-  &.ele-state-mobile {
-    left: 0 !important;
-  }
+/* 限制在主体区域 */
+.ele-admin-modals > .ele-modal {
+  pointer-events: auto;
+  position: absolute !important;
 }

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

@@ -1,70 +1,45 @@
-import type { Resizable, PositionObject, MoveOut } from './types';
-import type { ModalProps } from './props';
+import { ModalProps } from './props';
+import { Position } from './types';
+
+export declare const containerClass = "ele-modal-container";
 export declare const wrapperClass = "ele-modal";
-export declare const containerId = "ele-modal-container";
-export declare const movableClass = "ele-modal-movable";
-export declare const resizableClass = "ele-modal-resizable";
-export declare const multipleClass = "ele-modal-multiple";
-export declare const fullscreenClass = "ele-modal-fullscreen";
-export declare const innerClass = "ele-modal-inner";
-export declare const responsiveClass = "ele-modal-responsive";
 export declare const closedClass = "ele-modal-closed";
-export declare const hideClass = "ele-modal-hide";
-export declare const collapseClass = "ele-state-collapse";
-export declare const compactClass = "ele-state-compact";
-export declare const maximizedClass = "ele-state-maximized";
-export declare const hasTabClass = "ele-state-has-tab";
-export declare const mixSidebarClass = "ele-state-mix-sidebar";
-export declare const singleSidebarClass = "ele-state-single-sidebar";
-export declare const topLayoutClass = "ele-state-top-layout";
-export declare const expandedClass = "ele-state-expanded";
-export declare const mobileClass = "ele-state-mobile";
 /**
- * 创建并获取弹窗容器
+ * 获取弹窗容器
+ * @param inner 是否限制在主体内部
  * @param multiple 是否支持同时打开多个
- * @param appendTo 自定义插入的位置
+ * @param appendTo 自定义插入的容器
+ * @param modalsEl 限制在主体内部时的容器
  */
-export declare function getModalContainer(multiple?: boolean, appendTo?: string): Element | string;
+export declare function getModalContainer(inner?: boolean, multiple?: boolean, appendTo?: string, modalsEl?: HTMLElement | null): Element | string;
 /**
  * 弹窗移动事件处理
+ * @param modalEl 弹窗节点
  * @param event 事件
  * @param props 属性
  */
-export declare function handleMovable(event: MouseEvent, props: ModalProps): void;
+export declare function handleMove(modalEl: HTMLElement, event: MouseEvent, props: ModalProps): void;
 /**
  * 弹窗拉伸事件处理
  * @param event 事件
  * @param props 属性
  */
-export declare function handleResizable(event: MouseEvent, props: ModalProps): void;
+export declare function handleResize(modalEl: HTMLElement, event: MouseEvent, props: ModalProps): void;
 /**
  * 置顶弹窗
- * @param modalEl 弹窗节点
+ * @param modalEl 弹窗
  * @param zIndex 弹窗初始层级
- * @returns
  */
-export declare function setModalTop(modalEl?: HTMLElement, zIndex?: number): void;
+export declare function topModal(modalEl?: HTMLElement, zIndex?: number): void;
 /**
- * 重置弹窗位置及大小
- * @param modalEl 弹窗节点
- * @param width 初始宽度
- * @param top 初始顶部距离
- */
-export declare function resetModalStyle(modalEl?: HTMLElement, width?: string | number, top?: string | number): void;
-/**
- * 设置弹窗位置
- * @param modalEl 弹窗节点
+ * 获取位置对应的外间距值
  * @param position 位置
- * @param resizable 是否可以拉伸
- * @param moveOut 是否可以拉出容器
  */
-export declare function setModalPosition(modalEl?: HTMLElement, resizable?: Resizable, position?: PositionObject, moveOut?: MoveOut): void;
+export declare function getPositionMargin(position?: Position): string | undefined;
 /**
- * 设置弹窗初始位置
+ * 重置弹窗位置及大小
  * @param modalEl 弹窗节点
- * @param position 位置
- * @param resizable 是否可以拉伸
- * @param moveOut 是否可以拉出容器
- * @param force 是否强制更新
+ * @param width 初始宽度
+ * @param top 初始顶部距离
  */
-export declare function setInitPosition(modalEl?: HTMLElement, resizable?: Resizable, position?: PositionObject, moveOut?: MoveOut, force?: boolean): void;
+export declare function resetModalStyle(modalEl?: HTMLElement, width?: string | number, position?: Position): void;