winbox-ui-next/es/color-picker/src/utils.js

We Design Vue 2.0: A Vue.js 3 UI Library

import { toHexaString, rgba, toHslaString, rgb2hsl, toHsvaString, rgb2hsv, toRgbaString, hsla, hsl2rgb, hsl2hsv, hsva, hsv2rgb, hsv2hsl } from "seemly";
function deriveDefaultValue(modes, showAlpha) {
  const mode = modes[0];
  switch (mode) {
    case "hex":
      return showAlpha ? "#2055f4FF" : "#2055f4";
    case "rgb":
      return showAlpha ? "rgba(32, 85, 244, 1)" : "rgb(32, 85, 244)";
    case "hsl":
      return showAlpha ? "hsla(255, 91%, 54%, 1)" : "hsl(255, 91%, 54%)";
    case "hsv":
      return showAlpha ? "hsva(0, 0%, 0%, 1)" : "hsv(0, 0%, 0%)";
  }
  return "##2055f4";
}
function getModeFromValue(color) {
  if (color === null)
    return null;
  if (/^ *#/.test(color))
    return "hex";
  if (color.includes("rgb"))
    return "rgb";
  if (color.includes("hsl"))
    return "hsl";
  if (color.includes("hsv"))
    return "hsv";
  return null;
}
function normalizeHue(hue) {
  hue = Math.round(hue);
  return hue >= 360 ? 359 : hue < 0 ? 0 : hue;
}
function normalizeAlpha(alpha) {
  alpha = Math.round(alpha * 100) / 100;
  return alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
}
const convert = {
  rgb: {
    hex(value) {
      return toHexaString(rgba(value));
    },
    hsl(value) {
      const [r, g, b, a] = rgba(value);
      return toHslaString([...rgb2hsl(r, g, b), a]);
    },
    hsv(value) {
      const [r, g, b, a] = rgba(value);
      return toHsvaString([...rgb2hsv(r, g, b), a]);
    }
  },
  hex: {
    rgb(value) {
      return toRgbaString(rgba(value));
    },
    hsl(value) {
      const [r, g, b, a] = rgba(value);
      return toHslaString([...rgb2hsl(r, g, b), a]);
    },
    hsv(value) {
      const [r, g, b, a] = rgba(value);
      return toHsvaString([...rgb2hsv(r, g, b), a]);
    }
  },
  hsl: {
    hex(value) {
      const [h, s, l, a] = hsla(value);
      return toHexaString([...hsl2rgb(h, s, l), a]);
    },
    rgb(value) {
      const [h, s, l, a] = hsla(value);
      return toRgbaString([...hsl2rgb(h, s, l), a]);
    },
    hsv(value) {
      const [h, s, l, a] = hsla(value);
      return toHsvaString([...hsl2hsv(h, s, l), a]);
    }
  },
  hsv: {
    hex(value) {
      const [h, s, v, a] = hsva(value);
      return toHexaString([...hsv2rgb(h, s, v), a]);
    },
    rgb(value) {
      const [h, s, v, a] = hsva(value);
      return toRgbaString([...hsv2rgb(h, s, v), a]);
    },
    hsl(value) {
      const [h, s, v, a] = hsva(value);
      return toHslaString([...hsv2hsl(h, s, v), a]);
    }
  }
};
function convertColor(value, mode, originalMode) {
  originalMode = originalMode || getModeFromValue(value);
  if (!originalMode)
    return null;
  if (originalMode === mode)
    return value;
  const conversions = convert[originalMode];
  return conversions[mode](value);
}
export { convertColor, deriveDefaultValue, getModeFromValue, normalizeAlpha, normalizeHue };