yuang-framework-ui-pc 1.1.11 → 1.1.12

package/lib/ele-dialog/style/index.scss

@@ -0,0 +1,259 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-modal-var($ele);
+
+.ele-modal {
+  &.el-overlay {
+    height: auto;
+  }
+
+  & > .el-overlay-dialog {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    & > .el-dialog {
+      padding: 0;
+      flex-shrink: 0;
+      position: relative;
+      background: eleVar('modal', 'bg');
+      border-radius: eleVar('modal', 'radius');
+      margin-bottom: eleVar('modal', 'mobile-space');
+
+      // 让 model 外层不出现滚动条
+      position: absolute!important;
+      left: 50%;
+      top: 50%;
+      margin-top: 0!important;
+      transform: translate(-50%,-50%);
+      max-height: calc(100% - 30px);
+      max-width: calc(100% - 30px);
+      display: flex;
+      flex-direction: column;
+
+      & > .el-dialog__header,
+      & > .el-dialog__footer {
+        flex-shrink: 0;
+        border: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      & > .el-dialog__body {
+        padding: 0;
+        color: inherit;
+        font-size: inherit;
+
+        overflow: scroll;
+      }
+    }
+  }
+}
+
+/* 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-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 $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('modal', 'icon-hover-color');
+    background: eleVar('modal', 'icon-hover-bg');
+  }
+
+  & + .ele-modal-tool {
+    margin-left: eleVar('modal', 'icon-space');
+  }
+}
+
+/* body */
+.ele-modal-body {
+  padding: eleVar('modal', 'body-padding');
+  box-sizing: border-box;
+
+  &.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-top > .el-overlay-dialog > .el-dialog {
+  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;
+}
+
+.ele-modal-left > .el-overlay-dialog > .el-dialog {
+  margin: auto auto auto 0;
+}
+
+.ele-modal-right > .el-overlay-dialog > .el-dialog {
+  margin: auto 0 auto auto;
+}
+
+.ele-modal-left-top > .el-overlay-dialog > .el-dialog {
+  margin: 0 auto 0 0;
+}
+
+.ele-modal-left-bottom > .el-overlay-dialog > .el-dialog {
+  margin: auto auto 0 0;
+}
+
+.ele-modal-right-top > .el-overlay-dialog > .el-dialog {
+  margin: 0 0 0 auto;
+}
+
+.ele-modal-right-bottom > .el-overlay-dialog > .el-dialog {
+  margin: auto 0 0 auto;
+}
+
+/* 支持拖拽 */
+.ele-modal-movable > .el-overlay-dialog > .el-dialog > .el-dialog__header {
+  cursor: move;
+  user-select: none;
+}
+
+/* 支持拉伸 */
+.ele-modal-resize-icon {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: eleVar('modal', 'icon-color');
+  font-size: 12px;
+  cursor: se-resize;
+
+  &.is-horizontal {
+    cursor: e-resize;
+  }
+
+  &.is-vertical {
+    cursor: s-resize;
+  }
+}
+
+.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-fullscreen > .el-overlay-dialog > .el-dialog {
+  top: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  display: flex !important;
+  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;
+
+    & > .ele-modal-resize-icon {
+      display: none;
+    }
+  }
+}
+
+/* 同时打开多个 */
+.ele-modal-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  box-sizing: border-box;
+  z-index: elVar('index', 'popper');
+  overflow: hidden;
+}
+
+.ele-modal-multiple {
+  pointer-events: none !important;
+  position: absolute !important;
+
+  & > .el-overlay-dialog {
+    pointer-events: none;
+    overflow: hidden;
+
+    & > .el-dialog {
+      pointer-events: auto;
+    }
+  }
+}
+
+/* 失活状态 */
+.ele-modal-hide {
+  display: none !important;
+}
+
+/* 最大宽度适应屏幕 */
+.ele-modal-responsive > .el-overlay-dialog > .el-dialog {
+  max-width: calc(100% - #{eleVar('modal', 'mobile-space')} * 2);
+}
+
+/* 限制在主体区域 */
+.ele-admin-modals > .ele-modal {
+  pointer-events: auto;
+  position: absolute !important;
+}

package/lib/ele-dialog/types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 拉伸类型
+ */
+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;
+  bottom?: string | number;
+  right?: string | number;
+}
+
+/**
+ * 初始位置字符类型
+ */
+export type PositionValue =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'rightTop'
+  | 'rightBottom'
+  | 'center';
+
+/**
+ * 初始位置类型
+ */
+export type Position = PositionValue | PositionObject;

package/lib/ele-dialog/util.cjs

