@farris/ui-vue 1.7.0-beta.4 → 1.7.0

package/designer/color-picker/index.esm.js

@@ -0,0 +1,1096 @@
+var yt = Object.defineProperty;
+var kt = (u, t, i) => t in u ? yt(u, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : u[t] = i;
+var e = (u, t, i) => kt(u, typeof t != "symbol" ? t + "" : t, i);
+import { withInstall as bt } from "../../components/common/index.esm.js";
+import Pt, { colorPickerProps as it } from "../../components/color-picker/index.esm.js";
+import { ref as k, defineComponent as U, onMounted as D, watch as V, createVNode as y, withModifiers as L, createTextVNode as rt, inject as Ht, computed as j, onBeforeMount as St, withDirectives as Y, vShow as Z, vModelText as It } from "vue";
+import { useDesignerComponent as Mt } from "../../components/designer-canvas/index.esm.js";
+import { resolveAppearance as xt, createPropsResolver as Rt } from "../../components/dynamic-resolver/index.esm.js";
+class W {
+}
+class C extends W {
+  constructor(t, i, a, r) {
+    super(), this.cyan = t, this.magenta = i, this.yellow = a, 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 F extends W {
+  constructor(t, i, a, r) {
+    super(), this.hue = t, this.saturation = i, this.lightness = a, 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 q extends W {
+  constructor(t, i, a, r) {
+    super(), this.hue = t, this.saturation = i, this.value = a, 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 s extends W {
+  constructor(t, i, a, r) {
+    super(), this.red = t, this.green = i, this.blue = a, 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 n = class n {
+};
+e(n, "transparent", new s(0, 0, 0, 0)), e(n, "aliceblue", new s(240, 248, 255, 1)), e(n, "antiquewhite", new s(250, 235, 215, 1)), e(n, "aqua", new s(0, 255, 255, 1)), e(n, "aquamarine", new s(127, 255, 212, 1)), e(n, "azure", new s(240, 255, 255, 1)), e(n, "beige", new s(245, 245, 220, 1)), e(n, "bisque", new s(255, 228, 196, 1)), e(n, "black", new s(0, 0, 0, 1)), e(n, "blanchedalmond", new s(255, 235, 205, 1)), e(n, "blue", new s(0, 0, 255, 1)), e(n, "blueviolet", new s(138, 43, 226, 1)), e(n, "brown", new s(165, 42, 42, 1)), e(n, "burlywood", new s(222, 184, 135, 1)), e(n, "cadetblue", new s(95, 158, 160, 1)), e(n, "chartreuse", new s(127, 255, 0, 1)), e(n, "chocolate", new s(210, 105, 30, 1)), e(n, "coral", new s(255, 127, 80, 1)), e(n, "cornflowerblue", new s(100, 149, 237, 1)), e(n, "cornsilk", new s(255, 248, 220, 1)), e(n, "crimson", new s(220, 20, 60, 1)), e(n, "cyan", new s(0, 255, 255, 1)), e(n, "darkblue", new s(0, 0, 139, 1)), e(n, "darkcyan", new s(0, 139, 139, 1)), e(n, "darkgoldenrod", new s(184, 134, 11, 1)), e(n, "darkgray", new s(169, 169, 169, 1)), e(n, "darkgreen", new s(0, 100, 0, 1)), e(n, "darkgrey", n.darkgray), e(n, "darkkhaki", new s(189, 183, 107, 1)), e(n, "darkmagenta", new s(139, 0, 139, 1)), e(n, "darkolivegreen", new s(85, 107, 47, 1)), e(n, "darkorange", new s(255, 140, 0, 1)), e(n, "darkorchid", new s(153, 50, 204, 1)), e(n, "darkred", new s(139, 0, 0, 1)), e(n, "darksalmon", new s(233, 150, 122, 1)), e(n, "darkseagreen", new s(143, 188, 143, 1)), e(n, "darkslateblue", new s(72, 61, 139, 1)), e(n, "darkslategray", new s(47, 79, 79, 1)), e(n, "darkslategrey", n.darkslategray), e(n, "darkturquoise", new s(0, 206, 209, 1)), e(n, "darkviolet", new s(148, 0, 211, 1)), e(n, "deeppink", new s(255, 20, 147, 1)), e(n, "deepskyblue", new s(0, 191, 255, 1)), e(n, "dimgray", new s(105, 105, 105, 1)), e(n, "dimgrey", n.dimgray), e(n, "dodgerblue", new s(30, 144, 255, 1)), e(n, "firebrick", new s(178, 34, 34, 1)), e(n, "floralwhite", new s(255, 250, 240, 1)), e(n, "forestgreen", new s(34, 139, 34, 1)), e(n, "fuchsia", new s(255, 0, 255, 1)), e(n, "gainsboro", new s(220, 220, 220, 1)), e(n, "ghostwhite", new s(248, 248, 255, 1)), e(n, "gold", new s(255, 215, 0, 1)), e(n, "goldenrod", new s(218, 165, 32, 1)), e(n, "gray", new s(128, 128, 128, 1)), e(n, "grey", n.gray), e(n, "green", new s(0, 128, 0, 1)), e(n, "greenyellow", new s(173, 255, 47, 1)), e(n, "honeydew", new s(240, 255, 240, 1)), e(n, "hotpink", new s(255, 105, 180, 1)), e(n, "indianred", new s(205, 92, 92, 1)), e(n, "indigo", new s(75, 0, 130, 1)), e(n, "ivory", new s(255, 255, 240, 1)), e(n, "khaki", new s(240, 230, 140, 1)), e(n, "lavender", new s(230, 230, 250, 1)), e(n, "lavenderblush", new s(255, 240, 245, 1)), e(n, "lawngreen", new s(124, 252, 0, 1)), e(n, "lemonchiffon", new s(255, 250, 205, 1)), e(n, "lightblue", new s(173, 216, 230, 1)), e(n, "lightcoral", new s(240, 128, 128, 1)), e(n, "lightcyan", new s(224, 255, 255, 1)), e(n, "lightgoldenrodyellow", new s(250, 250, 210, 1)), e(n, "lightgray", new s(211, 211, 211, 1)), e(n, "lightgreen", new s(144, 238, 144, 1)), e(n, "lightgrey", n.lightgray), e(n, "lightpink", new s(255, 182, 193, 1)), e(n, "lightsalmon", new s(255, 160, 122, 1)), e(n, "lightseagreen", new s(32, 178, 170, 1)), e(n, "lightskyblue", new s(135, 206, 250, 1)), e(n, "lightslategray", new s(119, 136, 153, 1)), e(n, "lightslategrey", n.lightslategray), e(n, "lightsteelblue", new s(176, 196, 222, 1)), e(n, "lightyellow", new s(255, 255, 224, 1)), e(n, "lime", new s(0, 255, 0, 1)), e(n, "limegreen", new s(50, 205, 50, 1)), e(n, "linen", new s(250, 240, 230, 1)), e(n, "magenta", new s(255, 0, 255, 1)), e(n, "maroon", new s(128, 0, 0, 1)), e(n, "mediumaquamarine", new s(102, 205, 170, 1)), e(n, "mediumblue", new s(0, 0, 205, 1)), e(n, "mediumorchid", new s(186, 85, 211, 1)), e(n, "mediumpurple", new s(147, 112, 219, 1)), e(n, "mediumseagreen", new s(60, 179, 113, 1)), e(n, "mediumslateblue", new s(123, 104, 238, 1)), e(n, "mediumspringgreen", new s(0, 250, 154, 1)), e(n, "mediumturquoise", new s(72, 209, 204, 1)), e(n, "mediumvioletred", new s(199, 21, 133, 1)), e(n, "midnightblue", new s(25, 25, 112, 1)), e(n, "mintcream", new s(245, 255, 250, 1)), e(n, "mistyrose", new s(255, 228, 225, 1)), e(n, "moccasin", new s(255, 228, 181, 1)), e(n, "navajowhite", new s(255, 222, 173, 1)), e(n, "navy", new s(0, 0, 128, 1)), e(n, "oldlace", new s(253, 245, 230, 1)), e(n, "olive", new s(128, 128, 0, 1)), e(n, "olivedrab", new s(107, 142, 35, 1)), e(n, "orange", new s(255, 165, 0, 1)), e(n, "orangered", new s(255, 69, 0, 1)), e(n, "orchid", new s(218, 112, 214, 1)), e(n, "palegoldenrod", new s(238, 232, 170, 1)), e(n, "palegreen", new s(152, 251, 152, 1)), e(n, "paleturquoise", new s(175, 238, 238, 1)), e(n, "palevioletred", new s(219, 112, 147, 1)), e(n, "papayawhip", new s(255, 239, 213, 1)), e(n, "peachpuff", new s(255, 218, 185, 1)), e(n, "peru", new s(205, 133, 63, 1)), e(n, "pink", new s(255, 192, 203, 1)), e(n, "plum", new s(221, 160, 221, 1)), e(n, "powderblue", new s(176, 224, 230, 1)), e(n, "purple", new s(128, 0, 128, 1)), e(n, "red", new s(255, 0, 0, 1)), e(n, "rosybrown", new s(188, 143, 143, 1)), e(n, "royalblue", new s(65, 105, 225, 1)), e(n, "saddlebrown", new s(139, 69, 19, 1)), e(n, "salmon", new s(250, 128, 114, 1)), e(n, "sandybrown", new s(244, 164, 96, 1)), e(n, "seagreen", new s(46, 139, 87, 1)), e(n, "seashell", new s(255, 245, 238, 1)), e(n, "sienna", new s(160, 82, 45, 1)), e(n, "silver", new s(192, 192, 192, 1)), e(n, "skyblue", new s(135, 206, 235, 1)), e(n, "slateblue", new s(106, 90, 205, 1)), e(n, "slategray", new s(112, 128, 144, 1)), e(n, "slategrey", n.slategray), e(n, "snow", new s(255, 250, 250, 1)), e(n, "springgreen", new s(0, 255, 127, 1)), e(n, "steelblue", new s(70, 130, 180, 1)), e(n, "tan", new s(210, 180, 140, 1)), e(n, "teal", new s(0, 128, 128, 1)), e(n, "thistle", new s(216, 191, 216, 1)), e(n, "tomato", new s(255, 99, 71, 1)), e(n, "turquoise", new s(64, 224, 208, 1)), e(n, "violet", new s(238, 130, 238, 1)), e(n, "wheat", new s(245, 222, 179, 1)), e(n, "white", new s(255, 255, 255, 1)), e(n, "whitesmoke", new s(245, 245, 245, 1)), e(n, "yellow", new s(255, 255, 0, 1)), e(n, "yellowgreen", new s(154, 205, 50, 1));
+let T = n;
+class P {
+  constructor(t) {
+    /**
+     * base color used to calculate other
+     * default color
+     * rgb(255, 0, 0)
+     * hsl(0, 100%, 50%)
+     * 初始色#ff0000
+     */
+    e(this, "hsva", new q(0, 1, 1, 1));
+    e(this, "rgba", new s(255, 0, 0, 1));
+    t && this.stringToColor(t);
+  }
+  static from(t) {
+    return typeof t == "string" ? new P(t) : t instanceof P ? t.clone() : t instanceof s ? new P().setRgba(t.red, t.green, t.blue, t.alpha) : t instanceof q ? new P().setHsva(t.hue, t.saturation, t.value, t.alpha) : t instanceof F ? new P().setHsla(t.hue, t.saturation, t.lightness, t.alpha) : new P(t);
+  }
+  /**
+   * make from existing color new color object
+   */
+  clone() {
+    return P.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, i = 100, a = 100, r = 1) {
+    return t != null && (this.hsva.hue = t), i != null && (this.hsva.saturation = i), a != null && (this.hsva.value = a), 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, i, a, r = 1) {
+    return t != null && (this.rgba.red = t), i != null && (this.rgba.green = i), a != null && (this.rgba.blue = a), 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, i, a, r = 1) {
+    r != null && (r = r > 1 ? 1 : r < 0 ? 0 : r, this.rgba.alpha = r);
+    const w = new F(t, i, a, r);
+    return this.rgba = this.hslaToRgba(w), this.hsva = this.rgbaToHsva(this.rgba), this;
+  }
+  /**
+   * return hexadecimal value formatted as '#341d2a' or '#341d2aFF' if alhpa channel is enabled
+   */
+  toHexString(t = !1) {
+    let i = "#" + (16777216 | this.rgba.getRed() << 16 | this.rgba.getGreen() << 8 | this.rgba.getBlue()).toString(16).substr(1);
+    return t && (i += (256 | Math.round(this.rgba.alpha * 255)).toString(16).substr(1)), i.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 q(this.hsva.hue, this.hsva.saturation, this.hsva.value, this.hsva.alpha);
+  }
+  getRgba() {
+    return new s(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: i } = t, a = t.saturation / 100, r = t.value / 100, w = (2 - a) * t.value / 2, c = a * r / (w <= 1 ? w : 2 - w) || 0;
+    return new F(i, w * 100, c * 100, t.alpha);
+  }
+  hslaToHsva(t) {
+    const { hue: i } = t, a = t.lightness / 100 * 2, r = t.saturation / 100 * (a <= 1 ? a : 2 - a), w = (a + r) / 2, c = 2 * r / (a + r) || 0;
+    return new q(i, c, w, t.alpha);
+  }
+  rgbaToHsva(t) {
+    const i = t.red / 255, a = t.green / 255, r = t.blue / 255, { alpha: w } = t, c = Math.max(i, a, r), h = Math.min(i, a, r), p = c - h;
+    let g = 0, l = c === 0 ? 0 : p / c, o = c;
+    if (c !== h) {
+      switch (c) {
+        case i:
+          g = (a - r) / p + (a < r ? 6 : 0);
+          break;
+        case a:
+          g = 2 + (r - i) / p;
+          break;
+        case r:
+          g = 4 + (i - a) / p;
+          break;
+      }
+      g /= 6;
+    }
+    return g *= 360, l *= 100, o *= 100, new q(g, l, o, w);
+  }
+  hsvaToRgba(t) {
+    let i = 1, a = 0, r = 0;
+    const w = t.saturation / 100, c = t.value / 100, { alpha: h } = t, p = t.hue / 60, g = Math.floor(p), l = p - g, o = (1 - w) * c, m = (1 - w * l) * c, b = (1 - w * (1 - l)) * c;
+    switch (g) {
+      case 6:
+      case 0:
+        i = c, a = b, r = o;
+        break;
+      case 1:
+        i = m, a = c, r = o;
+        break;
+      case 2:
+        i = o, a = c, r = b;
+        break;
+      case 3:
+        i = o, a = m, r = c;
+        break;
+      case 4:
+        i = b, a = o, r = c;
+        break;
+      case 5:
+        i = c, a = o, r = m;
+        break;
+    }
+    return i *= 255, a *= 255, r *= 255, new s(i, a, r, h);
+  }
+  rgbaToHsla(t) {
+    const i = t.red / 255, a = t.green / 255, r = t.blue / 255, { alpha: w } = t, c = Math.max(i, a, r), h = Math.min(i, a, r);
+    let p = 0, g = 0, l = (c + h) / 2;
+    const o = c - h;
+    if (c !== h) {
+      switch (g = l > 0.5 ? o / (2 - c - h) : o / (c + h), c) {
+        case i:
+          p = (a - r) / o + (a < r ? 6 : 0);
+          break;
+        case a:
+          p = (r - i) / o + 2;
+          break;
+        case r:
+          p = (i - a) / o + 4;
+          break;
+      }
+      p /= 6;
+    }
+    return p *= 360, g *= 100, l *= 100, new F(p, g, l, w);
+  }
+  /**
+   * convert rgb color from HSLa
+   *
+   * hue = 0 => 360
+   * saturation = 0 => 1
+   * lightness = 0 => 1
+   */
+  hslaToRgba(t) {
+    const i = t.hue / 360, a = t.saturation / 100, r = t.lightness / 100, { alpha: w } = t;
+    let c = r, h = r, p = r;
+    if (a !== 0) {
+      const g = r < 0.5 ? r * (1 + a) : r + a - r * a, l = 2 * r - g;
+      c = this.hueToRgb(l, g, i + 1 / 3), h = this.hueToRgb(l, g, i), p = this.hueToRgb(l, g, i - 1 / 3);
+    }
+    return c *= 255, h *= 255, p *= 255, new s(c, h, p, w);
+  }
+  hueToRgb(t, i, a) {
+    return a < 0 && (a += 1), a > 1 && (a -= 1), a < 1 / 6 ? t + (i - t) * 6 * a : a < 1 / 2 ? i : a < 2 / 3 ? t + (i - t) * (2 / 3 - a) * 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 i = t.black / 100, a = t.cyan / 100, r = t.magenta / 100, w = t.yellow / 100;
+    let c = Math.min(1, (1 - a) * (1 - i)), h = Math.min(1, (1 - r) * (1 - i)), p = Math.min(1, (1 - w) * (1 - i));
+    return c *= 255, h *= 255, p *= 255, new s(c, h, p, 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 i = t.red / 255, a = t.green / 255, r = t.blue / 255;
+    let w = 1 - i, c = 1 - a, h = 1 - r, p = Math.min(w, c, h);
+    return p === 1 ? new C(0, 0, 0, 1) : (w = (w - p) / (1 - p), c = (c - p) / (1 - p), h = (h - p) / (1 - p), p *= 100, w *= 100, c *= 100, h *= 100, new C(w, c, h, p));
+  }
+  roundNumber(t) {
+    return Math.round(t * 100) / 100;
+  }
+  stringToColor(t) {
+    const i = t.replace(/ /g, "").toLowerCase();
+    let a = T[t] || null;
+    if (i[0] === "#") {
+      let c = i.substr(1);
+      const { length: h } = c;
+      let p = 1, g;
+      if (h === 3)
+        g = c.split("").map((l) => l + l);
+      else if (h === 6)
+        g = c.match(/.{2}/g);
+      else if (h === 8) {
+        const l = c.substr(-2);
+        c = c.substr(0, h - 2), p = this.roundNumber(parseInt(l || "FF", 16) / 255), g = c.match(/.{2}/g);
+      }
+      g && g.length === 3 && (a = new s(parseInt(g[0], 16), parseInt(g[1], 16), parseInt(g[2], 16), p));
+    }
+    const r = i.indexOf("("), w = i.indexOf(")");
+    if (r !== -1 && w + 1 === i.length) {
+      const c = i.substr(0, r), h = i.substr(r + 1, w - (r + 1)).split(",");
+      let p = 1, g, l;
+      switch (c) {
+        case "rgba":
+          p = parseFloat(h.pop());
+        case "rgb":
+          a = new s(parseInt(h[0], 10), parseInt(h[1], 10), parseInt(h[2], 10), p);
+          break;
+        case "hsla":
+          p = parseFloat(h.pop());
+          break;
+        case "hsl":
+          g = new F(
+            parseInt(h[0], 10),
+            parseInt(h[1], 10),
+            parseInt(h[2], 10),
+            p
+          ), a = this.hslaToRgba(g);
+          break;
+        case "cmyk":
+          l = new C(
+            parseInt(h[0], 10),
+            parseInt(h[1], 10),
+            parseInt(h[2], 10),
+            parseInt(h[3], 10)
+          ), a = this.cmykToRgba(l);
+          break;
+      }
+    }
+    return a && (this.rgba = a, this.hsva = this.rgbaToHsva(a)), this;
+  }
+}
+var x = /* @__PURE__ */ ((u) => (u.hex = "hex", u.hexa = "hexa", u.rgba = "rgba", u.rgb = "rgb", u.hsla = "hsla", u.hsl = "hsl", u.cmyk = "cmyk", u))(x || {});
+class ct {
+  constructor(t) {
+    /** 所选颜色值 */
+    e(this, "modelValue", null);
+    /** 色调颜色值 */
+    e(this, "hueValue", null);
+    /** 初始颜色值 */
+    e(this, "initValue", null);
+    e(this, "valueChanged", k());
+    e(this, "initType", null);
+    // 此处没有监听变量变更后操作的方法  TODO
+    e(this, "alphaChannelVisibilityChanges", k());
+    e(this, "colorPresets", []);
+    const i = t[0], a = P.from(i);
+    this.setValue(a), this.setHueColor(a);
+  }
+  /** 设置值 */
+  setValueFrom(t, i, a) {
+    const r = P.from(t);
+    return this.initValue || (this.initValue = P.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 P().setHsva(t.getHsva().hue));
+  }
+  get hue() {
+    return this.hueValue;
+  }
+  set hue(t) {
+    this.hueValue = t;
+  }
+  setValue(t) {
+    var i;
+    return this.modelValue = t, (t == null ? void 0 : t.toRgbaString()) === ((i = this.valueChanged.value) == null ? void 0 : i.toRgbaString()) && (this.valueChanged.value = 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 = P.from(new s(255, 0, 0, 1)), this.hueValue = new P().setHsva(t.getHsva().hue)), this.setValue(t), this;
+  }
+  showAlphaChannel() {
+    return this.alphaChannelVisibilityChanges.value = !0, this;
+  }
+  finOutInputType(t) {
+    const i = t.replace(/ /g, "").toLowerCase();
+    i[0] === "#" && (this.initType = "hex", i.length > 7 && (this.initType = "hexa"));
+    const a = i.indexOf("(");
+    switch (i.substr(0, a)) {
+      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 i = [];
+    return t.map((a) => {
+      Array.isArray(a) ? i.push(this.setPresets(a)) : i.push(new P(a));
+    }), i;
+  }
+  get presets() {
+    return this.colorPresets;
+  }
+  hasPresets() {
+    return this.colorPresets.length > 0;
+  }
+}
+/** 确定输入颜色类型 */
+e(ct, "finOutInputType");
+function A(u, t) {
+  if (!u)
+    return "";
+  switch (t) {
+    case x.hex:
+      return u.toHexString();
+    case x.hexa:
+      return u.toHexString(!0);
+    case x.rgb:
+      return u.toRgbString();
+    case x.rgba:
+      return u.toRgbaString();
+    case x.hsl:
+      return u.toHslString();
+    case x.hsla:
+      return u.toHslaString();
+    default:
+      return u.toRgbaString();
+  }
+}
+const $t = {
+  color: { type: Object, default: "" },
+  hue: { type: Object, default: "" },
+  randomId: { type: String, default: "" },
+  allowColorNull: { type: Boolean, default: !1 }
+}, Bt = /* @__PURE__ */ U({
+  name: "SvPanel",
+  props: $t,
+  emits: ["update:color"],
+  setup(u, t) {
+    const i = k(null), a = k(null), r = k(u.randomId), w = k(u.allowColorNull);
+    function c() {
+      return u.hue ? u.hue.toRgbaString() : "#3f51b5";
+    }
+    function h(o, m) {
+      var b, f;
+      o = Math.max(0, Math.min(o, 100)), m = Math.max(0, Math.min(m, 100)), i.value && ((b = i.value.style) == null || b.setProperty("top", `${100 - m}%`), (f = i.value.style) == null || f.setProperty("left", `${o}%`));
+    }
+    function p() {
+      const o = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
+      o.className = "btn btn-secondary";
+      const m = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
+      m.style.borderColor = "#dcdfe6";
+    }
+    function g({
+      x: o,
+      y: m,
+      height: b,
+      width: f
+    }) {
+      const v = o * 100 / f, M = -(m * 100 / b) + 100;
+      h(v, M);
+      const H = u.color == null ? "transparent" : u.color, S = P.from(H);
+      if (p(), S != null) {
+        const R = u.hue.getHsva(), N = S.getHsva(), B = new P().setHsva(R.hue, v, M, N.alpha);
+        t.emit("update:color", B);
+      }
+      !S && w.value && t.emit("update:color", null);
+    }
+    function l(o) {
+      if (a.value) {
+        const {
+          width: m,
+          height: b,
+          top: f,
+          left: v
+        } = a.value.getBoundingClientRect(), {
+          pageX: M,
+          pageY: H
+        } = "touches" in o ? o.touches[0] : o, S = Math.max(0, Math.min(M - (v + window.pageXOffset), m)), R = Math.max(0, Math.min(H - (f + window.pageYOffset), b));
+        g({
+          x: S,
+          y: R,
+          height: b,
+          width: m
+        });
+      }
+    }
+    return D(() => {
+      const o = u.color.getHsva();
+      h(o.saturation, o.value);
+    }), V(() => u.color, (o) => {
+      o.getHsva();
+    }), V(() => u.color, (o) => {
+      const m = o.getHsva();
+      h(m.saturation, m.value);
+    }), () => y("div", {
+      class: "f-sv-panel-component",
+      ref: a,
+      style: {
+        backgroundColor: c()
+      },
+      onMousedown: L((o) => l(o), ["prevent"]),
+      onTouchstart: L((o) => l(o), ["prevent"])
+    }, [y("div", {
+      class: "color-svpanel__white"
+    }, null), y("div", {
+      class: "color-svpanel__black"
+    }, null), y("div", {
+      class: "color-svpanel__cursor",
+      ref: i
+    }, [y("div", null, null)])]);
+  }
+}), Vt = {
+  color: { type: Object, default: "" },
+  hue: { type: Object, default: "" },
+  allowColorNull: { type: Boolean, default: !1 },
+  onChange: { type: Function }
+}, Nt = /* @__PURE__ */ U({
+  name: "Hue",
+  props: Vt,
+  emits: ["update:color", "update:hue"],
+  setup(u, t) {
+    const i = k(u.hue), a = k(u.allowColorNull), r = [];
+    function w(f) {
+      f.preventDefault(), h(f);
+    }
+    const c = k(null);
+    function h(f) {
+      if (c.value) {
+        const {
+          width: v,
+          height: M,
+          top: H,
+          left: S
+        } = c.value.getBoundingClientRect(), {
+          pageX: R,
+          pageY: N
+        } = "touches" in f ? f.touches[0] : f, B = Math.max(0, Math.min(R - (S + window.pageXOffset), v)), z = Math.max(0, Math.min(N - (H + window.pageYOffset), M));
+        b({
+          x: B,
+          y: z,
+          height: M,
+          width: v
+        });
+      }
+    }
+    function p() {
+      r.forEach((f) => f()), r.length = 0;
+    }
+    function g(f) {
+      w(f), document.addEventListener("mouseup", p), document.addEventListener("touchend", p), document.addEventListener("touchmove", w);
+    }
+    const l = (f) => {
+      g(f), f.stopPropagation();
+    };
+    D(() => {
+      document.querySelectorAll(".f-hue-component").forEach((M) => {
+        M.addEventListener("mousedown", l), M.addEventListener("touchstart", l);
+      });
+      const v = u.color.getHsva();
+      m(v.hue);
+    });
+    const o = k(null);
+    function m(f) {
+      var H;
+      const v = Math.max(0, Math.min(f / 360 * 100, 100));
+      o.value && ((H = o.value.style) == null || H.setProperty("top", `${v}%`));
+    }
+    function b({
+      x: f,
+      y: v,
+      height: M,
+      width: H
+    }) {
+      const S = v / M * 360;
+      m(S);
+      const R = u.color.getHsva(), N = new P().setHsva(S, R.saturation, R.value, R.alpha), B = new P().setHsva(S, 100, 100, R.alpha);
+      (u.color != null || u.color == null && a.value) && (t.emit("update:hue", B), t.emit("update:color", N));
+    }
+    return V(i, (f) => {
+      const v = f.getHsva();
+      m(v.hue);
+    }), V(() => u.color, (f) => {
+      const v = f.getHsva();
+      m(v.hue);
+    }), () => y("div", {
+      class: "f-hue-component",
+      ref: c,
+      onMousedown: L((f) => h(f), ["prevent"]),
+      onTouchstart: L((f) => h(f), ["prevent"])
+    }, [y("div", {
+      class: "color-hue-slider__bar"
+    }, null), y("div", {
+      class: "color-hue-slider__thumb",
+      ref: o
+    }, null)]);
+  }
+}), Et = {
+  color: { type: Object, default: "" },
+  randomId: { type: String, default: "" },
+  allowColorNull: { type: Boolean, default: !1 }
+}, Ot = /* @__PURE__ */ U({
+  name: "Alpha",
+  props: Et,
+  emits: ["update:color"],
+  setup(u, t) {
+    const i = k(null), a = k(null), r = k(u.randomId), w = k(u.allowColorNull), c = (l) => {
+      var b;
+      const o = Math.max(0, Math.min(l * 100, 100));
+      a.value && ((b = a.value.style) == null || b.setProperty("left", `${o}%`));
+    };
+    function h(l) {
+      if (i.value) {
+        const {
+          width: o,
+          height: m,
+          top: b,
+          left: f
+        } = i.value.getBoundingClientRect(), {
+          pageX: v,
+          pageY: M
+        } = "touches" in l ? l.touches[0] : l, H = Math.max(0, Math.min(v - (f + window.pageXOffset), o));
+        g({
+          x: H,
+          width: o
+        });
+      }
+    }
+    function p() {
+      const l = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
+      l.className = "btn btn-secondary";
+      const o = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
+      o.style.borderColor = "#dcdfe6";
+    }
+    const g = ({
+      x: l,
+      width: o
+    }) => {
+      const m = l / o;
+      c(m), p();
+      const b = u.color.getHsva(), f = new P().setHsva(b.hue, b.saturation, b.value, m);
+      u.color != null ? t.emit("update:color", f) : u.color == null && w.value && t.emit("update:color", null);
+    };
+    return D(() => {
+      const l = u.color.getHsva();
+      c(l.alpha);
+    }), V(() => u.color, (l) => {
+      const o = l.getHsva();
+      c(o.alpha);
+    }), () => y("div", {
+      class: "f-alpha-component",
+      ref: i,
+      onMousedown: L((l) => h(l), ["prevent"]),
+      onTouchstart: L((l) => h(l), ["prevent"])
+    }, [y("div", {
+      class: "color-alpha-slider__bar"
+    }, [rt(" ")]), y("div", {
+      class: "color-alpha-slider__thumb",
+      ref: a
+    }, null)]);
+  }
+}), At = {
+  color: { type: Object, default: "" },
+  hue: { type: Object, default: "" },
+  colorPresets: { type: Object, default: "" },
+  randomId: { type: String, default: "" }
+}, jt = /* @__PURE__ */ U({
+  name: "Preset",
+  props: At,
+  emits: ["update:hue", "update:color"],
+  setup(u, t) {
+    const i = k(new P()), a = k(u.colorPresets), r = k(u.randomId);
+    function w() {
+      const g = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
+      g.className = "btn btn-secondary";
+      const l = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
+      l.style.borderColor = "#dcdfe6";
+    }
+    function c(g) {
+      w();
+      const l = g.getRgba(), o = g.getHsva(), m = new P().setRgba(l.red, l.green, l.blue, l.alpha), b = new P().setHsva(o.hue);
+      i.value = g, t.emit("update:hue", b), t.emit("update:color", m);
+    }
+    function h(g) {
+      const l = i.value.getRgba().toString(), o = i.value.getHsva().toString(), m = g.getRgba().toString() === l && g.getHsva().toString() === o;
+      return {
+        "color-preset__color-selector": m,
+        selected: m
+      };
+    }
+    function p(g, l) {
+      return y("div", {
+        class: "color-preset__color-selector"
+      }, [y("div", {
+        key: l,
+        class: h(g),
+        style: {
+          backgroundColor: g.toRgbString()
+        },
+        onClick: () => c(g)
+      }, null)]);
+    }
+    return () => y("div", {
+      class: "f-preset-component"
+    }, [y("div", {
+      class: "color-preset__colors"
+    }, [a.value.map((g, l) => p(g, l))])]);
+  }
+}), G = /* @__PURE__ */ U({
+  name: "FColorPickerDesign",
+  props: it,
+  emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
+  setup(u, t) {
+    const i = k(new P(u.color)), a = k(u.color), r = k(u.disabled), w = k(u.color), c = k(u.allowColorNull), h = k(u.presets), p = k(!1), g = k(!1), l = k(!1), o = k("HEX"), m = Math.floor(Math.random() * 1e3).toString();
+    let b = -1, f;
+    const v = new ct("#000000"), M = k(u.color);
+    let H, S;
+    const R = k(null), N = k(null), B = k(), z = Ht("design-item-context"), _ = Mt(B, z);
+    D(() => {
+      B.value.componentInstance = _;
+    }), t.expose(_.value);
+    const tt = j(() => !f && v && v.initType ? v.initType : f), $ = j({
+      get() {
+        return f && a.value !== null ? (Q(f), A(new P(a.value), x[f])) : a.value;
+      },
+      set(d) {
+        d !== null && (E(d), st(d));
+      }
+    }), J = k($.value), lt = j(() => b > -1), et = j(() => h.value.length > 0), ot = j(() => ({
+      "background-color": w.value
+    })), ht = j(() => g.value && p.value ? "display:flex" : "display:none"), X = [{
+      text: "HEX",
+      type: x.hex
+    }, {
+      text: "RGBA",
+      type: x.rgba
+    }];
+    function dt() {
+      const d = document.getElementById("farris-color-picker-panel");
+      d.id = `farris-color-picker-panel-${m}`;
+      const I = document.getElementById("farris-color-picker-plus-sure");
+      I.id = `farris-color-picker-plus-sure-${m}`;
+      const O = document.getElementById("farris-color-picker-plus-input");
+      O.id = `farris-color-picker-plus-input-${m}`, S = document.getElementById(`farris-color-picker-plus-sure-${m}`), H = document.getElementById(`farris-color-picker-panel-${m}`), H.className = "color-picker-panel disabled";
+    }
+    function nt() {
+      if (!c.value && !a.value) {
+        document.getElementById(`farris-color-picker-plus-sure-${m}`).classList.toggle("disabled");
+        const I = document.getElementById(`farris-color-picker-plus-input-${m}`);
+        I.style.borderColor = "red";
+      }
+    }
+    function gt() {
+      a.value && (E(a.value), !a.value && c.value || (a.value = A(new P(a.value), x[tt.value])), J.value = $.value), K(Q(v.initType));
+    }
+    function pt() {
+      a.value && E(a.value), v.hasPresets() || v.setColorPresets(h.value), a.value ? w.value = A(new P(a.value), x[tt.value]) : !a.value && c.value && (w.value = null);
+    }
+    function ft() {
+      V(v.valueChanged, (d) => {
+        const I = A(d, x[f || v.initType]);
+        a.value = I;
+      });
+    }
+    function K(d) {
+      o.value = X[d].text;
+    }
+    function wt() {
+      var d;
+      g.value = !!(f != null && f.includes("a") || (d = v.initType) != null && d.includes("a"));
+    }
+    St(() => {
+      v.setColorPresets(h.value || ["#eaecf3"]);
+    }), D(() => {
+      dt(), nt(), gt(), pt();
+    }), ft(), V(o, () => {
+      $.value = A(new P(a.value), x[f || v.initType]), i.value = new P($.value), wt();
+    }), V(a, (d) => {
+      A(v.value, v.initType) !== d && d !== null && E(d), K(Q(v.initType));
+    }), V(i, (d) => {
+      a.value = A(d, x[f || v.initType]), E(a.value), $.value = a.value;
+    });
+    function st(d) {
+      const I = document.getElementById(`farris-color-picker-plus-input-${m}`);
+      (d === "" || d === void 0 || d == null) && !c.value ? (a.value = null, I.style.borderColor = "red", S.className = "btn btn-secondary disabled") : (I.style.borderColor = "#dcdfe6", S.className = "btn btn-secondary");
+    }
+    function mt() {
+      var d, I;
+      if (c.value) {
+        w.value = (a == null ? void 0 : a.value) ?? null;
+        const O = {
+          elementValue: w
+        };
+        t.emit("valueChanged", O), H.classList.toggle("disabled");
+      }
+      if (!c.value && !($.value === void 0 || $.value == null || $.value === "")) {
+        (I = (d = R.value) == null ? void 0 : d.style) == null || I.setProperty("background", a.value), l.value = !0, w.value = a.value;
+        const O = {
+          elementValue: w
+        };
+        t.emit("valueChanged", O), H.classList.toggle("disabled");
+      }
+      !M.value && !a.value && !l.value && c && H.classList.toggle("disabled"), st(a.value), $.value = a.value, S.classList.contains("disabled") || (J.value = a.value, p.value = !1);
+    }
+    function E(d) {
+      v == null || v.setValueFrom(d, m, c.value);
+    }
+    function vt(d) {
+      r.value || (p.value = !0, H.classList.toggle("disabled"), nt(), E(a.value));
+    }
+    function Q(d) {
+      const I = X.findIndex((O) => O.type === d);
+      return b = I, I;
+    }
+    function at(d) {
+      if (!S.classList.contains("disabled")) {
+        const I = X.length;
+        b = (I + b + (d === "up" ? 1 : -1)) % I, f = X[b].type, K(b), E(a.value);
+      }
+    }
+    return () => y("div", {
+      class: "f-color-picker-component",
+      ref: B
+    }, [y("div", {
+      class: ["color-picker-panel", {
+        disabled: r.value
+      }],
+      id: "farris-color-picker-panel",
+      ref: N,
+      onClick: (d) => d.stopPropagation,
+      style: "top:30px"
+    }, [y("div", {
+      class: "color-picker-main"
+    }, [y(Nt, {
+      hue: v.hue,
+      "onUpdate:hue": (d) => v.hue = d,
+      allowColorNull: c.value,
+      color: i.value,
+      "onUpdate:color": (d) => i.value = d
+    }, null), y(Bt, {
+      randomId: m,
+      hue: v.hue,
+      "onUpdate:hue": (d) => v.hue = d,
+      allowColorNull: c.value,
+      color: i.value,
+      "onUpdate:color": (d) => i.value = d
+    }, null)]), y(Ot, {
+      style: ht.value,
+      randomId: m,
+      allowColorNull: c.value,
+      color: i.value,
+      "onUpdate:color": (d) => i.value = d
+    }, null), y("div", {
+      class: "input-btn",
+      style: "display:flex;align-items: center;"
+    }, [Y(y("span", {
+      style: "width:40px;margin-right:10px;"
+    }, [o.value]), [[Z, et]]), Y(y("input", {
+      title: "color-picker-plus-input",
+      type: "text",
+      id: "farris-color-picker-plus-input",
+      "onUpdate:modelValue": (d) => $.value = d,
+      style: "float:none"
+    }, null), [[It, $.value]]), Y(y("div", {
+      class: "type-icon-btn-wrapper",
+      style: "cursor:pointer"
+    }, [y("span", {
+      class: "f-icon f-icon-arrow-60-up type-icon-btn",
+      onClick: () => at("up")
+    }, null), y("span", {
+      class: "f-icon f-icon-arrow-60-down type-icon-btn",
+      onClick: () => at("down")
+    }, null)]), [[Z, et]]), y("div", {
+      class: "input-btn"
+    }, [y("button", {
+      id: "farris-color-picker-plus-sure",
+      class: "btn btn-secondary",
+      onClick: mt
+    }, [rt("确定")])])]), Y(y(jt, {
+      color: i.value,
+      "onUpdate:color": (d) => i.value = d,
+      colorPresets: v.presets,
+      hue: v.hue,
+      "onUpdate:hue": (d) => v.hue = d,
+      randomId: m
+    }, null), [[Z, lt]])]), y("div", {
+      class: "color-picker-wrapper"
+    }, [y("input", {
+      type: "text",
+      class: "color-picker-input form-control",
+      value: J.value,
+      readonly: r.value,
+      onClick: (d) => d.stopPropagation()
+    }, null), y("div", {
+      class: "color-picker-trigger",
+      onClick: vt
+    }, [y("div", {
+      class: "color-picker-trigger-inner"
+    }, [y("div", {
+      style: ot.value
+    }, null)])])])]);
+  }
+}), Lt = "https://json-schema.org/draft/2020-12/schema", Ft = "https://farris-design.gitee.io/color-picker.schema.json", qt = "color-picker", Dt = "A Farris Component", Ut = "object", Xt = {
+  id: {
+    description: "The unique identifier for color picker",
+    type: "string"
+  },
+  type: {
+    description: "The type string of color picker",
+    type: "string",
+    default: "color-picker"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  binding: {
+    description: "",
+    type: "object",
+    default: {}
+  },
+  disable: {
+    type: "string",
+    default: !1
+  },
+  editable: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  placeholder: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  readonly: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  require: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  tabindex: {
+    description: "",
+    type: "number",
+    default: -1
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  }
+}, Yt = [
+  "id",
+  "type"
+], Gt = {
+  $schema: Lt,
+  $id: Ft,
+  title: qt,
+  description: Dt,
+  type: Ut,
+  properties: Xt,
+  required: Yt
+};
+function Wt(u, t, i) {
+  return t;
+}
+const zt = /* @__PURE__ */ new Map([
+  ["appearance", xt]
+]), Jt = "color-picker", Kt = "A Farris Component", Qt = "object", Zt = {
+  basic: {
+    description: "Basic Infomation",
+    title: "基本信息",
+    properties: {
+      id: {
+        description: "组件标识",
+        title: "标识",
+        type: "string",
+        readonly: !0
+      },
+      type: {
+        description: "组件类型",
+        title: "控件类型",
+        type: "select",
+        editor: {
+          type: "waiting for modification",
+          enum: []
+        }
+      }
+    }
+  }
+}, Ct = {
+  title: Jt,
+  description: Kt,
+  type: Qt,
+  categories: Zt
+}, ut = Rt(it, Gt, zt, Wt, Ct);
+G.register = (u, t, i) => {
+  u["color-picker"] = Pt, t["color-picker"] = ut;
+};
+G.registerDesigner = (u, t, i) => {
+  u["color-picker"] = G, t["color-picker"] = ut;
+};
+const ae = bt(G);
+export {
+  G as FColorPickerDesign,
+  ae as default,
+  ut as propsResolver
+};