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

Comparing version 5.0.1 to 5.1.0

dist/ColorPicker.d.ts

@@ -1,30 +0,37 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
 import { Plugin as Plugin_2 } from 'vue';
-import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare const __VLS_component: DefineComponent<ColorPickerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"color-change": (data: ColorChangeDetail) => any;
+"color-copy": (data: ColorChangeDetail) => any;
+}, string, PublicProps, Readonly<ColorPickerProps> & Readonly<{
+"onColor-change"?: ((data: ColorChangeDetail) => any) | undefined;
+"onColor-copy"?: ((data: ColorChangeDetail) => any) | undefined;
+}>, {
+id: string;
+color: string | ColorHsl | ColorHwb | ColorRgb;
+visibleFormats: VisibleColorFormat[];
+defaultFormat: VisibleColorFormat;
+alphaChannel: AlphaChannelProp;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
+declare function __VLS_template(): {
+    slots: {
+        "hue-range-input-label"?(_: {}): any;
+        "alpha-range-input-label"?(_: {}): any;
+        "copy-button"?(_: {}): any;
+        "format-switch-button"?(_: {}): any;
     };
+    refs: {
+        colorPicker: HTMLDivElement;
+        colorSpace: HTMLDivElement;
+        thumb: HTMLDivElement;
+    };
+    attrs: Partial<{}>;
 };
 
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
@@ -75,30 +82,3 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 
-export declare const ColorPicker: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ColorPickerProps>, {
-color: string;
-id: string;
-visibleFormats: () => string[];
-defaultFormat: string;
-alphaChannel: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"color-change": (data: ColorChangeDetail) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ColorPickerProps>, {
-color: string;
-id: string;
-visibleFormats: () => string[];
-defaultFormat: string;
-alphaChannel: string;
-}>>> & {
-"onColor-change"?: ((data: ColorChangeDetail) => any) | undefined;
-}, {
-id: string;
-color: string | ColorHsl | ColorHwb | ColorRgb;
-visibleFormats: VisibleColorFormat[];
-defaultFormat: VisibleColorFormat;
-alphaChannel: AlphaChannelProp;
-}, {}>, {
-    "hue-range-input-label"?(_: {}): any;
-    "alpha-range-input-label"?(_: {}): any;
-    "copy-button"?(_: {}): any;
-    "format-switch-button"?(_: {}): any;
-}>;
+export declare const ColorPicker: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
@@ -105,0 +85,0 @@ export declare interface ColorPickerProps {

dist/ColorPicker.js

@@ -1,60 +0,60 @@
-import { defineComponent as vt, ref as F, reactive as pt, computed as U, watch as dt, onMounted as mt, onBeforeUnmount as gt, openBlock as w, createElementBlock as y, createElementVNode as h, renderSlot as I, createTextVNode as q, createCommentVNode as X, Fragment as bt, renderList as wt, toDisplayString as yt } from "vue";
-function $(t, e, s) {
-  return Math.max(e, Math.min(t, s));
+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));
 }
-function xt(t, e) {
-  if (typeof t == "string" || typeof e == "string")
-    return t === e;
-  for (const s in t)
-    if (t[s] !== e[s])
+function xt(t, n) {
+  if (typeof t == "string" || typeof n == "string")
+    return t === n;
+  for (const r in t)
+    if (t[r] !== n[r])
       return !1;
   return !0;
 }
-function N(t) {
-  const e = [], 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);
-    e.push(o === 3 * s + 1 ? f / 255 : f);
+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);
   }
-  return e.length === 3 && e.push(1), {
-    r: e[0],
-    g: e[1],
-    b: e[2],
-    a: e[3]
+  return n.length === 3 && n.push(1), {
+    r: n[0],
+    g: n[1],
+    b: n[2],
+    a: n[3]
   };
 }
-function Q(t) {
-  const e = t.l / 100, s = e + t.s / 100 * Math.min(e, 1 - e), o = s === 0 ? 0 : 200 * (1 - e / s);
+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);
   return {
     h: t.h,
-    s: o,
-    v: s * 100,
+    s,
+    v: r * 100,
     a: t.a
   };
 }
