vuestic-ui/dist/esm-node/src/services/breakpoint/plugin/create-service.mjs

Vue 3 UI Framework

import { computed, watch } from "vue";
import { b as isClient } from "../../../utils/ssr.mjs";
import { w as warn } from "../../../utils/console.mjs";
import { g as generateUniqueId } from "../../../utils/uuid.mjs";
import { a as addOrUpdateStyleElement } from "../../../utils/dom.mjs";
import { g as getGlobalProperty } from "../../vue-plugin/utils/global-properties.mjs";
import { u as useWindowSize } from "../../../composables/useWindowSize.mjs";
import { u as useReactiveComputed } from "../../../composables/useReactiveComputed.mjs";
import { u as useDocument } from "../../../composables/useDocument.mjs";
const createBreakpointConfigPlugin = (app) => {
  var _a;
  const globalConfig = (_a = getGlobalProperty(app, "$vaConfig")) == null ? void 0 : _a.globalConfig;
  if (!globalConfig) {
    warn("createBreakpointConfigPlugin: globalConfig is not defined!");
    return {};
  }
  const breakpointConfig = computed(() => {
    const breakpoint = globalConfig.value.breakpoint;
    if (!breakpoint) {
      warn("createBreakpointConfigPlugin: breakpointConfig is not defined!");
    }
    return breakpoint ?? {};
  });
  if (!breakpointConfig.value.enabled) {
    return {};
  }
  if (!breakpointConfig.value.thresholds || !Object.values(breakpointConfig.value.thresholds).length) {
    warn("createBreakpointConfigPlugin: there are no defined thresholds!");
    return {};
  }
  const { windowSizes } = useWindowSize();
  const isMounted = computed(isClient);
  const currentBreakpoint = computed(() => {
    if (!isMounted.value || !windowSizes.width) {
      return;
    }
    return Object.entries(breakpointConfig.value.thresholds).reduce((acc, [key, value]) => {
      if (windowSizes.width >= value) {
        acc = key;
      }
      return acc;
    }, "xs");
  });
  const screenClasses = computed(() => Object.keys(breakpointConfig.value.thresholds).reduce((acc, threshold) => {
    acc[threshold] = `va-screen-${threshold}`;
    return acc;
  }, {}));
  const generateHelpersMediaCss = () => {
    let result = "";
    Object.values(breakpointConfig.value.thresholds).forEach((thresholdValue, index) => {
      result += `@media screen and (min-width: ${thresholdValue}px) {`;
      result += `:root { --va-media-ratio: ${(index + 1) * 0.2} }`;
      result += "}\n";
    });
    return result;
  };
  const uniqueId = computed(generateUniqueId);
  addOrUpdateStyleElement(`va-helpers-media-${uniqueId.value}`, generateHelpersMediaCss);
  const getDocument = useDocument();
  watch(currentBreakpoint, (newValue) => {
    if (!newValue || !breakpointConfig.value.bodyClass || !getDocument.value) {
      return;
    }
    getDocument.value.body.classList.forEach((className) => {
      if (Object.values(screenClasses.value).includes(className)) {
        getDocument.value.body.classList.remove(className);
      }
    });
    getDocument.value.body.classList.add(screenClasses.value[newValue]);
  }, { immediate: true });
  const breakpointHelpers = computed(() => {
    const isXs = currentBreakpoint.value === "xs";
    const isSm = currentBreakpoint.value === "sm";
    const isMd = currentBreakpoint.value === "md";
    const isLg = currentBreakpoint.value === "lg";
    const isXl = currentBreakpoint.value === "xl";
    return {
      xs: isXs,
      sm: isSm,
      md: isMd,
      lg: isLg,
      xl: isXl,
      smUp: isSm || isMd || isLg || isXl,
      mdUp: isMd || isLg || isXl,
      lgUp: isLg || isXl,
      smDown: isXs || isSm,
      mdDown: isXs || isSm || isMd,
      lgDown: isXs || isSm || isMd || isLg
    };
  });
  return useReactiveComputed(() => ({
    width: windowSizes.width,
    height: windowSizes.height,
    current: currentBreakpoint.value,
    thresholds: breakpointConfig.value.thresholds,
    ...breakpointHelpers.value
  }));
};
export {
  createBreakpointConfigPlugin as c
};
//# sourceMappingURL=create-service.mjs.map