@farris/ui-vue 1.7.3 → 1.7.5

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

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