@farris/ui-vue 1.0.0-beta.5 → 1.0.0

package/color-picker/index.esm.js

@@ -0,0 +1,1551 @@
+var qt = Object.defineProperty;
+var Xt = (i, t, e) => t in i ? qt(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var s = (i, t, e) => (Xt(i, typeof t != "symbol" ? t + "" : t, e), e);
+import { defineComponent as q, ref as k, onMounted as Z, watch as $, createVNode as b, withModifiers as U, createTextVNode as Pt, computed as L, onBeforeMount as zt, withDirectives as G, vShow as nt, vModelText as Gt } from "vue";
+const Wt = {
+  color: { type: String, default: "#e1e2e3" },
+  disabled: { type: Boolean, default: !1 },
+  size: { type: String, default: "" },
+  presets: { type: Array, default: [] },
+  selectOnly: { type: Boolean },
+  editable: { type: Boolean, default: !1 },
+  allowColorNull: { type: Boolean, default: !1 }
+};
+class C {
+}
+class it extends C {
+  constructor(t, e, n, r) {
+    super(), this.cyan = t, this.magenta = e, this.yellow = n, this.black = r;
+  }
+  toString() {
+    return `cmyk(${this.getCyan()}%, ${this.getMagenta()}%, ${this.getYellow()}%, ${this.getBlack()}%)`;
+  }
+  getCyan() {
+    return Math.round(this.cyan);
+  }
+  getMagenta() {
+    return Math.round(this.magenta);
+  }
+  getYellow() {
+    return Math.round(this.yellow);
+  }
+  getBlack() {
+    return Math.round(this.black);
+  }
+}
+class Y extends C {
+  constructor(t, e, n, r) {
+    super(), this.hue = t, this.saturation = e, this.lightness = n, this.alpha = r;
+  }
+  toString(t = !0) {
+    return t ? `hsla(${this.getHue()}, ${this.getSaturation()}%, ${this.getLightness()}%, ${this.getAlpha()})` : `hsl(${this.getHue()}, ${this.getSaturation()}%, ${this.getLightness()}%)`;
+  }
+  getHue() {
+    return Math.round(this.hue);
+  }
+  getSaturation() {
+    return Math.round(this.saturation);
+  }
+  getLightness() {
+    return Math.round(this.lightness);
+  }
+  getAlpha() {
+    return Math.round(this.alpha * 100) / 100;
+  }
+}
+class D extends C {
+  constructor(t, e, n, r) {
+    super(), this.hue = t, this.saturation = e, this.value = n, this.alpha = r;
+  }
+  toString(t = !0) {
+    return t ? `hsva(${this.getHue()}, ${this.getSaturation()}%, ${this.getValue()}%, ${this.getAlpha()})` : `hsv(${this.getHue()}, ${this.getSaturation()}%, ${this.getValue()}%)`;
+  }
+  getHue() {
+    return Math.round(this.hue);
+  }
+  getSaturation() {
+    return Math.round(this.saturation);
+  }
+  getValue() {
+    return Math.round(this.value);
+  }
+  getAlpha() {
+    return Math.round(this.alpha * 100) / 100;
+  }
+}
+class u extends C {
+  constructor(t, e, n, r) {
+    super(), this.red = t, this.green = e, this.blue = n, this.alpha = r;
+  }
+  toString(t = !0) {
+    return t ? `rgba(${this.getRed()}, ${this.getGreen()}, ${this.getBlue()}, ${this.getAlpha()})` : `rgb(${this.getRed()}, ${this.getGreen()}, ${this.getBlue()})`;
+  }
+  getRed() {
+    return Math.round(this.red);
+  }
+  getGreen() {
+    return Math.round(this.green);
+  }
+  getBlue() {
+    return Math.round(this.blue);
+  }
+  getAlpha() {
+    return Math.round(this.alpha * 100) / 100;
+  }
+}
+const a = class a {
+};
+s(a, "transparent", new u(0, 0, 0, 0)), s(a, "aliceblue", new u(240, 248, 255, 1)), s(a, "antiquewhite", new u(250, 235, 215, 1)), s(a, "aqua", new u(0, 255, 255, 1)), s(a, "aquamarine", new u(127, 255, 212, 1)), s(a, "azure", new u(240, 255, 255, 1)), s(a, "beige", new u(245, 245, 220, 1)), s(a, "bisque", new u(255, 228, 196, 1)), s(a, "black", new u(0, 0, 0, 1)), s(a, "blanchedalmond", new u(255, 235, 205, 1)), s(a, "blue", new u(0, 0, 255, 1)), s(a, "blueviolet", new u(138, 43, 226, 1)), s(a, "brown", new u(165, 42, 42, 1)), s(a, "burlywood", new u(222, 184, 135, 1)), s(a, "cadetblue", new u(95, 158, 160, 1)), s(a, "chartreuse", new u(127, 255, 0, 1)), s(a, "chocolate", new u(210, 105, 30, 1)), s(a, "coral", new u(255, 127, 80, 1)), s(a, "cornflowerblue", new u(100, 149, 237, 1)), s(a, "cornsilk", new u(255, 248, 220, 1)), s(a, "crimson", new u(220, 20, 60, 1)), s(a, "cyan", new u(0, 255, 255, 1)), s(a, "darkblue", new u(0, 0, 139, 1)), s(a, "darkcyan", new u(0, 139, 139, 1)), s(a, "darkgoldenrod", new u(184, 134, 11, 1)), s(a, "darkgray", new u(169, 169, 169, 1)), s(a, "darkgreen", new u(0, 100, 0, 1)), s(a, "darkgrey", a.darkgray), s(a, "darkkhaki", new u(189, 183, 107, 1)), s(a, "darkmagenta", new u(139, 0, 139, 1)), s(a, "darkolivegreen", new u(85, 107, 47, 1)), s(a, "darkorange", new u(255, 140, 0, 1)), s(a, "darkorchid", new u(153, 50, 204, 1)), s(a, "darkred", new u(139, 0, 0, 1)), s(a, "darksalmon", new u(233, 150, 122, 1)), s(a, "darkseagreen", new u(143, 188, 143, 1)), s(a, "darkslateblue", new u(72, 61, 139, 1)), s(a, "darkslategray", new u(47, 79, 79, 1)), s(a, "darkslategrey", a.darkslategray), s(a, "darkturquoise", new u(0, 206, 209, 1)), s(a, "darkviolet", new u(148, 0, 211, 1)), s(a, "deeppink", new u(255, 20, 147, 1)), s(a, "deepskyblue", new u(0, 191, 255, 1)), s(a, "dimgray", new u(105, 105, 105, 1)), s(a, "dimgrey", a.dimgray), s(a, "dodgerblue", new u(30, 144, 255, 1)), s(a, "firebrick", new u(178, 34, 34, 1)), s(a, "floralwhite", new u(255, 250, 240, 1)), s(a, "forestgreen", new u(34, 139, 34, 1)), s(a, "fuchsia", new u(255, 0, 255, 1)), s(a, "gainsboro", new u(220, 220, 220, 1)), s(a, "ghostwhite", new u(248, 248, 255, 1)), s(a, "gold", new u(255, 215, 0, 1)), s(a, "goldenrod", new u(218, 165, 32, 1)), s(a, "gray", new u(128, 128, 128, 1)), s(a, "grey", a.gray), s(a, "green", new u(0, 128, 0, 1)), s(a, "greenyellow", new u(173, 255, 47, 1)), s(a, "honeydew", new u(240, 255, 240, 1)), s(a, "hotpink", new u(255, 105, 180, 1)), s(a, "indianred", new u(205, 92, 92, 1)), s(a, "indigo", new u(75, 0, 130, 1)), s(a, "ivory", new u(255, 255, 240, 1)), s(a, "khaki", new u(240, 230, 140, 1)), s(a, "lavender", new u(230, 230, 250, 1)), s(a, "lavenderblush", new u(255, 240, 245, 1)), s(a, "lawngreen", new u(124, 252, 0, 1)), s(a, "lemonchiffon", new u(255, 250, 205, 1)), s(a, "lightblue", new u(173, 216, 230, 1)), s(a, "lightcoral", new u(240, 128, 128, 1)), s(a, "lightcyan", new u(224, 255, 255, 1)), s(a, "lightgoldenrodyellow", new u(250, 250, 210, 1)), s(a, "lightgray", new u(211, 211, 211, 1)), s(a, "lightgreen", new u(144, 238, 144, 1)), s(a, "lightgrey", a.lightgray), s(a, "lightpink", new u(255, 182, 193, 1)), s(a, "lightsalmon", new u(255, 160, 122, 1)), s(a, "lightseagreen", new u(32, 178, 170, 1)), s(a, "lightskyblue", new u(135, 206, 250, 1)), s(a, "lightslategray", new u(119, 136, 153, 1)), s(a, "lightslategrey", a.lightslategray), s(a, "lightsteelblue", new u(176, 196, 222, 1)), s(a, "lightyellow", new u(255, 255, 224, 1)), s(a, "lime", new u(0, 255, 0, 1)), s(a, "limegreen", new u(50, 205, 50, 1)), s(a, "linen", new u(250, 240, 230, 1)), s(a, "magenta", new u(255, 0, 255, 1)), s(a, "maroon", new u(128, 0, 0, 1)), s(a, "mediumaquamarine", new u(102, 205, 170, 1)), s(a, "mediumblue", new u(0, 0, 205, 1)), s(a, "mediumorchid", new u(186, 85, 211, 1)), s(a, "mediumpurple", new u(147, 112, 219, 1)), s(a, "mediumseagreen", new u(60, 179, 113, 1)), s(a, "mediumslateblue", new u(123, 104, 238, 1)), s(a, "mediumspringgreen", new u(0, 250, 154, 1)), s(a, "mediumturquoise", new u(72, 209, 204, 1)), s(a, "mediumvioletred", new u(199, 21, 133, 1)), s(a, "midnightblue", new u(25, 25, 112, 1)), s(a, "mintcream", new u(245, 255, 250, 1)), s(a, "mistyrose", new u(255, 228, 225, 1)), s(a, "moccasin", new u(255, 228, 181, 1)), s(a, "navajowhite", new u(255, 222, 173, 1)), s(a, "navy", new u(0, 0, 128, 1)), s(a, "oldlace", new u(253, 245, 230, 1)), s(a, "olive", new u(128, 128, 0, 1)), s(a, "olivedrab", new u(107, 142, 35, 1)), s(a, "orange", new u(255, 165, 0, 1)), s(a, "orangered", new u(255, 69, 0, 1)), s(a, "orchid", new u(218, 112, 214, 1)), s(a, "palegoldenrod", new u(238, 232, 170, 1)), s(a, "palegreen", new u(152, 251, 152, 1)), s(a, "paleturquoise", new u(175, 238, 238, 1)), s(a, "palevioletred", new u(219, 112, 147, 1)), s(a, "papayawhip", new u(255, 239, 213, 1)), s(a, "peachpuff", new u(255, 218, 185, 1)), s(a, "peru", new u(205, 133, 63, 1)), s(a, "pink", new u(255, 192, 203, 1)), s(a, "plum", new u(221, 160, 221, 1)), s(a, "powderblue", new u(176, 224, 230, 1)), s(a, "purple", new u(128, 0, 128, 1)), s(a, "red", new u(255, 0, 0, 1)), s(a, "rosybrown", new u(188, 143, 143, 1)), s(a, "royalblue", new u(65, 105, 225, 1)), s(a, "saddlebrown", new u(139, 69, 19, 1)), s(a, "salmon", new u(250, 128, 114, 1)), s(a, "sandybrown", new u(244, 164, 96, 1)), s(a, "seagreen", new u(46, 139, 87, 1)), s(a, "seashell", new u(255, 245, 238, 1)), s(a, "sienna", new u(160, 82, 45, 1)), s(a, "silver", new u(192, 192, 192, 1)), s(a, "skyblue", new u(135, 206, 235, 1)), s(a, "slateblue", new u(106, 90, 205, 1)), s(a, "slategray", new u(112, 128, 144, 1)), s(a, "slategrey", a.slategray), s(a, "snow", new u(255, 250, 250, 1)), s(a, "springgreen", new u(0, 255, 127, 1)), s(a, "steelblue", new u(70, 130, 180, 1)), s(a, "tan", new u(210, 180, 140, 1)), s(a, "teal", new u(0, 128, 128, 1)), s(a, "thistle", new u(216, 191, 216, 1)), s(a, "tomato", new u(255, 99, 71, 1)), s(a, "turquoise", new u(64, 224, 208, 1)), s(a, "violet", new u(238, 130, 238, 1)), s(a, "wheat", new u(245, 222, 179, 1)), s(a, "white", new u(255, 255, 255, 1)), s(a, "whitesmoke", new u(245, 245, 245, 1)), s(a, "yellow", new u(255, 255, 0, 1)), s(a, "yellowgreen", new u(154, 205, 50, 1));
+let at = a;
+class S {
+  constructor(t) {
+    /**
+     * base color used to calculate other
+     * default color
+     * rgb(255, 0, 0)
+     * hsl(0, 100%, 50%)
+     * #ff0000
+     */
+    s(this, "hsva", new D(0, 1, 1, 1));
+    s(this, "rgba", new u(255, 0, 0, 1));
+    t && this.stringToColor(t);
+  }
+  static from(t) {
+    return typeof t == "string" ? new S(t) : t instanceof S ? t.clone() : t instanceof u ? new S().setRgba(t.red, t.green, t.blue, t.alpha) : t instanceof D ? new S().setHsva(t.hue, t.saturation, t.value, t.alpha) : t instanceof Y ? new S().setHsla(t.hue, t.saturation, t.lightness, t.alpha) : null;
+  }
+  /**
+   * make from existing color new color object
+   */
+  clone() {
+    return S.from(this.getRgba());
+  }
+  /**
+   * define Color from hex, rgb, rgba, hsl, hsla or cmyk string
+   */
+  setFromString(t) {
+    return this.stringToColor(t);
+  }
+  /**
+   * define Color from HSV values
+   */
+  setHsva(t, e = 100, n = 100, r = 1) {
+    return t != null && (this.hsva.hue = t), e != null && (this.hsva.saturation = e), n != null && (this.hsva.value = n), r != null && (r = r > 1 ? 1 : r < 0 ? 0 : r, this.hsva.alpha = r), this.rgba = this.hsvaToRgba(this.hsva), this;
+  }
+  /**
+   * define Color from RGBa
+   */
+  setRgba(t, e, n, r = 1) {
+    return t != null && (this.rgba.red = t), e != null && (this.rgba.green = e), n != null && (this.rgba.blue = n), r != null && (r = r > 1 ? 1 : r < 0 ? 0 : r, this.rgba.alpha = r), this.hsva = this.rgbaToHsva(this.rgba), this;
+  }
+  /**
+   * define Color from HSLa
+   */
+  setHsla(t, e, n, r = 1) {
+    r != null && (r = r > 1 ? 1 : r < 0 ? 0 : r, this.rgba.alpha = r);
+    const c = new Y(t, e, n, r);
+    return this.rgba = this.hslaToRgba(c), this.hsva = this.rgbaToHsva(this.rgba), this;
+  }
+  /**
+   * return hexadecimal value formatted as '#341d2a' or '#341d2aFF' if alhpa channel is enabled
+   */
+  toHexString(t = !1) {
+    let e = "#" + (16777216 | this.rgba.getRed() << 16 | this.rgba.getGreen() << 8 | this.rgba.getBlue()).toString(16).substr(1);
+    return t && (e += (256 | Math.round(this.rgba.alpha * 255)).toString(16).substr(1)), e.toUpperCase();
+  }
+  /**
+   * return rgba string formatted as rgba(52, 29, 42, 1)
+   */
+  toRgbaString() {
+    return this.rgba.toString();
+  }
+  /**
+   * return rgb string formatted as rgb(52, 29, 42)
+   */
+  toRgbString() {
+    return this.rgba.toString(!1);
+  }
+  /**
+   * return hsla string formatted as hsla(327, 29%, 16%, 1)
+   */
+  toHslaString() {
+    return this.getHsla().toString();
+  }
+  /**
+   * return hsl string formatted as hsl(327, 29%, 16%)
+   */
+  toHslString() {
+    return this.getHsla().toString(!1);
+  }
+  /**
+   * return hsva string formatted as hsva(327, 29%, 16%, 100%)
+   */
+  toHsvaString() {
+    return this.hsva.toString();
+  }
+  /**
+   * return hsv string formatted as hsv(327, 29%, 16%)
+   */
+  toHsvString() {
+    return this.hsva.toString(!1);
+  }
+  /**
+   * return Cmyk string formatted as cmyk(100%, 100%, 100%, 100%)
+   */
+  toCmykString() {
+    return this.getCmyk().toString();
+  }
+  getHsva() {
+    return new D(this.hsva.hue, this.hsva.saturation, this.hsva.value, this.hsva.alpha);
+  }
+  getRgba() {
+    return new u(this.rgba.red, this.rgba.green, this.rgba.blue, this.rgba.alpha);
+  }
+  getHsla() {
+    return this.rgbaToHsla(this.rgba);
+  }
+  getCmyk() {
+    return this.rgbaToCmyk(this.rgba);
+  }
+  hsvaToHsla(t) {
+    const { hue: e } = t, n = t.saturation / 100, r = t.value / 100, c = (2 - n) * t.value / 2, o = n * r / (c <= 1 ? c : 2 - c) || 0;
+    return new Y(e, c * 100, o * 100, t.alpha);
+  }
+  hslaToHsva(t) {
+    const { hue: e } = t, n = t.lightness / 100 * 2, r = t.saturation / 100 * (n <= 1 ? n : 2 - n), c = (n + r) / 2, o = 2 * r / (n + r) || 0;
+    return new D(e, o, c, t.alpha);
+  }
+  rgbaToHsva(t) {
+    const e = t.red / 255, n = t.green / 255, r = t.blue / 255, { alpha: c } = t, o = Math.max(e, n, r), l = Math.min(e, n, r), h = o - l;
+    let p = 0, d = o === 0 ? 0 : h / o, f = o;
+    if (o !== l) {
+      switch (o) {
+        case e:
+          p = (n - r) / h + (n < r ? 6 : 0);
+          break;
+        case n:
+          p = 2 + (r - e) / h;
+          break;
+        case r:
+          p = 4 + (e - n) / h;
+          break;
+      }
+      p /= 6;
+    }
+    return p *= 360, d *= 100, f *= 100, new D(p, d, f, c);
+  }
+  hsvaToRgba(t) {
+    let e = 1, n = 0, r = 0;
+    const c = t.saturation / 100, o = t.value / 100, { alpha: l } = t, h = t.hue / 60, p = Math.floor(h), d = h - p, f = (1 - c) * o, w = (1 - c * d) * o, m = (1 - c * (1 - d)) * o;
+    switch (p) {
+      case 6:
+      case 0:
+        e = o, n = m, r = f;
+        break;
+      case 1:
+        e = w, n = o, r = f;
+        break;
+      case 2:
+        e = f, n = o, r = m;
+        break;
+      case 3:
+        e = f, n = w, r = o;
+        break;
+      case 4:
+        e = m, n = f, r = o;
+        break;
+      case 5:
+        e = o, n = f, r = w;
+        break;
+    }
+    return e *= 255, n *= 255, r *= 255, new u(e, n, r, l);
+  }
+  rgbaToHsla(t) {
+    const e = t.red / 255, n = t.green / 255, r = t.blue / 255, { alpha: c } = t, o = Math.max(e, n, r), l = Math.min(e, n, r);
+    let h = 0, p = 0, d = (o + l) / 2;
+    const f = o - l;
+    if (o !== l) {
+      switch (p = d > 0.5 ? f / (2 - o - l) : f / (o + l), o) {
+        case e:
+          h = (n - r) / f + (n < r ? 6 : 0);
+          break;
+        case n:
+          h = (r - e) / f + 2;
+          break;
+        case r:
+          h = (e - n) / f + 4;
+          break;
+      }
+      h /= 6;
+    }
+    return h *= 360, p *= 100, d *= 100, new Y(h, p, d, c);
+  }
+  /**
+   * convert rgb color from HSLa
+   *
+   * hue = 0 => 360
+   * saturation = 0 => 1
+   * lightness = 0 => 1
+   */
+  hslaToRgba(t) {
+    const e = t.hue / 360, n = t.saturation / 100, r = t.lightness / 100, { alpha: c } = t;
+    let o = r, l = r, h = r;
+    if (n !== 0) {
+      const p = r < 0.5 ? r * (1 + n) : r + n - r * n, d = 2 * r - p;
+      o = this.hueToRgb(d, p, e + 1 / 3), l = this.hueToRgb(d, p, e), h = this.hueToRgb(d, p, e - 1 / 3);
+    }
+    return o *= 255, l *= 255, h *= 255, new u(o, l, h, c);
+  }
+  hueToRgb(t, e, n) {
+    return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? t + (e - t) * 6 * n : n < 1 / 2 ? e : n < 2 / 3 ? t + (e - t) * (2 / 3 - n) * 6 : t;
+  }
+  /**
+   * The Red, Green, Blue values are given in the range of 0..255,
+   *
+   * the red color(R) is calculated from the cyan(C) and black(K) colors,
+   * the green color(G) is calculated from the magenta(M) and black(K) colors,
+   * The blue color(B) is calculated from the yellow(Y) and black(K) colors.
+   *
+   * Below is the formula of CMYK to RGB convertion
+   *
+   * Red = 255 × 1 - min( (1 - Cyan ÷ 100) × (1 - Black) )
+   * Green = 255 × 1 - min(1 - Magenta ÷ 100) × (1 - Black)
+   * Blue = 255 × 1 - min(1 - Yellow ÷ 100) × (1 - Black)
+   */
+  cmykToRgba(t) {
+    const e = t.black / 100, n = t.cyan / 100, r = t.magenta / 100, c = t.yellow / 100;
+    let o = Math.min(1, (1 - n) * (1 - e)), l = Math.min(1, (1 - r) * (1 - e)), h = Math.min(1, (1 - c) * (1 - e));
+    return o *= 255, l *= 255, h *= 255, new u(o, l, h, 1);
+  }
+  /**
+   * The max number of R, G, B values are 255, first of all, we divided them by 255 to become the number
+   * of 0~1, this ratio will be used in the calculation.
+   * Rc = R ÷ 255
+   * Gc = G ÷ 255
+   * Bc = B ÷ 255
+   * The black key(K) color could be many result, when we assume a black key value,
+   * the other three colors(cyan, magenta, yellow) can be calculated.
+   * we can calculate it from the red, green and blue colors, the max number of black key should be :
+   * K = 1 - min(Rc, Gc, Bc);
+   *
+   * or we can assume we run out of the black ink, need use the remaining other three color inks to finish the printing job.
+   * K = 0;
+   *
+   * The cyan color(C) is calculated from the red and black colors:
+   * C = (1 - Rc - K) ÷ (1 - K)
+   *
+   * The magenta color (M) is calculated from the green and black colors:
+   * M = (1 - Gr - K) ÷ (1 - K)
+   *
+   * The yellow color(Y) is calculated from the blue and black colors:
+   * Y = (1 - Bc - K) ÷ ( 1 - K)
+   */
+  rgbaToCmyk(t) {
+    const e = t.red / 255, n = t.green / 255, r = t.blue / 255;
+    let c = 1 - e, o = 1 - n, l = 1 - r, h = Math.min(c, o, l);
+    return h === 1 ? new it(0, 0, 0, 1) : (c = (c - h) / (1 - h), o = (o - h) / (1 - h), l = (l - h) / (1 - h), h *= 100, c *= 100, o *= 100, l *= 100, new it(c, o, l, h));
+  }
+  roundNumber(t) {
+    return Math.round(t * 100) / 100;
+  }
+  stringToColor(t) {
+    const e = t.replace(/ /g, "").toLowerCase();
+    let n = at[t] || null;
+    if (e[0] === "#") {
+      let o = e.substr(1);
+      const { length: l } = o;
+      let h = 1, p;
+      if (l === 3)
+        p = o.split("").map((d) => d + d);
+      else if (l === 6)
+        p = o.match(/.{2}/g);
+      else if (l === 8) {
+        const d = o.substr(-2);
+        o = o.substr(0, l - 2), h = this.roundNumber(parseInt(d || "FF", 16) / 255), p = o.match(/.{2}/g);
+      }
+      p && p.length === 3 && (n = new u(parseInt(p[0], 16), parseInt(p[1], 16), parseInt(p[2], 16), h));
+    }
+    const r = e.indexOf("("), c = e.indexOf(")");
+    if (r !== -1 && c + 1 === e.length) {
+      const o = e.substr(0, r), l = e.substr(r + 1, c - (r + 1)).split(",");
+      let h = 1, p, d;
+      switch (o) {
+        case "rgba":
+          h = parseFloat(l.pop());
+        case "rgb":
+          n = new u(parseInt(l[0], 10), parseInt(l[1], 10), parseInt(l[2], 10), h);
+          break;
+        case "hsla":
+          h = parseFloat(l.pop());
+          break;
+        case "hsl":
+          p = new Y(
+            parseInt(l[0], 10),
+            parseInt(l[1], 10),
+            parseInt(l[2], 10),
+            h
+          ), n = this.hslaToRgba(p);
+          break;
+        case "cmyk":
+          d = new it(
+            parseInt(l[0], 10),
+            parseInt(l[1], 10),
+            parseInt(l[2], 10),
+            parseInt(l[3], 10)
+          ), n = this.cmykToRgba(d);
+          break;
+      }
+    }
+    return n && (this.rgba = n, this.hsva = this.rgbaToHsva(n)), this;
+  }
+}
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var ut = function(i, t) {
+  return ut = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(e, n) {
+    e.__proto__ = n;
+  } || function(e, n) {
+    for (var r in n)
+      Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
+  }, ut(i, t);
+};
+function F(i, t) {
+  if (typeof t != "function" && t !== null)
+    throw new TypeError("Class extends value " + String(t) + " is not a constructor or null");
+  ut(i, t);
+  function e() {
+    this.constructor = i;
+  }
+  i.prototype = t === null ? Object.create(t) : (e.prototype = t.prototype, new e());
+}
+function ot(i) {
+  var t = typeof Symbol == "function" && Symbol.iterator, e = t && i[t], n = 0;
+  if (e)
+    return e.call(i);
+  if (i && typeof i.length == "number")
+    return {
+      next: function() {
+        return i && n >= i.length && (i = void 0), { value: i && i[n++], done: !i };
+      }
+    };
+  throw new TypeError(t ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
+function K(i, t) {
+  var e = typeof Symbol == "function" && i[Symbol.iterator];
+  if (!e)
+    return i;
+  var n = e.call(i), r, c = [], o;
+  try {
+    for (; (t === void 0 || t-- > 0) && !(r = n.next()).done; )
+      c.push(r.value);
+  } catch (l) {
+    o = { error: l };
+  } finally {
+    try {
+      r && !r.done && (e = n.return) && e.call(n);
+    } finally {
+      if (o)
+        throw o.error;
+    }
+  }
+  return c;
+}
+function J(i, t) {
+  for (var e = 0, n = t.length, r = i.length; e < n; e++, r++)
+    i[r] = t[e];
+  return i;
+}
+function R(i) {
+  return typeof i == "function";
+}
+function Ht(i) {
+  var t = function(n) {
+    Error.call(n), n.stack = new Error().stack;
+  }, e = i(t);
+  return e.prototype = Object.create(Error.prototype), e.prototype.constructor = e, e;
+}
+var rt = Ht(function(i) {
+  return function(e) {
+    i(this), this.message = e ? e.length + ` errors occurred during unsubscription:
+` + e.map(function(n, r) {
+      return r + 1 + ") " + n.toString();
+    }).join(`
+  `) : "", this.name = "UnsubscriptionError", this.errors = e;
+  };
+});
+function ct(i, t) {
+  if (i) {
+    var e = i.indexOf(t);
+    0 <= e && i.splice(e, 1);
+  }
+}
+var T = function() {
+  function i(t) {
+    this.initialTeardown = t, this.closed = !1, this._parentage = null, this._teardowns = null;
+  }
+  return i.prototype.unsubscribe = function() {
+    var t, e, n, r, c;
+    if (!this.closed) {
+      this.closed = !0;
+      var o = this._parentage;
+      if (o)
+        if (this._parentage = null, Array.isArray(o))
+          try {
+            for (var l = ot(o), h = l.next(); !h.done; h = l.next()) {
+              var p = h.value;
+              p.remove(this);
+            }
+          } catch (g) {
+            t = { error: g };
+          } finally {
+            try {
+              h && !h.done && (e = l.return) && e.call(l);
+            } finally {
+              if (t)
+                throw t.error;
+            }
+          }
+        else
+          o.remove(this);
+      var d = this.initialTeardown;
+      if (R(d))
+        try {
+          d();
+        } catch (g) {
+          c = g instanceof rt ? g.errors : [g];
+        }
+      var f = this._teardowns;
+      if (f) {
+        this._teardowns = null;
+        try {
+          for (var w = ot(f), m = w.next(); !m.done; m = w.next()) {
+            var y = m.value;
+            try {
+              wt(y);
+            } catch (g) {
+              c = c ?? [], g instanceof rt ? c = J(J([], K(c)), K(g.errors)) : c.push(g);
+            }
+          }
+        } catch (g) {
+          n = { error: g };
+        } finally {
+          try {
+            m && !m.done && (r = w.return) && r.call(w);
+          } finally {
+            if (n)
+              throw n.error;
+          }
+        }
+      }
+      if (c)
+        throw new rt(c);
+    }
+  }, i.prototype.add = function(t) {
+    var e;
+    if (t && t !== this)
+      if (this.closed)
+        wt(t);
+      else {
+        if (t instanceof i) {
+          if (t.closed || t._hasParent(this))
+            return;
+          t._addParent(this);
+        }
+        (this._teardowns = (e = this._teardowns) !== null && e !== void 0 ? e : []).push(t);
+      }
+  }, i.prototype._hasParent = function(t) {
+    var e = this._parentage;
+    return e === t || Array.isArray(e) && e.includes(t);
+  }, i.prototype._addParent = function(t) {
+    var e = this._parentage;
+    this._parentage = Array.isArray(e) ? (e.push(t), e) : e ? [e, t] : t;
+  }, i.prototype._removeParent = function(t) {
+    var e = this._parentage;
+    e === t ? this._parentage = null : Array.isArray(e) && ct(e, t);
+  }, i.prototype.remove = function(t) {
+    var e = this._teardowns;
+    e && ct(e, t), t instanceof i && t._removeParent(this);
+  }, i.EMPTY = function() {
+    var t = new i();
+    return t.closed = !0, t;
+  }(), i;
+}(), xt = T.EMPTY;
+function It(i) {
+  return i instanceof T || i && "closed" in i && R(i.remove) && R(i.add) && R(i.unsubscribe);
+}
+function wt(i) {
+  R(i) ? i() : i.unsubscribe();
+}
+var Et = {
+  onUnhandledError: null,
+  onStoppedNotification: null,
+  Promise: void 0,
+  useDeprecatedSynchronousErrorHandling: !1,
+  useDeprecatedNextContext: !1
+}, lt = {
+  setTimeout: function() {
+    for (var i = [], t = 0; t < arguments.length; t++)
+      i[t] = arguments[t];
+    var e = lt.delegate;
+    return ((e == null ? void 0 : e.setTimeout) || setTimeout).apply(void 0, J([], K(i)));
+  },
+  clearTimeout: function(i) {
+    var t = lt.delegate;
+    return ((t == null ? void 0 : t.clearTimeout) || clearTimeout)(i);
+  },
+  delegate: void 0
+};
+function Kt(i) {
+  lt.setTimeout(function() {
+    throw i;
+  });
+}
+function Q() {
+}
+function W(i) {
+  i();
+}
+var ht = function(i) {
+  F(t, i);
+  function t(e) {
+    var n = i.call(this) || this;
+    return n.isStopped = !1, e ? (n.destination = e, It(e) && e.add(n)) : n.destination = Jt, n;
+  }
+  return t.create = function(e, n, r) {
+    return new Mt(e, n, r);
+  }, t.prototype.next = function(e) {
+    this.isStopped || this._next(e);
+  }, t.prototype.error = function(e) {
+    this.isStopped || (this.isStopped = !0, this._error(e));
+  }, t.prototype.complete = function() {
+    this.isStopped || (this.isStopped = !0, this._complete());
+  }, t.prototype.unsubscribe = function() {
+    this.closed || (this.isStopped = !0, i.prototype.unsubscribe.call(this), this.destination = null);
+  }, t.prototype._next = function(e) {
+    this.destination.next(e);
+  }, t.prototype._error = function(e) {
+    try {
+      this.destination.error(e);
+    } finally {
+      this.unsubscribe();
+    }
+  }, t.prototype._complete = function() {
+    try {
+      this.destination.complete();
+    } finally {
+      this.unsubscribe();
+    }
+  }, t;
+}(T), Mt = function(i) {
+  F(t, i);
+  function t(e, n, r) {
+    var c = i.call(this) || this, o;
+    if (R(e))
+      o = e;
+    else if (e) {
+      o = e.next, n = e.error, r = e.complete;
+      var l;
+      c && Et.useDeprecatedNextContext ? (l = Object.create(e), l.unsubscribe = function() {
+        return c.unsubscribe();
+      }) : l = e, o = o == null ? void 0 : o.bind(l), n = n == null ? void 0 : n.bind(l), r = r == null ? void 0 : r.bind(l);
+    }
+    return c.destination = {
+      next: o ? st(o) : Q,
+      error: st(n ?? Bt),
+      complete: r ? st(r) : Q
+    }, c;
+  }
+  return t;
+}(ht);
+function st(i, t) {
+  return function() {
+    for (var e = [], n = 0; n < arguments.length; n++)
+      e[n] = arguments[n];
+    try {
+      i.apply(void 0, J([], K(e)));
+    } catch (r) {
+      Kt(r);
+    }
+  };
+}
+function Bt(i) {
+  throw i;
+}
+var Jt = {
+  closed: !0,
+  next: Q,
+  error: Bt,
+  complete: Q
+}, Qt = function() {
+  return typeof Symbol == "function" && Symbol.observable || "@@observable";
+}();
+function Rt(i) {
+  return i;
+}
+function Zt(i) {
+  return i.length === 0 ? Rt : i.length === 1 ? i[0] : function(e) {
+    return i.reduce(function(n, r) {
+      return r(n);
+    }, e);
+  };
+}
+var yt = function() {
+  function i(t) {
+    t && (this._subscribe = t);
+  }
+  return i.prototype.lift = function(t) {
+    var e = new i();
+    return e.source = this, e.operator = t, e;
+  }, i.prototype.subscribe = function(t, e, n) {
+    var r = this, c = Tt(t) ? t : new Mt(t, e, n);
+    return W(function() {
+      var o = r, l = o.operator, h = o.source;
+      c.add(l ? l.call(c, h) : h ? r._subscribe(c) : r._trySubscribe(c));
+    }), c;
+  }, i.prototype._trySubscribe = function(t) {
+    try {
+      return this._subscribe(t);
+    } catch (e) {
+      t.error(e);
+    }
+  }, i.prototype.forEach = function(t, e) {
+    var n = this;
+    return e = mt(e), new e(function(r, c) {
+      var o;
+      o = n.subscribe(function(l) {
+        try {
+          t(l);
+        } catch (h) {
+          c(h), o == null || o.unsubscribe();
+        }
+      }, c, r);
+    });
+  }, i.prototype._subscribe = function(t) {
+    var e;
+    return (e = this.source) === null || e === void 0 ? void 0 : e.subscribe(t);
+  }, i.prototype[Qt] = function() {
+    return this;
+  }, i.prototype.pipe = function() {
+    for (var t = [], e = 0; e < arguments.length; e++)
+      t[e] = arguments[e];
+    return Zt(t)(this);
+  }, i.prototype.toPromise = function(t) {
+    var e = this;
+    return t = mt(t), new t(function(n, r) {
+      var c;
+      e.subscribe(function(o) {
+        return c = o;
+      }, function(o) {
+        return r(o);
+      }, function() {
+        return n(c);
+      });
+    });
+  }, i.create = function(t) {
+    return new i(t);
+  }, i;
+}();
+function mt(i) {
+  var t;
+  return (t = i ?? Et.Promise) !== null && t !== void 0 ? t : Promise;
+}
+function Ct(i) {
+  return i && R(i.next) && R(i.error) && R(i.complete);
+}
+function Tt(i) {
+  return i && i instanceof ht || Ct(i) && It(i);
+}
+function _t(i) {
+  return R(i == null ? void 0 : i.lift);
+}
+function te(i) {
+  return function(t) {
+    if (_t(t))
+      return t.lift(function(e) {
+        try {
+          return i(e, this);
+        } catch (n) {
+          this.error(n);
+        }
+      });
+    throw new TypeError("Unable to lift unknown Observable type");
+  };
+}
+var ee = function(i) {
+  F(t, i);
+  function t(e, n, r, c, o) {
+    var l = i.call(this, e) || this;
+    return l.onFinalize = o, l._next = n ? function(h) {
+      try {
+        n(h);
+      } catch (p) {
+        e.error(p);
+      }
+    } : i.prototype._next, l._error = c ? function(h) {
+      try {
+        c(h);
+      } catch (p) {
+        e.error(p);
+      } finally {
+        this.unsubscribe();
+      }
+    } : i.prototype._error, l._complete = r ? function() {
+      try {
+        r();
+      } catch (h) {
+        e.error(h);
+      } finally {
+        this.unsubscribe();
+      }
+    } : i.prototype._complete, l;
+  }
+  return t.prototype.unsubscribe = function() {
+    var e, n = this.closed;
+    i.prototype.unsubscribe.call(this), !n && ((e = this.onFinalize) === null || e === void 0 || e.call(this));
+  }, t;
+}(ht), ne = Ht(function(i) {
+  return function() {
+    i(this), this.name = "ObjectUnsubscribedError", this.message = "object unsubscribed";
+  };
+}), dt = function(i) {
+  F(t, i);
+  function t() {
+    var e = i.call(this) || this;
+    return e.closed = !1, e.observers = [], e.isStopped = !1, e.hasError = !1, e.thrownError = null, e;
+  }
+  return t.prototype.lift = function(e) {
+    var n = new bt(this, this);
+    return n.operator = e, n;
+  }, t.prototype._throwIfClosed = function() {
+    if (this.closed)
+      throw new ne();
+  }, t.prototype.next = function(e) {
+    var n = this;
+    W(function() {
+      var r, c;
+      if (n._throwIfClosed(), !n.isStopped) {
+        var o = n.observers.slice();
+        try {
+          for (var l = ot(o), h = l.next(); !h.done; h = l.next()) {
+            var p = h.value;
+            p.next(e);
+          }
+        } catch (d) {
+          r = { error: d };
+        } finally {
+          try {
+            h && !h.done && (c = l.return) && c.call(l);
+          } finally {
+            if (r)
+              throw r.error;
+          }
+        }
+      }
+    });
+  }, t.prototype.error = function(e) {
+    var n = this;
+    W(function() {
+      if (n._throwIfClosed(), !n.isStopped) {
+        n.hasError = n.isStopped = !0, n.thrownError = e;
+        for (var r = n.observers; r.length; )
+          r.shift().error(e);
+      }
+    });
+  }, t.prototype.complete = function() {
+    var e = this;
+    W(function() {
+      if (e._throwIfClosed(), !e.isStopped) {
+        e.isStopped = !0;
+        for (var n = e.observers; n.length; )
+          n.shift().complete();
+      }
+    });
+  }, t.prototype.unsubscribe = function() {
+    this.isStopped = this.closed = !0, this.observers = null;
+  }, Object.defineProperty(t.prototype, "observed", {
+    get: function() {
+      var e;
+      return ((e = this.observers) === null || e === void 0 ? void 0 : e.length) > 0;
+    },
+    enumerable: !1,
+    configurable: !0
+  }), t.prototype._trySubscribe = function(e) {
+    return this._throwIfClosed(), i.prototype._trySubscribe.call(this, e);
+  }, t.prototype._subscribe = function(e) {
+    return this._throwIfClosed(), this._checkFinalizedStatuses(e), this._innerSubscribe(e);
+  }, t.prototype._innerSubscribe = function(e) {
+    var n = this, r = n.hasError, c = n.isStopped, o = n.observers;
+    return r || c ? xt : (o.push(e), new T(function() {
+      return ct(o, e);
+    }));
+  }, t.prototype._checkFinalizedStatuses = function(e) {
+    var n = this, r = n.hasError, c = n.thrownError, o = n.isStopped;
+    r ? e.error(c) : o && e.complete();
+  }, t.prototype.asObservable = function() {
+    var e = new yt();
+    return e.source = this, e;
+  }, t.create = function(e, n) {
+    return new bt(e, n);
+  }, t;
+}(yt), bt = function(i) {
+  F(t, i);
+  function t(e, n) {
+    var r = i.call(this) || this;
+    return r.destination = e, r.source = n, r;
+  }
+  return t.prototype.next = function(e) {
+    var n, r;
+    (r = (n = this.destination) === null || n === void 0 ? void 0 : n.next) === null || r === void 0 || r.call(n, e);
+  }, t.prototype.error = function(e) {
+    var n, r;
+    (r = (n = this.destination) === null || n === void 0 ? void 0 : n.error) === null || r === void 0 || r.call(n, e);
+  }, t.prototype.complete = function() {
+    var e, n;
+    (n = (e = this.destination) === null || e === void 0 ? void 0 : e.complete) === null || n === void 0 || n.call(e);
+  }, t.prototype._subscribe = function(e) {
+    var n, r;
+    return (r = (n = this.source) === null || n === void 0 ? void 0 : n.subscribe(e)) !== null && r !== void 0 ? r : xt;
+  }, t;
+}(dt), kt = function(i) {
+  F(t, i);
+  function t(e) {
+    var n = i.call(this) || this;
+    return n._value = e, n;
+  }
+  return Object.defineProperty(t.prototype, "value", {
+    get: function() {
+      return this.getValue();
+    },
+    enumerable: !1,
+    configurable: !0
+  }), t.prototype._subscribe = function(e) {
+    var n = i.prototype._subscribe.call(this, e);
+    return !n.closed && e.next(this._value), n;
+  }, t.prototype.getValue = function() {
+    var e = this, n = e.hasError, r = e.thrownError, c = e._value;
+    if (n)
+      throw r;
+    return this._throwIfClosed(), c;
+  }, t.prototype.next = function(e) {
+    i.prototype.next.call(this, this._value = e);
+  }, t;
+}(dt);
+function ie(i, t) {
+  return t === void 0 && (t = Rt), i = i ?? re, te(function(e, n) {
+    var r, c = !0;
+    e.subscribe(new ee(n, function(o) {
+      var l = t(o);
+      (c || !i(r, l)) && (c = !1, r = l, n.next(o));
+    }));
+  });
+}
+function re(i, t) {
+  return i === t;
+}
+var E = /* @__PURE__ */ ((i) => (i.hex = "hex", i.hexa = "hexa", i.rgba = "rgba", i.rgb = "rgb", i.hsla = "hsla", i.hsl = "hsl", i.cmyk = "cmyk", i))(E || {});
+class Vt {
+  constructor(t) {
+    /** 所选颜色值 */
+    s(this, "modelValue", null);
+    /** 色调颜色值 */
+    s(this, "hueValue", null);
+    /** 初始颜色值 */
+    s(this, "initValue", null);
+    s(this, "valueChanged", new dt());
+    s(this, "presetsVisibilityChanges", new kt(!0));
+    s(this, "initType", null);
+    s(this, "alphaChannelVisibilityChanges", new kt(!0));
+    s(this, "valueChanges", this.valueChanged.asObservable().pipe(ie(
+      (t, e) => t.toRgbaString() === e.toRgbaString()
+    )));
+    s(this, "colorPresets", []);
+    const e = t[0], n = S.from(e);
+    this.setValue(n), this.setHueColor(n);
+  }
+  /** 设置值 */
+  setValueFrom(t, e, n) {
+    const r = S.from(t);
+    return this.initValue || (this.initValue = S.from(t)), typeof t == "string" && this.finOutInputType(t), this.setHueColor(r), this.setValue(r), this;
+  }
+  setHueColor(t) {
+    (this.hueValue && t.getHsva().hue > 0 || !this.hueValue) && (this.hueValue = new S().setHsva(t.getHsva().hue));
+  }
+  get hue() {
+    return this.hueValue;
+  }
+  set hue(t) {
+    this.hueValue = t;
+  }
+  setValue(t) {
+    return this.modelValue = t, this.valueChanged.next(t), this;
+  }
+  get value() {
+    return this.modelValue;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  reset() {
+    let t;
+    return this.initValue ? (t = this.initValue.clone(), this.setHueColor(t)) : (t = S.from(new u(255, 0, 0, 1)), this.hueValue = new S().setHsva(t.getHsva().hue)), this.setValue(t), this;
+  }
+  showAlphaChannel() {
+    return this.alphaChannelVisibilityChanges.next(!0), this;
+  }
+  finOutInputType(t) {
+    const e = t.replace(/ /g, "").toLowerCase();
+    e[0] === "#" && (this.initType = "hex", e.length > 7 && (this.initType = "hexa"));
+    const n = e.indexOf("(");
+    switch (e.substr(0, n)) {
+      case "rgba":
+        this.initType = "rgba";
+        break;
+      case "rgb":
+        this.initType = "rgb";
+        break;
+      case "hsla":
+        this.initType = "hsla";
+        break;
+      case "hsl":
+        this.initType = "hsl";
+        break;
+      case "cmyk":
+        this.initType = "cmyk";
+        break;
+    }
+  }
+  /** 设置预定义颜色 */
+  setColorPresets(t) {
+    return this.colorPresets = this.setPresets(t), this;
+  }
+  setPresets(t) {
+    const e = [];
+    return t.map((n) => {
+      Array.isArray(n) ? e.push(this.setPresets(n)) : e.push(new S(n));
+    }), e;
+  }
+  get presets() {
+    return this.colorPresets;
+  }
+  hasPresets() {
+    return this.colorPresets.length > 0;
+  }
+}
+/** 确定输入颜色类型 */
+s(Vt, "finOutInputType");
+function N(i, t) {
+  switch (t) {
+    case E.hex:
+      return i.toHexString();
+    case E.hexa:
+      return i.toHexString(!0);
+    case E.rgb:
+      return i.toRgbString();
+    case E.rgba:
+      return i.toRgbaString();
+    case E.hsl:
+      return i.toHslString();
+    case E.hsla:
+      return i.toHslaString();
+    default:
+      return i.toRgbaString();
+  }
+}
+const se = {
+  color: { type: Object, default: "" },
+  hue: { type: Object, default: "" },
+  randomId: { type: String, default: "" },
+  allowColorNull: { type: Boolean, default: !1 }
+}, ae = /* @__PURE__ */ q({
+  name: "SvPanel",
+  props: se,
+  emits: ["update:color"],
+  setup(i, t) {
+    const e = k(null), n = k(null), r = k(i.randomId), c = k(i.allowColorNull);
+    function o() {
+      return i.hue ? i.hue.toRgbaString() : "#3f51b5";
+    }
+    function l(f, w) {
+      var m, y;
+      f = Math.max(0, Math.min(f, 100)), w = Math.max(0, Math.min(w, 100)), e.value && ((m = e.value.style) == null || m.setProperty("top", `${100 - w}%`), (y = e.value.style) == null || y.setProperty("left", `${f}%`));
+    }
+    function h() {
+      const f = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
+      f.className = "btn btn-secondary";
+      const w = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
+      w.style.borderColor = "#dcdfe6";
+    }
+    function p({
+      x: f,
+      y: w,
+      height: m,
+      width: y
+    }) {
+      const g = f * 100 / y, H = -(w * 100 / m) + 100;
+      l(g, H);
+      const x = i.color == null ? "transparent" : i.color, P = S.from(x);
+      if (h(), P != null) {
+        const M = i.hue.getHsva(), V = P.getHsva(), O = new S().setHsva(M.hue, g, H, V.alpha);
+        t.emit("update:color", O);
+      }
+      !P && c.value && t.emit("update:color", null);
+    }
+    function d(f) {
+      if (n.value) {
+        const {
+          width: w,
+          height: m,
+          top: y,
+          left: g
+        } = n.value.getBoundingClientRect(), {
+          pageX: H,
+          pageY: x
+        } = "touches" in f ? f.touches[0] : f, P = Math.max(0, Math.min(H - (g + window.pageXOffset), w)), M = Math.max(0, Math.min(x - (y + window.pageYOffset), m));
+        p({
+          x: P,
+          y: M,
+          height: m,
+          width: w
+        });
+      }
+    }
+    return Z(() => {
+      const f = i.color.getHsva();
+      l(f.saturation, f.value);
+    }), $(() => i.color, (f) => {
+      f.getHsva();
+    }), $(() => i.color, (f) => {
+      const w = f.getHsva();
+      l(w.saturation, w.value);
+    }), () => b("div", {
+      class: "f-sv-panel-component",
+      ref: n,
+      style: {
+        backgroundColor: o()
+      },
+      onMousedown: U((f) => d(f), ["prevent"]),
+      onTouchstart: U((f) => d(f), ["prevent"])
+    }, [b("div", {
+      class: "color-svpanel__white"
+    }, null), b("div", {
+      class: "color-svpanel__black"
+    }, null), b("div", {
+      class: "color-svpanel__cursor",
+      ref: e
+    }, [b("div", null, null)])]);
+  }
+});
+const ue = {
+  color: { type: Object, default: "" },
+  hue: { type: Object, default: "" },
+  allowColorNull: { type: Boolean, default: !1 },
+  onChange: { type: Function }
+}, oe = /* @__PURE__ */ q({
+  name: "Hue",
+  props: ue,
+  emits: ["update:color", "update:hue"],
+  setup(i, t) {
+    const e = k(i.hue), n = k(i.allowColorNull), r = [];
+    function c(y) {
+      y.preventDefault(), l(y);
+    }
+    const o = k(null);
+    function l(y) {
+      if (o.value) {
+        const {
+          width: g,
+          height: H,
+          top: x,
+          left: P
+        } = o.value.getBoundingClientRect(), {
+          pageX: M,
+          pageY: V
+        } = "touches" in y ? y.touches[0] : y, O = Math.max(0, Math.min(M - (P + window.pageXOffset), g)), X = Math.max(0, Math.min(V - (x + window.pageYOffset), H));
+        m({
+          x: O,
+          y: X,
+          height: H,
+          width: g
+        });
+      }
+    }
+    function h() {
+      r.forEach((y) => y()), r.length = 0;
+    }
+    function p(y) {
+      c(y), document.addEventListener("mouseup", h), document.addEventListener("touchend", h), document.addEventListener("touchmove", c);
+    }
+    const d = (y) => {
+      p(y);
+    };
+    Z(() => {
+      document.querySelectorAll(".f-hue-component").forEach((H) => {
+        H.addEventListener("mousedown", d), H.addEventListener("touchstart", d);
+      });
+      const g = i.color.getHsva();
+      w(g.hue);
+    });
+    const f = k(null);
+    function w(y) {
+      var x;
+      const g = Math.max(0, Math.min(y / 360 * 100, 100)), H = "top";
+      f.value && ((x = f.value.style) == null || x.setProperty(H, `${g}%`));
+    }
+    function m({
+      x: y,
+      y: g,
+      height: H,
+      width: x
+    }) {
+      const P = g / H * 360;
+      w(P);
+      const M = i.color.getHsva(), V = new S().setHsva(P, M.saturation, M.value, M.alpha), O = new S().setHsva(P, 100, 100, M.alpha);
+      (i.color != null || i.color == null && n.value) && (t.emit("update:hue", O), t.emit("update:color", V));
+    }
+    return $(e, (y) => {
+      const g = y.getHsva();
+      w(g.hue);
+    }), $(() => i.color, (y) => {
+      const g = y.getHsva();
+      w(g.hue);
+    }), () => b("div", {
+      class: "f-hue-component",
+      ref: o,
+      onMousedown: U((y) => l(y), ["prevent"]),
+      onTouchstart: U((y) => l(y), ["prevent"])
+    }, [b("div", {
+      class: "color-hue-slider__bar"
+    }, null), b("div", {
+      class: "color-hue-slider__thumb",
+      ref: f
+    }, null)]);
+  }
+});
+const ce = {
+  color: { type: Object, default: "" },
+  randomId: { type: String, default: "" },
+  allowColorNull: { type: Boolean, default: !1 }
+}, le = /* @__PURE__ */ q({
+  name: "Alpha",
+  props: ce,
+  emits: ["update:color"],
+  setup(i, t) {
+    const e = k(null), n = k(null), r = k(i.randomId), c = k(i.allowColorNull), o = (d) => {
+      var m;
+      const f = Math.max(0, Math.min(d * 100, 100)), w = "left";
+      n.value && ((m = n.value.style) == null || m.setProperty(w, `${f}%`));
+    };
+    function l(d) {
+      if (e.value) {
+        const {
+          width: f,
+          height: w,
+          top: m,
+          left: y
+        } = e.value.getBoundingClientRect(), {
+          pageX: g,
+          pageY: H
+        } = "touches" in d ? d.touches[0] : d, x = Math.max(0, Math.min(g - (y + window.pageXOffset), f)), P = Math.max(0, Math.min(H - (m + window.pageYOffset), w));
+        p({
+          x,
+          y: P,
+          height: w,
+          width: f
+        });
+      }
+    }
+    function h() {
+      const d = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
+      d.className = "btn btn-secondary";
+      const f = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
+      f.style.borderColor = "#dcdfe6";
+    }
+    const p = ({
+      x: d,
+      width: f
+    }) => {
+      const w = d / f;
+      o(w), h();
+      const m = i.color.getHsva(), y = new S().setHsva(m.hue, m.saturation, m.value, w);
+      i.color != null ? t.emit("update:color", y) : i.color == null && c.value && t.emit("update:color", null);
+    };
+    return Z(() => {
+      const d = i.color.getHsva();
+      o(d.alpha);
+    }), $(() => i.color, (d) => {
+      const f = d.getHsva();
+      o(f.alpha);
+    }), () => b("div", {
+      class: "f-alpha-component",
+      ref: e,
+      onMousedown: U((d) => l(d), ["prevent"]),
+      onTouchstart: U((d) => l(d), ["prevent"])
+    }, [b("div", {
+      class: "color-alpha-slider__bar"
+    }, [Pt(" ")]), b("div", {
+      class: "color-alpha-slider__thumb",
+      ref: n
+    }, null)]);
+  }
+});
+const he = {
+  color: { type: Object, default: "" },
+  hue: { type: Object, default: "" },
+  colorPresets: { type: Object, default: "" },
+  randomId: { type: String, default: "" }
+}, de = /* @__PURE__ */ q({
+  name: "Preset",
+  props: he,
+  emits: ["update:hue", "update:color"],
+  setup(i, t) {
+    const e = k(new S()), n = k(i.colorPresets), r = k(i.randomId);
+    function c() {
+      const p = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
+      p.className = "btn btn-secondary";
+      const d = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
+      d.style.borderColor = "#dcdfe6";
+    }
+    function o(p) {
+      c();
+      const d = p.getRgba(), f = p.getHsva(), w = new S().setRgba(d.red, d.green, d.blue, d.alpha), m = new S().setHsva(f.hue);
+      e.value = p, t.emit("update:hue", m), t.emit("update:color", w);
+    }
+    function l(p) {
+      const d = e.value.getRgba().toString(), f = e.value.getHsva().toString(), w = p.getRgba().toString() === d && p.getHsva().toString() === f;
+      return {
+        "color-preset__color-selector": w,
+        selected: w
+      };
+    }
+    function h(p, d) {
+      return b("div", {
+        class: "color-preset__color-selector"
+      }, [b("div", {
+        key: d,
+        class: l(p),
+        style: {
+          backgroundColor: p.toRgbString()
+        },
+        onClick: () => o(p)
+      }, null)]);
+    }
+    return () => b("div", {
+      class: "f-preset-component"
+    }, [b("div", {
+      class: "color-preset__colors"
+    }, [n.value.map((p, d) => h(p, d))])]);
+  }
+});
+const St = /* @__PURE__ */ q({
+  name: "FColorPicker",
+  props: Wt,
+  emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
+  setup(i, t) {
+    const e = k(new S(i.color)), n = k(i.color), r = k(i.disabled), c = k(i.color);
+    k(i.editable);
+    const o = k(i.allowColorNull), l = k(i.presets), h = k(!1), p = k(!1), d = k(!1), f = k("HEX"), w = Math.floor(Math.random() * 1e3).toString();
+    let m = -1, y, g = new Vt("#000000");
+    const H = k(i.color);
+    let x, P;
+    const M = k(null), V = k(null), O = k(null);
+    let X = L(() => !y && g && g.initType ? g.initType : y);
+    const B = L({
+      get() {
+        return y && n.value !== null ? (et(y), N(new S(n.value), E[y])) : n.value;
+      },
+      set(v) {
+        v !== null && (A(v), gt(v));
+      }
+    }), _ = k(B.value), Ot = L(() => m > -1), ft = L(() => l.value.length > 0), $t = L(() => ({
+      "background-color": c.value
+    })), At = L(() => p.value && h.value ? "visibility:visible" : "visibility:hidden"), z = [{
+      text: "HEX",
+      type: E.hex
+    }, {
+      text: "RGBA",
+      type: E.rgba
+    }];
+    function jt() {
+      const v = document.getElementById("farris-color-picker-panel");
+      v.id = `farris-color-picker-panel-${w}`;
+      const I = document.getElementById("farris-color-picker-plus-sure");
+      I.id = `farris-color-picker-plus-sure-${w}`;
+      const j = document.getElementById("farris-color-picker-plus-input");
+      j.id = `farris-color-picker-plus-input-${w}`, P = document.getElementById(`farris-color-picker-plus-sure-${w}`), x = document.getElementById(`farris-color-picker-panel-${w}`), x.className = "color-picker-panel disabled";
+    }
+    function pt() {
+      if (!o.value && !n.value) {
+        document.getElementById(`farris-color-picker-plus-sure-${w}`).classList.toggle("disabled");
+        const I = document.getElementById(`farris-color-picker-plus-input-${w}`);
+        I.style.borderColor = "red";
+      }
+    }
+    function Nt() {
+      n.value && (A(n.value), !n.value && o.value || (n.value = N(new S(n.value), E[X.value])), _.value = B.value), tt(et(g.initType));
+    }
+    function Lt() {
+      n.value && A(n.value), g.hasPresets() || g.setColorPresets(l.value), n.value ? c.value = N(new S(n.value), E[X.value]) : !n.value && o.value && (c.value = null);
+    }
+    function Ut() {
+      g.valueChanges.subscribe((v) => {
+        const I = N(v, E[y || g.initType]);
+        n.value = I;
+      });
+    }
+    function tt(v) {
+      f.value = z[v].text;
+    }
+    function Ft() {
+      var v;
+      p.value = !!(y != null && y.includes("a") || (v = g.initType) != null && v.includes("a"));
+    }
+    zt(() => {
+      g.setColorPresets(l.value || ["#eaecf3"]);
+    }), Z(() => {
+      jt(), pt(), Nt(), Lt();
+    }), $(f, () => {
+      Ut(), B.value = N(new S(n.value), E[y || g.initType]), e.value = new S(B.value), Ft();
+    }), $(n, (v) => {
+      N(g.value, g.initType) !== v && v !== null && A(v), tt(et(g.initType));
+    }), $(e, (v) => {
+      n.value = N(v, E[y || g.initType]), A(n.value), B.value = n.value;
+    });
+    function gt(v) {
+      const I = document.getElementById(`farris-color-picker-plus-input-${w}`);
+      (v == "" || v == null || v == null) && !o.value ? (n.value = null, I.style.borderColor = "red", P.className = "btn btn-secondary disabled") : (I.style.borderColor = "#dcdfe6", P.className = "btn btn-secondary");
+    }
+    function Yt() {
+      var v, I;
+      if (o.value) {
+        c.value = (n == null ? void 0 : n.value) ?? null;
+        const j = {
+          elementValue: c
+        };
+        t.emit("valueChanged", j), x.classList.toggle("disabled");
+      }
+      if (!o.value && !(B.value == null || B.value == null || B.value == "")) {
+        (I = (v = M.value) == null ? void 0 : v.style) == null || I.setProperty("background", n.value), d.value = !0, c.value = n.value;
+        const j = {
+          elementValue: c
+        };
+        t.emit("valueChanged", j), x.classList.toggle("disabled");
+      }
+      !H.value && !n.value && !d.value && o && x.classList.toggle("disabled"), gt(n.value), B.value = n.value, P.classList.contains("disabled") || (_.value = n.value, h.value = !1);
+    }
+    function A(v) {
+      g == null || g.setValueFrom(v, w, o.value);
+    }
+    function Dt(v) {
+      r.value || (h.value = !0, x.classList.toggle("disabled"), pt(), A(n.value));
+    }
+    function et(v) {
+      const I = z.findIndex((j) => j.type === v);
+      return m = I, I;
+    }
+    function vt(v) {
+      if (!P.classList.contains("disabled")) {
+        const I = z.length;
+        m = (I + m + (v === "up" ? 1 : -1)) % I, y = z[m].type, tt(m), A(n.value);
+      }
+    }
+    return () => b("div", {
+      class: "f-color-picker-component",
+      ref: V
+    }, [b("div", {
+      class: ["color-picker-panel", {
+        disabled: r.value
+      }],
+      id: "farris-color-picker-panel",
+      ref: O,
+      onClick: (v) => v.stopPropagation,
+      style: "top:30px"
+    }, [b("div", {
+      class: "color-picker-main"
+    }, [b(oe, {
+      hue: g.hue,
+      "onUpdate:hue": (v) => g.hue = v,
+      allowColorNull: o.value,
+      color: e.value,
+      "onUpdate:color": (v) => e.value = v
+    }, null), b(ae, {
+      randomId: w,
+      hue: g.hue,
+      "onUpdate:hue": (v) => g.hue = v,
+      allowColorNull: o.value,
+      color: e.value,
+      "onUpdate:color": (v) => e.value = v
+    }, null)]), b(le, {
+      style: At.value,
+      randomId: w,
+      allowColorNull: o.value,
+      color: e.value,
+      "onUpdate:color": (v) => e.value = v
+    }, null), b("div", {
+      class: "input-btn",
+      style: "display:flex;align-items: center;"
+    }, [G(b("span", {
+      style: "width:40px;margin-right:10px;"
+    }, [f.value]), [[nt, ft]]), G(b("input", {
+      type: "text",
+      id: "farris-color-picker-plus-input",
+      "onUpdate:modelValue": (v) => B.value = v,
+      style: "float:none"
+    }, null), [[Gt, B.value]]), G(b("div", {
+      class: "type-icon-btn-wrapper",
+      style: "cursor:pointer"
+    }, [b("span", {
+      class: "f-icon f-icon-arrow-60-up type-icon-btn",
+      onClick: () => vt("up")
+    }, null), b("span", {
+      class: "f-icon f-icon-arrow-60-down type-icon-btn",
+      onClick: () => vt("down")
+    }, null)]), [[nt, ft]]), b("div", {
+      class: "input-btn"
+    }, [b("button", {
+      id: "farris-color-picker-plus-sure",
+      class: "btn btn-secondary",
+      onClick: Yt
+    }, [Pt("确定")])])]), G(b(de, {
+      color: e.value,
+      "onUpdate:color": (v) => e.value = v,
+      colorPresets: g.presets,
+      hue: g.hue,
+      "onUpdate:hue": (v) => g.hue = v,
+      randomId: w
+    }, null), [[nt, Ot]])]), b("div", {
+      class: "color-picker-wrapper"
+    }, [b("input", {
+      type: "text",
+      class: "color-picker-input form-control",
+      value: _.value,
+      readonly: i.editable || i.disabled,
+      onClick: (v) => v.stopPropagation()
+    }, null), b("div", {
+      class: "color-picker-trigger",
+      onClick: Dt
+    }, [b("div", {
+      class: "color-picker-trigger-inner"
+    }, [b("div", {
+      style: $t.value
+    }, null)])])])]);
+  }
+}), ge = {
+  install(i) {
+    i.component(St.name, St);
+  }
+};
+export {
+  St as ColorPicker,
+  ge as default
+};