@vuesax-alpha/nightly/es/utils/color.mjs

A Component Library for Vue 3

import { unref } from 'vue';
import '../constants/index.mjs';
import { debugWarn } from './error.mjs';
import { vuesaxColors, leadingHashRE, rgbRE, rgbNumberRE, hexShorthandRE, hexFullRE } from '../constants/color.mjs';

const getCssVariable = (el, property) => {
  return getComputedStyle(el).getPropertyValue(property);
};
const isColorDark = (color) => {
  if (color === void 0 || color === false)
    return false;
  return color === "dark" || color === true;
};
const isVsColor = (color) => vuesaxColors.includes(color);
const isHexColor = (color) => leadingHashRE.test(color) && [4, 7, 5, 9].includes(color.length);
const isRgbColor = (color) => rgbRE.test(color);
const isRGBNumbers = (color) => rgbNumberRE.test(color);
const hexToRgb = (color) => {
  color = color.replace(
    hexShorthandRE,
    (_, r, g, b) => r + r + g + g + b + b
  );
  const res = hexFullRE.exec(color);
  return res ? {
    r: Number.parseInt(res[1], 16),
    g: Number.parseInt(res[2], 16),
    b: Number.parseInt(res[3], 16)
  } : null;
};
const setColor = (colorName, color, el, addClass, namespace = "vs") => {
  let newColor;
  if (color == "dark" && el) {
    if (addClass) {
      el.classList.add(`${namespace}-component-dark`);
    }
  }
  if (isRgbColor(color)) {
    const arrayColor = color.replace(/[rgba()]/g, "").split(",");
    newColor = `${arrayColor[0]},${arrayColor[1]},${arrayColor[2]}`;
    setCssVar(colorName, newColor, el);
    if (addClass) {
      el.classList.add(`${namespace}-change-color`);
    }
  } else if (isHexColor(color)) {
    const rgb = hexToRgb(color);
    newColor = `${rgb.r},${rgb.g},${rgb.b}`;
    setCssVar(colorName, newColor, el);
    if (addClass) {
      el.classList.add(`${namespace}-change-color`);
    }
  } else if (isVsColor(color)) {
    const style = window.getComputedStyle(document.body);
    newColor = style.getPropertyValue(`--${namespace}-${color}`);
    setCssVar(colorName, newColor, el);
    if (addClass) {
      el.classList.add(`${namespace}-change-color`);
    }
  } else if (isRGBNumbers(color)) {
    setCssVar(colorName, color, el);
    if (addClass) {
      el.classList.add(`${namespace}-change-color`);
    }
  }
};
const acceptColor = (color) => {
  const isValid = isVsColor(color) || isHexColor(color) || isRgbColor(color);
  if (isValid)
    return true;
  debugWarn(
    "Invalid Color",
    "Vuesax only accepts colors like hex, rgb, rgba or rgb number"
  );
  return false;
};
const getVsColor = (colorRef, namespace = "vs") => {
  const color = unref(colorRef);
  if (!color)
    return "";
  const isRGB = rgbRE.test(color);
  const isRGBNumbers2 = rgbNumberRE.test(color);
  const isHEX = leadingHashRE.test(color);
  let newColor = "";
  if (isRGB) {
    const arrayColor = color.replace(/[rgba()]/g, "").split(",");
    newColor = `${arrayColor[0]}, ${arrayColor[1]}, ${arrayColor[2]}`;
  } else if (isHEX) {
    const rgb = hexToRgb(color);
    newColor = `${rgb == null ? void 0 : rgb.r}, ${rgb == null ? void 0 : rgb.g}, ${rgb == null ? void 0 : rgb.b}`;
  } else if (isVsColor(color)) {
    newColor = `var(--${namespace}-${color})`;
  } else if (isRGBNumbers2) {
    newColor = color;
  }
  return newColor;
};
const setCssVar = (propertyName, value, el, namespace = "vs") => {
  if (!el && (document == null ? void 0 : document.documentElement)) {
    document.documentElement.style.setProperty(
      `--${namespace}-${propertyName}`,
      value
    );
  } else {
    if ((el == null ? void 0 : el.nodeName) !== "#comment") {
      el == null ? void 0 : el.style.setProperty(`--${namespace}-${propertyName}`, value);
    }
  }
};

export { acceptColor, getCssVariable, getVsColor, hexToRgb, isColorDark, isHexColor, isRGBNumbers, isRgbColor, isVsColor, setColor, setCssVar };
//# sourceMappingURL=color.mjs.map