🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

vue-accessible-color-picker

Package Overview
Dependencies
Maintainers
0
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version

to
5.1.0

78

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 {

@@ -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
};

@@ -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:

{
"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"
}
}

@@ -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 @@

Sorry, the diff of this file is not supported yet