@aurouscia/au-color-picker 1.0.2-dev.3 → 1.1.0

package/README.md

@@ -93,6 +93,11 @@ export interface NamedPreset{
     name:string
 }
 ```
+## 更新记录
+### 1.0.0
+修改了api
+### 1.1.0
+修复了旧浏览器上失效的问题（消除过新的context.reset函数）
 
 ## 许可证
 MIT

package/dist/au-color-picker.css

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurouscia/au-color-picker",
-  "version": "1.0.2-dev.3",
+  "version": "1.1.0",
   "author": {
     "name": "Au"
   },