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

Vue 3 UI Framework

{"version":3,"file":"create-service.mjs","sources":["../../../../../../src/services/breakpoint/plugin/create-service.ts"],"sourcesContent":["import { App, Ref, computed, watch, ComputedRef } from 'vue'\n\nimport { useDocument, useWindowSize, useReactiveComputed } from '../../../composables'\n\nimport { isClient } from '../../../utils/ssr'\nimport { warn } from '../../../utils/console'\nimport { generateUniqueId } from '../../../utils/uuid'\nimport { getGlobalProperty } from '../../vue-plugin/utils'\nimport { addOrUpdateStyleElement } from '../../../utils/dom'\n\nimport { GlobalConfig } from '../../global-config/types'\nimport { ThresholdsKey, BreakpointConfig, BodyClass, BreakpointServiceObject, BreakpointHelpers } from '../types'\n\nexport const createBreakpointConfigPlugin = (app: App): BreakpointServiceObject => {\n  const globalConfig: Ref<GlobalConfig> | undefined = getGlobalProperty(app, '$vaConfig')?.globalConfig\n  if (!globalConfig) {\n    warn('createBreakpointConfigPlugin: globalConfig is not defined!')\n    return {} as BreakpointServiceObject\n  }\n\n  const breakpointConfig: ComputedRef<BreakpointConfig> = computed(() => {\n    const breakpoint = globalConfig.value.breakpoint\n    if (!breakpoint) { warn('createBreakpointConfigPlugin: breakpointConfig is not defined!') }\n    return breakpoint ?? {} as BreakpointConfig\n  })\n\n  if (!breakpointConfig.value.enabled) {\n    return {} as BreakpointServiceObject\n  }\n\n  if (!breakpointConfig.value.thresholds || !Object.values(breakpointConfig.value.thresholds).length) {\n    warn('createBreakpointConfigPlugin: there are no defined thresholds!')\n    return {} as BreakpointServiceObject\n  }\n\n  const { windowSizes } = useWindowSize()\n\n  const isMounted = computed(isClient)\n  const currentBreakpoint = computed(() => {\n    if (!isMounted.value || !windowSizes.width) { return }\n\n    return Object.entries(breakpointConfig.value.thresholds).reduce((acc: string, [key, value]) => {\n      if (windowSizes.width! >= value) { acc = key }\n      return acc\n    }, 'xs') as unknown as ThresholdsKey\n  })\n\n  const screenClasses = computed(() =>\n    (Object.keys(breakpointConfig.value.thresholds) as ThresholdsKey[])\n      .reduce((acc: Record<ThresholdsKey, BodyClass>, threshold: ThresholdsKey) => {\n        acc[threshold] = `va-screen-${threshold}`\n        return acc\n      }, {} as Record<ThresholdsKey, BodyClass>))\n\n  const generateHelpersMediaCss = () => {\n    let result = ''\n\n    Object.values(breakpointConfig.value.thresholds)\n      .forEach((thresholdValue, index) => {\n        result += `@media screen and (min-width: ${thresholdValue}px) {`\n        // 0.2 coefficient for xs threshold and 1 for xl, experimental value for now\n        result += `:root { --va-media-ratio: ${(index + 1) * 0.2} }`\n        result += '}\\n'\n      })\n\n    return result\n  }\n\n  const uniqueId = computed(generateUniqueId)\n  addOrUpdateStyleElement(`va-helpers-media-${uniqueId.value}`, generateHelpersMediaCss)\n\n  const getDocument = useDocument()\n  watch(currentBreakpoint, (newValue) => {\n    if (!newValue || !breakpointConfig.value.bodyClass || !getDocument.value) { return }\n\n    getDocument.value.body.classList.forEach((className: string) => {\n      if ((Object.values(screenClasses.value) as string[]).includes(className)) {\n        getDocument.value!.body.classList.remove(className)\n      }\n    })\n\n    getDocument.value.body.classList.add(screenClasses.value[newValue])\n  }, { immediate: true })\n\n  const breakpointHelpers = computed(() => {\n    const isXs = currentBreakpoint.value === 'xs'\n    const isSm = currentBreakpoint.value === 'sm'\n    const isMd = currentBreakpoint.value === 'md'\n    const isLg = currentBreakpoint.value === 'lg'\n    const isXl = currentBreakpoint.value === 'xl'\n\n    return {\n      xs: isXs,\n      sm: isSm,\n      md: isMd,\n      lg: isLg,\n      xl: isXl,\n\n      smUp: isSm || isMd || isLg || isXl,\n      mdUp: isMd || isLg || isXl,\n      lgUp: isLg || isXl,\n\n      smDown: isXs || isSm,\n      mdDown: isXs || isSm || isMd,\n      lgDown: isXs || isSm || isMd || isLg,\n    }\n  }) as ComputedRef<BreakpointHelpers>\n\n  return useReactiveComputed<BreakpointServiceObject>(() => ({\n    width: windowSizes.width!,\n    height: windowSizes.height!,\n    current: currentBreakpoint.value!,\n    thresholds: breakpointConfig.value.thresholds,\n    ...breakpointHelpers.value,\n  }))\n}\n"],"names":[],"mappings":"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"}