@fe6/water-pro/es/form-pro/src/hooks/use-breakpoint.js

An enterprise-class UI design language and Vue-based implementation

/** @format */
import { ref, computed, unref } from 'vue';
import { useEventListener } from '../../../_util/hooks/use-event-listener';
import { screenMap, sizeEnum, screenEnum } from '../enums/breakpoint';
var globalScreenRef;
var globalWidthRef;
var globalRealWidthRef;
export function useBreakpoint() {
  return {
    screenRef: computed(function () {
      return unref(globalScreenRef);
    }),
    widthRef: globalWidthRef,
    screenEnum: screenEnum,
    realWidthRef: globalRealWidthRef
  };
} // Just call it once

export function createBreakpointListen(fn) {
  var screenRef = ref(sizeEnum.XL);
  var realWidthRef = ref(window.innerWidth);

  function getWindowWidth() {
    var width = document.body.clientWidth;
    var xs = screenMap.get(sizeEnum.XS);
    var sm = screenMap.get(sizeEnum.SM);
    var md = screenMap.get(sizeEnum.MD);
    var lg = screenMap.get(sizeEnum.LG);
    var xl = screenMap.get(sizeEnum.XL);

    if (width < xs) {
      screenRef.value = sizeEnum.XS;
    } else if (width < sm) {
      screenRef.value = sizeEnum.SM;
    } else if (width < md) {
      screenRef.value = sizeEnum.MD;
    } else if (width < lg) {
      screenRef.value = sizeEnum.LG;
    } else if (width < xl) {
      screenRef.value = sizeEnum.XL;
    } else {
      screenRef.value = sizeEnum.XXL;
    }

    realWidthRef.value = width;
  }

  useEventListener({
    el: window,
    name: 'resize',
    listener: function listener() {
      getWindowWidth();
      resizeFn();
    }
  });
  getWindowWidth();
  globalScreenRef = computed(function () {
    return unref(screenRef);
  });
  globalWidthRef = computed(function () {
    return screenMap.get(unref(screenRef));
  });
  globalRealWidthRef = computed(function () {
    return unref(realWidthRef);
  });

  function resizeFn() {
    fn === null || fn === void 0 ? void 0 : fn({
      screen: globalScreenRef,
      width: globalWidthRef,
      realWidth: globalRealWidthRef,
      screenEnum: screenEnum,
      screenMap: screenMap,
      sizeEnum: sizeEnum
    });
  }

  resizeFn();
  return {
    screenRef: globalScreenRef,
    screenEnum: screenEnum,
    widthRef: globalWidthRef,
    realWidthRef: globalRealWidthRef
  };
}