@opensig/opendesign/lib/hooks/use-screen.js

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const is = require("../_utils/is.js");
const global = require("../_utils/global.js");
const DEFAULT_SCREEN_SIZE = 1920;
const useScreen = () => {
  const width = vue.ref(DEFAULT_SCREEN_SIZE);
  const isPhoneSize = vue.computed(() => width.value <= global.mediaPoint.value.phone);
  const isPadSize = vue.computed(() => width.value > global.mediaPoint.value.phone && width.value <= global.mediaPoint.value.pad);
  const isPhonePadSize = vue.computed(() => {
    return isPadSize.value || isPhoneSize.value;
  });
  const isPhonePad = vue.computed(() => {
    return is.isTouchDevice && isPhonePadSize.value;
  });
  const onResize = () => {
    width.value = window.innerWidth;
  };
  vue.onMounted(() => {
    onResize();
    window.addEventListener("resize", onResize);
  });
  vue.onUnmounted(() => {
    window.removeEventListener("resize", onResize);
  });
  const isPhone = vue.computed(() => width.value <= global.mediaPoint.value[global.Breakpoints.Phone]);
  const gtPhone = vue.computed(() => width.value > global.mediaPoint.value[global.Breakpoints.Phone]);
  const lePadV = vue.computed(() => width.value <= global.mediaPoint.value[global.Breakpoints.PadV]);
  const isPadV = vue.computed(() => gtPhone.value && lePadV.value);
  const gtPadV = vue.computed(() => width.value > global.mediaPoint.value[global.Breakpoints.PadV]);
  const lePadH = vue.computed(() => width.value <= global.mediaPoint.value[global.Breakpoints.PadH]);
  const isPadH = vue.computed(() => gtPadV.value && lePadH.value);
  const gtPadH = vue.computed(() => width.value > global.mediaPoint.value[global.Breakpoints.PadH]);
  const leLaptop = vue.computed(() => width.value <= global.mediaPoint.value[global.Breakpoints.Laptop]);
  const isLaptop = vue.computed(() => gtPadH.value && leLaptop.value);
  const gtLaptop = vue.computed(() => width.value > global.mediaPoint.value[global.Breakpoints.Laptop]);
  const lePc = vue.computed(() => width.value <= global.mediaPoint.value[global.Breakpoints.Pc]);
  const isPc = vue.computed(() => gtLaptop.value && lePc.value);
  const gtPc = vue.computed(() => width.value > global.mediaPoint.value[global.Breakpoints.Pc]);
  return {
    isTouchDevice: is.isTouchDevice,
    // 旧断点（已废弃，保留向后兼容）
    isPhoneSize,
    isPadSize,
    isPhonePadSize,
    isPhonePad,
    // 新断点
    isPhone,
    gtPhone,
    lePadV,
    isPadV,
    gtPadV,
    lePadH,
    isPadH,
    gtPadH,
    leLaptop,
    isLaptop,
    gtLaptop,
    lePc,
    isPc,
    gtPc
  };
};
exports.useScreen = useScreen;