vue-amazing-ui 2.4.21 → 2.4.22

package/es/colorpicker/ColorPicker.vue2.js

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