@bitrix24/b24ui-nuxt/dist/runtime/composables/useDevice.js

Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE

import { useState } from "#imports";
import { computed, readonly } from "vue";
import { createSharedComposable, useMediaQuery, breakpointsTailwind } from "@vueuse/core";
const _useDevice = () => {
  const platform = useState("platform", () => ({}));
  const isWeb = computed(() => platform.value.name === "web");
  const isBitrixMobile = computed(() => platform.value.name === "bitrix-mobile");
  const isBitrixDesktop = computed(() => platform.value.name === "bitrix-desktop");
  const mediaQueries = {
    "sm": useMediaQuery(`(min-width: ${breakpointsTailwind["sm"]}px)`),
    "md": useMediaQuery(`(min-width: ${breakpointsTailwind["md"]}px)`),
    "lg": useMediaQuery(`(min-width: ${breakpointsTailwind["lg"]}px)`),
    "xl": useMediaQuery(`(min-width: ${breakpointsTailwind["xl"]}px)`),
    "2xl": useMediaQuery(`(min-width: ${breakpointsTailwind["2xl"]}px)`)
  };
  const screen = computed(() => {
    const sm = mediaQueries.sm.value;
    const md = mediaQueries.md.value;
    const lg = mediaQueries.lg.value;
    const xl = mediaQueries.xl.value;
    const xl2 = mediaQueries["2xl"].value;
    let current = "xs";
    if (xl2) current = "2xl";
    else if (xl) current = "xl";
    else if (lg) current = "lg";
    else if (md) current = "md";
    else if (sm) current = "sm";
    else current = "xs";
    return {
      current,
      "xs": !sm,
      sm,
      md,
      lg,
      xl,
      "2xl": xl2,
      "isMobile": !md,
      "isTablet": md && !lg,
      "isDesktop": lg,
      "isLargeDesktop": xl2
    };
  });
  return {
    // Platform data
    platform: readonly(platform),
    version: computed(() => platform.value.version),
    // Platform flags
    isWeb,
    isBitrixMobile,
    isBitrixDesktop,
    // Screen information
    screen
  };
};
export const useDevice = /* @__PURE__ */ createSharedComposable(_useDevice);