ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,244 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-modal-var($ele);
+
+.ele-modal {
+  &.el-overlay {
+    height: auto;
+  }
+
+  & > .el-overlay-dialog {
+    position: absolute;
+  }
+
+  div.el-dialog {
+    #{elVarName('dialog', 'title-font-size')}: elVar('font-size', 'medium');
+  }
+
+  .el-dialog {
+    & > .el-dialog__footer {
+      border-top: eleVar('modal', 'footer-border');
+      padding: 0;
+    }
+
+    .ele-modal-footer {
+      padding: eleVar('modal', 'footer-padding');
+      box-sizing: border-box;
+    }
+
+    & > .el-dialog__body {
+      padding: 0;
+    }
+
+    .ele-modal-body {
+      padding: eleVar('modal', 'body-padding');
+      box-sizing: border-box;
+    }
+
+    & > .el-dialog__header {
+      margin: 0;
+      padding: 0;
+      border-bottom: eleVar('modal', 'header-border');
+    }
+
+    .ele-modal-header {
+      display: flex;
+      align-items: center;
+      padding: eleVar('modal', 'header-padding');
+      box-sizing: border-box;
+
+      .el-dialog__title {
+        flex: 1;
+      }
+
+      // 图标按钮
+      .ele-modal-tool {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: eleVar('modal', 'icon-color');
+        font-size: eleVar('modal', 'icon-font-size');
+        transition: color 0.2s, background-color 0.2s;
+        cursor: pointer;
+
+        &:hover {
+          color: eleVar('modal', 'icon-hover-color');
+        }
+
+        & + .ele-modal-tool {
+          margin-left: eleVar('modal', 'icon-space');
+        }
+      }
+    }
+  }
+
+  // 表单弹窗
+  &.ele-modal-form .el-dialog > .el-dialog__body > .ele-modal-body {
+    padding: eleVar('modal', 'form-body-padding');
+  }
+}
+
+/* 支持拖拽 */
+.ele-modal-movable .el-dialog > .el-dialog__header {
+  cursor: move;
+  user-select: none;
+}
+
+/* 支持拉伸 */
+.ele-modal-resizable .el-dialog::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  height: 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-dialog::after {
+  cursor: e-resize;
+}
+
+.ele-modal-resizable-vertical .el-dialog::after {
+  cursor: s-resize;
+}
+
+.ele-modal-resizable .el-dialog,
+.ele-modal-fullscreen .el-dialog {
+  display: flex;
+  flex-direction: column;
+
+  & > .el-dialog__header {
+    flex-shrink: 0;
+  }
+
+  & > .el-dialog__body {
+    flex: auto;
+    overflow: auto;
+  }
+}
+
+/* 全屏 */
+.ele-modal-fullscreen .el-dialog {
+  top: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  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;
+
+  & > .el-dialog__header {
+    cursor: default !important;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+/* 支持打开多个 */
+.ele-modal-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: eleVar('modal', 'index');
+}
+
+.ele-modal-multiple {
+  pointer-events: none;
+  position: absolute !important;
+
+  & > .el-overlay-dialog {
+    pointer-events: none;
+    position: absolute;
+    overflow: hidden;
+
+    .el-dialog {
+      pointer-events: auto;
+    }
+  }
+}
+
+/* 失活状态 */
+.ele-modal-hide {
+  display: none !important;
+}
+
+/* 移动端 */
+.ele-modal-responsive .el-dialog {
+  max-width: calc(100vw - eleVar('modal', 'mobile-space') * 2);
+}
+
+/* 限制在内部并适配布局状态 */
+.ele-modal-inner {
+  top: eleVar('header', 'height');
+  left: eleVar('sidebar', 'width');
+  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 {
+    left: calc(
+      #{eleVar('sidebox', 'width')} + #{eleVar('sidebar', 'mix-width')}
+    );
+
+    &.ele-state-collapse {
+      left: eleVar('sidebox', 'width');
+    }
+
+    &.ele-state-single-sidebar {
+      left: eleVar('sidebox', 'width');
+    }
+  }
+
+  &.ele-state-compact {
+    left: calc(
+      #{eleVar('sidebar', 'collapse-width')} + #{eleVar('sidebar', 'mix-width')}
+    );
+
+    &.ele-state-single-sidebar {
+      left: eleVar('sidebar', 'collapse-width');
+    }
+
+    &.ele-state-collapse {
+      left: eleVar('sidebar', '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;
+  }
+}

package/es/ele-modal/types/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 拉伸类型
+ */
+export type Resizable = boolean | 'horizontal' | 'vertical';
+/**
+ * 拖出边界字符类型
+ */
+export type MoveOutValue = 'top' | 'left' | 'right' | 'bottom';
+/**
+ * 拖出边界类型
+ */
+export type MoveOut = boolean | MoveOutValue[];
+/**
+ * 初始位置对象类型
+ */
+export interface PositionObject {
+    top?: string | number;
+    left?: string | number;
+}
+/**
+ * 初始位置字符类型
+ */
+export type PositionValue = 'top' | 'bottom' | 'left' | 'right' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'center';
+/**
+ * 初始位置类型
+ */
+export type Position = PositionValue | PositionObject;

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

@@ -0,0 +1,73 @@
+import type { Resizable, Position, MoveOut } from './types';
+import { ModalProps } from './props';
+export declare const wrapperClass = "ele-modal";
+export declare const containerClass = "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";
+/**
+ * 获取自定义弹窗容器
+ */
+export declare function getModalContainer(): Element;
+/**
+ * 获取节点样式
+ * @param el 节点
+ */
+export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
+/**
+ * 弹窗移动事件处理
+ * @param event 事件
+ * @param props 属性
+ */
+export declare function handleMovable(event: MouseEvent, props: ModalProps): void;
+/**
+ * 弹窗拉伸事件处理
+ * @param event 事件
+ * @param props 属性
+ */
+export declare function handleResizable(event: MouseEvent, props: ModalProps): void;
+/**
+ * 置顶弹窗
+ * @param modalEl 弹窗节点
+ * @param zIndex 弹窗初始层级
+ * @returns
+ */
+export declare function setModalTop(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?: Position, moveOut?: MoveOut): void;
+/**
+ * 设置弹窗初始位置
+ * @param modalEl 弹窗节点
+ * @param position 位置
+ * @param resizable 是否可以拉伸
+ * @param moveOut 是否可以拉出容器
+ * @param force 是否强制更新
+ */
+export declare function setInitPosition(modalEl?: HTMLElement, resizable?: Resizable, position?: Position, moveOut?: MoveOut, force?: boolean): void;

package/es/ele-modal/util.js

@@ -0,0 +1,332 @@
+const titleClass = "el-dialog__title";
+const headerClass = "el-dialog__header";
+const wrapperClass = "ele-modal";
+const containerClass = "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";
+function initModalStyle(modalEl, resizable) {
+  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.position = "relative";
+  modalEl.style.display = resizable ? "inline-flex" : "inline-block";
+  modalEl.style.verticalAlign = "top";
+}
+function getModalContainer() {
+  const container = document.querySelector("." + containerClass);
+  if (container) {
+    return container;
+  }
+  const elem = document.createElement("div");
+  elem.classList.add(containerClass);
+  document.body.appendChild(elem);
+  return elem;
+}
+function getVisibleModals() {
+  const modals = getModalContainer().querySelectorAll(
+    `.${wrapperClass}:not(.${closedClass})`
+  );
+  return modals ? Array.from(modals) : [];
+}
+function getModalMaxIndex(el) {
+  const modals = getVisibleModals();
+  let maxIndex = 0;
+  modals.forEach((modalEl) => {
+    const zIndex = getCurrentStyle(modalEl).zIndex;
+    if (zIndex != null) {
+      const index = Number(zIndex);
+      if (index >= maxIndex && (!el || modalEl !== el)) {
+        maxIndex = index + 1;
+      }
+    }
+  });
+  return maxIndex;
+}
+function getCurrentStyle(el) {
+  return el["currentStyle"] || window.getComputedStyle(el, null) || {};
+}
+function canMoveOut(moveOut, direction) {
+  if (direction && moveOut != null && typeof moveOut === "object" && typeof moveOut.includes === "function") {
+    return moveOut.includes(direction);
+  }
+  return false;
+}
+function handleMovable(event, props) {
+  var _a;
+  if (!props.draggable) {
+    return;
+  }
+  const modalEl = event.currentTarget;
+  if (!modalEl) {
+    return;
+  }
+  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);
+  const downX = event.clientX;
+  const downY = event.clientY;
+  const downOL = modalEl.offsetLeft;
+  const downOT = modalEl.offsetTop;
+  const mousemoveFn = function(e) {
+    const position = {
+      left: e.clientX - downX + downOL,
+      top: e.clientY - downY + downOT
+    };
+    const limitL = wrapEl.clientWidth - modalEl.clientWidth - 1;
+    const limitT = wrapEl.clientHeight - modalEl.clientHeight - 2;
+    if (!props.moveOut) {
+      if (position.left < 0) {
+        position.left = 0;
+      } else if (position.left > limitL) {
+        position.left = limitL;
+      }
+      if (position.top > limitT) {
+        position.top = limitT;
+      }
+      if (position.top < 0) {
+        position.top = 0;
+      }
+    } else {
+      if (!canMoveOut(props.moveOut, "left") && position.left < 0) {
+        position.left = 0;
+      }
+      if (!canMoveOut(props.moveOut, "right") && position.left > limitL) {
+        position.left = limitL;
+      }
+      if (!canMoveOut(props.moveOut, "bottom") && position.top > limitT) {
+        position.top = limitT;
+      }
+      if (!canMoveOut(props.moveOut, "top") && position.top < 0) {
+        position.top = 0;
+      }
+      const minLimitL = wrapEl.clientWidth - 48;
+      if (position.left > minLimitL) {
+        position.left = minLimitL;
+      }
+      const minLimitT = wrapEl.clientHeight - 48;
+      if (props.multiple && position.top > minLimitT) {
+        position.top = minLimitT;
+      }
+    }
+    modalEl.style.left = `${position.left}px`;
+    modalEl.style.top = `${position.top}px`;
+  };
+  const mouseupFn = function() {
+    modalEl.style.userSelect = "";
+    document.removeEventListener("mousemove", mousemoveFn);
+    document.removeEventListener("mouseup", mouseupFn);
+  };
+  document.addEventListener("mousemove", mousemoveFn);
+  document.addEventListener("mouseup", mouseupFn);
+}
+function handleResizable(event, props) {
+  if (!props.resizable) {
+    return;
+  }
+  const modalEl = event.currentTarget;
+  if (!modalEl) {
+    return;
+  }
+  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 > 10 || event.clientY > limitY || limitY - event.clientY > 10) {
+    return;
+  }
+  modalEl.style.userSelect = "none";
+  initModalStyle(modalEl, true);
+  const downX = event.clientX;
+  const downY = event.clientY;
+  const downW = modalEl.clientWidth;
+  const downH = modalEl.clientHeight;
+  const mousemoveFn = function(e) {
+    if (props.resizable !== "vertical") {
+      const w = e.clientX - downX + downW;
+      const maxW = wrapEl.clientWidth - modalEl.offsetLeft - 1;
+      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 = e.clientY - downY + downH;
+      const maxH = wrapEl.clientHeight - modalEl.offsetTop - 1;
+      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;
+    }
+  };
+  const mouseupFn = function() {
+    modalEl.style.userSelect = "";
+    document.removeEventListener("mousemove", mousemoveFn);
+    document.removeEventListener("mouseup", mouseupFn);
+  };
+  document.addEventListener("mousemove", mousemoveFn);
+  document.addEventListener("mouseup", mouseupFn);
+}
+function setModalTop(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)) {
+    return;
+  }
+  const currentIndex = getCurrentStyle(overlayEl).zIndex;
+  const maxIndex = getModalMaxIndex(overlayEl);
+  if (maxIndex > Number(currentIndex || zIndex || 0)) {
+    overlayEl.style.zIndex = String(maxIndex);
+  }
+}
+function resetModalStyle(modalEl, width, top) {
+  if (!modalEl) {
+    return;
+  }
+  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 = "";
+  modalEl.style.width = typeof width === "number" ? `${width}px` : width ?? "";
+  modalEl.style.maxWidth = "";
+  modalEl.style.minWidth = "";
+}
+function setModalPosition(modalEl, resizable, position, moveOut) {
+  if (!modalEl) {
+    return;
+  }
+  const wrapEl = modalEl.parentElement;
+  if (!wrapEl) {
+    return;
+  }
+  initModalStyle(modalEl, resizable);
+  const canOut = !moveOut || Array.isArray(moveOut) && !moveOut.length;
+  const maxTop = wrapEl.clientHeight - modalEl.clientHeight - (canOut ? 0 : 2);
+  const maxLeft = wrapEl.clientWidth - modalEl.clientWidth - (canOut ? 0 : 1);
+  if (position === "top") {
+    modalEl.style.top = "0px";
+    modalEl.style.left = `${maxLeft / 2}px`;
+  } else if (position === "bottom") {
+    modalEl.style.top = `${maxTop}px`;
+    modalEl.style.left = `${maxLeft / 2}px`;
+  } else if (position === "left") {
+    modalEl.style.top = `${maxTop / 2}px`;
+    modalEl.style.left = "0px";
+  } else if (position === "right") {
+    modalEl.style.top = `${maxTop / 2}px`;
+    modalEl.style.left = `${maxLeft}px`;
+  } else if (position === "leftTop") {
+    modalEl.style.top = "0px";
+    modalEl.style.left = "0px";
+  } else if (position === "leftBottom") {
+    modalEl.style.top = `${maxTop}px`;
+    modalEl.style.left = "0px";
+  } else if (position === "rightTop") {
+    modalEl.style.top = "0px";
+    modalEl.style.left = `${maxLeft}px`;
+  } else if (position === "rightBottom") {
+    modalEl.style.top = `${maxTop}px`;
+    modalEl.style.left = `${maxLeft}px`;
+  } else if (position === "center") {
+    modalEl.style.top = `${maxTop / 2}px`;
+    modalEl.style.left = `${maxLeft / 2}px`;
+  } else if (typeof position === "object") {
+    if (position.top != null) {
+      modalEl.style.top = typeof position.top === "number" ? `${position.top}px` : position.top;
+    } else if (position.left != null) {
+      modalEl.style.top = `${maxTop / 2}px`;
+    }
+    if (position.left != null) {
+      modalEl.style.left = typeof position.left === "number" ? `${position.left}px` : position.left;
+    } else if (position.top != null) {
+      modalEl.style.left = `${maxLeft / 2}px`;
+    }
+  }
+}
+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);
+  }
+}
+export {
+  closedClass,
+  collapseClass,
+  compactClass,
+  containerClass,
+  expandedClass,
+  fullscreenClass,
+  getCurrentStyle,
+  getModalContainer,
+  handleMovable,
+  handleResizable,
+  hasTabClass,
+  hideClass,
+  innerClass,
+  maximizedClass,
+  mixSidebarClass,
+  mobileClass,
+  movableClass,
+  multipleClass,
+  resetModalStyle,
+  resizableClass,
+  responsiveClass,
+  setInitPosition,
+  setModalPosition,
+  setModalTop,
+  singleSidebarClass,
+  topLayoutClass,
+  wrapperClass
+};

package/es/ele-page/index.d.ts

@@ -0,0 +1,17 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    plain: BooleanConstructor;
+    multiCard: BooleanConstructor;
+    flexTable: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    plain: BooleanConstructor;
+    multiCard: BooleanConstructor;
+    flexTable: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+}>>, {
+    plain: boolean;
+    multiCard: boolean;
+    flexTable: boolean;
+    hideFooter: boolean;
+}, {}>;
+export default _sfc_main;