-function A(t) {
-  let e = t.h % 360;
-  e < 0 && (e += 360);
-  const s = t.s / 100, o = t.l / 100;
+function H(t) {
+  let n = t.h % 360;
+  n < 0 && (n += 360);
+  const r = t.s / 100, s = t.l / 100;
   return {
-    r: S(0, e, s, o) * 255,
-    g: S(8, e, s, o) * 255,
-    b: S(4, e, s, o) * 255,
+    r: R(0, n, r, s) * 255,
+    g: R(8, n, r, s) * 255,
+    b: R(4, n, r, s) * 255,
     a: t.a
   };
 }
-function S(t, e, s, o) {
-  const u = (t + e / 30) % 12, f = s * Math.min(o, 1 - o);
-  return o - f * Math.max(-1, Math.min(u - 3, 9 - u, 1));
+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 Z(t) {
-  const e = t.s / 100, s = t.v / 100, o = s * (1 - e / 2);
+function tt(t) {
+  const n = t.s / 100, r = t.v / 100, s = r * (1 - n / 2);
   return {
     h: t.h,
-    s: o === 0 || o === 1 ? 0 : (s - o) / Math.min(o, 1 - o) * 100,
-    l: o * 100,
+    s: s === 0 || s === 1 ? 0 : (r - s) / Math.min(s, 1 - s) * 100,
+    l: s * 100,
     a: t.a
   };
 }
-function tt(t) {
+function et(t) {
   return {
@@ -67,12 +67,12 @@ h: t.h,
 }
-function _(t) {
-  return A(Z(t));
+function M(t) {
+  return H(tt(t));
 }
 function x(t) {
-  const e = t.w / 100, s = t.b / 100;
-  let o, u;
-  const f = e + s;
-  return f >= 1 ? (o = 0, u = e / f) : (u = 1 - s, o = (1 - e / u) * 100), {
+  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), {
     h: t.h,
-    s: o,
+    s,
     v: u * 100,
@@ -82,8 +82,8 @@ a: t.a
 }
-function H(t) {
-  const { r: e, g: s, b: o, a: u } = t, f = Math.min(e, s, o), v = Math.max(e, s, o), p = v - f, d = (v + f) / 2;
+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;
   let c = 0;
-  p !== 0 && (v === e ? c = (s - o) / p + (s < o ? 6 : 0) : v === s ? c = (o - e) / p + 2 : v === o && (c = (e - s) / p + 4), c *= 60);
+  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 = (v - d) / Math.min(d, 255 - d)), {
+  return d !== 0 && d !== 255 && (l = (p - d) / Math.min(d, 255 - d)), {
     h: c,
@@ -95,7 +95,7 @@ s: l * 100,
 }
-function V(t) {
-  return "#" + Object.values(t).map((e, s) => Math.round(s === 3 ? e * 255 : e).toString(16).padStart(2, "0")).join("");
+function A(t) {
+  return "#" + Object.values(t).map((n, r) => Math.round(r === 3 ? n * 255 : n).toString(16).padStart(2, "0")).join("");
 }
-function M(t) {
-  return tt(Q(H(t)));
+function $(t) {
+  return et(Z(E(t)));
 }
@@ -105,44 +105,44 @@ const Ct = {
     hex: (t) => t,
-    hsl: (t) => H(N(t)),
-    hsv: (t) => x(M(N(t))),
-    hwb: (t) => M(N(t)),
-    rgb: N
+    hsl: (t) => E(V(t)),
+    hsv: (t) => x($(V(t))),
+    hwb: (t) => $(V(t)),
+    rgb: V
   },
   hsl: {
-    hex: (t) => V(A(t)),
+    hex: (t) => A(H(t)),
     hsl: (t) => t,
-    hsv: Q,
-    hwb: (t) => M(A(t)),
-    rgb: A
+    hsv: Z,
+    hwb: (t) => $(H(t)),
+    rgb: H
   },
   hsv: {
-    hex: (t) => V(_(t)),
-    hsl: Z,
+    hex: (t) => A(M(t)),
+    hsl: tt,
     hsv: (t) => t,
-    hwb: tt,
-    rgb: _
+    hwb: et,
+    rgb: M
   },
   hwb: {
-    hex: (t) => V(_(x(t))),
-    hsl: (t) => H(_(x(t))),
+    hex: (t) => A(M(x(t))),
+    hsl: (t) => E(M(x(t))),
     hsv: x,
     hwb: (t) => t,
-    rgb: (t) => _(x(t))
+    rgb: (t) => M(x(t))
   },
   rgb: {
-    hex: V,
-    hsl: H,
-    hsv: (t) => x(M(t)),
-    hwb: M,
+    hex: A,
+    hsl: E,
+    hsv: (t) => x($(t)),
+    hwb: $,
     rgb: (t) => t
   }
 };
-function Tt(t, e, s) {
-  return Ct[t][e](s);
+function Tt(t, n, r) {
+  return Ct[t][n](r);
 }
-function _t(t, e) {
-  const s = t.toFixed(e);
-  return s.includes(".") ? s.replace(/\.?0+$/, "") : s;
+function Mt(t, n) {
+  const r = t.toFixed(n);
+  return r.includes(".") ? r.replace(/\.?0+$/, "") : r;
 }
-const Mt = {
+const $t = {
   deg: 1,
@@ -152,3 +152,3 @@ grad: 0.9,
   turn: 360
-}, R = {
+}, j = {
   from(t) {
@@ -160,9 +160,9 @@ return t.endsWith("%") ? C.from(t, { referenceValue: 1 }) : g.from(t, { min: 0, max: 1 });
   }
-}, G = {
+}, J = {
   from(t) {
-    const e = t.match(/deg|g?rad|turn$/);
-    if (e === null)
+    const n = t.match(/deg|g?rad|turn$/);
+    if (n === null)
       return g.from(t);
-    const s = e[0];
-    return g.from(t.slice(0, -s.length)) * Mt[s];
+    const r = n[0];
+    return g.from(t.slice(0, -r.length)) * $t[r];
   },
@@ -173,11 +173,11 @@ to(t) {
 }, g = {
-  from(t, { min: e = Number.NEGATIVE_INFINITY, max: s = Number.POSITIVE_INFINITY } = {}) {
-    return t.endsWith(".") ? NaN : $(Number(t), e, s);
+  from(t, { min: n = Number.NEGATIVE_INFINITY, max: r = Number.POSITIVE_INFINITY } = {}) {
+    return t.endsWith(".") ? NaN : k(Number(t), n, r);
   },
   to(t) {
-    return _t(t, 2);
+    return Mt(t, 2);
   }
 }, C = {
-  from(t, { referenceValue: e = 100, min: s = 0, max: o = 100 } = {}) {
-    return t.endsWith("%") ? g.from(t.slice(0, -1), { min: s, max: o }) * e / 100 : NaN;
+  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;
   },
@@ -187,3 +187,3 @@ to(t) {
   }
-}, j = {
+}, W = {
   from(t) {
@@ -195,41 +195,41 @@ return t.endsWith("%") ? C.from(t, { referenceValue: 255 }) : g.from(t, { min: 0, max: 255 });
   }
-}, $t = {
+}, kt = {
   hsl: {
-    h: G,
+    h: J,
     s: C,
     l: C,
-    a: R
+    a: j
   },
   hwb: {
-    h: G,
+    h: J,
     w: C,
     b: C,
-    a: R
+    a: j
   },
   rgb: {
-    r: j,
-    g: j,
-    b: j,
-    a: R
+    r: W,
+    g: W,
+    b: W,
+    a: j
   }
 };
-function E(t, e) {
-  return $t[t][e];
+function L(t, n) {
+  return kt[t][n];
 }
-function W({ format: t, color: e }, s) {
+function D({ format: t, color: n }, r) {
   if (t === "hex")
-    return s && [5, 9].includes(e.length) ? e.substring(0, e.length - (e.length - 1) / 4) : e;
-  const o = Object.entries(e).slice(0, s ? 3 : 4).map(([u, f]) => {
-    const v = E(t, u);
-    return (u === "a" ? "/ " : "") + v.to(f);
+    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 (u === "a" ? "/ " : "") + p.to(f);
   });
-  return `${t}(${o.join(" ")})`;
+  return `${t}(${s.join(" ")})`;
 }
-function et(t) {
+function nt(t) {
   return /^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(t);
 }
-function kt(t) {
+function Ft(t) {
   return "r" in t ? "rgb" : "w" in t ? "hwb" : "v" in t ? "hsv" : "s" in t ? "hsl" : null;
 }
-const J = {
+const Q = {
   hsl: ["h", "s", "l", "a"],
@@ -239,60 +239,37 @@ hwb: ["h", "w", "b", "a"],
 };
-function Ft(t) {
+function It(t) {
   if (typeof t != "string") {
-    const p = kt(t);
-    return p === null ? null : { format: p, color: t };
+    const v = Ft(t);
+    return v === null ? null : { format: v, color: t };
   }
   if (t.startsWith("#"))
-    return et(t) ? { format: "hex", color: t } : null;
+    return nt(t) ? { format: "hex", color: t } : null;
   if (!t.includes("(")) {
-    const p = document.createElement("canvas").getContext("2d");
-    p.fillStyle = t;
-    const d = p.fillStyle;
+    const v = document.createElement("canvas").getContext("2d");
+    v.fillStyle = t;
+    const d = v.fillStyle;
     return d === "#000000" && t !== "black" ? null : { format: "hex", color: d };
   }
-  const [e, s] = t.split("("), o = e.substring(0, 3);
-  if (!(o in J))
+  const [n, r] = t.split("("), s = n.substring(0, 3);
+  if (!(s in Q))
     return null;
-  const u = s.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
+  const u = r.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
   u.length === 3 && u.push("1");
-  const f = J[o], v = Object.fromEntries(f.map((p, d) => {
-    const c = E(o, p);
+  const f = Q[s], p = Object.fromEntries(f.map((v, d) => {
+    const c = L(s, v);
     return [
-      p,
+      v,
       c.from(u[d])
     ];
   }));
-  return { format: o, color: v };
+  return { format: s, color: p };
 }
-function It(t, e, s) {
-  const o = t.getBoundingClientRect(), u = e - o.left, f = s - o.top;
+function Nt(t, n, r) {
+  const s = t.getBoundingClientRect(), u = n - s.left, f = r - s.top;
   return {
-    x: o.width === 0 ? 0 : $(u / o.width * 100, 0, 100),
-    y: o.height === 0 ? 0 : $((1 - f / o.height) * 100, 0, 100)
+    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)
   };
 }
-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"], Ot = /* @__PURE__ */ h("span", { class: "vacp-visually-hidden" }, "Copy color", -1), St = /* @__PURE__ */ h("svg", {
-  class: "vacp-icon",
-  xmlns: "http://www.w3.org/2000/svg",
-  "aria-hidden": "true",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 32 32"
-}, [
-  /* @__PURE__ */ 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), Rt = { class: "vacp-color-inputs" }, jt = { class: "vacp-color-input-group" }, Wt = ["for"], Dt = /* @__PURE__ */ h("span", { class: "vacp-color-input-label-text" }, " Hex ", -1), zt = ["id", "value"], Kt = ["id", "for", "onInput"], Yt = { class: "vacp-color-input-label-text" }, Bt = ["id", "value", "onInput"], Ut = /* @__PURE__ */ h("span", { class: "vacp-visually-hidden" }, "Switch format", -1), qt = /* @__PURE__ */ h("svg", {
-  class: "vacp-icon",
-  "aria-hidden": "true",
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "15"
-}, [
-  /* @__PURE__ */ h("path", {
-    d: "M8 15l5-5-1-1-4 2-4-2-1 1zm4-9l1-1-5-5-5 5 1 1 4-2z",
-    fill: "currentColor"
-  })
-], -1), Xt = /* @__PURE__ */ vt({
+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({
   __name: "ColorPicker",
@@ -306,7 +283,7 @@ props: {
   },
-  emits: ["color-change"],
-  setup(t, { emit: e }) {
-    const s = ["hex", "hsl", "hsv", "hwb", "rgb"], o = t, u = e, f = F(null), v = F(null), p = F(null);
+  emits: ["color-change", "color-copy"],
+  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 = F(o.visibleFormats.includes(o.defaultFormat) ? o.defaultFormat : o.visibleFormats[0]), l = pt({
+    const c = I(s.visibleFormats.includes(s.defaultFormat) ? s.defaultFormat : s.visibleFormats[0]), l = vt({
       hex: "#ffffffff",
@@ -317,107 +294,106 @@ hsl: { h: 0, s: 0, l: 100, a: 1 },
       rgb: { r: 255, g: 255, b: 255, a: 1 }
-    }), nt = U(function() {
-      const n = Object.keys(l[c.value]);
-      return c.value !== "hex" && o.alphaChannel === "hide" ? n.slice(0, 3) : n;
-    }), ot = U(function() {
-      return o.alphaChannel === "hide" && [5, 9].includes(l.hex.length) ? l.hex.substring(0, l.hex.length - (l.hex.length - 1) / 4) : l.hex;
+    }), 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;
     });
-    dt(() => o.color, z), mt(function() {
-      document.addEventListener("mousemove", L, { passive: !1 }), document.addEventListener("touchmove", P, { passive: !1 }), document.addEventListener("mouseup", k), document.addEventListener("touchend", k), z(o.color);
+    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", L), document.removeEventListener("touchmove", P), document.removeEventListener("mouseup", k), document.removeEventListener("touchend", k);
+      document.removeEventListener("mousemove", P), document.removeEventListener("touchmove", O), document.removeEventListener("mouseup", F), document.removeEventListener("touchend", F);
     });
-    function st() {
-      const r = (o.visibleFormats.findIndex((a) => a === c.value) + 1) % o.visibleFormats.length;
-      c.value = o.visibleFormats[r];
+    function rt() {
+      const e = (s.visibleFormats.findIndex((a) => a === c.value) + 1) % s.visibleFormats.length;
+      c.value = s.visibleFormats[e];
     }
-    function rt(n) {
-      d = !0, L(n);
+    function at(o) {
+      d = !0, P(o);
     }
-    function at(n) {
-      d = !0, P(n);
+    function lt(o) {
+      d = !0, O(o);
     }
-    function k() {
+    function F() {
       d = !1;
     }
-    function L(n) {
-      n.buttons !== 1 || d === !1 || !(v.value instanceof HTMLElement) || D(v.value, n.clientX, n.clientY);
+    function P(o) {
+      o.buttons !== 1 || d === !1 || !(p.value instanceof HTMLElement) || _(p.value, o.clientX, o.clientY);
     }
-    function P(n) {
-      if (d === !1 || !(v.value instanceof HTMLElement))
+    function O(o) {
+      if (d === !1 || !(p.value instanceof HTMLElement))
         return;
-      n.preventDefault();
-      const r = n.touches[0];
-      D(v.value, r.clientX, r.clientY);
+      o.preventDefault();
+      const e = o.touches[0];
+      _(p.value, e.clientX, e.clientY);
     }
-    function D(n, r, a) {
-      const i = It(n, r, a), m = Object.assign({}, l.hsv);
+    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 lt(n) {
-      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(n.key))
+    function it(o) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(o.key))
         return;
-      n.preventDefault();
-      const r = ["ArrowLeft", "ArrowDown"].includes(n.key) ? -1 : 1, a = ["ArrowLeft", "ArrowRight"].includes(n.key) ? "s" : "v", i = n.shiftKey ? 10 : 1, m = l.hsv[a] + r * i, T = Object.assign({}, l.hsv);
-      T[a] = $(m, 0, 100), b("hsv", T);
+      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);
     }
-    function z(n) {
-      const r = Ft(n);
-      r !== null && b(r.format, r.color);
+    function z(o) {
+      const e = It(o);
+      e !== null && b(e.format, e.color);
     }
-    function K(n, r) {
-      const a = n.currentTarget, i = Object.assign({}, l.hsv);
-      i[r] = Number(a.value), b("hsv", i);
+    function K(o, e) {
+      const a = o.currentTarget, i = Object.assign({}, l.hsv);
+      i[e] = Number(a.value), b("hsv", i);
     }
-    function it(n) {
-      const r = n.target;
-      et(r.value) && b("hex", r.value);
+    function ut(o) {
+      const e = o.target;
+      nt(e.value) && b("hex", e.value);
     }
-    function Y(n, r) {
-      const a = n.target, i = c.value, m = Object.assign({}, l[i]), O = E(i, r).from(a.value);
-      Number.isNaN(O) || O === void 0 || (m[r] = O, b(i, m));
+    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 b(n, r) {
-      let a = r;
-      if (o.alphaChannel === "hide")
-        if (typeof r != "string")
-          r.a = 1, a = r;
-        else if ([5, 9].includes(r.length)) {
-          const i = (r.length - 1) / 4;
-          a = r.substring(0, r.length - i) + "f".repeat(i);
-        } else
-          [4, 7].includes(r.length) && (a = r + "f".repeat((r.length - 1) / 3));
-      if (!xt(l[n], a)) {
-        l[n] = a;
-        for (const i of s)
-          i !== n && (l[i] = Tt(n, i, a));
-        u("color-change", ft());
+    function b(o, e) {
+      let a = e;
+      if (s.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);
+        } 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));
+        u("color-change", B());
       }
-      f.value instanceof HTMLElement && v.value instanceof HTMLElement && p.value instanceof HTMLElement && ht(f.value, v.value, p.value);
+      f.value instanceof HTMLElement && p.value instanceof HTMLElement && v.value instanceof HTMLElement && ft(f.value, p.value, v.value);
     }
-    async function ut() {
-      const n = l[c.value], r = o.alphaChannel === "hide", a = W({ color: n, format: c.value }, r);
-      await window.navigator.clipboard.writeText(a);
+    async function ct() {
+      const o = l[c.value], e = s.alphaChannel === "hide", a = D({ color: o, format: c.value }, e);
+      await window.navigator.clipboard.writeText(a), u("color-copy", B());
     }
-    function ct(n) {
-      const r = c.value;
-      return E(r, n).to(l[r][n]);
+    function ht(o) {
+      const e = c.value;
+      return L(e, o).to(l[e][o]);
     }
-    function ht(n, r, a) {
-      const i = W({ format: "hsl", color: l.hsl }, !1);
-      n.style.setProperty("--vacp-color", i), r.style.position = "relative", r.style.backgroundColor = `hsl(${l.hsl.h} 100% 50%)`, r.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 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 ft() {
-      const n = o.alphaChannel === "hide", r = W({ color: l[c.value], format: c.value }, n);
+    function B() {
+      const o = s.alphaChannel === "hide", e = D({ color: l[c.value], format: c.value }, o);
       return {
         colors: l,
-        cssColor: r
+        cssColor: e
       };
     }
-    function B(n) {
-      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(n.key) || !n.shiftKey)
+    function U(o) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(o.key) || !o.shiftKey)
         return;
-      const r = n.currentTarget, a = Number(r.step), i = ["ArrowLeft", "ArrowDown"].includes(n.key) ? -1 : 1, m = Number(r.value) + i * a * 10, T = $(m, Number(r.min), Number(r.max));
-      r.value = String(T - i * a);
+      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);
     }
-    return (n, r) => (w(), y("div", {
+    return (o, e) => (w(), y("div", {
       ref_key: "colorPicker",
@@ -429,28 +405,28 @@ ref: f,
         ref_key: "colorSpace",
-        ref: v,
+        ref: p,
         class: "vacp-color-space",
-        onMousedown: rt,
-        onTouchstart: at
+        onMousedown: at,
+        onTouchstart: lt
       }, [
         h("div", {
           ref_key: "thumb",
-          ref: p,
+          ref: v,
           class: "vacp-color-space-thumb",
           tabindex: "0",
           "aria-label": "Color space thumb",
-          onKeydown: lt
+          onKeydown: it
         }, null, 544)
       ], 544),
-      h("div", Nt, [
+      h("div", Vt, [
         h("label", {
           class: "vacp-range-input-label vacp-range-input-label--hue",
-          for: `${n.id}-hue-slider`
+          for: `${o.id}-hue-slider`
         }, [
-          h("span", At, [
-            I(n.$slots, "hue-range-input-label", {}, () => [
-              q("Hue")
+          h("span", Ht, [
+            N(o.$slots, "hue-range-input-label", {}, () => [
+              e[2] || (e[2] = X("Hue"))
             ])
           ]),
           h("input", {
-            id: `${n.id}-hue-slider`,
+            id: `${o.id}-hue-slider`,
             class: "vacp-range-input vacp-range-input--hue",
@@ -462,18 +438,18 @@ value: l.hsv.h,
             step: "1",
-            onKeydownPassive: B,
-            onInput: r[0] || (r[0] = (a) => K(a, "h"))
-          }, null, 40, Ht)
-        ], 8, Vt),
-        n.alphaChannel === "show" ? (w(), y("label", {
+            onKeydownPassive: U,
+            onInput: e[0] || (e[0] = (a) => K(a, "h"))
+          }, null, 40, Et)
+        ], 8, At),
+        o.alphaChannel === "show" ? (w(), y("label", {
           key: 0,
           class: "vacp-range-input-label vacp-range-input-label--alpha",
-          for: `${n.id}-alpha-slider`
+          for: `${o.id}-alpha-slider`
         }, [
-          h("span", Lt, [
-            I(n.$slots, "alpha-range-input-label", {}, () => [
-              q("Alpha")
+          h("span", Pt, [
+            N(o.$slots, "alpha-range-input-label", {}, () => [
+              e[3] || (e[3] = X("Alpha"))
             ])
           ]),
           h("input", {
-            id: `${n.id}-alpha-slider`,
+            id: `${o.id}-alpha-slider`,
             class: "vacp-range-input vacp-range-input--alpha",
@@ -485,6 +461,6 @@ value: l.hsv.a,
             step: "0.01",
-            onKeydownPassive: B,
-            onInput: r[1] || (r[1] = (a) => K(a, "a"))
-          }, null, 40, Pt)
-        ], 8, Et)) : X("", !0)
+            onKeydownPassive: U,
+            onInput: e[1] || (e[1] = (a) => K(a, "a"))
+          }, null, 40, Ot)
+        ], 8, Lt)) : G("", !0)
       ]),
@@ -494,63 +470,86 @@ h("button", {
         type: "button",
-        onClick: ut
+        onClick: ct
       }, [
-        I(n.$slots, "copy-button", {}, () => [
-          Ot,
-          St
+        N(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", Rt, [
-        h("div", jt, [
+      h("div", St, [
+        h("div", Rt, [
           c.value === "hex" ? (w(), y("label", {
             key: 0,
             class: "vacp-color-input-label",
-            for: `${n.id}-color-hex`
+            for: `${o.id}-color-hex`
           }, [
-            Dt,
+            e[6] || (e[6] = h("span", { class: "vacp-color-input-label-text" }, " Hex ", -1)),
             h("input", {
-              id: `${n.id}-color-hex`,
+              id: `${o.id}-color-hex`,
               class: "vacp-color-input",
               type: "text",
-              value: ot.value,
-              onInput: it
-            }, null, 40, zt)
-          ], 8, Wt)) : (w(!0), y(bt, { key: 1 }, wt(nt.value, (a) => (w(), y("label", {
-            id: `${n.id}-color-${c.value}-${a}-label`,
-            key: `${n.id}-color-${c.value}-${a}-label`,
+              value: st.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`,
             class: "vacp-color-input-label",
-            for: `${n.id}-color-${c.value}-${a}`,
+            for: `${o.id}-color-${c.value}-${a}`,
             onInput: (i) => Y(i, a)
           }, [
-            h("span", Yt, yt(a.toUpperCase()), 1),
+            h("span", _t, yt(a.toUpperCase()), 1),
             h("input", {
-              id: `${n.id}-color-${c.value}-${a}`,
+              id: `${o.id}-color-${c.value}-${a}`,
               class: "vacp-color-input",
               type: "text",
-              value: ct(a),
+              value: ht(a),
               onInput: (i) => Y(i, a)
-            }, null, 40, Bt)
-          ], 40, Kt))), 128))
+            }, null, 40, zt)
+          ], 40, Dt))), 128))
         ]),
-        n.visibleFormats.length > 1 ? (w(), y("button", {
+        o.visibleFormats.length > 1 ? (w(), y("button", {
           key: 0,
           class: "vacp-format-switch-button",
           type: "button",
-          onClick: st
+          onClick: rt
         }, [
-          I(n.$slots, "format-switch-button", {}, () => [
-            Ut,
-            qt
+          N(o.$slots, "format-switch-button", {}, () => [
+            e[7] || (e[7] = h("span", { class: "vacp-visually-hidden" }, "Switch format", -1)),
+            e[8] || (e[8] = h("svg", {
+              class: "vacp-icon",
+              "aria-hidden": "true",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "16",
+              height: "15"
+            }, [
+              h("path", {
+                d: "M8 15l5-5-1-1-4 2-4-2-1 1zm4-9l1-1-5-5-5 5 1 1 4-2z",
+                fill: "currentColor"
+              })
+            ], -1))
           ])
-        ])) : X("", !0)
+        ])) : G("", !0)
       ])
     ], 512));
   }
-}), Jt = {
+}), Bt = {
   install(t) {
-    t.component("ColorPicker", Xt);
+    t.component("ColorPicker", Kt);
   }
 };
 export {
-  Xt as ColorPicker,
-  Jt as default
+  Kt as ColorPicker,
+  Bt as default
 };

LICENSE.txt

@@ -1,2 +0,2 @@
-Copyright 2023 Philipp Rudloff
+Copyright 2024 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.0.1",
+	"version": "5.1.0",
 	"license": "MIT",
@@ -50,3 +50,3 @@ "description": "Color picker component for Vue.js",
 		"test": "vitest run --coverage",
-		"lint:code": "eslint --ext .ts,.vue .",
+		"lint:code": "eslint",
 		"lint:code:fix": "npm run lint:code -- --fix",
@@ -57,3 +57,3 @@ "lint:lockfile": "lockfile-lint --path package-lock.json --validate-hosts --allowed-hosts npm",
 		"release": "semantic-release",
-		"prepare": "husky install",
+		"prepare": "husky",
 		"prepublishOnly": "npm run build"
@@ -65,34 +65,41 @@ },
 	"devDependencies": {
-		"@babel/types": "^7.23.4",
-		"@commitlint/cli": "^18.4.3",
-		"@commitlint/config-conventional": "^18.4.3",
-		"@microsoft/api-extractor": "^7.38.3",
+		"@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",
 		"@semantic-release/changelog": "^6.0.3",
-		"@semantic-release/commit-analyzer": "^11.1.0",
+		"@semantic-release/commit-analyzer": "^13.0.0",
 		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/github": "^9.2.3",
-		"@semantic-release/npm": "^11.0.1",
-		"@semantic-release/release-notes-generator": "^12.1.0",
-		"@typescript-eslint/eslint-plugin": "^6.12.0",
-		"@typescript-eslint/parser": "^6.12.0",
-		"@vitejs/plugin-vue": "^4.5.0",
-		"@vitest/coverage-v8": "^0.34.6",
-		"@vue/eslint-config-typescript": "^12.0.0",
-		"@vue/test-utils": "^2.4.2",
-		"eslint": "^8.54.0",
-		"eslint-config-standard": "^17.1.0",
-		"eslint-plugin-vue": "^9.18.1",
-		"husky": "^8.0.3",
-		"jsdom": "^22.1.0",
-		"lockfile-lint": "^4.12.1",
-		"postcss": "^8.4.31",
-		"publint": "^0.2.5",
-		"rimraf": "^5.0.5",
-		"sass": "^1.69.5",
-		"semantic-release": "^22.0.8",
-		"standard": "^17.1.0",
-		"vite": "^5.0.2",
-		"vitest": "^0.34.6",
-		"vue-tsc": "^1.8.22"
+		"@semantic-release/github": "^11.0.0",
+		"@semantic-release/npm": "^12.0.1",
+		"@semantic-release/release-notes-generator": "^14.0.1",
+		"@stylistic/eslint-plugin": "^2.9.0",
+		"@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",
+		"@vue/test-utils": "^2.4.6",
+		"eslint": "^9.13.0",
+		"eslint-plugin-vue": "^9.29.0",
+		"globals": "^15.11.0",
+		"husky": "^9.1.6",
+		"jsdom": "^25.0.1",
+		"lockfile-lint": "^4.14.0",
+		"postcss": "^8.4.47",
+		"publint": "^0.2.11",
+		"rimraf": "^6.0.1",
+		"sass": "^1.80.3",
+		"semantic-release": "^24.1.3",
+		"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"
+	},
+	"overrides": {
+		"conventional-changelog-conventionalcommits": ">= 8.0.0"
 	}
 }

README.md

@@ -13,3 +13,2 @@ # vue-accessible-color-picker
 - [**npmjs.com**/package/vue-accessible-color-picker](https://www.npmjs.com/package/vue-accessible-color-picker)
-	- [on BundlePhobia](https://bundlephobia.com/result?p=vue-accessible-color-picker)
 - [**github.com**/kleinfreund/vue-accessible-color-picker](https://github.com/kleinfreund/vue-accessible-color-picker)
@@ -188,3 +187,3 @@ - [code of conduct](https://github.com/kleinfreund/vue-accessible-color-picker/blob/main/CODE_OF_CONDUCT.md)
 			color="hsl(270 100% 50% / 0.8)"
-			@color-change="updateColor"
+			@color-change="colorChanged"
 		/>
@@ -196,3 +195,3 @@ </template>
 
-	function updateColor (eventData) {
+	function colorChanged (eventData) {
 		console.log(eventData)
@@ -203,2 +202,25 @@ }
 
+#### `color-copy`
+
+- **Description**: The `color-copy` event is fired once a copy operation succeeded.
+- **Data**: Emits the same event data as [the `color-change` event](#color-change).
+- **Usage**:
+
+	```vue
+	<template>
+		<ColorPicker
+			color="hsl(270 100% 50% / 0.8)"
+			@color-copy="colorCopied"
+		/>
+	</template>
+
+	<script setup>
+	import { ColorPicker } from 'vue-accessible-color-picker'
+
+	function colorCopied (eventData) {
+		console.log(eventData)
+	}
+	</script>
+	```
+
 ### Slots
@@ -205,0 +227,0 @@

New 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

40048

0.1%

Number of lines in readme file

304

7.8%

Worsened metrics

Dev dependency count

35

12.9%

Lines of code

677

-3.01%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes