@aurouscia/au-color-picker 0.4.3 → 0.4.4

package/README.md

@@ -48,6 +48,18 @@ const presets:NamedPreset[] = [
     ></AuColorPickerPresetsNested>
 ```
 
+### 覆盖当前值
+覆盖值并不会触发回调
+```ts
+const picker = ref<InstanceType<typeof AuColorPicker>>()
+const pickerNested = ref<InstanceType<typeof AuColorPickerPresetsNested>>()
+function enforceToDemo(){
+  picker.value?.enforceTo('#ff00ff')
+  pickerNested.value?.enforceCustomValueTo('#ff00ff')
+  pickerNested.value?.enforcePresetTo('水系')
+}
+```
+
 ### 组件属性定义
 ```ts
 //AuColorPicker的属性

package/dist/au-color-picker.css

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

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

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

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

@@ -1,13 +1,42 @@
+import { HEX } from 'color-convert/conversions';
 import { PickerProps } from './common/pickerProps';
 declare function getCurrentHex(): string;
+declare function enforceTo(newHexValue: string): void;
 declare const _default: import('vue').DefineComponent<PickerProps, {
     closePanel: () => void;
     getCurrentHex: typeof getCurrentHex;
+    enforceTo: typeof enforceTo;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     done: (hexStr: string) => any;
     change: (hexStr: string) => any;
 }, string, import('vue').PublicProps, Readonly<PickerProps> & Readonly<{
     onDone?: ((hexStr: string) => any) | undefined;
     onChange?: ((hexStr: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    ring: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        initialHex?: string;
+    }> & Readonly<{
+        onChanged?: ((hex: string) => any) | undefined;
+    }>, {
+        enforceTo: (hex: HEX) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        changed: (hex: string) => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        cvs: HTMLCanvasElement;
+        cursorCvs: HTMLCanvasElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        initialHex?: string;
+    }> & Readonly<{
+        onChanged?: ((hex: string) => any) | undefined;
+    }>, {
+        enforceTo: (hex: HEX) => void;
+    }, {}, {}, {}, {}> | null;
+}, HTMLDivElement>;
 export default _default;

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

@@ -1,6 +1,10 @@
 import { PickerWithPresetsProps } from './common/pickerProps';
+declare function enforceCustomValueTo(newHexValue: string): void;
+declare function enforcePresetTo(name?: string): void;
 declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
     closePanel: () => void;
+    enforceCustomValueTo: typeof enforceCustomValueTo;
+    enforcePresetTo: typeof enforcePresetTo;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     done: (hexStr: string) => any;
     change: (hexStr: string) => any;
@@ -9,5 +13,57 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
     onDone?: ((hexStr: string) => any) | undefined;
     onChange?: ((hexStr: string) => any) | undefined;
     onPresetSwitched?: ((name: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    customPicker: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('..').PickerProps> & Readonly<{
+        onDone?: ((hexStr: string) => any) | undefined;
+        onChange?: ((hexStr: string) => any) | undefined;
+    }>, {
+        closePanel: () => void;
+        getCurrentHex: () => string;
+        enforceTo: (newHexValue: string) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        done: (hexStr: string) => any;
+        change: (hexStr: string) => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        ring: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            initialHex?: string;
+        }> & Readonly<{
+            onChanged?: ((hex: string) => any) | undefined;
+        }>, {
+            enforceTo: (hex: import('color-convert/conversions').HEX) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            changed: (hex: string) => any;
+        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            cvs: HTMLCanvasElement;
+            cursorCvs: HTMLCanvasElement;
+        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            initialHex?: string;
+        }> & Readonly<{
+            onChanged?: ((hex: string) => any) | undefined;
+        }>, {
+            enforceTo: (hex: import('color-convert/conversions').HEX) => void;
+        }, {}, {}, {}, {}> | null;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('..').PickerProps> & Readonly<{
+        onDone?: ((hexStr: string) => any) | undefined;
+        onChange?: ((hexStr: string) => any) | undefined;
+    }>, {
+        closePanel: () => void;
+        getCurrentHex: () => string;
+        enforceTo: (newHexValue: string) => void;
+    }, {}, {}, {}, {}> | null;
+}, HTMLDivElement>;
 export default _default;

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

@@ -1,14 +1,16 @@
 import { HEX } from 'color-convert/conversions';
-declare function enforceTo(hex: HEX): void;
-declare const _default: import('vue').DefineComponent<{
+type __VLS_Props = {
     initialHex?: string;
-}, {
+};
+declare function enforceTo(hex: HEX): void;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
     enforceTo: typeof enforceTo;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     changed: (hex: string) => any;
-}, string, import('vue').PublicProps, Readonly<{
-    initialHex?: string;
-}> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChanged?: ((hex: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    cvs: HTMLCanvasElement;
+    cursorCvs: HTMLCanvasElement;
+}, HTMLDivElement>;
 export default _default;

package/package.json

@@ -14,7 +14,7 @@
     "color",
     "component"
   ],
-  "version": "0.4.3",
+  "version": "0.4.4",
   "type": "module",
   "files": [
     "dist"
@@ -41,11 +41,11 @@
   },
   "devDependencies": {
     "@types/color-convert": "^2.0.4",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.10",
     "@vitejs/plugin-vue": "^5.2.1",
-    "sass": "^1.81.0",
-    "typescript": "^5.7.2",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.3.0"
+    "sass": "^1.83.4",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.5.0"
   }
 }

package/dist/style.css

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