yuang-framework-ui-pc 1.1.45 → 1.1.46

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

@@ -0,0 +1,52 @@
+import { Ref } from 'vue';
+import { ElDialogInstance } from '../ele-app/el';
+import { EleDialogProps } 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 dialogsEl 限制在主体内部时的容器
+ */
+export declare function getDialogContainer(inner?: boolean, multiple?: boolean, appendTo?: string | HTMLElement, dialogsEl?: HTMLElement | null): HTMLElement | string;
+/**
+ * 弹窗支持移动
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export declare function useDialogMove(dialogRef: Ref<ElDialogInstance>, props: EleDialogProps, isFullscreen: Ref<boolean>): {
+    handleHeaderMousedown: (e: MouseEvent) => void;
+    handleHeaderTouchstart: (e: TouchEvent) => void;
+};
+/**
+ * 弹窗支持拉伸
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export declare function useDialogResize(dialogRef: Ref<ElDialogInstance>, props: EleDialogProps, isFullscreen: Ref<boolean>): {
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
+};
+/**
+ * 弹窗事件处理
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export declare function useDialogEvent(dialogRef: Ref<ElDialogInstance>, props: EleDialogProps, isFullscreen: Ref<boolean>): {
+    handleHeaderMousedown: (e: MouseEvent) => void;
+    handleHeaderTouchstart: (e: TouchEvent) => void;
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
+    bindAutoTopEvent: () => void;
+    unbindAutoTopEvent: () => void;
+    topDialog: (el?: HTMLElement) => void;
+    setInitPosition: () => void;
+    resetDialogStyle: () => void;
+};

package/es/ele-dialog/util.js

@@ -0,0 +1,293 @@
+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 getDialogEl(dialogRef) {
+  var _a, _b;
+  const el = (_b = unref((_a = unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
+  return el;
+}
+function initDialogStyle(dialogEl) {
+  dialogEl.style.top = dialogEl.offsetTop + "px";
+  dialogEl.style.left = dialogEl.offsetLeft + "px";
+  dialogEl.style.right = "auto";
+  dialogEl.style.bottom = "auto";
+  dialogEl.style.position = "absolute";
+  dialogEl.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, dialogsEl) {
+  if (multiple) {
+    const parent = (inner ? dialogsEl : 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 && dialogsEl) {
+    return dialogsEl;
+  }
+  return appendTo || "body";
+}
+function useDialogMove(dialogRef, props, isFullscreen) {
+  let dialogEl = null;
+  let wrapEl = null;
+  let downOL = null;
+  let downOT = null;
+  const { handleMousedown, handleTouchstart } = useMoveEvent({
+    start: () => {
+      dialogEl = getDialogEl(dialogRef);
+      wrapEl = dialogEl == null ? void 0 : dialogEl.parentElement;
+      if (!dialogEl || !wrapEl || !props.draggable || isFullscreen.value) {
+        return;
+      }
+      dialogEl.style.userSelect = "none";
+      initDialogStyle(dialogEl);
+      downOL = dialogEl.offsetLeft;
+      downOT = dialogEl.offsetTop;
+    },
+    move: ({ distanceX, distanceY, e }) => {
+      if (!dialogEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
+        return;
+      }
+      e.preventDefault();
+      let positionLeft = distanceX + downOL;
+      let positionTop = distanceY + downOT;
+      const limitL = wrapEl.clientWidth - dialogEl.clientWidth - fixLeft;
+      const limitT = wrapEl.clientHeight - dialogEl.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;
+        }
+      }
+      dialogEl.style.left = `${Math.floor(positionLeft)}px`;
+      dialogEl.style.top = `${Math.floor(positionTop)}px`;
+    },
+    end: () => {
+      if (dialogEl) {
+        dialogEl.style.userSelect = "";
+      }
+      downOL = null;
+      downOT = null;
+      dialogEl = null;
+      wrapEl = null;
+    },
+    touchmoveOptions: { passive: false }
+  });
+  return {
+    handleHeaderMousedown: handleMousedown,
+    handleHeaderTouchstart: handleTouchstart
+  };
+}
+function useDialogResize(dialogRef, props, isFullscreen) {
+  let dialogEl = null;
+  let wrapEl = null;
+  let downW = null;
+  let downH = null;
+  const { handleMousedown, handleTouchstart } = useMoveEvent({
+    start: () => {
+      dialogEl = getDialogEl(dialogRef);
+      wrapEl = dialogEl == null ? void 0 : dialogEl.parentElement;
+      if (!dialogEl || !wrapEl || !props.resizable || isFullscreen.value) {
+        return;
+      }
+      dialogEl.style.userSelect = "none";
+      initDialogStyle(dialogEl);
+      downW = dialogEl.clientWidth;
+      downH = dialogEl.clientHeight;
+    },
+    move: ({ distanceX, distanceY, e }) => {
+      if (!dialogEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
+        return;
+      }
+      e.preventDefault();
+      if (props.resizable !== "vertical") {
+        const w = distanceX + downW;
+        const maxW = wrapEl.clientWidth - dialogEl.offsetLeft - fixLeft;
+        const nw = (w < props.minWidth ? props.minWidth : !canMoveOut(props.moveOut, "right") && w > maxW ? maxW : w) + "px";
+        dialogEl.style.width = nw;
+        dialogEl.style.maxWidth = nw;
+        dialogEl.style.minWidth = nw;
+      }
+      if (props.resizable !== "horizontal") {
+        const h = distanceY + downH;
+        const maxH = wrapEl.clientHeight - dialogEl.offsetTop - fixTop;
+        const nh = (h < props.minHeight ? props.minHeight : !canMoveOut(props.moveOut, "bottom") && h > maxH ? maxH : h) + "px";
+        dialogEl.style.height = nh;
+        dialogEl.style.maxHeight = nh;
+        dialogEl.style.minHeight = nh;
+      }
+    },
+    end: () => {
+      if (dialogEl) {
+        dialogEl.style.userSelect = "";
+      }
+      downW = null;
+      downH = null;
+      dialogEl = null;
+      wrapEl = null;
+    },
+    touchmoveOptions: { passive: false }
+  });
+  return {
+    handleResizeMousedown: handleMousedown,
+    handleResizeTouchstart: handleTouchstart
+  };
+}
+function useDialogEvent(dialogRef, props, isFullscreen) {
+  const { handleHeaderMousedown, handleHeaderTouchstart } = useDialogMove(dialogRef, props, isFullscreen);
+  const { handleResizeMousedown, handleResizeTouchstart } = useDialogResize(dialogRef, props, isFullscreen);
+  let isInitPosition = true;
+  const getZIndex = () => {
+    return props.zIndex ?? 2e3;
+  };
+  const topDialog = (el) => {
+    var _a;
+    const dialogEl = el ?? getDialogEl(dialogRef);
+    const overlayEl = (_a = dialogEl == null ? void 0 : dialogEl.parentElement) == null ? void 0 : _a.parentElement;
+    if (!overlayEl) {
+      return;
+    }
+    const currentIndex = getCurrentStyle(overlayEl).zIndex;
+    const containerEl = overlayEl.parentElement;
+    const cls = `.${wrapperClass}:not(.${closedClass})`;
+    const dialogs = containerEl ? containerEl.querySelectorAll(cls) : void 0;
+    let maxIndex = 0;
+    (dialogs ? Array.from(dialogs) : []).forEach((dialogEl2) => {
+      const zIndex = getCurrentStyle(dialogEl2).zIndex;
+      if (zIndex != null) {
+        const index = Number(zIndex);
+        if (index >= maxIndex && (!overlayEl || dialogEl2 !== overlayEl)) {
+          maxIndex = index + 1;
+        }
+      }
+    });
+    if (maxIndex > Number(currentIndex || getZIndex() || 0)) {
+      overlayEl.style.zIndex = String(maxIndex);
+    }
+  };
+  const mousedownListener = (event) => {
+    if (props.multiple) {
+      topDialog(event.currentTarget);
+    }
+  };
+  const bindAutoTopEvent = () => {
+    const dialogEl = getDialogEl(dialogRef);
+    if (dialogEl) {
+      dialogEl.addEventListener("mousedown", mousedownListener);
+      dialogEl.addEventListener("touchstart", mousedownListener);
+    }
+  };
+  const unbindAutoTopEvent = () => {
+    const dialogEl = getDialogEl(dialogRef);
+    if (dialogEl) {
+      dialogEl.removeEventListener("mousedown", mousedownListener);
+      dialogEl.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 dialogEl = getDialogEl(dialogRef);
+      const margin = getPositionMargin(getPosition());
+      if (dialogEl && margin != null) {
+        dialogEl.style.margin = margin;
+      }
+    }
+  };
+  const resetDialogStyle = () => {
+    const dialogEl = getDialogEl(dialogRef);
+    if (dialogEl) {
+      const w = props.width;
+      dialogEl.style.margin = getPositionMargin(getPosition()) || "";
+      dialogEl.style.position = "";
+      dialogEl.style.top = "";
+      dialogEl.style.left = "";
+      dialogEl.style.right = "";
+      dialogEl.style.bottom = "";
+      dialogEl.style.height = "";
+      dialogEl.style.maxHeight = "";
+      dialogEl.style.minHeight = "";
+      dialogEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
+      dialogEl.style.maxWidth = "";
+      dialogEl.style.minWidth = "";
+    }
+  };
+  return {
+    handleHeaderMousedown,
+    handleHeaderTouchstart,
+    handleResizeMousedown,
+    handleResizeTouchstart,
+    bindAutoTopEvent,
+    unbindAutoTopEvent,
+    topDialog,
+    setInitPosition,
+    resetDialogStyle
+  };
+}
+export {
+  closedClass,
+  containerClass,
+  getDialogContainer,
+  useDialogEvent,
+  useDialogMove,
+  useDialogResize,
+  wrapperClass
+};

package/es/ele-dot/props.d.ts

@@ -0,0 +1,25 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { DotType } from './types';
+
+/**
+ * 属性
+ */
+export declare const dotProps: {
+    /** 类型 */
+    type: PropType<DotType>;
+    /** 自定义颜色 */
+    color: StringConstructor;
+    /** 是否显示水波动画 */
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 文本 */
+    text: StringConstructor;
+    /** 尺寸 */
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export type DotProps = ExtractPropTypes<typeof dotProps>;

package/es/ele-dot/props.js

@@ -0,0 +1,21 @@
+const dotProps = {
+  /** 类型 */
+  type: String,
+  /** 自定义颜色 */
+  color: String,
+  /** 是否显示水波动画 */
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  /** 文本 */
+  text: String,
+  /** 尺寸 */
+  size: {
+    type: String,
+    default: "6px"
+  }
+};
+export {
+  dotProps
+};

package/es/ele-dot/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-dot/style/index.js

@@ -0,0 +1 @@
+import "./index.scss";

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

@@ -0,0 +1,4 @@
+/**
+ * 类型
+ */
+export type DotType = 'primary' | 'success' | 'warning' | 'danger' | 'info';