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

Comparing version 5.2.0 to 5.3.0

dist/ColorPicker.d.ts

@@ -10,2 +10,3 @@ import { AlphaChannelProp as AlphaChannelProp_2 } from './types.js';
 copyColor: typeof copyColor;
+switchFormat: typeof switchFormat;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -18,5 +19,5 @@ "color-change": (data: ColorChangeDetail) => any;
 }>, {
-id: string;
 color: string | ColorHsl | ColorHwb | ColorRgb;
 copy: (cssColor: string) => Promise<void> | void;
+id: string;
 visibleFormats: VisibleColorFormat[];
@@ -26,3 +27,2 @@ defaultFormat: VisibleColorFormat;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
-colorPicker: HTMLDivElement;
 colorSpace: HTMLDivElement;
@@ -38,6 +38,6 @@ thumb: HTMLDivElement;
         'copy-button'?(_: {}): any;
+        actions?(_: {}): any;
         'format-switch-button'?(_: {}): any;
     };
     refs: {
-        colorPicker: HTMLDivElement;
         colorSpace: HTMLDivElement;
@@ -148,4 +148,9 @@ thumb: HTMLDivElement;
 
+/**
+ * Sets the next active color format by cycling through the visible color formats.
+ */
+declare function switchFormat(): void;
+
 export declare type VisibleColorFormat = Exclude<ColorFormat, 'hsv'>;
 
 export { }

dist/ColorPicker.js

@@ -1,28 +0,28 @@
-import { defineComponent as pt, ref as N, reactive as vt, computed as G, watch as dt, onMounted as mt, onBeforeUnmount as gt, openBlock as x, createElementBlock as C, createElementVNode as h, renderSlot as V, createTextVNode as J, createCommentVNode as Q, 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 ht, useTemplateRef as ft, ref as pt, reactive as vt, computed as O, watch as dt, onMounted as mt, onBeforeUnmount as bt, createElementBlock as w, openBlock as y, normalizeStyle as W, unref as gt, createElementVNode as h, createCommentVNode as Q, renderSlot as T, createTextVNode as Z, Fragment as wt, renderList as yt, toDisplayString as xt } from "vue";
+function N(t, e, r) {
+  return Math.max(e, Math.min(t, r));
 }
-function xt(t, n) {
-  if (typeof t == "string" || typeof n == "string")
-    return t === n;
+function Ct(t, e) {
+  if (typeof t == "string" || typeof e == "string")
+    return t === e;
   for (const r in t)
-    if (t[r] !== n[r])
+    if (t[r] !== e[r])
       return !1;
   return !0;
 }
-function A(t) {
-  const n = [], r = t.length > 5 ? 2 : 1;
+function k(t) {
+  const e = [], r = t.length > 5 ? 2 : 1;
   for (let s = 1; s < t.length; s += r) {
-    const a = t.substring(s, s + r).repeat(r % 2 + 1), f = parseInt(a, 16);
-    n.push(s === 3 * r + 1 ? f / 255 : f);
+    const a = t.substring(s, s + r).repeat(r % 2 + 1), p = parseInt(a, 16);
+    e.push(s === 3 * r + 1 ? p / 255 : p);
   }
-  return n.length === 3 && n.push(1), {
-    r: n[0],
-    g: n[1],
-    b: n[2],
-    a: n[3]
+  return e.length === 3 && e.push(1), {
+    r: e[0],
+    g: e[1],
+    b: e[2],
+    a: e[3]
   };
 }
-function et(t) {
-  const n = t.l / 100, r = n + t.s / 100 * Math.min(n, 1 - n), s = r === 0 ? 0 : 200 * (1 - n / r);
+function nt(t) {
+  const e = t.l / 100, r = e + t.s / 100 * Math.min(e, 1 - e), s = r === 0 ? 0 : 200 * (1 - e / r);
   return {
@@ -35,19 +35,19 @@ h: t.h,
 }
-function E(t) {
-  let n = t.h % 360;
-  n < 0 && (n += 360);
+function M(t) {
+  let e = t.h % 360;
+  e < 0 && (e += 360);
   const r = t.s / 100, s = t.l / 100;
   return {
-    r: j(0, n, r, s) * 255,
-    g: j(8, n, r, s) * 255,
-    b: j(4, n, r, s) * 255,
+    r: j(0, e, r, s) * 255,
+    g: j(8, e, r, s) * 255,
+    b: j(4, e, r, s) * 255,
     a: t.a
   };
 }
-function j(t, n, r, s) {
-  const a = (t + n / 30) % 12, f = r * Math.min(s, 1 - s);
-  return s - f * Math.max(-1, Math.min(a - 3, 9 - a, 1));
+function j(t, e, r, s) {
+  const a = (t + e / 30) % 12, p = r * Math.min(s, 1 - s);
+  return s - p * Math.max(-1, Math.min(a - 3, 9 - a, 1));
 }
-function nt(t) {
-  const n = t.s / 100, r = t.v / 100, s = r * (1 - n / 2);
+function ot(t) {
+  const e = t.s / 100, r = t.v / 100, s = r * (1 - e / 2);
   return {
@@ -60,3 +60,3 @@ h: t.h,
 }
-function ot(t) {
+function rt(t) {
   return {
@@ -69,10 +69,10 @@ h: t.h,
 }
-function M(t) {
-  return E(nt(t));
+function $(t) {
+  return M(ot(t));
 }
-function T(t) {
-  const n = t.w / 100, r = t.b / 100;
+function x(t) {
+  const e = t.w / 100, r = t.b / 100;
   let s, a;
-  const f = n + r;
-  return f >= 1 ? (s = 0, a = n / f) : (a = 1 - r, s = (1 - n / a) * 100), {
+  const p = e + r;
+  return p >= 1 ? (s = 0, a = e / p) : (a = 1 - r, s = (1 - e / a) * 100), {
     h: t.h,
@@ -84,65 +84,65 @@ s,
 }
-function L(t) {
-  const { r: n, g: r, b: s, a } = t, f = Math.min(n, r, s), d = Math.max(n, r, s), c = d - f, v = (d + f) / 2;
-  let m = 0;
-  c !== 0 && (d === n ? m = (r - s) / c + (r < s ? 6 : 0) : d === r ? m = (s - n) / c + 2 : d === s && (m = (n - r) / c + 4), m *= 60);
-  let p = 0;
-  return v !== 0 && v !== 255 && (p = (d - v) / Math.min(v, 255 - v)), {
-    h: m,
-    s: p * 100,
-    l: v / 255 * 100,
+function H(t) {
+  const { r: e, g: r, b: s, a } = t, p = Math.min(e, r, s), v = Math.max(e, r, s), f = v - p, c = (v + p) / 2;
+  let u = 0;
+  f !== 0 && (v === e ? u = (r - s) / f + (r < s ? 6 : 0) : v === r ? u = (s - e) / f + 2 : v === s && (u = (e - r) / f + 4), u *= 60);
+  let V = 0;
+  return c !== 0 && c !== 255 && (V = (v - c) / Math.min(c, 255 - c)), {
+    h: u,
+    s: V * 100,
+    l: c / 255 * 100,
     a
   };
 }
-function H(t) {
-  return "#" + Object.values(t).map((n, r) => Math.round(r === 3 ? n * 255 : n).toString(16).padStart(2, "0")).join("");
+function A(t) {
+  return "#" + Object.values(t).map((e, r) => Math.round(r === 3 ? e * 255 : e).toString(16).padStart(2, "0")).join("");
 }
-function $(t) {
-  return ot(et(L(t)));
+function F(t) {
+  return rt(nt(H(t)));
 }
-const Ct = {
+const Tt = {
   hex: {
     hex: (t) => t,
-    hsl: (t) => L(A(t)),
-    hsv: (t) => T($(A(t))),
-    hwb: (t) => $(A(t)),
-    rgb: A
+    hsl: (t) => H(k(t)),
+    hsv: (t) => x(F(k(t))),
+    hwb: (t) => F(k(t)),
+    rgb: k
   },
   hsl: {
-    hex: (t) => H(E(t)),
+    hex: (t) => A(M(t)),
     hsl: (t) => t,
-    hsv: et,
-    hwb: (t) => $(E(t)),
-    rgb: E
+    hsv: nt,
+    hwb: (t) => F(M(t)),
+    rgb: M
   },
   hsv: {
-    hex: (t) => H(M(t)),
-    hsl: nt,
+    hex: (t) => A($(t)),
+    hsl: ot,
     hsv: (t) => t,
-    hwb: ot,
-    rgb: M
+    hwb: rt,
+    rgb: $
   },
   hwb: {
-    hex: (t) => H(M(T(t))),
-    hsl: (t) => L(M(T(t))),
-    hsv: T,
+    hex: (t) => A($(x(t))),
+    hsl: (t) => H($(x(t))),
+    hsv: x,
     hwb: (t) => t,
-    rgb: (t) => M(T(t))
+    rgb: (t) => $(x(t))
   },
   rgb: {
-    hex: H,
-    hsl: L,
-    hsv: (t) => T($(t)),
-    hwb: $,
+    hex: A,
+    hsl: H,
+    hsv: (t) => x(F(t)),
+    hwb: F,
     rgb: (t) => t
   }
 };
-function Tt(t, n, r) {
-  return Ct[t][n](r);
+function $t(t, e, r) {
+  return Tt[t][e](r);
 }
-function Ft(t, n) {
-  const r = t.toFixed(n);
+function Ft(t, e) {
+  const r = t.toFixed(e);
   return r.includes(".") ? r.replace(/\.?0+$/, "") : r;
 }
-const Mt = {
+const Nt = {
   deg: 1,
@@ -152,23 +152,23 @@ grad: 0.9,
   turn: 360
-}, P = {
+}, E = {
   from(t) {
-    return t.endsWith("%") ? F.from(t, { referenceValue: 1 }) : w.from(t, { min: 0, max: 1 });
+    return t.endsWith("%") ? C.from(t, { referenceValue: 1 }) : b.from(t, { min: 0, max: 1 });
   },
   to(t) {
-    return w.to(t);
+    return b.to(t);
   }
-}, Z = {
+}, tt = {
   from(t) {
-    const n = t.match(/deg|g?rad|turn$/);
-    if (n === null)
-      return w.from(t);
-    const r = n[0];
-    return w.from(t.slice(0, -r.length)) * Mt[r];
+    const e = t.match(/deg|g?rad|turn$/);
+    if (e === null)
+      return b.from(t);
+    const r = e[0];
+    return b.from(t.slice(0, -r.length)) * Nt[r];
   },
   to(t) {
-    return w.to(t);
+    return b.to(t);
   }
-}, w = {
-  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: e = Number.NEGATIVE_INFINITY, max: r = Number.POSITIVE_INFINITY } = {}) {
+    return t.endsWith(".") ? NaN : N(Number(t), e, r);
   },
@@ -178,52 +178,52 @@ to(t) {
   }
-}, F = {
-  from(t, { referenceValue: n = 100, min: r = 0, max: s = 100 } = {}) {
-    return t.endsWith("%") ? w.from(t.slice(0, -1), { min: r, max: s }) * n / 100 : NaN;
+}, C = {
+  from(t, { referenceValue: e = 100, min: r = 0, max: s = 100 } = {}) {
+    return t.endsWith("%") ? b.from(t.slice(0, -1), { min: r, max: s }) * e / 100 : NaN;
   },
   to(t) {
-    return w.to(t) + "%";
+    return b.to(t) + "%";
   }
-}, D = {
+}, z = {
   from(t) {
-    return t.endsWith("%") ? F.from(t, { referenceValue: 255 }) : w.from(t, { min: 0, max: 255 });
+    return t.endsWith("%") ? C.from(t, { referenceValue: 255 }) : b.from(t, { min: 0, max: 255 });
   },
   to(t) {
-    return w.to(t);
+    return b.to(t);
   }
-}, $t = {
+}, Vt = {
   hsl: {
-    h: Z,
-    s: F,
-    l: F
+    h: tt,
+    s: C,
+    l: C
   },
   hwb: {
-    h: Z,
-    w: F,
-    b: F
+    h: tt,
+    w: C,
+    b: C
   },
   rgb: {
-    r: D,
-    g: D,
-    b: D
+    r: z,
+    g: z,
+    b: z
   }
 };
-function S(t, n) {
-  return $t[t][n];
+function L(t, e) {
+  return Vt[t][e];
 }
-function _({ format: t, color: n }, r) {
+function D({ format: t, color: e }, r) {
   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(([a, f]) => {
-    const d = a === "a" ? P : S(t, a);
-    return (a === "a" ? "/ " : "") + d.to(f);
+    return r && [5, 9].includes(e.length) ? e.substring(0, e.length - (e.length - 1) / 4) : e;
+  const s = Object.entries(e).slice(0, r ? 3 : 4).map(([a, p]) => {
+    const v = a === "a" ? E : L(t, a);
+    return (a === "a" ? "/ " : "") + v.to(p);
   });
   return `${t}(${s.join(" ")})`;
 }
-function rt(t) {
+function st(t) {
   return /^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(t);
 }
-function kt(t) {
+function It(t) {
   return "r" in t ? "rgb" : "w" in t ? "hwb" : "v" in t ? "hsv" : "s" in t ? "hsl" : null;
 }
-const tt = {
+const et = {
   hsl: ["h", "s", "l", "a"],
@@ -233,37 +233,37 @@ hwb: ["h", "w", "b", "a"],
 };
-function It(t) {
+function kt(t) {
   if (typeof t != "string") {
-    const c = kt(t);
-    return c === null ? null : { format: c, color: t };
+    const f = It(t);
+    return f === null ? null : { format: f, color: t };
   }
   if (t.startsWith("#"))
-    return rt(t) ? { format: "hex", color: t } : null;
+    return st(t) ? { format: "hex", color: t } : null;
   if (!t.includes("(")) {
-    const c = document.createElement("canvas").getContext("2d");
-    c.fillStyle = t;
-    const v = c.fillStyle;
-    return v === "#000000" && t !== "black" ? null : { format: "hex", color: v };
+    const f = document.createElement("canvas").getContext("2d");
+    f.fillStyle = t;
+    const c = f.fillStyle;
+    return c === "#000000" && t !== "black" ? null : { format: "hex", color: c };
   }
-  const [n, r] = t.split("("), s = n.substring(0, 3);
-  if (!(s in tt))
+  const [e, r] = t.split("("), s = e.substring(0, 3);
+  if (!(s in et))
     return null;
   const a = r.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
   a.length === 3 && a.push("1");
-  const f = tt[s], d = Object.fromEntries(f.map((c, v) => {
-    const m = c === "a" ? P : S(s, c);
+  const p = et[s], v = Object.fromEntries(p.map((f, c) => {
+    const u = f === "a" ? E : L(s, f);
     return [
-      c,
-      m.from(a[v])
+      f,
+      u.from(a[c])
     ];
   }));
-  return { format: s, color: d };
+  return { format: s, color: v };
 }
-function Nt(t, n, r) {
-  const s = t.getBoundingClientRect(), a = n - s.left, f = r - s.top;
+function At(t, e, r) {
+  const s = t.getBoundingClientRect(), a = e - s.left, p = r - s.top;
   return {
-    x: s.width === 0 ? 0 : k(a / s.width * 100, 0, 100),
-    y: s.height === 0 ? 0 : k((1 - f / s.height) * 100, 0, 100)
+    x: s.width === 0 ? 0 : N(a / s.width * 100, 0, 100),
+    y: s.height === 0 ? 0 : N((1 - p / s.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" }, St = ["id", "value"], Ot = { class: "vacp-color-inputs" }, Rt = { class: "vacp-color-input-group" }, Wt = ["for"], jt = ["id", "value"], Dt = ["id", "for", "onInput"], _t = { class: "vacp-color-input-label-text" }, zt = ["id", "value", "onInput"], Kt = /* @__PURE__ */ pt({
+const Mt = { class: "vacp-range-input-group" }, Ht = ["for"], Et = { class: "vacp-range-input-label-text vacp-range-input-label-text--hue" }, Lt = ["id", "value"], St = ["for"], Pt = { class: "vacp-range-input-label-text vacp-range-input-label-text--alpha" }, Rt = ["id", "value"], Ot = { class: "vacp-actions" }, Wt = { class: "vacp-color-inputs" }, jt = { class: "vacp-color-input-group" }, zt = ["for"], Dt = ["id", "value"], _t = ["id", "for", "onInput"], Kt = { class: "vacp-color-input-label-text" }, Yt = ["id", "value", "onInput"], Bt = /* @__PURE__ */ ht({
   __name: "ColorPicker",
@@ -279,10 +279,11 @@ props: {
   emits: ["color-change", "color-copy"],
-  setup(t, { expose: n, emit: r }) {
-    const s = ["hex", "hsl", "hsv", "hwb", "rgb"], a = t, f = r;
-    n({
-      copyColor: U
+  setup(t, { expose: e, emit: r }) {
+    const s = ["hex", "hsl", "hsv", "hwb", "rgb"], a = t, p = r;
+    e({
+      copyColor: X,
+      switchFormat: _
     });
-    const d = N(null), c = N(null), v = N(null);
-    let m = !1;
-    const p = N(a.visibleFormats.includes(a.defaultFormat) ? a.defaultFormat : a.visibleFormats[0]), u = vt({
+    const v = ft("colorSpace");
+    let f = !1;
+    const c = pt(a.visibleFormats.includes(a.defaultFormat) ? a.defaultFormat : a.visibleFormats[0]), u = vt({
       hex: "#ffffffff",
@@ -293,134 +294,131 @@ hsl: { h: 0, s: 0, l: 100, a: 1 },
       rgb: { r: 255, g: 255, b: 255, a: 1 }
-    }), st = G(function() {
-      const o = p.value, e = u[o];
-      return o.split("").map((l) => {
-        const i = e[l];
+    }), V = O(function() {
+      const o = c.value, n = u[o];
+      return o.split("").map((i) => {
+        const l = n[i];
         return {
-          value: S(o, l).to(i),
-          channel: l,
-          label: l.toUpperCase()
+          value: L(o, i).to(l),
+          channel: i,
+          label: i.toUpperCase()
         };
       }).concat(a.alphaChannel === "show" ? [{
-        value: P.to(e.a),
+        value: E.to(n.a),
         channel: "a",
         label: "Alpha"
       }] : []);
-    }), at = G(function() {
+    }), at = O(function() {
       return a.alphaChannel === "hide" && [5, 9].includes(u.hex.length) ? u.hex.substring(0, u.hex.length - (u.hex.length - 1) / 4) : u.hex;
+    }), S = O(function() {
+      return u.hsv;
     });
-    dt(() => a.color, K), mt(function() {
-      document.addEventListener("mousemove", O, { passive: !1 }), document.addEventListener("touchmove", R, { passive: !1 }), document.addEventListener("mouseup", I), document.addEventListener("touchend", I), K(a.color);
-    }), gt(function() {
-      document.removeEventListener("mousemove", O), document.removeEventListener("touchmove", R), document.removeEventListener("mouseup", I), document.removeEventListener("touchend", I);
+    dt(() => a.color, Y), mt(function() {
+      document.addEventListener("pointermove", P, { passive: !1 }), document.addEventListener("touchmove", R, { passive: !1 }), document.addEventListener("pointerup", I), document.addEventListener("touchend", I), Y(a.color);
+    }), bt(function() {
+      document.removeEventListener("pointermove", P), document.removeEventListener("touchmove", R), document.removeEventListener("pointerup", I), document.removeEventListener("touchend", I);
     });
-    function lt() {
-      const e = (a.visibleFormats.findIndex((l) => l === p.value) + 1) % a.visibleFormats.length;
-      p.value = a.visibleFormats[e];
+    function _() {
+      const n = (a.visibleFormats.findIndex((i) => i === c.value) + 1) % a.visibleFormats.length;
+      c.value = a.visibleFormats[n];
     }
     function it(o) {
-      m = !0, O(o);
+      f = !0, P(o);
     }
-    function ut(o) {
-      m = !0, R(o);
+    function lt(o) {
+      f = !0, R(o);
     }
     function I() {
-      m = !1;
+      f = !1;
     }
-    function O(o) {
-      o.buttons !== 1 || m === !1 || !(c.value instanceof HTMLElement) || z(c.value, o.clientX, o.clientY);
+    function P(o) {
+      o.buttons !== 1 || !f || !(v.value instanceof HTMLElement) || K(v.value, o.clientX, o.clientY);
     }
     function R(o) {
-      if (m === !1 || !(c.value instanceof HTMLElement))
+      if (!f || !(v.value instanceof HTMLElement))
         return;
       o.preventDefault();
-      const e = o.touches[0];
-      z(c.value, e.clientX, e.clientY);
+      const n = o.touches[0];
+      K(v.value, n.clientX, n.clientY);
     }
-    function z(o, e, l) {
-      const i = Nt(o, e, l), g = Object.assign({}, u.hsv);
-      g.s = i.x, g.v = i.y, y("hsv", g);
+    function K(o, n, i) {
+      const l = At(o, n, i), d = Object.assign({}, u.hsv);
+      d.s = l.x, d.v = l.y, g("hsv", d);
     }
-    function ct(o) {
+    function ut(o) {
       if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(o.key))
         return;
       o.preventDefault();
-      const e = ["ArrowLeft", "ArrowDown"].includes(o.key) ? -1 : 1, l = ["ArrowLeft", "ArrowRight"].includes(o.key) ? "s" : "v", i = o.shiftKey ? 10 : 1, g = u.hsv[l] + e * i, b = Object.assign({}, u.hsv);
-      b[l] = k(g, 0, 100), y("hsv", b);
+      const n = ["ArrowLeft", "ArrowDown"].includes(o.key) ? -1 : 1, i = ["ArrowLeft", "ArrowRight"].includes(o.key) ? "s" : "v", l = o.shiftKey ? 10 : 1, d = u.hsv[i] + n * l, m = Object.assign({}, u.hsv);
+      m[i] = N(d, 0, 100), g("hsv", m);
     }
-    function K(o) {
-      const e = It(o);
-      e !== null && y(e.format, e.color);
+    function Y(o) {
+      const n = kt(o);
+      n !== null && g(n.format, n.color);
     }
-    function Y(o, e) {
-      const l = o.currentTarget, i = Object.assign({}, u.hsv);
-      i[e] = Number(l.value), y("hsv", i);
+    function B(o, n) {
+      const i = o.currentTarget, l = Object.assign({}, u.hsv);
+      l[n] = Number(i.value), g("hsv", l);
     }
-    function ht(o) {
-      const e = o.target;
-      rt(e.value) && y("hex", e.value);
+    function ct(o) {
+      const n = o.target;
+      st(n.value) && g("hex", n.value);
     }
-    function B(o, e) {
-      const l = o.target, i = p.value, g = Object.assign({}, u[i]), W = (e === "a" ? P : S(i, e)).from(l.value);
-      Number.isNaN(W) || W === void 0 || (g[e] = W, y(i, g));
+    function U(o, n) {
+      const i = o.target, l = c.value, d = Object.assign({}, u[l]), J = (n === "a" ? E : L(l, n)).from(i.value);
+      Number.isNaN(J) || (d[n] = J, g(l, d));
     }
-    function y(o, e) {
-      let l = e;
+    function g(o, n) {
+      let i = n;
       if (a.alphaChannel === "hide")
-        if (typeof e != "string")
-          e.a = 1, l = e;
-        else if ([5, 9].includes(e.length)) {
-          const i = (e.length - 1) / 4;
-          l = e.substring(0, e.length - i) + "f".repeat(i);
-        } else [4, 7].includes(e.length) && (l = e + "f".repeat((e.length - 1) / 3));
-      if (!xt(u[o], l)) {
-        u[o] = l;
-        for (const i of s)
-          i !== o && (u[i] = Tt(o, i, l));
-        f("color-change", q());
+        if (typeof n != "string")
+          n.a = 1, i = n;
+        else if ([5, 9].includes(n.length)) {
+          const l = (n.length - 1) / 4;
+          i = n.substring(0, n.length - l) + "f".repeat(l);
+        } else [4, 7].includes(n.length) && (i = n + "f".repeat((n.length - 1) / 3));
+      if (!Ct(u[o], i)) {
+        u[o] = i;
+        for (const l of s)
+          l !== o && (u[l] = $t(o, l, i));
+        p("color-change", q());
       }
-      d.value instanceof HTMLElement && c.value instanceof HTMLElement && v.value instanceof HTMLElement && ft(d.value, c.value, v.value);
     }
-    async function U() {
-      const o = u[p.value], e = a.alphaChannel === "hide", l = _({ color: o, format: p.value }, e);
-      await (a.copy ? a.copy : window.navigator.clipboard.writeText)(l), f("color-copy", q());
+    async function X() {
+      const o = u[c.value], n = a.alphaChannel === "hide", i = D({ color: o, format: c.value }, n);
+      await (a.copy ? a.copy : (d) => window.navigator.clipboard.writeText(d))(i), p("color-copy", q());
     }
-    function ft(o, e, l) {
-      const i = _({ format: "hsl", color: u.hsl }, !0);
-      o.style.setProperty("--vacp-color", i), e.style.position = "relative", e.style.backgroundColor = `hsl(${u.hsl.h} 100% 50%)`, e.style.backgroundImage = "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)", l.style.boxSizing = "border-box", l.style.position = "absolute", l.style.left = `${u.hsv.s}%`, l.style.bottom = `${u.hsv.v}%`;
-    }
     function q() {
-      const o = a.alphaChannel === "hide", e = _({ color: u[p.value], format: p.value }, o);
+      const o = a.alphaChannel === "hide", n = D({ color: u[c.value], format: c.value }, o);
       return {
         colors: u,
-        cssColor: e
+        cssColor: n
       };
     }
-    function X(o) {
+    function G(o) {
       if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(o.key) || !o.shiftKey)
         return;
-      const e = o.currentTarget, l = Number(e.step), i = ["ArrowLeft", "ArrowDown"].includes(o.key) ? -1 : 1, g = Number(e.value) + i * l * 10, b = k(g, Number(e.min), Number(e.max));
-      e.value = String(b - i * l);
+      const n = o.currentTarget, i = Number(n.step), l = ["ArrowLeft", "ArrowDown"].includes(o.key) ? -1 : 1, d = Number(n.value) + l * i * 10, m = N(d, Number(n.min), Number(n.max));
+      n.value = String(m - l * i);
     }
-    return (o, e) => (x(), C("div", {
-      ref_key: "colorPicker",
-      ref: d,
-      class: "vacp-color-picker"
+    return (o, n) => (y(), w("div", {
+      class: "vacp-color-picker",
+      style: W(`--vacp-color: ${gt(D)({ format: "hsl", color: u.hsl }, !0)}`)
     }, [
       h("div", {
         ref_key: "colorSpace",
-        ref: c,
+        ref: v,
         class: "vacp-color-space",
-        onMousedown: it,
-        onTouchstart: ut
+        style: W(`position: relative; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); background-color: hsl(${S.value.h} 100% 50%)`),
+        onPointerdown: it,
+        onTouchstart: lt
       }, [
         h("div", {
-          ref_key: "thumb",
-          ref: v,
+          ref: "thumb",
           class: "vacp-color-space-thumb",
           tabindex: "0",
           "aria-label": "Color space thumb",
-          onKeydown: ct
-        }, null, 544)
-      ], 544),
-      h("div", Vt, [
+          style: W(`box-sizing: border-box; position: absolute; left: ${S.value.s}%; bottom: ${S.value.v}%;`),
+          onKeydown: ut
+        }, null, 36)
+      ], 36),
+      h("div", Mt, [
         h("label", {
@@ -430,5 +428,5 @@ class: "vacp-range-input-label vacp-range-input-label--hue",
         }, [
-          h("span", Ht, [
-            V(o.$slots, "hue-range-input-label", {}, () => [
-              e[2] || (e[2] = J("Hue"))
+          h("span", Et, [
+            T(o.$slots, "hue-range-input-label", {}, () => [
+              n[2] || (n[2] = Z("Hue"))
             ])
@@ -444,7 +442,7 @@ ]),
             step: "1",
-            onKeydownPassive: X,
-            onInput: e[0] || (e[0] = (l) => Y(l, "h"))
-          }, null, 40, Et)
-        ], 8, At),
-        o.alphaChannel === "show" ? (x(), C("label", {
+            onKeydownPassive: G,
+            onInput: n[0] || (n[0] = (i) => B(i, "h"))
+          }, null, 40, Lt)
+        ], 8, Ht),
+        o.alphaChannel === "show" ? (y(), w("label", {
           key: 0,
@@ -455,4 +453,4 @@ class: "vacp-range-input-label vacp-range-input-label--alpha",
           h("span", Pt, [
-            V(o.$slots, "alpha-range-input-label", {}, () => [
-              e[3] || (e[3] = J("Alpha"))
+            T(o.$slots, "alpha-range-input-label", {}, () => [
+              n[3] || (n[3] = Z("Alpha"))
             ])
@@ -468,32 +466,35 @@ ]),
             step: "0.01",
-            onKeydownPassive: X,
-            onInput: e[1] || (e[1] = (l) => Y(l, "a"))
-          }, null, 40, St)
-        ], 8, Lt)) : Q("", !0)
+            onKeydownPassive: G,
+            onInput: n[1] || (n[1] = (i) => B(i, "a"))
+          }, null, 40, Rt)
+        ], 8, St)) : Q("", !0)
       ]),
-      h("button", {
-        class: "vacp-copy-button",
-        type: "button",
-        onClick: U
-      }, [
-        V(o.$slots, "copy-button", {}, () => [
-          e[4] || (e[4] = h("span", { class: "vacp-visually-hidden" }, "Copy color", -1)),
-          e[5] || (e[5] = h("svg", {
-            class: "vacp-icon",
-            xmlns: "http://www.w3.org/2000/svg",
-            "aria-hidden": "true",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 32 32"
-          }, [
-            h("path", {
-              d: "M25.313 28v-18.688h-14.625v18.688h14.625zM25.313 6.688c1.438 0 2.688 1.188 2.688 2.625v18.688c0 1.438-1.25 2.688-2.688 2.688h-14.625c-1.438 0-2.688-1.25-2.688-2.688v-18.688c0-1.438 1.25-2.625 2.688-2.625h14.625zM21.313 1.313v2.688h-16v18.688h-2.625v-18.688c0-1.438 1.188-2.688 2.625-2.688h16z",
-              fill: "currentColor"
-            })
-          ], -1))
-        ])
+      h("div", Ot, [
+        h("button", {
+          class: "vacp-copy-button",
+          type: "button",
+          onClick: X
+        }, [
+          T(o.$slots, "copy-button", {}, () => [
+            n[4] || (n[4] = h("span", { class: "vacp-visually-hidden" }, "Copy color", -1)),
+            n[5] || (n[5] = h("svg", {
+              class: "vacp-icon",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 32 32"
+            }, [
+              h("path", {
+                d: "M25.313 28v-18.688h-14.625v18.688h14.625zM25.313 6.688c1.438 0 2.688 1.188 2.688 2.625v18.688c0 1.438-1.25 2.688-2.688 2.688h-14.625c-1.438 0-2.688-1.25-2.688-2.688v-18.688c0-1.438 1.25-2.625 2.688-2.625h14.625zM21.313 1.313v2.688h-16v18.688h-2.625v-18.688c0-1.438 1.188-2.688 2.625-2.688h16z",
+                fill: "currentColor"
+              })
+            ], -1))
+          ])
+        ]),
+        T(o.$slots, "actions")
       ]),
-      h("div", Ot, [
-        h("div", Rt, [
-          p.value === "hex" ? (x(), C("label", {
+      h("div", Wt, [
+        h("div", jt, [
+          c.value === "hex" ? (y(), w("label", {
             key: 0,
@@ -503,3 +504,3 @@ class: "vacp-color-input-label",
           }, [
-            e[6] || (e[6] = h("span", { class: "vacp-color-input-label-text" }, " Hex ", -1)),
+            n[6] || (n[6] = h("span", { class: "vacp-color-input-label-text" }, " Hex ", -1)),
             h("input", {
@@ -510,30 +511,30 @@ id: `${o.id}-color-hex`,
               value: at.value,
-              onInput: ht
-            }, null, 40, jt)
-          ], 8, Wt)) : (x(!0), C(bt, { key: 1 }, wt(st.value, ({ value: l, channel: i, label: g }) => (x(), C("label", {
-            id: `${o.id}-color-${p.value}-${i}-label`,
-            key: `${o.id}-color-${p.value}-${i}-label`,
+              onInput: ct
+            }, null, 40, Dt)
+          ], 8, zt)) : (y(!0), w(wt, { key: 1 }, yt(V.value, ({ value: i, channel: l, label: d }) => (y(), w("label", {
+            id: `${o.id}-color-${c.value}-${l}-label`,
+            key: `${o.id}-color-${c.value}-${l}-label`,
             class: "vacp-color-input-label",
-            for: `${o.id}-color-${p.value}-${i}`,
-            onInput: (b) => B(b, i)
+            for: `${o.id}-color-${c.value}-${l}`,
+            onInput: (m) => U(m, l)
           }, [
-            h("span", _t, yt(g), 1),
+            h("span", Kt, xt(d), 1),
             h("input", {
-              id: `${o.id}-color-${p.value}-${i}`,
+              id: `${o.id}-color-${c.value}-${l}`,
               class: "vacp-color-input",
               type: "text",
-              value: l,
-              onInput: (b) => B(b, i)
-            }, null, 40, zt)
-          ], 40, Dt))), 128))
+              value: i,
+              onInput: (m) => U(m, l)
+            }, null, 40, Yt)
+          ], 40, _t))), 128))
         ]),
-        o.visibleFormats.length > 1 ? (x(), C("button", {
+        o.visibleFormats.length > 1 ? (y(), w("button", {
           key: 0,
           class: "vacp-format-switch-button",
           type: "button",
-          onClick: lt
+          onClick: _
         }, [
-          V(o.$slots, "format-switch-button", {}, () => [
-            e[7] || (e[7] = h("span", { class: "vacp-visually-hidden" }, "Switch format", -1)),
-            e[8] || (e[8] = h("svg", {
+          T(o.$slots, "format-switch-button", {}, () => [
+            n[7] || (n[7] = h("span", { class: "vacp-visually-hidden" }, "Switch format", -1)),
+            n[8] || (n[8] = h("svg", {
               class: "vacp-icon",
@@ -553,12 +554,12 @@ "aria-hidden": "true",
       ])
-    ], 512));
+    ], 4));
   }
-}), Bt = {
+}), Xt = {
   install(t) {
-    t.component("ColorPicker", Kt);
+    t.component("ColorPicker", Bt);
   }
 };
 export {
-  Kt as ColorPicker,
-  Bt as default
+  Bt as ColorPicker,
+  Xt as default
 };

LICENSE.txt

@@ -1,2 +0,2 @@
-Copyright 2024 Philipp Rudloff
+Copyright 2025 Philipp Rudloff
 
@@ -3,0 +3,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

package.json

 {
 	"name": "vue-accessible-color-picker",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"license": "MIT",
@@ -41,8 +41,3 @@ "description": "Color picker component for Vue.js",
 	"scripts": {
-		"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",
-		"build:types": "vue-tsc --project tsconfig.build-types.json",
-		"build:consolidate-types": "api-extractor run --local --verbose",
+		"build": "vite build",
 		"start": "vite",
@@ -66,42 +61,36 @@ "test": "vitest run --coverage",
 	"devDependencies": {
-		"@babel/types": "^7.26.5",
-		"@commitlint/cli": "19.6.1",
-		"@commitlint/config-conventional": "19.6.0",
-		"@eslint/js": "^9.18.0",
-		"@microsoft/api-extractor": "^7.49.1",
+		"@babel/types": "^7.28.1",
+		"@commitlint/cli": "19.8.1",
+		"@commitlint/config-conventional": "19.8.1",
+		"@eslint/js": "^9.31.0",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^13.0.1",
 		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/github": "^11.0.1",
-		"@semantic-release/npm": "^12.0.1",
+		"@semantic-release/github": "^11.0.3",
+		"@semantic-release/npm": "^12.0.2",
 		"@semantic-release/release-notes-generator": "^14.0.3",
-		"@stylistic/eslint-plugin": "^2.13.0",
-		"@types/eslint__js": "^8.42.3",
-		"@vitejs/plugin-vue": "^5.2.1",
-		"@vitest/coverage-v8": "^2.1.8",
-		"@vue/eslint-config-typescript": "^14.3.0",
+		"@stylistic/eslint-plugin": "^5.2.0",
+		"@vitejs/plugin-vue": "^6.0.0",
+		"@vitest/coverage-v8": "^3.2.4",
+		"@vue/eslint-config-typescript": "^14.6.0",
 		"@vue/test-utils": "^2.4.6",
-		"eslint": "^9.18.0",
-		"eslint-plugin-vue": "^9.32.0",
-		"globals": "^15.14.0",
+		"eslint": "^9.31.0",
+		"eslint-plugin-vue": "^10.3.0",
+		"globals": "^16.3.0",
 		"husky": "^9.1.7",
-		"jsdom": "^25.0.1",
-		"lockfile-lint": "^4.14.0",
-		"npm-run-all2": "^7.0.2",
-		"postcss": "^8.5.1",
-		"publint": "^0.3.2",
-		"rimraf": "^6.0.1",
-		"sass": "^1.83.4",
-		"semantic-release": "^24.2.1",
-		"standard": "^17.1.2",
-		"typescript": "~5.7.3",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^5.4.11",
-		"vitest": "^2.1.8",
-		"vue": "^3.5.13",
-		"vue-tsc": "^2.2.0"
-	},
-	"overrides": {
-		"conventional-changelog-conventionalcommits": ">= 8.0.0"
+		"jsdom": "^26.1.0",
+		"lockfile-lint": "^4.14.1",
+		"npm-run-all2": "^8.0.4",
+		"postcss": "^8.5.6",
+		"publint": "^0.3.12",
+		"sass": "^1.89.2",
+		"semantic-release": "^24.2.7",
+		"typescript": "~5.8.3",
+		"typescript-eslint": "^8.37.0",
+		"vite": "^7.0.5",
+		"vite-plugin-dts": "^4.5.4",
+		"vitest": "^3.2.4",
+		"vue": "^3.5.17",
+		"vue-tsc": "^3.0.3"
 	}
 }

README.md

@@ -7,3 +7,5 @@ # vue-accessible-color-picker
 
-This package’s files are distributed in the ES module format and have not been transpiled.
+- Distributed is ES module format
+- Not transpiled
+- Uses [vue](https://www.npmjs.com/package/vue) (as a peer dependency)
 
@@ -31,4 +33,8 @@ Links:
 		- [`visibleFormats`](#visibleformats)
+	- [Exposed methods](#exposed-methods)
+		- [`copyColor()`](#copycolor)
+		- [`switchFormat()`](#switchformat)
 	- [Events](#events)
 		- [`color-change`](#color-change)
+		- [`color-copy`](#color-copy)
 	- [Slots](#slots)
@@ -45,2 +51,4 @@ - [alpha-range-input-label](#alpha-range-input-label)
 
+Install the package (and its peer dependencies).
+
 ```sh
@@ -50,2 +58,4 @@ npm install vue-accessible-color-picker
 
+Note: this custom element uses vue under the hood. This dependency is a _peer_ dependency and will have to be installed as well.
+
 ## Usage
@@ -176,2 +186,32 @@
 
+### Exposed methods
+
+Methods that are exposed on the Vue component instance.
+
+#### copyColor
+
+- **Description**: Copies the current color (determined by the active color format).
+
+  This method behaves the same as activating the “Copy color” button.
+
+  **Only works in secure browsing contexts (i.e. HTTPS) unless a `props.copy` is provided**.
+- **Return type**: `Promise<void>`
+- **Usage**:
+
+	Vue:
+	```vue
+	colorPicker.vm.copyColor()
+	```
+
+#### switchFormat
+
+- **Description**: Sets the next active color format by cycling through `colorPicker.visibleFormats`. This method behaves the same as activating the “Switch format” button. To set a specific color format, use the [`format` property](#format).
+- **Return type**: `void`
+- **Usage**:
+
+	Vue:
+	```vue
+	colorPicker.vm.switchFormat()
+	```
+
 ### Events
@@ -241,5 +281,12 @@
 
+#### actions
+
+- **Description**: Add additional content following the copy button.
+- **Required**: No.
+- **Default content**: _None._
+
 #### alpha-range-input-label
 
 - **Description**: Overrides the content of the alpha range input’s `label` element.
+- **Required**: No.
 - **Default content**: Alpha
@@ -250,2 +297,3 @@
 - **Description**: Overrides the content of the copy button element.
+- **Required**: No.
 - **Default content**: Copy color (and SVG icon)
@@ -256,2 +304,3 @@
 - **Description**: Overrides the content of the format switch button element.
+- **Required**: No.
 - **Default content**: Switch format (and SVG icon)
@@ -262,2 +311,3 @@
 - **Description**: Overrides the content of the hue range input’s `label` element.
+- **Required**: No.
 - **Default content**: Hue
@@ -264,0 +314,0 @@

No alert changes

Improved metrics

Total package byte prevSize

42364

1.7%

Dev dependency count

33

-8.33%

Lines of code

710

0.42%

Number of lines in readme file

366

15.82%

No dependency changes