vue-accessible-color-picker - npm Package Compare versions

Comparing version 5.1.0 to 5.1.1

dist/ColorPicker.d.ts

@@ -19,5 +19,6 @@ import { ComponentOptionsMixin } from 'vue';
 alphaChannel: AlphaChannelProp;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
@@ -34,3 +35,3 @@ "hue-range-input-label"?(_: {}): any;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
@@ -37,0 +38,0 @@

dist/ColorPicker.js

@@ -1,10 +0,10 @@
-import { defineComponent as pt, ref as I, reactive as vt, computed as q, watch as dt, onMounted as mt, onBeforeUnmount as gt, openBlock as w, createElementBlock as y, createElementVNode as h, renderSlot as N, createTextVNode as X, createCommentVNode as G, Fragment as bt, renderList as wt, toDisplayString as yt } from "vue";
-function k(t, n, r) {
-  return Math.max(n, Math.min(t, r));
+import { defineComponent as ft, ref as I, reactive as pt, computed as q, watch as vt, onMounted as mt, onBeforeUnmount as dt, openBlock as y, createElementBlock as x, createElementVNode as h, renderSlot as N, createTextVNode as X, createCommentVNode as G, Fragment as gt, renderList as bt, toDisplayString as wt } from "vue";
+function k(t, n, s) {
+  return Math.max(n, Math.min(t, s));
 }
-function xt(t, n) {
+function yt(t, n) {
   if (typeof t == "string" || typeof n == "string")
     return t === n;
-  for (const r in t)
-    if (t[r] !== n[r])
+  for (const s in t)
+    if (t[s] !== n[s])
       return !1;
@@ -14,6 +14,6 @@ return !0;
 function V(t) {
-  const n = [], r = t.length > 5 ? 2 : 1;
-  for (let s = 1; s < t.length; s += r) {
-    const u = t.substring(s, s + r).repeat(r % 2 + 1), f = parseInt(u, 16);
-    n.push(s === 3 * r + 1 ? f / 255 : f);
+  const n = [], s = t.length > 5 ? 2 : 1;
+  for (let o = 1; o < t.length; o += s) {
+    const u = t.substring(o, o + s).repeat(s % 2 + 1), f = parseInt(u, 16);
+    n.push(o === 3 * s + 1 ? f / 255 : f);
   }
@@ -28,7 +28,7 @@ return n.length === 3 && n.push(1), {
 function Z(t) {
-  const n = t.l / 100, r = n + t.s / 100 * Math.min(n, 1 - n), s = r === 0 ? 0 : 200 * (1 - n / r);
+  const n = t.l / 100, s = n + t.s / 100 * Math.min(n, 1 - n), o = s === 0 ? 0 : 200 * (1 - n / s);
   return {
     h: t.h,
-    s,
-    v: r * 100,
+    s: o,
+    v: s * 100,
     a: t.a
@@ -40,20 +40,20 @@ };
   n < 0 && (n += 360);
-  const r = t.s / 100, s = t.l / 100;
+  const s = t.s / 100, o = t.l / 100;
   return {
-    r: R(0, n, r, s) * 255,
-    g: R(8, n, r, s) * 255,
-    b: R(4, n, r, s) * 255,
+    r: W(0, n, s, o) * 255,
+    g: W(8, n, s, o) * 255,
+    b: W(4, n, s, o) * 255,
     a: t.a
   };
 }
-function R(t, n, r, s) {
-  const u = (t + n / 30) % 12, f = r * Math.min(s, 1 - s);
-  return s - f * Math.max(-1, Math.min(u - 3, 9 - u, 1));
+function W(t, n, s, o) {
+  const u = (t + n / 30) % 12, f = s * Math.min(o, 1 - o);
+  return o - f * Math.max(-1, Math.min(u - 3, 9 - u, 1));
 }
 function tt(t) {
-  const n = t.s / 100, r = t.v / 100, s = r * (1 - n / 2);
+  const n = t.s / 100, s = t.v / 100, o = s * (1 - n / 2);
   return {
     h: t.h,
-    s: s === 0 || s === 1 ? 0 : (r - s) / Math.min(s, 1 - s) * 100,
-    l: s * 100,
+    s: o === 0 || o === 1 ? 0 : (s - o) / Math.min(o, 1 - o) * 100,
+    l: o * 100,
     a: t.a
@@ -73,9 +73,9 @@ };
 }
-function x(t) {
-  const n = t.w / 100, r = t.b / 100;
-  let s, u;
-  const f = n + r;
-  return f >= 1 ? (s = 0, u = n / f) : (u = 1 - r, s = (1 - n / u) * 100), {
+function C(t) {
+  const n = t.w / 100, s = t.b / 100;
+  let o, u;
+  const f = n + s;
+  return f >= 1 ? (o = 0, u = n / f) : (u = 1 - s, o = (1 - n / u) * 100), {
     h: t.h,
-    s,
+    s: o,
     v: u * 100,
@@ -86,10 +86,10 @@ a: t.a
 function E(t) {
-  const { r: n, g: r, b: s, a: u } = t, f = Math.min(n, r, s), p = Math.max(n, r, s), v = p - f, d = (p + f) / 2;
+  const { r: n, g: s, b: o, a: u } = t, f = Math.min(n, s, o), p = Math.max(n, s, o), v = p - f, m = (p + f) / 2;
   let c = 0;
-  v !== 0 && (p === n ? c = (r - s) / v + (r < s ? 6 : 0) : p === r ? c = (s - n) / v + 2 : p === s && (c = (n - r) / v + 4), c *= 60);
-  let l = 0;
-  return d !== 0 && d !== 255 && (l = (p - d) / Math.min(d, 255 - d)), {
+  v !== 0 && (p === n ? c = (s - o) / v + (s < o ? 6 : 0) : p === s ? c = (o - n) / v + 2 : p === o && (c = (n - s) / v + 4), c *= 60);
+  let i = 0;
+  return m !== 0 && m !== 255 && (i = (p - m) / Math.min(m, 255 - m)), {
     h: c,
-    s: l * 100,
-    l: d / 255 * 100,
+    s: i * 100,
+    l: m / 255 * 100,
     a: u
@@ -99,3 +99,3 @@ };
 function A(t) {
-  return "#" + Object.values(t).map((n, r) => Math.round(r === 3 ? n * 255 : n).toString(16).padStart(2, "0")).join("");
+  return "#" + Object.values(t).map((n, s) => Math.round(s === 3 ? n * 255 : n).toString(16).padStart(2, "0")).join("");
 }
@@ -105,7 +105,7 @@ function $(t) {
 }
-const Ct = {
+const xt = {
   hex: {
     hex: (t) => t,
     hsl: (t) => E(V(t)),
-    hsv: (t) => x($(V(t))),
+    hsv: (t) => C($(V(t))),
     hwb: (t) => $(V(t)),
@@ -129,7 +129,7 @@ rgb: V
   hwb: {
-    hex: (t) => A(M(x(t))),
-    hsl: (t) => E(M(x(t))),
-    hsv: x,
+    hex: (t) => A(M(C(t))),
+    hsl: (t) => E(M(C(t))),
+    hsv: C,
     hwb: (t) => t,
-    rgb: (t) => M(x(t))
+    rgb: (t) => M(C(t))
   },
@@ -139,3 +139,3 @@ rgb: {
     hsl: E,
-    hsv: (t) => x($(t)),
+    hsv: (t) => C($(t)),
     hwb: $,
@@ -145,10 +145,10 @@ rgb: (t) => t
 };
-function Tt(t, n, r) {
-  return Ct[t][n](r);
+function Ct(t, n, s) {
+  return xt[t][n](s);
 }
-function Mt(t, n) {
-  const r = t.toFixed(n);
-  return r.includes(".") ? r.replace(/\.?0+$/, "") : r;
+function Tt(t, n) {
+  const s = t.toFixed(n);
+  return s.includes(".") ? s.replace(/\.?0+$/, "") : s;
 }
-const $t = {
+const Mt = {
   deg: 1,
@@ -158,8 +158,8 @@ grad: 0.9,
   turn: 360
-}, j = {
+}, L = {
   from(t) {
-    return t.endsWith("%") ? C.from(t, { referenceValue: 1 }) : g.from(t, { min: 0, max: 1 });
+    return t.endsWith("%") ? T.from(t, { referenceValue: 1 }) : b.from(t, { min: 0, max: 1 });
   },
   to(t) {
-    return g.to(t);
+    return b.to(t);
   }
@@ -170,61 +170,58 @@ }, J = {
     if (n === null)
-      return g.from(t);
-    const r = n[0];
-    return g.from(t.slice(0, -r.length)) * $t[r];
+      return b.from(t);
+    const s = n[0];
+    return b.from(t.slice(0, -s.length)) * Mt[s];
   },
   to(t) {
-    return g.to(t);
+    return b.to(t);
   }
-}, g = {
-  from(t, { min: n = Number.NEGATIVE_INFINITY, max: r = Number.POSITIVE_INFINITY } = {}) {
-    return t.endsWith(".") ? NaN : k(Number(t), n, r);
+}, b = {
+  from(t, { min: n = Number.NEGATIVE_INFINITY, max: s = Number.POSITIVE_INFINITY } = {}) {
+    return t.endsWith(".") ? NaN : k(Number(t), n, s);
   },
   to(t) {
-    return Mt(t, 2);
+    return Tt(t, 2);
   }
-}, C = {
-  from(t, { referenceValue: n = 100, min: r = 0, max: s = 100 } = {}) {
-    return t.endsWith("%") ? g.from(t.slice(0, -1), { min: r, max: s }) * n / 100 : NaN;
+}, T = {
+  from(t, { referenceValue: n = 100, min: s = 0, max: o = 100 } = {}) {
+    return t.endsWith("%") ? b.from(t.slice(0, -1), { min: s, max: o }) * n / 100 : NaN;
   },
   to(t) {
-    return g.to(t) + "%";
+    return b.to(t) + "%";
   }
-}, W = {
+}, j = {
   from(t) {
-    return t.endsWith("%") ? C.from(t, { referenceValue: 255 }) : g.from(t, { min: 0, max: 255 });
+    return t.endsWith("%") ? T.from(t, { referenceValue: 255 }) : b.from(t, { min: 0, max: 255 });
   },
   to(t) {
-    return g.to(t);
+    return b.to(t);
   }
-}, kt = {
+}, $t = {
   hsl: {
     h: J,
-    s: C,
-    l: C,
-    a: j
+    s: T,
+    l: T
   },
   hwb: {
     h: J,
-    w: C,
-    b: C,
-    a: j
+    w: T,
+    b: T
   },
   rgb: {
-    r: W,
-    g: W,
-    b: W,
-    a: j
+    r: j,
+    g: j,
+    b: j
   }
 };
-function L(t, n) {
-  return kt[t][n];
+function P(t, n) {
+  return $t[t][n];
 }
-function D({ format: t, color: n }, r) {
+function D({ format: t, color: n }, s) {
   if (t === "hex")
-    return r && [5, 9].includes(n.length) ? n.substring(0, n.length - (n.length - 1) / 4) : n;
-  const s = Object.entries(n).slice(0, r ? 3 : 4).map(([u, f]) => {
-    const p = L(t, u);
+    return s && [5, 9].includes(n.length) ? n.substring(0, n.length - (n.length - 1) / 4) : n;
+  const o = Object.entries(n).slice(0, s ? 3 : 4).map(([u, f]) => {
+    const p = u === "a" ? L : P(t, u);
     return (u === "a" ? "/ " : "") + p.to(f);
   });
-  return `${t}(${s.join(" ")})`;
+  return `${t}(${o.join(" ")})`;
 }
@@ -234,3 +231,3 @@ function nt(t) {
 }
-function Ft(t) {
+function kt(t) {
   return "r" in t ? "rgb" : "w" in t ? "hwb" : "v" in t ? "hsv" : "s" in t ? "hsl" : null;
@@ -243,5 +240,5 @@ }
 };
-function It(t) {
+function Ft(t) {
   if (typeof t != "string") {
-    const v = Ft(t);
+    const v = kt(t);
     return v === null ? null : { format: v, color: t };
@@ -254,27 +251,27 @@ }
     v.fillStyle = t;
-    const d = v.fillStyle;
-    return d === "#000000" && t !== "black" ? null : { format: "hex", color: d };
+    const m = v.fillStyle;
+    return m === "#000000" && t !== "black" ? null : { format: "hex", color: m };
   }
-  const [n, r] = t.split("("), s = n.substring(0, 3);
-  if (!(s in Q))
+  const [n, s] = t.split("("), o = n.substring(0, 3);
+  if (!(o in Q))
     return null;
-  const u = r.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
+  const u = s.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
   u.length === 3 && u.push("1");
-  const f = Q[s], p = Object.fromEntries(f.map((v, d) => {
-    const c = L(s, v);
+  const f = Q[o], p = Object.fromEntries(f.map((v, m) => {
+    const c = v === "a" ? L : P(o, v);
     return [
       v,
-      c.from(u[d])
+      c.from(u[m])
     ];
   }));
-  return { format: s, color: p };
+  return { format: o, color: p };
 }
-function Nt(t, n, r) {
-  const s = t.getBoundingClientRect(), u = n - s.left, f = r - s.top;
+function It(t, n, s) {
+  const o = t.getBoundingClientRect(), u = n - o.left, f = s - o.top;
   return {
-    x: s.width === 0 ? 0 : k(u / s.width * 100, 0, 100),
-    y: s.height === 0 ? 0 : k((1 - f / s.height) * 100, 0, 100)
+    x: o.width === 0 ? 0 : k(u / o.width * 100, 0, 100),
+    y: o.height === 0 ? 0 : k((1 - f / o.height) * 100, 0, 100)
   };
 }
-const Vt = { class: "vacp-range-input-group" }, At = ["for"], Ht = { class: "vacp-range-input-label-text vacp-range-input-label-text--hue" }, Et = ["id", "value"], Lt = ["for"], Pt = { class: "vacp-range-input-label-text vacp-range-input-label-text--alpha" }, Ot = ["id", "value"], St = { class: "vacp-color-inputs" }, Rt = { class: "vacp-color-input-group" }, jt = ["for"], Wt = ["id", "value"], Dt = ["id", "for", "onInput"], _t = { class: "vacp-color-input-label-text" }, zt = ["id", "value", "onInput"], Kt = /* @__PURE__ */ pt({
+const Nt = { class: "vacp-range-input-group" }, Vt = ["for"], At = { class: "vacp-range-input-label-text vacp-range-input-label-text--hue" }, Ht = ["id", "value"], Et = ["for"], Lt = { class: "vacp-range-input-label-text vacp-range-input-label-text--alpha" }, Pt = ["id", "value"], St = { class: "vacp-color-inputs" }, Ot = { class: "vacp-color-input-group" }, Rt = ["for"], Wt = ["id", "value"], jt = ["id", "for", "onInput"], Dt = { class: "vacp-color-input-label-text" }, _t = ["id", "value", "onInput"], zt = /* @__PURE__ */ ft({
   __name: "ColorPicker",
@@ -290,5 +287,5 @@ props: {
   setup(t, { emit: n }) {
-    const r = ["hex", "hsl", "hsv", "hwb", "rgb"], s = t, u = n, f = I(null), p = I(null), v = I(null);
-    let d = !1;
-    const c = I(s.visibleFormats.includes(s.defaultFormat) ? s.defaultFormat : s.visibleFormats[0]), l = vt({
+    const s = ["hex", "hsl", "hsv", "hwb", "rgb"], o = t, u = n, f = I(null), p = I(null), v = I(null);
+    let m = !1;
+    const c = I(o.visibleFormats.includes(o.defaultFormat) ? o.defaultFormat : o.visibleFormats[0]), i = pt({
       hex: "#ffffffff",
@@ -300,105 +297,112 @@ hsl: { h: 0, s: 0, l: 100, a: 1 },
     }), ot = q(function() {
-      const o = Object.keys(l[c.value]);
-      return c.value !== "hex" && s.alphaChannel === "hide" ? o.slice(0, 3) : o;
-    }), st = q(function() {
-      return s.alphaChannel === "hide" && [5, 9].includes(l.hex.length) ? l.hex.substring(0, l.hex.length - (l.hex.length - 1) / 4) : l.hex;
+      const r = c.value, e = i[r];
+      return r.split("").map((a) => {
+        const l = e[a];
+        return {
+          value: P(r, a).to(l),
+          channel: a,
+          label: a.toUpperCase()
+        };
+      }).concat(o.alphaChannel === "show" ? [{
+        value: L.to(e.a),
+        channel: "a",
+        label: "Alpha"
+      }] : []);
+    }), rt = q(function() {
+      return o.alphaChannel === "hide" && [5, 9].includes(i.hex.length) ? i.hex.substring(0, i.hex.length - (i.hex.length - 1) / 4) : i.hex;
     });
-    dt(() => s.color, z), mt(function() {
-      document.addEventListener("mousemove", P, { passive: !1 }), document.addEventListener("touchmove", O, { passive: !1 }), document.addEventListener("mouseup", F), document.addEventListener("touchend", F), z(s.color);
-    }), gt(function() {
-      document.removeEventListener("mousemove", P), document.removeEventListener("touchmove", O), document.removeEventListener("mouseup", F), document.removeEventListener("touchend", F);
+    vt(() => o.color, z), mt(function() {
+      document.addEventListener("mousemove", S, { passive: !1 }), document.addEventListener("touchmove", O, { passive: !1 }), document.addEventListener("mouseup", F), document.addEventListener("touchend", F), z(o.color);
+    }), dt(function() {
+      document.removeEventListener("mousemove", S), document.removeEventListener("touchmove", O), document.removeEventListener("mouseup", F), document.removeEventListener("touchend", F);
     });
-    function rt() {
-      const e = (s.visibleFormats.findIndex((a) => a === c.value) + 1) % s.visibleFormats.length;
-      c.value = s.visibleFormats[e];
+    function st() {
+      const e = (o.visibleFormats.findIndex((a) => a === c.value) + 1) % o.visibleFormats.length;
+      c.value = o.visibleFormats[e];
     }
-    function at(o) {
-      d = !0, P(o);
+    function at(r) {
+      m = !0, S(r);
     }
-    function lt(o) {
-      d = !0, O(o);
+    function lt(r) {
+      m = !0, O(r);
     }
     function F() {
-      d = !1;
+      m = !1;
     }
-    function P(o) {
-      o.buttons !== 1 || d === !1 || !(p.value instanceof HTMLElement) || _(p.value, o.clientX, o.clientY);
+    function S(r) {
+      r.buttons !== 1 || m === !1 || !(p.value instanceof HTMLElement) || _(p.value, r.clientX, r.clientY);
     }
-    function O(o) {
-      if (d === !1 || !(p.value instanceof HTMLElement))
+    function O(r) {
+      if (m === !1 || !(p.value instanceof HTMLElement))
         return;
-      o.preventDefault();
-      const e = o.touches[0];
+      r.preventDefault();
+      const e = r.touches[0];
       _(p.value, e.clientX, e.clientY);
     }
-    function _(o, e, a) {
-      const i = Nt(o, e, a), m = Object.assign({}, l.hsv);
-      m.s = i.x, m.v = i.y, b("hsv", m);
+    function _(r, e, a) {
+      const l = It(r, e, a), d = Object.assign({}, i.hsv);
+      d.s = l.x, d.v = l.y, w("hsv", d);
     }
-    function it(o) {
-      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(o.key))
+    function it(r) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(r.key))
         return;
-      o.preventDefault();
-      const e = ["ArrowLeft", "ArrowDown"].includes(o.key) ? -1 : 1, a = ["ArrowLeft", "ArrowRight"].includes(o.key) ? "s" : "v", i = o.shiftKey ? 10 : 1, m = l.hsv[a] + e * i, T = Object.assign({}, l.hsv);
-      T[a] = k(m, 0, 100), b("hsv", T);
+      r.preventDefault();
+      const e = ["ArrowLeft", "ArrowDown"].includes(r.key) ? -1 : 1, a = ["ArrowLeft", "ArrowRight"].includes(r.key) ? "s" : "v", l = r.shiftKey ? 10 : 1, d = i.hsv[a] + e * l, g = Object.assign({}, i.hsv);
+      g[a] = k(d, 0, 100), w("hsv", g);
     }
-    function z(o) {
-      const e = It(o);
-      e !== null && b(e.format, e.color);
+    function z(r) {
+      const e = Ft(r);
+      e !== null && w(e.format, e.color);
     }
-    function K(o, e) {
-      const a = o.currentTarget, i = Object.assign({}, l.hsv);
-      i[e] = Number(a.value), b("hsv", i);
+    function K(r, e) {
+      const a = r.currentTarget, l = Object.assign({}, i.hsv);
+      l[e] = Number(a.value), w("hsv", l);
     }
-    function ut(o) {
-      const e = o.target;
-      nt(e.value) && b("hex", e.value);
+    function ut(r) {
+      const e = r.target;
+      nt(e.value) && w("hex", e.value);
     }
-    function Y(o, e) {
-      const a = o.target, i = c.value, m = Object.assign({}, l[i]), S = L(i, e).from(a.value);
-      Number.isNaN(S) || S === void 0 || (m[e] = S, b(i, m));
+    function Y(r, e) {
+      const a = r.target, l = c.value, d = Object.assign({}, i[l]), R = (e === "a" ? L : P(l, e)).from(a.value);
+      Number.isNaN(R) || R === void 0 || (d[e] = R, w(l, d));
     }
-    function b(o, e) {
+    function w(r, e) {
       let a = e;
-      if (s.alphaChannel === "hide")
+      if (o.alphaChannel === "hide")
         if (typeof e != "string")
           e.a = 1, a = e;
         else if ([5, 9].includes(e.length)) {
-          const i = (e.length - 1) / 4;
-          a = e.substring(0, e.length - i) + "f".repeat(i);
+          const l = (e.length - 1) / 4;
+          a = e.substring(0, e.length - l) + "f".repeat(l);
         } else [4, 7].includes(e.length) && (a = e + "f".repeat((e.length - 1) / 3));
-      if (!xt(l[o], a)) {
-        l[o] = a;
-        for (const i of r)
-          i !== o && (l[i] = Tt(o, i, a));
+      if (!yt(i[r], a)) {
+        i[r] = a;
+        for (const l of s)
+          l !== r && (i[l] = Ct(r, l, a));
         u("color-change", B());
       }
-      f.value instanceof HTMLElement && p.value instanceof HTMLElement && v.value instanceof HTMLElement && ft(f.value, p.value, v.value);
+      f.value instanceof HTMLElement && p.value instanceof HTMLElement && v.value instanceof HTMLElement && ht(f.value, p.value, v.value);
     }
     async function ct() {
-      const o = l[c.value], e = s.alphaChannel === "hide", a = D({ color: o, format: c.value }, e);
+      const r = i[c.value], e = o.alphaChannel === "hide", a = D({ color: r, format: c.value }, e);
       await window.navigator.clipboard.writeText(a), u("color-copy", B());
     }
-    function ht(o) {
-      const e = c.value;
-      return L(e, o).to(l[e][o]);
+    function ht(r, e, a) {
+      const l = D({ format: "hsl", color: i.hsl }, !0);
+      r.style.setProperty("--vacp-color", l), e.style.position = "relative", e.style.backgroundColor = `hsl(${i.hsl.h} 100% 50%)`, e.style.backgroundImage = "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)", a.style.boxSizing = "border-box", a.style.position = "absolute", a.style.left = `${i.hsv.s}%`, a.style.bottom = `${i.hsv.v}%`;
     }
-    function ft(o, e, a) {
-      const i = D({ format: "hsl", color: l.hsl }, !1);
-      o.style.setProperty("--vacp-color", i), e.style.position = "relative", e.style.backgroundColor = `hsl(${l.hsl.h} 100% 50%)`, e.style.backgroundImage = "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)", a.style.boxSizing = "border-box", a.style.position = "absolute", a.style.left = `${l.hsv.s}%`, a.style.bottom = `${l.hsv.v}%`;
-    }
     function B() {
-      const o = s.alphaChannel === "hide", e = D({ color: l[c.value], format: c.value }, o);
+      const r = o.alphaChannel === "hide", e = D({ color: i[c.value], format: c.value }, r);
       return {
-        colors: l,
+        colors: i,
         cssColor: e
       };
     }
-    function U(o) {
-      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(o.key) || !o.shiftKey)
+    function U(r) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(r.key) || !r.shiftKey)
         return;
-      const e = o.currentTarget, a = Number(e.step), i = ["ArrowLeft", "ArrowDown"].includes(o.key) ? -1 : 1, m = Number(e.value) + i * a * 10, T = k(m, Number(e.min), Number(e.max));
-      e.value = String(T - i * a);
+      const e = r.currentTarget, a = Number(e.step), l = ["ArrowLeft", "ArrowDown"].includes(r.key) ? -1 : 1, d = Number(e.value) + l * a * 10, g = k(d, Number(e.min), Number(e.max));
+      e.value = String(g - l * a);
     }
-    return (o, e) => (w(), y("div", {
+    return (r, e) => (y(), x("div", {
       ref_key: "colorPicker",
@@ -424,9 +428,9 @@ ref: f,
       ], 544),
-      h("div", Vt, [
+      h("div", Nt, [
         h("label", {
           class: "vacp-range-input-label vacp-range-input-label--hue",
-          for: `${o.id}-hue-slider`
+          for: `${r.id}-hue-slider`
         }, [
-          h("span", Ht, [
-            N(o.$slots, "hue-range-input-label", {}, () => [
+          h("span", At, [
+            N(r.$slots, "hue-range-input-label", {}, () => [
               e[2] || (e[2] = X("Hue"))
@@ -436,5 +440,5 @@ ])
           h("input", {
-            id: `${o.id}-hue-slider`,
+            id: `${r.id}-hue-slider`,
             class: "vacp-range-input vacp-range-input--hue",
-            value: l.hsv.h,
+            value: i.hsv.h,
             type: "range",
@@ -446,11 +450,11 @@ min: "0",
             onInput: e[0] || (e[0] = (a) => K(a, "h"))
-          }, null, 40, Et)
-        ], 8, At),
-        o.alphaChannel === "show" ? (w(), y("label", {
+          }, null, 40, Ht)
+        ], 8, Vt),
+        r.alphaChannel === "show" ? (y(), x("label", {
           key: 0,
           class: "vacp-range-input-label vacp-range-input-label--alpha",
-          for: `${o.id}-alpha-slider`
+          for: `${r.id}-alpha-slider`
         }, [
-          h("span", Pt, [
-            N(o.$slots, "alpha-range-input-label", {}, () => [
+          h("span", Lt, [
+            N(r.$slots, "alpha-range-input-label", {}, () => [
               e[3] || (e[3] = X("Alpha"))
@@ -460,5 +464,5 @@ ])
           h("input", {
-            id: `${o.id}-alpha-slider`,
+            id: `${r.id}-alpha-slider`,
             class: "vacp-range-input vacp-range-input--alpha",
-            value: l.hsv.a,
+            value: i.hsv.a,
             type: "range",
@@ -470,4 +474,4 @@ min: "0",
             onInput: e[1] || (e[1] = (a) => K(a, "a"))
-          }, null, 40, Ot)
-        ], 8, Lt)) : G("", !0)
+          }, null, 40, Pt)
+        ], 8, Et)) : G("", !0)
       ]),
@@ -479,3 +483,3 @@ h("button", {
       }, [
-        N(o.$slots, "copy-button", {}, () => [
+        N(r.$slots, "copy-button", {}, () => [
           e[4] || (e[4] = h("span", { class: "vacp-visually-hidden" }, "Copy color", -1)),
@@ -498,40 +502,40 @@ e[5] || (e[5] = h("svg", {
       h("div", St, [
-        h("div", Rt, [
-          c.value === "hex" ? (w(), y("label", {
+        h("div", Ot, [
+          c.value === "hex" ? (y(), x("label", {
             key: 0,
             class: "vacp-color-input-label",
-            for: `${o.id}-color-hex`
+            for: `${r.id}-color-hex`
           }, [
             e[6] || (e[6] = h("span", { class: "vacp-color-input-label-text" }, " Hex ", -1)),
             h("input", {
-              id: `${o.id}-color-hex`,
+              id: `${r.id}-color-hex`,
               class: "vacp-color-input",
               type: "text",
-              value: st.value,
+              value: rt.value,
               onInput: ut
             }, null, 40, Wt)
-          ], 8, jt)) : (w(!0), y(bt, { key: 1 }, wt(ot.value, (a) => (w(), y("label", {
-            id: `${o.id}-color-${c.value}-${a}-label`,
-            key: `${o.id}-color-${c.value}-${a}-label`,
+          ], 8, Rt)) : (y(!0), x(gt, { key: 1 }, bt(ot.value, ({ value: a, channel: l, label: d }) => (y(), x("label", {
+            id: `${r.id}-color-${c.value}-${l}-label`,
+            key: `${r.id}-color-${c.value}-${l}-label`,
             class: "vacp-color-input-label",
-            for: `${o.id}-color-${c.value}-${a}`,
-            onInput: (i) => Y(i, a)
+            for: `${r.id}-color-${c.value}-${l}`,
+            onInput: (g) => Y(g, l)
           }, [
-            h("span", _t, yt(a.toUpperCase()), 1),
+            h("span", Dt, wt(d), 1),
             h("input", {
-              id: `${o.id}-color-${c.value}-${a}`,
+              id: `${r.id}-color-${c.value}-${l}`,
               class: "vacp-color-input",
               type: "text",
-              value: ht(a),
-              onInput: (i) => Y(i, a)
-            }, null, 40, zt)
-          ], 40, Dt))), 128))
+              value: a,
+              onInput: (g) => Y(g, l)
+            }, null, 40, _t)
+          ], 40, jt))), 128))
         ]),
-        o.visibleFormats.length > 1 ? (w(), y("button", {
+        r.visibleFormats.length > 1 ? (y(), x("button", {
           key: 0,
           class: "vacp-format-switch-button",
           type: "button",
-          onClick: rt
+          onClick: st
         }, [
-          N(o.$slots, "format-switch-button", {}, () => [
+          N(r.$slots, "format-switch-button", {}, () => [
             e[7] || (e[7] = h("span", { class: "vacp-visually-hidden" }, "Switch format", -1)),
@@ -555,10 +559,10 @@ e[8] || (e[8] = h("svg", {
   }
-}), Bt = {
+}), Yt = {
   install(t) {
-    t.component("ColorPicker", Kt);
+    t.component("ColorPicker", zt);
   }
 };
 export {
-  Kt as ColorPicker,
-  Bt as default
+  zt as ColorPicker,
+  Yt as default
 };

package.json

 {
 	"name": "vue-accessible-color-picker",
-	"version": "5.1.0",
+	"version": "5.1.1",
 	"license": "MIT",
@@ -13,3 +13,3 @@ "description": "Color picker component for Vue.js",
 		"type": "git",
-		"url": "https://github.com/kleinfreund/vue-accessible-color-picker.git"
+		"url": "git+https://github.com/kleinfreund/vue-accessible-color-picker.git"
 	},
@@ -42,16 +42,18 @@ "bugs": {
 	"scripts": {
-		"prebuild": "rimraf dist",
-		"build": "npm run build:lib",
-		"postbuild": "rimraf dist/src",
+		"clean:dist": "rimraf dist",
+		"clean:dist-source": "rimraf dist/src",
+		"build": "run-s clean:dist build:lib build:types build:consolidate-types clean:dist-source",
 		"build:lib": "vite build",
-		"postbuild:lib": "npm run build:types",
 		"build:types": "vue-tsc --project tsconfig.build-types.json",
-		"postbuild:types": "api-extractor run --local --verbose",
+		"build:consolidate-types": "api-extractor run --local --verbose",
 		"start": "vite",
 		"test": "vitest run --coverage",
+		"test:watch": "vitest watch",
+		"lint": "run-p lint:*",
 		"lint:code": "eslint",
-		"lint:code:fix": "npm run lint:code -- --fix",
 		"lint:lockfile": "lockfile-lint --path package-lock.json --validate-hosts --allowed-hosts npm",
 		"lint:package": "publint",
 		"lint:types": "vue-tsc --noEmit",
+		"fix": "run-p fix:*",
+		"fix:code": "npm run lint:code -- --fix",
 		"release": "semantic-release",
@@ -65,37 +67,38 @@ "prepare": "husky",
 	"devDependencies": {
-		"@babel/types": "^7.25.8",
-		"@commitlint/cli": "19.5.0",
-		"@commitlint/config-conventional": "19.5.0",
-		"@eslint/js": "^9.13.0",
-		"@microsoft/api-extractor": "^7.47.11",
+		"@babel/types": "^7.26.3",
+		"@commitlint/cli": "19.6.1",
+		"@commitlint/config-conventional": "19.6.0",
+		"@eslint/js": "^9.17.0",
+		"@microsoft/api-extractor": "^7.48.1",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^13.0.0",
 		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/github": "^11.0.0",
+		"@semantic-release/github": "^11.0.1",
 		"@semantic-release/npm": "^12.0.1",
-		"@semantic-release/release-notes-generator": "^14.0.1",
-		"@stylistic/eslint-plugin": "^2.9.0",
+		"@semantic-release/release-notes-generator": "^14.0.2",
+		"@stylistic/eslint-plugin": "^2.12.1",
 		"@types/eslint__js": "^8.42.3",
-		"@vitejs/plugin-vue": "^5.1.4",
-		"@vitest/coverage-v8": "^2.1.3",
-		"@vue/eslint-config-typescript": "^14.1.1",
+		"@vitejs/plugin-vue": "^5.2.1",
+		"@vitest/coverage-v8": "^2.1.8",
+		"@vue/eslint-config-typescript": "^14.1.4",
 		"@vue/test-utils": "^2.4.6",
-		"eslint": "^9.13.0",
-		"eslint-plugin-vue": "^9.29.0",
-		"globals": "^15.11.0",
-		"husky": "^9.1.6",
+		"eslint": "^9.17.0",
+		"eslint-plugin-vue": "^9.32.0",
+		"globals": "^15.14.0",
+		"husky": "^9.1.7",
 		"jsdom": "^25.0.1",
 		"lockfile-lint": "^4.14.0",
-		"postcss": "^8.4.47",
-		"publint": "^0.2.11",
+		"npm-run-all2": "^7.0.2",
+		"postcss": "^8.4.49",
+		"publint": "^0.2.12",
 		"rimraf": "^6.0.1",
-		"sass": "^1.80.3",
-		"semantic-release": "^24.1.3",
+		"sass": "^1.83.0",
+		"semantic-release": "^24.2.0",
 		"standard": "^17.1.2",
-		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.10.0",
-		"vite": "^5.4.9",
-		"vitest": "^2.1.3",
-		"vue": "^3.5.12",
-		"vue-tsc": "^2.1.6"
+		"typescript": "~5.6.3",
+		"typescript-eslint": "^8.18.1",
+		"vite": "^5.4.11",
+		"vitest": "^2.1.8",
+		"vue": "^3.5.13",
+		"vue-tsc": "^2.1.10"
 	},
@@ -102,0 +105,0 @@ "overrides": {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40401

increased by0.88%

Lines of code

682

increased by0.74%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

36

increased by2.86%

No dependency changes