yuang-framework-ui-pc/lib/utils/hook.cjs

yuang-framework-ui-pc Library

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
function useTimer(ms, cb) {
  let timer = null;
  const waiting = vue.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);
  };
  vue.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();
  };
  vue.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);
  }
  vue.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);
  };
  vue.onBeforeUnmount(() => {
    unbindEvent();
  });
  return {
    handleMousedown,
    handleTouchstart
  };
}
exports.useCollapseAnim = useCollapseAnim;
exports.useMediaQuery = useMediaQuery;
exports.useMousewheel = useMousewheel;
exports.useMoveEvent = useMoveEvent;
exports.useTimer = useTimer;
exports.useTouchEvent = useTouchEvent;
exports.useWindowListener = useWindowListener;