@cyhnkckali/vue3-color-picker
Version:
A color picker component library
1,589 lines • 64.1 kB
JavaScript
import { defineComponent as A, ref as L, openBlock as v, createElementBlock as $, createTextVNode as ie, toDisplayString as X, normalizeClass as G, createElementVNode as x, Fragment as Ge, withDirectives as z, vShow as j, createCommentVNode as I, createBlock as H, createStaticVNode as Le, inject as ue, withModifiers as st, watch as Se, unref as we, computed as rt, onBeforeMount as it, renderList as ut, normalizeStyle as ct, reactive as be, provide as re, onMounted as dt, createVNode as ye } from "vue";
const pt = {
key: 1,
width: "16",
height: "16",
viewBox: "-12 -4 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, gt = /* @__PURE__ */ x("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), mt = [
gt
], ht = /* @__PURE__ */ A({
__name: "ColorInputMenu",
props: {
iconClass: { default: "", type: String },
inputType: { default: "RGB", type: String }
},
emits: ["onChangeInputName"],
setup(n, { emit: p }) {
const o = L(n.inputType), s = ["CMYK", "HSL", "HSV", "RGB"], u = p, h = () => {
const m = s.findIndex((a) => a == o.value), f = s[m + 1] ? s[m + 1] : s[0];
o.value = f, u("onChangeInputName", f);
};
return (m, f) => (v(), $("button", {
type: "button",
class: "cp-btn",
onClick: h
}, [
ie(X(o.value) + " ", 1),
n.iconClass ? (v(), $("i", {
key: 0,
class: G(n.iconClass)
}, null, 2)) : (v(), $("svg", pt, mt))
]));
}
}), vt = { class: "ck-cp-menu" }, ft = {
class: "ck-cp-controller-bar",
style: { display: "flex", "justify-content": "end", position: "relative", "flex-grow": "1" }
}, bt = {
key: 1,
width: "16",
height: "16",
viewBox: "-12 -4 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, yt = /* @__PURE__ */ x("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), Ct = [
yt
], wt = {
key: 1,
width: "16",
height: "16",
viewBox: "-12 -4 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, kt = /* @__PURE__ */ x("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), xt = [
kt
], $t = {
key: 1,
width: "15",
height: "28",
viewBox: "0 -3 36 36",
xmlns: "http://www.w3.org/2000/svg"
}, Mt = /* @__PURE__ */ Le('<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), Vt = [
Mt
], It = {
key: 0,
class: "ck-cp-linear-angle-container"
}, Lt = {
class: "ck-gradient-set-label",
style: { "margin-top": "0" }
}, St = ["value"], Tt = {
key: 1,
class: "ck-cp-linear-angle-container"
}, Nt = {
class: "ck-gradient-set-label",
style: { "margin-top": "0" }
}, Et = ["value"], Ht = { class: "ck-gradient-set-label" }, Dt = ["value"], Bt = /* @__PURE__ */ A({
__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(n, { emit: p }) {
const r = n, o = L(!1), s = p, u = (a, g) => {
switch (g) {
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;
}
}, h = (a) => {
s("onChangeInputType", a);
}, m = () => {
s("onChangeMode", r.gradientType == "linear" ? "radial" : "linear");
}, f = () => {
s("onPickerChangeMode", r.mode == "gradient" ? "solid" : "gradient");
};
return (a, g) => (v(), $(Ge, null, [
x("div", vt, [
x("div", ft, [
n.showPickerMode ? (v(), $("button", {
key: 0,
type: "button",
class: "cp-btn",
onClick: f,
style: { "margin-bottom": "var(--margin-top)" }
}, [
z(x("span", null, X(n.local.gradient ? n.local.gradient : "Gradient"), 513), [
[j, n.mode == "gradient"]
]),
z(x("span", null, X(n.local.solid ? n.local.solid : "Solid"), 513), [
[j, n.mode == "solid"]
]),
n.iconClasses.arrowDown ? (v(), $("i", {
key: 0,
class: G(n.iconClasses.arrowDown)
}, null, 2)) : (v(), $("svg", bt, Ct))
])) : I("", !0),
n.mode == "gradient" ? (v(), $("button", {
key: 1,
type: "button",
class: "cp-btn",
style: { "margin-bottom": "var(--margin-top)" },
onClick: m
}, [
z(x("span", null, X(n.local.linear ? n.local.linear : "Linear"), 513), [
[j, n.gradientType == "linear"]
]),
z(x("span", null, X(n.local.radial ? n.local.radial : "Radial"), 513), [
[j, n.gradientType == "radial"]
]),
n.iconClasses.arrowDown ? (v(), $("i", {
key: 0,
class: G(n.iconClasses.arrowDown)
}, null, 2)) : (v(), $("svg", wt, xt))
])) : I("", !0),
n.showInputMenu ? (v(), H(ht, {
key: 2,
style: { "margin-bottom": "var(--margin-top)" },
iconClass: n.iconClasses.arrowDown,
inputType: n.inputType,
onOnChangeInputName: h
}, null, 8, ["iconClass", "inputType"])) : I("", !0),
n.mode == "gradient" ? (v(), $("button", {
key: 3,
type: "button",
class: "cp-btn",
style: { "margin-bottom": "var(--margin-top)" },
onClick: g[0] || (g[0] = (y) => o.value = !o.value)
}, [
n.iconClasses.ruler ? (v(), $("i", {
key: 0,
class: G(n.iconClasses.ruler)
}, null, 2)) : (v(), $("svg", $t, Vt))
])) : I("", !0)
])
]),
n.mode == "gradient" ? z((v(), $("div", It, [
x("div", null, [
x("p", Lt, [
ie(X(n.local.angle ? n.local.angle : "Angle") + " ", 1),
x("span", null, X(n.angle) + "°", 1)
]),
x("input", {
type: "range",
min: "0",
max: "360",
value: n.angle,
onInput: g[1] || (g[1] = (y) => u(y, "angle"))
}, null, 40, St)
])
], 512)), [
[j, n.gradientType == "linear" && o.value]
]) : I("", !0),
n.mode == "gradient" && o.value ? z((v(), $("div", Tt, [
x("div", null, [
x("p", Nt, [
ie(X(n.local.positionX ? n.local.positionX : "Position X") + " ", 1),
x("span", null, X(n.percentageX) + "%", 1)
]),
x("input", {
type: "range",
min: "0",
max: "100",
value: n.percentageX,
onInput: g[2] || (g[2] = (y) => u(y, "percentageX"))
}, null, 40, Et)
]),
x("div", null, [
x("p", Ht, [
ie(X(n.local.positionY ? n.local.positionY : "Position Y") + " ", 1),
x("span", null, X(n.percentageY) + "%", 1)
]),
x("input", {
type: "range",
min: "0",
max: "100",
value: n.percentageY,
onInput: g[3] || (g[3] = (y) => u(y, "percentageY"))
}, null, 40, Dt)
])
], 512)), [
[j, n.gradientType == "radial"]
]) : I("", !0)
], 64));
}
}), Rt = ["onTouchstart"], Xt = 300, Pt = /* @__PURE__ */ A({
__name: "GradientBar",
emits: ["onAddColor", "onMouseDown"],
setup(n, { emit: p }) {
const r = ue("gradientBar"), o = p, s = (m) => {
m.preventDefault();
};
let u = 0;
const h = (m) => {
m.preventDefault();
const f = (/* @__PURE__ */ new Date()).getTime(), a = f - u;
a < Xt && a > 0 && o("onAddColor", m), u = f;
};
return (m, f) => (v(), $("div", {
class: "gradient-bar",
onMousedown: f[1] || (f[1] = (a) => m.$emit("onMouseDown", a)),
onTouchstart: f[2] || (f[2] = (a) => m.$emit("onMouseDown", a)),
onDragstart: s
}, [
x("div", {
ref_key: "gradientBar",
ref: r,
class: "gradient-container",
onDblclick: f[0] || (f[0] = (a) => m.$emit("onAddColor", a)),
onTouchstart: st(h, ["self"])
}, null, 40, Rt)
], 32));
}
}), Yt = /* @__PURE__ */ x("div", { class: "colour-area-mask" }, null, -1), Ot = /* @__PURE__ */ A({
__name: "PickerWrap",
emits: ["onEventStart"],
setup(n) {
const p = ue("canvas"), r = ue("pickerWrap"), o = ue("pickerPointer"), s = (u) => {
u.preventDefault();
};
return (u, h) => (v(), $("div", {
ref_key: "pickerWrap",
ref: r,
class: "cp-picker-wrap",
onMousedown: h[0] || (h[0] = (m) => u.$emit("onEventStart", m)),
onTouchstart: h[1] || (h[1] = (m) => {
m.preventDefault(), u.$emit("onEventStart", m);
}),
onDragstart: s
}, [
x("canvas", {
ref_key: "canvas",
ref: p,
class: "colour-area"
}, null, 512),
Yt,
x("div", {
ref_key: "pickerPointer",
ref: o,
class: "colour-area-point-circle"
}, null, 512)
], 544));
}
}), Ut = { class: "picker-hue" }, Gt = ["value"], At = /* @__PURE__ */ A({
__name: "PickerHue",
props: {
modelValue: { default: 0, type: Number }
},
emits: ["update:modelValue", "onInput", "onChange"],
setup(n, { emit: p }) {
const r = p, o = (s) => {
r("update:modelValue", parseFloat(s.target.value)), r("onInput", s);
};
return (s, u) => (v(), $("div", Ut, [
x("input", {
value: n.modelValue,
class: "picker-hue-range-slider",
type: "range",
min: "0",
max: "360",
step: "0.1",
onInput: o,
onChange: u[0] || (u[0] = (h) => s.$emit("onChange", h))
}, null, 40, Gt)
]));
}
}), Wt = { class: "opacity-bar" }, Ft = ["value"], Zt = /* @__PURE__ */ A({
__name: "OpacityBar",
props: {
modelValue: { default: 0, type: Number }
},
emits: ["update:modelValue", "onInput"],
setup(n, { emit: p }) {
const r = ue("opacitySlider"), o = p, s = (u) => {
o(
"update:modelValue",
parseInt(u.target.value)
), o("onInput", u);
};
return (u, h) => (v(), $("div", Wt, [
x("input", {
ref_key: "opacitySlider",
ref: r,
value: n.modelValue,
class: "opacity_slider",
type: "range",
min: "0",
max: "100",
onInput: s
}, null, 40, Ft)
]));
}
}), qt = { class: "ck-cp-input-content" }, Kt = { class: "ck-cp-input-label" }, zt = ["min", "max", "value"], P = /* @__PURE__ */ A({
__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(n, { emit: p }) {
const r = n, o = p, s = L(r.modelValue);
Se(() => r.modelValue, (a, g) => {
a !== g && (s.value = a);
}, { immediate: !0 });
const u = (a) => {
const g = (D) => {
s.value = D, o("update:modelValue", D);
}, y = a.target.value;
if (!y)
return g(r.modelValue);
if (parseInt(y) > r.max)
return g(r.max);
o("update:modelValue", parseInt(y));
}, h = (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);
}, f = u;
return (a, g) => (v(), $("div", qt, [
x("span", Kt, X(n.label), 1),
x("input", {
type: "number",
min: n.min,
max: n.max,
value: s.value,
onInput: h,
onKeydown: m,
onFocusout: g[0] || (g[0] = //@ts-ignore
(...y) => we(f) && we(f)(...y))
}, null, 40, zt)
]));
}
}), jt = { class: "ck-cp-input-content color-hex" }, Jt = /* @__PURE__ */ x("span", { class: "ck-cp-input-label" }, "HEX", -1), Qt = ["value"], _t = /* @__PURE__ */ A({
__name: "InputHex",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(n, { emit: p }) {
const r = n, o = p, s = L(""), u = (a) => {
const g = a.target.value;
s.value = g, s.value = `#${g.replace(/#/g, "")}`;
}, h = (a) => {
const g = a.target.value;
if (g === r.modelValue)
return;
if (!/^#[0-9a-fA-F]+$/.test(g)) {
s.value = r.modelValue;
return;
}
let y = g.replace(/#/g, "");
switch (y.length) {
case 0:
y = r.modelValue.replace("#", "");
break;
case 1:
case 2:
y = y.repeat(3);
break;
case 4:
case 5:
y = y.slice(0, 3);
break;
case 3:
case 6:
break;
default:
y = y.slice(0, 6);
}
s.value = `#${y.toUpperCase()}`, o("update:modelValue", s.value);
}, m = (a) => {
a.code === "Enter" && h(a);
}, f = h;
return Se(() => r.modelValue, (a, g) => {
a !== g && (s.value = a);
}, { immediate: !0 }), (a, g) => (v(), $("div", jt, [
Jt,
x("input", {
type: "text",
value: s.value,
onInput: u,
onKeydown: m,
onFocusout: g[0] || (g[0] = //@ts-ignore
(...y) => we(f) && we(f)(...y))
}, null, 40, Qt)
]));
}
}), el = (n) => {
const p = /^rgb\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)\)$/i;
if (!p.test(n))
return null;
const r = p.exec(n);
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
};
}, tl = (n) => {
const p = /^rgba?\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*),(\s*[\d.]+\s*)\)$/i;
if (!p.test(n))
return null;
const r = p.exec(n);
if (!r)
return null;
const o = parseInt(r[1].trim(), 10), s = parseInt(r[2].trim(), 10), u = parseInt(r[3].trim(), 10), h = parseFloat(r[4].trim());
return {
r: o,
g: s,
b: u,
a: h
};
}, ll = (n) => {
const p = /^#?([a-f\d]{8})$/i;
if (!p.test(n))
return null;
const r = p.exec(n);
if (!r)
return null;
const o = r[1], s = o.substring(6, 8), u = parseInt(o.substring(0, 2), 16), h = parseInt(o.substring(2, 4), 16), m = parseInt(o.substring(4, 6), 16), f = parseInt(s, 16) / 255;
return { r: u, g: h, b: m, a: f };
}, nl = (n, p, r, o) => {
function s(a) {
const g = a.toString(16);
return g.length === 1 ? "0" + g : g;
}
const u = s(Math.round(n)), h = s(Math.round(p)), m = s(Math.round(r)), f = s(Math.round(o * 255));
return `#${u}${h}${m}${f}`;
}, Ce = (n) => {
var p;
try {
let r = (p = n.replace(
/^#?([a-f\d])([a-f\d])([a-f\d])$/i,
// @ts-ignore
(h, m, f, a) => "#" + m + m + f + f + a + a
).substring(1).match(/.{2}/g)) == null ? void 0 : p.map((h) => parseInt(h, 16)), o = r == null ? void 0 : r[0], s = r == null ? void 0 : r[1], u = r == null ? void 0 : r[2];
return Number.isNaN(o) || Number.isNaN(s) || Number.isNaN(u) || o === void 0 || s === void 0 || u === void 0 ? null : {
r: o,
g: s,
b: u
};
} catch {
return null;
}
}, _ = (n, p, r) => {
n = n / 255, p = p / 255, r = r / 255;
const o = Math.max(n, p, r), s = Math.min(n, p, r);
let u;
return o === n ? u = (p - r) / (o - s) : o === p ? u = 2 + (r - n) / (o - s) : u = 4 + (n - p) / (o - s), u *= 60, u < 0 && (u += 360), Number.isNaN(u) && (u = 0), u;
}, al = (n, p, r) => {
p = p / 100, r = r / 100;
let o, s, u, h = [];
return o = (1 - Math.abs(2 * r - 1)) * p, s = o * (1 - Math.abs(n / 60 % 2 - 1)), u = r - o / 2, n >= 0 && n < 60 && (h = [o, s, 0]), n >= 60 && n < 120 && (h = [s, o, 0]), n >= 120 && n < 180 && (h = [0, o, s]), n >= 180 && n < 240 && (h = [0, s, o]), n >= 240 && n < 300 && (h = [s, 0, o]), n >= 300 && n <= 360 && (h = [o, 0, s]), h.map((m) => Math.round(255 * (m + u)));
}, Ie = (n, p, r) => "#" + (16777216 + (r | p << 8 | n << 16)).toString(16).slice(1), Ye = (n, p, r) => {
let o = al(n, p, r);
return { rgb: o, hexA: Ie(o[0], o[1], o[2]) };
}, Oe = (n, p, r) => {
let o, s, u, h, m, f, a = 0, g = [];
for (g[0] = n / 255, g[1] = p / 255, g[2] = r / 255, o = g[0], s = g[0], f = 0, u = 0; u < g.length - 1; u++)
g[u + 1] <= o && (o = g[u + 1]), g[u + 1] >= s && (s = g[u + 1], f = u + 1);
return f === 0 && (a = (g[1] - g[2]) / (s - o)), f === 1 && (a = 2 + (g[2] - g[0]) / (s - o)), f === 2 && (a = 4 + (g[0] - g[1]) / (s - o)), isNaN(a) && (a = 0), a = a * 60, a < 0 && (a = a + 360), h = (o + s) / 2, o === s ? m = 0 : h < 0.5 ? m = (s - o) / (s + o) : m = (s - o) / (2 - s - o), m = m, { h: a, s: m, l: h };
}, Ue = (n, p, r) => {
n = n % 360 / 360, p = Math.min(1, Math.max(0, p)), r = Math.min(1, Math.max(0, r));
let o, s, u;
if (p === 0)
o = s = u = r;
else {
const h = (a, g, y) => (y < 0 && (y += 1), y > 1 && (y -= 1), y < 0.16666666666666666 ? a + (g - a) * 6 * y : y < 0.5 ? g : y < 0.6666666666666666 ? a + (g - a) * (0.6666666666666666 - y) * 6 : a), m = r < 0.5 ? r * (1 + p) : r + p - r * p, f = 2 * r - m;
o = h(f, m, n + 1 / 3), s = h(f, m, n), u = h(f, m, n - 1 / 3);
}
return o = Math.round(o * 255), s = Math.round(s * 255), u = Math.round(u * 255), { r: o, g: s, b: u };
}, ol = (n, p, r) => {
let o = 0, s = 0, u = 0;
const h = n / 60, m = r * p, f = m * (1 - Math.abs(h % 2 - 1)), a = r - m;
switch (Math.floor(h) % 6) {
case 0:
o = m, s = f, u = 0;
break;
case 1:
o = f, s = m, u = 0;
break;
case 2:
o = 0, s = m, u = f;
break;
case 3:
o = 0, s = f, u = m;
break;
case 4:
o = f, s = 0, u = m;
break;
case 5:
o = m, s = 0, u = f;
break;
}
return {
r: Math.round((o + a) * 255),
g: Math.round((s + a) * 255),
b: Math.round((u + a) * 255)
};
}, sl = (n, p, r) => {
n /= 255, p /= 255, r /= 255;
const o = Math.max(n, p, r), s = Math.min(n, p, r);
let u, h, m = o;
const f = o - s;
if (o !== 0)
h = f / o;
else
return { h: 0, s: 0, v: 0 };
return f === 0 ? u = 0 : o === n ? u = 60 * ((p - r) / f % 6) : o === p ? u = 60 * ((r - n) / f + 2) : u = 60 * ((n - p) / f + 4), u < 0 && (u += 360), {
h: Math.round(u),
s: Math.round(h * 100) / 100,
v: Math.round(m * 100) / 100
};
}, rl = (n, p, r) => {
const o = (2 - p) * r / 2, s = o && o < 1 ? p * r / (o < 0.5 ? o * 2 : 2 - o * 2) : p;
return { h: n, s, l: o };
}, il = (n, p, r, o) => {
const s = Math.round(255 * (1 - n) * (1 - o)), u = Math.round(255 * (1 - p) * (1 - o)), h = 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, h))
};
}, ul = (n, p, r) => {
n = n / 255, p = p / 255, r = r / 255;
const o = 1 - Math.max(n, p, r), s = (1 - n - o) / (1 - o), u = (1 - p - o) / (1 - o), h = (1 - r - o) / (1 - o);
return {
c: isNaN(s) ? 0 : s,
m: isNaN(u) ? 0 : u,
y: isNaN(h) ? 0 : h,
k: isNaN(o) ? 0 : o
};
}, cl = { class: "ck-cp-local-color-conatiner" }, dl = { class: "ck-cp-color-list-label" }, pl = { style: { display: "flex", "align-items": "center" } }, gl = {
key: 1,
width: "32",
height: "14",
viewBox: "5 -5 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, ml = /* @__PURE__ */ x("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), hl = [
ml
], vl = {
key: 1,
width: "18",
height: "18",
viewBox: "-2 -2 30 30",
xmlns: "http://www.w3.org/2000/svg"
}, fl = /* @__PURE__ */ Le('<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), bl = [
fl
], yl = { class: "ck-cp-color-list" }, Cl = ["onClick"], wl = {
key: 1,
width: "25",
height: "25",
viewBox: "2 2 20 20",
xmlns: "http://www.w3.org/2000/svg"
}, kl = /* @__PURE__ */ x("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), xl = /* @__PURE__ */ x("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), $l = [
kl,
xl
], Ml = /* @__PURE__ */ A({
__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(n, { emit: p }) {
const r = n, o = p, s = L([]), u = rt(
() => s.value.some((a) => a.selected == !0)
), h = () => {
if (!s.value.find(
(g) => g.color === r.hexVal
)) {
const g = s.value.find(
(y) => y.selected == !0
);
if (g)
g.color = r.hexVal;
else {
s.value.length === r.colorListCount && s.value.pop();
let y = r.hexVal;
s.value.unshift({ color: y, selected: !1 });
}
localStorage.setItem(
"ck-cp-local-color-list",
JSON.stringify(
s.value.map((y) => y.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)
)
);
}, f = (a) => {
s.value.forEach((g) => {
g.color === a ? g.selected = !g.selected : g.selected = !1;
}), o("color-item-click", a);
};
return it(() => {
let a = localStorage.getItem("ck-cp-local-color-list");
if (a) {
let g = JSON.parse(a);
s.value = g.map((y) => ({
color: y,
selected: !1
}));
}
}), (a, g) => (v(), $("div", cl, [
x("div", dl, [
x("div", pl, [
ie(X(n.title ? n.title : "Color Palette") + " ", 1),
n.iconClasses.arrowDown ? (v(), $("i", {
key: 0,
class: G(n.iconClasses.arrowDown)
}, null, 2)) : (v(), $("svg", gl, hl))
]),
u.value ? (v(), $("button", {
key: 0,
type: "button",
class: "cp-main-btn",
onClick: m,
style: { width: "17.33px", height: "17.33px" }
}, [
n.iconClasses.delete ? (v(), $("i", {
key: 0,
class: G(n.iconClasses.delete)
}, null, 2)) : (v(), $("svg", vl, bl))
])) : I("", !0)
]),
x("div", yl, [
(v(!0), $(Ge, null, ut(s.value, (y) => (v(), $("div", {
key: `color-${y.color}`,
class: G(["ck-cp-color-item", y.selected ? "ck-select" : ""]),
style: ct({ backgroundColor: y.color }),
onClick: (D) => f(y.color)
}, null, 14, Cl))), 128)),
x("button", {
type: "button",
class: "cp-btn-save-color",
onClick: h
}, [
n.iconClasses.save ? (v(), $("i", {
key: 0,
class: G(n.iconClasses.save)
}, null, 2)) : (v(), $("svg", wl, $l))
])
])
]));
}
}), Vl = ["cp-theme"], Il = {
key: 0,
style: { display: "flex", "align-items": "center", gap: "8px", "margin-top": "calc(var(--margin-top) * 1.35)", padding: "var(--padding)" }
}, Ll = {
key: 1,
width: "20",
height: "20",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, Sl = /* @__PURE__ */ Le('<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), Tl = [
Sl
], Nl = { style: { display: "flex", "align-items": "center", gap: "8px", "margin-top": "calc(var(--margin-top) * 1.35)", padding: "var(--padding)" } }, El = /* @__PURE__ */ x("svg", {
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "3 2 28 28"
}, [
/* @__PURE__ */ x("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" }),
/* @__PURE__ */ x("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" })
], -1), Hl = { style: { "flex-grow": "1", display: "flex", "flex-direction": "column", gap: "calc(var(--margin-top) * 1.85)" } }, Dl = { id: "ck-cp-target-background" }, Bl = {
key: 1,
class: "ck-cp-input-container"
}, Rl = {
key: 3,
class: "ck-cp-buttons"
}, Pl = /* @__PURE__ */ A({
__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", "onSave", "onCancel"],
setup(n, { emit: p }) {
const r = n, o = L(null), s = p, u = L(r.mode), h = L(r.modelValue), m = L(r.modelValue), f = (t) => {
h.value = t, r.showButtons || (m.value = t, s("update:modelValue", t));
}, 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 }
]), g = L(!1), y = L(r.gradientMode), D = be({
angle: 90,
percentageX: 50,
percentageY: 50
}), F = L(""), S = L(r.inputType), ee = L(!1), Te = L(), ce = L(), K = L(), W = L(), V = L(), B = be({
h: 0,
s: 0,
l: 0
}), N = be({
h: 0,
s: 0,
v: 0
}), T = be({
c: 0,
m: 0,
y: 0,
k: 0
});
re("gradientBar", ce), re("canvas", K), re("pickerWrap", W), re("pickerPointer", V), re("opacitySlider", Te);
let te = 0, le = 0, Ne = 0, Ee = 0, ne = 0, ae = 0;
const Ae = (t) => {
if (!W.value || !V.value)
return;
const e = "TouchEvent" in window && t instanceof TouchEvent, { clientX: l, clientY: i } = e ? t.touches[0] : t;
ne = W.value.offsetHeight - V.value.offsetHeight, ae = W.value.offsetWidth - V.value.offsetWidth, Ne = l - t.target.getBoundingClientRect().left, Ee = i - t.target.getBoundingClientRect().top, te = Ne - V.value.offsetWidth / 2, le = Ee - V.value.offsetHeight / 2, V.value.style.left = `${te}px`, V.value.style.top = `${le}px`, ke(!1), Q(), e ? (window.addEventListener("touchmove", de), window.addEventListener("touchend", pe)) : (window.addEventListener("mousemove", de), window.addEventListener("mouseup", pe));
}, de = (t) => {
t.preventDefault();
const e = "TouchEvent" in window && t instanceof TouchEvent, { clientX: l, clientY: i } = e ? t.touches[0] : t, c = W.value.getBoundingClientRect(), d = l - c.left - V.value.offsetWidth / 2, b = i - c.top - V.value.offsetHeight / 2;
d >= 0 && d <= ae ? (te = d, V.value.style.left = `${d}px`) : 0 > d ? (te = 0, V.value.style.left = "0px") : d > ae && (te = ae, V.value.style.left = `${ae}px`), b >= 0 && b <= ne ? (le = b, V.value.style.top = `${b}px`) : 0 > b ? (le = 0, V.value.style.top = "0px") : b > ne && (le = ne, V.value.style.top = `${ne}px`), ke(!1), Q();
}, pe = (t) => {
"TouchEvent" in window && t instanceof TouchEvent ? (window.removeEventListener("touchmove", de), window.removeEventListener("touchend", pe)) : (window.removeEventListener("mousemove", de), window.removeEventListener("mouseup", pe));
}, ke = (t) => {
if (!t) {
let e = We();
const l = Ue(Z.value, e.s, e.l);
if (l) {
if (ee.value) {
let i = a.value.find((c) => c.select == !0);
i && (i.r = l.r, i.g = l.g, i.b = l.b);
}
U(), R();
}
}
}, Z = L(0), xe = async (t) => {
const { rgb: e } = Ye(Z.value, 100, 50);
Re(e), setTimeout(() => {
ke(t), Q();
}, 0);
}, We = () => {
let t = { s: 0, l: 0 }, e = W.value.offsetWidth - V.value.offsetWidth, l = W.value.offsetHeight - V.value.offsetHeight, i = parseInt(V.value.style.left), d = 1 - parseInt(V.value.style.top) / l, b = i / e;
return t.l = d / 2 * (2 - b), t.s = d * b / (1 - Math.abs(2 * t.l - 1)), Number.isNaN(t.s) && (t.s = t.l), t.l = t.l > 1 ? 1 : t.l, t.s = t.s > 1 ? 1 : t.s, t;
}, oe = () => {
const t = a.value.find((e) => e.select == !0);
if (t) {
const { l: e, s: l } = Oe(t.r, t.g, t.b);
let i = e, c = l;
Number.isNaN(c) && (c = i);
let d = { x: 0, y: 0 }, b = W.value.offsetWidth - V.value.offsetWidth, M = W.value.offsetHeight - V.value.offsetHeight;
const [k, C] = 2 * i - 1 < 0 ? [
b * 2 * c / (1 + c),
M * (1 - i * (1 + c))
] : [
-b * 2 * (i - 1) * c / (i + c - i * c),
M * (i - 1) * (c - 1)
];
return d.x = k, d.y = C, d;
} else
return null;
}, Fe = () => {
const t = a.value.find((e) => e.select == !0);
t && (t.hue = Z.value);
}, J = L(100), Ze = (t) => {
if (r.showAlpha) {
const e = t.target, l = a.value.find((i) => i.select == !0);
l && (l.a = parseInt(e.value), R());
}
}, qe = (t) => {
var l, i, c, d;
const e = (i = (l = o.value) == null ? void 0 : l.querySelector(".gradient-handle-content")) == null ? void 0 : i.getBoundingClientRect();
return t === 0 ? "0px" : t === 100 && e ? `${(((c = ce.value) == null ? void 0 : c.offsetWidth) || 0) - (e.width || 0)}px` : `${(((d = ce.value) == null ? void 0 : d.offsetWidth) || 0) * (t / 100) - ((e == null ? void 0 : e.width) || 0) / 2}px`;
};
let Y = null, O = null;
const Ke = (t) => {
var i, c;
const l = t.target.offsetParent;
if ((i = l == null ? void 0 : l.id) != null && i.includes("clr-gb-")) {
const d = l.id.replace("clr-gb-", "");
O = l;
const b = a.value.find((k) => k.select == !0);
if (b && b.id != d) {
const k = (c = o.value) == null ? void 0 : c.querySelector(
".gradient-handle.select"
);
k == null || k.classList.remove("select"), l.classList.add("select");
const C = a.value.findIndex(
(w) => w.select == !0
);
for (let w = 0; w < a.value.length; w++) {
const E = a.value[w];
if (E.id == d) {
C != -1 && (a.value[C].select = !1), a.value[w].select = !0, J.value = E.a, q(E.r, E.g, E.b, E.hue, !0), U(), Q();
break;
}
}
}
"TouchEvent" in window && t instanceof TouchEvent ? (window.addEventListener("touchmove", me), window.addEventListener("touchend", ge)) : (window.addEventListener("mousemove", me), window.addEventListener("mouseup", ge));
}
}, ge = (t) => {
"TouchEvent" in window && t instanceof TouchEvent ? (window.removeEventListener("touchmove", me), window.removeEventListener("touchend", ge)) : (window.removeEventListener("mousemove", me), window.removeEventListener("mouseup", ge));
}, me = (t) => {
var M, k;
t.preventDefault();
const l = "TouchEvent" in window && t instanceof TouchEvent ? t.touches[0].clientX : t.clientX, i = (k = (M = o.value) == null ? void 0 : M.querySelector(".gradient-handle-content")) == null ? void 0 : k.getBoundingClientRect(), c = Y == null ? void 0 : Y.getBoundingClientRect(), d = (c == null ? void 0 : c.width) - (i == null ? void 0 : i.width);
let b = l - ((c == null ? void 0 : c.left) || 0) - ((i == null ? void 0 : i.width) || 0) / 2;
if (b < 0 ? b = 0 : b > d && (b = d), O) {
O.style.left = `${b}px`;
const C = parseFloat(
(b / ((c == null ? void 0 : c.width) - (i == null ? void 0 : i.width)) * 100).toFixed(0)
), w = a.value.find(
(E) => E.id == (O == null ? void 0 : O.id.replace("clr-gb-", ""))
);
w && (w.percent = C), R();
}
}, ze = (t) => {
var k, C;
const e = "TouchEvent" in window && t instanceof TouchEvent, l = Y == null ? void 0 : Y.getBoundingClientRect();
let i;
e ? i = Math.round(
(t.touches[0].clientX - ((l == null ? void 0 : l.left) || 0)) / ((l == null ? void 0 : l.width) || 1) * 100
) : i = Math.round(
(t.clientX - ((l == null ? void 0 : l.left) || 0)) / ((l == null ? void 0 : l.width) || 1) * 100
);
const c = a.value.findIndex((w) => w.select == !0), d = a.value[c], b = {
id: Date.now(),
r: d.r,
g: d.g,
b: d.b,
a: d.a,
percent: i,
hue: d.hue,
select: !0
};
a.value[c].select = !1;
const M = (k = o.value) == null ? void 0 : k.querySelector(
".gradient-handle.select"
);
M == null || M.classList.remove("select"), a.value = [...a.value, b], Be(b), O = (C = o.value) == null ? void 0 : C.querySelector(
`#clr-gb-${b.id}`
), R();
}, He = (t) => {
if (t.r == 0 && t.g == 0 && t.b == 0)
return !0;
if (t.r == 255 && t.g == 255 && t.b == 255)
return !0;
{
const e = K.value.getContext("2d", { willReadFrequently: !0 }), l = K.value.width, i = K.value.height, c = e.getImageData(0, 0, l, i).data, d = t.r, b = t.g, M = t.b;
for (let k = 0; k < i; k++)
for (let C = 0; C < l; C++) {
const w = (k * l + C) * 4, E = c[w], at = c[w + 1], ot = c[w + 2];
if (E === d && at === b && ot === M)
return !0;
}
return !1;
}
}, q = (t, e, l, i, c) => {
setTimeout(() => {
if (He({ r: t, g: e, b: l })) {
let d = oe();
d && (V.value.style.left = `${d.x}px`, V.value.style.top = `${d.y}px`);
} else {
let d = oe();
d && (V.value.style.left = `${d.x}px`, V.value.style.top = `${d.y}px`), Z.value = i, xe(c);
}
}, 0);
}, De = () => {
a.value.forEach((l) => Be(l)), je();
const t = a.value[0];
Z.value = t.hue, xe(!0);
let e = oe();
e && (V.value.style.left = `${e.x}px`, V.value.style.top = `${e.y}px`), U(), R();
}, Be = (t) => {
if (u.value == "gradient") {
let e = document.createElement("div");
e.id = `clr-gb-${t.id}`, e.classList.add("gradient-handle"), e.style.left = qe(t.percent);
let l = document.createElement("div");
l.classList.add("gradient-handle-content"), t.select == !0 && e.classList.add("select"), e.appendChild(l), Y && Y.appendChild(e);
}
}, Re = (t) => {
const e = K.value.getContext("2d", { willReadFrequently: !0 }), l = K.value.width, i = K.value.height;
e.fillStyle = `rgb(${t[0]},${t[1]},${t[2]})`, e.fillRect(0, 0, l, i);
let c = e.createLinearGradient(0, 0, l - 12, 0);
c.addColorStop(0, "rgb(255,255,255)"), c.addColorStop(1, "rgba(255,255,255,0)"), e.fillStyle = c, e.fillRect(0, 0, l, i);
let d = e.createLinearGradient(0, 0, 0, i);
d.addColorStop(0, "rgba(0,0,0,0)"), d.addColorStop(1, "rgb(0,0,0)"), e.fillStyle = d, e.fillRect(0, 0, l, i);
}, U = () => {
if (r.showAlpha) {
let t = a.value.find((e) => e.select == !0);
t && (Te.value.style.background = ` linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(${t.r}, ${t.g}, ${t.b}, 100) 97%)`);
}
}, R = () => {
var t;
if (u.value == "gradient") {
a.value.sort((c, d) => c.percent - d.percent);
let e = "linear-gradient(90deg, ", l;
if (y.value == "linear") {
l = `linear-gradient(${D.angle}deg, `;
for (let c = 0; c < a.value.length; c++) {
const { r: d, g: b, b: M, a: k, percent: C } = a.value[c];
a.value.length - 1 == c ? (e = e + `rgba(${d},${b},${M},${k / 100}) ${C}%)`, l = l + `rgba(${d},${b},${M},${k / 100}) ${C}%)`) : (e = e + `rgba(${d},${b},${M},${k / 100}) ${C}%, `, l = l + `rgba(${d},${b},${M},${k / 100}) ${C}%, `);
}
} else {
l = `radial-gradient(circle at ${D.percentageX}% ${D.percentageY}%, `;
for (let c = 0; c < a.value.length; c++) {
const { r: d, g: b, b: M, a: k, percent: C } = a.value[c];
a.value.length - 1 == c ? (e = e + `rgba(${d},${b},${M},${k / 100}) ${C}%)`, l = l + `rgba(${d},${b},${M},${k / 100}) ${C}%)`) : (e = e + `rgba(${d},${b},${M},${k / 100}) ${C}%, `, l = l + `rgba(${d},${b},${M},${k / 100}) ${C}%, `);
}
}
ce.value.style.backgroundImage = e;
let i = (t = o.value) == null ? void 0 : t.querySelector(
"#ck-cp-target-background"
);
i && (i.style.backgroundImage = l, ee.value && f(i.style.backgroundImage));
} else {
const { r: e, g: l, b: i, a: c } = a.value[0];
let d = "";
switch (r.type) {
case "HEX8":
d = nl(e, l, i, c / 100);
break;
case "RGBA":
d = `rgba(${e},${l},${i},${c / 100})`;
break;
case "RGB":
d = `rgb(${e},${l},${i})`;
break;
case "HEX":
d = Ie(e, l, i);
break;
}
ee.value && f(d);
}
}, je = () => {
a.value.forEach((t) => {
t.hue = _(t.r, t.g, t.b);
});
}, Je = (t) => {
y.value = t, R();
}, Xe = () => {
var t, e;
if (a.value.length > 2) {
const l = a.value.findIndex((i) => i.select == !0);
if (l !== -1) {
const i = a.value[l].id;
a.value.splice(l, 1);
const c = (t = o.value) == null ? void 0 : t.querySelector(
`#clr-gb-${i}`
);
c == null || c.remove();
const d = a.value[0];
d && (d.select = !0, O = (e = o.value) == null ? void 0 : e.querySelector(
`#clr-gb-${d.id}`
), O == null || O.classList.add("select"), q(d.r, d.g, d.b, d.hue, !1), Q(), R());
}
}
}, $e = () => {
var l;
const t = (l = o.value) == null ? void 0 : l.querySelector("#cp-btn-eyedropper");
t == null || t.classList.add("active"), new EyeDropper().open().then((i) => {
const { sRGBHex: c } = i, d = a.value.find((M) => M.select == !0), b = Ce(c);
if (b) {
const M = _(b.r, b.g, b.b);
if (d && (d.hue = M, d.r = b.r, d.g = b.g, d.b = b.b), He(b)) {
const k = oe();
k && (V.value.style.left = `${k.x}px`, V.value.style.top = `${k.y}px`);
} else {
Z.value = M;
const { rgb: k } = Ye(M, 100, 50);
Re(k);
const C = oe();
C && (V.value.style.left = `${C.x}px`, V.value.style.top = `${C.y}px`);
}
Q(), U(), R(), t == null || t.classList.remove("active");
}
}).catch(() => {
t == null || t.classList.remove("active");
});
}, he = (t, e) => {
if (e != "a") {
const l = a.value.find((i) => i.select == !0);
if (l) {
const i = _(l.r, l.g, l.b);
l.hue = i, q(
l.r,
l.g,
l.b,
l.hue,
!0
), R(), U();
}
} else
J.value = t, R(), U();
}, Me = () => {
const t = a.value.find((e) => e.select == !0);
if (t && !Number.isNaN(B.h) && !Number.isNaN(B.s) && !Number.isNaN(B.l)) {
const { r: e, g: l, b: i } = Ue(B.h, B.s / 100, B.l / 100);
t.hue = B.h, t.r = e, t.g = l, t.b = i, q(
t.r,
t.g,
t.b,
t.hue,
!0
), R(), U();
}
}, Ve = () => {
const t = a.value.find((e) => e.select == !0);
if (t && !Number.isNaN(N.h) && !Number.isNaN(N.s) && !Number.isNaN(N.v)) {
const { r: e, g: l, b: i } = ol(N.h, N.s / 100, N.v / 100), { h: c } = rl(N.h, N.s / 100, N.v / 100);
t.hue = c, t.r = e, t.g = l, t.b = i, q(
t.r,
t.g,
t.b,
t.hue,
!0
), R(), U();
}
}, ve = () => {
const t = a.value.find((e) => e.select == !0);
if (t && !Number.isNaN(T.c) && !Number.isNaN(T.m) && !Number.isNaN(T.y) && !Number.isNaN(T.k)) {
const { r: e, g: l, b: i } = il(
T.c / 100,
T.m / 100,
T.y / 100,
T.k / 100
), c = _(e, l, i);
t.hue = c, t.r = e, t.g = l, t.b = i, q(
t.r,
t.g,
t.b,
t.hue,
!0
), R(), U();
}
}, Qe = () => {
if (F.value) {
const t = Ce(F.value);
if (t) {
const e = _(t.r, t.g, t.b), l = a.value.find((i) => i.select == !0);
l && (l.r = t.r, l.g = t.g, l.b = t.b, l.hue = e, q(t.r, t.g, t.b, l.hue, !0), R(), U(), se(S.value));
}
}
}, Q = () => {
const t = a.value.find((e) => e.select == !0);
t && (F.value = Ie(t.r, t.g, t.b).toUpperCase()), se(S.value);
}, _e = (t) => {
F.value = t;
let e = Ce(F.value);
if (e) {
const l = _(e.r, e.g, e.b), i = a.value.find((c) => c.select == !0);
i && (i.r = e.r, i.g = e.g, i.b = e.b, i.hue = l, q(e.r, e.g, e.b, i.hue, !0), R(), U());
}
};
window.EyeDropper && (g.value = !0);
const et = (t = "") => {
if (u.value == "gradient") {
let e = t ? t.includes("linear-gradient") ? "linear" : "radial" : r.gradientMode, l = [];
if (y.value = e, e == "linear") {
let i = /^linear-gradient\((.*)\)$/, c = t.replace(";", "").trim().match(i), d = /,\s*(?![^()]*\))/;
if (t.includes("deg") || (D.angle = 180), c) {
let b = c[1].split(d);
for (let M = 0; M < b.length; M++) {
const k = b[M];
let C = {
id: M,
r: 0,
g: 0,
b: 0,
a: 100,
percent: 100,
hue: 0,
select: !1
};
if (k.includes("deg"))
D.angle = parseInt(k.replace("deg", ""));
else if (k.includes("rgba")) {
let w = k.trim().replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
w = w.filter((E) => E.trim() !== ""), C.r = parseInt(w[0]), C.g = parseInt(w[1]), C.b = parseInt(w[2]), C.a = parseFloat(w[3]) * 100, C.percent = parseInt(w[4]), l.push(C);
} else if (k.includes("rgb")) {
let w = k.trim().replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
w = w.filter((E) => E.trim() !== ""), C.r = parseInt(w[0]), C.g = parseInt(w[1]), C.b = parseInt(w[2]), C.percent = parseInt(w[3]), l.push(C);
}
}
}
} else {
let i = /^radial-gradient\((.*)\)$/, c = t.replace(";", "").trim().match(i), d = /,\s*(?![^()]*\))/;
if (c) {
let b = c[1].split(d);
for (let M = 0; M < b.length; M++) {
const k = b[M];
let C = {
id: M,
r: 0,
g: 0,
b: 0,
a: 100,
percent: 100,
hue: 0,
select: !1
};
if (k.includes("circle at")) {
let w = k.replace("circle at ", "").replace(" ", "").replace(/%/g, " ").trim().split(" ");
D.percentageX = parseInt(w[0]), D.percentageY = parseInt(w[1]);
} else if (k.includes("rgba")) {
let w = k.replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
w = w.filter((E) => E.trim() !== ""), C.r = parseInt(w[0]), C.g = parseInt(w[1]), C.b = parseInt(w[2]), C.a = parseFloat(w[3]) * 100, C.percent = parseInt(w[4]), l.push(C);
} else if (k.includes("rgb")) {
let w = k.replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
w = w.filter((E) => E.trim() !== ""), C.r = parseInt(w[0]), C.g = parseInt(w[1]), C.b = parseInt(w[2]), C.percent = parseInt(w[3]), l.push(C);
}
}
}
}
l.length > 1 && (a.value = l, a.value[0].select = !0, J.value = a.value[0].a);
} else if (t) {
let e = {
r: 0,
g: 0,
b: 0,
a: 0
};
if (t.includes("#"))
if (t.length >= 8)
e = ll(t);
else {
let l = Ce(t);
l ? (e.a = 1, e.r = l.r, e.g = l.g, e.b = l.b) : e = null;
}
else if (t.includes("rgb"))
if (t.includes("rgba"))
e = tl(t);
else {
let l = el(t);
l ? (e.a = 1, e.r = l.r, e.g = l.g, e.b = l.b) : e = null;
}
e && (a.value[0].r = e.r, a.value[0].b = e.b, a.value[0].g = e.g, a.value[0].a = parseInt((e.a * 100).toFixed(0)), J.value = a.value[0].a, a.value[0].hue = 0);
}
}, se = (t) => {
const e = a.value.find((l) => l.select == !0);
if (e) {
switch (t) {
case "RGB":
break;
case "HSL": {
const { h: l, s: i, l: c } = Oe(
e.r,
e.g,
e.b
);
B.h = Math.round(l), B.s = Math.round(i * 100), B.l = Math.round(c * 100);
break;
}
case "HSV": {
const { h: l, s: i, v: c } = sl(
e.r,
e.g,
e.b
);
N.h = Math.round(l), N.s = Math.round(i * 100), N.v = Math.round(c * 100);
break;
}
case "CMYK":
{
const { c: l, m: i, y: c, k: d } = ul(
e.r,
e.g,
e.b
);
T.c = Math.round(l * 100), T.m = Math.round(i * 100), T.y = Math.round(c * 100), T.k = Math.round(d * 100);
}
break;
}
S.value = t;
}
}, tt = (t) => {
u.value = t, setTimeout(() => {
var e;
u.value == "gradient" && (Y = (e = o.value) == null ? void 0 : e.querySelector(
".gradient-bar"
)), fe(r.modelValue), se(S.value);
}, 0);
}, fe = (t) => {
t && et(t), De();
}, lt = () => {
m.value = h.value, s("update:modelValue", m.value), s("onSave", m.value);
}, Pe = () => {
a.value.forEach((t) => {
const e = Y == null ? void 0 : Y.querySelector(`#clr-gb-${t.id}`);
e == null || e.remove();
});
}, nt = () => {
h.value = m.value, Pe(), fe(h.value), s("onCancel", h.value);
};
return Se(
() => r.modelValue,
(t, e) => {
t !== e && t !== m.value && (Pe(), fe(t));
}
), dt(() => {
var t;
u.value == "gradient" && (Y = (t = o.value) == null ? void 0 : t.querySelector(
".gradient-bar"
)), fe(r.modelValue), se(S.value), ee.value = !0;
}), (t, e) => (v(), $("div", {
class: G(["ck-cp-container", n.disabled ? "ck-cp-disabled " : ""]),
ref_key: "pickerTemplateRef",
ref: o,
"cp-theme": n.theme
}, [
ye(Bt, {
angle: D.angle,
"onUpdate:angle": e[0] || (e[0] = (l) => D.angle = l),
percentageX: D.percentageX,
"onUpdate:percentageX": e[1] || (e[1] = (l) => D.percentageX = l),
percentageY: D.percentageY,
"onUpdate:percentageY": e[2] || (e[2] = (l) => D.percentageY = l),
local: n.local,
iconClasses: n.iconClasses,
inputType: S.value,
mode: u.value,
showInputMenu: n.showInputMenu,
gradientType: y.value,
showPickerMode: n.showPickerMode,
onOnChangeMode: Je,
onOnInput: R,
onOnClickEyeDropper: $e,
onOnDeleteColor: Xe,
onOnChangeInputType: se,
onOnPickerChangeMode: tt
}, null, 8, ["angle", "percentageX", "percentageY", "local", "iconClasses", "inputType", "mode", "showInputMenu", "gradientType", "showPickerMode"]),
ye(Ot, { onOnEventStart: Ae }),
u.value == "gradient" ? (v(), $("div", Il, [
x("button", {
type: "button",
class: "cp-main-btn",
onClick: Xe
}, [
n.iconClasses.delete ? (v(), $("i", {
key: 0,
class: G(n.iconClasses.delete)
}, null, 2)) : (v(), $("svg", Ll, Tl))
]),
ye(Pt, {
onOnAddColor: ze,
onOnMouseDown: Ke
})
])) : I("", !0),
x("div", Nl, [
g.value && n.showEyeDrop ? (v(), $("button", {
key: 0,
type: "button",
id: "cp-btn-eyedropper",
class: "cp-main-btn",
onClick: $e
}, [
n.iconClasses.eyeDroper ? (v(), $("i", {
key: 0,
class: G(n.iconClasses.eyeDroper)
}, null, 2)) : I("", !0),
El
])) : I("", !0),
x("div", Hl, [
ye(At, {
modelValue: Z.value,
"onUpdate:modelValue": e[3] || (e[3] = (l) => Z.value = l),
showEyeDrop: n.showEyeDrop,
isEyeDropperUsing: g.value,
onOnInput: e[4] || (e[4] = (l) => xe(!1)),
onOnChange: Fe,
onOnClickEyeDropper: $e
}, null, 8, ["modelValue", "showEyeDrop", "isEyeDropperUsing"]),
n.showAlpha ? (v(), H(Zt, {
key: 0,
modelValue: J.value,
"onUpdate:modelValue": e[5] || (e[5] = (l) => J.value = l),
onOnInput: Ze
}, null, 8, ["modelValue"])) : I("", !0)
])
]),
z(x("div", Dl, null, 512), [
[j, !1]
]),
ee.value && n.showInputSet ? (v(), $("div", Bl, [
S.value !== "CMYK" ? (v(), H(_t, {
key: 0,
modelValue: F.value,
"onUpdate:modelValue": [
e[6] || (e[6] = (l) => F.value = l),
Qe
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "RGB" ? (v(), H(P, {
key: 1,
label: "R",
min: 0,
max: 255,
modelValue: a.value.find((l) => l.select == !0).r,
"onUpdate:modelValue": [
e[7] || (e[7] = (l) => a.value.find((i) => i.select == !0).r = l),
e[8] || (e[8] = (l) => he(l, "r"))
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "RGB" ? (v(), H(P, {
key: 2,
label: "G",
min: 0,
max: 255,
modelValue: a.value.find((l) => l.select == !0).g,
"onUpdate:modelValue": [
e[9] || (e[9] = (l) => a.value.find((i) => i.select == !0).g = l),
e[10] || (e[10] = (l) => he(l, "g"))
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "RGB" ? (v(), H(P, {
key: 3,
label: "B",
min: 0,
max: 255,
modelValue: a.value.find((l) => l.select == !0).b,
"onUpdate:modelValue": [
e[11] || (e[11] = (l) => a.value.find((i) => i.select == !0).b = l),
e[12] || (e[12] = (l) => he(l, "b"))
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSL" ? (v(), H(P, {
key: 4,
label: "H",
min: 0,
max: 360,
modelValue: B.h,
"onUpdate:modelValue": [
e[13] || (e[13] = (l) => B.h = l),
Me
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSL" ? (v(), H(P, {
key: 5,
label: "S",
min: 0,
max: 100,
modelValue: B.s,
"onUpdate:modelValue": [
e[14] || (e[14] = (l) => B.s = l),
Me
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSL" ? (v(), H(P, {
key: 6,
label: "L",
min: 0,
max: 100,
modelValue: B.l,
"onUpdate:modelValue": [
e[15] || (e[15] = (l) => B.l = l),
Me
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSV" ? (v(), H(P, {
key: 7,
label: "H",
min: 0,
max: 360,
modelValue: N.h,
"onUpdate:modelValue": [
e[16] || (e[16] = (l) => N.h = l),
Ve
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSV" ? (v(), H(P, {
key: 8,
label: "S",
min: 0,
max: 100,
modelValue: N.s,
"onUpdate:modelValue": [
e[17] || (e[17] = (l) => N.s = l),
Ve
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "HSV" ? (v(), H(P, {
key: 9,
label: "V",
min: 0,
max: 100,
modelValue: N.v,
"onUpdate:modelValue": [
e[18] || (e[18] = (l) => N.v = l),
Ve
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "CMYK" ? (v(), H(P, {
key: 10,
label: "C",
min: 0,
max: 100,
modelValue: T.c,
"onUpdate:modelValue": [
e[19] || (e[19] = (l) => T.c = l),
ve
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "CMYK" ? (v(), H(P, {
key: 11,
label: "M",
min: 0,
max: 100,
modelValue: T.m,
"onUpdate:modelValue": [
e[20] || (e[20] = (l) => T.m = l),
ve
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "CMYK" ? (v(), H(P, {
key: 12,
label: "Y",
min: 0,
max: 100,
modelValue: T.y,
"onUpdate:modelValue": [
e[21] || (e[21] = (l) => T.y = l),
ve
]
}, null, 8, ["modelValue"])) : I("", !0),
S.value == "CMYK" ? (v(), H(P, {
key: 13,
label: "K",
min: 0,
max: 100,
modelValue: T.k,
"onUpdate:modelValue": [
e[22] || (e[22] = (l) => T.k = l),
ve
]
}, null, 8, ["modelValue"])) : I("", !0),
n.showAlpha ? (v(), H(P, {
key: 14,
label: "A",
min: 0,
max: 100,
style: { "margin-right": "2px" },
modelValue: a.value.find((l) => l.select == !0).a,
"onUpdate:modelValue": [
e[23] || (e[23] = (l) => a.value.find((i) => i.select == !0).a = l),
e[24] || (e[24] = (l) => he(l, "a"))
]
}, null, 8, ["modelValue"])) : I("", !0)
])) : I("", !0),
n.showColorList ? (v(), H(Ml, {
key: 2,
"color-list-count": n.colorListCount,
"hex-val": F.value,
onColorItemClick: _e,
iconClasses: n.iconClasses,
title: n.local.colorPalette
}, null, 8, ["color-list-count", "hex-val", "iconClasses", "title"])) : I("", !0),
n.showButtons ? (v(), $("div", Rl, [
x("button", {
class: "ck-cp-buttons__button ck-cp-buttons__button--save",
type: "button",
onClick: lt
}, X(n.local.btnSaveLabel), 1),
x("button", {
class: "ck-cp-buttons__button ck-cp-buttons__button--cancel",
type: "button",
onClick: nt
}, X(n.local.btnCancelLabel), 1)
])) : I("", !0)
], 10, Vl));
}
});
export {
Pl as Vue3ColorPicker
};