@farris/ui-vue 1.3.0 → 1.3.3

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

@@ -1,27 +1,32 @@
 var nt = Object.defineProperty;
 var rt = (r, e, t) => e in r ? nt(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var s = (r, e, t) => rt(r, typeof e != "symbol" ? e + "" : e, t);
-import { defineComponent as ee, ref as S, onMounted as T, watch as q, createVNode as k, withModifiers as _, createTextVNode as Re, computed as U, onBeforeMount as Ye, withDirectives as W, vShow as K, vModelText as Xe, inject as it } from "vue";
-import { isPlainObject as je, cloneDeep as st } from "lodash-es";
-const Ge = {}, We = {};
-function $e(r) {
-  const { properties: e, title: t, ignore: n } = r, i = n && Array.isArray(n), l = Object.keys(e).reduce((u, c) => ((!i || !n.find((g) => g == c)) && (u[c] = e[c].type === "object" && e[c].properties ? $e(e[c]) : st(e[c].default)), u), {});
-  return (!i || !n.find((u) => u == "id")) && (l.id = `${t}-${Date.now()}`), l;
+import { defineComponent as T, ref as S, onMounted as C, watch as F, createVNode as k, withModifiers as K, createTextVNode as Be, computed as U, onBeforeMount as qe, withDirectives as X, vShow as Z, vModelText as Ye, inject as it } from "vue";
+import { isPlainObject as Ie, cloneDeep as st } from "lodash-es";
+import { withInstall as at } from "../common/index.esm.js";
+const Xe = {}, Ge = {};
+function Re(r) {
+  const { properties: e, title: t, ignore: n } = r, i = n && Array.isArray(n), l = Object.keys(e).reduce((u, c) => ((!i || !n.find((g) => g === c)) && (u[c] = e[c].type === "object" && e[c].properties ? Re(e[c]) : st(e[c].default)), u), {});
+  if (t && (!i || !n.find((u) => u === "id"))) {
+    const u = t.toLowerCase().replace(/-/g, "_");
+    l.id = `${u}_${Math.random().toString().slice(2, 6)}`;
+  }
+  return l;
 }
-function ke(r, e = {}, t) {
-  const n = Ge[r];
+function We(r, e = {}, t) {
+  const n = Xe[r];
   if (n) {
-    let i = $e(n);
-    const l = We[r];
-    return i = l ? l({ getSchemaByType: ke }, i, e, t) : i, i;
+    let i = Re(n);
+    const l = Ge[r];
+    return i = l ? l({ getSchemaByType: We }, i, e, t) : i, i;
   }
   return null;
 }
-function at(r, e) {
-  const t = $e(e);
-  return Object.keys(r).reduce((n, i) => (n[i] && je(n[i]) && je(r[i]) ? Object.assign(n[i], r[i]) : n[i] = r[i], n), t), t;
-}
 function ot(r, e) {
+  const t = Re(e);
+  return Object.keys(t).reduce((n, i) => (n[i] && Ie(n[i]) && Ie(r[i] || !r[i]) ? Object.assign(n[i], r[i] || {}) : n[i] = r[i], n), t), t;
+}
+function ut(r, e) {
   return Object.keys(r).filter((n) => r[n] != null).reduce((n, i) => {
     if (e.has(i)) {
       const l = e.get(i);
@@ -36,27 +41,27 @@ function ot(r, e) {
     return n;
   }, {});
 }
-function ut(r, e, t = /* @__PURE__ */ new Map()) {
-  const n = at(r, e);
-  return ot(n, t);
+function lt(r, e, t = /* @__PURE__ */ new Map()) {
+  const n = ot(r, e);
+  return ut(n, t);
 }
-function lt(r = {}) {
-  function e(h, p, d, f) {
-    if (typeof d == "number")
-      return f[h].length === d;
-    if (typeof d == "object") {
-      const b = Object.keys(d)[0], y = d[b];
+function ct(r = {}) {
+  function e(h, p, f, d) {
+    if (typeof f == "number")
+      return d[h].length === f;
+    if (typeof f == "object") {
+      const b = Object.keys(f)[0], y = f[b];
       if (b === "not")
-        return Number(f[h].length) !== Number(y);
+        return Number(d[h].length) !== Number(y);
       if (b === "moreThan")
-        return Number(f[h].length) >= Number(y);
+        return Number(d[h].length) >= Number(y);
       if (b === "lessThan")
-        return Number(f[h].length) <= Number(y);
+        return Number(d[h].length) <= Number(y);
     }
     return !1;
   }
-  function t(h, p, d, f) {
-    return f[h] && f[h].propertyValue && String(f[h].propertyValue.value) === String(d);
+  function t(h, p, f, d) {
+    return d[h] && d[h].propertyValue && String(d[h].propertyValue.value) === String(f);
   }
   const n = /* @__PURE__ */ new Map([
     ["length", e],
@@ -64,24 +69,24 @@ function lt(r = {}) {
   ]);
   Object.keys(r).reduce((h, p) => (h.set(p, r[p]), h), n);
   function i(h, p) {
-    const d = h;
-    return typeof p == "number" ? [{ target: d, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: d, operator: "getProperty", param: h, value: !!p }] : typeof p == "object" ? Object.keys(p).map((f) => {
-      if (f === "length")
-        return { target: d, operator: "length", param: null, value: p[f] };
-      const b = f, y = p[f];
-      return { target: d, operator: "getProperty", param: b, value: y };
+    const f = h;
+    return typeof p == "number" ? [{ target: f, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: f, operator: "getProperty", param: h, value: !!p }] : typeof p == "object" ? Object.keys(p).map((d) => {
+      if (d === "length")
+        return { target: f, operator: "length", param: null, value: p[d] };
+      const b = d, y = p[d];
+      return { target: f, operator: "getProperty", param: b, value: y };
     }) : [];
   }
   function l(h) {
-    return Object.keys(h).reduce((d, f) => {
-      const b = i(f, h[f]);
-      return d.push(...b), d;
+    return Object.keys(h).reduce((f, d) => {
+      const b = i(d, h[d]);
+      return f.push(...b), f;
     }, []);
   }
   function u(h, p) {
     if (n.has(h.operator)) {
-      const d = n.get(h.operator);
-      return d && d(h.target, h.param, h.value, p) || !1;
+      const f = n.get(h.operator);
+      return f && f(h.target, h.param, h.value, p) || !1;
     }
     return !1;
   }
@@ -89,20 +94,20 @@ function lt(r = {}) {
     return l(h).reduce((b, y) => b && u(y, p), !0);
   }
   function g(h, p) {
-    const d = Object.keys(h), f = d.includes("allOf"), b = d.includes("anyOf"), y = f || b, E = (y ? h[y ? f ? "allOf" : "anyOf" : "allOf"] : [h]).map((A) => c(A, p));
-    return f ? !E.includes(!1) : E.includes(!0);
+    const f = Object.keys(h), d = f.includes("allOf"), b = f.includes("anyOf"), y = d || b, M = (y ? h[y ? d ? "allOf" : "anyOf" : "allOf"] : [h]).map((j) => c(j, p));
+    return d ? !M.includes(!1) : M.includes(!0);
   }
   return { parseValueSchema: g };
 }
-const ct = {}, ht = {};
-lt();
-function pt(r, e, t = /* @__PURE__ */ new Map(), n = (u, c, g) => c, i = {}, l = (u) => u) {
-  return Ge[e.title] = e, We[e.title] = n, ct[e.title] = i, ht[e.title] = l, (u = {}) => {
-    const c = ut(u, e, t), g = Object.keys(r).reduce((h, p) => (h[p] = r[p].default, h), {});
+const ht = {}, pt = {};
+ct();
+function ft(r, e, t = /* @__PURE__ */ new Map(), n = (u, c, g, h) => c, i = {}, l = (u) => u) {
+  return Xe[e.title] = e, Ge[e.title] = n, ht[e.title] = i, pt[e.title] = l, (u = {}) => {
+    const c = lt(u, e, t), g = Object.keys(r).reduce((h, p) => (h[p] = r[p].default, h), {});
     return Object.assign(g, c);
   };
 }
-const dt = "https://json-schema.org/draft/2020-12/schema", ft = "https://farris-design.gitee.io/color-picker.schema.json", vt = "color-picker", gt = "A Farris Component", yt = "object", mt = {
+const dt = "https://json-schema.org/draft/2020-12/schema", vt = "https://farris-design.gitee.io/color-picker.schema.json", gt = "color-picker", yt = "A Farris Component", mt = "object", wt = {
   id: {
     description: "The unique identifier for color picker",
     type: "string"
@@ -164,27 +169,27 @@ const dt = "https://json-schema.org/draft/2020-12/schema", ft = "https://farris-
     type: "boolean",
     default: !0
   }
-}, wt = [
+}, bt = [
   "id",
   "type"
-], bt = {
+], kt = {
   $schema: dt,
-  $id: ft,
-  title: vt,
-  description: gt,
-  type: yt,
-  properties: mt,
-  required: wt
+  $id: vt,
+  title: gt,
+  description: yt,
+  type: mt,
+  properties: wt,
+  required: bt
 };
-function kt(r, e, t) {
+function St(r, e, t) {
   return e;
 }
-function St(r, e) {
+function Pt(r, e) {
   return { customClass: e.class, customStyle: e.style };
 }
-const Pt = /* @__PURE__ */ new Map([
-  ["appearance", St]
-]), Et = "color-picker", Mt = "A Farris Component", Ht = "object", Ot = {
+const Et = /* @__PURE__ */ new Map([
+  ["appearance", Pt]
+]), Mt = "color-picker", Ht = "A Farris Component", Ot = "object", Bt = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -206,12 +211,12 @@ const Pt = /* @__PURE__ */ new Map([
       }
     }
   }
-}, Bt = {
-  title: Et,
-  description: Mt,
-  type: Ht,
-  categories: Ot
-}, Ve = {
+}, Rt = {
+  title: Mt,
+  description: Ht,
+  type: Ot,
+  categories: Bt
+}, $e = {
   /** 初始颜色 */
   color: { type: String, default: "#e1e2e3" },
   /** 禁用 */
@@ -223,10 +228,10 @@ const Pt = /* @__PURE__ */ new Map([
   /** 颜色值变化事件 */
   onValueChanged: { type: Function, default: () => {
   } }
-}, ze = pt(Ve, bt, Pt, kt, Bt);
-class ce {
+}, ze = ft($e, kt, Et, St, Rt);
+class le {
 }
-class me extends ce {
+class me extends le {
   constructor(e, t, n, i) {
     super(), this.cyan = e, this.magenta = t, this.yellow = n, this.black = i;
   }
@@ -246,7 +251,7 @@ class me extends ce {
     return Math.round(this.black);
   }
 }
-class ie extends ce {
+class ne extends le {
   constructor(e, t, n, i) {
     super(), this.hue = e, this.saturation = t, this.lightness = n, this.alpha = i;
   }
@@ -266,7 +271,7 @@ class ie extends ce {
     return Math.round(this.alpha * 100) / 100;
   }
 }
-class se extends ce {
+class re extends le {
   constructor(e, t, n, i) {
     super(), this.hue = e, this.saturation = t, this.value = n, this.alpha = i;
   }
@@ -286,7 +291,7 @@ class se extends ce {
     return Math.round(this.alpha * 100) / 100;
   }
 }
-class o extends ce {
+class o extends le {
   constructor(e, t, n, i) {
     super(), this.red = e, this.green = t, this.blue = n, this.alpha = i;
   }
@@ -309,8 +314,8 @@ class o extends ce {
 const a = class a {
 };
 s(a, "transparent", new o(0, 0, 0, 0)), s(a, "aliceblue", new o(240, 248, 255, 1)), s(a, "antiquewhite", new o(250, 235, 215, 1)), s(a, "aqua", new o(0, 255, 255, 1)), s(a, "aquamarine", new o(127, 255, 212, 1)), s(a, "azure", new o(240, 255, 255, 1)), s(a, "beige", new o(245, 245, 220, 1)), s(a, "bisque", new o(255, 228, 196, 1)), s(a, "black", new o(0, 0, 0, 1)), s(a, "blanchedalmond", new o(255, 235, 205, 1)), s(a, "blue", new o(0, 0, 255, 1)), s(a, "blueviolet", new o(138, 43, 226, 1)), s(a, "brown", new o(165, 42, 42, 1)), s(a, "burlywood", new o(222, 184, 135, 1)), s(a, "cadetblue", new o(95, 158, 160, 1)), s(a, "chartreuse", new o(127, 255, 0, 1)), s(a, "chocolate", new o(210, 105, 30, 1)), s(a, "coral", new o(255, 127, 80, 1)), s(a, "cornflowerblue", new o(100, 149, 237, 1)), s(a, "cornsilk", new o(255, 248, 220, 1)), s(a, "crimson", new o(220, 20, 60, 1)), s(a, "cyan", new o(0, 255, 255, 1)), s(a, "darkblue", new o(0, 0, 139, 1)), s(a, "darkcyan", new o(0, 139, 139, 1)), s(a, "darkgoldenrod", new o(184, 134, 11, 1)), s(a, "darkgray", new o(169, 169, 169, 1)), s(a, "darkgreen", new o(0, 100, 0, 1)), s(a, "darkgrey", a.darkgray), s(a, "darkkhaki", new o(189, 183, 107, 1)), s(a, "darkmagenta", new o(139, 0, 139, 1)), s(a, "darkolivegreen", new o(85, 107, 47, 1)), s(a, "darkorange", new o(255, 140, 0, 1)), s(a, "darkorchid", new o(153, 50, 204, 1)), s(a, "darkred", new o(139, 0, 0, 1)), s(a, "darksalmon", new o(233, 150, 122, 1)), s(a, "darkseagreen", new o(143, 188, 143, 1)), s(a, "darkslateblue", new o(72, 61, 139, 1)), s(a, "darkslategray", new o(47, 79, 79, 1)), s(a, "darkslategrey", a.darkslategray), s(a, "darkturquoise", new o(0, 206, 209, 1)), s(a, "darkviolet", new o(148, 0, 211, 1)), s(a, "deeppink", new o(255, 20, 147, 1)), s(a, "deepskyblue", new o(0, 191, 255, 1)), s(a, "dimgray", new o(105, 105, 105, 1)), s(a, "dimgrey", a.dimgray), s(a, "dodgerblue", new o(30, 144, 255, 1)), s(a, "firebrick", new o(178, 34, 34, 1)), s(a, "floralwhite", new o(255, 250, 240, 1)), s(a, "forestgreen", new o(34, 139, 34, 1)), s(a, "fuchsia", new o(255, 0, 255, 1)), s(a, "gainsboro", new o(220, 220, 220, 1)), s(a, "ghostwhite", new o(248, 248, 255, 1)), s(a, "gold", new o(255, 215, 0, 1)), s(a, "goldenrod", new o(218, 165, 32, 1)), s(a, "gray", new o(128, 128, 128, 1)), s(a, "grey", a.gray), s(a, "green", new o(0, 128, 0, 1)), s(a, "greenyellow", new o(173, 255, 47, 1)), s(a, "honeydew", new o(240, 255, 240, 1)), s(a, "hotpink", new o(255, 105, 180, 1)), s(a, "indianred", new o(205, 92, 92, 1)), s(a, "indigo", new o(75, 0, 130, 1)), s(a, "ivory", new o(255, 255, 240, 1)), s(a, "khaki", new o(240, 230, 140, 1)), s(a, "lavender", new o(230, 230, 250, 1)), s(a, "lavenderblush", new o(255, 240, 245, 1)), s(a, "lawngreen", new o(124, 252, 0, 1)), s(a, "lemonchiffon", new o(255, 250, 205, 1)), s(a, "lightblue", new o(173, 216, 230, 1)), s(a, "lightcoral", new o(240, 128, 128, 1)), s(a, "lightcyan", new o(224, 255, 255, 1)), s(a, "lightgoldenrodyellow", new o(250, 250, 210, 1)), s(a, "lightgray", new o(211, 211, 211, 1)), s(a, "lightgreen", new o(144, 238, 144, 1)), s(a, "lightgrey", a.lightgray), s(a, "lightpink", new o(255, 182, 193, 1)), s(a, "lightsalmon", new o(255, 160, 122, 1)), s(a, "lightseagreen", new o(32, 178, 170, 1)), s(a, "lightskyblue", new o(135, 206, 250, 1)), s(a, "lightslategray", new o(119, 136, 153, 1)), s(a, "lightslategrey", a.lightslategray), s(a, "lightsteelblue", new o(176, 196, 222, 1)), s(a, "lightyellow", new o(255, 255, 224, 1)), s(a, "lime", new o(0, 255, 0, 1)), s(a, "limegreen", new o(50, 205, 50, 1)), s(a, "linen", new o(250, 240, 230, 1)), s(a, "magenta", new o(255, 0, 255, 1)), s(a, "maroon", new o(128, 0, 0, 1)), s(a, "mediumaquamarine", new o(102, 205, 170, 1)), s(a, "mediumblue", new o(0, 0, 205, 1)), s(a, "mediumorchid", new o(186, 85, 211, 1)), s(a, "mediumpurple", new o(147, 112, 219, 1)), s(a, "mediumseagreen", new o(60, 179, 113, 1)), s(a, "mediumslateblue", new o(123, 104, 238, 1)), s(a, "mediumspringgreen", new o(0, 250, 154, 1)), s(a, "mediumturquoise", new o(72, 209, 204, 1)), s(a, "mediumvioletred", new o(199, 21, 133, 1)), s(a, "midnightblue", new o(25, 25, 112, 1)), s(a, "mintcream", new o(245, 255, 250, 1)), s(a, "mistyrose", new o(255, 228, 225, 1)), s(a, "moccasin", new o(255, 228, 181, 1)), s(a, "navajowhite", new o(255, 222, 173, 1)), s(a, "navy", new o(0, 0, 128, 1)), s(a, "oldlace", new o(253, 245, 230, 1)), s(a, "olive", new o(128, 128, 0, 1)), s(a, "olivedrab", new o(107, 142, 35, 1)), s(a, "orange", new o(255, 165, 0, 1)), s(a, "orangered", new o(255, 69, 0, 1)), s(a, "orchid", new o(218, 112, 214, 1)), s(a, "palegoldenrod", new o(238, 232, 170, 1)), s(a, "palegreen", new o(152, 251, 152, 1)), s(a, "paleturquoise", new o(175, 238, 238, 1)), s(a, "palevioletred", new o(219, 112, 147, 1)), s(a, "papayawhip", new o(255, 239, 213, 1)), s(a, "peachpuff", new o(255, 218, 185, 1)), s(a, "peru", new o(205, 133, 63, 1)), s(a, "pink", new o(255, 192, 203, 1)), s(a, "plum", new o(221, 160, 221, 1)), s(a, "powderblue", new o(176, 224, 230, 1)), s(a, "purple", new o(128, 0, 128, 1)), s(a, "red", new o(255, 0, 0, 1)), s(a, "rosybrown", new o(188, 143, 143, 1)), s(a, "royalblue", new o(65, 105, 225, 1)), s(a, "saddlebrown", new o(139, 69, 19, 1)), s(a, "salmon", new o(250, 128, 114, 1)), s(a, "sandybrown", new o(244, 164, 96, 1)), s(a, "seagreen", new o(46, 139, 87, 1)), s(a, "seashell", new o(255, 245, 238, 1)), s(a, "sienna", new o(160, 82, 45, 1)), s(a, "silver", new o(192, 192, 192, 1)), s(a, "skyblue", new o(135, 206, 235, 1)), s(a, "slateblue", new o(106, 90, 205, 1)), s(a, "slategray", new o(112, 128, 144, 1)), s(a, "slategrey", a.slategray), s(a, "snow", new o(255, 250, 250, 1)), s(a, "springgreen", new o(0, 255, 127, 1)), s(a, "steelblue", new o(70, 130, 180, 1)), s(a, "tan", new o(210, 180, 140, 1)), s(a, "teal", new o(0, 128, 128, 1)), s(a, "thistle", new o(216, 191, 216, 1)), s(a, "tomato", new o(255, 99, 71, 1)), s(a, "turquoise", new o(64, 224, 208, 1)), s(a, "violet", new o(238, 130, 238, 1)), s(a, "wheat", new o(245, 222, 179, 1)), s(a, "white", new o(255, 255, 255, 1)), s(a, "whitesmoke", new o(245, 245, 245, 1)), s(a, "yellow", new o(255, 255, 0, 1)), s(a, "yellowgreen", new o(154, 205, 50, 1));
-let Se = a;
-class P {
+let ke = a;
+class E {
   constructor(e) {
     /**
      * base color used to calculate other
@@ -319,18 +324,18 @@ class P {
      * hsl(0, 100%, 50%)
      * 初始色#ff0000
      */
-    s(this, "hsva", new se(0, 1, 1, 1));
+    s(this, "hsva", new re(0, 1, 1, 1));
     s(this, "rgba", new o(255, 0, 0, 1));
     e && this.stringToColor(e);
   }
   static from(e) {
-    return typeof e == "string" ? new P(e) : e instanceof P ? e.clone() : e instanceof o ? new P().setRgba(e.red, e.green, e.blue, e.alpha) : e instanceof se ? new P().setHsva(e.hue, e.saturation, e.value, e.alpha) : e instanceof ie ? new P().setHsla(e.hue, e.saturation, e.lightness, e.alpha) : new P(e);
+    return typeof e == "string" ? new E(e) : e instanceof E ? e.clone() : e instanceof o ? new E().setRgba(e.red, e.green, e.blue, e.alpha) : e instanceof re ? new E().setHsva(e.hue, e.saturation, e.value, e.alpha) : e instanceof ne ? new E().setHsla(e.hue, e.saturation, e.lightness, e.alpha) : new E(e);
   }
   /**
    * make from existing color new color object
    */
   clone() {
-    return P.from(this.getRgba());
+    return E.from(this.getRgba());
   }
   /**
    * define Color from hex, rgb, rgba, hsl, hsla or cmyk string
@@ -355,7 +360,7 @@ class P {
    */
   setHsla(e, t, n, i = 1) {
     i != null && (i = i > 1 ? 1 : i < 0 ? 0 : i, this.rgba.alpha = i);
-    const l = new ie(e, t, n, i);
+    const l = new ne(e, t, n, i);
     return this.rgba = this.hslaToRgba(l), this.hsva = this.rgbaToHsva(this.rgba), this;
   }
   /**
@@ -408,7 +413,7 @@ class P {
     return this.getCmyk().toString();
   }
   getHsva() {
-    return new se(this.hsva.hue, this.hsva.saturation, this.hsva.value, this.hsva.alpha);
+    return new re(this.hsva.hue, this.hsva.saturation, this.hsva.value, this.hsva.alpha);
   }
   getRgba() {
     return new o(this.rgba.red, this.rgba.green, this.rgba.blue, this.rgba.alpha);
@@ -421,15 +426,15 @@ class P {
   }
   hsvaToHsla(e) {
     const { hue: t } = e, n = e.saturation / 100, i = e.value / 100, l = (2 - n) * e.value / 2, u = n * i / (l <= 1 ? l : 2 - l) || 0;
-    return new ie(t, l * 100, u * 100, e.alpha);
+    return new ne(t, l * 100, u * 100, e.alpha);
   }
   hslaToHsva(e) {
     const { hue: t } = e, n = e.lightness / 100 * 2, i = e.saturation / 100 * (n <= 1 ? n : 2 - n), l = (n + i) / 2, u = 2 * i / (n + i) || 0;
-    return new se(t, u, l, e.alpha);
+    return new re(t, u, l, e.alpha);
   }
   rgbaToHsva(e) {
     const t = e.red / 255, n = e.green / 255, i = e.blue / 255, { alpha: l } = e, u = Math.max(t, n, i), c = Math.min(t, n, i), g = u - c;
-    let h = 0, p = u === 0 ? 0 : g / u, d = u;
+    let h = 0, p = u === 0 ? 0 : g / u, f = u;
     if (u !== c) {
       switch (u) {
         case t:
@@ -444,30 +449,30 @@ class P {
       }
       h /= 6;
     }
-    return h *= 360, p *= 100, d *= 100, new se(h, p, d, l);
+    return h *= 360, p *= 100, f *= 100, new re(h, p, f, l);
   }
   hsvaToRgba(e) {
     let t = 1, n = 0, i = 0;
-    const l = e.saturation / 100, u = e.value / 100, { alpha: c } = e, g = e.hue / 60, h = Math.floor(g), p = g - h, d = (1 - l) * u, f = (1 - l * p) * u, b = (1 - l * (1 - p)) * u;
+    const l = e.saturation / 100, u = e.value / 100, { alpha: c } = e, g = e.hue / 60, h = Math.floor(g), p = g - h, f = (1 - l) * u, d = (1 - l * p) * u, b = (1 - l * (1 - p)) * u;
     switch (h) {
       case 6:
       case 0:
-        t = u, n = b, i = d;
+        t = u, n = b, i = f;
         break;
       case 1:
-        t = f, n = u, i = d;
+        t = d, n = u, i = f;
         break;
       case 2:
-        t = d, n = u, i = b;
+        t = f, n = u, i = b;
         break;
       case 3:
-        t = d, n = f, i = u;
+        t = f, n = d, i = u;
         break;
       case 4:
-        t = b, n = d, i = u;
+        t = b, n = f, i = u;
         break;
       case 5:
-        t = u, n = d, i = f;
+        t = u, n = f, i = d;
         break;
     }
     return t *= 255, n *= 255, i *= 255, new o(t, n, i, c);
@@ -475,22 +480,22 @@ class P {
   rgbaToHsla(e) {
     const t = e.red / 255, n = e.green / 255, i = e.blue / 255, { alpha: l } = e, u = Math.max(t, n, i), c = Math.min(t, n, i);
     let g = 0, h = 0, p = (u + c) / 2;
-    const d = u - c;
+    const f = u - c;
     if (u !== c) {
-      switch (h = p > 0.5 ? d / (2 - u - c) : d / (u + c), u) {
+      switch (h = p > 0.5 ? f / (2 - u - c) : f / (u + c), u) {
         case t:
-          g = (n - i) / d + (n < i ? 6 : 0);
+          g = (n - i) / f + (n < i ? 6 : 0);
           break;
         case n:
-          g = (i - t) / d + 2;
+          g = (i - t) / f + 2;
           break;
         case i:
-          g = (t - n) / d + 4;
+          g = (t - n) / f + 4;
           break;
       }
       g /= 6;
     }
-    return g *= 360, h *= 100, p *= 100, new ie(g, h, p, l);
+    return g *= 360, h *= 100, p *= 100, new ne(g, h, p, l);
   }
   /**
    * convert rgb color from HSLa
@@ -562,7 +567,7 @@ class P {
   }
   stringToColor(e) {
     const t = e.replace(/ /g, "").toLowerCase();
-    let n = Se[e] || null;
+    let n = ke[e] || null;
     if (t[0] === "#") {
       let u = t.substr(1);
       const { length: c } = u;
@@ -591,7 +596,7 @@ class P {
           g = parseFloat(c.pop());
           break;
         case "hsl":
-          h = new ie(
+          h = new ne(
             parseInt(c[0], 10),
             parseInt(c[1], 10),
             parseInt(c[2], 10),
@@ -611,23 +616,23 @@ class P {
     return n && (this.rgba = n, this.hsva = this.rgbaToHsva(n)), this;
   }
 }
-var Pe = function(r, e) {
-  return Pe = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t, n) {
+var Se = function(r, e) {
+  return Se = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t, n) {
     t.__proto__ = n;
   } || function(t, n) {
     for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
-  }, Pe(r, e);
+  }, Se(r, e);
 };
-function te(r, e) {
+function _(r, e) {
   if (typeof e != "function" && e !== null)
     throw new TypeError("Class extends value " + String(e) + " is not a constructor or null");
-  Pe(r, e);
+  Se(r, e);
   function t() {
     this.constructor = r;
   }
   r.prototype = e === null ? Object.create(e) : (t.prototype = e.prototype, new t());
 }
-function Ee(r) {
+function Pe(r) {
   var e = typeof Symbol == "function" && Symbol.iterator, t = e && r[e], n = 0;
   if (t) return t.call(r);
   if (r && typeof r.length == "number") return {
@@ -637,7 +642,7 @@ function Ee(r) {
   };
   throw new TypeError(e ? "Object is not iterable." : "Symbol.iterator is not defined.");
 }
-function Me(r, e) {
+function Ee(r, e) {
   var t = typeof Symbol == "function" && r[Symbol.iterator];
   if (!t) return r;
   var n = t.call(r), i, l = [], u;
@@ -654,21 +659,21 @@ function Me(r, e) {
   }
   return l;
 }
-function He(r, e, t) {
+function Me(r, e, t) {
   if (t || arguments.length === 2) for (var n = 0, i = e.length, l; n < i; n++)
     (l || !(n in e)) && (l || (l = Array.prototype.slice.call(e, 0, n)), l[n] = e[n]);
   return r.concat(l || Array.prototype.slice.call(e));
 }
-function X(r) {
+function Y(r) {
   return typeof r == "function";
 }
-function Ce(r) {
+function Je(r) {
   var e = function(n) {
     Error.call(n), n.stack = new Error().stack;
   }, t = r(e);
   return t.prototype = Object.create(Error.prototype), t.prototype.constructor = t, t;
 }
-var we = Ce(function(r) {
+var we = Je(function(r) {
   return function(t) {
     r(this), this.message = t ? t.length + ` errors occurred during unsubscription:
 ` + t.map(function(n, i) {
@@ -677,13 +682,13 @@ var we = Ce(function(r) {
   `) : "", this.name = "UnsubscriptionError", this.errors = t;
   };
 });
-function Oe(r, e) {
+function He(r, e) {
   if (r) {
     var t = r.indexOf(e);
     0 <= t && r.splice(t, 1);
   }
 }
-var he = function() {
+var ce = function() {
   function r(e) {
     this.initialTeardown = e, this.closed = !1, this._parentage = null, this._finalizers = null;
   }
@@ -695,7 +700,7 @@ var he = function() {
       if (u)
         if (this._parentage = null, Array.isArray(u))
           try {
-            for (var c = Ee(u), g = c.next(); !g.done; g = c.next()) {
+            for (var c = Pe(u), g = c.next(); !g.done; g = c.next()) {
               var h = g.value;
               h.remove(this);
             }
@@ -711,29 +716,29 @@ var he = function() {
         else
           u.remove(this);
       var p = this.initialTeardown;
-      if (X(p))
+      if (Y(p))
         try {
           p();
         } catch (v) {
           l = v instanceof we ? v.errors : [v];
         }
-      var d = this._finalizers;
-      if (d) {
+      var f = this._finalizers;
+      if (f) {
         this._finalizers = null;
         try {
-          for (var f = Ee(d), b = f.next(); !b.done; b = f.next()) {
+          for (var d = Pe(f), b = d.next(); !b.done; b = d.next()) {
             var y = b.value;
             try {
-              Ne(y);
+              xe(y);
             } catch (v) {
-              l = l ?? [], v instanceof we ? l = He(He([], Me(l)), Me(v.errors)) : l.push(v);
+              l = l ?? [], v instanceof we ? l = Me(Me([], Ee(l)), Ee(v.errors)) : l.push(v);
             }
           }
         } catch (v) {
           n = { error: v };
         } finally {
           try {
-            b && !b.done && (i = f.return) && i.call(f);
+            b && !b.done && (i = d.return) && i.call(d);
           } finally {
             if (n) throw n.error;
           }
@@ -746,7 +751,7 @@ var he = function() {
     var t;
     if (e && e !== this)
       if (this.closed)
-        Ne(e);
+        xe(e);
       else {
         if (e instanceof r) {
           if (e.closed || e._hasParent(this))
@@ -763,56 +768,56 @@ var he = function() {
     this._parentage = Array.isArray(t) ? (t.push(e), t) : t ? [t, e] : e;
   }, r.prototype._removeParent = function(e) {
     var t = this._parentage;
-    t === e ? this._parentage = null : Array.isArray(t) && Oe(t, e);
+    t === e ? this._parentage = null : Array.isArray(t) && He(t, e);
   }, r.prototype.remove = function(e) {
     var t = this._finalizers;
-    t && Oe(t, e), e instanceof r && e._removeParent(this);
+    t && He(t, e), e instanceof r && e._removeParent(this);
   }, r.EMPTY = function() {
     var e = new r();
     return e.closed = !0, e;
   }(), r;
-}(), Je = he.EMPTY;
-function Qe(r) {
-  return r instanceof he || r && "closed" in r && X(r.remove) && X(r.add) && X(r.unsubscribe);
+}(), Qe = ce.EMPTY;
+function Ze(r) {
+  return r instanceof ce || r && "closed" in r && Y(r.remove) && Y(r.add) && Y(r.unsubscribe);
 }
-function Ne(r) {
-  X(r) ? r() : r.unsubscribe();
+function xe(r) {
+  Y(r) ? r() : r.unsubscribe();
 }
-var Ze = {
+var Ce = {
   onUnhandledError: null,
   onStoppedNotification: null,
   Promise: void 0,
   useDeprecatedSynchronousErrorHandling: !1,
   useDeprecatedNextContext: !1
-}, Rt = {
+}, $t = {
   setTimeout: function(r, e) {
     for (var t = [], n = 2; n < arguments.length; n++)
       t[n - 2] = arguments[n];
-    return setTimeout.apply(void 0, He([r, e], Me(t)));
+    return setTimeout.apply(void 0, Me([r, e], Ee(t)));
   },
   clearTimeout: function(r) {
     return clearTimeout(r);
   },
   delegate: void 0
 };
-function $t(r) {
-  Rt.setTimeout(function() {
+function Vt(r) {
+  $t.setTimeout(function() {
     throw r;
   });
 }
-function Ue() {
+function Ne() {
 }
-function ue(r) {
+function oe(r) {
   r();
 }
-var xe = function(r) {
-  te(e, r);
+var Ve = function(r) {
+  _(e, r);
   function e(t) {
     var n = r.call(this) || this;
-    return n.isStopped = !1, t ? (n.destination = t, Qe(t) && t.add(n)) : n.destination = It, n;
+    return n.isStopped = !1, t ? (n.destination = t, Ze(t) && t.add(n)) : n.destination = xt, n;
   }
   return e.create = function(t, n, i) {
-    return new Be(t, n, i);
+    return new Oe(t, n, i);
   }, e.prototype.next = function(t) {
     this.isStopped || this._next(t);
   }, e.prototype.error = function(t) {
@@ -836,11 +841,11 @@ var xe = function(r) {
       this.unsubscribe();
     }
   }, e;
-}(he), Vt = Function.prototype.bind;
+}(ce), jt = Function.prototype.bind;
 function be(r, e) {
-  return Vt.call(r, e);
+  return jt.call(r, e);
 }
-var xt = function() {
+var At = function() {
   function r(e) {
     this.partialObserver = e;
   }
@@ -850,7 +855,7 @@ var xt = function() {
       try {
         t.next(e);
       } catch (n) {
-        oe(n);
+        ae(n);
       }
   }, r.prototype.error = function(e) {
     var t = this.partialObserver;
@@ -858,24 +863,24 @@ var xt = function() {
       try {
         t.error(e);
       } catch (n) {
-        oe(n);
+        ae(n);
       }
     else
-      oe(e);
+      ae(e);
   }, r.prototype.complete = function() {
     var e = this.partialObserver;
     if (e.complete)
       try {
         e.complete();
       } catch (t) {
-        oe(t);
+        ae(t);
       }
   }, r;
-}(), Be = function(r) {
-  te(e, r);
+}(), Oe = function(r) {
+  _(e, r);
   function e(t, n, i) {
     var l = r.call(this) || this, u;
-    if (X(t) || !t)
+    if (Y(t) || !t)
       u = {
         next: t ?? void 0,
         error: n ?? void 0,
@@ -883,7 +888,7 @@ var xt = function() {
       };
     else {
       var c;
-      l && Ze.useDeprecatedNextContext ? (c = Object.create(t), c.unsubscribe = function() {
+      l && Ce.useDeprecatedNextContext ? (c = Object.create(t), c.unsubscribe = function() {
         return l.unsubscribe();
       }, u = {
         next: t.next && be(t.next, c),
@@ -891,35 +896,35 @@ var xt = function() {
         complete: t.complete && be(t.complete, c)
       }) : u = t;
     }
-    return l.destination = new xt(u), l;
+    return l.destination = new At(u), l;
   }
   return e;
-}(xe);
-function oe(r) {
-  $t(r);
+}(Ve);
+function ae(r) {
+  Vt(r);
 }
-function At(r) {
+function It(r) {
   throw r;
 }
-var It = {
+var xt = {
   closed: !0,
-  next: Ue,
-  error: At,
-  complete: Ue
-}, jt = function() {
+  next: Ne,
+  error: It,
+  complete: Ne
+}, Nt = function() {
   return typeof Symbol == "function" && Symbol.observable || "@@observable";
 }();
 function Ke(r) {
   return r;
 }
-function Nt(r) {
+function Ut(r) {
   return r.length === 0 ? Ke : r.length === 1 ? r[0] : function(t) {
     return r.reduce(function(n, i) {
       return i(n);
     }, t);
   };
 }
-var De = function() {
+var Ue = function() {
   function r(e) {
     e && (this._subscribe = e);
   }
@@ -927,8 +932,8 @@ var De = function() {
     var t = new r();
     return t.source = this, t.operator = e, t;
   }, r.prototype.subscribe = function(e, t, n) {
-    var i = this, l = Dt(e) ? e : new Be(e, t, n);
-    return ue(function() {
+    var i = this, l = Dt(e) ? e : new Oe(e, t, n);
+    return oe(function() {
       var u = i, c = u.operator, g = u.source;
       l.add(c ? c.call(l, g) : g ? i._subscribe(l) : i._trySubscribe(l));
     }), l;
@@ -941,7 +946,7 @@ var De = function() {
   }, r.prototype.forEach = function(e, t) {
     var n = this;
     return t = Le(t), new t(function(i, l) {
-      var u = new Be({
+      var u = new Oe({
         next: function(c) {
           try {
             e(c);
@@ -957,12 +962,12 @@ var De = function() {
   }, r.prototype._subscribe = function(e) {
     var t;
     return (t = this.source) === null || t === void 0 ? void 0 : t.subscribe(e);
-  }, r.prototype[jt] = function() {
+  }, r.prototype[Nt] = function() {
     return this;
   }, r.prototype.pipe = function() {
     for (var e = [], t = 0; t < arguments.length; t++)
       e[t] = arguments[t];
-    return Nt(e)(this);
+    return Ut(e)(this);
   }, r.prototype.toPromise = function(e) {
     var t = this;
     return e = Le(e), new e(function(n, i) {
@@ -981,20 +986,20 @@ var De = function() {
 }();
 function Le(r) {
   var e;
-  return (e = r ?? Ze.Promise) !== null && e !== void 0 ? e : Promise;
+  return (e = r ?? Ce.Promise) !== null && e !== void 0 ? e : Promise;
 }
-function Ut(r) {
-  return r && X(r.next) && X(r.error) && X(r.complete);
+function Lt(r) {
+  return r && Y(r.next) && Y(r.error) && Y(r.complete);
 }
 function Dt(r) {
-  return r && r instanceof xe || Ut(r) && Qe(r);
-}
-function Lt(r) {
-  return X(r == null ? void 0 : r.lift);
+  return r && r instanceof Ve || Lt(r) && Ze(r);
 }
 function Ft(r) {
+  return Y(r == null ? void 0 : r.lift);
+}
+function qt(r) {
   return function(e) {
-    if (Lt(e))
+    if (Ft(e))
       return e.lift(function(t) {
         try {
           return r(t, this);
@@ -1005,11 +1010,11 @@ function Ft(r) {
     throw new TypeError("Unable to lift unknown Observable type");
   };
 }
-function qt(r, e, t, n, i) {
-  return new Yt(r, e, t, n, i);
+function Yt(r, e, t, n, i) {
+  return new Xt(r, e, t, n, i);
 }
-var Yt = function(r) {
-  te(e, r);
+var Xt = function(r) {
+  _(e, r);
   function e(t, n, i, l, u, c) {
     var g = r.call(this, t) || this;
     return g.onFinalize = u, g.shouldUnsubscribe = c, g._next = n ? function(h) {
@@ -1043,30 +1048,30 @@ var Yt = function(r) {
       r.prototype.unsubscribe.call(this), !n && ((t = this.onFinalize) === null || t === void 0 || t.call(this));
     }
   }, e;
-}(xe), Xt = Ce(function(r) {
+}(Ve), Gt = Je(function(r) {
   return function() {
     r(this), this.name = "ObjectUnsubscribedError", this.message = "object unsubscribed";
   };
-}), Ae = function(r) {
-  te(e, r);
+}), je = function(r) {
+  _(e, r);
   function e() {
     var t = r.call(this) || this;
     return t.closed = !1, t.currentObservers = null, t.observers = [], t.isStopped = !1, t.hasError = !1, t.thrownError = null, t;
   }
   return e.prototype.lift = function(t) {
-    var n = new Fe(this, this);
+    var n = new De(this, this);
     return n.operator = t, n;
   }, e.prototype._throwIfClosed = function() {
     if (this.closed)
-      throw new Xt();
+      throw new Gt();
   }, e.prototype.next = function(t) {
     var n = this;
-    ue(function() {
+    oe(function() {
       var i, l;
       if (n._throwIfClosed(), !n.isStopped) {
         n.currentObservers || (n.currentObservers = Array.from(n.observers));
         try {
-          for (var u = Ee(n.currentObservers), c = u.next(); !c.done; c = u.next()) {
+          for (var u = Pe(n.currentObservers), c = u.next(); !c.done; c = u.next()) {
             var g = c.value;
             g.next(t);
           }
@@ -1083,7 +1088,7 @@ var Yt = function(r) {
     });
   }, e.prototype.error = function(t) {
     var n = this;
-    ue(function() {
+    oe(function() {
       if (n._throwIfClosed(), !n.isStopped) {
         n.hasError = n.isStopped = !0, n.thrownError = t;
         for (var i = n.observers; i.length; )
@@ -1092,7 +1097,7 @@ var Yt = function(r) {
     });
   }, e.prototype.complete = function() {
     var t = this;
-    ue(function() {
+    oe(function() {
       if (t._throwIfClosed(), !t.isStopped) {
         t.isStopped = !0;
         for (var n = t.observers; n.length; )
@@ -1114,20 +1119,20 @@ var Yt = function(r) {
     return this._throwIfClosed(), this._checkFinalizedStatuses(t), this._innerSubscribe(t);
   }, e.prototype._innerSubscribe = function(t) {
     var n = this, i = this, l = i.hasError, u = i.isStopped, c = i.observers;
-    return l || u ? Je : (this.currentObservers = null, c.push(t), new he(function() {
-      n.currentObservers = null, Oe(c, t);
+    return l || u ? Qe : (this.currentObservers = null, c.push(t), new ce(function() {
+      n.currentObservers = null, He(c, t);
     }));
   }, e.prototype._checkFinalizedStatuses = function(t) {
     var n = this, i = n.hasError, l = n.thrownError, u = n.isStopped;
     i ? t.error(l) : u && t.complete();
   }, e.prototype.asObservable = function() {
-    var t = new De();
+    var t = new Ue();
     return t.source = this, t;
   }, e.create = function(t, n) {
-    return new Fe(t, n);
+    return new De(t, n);
   }, e;
-}(De), Fe = function(r) {
-  te(e, r);
+}(Ue), De = function(r) {
+  _(e, r);
   function e(t, n) {
     var i = r.call(this) || this;
     return i.destination = t, i.source = n, i;
@@ -1143,10 +1148,10 @@ var Yt = function(r) {
     (n = (t = this.destination) === null || t === void 0 ? void 0 : t.complete) === null || n === void 0 || n.call(t);
   }, e.prototype._subscribe = function(t) {
     var n, i;
-    return (i = (n = this.source) === null || n === void 0 ? void 0 : n.subscribe(t)) !== null && i !== void 0 ? i : Je;
+    return (i = (n = this.source) === null || n === void 0 ? void 0 : n.subscribe(t)) !== null && i !== void 0 ? i : Qe;
   }, e;
-}(Ae), qe = function(r) {
-  te(e, r);
+}(je), Fe = function(r) {
+  _(e, r);
   function e(t) {
     var n = r.call(this) || this;
     return n._value = t, n;
@@ -1168,21 +1173,21 @@ var Yt = function(r) {
   }, e.prototype.next = function(t) {
     r.prototype.next.call(this, this._value = t);
   }, e;
-}(Ae);
-function Gt(r, e) {
-  return e === void 0 && (e = Ke), r = r ?? Wt, Ft(function(t, n) {
+}(je);
+function Wt(r, e) {
+  return e === void 0 && (e = Ke), r = r ?? zt, qt(function(t, n) {
     var i, l = !0;
-    t.subscribe(qt(n, function(u) {
+    t.subscribe(Yt(n, function(u) {
       var c = e(u);
       (l || !r(i, c)) && (l = !1, i = c, n.next(u));
     }));
   });
 }
-function Wt(r, e) {
+function zt(r, e) {
   return r === e;
 }
 var R = /* @__PURE__ */ ((r) => (r.hex = "hex", r.hexa = "hexa", r.rgba = "rgba", r.rgb = "rgb", r.hsla = "hsla", r.hsl = "hsl", r.cmyk = "cmyk", r))(R || {});
-class Ie {
+class Ae {
   constructor(e) {
     /** 所选颜色值 */
     s(this, "modelValue", null);
@@ -1190,24 +1195,24 @@ class Ie {
     s(this, "hueValue", null);
     /** 初始颜色值 */
     s(this, "initValue", null);
-    s(this, "valueChanged", new Ae());
-    s(this, "presetsVisibilityChanges", new qe(!0));
+    s(this, "valueChanged", new je());
+    s(this, "presetsVisibilityChanges", new Fe(!0));
     s(this, "initType", null);
-    s(this, "alphaChannelVisibilityChanges", new qe(!0));
-    s(this, "valueChanges", this.valueChanged.asObservable().pipe(Gt(
+    s(this, "alphaChannelVisibilityChanges", new Fe(!0));
+    s(this, "valueChanges", this.valueChanged.asObservable().pipe(Wt(
       (e, t) => e.toRgbaString() === t.toRgbaString()
     )));
     s(this, "colorPresets", []);
-    const t = e[0], n = P.from(t);
+    const t = e[0], n = E.from(t);
     this.setValue(n), this.setHueColor(n);
   }
   /** 设置值 */
   setValueFrom(e, t, n) {
-    const i = P.from(e);
-    return this.initValue || (this.initValue = P.from(e)), typeof e == "string" && this.finOutInputType(e), this.setHueColor(i), this.setValue(i), this;
+    const i = E.from(e);
+    return this.initValue || (this.initValue = E.from(e)), typeof e == "string" && this.finOutInputType(e), this.setHueColor(i), this.setValue(i), this;
   }
   setHueColor(e) {
-    (this.hueValue && e.getHsva().hue > 0 || !this.hueValue) && (this.hueValue = new P().setHsva(e.getHsva().hue));
+    (this.hueValue && e.getHsva().hue > 0 || !this.hueValue) && (this.hueValue = new E().setHsva(e.getHsva().hue));
   }
   get hue() {
     return this.hueValue;
@@ -1226,7 +1231,7 @@ class Ie {
   }
   reset() {
     let e;
-    return this.initValue ? (e = this.initValue.clone(), this.setHueColor(e)) : (e = P.from(new o(255, 0, 0, 1)), this.hueValue = new P().setHsva(e.getHsva().hue)), this.setValue(e), this;
+    return this.initValue ? (e = this.initValue.clone(), this.setHueColor(e)) : (e = E.from(new o(255, 0, 0, 1)), this.hueValue = new E().setHsva(e.getHsva().hue)), this.setValue(e), this;
   }
   showAlphaChannel() {
     return this.alphaChannelVisibilityChanges.next(!0), this;
@@ -1260,7 +1265,7 @@ class Ie {
   setPresets(e) {
     const t = [];
     return e.map((n) => {
-      Array.isArray(n) ? t.push(this.setPresets(n)) : t.push(new P(n));
+      Array.isArray(n) ? t.push(this.setPresets(n)) : t.push(new E(n));
     }), t;
   }
   get presets() {
@@ -1271,8 +1276,8 @@ class Ie {
   }
 }
 /** 确定输入颜色类型 */
-s(Ie, "finOutInputType");
-function j(r, e) {
+s(Ae, "finOutInputType");
+function x(r, e) {
   switch (e) {
     case R.hex:
       return r.toHexString();
@@ -1290,80 +1295,80 @@ function j(r, e) {
       return r.toRgbaString();
   }
 }
-const zt = {
+const Jt = {
   color: { type: Object, default: "" },
   hue: { type: Object, default: "" },
   randomId: { type: String, default: "" },
   allowColorNull: { type: Boolean, default: !1 }
-}, Te = /* @__PURE__ */ ee({
+}, Te = /* @__PURE__ */ T({
   name: "SvPanel",
-  props: zt,
+  props: Jt,
   emits: ["update:color"],
   setup(r, e) {
     const t = S(null), n = S(null), i = S(r.randomId), l = S(r.allowColorNull);
     function u() {
       return r.hue ? r.hue.toRgbaString() : "#3f51b5";
     }
-    function c(d, f) {
+    function c(f, d) {
       var b, y;
-      d = Math.max(0, Math.min(d, 100)), f = Math.max(0, Math.min(f, 100)), t.value && ((b = t.value.style) == null || b.setProperty("top", `${100 - f}%`), (y = t.value.style) == null || y.setProperty("left", `${d}%`));
+      f = Math.max(0, Math.min(f, 100)), d = Math.max(0, Math.min(d, 100)), t.value && ((b = t.value.style) == null || b.setProperty("top", `${100 - d}%`), (y = t.value.style) == null || y.setProperty("left", `${f}%`));
     }
     function g() {
-      const d = document.getElementById(`farris-color-picker-plus-sure-${i.value}`);
-      d.className = "btn btn-secondary";
-      const f = document.getElementById(`farris-color-picker-plus-input-${i.value}`);
-      f.style.borderColor = "#dcdfe6";
+      const f = document.getElementById(`farris-color-picker-plus-sure-${i.value}`);
+      f.className = "btn btn-secondary";
+      const d = document.getElementById(`farris-color-picker-plus-input-${i.value}`);
+      d.style.borderColor = "#dcdfe6";
     }
     function h({
-      x: d,
-      y: f,
+      x: f,
+      y: d,
       height: b,
       width: y
     }) {
-      const v = d * 100 / y, $ = -(f * 100 / b) + 100;
+      const v = f * 100 / y, $ = -(d * 100 / b) + 100;
       c(v, $);
-      const E = r.color == null ? "transparent" : r.color, M = P.from(E);
-      if (g(), M != null) {
-        const A = r.hue.getHsva(), N = M.getHsva(), I = new P().setHsva(A.hue, v, $, N.alpha);
-        e.emit("update:color", I);
+      const M = r.color == null ? "transparent" : r.color, H = E.from(M);
+      if (g(), H != null) {
+        const j = r.hue.getHsva(), N = H.getHsva(), P = new E().setHsva(j.hue, v, $, N.alpha);
+        e.emit("update:color", P);
       }
-      !M && l.value && e.emit("update:color", null);
+      !H && l.value && e.emit("update:color", null);
     }
-    function p(d) {
+    function p(f) {
       if (n.value) {
         const {
-          width: f,
+          width: d,
           height: b,
           top: y,
           left: v
         } = n.value.getBoundingClientRect(), {
           pageX: $,
-          pageY: E
-        } = "touches" in d ? d.touches[0] : d, M = Math.max(0, Math.min($ - (v + window.pageXOffset), f)), A = Math.max(0, Math.min(E - (y + window.pageYOffset), b));
+          pageY: M
+        } = "touches" in f ? f.touches[0] : f, H = Math.max(0, Math.min($ - (v + window.pageXOffset), d)), j = Math.max(0, Math.min(M - (y + window.pageYOffset), b));
         h({
-          x: M,
-          y: A,
+          x: H,
+          y: j,
           height: b,
-          width: f
+          width: d
         });
       }
     }
-    return T(() => {
-      const d = r.color.getHsva();
-      c(d.saturation, d.value);
-    }), q(() => r.color, (d) => {
-      d.getHsva();
-    }), q(() => r.color, (d) => {
-      const f = d.getHsva();
+    return C(() => {
+      const f = r.color.getHsva();
       c(f.saturation, f.value);
+    }), F(() => r.color, (f) => {
+      f.getHsva();
+    }), F(() => r.color, (f) => {
+      const d = f.getHsva();
+      c(d.saturation, d.value);
     }), () => k("div", {
       class: "f-sv-panel-component",
       ref: n,
       style: {
         backgroundColor: u()
       },
-      onMousedown: _((d) => p(d), ["prevent"]),
-      onTouchstart: _((d) => p(d), ["prevent"])
+      onMousedown: K((f) => p(f), ["prevent"]),
+      onTouchstart: K((f) => p(f), ["prevent"])
     }, [k("div", {
       class: "color-svpanel__white"
     }, null), k("div", {
@@ -1373,14 +1378,14 @@ const zt = {
       ref: t
     }, [k("div", null, null)])]);
   }
-}), Ct = {
+}), Qt = {
   color: { type: Object, default: "" },
   hue: { type: Object, default: "" },
   allowColorNull: { type: Boolean, default: !1 },
   onChange: { type: Function }
-}, _e = /* @__PURE__ */ ee({
+}, _e = /* @__PURE__ */ T({
   name: "Hue",
-  props: Ct,
+  props: Qt,
   emits: ["update:color", "update:hue"],
   setup(r, e) {
     const t = S(r.hue), n = S(r.allowColorNull), i = [];
@@ -1393,15 +1398,15 @@ const zt = {
         const {
           width: v,
           height: $,
-          top: E,
-          left: M
+          top: M,
+          left: H
         } = u.value.getBoundingClientRect(), {
-          pageX: A,
+          pageX: j,
           pageY: N
-        } = "touches" in y ? y.touches[0] : y, I = Math.max(0, Math.min(A - (M + window.pageXOffset), v)), H = Math.max(0, Math.min(N - (E + window.pageYOffset), $));
+        } = "touches" in y ? y.touches[0] : y, P = Math.max(0, Math.min(j - (H + window.pageXOffset), v)), V = Math.max(0, Math.min(N - (M + window.pageYOffset), $));
         b({
-          x: I,
-          y: H,
+          x: P,
+          y: V,
           height: $,
           width: v
         });
@@ -1416,125 +1421,125 @@ const zt = {
     const p = (y) => {
       h(y), y.stopPropagation();
     };
-    T(() => {
+    C(() => {
       document.querySelectorAll(".f-hue-component").forEach(($) => {
         $.addEventListener("mousedown", p), $.addEventListener("touchstart", p);
       });
       const v = r.color.getHsva();
-      f(v.hue);
+      d(v.hue);
     });
-    const d = S(null);
-    function f(y) {
-      var E;
+    const f = S(null);
+    function d(y) {
+      var M;
       const v = Math.max(0, Math.min(y / 360 * 100, 100));
-      d.value && ((E = d.value.style) == null || E.setProperty("top", `${v}%`));
+      f.value && ((M = f.value.style) == null || M.setProperty("top", `${v}%`));
     }
     function b({
       x: y,
       y: v,
       height: $,
-      width: E
+      width: M
     }) {
-      const M = v / $ * 360;
-      f(M);
-      const A = r.color.getHsva(), N = new P().setHsva(M, A.saturation, A.value, A.alpha), I = new P().setHsva(M, 100, 100, A.alpha);
-      (r.color != null || r.color == null && n.value) && (e.emit("update:hue", I), e.emit("update:color", N));
+      const H = v / $ * 360;
+      d(H);
+      const j = r.color.getHsva(), N = new E().setHsva(H, j.saturation, j.value, j.alpha), P = new E().setHsva(H, 100, 100, j.alpha);
+      (r.color != null || r.color == null && n.value) && (e.emit("update:hue", P), e.emit("update:color", N));
     }
-    return q(t, (y) => {
+    return F(t, (y) => {
       const v = y.getHsva();
-      f(v.hue);
-    }), q(() => r.color, (y) => {
+      d(v.hue);
+    }), F(() => r.color, (y) => {
       const v = y.getHsva();
-      f(v.hue);
+      d(v.hue);
     }), () => k("div", {
       class: "f-hue-component",
       ref: u,
-      onMousedown: _((y) => c(y), ["prevent"]),
-      onTouchstart: _((y) => c(y), ["prevent"])
+      onMousedown: K((y) => c(y), ["prevent"]),
+      onTouchstart: K((y) => c(y), ["prevent"])
     }, [k("div", {
       class: "color-hue-slider__bar"
     }, null), k("div", {
       class: "color-hue-slider__thumb",
-      ref: d
+      ref: f
     }, null)]);
   }
-}), Jt = {
+}), Zt = {
   color: { type: Object, default: "" },
   randomId: { type: String, default: "" },
   allowColorNull: { type: Boolean, default: !1 }
-}, et = /* @__PURE__ */ ee({
+}, et = /* @__PURE__ */ T({
   name: "Alpha",
-  props: Jt,
+  props: Zt,
   emits: ["update:color"],
   setup(r, e) {
     const t = S(null), n = S(null), i = S(r.randomId), l = S(r.allowColorNull), u = (p) => {
       var b;
-      const d = Math.max(0, Math.min(p * 100, 100));
-      n.value && ((b = n.value.style) == null || b.setProperty("left", `${d}%`));
+      const f = Math.max(0, Math.min(p * 100, 100));
+      n.value && ((b = n.value.style) == null || b.setProperty("left", `${f}%`));
     };
     function c(p) {
       if (t.value) {
         const {
-          width: d,
-          height: f,
+          width: f,
+          height: d,
           top: b,
           left: y
         } = t.value.getBoundingClientRect(), {
           pageX: v,
           pageY: $
-        } = "touches" in p ? p.touches[0] : p, E = Math.max(0, Math.min(v - (y + window.pageXOffset), d)), M = Math.max(0, Math.min($ - (b + window.pageYOffset), f));
+        } = "touches" in p ? p.touches[0] : p, M = Math.max(0, Math.min(v - (y + window.pageXOffset), f)), H = Math.max(0, Math.min($ - (b + window.pageYOffset), d));
         h({
-          x: E,
-          y: M,
-          height: f,
-          width: d
+          x: M,
+          y: H,
+          height: d,
+          width: f
         });
       }
     }
     function g() {
       const p = document.getElementById(`farris-color-picker-plus-sure-${i.value}`);
       p.className = "btn btn-secondary";
-      const d = document.getElementById(`farris-color-picker-plus-input-${i.value}`);
-      d.style.borderColor = "#dcdfe6";
+      const f = document.getElementById(`farris-color-picker-plus-input-${i.value}`);
+      f.style.borderColor = "#dcdfe6";
     }
     const h = ({
       x: p,
-      width: d
+      width: f
     }) => {
-      const f = p / d;
-      u(f), g();
-      const b = r.color.getHsva(), y = new P().setHsva(b.hue, b.saturation, b.value, f);
+      const d = p / f;
+      u(d), g();
+      const b = r.color.getHsva(), y = new E().setHsva(b.hue, b.saturation, b.value, d);
       r.color != null ? e.emit("update:color", y) : r.color == null && l.value && e.emit("update:color", null);
     };
-    return T(() => {
+    return C(() => {
       const p = r.color.getHsva();
       u(p.alpha);
-    }), q(() => r.color, (p) => {
-      const d = p.getHsva();
-      u(d.alpha);
+    }), F(() => r.color, (p) => {
+      const f = p.getHsva();
+      u(f.alpha);
     }), () => k("div", {
       class: "f-alpha-component",
       ref: t,
-      onMousedown: _((p) => c(p), ["prevent"]),
-      onTouchstart: _((p) => c(p), ["prevent"])
+      onMousedown: K((p) => c(p), ["prevent"]),
+      onTouchstart: K((p) => c(p), ["prevent"])
     }, [k("div", {
       class: "color-alpha-slider__bar"
-    }, [Re(" ")]), k("div", {
+    }, [Be(" ")]), k("div", {
       class: "color-alpha-slider__thumb",
       ref: n
     }, null)]);
   }
-}), Qt = {
+}), Ct = {
   color: { type: Object, default: "" },
   hue: { type: Object, default: "" },
   colorPresets: { type: Object, default: "" },
   randomId: { type: String, default: "" }
-}, tt = /* @__PURE__ */ ee({
+}, tt = /* @__PURE__ */ T({
   name: "Preset",
-  props: Qt,
+  props: Ct,
   emits: ["update:hue", "update:color"],
   setup(r, e) {
-    const t = S(new P()), n = S(r.colorPresets), i = S(r.randomId);
+    const t = S(new E()), n = S(r.colorPresets), i = S(r.randomId);
     function l() {
       const h = document.getElementById(`farris-color-picker-plus-sure-${i.value}`);
       h.className = "btn btn-secondary";
@@ -1543,14 +1548,14 @@ const zt = {
     }
     function u(h) {
       l();
-      const p = h.getRgba(), d = h.getHsva(), f = new P().setRgba(p.red, p.green, p.blue, p.alpha), b = new P().setHsva(d.hue);
-      t.value = h, e.emit("update:hue", b), e.emit("update:color", f);
+      const p = h.getRgba(), f = h.getHsva(), d = new E().setRgba(p.red, p.green, p.blue, p.alpha), b = new E().setHsva(f.hue);
+      t.value = h, e.emit("update:hue", b), e.emit("update:color", d);
     }
     function c(h) {
-      const p = t.value.getRgba().toString(), d = t.value.getHsva().toString(), f = h.getRgba().toString() === p && h.getHsva().toString() === d;
+      const p = t.value.getRgba().toString(), f = t.value.getHsva().toString(), d = h.getRgba().toString() === p && h.getHsva().toString() === f;
       return {
-        "color-preset__color-selector": f,
-        selected: f
+        "color-preset__color-selector": d,
+        selected: d
       };
     }
     function g(h, p) {
@@ -1571,27 +1576,25 @@ const zt = {
       class: "color-preset__colors"
     }, [n.value.map((h, p) => g(h, p))])]);
   }
-}), le = /* @__PURE__ */ ee({
+}), ue = /* @__PURE__ */ T({
   name: "FColorPicker",
-  props: Ve,
+  props: $e,
   emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
   setup(r, e) {
-    const t = S(new P(r.color)), n = S(r.color), i = S(r.disabled), l = S(r.color), u = S(r.allowColorNull), c = S(r.presets), g = S(!1), h = S(!1), p = S(!1), d = S("HEX"), f = Math.floor(Math.random() * 1e3).toString();
-    let b = -1, y, v = new Ie("#000000");
-    const $ = S(r.color);
-    let E, M;
-    const A = S(null), N = S(null), I = S(null);
-    let H = U(() => !y && v && v.initType ? v.initType : y);
-    const O = U({
+    const t = S(new E(r.color)), n = S(r.color), i = S(r.disabled), l = S(r.color), u = S(r.allowColorNull), c = S(r.presets), g = S(!1), h = S(!1), p = S(!1), f = S("HEX"), d = Math.floor(Math.random() * 1e3).toString();
+    let b = -1, y;
+    const v = new Ae("#000000"), $ = S(r.color);
+    let M, H;
+    const j = S(null), N = S(null), P = S(null), V = U(() => !y && v && v.initType ? v.initType : y), O = U({
       get() {
-        return y && n.value !== null ? (re(y), j(new P(n.value), R[y])) : n.value;
+        return y && n.value !== null ? (te(y), x(new E(n.value), R[y])) : n.value;
       },
       set(w) {
-        w !== null && (Y(w), Q(w));
+        w !== null && (q(w), J(w));
       }
-    }), x = S(O.value), V = U(() => b > -1), D = U(() => c.value.length > 0), G = U(() => ({
+    }), A = S(O.value), I = U(() => b > -1), W = U(() => c.value.length > 0), he = U(() => ({
       "background-color": l.value
-    })), C = U(() => h.value && g.value ? "display:flex" : "display:none"), J = [{
+    })), ie = U(() => h.value && g.value ? "display:flex" : "display:none"), z = [{
       text: "HEX",
       type: R.hex
     }, {
@@ -1600,90 +1603,90 @@ const zt = {
     }];
     function pe() {
       const w = document.getElementById("farris-color-picker-panel");
-      w.id = `farris-color-picker-panel-${f}`;
+      w.id = `farris-color-picker-panel-${d}`;
       const m = document.getElementById("farris-color-picker-plus-sure");
-      m.id = `farris-color-picker-plus-sure-${f}`;
+      m.id = `farris-color-picker-plus-sure-${d}`;
       const B = document.getElementById("farris-color-picker-plus-input");
-      B.id = `farris-color-picker-plus-input-${f}`, M = document.getElementById(`farris-color-picker-plus-sure-${f}`), E = document.getElementById(`farris-color-picker-panel-${f}`), E.className = "color-picker-panel disabled";
+      B.id = `farris-color-picker-plus-input-${d}`, H = document.getElementById(`farris-color-picker-plus-sure-${d}`), M = document.getElementById(`farris-color-picker-panel-${d}`), M.className = "color-picker-panel disabled";
     }
-    function z() {
+    function G() {
       if (!u.value && !n.value) {
-        document.getElementById(`farris-color-picker-plus-sure-${f}`).classList.toggle("disabled");
-        const m = document.getElementById(`farris-color-picker-plus-input-${f}`);
+        document.getElementById(`farris-color-picker-plus-sure-${d}`).classList.toggle("disabled");
+        const m = document.getElementById(`farris-color-picker-plus-input-${d}`);
         m.style.borderColor = "red";
       }
     }
-    function de() {
-      n.value && (Y(n.value), !n.value && u.value || (n.value = j(new P(n.value), R[H.value])), x.value = O.value), ne(re(v.initType));
+    function fe() {
+      n.value && (q(n.value), !n.value && u.value || (n.value = x(new E(n.value), R[V.value])), A.value = O.value), ee(te(v.initType));
     }
-    function ae() {
-      n.value && Y(n.value), v.hasPresets() || v.setColorPresets(c.value), n.value ? l.value = j(new P(n.value), R[H.value]) : !n.value && u.value && (l.value = null);
+    function se() {
+      n.value && q(n.value), v.hasPresets() || v.setColorPresets(c.value), n.value ? l.value = x(new E(n.value), R[V.value]) : !n.value && u.value && (l.value = null);
     }
-    function fe() {
+    function de() {
       v.valueChanges.subscribe((w) => {
-        const m = j(w, R[y || v.initType]);
+        const m = x(w, R[y || v.initType]);
         n.value = m;
       });
     }
-    function ne(w) {
-      d.value = J[w].text;
+    function ee(w) {
+      f.value = z[w].text;
     }
     function ve() {
       var w;
       h.value = !!(y != null && y.includes("a") || (w = v.initType) != null && w.includes("a"));
     }
-    Ye(() => {
+    qe(() => {
       v.setColorPresets(c.value || ["#eaecf3"]);
-    }), T(() => {
-      pe(), z(), de(), ae();
-    }), q(d, () => {
-      fe(), O.value = j(new P(n.value), R[y || v.initType]), t.value = new P(O.value), ve();
-    }), q(n, (w) => {
-      j(v.value, v.initType) !== w && w !== null && Y(w), ne(re(v.initType));
-    }), q(t, (w) => {
-      n.value = j(w, R[y || v.initType]), Y(n.value), O.value = n.value;
+    }), C(() => {
+      pe(), G(), fe(), se();
+    }), F(f, () => {
+      de(), O.value = x(new E(n.value), R[y || v.initType]), t.value = new E(O.value), ve();
+    }), F(n, (w) => {
+      x(v.value, v.initType) !== w && w !== null && q(w), ee(te(v.initType));
+    }), F(t, (w) => {
+      n.value = x(w, R[y || v.initType]), q(n.value), O.value = n.value;
     });
-    function Q(w) {
-      const m = document.getElementById(`farris-color-picker-plus-input-${f}`);
-      (w == "" || w == null || w == null) && !u.value ? (n.value = null, m.style.borderColor = "red", M.className = "btn btn-secondary disabled") : (m.style.borderColor = "#dcdfe6", M.className = "btn btn-secondary");
+    function J(w) {
+      const m = document.getElementById(`farris-color-picker-plus-input-${d}`);
+      (w === "" || w === void 0 || w == null) && !u.value ? (n.value = null, m.style.borderColor = "red", H.className = "btn btn-secondary disabled") : (m.style.borderColor = "#dcdfe6", H.className = "btn btn-secondary");
     }
     function ge(w) {
       var m, B;
       if (w == null || w.stopPropagation(), u.value) {
         l.value = (n == null ? void 0 : n.value) ?? null;
-        const F = {
+        const D = {
           elementValue: l
         };
-        e.emit("valueChanged", F), L();
+        e.emit("valueChanged", D), L();
       }
-      if (!u.value && !(O.value == null || O.value == null || O.value == "")) {
-        (B = (m = A.value) == null ? void 0 : m.style) == null || B.setProperty("background", n.value), p.value = !0, l.value = n.value;
-        const F = {
+      if (!u.value && !(O.value === void 0 || O.value == null || O.value === "")) {
+        (B = (m = j.value) == null ? void 0 : m.style) == null || B.setProperty("background", n.value), p.value = !0, l.value = n.value;
+        const D = {
           elementValue: l
         };
-        e.emit("valueChanged", F), L();
+        e.emit("valueChanged", D), L();
       }
-      !$.value && !n.value && !p.value && u && L(), Q(n.value), O.value = n.value, M.classList.contains("disabled") || (x.value = n.value, g.value = !1);
+      !$.value && !n.value && !p.value && u && L(), J(n.value), O.value = n.value, H.classList.contains("disabled") || (A.value = n.value, g.value = !1);
     }
-    function Y(w) {
-      v == null || v.setValueFrom(w, f, u.value);
+    function q(w) {
+      v == null || v.setValueFrom(w, d, u.value);
     }
     function ye(w) {
-      E = document.getElementById(`farris-color-picker-panel-${f}`);
-      const m = E.className == "color-picker-panel";
-      i.value || m || (g.value = !0, E.classList.toggle("disabled"), z(), Y(n.value), w.stopPropagation());
+      M = document.getElementById(`farris-color-picker-panel-${d}`);
+      const m = M.className === "color-picker-panel";
+      i.value || m || (g.value = !0, M.classList.toggle("disabled"), G(), q(n.value), w.stopPropagation());
     }
     function L() {
-      E = document.getElementById(`farris-color-picker-panel-${f}`), E.className = "color-picker-panel disabled";
+      M = document.getElementById(`farris-color-picker-panel-${d}`), M.className = "color-picker-panel disabled";
     }
-    function re(w) {
-      const m = J.findIndex((B) => B.type === w);
+    function te(w) {
+      const m = z.findIndex((B) => B.type === w);
       return b = m, m;
     }
-    function Z(w) {
-      if (!M.classList.contains("disabled")) {
-        const m = J.length;
-        b = (m + b + (w === "up" ? 1 : -1)) % m, y = J[b].type, ne(b), Y(n.value);
+    function Q(w) {
+      if (!H.classList.contains("disabled")) {
+        const m = z.length;
+        b = (m + b + (w === "up" ? 1 : -1)) % m, y = z[b].type, ee(b), q(n.value);
       }
     }
     return () => k("div", {
@@ -1694,7 +1697,7 @@ const zt = {
         disabled: i.value
       }],
       id: "farris-color-picker-panel",
-      ref: I,
+      ref: P,
       onClick: (w) => w.stopPropagation(),
       style: "top:30px"
     }, [k("div", {
@@ -1706,58 +1709,58 @@ const zt = {
       color: t.value,
       "onUpdate:color": (w) => t.value = w
     }, null), k(Te, {
-      randomId: f,
+      randomId: d,
       hue: v.hue,
       "onUpdate:hue": (w) => v.hue = w,
       allowColorNull: u.value,
       color: t.value,
       "onUpdate:color": (w) => t.value = w
     }, null)]), k(et, {
-      style: C.value,
-      randomId: f,
+      style: ie.value,
+      randomId: d,
       allowColorNull: u.value,
       color: t.value,
       "onUpdate:color": (w) => t.value = w
     }, null), k("div", {
       class: "input-btn",
       style: "display:flex;align-items: center;"
-    }, [W(k("span", {
+    }, [X(k("span", {
       style: "width:40px;margin-right:10px;"
-    }, [d.value]), [[K, D]]), W(k("input", {
+    }, [f.value]), [[Z, W]]), X(k("input", {
       type: "text",
       title: "color-picker-plus",
       id: "farris-color-picker-plus-input",
       "onUpdate:modelValue": (w) => O.value = w,
       style: "float:none"
-    }, null), [[Xe, O.value]]), W(k("div", {
+    }, null), [[Ye, O.value]]), X(k("div", {
       class: "type-icon-btn-wrapper",
       style: "cursor:pointer"
     }, [k("span", {
       class: "f-icon f-icon-arrow-60-up type-icon-btn",
-      onClick: () => Z("up")
+      onClick: () => Q("up")
     }, null), k("span", {
       class: "f-icon f-icon-arrow-60-down type-icon-btn",
-      onClick: () => Z("down")
-    }, null)]), [[K, D]]), k("div", {
+      onClick: () => Q("down")
+    }, null)]), [[Z, W]]), k("div", {
       class: "input-btn"
     }, [k("button", {
       id: "farris-color-picker-plus-sure",
       class: "btn btn-secondary",
       onClick: (w) => ge(w)
-    }, [Re("确定")])])]), W(k(tt, {
+    }, [Be("确定")])])]), X(k(tt, {
       color: t.value,
       "onUpdate:color": (w) => t.value = w,
       hue: v.hue,
       "onUpdate:hue": (w) => v.hue = w,
-      randomId: f,
+      randomId: d,
       colorPresets: v.presets
-    }, null), [[K, V]])]), k("div", {
+    }, null), [[Z, I]])]), k("div", {
       class: "color-picker-wrapper"
     }, [k("input", {
       title: "color-picker-input",
       type: "text",
       class: "color-picker-input form-control",
-      value: x.value,
+      value: A.value,
       readonly: i.value,
       onClick: (w) => w.stopPropagation()
     }, null), k("div", {
@@ -1766,208 +1769,206 @@ const zt = {
     }, [k("div", {
       class: "color-picker-trigger-inner"
     }, [k("div", {
-      style: G.value
+      style: he.value
     }, null)])])])]);
   }
 });
-function Zt(r, e, t) {
-  var I;
-  function n() {
-  }
-  const i = "", l = "", u = S();
-  function c() {
+function Kt(r, e, t) {
+  var N;
+  const n = "", i = "", l = S();
+  function u() {
     return (e == null ? void 0 : e.schema.componentType) !== "frame";
   }
-  function g() {
+  function c() {
     return !1;
   }
-  function h() {
+  function g() {
     return (e == null ? void 0 : e.schema.componentType) !== "frame";
   }
-  function p() {
+  function h() {
     return (e == null ? void 0 : e.schema.componentType) === "frame";
   }
-  function d(H) {
-    if (!H || !H.value)
+  function p(P) {
+    if (!P || !P.value)
       return null;
-    if (H.value.schema && H.value.schema.type === "component")
-      return H.value;
-    const O = S(H == null ? void 0 : H.value.parent), x = d(O);
-    return x || null;
+    if (P.value.schema && P.value.schema.type === "component")
+      return P.value;
+    const V = S(P == null ? void 0 : P.value.parent), O = p(V);
+    return O || null;
   }
-  function f(H = e) {
-    const { componentInstance: O, designerItemElementRef: x } = H;
-    return !O || !O.value ? null : O.value.canMove ? x : f(H.parent);
+  function f(P = e) {
+    const { componentInstance: V, designerItemElementRef: O } = P;
+    return !V || !V.value ? null : V.value.canMove ? O : f(P.parent);
   }
-  function b(H) {
+  function d(P) {
     return !!t;
   }
-  function y() {
+  function b() {
     return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
   }
-  function v() {
+  function y() {
   }
-  function $(H, O) {
+  function v(P, V) {
   }
-  function E(H, O) {
-    const { componentType: x } = H;
-    let V = ke(x, H, O);
-    const D = x.toLowerCase().replace("-", "_");
-    return V && !V.id && V.type === x && (V.id = `${D}_${Math.random().toString().slice(2, 6)}`), V;
+  function $(P, V) {
+    const { componentType: O } = P;
+    let A = We(O, P, V);
+    const I = O.toLowerCase().replace(/-/g, "_");
+    return A && !A.id && A.type === O && (A.id = `${I}_${Math.random().toString().slice(2, 6)}`), A;
   }
-  function M(H, O) {
-    const x = String(H.getAttribute("data-controltype")), V = H.getAttribute("data-feature"), D = V ? JSON.parse(V) : {};
-    D.parentComponentInstance = u.value;
-    let G = ke(x, D);
-    const C = x.toLowerCase().replace("-", "_");
-    return G && !G.id && G.type === x && (G.id = `${C}_${Math.random().toString().slice(2, 6)}`), G;
+  function M(P) {
   }
-  function A(H) {
+  function H(...P) {
   }
-  function N(...H) {
+  function j() {
+    e != null && e.schema.contents && e.schema.contents.map((P) => {
+      var A;
+      let V = P.id;
+      P.type === "component-ref" && (V = P.component);
+      const O = r.value.querySelector(`#${V}-design-item`);
+      (A = O == null ? void 0 : O.componentInstance) != null && A.value.onRemoveComponent && O.componentInstance.value.onRemoveComponent();
+    });
   }
-  return u.value = {
-    canMove: c(),
-    canSelectParent: g(),
-    canDelete: h(),
-    canNested: !p(),
+  return l.value = {
+    canMove: u(),
+    canSelectParent: c(),
+    canDelete: g(),
+    canNested: !h(),
     contents: e == null ? void 0 : e.schema.contents,
     elementRef: r,
-    parent: (I = e == null ? void 0 : e.parent) == null ? void 0 : I.componentInstance,
+    parent: (N = e == null ? void 0 : e.parent) == null ? void 0 : N.componentInstance,
     schema: e == null ? void 0 : e.schema,
-    styles: i,
-    designerClass: l,
-    canAccepts: b,
-    getBelongedComponentInstance: d,
+    styles: n,
+    designerClass: i,
+    canAccepts: d,
+    getBelongedComponentInstance: p,
     getDraggableDesignItemElement: f,
-    getDraggingDisplayText: y,
-    getPropConfig: N,
-    getDragScopeElement: v,
-    onAcceptMovedChildElement: $,
-    onAcceptNewChildElement: M,
-    onChildElementMovedOut: A,
-    addNewChildComponentSchema: E,
-    updateDragAndDropRules: n,
+    getDraggingDisplayText: b,
+    getPropConfig: H,
+    getDragScopeElement: y,
+    onAcceptMovedChildElement: v,
+    onChildElementMovedOut: M,
+    addNewChildComponentSchema: $,
     triggerBelongedComponentToMoveWhenMoved: S(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: S(!1)
-  }, u;
+    triggerBelongedComponentToDeleteWhenDeleted: S(!1),
+    onRemoveComponent: j
+  }, l;
 }
-const Kt = /* @__PURE__ */ ee({
+const Tt = /* @__PURE__ */ T({
   name: "FColorPickerDesign",
-  props: Ve,
+  props: $e,
   emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
   setup(r, e) {
-    const t = S(new P(r.color)), n = S(r.color), i = S(r.disabled), l = S(r.color), u = S(r.allowColorNull), c = S(r.presets), g = S(!1), h = S(!1), p = S(!1), d = S("HEX"), f = Math.floor(Math.random() * 1e3).toString();
-    let b = -1, y, v = new Ie("#000000");
-    const $ = S(r.color);
-    let E, M;
-    const A = S(null), N = S(null), I = S(), H = it("design-item-context"), O = Zt(I, H);
-    T(() => {
-      I.value.componentInstance = O;
+    const t = S(new E(r.color)), n = S(r.color), i = S(r.disabled), l = S(r.color), u = S(r.allowColorNull), c = S(r.presets), g = S(!1), h = S(!1), p = S(!1), f = S("HEX"), d = Math.floor(Math.random() * 1e3).toString();
+    let b = -1, y;
+    const v = new Ae("#000000"), $ = S(r.color);
+    let M, H;
+    const j = S(null), N = S(null), P = S(), V = it("design-item-context"), O = Kt(P, V);
+    C(() => {
+      P.value.componentInstance = O;
     }), e.expose(O.value);
-    let x = U(() => !y && v && v.initType ? v.initType : y);
-    const V = U({
+    const A = U(() => !y && v && v.initType ? v.initType : y), I = U({
       get() {
-        return y && n.value !== null ? (Z(y), j(new P(n.value), R[y])) : n.value;
+        return y && n.value !== null ? (Q(y), x(new E(n.value), R[y])) : n.value;
       },
       set(m) {
-        m !== null && (L(m), Y(m));
+        m !== null && (L(m), q(m));
       }
-    }), D = S(V.value), G = U(() => b > -1), C = U(() => c.value.length > 0), J = U(() => ({
+    }), W = S(I.value), he = U(() => b > -1), ie = U(() => c.value.length > 0), z = U(() => ({
       "background-color": l.value
-    })), pe = U(() => h.value && g.value ? "display:flex" : "display:none"), z = [{
+    })), pe = U(() => h.value && g.value ? "display:flex" : "display:none"), G = [{
       text: "HEX",
       type: R.hex
     }, {
       text: "RGBA",
       type: R.rgba
     }];
-    function de() {
+    function fe() {
       const m = document.getElementById("farris-color-picker-panel");
-      m.id = `farris-color-picker-panel-${f}`;
+      m.id = `farris-color-picker-panel-${d}`;
       const B = document.getElementById("farris-color-picker-plus-sure");
-      B.id = `farris-color-picker-plus-sure-${f}`;
-      const F = document.getElementById("farris-color-picker-plus-input");
-      F.id = `farris-color-picker-plus-input-${f}`, M = document.getElementById(`farris-color-picker-plus-sure-${f}`), E = document.getElementById(`farris-color-picker-panel-${f}`), E.className = "color-picker-panel disabled";
+      B.id = `farris-color-picker-plus-sure-${d}`;
+      const D = document.getElementById("farris-color-picker-plus-input");
+      D.id = `farris-color-picker-plus-input-${d}`, H = document.getElementById(`farris-color-picker-plus-sure-${d}`), M = document.getElementById(`farris-color-picker-panel-${d}`), M.className = "color-picker-panel disabled";
     }
-    function ae() {
+    function se() {
       if (!u.value && !n.value) {
-        document.getElementById(`farris-color-picker-plus-sure-${f}`).classList.toggle("disabled");
-        const B = document.getElementById(`farris-color-picker-plus-input-${f}`);
+        document.getElementById(`farris-color-picker-plus-sure-${d}`).classList.toggle("disabled");
+        const B = document.getElementById(`farris-color-picker-plus-input-${d}`);
         B.style.borderColor = "red";
       }
     }
-    function fe() {
-      n.value && (L(n.value), !n.value && u.value || (n.value = j(new P(n.value), R[x.value])), D.value = V.value), Q(Z(v.initType));
+    function de() {
+      n.value && (L(n.value), !n.value && u.value || (n.value = x(new E(n.value), R[A.value])), W.value = I.value), J(Q(v.initType));
     }
-    function ne() {
-      n.value && L(n.value), v.hasPresets() || v.setColorPresets(c.value), n.value ? l.value = j(new P(n.value), R[x.value]) : !n.value && u.value && (l.value = null);
+    function ee() {
+      n.value && L(n.value), v.hasPresets() || v.setColorPresets(c.value), n.value ? l.value = x(new E(n.value), R[A.value]) : !n.value && u.value && (l.value = null);
     }
     function ve() {
       v.valueChanges.subscribe((m) => {
-        const B = j(m, R[y || v.initType]);
+        const B = x(m, R[y || v.initType]);
         n.value = B;
       });
     }
-    function Q(m) {
-      d.value = z[m].text;
+    function J(m) {
+      f.value = G[m].text;
     }
     function ge() {
       var m;
       h.value = !!(y != null && y.includes("a") || (m = v.initType) != null && m.includes("a"));
     }
-    Ye(() => {
+    qe(() => {
       v.setColorPresets(c.value || ["#eaecf3"]);
-    }), T(() => {
-      de(), ae(), fe(), ne();
-    }), q(d, () => {
-      ve(), V.value = j(new P(n.value), R[y || v.initType]), t.value = new P(V.value), ge();
-    }), q(n, (m) => {
-      j(v.value, v.initType) !== m && m !== null && L(m), Q(Z(v.initType));
-    }), q(t, (m) => {
-      n.value = j(m, R[y || v.initType]), L(n.value), V.value = n.value;
+    }), C(() => {
+      fe(), se(), de(), ee();
+    }), F(f, () => {
+      ve(), I.value = x(new E(n.value), R[y || v.initType]), t.value = new E(I.value), ge();
+    }), F(n, (m) => {
+      x(v.value, v.initType) !== m && m !== null && L(m), J(Q(v.initType));
+    }), F(t, (m) => {
+      n.value = x(m, R[y || v.initType]), L(n.value), I.value = n.value;
     });
-    function Y(m) {
-      const B = document.getElementById(`farris-color-picker-plus-input-${f}`);
-      (m == "" || m == null || m == null) && !u.value ? (n.value = null, B.style.borderColor = "red", M.className = "btn btn-secondary disabled") : (B.style.borderColor = "#dcdfe6", M.className = "btn btn-secondary");
+    function q(m) {
+      const B = document.getElementById(`farris-color-picker-plus-input-${d}`);
+      (m === "" || m === void 0 || m == null) && !u.value ? (n.value = null, B.style.borderColor = "red", H.className = "btn btn-secondary disabled") : (B.style.borderColor = "#dcdfe6", H.className = "btn btn-secondary");
     }
     function ye() {
       var m, B;
       if (u.value) {
         l.value = (n == null ? void 0 : n.value) ?? null;
-        const F = {
+        const D = {
           elementValue: l
         };
-        e.emit("valueChanged", F), E.classList.toggle("disabled");
+        e.emit("valueChanged", D), M.classList.toggle("disabled");
       }
-      if (!u.value && !(V.value == null || V.value == null || V.value == "")) {
-        (B = (m = A.value) == null ? void 0 : m.style) == null || B.setProperty("background", n.value), p.value = !0, l.value = n.value;
-        const F = {
+      if (!u.value && !(I.value === void 0 || I.value == null || I.value === "")) {
+        (B = (m = j.value) == null ? void 0 : m.style) == null || B.setProperty("background", n.value), p.value = !0, l.value = n.value;
+        const D = {
           elementValue: l
         };
-        e.emit("valueChanged", F), E.classList.toggle("disabled");
+        e.emit("valueChanged", D), M.classList.toggle("disabled");
       }
-      !$.value && !n.value && !p.value && u && E.classList.toggle("disabled"), Y(n.value), V.value = n.value, M.classList.contains("disabled") || (D.value = n.value, g.value = !1);
+      !$.value && !n.value && !p.value && u && M.classList.toggle("disabled"), q(n.value), I.value = n.value, H.classList.contains("disabled") || (W.value = n.value, g.value = !1);
     }
     function L(m) {
-      v == null || v.setValueFrom(m, f, u.value);
+      v == null || v.setValueFrom(m, d, u.value);
     }
-    function re(m) {
-      i.value || (g.value = !0, E.classList.toggle("disabled"), ae(), L(n.value));
+    function te(m) {
+      i.value || (g.value = !0, M.classList.toggle("disabled"), se(), L(n.value));
     }
-    function Z(m) {
-      const B = z.findIndex((F) => F.type === m);
+    function Q(m) {
+      const B = G.findIndex((D) => D.type === m);
       return b = B, B;
     }
     function w(m) {
-      if (!M.classList.contains("disabled")) {
-        const B = z.length;
-        b = (B + b + (m === "up" ? 1 : -1)) % B, y = z[b].type, Q(b), L(n.value);
+      if (!H.classList.contains("disabled")) {
+        const B = G.length;
+        b = (B + b + (m === "up" ? 1 : -1)) % B, y = G[b].type, J(b), L(n.value);
       }
     }
     return () => k("div", {
       class: "f-color-picker-component",
-      ref: I
+      ref: P
     }, [k("div", {
       class: ["color-picker-panel", {
         disabled: i.value
@@ -1985,7 +1986,7 @@ const Kt = /* @__PURE__ */ ee({
       color: t.value,
       "onUpdate:color": (m) => t.value = m
     }, null), k(Te, {
-      randomId: f,
+      randomId: d,
       hue: v.hue,
       "onUpdate:hue": (m) => v.hue = m,
       allowColorNull: u.value,
@@ -1993,21 +1994,22 @@ const Kt = /* @__PURE__ */ ee({
       "onUpdate:color": (m) => t.value = m
     }, null)]), k(et, {
       style: pe.value,
-      randomId: f,
+      randomId: d,
       allowColorNull: u.value,
       color: t.value,
       "onUpdate:color": (m) => t.value = m
     }, null), k("div", {
       class: "input-btn",
       style: "display:flex;align-items: center;"
-    }, [W(k("span", {
+    }, [X(k("span", {
       style: "width:40px;margin-right:10px;"
-    }, [d.value]), [[K, C]]), W(k("input", {
+    }, [f.value]), [[Z, ie]]), X(k("input", {
+      title: "color-picker-plus-input",
       type: "text",
       id: "farris-color-picker-plus-input",
-      "onUpdate:modelValue": (m) => V.value = m,
+      "onUpdate:modelValue": (m) => I.value = m,
       style: "float:none"
-    }, null), [[Xe, V.value]]), W(k("div", {
+    }, null), [[Ye, I.value]]), X(k("div", {
       class: "type-icon-btn-wrapper",
       style: "cursor:pointer"
     }, [k("span", {
@@ -2016,50 +2018,45 @@ const Kt = /* @__PURE__ */ ee({
     }, null), k("span", {
       class: "f-icon f-icon-arrow-60-down type-icon-btn",
       onClick: () => w("down")
-    }, null)]), [[K, C]]), k("div", {
+    }, null)]), [[Z, ie]]), k("div", {
       class: "input-btn"
     }, [k("button", {
       id: "farris-color-picker-plus-sure",
       class: "btn btn-secondary",
       onClick: ye
-    }, [Re("确定")])])]), W(k(tt, {
+    }, [Be("确定")])])]), X(k(tt, {
       color: t.value,
       "onUpdate:color": (m) => t.value = m,
       colorPresets: v.presets,
       hue: v.hue,
       "onUpdate:hue": (m) => v.hue = m,
-      randomId: f
-    }, null), [[K, G]])]), k("div", {
+      randomId: d
+    }, null), [[Z, he]])]), k("div", {
       class: "color-picker-wrapper"
     }, [k("input", {
       type: "text",
       class: "color-picker-input form-control",
-      value: D.value,
+      value: W.value,
       readonly: i.value,
       onClick: (m) => m.stopPropagation()
     }, null), k("div", {
       class: "color-picker-trigger",
-      onClick: re
+      onClick: te
     }, [k("div", {
       class: "color-picker-trigger-inner"
     }, [k("div", {
-      style: J.value
+      style: z.value
     }, null)])])])]);
   }
-}), Tt = (r) => {
-  const e = r;
-  return e.install = function(t) {
-    t.component(e.name, r);
-  }, r;
-};
-le.register = (r, e, t) => {
-  r["color-picker"] = le, e["color-picker"] = ze;
+});
+ue.register = (r, e, t) => {
+  r["color-picker"] = ue, e["color-picker"] = ze;
 };
-le.registerDesigner = (r, e, t) => {
-  r["color-picker"] = Kt, e["color-picker"] = ze;
+ue.registerDesigner = (r, e, t) => {
+  r["color-picker"] = Tt, e["color-picker"] = ze;
 };
-const nn = Tt(le);
+const rn = at(ue);
 export {
-  le as FColorPicker,
-  nn as default
+  ue as FColorPicker,
+  rn as default
 };