@aurouscia/au-color-picker 1.0.2-dev.1 → 1.0.2-dev.2

package/dist/au-color-picker.css

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