tav-ui/lib/packages/hooks/event/useBreakpoint2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var breakpointEnum = require('../../enums/breakpointEnum2.js');
var useEventListener = require('./useEventListener2.js');

let globalScreenRef;
let globalWidthRef;
let globalRealWidthRef;
function useBreakpoint() {
  return {
    screenRef: vue.computed(() => vue.unref(globalScreenRef)),
    widthRef: globalWidthRef,
    screenEnum: breakpointEnum.screenEnum,
    realWidthRef: globalRealWidthRef
  };
}
function createBreakpointListen(fn) {
  const screenRef = vue.ref(breakpointEnum.sizeEnum.XL);
  const realWidthRef = vue.ref(window.innerWidth);
  function getWindowWidth() {
    const width = document.body.clientWidth;
    const xs = breakpointEnum.screenMap.get(breakpointEnum.sizeEnum.XS);
    const sm = breakpointEnum.screenMap.get(breakpointEnum.sizeEnum.SM);
    const md = breakpointEnum.screenMap.get(breakpointEnum.sizeEnum.MD);
    const lg = breakpointEnum.screenMap.get(breakpointEnum.sizeEnum.LG);
    const xl = breakpointEnum.screenMap.get(breakpointEnum.sizeEnum.XL);
    if (width < xs)
      screenRef.value = breakpointEnum.sizeEnum.XS;
    else if (width < sm)
      screenRef.value = breakpointEnum.sizeEnum.SM;
    else if (width < md)
      screenRef.value = breakpointEnum.sizeEnum.MD;
    else if (width < lg)
      screenRef.value = breakpointEnum.sizeEnum.LG;
    else if (width < xl)
      screenRef.value = breakpointEnum.sizeEnum.XL;
    else
      screenRef.value = breakpointEnum.sizeEnum.XXL;
    realWidthRef.value = width;
  }
  useEventListener.useEventListener({
    el: window,
    name: "resize",
    listener: () => {
      getWindowWidth();
      resizeFn();
    }
  });
  getWindowWidth();
  globalScreenRef = vue.computed(() => vue.unref(screenRef));
  globalWidthRef = vue.computed(() => breakpointEnum.screenMap.get(vue.unref(screenRef)));
  globalRealWidthRef = vue.computed(() => vue.unref(realWidthRef));
  function resizeFn() {
    fn?.({
      screen: globalScreenRef,
      width: globalWidthRef,
      realWidth: globalRealWidthRef,
      screenEnum: breakpointEnum.screenEnum,
      screenMap: breakpointEnum.screenMap,
      sizeEnum: breakpointEnum.sizeEnum
    });
  }
  resizeFn();
  return {
    screenRef: globalScreenRef,
    screenEnum: breakpointEnum.screenEnum,
    widthRef: globalWidthRef,
    realWidthRef: globalRealWidthRef
  };
}

exports.createBreakpointListen = createBreakpointListen;
exports.useBreakpoint = useBreakpoint;
//# sourceMappingURL=useBreakpoint2.js.map