yuang-framework-ui-pc 1.0.20 → 1.1.0

package/es/utils/core.js

@@ -0,0 +1,318 @@
+function toTree(option) {
+  const data = option.data;
+  const idField = option.idField || "id";
+  const parentIdField = option.parentIdField || "parentId";
+  const childrenField = option.childrenField || "children";
+  const parentIdIsNull = option.parentId == null;
+  const parentId = parentIdIsNull ? [] : option.parentId;
+  const parentIdIsArray = Array.isArray(parentId);
+  const addParentIds = option.addParentIds;
+  const parentIdsField = option.parentIdsField || "parentIds";
+  const parentIds = option.parentIds ?? [];
+  if (data == null) {
+    return [];
+  }
+  if (parentIdIsNull) {
+    data.forEach((d) => {
+      if (!data.some((t) => d[parentIdField] == t[idField]) && !parentId.includes(d[parentIdField])) {
+        parentId.push(d[parentIdField]);
+      }
+    });
+  }
+  const result = [];
+  data.forEach((d) => {
+    if (d[idField] == d[parentIdField]) {
+      const error = {
+        [idField]: d[idField],
+        [parentIdField]: d[parentIdField],
+        data: d
+      };
+      console.error("data error:", error);
+      throw new Error("data error");
+    }
+    if (parentIdIsArray ? parentId.includes(d[parentIdField]) : d[parentIdField] == parentId) {
+      const t = { ...d };
+      const children = toTree({
+        data,
+        idField,
+        parentIdField,
+        childrenField,
+        parentId: d[idField],
+        addParentIds,
+        parentIdsField,
+        parentIds: [...parentIds, d[idField]]
+      });
+      if (children.length > 0) {
+        t[childrenField] = children;
+      }
+      if (addParentIds) {
+        t[parentIdsField] = parentIds;
+      }
+      result.push(t);
+    }
+  });
+  return result;
+}
+function eachTree(data, callback, childrenField = "children", parent) {
+  if (data) {
+    data.forEach((d, i) => {
+      var _a;
+      if (callback && callback(d, i, parent) !== false && ((_a = d[childrenField]) == null ? void 0 : _a.length)) {
+        eachTree(d[childrenField], callback, childrenField, d);
+      }
+    });
+  }
+}
+function mapTree(data, formatter, childrenField = "children", resultChildrenField = "children", parent) {
+  const result = [];
+  if (data && data.length) {
+    data.forEach((d, i) => {
+      const item = formatter(d, i, parent);
+      if (item) {
+        if (d[childrenField] != null) {
+          item[resultChildrenField] = mapTree(
+            d[childrenField],
+            formatter,
+            childrenField,
+            resultChildrenField,
+            item
+          );
+        }
+        result.push(item);
+      }
+    });
+  }
+  return result;
+}
+function findTree(data, predicate, childrenField) {
+  let temp;
+  eachTree(
+    data,
+    (d, i) => {
+      if (predicate(d, i)) {
+        temp = d;
+        return false;
+      }
+    },
+    childrenField
+  );
+  return temp;
+}
+function random(m, n) {
+  return Math.floor(Math.random() * (m - n) + n);
+}
+function uuid(length = 32, radix) {
+  const str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += str.charAt(Math.floor(Math.random() * (radix || str.length)));
+  }
+  return result;
+}
+function formatNumber(num) {
+  return String(num ?? "").replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,");
+}
+function assignObject(target, source, excludes) {
+  Object.keys(target).forEach((key) => {
+    var _a;
+    if (!((_a = excludes == null ? void 0 : excludes.includes) == null ? void 0 : _a.call(excludes, key))) {
+      target[key] = source[key];
+    }
+  });
+  return target;
+}
+function isExternalLink(url) {
+  return !!(url && (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//")));
+}
+function queryChild(parentEl, className, attr) {
+  return Array.from((parentEl == null ? void 0 : parentEl.children) ?? []).find((el) => {
+    if (className && !el.classList.contains(className)) {
+      return false;
+    }
+    if (attr != null && attr[0] != null) {
+      if (el.getAttribute(attr[0]) != attr[1]) {
+        return false;
+      }
+    }
+    return true;
+  });
+}
+function getCurrentStyle(el) {
+  return el["currentStyle"] || window.getComputedStyle(el, null) || {};
+}
+function contentIsEllipsis(el, direction) {
+  if (!el || !el.childNodes.length) {
+    return false;
+  }
+  const range = document.createRange();
+  range.setStart(el, 0);
+  range.setEnd(el, el.childNodes.length);
+  const { width, height } = range.getBoundingClientRect();
+  const floorW = Math.floor(width);
+  const rangeWidth = width - floorW < 8e-3 ? floorW : width;
+  const floorH = Math.floor(height);
+  const rangeHeight = height - floorH < 8e-3 ? floorH : height;
+  const style = getCurrentStyle(el);
+  const top = Number.parseInt(style.paddingTop) || 0;
+  const left = Number.parseInt(style.paddingLeft) || 0;
+  const right = Number.parseInt(style.paddingRight) || 0;
+  const bottom = Number.parseInt(style.paddingBottom) || 0;
+  const horizontalPadding = left + right;
+  const verticalPadding = top + bottom;
+  if (direction === "horizontal") {
+    return rangeWidth + horizontalPadding > el.offsetWidth || el.scrollWidth > el.offsetWidth;
+  }
+  if (direction === "vertical") {
+    return rangeHeight + verticalPadding > el.offsetHeight || el.scrollHeight > el.offsetHeight;
+  }
+  return rangeWidth + horizontalPadding > el.offsetWidth || rangeHeight + verticalPadding > el.offsetHeight || el.scrollWidth > el.offsetWidth;
+}
+function checkFullscreen() {
+  return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
+}
+function exitFullscreen() {
+  const func = document.exitFullscreen || document.exitFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.msExitFullscreen;
+  func && func.call(document);
+}
+function requestFullscreen(el) {
+  if (el == null) {
+    el = document.documentElement;
+  }
+  const func = el.requestFullscreen || el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
+  if (!func) {
+    throw new Error("您的浏览器不支持全屏模式");
+  }
+  func.call(el);
+}
+function bd09ToGcj02(point) {
+  const x_pi = 3.141592653589793 * 3e3 / 180;
+  const x = point.lng - 65e-4;
+  const y = point.lat - 6e-3;
+  const z = Math.sqrt(x * x + y * y) - 2e-5 * Math.sin(y * x_pi);
+  const theta = Math.atan2(y, x) - 3e-6 * Math.cos(x * x_pi);
+  return {
+    lng: z * Math.cos(theta),
+    lat: z * Math.sin(theta)
+  };
+}
+function gcj02ToBd09(point) {
+  const x_pi = 3.141592653589793 * 3e3 / 180;
+  const x = point.lng;
+  const y = point.lat;
+  const z = Math.sqrt(x * x + y * y) + 2e-5 * Math.sin(y * x_pi);
+  const theta = Math.atan2(y, x) + 3e-6 * Math.cos(x * x_pi);
+  return {
+    lng: z * Math.cos(theta) + 65e-4,
+    lat: z * Math.sin(theta) + 6e-3
+  };
+}
+async function copyText(text) {
+  var _a;
+  if (typeof ((_a = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : _a.writeText) === "function") {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const el = document.createElement("textarea");
+  el.value = text;
+  el.style.position = "fixed";
+  el.style.top = "-200px";
+  el.style.left = "-200px";
+  el.style.width = "100px";
+  el.style.height = "100px";
+  document.body.appendChild(el);
+  el.focus();
+  el.select();
+  if (!document.execCommand("copy")) {
+    el.remove();
+    return Promise.reject(new Error("浏览器不支持复制"));
+  }
+  el.remove();
+}
+function getValue(data, path, defaultValue) {
+  if (data == null) {
+    return defaultValue;
+  }
+  const pathType = typeof path;
+  if (pathType === "function") {
+    return path(data);
+  }
+  const fields = (pathType === "string" ? path.match(/[^\[\].]+/g) : path) ?? [];
+  let result = data;
+  for (const key of fields) {
+    result = result[key.trim()];
+  }
+  return typeof result === "undefined" ? defaultValue : result;
+}
+function debounce(func, wait) {
+  let timer = void 0;
+  const debounced = function(...args) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      func.apply(this, args);
+      timer = void 0;
+    }, wait);
+  };
+  return debounced;
+}
+function throttle(func, wait, trailing) {
+  let timer = void 0;
+  const debounced = function(...args) {
+    if (!timer) {
+      if (!trailing) {
+        func.apply(this, args);
+      }
+      timer = setTimeout(() => {
+        if (trailing) {
+          func.apply(this, args);
+        }
+        timer = void 0;
+      }, wait);
+    }
+  };
+  return debounced;
+}
+function omit(obj, fields) {
+  const result = Object.assign({}, obj);
+  if (obj) {
+    for (const key of fields) {
+      delete result[key];
+    }
+  }
+  return result;
+}
+function pick(obj, fields) {
+  const result = {};
+  if (obj) {
+    for (const key of fields) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+export {
+  assignObject,
+  bd09ToGcj02,
+  checkFullscreen,
+  contentIsEllipsis,
+  copyText,
+  debounce,
+  eachTree,
+  exitFullscreen,
+  findTree,
+  formatNumber,
+  gcj02ToBd09,
+  getCurrentStyle,
+  getValue,
+  isExternalLink,
+  mapTree,
+  omit,
+  pick,
+  queryChild,
+  random,
+  requestFullscreen,
+  throttle,
+  toTree,
+  uuid
+};

package/es/utils/hook.d.ts

@@ -0,0 +1,113 @@
+import { Ref } from 'vue';
+
+/**
+ * useTimer 返回结果
+ */
+export type UseTimerResult = [
+    (callback?: () => void, timeout?: number) => void,
+    () => void,
+    Ref<boolean>
+];
+/**
+ * 定时器
+ * @param ms 等待时间
+ * @param cb 执行方法
+ */
+export declare function useTimer(ms?: number | (() => number), cb?: () => void): UseTimerResult;
+/**
+ * useMediaQuery 返回结果
+ */
+export type UseMediaQueryResult = [MediaQueryList, () => void, () => void];
+/**
+ * 媒体查询
+ * @param query 媒体查询字符串
+ * @param onChange 改变回调
+ */
+export declare function useMediaQuery(query: string, onChange?: () => void): UseMediaQueryResult;
+/**
+ * 窗口事件监听
+ * @param event 事件
+ * @param listener 回调
+ */
+export declare function useWindowListener(event: string | EventListenerOrEventListenerObject, listener?: EventListenerOrEventListenerObject): void;
+/**
+ * 折叠展开动画
+ */
+export declare function useCollapseAnim(): {
+    handleBeforeEnter: (el: HTMLElement) => void;
+    handleEnter: (el: HTMLElement) => void;
+    handleAfterEnter: (el: HTMLElement) => void;
+    handleBeforeLeave: (el: HTMLElement) => void;
+    handleLeave: (el: HTMLElement) => void;
+    handleAfterLeave: (el: HTMLElement) => void;
+};
+/**
+ * 鼠标滚轮事件回调方法参数
+ */
+export interface UseMousewheelCallbackParam {
+    /** 事件对象 */
+    e: MouseEvent;
+    /** 方向 */
+    direction: 'up' | 'down';
+}
+/**
+ * 鼠标滚轮事件
+ * @param cb 回调
+ */
+export declare function useMousewheel(cb?: (p: UseMousewheelCallbackParam) => void): {
+    handleMousewheel: (e: MouseEvent) => void;
+    handleFirefoxMousewheel: (e: MouseEvent) => void;
+    bindMousewheel: (el: HTMLElement) => void;
+    unbindMousewheel: (el: HTMLElement) => void;
+};
+/**
+ * 触摸事件回调参数
+ */
+export interface UseTouchEventCallbackParam<T> {
+    /** 事件对象 */
+    e: T;
+    /** 开始横向位置 */
+    startX: number | null;
+    /** 开始纵向位置 */
+    startY: number | null;
+    /** 横向移动距离 */
+    distanceX?: number | null;
+    /** 纵向移动距离 */
+    distanceY?: number | null;
+}
+/**
+ * 触摸事件参数
+ */
+export interface UseTouchEventOption<T> {
+    /** 触摸开始的回调 */
+    start?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** 触摸移动的回调 */
+    move?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** 触摸结束的回调 */
+    end?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** touchmove 事件参数 */
+    touchmoveOptions?: any;
+}
+/**
+ * 触摸事件
+ * @param option 参数
+ */
+export declare function useTouchEvent(option?: UseTouchEventOption<TouchEvent>): {
+    handleTouchStart: (e: TouchEvent) => void;
+    handleTouchMove: (e: TouchEvent) => void;
+    handleTouchEnd: (e: TouchEvent) => void;
+    bindTouchEvent: (el: HTMLElement) => void;
+    unbindTouchEvent: (el: HTMLElement) => void;
+};
+/**
+ * 移动事件对象
+ */
+export type MoveEvent = MouseEvent | TouchEvent;
+/**
+ * 鼠标移动事件或触摸移动事件
+ * @param option 参数
+ */
+export declare function useMoveEvent(option?: UseTouchEventOption<MoveEvent>): {
+    handleMousedown: (e: MouseEvent) => void;
+    handleTouchstart: (e: TouchEvent) => void;
+};

package/es/utils/hook.js

@@ -0,0 +1,264 @@
+import { ref, onBeforeUnmount } from "vue";
+function useTimer(ms, cb) {
+  let timer = null;
+  const waiting = ref(false);
+  const stopTimer = () => {
+    if (timer != null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    waiting.value = false;
+  };
+  const startTimer = (callback, timeout) => {
+    stopTimer();
+    waiting.value = true;
+    const to = timeout ?? (typeof ms === "function" ? ms() : ms);
+    timer = setTimeout(() => {
+      const func = callback ?? cb;
+      func && func();
+      waiting.value = false;
+    }, to);
+  };
+  onBeforeUnmount(() => {
+    stopTimer();
+  });
+  return [startTimer, stopTimer, waiting];
+}
+function useMediaQuery(query, onChange) {
+  const mediaQuery = window.matchMedia(query);
+  const handleChange = () => {
+    onChange && onChange();
+  };
+  const startWatch = () => {
+    stopWatch();
+    mediaQuery.addEventListener("change", handleChange);
+  };
+  const stopWatch = () => {
+    mediaQuery.removeEventListener("change", handleChange);
+    handleChange();
+  };
+  onBeforeUnmount(() => {
+    stopWatch();
+  });
+  return [mediaQuery, startWatch, stopWatch];
+}
+function useWindowListener(event, listener) {
+  const eventName = typeof event === "string" ? event : "resize";
+  const callback = typeof event === "function" ? event : listener;
+  if (callback != null) {
+    window.addEventListener(eventName, callback);
+  }
+  onBeforeUnmount(() => {
+    if (callback != null) {
+      window.removeEventListener(eventName, callback);
+    }
+  });
+}
+function useCollapseAnim() {
+  let enterHeight = 0;
+  const getHeight = (el, isEnter) => {
+    if (!isEnter) {
+      return Math.max(el.offsetHeight, el.scrollHeight);
+    }
+    return Math.max(el.offsetHeight, el.scrollHeight, enterHeight);
+  };
+  const handleBeforeEnter = (el) => {
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.style.maxHeight = "0px";
+    el.style.paddingTop = "0px";
+    el.style.paddingBottom = "0px";
+  };
+  const handleEnter = (el) => {
+    el.dataset.oldOverflow = el.style.overflow;
+    el.style.maxHeight = `${getHeight(el, true)}px`;
+    el.style.paddingTop = el.dataset.oldPaddingTop ?? "";
+    el.style.paddingBottom = el.dataset.oldPaddingBottom ?? "";
+    el.style.overflow = "hidden";
+  };
+  const handleAfterEnter = (el) => {
+    el.style.maxHeight = "";
+    el.style.overflow = el.dataset.oldOverflow ?? "";
+  };
+  const handleBeforeLeave = (el) => {
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldOverflow = el.style.overflow;
+    enterHeight = getHeight(el);
+    el.style.maxHeight = `${enterHeight}px`;
+    el.style.overflow = "hidden";
+  };
+  const handleLeave = (el) => {
+    el.style.maxHeight = "0px";
+    el.style.paddingTop = "0px";
+    el.style.paddingBottom = "0px";
+  };
+  const handleAfterLeave = (el) => {
+    el.style.maxHeight = "";
+    el.style.overflow = el.dataset.oldOverflow ?? "";
+    el.style.paddingTop = el.dataset.oldPaddingTop ?? "";
+    el.style.paddingBottom = el.dataset.oldPaddingBottom ?? "";
+  };
+  return {
+    handleBeforeEnter,
+    handleEnter,
+    handleAfterEnter,
+    handleBeforeLeave,
+    handleLeave,
+    handleAfterLeave
+  };
+}
+function useMousewheel(cb) {
+  const handleMousewheel = (e) => {
+    const delta = e.wheelDelta || e.detail;
+    cb && cb({ e, direction: delta > 0 ? "up" : "down" });
+  };
+  const handleFirefoxMousewheel = (e) => {
+    const delta = e.wheelDelta || e.detail;
+    cb && cb({ e, direction: delta < 0 ? "up" : "down" });
+  };
+  const bindMousewheel = (el) => {
+    el.addEventListener("mousewheel", handleMousewheel, { passive: false });
+    el.addEventListener("DOMMouseScroll", handleFirefoxMousewheel);
+  };
+  const unbindMousewheel = (el) => {
+    el.removeEventListener("mousewheel", handleMousewheel);
+    el.removeEventListener("DOMMouseScroll", handleFirefoxMousewheel);
+  };
+  return {
+    handleMousewheel,
+    handleFirefoxMousewheel,
+    bindMousewheel,
+    unbindMousewheel
+  };
+}
+function useTouchEvent(option) {
+  let startX = null;
+  let startY = null;
+  let distanceX = null;
+  let distanceY = null;
+  const handleTouchStart = (e) => {
+    startX = e.touches[0].clientX;
+    startY = e.touches[0].clientY;
+    if (option && option.start) {
+      option.start({ e, startX, startY });
+    }
+  };
+  const handleTouchMove = (e) => {
+    if (startX != null && startY != null) {
+      const currentX = e.touches[0].clientX;
+      const currentY = e.touches[0].clientY;
+      distanceX = currentX - startX;
+      distanceY = currentY - startY;
+      if (option && option.move) {
+        option.move({ e, startX, startY, distanceX, distanceY });
+      }
+    }
+  };
+  const handleTouchEnd = (e) => {
+    if (option && option.end) {
+      option.end({ e, startX, startY, distanceX, distanceY });
+    }
+    startX = null;
+    startY = null;
+    distanceX = null;
+    distanceY = null;
+  };
+  const bindTouchEvent = (el) => {
+    el.addEventListener("touchstart", handleTouchStart);
+    el.addEventListener("touchmove", handleTouchMove);
+    el.addEventListener("touchend", handleTouchEnd);
+  };
+  const unbindTouchEvent = (el) => {
+    el.removeEventListener("touchstart", handleTouchStart);
+    el.removeEventListener("touchmove", handleTouchMove);
+    el.removeEventListener("touchend", handleTouchEnd);
+  };
+  return {
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    bindTouchEvent,
+    unbindTouchEvent
+  };
+}
+function useMoveEvent(option) {
+  let startX = null;
+  let startY = null;
+  let distanceX = null;
+  let distanceY = null;
+  const unbindEvent = () => {
+    document.removeEventListener("mousemove", mousemoveFn);
+    document.removeEventListener("mouseup", mouseupFn);
+    document.removeEventListener("touchmove", touchmoveFn);
+    document.removeEventListener("touchend", touchendFn);
+  };
+  const emitStart = (clientX, clientY, e) => {
+    startX = clientX;
+    startY = clientY;
+    if (option && option.start) {
+      option.start({ e, startX, startY });
+    }
+  };
+  const emitMove = (currentX, currentY, e) => {
+    if (startX != null && startY != null) {
+      distanceX = currentX - startX;
+      distanceY = currentY - startY;
+      if (option && option.move) {
+        option.move({ e, startX, startY, distanceX, distanceY });
+      }
+    }
+  };
+  const emitEnd = (e) => {
+    unbindEvent();
+    if (option && option.end) {
+      option.end({ e, startX, startY, distanceX, distanceY });
+    }
+    startX = null;
+    startY = null;
+    distanceX = null;
+    distanceY = null;
+  };
+  const mousemoveFn = function(e) {
+    emitMove(e.clientX, e.clientY, e);
+  };
+  const touchmoveFn = function(e) {
+    emitMove(e.touches[0].clientX, e.touches[0].clientY, e);
+  };
+  const mouseupFn = (e) => {
+    emitEnd(e);
+  };
+  const touchendFn = (e) => {
+    emitEnd(e);
+  };
+  const handleMousedown = (e) => {
+    emitStart(e.clientX, e.clientY, e);
+    document.addEventListener("mousemove", mousemoveFn);
+    document.addEventListener("mouseup", mouseupFn);
+  };
+  const handleTouchstart = (e) => {
+    emitStart(e.touches[0].clientX, e.touches[0].clientY, e);
+    document.addEventListener(
+      "touchmove",
+      touchmoveFn,
+      option == null ? void 0 : option.touchmoveOptions
+    );
+    document.addEventListener("touchend", touchendFn);
+  };
+  onBeforeUnmount(() => {
+    unbindEvent();
+  });
+  return {
+    handleMousedown,
+    handleTouchstart
+  };
+}
+export {
+  useCollapseAnim,
+  useMediaQuery,
+  useMousewheel,
+  useMoveEvent,
+  useTimer,
+  useTouchEvent,
+  useWindowListener
+};

package/es/utils/menu-util.d.ts

@@ -0,0 +1,14 @@
+import { RouteRecordRaw, _RouteRecordBase, RouteComponent } from 'vue-router';
+import { MenuItem } from '../ele-pro-layout/types';
+
+/**
+ * 获取路由组件方法
+ */
+export type GetComponent = (component?: string, menu?: MenuItem, name?: string) => (() => Promise<RouteComponent>) | RouteComponent | undefined;
+/**
+ * 菜单数据转为路由数据
+ * @param menus 菜单数据
+ * @param getComponent 加载组件的方法
+ * @param added 已添加的路由
+ */
+export declare function menuToRoutes(menus: MenuItem[] | undefined, getComponent: GetComponent, added?: _RouteRecordBase[]): RouteRecordRaw[] | undefined;