@aurouscia/au-color-picker 0.4.2 → 0.4.3

package/dist/au-color-picker.es.js

@@ -1,47 +1,47 @@
-import { defineComponent as Q, ref as b, onMounted as ge, onUnmounted as ye, openBlock as R, createElementBlock as T, normalizeStyle as U, isRef as me, createElementVNode as l, computed as K, onBeforeMount as re, watch as Y, normalizeClass as he, unref as C, createVNode as ue, withDirectives as G, vModelSelect as xe, createCommentVNode as J, vModelRadio as te, Fragment as Pe, renderList as ke, toDisplayString as Ce } from "vue";
+import { defineComponent as J, ref as b, onMounted as ge, onUnmounted as ye, openBlock as N, createElementBlock as R, normalizeStyle as U, isRef as me, createElementVNode as i, computed as K, onBeforeMount as ie, watch as re, normalizeClass as he, unref as C, createVNode as ue, withDirectives as Y, vModelSelect as xe, createCommentVNode as G, vModelRadio as ee, Fragment as Pe, renderList as ke, toDisplayString as Ce } from "vue";
 import A from "color-convert";
-function we(p, i) {
-  const m = p.x - i.x, f = p.y - i.y;
+function we(p, r) {
+  const m = p.x - r.x, f = p.y - r.y;
   return m ** 2 + f ** 2;
 }
-function Se(p, i) {
-  const m = p.x - i.x, f = p.y - i.y;
+function Se(p, r) {
+  const m = p.x - r.x, f = p.y - r.y;
   return Math.atan2(f, m);
 }
 function Ie(p) {
-  let i = p, m = 0, f = 0;
-  for (; i !== null; )
-    m += i.offsetTop, f += i.offsetLeft, i = i.offsetParent;
+  let r = p, m = 0, f = 0;
+  for (; r !== null; )
+    m += r.offsetTop, f += r.offsetLeft, r = r.offsetParent;
   return { y: m, x: f };
 }
-const N = 400, L = 400, F = 200, Be = 200, ne = 190, oe = 150, O = 200, se = 16, ae = 3, be = /* @__PURE__ */ Q({
+const H = 400, L = 400, F = 200, Be = 200, te = 190, ne = 150, O = 200, oe = 16, se = 3, be = /* @__PURE__ */ J({
   __name: "AuColorPickerRing",
   props: {
     initialHex: {}
   },
   emits: ["changed"],
-  setup(p, { expose: i, emit: m }) {
+  setup(p, { expose: r, emit: m }) {
     const f = b(), h = b();
     let c, v;
-    const x = { x: 199, y: 199 }, E = (ne + oe) / 2, D = ne ** 2, z = oe ** 2, P = (N - O) / 2, H = P + O, w = b(0), _ = b(100), I = b(100), r = p;
+    const x = { x: 199, y: 199 }, E = (te + ne) / 2, T = te ** 2, z = ne ** 2, P = (H - O) / 2, D = P + O, w = b(0), _ = b(100), I = b(100), l = p;
     let e;
     function g() {
       var a, d;
       const o = (a = f.value) == null ? void 0 : a.getContext("2d"), s = (d = h.value) == null ? void 0 : d.getContext("2d");
       if (!o || !s)
         throw Error("canvas context getting error");
-      if (r.initialHex) {
-        const k = A.hex.hsv(r.initialHex);
+      if (l.initialHex) {
+        const k = A.hex.hsv(l.initialHex);
         w.value = k[0], _.value = k[1], I.value = k[2];
       }
-      c = o, v = s, e = c.getImageData(0, 0, N, L), V(), t(), X(), c.putImageData(e, 0, 0);
+      c = o, v = s, e = c.getImageData(0, 0, H, L), V(), t(), X(), c.putImageData(e, 0, 0);
     }
     function V() {
-      for (let o = 0; o < N; o++)
+      for (let o = 0; o < H; o++)
         for (let s = 0; s < L; s++) {
           const a = { x: o, y: s };
           if (y(a)) {
-            const d = a.y * N * 4 + a.x * 4, k = W(a), $ = A.hsv.rgb([k, 100, 100]);
+            const d = a.y * H * 4 + a.x * 4, k = W(a), $ = A.hsv.rgb([k, 100, 100]);
             e.data[d] = $[0], e.data[d + 1] = $[1], e.data[d + 2] = $[2], e.data[d + 3] = 255;
           }
         }
@@ -51,14 +51,14 @@ const N = 400, L = 400, F = 200, Be = 200, ne = 190, oe = 150, O = 200, se = 16,
     }
     function y(o) {
       const s = we(x, o);
-      return s > z && s < D;
+      return s > z && s < T;
     }
     function t() {
-      for (let o = 0; o < N; o++)
+      for (let o = 0; o < H; o++)
         for (let s = 0; s < L; s++) {
           const a = { x: o, y: s };
           if (B(a)) {
-            const d = a.y * N * 4 + a.x * 4, { s: k, v: $ } = n(a), q = A.hsv.rgb([w.value, k, $]);
+            const d = a.y * H * 4 + a.x * 4, { s: k, v: $ } = n(a), q = A.hsv.rgb([w.value, k, $]);
             e.data[d] = q[0], e.data[d + 1] = q[1], e.data[d + 2] = q[2], e.data[d + 3] = 255;
           }
         }
@@ -69,7 +69,7 @@ const N = 400, L = 400, F = 200, Be = 200, ne = 190, oe = 150, O = 200, se = 16,
       return d > 1 ? d = 1 : d < 0 && (d = 0), k > 1 ? k = 1 : k < 0 && (k = 0), { s: 100 * d, v: 100 * k };
     }
     function B(o) {
-      return !(o.x < P || o.x > H || o.y < P || o.y > H);
+      return !(o.x < P || o.x > D || o.y < P || o.y > D);
     }
     let M = !1, u = "none", S = !1;
     function j(o, s) {
@@ -95,28 +95,28 @@ const N = 400, L = 400, F = 200, Be = 200, ne = 190, oe = 150, O = 200, se = 16,
         s -= d.x, a -= d.y;
       } else
         s = o.offsetX, a = o.offsetY;
-      return s = s * N / F, a = a * N / F, { x: s, y: a };
+      return s = s * H / F, a = a * H / F, { x: s, y: a };
     }
     function X(o) {
       if (o) {
         const pe = A.hsv.hex([w.value, _.value, I.value]);
         fe("changed", pe);
       }
-      const s = (w.value / 360 * 2 + 1) * Math.PI, a = Math.cos(s) * E + N / 2, d = Math.sin(s) * E + L / 2, k = _.value / 100 * O + P, $ = (1 - I.value / 100) * O + P;
-      v.reset(), v.lineWidth = 4, v.strokeStyle = "black", v.beginPath(), v.arc(a, d, se - 2, 0, 2 * Math.PI), v.stroke(), v.beginPath(), v.arc(a, d, ae, 0, 2 * Math.PI), v.fill();
+      const s = (w.value / 360 * 2 + 1) * Math.PI, a = Math.cos(s) * E + H / 2, d = Math.sin(s) * E + L / 2, k = _.value / 100 * O + P, $ = (1 - I.value / 100) * O + P;
+      v.reset(), v.lineWidth = 4, v.strokeStyle = "black", v.beginPath(), v.arc(a, d, oe - 2, 0, 2 * Math.PI), v.stroke(), v.beginPath(), v.arc(a, d, se, 0, 2 * Math.PI), v.fill();
       const q = I.value > 50 ? "black" : "#ddd";
-      v.strokeStyle = q, v.fillStyle = q, v.beginPath(), v.arc(k, $, se - 2, 0, 2 * Math.PI), v.stroke(), v.beginPath(), v.arc(k, $, ae, 0, 2 * Math.PI), v.fill();
+      v.strokeStyle = q, v.fillStyle = q, v.beginPath(), v.arc(k, $, oe - 2, 0, 2 * Math.PI), v.stroke(), v.beginPath(), v.arc(k, $, se, 0, 2 * Math.PI), v.fill();
     }
     function de(o) {
       const s = A.hex.hsv(o);
       w.value = s[0], _.value = s[1], I.value = s[2], t(), c.putImageData(e, 0, 0), X();
     }
     const fe = m;
-    return i({ enforceTo: de }), ge(() => {
+    return r({ enforceTo: de }), ge(() => {
       g(), window.addEventListener("touchend", Z), window.addEventListener("mouseup", Z);
     }), ye(() => {
       window.removeEventListener("touchend", Z), window.removeEventListener("mouseup", Z);
-    }), (o, s) => (R(), T("div", {
+    }), (o, s) => (N(), R("div", {
       class: "acpRingBody",
       style: U({ width: F + "px", height: Be + "px" }),
       onTouchstart: j,
@@ -127,50 +127,50 @@ const N = 400, L = 400, F = 200, Be = 200, ne = 190, oe = 150, O = 200, se = 16,
         j(a), me(S) ? S.value = !0 : S = !0;
       })
     }, [
-      l("canvas", {
-        width: N,
+      i("canvas", {
+        width: H,
         height: L,
         ref_key: "cvs",
         ref: f
       }, null, 512),
-      l("canvas", {
-        width: N,
+      i("canvas", {
+        width: H,
         height: L,
         ref_key: "cursorCvs",
         ref: h
       }, null, 512)
     ], 36));
   }
-}), ee = (p, i) => {
+}), Q = (p, r) => {
   const m = p.__vccOpts || p;
-  for (const [f, h] of i)
+  for (const [f, h] of r)
     m[f] = h;
   return m;
-}, De = /* @__PURE__ */ ee(be, [["__scopeId", "data-v-505caf85"]]);
-function le(p) {
+}, De = /* @__PURE__ */ Q(be, [["__scopeId", "data-v-505caf85"]]);
+function ae(p) {
   return /^#([0-9A-F]{3}){1,2}$/i.test(p);
 }
 function ce(p) {
-  const i = b(!1), m = b("#ff0000"), f = K(() => {
+  const r = b(!1), m = b("#ff0000"), f = K(() => {
     let x = {};
-    return i.value || (x.boxShadow = "none"), p.entryStyles && Object.assign(x, p.entryStyles), i.value && (x.transition = "0s", Object.assign(x, p.entryActiveStyles)), x.backgroundColor = m.value, p.pos === "right" ? x.right = "0px" : x.left = "0px", x;
+    return r.value || (x.boxShadow = "none"), p.entryStyles && Object.assign(x, p.entryStyles), r.value && (x.transition = "0s", Object.assign(x, p.entryActiveStyles)), x.backgroundColor = m.value, p.pos === "right" ? x.right = "0px" : x.left = "0px", x;
   });
   function h() {
-    i.value = !1;
+    r.value = !1;
   }
   let c = 0;
   function v() {
-    if (p.entryRespondDelay && (window.clearTimeout(c), !i.value)) {
+    if (p.entryRespondDelay && (window.clearTimeout(c), !r.value)) {
       c = window.setTimeout(() => {
-        i.value = !0;
+        r.value = !0;
       }, p.entryRespondDelay);
       return;
     }
-    i.value = !i.value;
+    r.value = !r.value;
   }
-  return { hexValue: m, panelShow: i, closePanel: h, togglePanel: v, entryStylesActual: f };
+  return { hexValue: m, panelShow: r, closePanel: h, togglePanel: v, entryStylesActual: f };
 }
-function ie() {
+function le() {
   window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
 }
 const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams" }, Te = {
@@ -182,7 +182,7 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
 }, Ae = ["value"], $e = ["value"], Ee = ["value"], Ve = {
   key: 2,
   class: "acpTripleInputs"
-}, qe = ["value"], Le = ["value"], Oe = ["value"], Ue = { class: "acpDoneBtn" }, ze = /* @__PURE__ */ Q({
+}, qe = ["value"], Le = ["value"], Oe = ["value"], Ue = { class: "acpDoneBtn" }, ze = /* @__PURE__ */ J({
   __name: "AuColorPicker",
   props: {
     initial: {},
@@ -196,18 +196,18 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
     showPackageName: { type: Boolean }
   },
   emits: ["change", "done"],
-  setup(p, { expose: i, emit: m }) {
-    const f = p, h = b(), { hexValue: c, panelShow: v, closePanel: x, togglePanel: E, entryStylesActual: D } = ce(f);
+  setup(p, { expose: r, emit: m }) {
+    const f = p, h = b(), { hexValue: c, panelShow: v, closePanel: x, togglePanel: E, entryStylesActual: T } = ce(f);
     function z(y) {
       c.value = e(y), g();
     }
-    const P = b("hex"), H = K(() => A.hex.rgb(c.value)), w = K(() => A.hex.hsv(c.value));
+    const P = b("hex"), D = K(() => A.hex.rgb(c.value)), w = K(() => A.hex.hsv(c.value));
     function _(y) {
       var n;
       const t = y.target;
       if ("value" in t) {
         const B = t.value;
-        if (B && le(B)) {
+        if (B && ae(B)) {
           c.value = e(B), (n = h.value) == null || n.enforceTo(c.value), g();
           return;
         }
@@ -225,14 +225,14 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
             n.value = "0";
           else {
             u > 255 ? u = 255 : u < 0 && (u = 0);
-            const S = [...H.value];
+            const S = [...D.value];
             t == "r" ? S[0] = u : t == "g" ? S[1] = u : S[2] = u, c.value = e(A.rgb.hex(S)), (B = h.value) == null || B.enforceTo(c.value), n.value = u.toString(), g();
             return;
           }
         }
       }
     }
-    function r(y, t) {
+    function l(y, t) {
       var B;
       const n = y.target;
       if ("value" in n) {
@@ -259,26 +259,26 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
     function V() {
       return c.value;
     }
-    re(() => {
-      f.initial && le(f.initial) && (c.value = e(f.initial));
+    ie(() => {
+      f.initial && ae(f.initial) && (c.value = e(f.initial));
     });
     const W = m;
-    return i({ closePanel: x, getCurrentHex: V }), Y(v, (y) => {
+    return r({ closePanel: x, getCurrentHex: V }), re(v, (y) => {
       y === !1 && W("done", c.value);
-    }), (y, t) => (R(), T("div", He, [
-      l("div", {
+    }), (y, t) => (N(), R("div", He, [
+      i("div", {
         class: he(y.entryClassName || "acpEntry"),
-        style: U(C(D)),
+        style: U(C(T)),
         onClick: t[0] || (t[0] = //@ts-ignore
         (...n) => C(E) && C(E)(...n))
       }, null, 6),
-      C(v) ? (R(), T("div", {
+      C(v) ? (N(), R("div", {
         key: 0,
         class: "acpPanel",
         style: U({ zIndex: (y.panelBaseZIndex || 0) + 100 }),
         onClick: t[10] || (t[10] = (n) => y.panelClickStopPropagation && n.stopPropagation())
       }, [
-        l("div", Ne, [
+        i("div", Ne, [
           ue(De, {
             ref_key: "ring",
             ref: h,
@@ -287,67 +287,67 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
             "show-package-name": y.showPackageName
           }, null, 8, ["initial-hex", "show-package-name"])
         ]),
-        l("div", Re, [
-          G(l("select", {
+        i("div", Re, [
+          Y(i("select", {
             "onUpdate:modelValue": t[1] || (t[1] = (n) => P.value = n)
           }, t[11] || (t[11] = [
-            l("option", { value: "hex" }, "HEX", -1),
-            l("option", { value: "rgb" }, "RGB", -1),
-            l("option", { value: "hsv" }, "HSV", -1)
+            i("option", { value: "hex" }, "HEX", -1),
+            i("option", { value: "rgb" }, "RGB", -1),
+            i("option", { value: "hsv" }, "HSV", -1)
           ]), 512), [
             [xe, P.value]
           ]),
-          P.value == "hex" ? (R(), T("div", Te, [
-            l("input", {
+          P.value == "hex" ? (N(), R("div", Te, [
+            i("input", {
               value: C(c),
               onBlur: _,
               spellcheck: "false",
               maxlength: "7"
             }, null, 40, _e)
-          ])) : P.value == "rgb" ? (R(), T("div", Me, [
-            l("input", {
-              value: H.value[0],
+          ])) : P.value == "rgb" ? (N(), R("div", Me, [
+            i("input", {
+              value: D.value[0],
               onBlur: t[2] || (t[2] = (n) => I(n, "r"))
             }, null, 40, Ae),
-            l("input", {
-              value: H.value[1],
+            i("input", {
+              value: D.value[1],
               onBlur: t[3] || (t[3] = (n) => I(n, "g"))
             }, null, 40, $e),
-            l("input", {
-              value: H.value[2],
+            i("input", {
+              value: D.value[2],
               onBlur: t[4] || (t[4] = (n) => I(n, "b"))
             }, null, 40, Ee)
-          ])) : (R(), T("div", Ve, [
-            l("input", {
+          ])) : (N(), R("div", Ve, [
+            i("input", {
               value: w.value[0],
-              onBlur: t[5] || (t[5] = (n) => r(n, "h"))
+              onBlur: t[5] || (t[5] = (n) => l(n, "h"))
             }, null, 40, qe),
-            l("input", {
+            i("input", {
               value: w.value[1],
-              onBlur: t[6] || (t[6] = (n) => r(n, "s"))
+              onBlur: t[6] || (t[6] = (n) => l(n, "s"))
             }, null, 40, Le),
-            l("input", {
+            i("input", {
               value: w.value[2],
-              onBlur: t[7] || (t[7] = (n) => r(n, "v"))
+              onBlur: t[7] || (t[7] = (n) => l(n, "v"))
             }, null, 40, Oe)
           ]))
         ]),
-        l("div", Ue, [
-          l("button", {
+        i("div", Ue, [
+          i("button", {
             onClick: t[8] || (t[8] = //@ts-ignore
             (...n) => C(x) && C(x)(...n))
           }, "OK")
         ]),
-        y.showPackageName ? (R(), T("div", {
+        y.showPackageName ? (N(), R("div", {
           key: 0,
           class: "acpPackageName",
           onClick: t[9] || (t[9] = //@ts-ignore
-          (...n) => C(ie) && C(ie)(...n))
-        }, " au-color-picker ")) : J("", !0)
-      ], 4)) : J("", !0)
+          (...n) => C(le) && C(le)(...n))
+        }, " au-color-picker ")) : G("", !0)
+      ], 4)) : G("", !0)
     ]));
   }
-}), We = /* @__PURE__ */ ee(ze, [["__scopeId", "data-v-8b7f17ad"]]), Ze = { class: "acp" }, je = { class: "acpNamedPresets" }, Xe = { for: "acpColorPresetCustom" }, Fe = ["for"], Ke = ["id", "value", "onClick"], Ye = { class: "acpPresetName" }, Ge = { class: "acpDoneBtn" }, Je = /* @__PURE__ */ Q({
+}), We = /* @__PURE__ */ Q(ze, [["__scopeId", "data-v-8b7f17ad"]]), Ze = { class: "acp" }, je = { class: "acpNamedPresets" }, Xe = { for: "acpColorPresetCustom" }, Fe = ["for"], Ke = ["id", "value", "onClick"], Ye = { class: "acpPresetName" }, Ge = { class: "acpDoneBtn" }, Je = /* @__PURE__ */ J({
   __name: "AuColorPickerPresetsNested",
   props: {
     initialSelectedPreset: {},
@@ -363,43 +363,41 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
     showPackageName: { type: Boolean }
   },
   emits: ["change", "done", "presetSwitched"],
-  setup(p, { expose: i, emit: m }) {
-    const f = p, { hexValue: h, panelShow: c, closePanel: v, togglePanel: x, entryStylesActual: E } = ce(f), D = b(), z = b(), P = b("#ff0000");
-    function H(r) {
-      r ? (D.value = r.name, h.value = r.colorHex) : (D.value = void 0, h.value = P.value);
+  setup(p, { expose: r, emit: m }) {
+    const f = p, { hexValue: h, panelShow: c, closePanel: v, togglePanel: x, entryStylesActual: E } = ce(f), T = b(), z = b(), P = b("#ff0000");
+    function D(l, e) {
+      l ? (T.value = l.name, h.value = l.colorHex) : (T.value = void 0, h.value = P.value), e || w("presetSwitched", l == null ? void 0 : l.name);
     }
     const w = m;
-    function _(r) {
-      h.value = r, P.value = r, w("change", r);
+    function _(l) {
+      h.value = l, P.value = l, w("change", l);
     }
-    function I(r) {
-      h.value = r, P.value = r, v();
+    function I(l) {
+      h.value = l, P.value = l, v();
     }
-    return i({ closePanel: v }), Y(c, (r) => {
-      r === !1 && w("done", h.value);
-    }), Y(D, (r) => {
-      w("presetSwitched", r);
-    }), re(() => {
-      var r;
+    return r({ closePanel: v }), re(c, (l) => {
+      l === !1 && w("done", h.value);
+    }), ie(() => {
+      var l;
       if (f.initial && (h.value = f.initial, P.value = f.initial), f.initialSelectedPreset) {
-        const e = (r = f.presets) == null ? void 0 : r.find((g) => g.name === f.initialSelectedPreset);
-        e && H(e);
+        const e = (l = f.presets) == null ? void 0 : l.find((g) => g.name === f.initialSelectedPreset);
+        e && D(e, !0);
       }
-    }), (r, e) => (R(), T("div", Ze, [
-      l("div", {
+    }), (l, e) => (N(), R("div", Ze, [
+      i("div", {
         class: "acpEntry",
         style: U(C(E)),
         onClick: e[0] || (e[0] = //@ts-ignore
         (...g) => C(x) && C(x)(...g))
       }, null, 4),
-      C(c) ? (R(), T("div", {
+      C(c) ? (N(), R("div", {
         key: 0,
         class: "acpPanel",
-        style: U({ zIndex: (r.panelBaseZIndex || 0) + 100 }),
-        onClick: e[5] || (e[5] = (g) => r.panelClickStopPropagation && g.stopPropagation())
+        style: U({ zIndex: (l.panelBaseZIndex || 0) + 100 }),
+        onClick: e[5] || (e[5] = (g) => l.panelClickStopPropagation && g.stopPropagation())
       }, [
-        l("div", je, [
-          l("label", Xe, [
+        i("div", je, [
+          i("label", Xe, [
             ue(We, {
               initial: P.value,
               onChange: _,
@@ -407,52 +405,52 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
               "entry-class-name": "acpPresetBody",
               ref_key: "customPicker",
               ref: z,
-              "show-package-name": r.showPackageName
+              "show-package-name": l.showPackageName
             }, null, 8, ["initial", "show-package-name"]),
-            G(l("input", {
+            Y(i("input", {
               name: "colorType",
               type: "radio",
               id: "acpColorPresetCustom",
               value: void 0,
-              "onUpdate:modelValue": e[1] || (e[1] = (g) => D.value = g),
-              onClick: e[2] || (e[2] = (g) => H())
+              "onUpdate:modelValue": e[1] || (e[1] = (g) => T.value = g),
+              onClick: e[2] || (e[2] = (g) => D())
             }, null, 512), [
-              [te, D.value]
+              [ee, T.value]
             ]),
-            e[6] || (e[6] = l("div", { class: "acpPresetName" }, "自定义", -1))
+            e[6] || (e[6] = i("div", { class: "acpPresetName" }, "自定义", -1))
           ]),
-          e[7] || (e[7] = l("div", { class: "acpSep" }, null, -1)),
-          (R(!0), T(Pe, null, ke(r.presets, (g) => (R(), T("label", {
+          e[7] || (e[7] = i("div", { class: "acpSep" }, null, -1)),
+          (N(!0), R(Pe, null, ke(l.presets, (g) => (N(), R("label", {
             for: `acpColorPreset${g.name}`
           }, [
-            l("div", {
+            i("div", {
               class: "acpPresetBody",
               style: U({ backgroundColor: g.colorHex })
             }, null, 4),
-            G(l("input", {
+            Y(i("input", {
               name: "colorType",
               type: "radio",
               id: `acpColorPreset${g.name}`,
               value: g.name,
-              "onUpdate:modelValue": e[3] || (e[3] = (V) => D.value = V),
-              onClick: (V) => H(g)
+              "onUpdate:modelValue": e[3] || (e[3] = (V) => T.value = V),
+              onClick: (V) => D(g)
             }, null, 8, Ke), [
-              [te, D.value]
+              [ee, T.value]
             ]),
-            l("div", Ye, Ce(g.name), 1)
+            i("div", Ye, Ce(g.name), 1)
           ], 8, Fe))), 256)),
-          e[8] || (e[8] = l("div", { class: "acpSep" }, null, -1))
+          e[8] || (e[8] = i("div", { class: "acpSep" }, null, -1))
         ]),
-        l("div", Ge, [
-          l("button", {
+        i("div", Ge, [
+          i("button", {
             onClick: e[4] || (e[4] = //@ts-ignore
             (...g) => C(v) && C(v)(...g))
           }, "OK")
         ])
-      ], 4)) : J("", !0)
+      ], 4)) : G("", !0)
     ]));
   }
-}), tt = /* @__PURE__ */ ee(Je, [["__scopeId", "data-v-2cf4af04"]]);
+}), tt = /* @__PURE__ */ Q(Je, [["__scopeId", "data-v-051cc834"]]);
 export {
   We as AuColorPicker,
   tt as AuColorPickerPresetsNested,

package/dist/style.css

@@ -1 +1 @@
-.acpRingBody[data-v-505caf85]{position:relative}canvas[data-v-505caf85]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}[data-v-8b7f17ad]{margin:0;padding:0}.acpSep[data-v-8b7f17ad]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-8b7f17ad]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-8b7f17ad]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-8b7f17ad]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-8b7f17ad]:hover{color:#000}.acpEntry[data-v-8b7f17ad]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-8b7f17ad]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-8b7f17ad]{position:relative;width:fit-content}.acp label[data-v-8b7f17ad]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-8b7f17ad]{cursor:pointer}.acpPackageName[data-v-8b7f17ad]{position:absolute;left:2px;bottom:3px;font-size:8px;color:#ccc;text-align:right;cursor:pointer;-webkit-user-select:none;user-select:none}.acpParams[data-v-8b7f17ad]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpParams select[data-v-8b7f17ad],.acpParams input[data-v-8b7f17ad]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpParams select[data-v-8b7f17ad]{-webkit-user-select:none;user-select:none}.acpParams input[data-v-8b7f17ad]{text-align:center}.acpParams .acpSingleInput input[data-v-8b7f17ad]{width:120px}.acpParams .acpTripleInputs[data-v-8b7f17ad]{display:flex;justify-content:space-around}.acpParams .acpTripleInputs input[data-v-8b7f17ad]{width:40px}[data-v-2cf4af04]{margin:0;padding:0}.acpSep[data-v-2cf4af04]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-2cf4af04]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-2cf4af04]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-2cf4af04]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-2cf4af04]:hover{color:#000}.acpEntry[data-v-2cf4af04]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-2cf4af04]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-2cf4af04]{position:relative;width:fit-content}.acp label[data-v-2cf4af04]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-2cf4af04]{cursor:pointer}.acpNamedPresets[data-v-2cf4af04]{margin:5px;display:flex;flex-direction:column;gap:4px}.acpNamedPresets[data-v-2cf4af04]>*{display:flex;justify-content:flex-start;align-items:center;gap:5px}.acpNamedPresets>* .acpPresetName[data-v-2cf4af04]{color:#666}.acpNamedPresets>* .acpPresetName[data-v-2cf4af04]:hover{color:#000}
+.acpRingBody[data-v-505caf85]{position:relative}canvas[data-v-505caf85]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}[data-v-8b7f17ad]{margin:0;padding:0}.acpSep[data-v-8b7f17ad]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-8b7f17ad]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-8b7f17ad]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-8b7f17ad]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-8b7f17ad]:hover{color:#000}.acpEntry[data-v-8b7f17ad]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-8b7f17ad]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-8b7f17ad]{position:relative;width:fit-content}.acp label[data-v-8b7f17ad]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-8b7f17ad]{cursor:pointer}.acpPackageName[data-v-8b7f17ad]{position:absolute;left:2px;bottom:3px;font-size:8px;color:#ccc;text-align:right;cursor:pointer;-webkit-user-select:none;user-select:none}.acpParams[data-v-8b7f17ad]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpParams select[data-v-8b7f17ad],.acpParams input[data-v-8b7f17ad]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpParams select[data-v-8b7f17ad]{-webkit-user-select:none;user-select:none}.acpParams input[data-v-8b7f17ad]{text-align:center}.acpParams .acpSingleInput input[data-v-8b7f17ad]{width:120px}.acpParams .acpTripleInputs[data-v-8b7f17ad]{display:flex;justify-content:space-around}.acpParams .acpTripleInputs input[data-v-8b7f17ad]{width:40px}[data-v-051cc834]{margin:0;padding:0}.acpSep[data-v-051cc834]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-051cc834]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-051cc834]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-051cc834]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-051cc834]:hover{color:#000}.acpEntry[data-v-051cc834]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-051cc834]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-051cc834]{position:relative;width:fit-content}.acp label[data-v-051cc834]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-051cc834]{cursor:pointer}.acpNamedPresets[data-v-051cc834]{margin:5px;display:flex;flex-direction:column;gap:4px}.acpNamedPresets[data-v-051cc834]>*{display:flex;justify-content:flex-start;align-items:center;gap:5px}.acpNamedPresets>* .acpPresetName[data-v-051cc834]{color:#666}.acpNamedPresets>* .acpPresetName[data-v-051cc834]:hover{color:#000}

package/package.json

@@ -14,7 +14,7 @@
     "color",
     "component"
   ],
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "files": [
     "dist"