@cyhnkckali/vue3-color-picker
Version:
A color picker component library
1,598 lines • 63.6 kB
JavaScript
import { defineComponent as U, ref as L, openBlock as f, createElementBlock as k, createTextVNode as ce, toDisplayString as P, normalizeClass as Y, createElementVNode as C, Fragment as ze, withDirectives as J, vShow as Q, createCommentVNode as I, createBlock as N, createStaticVNode as Ee, inject as de, withModifiers as ct, watch as Ne, unref as Me, computed as dt, onBeforeMount as pt, renderList as gt, normalizeStyle as mt, reactive as Ce, provide as ue, onMounted as vt, nextTick as ht, onBeforeUnmount as ft, createVNode as we, renderSlot as bt } from "vue";
const yt = {
key: 1,
width: "16",
height: "16",
viewBox: "-12 -4 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, Ct = /* @__PURE__ */ U({
__name: "ColorInputMenu",
props: {
iconClass: { default: "", type: String },
inputType: { default: "RGB", type: String }
},
emits: ["onChangeInputName"],
setup(l, { emit: c }) {
const o = L(l.inputType), s = ["CMYK", "HSL", "HSV", "RGB"], u = c, g = () => {
const m = s.findIndex((a) => a == o.value), b = s[m + 1] ? s[m + 1] : s[0];
o.value = b, u("onChangeInputName", b);
};
return (m, b) => (f(), k("button", {
type: "button",
class: "cp-btn",
onClick: g
}, [
ce(P(o.value) + " ", 1),
l.iconClass ? (f(), k("i", {
key: 0,
class: Y(l.iconClass)
}, null, 2)) : (f(), k("svg", yt, [...b[0] || (b[0] = [
C("path", { d: "M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z" }, null, -1)
])]))
]));
}
}), wt = { class: "ck-cp-menu" }, kt = {
class: "ck-cp-controller-bar",
style: { display: "flex", "justify-content": "end", position: "relative", "flex-grow": "1" }
}, Mt = {
key: 1,
width: "16",
height: "16",
viewBox: "-12 -4 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, xt = {
key: 1,
width: "16",
height: "16",
viewBox: "-12 -4 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, $t = {
key: 1,
width: "15",
height: "28",
viewBox: "0 -3 36 36",
xmlns: "http://www.w3.org/2000/svg"
}, Vt = {
key: 0,
class: "ck-cp-linear-angle-container"
}, It = {
class: "ck-gradient-set-label",
style: { "margin-top": "0" }
}, Lt = ["value"], St = {
key: 1,
class: "ck-cp-linear-angle-container"
}, Tt = {
class: "ck-gradient-set-label",
style: { "margin-top": "0" }
}, Et = ["value"], Nt = { class: "ck-gradient-set-label" }, Ht = ["value"], Bt = /* @__PURE__ */ U({
__name: "PickerMenu",
props: {
mode: {
default: "gradient",
type: String
},
inputType: { default: "RGB", type: String },
gradientType: { default: "linear", type: String },
showInputMenu: { default: !0, type: Boolean },
showPickerMode: { default: !0, type: Boolean },
angle: { default: 90, type: Number },
percentageX: { default: 50, type: Number },
percentageY: { default: 50, type: Number },
local: {
default: {},
type: Object
},
iconClasses: {
default: {
ruler: "",
eyeDroper: "",
arrowDown: "",
save: "",
delete: ""
},
type: Object
}
},
emits: ["onPickerChangeMode", "onChangeMode", "onChangeInputType", "onDeleteColor", "onClickEyeDropper", "update:angle", "update:percentageX", "update:percentageY", "onInput"],
setup(l, { emit: c }) {
const r = l, o = L(!1), s = c, u = (a, p) => {
switch (p) {
case "angle":
s("update:angle", parseInt(a.target.value)), s("onInput");
break;
case "percentageX":
s(
"update:percentageX",
parseInt(a.target.value)
), s("onInput");
break;
case "percentageY":
s(
"update:percentageY",
parseInt(a.target.value)
), s("onInput");
break;
}
}, g = (a) => {
s("onChangeInputType", a);
}, m = () => {
s("onChangeMode", r.gradientType == "linear" ? "radial" : "linear");
}, b = () => {
s("onPickerChangeMode", r.mode == "gradient" ? "solid" : "gradient");
};
return (a, p) => (f(), k(ze, null, [
C("div", wt, [
C("div", kt, [
l.showPickerMode ? (f(), k("button", {
key: 0,
type: "button",
class: "cp-btn",
onClick: b,
style: { "margin-bottom": "var(--margin-top)" }
}, [
J(C("span", null, P(l.local.gradient ? l.local.gradient : "Gradient"), 513), [
[Q, l.mode == "gradient"]
]),
J(C("span", null, P(l.local.solid ? l.local.solid : "Solid"), 513), [
[Q, l.mode == "solid"]
]),
l.iconClasses.arrowDown ? (f(), k("i", {
key: 0,
class: Y(l.iconClasses.arrowDown)
}, null, 2)) : (f(), k("svg", Mt, [...p[4] || (p[4] = [
C("path", { d: "M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z" }, null, -1)
])]))
])) : I("", !0),
l.mode == "gradient" ? (f(), k("button", {
key: 1,
type: "button",
class: "cp-btn",
style: { "margin-bottom": "var(--margin-top)" },
onClick: m
}, [
J(C("span", null, P(l.local.linear ? l.local.linear : "Linear"), 513), [
[Q, l.gradientType == "linear"]
]),
J(C("span", null, P(l.local.radial ? l.local.radial : "Radial"), 513), [
[Q, l.gradientType == "radial"]
]),
l.iconClasses.arrowDown ? (f(), k("i", {
key: 0,
class: Y(l.iconClasses.arrowDown)
}, null, 2)) : (f(), k("svg", xt, [...p[5] || (p[5] = [
C("path", { d: "M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z" }, null, -1)
])]))
])) : I("", !0),
l.showInputMenu ? (f(), N(Ct, {
key: 2,
style: { "margin-bottom": "var(--margin-top)" },
iconClass: l.iconClasses.arrowDown,
inputType: l.inputType,
onOnChangeInputName: g
}, null, 8, ["iconClass", "inputType"])) : I("", !0),
l.mode == "gradient" ? (f(), k("button", {
key: 3,
type: "button",
class: "cp-btn",
style: { "margin-bottom": "var(--margin-top)" },
onClick: p[0] || (p[0] = (v) => o.value = !o.value)
}, [
l.iconClasses.ruler ? (f(), k("i", {
key: 0,
class: Y(l.iconClasses.ruler)
}, null, 2)) : (f(), k("svg", $t, [...p[6] || (p[6] = [
Ee('<path d="M29.333 9.667h-8c-0.547 0-1-0.453-1-1s0.453-1 1-1h8c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path><path d="M8 9.667h-5.333c-0.547 0-1-0.453-1-1s0.453-1 1-1h5.333c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path><path d="M13.333 14.333c-3.12 0-5.667-2.547-5.667-5.667s2.547-5.667 5.667-5.667c3.12 0 5.667 2.547 5.667 5.667s-2.547 5.667-5.667 5.667zM13.333 5c-2.027 0-3.667 1.64-3.667 3.667s1.64 3.667 3.667 3.667c2.027 0 3.667-1.64 3.667-3.667s-1.64-3.667-3.667-3.667z"></path><path d="M29.333 24.333h-5.333c-0.547 0-1-0.453-1-1s0.453-1 1-1h5.333c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path><path d="M10.667 24.333h-8c-0.547 0-1-0.453-1-1s0.453-1 1-1h8c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path><path d="M18.667 29c-3.12 0-5.667-2.547-5.667-5.667s2.547-5.667 5.667-5.667c3.12 0 5.667 2.547 5.667 5.667s-2.547 5.667-5.667 5.667zM18.667 19.667c-2.027 0-3.667 1.64-3.667 3.667s1.64 3.667 3.667 3.667c2.027 0 3.667-1.64 3.667-3.667s-1.64-3.667-3.667-3.667z"></path>', 6)
])]))
])) : I("", !0)
])
]),
l.mode == "gradient" ? J((f(), k("div", Vt, [
C("div", null, [
C("p", It, [
ce(P(l.local.angle ? l.local.angle : "Angle") + " ", 1),
C("span", null, P(l.angle) + "°", 1)
]),
C("input", {
type: "range",
min: "0",
max: "360",
value: l.angle,
onInput: p[1] || (p[1] = (v) => u(v, "angle"))
}, null, 40, Lt)
])
], 512)), [
[Q, l.gradientType == "linear" && o.value]
]) : I("", !0),
l.mode == "gradient" && o.value ? J((f(), k("div", St, [
C("div", null, [
C("p", Tt, [
ce(P(l.local.positionX ? l.local.positionX : "Position X") + " ", 1),
C("span", null, P(l.percentageX) + "%", 1)
]),
C("input", {
type: "range",
min: "0",
max: "100",
value: l.percentageX,
onInput: p[2] || (p[2] = (v) => u(v, "percentageX"))
}, null, 40, Et)
]),
C("div", null, [
C("p", Nt, [
ce(P(l.local.positionY ? l.local.positionY : "Position Y") + " ", 1),
C("span", null, P(l.percentageY) + "%", 1)
]),
C("input", {
type: "range",
min: "0",
max: "100",
value: l.percentageY,
onInput: p[3] || (p[3] = (v) => u(v, "percentageY"))
}, null, 40, Ht)
])
], 512)), [
[Q, l.gradientType == "radial"]
]) : I("", !0)
], 64));
}
}), Dt = 300, Rt = /* @__PURE__ */ U({
__name: "GradientBar",
emits: ["onAddColor", "onMouseDown"],
setup(l, { emit: c }) {
const r = de("gradientBar"), o = c, s = (m) => {
m.preventDefault();
};
let u = 0;
const g = (m) => {
m.preventDefault();
const b = (/* @__PURE__ */ new Date()).getTime(), a = b - u;
a < Dt && a > 0 && o("onAddColor", m), u = b;
};
return (m, b) => (f(), k("div", {
class: "gradient-bar",
onMousedown: b[1] || (b[1] = (a) => m.$emit("onMouseDown", a)),
onTouchstart: b[2] || (b[2] = (a) => m.$emit("onMouseDown", a)),
onDragstart: s
}, [
C("div", {
ref_key: "gradientBar",
ref: r,
class: "gradient-container",
onDblclick: b[0] || (b[0] = (a) => m.$emit("onAddColor", a)),
onTouchstart: ct(g, ["self"])
}, null, 544)
], 32));
}
}), Pt = /* @__PURE__ */ U({
__name: "PickerWrap",
emits: ["onEventStart"],
setup(l) {
const c = de("canvas"), r = de("pickerWrap"), o = de("pickerPointer"), s = (u) => {
u.preventDefault();
};
return (u, g) => (f(), k("div", {
ref_key: "pickerWrap",
ref: r,
class: "cp-picker-wrap",
onMousedown: g[0] || (g[0] = (m) => u.$emit("onEventStart", m)),
onTouchstart: g[1] || (g[1] = (m) => {
m.preventDefault(), u.$emit("onEventStart", m);
}),
onDragstart: s
}, [
C("canvas", {
ref_key: "canvas",
ref: c,
class: "colour-area"
}, null, 512),
g[2] || (g[2] = C("div", { class: "colour-area-mask" }, null, -1)),
C("div", {
ref_key: "pickerPointer",
ref: o,
class: "colour-area-point-circle"
}, null, 512)
], 544));
}
}), Xt = { class: "picker-hue" }, Ot = ["value"], Yt = /* @__PURE__ */ U({
__name: "PickerHue",
props: {
modelValue: { default: 0, type: Number }
},
emits: ["update:modelValue", "onInput", "onChange"],
setup(l, { emit: c }) {
const r = c, o = (s) => {
r("update:modelValue", parseFloat(s.target.value)), r("onInput", s);
};
return (s, u) => (f(), k("div", Xt, [
C("input", {
value: l.modelValue,
class: "picker-hue-range-slider",
type: "range",
min: "0",
max: "360",
step: "0.1",
onInput: o,
onChange: u[0] || (u[0] = (g) => s.$emit("onChange", g))
}, null, 40, Ot)
]));
}
}), Ut = { class: "opacity-bar" }, Gt = ["value"], At = /* @__PURE__ */ U({
__name: "OpacityBar",
props: {
modelValue: { default: 0, type: Number }
},
emits: ["update:modelValue", "onInput"],
setup(l, { emit: c }) {
const r = de("opacitySlider"), o = c, s = (u) => {
o(
"update:modelValue",
parseInt(u.target.value)
), o("onInput", u);
};
return (u, g) => (f(), k("div", Ut, [
C("input", {
ref_key: "opacitySlider",
ref: r,
value: l.modelValue,
class: "opacity_slider",
type: "range",
min: "0",
max: "100",
onInput: s
}, null, 40, Gt)
]));
}
}), Ft = { class: "ck-cp-input-content" }, Wt = { class: "ck-cp-input-label" }, qt = ["min", "max", "value"], X = /* @__PURE__ */ U({
__name: "InputNumber",
props: {
label: { default: "", type: String },
modelValue: { default: 0, type: Number },
min: { default: 0, type: Number },
max: { default: 100, type: Number }
},
emits: ["update:modelValue"],
setup(l, { emit: c }) {
const r = l, o = c, s = L(r.modelValue);
Ne(() => r.modelValue, (a, p) => {
a !== p && (s.value = a);
}, { immediate: !0 });
const u = (a) => {
const p = (H) => {
s.value = H, o("update:modelValue", H);
}, v = a.target.value;
if (!v) return p(r.modelValue);
if (parseInt(v) > r.max) return p(r.max);
o("update:modelValue", parseInt(v));
}, g = (a) => {
s.value = a.target.value;
}, m = (a) => {
if (["KeyE", "Equal", "Equal", "Backslash", "Slash", "NumpadDecimal", "NumpadAdd"].includes(a.code)) return a.preventDefault();
a.code === "Enter" && u(a);
}, b = u;
return (a, p) => (f(), k("div", Ft, [
C("span", Wt, P(l.label), 1),
C("input", {
type: "number",
min: l.min,
max: l.max,
value: s.value,
onInput: g,
onKeydown: m,
onFocusout: p[0] || (p[0] = //@ts-ignore
(...v) => Me(b) && Me(b)(...v))
}, null, 40, qt)
]));
}
}), zt = { class: "ck-cp-input-content color-hex" }, Zt = ["value"], Kt = /* @__PURE__ */ U({
__name: "InputHex",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(l, { emit: c }) {
const r = l, o = c, s = L(""), u = (a) => {
const p = a.target.value;
s.value = p, s.value = `#${p.replace(/#/g, "")}`;
}, g = (a) => {
const p = a.target.value;
if (p === r.modelValue) return;
if (!/^#[0-9a-fA-F]+$/.test(p)) {
s.value = r.modelValue;
return;
}
let v = p.replace(/#/g, "");
switch (v.length) {
case 0:
v = r.modelValue.replace("#", "");
break;
case 1:
case 2:
v = v.repeat(3);
break;
case 4:
case 5:
v = v.slice(0, 3);
break;
case 3:
case 6:
break;
default:
v = v.slice(0, 6);
}
s.value = `#${v.toUpperCase()}`, o("update:modelValue", s.value);
}, m = (a) => {
a.code === "Enter" && g(a);
}, b = g;
return Ne(() => r.modelValue, (a, p) => {
a !== p && (s.value = a);
}, { immediate: !0 }), (a, p) => (f(), k("div", zt, [
p[1] || (p[1] = C("span", { class: "ck-cp-input-label" }, "HEX", -1)),
C("input", {
type: "text",
value: s.value,
onInput: u,
onKeydown: m,
onFocusout: p[0] || (p[0] = //@ts-ignore
(...v) => Me(b) && Me(b)(...v))
}, null, 40, Zt)
]));
}
}), jt = (l) => {
const c = /^rgb\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)\)$/i;
if (!c.test(l))
return null;
const r = c.exec(l);
if (!r)
return null;
const o = parseInt(r[1].trim(), 10), s = parseInt(r[2].trim(), 10), u = parseInt(r[3].trim(), 10);
return {
r: o,
g: s,
b: u
};
}, Jt = (l) => {
const c = /^rgba?\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*),(\s*[\d.]+\s*)\)$/i;
if (!c.test(l))
return null;
const r = c.exec(l);
if (!r)
return null;
const o = parseInt(r[1].trim(), 10), s = parseInt(r[2].trim(), 10), u = parseInt(r[3].trim(), 10), g = parseFloat(r[4].trim());
return {
r: o,
g: s,
b: u,
a: g
};
}, Qt = (l) => {
const c = /^#?([a-f\d]{8})$/i;
if (!c.test(l))
return null;
const r = c.exec(l);
if (!r)
return null;
const o = r[1], s = o.substring(6, 8), u = parseInt(o.substring(0, 2), 16), g = parseInt(o.substring(2, 4), 16), m = parseInt(o.substring(4, 6), 16), b = parseInt(s, 16) / 255;
return { r: u, g, b: m, a: b };
}, _t = (l, c, r, o) => {
function s(a) {
const p = a.toString(16);
return p.length === 1 ? "0" + p : p;
}
const u = s(Math.round(l)), g = s(Math.round(c)), m = s(Math.round(r)), b = s(Math.round(o * 255));
return `#${u}${g}${m}${b}`;
}, ke = (l) => {
try {
let c = l.replace(
/^#?([a-f\d])([a-f\d])([a-f\d])$/i,
// @ts-ignore
(u, g, m, b) => "#" + g + g + m + m + b + b
).substring(1).match(/.{2}/g)?.map((u) => parseInt(u, 16)), r = c?.[0], o = c?.[1], s = c?.[2];
return Number.isNaN(r) || Number.isNaN(o) || Number.isNaN(s) || r === void 0 || o === void 0 || s === void 0 ? null : {
r,
g: o,
b: s
};
} catch {
return null;
}
}, oe = (l, c, r) => {
l = l / 255, c = c / 255, r = r / 255;
const o = Math.max(l, c, r), s = Math.min(l, c, r);
let u;
return o === l ? u = (c - r) / (o - s) : o === c ? u = 2 + (r - l) / (o - s) : u = 4 + (l - c) / (o - s), u *= 60, u < 0 && (u += 360), Number.isNaN(u) && (u = 0), u;
}, en = (l, c, r) => {
c = c / 100, r = r / 100;
let o, s, u, g = [];
return o = (1 - Math.abs(2 * r - 1)) * c, s = o * (1 - Math.abs(l / 60 % 2 - 1)), u = r - o / 2, l >= 0 && l < 60 && (g = [o, s, 0]), l >= 60 && l < 120 && (g = [s, o, 0]), l >= 120 && l < 180 && (g = [0, o, s]), l >= 180 && l < 240 && (g = [0, s, o]), l >= 240 && l < 300 && (g = [s, 0, o]), l >= 300 && l <= 360 && (g = [o, 0, s]), g.map((m) => Math.round(255 * (m + u)));
}, Te = (l, c, r) => "#" + (16777216 + (r | c << 8 | l << 16)).toString(16).slice(1), Fe = (l, c, r) => {
let o = en(l, c, r);
return { rgb: o, hexA: Te(o[0], o[1], o[2]) };
}, We = (l, c, r) => {
const o = l / 255, s = c / 255, u = r / 255, g = Math.max(o, s, u), m = Math.min(o, s, u), b = (g + m) / 2;
if (g === m)
return { h: 0, s: 0, l: b };
const a = g - m, p = b < 0.5 ? a / (g + m) : a / (2 - g - m);
let v;
switch (g) {
case o:
v = (s - u) / a;
break;
case s:
v = 2 + (u - o) / a;
break;
default:
v = 4 + (o - s) / a;
break;
}
return v *= 60, v < 0 && (v += 360), { h: v, s: p, l: b };
}, qe = (l, c, r) => {
l = l % 360 / 360, c = Math.min(1, Math.max(0, c)), r = Math.min(1, Math.max(0, r));
let o, s, u;
if (c === 0)
o = s = u = r;
else {
const g = (a, p, v) => (v < 0 && (v += 1), v > 1 && (v -= 1), v < 0.16666666666666666 ? a + (p - a) * 6 * v : v < 0.5 ? p : v < 0.6666666666666666 ? a + (p - a) * (0.6666666666666666 - v) * 6 : a), m = r < 0.5 ? r * (1 + c) : r + c - r * c, b = 2 * r - m;
o = g(b, m, l + 1 / 3), s = g(b, m, l), u = g(b, m, l - 1 / 3);
}
return o = Math.round(o * 255), s = Math.round(s * 255), u = Math.round(u * 255), { r: o, g: s, b: u };
}, tn = (l, c, r) => {
let o = 0, s = 0, u = 0;
const g = l / 60, m = r * c, b = m * (1 - Math.abs(g % 2 - 1)), a = r - m;
switch (Math.floor(g) % 6) {
case 0:
o = m, s = b, u = 0;
break;
case 1:
o = b, s = m, u = 0;
break;
case 2:
o = 0, s = m, u = b;
break;
case 3:
o = 0, s = b, u = m;
break;
case 4:
o = b, s = 0, u = m;
break;
case 5:
o = m, s = 0, u = b;
break;
}
return {
r: Math.round((o + a) * 255),
g: Math.round((s + a) * 255),
b: Math.round((u + a) * 255)
};
}, nn = (l, c, r) => {
l /= 255, c /= 255, r /= 255;
const o = Math.max(l, c, r), s = Math.min(l, c, r);
let u, g, m = o;
const b = o - s;
if (o !== 0)
g = b / o;
else
return { h: 0, s: 0, v: 0 };
return b === 0 ? u = 0 : o === l ? u = 60 * ((c - r) / b % 6) : o === c ? u = 60 * ((r - l) / b + 2) : u = 60 * ((l - c) / b + 4), u < 0 && (u += 360), {
h: Math.round(u),
s: Math.round(g * 100) / 100,
v: Math.round(m * 100) / 100
};
}, ln = (l, c, r) => {
const o = (2 - c) * r / 2, s = o && o < 1 ? c * r / (o < 0.5 ? o * 2 : 2 - o * 2) : c;
return { h: l, s, l: o };
}, an = (l, c, r, o) => {
const s = Math.round(255 * (1 - l) * (1 - o)), u = Math.round(255 * (1 - c) * (1 - o)), g = Math.round(255 * (1 - r) * (1 - o));
return {
r: Math.min(255, Math.max(0, s)),
g: Math.min(255, Math.max(0, u)),
b: Math.min(255, Math.max(0, g))
};
}, on = (l, c, r) => {
l = l / 255, c = c / 255, r = r / 255;
const o = 1 - Math.max(l, c, r), s = (1 - l - o) / (1 - o), u = (1 - c - o) / (1 - o), g = (1 - r - o) / (1 - o);
return {
c: isNaN(s) ? 0 : s,
m: isNaN(u) ? 0 : u,
y: isNaN(g) ? 0 : g,
k: isNaN(o) ? 0 : o
};
}, sn = { class: "ck-cp-local-color-conatiner" }, rn = { class: "ck-cp-color-list-label" }, un = { style: { display: "flex", "align-items": "center" } }, cn = {
key: 1,
width: "32",
height: "14",
viewBox: "5 -5 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, dn = {
key: 1,
width: "18",
height: "18",
viewBox: "-2 -2 30 30",
xmlns: "http://www.w3.org/2000/svg"
}, pn = { class: "ck-cp-color-list" }, gn = ["onClick"], mn = {
key: 1,
width: "25",
height: "25",
viewBox: "2 2 20 20",
xmlns: "http://www.w3.org/2000/svg"
}, vn = /* @__PURE__ */ U({
__name: "HistoryColorList",
props: {
colorListCount: { default: 10, type: Number },
hexVal: { default: "", type: String },
title: { default: "", type: String },
iconClasses: {
default: {
ruler: "",
eyeDroper: "",
arrowDown: "",
save: "",
delete: ""
},
type: Object
}
},
emits: ["color-item-click"],
setup(l, { emit: c }) {
const r = l, o = c, s = L([]), u = dt(
() => s.value.some((a) => a.selected == !0)
), g = () => {
if (!s.value.find(
(p) => p.color === r.hexVal
)) {
const p = s.value.find(
(v) => v.selected == !0
);
if (p)
p.color = r.hexVal;
else {
s.value.length === r.colorListCount && s.value.pop();
let v = r.hexVal;
s.value.unshift({ color: v, selected: !1 });
}
localStorage.setItem(
"ck-cp-local-color-list",
JSON.stringify(
s.value.map((v) => v.color)
)
);
}
}, m = () => {
s.value = s.value.filter(
(a) => a.selected == !1
), localStorage.setItem(
"ck-cp-local-color-list",
JSON.stringify(
s.value.map((a) => a.color)
)
);
}, b = (a) => {
s.value.forEach((p) => {
p.color === a ? p.selected = !p.selected : p.selected = !1;
}), o("color-item-click", a);
};
return pt(() => {
let a = localStorage.getItem("ck-cp-local-color-list");
if (a) {
let p = JSON.parse(a);
s.value = p.map((v) => ({
color: v,
selected: !1
}));
}
}), (a, p) => (f(), k("div", sn, [
C("div", rn, [
C("div", un, [
ce(P(l.title ? l.title : "Color Palette") + " ", 1),
l.iconClasses.arrowDown ? (f(), k("i", {
key: 0,
class: Y(l.iconClasses.arrowDown)
}, null, 2)) : (f(), k("svg", cn, [...p[0] || (p[0] = [
C("path", { d: "M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z" }, null, -1)
])]))
]),
u.value ? (f(), k("button", {
key: 0,
type: "button",
class: "cp-main-btn",
onClick: m,
style: { width: "17.33px", height: "17.33px" }
}, [
l.iconClasses.delete ? (f(), k("i", {
key: 0,
class: Y(l.iconClasses.delete)
}, null, 2)) : (f(), k("svg", dn, [...p[1] || (p[1] = [
Ee('<path d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"></path><path d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"></path><path d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"></path><path d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"></path><path d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"></path>', 5)
])]))
])) : I("", !0)
]),
C("div", pn, [
(f(!0), k(ze, null, gt(s.value, (v) => (f(), k("div", {
key: `color-${v.color}`,
class: Y(["ck-cp-color-item", v.selected ? "ck-select" : ""]),
style: mt({ backgroundColor: v.color }),
onClick: (H) => b(v.color)
}, null, 14, gn))), 128)),
C("button", {
type: "button",
class: "cp-btn-save-color",
onClick: g
}, [
l.iconClasses.save ? (f(), k("i", {
key: 0,
class: Y(l.iconClasses.save)
}, null, 2)) : (f(), k("svg", mn, [...p[2] || (p[2] = [
C("path", { d: "M18 12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z" }, null, -1),
C("path", { d: "M12 18.75C11.59 18.75 11.25 18.41 11.25 18V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V18C12.75 18.41 12.41 18.75 12 18.75Z" }, null, -1)
])]))
])
])
]));
}
}), hn = ["cp-theme"], fn = {
key: 0,
style: { display: "flex", "align-items": "center", gap: "8px", "margin-top": "calc(var(--margin-top) * 1.35)", padding: "var(--padding)" }
}, bn = {
key: 1,
width: "20",
height: "20",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, yn = { style: { display: "flex", "align-items": "center", gap: "8px", "margin-top": "calc(var(--margin-top) * 1.35)", padding: "var(--padding)" } }, Cn = {
key: 1,
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "3 2 28 28"
}, wn = { style: { "flex-grow": "1", display: "flex", "flex-direction": "column", gap: "calc(var(--margin-top) * 1.85)" } }, kn = { id: "ck-cp-target-background" }, Mn = {
key: 1,
class: "ck-cp-input-container"
}, xn = {
key: 3,
class: "ck-cp-buttons"
}, In = /* @__PURE__ */ U({
__name: "Vue3ColorPicker",
props: {
modelValue: { default: "", type: String },
mode: {
default: "gradient",
type: String
},
type: { default: "HEX8", type: String },
inputType: { default: "RGB", type: String },
theme: { default: "light", type: String },
colorListCount: { default: 15, type: Number },
showColorList: { default: !0, type: Boolean },
showEyeDrop: { default: !0, type: Boolean },
showPickerMode: { default: !0, type: Boolean },
showAlpha: { default: !0, type: Boolean },
showInputMenu: { default: !0, type: Boolean },
showInputSet: { default: !0, type: Boolean },
disabled: { default: !1, type: Boolean },
gradientMode: { default: "linear", type: String },
local: {
default: {
angle: "",
positionX: "",
positionY: "",
solid: "",
gradient: "",
linear: "",
radial: "",
colorPalette: "",
btnSaveLabel: "Save",
btnCancelLabel: "Cancel"
},
type: Object
},
iconClasses: {
default: {
linear: "",
radial: "",
ruler: "",
eyeDroper: "",
inputMenu: "",
save: "",
delete: ""
},
type: Object
},
showButtons: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue", "onChange", "onSave", "onCancel"],
setup(l, { emit: c }) {
const r = l, o = L(null), s = c, u = L(r.mode), g = L(r.modelValue), m = L(r.modelValue), b = (e) => {
g.value = e, s("onChange", e), r.showButtons || (m.value = e, s("update:modelValue", e));
}, a = L([
{ id: 1, r: 68, g: 71, b: 119, a: 100, percent: 0, hue: 0, select: !0 },
{ id: 2, r: 0, g: 0, b: 255, a: 100, percent: 100, hue: 0, select: !1 }
]), p = L(!1), v = L(r.gradientMode), H = Ce({
angle: 90,
percentageX: 50,
percentageY: 50
}), F = L(""), S = L(r.inputType), se = L(!1), He = L(), pe = L(), z = L(), R = L(), V = L(), B = Ce({
h: 0,
s: 0,
l: 0
}), E = Ce({
h: 0,
s: 0,
v: 0
}), T = Ce({
c: 0,
m: 0,
y: 0,
k: 0
});
ue("gradientBar", pe), ue("canvas", z), ue("pickerWrap", R), ue("pickerPointer", V), ue("opacitySlider", He);
let _ = 0, ee = 0, Be = 0, De = 0, te = 0, ne = 0, G = null, re = null, xe = 0;
const Ze = (e) => {
if (!R.value || !V.value) return;
const t = "TouchEvent" in window && e instanceof TouchEvent, { clientX: n, clientY: i } = t ? e.touches[0] : e;
te = R.value.offsetHeight - V.value.offsetHeight, ne = R.value.offsetWidth - V.value.offsetWidth, Be = n - e.target.getBoundingClientRect().left, De = i - e.target.getBoundingClientRect().top, _ = Be - V.value.offsetWidth / 2, ee = De - V.value.offsetHeight / 2, V.value.style.left = `${_}px`, V.value.style.top = `${ee}px`, $e(!1), ae(), t ? (window.addEventListener("touchmove", ge), window.addEventListener("touchend", me)) : (window.addEventListener("mousemove", ge), window.addEventListener("mouseup", me));
}, ge = (e) => {
e.preventDefault();
const t = "TouchEvent" in window && e instanceof TouchEvent, { clientX: n, clientY: i } = t ? e.touches[0] : e, d = R.value.getBoundingClientRect(), h = n - d.left - V.value.offsetWidth / 2, y = i - d.top - V.value.offsetHeight / 2;
h >= 0 && h <= ne ? (_ = h, V.value.style.left = `${h}px`) : 0 > h ? (_ = 0, V.value.style.left = "0px") : h > ne && (_ = ne, V.value.style.left = `${ne}px`), y >= 0 && y <= te ? (ee = y, V.value.style.top = `${y}px`) : 0 > y ? (ee = 0, V.value.style.top = "0px") : y > te && (ee = te, V.value.style.top = `${te}px`), $e(!1), ae();
}, me = (e) => {
"TouchEvent" in window && e instanceof TouchEvent ? (window.removeEventListener("touchmove", ge), window.removeEventListener("touchend", me)) : (window.removeEventListener("mousemove", ge), window.removeEventListener("mouseup", me));
}, $e = (e) => {
if (!e) {
let t = Ke();
const n = qe(W.value, t.s, t.l);
if (n) {
if (se.value) {
let i = a.value.find((d) => d.select == !0);
i && (i.r = n.r, i.g = n.g, i.b = n.b);
}
O(), D();
}
}
}, W = L(0), Ve = async (e) => {
const { rgb: t } = Fe(W.value, 100, 50);
Oe(t), setTimeout(() => {
$e(e), ae();
}, 0);
}, Ke = () => {
let e = { s: 0, l: 0 }, t = R.value.offsetWidth - V.value.offsetWidth, n = R.value.offsetHeight - V.value.offsetHeight, i = parseInt(V.value.style.left), h = 1 - parseInt(V.value.style.top) / n, y = i / t;
return e.l = h / 2 * (2 - y), e.s = h * y / (1 - Math.abs(2 * e.l - 1)), Number.isNaN(e.s) && (e.s = e.l), e.l = e.l > 1 ? 1 : e.l, e.s = e.s > 1 ? 1 : e.s, e;
}, je = (e) => {
const t = a.value.find((x) => x.select == !0);
if (!t || !R.value || !V.value)
return null;
const { l: n, s: i } = We(t.r, t.g, t.b);
let d = n, h = i;
Number.isNaN(h) && (h = d);
const y = e?.rightLine ?? R.value.offsetWidth - V.value.offsetWidth, $ = e?.bottomLine ?? R.value.offsetHeight - V.value.offsetHeight;
if (y <= 0 || $ <= 0)
return null;
const [w, M] = 2 * d - 1 < 0 ? [
y * 2 * h / (1 + h),
$ * (1 - d * (1 + h))
] : [
-y * 2 * (d - 1) * h / (d + h - d * h),
$ * (d - 1) * (h - 1)
];
return { x: w, y: M };
}, Z = () => {
if (!R.value || !V.value)
return;
const e = R.value.offsetWidth - V.value.offsetWidth, t = R.value.offsetHeight - V.value.offsetHeight;
if (e <= 0 || t <= 0) {
xe < 5 && G === null && (xe += 1, G = requestAnimationFrame(() => {
G = null, Z();
}));
return;
}
xe = 0, G !== null && (cancelAnimationFrame(G), G = null);
const n = je({ rightLine: e, bottomLine: t });
if (!n)
return;
const i = Math.min(Math.max(n.x, 0), e), d = Math.min(Math.max(n.y, 0), t);
V.value.style.left = `${i}px`, V.value.style.top = `${d}px`, _ = i, ee = d, ne = e, te = t;
}, Je = () => {
const e = a.value.find((t) => t.select == !0);
e && (e.hue = W.value);
}, le = L(100), Qe = (e) => {
if (r.showAlpha) {
const t = e.target, n = a.value.find((i) => i.select == !0);
n && (n.a = parseInt(t.value), D());
}
}, _e = (e) => {
const t = o.value?.querySelector(".gradient-handle-content")?.getBoundingClientRect();
return e === 0 ? "0px" : e === 100 && t ? `${(pe.value?.offsetWidth || 0) - (t.width || 0)}px` : `${(pe.value?.offsetWidth || 0) * (e / 100) - (t?.width || 0) / 2}px`;
};
let K = null, j = null;
const et = (e) => {
const n = e.target.offsetParent;
if (n?.id?.includes("clr-gb-")) {
const i = n.id.replace("clr-gb-", "");
j = n;
const d = a.value.find((y) => y.select == !0);
if (d && d.id != i) {
o.value?.querySelector(
".gradient-handle.select"
)?.classList.remove("select"), n.classList.add("select");
const $ = a.value.findIndex(
(w) => w.select == !0
);
for (let w = 0; w < a.value.length; w++) {
const M = a.value[w];
if (M.id == i) {
$ != -1 && (a.value[$].select = !1), a.value[w].select = !0, le.value = M.a, q(M.r, M.g, M.b, M.hue, !0), O(), ae();
break;
}
}
}
"TouchEvent" in window && e instanceof TouchEvent ? (window.addEventListener("touchmove", he), window.addEventListener("touchend", ve)) : (window.addEventListener("mousemove", he), window.addEventListener("mouseup", ve));
}
}, ve = (e) => {
"TouchEvent" in window && e instanceof TouchEvent ? (window.removeEventListener("touchmove", he), window.removeEventListener("touchend", ve)) : (window.removeEventListener("mousemove", he), window.removeEventListener("mouseup", ve));
}, he = (e) => {
e.preventDefault();
const n = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0].clientX : e.clientX, i = o.value?.querySelector(".gradient-handle-content")?.getBoundingClientRect(), d = K?.getBoundingClientRect(), h = d?.width - i?.width;
let y = n - (d?.left || 0) - (i?.width || 0) / 2;
if (y < 0 ? y = 0 : y > h && (y = h), j) {
j.style.left = `${y}px`;
const $ = parseFloat(
(y / (d?.width - i?.width) * 100).toFixed(0)
), w = a.value.find(
(M) => M.id == j?.id.replace("clr-gb-", "")
);
w && (w.percent = $), D();
}
}, tt = (e) => {
const t = "TouchEvent" in window && e instanceof TouchEvent, n = K?.getBoundingClientRect();
let i;
t ? i = Math.round(
(e.touches[0].clientX - (n?.left || 0)) / (n?.width || 1) * 100
) : i = Math.round(
(e.clientX - (n?.left || 0)) / (n?.width || 1) * 100
);
const d = a.value.findIndex((w) => w.select == !0), h = a.value[d], y = {
id: Date.now(),
r: h.r,
g: h.g,
b: h.b,
a: h.a,
percent: i,
hue: h.hue,
select: !0
};
a.value[d].select = !1, o.value?.querySelector(
".gradient-handle.select"
)?.classList.remove("select"), a.value = [...a.value, y], Xe(y), j = o.value?.querySelector(
`#clr-gb-${y.id}`
), D();
}, Re = (e) => {
if (e.r == 0 && e.g == 0 && e.b == 0)
return !0;
if (e.r == 255 && e.g == 255 && e.b == 255)
return !0;
{
const t = z.value.getContext("2d", { willReadFrequently: !0 }), n = z.value.width, i = z.value.height, d = t.getImageData(0, 0, n, i).data, h = e.r, y = e.g, $ = e.b;
for (let w = 0; w < i; w++)
for (let M = 0; M < n; M++) {
const x = (w * n + M) * 4, A = d[x], it = d[x + 1], ut = d[x + 2];
if (A === h && it === y && ut === $)
return !0;
}
return !1;
}
}, q = (e, t, n, i, d) => {
setTimeout(() => {
Re({ r: e, g: t, b: n }) || (W.value = i, Ve(d)), Z();
}, 0);
}, Pe = () => {
a.value.forEach((t) => Xe(t)), nt();
const e = a.value[0];
W.value = e.hue, Ve(!0), Z(), O(), D();
}, Xe = (e) => {
if (u.value == "gradient") {
let t = document.createElement("div");
t.id = `clr-gb-${e.id}`, t.classList.add("gradient-handle"), t.style.left = _e(e.percent);
let n = document.createElement("div");
n.classList.add("gradient-handle-content"), e.select == !0 && t.classList.add("select"), t.appendChild(n), K && K.appendChild(t);
}
}, Oe = (e) => {
const t = z.value.getContext("2d", { willReadFrequently: !0 }), n = z.value.width, i = z.value.height;
t.fillStyle = `rgb(${e[0]},${e[1]},${e[2]})`, t.fillRect(0, 0, n, i);
let d = t.createLinearGradient(0, 0, n - 12, 0);
d.addColorStop(0, "rgb(255,255,255)"), d.addColorStop(1, "rgba(255,255,255,0)"), t.fillStyle = d, t.fillRect(0, 0, n, i);
let h = t.createLinearGradient(0, 0, 0, i);
h.addColorStop(0, "rgba(0,0,0,0)"), h.addColorStop(1, "rgb(0,0,0)"), t.fillStyle = h, t.fillRect(0, 0, n, i);
}, O = () => {
if (r.showAlpha) {
let e = a.value.find((t) => t.select == !0);
e && (He.value.style.background = ` linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(${e.r}, ${e.g}, ${e.b}, 100) 97%)`);
}
}, D = () => {
if (u.value == "gradient") {
a.value.sort((i, d) => i.percent - d.percent);
let e = "linear-gradient(90deg, ", t;
if (v.value == "linear") {
t = `linear-gradient(${H.angle}deg, `;
for (let i = 0; i < a.value.length; i++) {
const { r: d, g: h, b: y, a: $, percent: w } = a.value[i];
a.value.length - 1 == i ? (e = e + `rgba(${d},${h},${y},${$ / 100}) ${w}%)`, t = t + `rgba(${d},${h},${y},${$ / 100}) ${w}%)`) : (e = e + `rgba(${d},${h},${y},${$ / 100}) ${w}%, `, t = t + `rgba(${d},${h},${y},${$ / 100}) ${w}%, `);
}
} else {
t = `radial-gradient(circle at ${H.percentageX}% ${H.percentageY}%, `;
for (let i = 0; i < a.value.length; i++) {
const { r: d, g: h, b: y, a: $, percent: w } = a.value[i];
a.value.length - 1 == i ? (e = e + `rgba(${d},${h},${y},${$ / 100}) ${w}%)`, t = t + `rgba(${d},${h},${y},${$ / 100}) ${w}%)`) : (e = e + `rgba(${d},${h},${y},${$ / 100}) ${w}%, `, t = t + `rgba(${d},${h},${y},${$ / 100}) ${w}%, `);
}
}
pe.value.style.backgroundImage = e;
let n = o.value?.querySelector(
"#ck-cp-target-background"
);
n && (n.style.backgroundImage = t, se.value && b(n.style.backgroundImage));
} else {
const { r: e, g: t, b: n, a: i } = a.value[0];
let d = "";
switch (r.type) {
case "HEX8":
d = _t(e, t, n, i / 100);
break;
case "RGBA":
d = `rgba(${e},${t},${n},${i / 100})`;
break;
case "RGB":
d = `rgb(${e},${t},${n})`;
break;
case "HEX":
d = Te(e, t, n);
break;
}
se.value && b(d);
}
}, nt = () => {
a.value.forEach((e) => {
e.hue = oe(e.r, e.g, e.b);
});
}, lt = (e) => {
v.value = e, D();
}, Ye = () => {
if (a.value.length > 2) {
const e = a.value.findIndex((t) => t.select == !0);
if (e !== -1) {
const t = a.value[e].id;
a.value.splice(e, 1), o.value?.querySelector(
`#clr-gb-${t}`
)?.remove();
const i = a.value[0];
i && (i.select = !0, j = o.value?.querySelector(
`#clr-gb-${i.id}`
), j?.classList.add("select"), q(i.r, i.g, i.b, i.hue, !1), ae(), D());
}
}
}, Ie = () => {
const e = o.value?.querySelector("#cp-btn-eyedropper");
e?.classList.add("active"), new EyeDropper().open().then((n) => {
const { sRGBHex: i } = n, d = a.value.find((y) => y.select == !0), h = ke(i);
if (h) {
const y = oe(h.r, h.g, h.b);
if (d && (d.hue = y, d.r = h.r, d.g = h.g, d.b = h.b), !Re(h)) {
W.value = y;
const { rgb: $ } = Fe(y, 100, 50);
Oe($);
}
Z(), ae(), O(), D(), e?.classList.remove("active");
}
}).catch(() => {
e?.classList.remove("active");
});
}, fe = (e, t) => {
if (t != "a") {
const n = a.value.find((i) => i.select == !0);
if (n) {
const i = oe(n.r, n.g, n.b);
n.hue = i, q(
n.r,
n.g,
n.b,
n.hue,
!0
), D(), O();
}
} else
le.value = e, D(), O();
}, Le = () => {
const e = a.value.find((t) => t.select == !0);
if (e && !Number.isNaN(B.h) && !Number.isNaN(B.s) && !Number.isNaN(B.l)) {
const { r: t, g: n, b: i } = qe(B.h, B.s / 100, B.l / 100);
e.hue = B.h, e.r = t, e.g = n, e.b = i, q(
e.r,
e.g,
e.b,
e.hue,
!0
), D(), O();
}
}, Se = () => {
const e = a.value.find((t) => t.select == !0);
if (e && !Number.isNaN(E.h) && !Number.isNaN(E.s) && !Number.isNaN(E.v)) {
const { r: t, g: n, b: i } = tn(E.h, E.s / 100, E.v / 100), { h: d } = ln(E.h, E.s / 100, E.v / 100);
e.hue = d, e.r = t, e.g = n, e.b = i, q(
e.r,
e.g,
e.b,
e.hue,
!0
), D(), O();
}
}, be = () => {
const e = a.value.find((t) => t.select == !0);
if (e && !Number.isNaN(T.c) && !Number.isNaN(T.m) && !Number.isNaN(T.y) && !Number.isNaN(T.k)) {
const { r: t, g: n, b: i } = an(
T.c / 100,
T.m / 100,
T.y / 100,
T.k / 100
), d = oe(t, n, i);
e.hue = d, e.r = t, e.g = n, e.b = i, q(
e.r,
e.g,
e.b,
e.hue,
!0
), D(), O();
}
}, at = () => {
if (F.value) {
const e = ke(F.value);
if (e) {
const t = oe(e.r, e.g, e.b), n = a.value.find((i) => i.select == !0);
n && (n.r = e.r, n.g = e.g, n.b = e.b, n.hue = t, q(e.r, e.g, e.b, n.hue, !0), D(), O(), ie(S.value));
}
}
}, ae = () => {
const e = a.value.find((t) => t.select == !0);
e && (F.value = Te(e.r, e.g, e.b).toUpperCase()), ie(S.value);
}, ot = (e) => {
F.value = e;
let t = ke(F.value);
if (t) {
const n = oe(t.r, t.g, t.b), i = a.value.find((d) => d.select == !0);
i && (i.r = t.r, i.g = t.g, i.b = t.b, i.hue = n, q(t.r, t.g, t.b, i.hue, !0), D(), O());
}
};
window.EyeDropper && (p.value = !0);
const st = (e = "") => {
if (u.value == "gradient") {
let t = e ? e.includes("linear-gradient") ? "linear" : "radial" : r.gradientMode, n = [];
if (v.value = t, t == "linear") {
let i = /^linear-gradient\((.*)\)$/, d = e.replace(";", "").trim().match(i), h = /,\s*(?![^()]*\))/;
if (e.includes("deg") || (H.angle = 180), d) {
let y = d[1].split(h);
for (let $ = 0; $ < y.length; $++) {
const w = y[$];
let M = {
id: $,
r: 0,
g: 0,
b: 0,
a: 100,
percent: 100,
hue: 0,
select: !1
};
if (w.includes("deg"))
H.angle = parseInt(w.replace("deg", ""));
else if (w.includes("rgba")) {
let x = w.trim().replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
x = x.filter((A) => A.trim() !== ""), M.r = parseInt(x[0]), M.g = parseInt(x[1]), M.b = parseInt(x[2]), M.a = parseFloat(x[3]) * 100, M.percent = parseInt(x[4]), n.push(M);
} else if (w.includes("rgb")) {
let x = w.trim().replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
x = x.filter((A) => A.trim() !== ""), M.r = parseInt(x[0]), M.g = parseInt(x[1]), M.b = parseInt(x[2]), M.percent = parseInt(x[3]), n.push(M);
}
}
}
} else {
let i = /^radial-gradient\((.*)\)$/, d = e.replace(";", "").trim().match(i), h = /,\s*(?![^()]*\))/;
if (d) {
let y = d[1].split(h);
for (let $ = 0; $ < y.length; $++) {
const w = y[$];
let M = {
id: $,
r: 0,
g: 0,
b: 0,
a: 100,
percent: 100,
hue: 0,
select: !1
};
if (w.includes("circle at")) {
let x = w.replace("circle at ", "").replace(" ", "").replace(/%/g, " ").trim().split(" ");
H.percentageX = parseInt(x[0]), H.percentageY = parseInt(x[1]);
} else if (w.includes("rgba")) {
let x = w.replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
x = x.filter((A) => A.trim() !== ""), M.r = parseInt(x[0]), M.g = parseInt(x[1]), M.b = parseInt(x[2]), M.a = parseFloat(x[3]) * 100, M.percent = parseInt(x[4]), n.push(M);
} else if (w.includes("rgb")) {
let x = w.replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
x = x.filter((A) => A.trim() !== ""), M.r = parseInt(x[0]), M.g = parseInt(x[1]), M.b = parseInt(x[2]), M.percent = parseInt(x[3]), n.push(M);
}
}
}
}
n.length > 1 && (a.value = n, a.value[0].select = !0, le.value = a.value[0].a);
} else if (e) {
let t = {
r: 0,
g: 0,
b: 0,
a: 0
};
if (e.includes("#"))
if (e.length >= 8)
t = Qt(e);
else {
let n = ke(e);
n ? (t.a = 1, t.r = n.r, t.g = n.g, t.b = n.b) : t = null;
}
else if (e.includes("rgb"))
if (e.includes("rgba"))
t = Jt(e);
else {
let n = jt(e);
n ? (t.a = 1, t.r = n.r, t.g = n.g, t.b = n.b) : t = null;
}
t && (a.value[0].r = t.r, a.value[0].b = t.b, a.value[0].g = t.g, a.value[0].a = parseInt((t.a * 100).toFixed(0)), le.value = a.value[0].a, a.value[0].hue = 0);
}
}, ie = (e) => {
const t = a.value.find((n) => n.select == !0);
if (t) {
switch (e) {
case "RGB":
break;
case "HSL": {
const { h: n, s: i, l: d } = We(
t.r,
t.g,
t.b
);
B.h = Math.round(n), B.s = Math.round(i * 100), B.l = Math.round(d * 100);
break;
}
case "HSV": {
const { h: n, s: i, v: d } = nn(
t.r,
t.g,
t.b
);
E.h = Math.round(n), E.s = Math.round(i * 100), E.v = Math.round(d * 100);
break;
}
case "CMYK":
{
const { c: n, m: i, y: d, k: h } = on(
t.r,
t.g,
t.b
);
T.c = Math.round(n * 100), T.m = Math.round(i * 100), T.y = Math.round(d * 100), T.k = Math.round(h * 100);
}
break;
}
S.value = e;
}
}, rt = (e) => {
u.value = e, setTimeout(() => {
u.value == "gradient" && (K = o.value?.querySelector(
".gradient-bar"
)), ye(r.modelValue), ie(S.value);
}, 0);
}, ye = (e) => {
e && st(e), Pe();
}, Ue = () => {
m.value = g.value, s("update:modelValue", m.value), s("onSave", m.value);
}, Ge = () => {
a.value.forEach((e) => {
K?.querySelector(`#clr-gb-${e.id}`)?.remove();
});
}, Ae = () => {
g.value = m.value, Ge(), ye(g.value), s("onCancel", g.value);
};
return Ne(
() => r.modelValue,
(e, t) => {
e !== t && e !== m.value && (Ge(), ye(e), Z());
}
), ((e) => {
e && (e.includes("linear-gradient") || e.includes("radial-gradient") ? u.value = "gradient" : u.value = "solid");
})(r.modelValue), vt(() => {
ht(() => {
u.value == "gradient" && (K = o.value?.querySelector(
".gradient-bar"
)), typeof ResizeObserver < "u" && R.value && (re?.disconnect(), re = new ResizeObserver(() => {
Z();
}), re.observe(R.value)), ye(r.modelValue), ie(S.value), se.value = !0, Z();
});
}), ft(() => {
G !== null && (cancelAnimationFrame(G), G = null), re?.disconnect(), re = null;
}), (e, t) => (f(), k("div", {
class: Y(["ck-cp-container", l.disabled ? "ck-cp-disabled " : ""]),
ref_key: "pickerTemplateRef",
ref: o,
"cp-theme": l.theme
}, [
we(Bt, {
angle: H.angle,
"onUpdate:angle": t[0] || (t[0] = (n) => H.angle = n),
percentageX: H.percentageX,
"onUpdate:percentageX": t[1] || (t[1] = (n) => H.percentageX = n),
percentageY: H.percentageY,
"onUpdate:percentageY": t[2] || (t[2] = (n) => H.percentageY = n),
local: l.local,
iconClasses: l.iconClasses,
inputType: S.value,
mode: u.value,
showInputMenu: l.showInputMenu,
gradientType: v.value,
showPickerMode: l.showPickerMode,
onOnChangeMode: lt,
onOnInput: D,
onOnClickEyeDropper: Ie,
onOnDeleteColor: Ye,
onOnChangeInputType: ie,
onOnPickerChangeMode: rt
}, null, 8, ["angle", "percentageX", "percentageY", "local", "iconClasses", "inputType", "mode", "showInputMenu", "gradientType", "showPickerMode"]),
we(Pt, { onOnEventStart: Ze }),
u.value == "gradient" ? (f(), k("div", fn, [
C("button", {
type: "button",
class: "cp-main-btn",
onClick: Ye
}, [
l.iconClasses.delete ? (f(), k("i", {
key: 0,
class: Y(l.iconClasses.delete)
}, null, 2)) : (f(), k("svg", bn, [...t[25] || (t[25] = [
Ee('<path d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"></path><path d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"></path><path d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"></path><path d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"></path><path d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"></path>', 5)
])]))
]),
we(Rt, {
onOnAddColor: tt,
onOnMouseDown: et
})
])) : I("", !0),
C("div", yn, [
p.value && l.showEyeDrop ? (f(), k("button", {
key: 0,
type: "button",
id: "cp-btn-eyedropper",
class: "cp-main-btn",
onClick: Ie
}, [
l.iconClasses.eyeDroper ? (f(), k("i", {
key: 0,
class: Y(l.iconClasses.eyeDroper)
}, null, 2)) : (f(), k("svg", Cn, [...t[26] || (t[26] = [
C("path", { d: "M27.014 2.891l-0.058-0.058c-1.106-1.11-2.911-1.11-4.022 0l-2.515 2.515-0.072-0.072c-0.603-0.603-1.584-0.603-2.216 0.024-0.599 0.603-0.599 1.584 0 2.187l0.072 0.072-8.034 8.039c-1.135 1.13-1.878 2.617-2.1 4.2l-1.217 1.453c-0.483 0.483-0.483 1.265 0 1.743 0.241 0.246 0.565 0.367 0.883 0.367 0.304 0 0.608-0.111 0.826-0.338l1.487-1.241c1.584-0.227 3.071-0.97 4.205-2.1l8.034-8.039 0.072 0.072c0.299 0.299 0.69 0.449 1.086 0.449 0.401 0 0.811-0.159 1.13-0.478 0.29-0.29 0.449-0.676 0.449-1.091s-0.159-0.801-0.449-1.096l-0.072-0.068 2.515-2.515c1.106-1.11 1.106-2.916-0.005-4.027zM13.568 18.997c-1.014 1.014-2.356 1.671-3.78 1.844-0.092 0.014-0.179 0.048-0.251 0.111l-1.622 1.361c-0.106 0.106-0.275 0.106-0.381 0-0.101-0.106-0.101-0.275 0.029-0.41l1.337-1.593c0.058-0.072 0.097-0.159 0.106-0.251 0.174-1.424 0.83-2.766 1.844-3.78l8.039-8.034 2.718 2.718-8.039 8.034z" }, null, -1),
C("path", { d: "M5.804 24.979c-0.275 0.328-1.651 2.023-1.651 2.998 0 1.115 0.908 2.023 2.018 2.023 1.115 0 2.023-0.908 2.023-2.023 0-0.975-1.376-2.67-1.651-2.998-0.183-0.222-0.555-0.222-0.739 0z" }, null, -1)
])]))
])) : I("", !0),
C("div", wn, [
we(Yt, {
modelValue: W.value,
"onUpdate:modelValue": t[3] || (t[3] = (n) => W.value = n),
showEyeDrop: l.showEyeDrop,
isEyeDropperUsing: p.value,
onOnInput: t[4] || (t[4] = (n) => Ve(!1)),
onOnChange: Je,
onOnClickEyeDropper: Ie
}, null, 8, ["modelValue", "showEyeDrop", "isEyeDropperUsing"]),
l.showAlpha ? (f(), N(At, {
key: 0,
modelValue: le.value,
"onUpdate:modelValue": t[5] || (t[5] = (n) => le.value = n),
onOnInput: Qe
}, null, 8, ["modelValue"])) : I("", !0)
])
]),
J(C("div", kn, null, 512), [
[Q, !1]
]),
se.value && l.showInputSet ? (f(), k("div", Mn, [
S.value !== "CMYK" ? (f(), N(Kt, {
key: 0,
modelValue: F.value,
"onUpdate:modelValue": [
t[6] || (t[6] = (n) => F.value = n),
at
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "RGB" ? (f(), N(X, {
key: 1,
label: "R",
min: 0,
max: 255,
modelValue: a.value.find((n) => n.select == !0).r,
"onUpdate:modelValue": [
t[7] || (t[7] = (n) => a.value.find((i) => i.select == !0).r = n),
t[8] || (t[8] = (n) => fe(n, "r"))
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "RGB" ? (f(), N(X, {
key: 2,
label: "G",
min: 0,
max: 255,
modelValue: a.value.find((n) => n.select == !0).g,
"onUpdate:modelValue": [
t[9] || (t[9] = (n) => a.value.find((i) => i.select == !0).g = n),
t[10] || (t[10] = (n) => fe(n, "g"))
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "RGB" ? (f(), N(X, {
key: 3,
label: "B",
min: 0,
max: 255,
modelValue: a.value.find((n) => n.select == !0).b,
"onUpdate:modelValue": [
t[11] || (t[11] = (n) => a.value.find((i) => i.select == !0).b = n),
t[12] || (t[12] = (n) => fe(n, "b"))
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSL" ? (f(), N(X, {
key: 4,
label: "H",
min: 0,
max: 360,
modelValue: B.h,
"onUpdate:modelValue": [
t[13] || (t[13] = (n) => B.h = n),
Le
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSL" ? (f(), N(X, {
key: 5,
label: "S",
min: 0,
max: 100,
modelValue: B.s,
"onUpdate:modelValue": [
t[14] || (t[14] = (n) => B.s = n),
Le
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSL" ? (f(), N(X, {
key: 6,
label: "L",
min: 0,
max: 100,
modelValue: B.l,
"onUpdate:modelValue": [
t[15] || (t[15] = (n) => B.l = n),
Le
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSV" ? (f(), N(X, {
key: 7,
label: "H",
min: 0,
max: 360,
modelValue: E.h,
"onUpdate:modelValue": [
t[16] || (t[16] = (n) => E.h = n),
Se
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSV" ? (f(), N(X, {
key: 8,
label: "S",
min: 0,
max: 100,
modelValue: E.s,
"onUpdate:modelValue": [
t[17] || (t[17] = (n) => E.s = n),
Se
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSV" ? (f(), N(X, {
key: 9,
label: "V",
min: 0,
max: 100,
modelValue: E.v,
"onUpdate:modelValue": [
t[18] || (t[18] = (n) => E.v = n),
Se
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "CMYK" ? (f(), N(X, {
key: 10,
label: "C",
min: 0,
max: 100,
modelValue: T.c,
"onUpdate:modelValue": [
t[19] || (t[19] = (n) => T.c = n),
be
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "CMYK" ? (f(), N(X, {
key: 11,
label: "M",
min: 0,
max: 100,
modelValue: T.m,
"onUpdate:modelValue": [
t[20] || (t[20] = (n) => T.m = n),
be
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "CMYK" ? (f(), N(X, {
key: 12,
label: "Y",
min: 0,
max: 100,
modelValue: T.y,
"onUpdate:modelValue": [
t[21] || (t[21] = (n) => T.y = n),
be
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "CMYK" ? (f(), N(X, {
key: 13,
label: "K",
min: 0,
max: 100,
modelValue: T.k,
"onUpdate:modelValue": [
t[22] || (t[22] = (n) => T.k = n),
be
]
}, null, 8, ["modelValue"])) : I("", !0),
l.showAlpha ? (f(), N(X, {
key: 14,
label: "A",
min: 0,
max: 100,
style: { "margin-right": "2px" },
modelValue: a.value.find((n) => n.select == !0).a,
"onUpdate:modelValue": [
t[23] || (t[23] = (n) => a.value.find((i) => i.select == !0).a = n),
t[24] || (t[24] = (n) => fe(n, "a"))
]
}, null, 8, ["modelValue"])) : I("", !0)
])) : I("", !0),
l.showColorList ? (f(), N(vn, {
key: 2,
"color-list-count": l.colorListCount,
"hex-val": F.value,
onColorItemClick: ot,
iconClasses: l.iconClasses,
title: l.local.colorPalette
}, null, 8, ["color-list-count", "hex-val", "iconClasses", "title"])) : I("", !0),
l.showButtons ? (f(), k("div", xn, [
bt(e.$slots, "buttons", {
save: Ue,
cancel: Ae
}, () => [
C("button", {
class: "ck-cp-buttons__button ck-cp-buttons__button--save",
type: "button",
onClick: Ue
}, P(l.local.btnSaveLabel), 1),
C("button", {
class: "ck-cp-buttons__button ck-cp-buttons__button--cancel",
type: "button",
onClick: Ae
}, P(l.local.btnCancelLabel), 1)
])
])) : I("", !0)
], 10, hn));
}
});
export {
In as Vue3ColorPicker
};