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

Vue 3 UI Framework

{"version":3,"file":"useColors.mjs","sources":["../../../../src/composables/useColors.ts"],"sourcesContent":["import type { ColorVariables, CssColor } from '../services/color'\nimport { capitalize, computed } from 'vue'\nimport { useGlobalConfig } from '../services/global-config/global-config'\nimport { warn } from '../utils/console'\nimport { useCache } from './useCache'\nimport { useReactiveComputed } from './useReactiveComputed'\nimport {\n  getBoxShadowColor,\n  getBoxShadowColorFromBg,\n  getHoverColor,\n  getFocusColor,\n  getGradientBackground,\n  isColor,\n  shiftHSLAColor,\n  setHSLAColor,\n  isCSSVariable,\n  colorToRgba,\n  getStateMaskGradientBackground,\n  getColorLightness,\n  cssVariableName,\n  normalizeColorName,\n  type ColorInput,\n} from '../services/color/utils'\nimport { camelCaseToKebabCase } from '../utils/text-case'\n\n/**\n * You can add these props to any component by destructuring them inside props option.\n * @example\n * props: { ...useColorProps, 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 useColorProps = {\n  color: {\n    type: String,\n    default: '',\n  },\n}\n\nexport const useColors = () => {\n  const gc = useGlobalConfig()\n\n  if (!gc) {\n    throw new Error('useColors must be used in setup function or Vuestic GlobalConfigPlugin is not registered!')\n  }\n\n  const { globalConfig } = gc\n  const colors = useReactiveComputed<ColorVariables>({\n    get: () => globalConfig.value.colors!.presets[globalConfig.value.colors!.currentPresetName],\n    set: (v: ColorVariables) => { setColors(v) },\n  })\n\n  const setColors = (colors: Partial<ColorVariables>): void => {\n    globalConfig.value.colors!.presets[globalConfig.value.colors!.currentPresetName] = {\n      ...globalConfig.value.colors.variables,\n      ...colors,\n    } as ColorVariables\n  }\n\n  const getColors = (): ColorVariables => {\n    return colors\n  }\n\n  /**\n   * Returns color from config variables by name or return prop if color is a valid hex, hsl, hsla, rgb or rgba color.\n   * @param prop - should be color name or color in hex, hsl, hsla, rgb or rgba format.\n   * @param preferVariables - function should return (if possible) CSS variable instead of hex (hex is needed to set opacity).\n   * @param defaultColor - this color will be used if prop is invalid.\n   */\n  const getColor = (prop?: string, defaultColor?: string, preferVariables?: boolean): CssColor => {\n    if (!defaultColor) {\n      /**\n       * Most default color - fallback when nothing else is found.\n       */\n      defaultColor = colors.primary\n    }\n\n    if (prop === 'transparent') {\n      return '#ffffff00'\n    }\n\n    if (prop === 'currentColor') {\n      return prop\n    }\n\n    if (prop?.startsWith('on')) {\n      const colorName = prop.slice(2)\n\n      if (colors[normalizeColorName(colorName)]) {\n        return getColor(getTextColor(getColor(colorName)), undefined, preferVariables)\n      }\n    }\n\n    if (!prop) {\n      prop = getColor(defaultColor)\n    }\n\n    const colorValue = colors[prop] || colors[normalizeColorName(prop)]\n    if (colorValue) {\n      return preferVariables ? `var(${cssVariableName(prop)})` : colorValue\n    }\n\n    if (isColor(prop)) {\n      return prop\n    }\n\n    if (preferVariables && isCSSVariable(prop)) {\n      return prop\n    }\n\n    warn(`'${prop}' is not a proper color! Use HEX or default color themes\n      names (https://vuestic.dev/en/styles/colors#default-color-themes)`)\n\n    return getColor(defaultColor)\n  }\n\n  const getComputedColor = (color: string) => {\n    return computed({\n      get () { return getColor(color) },\n      set (v: string) { setColors({ [color]: v }) },\n    })\n  }\n\n  const colorsToCSSVariable = (colors: { [colorName: string]: string | undefined }, prefix = 'va') => {\n    return Object\n      .keys(colors)\n      .filter((key) => colors[key] !== undefined)\n      .reduce((acc: Record<string, any>, colorName: string) => {\n        acc[`--${prefix}-${camelCaseToKebabCase(colorName)}`] = getColor(colors[colorName], undefined, true)\n        acc[`--${prefix}-on-${camelCaseToKebabCase(colorName)}`] = getColor(getTextColor(getColor(colors[colorName]!)), undefined, true)\n        return acc\n      }, {})\n  }\n\n  const cache = useCache()\n\n  const getColorLightnessFromCache = (color: ColorInput) => {\n    if (typeof color !== 'string') {\n      return getColorLightness(color)\n    }\n\n    if (!cache.colorContrast[color]) {\n      cache.colorContrast[color] = getColorLightness(color)\n    }\n\n    return cache.colorContrast[color]\n  }\n\n  const computedDarkColor = computed(() => {\n    return getColorLightnessFromCache(getColor('textPrimary')) > (255 / 2) ? 'textInverted' : 'textPrimary'\n  })\n\n  const computedLightColor = computed(() => {\n    return getColorLightnessFromCache(getColor('textPrimary')) > (255 / 2) ? 'textPrimary' : 'textInverted'\n  })\n\n  const getTextColor = (color: ColorInput, darkColor?: string, lightColor?: string) => {\n    const onColorName = `on${capitalize(String(color))}`\n    if (colors[onColorName]) {\n      return colors[onColorName]\n    }\n\n    darkColor = darkColor || computedDarkColor.value\n    lightColor = lightColor || computedLightColor.value\n    return getColorLightnessFromCache(color) > globalConfig.value.colors.threshold ? darkColor : lightColor\n  }\n\n  const currentPresetName = computed<string>({\n    get: () => globalConfig.value.colors!.currentPresetName,\n    set: (v: string) => { applyPreset(v) },\n  })\n  const presets = computed(() => globalConfig.value.colors!.presets)\n\n  const applyPreset = (presetName: string) => {\n    globalConfig.value.colors!.currentPresetName = presetName\n\n    if (!globalConfig.value.colors!.presets[presetName]) {\n      return warn(`Preset ${presetName} does not exist`)\n    }\n  }\n\n  return {\n    colors,\n    currentPresetName,\n    presets,\n    applyPreset,\n    setColors,\n    getColors,\n    getColor,\n    getComputedColor,\n    getBoxShadowColor,\n    getBoxShadowColorFromBg,\n    getHoverColor,\n    getFocusColor,\n    getGradientBackground,\n    getTextColor,\n    shiftHSLAColor,\n    setHSLAColor,\n    colorsToCSSVariable,\n    colorToRgba,\n    getStateMaskGradientBackground,\n  }\n}\n\nexport * from '../services/color/utils'\nexport * from '../services/color'\n"],"names":["colors"],"mappings":"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"}