@aurouscia/au-color-picker 1.0.0 → 1.0.1

package/dist/au-color-picker.css

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

package/package.json

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