yuang-framework-ui-pc 1.1.15 → 1.1.17

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

@@ -1,259 +0,0 @@
-@use '../../style/themes/default.scss' as *;
-@use '../../style/util.scss' as *;
-@use './css-var.scss' as *;
-
-@include set-dialog-var($ele);
-
-.ele-dialog {
-  &.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-dialog-header {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: eleVar('modal', 'header-padding');
-  border-bottom: eleVar('modal', 'header-border');
-}
-
-.ele-dialog-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-dialog-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-dialog-tool {
-    margin-left: eleVar('modal', 'icon-space');
-  }
-}
-
-/* body */
-.ele-dialog-body {
-  padding: eleVar('modal', 'body-padding');
-  box-sizing: border-box;
-
-  &.is-form {
-    padding: eleVar('modal', 'form-body-padding');
-  }
-}
-
-/* footer */
-.ele-dialog-footer {
-  padding: eleVar('modal', 'footer-padding');
-  border-top: eleVar('modal', 'footer-border');
-  box-sizing: border-box;
-}
-
-/* 默认位置 */
-.ele-dialog-top > .el-overlay-dialog > .el-dialog {
-  margin: 0;
-}
-
-.ele-dialog-center > .el-overlay-dialog > .el-dialog {
-  margin: auto;
-}
-
-.ele-dialog-bottom > .el-overlay-dialog > .el-dialog {
-  margin: auto auto 0 auto;
-}
-
-.ele-dialog-left > .el-overlay-dialog > .el-dialog {
-  margin: auto auto auto 0;
-}
-
-.ele-dialog-right > .el-overlay-dialog > .el-dialog {
-  margin: auto 0 auto auto;
-}
-
-.ele-dialog-left-top > .el-overlay-dialog > .el-dialog {
-  margin: 0 auto 0 0;
-}
-
-.ele-dialog-left-bottom > .el-overlay-dialog > .el-dialog {
-  margin: auto auto 0 0;
-}
-
-.ele-dialog-right-top > .el-overlay-dialog > .el-dialog {
-  margin: 0 0 0 auto;
-}
-
-.ele-dialog-right-bottom > .el-overlay-dialog > .el-dialog {
-  margin: auto 0 0 auto;
-}
-
-/* 支持拖拽 */
-.ele-dialog-movable > .el-overlay-dialog > .el-dialog > .el-dialog__header {
-  cursor: move;
-  user-select: none;
-}
-
-/* 支持拉伸 */
-.ele-dialog-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-dialog-resizable > .el-overlay-dialog > .el-dialog,
-.ele-dialog-fullscreen > .el-overlay-dialog > .el-dialog {
-  display: flex;
-  flex-direction: column;
-
-  & > .el-dialog__body {
-    flex: auto;
-    overflow: auto;
-  }
-}
-
-/* 全屏 */
-.ele-dialog-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-dialog-resize-icon {
-      display: none;
-    }
-  }
-}
-
-/* 同时打开多个 */
-.ele-dialog-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-dialog-multiple {
-  pointer-events: none !important;
-  position: absolute !important;
-
-  & > .el-overlay-dialog {
-    pointer-events: none;
-    overflow: hidden;
-
-    & > .el-dialog {
-      pointer-events: auto;
-    }
-  }
-}
-
-/* 失活状态 */
-.ele-dialog-hide {
-  display: none !important;
-}
-
-/* 最大宽度适应屏幕 */
-.ele-dialog-responsive > .el-overlay-dialog > .el-dialog {
-  max-width: calc(100% - #{eleVar('modal', 'mobile-space')} * 2);
-}
-
-/* 限制在主体区域 */
-.ele-admin-modals > .ele-dialog {
-  pointer-events: auto;
-  position: absolute !important;
-}

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

@@ -1,43 +0,0 @@
-/**
- * 拉伸类型
- */
-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/es/ele-modal/util.d.ts

@@ -1,52 +0,0 @@
-import { Ref } from 'vue';
-import { ElDialogInstance } from '../ele-app/el';
-import { ModalProps } from './props';
-
-export declare const containerClass = "ele-dialog-container";
-export declare const wrapperClass = "ele-dialog";
-export declare const closedClass = "ele-dialog-closed";
-/**
- * 获取弹窗容器
- * @param inner 是否限制在主体内部
- * @param multiple 是否支持同时打开多个
- * @param appendTo 自定义插入的容器
- * @param modalsEl 限制在主体内部时的容器
- */
-export declare function getDialogContainer(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/es/ele-modal/util.js

@@ -1,301 +0,0 @@
-import { unref } from "vue";
-import { queryChild, getCurrentStyle } from "../utils/core";
-import { useMoveEvent } from "../utils/hook";
-const containerClass = "ele-dialog-container";
-const wrapperClass = "ele-dialog";
-const closedClass = "ele-dialog-closed";
-const fixTop = 0.65;
-const fixLeft = 0.65;
-function getModalEl(dialogRef) {
-  var _a, _b;
-  const el = (_b = unref((_a = 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 getDialogContainer(inner, multiple, appendTo, modalsEl) {
-  if (multiple) {
-    const parent = (inner ? modalsEl : void 0) || document.body;
-    const wrapper = 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 } = 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 } = 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 = 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 = 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
-  };
-}
-export {
-  closedClass,
-  containerClass,
-  getDialogContainer,
-  useModalEvent,
-  useModalMove,
-  useModalResize,
-  wrapperClass
-};