@aurouscia/au-color-picker 0.2.0 → 0.3.0

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

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

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

package/dist/types/components/common/pickerProps.d.ts

@@ -6,6 +6,7 @@ export interface PickerProps {
     entryClassName?: string;
     pos?: 'left' | 'right';
     panelBaseZIndex?: number;
+    entryRespondDelay?: number;
     showPackageName?: boolean;
 }
 export interface PickerWithPresetsProps extends PickerProps {

package/package.json

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