@aurouscia/au-color-picker 2.1.0 → 2.2.0

package/README.md

@@ -125,6 +125,8 @@ export interface NamedPreset{
 }
 ```
 ## 更新记录
+### 2.2.0
+新增 Tab 键输入框循环聚焦功能。面板打开时按 Tab 键可在输入框间循环切换，并自动选中已有值。
 ### 2.1.0
 新增 `color-mode-storage-key` 和 `color-mode` 属性，支持通过 `localStorage` 持久化用户选择的输入模式（HEX / RGB / HSV）。默认不启用持久化，向后兼容。
 ### 2.0.0

package/dist/au-color-picker.css

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

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

@@ -1,204 +1,204 @@
-import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he, openBlock as R, createElementBlock as N, isRef as Pe, normalizeStyle as j, createElementVNode as d, computed as Z, watch as L, onBeforeMount as ce, unref as x, normalizeClass as Se, createVNode as de, withDirectives as Q, vModelSelect as ke, createCommentVNode as ee, vModelRadio as le, Fragment as Ce, renderList as we, toDisplayString as Ie } from "vue";
-import D from "color-convert";
-function Be(l, h) {
-  const g = l.x - h.x, t = l.y - h.y;
-  return g ** 2 + t ** 2;
+import { defineComponent as ae, ref as S, onMounted as ke, onUnmounted as pe, openBlock as R, createElementBlock as b, isRef as Pe, normalizeStyle as X, createElementVNode as f, computed as J, watch as A, onBeforeMount as ge, useTemplateRef as q, nextTick as Se, unref as m, normalizeClass as Ie, createVNode as ye, withDirectives as oe, vModelSelect as Ce, createCommentVNode as le, vModelRadio as ue, Fragment as we, renderList as Re, toDisplayString as be } from "vue";
+import V from "color-convert";
+function Be(s, h) {
+  const v = s.x - h.x, o = s.y - h.y;
+  return v ** 2 + o ** 2;
 }
-function be(l, h) {
-  const g = l.x - h.x, t = l.y - h.y;
-  return Math.atan2(t, g);
+function Ve(s, h) {
+  const v = s.x - h.x, o = s.y - h.y;
+  return Math.atan2(o, v);
 }
-const M = 400, K = 400, J = 200, Ve = 200, ae = 190, se = 150, F = 200, re = 16, ie = 3, Me = /* @__PURE__ */ ne({
+const w = 400, L = 400, ne = 200, Me = 200, ie = 190, ce = 150, W = 200, fe = 16, de = 3, Te = /* @__PURE__ */ ae({
   __name: "AuColorPickerRing",
   props: {
     initialHex: {}
   },
   emits: ["changed"],
-  setup(l, { expose: h, emit: g }) {
-    const t = I(), m = I();
-    let u, c;
-    const P = { x: 199, y: 199 }, H = (ae + se) / 2, A = ae ** 2, _ = se ** 2, B = (M - F) / 2, z = B + F, C = I(0), S = I(100), w = I(100), b = l;
+  setup(s, { expose: h, emit: v }) {
+    const o = S(), p = S();
+    let i, c;
+    const x = { x: 199, y: 199 }, M = (ie + ce) / 2, T = ie ** 2, K = ce ** 2, I = (w - W) / 2, U = I + W, k = S(0), y = S(100), P = S(100), C = s;
     let a;
-    function i() {
-      createImageBitmap(a).then((o) => {
-        u.drawImage(o, 0, 0);
+    function r() {
+      createImageBitmap(a).then((n) => {
+        i.drawImage(n, 0, 0);
       });
     }
-    function v() {
-      const o = t.value?.getContext("2d"), s = m.value?.getContext("2d");
-      if (!o || !s)
+    function d() {
+      const n = o.value?.getContext("2d"), e = p.value?.getContext("2d");
+      if (!n || !e)
         throw Error("canvas context getting error");
-      if (b.initialHex) {
-        const r = D.hex.hsv(b.initialHex);
-        C.value = r[0], S.value = r[1], w.value = r[2];
+      if (C.initialHex) {
+        const t = V.hex.hsv(C.initialHex);
+        k.value = t[0], y.value = t[1], P.value = t[2];
       }
-      u = o, c = s, a = u.createImageData(M, K), E(), $(), G(), i();
+      i = n, c = e, a = i.createImageData(w, L), N(), D(), Y(), r();
     }
-    function E() {
-      for (let o = 0; o < M; o++)
-        for (let s = 0; s < K; s++) {
-          const r = { x: o, y: s };
-          if (Y(r)) {
-            const y = r.y * M * 4 + r.x * 4, V = U(r), q = D.hsv.rgb([V, 100, 100]);
-            a.data[y] = q[0], a.data[y + 1] = q[1], a.data[y + 2] = q[2], a.data[y + 3] = 255;
+    function N() {
+      for (let n = 0; n < w; n++)
+        for (let e = 0; e < L; e++) {
+          const t = { x: n, y: e };
+          if (Q(t)) {
+            const u = t.y * w * 4 + t.x * 4, l = _(t), g = V.hsv.rgb([l, 100, 100]);
+            a.data[u] = g[0], a.data[u + 1] = g[1], a.data[u + 2] = g[2], a.data[u + 3] = 255;
           }
         }
     }
-    function U(o) {
-      return 360 * ((be(o, P) + Math.PI) / (2 * Math.PI));
+    function _(n) {
+      return 360 * ((Ve(n, x) + Math.PI) / (2 * Math.PI));
     }
-    function Y(o) {
-      const s = Be(P, o);
-      return s > _ && s < A;
+    function Q(n) {
+      const e = Be(x, n);
+      return e > K && e < T;
     }
-    function $() {
-      for (let o = 0; o < M; o++)
-        for (let s = 0; s < K; s++) {
-          const r = { x: o, y: s };
-          if (p(r)) {
-            const y = r.y * M * 4 + r.x * 4, { s: V, v: q } = X(r), O = D.hsv.rgb([C.value, V, q]);
-            a.data[y] = O[0], a.data[y + 1] = O[1], a.data[y + 2] = O[2], a.data[y + 3] = 255;
+    function D() {
+      for (let n = 0; n < w; n++)
+        for (let e = 0; e < L; e++) {
+          const t = { x: n, y: e };
+          if (z(t)) {
+            const u = t.y * w * 4 + t.x * 4, { s: l, v: g } = Z(t), F = V.hsv.rgb([k.value, l, g]);
+            a.data[u] = F[0], a.data[u + 1] = F[1], a.data[u + 2] = F[2], a.data[u + 3] = 255;
           }
         }
     }
-    function X(o) {
-      const s = o.x - B, r = o.y - B;
-      let y = s / F, V = 1 - r / F;
-      return y > 1 ? y = 1 : y < 0 && (y = 0), V > 1 ? V = 1 : V < 0 && (V = 0), { s: 100 * y, v: 100 * V };
+    function Z(n) {
+      const e = n.x - I, t = n.y - I;
+      let u = e / W, l = 1 - t / W;
+      return u > 1 ? u = 1 : u < 0 && (u = 0), l > 1 ? l = 1 : l < 0 && (l = 0), { s: 100 * u, v: 100 * l };
     }
-    function p(o) {
-      return !(o.x < B || o.x > z || o.y < B || o.y > z);
+    function z(n) {
+      return !(n.x < I || n.x > U || n.y < I || n.y > U);
     }
-    let e = !1, n = "none", T = I(!1);
-    function f(o, s) {
-      if (e || s && !T.value)
+    let O = !1, B = "none", H = S(!1);
+    function $(n, e) {
+      if (O || e && !H.value)
         return;
-      e = !0;
-      const r = pe(o);
-      if (n === "none" && (p(r) ? n = "square" : Y(r) && (n = "ring")), n === "ring" && (o.preventDefault(), C.value = U(r), $(), i()), n === "square") {
-        o.preventDefault();
-        const y = X(r);
-        S.value = y.s, w.value = y.v;
+      O = !0;
+      const t = ee(n);
+      if (B === "none" && (z(t) ? B = "square" : Q(t) && (B = "ring")), B === "ring" && (n.preventDefault(), k.value = _(t), D(), r()), B === "square") {
+        n.preventDefault();
+        const u = Z(t);
+        y.value = u.s, P.value = u.v;
       }
-      n !== "none" && G(!0), e = !1;
+      B !== "none" && Y(!0), O = !1;
     }
-    function k() {
-      n = "none", T.value = !1;
+    function E() {
+      B = "none", H.value = !1;
     }
-    function pe(o) {
-      let s, r;
-      if (!t.value)
+    function ee(n) {
+      let e, t;
+      if (!o.value)
         return { x: -1, y: -1 };
-      if ("touches" in o) {
-        const y = t.value.getBoundingClientRect();
-        s = o.touches[0].clientX - y.left, r = o.touches[0].clientY - y.top;
+      if ("touches" in n) {
+        const u = o.value.getBoundingClientRect();
+        e = n.touches[0].clientX - u.left, t = n.touches[0].clientY - u.top;
       } else
-        s = o.offsetX, r = o.offsetY;
-      return s = s * M / J, r = r * M / J, { x: s, y: r };
+        e = n.offsetX, t = n.offsetY;
+      return e = e * w / ne, t = t * w / ne, { x: e, y: t };
     }
-    function G(o) {
-      if (o) {
-        const me = D.hsv.hex([C.value, S.value, w.value]);
-        ge("changed", me);
+    function Y(n) {
+      if (n) {
+        const xe = V.hsv.hex([k.value, y.value, P.value]);
+        G("changed", xe);
       }
-      const s = (C.value / 360 * 2 + 1) * Math.PI, r = Math.cos(s) * H + M / 2, y = Math.sin(s) * H + K / 2, V = S.value / 100 * F + B, q = (1 - w.value / 100) * F + B;
-      c.clearRect(0, 0, M, K), c.lineWidth = 4, c.strokeStyle = "black", c.fillStyle = "black", c.beginPath(), c.arc(r, y, re - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(r, y, ie, 0, 2 * Math.PI), c.fill();
-      const O = w.value > 50 ? "black" : "#ddd";
-      c.strokeStyle = O, c.fillStyle = O, c.beginPath(), c.arc(V, q, re - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(V, q, ie, 0, 2 * Math.PI), c.fill();
+      const e = (k.value / 360 * 2 + 1) * Math.PI, t = Math.cos(e) * M + w / 2, u = Math.sin(e) * M + L / 2, l = y.value / 100 * W + I, g = (1 - P.value / 100) * W + I;
+      c.clearRect(0, 0, w, L), c.lineWidth = 4, c.strokeStyle = "black", c.fillStyle = "black", c.beginPath(), c.arc(t, u, fe - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(t, u, de, 0, 2 * Math.PI), c.fill();
+      const F = P.value > 50 ? "black" : "#ddd";
+      c.strokeStyle = F, c.fillStyle = F, c.beginPath(), c.arc(l, g, fe - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(l, g, de, 0, 2 * Math.PI), c.fill();
     }
-    function ye(o) {
-      const s = D.hex.hsv(o);
-      C.value = s[0], S.value = s[1], w.value = s[2], $(), i(), G();
+    function te(n) {
+      const e = V.hex.hsv(n);
+      k.value = e[0], y.value = e[1], P.value = e[2], D(), r(), Y();
     }
-    const ge = g;
-    return h({ enforceTo: ye }), xe(() => {
-      v(), window.addEventListener("touchend", k), window.addEventListener("mouseup", k);
-    }), he(() => {
-      window.removeEventListener("touchend", k), window.removeEventListener("mouseup", k);
-    }), (o, s) => (R(), N("div", {
+    const G = v;
+    return h({ enforceTo: te }), ke(() => {
+      d(), window.addEventListener("touchend", E), window.addEventListener("mouseup", E);
+    }), pe(() => {
+      window.removeEventListener("touchend", E), window.removeEventListener("mouseup", E);
+    }), (n, e) => (R(), b("div", {
       class: "acpRingBody",
-      style: j({ width: J + "px", height: Ve + "px" }),
-      onTouchstart: f,
-      onTouchmove: f,
-      onTouchend: k,
-      onMousemove: s[0] || (s[0] = (r) => f(r, !0)),
-      onMousedown: s[1] || (s[1] = (r) => {
-        f(r), Pe(T) ? T.value = !0 : T = !0;
+      style: X({ width: ne + "px", height: Me + "px" }),
+      onTouchstart: $,
+      onTouchmove: $,
+      onTouchend: E,
+      onMousemove: e[0] || (e[0] = (t) => $(t, !0)),
+      onMousedown: e[1] || (e[1] = (t) => {
+        $(t), Pe(H) ? H.value = !0 : H = !0;
       })
     }, [
-      d("canvas", {
-        width: M,
-        height: K,
+      f("canvas", {
+        width: w,
+        height: L,
         ref_key: "cvs",
-        ref: t
+        ref: o
       }, null, 512),
-      d("canvas", {
-        width: M,
-        height: K,
+      f("canvas", {
+        width: w,
+        height: L,
         ref_key: "cursorCvs",
-        ref: m
+        ref: p
       }, null, 512)
     ], 36));
   }
-}), oe = (l, h) => {
-  const g = l.__vccOpts || l;
-  for (const [t, m] of h)
-    g[t] = m;
-  return g;
-}, Te = /* @__PURE__ */ oe(Me, [["__scopeId", "data-v-a0477470"]]);
-function te(l) {
-  return /^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(l);
+}), re = (s, h) => {
+  const v = s.__vccOpts || s;
+  for (const [o, p] of h)
+    v[o] = p;
+  return v;
+}, Ne = /* @__PURE__ */ re(Te, [["__scopeId", "data-v-a0477470"]]);
+function se(s) {
+  return /^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(s);
 }
-function ve(l, h) {
-  const g = I(!1), t = Z(() => {
-    let P = {};
-    return g.value || (P.boxShadow = "none"), l.entryStyles && Object.assign(P, l.entryStyles), g.value && (P.transition = "0s", Object.assign(P, l.entryActiveStyles)), P.backgroundColor = h.value, P;
+function me(s, h) {
+  const v = S(!1), o = J(() => {
+    let x = {};
+    return v.value || (x.boxShadow = "none"), s.entryStyles && Object.assign(x, s.entryStyles), v.value && (x.transition = "0s", Object.assign(x, s.entryActiveStyles)), x.backgroundColor = h.value, x;
   });
-  function m() {
-    g.value = !1;
+  function p() {
+    v.value = !1;
   }
-  let u = 0;
+  let i = 0;
   function c() {
-    if (l.entryRespondDelay && (window.clearTimeout(u), !g.value)) {
-      u = window.setTimeout(() => {
-        g.value = !0;
-      }, l.entryRespondDelay);
+    if (s.entryRespondDelay && (window.clearTimeout(i), !v.value)) {
+      i = window.setTimeout(() => {
+        v.value = !0;
+      }, s.entryRespondDelay);
       return;
     }
-    g.value = !g.value;
+    v.value = !v.value;
   }
-  return { panelShow: g, closePanel: m, togglePanel: c, entryStylesActual: t };
+  return { panelShow: v, closePanel: p, togglePanel: c, entryStylesActual: o };
 }
-function ue() {
+function ve() {
   window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
 }
-function W(l) {
-  return l.startsWith("#") ? l.toUpperCase() : "#" + l.toUpperCase();
+function j(s) {
+  return s.startsWith("#") ? s.toUpperCase() : "#" + s.toUpperCase();
 }
-function fe(l) {
+function he(s) {
   return {
-    panelStyles: Z(() => {
-      const g = l.panelBaseZIndex;
-      let t, m;
-      const u = l.pos;
-      return typeof u == "number" ? t = u + "px" : u == "left" ? m = "0px" : t = "0px", {
-        zIndex: (g || 0) + 100,
-        left: t,
-        right: m
+    panelStyles: J(() => {
+      const v = s.panelBaseZIndex;
+      let o, p;
+      const i = s.pos;
+      return typeof i == "number" ? o = i + "px" : i == "left" ? p = "0px" : o = "0px", {
+        zIndex: (v || 0) + 100,
+        left: o,
+        right: p
       };
     })
   };
 }
-const Re = { class: "acp" }, Ne = { class: "acpRing" }, De = { class: "acpParams" }, He = {
+const De = { class: "acp" }, He = { class: "acpRing" }, Ee = { class: "acpParams" }, Ae = {
   key: 0,
   class: "acpSingleInput"
-}, Ae = ["value"], Ee = {
+}, _e = ["value"], $e = {
   key: 1,
   class: "acpTripleInputs"
-}, $e = ["value"], qe = ["value"], Ue = ["value"], Ke = {
+}, qe = ["value"], Le = ["value"], Ke = ["value"], Ue = {
   key: 2,
   class: "acpTripleInputs"
-}, Le = ["value"], _e = ["value"], ze = ["value"], Oe = { class: "acpDoneBtn" }, Fe = /* @__PURE__ */ ne({
+}, ze = ["value"], Oe = ["value"], Fe = ["value"], We = { class: "acpDoneBtn" }, je = /* @__PURE__ */ ae({
   __name: "AuColorPicker",
   props: {
     modelValue: {},
@@ -215,184 +215,216 @@ const Re = { class: "acp" }, Ne = { class: "acpRing" }, De = { class: "acpParams
     colorMode: {}
   },
   emits: ["done", "update:modelValue"],
-  setup(l, { expose: h, emit: g }) {
-    const t = l, m = I(), u = I("#ff0000"), { panelShow: c, closePanel: P, togglePanel: H, entryStylesActual: A } = ve(t, u), { panelStyles: _ } = fe(t);
-    function B() {
-      return t.colorModeStorageKey === !1 || t.colorModeStorageKey === "" ? !1 : t.colorModeStorageKey || !1;
+  setup(s, { expose: h, emit: v }) {
+    const o = s, p = S(), i = S("#ff0000"), { panelShow: c, closePanel: x, togglePanel: M, entryStylesActual: T } = me(o, i), { panelStyles: K } = he(o);
+    function I() {
+      return o.colorModeStorageKey === !1 || o.colorModeStorageKey === "" ? !1 : o.colorModeStorageKey || !1;
     }
-    function z() {
-      const p = B();
-      if (!p) return null;
+    function U() {
+      const n = I();
+      if (!n) return null;
       try {
-        const e = localStorage.getItem(p);
+        const e = localStorage.getItem(n);
         if (e === "rgb" || e === "hsv" || e === "hex")
           return e;
       } catch {
       }
       return null;
     }
-    function C(p) {
-      const e = B();
+    function k(n) {
+      const e = I();
       if (e)
         try {
-          localStorage.setItem(e, p);
+          localStorage.setItem(e, n);
         } catch {
         }
     }
-    const S = I(z() || t.colorMode || "hex");
-    L(S, C);
-    function w(p) {
-      u.value = W(p), U();
+    const y = S(U() || o.colorMode || "hex");
+    A(y, k);
+    function P(n) {
+      i.value = j(n), _();
     }
-    const b = Z(() => D.hex.rgb(u.value)), a = Z(() => D.hex.hsv(u.value));
-    function i(p) {
-      const e = p.target;
+    const C = J(() => V.hex.rgb(i.value)), a = J(() => V.hex.hsv(i.value));
+    function r(n) {
+      const e = n.target;
       if ("value" in e) {
-        const n = e.value;
-        if (n && te(n)) {
-          u.value = W(n), m.value?.enforceTo(u.value), U();
+        const t = e.value;
+        if (t && se(t)) {
+          i.value = j(t), p.value?.enforceTo(i.value), _();
           return;
         }
-        e.value = u.value;
+        e.value = i.value;
       }
     }
-    function v(p, e) {
-      const n = p.target;
-      if ("value" in n) {
-        const T = n.value;
-        if (T) {
-          let f = parseInt(T);
-          if (isNaN(f))
-            n.value = "0";
+    function d(n, e) {
+      const t = n.target;
+      if ("value" in t) {
+        const u = t.value;
+        if (u) {
+          let l = parseInt(u);
+          if (isNaN(l))
+            t.value = "0";
           else {
-            f > 255 ? f = 255 : f < 0 && (f = 0);
-            const k = [...b.value];
-            e == "r" ? k[0] = f : e == "g" ? k[1] = f : k[2] = f, u.value = W(D.rgb.hex(k)), m.value?.enforceTo(u.value), n.value = f.toString(), U();
+            l > 255 ? l = 255 : l < 0 && (l = 0);
+            const g = [...C.value];
+            e == "r" ? g[0] = l : e == "g" ? g[1] = l : g[2] = l, i.value = j(V.rgb.hex(g)), p.value?.enforceTo(i.value), t.value = l.toString(), _();
             return;
           }
         }
       }
     }
-    function E(p, e) {
-      const n = p.target;
-      if ("value" in n) {
-        const T = n.value;
-        if (T) {
-          let f = parseInt(T);
-          if (isNaN(f))
-            n.value = "0";
+    function N(n, e) {
+      const t = n.target;
+      if ("value" in t) {
+        const u = t.value;
+        if (u) {
+          let l = parseInt(u);
+          if (isNaN(l))
+            t.value = "0";
           else {
-            e === "h" ? f > 359 && (f = 359) : f > 100 && (f = 100), f < 0 && (f = 0);
-            const k = [...a.value];
-            e == "h" ? k[0] = f : e == "s" ? k[1] = f : k[2] = f, u.value = W(D.hsv.hex(k)), n.value = f.toString(), m.value?.enforceTo(u.value), U();
+            e === "h" ? l > 359 && (l = 359) : l > 100 && (l = 100), l < 0 && (l = 0);
+            const g = [...a.value];
+            e == "h" ? g[0] = l : e == "s" ? g[1] = l : g[2] = l, i.value = j(V.hsv.hex(g)), t.value = l.toString(), p.value?.enforceTo(i.value), _();
             return;
           }
         }
       }
     }
-    function U() {
-      X("update:modelValue", u.value);
+    function _() {
+      Z("update:modelValue", i.value);
     }
-    function Y() {
-      return u.value;
+    function Q() {
+      return i.value;
     }
-    function $(p) {
-      if (te(p)) {
-        const e = W(p);
-        u.value = e, m.value?.enforceTo(e);
+    function D(n) {
+      if (se(n)) {
+        const e = j(n);
+        i.value = e, p.value?.enforceTo(e);
       }
     }
-    ce(() => {
-      t.modelValue ? $(t.modelValue) : t.initial && $(t.initial);
+    ge(() => {
+      o.modelValue ? D(o.modelValue) : o.initial && D(o.initial);
+    });
+    const Z = v;
+    h({ closePanel: x, getCurrentHex: Q, enforceTo: D }), A(() => o.modelValue, (n) => {
+      n && n !== i.value && D(n);
+    }), A(c, (n) => {
+      n === !1 && Z("done");
     });
-    const X = g;
-    return h({ closePanel: P, getCurrentHex: Y, enforceTo: $ }), L(() => t.modelValue, (p) => {
-      p && p !== u.value && $(p);
-    }), L(c, (p) => {
-      p === !1 && X("done");
-    }), (p, e) => (R(), N("div", Re, [
-      d("div", {
-        class: Se(l.entryClassName || "acpEntry"),
-        style: j(x(A)),
+    const z = q("hexInputRef"), O = q("rgbInputRef0"), B = q("rgbInputRef1"), H = q("rgbInputRef2"), $ = q("hsvInputRef0"), E = q("hsvInputRef1"), ee = q("hsvInputRef2");
+    function Y() {
+      return y.value === "hex" ? z.value ? [z.value] : [] : y.value === "rgb" ? [O.value, B.value, H.value].filter(Boolean) : [$.value, E.value, ee.value].filter(Boolean);
+    }
+    function te() {
+      const n = Y();
+      if (n.length === 0) return;
+      const e = document.activeElement, t = n.findIndex((g) => g === e), u = t >= 0 ? (t + 1) % n.length : 0, l = n[u];
+      l && (l.focus(), l.select());
+    }
+    function G(n) {
+      n.key === "Tab" && (n.preventDefault(), te());
+    }
+    return A(c, async (n) => {
+      n === !0 ? (await Se(), window.addEventListener("keydown", G)) : window.removeEventListener("keydown", G);
+    }), pe(() => {
+      window.removeEventListener("keydown", G);
+    }), (n, e) => (R(), b("div", De, [
+      f("div", {
+        class: Ie(s.entryClassName || "acpEntry"),
+        style: X(m(T)),
         onClick: e[0] || (e[0] = //@ts-ignore
-        (...n) => x(H) && x(H)(...n))
+        (...t) => m(M) && m(M)(...t))
       }, null, 6),
-      x(c) ? (R(), N("div", {
+      m(c) ? (R(), b("div", {
         key: 0,
         class: "acpPanel",
-        style: j(x(_)),
-        onClick: e[10] || (e[10] = (n) => l.panelClickStopPropagation && n.stopPropagation())
+        style: X(m(K)),
+        onClick: e[10] || (e[10] = (t) => s.panelClickStopPropagation && t.stopPropagation())
       }, [
-        d("div", Ne, [
-          de(Te, {
+        f("div", He, [
+          ye(Ne, {
             ref_key: "ring",
-            ref: m,
-            "initial-hex": u.value,
-            onChanged: w,
-            "show-package-name": l.showPackageName
+            ref: p,
+            "initial-hex": i.value,
+            onChanged: P,
+            "show-package-name": s.showPackageName
           }, null, 8, ["initial-hex", "show-package-name"])
         ]),
-        d("div", De, [
-          Q(d("select", {
-            "onUpdate:modelValue": e[1] || (e[1] = (n) => S.value = n)
+        f("div", Ee, [
+          oe(f("select", {
+            "onUpdate:modelValue": e[1] || (e[1] = (t) => y.value = t)
           }, [...e[11] || (e[11] = [
-            d("option", { value: "hex" }, "HEX", -1),
-            d("option", { value: "rgb" }, "RGB", -1),
-            d("option", { value: "hsv" }, "HSV", -1)
+            f("option", { value: "hex" }, "HEX", -1),
+            f("option", { value: "rgb" }, "RGB", -1),
+            f("option", { value: "hsv" }, "HSV", -1)
           ])], 512), [
-            [ke, S.value]
+            [Ce, y.value]
           ]),
-          S.value == "hex" ? (R(), N("div", He, [
-            d("input", {
-              value: u.value,
-              onBlur: i,
+          y.value == "hex" ? (R(), b("div", Ae, [
+            f("input", {
+              ref_key: "hexInputRef",
+              ref: z,
+              value: i.value,
+              onBlur: r,
               spellcheck: "false",
               maxlength: "7"
-            }, null, 40, Ae)
-          ])) : S.value == "rgb" ? (R(), N("div", Ee, [
-            d("input", {
-              value: b.value[0],
-              onBlur: e[2] || (e[2] = (n) => v(n, "r"))
-            }, null, 40, $e),
-            d("input", {
-              value: b.value[1],
-              onBlur: e[3] || (e[3] = (n) => v(n, "g"))
+            }, null, 40, _e)
+          ])) : y.value == "rgb" ? (R(), b("div", $e, [
+            f("input", {
+              ref_key: "rgbInputRef0",
+              ref: O,
+              value: C.value[0],
+              onBlur: e[2] || (e[2] = (t) => d(t, "r"))
             }, null, 40, qe),
-            d("input", {
-              value: b.value[2],
-              onBlur: e[4] || (e[4] = (n) => v(n, "b"))
-            }, null, 40, Ue)
-          ])) : (R(), N("div", Ke, [
-            d("input", {
-              value: a.value[0],
-              onBlur: e[5] || (e[5] = (n) => E(n, "h"))
+            f("input", {
+              ref_key: "rgbInputRef1",
+              ref: B,
+              value: C.value[1],
+              onBlur: e[3] || (e[3] = (t) => d(t, "g"))
             }, null, 40, Le),
-            d("input", {
+            f("input", {
+              ref_key: "rgbInputRef2",
+              ref: H,
+              value: C.value[2],
+              onBlur: e[4] || (e[4] = (t) => d(t, "b"))
+            }, null, 40, Ke)
+          ])) : (R(), b("div", Ue, [
+            f("input", {
+              ref_key: "hsvInputRef0",
+              ref: $,
+              value: a.value[0],
+              onBlur: e[5] || (e[5] = (t) => N(t, "h"))
+            }, null, 40, ze),
+            f("input", {
+              ref_key: "hsvInputRef1",
+              ref: E,
               value: a.value[1],
-              onBlur: e[6] || (e[6] = (n) => E(n, "s"))
-            }, null, 40, _e),
-            d("input", {
+              onBlur: e[6] || (e[6] = (t) => N(t, "s"))
+            }, null, 40, Oe),
+            f("input", {
+              ref_key: "hsvInputRef2",
+              ref: ee,
               value: a.value[2],
-              onBlur: e[7] || (e[7] = (n) => E(n, "v"))
-            }, null, 40, ze)
+              onBlur: e[7] || (e[7] = (t) => N(t, "v"))
+            }, null, 40, Fe)
           ]))
         ]),
-        d("div", Oe, [
-          d("button", {
+        f("div", We, [
+          f("button", {
             onClick: e[8] || (e[8] = //@ts-ignore
-            (...n) => x(P) && x(P)(...n))
+            (...t) => m(x) && m(x)(...t))
           }, "OK")
         ]),
-        l.showPackageName ? (R(), N("div", {
+        s.showPackageName ? (R(), b("div", {
           key: 0,
           class: "acpPackageName",
           onClick: e[9] || (e[9] = //@ts-ignore
-          (...n) => x(ue) && x(ue)(...n))
-        }, " au-color-picker ")) : ee("", !0)
-      ], 4)) : ee("", !0)
+          (...t) => m(ve) && m(ve)(...t))
+        }, " au-color-picker ")) : le("", !0)
+      ], 4)) : le("", !0)
     ]));
   }
-}), We = /* @__PURE__ */ oe(Fe, [["__scopeId", "data-v-d4794019"]]), je = { class: "acp" }, Xe = { class: "acpNamedPresets" }, Ze = ["for", "onClick"], Ye = ["id", "value"], Ge = { class: "acpPresetName" }, Je = { class: "acpDoneBtn" }, Qe = /* @__PURE__ */ ne({
+}), Xe = /* @__PURE__ */ re(je, [["__scopeId", "data-v-0a352b8c"]]), Ze = { class: "acp" }, Ye = { class: "acpNamedPresets" }, Ge = ["for", "onClick"], Je = ["id", "value"], Qe = { class: "acpPresetName" }, et = { class: "acpDoneBtn" }, tt = /* @__PURE__ */ ae({
   __name: "AuColorPickerPresetsNested",
   props: {
     modelValueSelectedPreset: {},
@@ -413,111 +445,111 @@ const Re = { class: "acp" }, Ne = { class: "acpRing" }, De = { class: "acpParams
     colorMode: {}
   },
   emits: ["done", "update:modelValue", "update:modelValueSelectedPreset"],
-  setup(l, { expose: h, emit: g }) {
-    const t = l, m = I(), u = I(), c = I("#ff0000"), P = Z(() => {
+  setup(s, { expose: h, emit: v }) {
+    const o = s, p = S(), i = S(), c = S("#ff0000"), x = J(() => {
       let a = null;
-      return m.value && (a = t.presets?.find((v) => v.name == m.value)?.colorHex), a || c.value;
-    }), { panelShow: H, closePanel: A, togglePanel: _, entryStylesActual: B } = ve(t, P), { panelStyles: z } = fe(t);
-    function C(a) {
-      m.value = a?.name, S("update:modelValueSelectedPreset", a?.name);
+      return p.value && (a = o.presets?.find((d) => d.name == p.value)?.colorHex), a || c.value;
+    }), { panelShow: M, closePanel: T, togglePanel: K, entryStylesActual: I } = me(o, x), { panelStyles: U } = he(o);
+    function k(a) {
+      p.value = a?.name, y("update:modelValueSelectedPreset", a?.name);
     }
-    const S = g;
-    L(c, (a) => {
-      S("update:modelValue", a);
+    const y = v;
+    A(c, (a) => {
+      y("update:modelValue", a);
     });
-    function w(a) {
-      if (te(a)) {
-        const i = W(a);
-        c.value = i, u.value?.enforceTo(i);
+    function P(a) {
+      if (se(a)) {
+        const r = j(a);
+        c.value = r, i.value?.enforceTo(r);
       }
     }
-    function b(a) {
-      a || C(void 0);
-      const i = t.presets?.find((v) => v.name === a);
-      i && C(i);
+    function C(a) {
+      a || k(void 0);
+      const r = o.presets?.find((d) => d.name === a);
+      r && k(r);
     }
-    return h({ closePanel: A, enforceCustomValueTo: w, enforcePresetTo: b }), L(H, (a) => {
-      a === !1 && S("done");
-    }), L(() => t.modelValue, (a) => {
-      a && w(a);
-    }), L(() => t.modelValueSelectedPreset, (a) => {
-      b(a);
-    }), ce(() => {
-      t.modelValue ? w(t.modelValue) : t.initial && w(t.initial), t.modelValueSelectedPreset ? b(t.modelValueSelectedPreset) : t.initialSelectedPreset && b(t.initialSelectedPreset);
-    }), (a, i) => (R(), N("div", je, [
-      d("div", {
+    return h({ closePanel: T, enforceCustomValueTo: P, enforcePresetTo: C }), A(M, (a) => {
+      a === !1 && y("done");
+    }), A(() => o.modelValue, (a) => {
+      a && P(a);
+    }), A(() => o.modelValueSelectedPreset, (a) => {
+      C(a);
+    }), ge(() => {
+      o.modelValue ? P(o.modelValue) : o.initial && P(o.initial), o.modelValueSelectedPreset ? C(o.modelValueSelectedPreset) : o.initialSelectedPreset && C(o.initialSelectedPreset);
+    }), (a, r) => (R(), b("div", Ze, [
+      f("div", {
         class: "acpEntry",
-        style: j(x(B)),
-        onClick: i[0] || (i[0] = //@ts-ignore
-        (...v) => x(_) && x(_)(...v))
+        style: X(m(I)),
+        onClick: r[0] || (r[0] = //@ts-ignore
+        (...d) => m(K) && m(K)(...d))
       }, null, 4),
-      x(H) ? (R(), N("div", {
+      m(M) ? (R(), b("div", {
         key: 0,
         class: "acpPanel",
-        style: j(x(z)),
-        onClick: i[6] || (i[6] = (v) => l.panelClickStopPropagation && v.stopPropagation())
+        style: X(m(U)),
+        onClick: r[6] || (r[6] = (d) => s.panelClickStopPropagation && d.stopPropagation())
       }, [
-        d("div", Xe, [
-          d("label", {
+        f("div", Ye, [
+          f("label", {
             for: "acpColorPresetCustom",
-            onClick: i[3] || (i[3] = (v) => C(void 0))
+            onClick: r[3] || (r[3] = (d) => k(void 0))
           }, [
-            de(We, {
+            ye(Xe, {
               modelValue: c.value,
-              "onUpdate:modelValue": i[1] || (i[1] = (v) => c.value = v),
-              onDone: x(A),
+              "onUpdate:modelValue": r[1] || (r[1] = (d) => c.value = d),
+              onDone: m(T),
               "entry-class-name": "acpPresetBody",
               ref_key: "customPicker",
-              ref: u,
-              "show-package-name": l.showPackageName,
-              pos: l.posInternal
+              ref: i,
+              "show-package-name": s.showPackageName,
+              pos: s.posInternal
             }, null, 8, ["modelValue", "onDone", "show-package-name", "pos"]),
-            Q(d("input", {
+            oe(f("input", {
               name: "colorType",
               type: "radio",
               id: "acpColorPresetCustom",
               value: void 0,
-              "onUpdate:modelValue": i[2] || (i[2] = (v) => m.value = v)
+              "onUpdate:modelValue": r[2] || (r[2] = (d) => p.value = d)
             }, null, 512), [
-              [le, m.value]
+              [ue, p.value]
             ]),
-            i[7] || (i[7] = d("div", { class: "acpPresetName" }, "自定义", -1))
+            r[7] || (r[7] = f("div", { class: "acpPresetName" }, "自定义", -1))
           ]),
-          i[8] || (i[8] = d("div", { class: "acpSep" }, null, -1)),
-          (R(!0), N(Ce, null, we(l.presets, (v) => (R(), N("label", {
-            for: `acpColorPreset${v.name}`,
-            onClick: (E) => C(v),
-            key: v.name
+          r[8] || (r[8] = f("div", { class: "acpSep" }, null, -1)),
+          (R(!0), b(we, null, Re(s.presets, (d) => (R(), b("label", {
+            for: `acpColorPreset${d.name}`,
+            onClick: (N) => k(d),
+            key: d.name
           }, [
-            d("div", {
+            f("div", {
               class: "acpPresetBody",
-              style: j({ backgroundColor: v.colorHex })
+              style: X({ backgroundColor: d.colorHex })
             }, null, 4),
-            Q(d("input", {
+            oe(f("input", {
               name: "colorType",
               type: "radio",
-              id: `acpColorPreset${v.name}`,
-              value: v.name,
-              "onUpdate:modelValue": i[4] || (i[4] = (E) => m.value = E)
-            }, null, 8, Ye), [
-              [le, m.value]
+              id: `acpColorPreset${d.name}`,
+              value: d.name,
+              "onUpdate:modelValue": r[4] || (r[4] = (N) => p.value = N)
+            }, null, 8, Je), [
+              [ue, p.value]
             ]),
-            d("div", Ge, Ie(v.name), 1)
-          ], 8, Ze))), 128)),
-          i[9] || (i[9] = d("div", { class: "acpSep" }, null, -1))
+            f("div", Qe, be(d.name), 1)
+          ], 8, Ge))), 128)),
+          r[9] || (r[9] = f("div", { class: "acpSep" }, null, -1))
         ]),
-        d("div", Je, [
-          d("button", {
-            onClick: i[5] || (i[5] = //@ts-ignore
-            (...v) => x(A) && x(A)(...v))
+        f("div", et, [
+          f("button", {
+            onClick: r[5] || (r[5] = //@ts-ignore
+            (...d) => m(T) && m(T)(...d))
           }, "OK")
         ])
-      ], 4)) : ee("", !0)
+      ], 4)) : le("", !0)
     ]));
   }
-}), nt = /* @__PURE__ */ oe(Qe, [["__scopeId", "data-v-9fbc3723"]]);
+}), lt = /* @__PURE__ */ re(tt, [["__scopeId", "data-v-9fbc3723"]]);
 export {
-  We as AuColorPicker,
-  nt as AuColorPickerPresetsNested,
-  Te as AuColorPickerRing
+  Xe as AuColorPicker,
+  lt as AuColorPickerPresetsNested,
+  Ne as AuColorPickerRing
 };

package/dist/types/components/AuColorPicker.vue.d.ts

@@ -38,5 +38,12 @@ declare const _default: import('vue').DefineComponent<PickerProps, {
     }>, {
         enforceTo: (hex: HEX) => void;
     }, {}, {}, {}, {}> | null;
+    hexInputRef: HTMLInputElement;
+    rgbInputRef0: HTMLInputElement;
+    rgbInputRef1: HTMLInputElement;
+    rgbInputRef2: HTMLInputElement;
+    hsvInputRef0: HTMLInputElement;
+    hsvInputRef1: HTMLInputElement;
+    hsvInputRef2: HTMLInputElement;
 }, HTMLDivElement>;
 export default _default;

package/dist/types/components/AuColorPickerPresetsNested.vue.d.ts

@@ -50,6 +50,13 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
         }>, {
             enforceTo: (hex: import('color-convert').HEX) => void;
         }, {}, {}, {}, {}> | null;
+        hexInputRef: HTMLInputElement;
+        rgbInputRef0: HTMLInputElement;
+        rgbInputRef1: HTMLInputElement;
+        rgbInputRef2: HTMLInputElement;
+        hsvInputRef0: HTMLInputElement;
+        hsvInputRef1: HTMLInputElement;
+        hsvInputRef2: HTMLInputElement;
     }, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurouscia/au-color-picker",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": {
     "name": "Au"
   },