@aurouscia/au-color-picker 0.0.6 → 0.1.1

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

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

package/dist/style.css

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

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

@@ -1,24 +1,13 @@
-import { CSSProperties } from 'vue';
-declare function closePanel(): void;
-declare const _default: import("vue").DefineComponent<{
-    inital?: string;
-    entryStyles?: CSSProperties;
-    entryActiveStyles?: CSSProperties;
-    pos?: "left" | "right";
-    panelBaseZIndex?: number;
-}, {
-    closePanel: typeof closePanel;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import { PickerProps } from './common/pickerProps';
+declare function getCurrentHex(): string;
+declare const _default: import('vue').DefineComponent<PickerProps, {
+    closePanel: () => void;
+    getCurrentHex: typeof getCurrentHex;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     done: (hexStr: string) => any;
     change: (hexStr: string) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    inital?: string;
-    entryStyles?: CSSProperties;
-    entryActiveStyles?: CSSProperties;
-    pos?: "left" | "right";
-    panelBaseZIndex?: number;
-}> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<PickerProps> & Readonly<{
     onDone?: ((hexStr: string) => any) | undefined;
     onChange?: ((hexStr: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,9 @@
+import { PickerProps } from './common/pickerProps';
+declare const _default: import('vue').DefineComponent<PickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    done: (hexStr: string) => any;
+    change: (hexStr: string) => any;
+}, string, import('vue').PublicProps, Readonly<PickerProps> & Readonly<{
+    onDone?: ((hexStr: string) => any) | undefined;
+    onChange?: ((hexStr: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

package/dist/types/components/common/pickerProps.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'vue';
+export interface PickerProps {
+    inital?: string;
+    entryStyles?: CSSProperties;
+    entryActiveStyles?: CSSProperties;
+    entryClassName?: string;
+    pos?: 'left' | 'right';
+    panelBaseZIndex?: number;
+    presets?: NamedPreset[];
+}
+export interface NamedPreset {
+    colorHex: string;
+    name: string;
+}

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
-export { default as AuColorPicker } from "./components/AuColorPicker.vue";
-export { default as AuColorPickerRing } from "./components/AuColorPickerRing.vue";
+export { default as AuColorPicker } from './components/AuColorPicker.vue';
+export { default as AuColorPickerRing } from './components/AuColorPickerRing.vue';
+export { default as AuColorPickerPresetsNested } from './components/AuColorPickerPresetsNested.vue';

package/package.json

@@ -9,8 +9,12 @@
     "url": "https://gitee.com/au114514/au-color-picker"
   },
   "description": "vue3颜色选择器组件",
-  "keywords": ["vue", "color", "component"],
-  "version": "0.0.6",
+  "keywords": [
+    "vue",
+    "color",
+    "component"
+  ],
+  "version": "0.1.1",
   "type": "module",
   "files": [
     "dist"
@@ -28,7 +32,7 @@
   "types": "./dist/types/index.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc",
+    "build": "vite build",
     "prepack": "npm run build"
   },
   "dependencies": {
@@ -42,6 +46,6 @@
     "sass": "^1.81.0",
     "typescript": "5.6.3",
     "vite": "^5.4.11",
-    "vue-tsc": "2.1.6"
+    "vite-plugin-dts": "^4.3.0"
   }
 }

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

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/types/components/utils/elementOffsetPos.d.ts

@@ -1,4 +0,0 @@
-export declare function elementOffsetPos(el: HTMLElement): {
-    y: number;
-    x: number;
-};

package/dist/types/components/utils/isValidHex.d.ts

@@ -1 +0,0 @@
-export declare function isValidHex(color: string): boolean;

package/dist/types/components/utils/pt.d.ts

@@ -1,4 +0,0 @@
-export interface Pt {
-    x: number;
-    y: number;
-}

package/dist/types/components/utils/ptAzi.d.ts

@@ -1,2 +0,0 @@
-import { Pt } from "./pt";
-export declare function ptAzi(pt: Pt, center: Pt): number;

package/dist/types/components/utils/ptDist.d.ts

@@ -1,2 +0,0 @@
-import { Pt } from "./pt";
-export declare function ptDistSq(a: Pt, b: Pt): number;

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>