@vuesax-alpha/nightly/lib/utils/color.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../constants/index.js');
var error = require('./error.js');
var color = require('../constants/color.js');

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$1) => color.vuesaxColors.includes(color$1);
const isHexColor = (color$1) => color.leadingHashRE.test(color$1) && [4, 7, 5, 9].includes(color$1.length);
const isRgbColor = (color$1) => color.rgbRE.test(color$1);
const isRGBNumbers = (color$1) => color.rgbNumberRE.test(color$1);
const hexToRgb = (color$1) => {
  color$1 = color$1.replace(
    color.hexShorthandRE,
    (_, r, g, b) => r + r + g + g + b + b
  );
  const res = color.hexFullRE.exec(color$1);
  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;
  error.debugWarn(
    "Invalid Color",
    "Vuesax only accepts colors like hex, rgb, rgba or rgb number"
  );
  return false;
};
const getVsColor = (colorRef, namespace = "vs") => {
  const color$1 = vue.unref(colorRef);
  if (!color$1)
    return "";
  const isRGB = color.rgbRE.test(color$1);
  const isRGBNumbers2 = color.rgbNumberRE.test(color$1);
  const isHEX = color.leadingHashRE.test(color$1);
  let newColor = "";
  if (isRGB) {
    const arrayColor = color$1.replace(/[rgba()]/g, "").split(",");
    newColor = `${arrayColor[0]}, ${arrayColor[1]}, ${arrayColor[2]}`;
  } else if (isHEX) {
    const rgb = hexToRgb(color$1);
    newColor = `${rgb == null ? void 0 : rgb.r}, ${rgb == null ? void 0 : rgb.g}, ${rgb == null ? void 0 : rgb.b}`;
  } else if (isVsColor(color$1)) {
    newColor = `var(--${namespace}-${color$1})`;
  } else if (isRGBNumbers2) {
    newColor = color$1;
  }
  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);
    }
  }
};

exports.acceptColor = acceptColor;
exports.getCssVariable = getCssVariable;
exports.getVsColor = getVsColor;
exports.hexToRgb = hexToRgb;
exports.isColorDark = isColorDark;
exports.isHexColor = isHexColor;
exports.isRGBNumbers = isRGBNumbers;
exports.isRgbColor = isRgbColor;
exports.isVsColor = isVsColor;
exports.setColor = setColor;
exports.setCssVar = setCssVar;
//# sourceMappingURL=color.js.map