sun-select-color 0.1.5 → 0.1.7

package/dist/sun-select-color.es.js

@@ -1,5 +1,1288 @@
-import { ref as d, computed as B, watch as x, onMounted as f, onBeforeUnmount as m, createElementBlock as E, openBlock as n, createElementVNode as s, normalizeStyle as a, withModifiers as p, createCommentVNode as v, toDisplayString as w, unref as y, Fragment as k, renderList as _ } from "vue";
-const L = [
+import { createElementBlock as f, openBlock as p, normalizeStyle as x, resolveComponent as D, createElementVNode as h, createVNode as C, withDirectives as fe, vModelText as pe, toDisplayString as K, normalizeClass as le, createCommentVNode as S, Fragment as Z, renderList as he, ref as V, computed as T, watch as R, onMounted as te, onBeforeUnmount as ge, withModifiers as P, unref as re, nextTick as ve } from "vue";
+const Fe = "";
+function B(e, t) {
+  t === void 0 && (t = {});
+  var r = t.insertAt;
+  if (!(!e || typeof document > "u")) {
+    var n = document.head || document.getElementsByTagName("head")[0], i = document.createElement("style");
+    i.type = "text/css", r === "top" && n.firstChild ? n.insertBefore(i, n.firstChild) : n.appendChild(i), i.styleSheet ? i.styleSheet.cssText = e : i.appendChild(document.createTextNode(e));
+  }
+}
+const _ = function(e, t) {
+  const { componentPrefix: r = Fe } = t || {};
+  e.component(`${r}${this.name}`, this);
+}, W = {};
+var H = {
+  name: "Checkboard",
+  props: {
+    size: {
+      type: [Number, String],
+      default: 8
+    },
+    white: {
+      type: String,
+      default: "#fff"
+    },
+    grey: {
+      type: String,
+      default: "#e6e6e6"
+    }
+  },
+  computed: {
+    bgStyle() {
+      return {
+        "background-image": `url(${me(this.white, this.grey, this.size)})`
+      };
+    }
+  }
+};
+function be(e, t, r) {
+  if (typeof document > "u")
+    return null;
+  const n = document.createElement("canvas");
+  n.width = n.height = r * 2;
+  const i = n.getContext("2d");
+  return i ? (i.fillStyle = e, i.fillRect(0, 0, n.width, n.height), i.fillStyle = t, i.fillRect(0, 0, r, r), i.translate(r, r), i.fillRect(0, 0, r, r), n.toDataURL()) : null;
+}
+function me(e, t, r) {
+  const n = `${e},${t},${r}`;
+  if (W[n])
+    return W[n];
+  const i = be(e, t, r);
+  return W[n] = i, i;
+}
+function Ce(e, t, r, n, i, a) {
+  return p(), f(
+    "div",
+    {
+      class: "vc-checkerboard",
+      style: x(a.bgStyle)
+    },
+    null,
+    4
+    /* STYLE */
+  );
+}
+var xe = ".vc-checkerboard{background-size:contain;bottom:0;left:0;position:absolute;right:0;top:0}";
+B(xe);
+H.render = Ce;
+H.__file = "src/components/checkboard/checkboard.vue";
+H.install = _;
+var I = {
+  name: "Alpha",
+  components: {
+    Checkboard: H
+  },
+  props: {
+    value: Object,
+    onChange: Function
+  },
+  computed: {
+    colors() {
+      return this.value;
+    },
+    gradientColor() {
+      const { rgba: e } = this.colors, t = [e.r, e.g, e.b].join(",");
+      return `linear-gradient(to right, rgba(${t}, 0) 0%, rgba(${t}, 1) 100%)`;
+    }
+  },
+  methods: {
+    handleChange(e, t) {
+      !t && e.preventDefault();
+      const { container: r } = this.$refs;
+      if (!r)
+        return;
+      const n = r.clientWidth, i = r.getBoundingClientRect().left + window.pageXOffset, o = (e.pageX || (e.touches ? e.touches[0].pageX : 0)) - i;
+      let s;
+      o < 0 ? s = 0 : o > n ? s = 1 : s = Math.round(o * 100 / n) / 100, this.colors.a !== s && this.$emit("change", {
+        h: this.colors.hsl.h,
+        s: this.colors.hsl.s,
+        l: this.colors.hsl.l,
+        a: s,
+        source: "rgba"
+      });
+    },
+    handleMouseDown(e) {
+      this.handleChange(e, !0), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+    },
+    handleMouseUp() {
+      this.unbindEventListeners();
+    },
+    unbindEventListeners() {
+      window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+    }
+  }
+};
+const Ee = { class: "vc-alpha" }, we = { class: "vc-alpha-checkboard-wrap" }, ke = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-alpha-picker" },
+  null,
+  -1
+  /* HOISTED */
+), ye = [
+  ke
+];
+function Ae(e, t, r, n, i, a) {
+  const o = D("Checkboard");
+  return p(), f("div", Ee, [
+    h("div", we, [
+      C(o)
+    ]),
+    h(
+      "div",
+      {
+        class: "vc-alpha-gradient",
+        style: x({ background: a.gradientColor })
+      },
+      null,
+      4
+      /* STYLE */
+    ),
+    h(
+      "div",
+      {
+        ref: "container",
+        class: "vc-alpha-container",
+        onMousedown: t[0] || (t[0] = (...s) => a.handleMouseDown && a.handleMouseDown(...s)),
+        onTouchmove: t[1] || (t[1] = (...s) => a.handleChange && a.handleChange(...s)),
+        onTouchstart: t[2] || (t[2] = (...s) => a.handleChange && a.handleChange(...s))
+      },
+      [
+        h(
+          "div",
+          {
+            class: "vc-alpha-pointer",
+            style: x({ left: `${a.colors.a * 100}%` })
+          },
+          ye,
+          4
+          /* STYLE */
+        )
+      ],
+      544
+      /* HYDRATE_EVENTS, NEED_PATCH */
+    )
+  ]);
+}
+var De = ".vc-alpha,.vc-alpha-checkboard-wrap{bottom:0;left:0;position:absolute;right:0;top:0}.vc-alpha-checkboard-wrap{overflow:hidden}.vc-alpha-gradient{bottom:0;left:0;position:absolute;right:0;top:0}.vc-alpha-container{cursor:pointer;height:100%;margin:0 3px;position:relative;z-index:2}.vc-alpha-pointer{position:absolute;z-index:2}.vc-alpha-picker{background:#fff;border-radius:1px;box-shadow:0 0 2px rgba(0,0,0,.6);cursor:pointer;height:8px;margin-top:1px;transform:translateX(-2px);width:4px}";
+B(De);
+I.render = Ae;
+I.__file = "src/components/alpha/alpha.vue";
+I.install = _;
+function v(e, t) {
+  Be(e) && (e = "100%");
+  var r = _e(e);
+  return e = t === 360 ? e : Math.min(t, Math.max(0, parseFloat(e))), r && (e = parseInt(String(e * t), 10) / 100), Math.abs(e - t) < 1e-6 ? 1 : (t === 360 ? e = (e < 0 ? e % t + t : e % t) / parseFloat(String(t)) : e = e % t / parseFloat(String(t)), e);
+}
+function $(e) {
+  return Math.min(1, Math.max(0, e));
+}
+function Be(e) {
+  return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
+}
+function _e(e) {
+  return typeof e == "string" && e.indexOf("%") !== -1;
+}
+function ce(e) {
+  return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
+}
+function L(e) {
+  return e <= 1 ? "".concat(Number(e) * 100, "%") : e;
+}
+function A(e) {
+  return e.length === 1 ? "0" + e : String(e);
+}
+function Me(e, t, r) {
+  return {
+    r: v(e, 255) * 255,
+    g: v(t, 255) * 255,
+    b: v(r, 255) * 255
+  };
+}
+function ne(e, t, r) {
+  e = v(e, 255), t = v(t, 255), r = v(r, 255);
+  var n = Math.max(e, t, r), i = Math.min(e, t, r), a = 0, o = 0, s = (n + i) / 2;
+  if (n === i)
+    o = 0, a = 0;
+  else {
+    var c = n - i;
+    switch (o = s > 0.5 ? c / (2 - n - i) : c / (n + i), n) {
+      case e:
+        a = (t - r) / c + (t < r ? 6 : 0);
+        break;
+      case t:
+        a = (r - e) / c + 2;
+        break;
+      case r:
+        a = (e - t) / c + 4;
+        break;
+    }
+    a /= 6;
+  }
+  return { h: a, s: o, l: s };
+}
+function X(e, t, r) {
+  return r < 0 && (r += 1), r > 1 && (r -= 1), r < 1 / 6 ? e + (t - e) * (6 * r) : r < 1 / 2 ? t : r < 2 / 3 ? e + (t - e) * (2 / 3 - r) * 6 : e;
+}
+function Se(e, t, r) {
+  var n, i, a;
+  if (e = v(e, 360), t = v(t, 100), r = v(r, 100), t === 0)
+    i = r, a = r, n = r;
+  else {
+    var o = r < 0.5 ? r * (1 + t) : r + t - r * t, s = 2 * r - o;
+    n = X(s, o, e + 1 / 3), i = X(s, o, e), a = X(s, o, e - 1 / 3);
+  }
+  return { r: n * 255, g: i * 255, b: a * 255 };
+}
+function ae(e, t, r) {
+  e = v(e, 255), t = v(t, 255), r = v(r, 255);
+  var n = Math.max(e, t, r), i = Math.min(e, t, r), a = 0, o = n, s = n - i, c = n === 0 ? 0 : s / n;
+  if (n === i)
+    a = 0;
+  else {
+    switch (n) {
+      case e:
+        a = (t - r) / s + (t < r ? 6 : 0);
+        break;
+      case t:
+        a = (r - e) / s + 2;
+        break;
+      case r:
+        a = (e - t) / s + 4;
+        break;
+    }
+    a /= 6;
+  }
+  return { h: a, s: c, v: o };
+}
+function He(e, t, r) {
+  e = v(e, 360) * 6, t = v(t, 100), r = v(r, 100);
+  var n = Math.floor(e), i = e - n, a = r * (1 - t), o = r * (1 - i * t), s = r * (1 - (1 - i) * t), c = n % 6, F = [r, o, a, a, s, r][c], g = [s, r, r, o, a, a][c], u = [a, a, s, r, r, o][c];
+  return { r: F * 255, g: g * 255, b: u * 255 };
+}
+function ie(e, t, r, n) {
+  var i = [
+    A(Math.round(e).toString(16)),
+    A(Math.round(t).toString(16)),
+    A(Math.round(r).toString(16))
+  ];
+  return n && i[0].startsWith(i[0].charAt(1)) && i[1].startsWith(i[1].charAt(1)) && i[2].startsWith(i[2].charAt(1)) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) : i.join("");
+}
+function Te(e, t, r, n, i) {
+  var a = [
+    A(Math.round(e).toString(16)),
+    A(Math.round(t).toString(16)),
+    A(Math.round(r).toString(16)),
+    A(Re(n))
+  ];
+  return i && a[0].startsWith(a[0].charAt(1)) && a[1].startsWith(a[1].charAt(1)) && a[2].startsWith(a[2].charAt(1)) && a[3].startsWith(a[3].charAt(1)) ? a[0].charAt(0) + a[1].charAt(0) + a[2].charAt(0) + a[3].charAt(0) : a.join("");
+}
+function Re(e) {
+  return Math.round(parseFloat(e) * 255).toString(16);
+}
+function oe(e) {
+  return b(e) / 255;
+}
+function b(e) {
+  return parseInt(e, 16);
+}
+function $e(e) {
+  return {
+    r: e >> 16,
+    g: (e & 65280) >> 8,
+    b: e & 255
+  };
+}
+var J = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkgrey: "#a9a9a9",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  goldenrod: "#daa520",
+  gold: "#ffd700",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavenderblush: "#fff0f5",
+  lavender: "#e6e6fa",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightgrey: "#d3d3d3",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32"
+};
+function Le(e) {
+  var t = { r: 0, g: 0, b: 0 }, r = 1, n = null, i = null, a = null, o = !1, s = !1;
+  return typeof e == "string" && (e = Oe(e)), typeof e == "object" && (w(e.r) && w(e.g) && w(e.b) ? (t = Me(e.r, e.g, e.b), o = !0, s = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : w(e.h) && w(e.s) && w(e.v) ? (n = L(e.s), i = L(e.v), t = He(e.h, n, i), o = !0, s = "hsv") : w(e.h) && w(e.s) && w(e.l) && (n = L(e.s), a = L(e.l), t = Se(e.h, n, a), o = !0, s = "hsl"), Object.prototype.hasOwnProperty.call(e, "a") && (r = e.a)), r = ce(r), {
+    ok: o,
+    format: e.format || s,
+    r: Math.min(255, Math.max(t.r, 0)),
+    g: Math.min(255, Math.max(t.g, 0)),
+    b: Math.min(255, Math.max(t.b, 0)),
+    a: r
+  };
+}
+var Ie = "[-\\+]?\\d+%?", Ne = "[-\\+]?\\d*\\.\\d+%?", y = "(?:".concat(Ne, ")|(?:").concat(Ie, ")"), j = "[\\s|\\(]+(".concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")\\s*\\)?"), Y = "[\\s|\\(]+(".concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")\\s*\\)?"), E = {
+  CSS_UNIT: new RegExp(y),
+  rgb: new RegExp("rgb" + j),
+  rgba: new RegExp("rgba" + Y),
+  hsl: new RegExp("hsl" + j),
+  hsla: new RegExp("hsla" + Y),
+  hsv: new RegExp("hsv" + j),
+  hsva: new RegExp("hsva" + Y),
+  hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+  hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+  hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+  hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+};
+function Oe(e) {
+  if (e = e.trim().toLowerCase(), e.length === 0)
+    return !1;
+  var t = !1;
+  if (J[e])
+    e = J[e], t = !0;
+  else if (e === "transparent")
+    return { r: 0, g: 0, b: 0, a: 0, format: "name" };
+  var r = E.rgb.exec(e);
+  return r ? { r: r[1], g: r[2], b: r[3] } : (r = E.rgba.exec(e), r ? { r: r[1], g: r[2], b: r[3], a: r[4] } : (r = E.hsl.exec(e), r ? { h: r[1], s: r[2], l: r[3] } : (r = E.hsla.exec(e), r ? { h: r[1], s: r[2], l: r[3], a: r[4] } : (r = E.hsv.exec(e), r ? { h: r[1], s: r[2], v: r[3] } : (r = E.hsva.exec(e), r ? { h: r[1], s: r[2], v: r[3], a: r[4] } : (r = E.hex8.exec(e), r ? {
+    r: b(r[1]),
+    g: b(r[2]),
+    b: b(r[3]),
+    a: oe(r[4]),
+    format: t ? "name" : "hex8"
+  } : (r = E.hex6.exec(e), r ? {
+    r: b(r[1]),
+    g: b(r[2]),
+    b: b(r[3]),
+    format: t ? "name" : "hex"
+  } : (r = E.hex4.exec(e), r ? {
+    r: b(r[1] + r[1]),
+    g: b(r[2] + r[2]),
+    b: b(r[3] + r[3]),
+    a: oe(r[4] + r[4]),
+    format: t ? "name" : "hex8"
+  } : (r = E.hex3.exec(e), r ? {
+    r: b(r[1] + r[1]),
+    g: b(r[2] + r[2]),
+    b: b(r[3] + r[3]),
+    format: t ? "name" : "hex"
+  } : !1)))))))));
+}
+function w(e) {
+  return !!E.CSS_UNIT.exec(String(e));
+}
+var ze = (
+  /** @class */
+  function() {
+    function e(t, r) {
+      t === void 0 && (t = ""), r === void 0 && (r = {});
+      var n;
+      if (t instanceof e)
+        return t;
+      typeof t == "number" && (t = $e(t)), this.originalInput = t;
+      var i = Le(t);
+      this.originalInput = t, this.r = i.r, this.g = i.g, this.b = i.b, this.a = i.a, this.roundA = Math.round(100 * this.a) / 100, this.format = (n = r.format) !== null && n !== void 0 ? n : i.format, this.gradientType = r.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = i.ok;
+    }
+    return e.prototype.isDark = function() {
+      return this.getBrightness() < 128;
+    }, e.prototype.isLight = function() {
+      return !this.isDark();
+    }, e.prototype.getBrightness = function() {
+      var t = this.toRgb();
+      return (t.r * 299 + t.g * 587 + t.b * 114) / 1e3;
+    }, e.prototype.getLuminance = function() {
+      var t = this.toRgb(), r, n, i, a = t.r / 255, o = t.g / 255, s = t.b / 255;
+      return a <= 0.03928 ? r = a / 12.92 : r = Math.pow((a + 0.055) / 1.055, 2.4), o <= 0.03928 ? n = o / 12.92 : n = Math.pow((o + 0.055) / 1.055, 2.4), s <= 0.03928 ? i = s / 12.92 : i = Math.pow((s + 0.055) / 1.055, 2.4), 0.2126 * r + 0.7152 * n + 0.0722 * i;
+    }, e.prototype.getAlpha = function() {
+      return this.a;
+    }, e.prototype.setAlpha = function(t) {
+      return this.a = ce(t), this.roundA = Math.round(100 * this.a) / 100, this;
+    }, e.prototype.isMonochrome = function() {
+      var t = this.toHsl().s;
+      return t === 0;
+    }, e.prototype.toHsv = function() {
+      var t = ae(this.r, this.g, this.b);
+      return { h: t.h * 360, s: t.s, v: t.v, a: this.a };
+    }, e.prototype.toHsvString = function() {
+      var t = ae(this.r, this.g, this.b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), i = Math.round(t.v * 100);
+      return this.a === 1 ? "hsv(".concat(r, ", ").concat(n, "%, ").concat(i, "%)") : "hsva(".concat(r, ", ").concat(n, "%, ").concat(i, "%, ").concat(this.roundA, ")");
+    }, e.prototype.toHsl = function() {
+      var t = ne(this.r, this.g, this.b);
+      return { h: t.h * 360, s: t.s, l: t.l, a: this.a };
+    }, e.prototype.toHslString = function() {
+      var t = ne(this.r, this.g, this.b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), i = Math.round(t.l * 100);
+      return this.a === 1 ? "hsl(".concat(r, ", ").concat(n, "%, ").concat(i, "%)") : "hsla(".concat(r, ", ").concat(n, "%, ").concat(i, "%, ").concat(this.roundA, ")");
+    }, e.prototype.toHex = function(t) {
+      return t === void 0 && (t = !1), ie(this.r, this.g, this.b, t);
+    }, e.prototype.toHexString = function(t) {
+      return t === void 0 && (t = !1), "#" + this.toHex(t);
+    }, e.prototype.toHex8 = function(t) {
+      return t === void 0 && (t = !1), Te(this.r, this.g, this.b, this.a, t);
+    }, e.prototype.toHex8String = function(t) {
+      return t === void 0 && (t = !1), "#" + this.toHex8(t);
+    }, e.prototype.toHexShortString = function(t) {
+      return t === void 0 && (t = !1), this.a === 1 ? this.toHexString(t) : this.toHex8String(t);
+    }, e.prototype.toRgb = function() {
+      return {
+        r: Math.round(this.r),
+        g: Math.round(this.g),
+        b: Math.round(this.b),
+        a: this.a
+      };
+    }, e.prototype.toRgbString = function() {
+      var t = Math.round(this.r), r = Math.round(this.g), n = Math.round(this.b);
+      return this.a === 1 ? "rgb(".concat(t, ", ").concat(r, ", ").concat(n, ")") : "rgba(".concat(t, ", ").concat(r, ", ").concat(n, ", ").concat(this.roundA, ")");
+    }, e.prototype.toPercentageRgb = function() {
+      var t = function(r) {
+        return "".concat(Math.round(v(r, 255) * 100), "%");
+      };
+      return {
+        r: t(this.r),
+        g: t(this.g),
+        b: t(this.b),
+        a: this.a
+      };
+    }, e.prototype.toPercentageRgbString = function() {
+      var t = function(r) {
+        return Math.round(v(r, 255) * 100);
+      };
+      return this.a === 1 ? "rgb(".concat(t(this.r), "%, ").concat(t(this.g), "%, ").concat(t(this.b), "%)") : "rgba(".concat(t(this.r), "%, ").concat(t(this.g), "%, ").concat(t(this.b), "%, ").concat(this.roundA, ")");
+    }, e.prototype.toName = function() {
+      if (this.a === 0)
+        return "transparent";
+      if (this.a < 1)
+        return !1;
+      for (var t = "#" + ie(this.r, this.g, this.b, !1), r = 0, n = Object.entries(J); r < n.length; r++) {
+        var i = n[r], a = i[0], o = i[1];
+        if (t === o)
+          return a;
+      }
+      return !1;
+    }, e.prototype.toString = function(t) {
+      var r = !!t;
+      t = t ?? this.format;
+      var n = !1, i = this.a < 1 && this.a >= 0, a = !r && i && (t.startsWith("hex") || t === "name");
+      return a ? t === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (t === "rgb" && (n = this.toRgbString()), t === "prgb" && (n = this.toPercentageRgbString()), (t === "hex" || t === "hex6") && (n = this.toHexString()), t === "hex3" && (n = this.toHexString(!0)), t === "hex4" && (n = this.toHex8String(!0)), t === "hex8" && (n = this.toHex8String()), t === "name" && (n = this.toName()), t === "hsl" && (n = this.toHslString()), t === "hsv" && (n = this.toHsvString()), n || this.toHexString());
+    }, e.prototype.toNumber = function() {
+      return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
+    }, e.prototype.clone = function() {
+      return new e(this.toString());
+    }, e.prototype.lighten = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toHsl();
+      return r.l += t / 100, r.l = $(r.l), new e(r);
+    }, e.prototype.brighten = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toRgb();
+      return r.r = Math.max(0, Math.min(255, r.r - Math.round(255 * -(t / 100)))), r.g = Math.max(0, Math.min(255, r.g - Math.round(255 * -(t / 100)))), r.b = Math.max(0, Math.min(255, r.b - Math.round(255 * -(t / 100)))), new e(r);
+    }, e.prototype.darken = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toHsl();
+      return r.l -= t / 100, r.l = $(r.l), new e(r);
+    }, e.prototype.tint = function(t) {
+      return t === void 0 && (t = 10), this.mix("white", t);
+    }, e.prototype.shade = function(t) {
+      return t === void 0 && (t = 10), this.mix("black", t);
+    }, e.prototype.desaturate = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toHsl();
+      return r.s -= t / 100, r.s = $(r.s), new e(r);
+    }, e.prototype.saturate = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toHsl();
+      return r.s += t / 100, r.s = $(r.s), new e(r);
+    }, e.prototype.greyscale = function() {
+      return this.desaturate(100);
+    }, e.prototype.spin = function(t) {
+      var r = this.toHsl(), n = (r.h + t) % 360;
+      return r.h = n < 0 ? 360 + n : n, new e(r);
+    }, e.prototype.mix = function(t, r) {
+      r === void 0 && (r = 50);
+      var n = this.toRgb(), i = new e(t).toRgb(), a = r / 100, o = {
+        r: (i.r - n.r) * a + n.r,
+        g: (i.g - n.g) * a + n.g,
+        b: (i.b - n.b) * a + n.b,
+        a: (i.a - n.a) * a + n.a
+      };
+      return new e(o);
+    }, e.prototype.analogous = function(t, r) {
+      t === void 0 && (t = 6), r === void 0 && (r = 30);
+      var n = this.toHsl(), i = 360 / r, a = [this];
+      for (n.h = (n.h - (i * t >> 1) + 720) % 360; --t; )
+        n.h = (n.h + i) % 360, a.push(new e(n));
+      return a;
+    }, e.prototype.complement = function() {
+      var t = this.toHsl();
+      return t.h = (t.h + 180) % 360, new e(t);
+    }, e.prototype.monochromatic = function(t) {
+      t === void 0 && (t = 6);
+      for (var r = this.toHsv(), n = r.h, i = r.s, a = r.v, o = [], s = 1 / t; t--; )
+        o.push(new e({ h: n, s: i, v: a })), a = (a + s) % 1;
+      return o;
+    }, e.prototype.splitcomplement = function() {
+      var t = this.toHsl(), r = t.h;
+      return [
+        this,
+        new e({ h: (r + 72) % 360, s: t.s, l: t.l }),
+        new e({ h: (r + 216) % 360, s: t.s, l: t.l })
+      ];
+    }, e.prototype.onBackground = function(t) {
+      var r = this.toRgb(), n = new e(t).toRgb(), i = r.a + n.a * (1 - r.a);
+      return new e({
+        r: (r.r * r.a + n.r * n.a * (1 - r.a)) / i,
+        g: (r.g * r.a + n.g * n.a * (1 - r.a)) / i,
+        b: (r.b * r.a + n.b * n.a * (1 - r.a)) / i,
+        a: i
+      });
+    }, e.prototype.triad = function() {
+      return this.polyad(3);
+    }, e.prototype.tetrad = function() {
+      return this.polyad(4);
+    }, e.prototype.polyad = function(t) {
+      for (var r = this.toHsl(), n = r.h, i = [this], a = 360 / t, o = 1; o < t; o++)
+        i.push(new e({ h: (n + o * a) % 360, s: r.s, l: r.l }));
+      return i;
+    }, e.prototype.equals = function(t) {
+      return this.toRgbString() === new e(t).toRgbString();
+    }, e;
+  }()
+);
+function k(...e) {
+  return new ze(...e);
+}
+function G(e, t) {
+  const r = e && e.a;
+  let n;
+  e && e.hsl ? n = k(e.hsl) : e && e.hex && e.hex.length > 0 ? n = k(e.hex) : e && e.hsv ? n = k(e.hsv) : e && e.rgba ? n = k(e.rgba) : e && e.rgb ? n = k(e.rgb) : n = k(e), n && (n._a === void 0 || n._a === null) && n.setAlpha(r || n.getAlpha());
+  const i = n.toHsl(), a = n.toHsv();
+  return i.s === 0 && (a.h = i.h = e.h || e.hsl && e.hsl.h || t || 0), a.v < 0.0164 && (a.h = e.h || e.hsv && e.hsv.h || 0, a.s = e.s || e.hsv && e.hsv.s || 0), i.l < 0.01 && (i.h = e.h || e.hsl && e.hsl.h || 0, i.s = e.s || e.hsl && e.hsl.s || 0), {
+    hsl: i,
+    hex: n.toHexString().toUpperCase(),
+    hex8: n.toHex8String().toUpperCase(),
+    rgba: n.toRgb(),
+    hsv: a,
+    oldHue: e.h || t || i.h,
+    source: e.source,
+    a: n.getAlpha()
+  };
+}
+var Ue = {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: ["modelValue"],
+  data() {
+    return {
+      val: G(this.modelValue)
+    };
+  },
+  computed: {
+    colors: {
+      get() {
+        return this.val;
+      },
+      set(e) {
+        this.val = e, this.$emit("update:modelValue", e);
+      }
+    }
+  },
+  watch: {
+    modelValue(e) {
+      this.val = G(e);
+    }
+  },
+  methods: {
+    colorChange(e, t) {
+      this.oldHue = this.colors.hsl.h, this.colors = G(e, t || this.oldHue);
+    },
+    isValidHex(e) {
+      return k(e).isValid;
+    },
+    simpleCheckForValidColor(e) {
+      const t = ["r", "g", "b", "a", "h", "s", "l", "v"];
+      let r = 0, n = 0;
+      for (let i = 0; i < t.length; i++) {
+        const a = t[i];
+        e[a] && (r++, isNaN(e[a]) || n++);
+      }
+      if (r === n)
+        return e;
+    },
+    paletteUpperCase(e) {
+      return e.map((t) => t.toUpperCase());
+    },
+    isTransparent(e) {
+      return k(e).getAlpha() === 0;
+    }
+  }
+}, N = {
+  name: "EditableInput",
+  props: {
+    label: String,
+    labelText: String,
+    desc: String,
+    value: [String, Number],
+    max: Number,
+    min: Number,
+    arrowOffset: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    val: {
+      get() {
+        return this.value;
+      },
+      set(e) {
+        if (this.max !== void 0 && +e > this.max)
+          this.$refs.input.value = this.max;
+        else
+          return e;
+      }
+    },
+    labelId() {
+      return `input__label__${this.label}__${Math.random().toString().slice(2, 5)}`;
+    },
+    labelSpanText() {
+      return this.labelText || this.label;
+    }
+  },
+  methods: {
+    update(e) {
+      this.handleChange(e.target.value);
+    },
+    handleChange(e) {
+      const t = {};
+      t[this.label] = e, t.hex === void 0 && t["#"] === void 0 ? this.$emit("change", t) : e.length > 5 && this.$emit("change", t);
+    },
+    // **** unused
+    // handleBlur (e) {
+    //   console.log(e)
+    // },
+    handleKeyDown(e) {
+      let { val: t } = this;
+      const r = Number(t);
+      if (r) {
+        const n = this.arrowOffset || 1;
+        e.keyCode === 38 && (t = r + n, this.handleChange(t), e.preventDefault()), e.keyCode === 40 && (t = r - n, this.handleChange(t), e.preventDefault());
+      }
+    }
+    // **** unused
+    // handleDrag (e) {
+    //   console.log(e)
+    // },
+    // handleMouseDown (e) {
+    //   console.log(e)
+    // }
+  }
+};
+const Ve = { class: "vc-editable-input" }, Pe = ["aria-labelledby"], We = ["id", "for"], Xe = { class: "vc-input__desc" };
+function je(e, t, r, n, i, a) {
+  return p(), f("div", Ve, [
+    fe(h("input", {
+      ref: "input",
+      "onUpdate:modelValue": t[0] || (t[0] = (o) => a.val = o),
+      "aria-labelledby": a.labelId,
+      class: "vc-input__input",
+      onKeydown: t[1] || (t[1] = (...o) => a.handleKeyDown && a.handleKeyDown(...o)),
+      onInput: t[2] || (t[2] = (...o) => a.update && a.update(...o))
+    }, null, 40, Pe), [
+      [pe, a.val]
+    ]),
+    h("span", {
+      id: a.labelId,
+      for: r.label,
+      class: "vc-input__label"
+    }, K(a.labelSpanText), 9, We),
+    h(
+      "span",
+      Xe,
+      K(r.desc),
+      1
+      /* TEXT */
+    )
+  ]);
+}
+var Ye = ".vc-editable-input{position:relative}.vc-input__input{border:0;outline:none;padding:0}.vc-input__label{text-transform:capitalize}";
+B(Ye);
+N.render = je;
+N.__file = "src/components/editable-input/editable-input.vue";
+N.install = _;
+function q(e, t, r) {
+  return t < r ? e < t ? t : e > r ? r : e : e < r ? r : e > t ? t : e;
+}
+var O = {
+  name: "Saturation",
+  props: {
+    value: Object
+  },
+  computed: {
+    colors() {
+      return this.value;
+    },
+    bgColor() {
+      return `hsl(${this.colors.hsv.h}, 100%, 50%)`;
+    },
+    pointerTop() {
+      return `${-(this.colors.hsv.v * 100) + 1 + 100}%`;
+    },
+    pointerLeft() {
+      return `${this.colors.hsv.s * 100}%`;
+    }
+  },
+  methods: {
+    handleChange(e, t) {
+      !t && e.preventDefault();
+      const { container: r } = this.$refs;
+      if (!r)
+        return;
+      const n = r.clientWidth, i = r.clientHeight, a = r.getBoundingClientRect().left + window.pageXOffset, o = r.getBoundingClientRect().top + window.pageYOffset, s = e.pageX || (e.touches ? e.touches[0].pageX : 0), c = e.pageY || (e.touches ? e.touches[0].pageY : 0), F = q(s - a, 0, n), g = q(c - o, 0, i), u = F / n, m = q(-(g / i) + 1, 0, 1);
+      this.onChange({
+        h: this.colors.hsv.h,
+        s: u,
+        v: m,
+        a: this.colors.hsv.a,
+        source: "hsva"
+      });
+    },
+    onChange(e) {
+      this.$emit("change", e);
+    },
+    handleMouseDown(e) {
+      window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+    },
+    handleMouseUp(e) {
+      this.unbindEventListeners();
+    },
+    unbindEventListeners() {
+      window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+    }
+  }
+};
+const Ge = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-saturation--white" },
+  null,
+  -1
+  /* HOISTED */
+), qe = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-saturation--black" },
+  null,
+  -1
+  /* HOISTED */
+), Ke = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-saturation-circle" },
+  null,
+  -1
+  /* HOISTED */
+), Ze = [
+  Ke
+];
+function Je(e, t, r, n, i, a) {
+  return p(), f(
+    "div",
+    {
+      ref: "container",
+      class: "vc-saturation",
+      style: x({ background: a.bgColor }),
+      onMousedown: t[0] || (t[0] = (...o) => a.handleMouseDown && a.handleMouseDown(...o)),
+      onTouchmove: t[1] || (t[1] = (...o) => a.handleChange && a.handleChange(...o)),
+      onTouchstart: t[2] || (t[2] = (...o) => a.handleChange && a.handleChange(...o))
+    },
+    [
+      Ge,
+      qe,
+      h(
+        "div",
+        {
+          class: "vc-saturation-pointer",
+          style: x({ top: a.pointerTop, left: a.pointerLeft })
+        },
+        Ze,
+        4
+        /* STYLE */
+      )
+    ],
+    36
+    /* STYLE, HYDRATE_EVENTS */
+  );
+}
+var Qe = ".vc-saturation,.vc-saturation--black,.vc-saturation--white{bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.vc-saturation--white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.vc-saturation--black{background:linear-gradient(0deg,#000,transparent)}.vc-saturation-pointer{cursor:pointer;position:absolute}.vc-saturation-circle{border-radius:50%;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);cursor:head;height:4px;transform:translate(-2px,-2px);width:4px}";
+B(Qe);
+O.render = Je;
+O.__file = "src/components/saturation/saturation.vue";
+O.install = _;
+var z = {
+  name: "Hue",
+  props: {
+    value: Object,
+    direction: {
+      type: String,
+      // [horizontal | vertical]
+      default: "horizontal"
+    }
+  },
+  data() {
+    return {
+      oldHue: 0,
+      pullDirection: ""
+    };
+  },
+  computed: {
+    colors() {
+      return this.value;
+    },
+    directionClass() {
+      return {
+        "vc-hue--horizontal": this.direction === "horizontal",
+        "vc-hue--vertical": this.direction === "vertical"
+      };
+    },
+    pointerTop() {
+      return this.direction === "vertical" ? this.colors.hsl.h === 0 && this.pullDirection === "right" ? 0 : `${-(this.colors.hsl.h * 100 / 360) + 100}%` : 0;
+    },
+    pointerLeft() {
+      return this.direction === "vertical" ? 0 : this.colors.hsl.h === 0 && this.pullDirection === "right" ? "100%" : `${this.colors.hsl.h * 100 / 360}%`;
+    }
+  },
+  watch: {
+    value: {
+      handler(e, t) {
+        const { h: r } = e.hsl;
+        r !== 0 && r - this.oldHue > 0 && (this.pullDirection = "right"), r !== 0 && r - this.oldHue < 0 && (this.pullDirection = "left"), this.oldHue = r;
+      },
+      deep: !0,
+      immediate: !0
+    }
+  },
+  methods: {
+    handleChange(e, t) {
+      !t && e.preventDefault();
+      const { container: r } = this.$refs;
+      if (!r)
+        return;
+      const n = r.clientWidth, i = r.clientHeight, a = r.getBoundingClientRect().left + window.pageXOffset, o = r.getBoundingClientRect().top + window.pageYOffset, s = e.pageX || (e.touches ? e.touches[0].pageX : 0), c = e.pageY || (e.touches ? e.touches[0].pageY : 0), F = s - a, g = c - o;
+      let u, m;
+      this.direction === "vertical" ? (g < 0 ? u = 360 : g > i ? u = 0 : (m = -(g * 100 / i) + 100, u = 360 * m / 100), this.colors.hsl.h !== u && this.$emit("change", {
+        h: u,
+        s: this.colors.hsl.s,
+        l: this.colors.hsl.l,
+        a: this.colors.hsl.a,
+        source: "hsl"
+      })) : (F < 0 ? u = 0 : F > n ? u = 360 : (m = F * 100 / n, u = 360 * m / 100), this.colors.hsl.h !== u && this.$emit("change", {
+        h: u,
+        s: this.colors.hsl.s,
+        l: this.colors.hsl.l,
+        a: this.colors.hsl.a,
+        source: "hsl"
+      }));
+    },
+    handleMouseDown(e) {
+      this.handleChange(e, !0), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+    },
+    handleMouseUp(e) {
+      this.unbindEventListeners();
+    },
+    unbindEventListeners() {
+      window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+    }
+  }
+};
+const et = ["aria-valuenow"], tt = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-hue-picker" },
+  null,
+  -1
+  /* HOISTED */
+), rt = [
+  tt
+];
+function nt(e, t, r, n, i, a) {
+  return p(), f(
+    "div",
+    {
+      class: le(["vc-hue", [a.directionClass]])
+    },
+    [
+      h("div", {
+        ref: "container",
+        class: "vc-hue-container",
+        role: "slider",
+        "aria-valuenow": a.colors.hsl.h,
+        "aria-valuemin": "0",
+        "aria-valuemax": "360",
+        onMousedown: t[0] || (t[0] = (...o) => a.handleMouseDown && a.handleMouseDown(...o)),
+        onTouchmove: t[1] || (t[1] = (...o) => a.handleChange && a.handleChange(...o)),
+        onTouchstart: t[2] || (t[2] = (...o) => a.handleChange && a.handleChange(...o))
+      }, [
+        h(
+          "div",
+          {
+            class: "vc-hue-pointer",
+            style: x({ top: a.pointerTop, left: a.pointerLeft }),
+            role: "presentation"
+          },
+          rt,
+          4
+          /* STYLE */
+        )
+      ], 40, et)
+    ],
+    2
+    /* CLASS */
+  );
+}
+var at = ".vc-hue{border-radius:2px;bottom:0;left:0;position:absolute;right:0;top:0}.vc-hue--horizontal{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.vc-hue--vertical{background:linear-gradient(0deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.vc-hue-container{cursor:pointer;height:100%;margin:0 2px;position:relative}.vc-hue-pointer{position:absolute;z-index:2}.vc-hue-picker{background:#fff;border-radius:1px;box-shadow:0 0 2px rgba(0,0,0,.6);cursor:pointer;height:8px;margin-top:1px;transform:translateX(-2px);width:4px}";
+B(at);
+z.render = nt;
+z.__file = "src/components/hue/hue.vue";
+z.install = _;
+const it = [
+  "#D0021B",
+  "#F5A623",
+  "#F8E71C",
+  "#8B572A",
+  "#7ED321",
+  "#417505",
+  "#BD10E0",
+  "#9013FE",
+  "#4A90E2",
+  "#50E3C2",
+  "#B8E986",
+  "#000000",
+  "#4A4A4A",
+  "#9B9B9B",
+  "#FFFFFF",
+  "rgba(0,0,0,0)"
+];
+var U = {
+  name: "Sketch",
+  components: {
+    Saturation: O,
+    Hue: z,
+    Alpha: I,
+    EdIn: N,
+    Checkboard: H
+  },
+  mixins: [Ue],
+  props: {
+    presetColors: {
+      type: Array,
+      default() {
+        return it;
+      }
+    },
+    disableAlpha: {
+      type: Boolean,
+      default: !1
+    },
+    disableFields: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    hex() {
+      let e;
+      return this.colors.a < 1 ? e = this.colors.hex8 : e = this.colors.hex, e.replace("#", "");
+    },
+    activeColor() {
+      const { rgba: e } = this.colors;
+      return `rgba(${[e.r, e.g, e.b, e.a].join(",")})`;
+    }
+  },
+  methods: {
+    handlePreset(e) {
+      this.colorChange(e);
+    },
+    childChange(e) {
+      this.colorChange(e);
+    },
+    inputChange(e) {
+      e && (e.hex ? this.isValidHex(e.hex) && this.colorChange({
+        hex: e.hex,
+        source: "hex"
+      }) : (e.r || e.g || e.b || e.a) && this.colorChange({
+        r: e.r || this.colors.rgba.r,
+        g: e.g || this.colors.rgba.g,
+        b: e.b || this.colors.rgba.b,
+        a: e.a || this.colors.rgba.a,
+        source: "rgba"
+      }));
+    }
+  }
+};
+const ot = { class: "vc-sketch-saturation-wrap" }, st = { class: "vc-sketch-controls" }, lt = { class: "vc-sketch-sliders" }, ht = { class: "vc-sketch-hue-wrap" }, ct = {
+  key: 0,
+  class: "vc-sketch-alpha-wrap"
+}, ut = { class: "vc-sketch-color-wrap" }, dt = ["aria-label"], ft = {
+  key: 0,
+  class: "vc-sketch-field"
+}, pt = { class: "vc-sketch-field--double" }, gt = { class: "vc-sketch-field--single" }, vt = { class: "vc-sketch-field--single" }, Ft = { class: "vc-sketch-field--single" }, bt = {
+  key: 0,
+  class: "vc-sketch-field--single"
+}, mt = {
+  class: "vc-sketch-presets",
+  role: "group",
+  "aria-label": "A color preset, pick one to set as current color"
+}, Ct = ["aria-label", "onClick"], xt = ["aria-label", "onClick"];
+function Et(e, t, r, n, i, a) {
+  const o = D("Saturation"), s = D("Hue"), c = D("Alpha"), F = D("Checkboard"), g = D("EdIn");
+  return p(), f(
+    "div",
+    {
+      role: "application",
+      "aria-label": "Sketch color picker",
+      class: le(["vc-sketch", [r.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
+    },
+    [
+      h("div", ot, [
+        C(o, {
+          value: e.colors,
+          onChange: a.childChange
+        }, null, 8, ["value", "onChange"])
+      ]),
+      h("div", st, [
+        h("div", lt, [
+          h("div", ht, [
+            C(s, {
+              value: e.colors,
+              onChange: a.childChange
+            }, null, 8, ["value", "onChange"])
+          ]),
+          r.disableAlpha ? S("v-if", !0) : (p(), f("div", ct, [
+            C(c, {
+              value: e.colors,
+              onChange: a.childChange
+            }, null, 8, ["value", "onChange"])
+          ]))
+        ]),
+        h("div", ut, [
+          h("div", {
+            "aria-label": `Current color is ${a.activeColor}`,
+            class: "vc-sketch-active-color",
+            style: x({ background: a.activeColor })
+          }, null, 12, dt),
+          C(F)
+        ])
+      ]),
+      r.disableFields ? S("v-if", !0) : (p(), f("div", ft, [
+        S(" rgba "),
+        h("div", pt, [
+          C(g, {
+            label: "hex",
+            value: a.hex,
+            onChange: a.inputChange
+          }, null, 8, ["value", "onChange"])
+        ]),
+        h("div", gt, [
+          C(g, {
+            label: "r",
+            value: e.colors.rgba.r,
+            onChange: a.inputChange
+          }, null, 8, ["value", "onChange"])
+        ]),
+        h("div", vt, [
+          C(g, {
+            label: "g",
+            value: e.colors.rgba.g,
+            onChange: a.inputChange
+          }, null, 8, ["value", "onChange"])
+        ]),
+        h("div", Ft, [
+          C(g, {
+            label: "b",
+            value: e.colors.rgba.b,
+            onChange: a.inputChange
+          }, null, 8, ["value", "onChange"])
+        ]),
+        r.disableAlpha ? S("v-if", !0) : (p(), f("div", bt, [
+          C(g, {
+            label: "a",
+            value: e.colors.a,
+            "arrow-offset": 0.01,
+            max: 1,
+            onChange: a.inputChange
+          }, null, 8, ["value", "arrow-offset", "onChange"])
+        ]))
+      ])),
+      h("div", mt, [
+        (p(!0), f(
+          Z,
+          null,
+          he(r.presetColors, (u) => (p(), f(
+            Z,
+            null,
+            [
+              e.isTransparent(u) ? (p(), f("div", {
+                key: u,
+                "aria-label": `Color:${u}`,
+                class: "vc-sketch-presets-color",
+                onClick: (m) => a.handlePreset(u)
+              }, [
+                C(F)
+              ], 8, xt)) : (p(), f("div", {
+                key: `!${u}`,
+                class: "vc-sketch-presets-color",
+                "aria-label": `Color:${u}`,
+                style: x({ background: u }),
+                onClick: (m) => a.handlePreset(u)
+              }, null, 12, Ct))
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))),
+          256
+          /* UNKEYED_FRAGMENT */
+        ))
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+var wt = ".vc-sketch{background:#fff;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.15);box-sizing:initial;padding:10px 10px 0;position:relative;width:200px}.vc-sketch-saturation-wrap{overflow:hidden;padding-bottom:75%;position:relative;width:100%}.vc-sketch-controls{display:flex}.vc-sketch-sliders{flex:1;padding:4px 0}.vc-sketch-sliders .vc-alpha-gradient,.vc-sketch-sliders .vc-hue{border-radius:2px}.vc-sketch-alpha-wrap,.vc-sketch-hue-wrap{height:10px;position:relative}.vc-sketch-alpha-wrap{margin-top:4px;overflow:hidden}.vc-sketch-color-wrap{border-radius:3px;height:24px;margin-left:4px;margin-top:4px;position:relative;width:24px}.vc-sketch-active-color{border-radius:2px;bottom:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 0 4px rgba(0,0,0,.25);left:0;position:absolute;right:0;top:0;z-index:2}.vc-sketch-color-wrap .vc-checkerboard{background-size:auto}.vc-sketch-field{display:flex;padding-top:4px}.vc-sketch-field .vc-input__input{border:none;box-shadow:inset 0 0 0 1px #ccc;font-size:10px;padding:4px 0 3px 10%;width:90%}.vc-sketch-field .vc-input__label{color:#222;display:block;font-size:11px;padding-bottom:4px;padding-top:3px;text-align:center;text-transform:capitalize}.vc-sketch-field--single{flex:1;padding-left:6px}.vc-sketch-field--double{flex:2}.vc-sketch-presets{border-top:1px solid #eee;margin-left:-10px;margin-right:-10px;padding-left:10px;padding-top:10px}.vc-sketch-presets-color{cursor:pointer;display:inline-block;height:16px;margin:0 10px 10px 0;overflow:hidden;position:relative;vertical-align:top;width:16px}.vc-sketch-presets-color,.vc-sketch-presets-color .vc-checkerboard{border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.vc-sketch__disable-alpha .vc-sketch-color-wrap{height:10px}";
+B(wt);
+U.render = Et;
+U.__file = "src/components/sketch/sketch.vue";
+U.install = _;
+const se = [
   "#ffffff",
   "#f5f5f5",
   "#d9d9d9",
@@ -144,7 +1427,7 @@ const L = [
   "#FF2056",
   "#EC253F",
   "#C71D36"
-], M = {
+], kt = {
   "#ffffff": "纯白",
   "#f5f5f5": "浅灰",
   "#d9d9d9": "中灰",
@@ -289,7 +1572,7 @@ const L = [
   "#FF2056": "深红",
   "#EC253F": "深红1",
   "#C71D36": "深红2"
-}, S = [
+}, yt = [
   "#ffffff",
   "#f5f5f5",
   "#eeeeee",
@@ -306,7 +1589,7 @@ const L = [
   "#262626",
   "#1a1a1a",
   "#000000"
-], T = {
+], At = {
   "#ffffff": "纯白",
   "#f5f5f5": "浅灰",
   "#eeeeee": "极浅灰",
@@ -323,7 +1606,7 @@ const L = [
   "#262626": "深灰",
   "#1a1a1a": "近黑",
   "#000000": "纯黑"
-}, N = [
+}, Dt = [
   "#FB2C36",
   "#FF692A",
   "#FE9A37",
@@ -340,7 +1623,7 @@ const L = [
   "#AD46FF",
   "#E12AFB",
   "#F6339A"
-], z = {
+], Bt = {
   "#FB2C36": "鲜红",
   "#FF692A": "橙红",
   "#FE9A37": "深黄",
@@ -357,52 +1640,75 @@ const L = [
   "#AD46FF": "深紫1",
   "#E12AFB": "深粉紫",
   "#F6339A": "深粉红"
-}, O = () => '<svg t="1760602465263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1846" width="16" height="16"><path d="M512 704c8.288 0 15.776-3.232 21.456-8.4l0.064 0.08 352-320-0.08-0.08c6.448-5.856 10.56-14.208 10.56-23.6a32 32 0 0 0-32-32c-8.288 0-15.76 3.232-21.456 8.4l-0.08-0.08L512 628.752 181.536 328.32l-0.08 0.08A31.776 31.776 0 0 0 160 320a32 32 0 0 0-32 32c0 9.376 4.112 17.744 10.544 23.6l-0.08 0.08 352 320 0.08-0.08c5.68 5.168 13.168 8.4 21.456 8.4z" p-id="1847"></path></svg>', I = (c, l) => {
-  const F = c.__vccOpts || c;
-  for (const [i, t] of l)
-    F[i] = t;
-  return F;
-}, P = { class: "ssc-color" }, U = { class: "label" }, V = ["innerHTML"], H = { class: "grid" }, $ = ["onClick"], Y = {
+}, _t = () => '<svg t="1760602465263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1846" width="16" height="16"><path d="M512 704c8.288 0 15.776-3.232 21.456-8.4l0.064 0.08 352-320-0.08-0.08c6.448-5.856 10.56-14.208 10.56-23.6a32 32 0 0 0-32-32c-8.288 0-15.76 3.232-21.456 8.4l-0.08-0.08L512 628.752 181.536 328.32l-0.08 0.08A31.776 31.776 0 0 0 160 320a32 32 0 0 0-32 32c0 9.376 4.112 17.744 10.544 23.6l-0.08 0.08 352 320 0.08-0.08c5.68 5.168 13.168 8.4 21.456 8.4z" p-id="1847"></path></svg>', Mt = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [n, i] of t)
+    r[n] = i;
+  return r;
+}, St = { class: "ssc-color" }, Ht = { class: "label" }, Tt = ["innerHTML"], Rt = {
+  key: 0,
+  class: "grid"
+}, $t = ["onClick"], Lt = {
+  key: 1,
+  class: "custom-palette"
+}, It = {
   __name: "ColorPicker",
   props: {
     type: { type: String, default: "colorAll" },
-    // colorAll colorOne colorTwo
+    // colorAll colorOne colorTwo customPalette
     color: { type: String, default: "" },
     width: { type: String, default: "100%" },
     height: { type: String, default: "auto" }
   },
-  emits: ["change"],
-  setup(c, { emit: l }) {
-    const F = c, i = l, t = d(!1), C = B(() => F.type === "colorOne" ? S : F.type === "colorTwo" ? N : L), u = B(() => F.type === "colorOne" ? T : F.type === "colorTwo" ? z : M), r = d("");
-    x(() => F.color, (e) => {
-      var o;
-      typeof e == "string" && e !== r.value && (r.value = e || ((o = C.value) == null ? void 0 : o[0]) || "#000000");
+  emits: ["change", "update:color"],
+  setup(e, { emit: t }) {
+    const r = e, n = t, i = V(!1), a = T(() => r.type === "customPalette"), o = T(() => a.value ? se : r.type === "colorOne" ? yt : r.type === "colorTwo" ? Dt : se), s = T(() => a.value ? {} : r.type === "colorOne" ? At : r.type === "colorTwo" ? Bt : kt), c = V(""), F = V("#1677ff");
+    let g = !1;
+    R(() => r.color, (l) => {
+      var d;
+      typeof l == "string" && l !== c.value && (c.value = l || ((d = o.value) == null ? void 0 : d[0]) || "#000000");
     });
-    const h = B(() => u.value[r.value] || "自定义");
-    f(() => {
-      var e;
-      if (F.color)
-        r.value = F.color;
+    const u = T(() => a.value ? "" : s.value[c.value] || "自定义"), m = (l) => {
+      a.value && (g = !0, F.value = l, ve(() => {
+        g = !1;
+      }));
+    };
+    te(() => {
+      var l;
+      if (r.color)
+        c.value = r.color;
       else {
-        const o = ((e = C.value) == null ? void 0 : e[0]) || "#000000";
-        console.error(o), r.value = o;
+        const d = ((l = o.value) == null ? void 0 : l[0]) || "#000000";
+        c.value = d;
       }
+      a.value && m(c.value);
+    }), R(c, (l) => {
+      a.value && m(l);
+    }), R(a, (l) => {
+      l && m(c.value);
+    }), R(F, (l) => {
+      if (!a.value || g) return;
+      const d = typeof l == "string" ? l : l == null ? void 0 : l.hex;
+      d && Q(ue(d), !1);
     });
-    function b(e) {
-      r.value = e, t.value = !1, i("change", e);
+    function ue(l) {
+      return typeof l != "string" ? "" : (l.startsWith("#") ? l : `#${l}`).slice(0, 7);
+    }
+    function Q(l, d = !0) {
+      c.value = l, d && (i.value = !1), n("change", l), n("update:color", l);
     }
-    function g() {
-      t.value = !t.value;
+    function de() {
+      i.value = !i.value;
     }
-    const A = () => {
-      t.value = !1;
+    const ee = () => {
+      i.value = !1;
     };
-    return f(() => {
-      document.addEventListener("click", A);
-      const e = "sun-select-color-style";
-      if (!document.getElementById(e)) {
-        const o = document.createElement("style");
-        o.id = e, o.textContent = `
+    return te(() => {
+      document.addEventListener("click", ee);
+      const l = "sun-select-color-style";
+      if (!document.getElementById(l)) {
+        const d = document.createElement("style");
+        d.id = l, d.textContent = `
       .ssc-color .select{position:relative;width:100%;min-width:200px;height:32px;display:flex;align-items:center;border:1px solid #e0e0ff;border-radius:6px;padding:0 12px;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,0.02);font-size:14px}
       .ssc-color .select:hover{border-color:#4096ff}
       .ssc-color .swatch{width:16px;height:16px;border-radius:4px;border:1px solid #e0e0e0;margin-right:8px}
@@ -414,52 +1720,63 @@ const L = [
       .ssc-color .panel::-webkit-scrollbar-track{background:transparent}
       .ssc-color .grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
       .ssc-color .chip{width:100%;height:26px;border-radius:6px;border:1px solid #fff;cursor:pointer;display:inline-block}
-    `, document.head.appendChild(o);
+      .ssc-color .custom-palette{width:100%}
+      .ssc-color .custom-palette .vc-sketch{width:100%}
+    `, document.head.appendChild(d);
       }
-    }), m(() => document.removeEventListener("click", A)), (e, o) => (n(), E("div", P, [
-      s("div", {
+    }), ge(() => document.removeEventListener("click", ee)), (l, d) => (p(), f("div", St, [
+      h("div", {
         class: "select",
-        onClick: p(g, ["stop"]),
-        style: a({
-          width: F.width
+        onClick: P(de, ["stop"]),
+        style: x({
+          width: r.width
         })
       }, [
-        s("span", {
+        h("span", {
           class: "swatch",
-          style: a({ backgroundColor: r.value })
+          style: x({ backgroundColor: c.value })
         }, null, 4),
-        s("span", U, w(h.value), 1),
-        s("div", {
+        h("span", Ht, K(u.value), 1),
+        h("div", {
           class: "arrow",
-          innerHTML: y(O)()
-        }, null, 8, V),
-        t.value ? (n(), E("div", {
+          innerHTML: re(_t)()
+        }, null, 8, Tt),
+        i.value ? (p(), f("div", {
           key: 0,
           class: "panel",
-          style: a({
-            height: F.height
-          })
+          style: x({
+            height: a.value ? "auto" : r.height
+          }),
+          onClick: d[1] || (d[1] = P(() => {
+          }, ["stop"]))
         }, [
-          s("div", H, [
-            (n(!0), E(k, null, _(C.value, (D) => (n(), E("span", {
-              key: D,
+          a.value ? (p(), f("div", Lt, [
+            C(re(U), {
+              modelValue: F.value,
+              "onUpdate:modelValue": d[0] || (d[0] = (M) => F.value = M),
+              class: "custom-component",
+              "disable-alpha": !0
+            }, null, 8, ["modelValue"])
+          ])) : (p(), f("div", Rt, [
+            (p(!0), f(Z, null, he(o.value, (M) => (p(), f("span", {
+              key: M,
               class: "chip",
-              style: a({ backgroundColor: D }),
-              onClick: p((q) => b(D), ["stop"])
-            }, null, 12, $))), 128))
-          ])
-        ], 4)) : v("", !0)
+              style: x({ backgroundColor: M }),
+              onClick: P((Ot) => Q(M), ["stop"])
+            }, null, 12, $t))), 128))
+          ]))
+        ], 4)) : S("", !0)
       ], 4)
     ]));
   }
-}, j = /* @__PURE__ */ I(Y, [["__scopeId", "data-v-ab6ac519"]]), J = {
-  install(c, l = {}) {
-    const F = l.prefix || "";
-    c.component(`${F}ColorPicker`, j);
+}, Nt = /* @__PURE__ */ Mt(It, [["__scopeId", "data-v-6b4fe802"]]), Ut = {
+  install(e, t = {}) {
+    const r = t.prefix || "";
+    e.component(`${r}ColorPicker`, Nt);
   }
 };
 export {
-  j as ColorPicker,
-  J as default
+  Nt as ColorPicker,
+  Ut as default
 };
 //# sourceMappingURL=sun-select-color.es.js.map