y-element-ultra 0.0.2

package/es/utils/hook.js

@@ -0,0 +1,463 @@
+import { ref, onBeforeUnmount, computed, unref, onMounted, onActivated, onDeactivated, watch, provide, nextTick } from "vue";
+import { formItemContextKey } from "element-plus";
+import { useContentRatio } from "../y-viewer/util";
+import { capitalize, debounce, getValue } from "./common";
+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();
+    if ("addEventListener" in mediaQuery) {
+      mediaQuery.addEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+    }
+  };
+  const stopWatch = () => {
+    if ("removeEventListener" in mediaQuery) {
+      mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.removeListener(handleChange);
+    }
+    handleChange();
+  };
+  onBeforeUnmount(() => {
+    stopWatch();
+  });
+  return [mediaQuery, startWatch, stopWatch];
+}
+const mobileMediaQuery = "(max-width: 767.99px)";
+function useMobile(onChange) {
+  const mobile = ref(false);
+  const [media, startMedia, stopMedia] = useMediaQuery(mobileMediaQuery, () => {
+    const isMobile = media.matches;
+    if (mobile.value !== isMobile) {
+      mobile.value = isMobile;
+      onChange && onChange(isMobile);
+    }
+  });
+  startMedia();
+  return [mobile, startMedia, stopMedia];
+}
+function useMobileDevice(onChange) {
+  const mobileDevice = ref(false);
+  const [media, startMedia, stopMedia] = useMediaQuery(
+    "(pointer: coarse)",
+    () => {
+      const isMobileDevice = media.matches;
+      if (mobileDevice.value !== isMobileDevice) {
+        mobileDevice.value = isMobileDevice;
+        onChange && onChange(isMobileDevice);
+      }
+    }
+  );
+  startMedia();
+  return [mobileDevice, startMedia, stopMedia];
+}
+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
+  };
+}
+const modalItemContextKey = Symbol(
+  "modalItemContextKey"
+);
+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,
+      option?.touchstartOptions
+    );
+    el.addEventListener("touchmove", handleTouchMove, option?.touchmoveOptions);
+    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) => {
+    if (e.button !== 0) {
+      return;
+    }
+    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?.touchmoveOptions
+    );
+    document.addEventListener("touchend", touchendFn);
+  };
+  onBeforeUnmount(() => {
+    unbindEvent();
+  });
+  return { handleMousedown, handleTouchstart };
+}
+function useComponentEvents(events, emit) {
+  const emitMethods = {};
+  const emitProps = {};
+  (Array.isArray(events) ? events : Object.keys(events)).forEach((name) => {
+    emitMethods[name] = (...params) => {
+      emit(name, ...params);
+    };
+    emitProps[`on${capitalize(name)}`] = (...params) => {
+      emit(name, ...params);
+    };
+  });
+  return {
+    emitMethods,
+    emitProps
+  };
+}
+function useComponentExpose(componentRef, methodNames, refNames) {
+  const exposeValues = {};
+  methodNames.forEach((name) => {
+    exposeValues[name] = ((...args) => {
+      if (!componentRef.value) {
+        throw new Error("componentRef is null");
+      }
+      return componentRef.value[name](...args);
+    });
+  });
+  refNames.forEach((name) => {
+    exposeValues[name] = computed(() => {
+      const val = componentRef.value?.[name];
+      return val == null ? val : unref(val);
+    });
+  });
+  return exposeValues;
+}
+function useContentSlot() {
+  const customProps = ref();
+  const contentRatio = useContentRatio((merged) => {
+    customProps.value = merged;
+  });
+  return { ...contentRatio, customProps };
+}
+function useResizeObserver(option) {
+  const width = ref(0);
+  const height = ref(0);
+  const updateWrapSize = () => {
+    const el = option.getEl();
+    if (el) {
+      const w = Math.floor(el.clientWidth);
+      if (width.value !== w) {
+        width.value = w;
+        option.onWidthChange && option.onWidthChange(w);
+      }
+      const h = Math.floor(el.clientHeight);
+      if (height.value !== h) {
+        height.value = h;
+        option.onHeightChange && option.onHeightChange(h);
+      }
+    }
+  };
+  const observer = new ResizeObserver(
+    debounce(() => {
+      updateWrapSize();
+    }, 400)
+  );
+  const observe = () => {
+    unobserve();
+    const el = option.getEl();
+    if (el) {
+      observer.observe(el);
+    }
+  };
+  const unobserve = () => {
+    const el = option.getEl();
+    if (el) {
+      observer.unobserve(el);
+    }
+  };
+  const delayUpdateWrapSize = (delay) => {
+    if (delay == null) {
+      updateWrapSize();
+    } else if (delay === 0) {
+      nextTick(() => {
+        updateWrapSize();
+      });
+    } else if (delay > 0) {
+      setTimeout(() => {
+        updateWrapSize();
+      }, delay);
+    }
+  };
+  onMounted(() => {
+    delayUpdateWrapSize(option.mountedUpdateDelay);
+    observe();
+  });
+  onBeforeUnmount(() => {
+    observer.disconnect();
+  });
+  onActivated(() => {
+    delayUpdateWrapSize(option.activatedUpdateDelay);
+    observe();
+  });
+  onDeactivated(() => {
+    unobserve();
+  });
+  return [width, height, updateWrapSize];
+}
+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 useProOptions(props, name = "options") {
+  const optionData = ref([]);
+  const optionsProp = computed(() => getValue(props, name));
+  const reloadOptions = (params) => {
+    if (optionsProp.value != null) {
+      if (typeof optionsProp.value === "function") {
+        optionData.value = [];
+        optionsProp.value(params).then((data) => {
+          optionData.value = data || [];
+        });
+        return;
+      }
+      if (Array.isArray(optionsProp.value)) {
+        optionData.value = optionsProp.value;
+        return;
+      }
+    }
+    optionData.value = [];
+  };
+  watch(
+    () => optionsProp,
+    () => {
+      reloadOptions();
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+  return {
+    optionData,
+    reloadOptions
+  };
+}
+function useFormItemRest() {
+  provide(formItemContextKey, null);
+}
+export {
+  mobileMediaQuery,
+  modalItemContextKey,
+  useCollapseAnim,
+  useComponentEvents,
+  useComponentExpose,
+  useContentSlot,
+  useFormItemRest,
+  useMediaQuery,
+  useMobile,
+  useMobileDevice,
+  useMousewheel,
+  useMoveEvent,
+  useProOptions,
+  useResizeObserver,
+  useTimer,
+  useTouchEvent,
+  useWindowListener
+};

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

@@ -0,0 +1,22 @@
+import { RouteRecordRaw, _RouteRecordBase, RouteComponent } from 'vue-router';
+import { MenuItem } from '../y-pro-layout/types';
+
+/**
+ * 获取路由组件方法
+ */
+export type GetComponent = (component?: string, menu?: MenuItem, name?: string) => (() => Promise<RouteComponent>) | RouteComponent | undefined;
+/**
+ * 获取内嵌页面路由组件
+ * @param menu 菜单数据
+ * @param name 组件名称
+ */
+export declare function getIframeRouteComponent(menu: MenuItem, name: string): import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * 菜单数据转为路由数据
+ * @param menus 菜单数据
+ * @param getComponent 加载组件的方法
+ * @param added 已添加的路由
+ */
+export declare function menuToRoutes(menus: MenuItem[] | undefined, getComponent: GetComponent, added?: _RouteRecordBase[]): RouteRecordRaw[] | undefined;

package/es/utils/menu-util.js

@@ -0,0 +1,79 @@
+import { defineComponent, ref, computed, h } from "vue";
+import { useRoute } from "vue-router";
+import { useProLayoutState, getIframeSrc } from "../y-pro-layout/util";
+import { isExternalLink, findTree } from "./common";
+function getIframeRouteComponent(menu, name) {
+  return defineComponent({
+    name,
+    setup() {
+      const proLayoutState = useProLayoutState();
+      const route = useRoute();
+      const { fullPath } = route;
+      const iframeSrc = ref(getIframeSrc(fullPath, menu.component));
+      const isAlive = menu.meta?.keepAlive !== false;
+      const keepAlive = computed(() => !!proLayoutState.keepAlive);
+      return () => {
+        if (!isAlive || !keepAlive.value) {
+          return h("iframe", {
+            src: iframeSrc.value,
+            class: "y-admin-iframe"
+          });
+        }
+        return h("div", { class: "y-none", style: { display: "none" } });
+      };
+    }
+  });
+}
+function camelCase(str) {
+  const val = str.replace(/[-|/](\w)/g, (_, c) => c ? c.toUpperCase() : "");
+  return val.charAt(0).toUpperCase() + val.slice(1);
+}
+function pathIsAdd(path, data) {
+  return findTree(data, (d) => path === d.path) != null;
+}
+function getRoutePath(path) {
+  if (!path || !path.includes("?") || path.endsWith("?")) {
+    return path;
+  }
+  return path.substring(0, path.indexOf("?"));
+}
+function getRouteComponent(menu, name, func) {
+  if (!menu.component || !isExternalLink(menu.component)) {
+    return { component: func(menu.component, menu, name) };
+  }
+  return { component: getIframeRouteComponent(menu, name), link: true };
+}
+function menuToRoutes(menus, getComponent, added) {
+  if (!menus?.length) {
+    return;
+  }
+  const routes = [];
+  const addedRoutes = added ? [...added] : [];
+  menus.forEach((item) => {
+    const meta = { ...item.meta };
+    const path = meta.routePath || getRoutePath(item.path);
+    if (path && !isExternalLink(path) && !pathIsAdd(path, addedRoutes)) {
+      const name = item.name || camelCase(path);
+      const { component, link } = getRouteComponent(item, name, getComponent);
+      if (link) {
+        meta.iframe = item.component;
+        meta.hideFooter = true;
+      }
+      addedRoutes.push({ path });
+      routes.push({
+        name,
+        path,
+        component,
+        redirect: item.redirect,
+        props: item.props,
+        meta,
+        children: menuToRoutes(item.children, getComponent, addedRoutes)
+      });
+    }
+  });
+  return routes;
+}
+export {
+  getIframeRouteComponent,
+  menuToRoutes
+};

package/es/utils/message-box.d.ts

@@ -0,0 +1,25 @@
+import { AppContext } from 'vue';
+import { ElMessageBoxOptions, MessageBoxData as ElMessageBoxData } from 'element-plus';
+
+/**
+ * 消息弹窗配置
+ */
+export interface MessageBoxOptions extends ElMessageBoxOptions {
+    /** 是否限制在主体内部 */
+    inner?: boolean;
+}
+/**
+ * 消息弹窗方法
+ */
+export type MessageBoxMethod = (message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], options?: MessageBoxOptions, context?: AppContext | null) => Promise<ElMessageBoxData>;
+/**
+ * 消息弹窗
+ */
+export interface MessageBox {
+    (options?: MessageBoxOptions, context?: AppContext | null): Promise<ElMessageBoxData>;
+    alert: MessageBoxMethod;
+    confirm: MessageBoxMethod;
+    prompt: MessageBoxMethod;
+    close: () => void;
+}
+export declare function useMessageBox(globalOpt?: MessageBoxOptions): MessageBox;

package/es/utils/message-box.js

@@ -0,0 +1,97 @@
+import { getCurrentInstance, onActivated, onDeactivated, onBeforeUnmount, unref, h } from "vue";
+import { ElMessageBox } from "element-plus";
+import { useGlobalProps } from "../y-config-provider/receiver";
+import { useLayoutState } from "../y-pro-layout/util";
+import MessageBoxIcon from "../y-app/components/message-box-icon";
+import { omit } from "./common";
+function getWrapEl(bodyEl) {
+  const parent = bodyEl || document.body;
+  const className = "y-message-box-wrapper";
+  const elem = document.createElement("div");
+  elem.classList.add(className);
+  parent.appendChild(elem);
+  return elem;
+}
+function useMessageBox(globalOpt) {
+  const layoutState = useLayoutState();
+  const globalProps = useGlobalProps("messageBox");
+  const appContext = getCurrentInstance?.()?.appContext;
+  const state = { wrapEl: null, isActivated: true, id: 0 };
+  const instances = /* @__PURE__ */ new Map();
+  const hideClass = "is-hide";
+  onActivated(() => {
+    state.isActivated = true;
+    state.wrapEl && state.wrapEl.classList.remove(hideClass);
+  });
+  onDeactivated(() => {
+    state.isActivated = false;
+    state.wrapEl && state.wrapEl.classList.add(hideClass);
+  });
+  onBeforeUnmount(() => {
+    for (const [_key, insDoClose] of instances) {
+      insDoClose && insDoClose();
+    }
+    instances.clear();
+  });
+  const getOption = (options) => {
+    state.id++;
+    const msgId = `m_${state.id}`;
+    const opt = {
+      ...globalProps.value || {},
+      ...globalOpt || {},
+      ...options || {}
+    };
+    if (opt.inner) {
+      if (opt.appendTo == null && layoutState.modalsEl != null) {
+        if (state.wrapEl == null) {
+          state.wrapEl = getWrapEl(layoutState.modalsEl);
+        }
+        opt.appendTo = state.wrapEl;
+      } else if (opt.appendTo != null) {
+        opt.appendTo = unref(opt.appendTo);
+      }
+      opt.lockScroll = false;
+    } else if (opt.appendTo != null) {
+      opt.appendTo = unref(opt.appendTo);
+    }
+    const classes = ["y-message-box"];
+    if (opt.customClass) {
+      classes.push(opt.customClass);
+    }
+    opt.customClass = classes.join(" ");
+    opt.icon = h(MessageBoxIcon, {
+      type: opt.type,
+      icon: opt.icon,
+      boxId: msgId,
+      onBoxDestroy: (boxId) => {
+        boxId && instances.delete(boxId);
+      },
+      onBoxMounted: ({ boxId, doClose }) => {
+        boxId && instances.set(boxId, doClose);
+      }
+    });
+    return omit(opt, ["inner"]);
+  };
+  const messageBox = function(options) {
+    return ElMessageBox(getOption(options), appContext);
+  };
+  messageBox.alert = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.alert(message, title, getOption(options), ctx);
+  };
+  messageBox.confirm = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.confirm(message, title, getOption(options), ctx);
+  };
+  messageBox.prompt = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.prompt(message, title, getOption(options), ctx);
+  };
+  messageBox.close = function() {
+    return ElMessageBox.close();
+  };
+  return messageBox;
+}
+export {
+  useMessageBox
+};