vue-amazing-ui 2.2.11 → 2.2.13

package/es/colorpicker/ColorPicker.vue2.js

@@ -1,26 +1,28 @@
-import { defineComponent as $l, ref as A, computed as v, watch as xe, watchEffect as Sl, createBlock as K, openBlock as b, unref as T, mergeProps as Al, withCtx as se, createElementVNode as s, normalizeStyle as h, normalizeClass as Ve, createElementBlock as R, createCommentVNode as H, renderSlot as Ie, createTextVNode as ne, toDisplayString as me, Fragment as ge, withModifiers as Ml, renderList as Le } from "vue";
-import { toRgbaString as z, toHexString as Q, rgba as U, rgb2hsv as be, hsla as G, hsl2hsv as Ne, hsva as P, hsl2rgb as ke, hsv2rgb as N, rgb2hsl as ye, hsv2hsl as ue, toHexaString as B, toHslaString as _, toRgbString as we, toHslString as $e, toHsvaString as X, toHsvString as Se } from "seemly";
-import Cl from "../tooltip/index.js";
-import Be from "../input/index.js";
-import _e from "../button/index.js";
-import { useSlotsExist as Rl } from "../utils/index.js";
-const Hl = { class: "color-picker-preview" }, El = { class: "color-picker-preview-sliders" }, zl = {
+import { defineComponent as Sl, ref as A, computed as d, watch as Ie, watchEffect as Al, createBlock as J, openBlock as b, unref as T, normalizeStyle as p, withCtx as se, createElementVNode as n, mergeProps as me, createElementBlock as R, createCommentVNode as H, renderSlot as Le, createTextVNode as ne, toDisplayString as ge, Fragment as be, normalizeClass as Ml, withModifiers as Cl, renderList as Ne } from "vue";
+import { toRgbaString as z, toHexString as K, rgba as U, rgb2hsv as ke, hsla as G, hsl2hsv as Be, hsva as F, hsl2rgb as ye, hsv2rgb as N, rgb2hsl as we, hsv2hsl as ue, toHexaString as B, toHslaString as _, toRgbString as $e, toHslString as Se, toHsvaString as X, toHsvString as Ae } from "seemly";
+import Rl from "../tooltip/index.js";
+import _e from "../input/index.js";
+import Pe from "../button/index.js";
+import { useSlotsExist as Hl } from "../utils/index.js";
+const El = { class: "color-picker-preview" }, zl = { class: "color-picker-preview-sliders" }, Ul = {
   key: 0,
   class: "color-picker-preview-circle"
-}, Ul = ["value"], xl = { class: "color-picker-input" }, Vl = { class: "color-picker-input-group" }, Il = {
+}, xl = ["value"], Vl = { class: "color-picker-input" }, Il = { class: "color-picker-input-group" }, Ll = {
   key: 0,
   class: "color-picker-swatches"
-}, Ll = ["onClick"], Nl = {
+}, Nl = ["onClick"], Bl = {
   key: 0,
   class: "color-picker-actions"
-}, Bl = {
+}, _l = {
   key: 1,
   class: "color-picker-footer"
-}, _l = { class: "color-picker-wrap" }, Dl = { class: "color-picker-fill" }, k = "12px", De = 12, f = "6px", Fl = 6, Yl = /* @__PURE__ */ $l({
+}, Pl = { class: "color-picker-wrap" }, Dl = { class: "color-picker-fill" }, k = "12px", De = 12, f = "6px", Fl = 6, Yl = /* @__PURE__ */ Sl({
   __name: "ColorPicker",
   props: {
+    width: { default: "100%" },
     label: { type: Function, default: void 0 },
     tooltipStyle: { default: () => ({}) },
+    inputProps: { default: () => ({}) },
     showAlpha: { type: Boolean, default: !0 },
     showPreview: { type: Boolean, default: !1 },
     size: { default: "middle" },
@@ -32,233 +34,233 @@ const Hl = { class: "color-picker-preview" }, El = { class: "color-picker-previe
     footer: { default: void 0 }
   },
   emits: ["update:value", "complete", "confirm", "clear"],
-  setup(Fe, { emit: Pe }) {
-    const u = Fe, ie = A(), W = A(null), ee = A(null), le = A(null), E = A(0), ce = A(1), te = A([0, 0]), Y = A(), i = A(u.value), m = A(oe(i.value) || u.modes[0] || "rgb"), re = A(), x = A([]), D = Pe, Xe = Rl("footer"), Oe = v(() => Xe.value || u.footer), Ze = v(() => ({
+  setup(Fe, { emit: Xe }) {
+    const s = Fe, ie = A(), Q = A(null), ee = A(null), le = A(null), E = A(0), ce = A(1), te = A([0, 0]), W = A(), i = A(s.value), m = A(oe(i.value) || s.modes[0] || "rgb"), re = A(), x = A([]), P = Xe, Oe = Hl("footer"), Ze = d(() => Oe.value || s.footer), Te = d(() => ({
       width: k,
       height: k,
       borderRadius: f,
       left: `calc(${te.value[0]}% - ${f})`,
       bottom: `calc(${te.value[1]}% - ${f})`
-    })), Te = v(() => p.value ? `rgb(${p.value[0]}, ${p.value[1]}, ${p.value[2]})` : ""), Ge = v(() => ({
-      backgroundColor: Te.value,
+    })), Ge = d(() => h.value ? `rgb(${h.value[0]}, ${h.value[1]}, ${h.value[2]})` : ""), We = d(() => ({
+      backgroundColor: Ge.value,
       borderRadius: f,
       width: k,
       height: k
-    })), Ae = v(() => ({
+    })), Me = d(() => ({
       height: k,
       borderRadius: f
-    })), Ye = v(() => ({
+    })), Ye = d(() => ({
       position: "relative",
       boxShadow: "inset 0 0 2px 0 rgba(0, 0, 0, 0.24)",
       backgroundImage: "linear-gradient(90deg, red, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, red)",
       height: k,
       borderRadius: f
-    })), je = v(() => ({
+    })), je = d(() => ({
       left: `calc((${E.value}%) / 359 * 100 - ${f})`,
       borderRadius: f,
       width: k,
       height: k
-    })), qe = v(() => ({
+    })), qe = d(() => ({
       backgroundColor: `hsl(${E.value}, 100%, 50%)`,
       borderRadius: f,
       width: k,
       height: k
-    })), Je = v(() => p.value ? `linear-gradient(to right, rgba(${p.value[0]}, ${p.value[1]}, ${p.value[2]}, 0) 0%, rgba(${p.value[0]}, ${p.value[1]}, ${p.value[2]}, 1) 100%)` : ""), Ke = v(() => ({
+    })), Je = d(() => h.value ? `linear-gradient(to right, rgba(${h.value[0]}, ${h.value[1]}, ${h.value[2]}, 0) 0%, rgba(${h.value[0]}, ${h.value[1]}, ${h.value[2]}, 1) 100%)` : ""), Ke = d(() => ({
       left: `calc(${ce.value * 100}% - ${f})`,
       borderRadius: f,
       width: k,
       height: k
-    })), Qe = v(() => ({
-      backgroundColor: p.value ? z(p.value) : void 0,
+    })), Qe = d(() => ({
+      backgroundColor: h.value ? z(h.value) : void 0,
       borderRadius: f,
       width: k,
       height: k
-    })), Me = v(() => p.value && Q(p.value)), de = v(() => `${{
+    })), Ce = d(() => h.value && K(h.value)), Re = d(() => typeof s.width == "number" ? `${s.width}px` : s.width), de = d(() => `${{
       small: 24,
       middle: 32,
       large: 40
-    }[u.size]}px`), We = v(() => {
+    }[s.size]}px`), el = d(() => {
       const e = {
         small: 6,
         middle: 8,
         large: 10
       };
-      return `calc((${de.value} - ${e[u.size]}px) / 3)`;
-    }), ve = v(() => oe(i.value)), j = v(() => m.value.toUpperCase() + (u.showAlpha ? "A" : "")), el = v(() => j.value.split(""));
+      return `calc((${de.value} - ${e[s.size]}px) / 3)`;
+    }), ve = d(() => oe(i.value)), Y = d(() => m.value.toUpperCase() + (s.showAlpha ? "A" : "")), ll = d(() => Y.value.split(""));
     let y, w, O, Z, V, I, L, $;
-    const M = v(() => {
+    const M = d(() => {
       if (!i.value) return null;
       switch (ve.value) {
         case "hsv":
-          return P(i.value);
+          return F(i.value);
         case "hsl":
-          return [y, w, O, $] = G(i.value), [...Ne(y, w, O), $];
+          return [y, w, O, $] = G(i.value), [...Be(y, w, O), $];
         case "rgb":
         case "hex":
-          return [V, I, L, $] = U(i.value), [...be(V, I, L), $];
+          return [V, I, L, $] = U(i.value), [...ke(V, I, L), $];
       }
-    }), p = v(() => {
+    }), h = d(() => {
       if (!i.value) return null;
       switch (ve.value) {
         case "rgb":
         case "hex":
           return U(i.value);
         case "hsv":
-          return [y, w, Z, $] = P(i.value), [...N(y, w, Z), $];
+          return [y, w, Z, $] = F(i.value), [...N(y, w, Z), $];
         case "hsl":
-          return [y, w, O, $] = G(i.value), [...ke(y, w, O), $];
+          return [y, w, O, $] = G(i.value), [...ye(y, w, O), $];
       }
-    }), F = v(() => {
+    }), D = d(() => {
       if (!i.value) return null;
       switch (ve.value) {
         case "hsl":
           return G(i.value);
         case "hsv":
-          return [y, w, Z, $] = P(i.value), [...ue(y, w, Z), $];
+          return [y, w, Z, $] = F(i.value), [...ue(y, w, Z), $];
         case "rgb":
         case "hex":
-          return [V, I, L, $] = U(i.value), [...ye(V, I, L), $];
+          return [V, I, L, $] = U(i.value), [...we(V, I, L), $];
       }
-    }), C = v(() => {
+    }), C = d(() => {
       switch (m.value) {
         case "rgb":
         case "hex":
-          return p.value;
+          return h.value;
         case "hsv":
           return M.value;
         case "hsl":
-          return F.value;
+          return D.value;
       }
-    }), Ce = v(
-      () => u.swatches.map((e) => {
+    }), He = d(
+      () => s.swatches.map((e) => {
         const l = oe(e);
         return {
           value: e,
           mode: l,
-          legalValue: ml(e, l)
+          legalValue: gl(e, l)
         };
       })
     );
-    xe(
-      () => u.value,
+    Ie(
+      () => s.value,
       (e) => {
         i.value = e;
       }
-    ), xe(
+    ), Ie(
       () => [m.value, C.value],
       () => {
-        m.value === "hex" ? re.value = C.value === null ? void 0 : (u.showAlpha ? B : Q)(C.value) : C.value === null ? x.value = new Array(u.showAlpha ? 4 : 3).fill(void 0) : x.value = C.value.map((e, l) => u.showAlpha && l === 3 ? `${Math.floor(e * 100)}%` : `${Math.floor(e)}`);
+        m.value === "hex" ? re.value = C.value === null ? void 0 : (s.showAlpha ? B : K)(C.value) : C.value === null ? x.value = new Array(s.showAlpha ? 4 : 3).fill(void 0) : x.value = C.value.map((e, l) => s.showAlpha && l === 3 ? `${Math.floor(e * 100)}%` : `${Math.floor(e)}`);
       },
       {
         immediate: !0,
         deep: !0
       }
-    ), Sl(() => {
-      (Y.value === void 0 || Y.value !== i.value) && M.value && (E.value = M.value[0], ce.value = M.value[3], te.value = [M.value[1], M.value[2]]), Y.value = void 0;
+    ), Al(() => {
+      (W.value === void 0 || W.value !== i.value) && M.value && (E.value = M.value[0], ce.value = M.value[3], te.value = [M.value[1], M.value[2]]), W.value = void 0;
     });
     function g(e, l) {
-      l === "cursor" ? Y.value = e : Y.value = void 0, i.value = e, D("update:value", e), l === "input" && D("complete", e);
+      l === "cursor" ? W.value = e : W.value = void 0, i.value = e, P("update:value", e), l === "input" && P("complete", e);
     }
-    function ll(e, l) {
+    function tl(e, l) {
       const t = M.value ? M.value[3] : 1;
       switch (te.value = [e, l], m.value) {
         case "hsv":
-          g((u.showAlpha ? X : Se)([E.value, e, l, t]), "cursor");
+          g((s.showAlpha ? X : Ae)([E.value, e, l, t]), "cursor");
           break;
         case "hsl":
           g(
-            (u.showAlpha ? _ : $e)([...ue(E.value, e, l), t]),
+            (s.showAlpha ? _ : Se)([...ue(E.value, e, l), t]),
             "cursor"
           );
           break;
         case "rgb":
           g(
-            (u.showAlpha ? z : we)([...N(E.value, e, l), t]),
+            (s.showAlpha ? z : $e)([...N(E.value, e, l), t]),
             "cursor"
           );
           break;
         case "hex":
           g(
-            (u.showAlpha ? B : Q)([...N(E.value, e, l), t]),
+            (s.showAlpha ? B : K)([...N(E.value, e, l), t]),
             "cursor"
           );
           break;
       }
     }
-    function tl(e) {
-      W.value && (document.addEventListener("mousemove", he), document.addEventListener("mouseup", Re), he(e));
+    function rl(e) {
+      Q.value && (document.addEventListener("mousemove", he), document.addEventListener("mouseup", Ee), he(e));
     }
     function he(e) {
-      if (!W.value) return;
-      const { width: l, height: t, left: o, bottom: S } = W.value.getBoundingClientRect(), r = (S - e.clientY) / t, a = (e.clientX - o) / l, n = 100 * (a > 1 ? 1 : a < 0 ? 0 : a), c = 100 * (r > 1 ? 1 : r < 0 ? 0 : r);
-      ll(n, c);
+      if (!Q.value) return;
+      const { width: l, height: t, left: o, bottom: S } = Q.value.getBoundingClientRect(), r = (S - e.clientY) / t, a = (e.clientX - o) / l, u = 100 * (a > 1 ? 1 : a < 0 ? 0 : a), c = 100 * (r > 1 ? 1 : r < 0 ? 0 : r);
+      tl(u, c);
     }
-    function Re() {
-      document.removeEventListener("mousemove", he), document.removeEventListener("mouseup", Re), D("complete", i.value);
+    function Ee() {
+      document.removeEventListener("mousemove", he), document.removeEventListener("mouseup", Ee), P("complete", i.value);
     }
-    function rl(e) {
+    function ol(e) {
       if (E.value = e, !M.value)
         return;
       const [, l, t, o] = M.value;
       switch (m.value) {
         case "hsv":
-          g((u.showAlpha ? X : Se)([e, l, t, o]), "cursor");
+          g((s.showAlpha ? X : Ae)([e, l, t, o]), "cursor");
           break;
         case "rgb":
-          g((u.showAlpha ? z : we)([...N(e, l, t), o]), "cursor");
+          g((s.showAlpha ? z : $e)([...N(e, l, t), o]), "cursor");
           break;
         case "hex":
-          g((u.showAlpha ? B : Q)([...N(e, l, t), o]), "cursor");
+          g((s.showAlpha ? B : K)([...N(e, l, t), o]), "cursor");
           break;
         case "hsl":
-          g((u.showAlpha ? _ : $e)([...ue(e, l, t), o]), "cursor");
+          g((s.showAlpha ? _ : Se)([...ue(e, l, t), o]), "cursor");
           break;
       }
     }
-    function ol(e) {
-      ee.value && (document.addEventListener("mousemove", pe), document.addEventListener("mouseup", He), pe(e));
-    }
     function al(e) {
+      ee.value && (document.addEventListener("mousemove", pe), document.addEventListener("mouseup", ze), pe(e));
+    }
+    function sl(e) {
       return e = Math.round(e), e >= 360 ? 359 : e < 0 ? 0 : e;
     }
     function pe(e) {
       if (!ee.value) return;
-      const { width: l, left: t } = ee.value.getBoundingClientRect(), o = al((e.clientX - t - Fl) / (l - De) * 360);
-      rl(o);
+      const { width: l, left: t } = ee.value.getBoundingClientRect(), o = sl((e.clientX - t - Fl) / (l - De) * 360);
+      ol(o);
     }
-    function He() {
-      document.removeEventListener("mousemove", pe), document.removeEventListener("mouseup", He), D("complete", i.value);
+    function ze() {
+      document.removeEventListener("mousemove", pe), document.removeEventListener("mouseup", ze), P("complete", i.value);
     }
-    function sl(e) {
+    function nl(e) {
       switch (m.value) {
         case "hsv":
           [y, w, Z] = M.value, g(X([y, w, Z, e]), "cursor");
           break;
         case "rgb":
-          [V, I, L] = p.value, g(z([V, I, L, e]), "cursor");
+          [V, I, L] = h.value, g(z([V, I, L, e]), "cursor");
           break;
         case "hex":
-          [V, I, L] = p.value, g(B([V, I, L, e]), "cursor");
+          [V, I, L] = h.value, g(B([V, I, L, e]), "cursor");
           break;
         case "hsl":
-          [y, w, O] = F.value, g(_([y, w, O, e]), "cursor");
+          [y, w, O] = D.value, g(_([y, w, O, e]), "cursor");
           break;
       }
       ce.value = e;
     }
-    function nl(e) {
-      !le.value || !p.value || (document.addEventListener("mousemove", fe), document.addEventListener("mouseup", Ee), fe(e));
-    }
     function ul(e) {
+      !le.value || !h.value || (document.addEventListener("mousemove", fe), document.addEventListener("mouseup", Ue), fe(e));
+    }
+    function il(e) {
       return e = Math.round(e * 100) / 100, e > 1 ? 1 : e < 0 ? 0 : e;
     }
     function fe(e) {
       if (!le.value) return;
-      const { width: l, left: t } = le.value.getBoundingClientRect(), o = ul((e.clientX - t) / (l - De));
-      sl(o);
+      const { width: l, left: t } = le.value.getBoundingClientRect(), o = il((e.clientX - t) / (l - De));
+      nl(o);
     }
-    function Ee() {
-      document.removeEventListener("mousemove", fe), document.removeEventListener("mouseup", Ee), D("complete", i.value);
+    function Ue() {
+      document.removeEventListener("mousemove", fe), document.removeEventListener("mouseup", Ue), P("complete", i.value);
     }
     function oe(e) {
       if (e !== void 0) {
@@ -268,108 +270,108 @@ const Hl = { class: "color-picker-preview" }, El = { class: "color-picker-previe
         if (e.includes("hsv")) return "hsv";
       }
     }
-    function il() {
-      const e = u.modes.findIndex((l) => l === m.value);
-      e !== -1 ? m.value = u.modes[(e + 1) % u.modes.length] : m.value = "rgb";
+    function cl() {
+      const e = s.modes.findIndex((l) => l === m.value);
+      e !== -1 ? m.value = s.modes[(e + 1) % s.modes.length] : m.value = "rgb";
     }
-    function cl(e) {
-      const l = e.target, t = Ue(l.value.toUpperCase(), m.value, "hex");
+    function dl(e) {
+      const l = e.target, t = Ve(l.value.toUpperCase(), m.value, "hex");
       g(t, "input");
     }
-    function dl(e) {
+    function vl(e) {
       const l = e.trim();
       return /^#[0-9a-fA-F]+$/.test(l) ? [4, 5, 7, 9].includes(l.length) : !1;
     }
-    function vl(e) {
+    function hl(e) {
       return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 360)) : !1;
     }
-    function hl(e) {
+    function pl(e) {
       return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 100)) : !1;
     }
-    function pl(e) {
+    function fl(e) {
       return /^\d{1,3}\.?\d*%$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e) / 100, 100)) : !1;
     }
-    function fl(e) {
+    function ml(e) {
       return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 255)) : !1;
     }
-    function q(e, l) {
+    function j(e, l) {
       return e === void 0 ? "" : l === "HEX" || l === "HEXA" ? e : l === "A" ? `${Math.floor(Number(e) * 100)}%` : String(Math.floor(Number(e)));
     }
     function ae(e) {
       g(e, "input");
     }
-    function J(e, l) {
+    function q(e, l) {
       if (m.value === "hex") {
-        ae((u.showAlpha ? B : Q)(l));
+        ae((s.showAlpha ? B : K)(l));
         return;
       }
       let t;
       switch (C.value === null ? t = [0, 0, 0, 0] : t = [...C.value], m.value) {
         case "hsv":
-          t[e] = l, ae((u.showAlpha ? X : Se)(t));
+          t[e] = l, ae((s.showAlpha ? X : Ae)(t));
           break;
         case "rgb":
-          t[e] = l, ae((u.showAlpha ? z : we)(t));
+          t[e] = l, ae((s.showAlpha ? z : $e)(t));
           break;
         case "hsl":
-          t[e] = l, ae((u.showAlpha ? _ : $e)(t));
+          t[e] = l, ae((s.showAlpha ? _ : Se)(t));
           break;
       }
     }
-    function ze(e, l) {
-      var c, d;
+    function xe(e, l) {
+      var c, v;
       const t = e.target;
       let o, S, r;
       const a = t.value;
-      l === void 0 ? r = C.value === null ? void 0 : C.value : r = ((c = C.value) == null ? void 0 : c[l]) === void 0 || (d = C.value) == null ? void 0 : d[l].toString();
-      const n = l === void 0 ? j.value : j.value[l];
-      switch (n) {
+      l === void 0 ? r = C.value === null ? void 0 : C.value : r = ((c = C.value) == null ? void 0 : c[l]) === void 0 || (v = C.value) == null ? void 0 : v[l].toString();
+      const u = l === void 0 ? Y.value : Y.value[l];
+      switch (u) {
         case "HEX":
         case "HEXA":
-          S = dl(a), S && J(0, a), re.value = q(a, n);
+          S = vl(a), S && q(0, a), re.value = j(a, u);
           break;
         case "H":
-          o = vl(a), o === !1 ? x.value[l] = q(r, n) : J(l, o);
+          o = hl(a), o === !1 ? x.value[l] = j(r, u) : q(l, o);
           break;
         case "S":
         case "L":
         case "V":
-          o = hl(a), o === !1 ? x.value[l] = q(r, n) : J(l, o);
+          o = pl(a), o === !1 ? x.value[l] = j(r, u) : q(l, o);
           break;
         case "A":
-          o = pl(a), o === !1 ? x.value[l] = q(r, n) : J(l, o);
+          o = fl(a), o === !1 ? x.value[l] = j(r, u) : q(l, o);
           break;
         case "R":
         case "G":
         case "B":
-          o = fl(a), o === !1 ? x.value[l] = q(r, n) : J(l, o);
+          o = ml(a), o === !1 ? x.value[l] = j(r, u) : q(l, o);
           break;
       }
     }
-    function ml(e, l) {
+    function gl(e, l) {
       if (l === "hsv") {
-        const [t, o, S, r] = P(e);
+        const [t, o, S, r] = F(e);
         return z([...N(t, o, S), r]);
       }
       return e;
     }
-    function gl(e) {
+    function bl(e) {
       const l = document.createElement("canvas").getContext("2d");
       return l ? (l.fillStyle = e, l.fillStyle) : "#000000";
     }
-    function Ue(e, l, t) {
+    function Ve(e, l, t) {
       return t = t || oe(e), t ? t === l ? e : {
         rgb: {
           hex(r) {
             return B(U(r));
           },
           hsl(r) {
-            const [a, n, c, d] = U(r);
-            return _([...ye(a, n, c), d]);
+            const [a, u, c, v] = U(r);
+            return _([...we(a, u, c), v]);
           },
           hsv(r) {
-            const [a, n, c, d] = U(r);
-            return X([...be(a, n, c), d]);
+            const [a, u, c, v] = U(r);
+            return X([...ke(a, u, c), v]);
           }
         },
         hex: {
@@ -377,61 +379,61 @@ const Hl = { class: "color-picker-preview" }, El = { class: "color-picker-previe
             return z(U(r));
           },
           hsl(r) {
-            const [a, n, c, d] = U(r);
-            return _([...ye(a, n, c), d]);
+            const [a, u, c, v] = U(r);
+            return _([...we(a, u, c), v]);
           },
           hsv(r) {
-            const [a, n, c, d] = U(r);
-            return X([...be(a, n, c), d]);
+            const [a, u, c, v] = U(r);
+            return X([...ke(a, u, c), v]);
           }
         },
         hsl: {
           hex(r) {
-            const [a, n, c, d] = G(r);
-            return B([...ke(a, n, c), d]);
+            const [a, u, c, v] = G(r);
+            return B([...ye(a, u, c), v]);
           },
           rgb(r) {
-            const [a, n, c, d] = G(r);
-            return z([...ke(a, n, c), d]);
+            const [a, u, c, v] = G(r);
+            return z([...ye(a, u, c), v]);
           },
           hsv(r) {
-            const [a, n, c, d] = G(r);
-            return X([...Ne(a, n, c), d]);
+            const [a, u, c, v] = G(r);
+            return X([...Be(a, u, c), v]);
           }
         },
         hsv: {
           hex(r) {
-            const [a, n, c, d] = P(r);
-            return B([...N(a, n, c), d]);
+            const [a, u, c, v] = F(r);
+            return B([...N(a, u, c), v]);
           },
           rgb(r) {
-            const [a, n, c, d] = P(r);
-            return z([...N(a, n, c), d]);
+            const [a, u, c, v] = F(r);
+            return z([...N(a, u, c), v]);
           },
           hsl(r) {
-            const [a, n, c, d] = P(r);
-            return _([...ue(a, n, c), d]);
+            const [a, u, c, v] = F(r);
+            return _([...ue(a, u, c), v]);
           }
         }
       }[t][l](e) : void 0;
     }
-    function bl(e) {
-      let { value: l, mode: t } = e;
-      return t || (t = "hex", /^[a-zA-Z]+$/.test(l) ? l = gl(l) : (console.warn("color-picker", `color ${l} in swatches is invalid.`), l = "#000000")), t === m.value ? l : Ue(l, m.value, t);
-    }
     function kl(e) {
-      g(bl(e), "input");
+      let { value: l, mode: t } = e;
+      return t || (t = "hex", /^[a-zA-Z]+$/.test(l) ? l = bl(l) : (console.warn("color-picker", `color ${l} in swatches is invalid.`), l = "#000000")), t === m.value ? l : Ve(l, m.value, t);
     }
-    function yl() {
-      D("confirm", i.value), ie.value.hide();
+    function yl(e) {
+      g(kl(e), "input");
     }
     function wl() {
-      g(void 0, "input"), D("clear"), ie.value.hide();
+      P("confirm", i.value), ie.value.hide();
+    }
+    function $l() {
+      g(void 0, "input"), P("clear"), ie.value.hide();
     }
-    return (e, l) => (b(), K(T(Cl), Al({
+    return (e, l) => (b(), J(T(Rl), {
       ref_key: "tooltipRef",
       ref: ie,
-      style: `width: 100%; height: ${de.value};`,
+      style: p(`width: ${Re.value}; height: ${de.value};`),
       "max-width": "none",
       arrow: !1,
       placement: "bottom",
@@ -446,58 +448,58 @@ const Hl = { class: "color-picker-preview" }, El = { class: "color-picker-previe
       "content-style": { width: "100%", height: "100%" },
       trigger: "click",
       "transition-duration": 200
-    }, e.$attrs), {
+    }, {
       tooltip: se(() => [
-        e.disabled ? H("", !0) : (b(), R(ge, { key: 0 }, [
-          s("div", {
-            class: Ve(["color-picker-panel", { "panel-with-actions": e.actions.length }])
+        e.disabled ? H("", !0) : (b(), R(be, { key: 0 }, [
+          n("div", {
+            class: Ml(["color-picker-panel", { "panel-with-actions": e.actions.length }])
           }, [
-            s("div", {
+            n("div", {
               ref_key: "palleteRef",
-              ref: W,
+              ref: Q,
               class: "color-picker-pallete",
-              onMousedown: tl
+              onMousedown: rl
             }, [
-              s("div", {
+              n("div", {
                 class: "color-picker-pallete-layer",
-                style: h({ backgroundImage: `linear-gradient(90deg, white, hsl(${E.value}, 100%, 50%))` })
+                style: p({ backgroundImage: `linear-gradient(90deg, white, hsl(${E.value}, 100%, 50%))` })
               }, null, 4),
-              l[1] || (l[1] = s("div", {
+              l[1] || (l[1] = n("div", {
                 class: "color-picker-pallete-layer pallete-layer-shadowed",
                 style: { "background-image": "linear-gradient(180deg, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%))" }
               }, null, -1)),
-              s("div", {
+              n("div", {
                 class: "color-picker-handle",
-                style: h(Ze.value)
+                style: p(Te.value)
               }, [
-                s("div", {
+                n("div", {
                   class: "color-picker-handle-fill",
-                  style: h(Ge.value)
+                  style: p(We.value)
                 }, null, 4)
               ], 4)
             ], 544),
-            s("div", Hl, [
-              s("div", El, [
-                s("div", {
+            n("div", El, [
+              n("div", zl, [
+                n("div", {
                   class: "color-picker-slider",
-                  style: h(Ae.value)
+                  style: p(Me.value)
                 }, [
-                  s("div", {
+                  n("div", {
                     ref_key: "hueRailRef",
                     ref: ee,
-                    style: h(Ye.value),
-                    onMousedown: ol
+                    style: p(Ye.value),
+                    onMousedown: al
                   }, [
-                    s("div", {
-                      style: h(`position: absolute; top: 0px; bottom: 0; left: ${f}; right: ${f}`)
+                    n("div", {
+                      style: p(`position: absolute; top: 0px; bottom: 0; left: ${f}; right: ${f}`)
                     }, [
-                      s("div", {
+                      n("div", {
                         class: "color-picker-handle",
-                        style: h(je.value)
+                        style: p(je.value)
                       }, [
-                        s("div", {
+                        n("div", {
                           class: "color-picker-handle-fill",
-                          style: h(qe.value)
+                          style: p(qe.value)
                         }, null, 4)
                       ], 4)
                     ], 4)
@@ -508,11 +510,11 @@ const Hl = { class: "color-picker-preview" }, El = { class: "color-picker-previe
                   ref_key: "alphaRailRef",
                   ref: le,
                   class: "color-picker-slider",
-                  style: h(Ae.value),
-                  onMousedown: nl
+                  style: p(Me.value),
+                  onMousedown: ul
                 }, [
-                  s("div", {
-                    style: h(`
+                  n("div", {
+                    style: p(`
                     border-radius: ${f};
                     position: absolute;
                     top: 0px;
@@ -522,98 +524,99 @@ const Hl = { class: "color-picker-preview" }, El = { class: "color-picker-previe
                     overflow: hidden;
                   `)
                   }, [
-                    l[2] || (l[2] = s("div", { class: "color-picker-checkboard" }, null, -1)),
-                    s("div", {
+                    l[2] || (l[2] = n("div", { class: "color-picker-checkboard" }, null, -1)),
+                    n("div", {
                       class: "color-picker-slider-image",
-                      style: h(`background-image: ${Je.value}`)
+                      style: p(`background-image: ${Je.value}`)
                     }, null, 4)
                   ], 4),
-                  p.value ? (b(), R("div", {
+                  h.value ? (b(), R("div", {
                     key: 0,
-                    style: h(`position: absolute; top: 0px; bottom: 0; left: ${f}; right: ${f}`)
+                    style: p(`position: absolute; top: 0px; bottom: 0; left: ${f}; right: ${f}`)
                   }, [
-                    s("div", {
+                    n("div", {
                       class: "color-picker-handle",
-                      style: h(Ke.value)
+                      style: p(Ke.value)
                     }, [
-                      s("div", {
+                      n("div", {
                         class: "color-picker-handle-fill",
-                        style: h(Qe.value)
+                        style: p(Qe.value)
                       }, null, 4)
                     ], 4)
                   ], 4)) : H("", !0)
                 ], 36)) : H("", !0)
               ]),
-              e.showPreview ? (b(), R("div", zl, [
-                s("span", {
+              e.showPreview ? (b(), R("div", Ul, [
+                n("span", {
                   class: "color-picker-circle-fill",
-                  style: h(`background: ${Me.value || "#000000"};`)
+                  style: p(`background: ${Ce.value || "#000000"};`)
                 }, null, 4),
-                s("input", {
+                n("input", {
                   class: "color-picker-circle-input",
                   type: "color",
-                  value: Me.value,
-                  onChange: Ml(cl, ["stop"])
-                }, null, 40, Ul)
+                  value: Ce.value,
+                  onChange: Cl(dl, ["stop"])
+                }, null, 40, xl)
               ])) : H("", !0)
             ]),
-            s("div", xl, [
-              s("div", {
+            n("div", Vl, [
+              n("div", {
                 class: "color-picker-input-mode",
-                style: h({ cursor: e.modes.length === 1 ? "" : "pointer" }),
-                onClick: il
-              }, me(j.value), 5),
-              s("div", Vl, [
-                m.value === "hex" ? (b(), K(T(Be), {
+                style: p({ cursor: e.modes.length === 1 ? "" : "pointer" }),
+                onClick: cl
+              }, ge(Y.value), 5),
+              n("div", Il, [
+                m.value === "hex" ? (b(), J(T(_e), me({
                   key: 0,
                   size: "small",
-                  placeholder: j.value,
+                  placeholder: Y.value,
                   value: re.value,
                   "onUpdate:value": l[0] || (l[0] = (t) => re.value = t),
                   valueModifiers: { lazy: !0 },
-                  onChange: ze
-                }, null, 8, ["placeholder", "value"])) : (b(!0), R(ge, { key: 1 }, Le(el.value, (t, o) => (b(), K(T(Be), {
+                  onChange: xe
+                }, e.inputProps), null, 16, ["placeholder", "value"])) : (b(!0), R(be, { key: 1 }, Ne(ll.value, (t, o) => (b(), J(T(_e), me({
                   size: "small",
-                  style: h(`${t === "A" ? "flex-grow: 1.25" : ""}`),
+                  style: `${t === "A" ? "flex-grow: 1.25" : ""}`,
+                  key: o,
                   placeholder: t,
                   value: x.value[o],
                   "onUpdate:value": (S) => x.value[o] = S,
                   valueModifiers: { lazy: !0 },
-                  onChange: (S) => ze(S, o),
-                  key: o
-                }, null, 8, ["style", "placeholder", "value", "onUpdate:value", "onChange"]))), 128))
+                  onChange: (S) => xe(S, o),
+                  ref_for: !0
+                }, e.inputProps), null, 16, ["style", "placeholder", "value", "onUpdate:value", "onChange"]))), 128))
               ])
             ]),
-            Ce.value.length ? (b(), R("div", Il, [
-              (b(!0), R(ge, null, Le(Ce.value, (t, o) => (b(), R("div", {
+            He.value.length ? (b(), R("div", Ll, [
+              (b(!0), R(be, null, Ne(He.value, (t, o) => (b(), R("div", {
                 tabindex: "0",
                 class: "color-picker-swatch",
                 key: o,
-                onClick: (S) => kl(t)
+                onClick: (S) => yl(t)
               }, [
-                s("div", {
+                n("div", {
                   class: "color-picker-swatch-fill",
-                  style: h(`background: ${t.legalValue};`)
+                  style: p(`background: ${t.legalValue};`)
                 }, null, 4)
-              ], 8, Ll))), 128))
+              ], 8, Nl))), 128))
             ])) : H("", !0)
           ], 2),
-          e.actions.length ? (b(), R("div", Nl, [
-            e.actions.includes("confirm") ? (b(), K(T(_e), {
+          e.actions.length ? (b(), R("div", Bl, [
+            e.actions.includes("confirm") ? (b(), J(T(Pe), {
               key: 0,
               type: "primary",
               size: "small",
-              onClick: yl
+              onClick: wl
             }, {
               default: se(() => l[3] || (l[3] = [
                 ne("确认")
               ])),
               _: 1
             })) : H("", !0),
-            e.actions.includes("clear") ? (b(), K(T(_e), {
+            e.actions.includes("clear") ? (b(), J(T(Pe), {
               key: 1,
               size: "small",
-              onClick: wl
+              onClick: $l
             }, {
               default: se(() => l[4] || (l[4] = [
                 ne("清除")
@@ -621,40 +624,47 @@ const Hl = { class: "color-picker-preview" }, El = { class: "color-picker-previe
               _: 1
             })) : H("", !0)
           ])) : H("", !0),
-          Oe.value ? (b(), R("div", Bl, [
-            Ie(e.$slots, "footer", {}, () => [
-              ne(me(e.footer), 1)
+          Ze.value ? (b(), R("div", _l, [
+            Le(e.$slots, "footer", {}, () => [
+              ne(ge(e.footer), 1)
             ], !0)
           ])) : H("", !0)
         ], 64))
       ]),
       default: se(() => [
-        s("div", {
+        n("div", me({
           tabindex: "1",
-          class: Ve(["color-picker-display", [`color-picker-${e.size}`, { "color-picker-disabled": e.disabled }]]),
-          style: h(`--color-picker-height: ${de.value}; --color-picker-block-size: ${We.value};`)
-        }, [
-          s("div", _l, [
-            s("div", Dl, [
-              l[5] || (l[5] = s("div", { class: "color-picker-checkboard" }, null, -1)),
-              s("div", {
-                style: h(`position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: ${F.value ? T(_)(F.value) : ""};`)
+          class: ["color-picker-display", [`color-picker-${e.size}`, { "color-picker-disabled": e.disabled }]],
+          style: `
+        --color-picker-width: ${Re.value};
+        --color-picker-height: ${de.value};
+        --color-picker-block-size: ${el.value};
+        --color-picker-primary-color-hover: #4096ff;
+        --color-picker-primary-color-focus: #4096ff;
+        --color-picker-primary-shadow-color: rgba(5, 145, 255, 0.1);
+      `
+        }, e.$attrs), [
+          n("div", Pl, [
+            n("div", Dl, [
+              l[5] || (l[5] = n("div", { class: "color-picker-checkboard" }, null, -1)),
+              n("div", {
+                style: p(`position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: ${D.value ? T(_)(D.value) : ""};`)
               }, null, 4),
-              i.value && F.value ? (b(), R("div", {
+              i.value && D.value ? (b(), R("div", {
                 key: 0,
                 class: "color-picker-value",
-                style: h({ color: F.value[2] > 50 || F.value[3] < 0.5 ? "black" : "white" })
+                style: p({ color: D.value[2] > 50 || D.value[3] < 0.5 ? "black" : "white" })
               }, [
-                Ie(e.$slots, "label", { color: i.value }, () => [
-                  ne(me(e.label ? e.label(i.value) : i.value), 1)
+                Le(e.$slots, "label", { color: i.value }, () => [
+                  ne(ge(e.label ? e.label(i.value) : i.value), 1)
                 ], !0)
               ], 4)) : H("", !0)
             ])
           ])
-        ], 6)
+        ], 16)
       ]),
       _: 3
-    }, 16, ["style", "tooltip-style"]));
+    }, 8, ["style", "tooltip-style"]));
   }
 });
 export {