@aurouscia/au-color-picker 0.0.2 → 0.0.4

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

@@ -1,5 +1,5 @@
-import { defineComponent as Z, ref as k, onMounted as le, onUnmounted as ue, openBlock as V, createElementBlock as A, normalizeStyle as ee, isRef as re, createElementVNode as d, computed as $, onBeforeMount as ie, watch as ce, createVNode as ve, withDirectives as fe, vModelSelect as de, createCommentVNode as pe } from "vue";
-import w from "color-convert";
+import { defineComponent as ee, ref as k, 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 S from "color-convert";
 function ge(g, v) {
   const x = g.x - v.x, c = g.y - v.y;
   return x ** 2 + c ** 2;
@@ -14,75 +14,75 @@ function xe(g) {
     x += v.offsetTop, c += v.offsetLeft, v = v.offsetParent;
   return { y: x, x: c };
 }
-const C = 400, E = 400, j = 200, ye = 200, F = 190, G = 150, L = 200, K = 16, J = 3, me = /* @__PURE__ */ Z({
+const C = 400, E = 400, Z = 200, ye = 200, F = 190, G = 150, A = 200, K = 16, J = 3, me = /* @__PURE__ */ ee({
   __name: "AuColorPickerRing",
   props: {
     initialHex: {}
   },
   emits: ["changed"],
   setup(g, { expose: v, emit: x }) {
-    const c = k(), M = k();
-    let P, u;
-    const N = { x: 199, y: 199 }, U = (F + G) / 2, X = F ** 2, B = G ** 2, r = (C - L) / 2, b = r + L, m = k(0), H = k(100), _ = k(100), R = g;
+    const c = k(), H = k();
+    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 = k(0), B = k(100), P = k(100), R = g;
     let f;
     function T() {
       var n, a;
-      const e = (n = c.value) == null ? void 0 : n.getContext("2d"), t = (a = M.value) == null ? void 0 : a.getContext("2d");
+      const e = (n = c.value) == null ? void 0 : n.getContext("2d"), t = (a = H.value) == null ? void 0 : a.getContext("2d");
       if (!e || !t)
         throw Error("canvas context getting error");
       if (R.initialHex) {
-        const h = w.hex.hsv(R.initialHex);
-        m.value = h[0], H.value = h[1], _.value = h[2];
+        const h = S.hex.hsv(R.initialHex);
+        m.value = h[0], B.value = h[1], P.value = h[2];
       }
-      P = e, u = t, f = P.getImageData(0, 0, C, E), z(), s(), Y(), P.putImageData(f, 0, 0);
+      I = e, u = t, f = I.getImageData(0, 0, C, E), z(), s(), j(), I.putImageData(f, 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 = i(n), S = w.hsv.rgb([h, 100, 100]);
-            f.data[a] = S[0], f.data[a + 1] = S[1], f.data[a + 2] = S[2], f.data[a + 3] = 255;
+            const a = n.y * C * 4 + n.x * 4, h = l(n), _ = S.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 i(e) {
+    function l(e) {
       return 360 * ((he(e, N) + Math.PI) / (2 * Math.PI));
     }
     function o(e) {
       const t = ge(N, e);
-      return t > B && t < X;
+      return t > M && t < X;
     }
     function s() {
       for (let e = 0; e < C; e++)
         for (let t = 0; t < E; t++) {
           const n = { x: e, y: t };
-          if (I(n)) {
-            const a = n.y * C * 4 + n.x * 4, { s: h, v: S } = y(n), q = w.hsv.rgb([m.value, h, S]);
+          if (w(n)) {
+            const a = n.y * C * 4 + n.x * 4, { s: h, v: _ } = y(n), q = S.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 y(e) {
       const t = e.x - r, n = e.y - r;
-      let a = t / L, h = 1 - n / L;
+      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 I(e) {
+    function w(e) {
       return !(e.x < r || e.x > b || e.y < r || e.y > b);
     }
-    let l = !1, p = "none", O = !1;
+    let i = !1, p = "none", O = !1;
     function W(e, t) {
-      if (l || t && !O)
+      if (i || t && !O)
         return;
-      l = !0;
+      i = !0;
       const n = ne(e);
-      if (p === "none" && (I(n) ? p = "square" : o(n) && (p = "ring")), p === "ring" && (e.preventDefault(), m.value = i(n), s(), P.putImageData(f, 0, 0)), p === "square") {
+      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);
-        H.value = a.s, _.value = a.v;
+        B.value = a.s, P.value = a.v;
       }
-      p !== "none" && Y(!0), l = !1;
+      p !== "none" && j(!0), i = !1;
     }
     function D() {
       p = "none", O = !1;
@@ -95,37 +95,37 @@ const C = 400, E = 400, j = 200, ye = 200, F = 190, G = 150, L = 200, K = 16, J
         t -= a.x, n -= a.y;
       } else
         t = e.offsetX, n = e.offsetY;
-      return t = t * C / j, n = n * C / j, { x: t, y: n };
+      return t = t * C / Z, n = n * C / Z, { x: t, y: n };
     }
-    function Y(e) {
+    function j(e) {
       if (e) {
-        const ae = w.hsv.hex([m.value, H.value, _.value]);
+        const ae = S.hsv.hex([m.value, B.value, P.value]);
         se("changed", ae);
       }
-      const t = (m.value / 360 * 2 + 1) * Math.PI, n = Math.cos(t) * U + C / 2, a = Math.sin(t) * U + E / 2, h = H.value / 100 * L + r, S = (1 - _.value / 100) * L + r;
+      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 = _.value > 50 ? "black" : "#ddd";
-      u.strokeStyle = q, u.fillStyle = q, u.beginPath(), u.arc(h, S, K - 2, 0, 2 * Math.PI), u.stroke(), u.beginPath(), u.arc(h, S, 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();
     }
     function oe(e) {
-      const t = w.hex.hsv(e);
-      m.value = t[0], H.value = t[1], _.value = t[2], s(), P.putImageData(f, 0, 0), Y();
+      const t = S.hex.hsv(e);
+      m.value = t[0], B.value = t[1], P.value = t[2], s(), I.putImageData(f, 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) => (V(), A("div", {
+    }), (e, t) => (L(), V("div", {
       class: "acpRingBody",
-      style: ee({ width: j + "px", height: ye + "px" }),
+      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), re(O) ? O.value = !0 : O = !0;
+        W(n), ie(O) ? O.value = !0 : O = !0;
       })
     }, [
       d("canvas", {
@@ -138,185 +138,188 @@ const C = 400, E = 400, j = 200, ye = 200, F = 190, G = 150, L = 200, K = 16, J
         width: C,
         height: E,
         ref_key: "cursorCvs",
-        ref: M
+        ref: H
       }, null, 512)
     ], 36));
   }
 }), te = (g, v) => {
   const x = g.__vccOpts || g;
-  for (const [c, M] of v)
-    x[c] = M;
+  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);
 }
-const Pe = {
-  key: 0,
-  class: "acpPanel"
-}, _e = { class: "acpRing" }, ke = { class: "acpParams" }, we = {
+const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, ke = {
   key: 0,
   class: "acpSingleInput"
-}, Ie = ["value"], Se = {
+}, Se = ["value"], we = {
   key: 1,
   class: "acpTripleInputs"
-}, be = ["value"], He = ["value"], Me = ["value"], Be = {
+}, _e = ["value"], be = ["value"], Be = ["value"], He = {
   key: 2,
   class: "acpTripleInputs"
-}, Re = ["value"], Te = ["value"], De = ["value"], qe = /* @__PURE__ */ Z({
+}, Me = ["value"], Re = ["value"], Te = ["value"], De = /* @__PURE__ */ ee({
   __name: "AuColorPicker",
   props: {
     inital: {},
     entryStyles: {},
-    pos: {}
+    entryActiveStyles: {},
+    pos: {},
+    panelBaseZIndex: {}
   },
   emits: ["change", "done"],
   setup(g, { expose: v, emit: x }) {
-    const c = g, M = $(() => {
-      let i = {};
-      return c.entryStyles && Object.assign(i, c.entryStyles), i.backgroundColor = r.value, c.pos === "right" ? i.right = "0px" : i.left = "0px", i;
-    }), P = k(), u = k(!1);
+    const c = g, H = Y(() => {
+      let l = {};
+      return c.entryStyles && Object.assign(l, c.entryStyles), l.backgroundColor = r.value, c.pos === "right" ? l.right = "0px" : l.left = "0px", u.value || (l.transition = "0s", Object.assign(l, c.entryActiveStyles)), l;
+    }), I = k(), u = k(!1);
     function N() {
       u.value = !1;
     }
     function U() {
       u.value = !u.value;
     }
-    function X(i) {
-      r.value = f(i), T();
+    function X(l) {
+      r.value = f(l), T();
     }
-    const B = k("hex"), r = k("#ff0000"), b = $(() => w.hex.rgb(r.value)), m = $(() => w.hex.hsv(r.value));
-    function H(i) {
+    const M = k("hex"), r = k("#ff0000"), b = Y(() => S.hex.rgb(r.value)), m = Y(() => S.hex.hsv(r.value));
+    function B(l) {
       var s;
-      const o = i.target;
+      const o = l.target;
       if ("value" in o) {
         const y = o.value;
         if (y && Q(y)) {
-          r.value = f(y), (s = P.value) == null || s.enforceTo(r.value), T();
+          r.value = f(y), (s = I.value) == null || s.enforceTo(r.value), T();
           return;
         }
         o.value = r.value;
       }
     }
-    function _(i, o) {
+    function P(l, o) {
       var y;
-      const s = i.target;
+      const s = l.target;
       if ("value" in s) {
-        const I = s.value;
-        if (I) {
-          let l = parseInt(I);
-          if (isNaN(l))
+        const w = s.value;
+        if (w) {
+          let i = parseInt(w);
+          if (isNaN(i))
             s.value = "0";
           else {
-            l > 255 ? l = 255 : l < 0 && (l = 0);
+            i > 255 ? i = 255 : i < 0 && (i = 0);
             const p = [...b.value];
-            o == "r" ? p[0] = l : o == "g" ? p[1] = l : p[2] = l, r.value = f(w.rgb.hex(p)), (y = P.value) == null || y.enforceTo(r.value), s.value = l.toString(), T();
+            o == "r" ? p[0] = i : o == "g" ? p[1] = i : p[2] = i, r.value = f(S.rgb.hex(p)), (y = I.value) == null || y.enforceTo(r.value), s.value = i.toString(), T();
             return;
           }
         }
       }
     }
-    function R(i, o) {
+    function R(l, o) {
       var y;
-      const s = i.target;
+      const s = l.target;
       if ("value" in s) {
-        const I = s.value;
-        if (I) {
-          let l = parseInt(I);
-          if (isNaN(l))
+        const w = s.value;
+        if (w) {
+          let i = parseInt(w);
+          if (isNaN(i))
             s.value = "0";
           else {
-            o === "h" ? l > 359 && (l = 359) : l > 100 && (l = 100), l < 0 && (l = 0);
+            o === "h" ? i > 359 && (i = 359) : i > 100 && (i = 100), i < 0 && (i = 0);
             const p = [...m.value];
-            o == "h" ? p[0] = l : o == "s" ? p[1] = l : p[2] = l, r.value = f(w.hsv.hex(p)), s.value = l.toString(), (y = P.value) == null || y.enforceTo(r.value), T();
+            o == "h" ? p[0] = i : o == "s" ? p[1] = i : p[2] = i, r.value = f(S.hsv.hex(p)), s.value = i.toString(), (y = I.value) == null || y.enforceTo(r.value), T();
             return;
           }
         }
       }
     }
-    function f(i) {
-      return i.startsWith("#") ? i.toUpperCase() : "#" + i.toUpperCase();
+    function f(l) {
+      return l.startsWith("#") ? l.toUpperCase() : "#" + l.toUpperCase();
     }
     function T() {
       z("change", r.value);
     }
-    ie(() => {
+    re(() => {
       c.inital && Q(c.inital) && (r.value = f(c.inital));
     });
     const z = x;
-    return v({ closePanel: N }), ce(u, (i) => {
-      i === !1 && z("done", r.value);
-    }), (i, o) => (V(), A("div", {
+    return v({ closePanel: N }), ce(u, (l) => {
+      l === !1 && z("done", r.value);
+    }), (l, o) => (L(), V("div", {
       class: "acp",
       onClick: o[7] || (o[7] = (s) => s.stopPropagation())
     }, [
       d("div", {
         class: "acpEntry",
-        style: ee(M.value),
+        style: $(H.value),
         onClick: U
       }, null, 4),
-      u.value ? (V(), A("div", Pe, [
-        d("div", _e, [
+      u.value ? (L(), V("div", {
+        key: 0,
+        class: "acpPanel",
+        style: $({ zIndex: (l.panelBaseZIndex || 0) + 100 })
+      }, [
+        d("div", Ie, [
           ve(Ce, {
             ref_key: "ring",
-            ref: P,
+            ref: I,
             initialHex: r.value,
             onChanged: X
           }, null, 8, ["initialHex"])
         ]),
-        d("div", ke, [
+        d("div", Pe, [
           fe(d("select", {
-            "onUpdate:modelValue": o[0] || (o[0] = (s) => B.value = s)
+            "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)
           ]), 512), [
-            [de, B.value]
+            [de, M.value]
           ]),
-          B.value == "hex" ? (V(), A("div", we, [
+          M.value == "hex" ? (L(), V("div", ke, [
             d("input", {
               value: r.value,
-              onBlur: H,
+              onBlur: B,
               spellcheck: "false",
               maxlength: "7"
-            }, null, 40, Ie)
-          ])) : B.value == "rgb" ? (V(), A("div", Se, [
+            }, null, 40, Se)
+          ])) : M.value == "rgb" ? (L(), V("div", we, [
             d("input", {
               value: b.value[0],
-              onBlur: o[1] || (o[1] = (s) => _(s, "r"))
-            }, null, 40, be),
+              onBlur: o[1] || (o[1] = (s) => P(s, "r"))
+            }, null, 40, _e),
             d("input", {
               value: b.value[1],
-              onBlur: o[2] || (o[2] = (s) => _(s, "g"))
-            }, null, 40, He),
+              onBlur: o[2] || (o[2] = (s) => P(s, "g"))
+            }, null, 40, be),
             d("input", {
               value: b.value[2],
-              onBlur: o[3] || (o[3] = (s) => _(s, "b"))
-            }, null, 40, Me)
-          ])) : (V(), A("div", Be, [
+              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, Re),
+            }, null, 40, Me),
             d("input", {
               value: m.value[1],
               onBlur: o[5] || (o[5] = (s) => R(s, "s"))
-            }, null, 40, Te),
+            }, null, 40, Re),
             d("input", {
               value: m.value[2],
               onBlur: o[6] || (o[6] = (s) => R(s, "v"))
-            }, null, 40, De)
+            }, null, 40, Te)
           ]))
         ]),
         d("div", { class: "acpDoneBtn" }, [
           d("button", { onClick: N }, "OK")
         ])
-      ])) : pe("", !0)
+      ], 4)) : pe("", !0)
     ]));
   }
-}), Ve = /* @__PURE__ */ te(qe, [["__scopeId", "data-v-4f4a2c1e"]]);
+}), Ae = /* @__PURE__ */ te(De, [["__scopeId", "data-v-e44e35b3"]]);
 export {
-  Ve as AuColorPicker,
+  Ae as AuColorPicker,
   Ce 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%}.acpPanel[data-v-4f4a2c1e]{margin-top:3px;position:absolute}.acpPanel .acpParams[data-v-4f4a2c1e]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpPanel .acpParams select[data-v-4f4a2c1e],.acpPanel .acpParams input[data-v-4f4a2c1e]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpPanel .acpParams input[data-v-4f4a2c1e]{text-align:center}.acpPanel .acpParams .acpSingleInput input[data-v-4f4a2c1e]{width:120px}.acpPanel .acpParams .acpTripleInputs[data-v-4f4a2c1e]{display:flex;justify-content:space-around}.acpPanel .acpParams .acpTripleInputs input[data-v-4f4a2c1e]{width:40px}.acpPanel .acpDoneBtn[data-v-4f4a2c1e]{display:flex;justify-content:center;align-items:center;padding:8px}.acpPanel .acpDoneBtn button[data-v-4f4a2c1e]{background:none;border:none;color:gray;font-size:16px;cursor:pointer}.acpPanel .acpDoneBtn button[data-v-4f4a2c1e]:hover{color:#000}.acpPanel[data-v-4f4a2c1e]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acp[data-v-4f4a2c1e]{position:relative;width:fit-content}
+.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-e44e35b3]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-e44e35b3]{margin-top:3px;position:absolute}.acpPanel .acpParams[data-v-e44e35b3]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpPanel .acpParams select[data-v-e44e35b3],.acpPanel .acpParams input[data-v-e44e35b3]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpPanel .acpParams input[data-v-e44e35b3]{text-align:center}.acpPanel .acpParams .acpSingleInput input[data-v-e44e35b3]{width:120px}.acpPanel .acpParams .acpTripleInputs[data-v-e44e35b3]{display:flex;justify-content:space-around}.acpPanel .acpParams .acpTripleInputs input[data-v-e44e35b3]{width:40px}.acpPanel .acpDoneBtn[data-v-e44e35b3]{display:flex;justify-content:center;align-items:center;padding:8px}.acpPanel .acpDoneBtn button[data-v-e44e35b3]{background:none;border:none;color:gray;font-size:16px;cursor:pointer}.acpPanel .acpDoneBtn button[data-v-e44e35b3]:hover{color:#000}.acpPanel[data-v-e44e35b3]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acp[data-v-e44e35b3]{position:relative;width:fit-content}

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

@@ -3,7 +3,9 @@ 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, {} & {
@@ -12,7 +14,9 @@ declare const _default: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     inital?: string;
     entryStyles?: CSSProperties;
+    entryActiveStyles?: CSSProperties;
     pos?: "left" | "right";
+    panelBaseZIndex?: number;
 }> & Readonly<{
     onDone?: ((hexStr: string) => any) | undefined;
     onChange?: ((hexStr: string) => any) | undefined;

package/package.json

@@ -10,7 +10,7 @@
   },
   "description": "vue3颜色选择器组件",
   "keywords": ["vue", "color", "component"],
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "files": [
     "dist"