@@ -0,0 +1,301 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("../utils/core");
+const hook = require("../utils/hook");
+const containerClass = "ele-modal-container";
+const wrapperClass = "ele-modal";
+const closedClass = "ele-modal-closed";
+const fixTop = 0.65;
+const fixLeft = 0.65;
+function getModalEl(dialogRef) {
+  var _a, _b;
+  const el = (_b = vue.unref((_a = vue.unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
+  return el;
+}
+function initModalStyle(modalEl) {
+  modalEl.style.top = modalEl.offsetTop + "px";
+  modalEl.style.left = modalEl.offsetLeft + "px";
+  modalEl.style.right = "auto";
+  modalEl.style.bottom = "auto";
+  modalEl.style.position = "absolute";
+  modalEl.style.margin = "0";
+}
+function canMoveOut(moveOut, direction) {
+  if (direction && moveOut != null && Array.isArray(moveOut)) {
+    return moveOut.includes(direction);
+  }
+  return false;
+}
+function getModalContainer(inner, multiple, appendTo, modalsEl) {
+  if (multiple) {
+    const parent = (inner ? modalsEl : void 0) || document.body;
+    const wrapper = core.queryChild(parent, containerClass);
+    if (wrapper) {
+      return wrapper;
+    }
+    const elem = document.createElement("div");
+    elem.classList.add(containerClass);
+    parent.appendChild(elem);
+    return elem;
+  }
+  if (inner && modalsEl) {
+    return modalsEl;
+  }
+  return appendTo || "body";
+}
+function useModalMove(dialogRef, props, isFullscreen) {
+  let modalEl = null;
+  let wrapEl = null;
+  let downOL = null;
+  let downOT = null;
+  const { handleMousedown, handleTouchstart } = hook.useMoveEvent({
+    start: () => {
+      modalEl = getModalEl(dialogRef);
+      wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
+      if (!modalEl || !wrapEl || !props.draggable || isFullscreen.value) {
+        return;
+      }
+      modalEl.style.userSelect = "none";
+      initModalStyle(modalEl);
+      downOL = modalEl.offsetLeft;
+      downOT = modalEl.offsetTop;
+    },
+    move: ({ distanceX, distanceY, e }) => {
+      if (!modalEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
+        return;
+      }
+      e.preventDefault();
+      let positionLeft = distanceX + downOL;
+      let positionTop = distanceY + downOT;
+      const limitL = wrapEl.clientWidth - modalEl.clientWidth - fixLeft;
+      const limitT = wrapEl.clientHeight - modalEl.clientHeight - fixTop;
+      if (!props.moveOut) {
+        if (positionLeft < 0) {
+          positionLeft = 0;
+        } else if (positionLeft > limitL) {
+          positionLeft = limitL;
+        }
+        if (positionTop > limitT) {
+          positionTop = limitT;
+        }
+        if (positionTop < 0) {
+          positionTop = 0;
+        }
+      } else {
+        if (!canMoveOut(props.moveOut, "left") && positionLeft < 0) {
+          positionLeft = 0;
+        }
+        if (!canMoveOut(props.moveOut, "right") && positionLeft > limitL) {
+          positionLeft = limitL;
+        }
+        if (!canMoveOut(props.moveOut, "bottom") && positionTop > limitT) {
+          positionTop = limitT;
+        }
+        if (!canMoveOut(props.moveOut, "top") && positionTop < 0) {
+          positionTop = 0;
+        }
+        const minLimitL = wrapEl.clientWidth - 48;
+        if (positionLeft > minLimitL) {
+          positionLeft = minLimitL;
+        }
+        const minLimitT = wrapEl.clientHeight - 48;
+        if (props.multiple && positionTop > minLimitT) {
+          positionTop = minLimitT;
+        }
+      }
+      modalEl.style.left = `${Math.floor(positionLeft)}px`;
+      modalEl.style.top = `${Math.floor(positionTop)}px`;
+    },
+    end: () => {
+      if (modalEl) {
+        modalEl.style.userSelect = "";
+      }
+      downOL = null;
+      downOT = null;
+      modalEl = null;
+      wrapEl = null;
+    },
+    touchmoveOptions: { passive: false }
+  });
+  return {
+    handleHeaderMousedown: handleMousedown,
+    handleHeaderTouchstart: handleTouchstart
+  };
+}
+function useModalResize(dialogRef, props, isFullscreen) {
+  let modalEl = null;
+  let wrapEl = null;
+  let downW = null;
+  let downH = null;
+  const { handleMousedown, handleTouchstart } = hook.useMoveEvent({
+    start: () => {
+      modalEl = getModalEl(dialogRef);
+      wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
+      if (!modalEl || !wrapEl || !props.resizable || isFullscreen.value) {
+        return;
+      }
+      modalEl.style.userSelect = "none";
+      initModalStyle(modalEl);
+      downW = modalEl.clientWidth;
+      downH = modalEl.clientHeight;
+    },
+    move: ({ distanceX, distanceY, e }) => {
+      if (!modalEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
+        return;
+      }
+      e.preventDefault();
+      if (props.resizable !== "vertical") {
+        const w = distanceX + downW;
+        const maxW = wrapEl.clientWidth - modalEl.offsetLeft - fixLeft;
+        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 = distanceY + downH;
+        const maxH = wrapEl.clientHeight - modalEl.offsetTop - fixTop;
+        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;
+      }
+    },
+    end: () => {
+      if (modalEl) {
+        modalEl.style.userSelect = "";
+      }
+      downW = null;
+      downH = null;
+      modalEl = null;
+      wrapEl = null;
+    },
+    touchmoveOptions: { passive: false }
+  });
+  return {
+    handleResizeMousedown: handleMousedown,
+    handleResizeTouchstart: handleTouchstart
+  };
+}
+function useModalEvent(dialogRef, props, isFullscreen) {
+  const { handleHeaderMousedown, handleHeaderTouchstart } = useModalMove(
+    dialogRef,
+    props,
+    isFullscreen
+  );
+  const { handleResizeMousedown, handleResizeTouchstart } = useModalResize(
+    dialogRef,
+    props,
+    isFullscreen
+  );
+  let isInitPosition = true;
+  const getZIndex = () => {
+    return props.zIndex ?? 2e3;
+  };
+  const topModal = (el) => {
+    var _a;
+    const modalEl = el ?? getModalEl(dialogRef);
+    const overlayEl = (_a = modalEl == null ? void 0 : modalEl.parentElement) == null ? void 0 : _a.parentElement;
+    if (!overlayEl) {
+      return;
+    }
+    const currentIndex = core.getCurrentStyle(overlayEl).zIndex;
+    const containerEl = overlayEl.parentElement;
+    const cls = `.${wrapperClass}:not(.${closedClass})`;
+    const modals = containerEl ? containerEl.querySelectorAll(cls) : void 0;
+    let maxIndex = 0;
+    (modals ? Array.from(modals) : []).forEach((modalEl2) => {
+      const zIndex = core.getCurrentStyle(modalEl2).zIndex;
+      if (zIndex != null) {
+        const index = Number(zIndex);
+        if (index >= maxIndex && (!overlayEl || modalEl2 !== overlayEl)) {
+          maxIndex = index + 1;
+        }
+      }
+    });
+    if (maxIndex > Number(currentIndex || getZIndex() || 0)) {
+      overlayEl.style.zIndex = String(maxIndex);
+    }
+  };
+  const mousedownListener = (event) => {
+    if (props.multiple) {
+      topModal(event.currentTarget);
+    }
+  };
+  const bindAutoTopEvent = () => {
+    const modalEl = getModalEl(dialogRef);
+    if (modalEl) {
+      modalEl.addEventListener("mousedown", mousedownListener);
+      modalEl.addEventListener("touchstart", mousedownListener);
+    }
+  };
+  const unbindAutoTopEvent = () => {
+    const modalEl = getModalEl(dialogRef);
+    if (modalEl) {
+      modalEl.removeEventListener("mousedown", mousedownListener);
+      modalEl.removeEventListener("touchstart", mousedownListener);
+    }
+  };
+  const 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(" ");
+  };
+  const getPosition = () => {
+    if (props.alignCenter) {
+      return "center";
+    }
+    if (props.top != null && props.top !== "") {
+      return { top: props.top };
+    }
+    return props.position;
+  };
+  const setInitPosition = () => {
+    if (isInitPosition) {
+      isInitPosition = false;
+      const modalEl = getModalEl(dialogRef);
+      const margin = getPositionMargin(getPosition());
+      if (modalEl && margin != null) {
+        modalEl.style.margin = margin;
+      }
+    }
+  };
+  const resetModalStyle = () => {
+    const modalEl = getModalEl(dialogRef);
+    if (modalEl) {
+      const w = props.width;
+      modalEl.style.margin = getPositionMargin(getPosition()) || "";
+      modalEl.style.position = "";
+      modalEl.style.top = "";
+      modalEl.style.left = "";
+      modalEl.style.right = "";
+      modalEl.style.bottom = "";
+      modalEl.style.height = "";
+      modalEl.style.maxHeight = "";
+      modalEl.style.minHeight = "";
+      modalEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
+      modalEl.style.maxWidth = "";
+      modalEl.style.minWidth = "";
+    }
+  };
+  return {
+    handleHeaderMousedown,
+    handleHeaderTouchstart,
+    handleResizeMousedown,
+    handleResizeTouchstart,
+    bindAutoTopEvent,
+    unbindAutoTopEvent,
+    topModal,
+    setInitPosition,
+    resetModalStyle
+  };
+}
+exports.closedClass = closedClass;
+exports.containerClass = containerClass;
+exports.getModalContainer = getModalContainer;
+exports.useModalEvent = useModalEvent;
+exports.useModalMove = useModalMove;
+exports.useModalResize = useModalResize;
+exports.wrapperClass = wrapperClass;

package/lib/ele-dialog/util.d.ts

@@ -0,0 +1,52 @@
+import { Ref } from 'vue';
+import { ElDialogInstance } from '../ele-app/el';
+import { ModalProps } from './props';
+
+export declare const containerClass = "ele-modal-container";
+export declare const wrapperClass = "ele-modal";
+export declare const closedClass = "ele-modal-closed";
+/**
+ * 获取弹窗容器
+ * @param inner 是否限制在主体内部
+ * @param multiple 是否支持同时打开多个
+ * @param appendTo 自定义插入的容器
+ * @param modalsEl 限制在主体内部时的容器
+ */
+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 全屏状态
+ */
+export declare function useModalResize(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
+};
+/**
+ * 弹窗事件处理
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+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;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuang-framework-ui-pc",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "type": "module",
   "scripts": {
     "dev": "vite --host --config vite.global.ts --mode dev",