vuestic-ui/dist/esm-node/src/composables/useSize.mjs.map

Vue 3 UI Framework

{"version":3,"file":"useSize.mjs","sources":["../../../../src/composables/useSize.ts"],"sourcesContent":["import { computed, getCurrentInstance, PropType } from 'vue'\n\nimport { useGlobalConfig, SizeConfig } from '../services/global-config/global-config'\nimport type { VuesticComponentName } from '../services/vue-plugin/types/components'\nimport { isNilValue } from '../utils/isNilValue'\n\nexport const sizesConfig: SizeConfig = {\n  defaultSize: 48,\n  sizes: {\n    small: 32,\n    medium: 48,\n    large: 64,\n  },\n}\n\nexport const fontSizesConfig: SizeConfig = {\n  defaultSize: 1,\n  sizes: {\n    small: 0.75,\n    medium: 1,\n    large: 1.25,\n  },\n}\n\ninterface SizeProps {\n  size: string | number;\n  sizesConfig: Record<string, any>;\n  fontSizesConfig: Record<string, any>;\n}\n\n/**\n * You could add these props to any component by destructuring them inside props option.\n * @example\n * props: { ...useSizeProps, componentsOwnProp, etc. }\n * It's better to add props at the beginning, to make sure that Component own props will be used instead in case of collision\n */\nexport const useSizeProps = {\n  size: {\n    type: [String, Number],\n    default: '',\n    validator: (size: string | number) => {\n      return typeof size === 'string' || typeof size === 'number'\n    },\n  },\n\n  sizesConfig: {\n    type: Object as PropType<Record<string, any>>,\n    default: () => sizesConfig,\n  },\n\n  fontSizesConfig: {\n    type: Object as PropType<Record<string, any>>,\n    default: () => fontSizesConfig,\n  },\n}\n\nconst fontRegex = /(?<fontSize>\\d+)(?<extension>px|rem)/i\n\nconst convertToRem = (px: number) => px / 16 - 0.5\n\nconst sizeToAbsolute = (size: unknown) => {\n  if (typeof size === 'number') { return `${size}px` }\n  return String(size)\n}\n\nconst doHaveSizesConfig = (props: any): props is { sizesConfig: SizeConfig } => 'sizesConfig' in props\n\nexport const useSizeRef = (props: {\n  size: string | number;\n  sizesConfig: Record<string, any>;\n}) => {\n  // TODO: Make sizes config service and use it here\n  const sizePropName = 'size'\n\n  return computed<string>(() => {\n    let sizePropValue = props[sizePropName]\n\n    if (doHaveSizesConfig(props)) {\n      const { defaultSize, sizes } = props.sizesConfig\n\n      if (isNilValue(sizePropValue)) {\n        sizePropValue = defaultSize\n      }\n\n      if (sizes) {\n        const sizeFromConfig = sizes[sizePropValue]\n        if (sizeFromConfig) { return sizeToAbsolute(sizeFromConfig) }\n      }\n    }\n\n    return sizeToAbsolute(sizePropValue)\n  })\n}\n\nexport const useSize = (\n  props: SizeProps,\n  componentName: string | undefined = getCurrentInstance()?.type.name,\n) => {\n  const { getGlobalConfig } = useGlobalConfig()\n\n  const sizesConfigGlobal = computed<SizeConfig>(() => {\n    return componentName\n      ? (getGlobalConfig().components as any)?.[componentName as VuesticComponentName]?.sizesConfig\n      : undefined\n  })\n\n  const sizeComputed = computed<string>(() => {\n    const { defaultSize, sizes } = props.sizesConfig\n    const defaultSizeGlobal = sizesConfigGlobal.value?.defaultSize\n\n    if (!props.size) { return `${defaultSize || defaultSizeGlobal}px` }\n\n    if (typeof props.size === 'string') {\n      const sizeFromGlobalConfig = sizesConfigGlobal.value?.sizes?.[props.size]\n      const sizeFromProps = sizes[props.size]\n\n      if (sizeFromProps) { return `${sizeFromProps}px` }\n      if (sizeFromGlobalConfig) { return `${sizeFromGlobalConfig}px` }\n\n      return props.size\n    }\n\n    return `${props.size}px`\n  })\n\n  const fontSizeInRem = computed<number>(() => {\n    const { defaultSize, sizes } = props.fontSizesConfig\n\n    if (!props.size) { return defaultSize }\n\n    if (typeof props.size === 'string') {\n      if (props.size in sizes) { return sizes[props.size] }\n\n      const fontSizeParsed = props.size.match(fontRegex)\n      if (!fontSizeParsed || !fontSizeParsed.groups) {\n        throw new Error('Size prop should be either valid string or number')\n      }\n\n      const { extension, fontSize } = fontSizeParsed.groups\n      return extension === 'rem' ? +fontSize : convertToRem(+fontSize)\n    }\n\n    return convertToRem(props.size)\n  })\n\n  const fontSizeComputed = computed<string>(() => `${fontSizeInRem.value}rem`)\n\n  return {\n    sizeComputed,\n    fontSizeComputed,\n    fontSizeInRem,\n  }\n}\n"],"names":["_a"],"mappings":"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"}