@aurouscia/au-color-picker 0.4.0 → 0.4.1

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

@@ -1,185 +1,185 @@
-import { defineComponent as Q, ref as H, onMounted as ge, onUnmounted as ye, openBlock as T, createElementBlock as M, normalizeStyle as U, isRef as me, createElementVNode as l, computed as K, onBeforeMount as re, watch as Y, normalizeClass as he, unref as h, createVNode as ue, withDirectives as G, vModelSelect as xe, createCommentVNode as J, vModelRadio as te, Fragment as ke, renderList as Pe, toDisplayString as Ce } from "vue";
-import E from "color-convert";
-function we(d, i) {
-  const y = d.x - i.x, f = d.y - i.y;
-  return y ** 2 + f ** 2;
+import { defineComponent as Q, ref as B, onMounted as ge, onUnmounted as ye, openBlock as H, createElementBlock as N, normalizeStyle as O, isRef as me, createElementVNode as i, computed as K, onBeforeMount as re, watch as Y, normalizeClass as he, unref as k, createVNode as ue, withDirectives as G, vModelSelect as Pe, createCommentVNode as J, vModelRadio as te, Fragment as xe, renderList as ke, toDisplayString as Ce } from "vue";
+import $ from "color-convert";
+function we(f, r) {
+  const y = f.x - r.x, p = f.y - r.y;
+  return y ** 2 + p ** 2;
 }
-function Se(d, i) {
-  const y = d.x - i.x, f = d.y - i.y;
-  return Math.atan2(f, y);
+function Se(f, r) {
+  const y = f.x - r.x, p = f.y - r.y;
+  return Math.atan2(p, y);
 }
-function Ie(d) {
-  let i = d, y = 0, f = 0;
-  for (; i !== null; )
-    y += i.offsetTop, f += i.offsetLeft, i = i.offsetParent;
-  return { y, x: f };
+function Ie(f) {
+  let r = f, y = 0, p = 0;
+  for (; r !== null; )
+    y += r.offsetTop, p += r.offsetLeft, r = r.offsetParent;
+  return { y, x: p };
 }
-const _ = 400, L = 400, F = 200, Be = 200, ne = 190, oe = 150, O = 200, se = 16, ae = 3, be = /* @__PURE__ */ Q({
+const D = 400, q = 400, F = 200, Be = 200, ne = 190, oe = 150, L = 200, ae = 16, se = 3, be = /* @__PURE__ */ Q({
   __name: "AuColorPickerRing",
   props: {
     initialHex: {}
   },
   emits: ["changed"],
-  setup(d, { expose: i, emit: y }) {
-    const f = H(), w = H();
-    let r, p;
-    const N = { x: 199, y: 199 }, x = (ne + oe) / 2, b = ne ** 2, z = oe ** 2, P = (_ - O) / 2, R = P + O, C = H(0), D = H(100), A = H(100), u = d;
-    let e;
-    function g() {
-      var a, c;
-      const o = (a = f.value) == null ? void 0 : a.getContext("2d"), s = (c = w.value) == null ? void 0 : c.getContext("2d");
-      if (!o || !s)
+  setup(f, { expose: r, emit: y }) {
+    const p = B(), w = B();
+    let u, g;
+    const R = { x: 199, y: 199 }, m = (ne + oe) / 2, U = ne ** 2, T = oe ** 2, P = (D - L) / 2, b = P + L, S = B(0), _ = B(100), l = B(100), v = f;
+    let a;
+    function M() {
+      var s, d;
+      const n = (s = p.value) == null ? void 0 : s.getContext("2d"), o = (d = w.value) == null ? void 0 : d.getContext("2d");
+      if (!n || !o)
         throw Error("canvas context getting error");
-      if (u.initialHex) {
-        const k = E.hex.hsv(u.initialHex);
-        C.value = k[0], D.value = k[1], A.value = k[2];
+      if (v.initialHex) {
+        const x = $.hex.hsv(v.initialHex);
+        S.value = x[0], _.value = x[1], l.value = x[2];
       }
-      r = o, p = s, e = r.getImageData(0, 0, _, L), $(), m(), X(), r.putImageData(e, 0, 0);
+      u = n, g = o, a = u.getImageData(0, 0, D, q), j(), e(), X(), u.putImageData(a, 0, 0);
     }
-    function $() {
-      for (let o = 0; o < _; o++)
-        for (let s = 0; s < L; s++) {
-          const a = { x: o, y: s };
-          if (W(a)) {
-            const c = a.y * _ * 4 + a.x * 4, k = j(a), V = E.hsv.rgb([k, 100, 100]);
-            e.data[c] = V[0], e.data[c + 1] = V[1], e.data[c + 2] = V[2], e.data[c + 3] = 255;
+    function j() {
+      for (let n = 0; n < D; n++)
+        for (let o = 0; o < q; o++) {
+          const s = { x: n, y: o };
+          if (h(s)) {
+            const d = s.y * D * 4 + s.x * 4, x = z(s), E = $.hsv.rgb([x, 100, 100]);
+            a.data[d] = E[0], a.data[d + 1] = E[1], a.data[d + 2] = E[2], a.data[d + 3] = 255;
           }
         }
     }
-    function j(o) {
-      return 360 * ((Se(o, N) + Math.PI) / (2 * Math.PI));
+    function z(n) {
+      return 360 * ((Se(n, R) + Math.PI) / (2 * Math.PI));
     }
-    function W(o) {
-      const s = we(N, o);
-      return s > z && s < b;
+    function h(n) {
+      const o = we(R, n);
+      return o > T && o < U;
     }
-    function m() {
-      for (let o = 0; o < _; o++)
-        for (let s = 0; s < L; s++) {
-          const a = { x: o, y: s };
-          if (n(a)) {
-            const c = a.y * _ * 4 + a.x * 4, { s: k, v: V } = t(a), q = E.hsv.rgb([C.value, k, V]);
-            e.data[c] = q[0], e.data[c + 1] = q[1], e.data[c + 2] = q[2], e.data[c + 3] = 255;
+    function e() {
+      for (let n = 0; n < D; n++)
+        for (let o = 0; o < q; o++) {
+          const s = { x: n, y: o };
+          if (I(s)) {
+            const d = s.y * D * 4 + s.x * 4, { s: x, v: E } = t(s), V = $.hsv.rgb([S.value, x, E]);
+            a.data[d] = V[0], a.data[d + 1] = V[1], a.data[d + 2] = V[2], a.data[d + 3] = 255;
           }
         }
     }
-    function t(o) {
-      const s = o.x - P, a = o.y - P;
-      let c = s / O, k = 1 - a / O;
-      return c > 1 ? c = 1 : c < 0 && (c = 0), k > 1 ? k = 1 : k < 0 && (k = 0), { s: 100 * c, v: 100 * k };
+    function t(n) {
+      const o = n.x - P, s = n.y - P;
+      let d = o / L, x = 1 - s / L;
+      return d > 1 ? d = 1 : d < 0 && (d = 0), x > 1 ? x = 1 : x < 0 && (x = 0), { s: 100 * d, v: 100 * x };
     }
-    function n(o) {
-      return !(o.x < P || o.x > R || o.y < P || o.y > R);
+    function I(n) {
+      return !(n.x < P || n.x > b || n.y < P || n.y > b);
     }
-    let I = !1, B = "none", v = !1;
-    function S(o, s) {
-      if (I || s && !v)
+    let A = !1, c = "none", C = !1;
+    function Z(n, o) {
+      if (A || o && !C)
         return;
-      I = !0;
-      const a = ve(o);
-      if (B === "none" && (n(a) ? B = "square" : W(a) && (B = "ring")), B === "ring" && (o.preventDefault(), C.value = j(a), m(), r.putImageData(e, 0, 0)), B === "square") {
-        o.preventDefault();
-        const c = t(a);
-        D.value = c.s, A.value = c.v;
+      A = !0;
+      const s = ve(n);
+      if (c === "none" && (I(s) ? c = "square" : h(s) && (c = "ring")), c === "ring" && (n.preventDefault(), S.value = z(s), e(), u.putImageData(a, 0, 0)), c === "square") {
+        n.preventDefault();
+        const d = t(s);
+        _.value = d.s, l.value = d.v;
       }
-      B !== "none" && X(!0), I = !1;
+      c !== "none" && X(!0), A = !1;
     }
-    function Z() {
-      B = "none", v = !1;
+    function W() {
+      c = "none", C = !1;
     }
-    function ve(o) {
-      let s, a;
-      if ("touches" in o) {
-        s = o.touches[0].pageX, a = o.touches[0].pageY;
-        const c = Ie(f.value);
-        s -= c.x, a -= c.y;
+    function ve(n) {
+      let o, s;
+      if ("touches" in n) {
+        o = n.touches[0].pageX, s = n.touches[0].pageY;
+        const d = Ie(p.value);
+        o -= d.x, s -= d.y;
       } else
-        s = o.offsetX, a = o.offsetY;
-      return s = s * _ / F, a = a * _ / F, { x: s, y: a };
+        o = n.offsetX, s = n.offsetY;
+      return o = o * D / F, s = s * D / F, { x: o, y: s };
     }
-    function X(o) {
-      if (o) {
-        const pe = E.hsv.hex([C.value, D.value, A.value]);
+    function X(n) {
+      if (n) {
+        const pe = $.hsv.hex([S.value, _.value, l.value]);
         fe("changed", pe);
       }
-      const s = (C.value / 360 * 2 + 1) * Math.PI, a = Math.cos(s) * x + _ / 2, c = Math.sin(s) * x + L / 2, k = D.value / 100 * O + P, V = (1 - A.value / 100) * O + P;
-      p.reset(), p.lineWidth = 4, p.strokeStyle = "black", p.beginPath(), p.arc(a, c, se - 2, 0, 2 * Math.PI), p.stroke(), p.beginPath(), p.arc(a, c, ae, 0, 2 * Math.PI), p.fill();
-      const q = A.value > 50 ? "black" : "#ddd";
-      p.strokeStyle = q, p.fillStyle = q, p.beginPath(), p.arc(k, V, se - 2, 0, 2 * Math.PI), p.stroke(), p.beginPath(), p.arc(k, V, ae, 0, 2 * Math.PI), p.fill();
+      const o = (S.value / 360 * 2 + 1) * Math.PI, s = Math.cos(o) * m + D / 2, d = Math.sin(o) * m + q / 2, x = _.value / 100 * L + P, E = (1 - l.value / 100) * L + P;
+      g.reset(), g.lineWidth = 4, g.strokeStyle = "black", g.beginPath(), g.arc(s, d, ae - 2, 0, 2 * Math.PI), g.stroke(), g.beginPath(), g.arc(s, d, se, 0, 2 * Math.PI), g.fill();
+      const V = l.value > 50 ? "black" : "#ddd";
+      g.strokeStyle = V, g.fillStyle = V, g.beginPath(), g.arc(x, E, ae - 2, 0, 2 * Math.PI), g.stroke(), g.beginPath(), g.arc(x, E, se, 0, 2 * Math.PI), g.fill();
     }
-    function de(o) {
-      const s = E.hex.hsv(o);
-      C.value = s[0], D.value = s[1], A.value = s[2], m(), r.putImageData(e, 0, 0), X();
+    function de(n) {
+      const o = $.hex.hsv(n);
+      S.value = o[0], _.value = o[1], l.value = o[2], e(), u.putImageData(a, 0, 0), X();
     }
     const fe = y;
-    return i({ enforceTo: de }), ge(() => {
-      g(), window.addEventListener("touchend", Z), window.addEventListener("mouseup", Z);
+    return r({ enforceTo: de }), ge(() => {
+      M(), window.addEventListener("touchend", W), window.addEventListener("mouseup", W);
     }), ye(() => {
-      window.removeEventListener("touchend", Z), window.removeEventListener("mouseup", Z);
-    }), (o, s) => (T(), M("div", {
+      window.removeEventListener("touchend", W), window.removeEventListener("mouseup", W);
+    }), (n, o) => (H(), N("div", {
       class: "acpRingBody",
-      style: U({ width: F + "px", height: Be + "px" }),
-      onTouchstart: S,
-      onTouchmove: S,
-      onTouchend: Z,
-      onMousemove: s[0] || (s[0] = (a) => S(a, !0)),
-      onMousedown: s[1] || (s[1] = (a) => {
-        S(a), me(v) ? v.value = !0 : v = !0;
+      style: O({ width: F + "px", height: Be + "px" }),
+      onTouchstart: Z,
+      onTouchmove: Z,
+      onTouchend: W,
+      onMousemove: o[0] || (o[0] = (s) => Z(s, !0)),
+      onMousedown: o[1] || (o[1] = (s) => {
+        Z(s), me(C) ? C.value = !0 : C = !0;
       })
     }, [
-      l("canvas", {
-        width: _,
-        height: L,
+      i("canvas", {
+        width: D,
+        height: q,
         ref_key: "cvs",
-        ref: f
+        ref: p
       }, null, 512),
-      l("canvas", {
-        width: _,
-        height: L,
+      i("canvas", {
+        width: D,
+        height: q,
         ref_key: "cursorCvs",
         ref: w
       }, null, 512)
     ], 36));
   }
-}), ee = (d, i) => {
-  const y = d.__vccOpts || d;
-  for (const [f, w] of i)
-    y[f] = w;
+}), ee = (f, r) => {
+  const y = f.__vccOpts || f;
+  for (const [p, w] of r)
+    y[p] = w;
   return y;
 }, De = /* @__PURE__ */ ee(be, [["__scopeId", "data-v-505caf85"]]);
-function le(d) {
-  return /^#([0-9A-F]{3}){1,2}$/i.test(d);
+function le(f) {
+  return /^#([0-9A-F]{3}){1,2}$/i.test(f);
 }
-function ce(d) {
-  const i = H(!1), y = H("#ff0000"), f = K(() => {
-    let x = {};
-    return i.value || (x.boxShadow = "none"), d.entryStyles && Object.assign(x, d.entryStyles), i.value && (x.transition = "0s", Object.assign(x, d.entryActiveStyles)), x.backgroundColor = y.value, d.pos === "right" ? x.right = "0px" : x.left = "0px", x;
+function ce(f) {
+  const r = B(!1), y = B("#ff0000"), p = K(() => {
+    let m = {};
+    return r.value || (m.boxShadow = "none"), f.entryStyles && Object.assign(m, f.entryStyles), r.value && (m.transition = "0s", Object.assign(m, f.entryActiveStyles)), m.backgroundColor = y.value, f.pos === "right" ? m.right = "0px" : m.left = "0px", m;
   });
   function w() {
-    i.value = !1;
+    r.value = !1;
   }
-  let r = 0;
-  function p() {
-    if (d.entryRespondDelay && (window.clearTimeout(r), !i.value)) {
-      r = window.setTimeout(() => {
-        i.value = !0;
-      }, d.entryRespondDelay);
+  let u = 0;
+  function g() {
+    if (f.entryRespondDelay && (window.clearTimeout(u), !r.value)) {
+      u = window.setTimeout(() => {
+        r.value = !0;
+      }, f.entryRespondDelay);
       return;
     }
-    i.value = !i.value;
+    r.value = !r.value;
   }
-  function N(x) {
-    d.panelClickStopPropagation && x.stopPropagation();
+  function R(m) {
+    f.panelClickStopPropagation && m.stopPropagation();
   }
-  return { hexValue: y, panelShow: i, closePanel: w, togglePanel: p, panelBodyClick: N, entryStylesActual: f };
+  return { hexValue: y, panelShow: r, closePanel: w, togglePanel: g, panelBodyClick: R, entryStylesActual: p };
 }
 function ie() {
   window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
 }
-const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams" }, _e = {
+const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams" }, Te = {
   key: 0,
   class: "acpSingleInput"
-}, Te = ["value"], Me = {
+}, _e = ["value"], Me = {
   key: 1,
   class: "acpTripleInputs"
 }, Ae = ["value"], $e = ["value"], Ee = ["value"], Ve = {
@@ -199,159 +199,158 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
     showPackageName: { type: Boolean }
   },
   emits: ["change", "done"],
-  setup(d, { expose: i, emit: y }) {
-    const f = d, w = H(), { hexValue: r, panelShow: p, closePanel: N, togglePanel: x, panelBodyClick: b, entryStylesActual: z } = ce(f);
-    function P(m) {
-      r.value = g(m), $();
+  setup(f, { expose: r, emit: y }) {
+    const p = f, w = B(), { hexValue: u, panelShow: g, closePanel: R, togglePanel: m, entryStylesActual: U } = ce(p);
+    function T(h) {
+      u.value = a(h), M();
     }
-    const R = H("hex"), C = K(() => E.hex.rgb(r.value)), D = K(() => E.hex.hsv(r.value));
-    function A(m) {
-      var n;
-      const t = m.target;
-      if ("value" in t) {
-        const I = t.value;
+    const P = B("hex"), b = K(() => $.hex.rgb(u.value)), S = K(() => $.hex.hsv(u.value));
+    function _(h) {
+      var t;
+      const e = h.target;
+      if ("value" in e) {
+        const I = e.value;
         if (I && le(I)) {
-          r.value = g(I), (n = w.value) == null || n.enforceTo(r.value), $();
+          u.value = a(I), (t = w.value) == null || t.enforceTo(u.value), M();
           return;
         }
-        t.value = r.value;
+        e.value = u.value;
       }
     }
-    function u(m, t) {
+    function l(h, e) {
       var I;
-      const n = m.target;
-      if ("value" in n) {
-        const B = n.value;
-        if (B) {
-          let v = parseInt(B);
-          if (isNaN(v))
-            n.value = "0";
+      const t = h.target;
+      if ("value" in t) {
+        const A = t.value;
+        if (A) {
+          let c = parseInt(A);
+          if (isNaN(c))
+            t.value = "0";
           else {
-            v > 255 ? v = 255 : v < 0 && (v = 0);
-            const S = [...C.value];
-            t == "r" ? S[0] = v : t == "g" ? S[1] = v : S[2] = v, r.value = g(E.rgb.hex(S)), (I = w.value) == null || I.enforceTo(r.value), n.value = v.toString(), $();
+            c > 255 ? c = 255 : c < 0 && (c = 0);
+            const C = [...b.value];
+            e == "r" ? C[0] = c : e == "g" ? C[1] = c : C[2] = c, u.value = a($.rgb.hex(C)), (I = w.value) == null || I.enforceTo(u.value), t.value = c.toString(), M();
             return;
           }
         }
       }
     }
-    function e(m, t) {
+    function v(h, e) {
       var I;
-      const n = m.target;
-      if ("value" in n) {
-        const B = n.value;
-        if (B) {
-          let v = parseInt(B);
-          if (isNaN(v))
-            n.value = "0";
+      const t = h.target;
+      if ("value" in t) {
+        const A = t.value;
+        if (A) {
+          let c = parseInt(A);
+          if (isNaN(c))
+            t.value = "0";
           else {
-            t === "h" ? v > 359 && (v = 359) : v > 100 && (v = 100), v < 0 && (v = 0);
-            const S = [...D.value];
-            t == "h" ? S[0] = v : t == "s" ? S[1] = v : S[2] = v, r.value = g(E.hsv.hex(S)), n.value = v.toString(), (I = w.value) == null || I.enforceTo(r.value), $();
+            e === "h" ? c > 359 && (c = 359) : c > 100 && (c = 100), c < 0 && (c = 0);
+            const C = [...S.value];
+            e == "h" ? C[0] = c : e == "s" ? C[1] = c : C[2] = c, u.value = a($.hsv.hex(C)), t.value = c.toString(), (I = w.value) == null || I.enforceTo(u.value), M();
             return;
           }
         }
       }
     }
-    function g(m) {
-      return m.startsWith("#") ? m.toUpperCase() : "#" + m.toUpperCase();
+    function a(h) {
+      return h.startsWith("#") ? h.toUpperCase() : "#" + h.toUpperCase();
     }
-    function $() {
-      W("change", r.value);
+    function M() {
+      z("change", u.value);
     }
     function j() {
-      return r.value;
+      return u.value;
     }
     re(() => {
-      f.initial && le(f.initial) && (r.value = g(f.initial));
+      p.initial && le(p.initial) && (u.value = a(p.initial));
     });
-    const W = y;
-    return i({ closePanel: N, getCurrentHex: j }), Y(p, (m) => {
-      m === !1 && W("done", r.value);
-    }), (m, t) => (T(), M("div", He, [
-      l("div", {
-        class: he(m.entryClassName || "acpEntry"),
-        style: U(h(z)),
-        onClick: t[0] || (t[0] = //@ts-ignore
-        (...n) => h(x) && h(x)(...n))
+    const z = y;
+    return r({ closePanel: R, getCurrentHex: j }), Y(g, (h) => {
+      h === !1 && z("done", u.value);
+    }), (h, e) => (H(), N("div", He, [
+      i("div", {
+        class: he(h.entryClassName || "acpEntry"),
+        style: O(k(U)),
+        onClick: e[0] || (e[0] = //@ts-ignore
+        (...t) => k(m) && k(m)(...t))
       }, null, 6),
-      h(p) ? (T(), M("div", {
+      k(g) ? (H(), N("div", {
         key: 0,
         class: "acpPanel",
-        style: U({ zIndex: (m.panelBaseZIndex || 0) + 100 }),
-        onClick: t[10] || (t[10] = //@ts-ignore
-        (...n) => h(b) && h(b)(...n))
+        style: O({ zIndex: (h.panelBaseZIndex || 0) + 100 }),
+        onClick: e[10] || (e[10] = (t) => h.panelClickStopPropagation && t.stopPropagation())
       }, [
-        l("div", Ne, [
+        i("div", Ne, [
           ue(De, {
             ref_key: "ring",
             ref: w,
-            "initial-hex": h(r),
-            onChanged: P,
-            "show-package-name": m.showPackageName
+            "initial-hex": k(u),
+            onChanged: T,
+            "show-package-name": h.showPackageName
           }, null, 8, ["initial-hex", "show-package-name"])
         ]),
-        l("div", Re, [
-          G(l("select", {
-            "onUpdate:modelValue": t[1] || (t[1] = (n) => R.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("div", Re, [
+          G(i("select", {
+            "onUpdate:modelValue": e[1] || (e[1] = (t) => P.value = t)
+          }, e[11] || (e[11] = [
+            i("option", { value: "hex" }, "HEX", -1),
+            i("option", { value: "rgb" }, "RGB", -1),
+            i("option", { value: "hsv" }, "HSV", -1)
           ]), 512), [
-            [xe, R.value]
+            [Pe, P.value]
           ]),
-          R.value == "hex" ? (T(), M("div", _e, [
-            l("input", {
-              value: h(r),
-              onBlur: A,
+          P.value == "hex" ? (H(), N("div", Te, [
+            i("input", {
+              value: k(u),
+              onBlur: _,
               spellcheck: "false",
               maxlength: "7"
-            }, null, 40, Te)
-          ])) : R.value == "rgb" ? (T(), M("div", Me, [
-            l("input", {
-              value: C.value[0],
-              onBlur: t[2] || (t[2] = (n) => u(n, "r"))
+            }, null, 40, _e)
+          ])) : P.value == "rgb" ? (H(), N("div", Me, [
+            i("input", {
+              value: b.value[0],
+              onBlur: e[2] || (e[2] = (t) => l(t, "r"))
             }, null, 40, Ae),
-            l("input", {
-              value: C.value[1],
-              onBlur: t[3] || (t[3] = (n) => u(n, "g"))
+            i("input", {
+              value: b.value[1],
+              onBlur: e[3] || (e[3] = (t) => l(t, "g"))
             }, null, 40, $e),
-            l("input", {
-              value: C.value[2],
-              onBlur: t[4] || (t[4] = (n) => u(n, "b"))
+            i("input", {
+              value: b.value[2],
+              onBlur: e[4] || (e[4] = (t) => l(t, "b"))
             }, null, 40, Ee)
-          ])) : (T(), M("div", Ve, [
-            l("input", {
-              value: D.value[0],
-              onBlur: t[5] || (t[5] = (n) => e(n, "h"))
+          ])) : (H(), N("div", Ve, [
+            i("input", {
+              value: S.value[0],
+              onBlur: e[5] || (e[5] = (t) => v(t, "h"))
             }, null, 40, qe),
-            l("input", {
-              value: D.value[1],
-              onBlur: t[6] || (t[6] = (n) => e(n, "s"))
+            i("input", {
+              value: S.value[1],
+              onBlur: e[6] || (e[6] = (t) => v(t, "s"))
             }, null, 40, Le),
-            l("input", {
-              value: D.value[2],
-              onBlur: t[7] || (t[7] = (n) => e(n, "v"))
+            i("input", {
+              value: S.value[2],
+              onBlur: e[7] || (e[7] = (t) => v(t, "v"))
             }, null, 40, Oe)
           ]))
         ]),
-        l("div", Ue, [
-          l("button", {
-            onClick: t[8] || (t[8] = //@ts-ignore
-            (...n) => h(N) && h(N)(...n))
+        i("div", Ue, [
+          i("button", {
+            onClick: e[8] || (e[8] = //@ts-ignore
+            (...t) => k(R) && k(R)(...t))
           }, "OK")
         ]),
-        m.showPackageName ? (T(), M("div", {
+        h.showPackageName ? (H(), N("div", {
           key: 0,
           class: "acpPackageName",
-          onClick: t[9] || (t[9] = //@ts-ignore
-          (...n) => h(ie) && h(ie)(...n))
+          onClick: e[9] || (e[9] = //@ts-ignore
+          (...t) => k(ie) && k(ie)(...t))
         }, " au-color-picker ")) : J("", !0)
       ], 4)) : J("", !0)
     ]));
   }
-}), We = /* @__PURE__ */ ee(ze, [["__scopeId", "data-v-3b83cd72"]]), 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__ */ 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({
   __name: "AuColorPickerPresetsNested",
   props: {
     initialSelectedPreset: {},
@@ -367,97 +366,96 @@ const He = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
     showPackageName: { type: Boolean }
   },
   emits: ["change", "done", "presetSwitched"],
-  setup(d, { emit: i }) {
-    const y = d, { hexValue: f, panelShow: w, closePanel: r, togglePanel: p, panelBodyClick: N, entryStylesActual: x } = ce(y), b = H(), z = H(), P = H("#ff0000");
-    function R(u) {
-      u ? (b.value = u.name, f.value = u.colorHex) : (b.value = void 0, f.value = P.value);
+  setup(f, { emit: r }) {
+    const y = f, { hexValue: p, panelShow: w, closePanel: u, togglePanel: g, entryStylesActual: R } = ce(y), m = B(), U = B(), T = B("#ff0000");
+    function P(l) {
+      l ? (m.value = l.name, p.value = l.colorHex) : (m.value = void 0, p.value = T.value);
     }
-    const C = i;
-    function D(u) {
-      f.value = u, P.value = u, C("change", u);
+    const b = r;
+    function S(l) {
+      p.value = l, T.value = l, b("change", l);
     }
-    function A(u) {
-      f.value = u, P.value = u, r();
+    function _(l) {
+      p.value = l, T.value = l, u();
     }
-    return Y(w, (u) => {
-      u === !1 && C("done", f.value);
-    }), Y(b, (u) => {
-      C("presetSwitched", u);
+    return Y(w, (l) => {
+      l === !1 && b("done", p.value);
+    }), Y(m, (l) => {
+      b("presetSwitched", l);
     }), re(() => {
-      var u;
-      if (y.initial && (f.value = y.initial, P.value = y.initial), y.initialSelectedPreset) {
-        const e = (u = y.presets) == null ? void 0 : u.find((g) => g.name === y.initialSelectedPreset);
-        e && R(e);
+      var l;
+      if (y.initial && (p.value = y.initial, T.value = y.initial), y.initialSelectedPreset) {
+        const v = (l = y.presets) == null ? void 0 : l.find((a) => a.name === y.initialSelectedPreset);
+        v && P(v);
       }
-    }), (u, e) => (T(), M("div", Ze, [
-      l("div", {
+    }), (l, v) => (H(), N("div", Ze, [
+      i("div", {
         class: "acpEntry",
-        style: U(h(x)),
-        onClick: e[0] || (e[0] = //@ts-ignore
-        (...g) => h(p) && h(p)(...g))
+        style: O(k(R)),
+        onClick: v[0] || (v[0] = //@ts-ignore
+        (...a) => k(g) && k(g)(...a))
       }, null, 4),
-      h(w) ? (T(), M("div", {
+      k(w) ? (H(), N("div", {
         key: 0,
         class: "acpPanel",
-        style: U({ zIndex: (u.panelBaseZIndex || 0) + 100 }),
-        onClick: e[5] || (e[5] = //@ts-ignore
-        (...g) => h(N) && h(N)(...g))
+        style: O({ zIndex: (l.panelBaseZIndex || 0) + 100 }),
+        onClick: v[5] || (v[5] = (a) => l.panelClickStopPropagation && a.stopPropagation())
       }, [
-        l("div", je, [
-          l("label", Xe, [
+        i("div", je, [
+          i("label", Xe, [
             ue(We, {
-              initial: P.value,
-              onChange: D,
-              onDone: A,
+              initial: T.value,
+              onChange: S,
+              onDone: _,
               "entry-class-name": "acpPresetBody",
               ref_key: "customPicker",
-              ref: z,
-              "show-package-name": u.showPackageName
+              ref: U,
+              "show-package-name": l.showPackageName
             }, null, 8, ["initial", "show-package-name"]),
-            G(l("input", {
+            G(i("input", {
               name: "colorType",
               type: "radio",
               id: "acpColorPresetCustom",
               value: void 0,
-              "onUpdate:modelValue": e[1] || (e[1] = (g) => b.value = g),
-              onClick: e[2] || (e[2] = (g) => R())
+              "onUpdate:modelValue": v[1] || (v[1] = (a) => m.value = a),
+              onClick: v[2] || (v[2] = (a) => P())
             }, null, 512), [
-              [te, b.value]
+              [te, m.value]
             ]),
-            e[6] || (e[6] = l("div", { class: "acpPresetName" }, "自定义", -1))
+            v[6] || (v[6] = i("div", { class: "acpPresetName" }, "自定义", -1))
           ]),
-          e[7] || (e[7] = l("div", { class: "acpSep" }, null, -1)),
-          (T(!0), M(ke, null, Pe(u.presets, (g) => (T(), M("label", {
-            for: `acpColorPreset${g.name}`
+          v[7] || (v[7] = i("div", { class: "acpSep" }, null, -1)),
+          (H(!0), N(xe, null, ke(l.presets, (a) => (H(), N("label", {
+            for: `acpColorPreset${a.name}`
           }, [
-            l("div", {
+            i("div", {
               class: "acpPresetBody",
-              style: U({ backgroundColor: g.colorHex })
+              style: O({ backgroundColor: a.colorHex })
             }, null, 4),
-            G(l("input", {
+            G(i("input", {
               name: "colorType",
               type: "radio",
-              id: `acpColorPreset${g.name}`,
-              value: g.name,
-              "onUpdate:modelValue": e[3] || (e[3] = ($) => b.value = $),
-              onClick: ($) => R(g)
+              id: `acpColorPreset${a.name}`,
+              value: a.name,
+              "onUpdate:modelValue": v[3] || (v[3] = (M) => m.value = M),
+              onClick: (M) => P(a)
             }, null, 8, Ke), [
-              [te, b.value]
+              [te, m.value]
             ]),
-            l("div", Ye, Ce(g.name), 1)
+            i("div", Ye, Ce(a.name), 1)
           ], 8, Fe))), 256)),
-          e[8] || (e[8] = l("div", { class: "acpSep" }, null, -1))
+          v[8] || (v[8] = i("div", { class: "acpSep" }, null, -1))
         ]),
-        l("div", Ge, [
-          l("button", {
-            onClick: e[4] || (e[4] = //@ts-ignore
-            (...g) => h(r) && h(r)(...g))
+        i("div", Ge, [
+          i("button", {
+            onClick: v[4] || (v[4] = //@ts-ignore
+            (...a) => k(u) && k(u)(...a))
           }, "OK")
         ])
       ], 4)) : J("", !0)
     ]));
   }
-}), tt = /* @__PURE__ */ ee(Je, [["__scopeId", "data-v-6a0f5881"]]);
+}), tt = /* @__PURE__ */ ee(Je, [["__scopeId", "data-v-78ed533d"]]);
 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-3b83cd72]{margin:0;padding:0}.acpSep[data-v-3b83cd72]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-3b83cd72]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-3b83cd72]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-3b83cd72]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-3b83cd72]:hover{color:#000}.acpEntry[data-v-3b83cd72]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-3b83cd72]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-3b83cd72]{position:relative;width:fit-content}.acp label[data-v-3b83cd72]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-3b83cd72]{cursor:pointer}.acpPackageName[data-v-3b83cd72]{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-3b83cd72]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpParams select[data-v-3b83cd72],.acpParams input[data-v-3b83cd72]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpParams select[data-v-3b83cd72]{-webkit-user-select:none;user-select:none}.acpParams input[data-v-3b83cd72]{text-align:center}.acpParams .acpSingleInput input[data-v-3b83cd72]{width:120px}.acpParams .acpTripleInputs[data-v-3b83cd72]{display:flex;justify-content:space-around}.acpParams .acpTripleInputs input[data-v-3b83cd72]{width:40px}[data-v-6a0f5881]{margin:0;padding:0}.acpSep[data-v-6a0f5881]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-6a0f5881]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-6a0f5881]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-6a0f5881]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-6a0f5881]:hover{color:#000}.acpEntry[data-v-6a0f5881]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-6a0f5881]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-6a0f5881]{position:relative;width:fit-content}.acp label[data-v-6a0f5881]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-6a0f5881]{cursor:pointer}.acpNamedPresets[data-v-6a0f5881]{margin:5px;display:flex;flex-direction:column;gap:4px}.acpNamedPresets[data-v-6a0f5881]>*{display:flex;justify-content:flex-start;align-items:center;gap:5px}.acpNamedPresets>* .acpPresetName[data-v-6a0f5881]{color:#666}.acpNamedPresets>* .acpPresetName[data-v-6a0f5881]: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-78ed533d]{margin:0;padding:0}.acpSep[data-v-78ed533d]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-78ed533d]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-78ed533d]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-78ed533d]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-78ed533d]:hover{color:#000}.acpEntry[data-v-78ed533d]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-78ed533d]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-78ed533d]{position:relative;width:fit-content}.acp label[data-v-78ed533d]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-78ed533d]{cursor:pointer}.acpNamedPresets[data-v-78ed533d]{margin:5px;display:flex;flex-direction:column;gap:4px}.acpNamedPresets[data-v-78ed533d]>*{display:flex;justify-content:flex-start;align-items:center;gap:5px}.acpNamedPresets>* .acpPresetName[data-v-78ed533d]{color:#666}.acpNamedPresets>* .acpPresetName[data-v-78ed533d]:hover{color:#000}

package/package.json

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