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

package/lib/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/lib/ele-modal/util.cjs

@@ -1,104 +1,51 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const core = require("../utils/core");
-const titleClass = "ele-modal-title";
-const headerClass = "ele-modal-header";
+const containerClass = "ele-modal-container";
 const wrapperClass = "ele-modal";
-const containerId = "ele-modal-container";
-const movableClass = "ele-modal-movable";
-const resizableClass = "ele-modal-resizable";
-const multipleClass = "ele-modal-multiple";
-const fullscreenClass = "ele-modal-fullscreen";
-const innerClass = "ele-modal-inner";
-const responsiveClass = "ele-modal-responsive";
 const closedClass = "ele-modal-closed";
-const hideClass = "ele-modal-hide";
-const collapseClass = "ele-state-collapse";
-const compactClass = "ele-state-compact";
-const maximizedClass = "ele-state-maximized";
-const hasTabClass = "ele-state-has-tab";
-const mixSidebarClass = "ele-state-mix-sidebar";
-const singleSidebarClass = "ele-state-single-sidebar";
-const topLayoutClass = "ele-state-top-layout";
-const expandedClass = "ele-state-expanded";
-const mobileClass = "ele-state-mobile";
 const fixTop = 0.65;
 const fixLeft = 0.65;
-function initModalStyle(modalEl, resizable) {
+function initModalStyle(modalEl) {
   modalEl.style.top = modalEl.offsetTop + "px";
   modalEl.style.left = modalEl.offsetLeft + "px";
-  modalEl.style.bottom = "auto";
   modalEl.style.right = "auto";
-  modalEl.style.margin = "0";
+  modalEl.style.bottom = "auto";
   modalEl.style.position = "absolute";
-  modalEl.style.display = resizable ? "inline-flex" : "inline-block";
-  modalEl.style.verticalAlign = "top";
-}
-function getModalContainer(multiple, appendTo) {
-  if (!multiple) {
-    return appendTo || "body";
-  }
-  const container = document.getElementById(containerId);
-  if (container) {
-    return container;
-  }
-  const elem = document.createElement("div");
-  elem.id = containerId;
-  document.body.appendChild(elem);
-  return elem;
-}
-function getVisibleModals() {
-  const el = getModalContainer(true);
-  const modals = el.querySelectorAll(`.${wrapperClass}:not(.${closedClass})`);
-  return modals ? Array.from(modals) : [];
-}
-function getModalMaxIndex(el) {
-  const modals = getVisibleModals();
-  let maxIndex = 0;
-  modals.forEach((modalEl) => {
-    const zIndex = core.getCurrentStyle(modalEl).zIndex;
-    if (zIndex != null) {
-      const index = Number(zIndex);
-      if (index >= maxIndex && (!el || modalEl !== el)) {
-        maxIndex = index + 1;
-      }
-    }
-  });
-  return maxIndex;
+  modalEl.style.margin = "0";
 }
 function canMoveOut(moveOut, direction) {
-  if (direction && moveOut != null && typeof moveOut === "object" && typeof moveOut.includes === "function") {
+  if (direction && moveOut != null && Array.isArray(moveOut)) {
     return moveOut.includes(direction);
   }
   return false;
 }
-function handleMovable(event, props) {
-  var _a;
-  if (!props.draggable) {
-    return;
+function getModalContainer(inner, multiple, appendTo, modalsEl) {
+  if (multiple) {
+    const parent = (inner ? modalsEl : void 0) || document.body;
+    const wrapper = Array.from(parent.children).find(
+      (el) => el.classList.contains(containerClass)
+    );
+    if (wrapper) {
+      return wrapper;
+    }
+    const elem = document.createElement("div");
+    elem.classList.add(containerClass);
+    parent.appendChild(elem);
+    return elem;
   }
-  const modalEl = event.currentTarget;
-  if (!modalEl) {
-    return;
+  if (inner && modalsEl) {
+    return modalsEl;
   }
+  return appendTo || "body";
+}
+function handleMove(modalEl, event, props) {
   const wrapEl = modalEl.parentElement;
   if (!wrapEl) {
     return;
   }
-  const headerEl = modalEl.querySelector("." + headerClass);
-  if (!headerEl) {
-    return;
-  }
-  const titleEl = headerEl.querySelector("." + titleClass);
-  if (!titleEl || event.target !== headerEl && event.target !== titleEl) {
-    return;
-  }
-  const modalClass = (_a = wrapEl.parentElement) == null ? void 0 : _a.classList;
-  if (modalClass && modalClass.contains(fullscreenClass)) {
-    return;
-  }
   modalEl.style.userSelect = "none";
-  initModalStyle(modalEl, props.resizable);
+  initModalStyle(modalEl);
   const downX = event.clientX;
   const downY = event.clientY;
   const downOL = modalEl.offsetLeft;
@@ -155,32 +102,13 @@ function handleMovable(event, props) {
   document.addEventListener("mousemove", mousemoveFn);
   document.addEventListener("mouseup", mouseupFn);
 }
-function handleResizable(event, props) {
-  if (!props.resizable) {
-    return;
-  }
-  const modalEl = event.currentTarget;
-  if (!modalEl) {
-    return;
-  }
+function handleResize(modalEl, event, props) {
   const wrapEl = modalEl.parentElement;
   if (!wrapEl) {
     return;
   }
-  const overlayEl = wrapEl.parentElement;
-  if (!overlayEl) {
-    return;
-  }
-  if (overlayEl.classList.contains(fullscreenClass)) {
-    return;
-  }
-  const limitX = modalEl.clientWidth + modalEl.offsetLeft - wrapEl.scrollLeft + overlayEl.offsetLeft;
-  const limitY = modalEl.clientHeight + modalEl.offsetTop - wrapEl.scrollTop + overlayEl.offsetTop;
-  if (event.clientX > limitX || limitX - event.clientX > 12 || event.clientY > limitY || limitY - event.clientY > 12) {
-    return;
-  }
   modalEl.style.userSelect = "none";
-  initModalStyle(modalEl, true);
+  initModalStyle(modalEl);
   const downX = event.clientX;
   const downY = event.clientY;
   const downW = modalEl.clientWidth;
@@ -211,34 +139,45 @@ function handleResizable(event, props) {
   document.addEventListener("mousemove", mousemoveFn);
   document.addEventListener("mouseup", mouseupFn);
 }
-function setModalTop(modalEl, zIndex) {
+function topModal(modalEl, zIndex) {
   var _a;
-  if (!modalEl) {
-    return;
-  }
-  const overlayEl = (_a = modalEl.parentElement) == null ? void 0 : _a.parentElement;
-  if (!overlayEl || !overlayEl.classList || !overlayEl.classList.contains(multipleClass)) {
+  const overlayEl = (_a = modalEl == null ? void 0 : modalEl.parentElement) == null ? void 0 : _a.parentElement;
+  if (!overlayEl) {
     return;
   }
   const currentIndex = core.getCurrentStyle(overlayEl).zIndex;
-  const maxIndex = getModalMaxIndex(overlayEl);
+  const containerEl = overlayEl.parentElement;
+  const modals = containerEl ? containerEl.querySelectorAll(`.${wrapperClass}:not(.${closedClass})`) : void 0;
+  let maxIndex = 0;
+  (modals ? Array.from(modals) : []).forEach((modalEl2) => {
+    const zIndex2 = core.getCurrentStyle(modalEl2).zIndex;
+    if (zIndex2 != null) {
+      const index = Number(zIndex2);
+      if (index >= maxIndex && (!overlayEl || modalEl2 !== overlayEl)) {
+        maxIndex = index + 1;
+      }
+    }
+  });
   if (maxIndex > Number(currentIndex || zIndex || 0)) {
     overlayEl.style.zIndex = String(maxIndex);
   }
 }
-function resetModalStyle(modalEl, width, top) {
+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 resetModalStyle(modalEl, width, position) {
   if (!modalEl) {
     return;
   }
+  modalEl.style.margin = getPositionMargin(position) || "";
+  modalEl.style.position = "";
   modalEl.style.top = "";
   modalEl.style.left = "";
   modalEl.style.right = "";
   modalEl.style.bottom = "";
-  modalEl.style.margin = "";
-  modalEl.style.marginTop = typeof top === "number" ? `${top}px` : top ?? "";
-  modalEl.style.display = "";
-  modalEl.style.position = "";
-  modalEl.style.verticalAlign = "";
   modalEl.style.height = "";
   modalEl.style.maxHeight = "";
   modalEl.style.minHeight = "";
@@ -246,75 +185,12 @@ function resetModalStyle(modalEl, width, top) {
   modalEl.style.maxWidth = "";
   modalEl.style.minWidth = "";
 }
-function setModalPosition(modalEl, resizable, position, moveOut) {
-  if (!position || typeof position !== "object" || !modalEl) {
-    return;
-  }
-  const wrapEl = modalEl.parentElement;
-  if (!wrapEl) {
-    return;
-  }
-  initModalStyle(modalEl, resizable);
-  const location = {};
-  const canOutB = canMoveOut(moveOut, "bottom");
-  const canOutR = canMoveOut(moveOut, "right");
-  const t = wrapEl.clientHeight - modalEl.clientHeight - (canOutB ? 0 : fixTop);
-  const maxTop = t < 0 ? 0 : t;
-  const l = wrapEl.clientWidth - modalEl.clientWidth - (canOutR ? 0 : fixLeft);
-  const maxLeft = l < 0 ? 0 : l;
-  if (position.top != null) {
-    location.top = position.top;
-  } else if (position.bottom != null) {
-    location.bottom = position.bottom;
-  } else if (position.left != null || position.right != null) {
-    location.top = maxTop / 2;
-  }
-  if (position.left != null) {
-    location.left = position.left;
-  } else if (position.right != null) {
-    location.right = position.right;
-  } else if (position.top != null || position.bottom != null) {
-    location.left = maxLeft / 2;
-  }
-  Object.keys(location).forEach((key) => {
-    const value = location[key];
-    if (typeof value === "number") {
-      modalEl.style[key] = `${Math.floor(value)}px`;
-    } else if (value != null) {
-      modalEl.style[key] = value;
-    }
-  });
-}
-function setInitPosition(modalEl, resizable, position, moveOut, force) {
-  const attr = "ele-position";
-  if (modalEl && position && (force || !modalEl.getAttribute(attr))) {
-    modalEl.setAttribute(attr, "1");
-    setModalPosition(modalEl, resizable, position, moveOut);
-  }
-}
 exports.closedClass = closedClass;
-exports.collapseClass = collapseClass;
-exports.compactClass = compactClass;
-exports.containerId = containerId;
-exports.expandedClass = expandedClass;
-exports.fullscreenClass = fullscreenClass;
+exports.containerClass = containerClass;
 exports.getModalContainer = getModalContainer;
-exports.handleMovable = handleMovable;
-exports.handleResizable = handleResizable;
-exports.hasTabClass = hasTabClass;
-exports.hideClass = hideClass;
-exports.innerClass = innerClass;
-exports.maximizedClass = maximizedClass;
-exports.mixSidebarClass = mixSidebarClass;
-exports.mobileClass = mobileClass;
-exports.movableClass = movableClass;
-exports.multipleClass = multipleClass;
+exports.getPositionMargin = getPositionMargin;
+exports.handleMove = handleMove;
+exports.handleResize = handleResize;
 exports.resetModalStyle = resetModalStyle;
-exports.resizableClass = resizableClass;
-exports.responsiveClass = responsiveClass;
-exports.setInitPosition = setInitPosition;
-exports.setModalPosition = setModalPosition;
-exports.setModalTop = setModalTop;
-exports.singleSidebarClass = singleSidebarClass;
-exports.topLayoutClass = topLayoutClass;
+exports.topModal = topModal;
 exports.wrapperClass = wrapperClass;