Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue3-colorpicker

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-colorpicker - npm Package Compare versions

Comparing version 2.2.3 to 2.3.0

1692

index.es.js

@@ -1,47 +0,47 @@

var ze = Object.defineProperty;
var Ge = (e, t, o) => t in e ? ze(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
var L = (e, t, o) => (Ge(e, typeof t != "symbol" ? t + "" : t, o), o);
import { defineComponent as O, ref as A, reactive as q, watch as Q, computed as K, openBlock as b, createElementBlock as $, normalizeClass as W, createElementVNode as u, normalizeStyle as E, pushScopeId as ee, popScopeId as te, Fragment as j, renderList as ne, getCurrentInstance as Xe, nextTick as qe, createCommentVNode as R, toDisplayString as re, resolveComponent as M, createBlock as I, createVNode as U, onMounted as Fe, inject as Pe, withDirectives as ue, vShow as de, createTextVNode as Ye, renderSlot as Ue, provide as je, withCtx as ke, resolveDynamicComponent as $e, mergeProps as we, Teleport as Ze } from "vue";
import { tryOnMounted as oe, whenever as N, useDebounceFn as Z, useLocalStorage as ge, onClickOutside as Je } from "@vueuse/core";
import H from "tinycolor2";
import { stringify as Qe, parse as xe } from "gradient-parser";
import { createPopper as et } from "@popperjs/core";
var qe = Object.defineProperty;
var Ye = (e, t, o) => t in e ? qe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
var W = (e, t, o) => (Ye(e, typeof t != "symbol" ? t + "" : t, o), o);
import { defineComponent as G, ref as M, reactive as Y, watch as x, computed as K, openBlock as C, createElementBlock as $, normalizeClass as O, createElementVNode as u, normalizeStyle as D, pushScopeId as ee, popScopeId as te, Fragment as Q, renderList as ne, getCurrentInstance as Ue, nextTick as je, createCommentVNode as B, withDirectives as le, vModelText as Ze, createTextVNode as Ee, toDisplayString as se, resolveComponent as V, createBlock as I, createVNode as Z, onMounted as Je, inject as Ie, vShow as ge, renderSlot as he, provide as Qe, useSlots as xe, withCtx as Be, resolveDynamicComponent as He, mergeProps as Re, Teleport as et } from "vue";
import { tryOnMounted as oe, whenever as T, useClipboard as tt, useDebounceFn as j, useLocalStorage as pe, onClickOutside as ot } from "@vueuse/core";
import R from "tinycolor2";
import { stringify as nt, parse as at } from "gradient-parser";
import { createPopper as rt } from "@popperjs/core";
import v from "vue-types";
import { DOMUtils as x } from "@aesoper/normal-utils";
import { merge as le } from "lodash-es";
const V = (e) => Math.round(e * 100) / 100;
class B {
import { DOMUtils as ae } from "@aesoper/normal-utils";
import { merge as ie } from "lodash-es";
const P = (e) => Math.round(e * 100) / 100;
class A {
constructor(t) {
L(this, "instance");
L(this, "alphaValue", 0);
W(this, "instance");
W(this, "alphaValue", 0);
// RGB
L(this, "redValue", 0);
L(this, "greenValue", 0);
L(this, "blueValue", 0);
W(this, "redValue", 0);
W(this, "greenValue", 0);
W(this, "blueValue", 0);
// HSV
L(this, "hueValue", 0);
L(this, "saturationValue", 0);
L(this, "brightnessValue", 0);
W(this, "hueValue", 0);
W(this, "saturationValue", 0);
W(this, "brightnessValue", 0);
// HSL
L(this, "hslSaturationValue", 0);
L(this, "lightnessValue", 0);
L(this, "initAlpha", () => {
W(this, "hslSaturationValue", 0);
W(this, "lightnessValue", 0);
W(this, "initAlpha", () => {
const t = this.instance.getAlpha();
this.alphaValue = Math.min(1, t) * 100;
});
L(this, "initLightness", () => {
W(this, "initLightness", () => {
const { s: t, l: o } = this.instance.toHsl();
this.hslSaturationValue = V(t), this.lightnessValue = V(o);
this.hslSaturationValue = P(t), this.lightnessValue = P(o);
});
L(this, "initRgb", () => {
W(this, "initRgb", () => {
const { r: t, g: o, b: n } = this.instance.toRgb();
this.redValue = V(t), this.greenValue = V(o), this.blueValue = V(n);
this.redValue = P(t), this.greenValue = P(o), this.blueValue = P(n);
});
L(this, "initHsb", () => {
W(this, "initHsb", () => {
const { h: t, s: o, v: n } = this.instance.toHsv();
this.hueValue = Math.min(360, Math.ceil(t)), this.saturationValue = V(o), this.brightnessValue = V(n);
this.hueValue = Math.min(360, Math.ceil(t)), this.saturationValue = P(o), this.brightnessValue = P(n);
});
L(this, "toHexString", () => this.instance.toHexString());
L(this, "toRgbString", () => this.instance.toRgbString());
this.instance = H(t), this.initRgb(), this.initHsb(), this.initLightness(), this.initAlpha();
W(this, "toHexString", () => this.instance.toHexString());
W(this, "toRgbString", () => this.instance.toRgbString());
this.instance = R(t), this.initRgb(), this.initHsb(), this.initLightness(), this.initAlpha();
}

@@ -55,12 +55,12 @@ toString(t) {

set hex(t) {
this.instance = H(t), this.initHsb(), this.initRgb(), this.initAlpha(), this.initLightness();
this.instance = R(t), this.initHsb(), this.initRgb(), this.initAlpha(), this.initLightness();
}
// 色调
set hue(t) {
this.saturation === 0 && this.brightness === 0 && (this.saturationValue = 1, this.brightnessValue = 1), this.instance = H({
h: V(t),
this.saturation === 0 && this.brightness === 0 && (this.saturationValue = 1, this.brightnessValue = 1), this.instance = R({
h: P(t),
s: this.saturation,
v: this.brightness,
a: this.alphaValue / 100
}), this.initRgb(), this.initLightness(), this.hueValue = V(t);
}), this.initRgb(), this.initLightness(), this.hueValue = P(t);
}

@@ -72,8 +72,8 @@ get hue() {

set saturation(t) {
this.instance = H({
this.instance = R({
h: this.hue,
s: V(t),
s: P(t),
v: this.brightness,
a: this.alphaValue / 100
}), this.initRgb(), this.initLightness(), this.saturationValue = V(t);
}), this.initRgb(), this.initLightness(), this.saturationValue = P(t);
}

@@ -85,8 +85,8 @@ get saturation() {

set brightness(t) {
this.instance = H({
this.instance = R({
h: this.hue,
s: this.saturation,
v: V(t),
v: P(t),
a: this.alphaValue / 100
}), this.initRgb(), this.initLightness(), this.brightnessValue = V(t);
}), this.initRgb(), this.initLightness(), this.brightnessValue = P(t);
}

@@ -98,8 +98,8 @@ get brightness() {

set lightness(t) {
this.instance = H({
this.instance = R({
h: this.hue,
s: this.hslSaturationValue,
l: V(t),
l: P(t),
a: this.alphaValue / 100
}), this.initRgb(), this.initHsb(), this.lightnessValue = V(t);
}), this.initRgb(), this.initHsb(), this.lightnessValue = P(t);
}

@@ -112,7 +112,7 @@ get lightness() {

const o = this.instance.toRgb();
this.instance = H({
this.instance = R({
...o,
r: V(t),
r: P(t),
a: this.alphaValue / 100
}), this.initHsb(), this.initLightness(), this.redValue = V(t);
}), this.initHsb(), this.initLightness(), this.redValue = P(t);
}

@@ -125,7 +125,7 @@ get red() {

const o = this.instance.toRgb();
this.instance = H({
this.instance = R({
...o,
g: V(t),
g: P(t),
a: this.alphaValue / 100
}), this.initHsb(), this.initLightness(), this.greenValue = V(t);
}), this.initHsb(), this.initLightness(), this.greenValue = P(t);
}

@@ -138,7 +138,7 @@ get green() {

const o = this.instance.toRgb();
this.instance = H({
this.instance = R({
...o,
b: V(t),
b: P(t),
a: this.alphaValue / 100
}), this.initHsb(), this.initLightness(), this.blueValue = V(t);
}), this.initHsb(), this.initLightness(), this.blueValue = P(t);
}

@@ -156,24 +156,29 @@ get blue() {

get RGB() {
return [this.red, this.green, this.blue, this.alpha / 100];
return [this.red, this.green, this.blue, parseFloat((this.alpha / 100).toFixed(2))];
}
get HSB() {
return [this.hue, this.saturation, this.brightness, this.alpha / 100];
return [this.hue, this.saturation, this.brightness, parseFloat((this.alpha / 100).toFixed(2))];
}
get HSL() {
return [this.hue, this.hslSaturationValue, this.lightness, this.alpha / 100];
return [
this.hue,
this.hslSaturationValue,
this.lightness,
parseFloat((this.alpha / 100).toFixed(2))
];
}
}
function He(e, t, o, n) {
function Ae(e, t, o, n) {
return `rgba(${[e, t, o, n / 100].join(",")})`;
}
const ie = (e, t, o) => t < o ? e < t ? t : e > o ? o : e : e < o ? o : e > t ? t : e, he = "color-history", pe = 8;
const X = (e, t) => {
const ue = (e, t, o) => t < o ? e < t ? t : e > o ? o : e : e < o ? o : e > t ? t : e, fe = "color-history", Ce = 8;
const q = (e, t) => {
const o = e.__vccOpts || e;
for (const [n, s] of t)
o[n] = s;
for (const [n, i] of t)
o[n] = i;
return o;
}, tt = O({
}, lt = G({
name: "Alpha",
props: {
color: v.instanceOf(B),
color: v.instanceOf(A),
size: v.oneOf(["small", "default"]).def("default")

@@ -183,18 +188,18 @@ },

setup(e, { emit: t }) {
const o = A(null), n = A(null);
let s = e.color || new B();
const r = q({
red: s.red,
green: s.green,
blue: s.blue,
alpha: s.alpha
const o = M(null), n = M(null);
let i = e.color || new A();
const l = Y({
red: i.red,
green: i.green,
blue: i.blue,
alpha: i.alpha
});
Q(
x(
() => e.color,
(i) => {
i && (s = i, le(r, {
red: i.red,
green: i.green,
blue: i.blue,
alpha: i.alpha
(g) => {
g && (i = g, ie(l, {
red: g.red,
green: g.green,
blue: g.blue,
alpha: g.alpha
}));

@@ -205,44 +210,44 @@ },

const a = K(() => {
const i = He(r.red, r.green, r.blue, 0), g = He(r.red, r.green, r.blue, 100);
const g = Ae(l.red, l.green, l.blue, 0), d = Ae(l.red, l.green, l.blue, 100);
return {
background: `linear-gradient(to right, ${i} , ${g})`
background: `linear-gradient(to right, ${g} , ${d})`
};
}), l = () => {
}), r = () => {
if (o.value && n.value) {
const i = r.alpha / 100, g = o.value.getBoundingClientRect(), f = n.value.offsetWidth;
return Math.round(i * (g.width - f) + f / 2);
const g = l.alpha / 100, d = o.value.getBoundingClientRect(), m = n.value.offsetWidth;
return Math.round(g * (d.width - m) + m / 2);
}
return 0;
}, c = K(() => ({
left: l() + "px",
left: r() + "px",
top: 0
})), S = (i) => {
i.target !== o.value && h(i);
}, h = (i) => {
if (i.stopPropagation(), o.value && n.value) {
const g = o.value.getBoundingClientRect(), f = n.value.offsetWidth;
let C = i.clientX - g.left;
C = Math.max(f / 2, C), C = Math.min(C, g.width - f / 2);
const p = Math.round((C - f / 2) / (g.width - f) * 100);
s.alpha = p, r.alpha = p, t("change", p);
})), k = (g) => {
g.target !== o.value && p(g);
}, p = (g) => {
if (g.stopPropagation(), o.value && n.value) {
const d = o.value.getBoundingClientRect(), m = n.value.offsetWidth;
let b = g.clientX - d.left;
b = Math.max(m / 2, b), b = Math.min(b, d.width - m / 2);
const h = Math.round((b - m / 2) / (d.width - m) * 100);
i.alpha = h, l.alpha = h, t("change", h);
}
};
return oe(() => {
const i = {
drag: (g) => {
h(g);
const g = {
drag: (d) => {
p(d);
},
end: (g) => {
h(g);
end: (d) => {
p(d);
}
};
o.value && n.value && x.triggerDragEvent(o.value, i);
}), { barElement: o, cursorElement: n, getCursorStyle: c, getBackgroundStyle: a, onClickSider: S };
o.value && n.value && ae.triggerDragEvent(o.value, g);
}), { barElement: o, cursorElement: n, getCursorStyle: c, getBackgroundStyle: a, onClickSider: k };
}
}), ot = (e) => (ee("data-v-18925ba6"), e = e(), te(), e), nt = /* @__PURE__ */ ot(() => /* @__PURE__ */ u("div", { class: "vc-alpha-slider__bar-handle" }, null, -1)), at = [
nt
}), st = (e) => (ee("data-v-18925ba6"), e = e(), te(), e), it = /* @__PURE__ */ st(() => /* @__PURE__ */ u("div", { class: "vc-alpha-slider__bar-handle" }, null, -1)), ct = [
it
];
function rt(e, t, o, n, s, r) {
return b(), $("div", {
class: W(["vc-alpha-slider", "transparent", { "small-slider": e.size === "small" }])
function ut(e, t, o, n, i, l) {
return C(), $("div", {
class: O(["vc-alpha-slider", "transparent", { "small-slider": e.size === "small" }])
}, [

@@ -252,15 +257,15 @@ u("div", {

class: "vc-alpha-slider__bar",
style: E(e.getBackgroundStyle),
style: D(e.getBackgroundStyle),
onClick: t[0] || (t[0] = (...a) => e.onClickSider && e.onClickSider(...a))
}, [
u("div", {
class: W(["vc-alpha-slider__bar-pointer", { "small-bar": e.size === "small" }]),
class: O(["vc-alpha-slider__bar-pointer", { "small-bar": e.size === "small" }]),
ref: "cursorElement",
style: E(e.getCursorStyle)
}, at, 6)
style: D(e.getCursorStyle)
}, ct, 6)
], 4)
], 2);
}
const fe = /* @__PURE__ */ X(tt, [["render", rt], ["__scopeId", "data-v-18925ba6"]]);
const lt = [
const ve = /* @__PURE__ */ q(lt, [["render", ut], ["__scopeId", "data-v-18925ba6"]]);
const dt = [
// 第一行

@@ -338,24 +343,24 @@ [

]
], st = O({
], gt = G({
name: "Palette",
emits: ["change"],
setup(e, { emit: t }) {
return { palettes: lt, computedBgStyle: (s) => s === "transparent" ? s : s === "advance" ? {} : { background: H(s).toRgbString() }, onColorChange: (s) => {
t("change", s);
return { palettes: dt, computedBgStyle: (i) => i === "transparent" ? i : i === "advance" ? {} : { background: R(i).toRgbString() }, onColorChange: (i) => {
t("change", i);
} };
}
}), it = { class: "vc-compact" }, ct = ["onClick"];
function ut(e, t, o, n, s, r) {
return b(), $("div", it, [
(b(!0), $(j, null, ne(e.palettes, (a, l) => (b(), $("div", {
key: l,
}), ht = { class: "vc-compact" }, pt = ["onClick"];
function ft(e, t, o, n, i, l) {
return C(), $("div", ht, [
(C(!0), $(Q, null, ne(e.palettes, (a, r) => (C(), $("div", {
key: r,
class: "vc-compact__row"
}, [
(b(!0), $(j, null, ne(a, (c, S) => (b(), $("div", {
key: S,
(C(!0), $(Q, null, ne(a, (c, k) => (C(), $("div", {
key: k,
class: "vc-compact__color-cube--wrap",
onClick: (h) => e.onColorChange(c)
onClick: (p) => e.onColorChange(c)
}, [
u("div", {
class: W([
class: O([
"vc-compact__color_cube",

@@ -367,13 +372,13 @@ {

]),
style: E(e.computedBgStyle(c))
style: D(e.computedBgStyle(c))
}, null, 6)
], 8, ct))), 128))
], 8, pt))), 128))
]))), 128))
]);
}
const Ve = /* @__PURE__ */ X(st, [["render", ut], ["__scopeId", "data-v-b969fd48"]]);
const dt = O({
const Ke = /* @__PURE__ */ q(gt, [["render", ft], ["__scopeId", "data-v-b969fd48"]]);
const Ct = G({
name: "Board",
props: {
color: v.instanceOf(B),
color: v.instanceOf(A),
round: v.bool.def(!1),

@@ -384,77 +389,78 @@ hide: v.bool.def(!0)

setup(e, { emit: t }) {
var C, p, m;
const o = Xe(), n = {
h: ((C = e.color) == null ? void 0 : C.hue) || 0,
var y, f, w;
const o = Ue(), n = {
h: ((y = e.color) == null ? void 0 : y.hue) || 0,
s: 1,
v: 1
}, s = new B(n).toHexString(), r = q({
hueColor: s,
saturation: ((p = e.color) == null ? void 0 : p.saturation) || 0,
brightness: ((m = e.color) == null ? void 0 : m.brightness) || 0
}), a = A(0), l = A(0), c = A(), S = A(), h = K(() => ({
}, i = new A(n).toHexString(), l = Y({
hueColor: i,
saturation: ((f = e.color) == null ? void 0 : f.saturation) || 0,
brightness: ((w = e.color) == null ? void 0 : w.brightness) || 0
}), a = M(0), r = M(0), c = M(), k = K(() => ({
top: a.value + "px",
left: l.value + "px"
})), i = () => {
left: r.value + "px"
})), p = () => {
if (o) {
const y = o.vnode.el;
l.value = r.saturation * (y == null ? void 0 : y.clientWidth), a.value = (1 - r.brightness) * (y == null ? void 0 : y.clientHeight);
const S = o.vnode.el;
r.value = l.saturation * (S == null ? void 0 : S.clientWidth), a.value = (1 - l.brightness) * (S == null ? void 0 : S.clientHeight);
}
}, g = (y) => {
y.target !== S.value && f(y);
}, f = (y) => {
};
let g = !1;
const d = (S) => {
g = !0, h(S);
}, m = (S) => {
g && h(S);
}, b = () => {
g = !1;
}, h = (S) => {
if (o) {
const z = o.vnode.el, T = z == null ? void 0 : z.getBoundingClientRect();
let F = y.clientX - T.left, Y = y.clientY - T.top;
F = ie(F, 0, T.width), Y = ie(Y, 0, T.height);
const G = F / T.width, J = ie(-(Y / T.height) + 1, 0, 1);
l.value = F, a.value = Y, r.saturation = G, r.brightness = J, t("change", G, J);
const F = o.vnode.el, E = F == null ? void 0 : F.getBoundingClientRect();
let L = S.clientX - E.left, U = S.clientY - E.top;
L = ue(L, 0, E.width), U = ue(U, 0, E.height);
const J = L / E.width, X = ue(-(U / E.height) + 1, 0, 1);
r.value = L, a.value = U, l.saturation = J, l.brightness = X, t("change", J, X);
}
};
return oe(() => {
o && o.vnode.el && c.value && (x.triggerDragEvent(c.value, {
drag: (y) => {
f(y);
},
end: (y) => {
f(y);
}
}), qe(() => {
i();
}));
}), N(
o && o.vnode.el && c.value && je(() => {
p();
});
}), T(
() => e.color,
(y) => {
le(r, {
hueColor: new B({ h: y.hue, s: 1, v: 1 }).toHexString(),
saturation: y.saturation,
brightness: y.brightness
}), i();
(S) => {
ie(l, {
hueColor: new A({ h: S.hue, s: 1, v: 1 }).toHexString(),
saturation: S.saturation,
brightness: S.brightness
}), p();
},
{ deep: !0 }
), { state: r, cursorElement: c, getCursorStyle: h, onClickBoard: g };
), { state: l, cursorElement: c, getCursorStyle: k, onClickBoard: d, onDrag: m, onDragEnd: b };
}
}), Ce = (e) => (ee("data-v-058e5db2"), e = e(), te(), e), gt = /* @__PURE__ */ Ce(() => /* @__PURE__ */ u("div", { class: "vc-saturation__white" }, null, -1)), ht = /* @__PURE__ */ Ce(() => /* @__PURE__ */ u("div", { class: "vc-saturation__black" }, null, -1)), pt = /* @__PURE__ */ Ce(() => /* @__PURE__ */ u("div", null, null, -1)), ft = [
pt
}), be = (e) => (ee("data-v-7f0cdcdf"), e = e(), te(), e), vt = /* @__PURE__ */ be(() => /* @__PURE__ */ u("div", { class: "vc-saturation__white" }, null, -1)), bt = /* @__PURE__ */ be(() => /* @__PURE__ */ u("div", { class: "vc-saturation__black" }, null, -1)), yt = /* @__PURE__ */ be(() => /* @__PURE__ */ u("div", null, null, -1)), _t = [
yt
];
function Ct(e, t, o, n, s, r) {
return b(), $("div", {
function mt(e, t, o, n, i, l) {
return C(), $("div", {
ref: "boardElement",
class: W(["vc-saturation", { "vc-saturation__chrome": e.round, "vc-saturation__hidden": e.hide }]),
style: E({ backgroundColor: e.state.hueColor }),
onClick: t[0] || (t[0] = (...a) => e.onClickBoard && e.onClickBoard(...a))
class: O(["vc-saturation", { "vc-saturation__chrome": e.round, "vc-saturation__hidden": e.hide }]),
style: D({ backgroundColor: e.state.hueColor }),
onMousedown: t[0] || (t[0] = (...a) => e.onClickBoard && e.onClickBoard(...a)),
onMousemove: t[1] || (t[1] = (...a) => e.onDrag && e.onDrag(...a)),
onMouseup: t[2] || (t[2] = (...a) => e.onDragEnd && e.onDragEnd(...a))
}, [
gt,
ht,
vt,
bt,
u("div", {
class: "vc-saturation__cursor",
ref: "cursorElement",
style: E(e.getCursorStyle)
}, ft, 4)
], 6);
style: D(e.getCursorStyle)
}, _t, 4)
], 38);
}
const ve = /* @__PURE__ */ X(dt, [["render", Ct], ["__scopeId", "data-v-058e5db2"]]);
const vt = O({
const ye = /* @__PURE__ */ q(Ct, [["render", mt], ["__scopeId", "data-v-7f0cdcdf"]]);
const St = G({
name: "Hue",
props: {
color: v.instanceOf(B),
color: v.instanceOf(A),
size: v.oneOf(["small", "default"]).def("default")

@@ -464,11 +470,11 @@ },

setup(e, { emit: t }) {
const o = A(null), n = A(null);
let s = e.color || new B();
const r = q({
hue: s.hue || 0
const o = M(null), n = M(null);
let i = e.color || new A();
const l = Y({
hue: i.hue || 0
});
Q(
x(
() => e.color,
(h) => {
h && (s = h, le(r, { hue: s.hue }));
(p) => {
p && (i = p, ie(l, { hue: i.hue }));
},

@@ -479,38 +485,38 @@ { deep: !0 }

if (o.value && n.value) {
const h = o.value.getBoundingClientRect(), i = n.value.offsetWidth;
return r.hue === 360 ? h.width - i / 2 : r.hue % 360 * (h.width - i) / 360 + i / 2;
const p = o.value.getBoundingClientRect(), g = n.value.offsetWidth;
return l.hue === 360 ? p.width - g / 2 : l.hue % 360 * (p.width - g) / 360 + g / 2;
}
return 0;
}, l = K(() => ({
}, r = K(() => ({
left: a() + "px",
top: 0
})), c = (h) => {
h.target !== o.value && S(h);
}, S = (h) => {
if (h.stopPropagation(), o.value && n.value) {
const i = o.value.getBoundingClientRect(), g = n.value.offsetWidth;
let f = h.clientX - i.left;
f = Math.min(f, i.width - g / 2), f = Math.max(g / 2, f);
const C = Math.round((f - g / 2) / (i.width - g) * 360);
s.hue = C, r.hue = C, t("change", C);
})), c = (p) => {
p.target !== o.value && k(p);
}, k = (p) => {
if (p.stopPropagation(), o.value && n.value) {
const g = o.value.getBoundingClientRect(), d = n.value.offsetWidth;
let m = p.clientX - g.left;
m = Math.min(m, g.width - d / 2), m = Math.max(d / 2, m);
const b = Math.round((m - d / 2) / (g.width - d) * 360);
i.hue = b, l.hue = b, t("change", b);
}
};
return oe(() => {
const h = {
drag: (i) => {
S(i);
const p = {
drag: (g) => {
k(g);
},
end: (i) => {
S(i);
end: (g) => {
k(g);
}
};
o.value && n.value && x.triggerDragEvent(o.value, h);
}), { barElement: o, cursorElement: n, getCursorStyle: l, onClickSider: c };
o.value && n.value && ae.triggerDragEvent(o.value, p);
}), { barElement: o, cursorElement: n, getCursorStyle: r, onClickSider: c };
}
}), bt = (e) => (ee("data-v-e1a08576"), e = e(), te(), e), yt = /* @__PURE__ */ bt(() => /* @__PURE__ */ u("div", { class: "vc-hue-slider__bar-handle" }, null, -1)), _t = [
yt
}), kt = (e) => (ee("data-v-e1a08576"), e = e(), te(), e), $t = /* @__PURE__ */ kt(() => /* @__PURE__ */ u("div", { class: "vc-hue-slider__bar-handle" }, null, -1)), wt = [
$t
];
function mt(e, t, o, n, s, r) {
return b(), $("div", {
class: W(["vc-hue-slider", { "small-slider": e.size === "small" }])
function Bt(e, t, o, n, i, l) {
return C(), $("div", {
class: O(["vc-hue-slider", { "small-slider": e.size === "small" }])
}, [

@@ -523,14 +529,14 @@ u("div", {

u("div", {
class: W(["vc-hue-slider__bar-pointer", { "small-bar": e.size === "small" }]),
class: O(["vc-hue-slider__bar-pointer", { "small-bar": e.size === "small" }]),
ref: "cursorElement",
style: E(e.getCursorStyle)
}, _t, 6)
style: D(e.getCursorStyle)
}, wt, 6)
], 512)
], 2);
}
const be = /* @__PURE__ */ X(vt, [["render", mt], ["__scopeId", "data-v-e1a08576"]]);
const St = O({
const _e = /* @__PURE__ */ q(St, [["render", Bt], ["__scopeId", "data-v-e1a08576"]]);
const Ht = G({
name: "Lightness",
props: {
color: v.instanceOf(B),
color: v.instanceOf(A),
size: v.oneOf(["small", "default"]).def("default")

@@ -540,19 +546,19 @@ },

setup(e, { emit: t }) {
const o = A(null), n = A(null);
let s = e.color || new B();
const [r, a, l] = s.HSL, c = q({
hue: r,
const o = M(null), n = M(null);
let i = e.color || new A();
const [l, a, r] = i.HSL, c = Y({
hue: l,
saturation: a,
lightness: l
lightness: r
});
Q(
x(
() => e.color,
(C) => {
if (C) {
s = C;
const [p, m, y] = s.HSL;
le(c, {
hue: p,
saturation: m,
lightness: y
(b) => {
if (b) {
i = b;
const [h, y, f] = i.HSL;
ie(c, {
hue: h,
saturation: y,
lightness: f
});

@@ -563,16 +569,16 @@ }

);
const S = K(() => {
const C = H({
const k = K(() => {
const b = R({
h: c.hue,
s: c.saturation,
l: 0.8
}).toPercentageRgbString(), p = H({
}).toPercentageRgbString(), h = R({
h: c.hue,
s: c.saturation,
l: 0.6
}).toPercentageRgbString(), m = H({
}).toPercentageRgbString(), y = R({
h: c.hue,
s: c.saturation,
l: 0.4
}).toPercentageRgbString(), y = H({
}).toPercentageRgbString(), f = R({
h: c.hue,

@@ -584,46 +590,46 @@ s: c.saturation,

background: [
`linear-gradient(to right, rgb(255, 255, 255), ${C}, ${p}, ${m}, ${y}, rgb(0, 0, 0))`,
`-webkit-linear-gradient(left, rgb(255, 255, 255), ${C}, ${p}, ${m}, ${y}, rgb(0, 0, 0))`,
`-moz-linear-gradient(left, rgb(255, 255, 255), ${C}, ${p}, ${m}, ${y}, rgb(0, 0, 0))`,
`-ms-linear-gradient(left, rgb(255, 255, 255), ${C}, ${p}, ${m}, ${y}, rgb(0, 0, 0))`
`linear-gradient(to right, rgb(255, 255, 255), ${b}, ${h}, ${y}, ${f}, rgb(0, 0, 0))`,
`-webkit-linear-gradient(left, rgb(255, 255, 255), ${b}, ${h}, ${y}, ${f}, rgb(0, 0, 0))`,
`-moz-linear-gradient(left, rgb(255, 255, 255), ${b}, ${h}, ${y}, ${f}, rgb(0, 0, 0))`,
`-ms-linear-gradient(left, rgb(255, 255, 255), ${b}, ${h}, ${y}, ${f}, rgb(0, 0, 0))`
]
};
}), h = () => {
}), p = () => {
if (o.value && n.value) {
const C = c.lightness, p = o.value.getBoundingClientRect(), m = n.value.offsetWidth;
return (1 - C) * (p.width - m) + m / 2;
const b = c.lightness, h = o.value.getBoundingClientRect(), y = n.value.offsetWidth;
return (1 - b) * (h.width - y) + y / 2;
}
return 0;
}, i = K(() => ({
left: h() + "px",
}, g = K(() => ({
left: p() + "px",
top: 0
})), g = (C) => {
C.target !== o.value && f(C);
}, f = (C) => {
if (C.stopPropagation(), o.value && n.value) {
const p = o.value.getBoundingClientRect(), m = n.value.offsetWidth;
let y = C.clientX - p.left;
y = Math.max(m / 2, y), y = Math.min(y, p.width - m / 2);
const z = 1 - (y - m / 2) / (p.width - m);
s.lightness = z, t("change", z);
})), d = (b) => {
b.target !== o.value && m(b);
}, m = (b) => {
if (b.stopPropagation(), o.value && n.value) {
const h = o.value.getBoundingClientRect(), y = n.value.offsetWidth;
let f = b.clientX - h.left;
f = Math.max(y / 2, f), f = Math.min(f, h.width - y / 2);
const w = 1 - (f - y / 2) / (h.width - y);
i.lightness = w, t("change", w);
}
};
return oe(() => {
const C = {
drag: (p) => {
f(p);
const b = {
drag: (h) => {
m(h);
},
end: (p) => {
f(p);
end: (h) => {
m(h);
}
};
o.value && n.value && x.triggerDragEvent(o.value, C);
}), { barElement: o, cursorElement: n, getCursorStyle: i, getBackgroundStyle: S, onClickSider: g };
o.value && n.value && ae.triggerDragEvent(o.value, b);
}), { barElement: o, cursorElement: n, getCursorStyle: g, getBackgroundStyle: k, onClickSider: d };
}
}), kt = (e) => (ee("data-v-94a50a9e"), e = e(), te(), e), $t = /* @__PURE__ */ kt(() => /* @__PURE__ */ u("div", { class: "vc-lightness-slider__bar-handle" }, null, -1)), wt = [
$t
}), Rt = (e) => (ee("data-v-94a50a9e"), e = e(), te(), e), At = /* @__PURE__ */ Rt(() => /* @__PURE__ */ u("div", { class: "vc-lightness-slider__bar-handle" }, null, -1)), Pt = [
At
];
function Ht(e, t, o, n, s, r) {
return b(), $("div", {
class: W(["vc-lightness-slider", { "small-slider": e.size === "small" }])
function Vt(e, t, o, n, i, l) {
return C(), $("div", {
class: O(["vc-lightness-slider", { "small-slider": e.size === "small" }])
}, [

@@ -633,15 +639,15 @@ u("div", {

class: "vc-lightness-slider__bar",
style: E(e.getBackgroundStyle),
style: D(e.getBackgroundStyle),
onClick: t[0] || (t[0] = (...a) => e.onClickSider && e.onClickSider(...a))
}, [
u("div", {
class: W(["vc-lightness-slider__bar-pointer", { "small-bar": e.size === "small" }]),
class: O(["vc-lightness-slider__bar-pointer", { "small-bar": e.size === "small" }]),
ref: "cursorElement",
style: E(e.getCursorStyle)
}, wt, 6)
style: D(e.getCursorStyle)
}, Pt, 6)
], 4)
], 2);
}
const Me = /* @__PURE__ */ X(St, [["render", Ht], ["__scopeId", "data-v-94a50a9e"]]);
const Rt = O({
const Le = /* @__PURE__ */ q(Ht, [["render", Vt], ["__scopeId", "data-v-94a50a9e"]]);
const Mt = G({
name: "History",

@@ -658,12 +664,12 @@ props: {

}
}), Bt = {
}), Et = {
key: 0,
class: "vc-colorPicker__record"
}, At = { class: "color-list" }, Pt = ["onClick"];
function Vt(e, t, o, n, s, r) {
return e.colors && e.colors.length > 0 ? (b(), $("div", Bt, [
u("div", At, [
(b(!0), $(j, null, ne(e.colors, (a, l) => (b(), $("div", {
key: l,
class: W(["color-item", "transparent", { "color-item__round": e.round }]),
}, It = { class: "color-list" }, Kt = ["onClick"];
function Lt(e, t, o, n, i, l) {
return e.colors && e.colors.length > 0 ? (C(), $("div", Et, [
u("div", It, [
(C(!0), $(Q, null, ne(e.colors, (a, r) => (C(), $("div", {
key: r,
class: O(["color-item", "transparent", { "color-item__round": e.round }]),
onClick: (c) => e.onColorSelect(a)

@@ -673,13 +679,13 @@ }, [

class: "color-item__display",
style: E({ backgroundColor: a })
style: D({ backgroundColor: a })
}, null, 4)
], 10, Pt))), 128))
], 10, Kt))), 128))
])
])) : R("", !0);
])) : B("", !0);
}
const ye = /* @__PURE__ */ X(Rt, [["render", Vt], ["__scopeId", "data-v-0f657238"]]);
const Mt = O({
const me = /* @__PURE__ */ q(Mt, [["render", Lt], ["__scopeId", "data-v-0f657238"]]);
const Nt = G({
name: "Display",
props: {
color: v.instanceOf(B),
color: v.instanceOf(A),
disableAlpha: v.bool.def(!1)

@@ -689,100 +695,140 @@ },

setup(e, { emit: t }) {
var c, S, h, i;
const o = A("hex"), n = q({
var m, b, h, y;
const { copy: o, copied: n, isSupported: i } = tt(), l = M("hex"), a = Y({
color: e.color,
hex: (c = e.color) == null ? void 0 : c.hex,
alpha: Math.floor(((S = e.color) == null ? void 0 : S.alpha) || 100) + "%",
hex: (m = e.color) == null ? void 0 : m.hex,
alpha: Math.round(((b = e.color) == null ? void 0 : b.alpha) || 100),
rgba: (h = e.color) == null ? void 0 : h.RGB,
previewBgColor: (i = e.color) == null ? void 0 : i.toRgbString()
}), s = K(() => ({
background: n.previewBgColor
})), r = () => {
o.value = o.value === "rgba" ? "hex" : "rgba";
}, a = Z((g) => {
if (!g.target.value)
previewBgColor: (y = e.color) == null ? void 0 : y.toRgbString()
}), r = K(() => ({
background: a.previewBgColor
})), c = () => {
l.value = l.value === "rgba" ? "hex" : "rgba";
}, k = j((f) => {
if (!f.target.value)
return;
let f = parseInt(g.target.value.replace("%", ""));
f > 100 && (g.target.value = "100%", f = 100), f < 0 && (g.target.value = "0%", f = 0), isNaN(f) && (g.target.value = "100%", f = 100), !isNaN(f) && n.color && (n.color.alpha = f), t("update:color", n.color), t("change", n.color);
}, 300), l = Z((g, f) => {
if (g.target.value) {
if (o.value === "hex") {
const C = g.target.value.replace("#", "");
H(C).isValid() && n.color && (n.color.hex = C);
} else if (f !== void 0 && n.rgba && n.color) {
g.target.value < 0 && (g.target.value = 0), f === 3 && g.target.value > 1 && (g.target.value = 1), f < 3 && g.target.value > 255 && (g.target.value = 255), n.rgba[f] = Number(g.target.value);
const [C, p, m, y] = n.rgba;
n.color.hex = H({ r: C, g: p, b: m }).toHex(), n.color.alpha = Math.floor(y * 100);
let w = parseInt(f.target.value.replace("%", ""));
w > 100 && (f.target.value = "100", w = 100), w < 0 && (f.target.value = "0", w = 0), isNaN(w) && (f.target.value = "100", w = 100), !isNaN(w) && a.color && (a.color.alpha = w), t("change", a.color);
}, 300), p = j((f, w) => {
if (a.color) {
if (l.value === "hex") {
const S = f.target.value.replace("#", "");
R(S).isValid() ? [3, 4].includes(S.length) && (a.color.hex = S) : a.color.hex = "000000", t("change", a.color);
} else if (l.value === "rgba" && w === 3 && f.target.value.toString() === "0." && a.rgba) {
a.rgba[w] = f.target.value;
const [S, F, E, L] = a.rgba;
a.color.hex = R({ r: S, g: F, b: E }).toHex(), a.color.alpha = Math.round(L * 100), t("change", a.color);
}
t("update:color", n.color), t("change", n.color);
}
}, 300);
return N(
}, 100), g = j((f, w) => {
if (f.target.value) {
if (l.value === "hex") {
const S = f.target.value.replace("#", "");
R(S).isValid() && a.color && [6, 8].includes(S.length) && (a.color.hex = S);
} else if (w !== void 0 && a.rgba && a.color) {
if (f.target.value < 0 && (f.target.value = 0), w === 3 && ((f.target.value > 1 || isNaN(f.target.value)) && (f.target.value = 1), f.target.value.toString() === "0."))
return;
w < 3 && f.target.value > 255 && (f.target.value = 255), a.rgba[w] = f.target.value;
const [S, F, E, L] = a.rgba;
a.color.hex = R({ r: S, g: F, b: E }).toHex(), a.color.alpha = Math.round(L * 100);
}
t("change", a.color);
}
}, 300), d = () => {
if (i && a.color) {
const f = l.value === "hex" ? a.color.toString(a.color.alpha === 100 ? "hex6" : "hex8") : a.color.toRgbString();
o(f || "");
}
};
return T(
() => e.color,
(g) => {
g && (n.color = g, n.alpha = Math.floor(n.color.alpha) + "%", n.hex = n.color.hex, n.rgba = n.color.RGB);
(f) => {
f && (a.color = f, a.alpha = Math.round(a.color.alpha), a.hex = a.color.hex, a.rgba = a.color.RGB);
},
{ deep: !0 }
), N(
() => n.color,
), T(
() => a.color,
() => {
n.color && (n.previewBgColor = n.color.toRgbString());
a.color && (a.previewBgColor = a.color.toRgbString());
},
{ deep: !0 }
), { state: n, getBgColorStyle: s, inputType: o, onInputTypeChange: r, onAlphaBlur: a, onInputChange: l };
), {
state: a,
getBgColorStyle: r,
inputType: l,
copied: n,
onInputTypeChange: c,
onAlphaBlur: k,
onInputChange: g,
onBlurChange: p,
onCopyColorStr: d
};
}
}), It = { class: "vc-display" }, Kt = { class: "vc-current-color vc-transparent" }, Lt = {
}), Wt = { class: "vc-display" }, Dt = { class: "vc-current-color vc-transparent" }, Tt = {
key: 0,
class: "copy-text"
}, Ot = {
key: 0,
style: { display: "flex", flex: "1", gap: "4px", height: "100%" }
}, Et = { class: "vc-color-input" }, Nt = ["value"], Wt = {
}, zt = { class: "vc-color-input" }, Gt = {
key: 0,
class: "vc-alpha-input"
}, Tt = ["value"], Dt = {
}, Ft = ["value"], Xt = {
key: 1,
style: { display: "flex", flex: "1", gap: "4px", height: "100%" }
}, Ot = ["value", "onInput"];
function zt(e, t, o, n, s, r) {
return b(), $("div", It, [
u("div", Kt, [
}, qt = ["value", "onInput", "onBlur"];
function Yt(e, t, o, n, i, l) {
return C(), $("div", Wt, [
u("div", Dt, [
u("div", {
class: "color-cube",
style: E(e.getBgColorStyle)
}, null, 4)
style: D(e.getBgColorStyle),
onClick: t[0] || (t[0] = (...a) => e.onCopyColorStr && e.onCopyColorStr(...a))
}, [
e.copied ? (C(), $("span", Tt, "Copied!")) : B("", !0)
], 4)
]),
e.inputType === "hex" ? (b(), $("div", Lt, [
u("div", Et, [
u("input", {
value: e.state.hex,
onInput: t[0] || (t[0] = (...a) => e.onInputChange && e.onInputChange(...a))
}, null, 40, Nt)
e.inputType === "hex" ? (C(), $("div", Ot, [
u("div", zt, [
le(u("input", {
"onUpdate:modelValue": t[1] || (t[1] = (a) => e.state.hex = a),
maxlength: "8",
onInput: t[2] || (t[2] = (...a) => e.onInputChange && e.onInputChange(...a)),
onBlur: t[3] || (t[3] = (...a) => e.onBlurChange && e.onBlurChange(...a))
}, null, 544), [
[Ze, e.state.hex]
])
]),
e.disableAlpha ? R("", !0) : (b(), $("div", Wt, [
e.disableAlpha ? B("", !0) : (C(), $("div", Gt, [
u("input", {
class: "vc-alpha-input__inner",
value: e.state.alpha,
onInput: t[1] || (t[1] = (...a) => e.onAlphaBlur && e.onAlphaBlur(...a))
}, null, 40, Tt)
onInput: t[4] || (t[4] = (...a) => e.onAlphaBlur && e.onAlphaBlur(...a))
}, null, 40, Ft),
Ee("% ")
]))
])) : e.state.rgba ? (b(), $("div", Dt, [
(b(!0), $(j, null, ne(e.state.rgba, (a, l) => (b(), $("div", {
])) : e.state.rgba ? (C(), $("div", Xt, [
(C(!0), $(Q, null, ne(e.state.rgba, (a, r) => (C(), $("div", {
class: "vc-color-input",
key: l
key: r
}, [
u("input", {
value: a,
onInput: (c) => e.onInputChange(c, l)
}, null, 40, Ot)
onInput: (c) => e.onInputChange(c, r),
onBlur: (c) => e.onBlurChange(c, r)
}, null, 40, qt)
]))), 128))
])) : R("", !0),
])) : B("", !0),
u("div", {
class: "vc-input-toggle",
onClick: t[2] || (t[2] = (...a) => e.onInputTypeChange && e.onInputTypeChange(...a))
}, re(e.inputType), 1)
onClick: t[5] || (t[5] = (...a) => e.onInputTypeChange && e.onInputTypeChange(...a))
}, se(e.inputType), 1)
]);
}
const _e = /* @__PURE__ */ X(Mt, [["render", zt], ["__scopeId", "data-v-80d589ba"]]);
const Gt = O({
const Se = /* @__PURE__ */ q(Nt, [["render", Yt], ["__scopeId", "data-v-7334ac20"]]);
const Ut = G({
name: "FkColorPicker",
components: { Display: _e, Alpha: fe, Palette: Ve, Board: ve, Hue: be, Lightness: Me, History: ye },
components: { Display: Se, Alpha: ve, Palette: Ke, Board: ye, Hue: _e, Lightness: Le, History: me },
props: {
color: v.instanceOf(B),
color: v.instanceOf(A),
disableHistory: v.bool.def(!1),

@@ -794,38 +840,38 @@ roundHistory: v.bool.def(!1),

setup(e, { emit: t }) {
const o = e.color || new B(), n = q({
const o = e.color || new A(), n = Y({
color: o,
hex: o.toHexString(),
rgb: o.toRgbString()
}), s = A(!1), r = K(() => ({ background: n.rgb })), a = () => {
s.value = !1, t("advanceChange", !1);
}, l = ge(he, [], {}), c = Z(() => {
}), i = M(!1), l = K(() => ({ background: n.rgb })), a = () => {
i.value = !1, t("advanceChange", !1);
}, r = pe(fe, [], {}), c = j(() => {
if (e.disableHistory)
return;
const p = n.color.toRgbString();
if (l.value = l.value.filter((m) => !H.equals(m, p)), !l.value.includes(p)) {
for (; l.value.length > pe; )
l.value.pop();
l.value.unshift(p);
const h = n.color.toRgbString();
if (r.value = r.value.filter((y) => !R.equals(y, h)), !r.value.includes(h)) {
for (; r.value.length > Ce; )
r.value.pop();
r.value.unshift(h);
}
}, 500), S = (p) => {
p === "advance" ? (s.value = !0, t("advanceChange", !0)) : (n.color.hex = p, t("advanceChange", !1));
}, h = (p) => {
n.color.alpha = p;
}, i = (p) => {
n.color.hue = p;
}, g = (p, m) => {
n.color.saturation = p, n.color.brightness = m;
}, f = (p) => {
n.color.lightness = p;
}, C = (p) => {
const y = p.target.value.replace("#", "");
H(y).isValid() && (n.color.hex = y);
}, 500), k = (h) => {
h === "advance" ? (i.value = !0, t("advanceChange", !0)) : (n.color.hex = h, t("advanceChange", !1));
}, p = (h) => {
n.color.alpha = h;
}, g = (h) => {
n.color.hue = h;
}, d = (h, y) => {
n.color.saturation = h, n.color.brightness = y;
}, m = (h) => {
n.color.lightness = h;
}, b = (h) => {
const f = h.target.value.replace("#", "");
R(f).isValid() && (n.color.hex = f);
};
return N(
return T(
() => e.color,
(p) => {
p && (n.color = p);
(h) => {
h && (n.color = h);
},
{ deep: !0 }
), N(
), T(
() => n.color,

@@ -838,43 +884,43 @@ () => {

state: n,
advancePanelShow: s,
advancePanelShow: i,
onBack: a,
onCompactChange: S,
onAlphaChange: h,
onHueChange: i,
onBoardChange: g,
onLightChange: f,
onInputChange: C,
previewStyle: r,
historyColors: l
onCompactChange: k,
onAlphaChange: p,
onHueChange: g,
onBoardChange: d,
onLightChange: m,
onInputChange: b,
previewStyle: l,
historyColors: r
};
}
}), Xt = (e) => (ee("data-v-0d5bef46"), e = e(), te(), e), qt = { class: "vc-fk-colorPicker" }, Ft = { class: "vc-fk-colorPicker__inner" }, Yt = { class: "vc-fk-colorPicker__header" }, Ut = /* @__PURE__ */ Xt(() => /* @__PURE__ */ u("div", { class: "back" }, null, -1)), jt = [
Ut
}), jt = (e) => (ee("data-v-48e3c224"), e = e(), te(), e), Zt = { class: "vc-fk-colorPicker" }, Jt = { class: "vc-fk-colorPicker__inner" }, Qt = { class: "vc-fk-colorPicker__header" }, xt = /* @__PURE__ */ jt(() => /* @__PURE__ */ u("div", { class: "back" }, null, -1)), eo = [
xt
];
function Zt(e, t, o, n, s, r) {
const a = M("Palette"), l = M("Board"), c = M("Hue"), S = M("Lightness"), h = M("Alpha"), i = M("Display"), g = M("History");
return b(), $("div", qt, [
u("div", Ft, [
u("div", Yt, [
e.advancePanelShow ? (b(), $("span", {
function to(e, t, o, n, i, l) {
const a = V("Palette"), r = V("Board"), c = V("Hue"), k = V("Lightness"), p = V("Alpha"), g = V("Display"), d = V("History");
return C(), $("div", Zt, [
u("div", Jt, [
u("div", Qt, [
e.advancePanelShow ? (C(), $("span", {
key: 0,
style: { cursor: "pointer" },
onClick: t[0] || (t[0] = (...f) => e.onBack && e.onBack(...f))
}, jt)) : R("", !0)
onClick: t[0] || (t[0] = (...m) => e.onBack && e.onBack(...m))
}, eo)) : B("", !0)
]),
e.advancePanelShow ? R("", !0) : (b(), I(a, {
e.advancePanelShow ? B("", !0) : (C(), I(a, {
key: 0,
onChange: e.onCompactChange
}, null, 8, ["onChange"])),
e.advancePanelShow ? (b(), I(l, {
e.advancePanelShow ? (C(), I(r, {
key: 1,
color: e.state.color,
onChange: e.onBoardChange
}, null, 8, ["color", "onChange"])) : R("", !0),
e.advancePanelShow ? (b(), I(c, {
}, null, 8, ["color", "onChange"])) : B("", !0),
e.advancePanelShow ? (C(), I(c, {
key: 2,
color: e.state.color,
onChange: e.onHueChange
}, null, 8, ["color", "onChange"])) : R("", !0),
e.advancePanelShow ? R("", !0) : (b(), I(S, {
}, null, 8, ["color", "onChange"])) : B("", !0),
e.advancePanelShow ? B("", !0) : (C(), I(k, {
key: 3,

@@ -884,3 +930,3 @@ color: e.state.color,

}, null, 8, ["color", "onChange"])),
e.disableAlpha ? R("", !0) : (b(), I(h, {
e.disableAlpha ? B("", !0) : (C(), I(p, {
key: 4,

@@ -890,7 +936,7 @@ color: e.state.color,

}, null, 8, ["color", "onChange"])),
U(i, {
Z(g, {
color: e.state.color,
"disable-alpha": e.disableAlpha
}, null, 8, ["color", "disable-alpha"]),
e.disableHistory ? R("", !0) : (b(), I(g, {
e.disableHistory ? B("", !0) : (C(), I(d, {
key: 5,

@@ -904,8 +950,8 @@ round: e.roundHistory,

}
const Re = /* @__PURE__ */ X(Gt, [["render", Zt], ["__scopeId", "data-v-0d5bef46"]]);
const Jt = O({
const Pe = /* @__PURE__ */ q(Ut, [["render", to], ["__scopeId", "data-v-48e3c224"]]);
const oo = G({
name: "ChromeColorPicker",
components: { Display: _e, Alpha: fe, Board: ve, Hue: be, History: ye },
components: { Display: Se, Alpha: ve, Board: ye, Hue: _e, History: me },
props: {
color: v.instanceOf(B),
color: v.instanceOf(A),
disableHistory: v.bool.def(!1),

@@ -917,31 +963,33 @@ roundHistory: v.bool.def(!1),

setup(e, { emit: t }) {
const o = e.color || new B(), n = q({
const o = e.color || new A(), n = Y({
color: o,
hex: o.toHexString(),
rgb: o.toRgbString()
}), s = K(() => ({ background: n.rgb })), r = ge(he, [], {}), a = Z(() => {
}), i = K(() => ({ background: n.rgb })), l = pe(fe, [], {}), a = j(() => {
if (e.disableHistory)
return;
const i = n.color.toRgbString();
if (r.value = r.value.filter((g) => !H.equals(g, i)), !r.value.includes(i)) {
for (; r.value.length > pe; )
r.value.pop();
r.value.unshift(i);
const d = n.color.toRgbString();
if (l.value = l.value.filter((m) => !R.equals(m, d)), !l.value.includes(d)) {
for (; l.value.length > Ce; )
l.value.pop();
l.value.unshift(d);
}
}, 500), l = (i) => {
n.color.alpha = i;
}, c = (i) => {
n.color.hue = i;
}, S = (i, g) => {
n.color.saturation = i, n.color.brightness = g;
}, h = (i) => {
i !== "advance" && (n.color.hex = i);
}, 500), r = (d) => {
n.color.alpha = d;
}, c = (d) => {
n.color.hue = d;
}, k = (d) => {
d.hex !== void 0 && (n.color.hex = d.hex), d.alpha !== void 0 && (n.color.alpha = d.alpha);
}, p = (d, m) => {
n.color.saturation = d, n.color.brightness = m;
}, g = (d) => {
d !== "advance" && (n.color.hex = d);
};
return N(
return T(
() => e.color,
(i) => {
i && (n.color = i);
(d) => {
d && (n.color = d);
},
{ deep: !0 }
), N(
), T(
() => n.color,

@@ -954,15 +1002,16 @@ () => {

state: n,
previewStyle: s,
historyColors: r,
onAlphaChange: l,
previewStyle: i,
historyColors: l,
onAlphaChange: r,
onHueChange: c,
onBoardChange: S,
onCompactChange: h
onBoardChange: p,
onInputChange: k,
onCompactChange: g
};
}
}), Qt = { class: "vc-chrome-colorPicker" }, xt = { class: "vc-chrome-colorPicker-body" }, eo = { class: "chrome-controls" }, to = { class: "chrome-sliders" };
function oo(e, t, o, n, s, r) {
const a = M("Board"), l = M("Hue"), c = M("Alpha"), S = M("Display"), h = M("History");
return b(), $("div", Qt, [
U(a, {
}), no = { class: "vc-chrome-colorPicker" }, ao = { class: "vc-chrome-colorPicker-body" }, ro = { class: "chrome-controls" }, lo = { class: "chrome-sliders" };
function so(e, t, o, n, i, l) {
const a = V("Board"), r = V("Hue"), c = V("Alpha"), k = V("Display"), p = V("History");
return C(), $("div", no, [
Z(a, {
round: !0,

@@ -973,6 +1022,6 @@ hide: !1,

}, null, 8, ["color", "onChange"]),
u("div", xt, [
u("div", eo, [
u("div", to, [
U(l, {
u("div", ao, [
u("div", ro, [
u("div", lo, [
Z(r, {
size: "small",

@@ -982,3 +1031,3 @@ color: e.state.color,

}, null, 8, ["color", "onChange"]),
e.disableAlpha ? R("", !0) : (b(), I(c, {
e.disableAlpha ? B("", !0) : (C(), I(c, {
key: 0,

@@ -991,7 +1040,7 @@ size: "small",

]),
U(S, {
Z(k, {
color: e.state.color,
"disable-alpha": e.disableAlpha
}, null, 8, ["color", "disable-alpha"]),
e.disableHistory ? R("", !0) : (b(), I(h, {
e.disableHistory ? B("", !0) : (C(), I(p, {
key: 0,

@@ -1005,22 +1054,22 @@ round: e.roundHistory,

}
const Be = /* @__PURE__ */ X(Jt, [["render", oo], ["__scopeId", "data-v-33636434"]]), me = "Vue3ColorPickerProvider", no = (e, t) => {
const o = e.getBoundingClientRect(), n = o.left + o.width / 2, s = o.top + o.height / 2, r = Math.abs(n - t.clientX), a = Math.abs(s - t.clientY), l = Math.sqrt(Math.pow(r, 2) + Math.pow(a, 2)), c = a / l, S = Math.acos(c);
let h = Math.floor(180 / (Math.PI / S));
return t.clientX > n && t.clientY > s && (h = 180 - h), t.clientX == n && t.clientY > s && (h = 180), t.clientX > n && t.clientY == s && (h = 90), t.clientX < n && t.clientY > s && (h = 180 + h), t.clientX < n && t.clientY == s && (h = 270), t.clientX < n && t.clientY < s && (h = 360 - h), h;
const Ve = /* @__PURE__ */ q(oo, [["render", so], ["__scopeId", "data-v-2611d66c"]]), ke = "Vue3ColorPickerProvider", io = (e, t) => {
const o = e.getBoundingClientRect(), n = o.left + o.width / 2, i = o.top + o.height / 2, l = Math.abs(n - t.clientX), a = Math.abs(i - t.clientY), r = Math.sqrt(Math.pow(l, 2) + Math.pow(a, 2)), c = a / r, k = Math.acos(c);
let p = Math.floor(180 / (Math.PI / k));
return t.clientX > n && t.clientY > i && (p = 180 - p), t.clientX == n && t.clientY > i && (p = 180), t.clientX > n && t.clientY == i && (p = 90), t.clientX < n && t.clientY > i && (p = 180 + p), t.clientX < n && t.clientY == i && (p = 270), t.clientX < n && t.clientY < i && (p = 360 - p), p;
};
let ce = !1;
const ao = (e, t) => {
const o = function(s) {
var r;
(r = t.drag) == null || r.call(t, s);
}, n = function(s) {
var r;
document.removeEventListener("mousemove", o, !1), document.removeEventListener("mouseup", n, !1), document.onselectstart = null, document.ondragstart = null, ce = !1, (r = t.end) == null || r.call(t, s);
let de = !1;
const co = (e, t) => {
const o = function(i) {
var l;
(l = t.drag) == null || l.call(t, i);
}, n = function(i) {
var l;
document.removeEventListener("mousemove", o, !1), document.removeEventListener("mouseup", n, !1), document.onselectstart = null, document.ondragstart = null, de = !1, (l = t.end) == null || l.call(t, i);
};
e && e.addEventListener("mousedown", (s) => {
var r;
ce || (document.onselectstart = () => !1, document.ondragstart = () => !1, document.addEventListener("mousemove", o, !1), document.addEventListener("mouseup", n, !1), ce = !0, (r = t.start) == null || r.call(t, s));
e && e.addEventListener("mousedown", (i) => {
var l;
de || (document.onselectstart = () => !1, document.ondragstart = () => !1, document.addEventListener("mousemove", o, !1), document.addEventListener("mouseup", n, !1), de = !0, (l = t.start) == null || l.call(t, i));
});
};
const ro = {
const uo = {
angle: {

@@ -1044,5 +1093,5 @@ type: Number,

}
}, lo = O({
}, go = G({
name: "Angle",
props: ro,
props: uo,
emits: ["update:angle", "change"],

@@ -1052,10 +1101,10 @@ setup(e, {

}) {
const o = A(null), n = A(0);
Q(() => e.angle, (l) => {
n.value = l;
const o = M(null), n = M(0);
x(() => e.angle, (r) => {
n.value = r;
});
const s = () => {
let l = Number(n.value);
isNaN(l) || (l = l > 360 || l < 0 ? e.angle : l, n.value = l === 360 ? 0 : l, t("update:angle", n.value), t("change", n.value));
}, r = K(() => ({
const i = () => {
let r = Number(n.value);
isNaN(r) || (r = r > 360 || r < 0 ? e.angle : r, n.value = r === 360 ? 0 : r, t("update:angle", n.value), t("change", n.value));
}, l = K(() => ({
width: e.size + "px",

@@ -1066,7 +1115,7 @@ height: e.size + "px",

transform: `rotate(${n.value}deg)`
})), a = (l) => {
o.value && (n.value = no(o.value, l) % 360, s());
})), a = (r) => {
o.value && (n.value = io(o.value, r) % 360, i());
};
return Fe(() => {
const l = {
return Je(() => {
const r = {
drag: (c) => {

@@ -1079,18 +1128,18 @@ a(c);

};
o.value && ao(o.value, l);
}), () => U("div", {
o.value && co(o.value, r);
}), () => Z("div", {
class: "bee-angle"
}, [U("div", {
}, [Z("div", {
class: "bee-angle__round",
ref: o,
style: r.value
style: l.value
}, null)]);
}
});
const so = O({
const ho = G({
name: "GradientColorPicker",
components: { Angle: lo, Display: _e, Alpha: fe, Palette: Ve, Board: ve, Hue: be, Lightness: Me, History: ye },
components: { Angle: go, Display: Se, Alpha: ve, Palette: Ke, Board: ye, Hue: _e, Lightness: Le, History: me },
props: {
startColor: v.instanceOf(B).isRequired,
endColor: v.instanceOf(B).isRequired,
startColor: v.instanceOf(A).isRequired,
endColor: v.instanceOf(A).isRequired,
startColorStop: v.number.def(0),

@@ -1120,3 +1169,3 @@ endColorStop: v.number.def(100),

setup(e, { emit: t }) {
const o = q({
const o = Y({
startActive: !0,

@@ -1132,12 +1181,12 @@ startColor: e.startColor,

endColorRgba: e.endColor.toRgbString()
}), n = Pe(me), s = A(e.pickerType === "chrome"), r = A(), a = A(), l = A();
Q(
}), n = Ie(ke), i = M(e.pickerType === "chrome"), l = M(), a = M(), r = M();
x(
() => [e.startColor, e.endColor, e.angle],
(d) => {
o.startColor = d[0], o.endColor = d[1], o.angle = d[2];
(s) => {
o.startColor = s[0], o.endColor = s[1], o.angle = s[2];
}
), Q(
), x(
() => e.type,
(d) => {
o.type = d;
(s) => {
o.type = s;
}

@@ -1147,176 +1196,176 @@ );

get: () => o.startActive ? o.startColor : o.endColor,
set: (d) => {
set: (s) => {
if (o.startActive) {
o.startColor = d;
o.startColor = s;
return;
}
o.endColor = d;
o.endColor = s;
}
}), S = K(() => {
if (l.value && r.value) {
const d = o.startColorStop / 100, P = l.value.getBoundingClientRect(), k = r.value.offsetWidth;
return Math.round(d * (P.width - k) + k / 2);
}), k = K(() => {
if (r.value && l.value) {
const s = o.startColorStop / 100, _ = r.value.getBoundingClientRect(), H = l.value.offsetWidth;
return Math.round(s * (_.width - H) + H / 2);
}
return 0;
}), h = K(() => {
if (l.value && a.value) {
const d = o.endColorStop / 100, P = l.value.getBoundingClientRect(), k = a.value.offsetWidth;
return Math.round(d * (P.width - k) + k / 2);
}), p = K(() => {
if (r.value && a.value) {
const s = o.endColorStop / 100, _ = r.value.getBoundingClientRect(), H = a.value.offsetWidth;
return Math.round(s * (_.width - H) + H / 2);
}
return 0;
}), i = K(() => {
let d = `background: linear-gradient(${o.angle}deg, ${o.startColorRgba} ${o.startColorStop}%, ${o.endColorRgba} ${o.endColorStop}%)`;
return o.type === "radial" && (d = `background: radial-gradient(circle, ${o.startColorRgba} ${o.startColorStop}%, ${o.endColorRgba} ${o.endColorStop}%)`), d;
}), g = (d) => {
var P;
if (o.startActive = !0, l.value && r.value) {
const k = (P = l.value) == null ? void 0 : P.getBoundingClientRect();
let D = d.clientX - k.left;
D = Math.max(r.value.offsetWidth / 2, D), D = Math.min(D, k.width - r.value.offsetWidth / 2), o.startColorStop = Math.round(
(D - r.value.offsetWidth / 2) / (k.width - r.value.offsetWidth) * 100
}), g = K(() => {
let s = `background: linear-gradient(${o.angle}deg, ${o.startColorRgba} ${o.startColorStop}%, ${o.endColorRgba} ${o.endColorStop}%)`;
return o.type === "radial" && (s = `background: radial-gradient(circle, ${o.startColorRgba} ${o.startColorStop}%, ${o.endColorRgba} ${o.endColorStop}%)`), s;
}), d = (s) => {
var _;
if (o.startActive = !0, r.value && l.value) {
const H = (_ = r.value) == null ? void 0 : _.getBoundingClientRect();
let N = s.clientX - H.left;
N = Math.max(l.value.offsetWidth / 2, N), N = Math.min(N, H.width - l.value.offsetWidth / 2), o.startColorStop = Math.round(
(N - l.value.offsetWidth / 2) / (H.width - l.value.offsetWidth) * 100
), t("update:startColorStop", o.startColorStop), t("startColorStopChange", o.startColorStop);
}
}, f = (d) => {
var P;
if (o.startActive = !1, l.value && a.value) {
const k = (P = l.value) == null ? void 0 : P.getBoundingClientRect();
let D = d.clientX - k.left;
D = Math.max(a.value.offsetWidth / 2, D), D = Math.min(D, k.width - a.value.offsetWidth / 2), o.endColorStop = Math.round(
(D - a.value.offsetWidth / 2) / (k.width - a.value.offsetWidth) * 100
}, m = (s) => {
var _;
if (o.startActive = !1, r.value && a.value) {
const H = (_ = r.value) == null ? void 0 : _.getBoundingClientRect();
let N = s.clientX - H.left;
N = Math.max(a.value.offsetWidth / 2, N), N = Math.min(N, H.width - a.value.offsetWidth / 2), o.endColorStop = Math.round(
(N - a.value.offsetWidth / 2) / (H.width - a.value.offsetWidth) * 100
), t("update:endColorStop", o.endColorStop), t("endColorStopChange", o.endColorStop);
}
}, C = (d) => {
const P = d.target, k = parseInt(P.value.replace("°", ""));
isNaN(k) || (o.angle = k % 360), t("update:angle", o.angle), t("angleChange", o.angle);
}, p = (d) => {
o.angle = d, t("update:angle", o.angle), t("angleChange", o.angle);
}, m = (d) => {
d === "advance" ? (s.value = !0, t("advanceChange", !0)) : (c.value.hex = d, t("advanceChange", !1)), G();
}, y = (d) => {
c.value.alpha = d, G();
}, z = (d) => {
c.value.hue = d, G();
}, T = (d, P) => {
c.value.saturation = d, c.value.brightness = P, G();
}, F = (d) => {
c.value.lightness = d, G();
}, Y = () => {
G();
}, G = () => {
}, b = (s) => {
const _ = s.target, H = parseInt(_.value.replace("°", ""));
isNaN(H) || (o.angle = H % 360), t("update:angle", o.angle), t("angleChange", o.angle);
}, h = (s) => {
o.angle = s, t("update:angle", o.angle), t("angleChange", o.angle);
}, y = (s) => {
s === "advance" ? (i.value = !0, t("advanceChange", !0)) : (c.value.hex = s, t("advanceChange", !1)), L();
}, f = (s) => {
c.value.alpha = s, L();
}, w = (s) => {
c.value.hue = s, L();
}, S = (s, _) => {
c.value.saturation = s, c.value.brightness = _, L();
}, F = (s) => {
c.value.lightness = s, L();
}, E = () => {
L();
}, L = () => {
o.startActive ? (t("update:startColor", o.startColor), t("startColorChange", o.startColor)) : (t("update:endColor", o.endColor), t("endColorChange", o.endColor));
}, U = () => {
i.value = !1, t("advanceChange", !1);
}, J = () => {
s.value = !1, t("advanceChange", !1);
}, se = () => {
o.type = o.type === "linear" ? "radial" : "linear", t("typeChange", o.type);
}, _ = ge(he, [], {}), w = Z(() => {
}, X = pe(fe, [], {}), ce = j(() => {
if (e.disableHistory)
return;
const d = c.value.toRgbString();
if (_.value = _.value.filter((P) => !H.equals(P, d)), !_.value.includes(d)) {
for (; _.value.length > pe; )
_.value.pop();
_.value.unshift(d);
const s = c.value.toRgbString();
if (X.value = X.value.filter((_) => !R.equals(_, s)), !X.value.includes(s)) {
for (; X.value.length > Ce; )
X.value.pop();
X.value.unshift(s);
}
}, 500);
return oe(() => {
a.value && r.value && (x.triggerDragEvent(a.value, {
drag: (d) => {
f(d);
a.value && l.value && (ae.triggerDragEvent(a.value, {
drag: (s) => {
m(s);
},
end: (d) => {
f(d);
end: (s) => {
m(s);
}
}), x.triggerDragEvent(r.value, {
drag: (d) => {
g(d);
}), ae.triggerDragEvent(l.value, {
drag: (s) => {
d(s);
},
end: (d) => {
g(d);
end: (s) => {
d(s);
}
}));
}), N(
}), T(
() => o.startColor,
(d) => {
o.startColorRgba = d.toRgbString();
(s) => {
o.startColorRgba = s.toRgbString();
},
{ deep: !0 }
), N(
), T(
() => o.endColor,
(d) => {
o.endColorRgba = d.toRgbString();
(s) => {
o.endColorRgba = s.toRgbString();
},
{ deep: !0 }
), N(
), T(
() => c.value,
() => {
w();
ce();
},
{ deep: !0 }
), {
startGradientRef: r,
startGradientRef: l,
stopGradientRef: a,
colorRangeRef: l,
colorRangeRef: r,
state: o,
currentColor: c,
getStartColorLeft: S,
getEndColorLeft: h,
gradientBg: i,
advancePanelShow: s,
onDegreeBlur: C,
onCompactChange: m,
onAlphaChange: y,
onHueChange: z,
onBoardChange: T,
getStartColorLeft: k,
getEndColorLeft: p,
gradientBg: g,
advancePanelShow: i,
onDegreeBlur: b,
onCompactChange: y,
onAlphaChange: f,
onHueChange: w,
onBoardChange: S,
onLightChange: F,
historyColors: _,
onBack: J,
onDegreeChange: p,
onDisplayChange: Y,
onTypeChange: se,
historyColors: X,
onBack: U,
onDegreeChange: h,
onDisplayChange: E,
onTypeChange: J,
lang: n == null ? void 0 : n.lang
};
}
}), Ie = (e) => (ee("data-v-431cadee"), e = e(), te(), e), io = { class: "vc-gradient-picker" }, co = { class: "vc-gradient-picker__header" }, uo = { class: "vc-gradient__types" }, go = { class: "vc-gradient-wrap__types" }, ho = { class: "vc-picker-degree-input vc-degree-input" }, po = { class: "vc-degree-input__control" }, fo = ["value"], Co = { class: "vc-degree-input__panel" }, vo = { class: "vc-degree-input__disk" }, bo = { class: "vc-gradient-picker__body" }, yo = {
}), Ne = (e) => (ee("data-v-c4d6d6ea"), e = e(), te(), e), po = { class: "vc-gradient-picker" }, fo = { class: "vc-gradient-picker__header" }, Co = { class: "vc-gradient__types" }, vo = { class: "vc-gradient-wrap__types" }, bo = { class: "vc-picker-degree-input vc-degree-input" }, yo = { class: "vc-degree-input__control" }, _o = ["value"], mo = { class: "vc-degree-input__panel" }, So = { class: "vc-degree-input__disk" }, ko = { class: "vc-gradient-picker__body" }, $o = {
class: "vc-color-range",
ref: "colorRangeRef"
}, _o = { class: "vc-color-range__container" }, mo = { class: "vc-gradient__stop__container" }, So = ["title"], ko = /* @__PURE__ */ Ie(() => /* @__PURE__ */ u("span", { class: "vc-gradient__stop--inner" }, null, -1)), $o = [
ko
], wo = ["title"], Ho = /* @__PURE__ */ Ie(() => /* @__PURE__ */ u("span", { class: "vc-gradient__stop--inner" }, null, -1)), Ro = [
Ho
}, wo = { class: "vc-color-range__container" }, Bo = { class: "vc-gradient__stop__container" }, Ho = ["title"], Ro = /* @__PURE__ */ Ne(() => /* @__PURE__ */ u("span", { class: "vc-gradient__stop--inner" }, null, -1)), Ao = [
Ro
], Po = ["title"], Vo = /* @__PURE__ */ Ne(() => /* @__PURE__ */ u("span", { class: "vc-gradient__stop--inner" }, null, -1)), Mo = [
Vo
];
function Bo(e, t, o, n, s, r) {
var C, p;
const a = M("Angle"), l = M("Board"), c = M("Hue"), S = M("Palette"), h = M("Lightness"), i = M("Alpha"), g = M("Display"), f = M("History");
return b(), $("div", io, [
u("div", co, [
function Eo(e, t, o, n, i, l) {
var b, h;
const a = V("Angle"), r = V("Board"), c = V("Hue"), k = V("Palette"), p = V("Lightness"), g = V("Alpha"), d = V("Display"), m = V("History");
return C(), $("div", po, [
u("div", fo, [
u("div", null, [
ue(u("div", {
le(u("div", {
class: "back",
style: { cursor: "pointer" },
onClick: t[0] || (t[0] = (...m) => e.onBack && e.onBack(...m))
onClick: t[0] || (t[0] = (...y) => e.onBack && e.onBack(...y))
}, null, 512), [
[de, e.pickerType === "fk" && e.advancePanelShow]
[ge, e.pickerType === "fk" && e.advancePanelShow]
])
]),
u("div", uo, [
u("div", go, [
(b(), $(j, null, ne(["linear", "radial"], (m) => u("div", {
class: W(["vc-gradient__type", { active: e.state.type === m }]),
key: m,
onClick: t[1] || (t[1] = (...y) => e.onTypeChange && e.onTypeChange(...y))
}, re(e.lang ? e.lang[m] : m), 3)), 64))
u("div", Co, [
u("div", vo, [
(C(), $(Q, null, ne(["linear", "radial"], (y) => u("div", {
class: O(["vc-gradient__type", { active: e.state.type === y }]),
key: y,
onClick: t[1] || (t[1] = (...f) => e.onTypeChange && e.onTypeChange(...f))
}, se(e.lang ? e.lang[y] : y), 3)), 64))
]),
ue(u("div", ho, [
u("div", po, [
le(u("div", bo, [
u("div", yo, [
u("input", {
value: e.state.angle,
onBlur: t[2] || (t[2] = (...m) => e.onDegreeBlur && e.onDegreeBlur(...m))
}, null, 40, fo),
Ye("deg ")
onBlur: t[2] || (t[2] = (...y) => e.onDegreeBlur && e.onDegreeBlur(...y))
}, null, 40, _o),
Ee("deg ")
]),
u("div", Co, [
u("div", vo, [
U(a, {
u("div", mo, [
u("div", So, [
Z(a, {
angle: e.state.angle,
"onUpdate:angle": t[3] || (t[3] = (m) => e.state.angle = m),
"onUpdate:angle": t[3] || (t[3] = (y) => e.state.angle = y),
size: 40,

@@ -1328,30 +1377,30 @@ onChange: e.onDegreeChange

], 512), [
[de, e.state.type === "linear"]
[ge, e.state.type === "linear"]
])
])
]),
u("div", bo, [
u("div", yo, [
u("div", _o, [
u("div", ko, [
u("div", $o, [
u("div", wo, [
u("div", {
class: "vc-background",
style: E(e.gradientBg)
style: D(e.gradientBg)
}, null, 4),
u("div", mo, [
u("div", Bo, [
u("div", {
class: W(["vc-gradient__stop", {
class: O(["vc-gradient__stop", {
"vc-gradient__stop--current": e.state.startActive
}]),
ref: "startGradientRef",
title: (C = e.lang) == null ? void 0 : C.start,
style: E({ left: e.getStartColorLeft + "px", backgroundColor: e.state.startColorRgba })
}, $o, 14, So),
title: (b = e.lang) == null ? void 0 : b.start,
style: D({ left: e.getStartColorLeft + "px", backgroundColor: e.state.startColorRgba })
}, Ao, 14, Ho),
u("div", {
class: W(["vc-gradient__stop", {
class: O(["vc-gradient__stop", {
"vc-gradient__stop--current": !e.state.startActive
}]),
ref: "stopGradientRef",
title: (p = e.lang) == null ? void 0 : p.end,
style: E({ left: e.getEndColorLeft + "px", backgroundColor: e.state.endColorRgba })
}, Ro, 14, wo)
title: (h = e.lang) == null ? void 0 : h.end,
style: D({ left: e.getEndColorLeft + "px", backgroundColor: e.state.endColorRgba })
}, Mo, 14, Po)
])

@@ -1361,17 +1410,17 @@ ])

]),
e.advancePanelShow ? (b(), I(l, {
e.advancePanelShow ? (C(), I(r, {
key: 0,
color: e.currentColor,
onChange: e.onBoardChange
}, null, 8, ["color", "onChange"])) : R("", !0),
e.advancePanelShow ? (b(), I(c, {
}, null, 8, ["color", "onChange"])) : B("", !0),
e.advancePanelShow ? (C(), I(c, {
key: 1,
color: e.currentColor,
onChange: e.onHueChange
}, null, 8, ["color", "onChange"])) : R("", !0),
e.advancePanelShow ? R("", !0) : (b(), I(S, {
}, null, 8, ["color", "onChange"])) : B("", !0),
e.advancePanelShow ? B("", !0) : (C(), I(k, {
key: 2,
onChange: e.onCompactChange
}, null, 8, ["onChange"])),
e.advancePanelShow ? R("", !0) : (b(), I(h, {
e.advancePanelShow ? B("", !0) : (C(), I(p, {
key: 3,

@@ -1381,3 +1430,3 @@ color: e.currentColor,

}, null, 8, ["color", "onChange"])),
e.disableAlpha ? R("", !0) : (b(), I(i, {
e.disableAlpha ? B("", !0) : (C(), I(g, {
key: 4,

@@ -1387,3 +1436,3 @@ color: e.currentColor,

}, null, 8, ["color", "onChange"])),
U(g, {
Z(d, {
color: e.currentColor,

@@ -1393,3 +1442,3 @@ "disable-alpha": e.disableAlpha,

}, null, 8, ["color", "disable-alpha", "onChange"]),
e.disableHistory ? R("", !0) : (b(), I(f, {
e.disableHistory ? B("", !0) : (C(), I(m, {
key: 5,

@@ -1402,4 +1451,4 @@ round: e.roundHistory,

}
const Ae = /* @__PURE__ */ X(so, [["render", Bo], ["__scopeId", "data-v-431cadee"]]);
const Ao = O({
const Me = /* @__PURE__ */ q(ho, [["render", Eo], ["__scopeId", "data-v-c4d6d6ea"]]);
const Io = G({
name: "WrapContainer",

@@ -1413,28 +1462,28 @@ props: {

setup(e, { emit: t }) {
const o = q({
const o = Y({
activeKey: e.activeKey
}), n = Pe(me), s = (r) => {
o.activeKey = r, t("update:activeKey", r), t("change", r);
}), n = Ie(ke), i = (l) => {
o.activeKey = l, t("update:activeKey", l), t("change", l);
};
return N(
return T(
() => e.activeKey,
(r) => {
o.activeKey = r;
(l) => {
o.activeKey = l;
}
), { state: o, onActiveKeyChange: s, lang: n == null ? void 0 : n.lang };
), { state: o, onActiveKeyChange: i, lang: n == null ? void 0 : n.lang };
}
}), Po = { class: "vc-colorpicker--container" }, Vo = {
}), Ko = { class: "vc-colorpicker--container" }, Lo = {
key: 0,
class: "vc-colorpicker--tabs"
}, Mo = { class: "vc-colorpicker--tabs__inner" }, Io = { class: "vc-btn__content" }, Ko = { class: "vc-btn__content" };
function Lo(e, t, o, n, s, r) {
var a, l;
return b(), $("div", {
class: W(["vc-colorpicker", e.theme])
}, No = { class: "vc-colorpicker--tabs__inner" }, Wo = { class: "vc-btn__content" }, Do = { class: "vc-btn__content" };
function To(e, t, o, n, i, l) {
var a, r;
return C(), $("div", {
class: O(["vc-colorpicker", e.theme])
}, [
u("div", Po, [
e.showTab ? (b(), $("div", Vo, [
u("div", Mo, [
u("div", Ko, [
e.showTab ? (C(), $("div", Lo, [
u("div", No, [
u("div", {
class: W([
class: O([
"vc-colorpicker--tabs__btn",

@@ -1448,7 +1497,7 @@ {

u("button", null, [
u("div", Io, re((a = e.lang) == null ? void 0 : a.pure), 1)
u("div", Wo, se((a = e.lang) == null ? void 0 : a.pure), 1)
])
], 2),
u("div", {
class: W([
class: O([
"vc-colorpicker--tabs__btn",

@@ -1462,3 +1511,3 @@ {

u("button", null, [
u("div", Ko, re((l = e.lang) == null ? void 0 : l.gradient), 1)
u("div", Do, se((r = e.lang) == null ? void 0 : r.gradient), 1)
])

@@ -1468,3 +1517,3 @@ ], 2),

class: "vc-colorpicker--tabs__bg",
style: E({
style: D({
width: "50%",

@@ -1475,8 +1524,8 @@ left: `calc(${e.state.activeKey === "gradient" ? 50 : 0}%)`

])
])) : R("", !0),
Ue(e.$slots, "default", {}, void 0, !0)
])) : B("", !0),
he(e.$slots, "default", {}, void 0, !0)
])
], 2);
}
const Eo = /* @__PURE__ */ X(Ao, [["render", Lo], ["__scopeId", "data-v-0492277d"]]), No = {
const Oo = /* @__PURE__ */ q(Io, [["render", To], ["__scopeId", "data-v-0492277d"]]), zo = {
start: "Start",

@@ -1488,3 +1537,3 @@ end: "End",

radial: "radial"
}, Wo = {
}, Go = {
start: "开始",

@@ -1496,7 +1545,7 @@ end: "结束",

radial: "径向"
}, To = {
En: No,
"ZH-cn": Wo
}, Fo = {
En: zo,
"ZH-cn": Go
};
const Do = {
const Xo = {
isWidget: v.bool.def(!1),

@@ -1531,8 +1580,10 @@ pickerType: v.oneOf(["fk", "chrome"]).def("fk"),

debounce: v.number.def(100),
theme: v.oneOf(["white", "black"]).def("white")
}, Oo = O({
theme: v.oneOf(["white", "black"]).def("white"),
blurClose: v.bool.def(!1),
defaultPopup: v.bool.def(!1)
}, qo = G({
name: "ColorPicker",
components: { FkColorPicker: Re, ChromeColorPicker: Be, GradientColorPicker: Ae, WrapContainer: Eo },
components: { FkColorPicker: Pe, ChromeColorPicker: Ve, GradientColorPicker: Me, WrapContainer: Oo },
inheritAttrs: !1,
props: Do,
props: Xo,
emits: [

@@ -1547,6 +1598,6 @@ "update:pureColor",

setup(e, { emit: t }) {
je(me, {
lang: K(() => To[e.lang || "ZH-cn"])
Qe(ke, {
lang: K(() => Fo[e.lang || "ZH-cn"])
});
const o = q({
const o = !!xe().extra, n = Y({
pureColor: e.pureColor || "",

@@ -1556,5 +1607,5 @@ activeKey: e.useType === "gradient" ? "gradient" : e.activeKey,

isAdvanceMode: !1
}), n = new B("#000"), s = new B("#000"), r = new B(o.pureColor), a = q({
startColor: n,
endColor: s,
}), i = new A("#000"), l = new A("#000"), a = new A(n.pureColor), r = Y({
startColor: i,
endColor: l,
startColorStop: 0,

@@ -1565,10 +1616,10 @@ endColorStop: 100,

gradientColor: e.gradientColor
}), l = A(r), c = A(!1), S = A(null), h = A(null);
let i = null;
const g = K(() => ({
background: o.activeKey !== "gradient" ? H(o.pureColor).toRgbString() : a.gradientColor
})), f = K(() => o.activeKey === "gradient" ? Ae.name : e.pickerType === "fk" ? Re.name : Be.name), C = (_) => {
o.isAdvanceMode = _;
}, p = K(() => {
const _ = {
}), c = M(a), k = M(e.defaultPopup), p = M(null), g = M(null);
let d = null;
const m = K(() => ({
background: n.activeKey !== "gradient" ? R(n.pureColor).toRgbString() : r.gradientColor
})), b = K(() => n.activeKey === "gradient" ? Me.name : e.pickerType === "fk" ? Pe.name : Ve.name), h = (s) => {
n.isAdvanceMode = s;
}, y = K(() => {
const s = {
disableAlpha: e.disableAlpha,

@@ -1579,96 +1630,102 @@ disableHistory: e.disableHistory,

};
return o.activeKey === "gradient" ? {
..._,
startColor: a.startColor,
endColor: a.endColor,
angle: a.angle,
type: a.type,
startColorStop: a.startColorStop,
endColorStop: a.endColorStop,
onStartColorChange: (w) => {
a.startColor = w, T();
return n.activeKey === "gradient" ? {
...s,
startColor: r.startColor,
endColor: r.endColor,
angle: r.angle,
type: r.type,
startColorStop: r.startColorStop,
endColorStop: r.endColorStop,
onStartColorChange: (_) => {
r.startColor = _, E();
},
onEndColorChange: (w) => {
a.endColor = w, T();
onEndColorChange: (_) => {
r.endColor = _, E();
},
onStartColorStopChange: (w) => {
a.startColorStop = w, T();
onStartColorStopChange: (_) => {
r.startColorStop = _, E();
},
onEndColorStopChange: (w) => {
a.endColorStop = w, T();
onEndColorStopChange: (_) => {
r.endColorStop = _, E();
},
onAngleChange: (w) => {
a.angle = w, T();
onAngleChange: (_) => {
r.angle = _, E();
},
onTypeChange: (w) => {
a.type = w, T();
onTypeChange: (_) => {
r.type = _, E();
},
onAdvanceChange: C
onAdvanceChange: h
} : {
..._,
...s,
disableAlpha: e.disableAlpha,
disableHistory: e.disableHistory,
roundHistory: e.roundHistory,
color: l.value,
onChange: G,
onAdvanceChange: C
color: c.value,
onChange: J,
onAdvanceChange: h
};
}), m = () => {
c.value = !0, i ? i.update() : Y();
}, y = () => {
c.value = !1;
}, z = () => {
var _, w, d, P;
}), f = () => {
k.value = !0, d ? d.update() : U();
}, w = () => {
k.value = !1;
}, S = j(() => {
!e.isWidget && e.blurClose && w();
}, 100);
ot(g, () => {
w();
});
const F = () => {
var s, _, H, N;
try {
const [k] = xe(a.gradientColor);
if (k && k.type.includes("gradient") && k.colorStops.length >= 2) {
const D = k.colorStops[0], Se = k.colorStops[1];
a.startColorStop = Number((_ = D.length) == null ? void 0 : _.value) || 0, a.endColorStop = Number((w = Se.length) == null ? void 0 : w.value) || 0, k.type === "linear-gradient" && ((d = k.orientation) == null ? void 0 : d.type) === "angular" && (a.angle = Number((P = k.orientation) == null ? void 0 : P.value) || 0), a.type = k.type.split("-")[0];
const [Ke, Le, Ee, Ne] = D.value, [We, Te, De, Oe] = Se.value;
a.startColor = new B({
r: Number(Ke),
g: Number(Le),
b: Number(Ee),
a: Number(Ne)
}), a.endColor = new B({
const [z] = at(r.gradientColor);
if (z && z.type.includes("gradient") && z.colorStops.length >= 2) {
const $e = z.colorStops[0], we = z.colorStops[1];
r.startColorStop = Number((s = $e.length) == null ? void 0 : s.value) || 0, r.endColorStop = Number((_ = we.length) == null ? void 0 : _.value) || 0, z.type === "linear-gradient" && ((H = z.orientation) == null ? void 0 : H.type) === "angular" && (r.angle = Number((N = z.orientation) == null ? void 0 : N.value) || 0), r.type = z.type.split("-")[0];
const [We, De, Te, Oe] = $e.value, [ze, Ge, Fe, Xe] = we.value;
r.startColor = new A({
r: Number(We),
g: Number(Te),
b: Number(De),
g: Number(De),
b: Number(Te),
a: Number(Oe)
}), r.endColor = new A({
r: Number(ze),
g: Number(Ge),
b: Number(Fe),
a: Number(Xe)
});
}
} catch (k) {
console.log(`[Parse Color]: ${k}`);
} catch (z) {
console.log(`[Parse Color]: ${z}`);
}
}, T = Z(() => {
const _ = F();
}, E = j(() => {
const s = L();
try {
a.gradientColor = Qe(_), t("update:gradientColor", a.gradientColor), t("gradientColorChange", a.gradientColor);
} catch (w) {
console.log(w);
r.gradientColor = nt(s), t("update:gradientColor", r.gradientColor), t("gradientColorChange", r.gradientColor);
} catch (_) {
console.log(_);
}
}, e.debounce), F = () => {
const _ = [], w = a.startColor.RGB.map((k) => k.toString()), d = a.endColor.RGB.map((k) => k.toString()), P = [
}, e.debounce), L = () => {
const s = [], _ = r.startColor.RGB.map((z) => z.toString()), H = r.endColor.RGB.map((z) => z.toString()), N = [
{
type: "rgba",
value: [w[0], w[1], w[2], w[3]],
length: { value: a.startColorStop + "", type: "%" }
value: [_[0], _[1], _[2], _[3]],
length: { value: r.startColorStop + "", type: "%" }
},
{
type: "rgba",
value: [d[0], d[1], d[2], d[3]],
length: { value: a.endColorStop + "", type: "%" }
value: [H[0], H[1], H[2], H[3]],
length: { value: r.endColorStop + "", type: "%" }
}
];
return a.type === "linear" ? _.push({
return r.type === "linear" ? s.push({
type: "linear-gradient",
orientation: { type: "angular", value: a.angle + "" },
colorStops: P
}) : a.type === "radial" && _.push({
orientation: { type: "angular", value: r.angle + "" },
colorStops: N
}) : r.type === "radial" && s.push({
type: "radial-gradient",
orientation: [{ type: "shape", value: "circle" }],
colorStops: P
}), _;
}, Y = () => {
S.value && h.value && (i = et(S.value, h.value, {
colorStops: N
}), s;
}, U = () => {
p.value && g.value && (d = rt(p.value, g.value, {
placement: "auto",

@@ -1691,76 +1748,83 @@ modifiers: [

}));
}, G = (_) => {
l.value = _, o.pureColor = _.toString(e.format), J();
}, J = Z(() => {
t("update:pureColor", o.pureColor), t("pureColorChange", o.pureColor);
}, e.debounce);
Je(h, () => {
y();
});
const se = (_) => {
o.activeKey = _, t("update:activeKey", _), t("activeKeyChange", _);
}, J = (s) => {
c.value = s, n.pureColor = s.toString(e.format), X();
}, X = j(() => {
t("update:pureColor", n.pureColor), t("pureColorChange", n.pureColor);
}, e.debounce), ce = (s) => {
n.activeKey = s, t("update:activeKey", s), t("activeKeyChange", s);
};
return oe(() => {
z();
}), N(
F(), d || U();
}), T(
() => e.gradientColor,
(_) => {
_ != a.gradientColor && (a.gradientColor = _);
(s) => {
s != r.gradientColor && (r.gradientColor = s);
}
), N(
() => a.gradientColor,
), T(
() => r.gradientColor,
() => {
z();
F();
}
), N(
), T(
() => e.activeKey,
(_) => {
o.activeKey = _;
(s) => {
n.activeKey = s;
}
), N(
), T(
() => e.useType,
(_) => {
o.activeKey !== "gradient" && _ === "gradient" ? o.activeKey = "gradient" : o.activeKey = "pure";
(s) => {
n.activeKey !== "gradient" && s === "gradient" ? n.activeKey = "gradient" : n.activeKey = "pure";
}
), N(
), T(
() => e.pureColor,
(_) => {
H.equals(_, o.pureColor) || (o.pureColor = _, l.value = new B(_));
(s) => {
R.equals(s, n.pureColor) || (n.pureColor = s, c.value = new A(s));
},
{ deep: !0 }
), {
colorCubeRef: S,
pickerRef: h,
showPicker: c,
colorInstance: l,
getBgColorStyle: g,
onColorChange: G,
onShowPicker: m,
onActiveKeyChange: se,
getComponentName: f,
getBindArgs: p,
state: o
colorCubeRef: p,
pickerRef: g,
showPicker: k,
colorInstance: c,
getBgColorStyle: m,
getComponentName: b,
getBindArgs: y,
state: n,
hasExtra: o,
onColorChange: J,
onShowPicker: f,
onActiveKeyChange: ce,
onAutoClose: S
};
}
});
function zo(e, t, o, n, s, r) {
const a = M("WrapContainer");
return b(), $(j, null, [
e.isWidget ? (b(), I(a, {
}), Yo = {
key: 0,
class: "vc-color-extra"
}, Uo = {
key: 0,
class: "vc-color-extra"
};
function jo(e, t, o, n, i, l) {
const a = V("WrapContainer");
return C(), $(Q, null, [
e.isWidget ? (C(), I(a, {
key: 0,
"active-key": e.state.activeKey,
"onUpdate:activeKey": t[0] || (t[0] = (l) => e.state.activeKey = l),
"onUpdate:activeKey": t[0] || (t[0] = (r) => e.state.activeKey = r),
"show-tab": e.useType === "both",
onChange: e.onActiveKeyChange,
style: E({ zIndex: e.zIndex }),
theme: e.theme
style: D({ zIndex: e.zIndex }),
theme: e.theme,
onChange: e.onActiveKeyChange
}, {
default: ke(() => [
(b(), I($e(e.getComponentName), we({ key: e.getComponentName }, e.getBindArgs), null, 16))
default: Be(() => [
(C(), I(He(e.getComponentName), Re({ key: e.getComponentName }, e.getBindArgs), null, 16)),
e.hasExtra ? (C(), $("div", Yo, [
he(e.$slots, "extra", {}, void 0, !0)
])) : B("", !0)
]),
_: 1
}, 8, ["active-key", "show-tab", "onChange", "style", "theme"])) : R("", !0),
e.isWidget ? R("", !0) : (b(), $(j, { key: 1 }, [
_: 3
}, 8, ["active-key", "show-tab", "style", "theme", "onChange"])) : B("", !0),
e.isWidget ? B("", !0) : (C(), $(Q, { key: 1 }, [
u("div", {
class: W(["vc-color-wrap transparent", { round: e.shape === "circle" }]),
class: O(["vc-color-wrap transparent", { round: e.shape === "circle" }]),
ref: "colorCubeRef"

@@ -1770,26 +1834,30 @@ }, [

class: "current-color",
style: E(e.getBgColorStyle),
onClick: t[1] || (t[1] = (...l) => e.onShowPicker && e.onShowPicker(...l))
style: D(e.getBgColorStyle),
onClick: t[1] || (t[1] = (...r) => e.onShowPicker && e.onShowPicker(...r))
}, null, 4)
], 2),
(b(), I(Ze, { to: e.pickerContainer }, [
ue(u("div", {
(C(), I(et, { to: e.pickerContainer }, [
le(u("div", {
ref: "pickerRef",
style: E({ zIndex: e.zIndex })
style: D({ zIndex: e.zIndex }),
onMouseleave: t[3] || (t[3] = (...r) => e.onAutoClose && e.onAutoClose(...r))
}, [
e.showPicker ? (b(), I(a, {
e.showPicker ? (C(), I(a, {
key: 0,
"show-tab": e.useType === "both" && !e.state.isAdvanceMode,
theme: e.theme,
"active-key": e.state.activeKey,
"onUpdate:activeKey": t[2] || (t[2] = (l) => e.state.activeKey = l),
onChange: e.onActiveKeyChange,
theme: e.theme
"onUpdate:activeKey": t[2] || (t[2] = (r) => e.state.activeKey = r),
onChange: e.onActiveKeyChange
}, {
default: ke(() => [
(b(), I($e(e.getComponentName), we({ key: e.getComponentName }, e.getBindArgs), null, 16))
default: Be(() => [
(C(), I(He(e.getComponentName), Re({ key: e.getComponentName }, e.getBindArgs), null, 16)),
e.hasExtra ? (C(), $("div", Uo, [
he(e.$slots, "extra", {}, void 0, !0)
])) : B("", !0)
]),
_: 1
}, 8, ["show-tab", "active-key", "onChange", "theme"])) : R("", !0)
], 4), [
[de, e.showPicker]
_: 3
}, 8, ["show-tab", "theme", "active-key", "onChange"])) : B("", !0)
], 36), [
[ge, e.showPicker]
])

@@ -1800,10 +1868,10 @@ ], 8, ["to"]))

}
const ae = /* @__PURE__ */ X(Oo, [["render", zo], ["__scopeId", "data-v-3ba84123"]]), Qo = {
const re = /* @__PURE__ */ q(qo, [["render", jo], ["__scopeId", "data-v-354ca836"]]), rn = {
install: (e) => {
e.component(ae.name, ae), e.component("Vue3" + ae.name, ae);
e.component(re.name, re), e.component("Vue3" + re.name, re);
}
};
export {
ae as ColorPicker,
Qo as default
re as ColorPicker,
rn as default
};

2

index.umd.js

@@ -1,1 +0,1 @@

(function(N,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("tinycolor2"),require("gradient-parser"),require("@popperjs/core"),require("vue-types"),require("@aesoper/normal-utils"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","tinycolor2","gradient-parser","@popperjs/core","vue-types","@aesoper/normal-utils","lodash-es"],e):(N=typeof globalThis<"u"?globalThis:N||self,e(N.BeeComponents={},N.Vue,N.core,N.tinycolor,N.gradientParser,N.core$1,N.propTypes,N.normalUtils,N.lodashEs))})(this,function(N,e,k,V,ee,ce,C,L,W){"use strict";var Ut=Object.defineProperty;var Zt=(N,e,k)=>e in N?Ut(N,e,{enumerable:!0,configurable:!0,writable:!0,value:k}):N[e]=k;var H=(N,e,k)=>(Zt(N,typeof e!="symbol"?e+"":e,k),k);const Jt="",v=t=>Math.round(t*100)/100;class E{constructor(o){H(this,"instance");H(this,"alphaValue",0);H(this,"redValue",0);H(this,"greenValue",0);H(this,"blueValue",0);H(this,"hueValue",0);H(this,"saturationValue",0);H(this,"brightnessValue",0);H(this,"hslSaturationValue",0);H(this,"lightnessValue",0);H(this,"initAlpha",()=>{const o=this.instance.getAlpha();this.alphaValue=Math.min(1,o)*100});H(this,"initLightness",()=>{const{s:o,l:n}=this.instance.toHsl();this.hslSaturationValue=v(o),this.lightnessValue=v(n)});H(this,"initRgb",()=>{const{r:o,g:n,b:a}=this.instance.toRgb();this.redValue=v(o),this.greenValue=v(n),this.blueValue=v(a)});H(this,"initHsb",()=>{const{h:o,s:n,v:a}=this.instance.toHsv();this.hueValue=Math.min(360,Math.ceil(o)),this.saturationValue=v(n),this.brightnessValue=v(a)});H(this,"toHexString",()=>this.instance.toHexString());H(this,"toRgbString",()=>this.instance.toRgbString());this.instance=V(o),this.initRgb(),this.initHsb(),this.initLightness(),this.initAlpha()}toString(o){return this.instance.toString(o)}get hex(){return this.instance.toHex()}set hex(o){this.instance=V(o),this.initHsb(),this.initRgb(),this.initAlpha(),this.initLightness()}set hue(o){this.saturation===0&&this.brightness===0&&(this.saturationValue=1,this.brightnessValue=1),this.instance=V({h:v(o),s:this.saturation,v:this.brightness,a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.hueValue=v(o)}get hue(){return this.hueValue}set saturation(o){this.instance=V({h:this.hue,s:v(o),v:this.brightness,a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.saturationValue=v(o)}get saturation(){return this.saturationValue}set brightness(o){this.instance=V({h:this.hue,s:this.saturation,v:v(o),a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.brightnessValue=v(o)}get brightness(){return this.brightnessValue}set lightness(o){this.instance=V({h:this.hue,s:this.hslSaturationValue,l:v(o),a:this.alphaValue/100}),this.initRgb(),this.initHsb(),this.lightnessValue=v(o)}get lightness(){return this.lightnessValue}set red(o){const n=this.instance.toRgb();this.instance=V({...n,r:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.redValue=v(o)}get red(){return this.redValue}set green(o){const n=this.instance.toRgb();this.instance=V({...n,g:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.greenValue=v(o)}get green(){return this.greenValue}set blue(o){const n=this.instance.toRgb();this.instance=V({...n,b:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.blueValue=v(o)}get blue(){return this.blueValue}set alpha(o){this.instance.setAlpha(o/100),this.alphaValue=o}get alpha(){return this.alphaValue}get RGB(){return[this.red,this.green,this.blue,this.alpha/100]}get HSB(){return[this.hue,this.saturation,this.brightness,this.alpha/100]}get HSL(){return[this.hue,this.hslSaturationValue,this.lightness,this.alpha/100]}}function te(t,o,n,a){return`rgba(${[t,o,n,a/100].join(",")})`}const F=(t,o,n)=>o<n?t<o?o:t>n?n:t:t<n?n:t>o?o:t,q="color-history",G=8,Qt="",P=(t,o)=>{const n=t.__vccOpts||t;for(const[a,i]of o)n[a]=i;return n},de=e.defineComponent({name:"Alpha",props:{color:C.instanceOf(E),size:C.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let i=t.color||new E;const l=e.reactive({red:i.red,green:i.green,blue:i.blue,alpha:i.alpha});e.watch(()=>t.color,c=>{c&&(i=c,W.merge(l,{red:c.red,green:c.green,blue:c.blue,alpha:c.alpha}))},{deep:!0});const r=e.computed(()=>{const c=te(l.red,l.green,l.blue,0),g=te(l.red,l.green,l.blue,100);return{background:`linear-gradient(to right, ${c} , ${g})`}}),s=()=>{if(n.value&&a.value){const c=l.alpha/100,g=n.value.getBoundingClientRect(),f=a.value.offsetWidth;return Math.round(c*(g.width-f)+f/2)}return 0},d=e.computed(()=>({left:s()+"px",top:0})),S=c=>{c.target!==n.value&&u(c)},u=c=>{if(c.stopPropagation(),n.value&&a.value){const g=n.value.getBoundingClientRect(),f=a.value.offsetWidth;let m=c.clientX-g.left;m=Math.max(f/2,m),m=Math.min(m,g.width-f/2);const p=Math.round((m-f/2)/(g.width-f)*100);i.alpha=p,l.alpha=p,o("change",p)}};return k.tryOnMounted(()=>{const c={drag:g=>{u(g)},end:g=>{u(g)}};n.value&&a.value&&L.DOMUtils.triggerDragEvent(n.value,c)}),{barElement:n,cursorElement:a,getCursorStyle:d,getBackgroundStyle:r,onClickSider:S}}}),he=[(t=>(e.pushScopeId("data-v-18925ba6"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-alpha-slider__bar-handle"},null,-1))];function ge(t,o,n,a,i,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-alpha-slider","transparent",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-alpha-slider__bar",style:e.normalizeStyle(t.getBackgroundStyle),onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-alpha-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},he,6)],4)],2)}const X=P(de,[["render",ge],["__scopeId","data-v-18925ba6"]]),eo="",ue=[["#fcc02e","#f67c01","#e64a19","#d81b43","#8e24aa","#512da7","#1f87e8","#008781","#05a045"],["#fed835","#fb8c00","#f5511e","#eb1d4e","#9c28b1","#5d35b0","#2097f3","#029688","#4cb050"],["#ffeb3c","#ffa727","#fe5722","#eb4165","#aa47bc","#673bb7","#42a5f6","#26a59a","#83c683"],["#fff176","#ffb74e","#ff8a66","#f1627e","#b968c7","#7986cc","#64b5f6","#80cbc4","#a5d6a7"],["#fff59c","#ffcc80","#ffab91","#fb879e","#cf93d9","#9ea8db","#90caf8","#b2dfdc","#c8e6ca"],["transparent","#ffffff","#dedede","#a9a9a9","#4b4b4b","#353535","#212121","#000000","advance"]],pe=e.defineComponent({name:"Palette",emits:["change"],setup(t,{emit:o}){return{palettes:ue,computedBgStyle:i=>i==="transparent"?i:i==="advance"?{}:{background:V(i).toRgbString()},onColorChange:i=>{o("change",i)}}}}),Ce={class:"vc-compact"},fe=["onClick"];function me(t,o,n,a,i,l){return e.openBlock(),e.createElementBlock("div",Ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.palettes,(r,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:"vc-compact__row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r,(d,S)=>(e.openBlock(),e.createElementBlock("div",{key:S,class:"vc-compact__color-cube--wrap",onClick:u=>t.onColorChange(d)},[e.createElementVNode("div",{class:e.normalizeClass(["vc-compact__color_cube",{advance:d==="advance",transparent:d==="transparent"}]),style:e.normalizeStyle(t.computedBgStyle(d))},null,6)],8,fe))),128))]))),128))])}const oe=P(pe,[["render",me],["__scopeId","data-v-b969fd48"]]),to="",be=e.defineComponent({name:"Board",props:{color:C.instanceOf(E),round:C.bool.def(!1),hide:C.bool.def(!0)},emits:["change"],setup(t,{emit:o}){var m,p,y;const n=e.getCurrentInstance(),a={h:((m=t.color)==null?void 0:m.hue)||0,s:1,v:1},i=new E(a).toHexString(),l=e.reactive({hueColor:i,saturation:((p=t.color)==null?void 0:p.saturation)||0,brightness:((y=t.color)==null?void 0:y.brightness)||0}),r=e.ref(0),s=e.ref(0),d=e.ref(),S=e.ref(),u=e.computed(()=>({top:r.value+"px",left:s.value+"px"})),c=()=>{if(n){const b=n.vnode.el;s.value=l.saturation*(b==null?void 0:b.clientWidth),r.value=(1-l.brightness)*(b==null?void 0:b.clientHeight)}},g=b=>{b.target!==S.value&&f(b)},f=b=>{if(n){const z=n.vnode.el,R=z==null?void 0:z.getBoundingClientRect();let M=b.clientX-R.left,D=b.clientY-R.top;M=F(M,0,R.width),D=F(D,0,R.height);const I=M/R.width,K=F(-(D/R.height)+1,0,1);s.value=M,r.value=D,l.saturation=I,l.brightness=K,o("change",I,K)}};return k.tryOnMounted(()=>{n&&n.vnode.el&&d.value&&(L.DOMUtils.triggerDragEvent(d.value,{drag:b=>{f(b)},end:b=>{f(b)}}),e.nextTick(()=>{c()}))}),k.whenever(()=>t.color,b=>{W.merge(l,{hueColor:new E({h:b.hue,s:1,v:1}).toHexString(),saturation:b.saturation,brightness:b.brightness}),c()},{deep:!0}),{state:l,cursorElement:d,getCursorStyle:u,onClickBoard:g}}}),Y=t=>(e.pushScopeId("data-v-058e5db2"),t=t(),e.popScopeId(),t),_e=Y(()=>e.createElementVNode("div",{class:"vc-saturation__white"},null,-1)),ke=Y(()=>e.createElementVNode("div",{class:"vc-saturation__black"},null,-1)),ye=[Y(()=>e.createElementVNode("div",null,null,-1))];function Se(t,o,n,a,i,l){return e.openBlock(),e.createElementBlock("div",{ref:"boardElement",class:e.normalizeClass(["vc-saturation",{"vc-saturation__chrome":t.round,"vc-saturation__hidden":t.hide}]),style:e.normalizeStyle({backgroundColor:t.state.hueColor}),onClick:o[0]||(o[0]=(...r)=>t.onClickBoard&&t.onClickBoard(...r))},[_e,ke,e.createElementVNode("div",{class:"vc-saturation__cursor",ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},ye,4)],6)}const j=P(be,[["render",Se],["__scopeId","data-v-058e5db2"]]),no="",Be=e.defineComponent({name:"Hue",props:{color:C.instanceOf(E),size:C.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let i=t.color||new E;const l=e.reactive({hue:i.hue||0});e.watch(()=>t.color,u=>{u&&(i=u,W.merge(l,{hue:i.hue}))},{deep:!0});const r=()=>{if(n.value&&a.value){const u=n.value.getBoundingClientRect(),c=a.value.offsetWidth;return l.hue===360?u.width-c/2:l.hue%360*(u.width-c)/360+c/2}return 0},s=e.computed(()=>({left:r()+"px",top:0})),d=u=>{u.target!==n.value&&S(u)},S=u=>{if(u.stopPropagation(),n.value&&a.value){const c=n.value.getBoundingClientRect(),g=a.value.offsetWidth;let f=u.clientX-c.left;f=Math.min(f,c.width-g/2),f=Math.max(g/2,f);const m=Math.round((f-g/2)/(c.width-g)*360);i.hue=m,l.hue=m,o("change",m)}};return k.tryOnMounted(()=>{const u={drag:c=>{S(c)},end:c=>{S(c)}};n.value&&a.value&&L.DOMUtils.triggerDragEvent(n.value,u)}),{barElement:n,cursorElement:a,getCursorStyle:s,onClickSider:d}}}),$e=[(t=>(e.pushScopeId("data-v-e1a08576"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-hue-slider__bar-handle"},null,-1))];function Ve(t,o,n,a,i,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-hue-slider",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-hue-slider__bar",onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-hue-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},$e,6)],512)],2)}const U=P(Be,[["render",Ve],["__scopeId","data-v-e1a08576"]]),lo="",Ee=e.defineComponent({name:"Lightness",props:{color:C.instanceOf(E),size:C.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let i=t.color||new E;const[l,r,s]=i.HSL,d=e.reactive({hue:l,saturation:r,lightness:s});e.watch(()=>t.color,m=>{if(m){i=m;const[p,y,b]=i.HSL;W.merge(d,{hue:p,saturation:y,lightness:b})}},{deep:!0});const S=e.computed(()=>{const m=V({h:d.hue,s:d.saturation,l:.8}).toPercentageRgbString(),p=V({h:d.hue,s:d.saturation,l:.6}).toPercentageRgbString(),y=V({h:d.hue,s:d.saturation,l:.4}).toPercentageRgbString(),b=V({h:d.hue,s:d.saturation,l:.2}).toPercentageRgbString();return{background:[`linear-gradient(to right, rgb(255, 255, 255), ${m}, ${p}, ${y}, ${b}, rgb(0, 0, 0))`,`-webkit-linear-gradient(left, rgb(255, 255, 255), ${m}, ${p}, ${y}, ${b}, rgb(0, 0, 0))`,`-moz-linear-gradient(left, rgb(255, 255, 255), ${m}, ${p}, ${y}, ${b}, rgb(0, 0, 0))`,`-ms-linear-gradient(left, rgb(255, 255, 255), ${m}, ${p}, ${y}, ${b}, rgb(0, 0, 0))`]}}),u=()=>{if(n.value&&a.value){const m=d.lightness,p=n.value.getBoundingClientRect(),y=a.value.offsetWidth;return(1-m)*(p.width-y)+y/2}return 0},c=e.computed(()=>({left:u()+"px",top:0})),g=m=>{m.target!==n.value&&f(m)},f=m=>{if(m.stopPropagation(),n.value&&a.value){const p=n.value.getBoundingClientRect(),y=a.value.offsetWidth;let b=m.clientX-p.left;b=Math.max(y/2,b),b=Math.min(b,p.width-y/2);const z=1-(b-y/2)/(p.width-y);i.lightness=z,o("change",z)}};return k.tryOnMounted(()=>{const m={drag:p=>{f(p)},end:p=>{f(p)}};n.value&&a.value&&L.DOMUtils.triggerDragEvent(n.value,m)}),{barElement:n,cursorElement:a,getCursorStyle:c,getBackgroundStyle:S,onClickSider:g}}}),Ne=[(t=>(e.pushScopeId("data-v-94a50a9e"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-lightness-slider__bar-handle"},null,-1))];function ve(t,o,n,a,i,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-lightness-slider",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-lightness-slider__bar",style:e.normalizeStyle(t.getBackgroundStyle),onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-lightness-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},Ne,6)],4)],2)}const ne=P(Ee,[["render",ve],["__scopeId","data-v-94a50a9e"]]),co="",we=e.defineComponent({name:"History",props:{colors:C.arrayOf(String).def(()=>[]),round:C.bool.def(!1)},emits:["change"],setup(t,{emit:o}){return{onColorSelect:a=>{o("change",a)}}}}),He={key:0,class:"vc-colorPicker__record"},Re={class:"color-list"},Ae=["onClick"];function Pe(t,o,n,a,i,l){return t.colors&&t.colors.length>0?(e.openBlock(),e.createElementBlock("div",He,[e.createElementVNode("div",Re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.colors,(r,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass(["color-item","transparent",{"color-item__round":t.round}]),onClick:d=>t.onColorSelect(r)},[e.createElementVNode("div",{class:"color-item__display",style:e.normalizeStyle({backgroundColor:r})},null,4)],10,Ae))),128))])])):e.createCommentVNode("",!0)}const Z=P(we,[["render",Pe],["__scopeId","data-v-0f657238"]]),ho="",ze=e.defineComponent({name:"Display",props:{color:C.instanceOf(E),disableAlpha:C.bool.def(!1)},emits:["update:color","change"],setup(t,{emit:o}){var d,S,u,c;const n=e.ref("hex"),a=e.reactive({color:t.color,hex:(d=t.color)==null?void 0:d.hex,alpha:Math.floor(((S=t.color)==null?void 0:S.alpha)||100)+"%",rgba:(u=t.color)==null?void 0:u.RGB,previewBgColor:(c=t.color)==null?void 0:c.toRgbString()}),i=e.computed(()=>({background:a.previewBgColor})),l=()=>{n.value=n.value==="rgba"?"hex":"rgba"},r=k.useDebounceFn(g=>{if(!g.target.value)return;let f=parseInt(g.target.value.replace("%",""));f>100&&(g.target.value="100%",f=100),f<0&&(g.target.value="0%",f=0),isNaN(f)&&(g.target.value="100%",f=100),!isNaN(f)&&a.color&&(a.color.alpha=f),o("update:color",a.color),o("change",a.color)},300),s=k.useDebounceFn((g,f)=>{if(g.target.value){if(n.value==="hex"){const m=g.target.value.replace("#","");V(m).isValid()&&a.color&&(a.color.hex=m)}else if(f!==void 0&&a.rgba&&a.color){g.target.value<0&&(g.target.value=0),f===3&&g.target.value>1&&(g.target.value=1),f<3&&g.target.value>255&&(g.target.value=255),a.rgba[f]=Number(g.target.value);const[m,p,y,b]=a.rgba;a.color.hex=V({r:m,g:p,b:y}).toHex(),a.color.alpha=Math.floor(b*100)}o("update:color",a.color),o("change",a.color)}},300);return k.whenever(()=>t.color,g=>{g&&(a.color=g,a.alpha=Math.floor(a.color.alpha)+"%",a.hex=a.color.hex,a.rgba=a.color.RGB)},{deep:!0}),k.whenever(()=>a.color,()=>{a.color&&(a.previewBgColor=a.color.toRgbString())},{deep:!0}),{state:a,getBgColorStyle:i,inputType:n,onInputTypeChange:l,onAlphaBlur:r,onInputChange:s}}}),Ie={class:"vc-display"},Me={class:"vc-current-color vc-transparent"},De={key:0,style:{display:"flex",flex:"1",gap:"4px",height:"100%"}},Le={class:"vc-color-input"},Ke=["value"],Oe={key:0,class:"vc-alpha-input"},We=["value"],Fe={key:1,style:{display:"flex",flex:"1",gap:"4px",height:"100%"}},qe=["value","onInput"];function Ge(t,o,n,a,i,l){return e.openBlock(),e.createElementBlock("div",Ie,[e.createElementVNode("div",Me,[e.createElementVNode("div",{class:"color-cube",style:e.normalizeStyle(t.getBgColorStyle)},null,4)]),t.inputType==="hex"?(e.openBlock(),e.createElementBlock("div",De,[e.createElementVNode("div",Le,[e.createElementVNode("input",{value:t.state.hex,onInput:o[0]||(o[0]=(...r)=>t.onInputChange&&t.onInputChange(...r))},null,40,Ke)]),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Oe,[e.createElementVNode("input",{class:"vc-alpha-input__inner",value:t.state.alpha,onInput:o[1]||(o[1]=(...r)=>t.onAlphaBlur&&t.onAlphaBlur(...r))},null,40,We)]))])):t.state.rgba?(e.openBlock(),e.createElementBlock("div",Fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.state.rgba,(r,s)=>(e.openBlock(),e.createElementBlock("div",{class:"vc-color-input",key:s},[e.createElementVNode("input",{value:r,onInput:d=>t.onInputChange(d,s)},null,40,qe)]))),128))])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"vc-input-toggle",onClick:o[2]||(o[2]=(...r)=>t.onInputTypeChange&&t.onInputTypeChange(...r))},e.toDisplayString(t.inputType),1)])}const J=P(ze,[["render",Ge],["__scopeId","data-v-80d589ba"]]),go="",Xe=e.defineComponent({name:"FkColorPicker",components:{Display:J,Alpha:X,Palette:oe,Board:j,Hue:U,Lightness:ne,History:Z},props:{color:C.instanceOf(E),disableHistory:C.bool.def(!1),roundHistory:C.bool.def(!1),disableAlpha:C.bool.def(!1)},emits:["update:color","change","advanceChange"],setup(t,{emit:o}){const n=t.color||new E,a=e.reactive({color:n,hex:n.toHexString(),rgb:n.toRgbString()}),i=e.ref(!1),l=e.computed(()=>({background:a.rgb})),r=()=>{i.value=!1,o("advanceChange",!1)},s=k.useLocalStorage(q,[],{}),d=k.useDebounceFn(()=>{if(t.disableHistory)return;const p=a.color.toRgbString();if(s.value=s.value.filter(y=>!V.equals(y,p)),!s.value.includes(p)){for(;s.value.length>G;)s.value.pop();s.value.unshift(p)}},500),S=p=>{p==="advance"?(i.value=!0,o("advanceChange",!0)):(a.color.hex=p,o("advanceChange",!1))},u=p=>{a.color.alpha=p},c=p=>{a.color.hue=p},g=(p,y)=>{a.color.saturation=p,a.color.brightness=y},f=p=>{a.color.lightness=p},m=p=>{const b=p.target.value.replace("#","");V(b).isValid()&&(a.color.hex=b)};return k.whenever(()=>t.color,p=>{p&&(a.color=p)},{deep:!0}),k.whenever(()=>a.color,()=>{a.hex=a.color.hex,a.rgb=a.color.toRgbString(),d(),o("update:color",a.color),o("change",a.color)},{deep:!0}),{state:a,advancePanelShow:i,onBack:r,onCompactChange:S,onAlphaChange:u,onHueChange:c,onBoardChange:g,onLightChange:f,onInputChange:m,previewStyle:l,historyColors:s}}}),Ye=t=>(e.pushScopeId("data-v-0d5bef46"),t=t(),e.popScopeId(),t),je={class:"vc-fk-colorPicker"},Ue={class:"vc-fk-colorPicker__inner"},Ze={class:"vc-fk-colorPicker__header"},Je=[Ye(()=>e.createElementVNode("div",{class:"back"},null,-1))];function Qe(t,o,n,a,i,l){const r=e.resolveComponent("Palette"),s=e.resolveComponent("Board"),d=e.resolveComponent("Hue"),S=e.resolveComponent("Lightness"),u=e.resolveComponent("Alpha"),c=e.resolveComponent("Display"),g=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",je,[e.createElementVNode("div",Ue,[e.createElementVNode("div",Ze,[t.advancePanelShow?(e.openBlock(),e.createElementBlock("span",{key:0,style:{cursor:"pointer"},onClick:o[0]||(o[0]=(...f)=>t.onBack&&t.onBack(...f))},Je)):e.createCommentVNode("",!0)]),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r,{key:0,onChange:t.onCompactChange},null,8,["onChange"])),t.advancePanelShow?(e.openBlock(),e.createBlock(s,{key:1,color:t.state.color,onChange:t.onBoardChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?(e.openBlock(),e.createBlock(d,{key:2,color:t.state.color,onChange:t.onHueChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(S,{key:3,color:t.state.color,onChange:t.onLightChange},null,8,["color","onChange"])),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(u,{key:4,color:t.state.color,onChange:t.onAlphaChange},null,8,["color","onChange"])),e.createVNode(c,{color:t.state.color,"disable-alpha":t.disableAlpha},null,8,["color","disable-alpha"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(g,{key:5,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])])}const ae=P(Xe,[["render",Qe],["__scopeId","data-v-0d5bef46"]]),po="",Te=e.defineComponent({name:"ChromeColorPicker",components:{Display:J,Alpha:X,Board:j,Hue:U,History:Z},props:{color:C.instanceOf(E),disableHistory:C.bool.def(!1),roundHistory:C.bool.def(!1),disableAlpha:C.bool.def(!1)},emits:["update:color","change"],setup(t,{emit:o}){const n=t.color||new E,a=e.reactive({color:n,hex:n.toHexString(),rgb:n.toRgbString()}),i=e.computed(()=>({background:a.rgb})),l=k.useLocalStorage(q,[],{}),r=k.useDebounceFn(()=>{if(t.disableHistory)return;const c=a.color.toRgbString();if(l.value=l.value.filter(g=>!V.equals(g,c)),!l.value.includes(c)){for(;l.value.length>G;)l.value.pop();l.value.unshift(c)}},500),s=c=>{a.color.alpha=c},d=c=>{a.color.hue=c},S=(c,g)=>{a.color.saturation=c,a.color.brightness=g},u=c=>{c!=="advance"&&(a.color.hex=c)};return k.whenever(()=>t.color,c=>{c&&(a.color=c)},{deep:!0}),k.whenever(()=>a.color,()=>{a.hex=a.color.hex,a.rgb=a.color.toRgbString(),r(),o("update:color",a.color),o("change",a.color)},{deep:!0}),{state:a,previewStyle:i,historyColors:l,onAlphaChange:s,onHueChange:d,onBoardChange:S,onCompactChange:u}}}),xe={class:"vc-chrome-colorPicker"},et={class:"vc-chrome-colorPicker-body"},tt={class:"chrome-controls"},ot={class:"chrome-sliders"};function nt(t,o,n,a,i,l){const r=e.resolveComponent("Board"),s=e.resolveComponent("Hue"),d=e.resolveComponent("Alpha"),S=e.resolveComponent("Display"),u=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",xe,[e.createVNode(r,{round:!0,hide:!1,color:t.state.color,onChange:t.onBoardChange},null,8,["color","onChange"]),e.createElementVNode("div",et,[e.createElementVNode("div",tt,[e.createElementVNode("div",ot,[e.createVNode(s,{size:"small",color:t.state.color,onChange:t.onHueChange},null,8,["color","onChange"]),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(d,{key:0,size:"small",color:t.state.color,onChange:t.onAlphaChange},null,8,["color","onChange"]))])]),e.createVNode(S,{color:t.state.color,"disable-alpha":t.disableAlpha},null,8,["color","disable-alpha"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(u,{key:0,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])])}const re=P(Te,[["render",nt],["__scopeId","data-v-33636434"]]),Q="Vue3ColorPickerProvider",at=(t,o)=>{const n=t.getBoundingClientRect(),a=n.left+n.width/2,i=n.top+n.height/2,l=Math.abs(a-o.clientX),r=Math.abs(i-o.clientY),s=Math.sqrt(Math.pow(l,2)+Math.pow(r,2)),d=r/s,S=Math.acos(d);let u=Math.floor(180/(Math.PI/S));return o.clientX>a&&o.clientY>i&&(u=180-u),o.clientX==a&&o.clientY>i&&(u=180),o.clientX>a&&o.clientY==i&&(u=90),o.clientX<a&&o.clientY>i&&(u=180+u),o.clientX<a&&o.clientY==i&&(u=270),o.clientX<a&&o.clientY<i&&(u=360-u),u};let T=!1;const rt=(t,o)=>{const n=function(i){var l;(l=o.drag)==null||l.call(o,i)},a=function(i){var l;document.removeEventListener("mousemove",n,!1),document.removeEventListener("mouseup",a,!1),document.onselectstart=null,document.ondragstart=null,T=!1,(l=o.end)==null||l.call(o,i)};t&&t.addEventListener("mousedown",i=>{var l;T||(document.onselectstart=()=>!1,document.ondragstart=()=>!1,document.addEventListener("mousemove",n,!1),document.addEventListener("mouseup",a,!1),T=!0,(l=o.start)==null||l.call(o,i))})},Co="",lt={angle:{type:Number,default:0},size:{type:Number,default:16,validator:t=>t>=16},borderWidth:{type:Number,default:1,validator:t=>t>=1},borderColor:{type:String,default:"#666"}},st=e.defineComponent({name:"Angle",props:lt,emits:["update:angle","change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(0);e.watch(()=>t.angle,s=>{a.value=s});const i=()=>{let s=Number(a.value);isNaN(s)||(s=s>360||s<0?t.angle:s,a.value=s===360?0:s,o("update:angle",a.value),o("change",a.value))},l=e.computed(()=>({width:t.size+"px",height:t.size+"px",borderWidth:t.borderWidth+"px",borderColor:t.borderColor,transform:`rotate(${a.value}deg)`})),r=s=>{n.value&&(a.value=at(n.value,s)%360,i())};return e.onMounted(()=>{const s={drag:d=>{r(d)},end:d=>{r(d)}};n.value&&rt(n.value,s)}),()=>e.createVNode("div",{class:"bee-angle"},[e.createVNode("div",{class:"bee-angle__round",ref:n,style:l.value},null)])}}),fo="",it=e.defineComponent({name:"GradientColorPicker",components:{Angle:st,Display:J,Alpha:X,Palette:oe,Board:j,Hue:U,Lightness:ne,History:Z},props:{startColor:C.instanceOf(E).isRequired,endColor:C.instanceOf(E).isRequired,startColorStop:C.number.def(0),endColorStop:C.number.def(100),angle:C.number.def(0),type:C.oneOf(["linear","radial"]).def("linear"),disableHistory:C.bool.def(!1),roundHistory:C.bool.def(!1),disableAlpha:C.bool.def(!1),pickerType:C.oneOf(["fk","chrome"]).def("fk")},emits:["update:startColor","update:endColor","update:angle","update:startColorStop","update:endColorStop","startColorChange","endColorChange","advanceChange","angleChange","startColorStopChange","endColorStopChange","typeChange"],setup(t,{emit:o}){const n=e.reactive({startActive:!0,startColor:t.startColor,endColor:t.endColor,startColorStop:t.startColorStop,endColorStop:t.endColorStop,angle:t.angle,type:t.type,startColorRgba:t.startColor.toRgbString(),endColorRgba:t.endColor.toRgbString()}),a=e.inject(Q),i=e.ref(t.pickerType==="chrome"),l=e.ref(),r=e.ref(),s=e.ref();e.watch(()=>[t.startColor,t.endColor,t.angle],h=>{n.startColor=h[0],n.endColor=h[1],n.angle=h[2]}),e.watch(()=>t.type,h=>{n.type=h});const d=e.computed({get:()=>n.startActive?n.startColor:n.endColor,set:h=>{if(n.startActive){n.startColor=h;return}n.endColor=h}}),S=e.computed(()=>{if(s.value&&l.value){const h=n.startColorStop/100,w=s.value.getBoundingClientRect(),B=l.value.offsetWidth;return Math.round(h*(w.width-B)+B/2)}return 0}),u=e.computed(()=>{if(s.value&&r.value){const h=n.endColorStop/100,w=s.value.getBoundingClientRect(),B=r.value.offsetWidth;return Math.round(h*(w.width-B)+B/2)}return 0}),c=e.computed(()=>{let h=`background: linear-gradient(${n.angle}deg, ${n.startColorRgba} ${n.startColorStop}%, ${n.endColorRgba} ${n.endColorStop}%)`;return n.type==="radial"&&(h=`background: radial-gradient(circle, ${n.startColorRgba} ${n.startColorStop}%, ${n.endColorRgba} ${n.endColorStop}%)`),h}),g=h=>{var w;if(n.startActive=!0,s.value&&l.value){const B=(w=s.value)==null?void 0:w.getBoundingClientRect();let A=h.clientX-B.left;A=Math.max(l.value.offsetWidth/2,A),A=Math.min(A,B.width-l.value.offsetWidth/2),n.startColorStop=Math.round((A-l.value.offsetWidth/2)/(B.width-l.value.offsetWidth)*100),o("update:startColorStop",n.startColorStop),o("startColorStopChange",n.startColorStop)}},f=h=>{var w;if(n.startActive=!1,s.value&&r.value){const B=(w=s.value)==null?void 0:w.getBoundingClientRect();let A=h.clientX-B.left;A=Math.max(r.value.offsetWidth/2,A),A=Math.min(A,B.width-r.value.offsetWidth/2),n.endColorStop=Math.round((A-r.value.offsetWidth/2)/(B.width-r.value.offsetWidth)*100),o("update:endColorStop",n.endColorStop),o("endColorStopChange",n.endColorStop)}},m=h=>{const w=h.target,B=parseInt(w.value.replace("°",""));isNaN(B)||(n.angle=B%360),o("update:angle",n.angle),o("angleChange",n.angle)},p=h=>{n.angle=h,o("update:angle",n.angle),o("angleChange",n.angle)},y=h=>{h==="advance"?(i.value=!0,o("advanceChange",!0)):(d.value.hex=h,o("advanceChange",!1)),I()},b=h=>{d.value.alpha=h,I()},z=h=>{d.value.hue=h,I()},R=(h,w)=>{d.value.saturation=h,d.value.brightness=w,I()},M=h=>{d.value.lightness=h,I()},D=()=>{I()},I=()=>{n.startActive?(o("update:startColor",n.startColor),o("startColorChange",n.startColor)):(o("update:endColor",n.endColor),o("endColorChange",n.endColor))},K=()=>{i.value=!1,o("advanceChange",!1)},x=()=>{n.type=n.type==="linear"?"radial":"linear",o("typeChange",n.type)},_=k.useLocalStorage(q,[],{}),$=k.useDebounceFn(()=>{if(t.disableHistory)return;const h=d.value.toRgbString();if(_.value=_.value.filter(w=>!V.equals(w,h)),!_.value.includes(h)){for(;_.value.length>G;)_.value.pop();_.value.unshift(h)}},500);return k.tryOnMounted(()=>{r.value&&l.value&&(L.DOMUtils.triggerDragEvent(r.value,{drag:h=>{f(h)},end:h=>{f(h)}}),L.DOMUtils.triggerDragEvent(l.value,{drag:h=>{g(h)},end:h=>{g(h)}}))}),k.whenever(()=>n.startColor,h=>{n.startColorRgba=h.toRgbString()},{deep:!0}),k.whenever(()=>n.endColor,h=>{n.endColorRgba=h.toRgbString()},{deep:!0}),k.whenever(()=>d.value,()=>{$()},{deep:!0}),{startGradientRef:l,stopGradientRef:r,colorRangeRef:s,state:n,currentColor:d,getStartColorLeft:S,getEndColorLeft:u,gradientBg:c,advancePanelShow:i,onDegreeBlur:m,onCompactChange:y,onAlphaChange:b,onHueChange:z,onBoardChange:R,onLightChange:M,historyColors:_,onBack:K,onDegreeChange:p,onDisplayChange:D,onTypeChange:x,lang:a==null?void 0:a.lang}}}),le=t=>(e.pushScopeId("data-v-431cadee"),t=t(),e.popScopeId(),t),ct={class:"vc-gradient-picker"},dt={class:"vc-gradient-picker__header"},ht={class:"vc-gradient__types"},gt={class:"vc-gradient-wrap__types"},ut={class:"vc-picker-degree-input vc-degree-input"},pt={class:"vc-degree-input__control"},Ct=["value"],ft={class:"vc-degree-input__panel"},mt={class:"vc-degree-input__disk"},bt={class:"vc-gradient-picker__body"},_t={class:"vc-color-range",ref:"colorRangeRef"},kt={class:"vc-color-range__container"},yt={class:"vc-gradient__stop__container"},St=["title"],Bt=[le(()=>e.createElementVNode("span",{class:"vc-gradient__stop--inner"},null,-1))],$t=["title"],Vt=[le(()=>e.createElementVNode("span",{class:"vc-gradient__stop--inner"},null,-1))];function Et(t,o,n,a,i,l){var m,p;const r=e.resolveComponent("Angle"),s=e.resolveComponent("Board"),d=e.resolveComponent("Hue"),S=e.resolveComponent("Palette"),u=e.resolveComponent("Lightness"),c=e.resolveComponent("Alpha"),g=e.resolveComponent("Display"),f=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",ct,[e.createElementVNode("div",dt,[e.createElementVNode("div",null,[e.withDirectives(e.createElementVNode("div",{class:"back",style:{cursor:"pointer"},onClick:o[0]||(o[0]=(...y)=>t.onBack&&t.onBack(...y))},null,512),[[e.vShow,t.pickerType==="fk"&&t.advancePanelShow]])]),e.createElementVNode("div",ht,[e.createElementVNode("div",gt,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["linear","radial"],y=>e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__type",{active:t.state.type===y}]),key:y,onClick:o[1]||(o[1]=(...b)=>t.onTypeChange&&t.onTypeChange(...b))},e.toDisplayString(t.lang?t.lang[y]:y),3)),64))]),e.withDirectives(e.createElementVNode("div",ut,[e.createElementVNode("div",pt,[e.createElementVNode("input",{value:t.state.angle,onBlur:o[2]||(o[2]=(...y)=>t.onDegreeBlur&&t.onDegreeBlur(...y))},null,40,Ct),e.createTextVNode("deg ")]),e.createElementVNode("div",ft,[e.createElementVNode("div",mt,[e.createVNode(r,{angle:t.state.angle,"onUpdate:angle":o[3]||(o[3]=y=>t.state.angle=y),size:40,onChange:t.onDegreeChange},null,8,["angle","onChange"])])])],512),[[e.vShow,t.state.type==="linear"]])])]),e.createElementVNode("div",bt,[e.createElementVNode("div",_t,[e.createElementVNode("div",kt,[e.createElementVNode("div",{class:"vc-background",style:e.normalizeStyle(t.gradientBg)},null,4),e.createElementVNode("div",yt,[e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__stop",{"vc-gradient__stop--current":t.state.startActive}]),ref:"startGradientRef",title:(m=t.lang)==null?void 0:m.start,style:e.normalizeStyle({left:t.getStartColorLeft+"px",backgroundColor:t.state.startColorRgba})},Bt,14,St),e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__stop",{"vc-gradient__stop--current":!t.state.startActive}]),ref:"stopGradientRef",title:(p=t.lang)==null?void 0:p.end,style:e.normalizeStyle({left:t.getEndColorLeft+"px",backgroundColor:t.state.endColorRgba})},Vt,14,$t)])])],512)]),t.advancePanelShow?(e.openBlock(),e.createBlock(s,{key:0,color:t.currentColor,onChange:t.onBoardChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?(e.openBlock(),e.createBlock(d,{key:1,color:t.currentColor,onChange:t.onHueChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(S,{key:2,onChange:t.onCompactChange},null,8,["onChange"])),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(u,{key:3,color:t.currentColor,onChange:t.onLightChange},null,8,["color","onChange"])),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(c,{key:4,color:t.currentColor,onChange:t.onAlphaChange},null,8,["color","onChange"])),e.createVNode(g,{color:t.currentColor,"disable-alpha":t.disableAlpha,onChange:t.onDisplayChange},null,8,["color","disable-alpha","onChange"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:5,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])}const se=P(it,[["render",Et],["__scopeId","data-v-431cadee"]]),_o="",Nt=e.defineComponent({name:"WrapContainer",props:{theme:C.oneOf(["white","black"]).def("white"),showTab:C.bool.def(!1),activeKey:C.oneOf(["pure","gradient"]).def("pure")},emits:["update:activeKey","change"],setup(t,{emit:o}){const n=e.reactive({activeKey:t.activeKey}),a=e.inject(Q),i=l=>{n.activeKey=l,o("update:activeKey",l),o("change",l)};return k.whenever(()=>t.activeKey,l=>{n.activeKey=l}),{state:n,onActiveKeyChange:i,lang:a==null?void 0:a.lang}}}),vt={class:"vc-colorpicker--container"},wt={key:0,class:"vc-colorpicker--tabs"},Ht={class:"vc-colorpicker--tabs__inner"},Rt={class:"vc-btn__content"},At={class:"vc-btn__content"};function Pt(t,o,n,a,i,l){var r,s;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-colorpicker",t.theme])},[e.createElementVNode("div",vt,[t.showTab?(e.openBlock(),e.createElementBlock("div",wt,[e.createElementVNode("div",Ht,[e.createElementVNode("div",{class:e.normalizeClass(["vc-colorpicker--tabs__btn",{"vc-btn-active":t.state.activeKey==="pure"}]),onClick:o[0]||(o[0]=d=>t.onActiveKeyChange("pure"))},[e.createElementVNode("button",null,[e.createElementVNode("div",Rt,e.toDisplayString((r=t.lang)==null?void 0:r.pure),1)])],2),e.createElementVNode("div",{class:e.normalizeClass(["vc-colorpicker--tabs__btn",{"vc-btn-active":t.state.activeKey==="gradient"}]),onClick:o[1]||(o[1]=d=>t.onActiveKeyChange("gradient"))},[e.createElementVNode("button",null,[e.createElementVNode("div",At,e.toDisplayString((s=t.lang)==null?void 0:s.gradient),1)])],2),e.createElementVNode("div",{class:"vc-colorpicker--tabs__bg",style:e.normalizeStyle({width:"50%",left:`calc(${t.state.activeKey==="gradient"?50:0}%)`})},null,4)])])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},void 0,!0)])],2)}const zt=P(Nt,[["render",Pt],["__scopeId","data-v-0492277d"]]),It={En:{start:"Start",end:"End",pure:"Pure",gradient:"Gradient",linear:"linear",radial:"radial"},"ZH-cn":{start:"开始",end:"结束",pure:"纯色",gradient:"渐变",linear:"线性",radial:"径向"}},So="",Mt={isWidget:C.bool.def(!1),pickerType:C.oneOf(["fk","chrome"]).def("fk"),shape:C.oneOf(["circle","square"]).def("square"),pureColor:{type:[String,Object],default:"#000000"},gradientColor:C.string.def("linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%)"),format:{type:String,default:"rgb"},disableAlpha:C.bool.def(!1),disableHistory:C.bool.def(!1),roundHistory:C.bool.def(!1),useType:C.oneOf(["pure","gradient","both"]).def("pure"),activeKey:C.oneOf(["pure","gradient"]).def("pure"),lang:{type:String,default:"ZH-cn"},zIndex:C.number.def(9999),pickerContainer:{type:[String,HTMLElement],default:"body"},debounce:C.number.def(100),theme:C.oneOf(["white","black"]).def("white")},Dt=e.defineComponent({name:"ColorPicker",components:{FkColorPicker:ae,ChromeColorPicker:re,GradientColorPicker:se,WrapContainer:zt},inheritAttrs:!1,props:Mt,emits:["update:pureColor","pureColorChange","update:gradientColor","gradientColorChange","update:activeKey","activeKeyChange"],setup(t,{emit:o}){e.provide(Q,{lang:e.computed(()=>It[t.lang||"ZH-cn"])});const n=e.reactive({pureColor:t.pureColor||"",activeKey:t.useType==="gradient"?"gradient":t.activeKey,isAdvanceMode:!1}),a=new E("#000"),i=new E("#000"),l=new E(n.pureColor),r=e.reactive({startColor:a,endColor:i,startColorStop:0,endColorStop:100,angle:0,type:"linear",gradientColor:t.gradientColor}),s=e.ref(l),d=e.ref(!1),S=e.ref(null),u=e.ref(null);let c=null;const g=e.computed(()=>({background:n.activeKey!=="gradient"?V(n.pureColor).toRgbString():r.gradientColor})),f=e.computed(()=>n.activeKey==="gradient"?se.name:t.pickerType==="fk"?ae.name:re.name),m=_=>{n.isAdvanceMode=_},p=e.computed(()=>{const _={disableAlpha:t.disableAlpha,disableHistory:t.disableHistory,roundHistory:t.roundHistory,pickerType:t.pickerType};return n.activeKey==="gradient"?{..._,startColor:r.startColor,endColor:r.endColor,angle:r.angle,type:r.type,startColorStop:r.startColorStop,endColorStop:r.endColorStop,onStartColorChange:$=>{r.startColor=$,R()},onEndColorChange:$=>{r.endColor=$,R()},onStartColorStopChange:$=>{r.startColorStop=$,R()},onEndColorStopChange:$=>{r.endColorStop=$,R()},onAngleChange:$=>{r.angle=$,R()},onTypeChange:$=>{r.type=$,R()},onAdvanceChange:m}:{..._,disableAlpha:t.disableAlpha,disableHistory:t.disableHistory,roundHistory:t.roundHistory,color:s.value,onChange:I,onAdvanceChange:m}}),y=()=>{d.value=!0,c?c.update():D()},b=()=>{d.value=!1},z=()=>{var _,$,h,w;try{const[B]=ee.parse(r.gradientColor);if(B&&B.type.includes("gradient")&&B.colorStops.length>=2){const A=B.colorStops[0],ie=B.colorStops[1];r.startColorStop=Number((_=A.length)==null?void 0:_.value)||0,r.endColorStop=Number(($=ie.length)==null?void 0:$.value)||0,B.type==="linear-gradient"&&((h=B.orientation)==null?void 0:h.type)==="angular"&&(r.angle=Number((w=B.orientation)==null?void 0:w.value)||0),r.type=B.type.split("-")[0];const[Ot,Wt,Ft,qt]=A.value,[Gt,Xt,Yt,jt]=ie.value;r.startColor=new E({r:Number(Ot),g:Number(Wt),b:Number(Ft),a:Number(qt)}),r.endColor=new E({r:Number(Gt),g:Number(Xt),b:Number(Yt),a:Number(jt)})}}catch(B){console.log(`[Parse Color]: ${B}`)}},R=k.useDebounceFn(()=>{const _=M();try{r.gradientColor=ee.stringify(_),o("update:gradientColor",r.gradientColor),o("gradientColorChange",r.gradientColor)}catch($){console.log($)}},t.debounce),M=()=>{const _=[],$=r.startColor.RGB.map(B=>B.toString()),h=r.endColor.RGB.map(B=>B.toString()),w=[{type:"rgba",value:[$[0],$[1],$[2],$[3]],length:{value:r.startColorStop+"",type:"%"}},{type:"rgba",value:[h[0],h[1],h[2],h[3]],length:{value:r.endColorStop+"",type:"%"}}];return r.type==="linear"?_.push({type:"linear-gradient",orientation:{type:"angular",value:r.angle+""},colorStops:w}):r.type==="radial"&&_.push({type:"radial-gradient",orientation:[{type:"shape",value:"circle"}],colorStops:w}),_},D=()=>{S.value&&u.value&&(c=ce.createPopper(S.value,u.value,{placement:"auto",modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"flip",options:{allowedAutoPlacements:["top","bottom","left","right"],rootBoundary:"viewport"}}]}))},I=_=>{s.value=_,n.pureColor=_.toString(t.format),K()},K=k.useDebounceFn(()=>{o("update:pureColor",n.pureColor),o("pureColorChange",n.pureColor)},t.debounce);k.onClickOutside(u,()=>{b()});const x=_=>{n.activeKey=_,o("update:activeKey",_),o("activeKeyChange",_)};return k.tryOnMounted(()=>{z()}),k.whenever(()=>t.gradientColor,_=>{_!=r.gradientColor&&(r.gradientColor=_)}),k.whenever(()=>r.gradientColor,()=>{z()}),k.whenever(()=>t.activeKey,_=>{n.activeKey=_}),k.whenever(()=>t.useType,_=>{n.activeKey!=="gradient"&&_==="gradient"?n.activeKey="gradient":n.activeKey="pure"}),k.whenever(()=>t.pureColor,_=>{V.equals(_,n.pureColor)||(n.pureColor=_,s.value=new E(_))},{deep:!0}),{colorCubeRef:S,pickerRef:u,showPicker:d,colorInstance:s,getBgColorStyle:g,onColorChange:I,onShowPicker:y,onActiveKeyChange:x,getComponentName:f,getBindArgs:p,state:n}}});function Lt(t,o,n,a,i,l){const r=e.resolveComponent("WrapContainer");return e.openBlock(),e.createElementBlock(e.Fragment,null,[t.isWidget?(e.openBlock(),e.createBlock(r,{key:0,"active-key":t.state.activeKey,"onUpdate:activeKey":o[0]||(o[0]=s=>t.state.activeKey=s),"show-tab":t.useType==="both",onChange:t.onActiveKeyChange,style:e.normalizeStyle({zIndex:t.zIndex}),theme:t.theme},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.getComponentName),e.mergeProps({key:t.getComponentName},t.getBindArgs),null,16))]),_:1},8,["active-key","show-tab","onChange","style","theme"])):e.createCommentVNode("",!0),t.isWidget?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",{class:e.normalizeClass(["vc-color-wrap transparent",{round:t.shape==="circle"}]),ref:"colorCubeRef"},[e.createElementVNode("div",{class:"current-color",style:e.normalizeStyle(t.getBgColorStyle),onClick:o[1]||(o[1]=(...s)=>t.onShowPicker&&t.onShowPicker(...s))},null,4)],2),(e.openBlock(),e.createBlock(e.Teleport,{to:t.pickerContainer},[e.withDirectives(e.createElementVNode("div",{ref:"pickerRef",style:e.normalizeStyle({zIndex:t.zIndex})},[t.showPicker?(e.openBlock(),e.createBlock(r,{key:0,"show-tab":t.useType==="both"&&!t.state.isAdvanceMode,"active-key":t.state.activeKey,"onUpdate:activeKey":o[2]||(o[2]=s=>t.state.activeKey=s),onChange:t.onActiveKeyChange,theme:t.theme},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.getComponentName),e.mergeProps({key:t.getComponentName},t.getBindArgs),null,16))]),_:1},8,["show-tab","active-key","onChange","theme"])):e.createCommentVNode("",!0)],4),[[e.vShow,t.showPicker]])],8,["to"]))],64))],64)}const O=P(Dt,[["render",Lt],["__scopeId","data-v-3ba84123"]]),Kt={install:t=>{t.component(O.name,O),t.component("Vue3"+O.name,O)}};N.ColorPicker=O,N.default=Kt,Object.defineProperties(N,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("tinycolor2"),require("gradient-parser"),require("@popperjs/core"),require("vue-types"),require("@aesoper/normal-utils"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","tinycolor2","gradient-parser","@popperjs/core","vue-types","@aesoper/normal-utils","lodash-es"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.BeeComponents={},w.Vue,w.core,w.tinycolor,w.gradientParser,w.core$1,w.propTypes,w.normalUtils,w.lodashEs))})(this,function(w,e,m,V,te,he,f,O,F){"use strict";var Tt=Object.defineProperty;var xt=(w,e,m)=>e in w?Tt(w,e,{enumerable:!0,configurable:!0,writable:!0,value:m}):w[e]=m;var P=(w,e,m)=>(xt(w,typeof e!="symbol"?e+"":e,m),m);const eo="",v=t=>Math.round(t*100)/100;class N{constructor(o){P(this,"instance");P(this,"alphaValue",0);P(this,"redValue",0);P(this,"greenValue",0);P(this,"blueValue",0);P(this,"hueValue",0);P(this,"saturationValue",0);P(this,"brightnessValue",0);P(this,"hslSaturationValue",0);P(this,"lightnessValue",0);P(this,"initAlpha",()=>{const o=this.instance.getAlpha();this.alphaValue=Math.min(1,o)*100});P(this,"initLightness",()=>{const{s:o,l:n}=this.instance.toHsl();this.hslSaturationValue=v(o),this.lightnessValue=v(n)});P(this,"initRgb",()=>{const{r:o,g:n,b:a}=this.instance.toRgb();this.redValue=v(o),this.greenValue=v(n),this.blueValue=v(a)});P(this,"initHsb",()=>{const{h:o,s:n,v:a}=this.instance.toHsv();this.hueValue=Math.min(360,Math.ceil(o)),this.saturationValue=v(n),this.brightnessValue=v(a)});P(this,"toHexString",()=>this.instance.toHexString());P(this,"toRgbString",()=>this.instance.toRgbString());this.instance=V(o),this.initRgb(),this.initHsb(),this.initLightness(),this.initAlpha()}toString(o){return this.instance.toString(o)}get hex(){return this.instance.toHex()}set hex(o){this.instance=V(o),this.initHsb(),this.initRgb(),this.initAlpha(),this.initLightness()}set hue(o){this.saturation===0&&this.brightness===0&&(this.saturationValue=1,this.brightnessValue=1),this.instance=V({h:v(o),s:this.saturation,v:this.brightness,a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.hueValue=v(o)}get hue(){return this.hueValue}set saturation(o){this.instance=V({h:this.hue,s:v(o),v:this.brightness,a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.saturationValue=v(o)}get saturation(){return this.saturationValue}set brightness(o){this.instance=V({h:this.hue,s:this.saturation,v:v(o),a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.brightnessValue=v(o)}get brightness(){return this.brightnessValue}set lightness(o){this.instance=V({h:this.hue,s:this.hslSaturationValue,l:v(o),a:this.alphaValue/100}),this.initRgb(),this.initHsb(),this.lightnessValue=v(o)}get lightness(){return this.lightnessValue}set red(o){const n=this.instance.toRgb();this.instance=V({...n,r:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.redValue=v(o)}get red(){return this.redValue}set green(o){const n=this.instance.toRgb();this.instance=V({...n,g:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.greenValue=v(o)}get green(){return this.greenValue}set blue(o){const n=this.instance.toRgb();this.instance=V({...n,b:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.blueValue=v(o)}get blue(){return this.blueValue}set alpha(o){this.instance.setAlpha(o/100),this.alphaValue=o}get alpha(){return this.alphaValue}get RGB(){return[this.red,this.green,this.blue,parseFloat((this.alpha/100).toFixed(2))]}get HSB(){return[this.hue,this.saturation,this.brightness,parseFloat((this.alpha/100).toFixed(2))]}get HSL(){return[this.hue,this.hslSaturationValue,this.lightness,parseFloat((this.alpha/100).toFixed(2))]}}function oe(t,o,n,a){return`rgba(${[t,o,n,a/100].join(",")})`}const q=(t,o,n)=>o<n?t<o?o:t>n?n:t:t<n?n:t>o?o:t,G="color-history",X=8,to="",z=(t,o)=>{const n=t.__vccOpts||t;for(const[a,c]of o)n[a]=c;return n},ge=e.defineComponent({name:"Alpha",props:{color:f.instanceOf(N),size:f.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let c=t.color||new N;const s=e.reactive({red:c.red,green:c.green,blue:c.blue,alpha:c.alpha});e.watch(()=>t.color,g=>{g&&(c=g,F.merge(s,{red:g.red,green:g.green,blue:g.blue,alpha:g.alpha}))},{deep:!0});const r=e.computed(()=>{const g=oe(s.red,s.green,s.blue,0),h=oe(s.red,s.green,s.blue,100);return{background:`linear-gradient(to right, ${g} , ${h})`}}),l=()=>{if(n.value&&a.value){const g=s.alpha/100,h=n.value.getBoundingClientRect(),y=a.value.offsetWidth;return Math.round(g*(h.width-y)+y/2)}return 0},d=e.computed(()=>({left:l()+"px",top:0})),B=g=>{g.target!==n.value&&p(g)},p=g=>{if(g.stopPropagation(),n.value&&a.value){const h=n.value.getBoundingClientRect(),y=a.value.offsetWidth;let b=g.clientX-h.left;b=Math.max(y/2,b),b=Math.min(b,h.width-y/2);const u=Math.round((b-y/2)/(h.width-y)*100);c.alpha=u,s.alpha=u,o("change",u)}};return m.tryOnMounted(()=>{const g={drag:h=>{p(h)},end:h=>{p(h)}};n.value&&a.value&&O.DOMUtils.triggerDragEvent(n.value,g)}),{barElement:n,cursorElement:a,getCursorStyle:d,getBackgroundStyle:r,onClickSider:B}}}),ue=[(t=>(e.pushScopeId("data-v-18925ba6"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-alpha-slider__bar-handle"},null,-1))];function pe(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-alpha-slider","transparent",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-alpha-slider__bar",style:e.normalizeStyle(t.getBackgroundStyle),onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-alpha-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},ue,6)],4)],2)}const Y=z(ge,[["render",pe],["__scopeId","data-v-18925ba6"]]),ao="",Ce=[["#fcc02e","#f67c01","#e64a19","#d81b43","#8e24aa","#512da7","#1f87e8","#008781","#05a045"],["#fed835","#fb8c00","#f5511e","#eb1d4e","#9c28b1","#5d35b0","#2097f3","#029688","#4cb050"],["#ffeb3c","#ffa727","#fe5722","#eb4165","#aa47bc","#673bb7","#42a5f6","#26a59a","#83c683"],["#fff176","#ffb74e","#ff8a66","#f1627e","#b968c7","#7986cc","#64b5f6","#80cbc4","#a5d6a7"],["#fff59c","#ffcc80","#ffab91","#fb879e","#cf93d9","#9ea8db","#90caf8","#b2dfdc","#c8e6ca"],["transparent","#ffffff","#dedede","#a9a9a9","#4b4b4b","#353535","#212121","#000000","advance"]],fe=e.defineComponent({name:"Palette",emits:["change"],setup(t,{emit:o}){return{palettes:Ce,computedBgStyle:c=>c==="transparent"?c:c==="advance"?{}:{background:V(c).toRgbString()},onColorChange:c=>{o("change",c)}}}}),me={class:"vc-compact"},be=["onClick"];function _e(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.palettes,(r,l)=>(e.openBlock(),e.createElementBlock("div",{key:l,class:"vc-compact__row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r,(d,B)=>(e.openBlock(),e.createElementBlock("div",{key:B,class:"vc-compact__color-cube--wrap",onClick:p=>t.onColorChange(d)},[e.createElementVNode("div",{class:e.normalizeClass(["vc-compact__color_cube",{advance:d==="advance",transparent:d==="transparent"}]),style:e.normalizeStyle(t.computedBgStyle(d))},null,6)],8,be))),128))]))),128))])}const ne=z(fe,[["render",_e],["__scopeId","data-v-b969fd48"]]),ro="",ke=e.defineComponent({name:"Board",props:{color:f.instanceOf(N),round:f.bool.def(!1),hide:f.bool.def(!0)},emits:["change"],setup(t,{emit:o}){var _,C,$;const n=e.getCurrentInstance(),a={h:((_=t.color)==null?void 0:_.hue)||0,s:1,v:1},c=new N(a).toHexString(),s=e.reactive({hueColor:c,saturation:((C=t.color)==null?void 0:C.saturation)||0,brightness:(($=t.color)==null?void 0:$.brightness)||0}),r=e.ref(0),l=e.ref(0),d=e.ref(),B=e.computed(()=>({top:r.value+"px",left:l.value+"px"})),p=()=>{if(n){const S=n.vnode.el;l.value=s.saturation*(S==null?void 0:S.clientWidth),r.value=(1-s.brightness)*(S==null?void 0:S.clientHeight)}};let g=!1;const h=S=>{g=!0,u(S)},y=S=>{g&&u(S)},b=()=>{g=!1},u=S=>{if(n){const I=n.vnode.el,H=I==null?void 0:I.getBoundingClientRect();let R=S.clientX-H.left,L=S.clientY-H.top;R=q(R,0,H.width),L=q(L,0,H.height);const K=R/H.width,D=q(-(L/H.height)+1,0,1);l.value=R,r.value=L,s.saturation=K,s.brightness=D,o("change",K,D)}};return m.tryOnMounted(()=>{n&&n.vnode.el&&d.value&&e.nextTick(()=>{p()})}),m.whenever(()=>t.color,S=>{F.merge(s,{hueColor:new N({h:S.hue,s:1,v:1}).toHexString(),saturation:S.saturation,brightness:S.brightness}),p()},{deep:!0}),{state:s,cursorElement:d,getCursorStyle:B,onClickBoard:h,onDrag:y,onDragEnd:b}}}),j=t=>(e.pushScopeId("data-v-7f0cdcdf"),t=t(),e.popScopeId(),t),ye=j(()=>e.createElementVNode("div",{class:"vc-saturation__white"},null,-1)),Se=j(()=>e.createElementVNode("div",{class:"vc-saturation__black"},null,-1)),Be=[j(()=>e.createElementVNode("div",null,null,-1))];function $e(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",{ref:"boardElement",class:e.normalizeClass(["vc-saturation",{"vc-saturation__chrome":t.round,"vc-saturation__hidden":t.hide}]),style:e.normalizeStyle({backgroundColor:t.state.hueColor}),onMousedown:o[0]||(o[0]=(...r)=>t.onClickBoard&&t.onClickBoard(...r)),onMousemove:o[1]||(o[1]=(...r)=>t.onDrag&&t.onDrag(...r)),onMouseup:o[2]||(o[2]=(...r)=>t.onDragEnd&&t.onDragEnd(...r))},[ye,Se,e.createElementVNode("div",{class:"vc-saturation__cursor",ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},Be,4)],38)}const U=z(ke,[["render",$e],["__scopeId","data-v-7f0cdcdf"]]),so="",Ve=e.defineComponent({name:"Hue",props:{color:f.instanceOf(N),size:f.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let c=t.color||new N;const s=e.reactive({hue:c.hue||0});e.watch(()=>t.color,p=>{p&&(c=p,F.merge(s,{hue:c.hue}))},{deep:!0});const r=()=>{if(n.value&&a.value){const p=n.value.getBoundingClientRect(),g=a.value.offsetWidth;return s.hue===360?p.width-g/2:s.hue%360*(p.width-g)/360+g/2}return 0},l=e.computed(()=>({left:r()+"px",top:0})),d=p=>{p.target!==n.value&&B(p)},B=p=>{if(p.stopPropagation(),n.value&&a.value){const g=n.value.getBoundingClientRect(),h=a.value.offsetWidth;let y=p.clientX-g.left;y=Math.min(y,g.width-h/2),y=Math.max(h/2,y);const b=Math.round((y-h/2)/(g.width-h)*360);c.hue=b,s.hue=b,o("change",b)}};return m.tryOnMounted(()=>{const p={drag:g=>{B(g)},end:g=>{B(g)}};n.value&&a.value&&O.DOMUtils.triggerDragEvent(n.value,p)}),{barElement:n,cursorElement:a,getCursorStyle:l,onClickSider:d}}}),Ee=[(t=>(e.pushScopeId("data-v-e1a08576"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-hue-slider__bar-handle"},null,-1))];function Ne(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-hue-slider",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-hue-slider__bar",onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-hue-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},Ee,6)],512)],2)}const Z=z(Ve,[["render",Ne],["__scopeId","data-v-e1a08576"]]),ho="",we=e.defineComponent({name:"Lightness",props:{color:f.instanceOf(N),size:f.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let c=t.color||new N;const[s,r,l]=c.HSL,d=e.reactive({hue:s,saturation:r,lightness:l});e.watch(()=>t.color,b=>{if(b){c=b;const[u,_,C]=c.HSL;F.merge(d,{hue:u,saturation:_,lightness:C})}},{deep:!0});const B=e.computed(()=>{const b=V({h:d.hue,s:d.saturation,l:.8}).toPercentageRgbString(),u=V({h:d.hue,s:d.saturation,l:.6}).toPercentageRgbString(),_=V({h:d.hue,s:d.saturation,l:.4}).toPercentageRgbString(),C=V({h:d.hue,s:d.saturation,l:.2}).toPercentageRgbString();return{background:[`linear-gradient(to right, rgb(255, 255, 255), ${b}, ${u}, ${_}, ${C}, rgb(0, 0, 0))`,`-webkit-linear-gradient(left, rgb(255, 255, 255), ${b}, ${u}, ${_}, ${C}, rgb(0, 0, 0))`,`-moz-linear-gradient(left, rgb(255, 255, 255), ${b}, ${u}, ${_}, ${C}, rgb(0, 0, 0))`,`-ms-linear-gradient(left, rgb(255, 255, 255), ${b}, ${u}, ${_}, ${C}, rgb(0, 0, 0))`]}}),p=()=>{if(n.value&&a.value){const b=d.lightness,u=n.value.getBoundingClientRect(),_=a.value.offsetWidth;return(1-b)*(u.width-_)+_/2}return 0},g=e.computed(()=>({left:p()+"px",top:0})),h=b=>{b.target!==n.value&&y(b)},y=b=>{if(b.stopPropagation(),n.value&&a.value){const u=n.value.getBoundingClientRect(),_=a.value.offsetWidth;let C=b.clientX-u.left;C=Math.max(_/2,C),C=Math.min(C,u.width-_/2);const $=1-(C-_/2)/(u.width-_);c.lightness=$,o("change",$)}};return m.tryOnMounted(()=>{const b={drag:u=>{y(u)},end:u=>{y(u)}};n.value&&a.value&&O.DOMUtils.triggerDragEvent(n.value,b)}),{barElement:n,cursorElement:a,getCursorStyle:g,getBackgroundStyle:B,onClickSider:h}}}),ve=[(t=>(e.pushScopeId("data-v-94a50a9e"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-lightness-slider__bar-handle"},null,-1))];function He(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-lightness-slider",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-lightness-slider__bar",style:e.normalizeStyle(t.getBackgroundStyle),onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-lightness-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},ve,6)],4)],2)}const ae=z(we,[["render",He],["__scopeId","data-v-94a50a9e"]]),po="",Re=e.defineComponent({name:"History",props:{colors:f.arrayOf(String).def(()=>[]),round:f.bool.def(!1)},emits:["change"],setup(t,{emit:o}){return{onColorSelect:a=>{o("change",a)}}}}),Ae={key:0,class:"vc-colorPicker__record"},Pe={class:"color-list"},Me=["onClick"];function ze(t,o,n,a,c,s){return t.colors&&t.colors.length>0?(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("div",Pe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.colors,(r,l)=>(e.openBlock(),e.createElementBlock("div",{key:l,class:e.normalizeClass(["color-item","transparent",{"color-item__round":t.round}]),onClick:d=>t.onColorSelect(r)},[e.createElementVNode("div",{class:"color-item__display",style:e.normalizeStyle({backgroundColor:r})},null,4)],10,Me))),128))])])):e.createCommentVNode("",!0)}const J=z(Re,[["render",ze],["__scopeId","data-v-0f657238"]]),Co="",Ie=e.defineComponent({name:"Display",props:{color:f.instanceOf(N),disableAlpha:f.bool.def(!1)},emits:["update:color","change"],setup(t,{emit:o}){var y,b,u,_;const{copy:n,copied:a,isSupported:c}=m.useClipboard(),s=e.ref("hex"),r=e.reactive({color:t.color,hex:(y=t.color)==null?void 0:y.hex,alpha:Math.round(((b=t.color)==null?void 0:b.alpha)||100),rgba:(u=t.color)==null?void 0:u.RGB,previewBgColor:(_=t.color)==null?void 0:_.toRgbString()}),l=e.computed(()=>({background:r.previewBgColor})),d=()=>{s.value=s.value==="rgba"?"hex":"rgba"},B=m.useDebounceFn(C=>{if(!C.target.value)return;let $=parseInt(C.target.value.replace("%",""));$>100&&(C.target.value="100",$=100),$<0&&(C.target.value="0",$=0),isNaN($)&&(C.target.value="100",$=100),!isNaN($)&&r.color&&(r.color.alpha=$),o("change",r.color)},300),p=m.useDebounceFn((C,$)=>{if(r.color){if(s.value==="hex"){const S=C.target.value.replace("#","");V(S).isValid()?[3,4].includes(S.length)&&(r.color.hex=S):r.color.hex="000000",o("change",r.color)}else if(s.value==="rgba"&&$===3&&C.target.value.toString()==="0."&&r.rgba){r.rgba[$]=C.target.value;const[S,I,H,R]=r.rgba;r.color.hex=V({r:S,g:I,b:H}).toHex(),r.color.alpha=Math.round(R*100),o("change",r.color)}}},100),g=m.useDebounceFn((C,$)=>{if(C.target.value){if(s.value==="hex"){const S=C.target.value.replace("#","");V(S).isValid()&&r.color&&[6,8].includes(S.length)&&(r.color.hex=S)}else if($!==void 0&&r.rgba&&r.color){if(C.target.value<0&&(C.target.value=0),$===3&&((C.target.value>1||isNaN(C.target.value))&&(C.target.value=1),C.target.value.toString()==="0."))return;$<3&&C.target.value>255&&(C.target.value=255),r.rgba[$]=C.target.value;const[S,I,H,R]=r.rgba;r.color.hex=V({r:S,g:I,b:H}).toHex(),r.color.alpha=Math.round(R*100)}o("change",r.color)}},300),h=()=>{if(c&&r.color){const C=s.value==="hex"?r.color.toString(r.color.alpha===100?"hex6":"hex8"):r.color.toRgbString();n(C||"")}};return m.whenever(()=>t.color,C=>{C&&(r.color=C,r.alpha=Math.round(r.color.alpha),r.hex=r.color.hex,r.rgba=r.color.RGB)},{deep:!0}),m.whenever(()=>r.color,()=>{r.color&&(r.previewBgColor=r.color.toRgbString())},{deep:!0}),{state:r,getBgColorStyle:l,inputType:s,copied:a,onInputTypeChange:d,onAlphaBlur:B,onInputChange:g,onBlurChange:p,onCopyColorStr:h}}}),De={class:"vc-display"},Le={class:"vc-current-color vc-transparent"},Ke={key:0,class:"copy-text"},Oe={key:0,style:{display:"flex",flex:"1",gap:"4px",height:"100%"}},We={class:"vc-color-input"},Fe={key:0,class:"vc-alpha-input"},qe=["value"],Ge={key:1,style:{display:"flex",flex:"1",gap:"4px",height:"100%"}},Xe=["value","onInput","onBlur"];function Ye(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",De,[e.createElementVNode("div",Le,[e.createElementVNode("div",{class:"color-cube",style:e.normalizeStyle(t.getBgColorStyle),onClick:o[0]||(o[0]=(...r)=>t.onCopyColorStr&&t.onCopyColorStr(...r))},[t.copied?(e.openBlock(),e.createElementBlock("span",Ke,"Copied!")):e.createCommentVNode("",!0)],4)]),t.inputType==="hex"?(e.openBlock(),e.createElementBlock("div",Oe,[e.createElementVNode("div",We,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[1]||(o[1]=r=>t.state.hex=r),maxlength:"8",onInput:o[2]||(o[2]=(...r)=>t.onInputChange&&t.onInputChange(...r)),onBlur:o[3]||(o[3]=(...r)=>t.onBlurChange&&t.onBlurChange(...r))},null,544),[[e.vModelText,t.state.hex]])]),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Fe,[e.createElementVNode("input",{class:"vc-alpha-input__inner",value:t.state.alpha,onInput:o[4]||(o[4]=(...r)=>t.onAlphaBlur&&t.onAlphaBlur(...r))},null,40,qe),e.createTextVNode("% ")]))])):t.state.rgba?(e.openBlock(),e.createElementBlock("div",Ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.state.rgba,(r,l)=>(e.openBlock(),e.createElementBlock("div",{class:"vc-color-input",key:l},[e.createElementVNode("input",{value:r,onInput:d=>t.onInputChange(d,l),onBlur:d=>t.onBlurChange(d,l)},null,40,Xe)]))),128))])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"vc-input-toggle",onClick:o[5]||(o[5]=(...r)=>t.onInputTypeChange&&t.onInputTypeChange(...r))},e.toDisplayString(t.inputType),1)])}const Q=z(Ie,[["render",Ye],["__scopeId","data-v-7334ac20"]]),fo="",je=e.defineComponent({name:"FkColorPicker",components:{Display:Q,Alpha:Y,Palette:ne,Board:U,Hue:Z,Lightness:ae,History:J},props:{color:f.instanceOf(N),disableHistory:f.bool.def(!1),roundHistory:f.bool.def(!1),disableAlpha:f.bool.def(!1)},emits:["update:color","change","advanceChange"],setup(t,{emit:o}){const n=t.color||new N,a=e.reactive({color:n,hex:n.toHexString(),rgb:n.toRgbString()}),c=e.ref(!1),s=e.computed(()=>({background:a.rgb})),r=()=>{c.value=!1,o("advanceChange",!1)},l=m.useLocalStorage(G,[],{}),d=m.useDebounceFn(()=>{if(t.disableHistory)return;const u=a.color.toRgbString();if(l.value=l.value.filter(_=>!V.equals(_,u)),!l.value.includes(u)){for(;l.value.length>X;)l.value.pop();l.value.unshift(u)}},500),B=u=>{u==="advance"?(c.value=!0,o("advanceChange",!0)):(a.color.hex=u,o("advanceChange",!1))},p=u=>{a.color.alpha=u},g=u=>{a.color.hue=u},h=(u,_)=>{a.color.saturation=u,a.color.brightness=_},y=u=>{a.color.lightness=u},b=u=>{const C=u.target.value.replace("#","");V(C).isValid()&&(a.color.hex=C)};return m.whenever(()=>t.color,u=>{u&&(a.color=u)},{deep:!0}),m.whenever(()=>a.color,()=>{a.hex=a.color.hex,a.rgb=a.color.toRgbString(),d(),o("update:color",a.color),o("change",a.color)},{deep:!0}),{state:a,advancePanelShow:c,onBack:r,onCompactChange:B,onAlphaChange:p,onHueChange:g,onBoardChange:h,onLightChange:y,onInputChange:b,previewStyle:s,historyColors:l}}}),Ue=t=>(e.pushScopeId("data-v-48e3c224"),t=t(),e.popScopeId(),t),Ze={class:"vc-fk-colorPicker"},Je={class:"vc-fk-colorPicker__inner"},Qe={class:"vc-fk-colorPicker__header"},Te=[Ue(()=>e.createElementVNode("div",{class:"back"},null,-1))];function xe(t,o,n,a,c,s){const r=e.resolveComponent("Palette"),l=e.resolveComponent("Board"),d=e.resolveComponent("Hue"),B=e.resolveComponent("Lightness"),p=e.resolveComponent("Alpha"),g=e.resolveComponent("Display"),h=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",Ze,[e.createElementVNode("div",Je,[e.createElementVNode("div",Qe,[t.advancePanelShow?(e.openBlock(),e.createElementBlock("span",{key:0,style:{cursor:"pointer"},onClick:o[0]||(o[0]=(...y)=>t.onBack&&t.onBack(...y))},Te)):e.createCommentVNode("",!0)]),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r,{key:0,onChange:t.onCompactChange},null,8,["onChange"])),t.advancePanelShow?(e.openBlock(),e.createBlock(l,{key:1,color:t.state.color,onChange:t.onBoardChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?(e.openBlock(),e.createBlock(d,{key:2,color:t.state.color,onChange:t.onHueChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(B,{key:3,color:t.state.color,onChange:t.onLightChange},null,8,["color","onChange"])),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(p,{key:4,color:t.state.color,onChange:t.onAlphaChange},null,8,["color","onChange"])),e.createVNode(g,{color:t.state.color,"disable-alpha":t.disableAlpha},null,8,["color","disable-alpha"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(h,{key:5,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])])}const re=z(je,[["render",xe],["__scopeId","data-v-48e3c224"]]),bo="",et=e.defineComponent({name:"ChromeColorPicker",components:{Display:Q,Alpha:Y,Board:U,Hue:Z,History:J},props:{color:f.instanceOf(N),disableHistory:f.bool.def(!1),roundHistory:f.bool.def(!1),disableAlpha:f.bool.def(!1)},emits:["update:color","change"],setup(t,{emit:o}){const n=t.color||new N,a=e.reactive({color:n,hex:n.toHexString(),rgb:n.toRgbString()}),c=e.computed(()=>({background:a.rgb})),s=m.useLocalStorage(G,[],{}),r=m.useDebounceFn(()=>{if(t.disableHistory)return;const h=a.color.toRgbString();if(s.value=s.value.filter(y=>!V.equals(y,h)),!s.value.includes(h)){for(;s.value.length>X;)s.value.pop();s.value.unshift(h)}},500),l=h=>{a.color.alpha=h},d=h=>{a.color.hue=h},B=h=>{h.hex!==void 0&&(a.color.hex=h.hex),h.alpha!==void 0&&(a.color.alpha=h.alpha)},p=(h,y)=>{a.color.saturation=h,a.color.brightness=y},g=h=>{h!=="advance"&&(a.color.hex=h)};return m.whenever(()=>t.color,h=>{h&&(a.color=h)},{deep:!0}),m.whenever(()=>a.color,()=>{a.hex=a.color.hex,a.rgb=a.color.toRgbString(),r(),o("update:color",a.color),o("change",a.color)},{deep:!0}),{state:a,previewStyle:c,historyColors:s,onAlphaChange:l,onHueChange:d,onBoardChange:p,onInputChange:B,onCompactChange:g}}}),tt={class:"vc-chrome-colorPicker"},ot={class:"vc-chrome-colorPicker-body"},nt={class:"chrome-controls"},at={class:"chrome-sliders"};function rt(t,o,n,a,c,s){const r=e.resolveComponent("Board"),l=e.resolveComponent("Hue"),d=e.resolveComponent("Alpha"),B=e.resolveComponent("Display"),p=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",tt,[e.createVNode(r,{round:!0,hide:!1,color:t.state.color,onChange:t.onBoardChange},null,8,["color","onChange"]),e.createElementVNode("div",ot,[e.createElementVNode("div",nt,[e.createElementVNode("div",at,[e.createVNode(l,{size:"small",color:t.state.color,onChange:t.onHueChange},null,8,["color","onChange"]),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(d,{key:0,size:"small",color:t.state.color,onChange:t.onAlphaChange},null,8,["color","onChange"]))])]),e.createVNode(B,{color:t.state.color,"disable-alpha":t.disableAlpha},null,8,["color","disable-alpha"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(p,{key:0,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])])}const le=z(et,[["render",rt],["__scopeId","data-v-2611d66c"]]),T="Vue3ColorPickerProvider",lt=(t,o)=>{const n=t.getBoundingClientRect(),a=n.left+n.width/2,c=n.top+n.height/2,s=Math.abs(a-o.clientX),r=Math.abs(c-o.clientY),l=Math.sqrt(Math.pow(s,2)+Math.pow(r,2)),d=r/l,B=Math.acos(d);let p=Math.floor(180/(Math.PI/B));return o.clientX>a&&o.clientY>c&&(p=180-p),o.clientX==a&&o.clientY>c&&(p=180),o.clientX>a&&o.clientY==c&&(p=90),o.clientX<a&&o.clientY>c&&(p=180+p),o.clientX<a&&o.clientY==c&&(p=270),o.clientX<a&&o.clientY<c&&(p=360-p),p};let x=!1;const st=(t,o)=>{const n=function(c){var s;(s=o.drag)==null||s.call(o,c)},a=function(c){var s;document.removeEventListener("mousemove",n,!1),document.removeEventListener("mouseup",a,!1),document.onselectstart=null,document.ondragstart=null,x=!1,(s=o.end)==null||s.call(o,c)};t&&t.addEventListener("mousedown",c=>{var s;x||(document.onselectstart=()=>!1,document.ondragstart=()=>!1,document.addEventListener("mousemove",n,!1),document.addEventListener("mouseup",a,!1),x=!0,(s=o.start)==null||s.call(o,c))})},_o="",it={angle:{type:Number,default:0},size:{type:Number,default:16,validator:t=>t>=16},borderWidth:{type:Number,default:1,validator:t=>t>=1},borderColor:{type:String,default:"#666"}},ct=e.defineComponent({name:"Angle",props:it,emits:["update:angle","change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(0);e.watch(()=>t.angle,l=>{a.value=l});const c=()=>{let l=Number(a.value);isNaN(l)||(l=l>360||l<0?t.angle:l,a.value=l===360?0:l,o("update:angle",a.value),o("change",a.value))},s=e.computed(()=>({width:t.size+"px",height:t.size+"px",borderWidth:t.borderWidth+"px",borderColor:t.borderColor,transform:`rotate(${a.value}deg)`})),r=l=>{n.value&&(a.value=lt(n.value,l)%360,c())};return e.onMounted(()=>{const l={drag:d=>{r(d)},end:d=>{r(d)}};n.value&&st(n.value,l)}),()=>e.createVNode("div",{class:"bee-angle"},[e.createVNode("div",{class:"bee-angle__round",ref:n,style:s.value},null)])}}),ko="",dt=e.defineComponent({name:"GradientColorPicker",components:{Angle:ct,Display:Q,Alpha:Y,Palette:ne,Board:U,Hue:Z,Lightness:ae,History:J},props:{startColor:f.instanceOf(N).isRequired,endColor:f.instanceOf(N).isRequired,startColorStop:f.number.def(0),endColorStop:f.number.def(100),angle:f.number.def(0),type:f.oneOf(["linear","radial"]).def("linear"),disableHistory:f.bool.def(!1),roundHistory:f.bool.def(!1),disableAlpha:f.bool.def(!1),pickerType:f.oneOf(["fk","chrome"]).def("fk")},emits:["update:startColor","update:endColor","update:angle","update:startColorStop","update:endColorStop","startColorChange","endColorChange","advanceChange","angleChange","startColorStopChange","endColorStopChange","typeChange"],setup(t,{emit:o}){const n=e.reactive({startActive:!0,startColor:t.startColor,endColor:t.endColor,startColorStop:t.startColorStop,endColorStop:t.endColorStop,angle:t.angle,type:t.type,startColorRgba:t.startColor.toRgbString(),endColorRgba:t.endColor.toRgbString()}),a=e.inject(T),c=e.ref(t.pickerType==="chrome"),s=e.ref(),r=e.ref(),l=e.ref();e.watch(()=>[t.startColor,t.endColor,t.angle],i=>{n.startColor=i[0],n.endColor=i[1],n.angle=i[2]}),e.watch(()=>t.type,i=>{n.type=i});const d=e.computed({get:()=>n.startActive?n.startColor:n.endColor,set:i=>{if(n.startActive){n.startColor=i;return}n.endColor=i}}),B=e.computed(()=>{if(l.value&&s.value){const i=n.startColorStop/100,k=l.value.getBoundingClientRect(),E=s.value.offsetWidth;return Math.round(i*(k.width-E)+E/2)}return 0}),p=e.computed(()=>{if(l.value&&r.value){const i=n.endColorStop/100,k=l.value.getBoundingClientRect(),E=r.value.offsetWidth;return Math.round(i*(k.width-E)+E/2)}return 0}),g=e.computed(()=>{let i=`background: linear-gradient(${n.angle}deg, ${n.startColorRgba} ${n.startColorStop}%, ${n.endColorRgba} ${n.endColorStop}%)`;return n.type==="radial"&&(i=`background: radial-gradient(circle, ${n.startColorRgba} ${n.startColorStop}%, ${n.endColorRgba} ${n.endColorStop}%)`),i}),h=i=>{var k;if(n.startActive=!0,l.value&&s.value){const E=(k=l.value)==null?void 0:k.getBoundingClientRect();let A=i.clientX-E.left;A=Math.max(s.value.offsetWidth/2,A),A=Math.min(A,E.width-s.value.offsetWidth/2),n.startColorStop=Math.round((A-s.value.offsetWidth/2)/(E.width-s.value.offsetWidth)*100),o("update:startColorStop",n.startColorStop),o("startColorStopChange",n.startColorStop)}},y=i=>{var k;if(n.startActive=!1,l.value&&r.value){const E=(k=l.value)==null?void 0:k.getBoundingClientRect();let A=i.clientX-E.left;A=Math.max(r.value.offsetWidth/2,A),A=Math.min(A,E.width-r.value.offsetWidth/2),n.endColorStop=Math.round((A-r.value.offsetWidth/2)/(E.width-r.value.offsetWidth)*100),o("update:endColorStop",n.endColorStop),o("endColorStopChange",n.endColorStop)}},b=i=>{const k=i.target,E=parseInt(k.value.replace("°",""));isNaN(E)||(n.angle=E%360),o("update:angle",n.angle),o("angleChange",n.angle)},u=i=>{n.angle=i,o("update:angle",n.angle),o("angleChange",n.angle)},_=i=>{i==="advance"?(c.value=!0,o("advanceChange",!0)):(d.value.hex=i,o("advanceChange",!1)),R()},C=i=>{d.value.alpha=i,R()},$=i=>{d.value.hue=i,R()},S=(i,k)=>{d.value.saturation=i,d.value.brightness=k,R()},I=i=>{d.value.lightness=i,R()},H=()=>{R()},R=()=>{n.startActive?(o("update:startColor",n.startColor),o("startColorChange",n.startColor)):(o("update:endColor",n.endColor),o("endColorChange",n.endColor))},L=()=>{c.value=!1,o("advanceChange",!1)},K=()=>{n.type=n.type==="linear"?"radial":"linear",o("typeChange",n.type)},D=m.useLocalStorage(G,[],{}),ee=m.useDebounceFn(()=>{if(t.disableHistory)return;const i=d.value.toRgbString();if(D.value=D.value.filter(k=>!V.equals(k,i)),!D.value.includes(i)){for(;D.value.length>X;)D.value.pop();D.value.unshift(i)}},500);return m.tryOnMounted(()=>{r.value&&s.value&&(O.DOMUtils.triggerDragEvent(r.value,{drag:i=>{y(i)},end:i=>{y(i)}}),O.DOMUtils.triggerDragEvent(s.value,{drag:i=>{h(i)},end:i=>{h(i)}}))}),m.whenever(()=>n.startColor,i=>{n.startColorRgba=i.toRgbString()},{deep:!0}),m.whenever(()=>n.endColor,i=>{n.endColorRgba=i.toRgbString()},{deep:!0}),m.whenever(()=>d.value,()=>{ee()},{deep:!0}),{startGradientRef:s,stopGradientRef:r,colorRangeRef:l,state:n,currentColor:d,getStartColorLeft:B,getEndColorLeft:p,gradientBg:g,advancePanelShow:c,onDegreeBlur:b,onCompactChange:_,onAlphaChange:C,onHueChange:$,onBoardChange:S,onLightChange:I,historyColors:D,onBack:L,onDegreeChange:u,onDisplayChange:H,onTypeChange:K,lang:a==null?void 0:a.lang}}}),se=t=>(e.pushScopeId("data-v-c4d6d6ea"),t=t(),e.popScopeId(),t),ht={class:"vc-gradient-picker"},gt={class:"vc-gradient-picker__header"},ut={class:"vc-gradient__types"},pt={class:"vc-gradient-wrap__types"},Ct={class:"vc-picker-degree-input vc-degree-input"},ft={class:"vc-degree-input__control"},mt=["value"],bt={class:"vc-degree-input__panel"},_t={class:"vc-degree-input__disk"},kt={class:"vc-gradient-picker__body"},yt={class:"vc-color-range",ref:"colorRangeRef"},St={class:"vc-color-range__container"},Bt={class:"vc-gradient__stop__container"},$t=["title"],Vt=[se(()=>e.createElementVNode("span",{class:"vc-gradient__stop--inner"},null,-1))],Et=["title"],Nt=[se(()=>e.createElementVNode("span",{class:"vc-gradient__stop--inner"},null,-1))];function wt(t,o,n,a,c,s){var b,u;const r=e.resolveComponent("Angle"),l=e.resolveComponent("Board"),d=e.resolveComponent("Hue"),B=e.resolveComponent("Palette"),p=e.resolveComponent("Lightness"),g=e.resolveComponent("Alpha"),h=e.resolveComponent("Display"),y=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",ht,[e.createElementVNode("div",gt,[e.createElementVNode("div",null,[e.withDirectives(e.createElementVNode("div",{class:"back",style:{cursor:"pointer"},onClick:o[0]||(o[0]=(..._)=>t.onBack&&t.onBack(..._))},null,512),[[e.vShow,t.pickerType==="fk"&&t.advancePanelShow]])]),e.createElementVNode("div",ut,[e.createElementVNode("div",pt,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["linear","radial"],_=>e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__type",{active:t.state.type===_}]),key:_,onClick:o[1]||(o[1]=(...C)=>t.onTypeChange&&t.onTypeChange(...C))},e.toDisplayString(t.lang?t.lang[_]:_),3)),64))]),e.withDirectives(e.createElementVNode("div",Ct,[e.createElementVNode("div",ft,[e.createElementVNode("input",{value:t.state.angle,onBlur:o[2]||(o[2]=(..._)=>t.onDegreeBlur&&t.onDegreeBlur(..._))},null,40,mt),e.createTextVNode("deg ")]),e.createElementVNode("div",bt,[e.createElementVNode("div",_t,[e.createVNode(r,{angle:t.state.angle,"onUpdate:angle":o[3]||(o[3]=_=>t.state.angle=_),size:40,onChange:t.onDegreeChange},null,8,["angle","onChange"])])])],512),[[e.vShow,t.state.type==="linear"]])])]),e.createElementVNode("div",kt,[e.createElementVNode("div",yt,[e.createElementVNode("div",St,[e.createElementVNode("div",{class:"vc-background",style:e.normalizeStyle(t.gradientBg)},null,4),e.createElementVNode("div",Bt,[e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__stop",{"vc-gradient__stop--current":t.state.startActive}]),ref:"startGradientRef",title:(b=t.lang)==null?void 0:b.start,style:e.normalizeStyle({left:t.getStartColorLeft+"px",backgroundColor:t.state.startColorRgba})},Vt,14,$t),e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__stop",{"vc-gradient__stop--current":!t.state.startActive}]),ref:"stopGradientRef",title:(u=t.lang)==null?void 0:u.end,style:e.normalizeStyle({left:t.getEndColorLeft+"px",backgroundColor:t.state.endColorRgba})},Nt,14,Et)])])],512)]),t.advancePanelShow?(e.openBlock(),e.createBlock(l,{key:0,color:t.currentColor,onChange:t.onBoardChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?(e.openBlock(),e.createBlock(d,{key:1,color:t.currentColor,onChange:t.onHueChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(B,{key:2,onChange:t.onCompactChange},null,8,["onChange"])),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(p,{key:3,color:t.currentColor,onChange:t.onLightChange},null,8,["color","onChange"])),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(g,{key:4,color:t.currentColor,onChange:t.onAlphaChange},null,8,["color","onChange"])),e.createVNode(h,{color:t.currentColor,"disable-alpha":t.disableAlpha,onChange:t.onDisplayChange},null,8,["color","disable-alpha","onChange"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(y,{key:5,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])}const ie=z(dt,[["render",wt],["__scopeId","data-v-c4d6d6ea"]]),Bo="",vt=e.defineComponent({name:"WrapContainer",props:{theme:f.oneOf(["white","black"]).def("white"),showTab:f.bool.def(!1),activeKey:f.oneOf(["pure","gradient"]).def("pure")},emits:["update:activeKey","change"],setup(t,{emit:o}){const n=e.reactive({activeKey:t.activeKey}),a=e.inject(T),c=s=>{n.activeKey=s,o("update:activeKey",s),o("change",s)};return m.whenever(()=>t.activeKey,s=>{n.activeKey=s}),{state:n,onActiveKeyChange:c,lang:a==null?void 0:a.lang}}}),Ht={class:"vc-colorpicker--container"},Rt={key:0,class:"vc-colorpicker--tabs"},At={class:"vc-colorpicker--tabs__inner"},Pt={class:"vc-btn__content"},Mt={class:"vc-btn__content"};function zt(t,o,n,a,c,s){var r,l;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-colorpicker",t.theme])},[e.createElementVNode("div",Ht,[t.showTab?(e.openBlock(),e.createElementBlock("div",Rt,[e.createElementVNode("div",At,[e.createElementVNode("div",{class:e.normalizeClass(["vc-colorpicker--tabs__btn",{"vc-btn-active":t.state.activeKey==="pure"}]),onClick:o[0]||(o[0]=d=>t.onActiveKeyChange("pure"))},[e.createElementVNode("button",null,[e.createElementVNode("div",Pt,e.toDisplayString((r=t.lang)==null?void 0:r.pure),1)])],2),e.createElementVNode("div",{class:e.normalizeClass(["vc-colorpicker--tabs__btn",{"vc-btn-active":t.state.activeKey==="gradient"}]),onClick:o[1]||(o[1]=d=>t.onActiveKeyChange("gradient"))},[e.createElementVNode("button",null,[e.createElementVNode("div",Mt,e.toDisplayString((l=t.lang)==null?void 0:l.gradient),1)])],2),e.createElementVNode("div",{class:"vc-colorpicker--tabs__bg",style:e.normalizeStyle({width:"50%",left:`calc(${t.state.activeKey==="gradient"?50:0}%)`})},null,4)])])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},void 0,!0)])],2)}const It=z(vt,[["render",zt],["__scopeId","data-v-0492277d"]]),Dt={En:{start:"Start",end:"End",pure:"Pure",gradient:"Gradient",linear:"linear",radial:"radial"},"ZH-cn":{start:"开始",end:"结束",pure:"纯色",gradient:"渐变",linear:"线性",radial:"径向"}},Eo="",Lt={isWidget:f.bool.def(!1),pickerType:f.oneOf(["fk","chrome"]).def("fk"),shape:f.oneOf(["circle","square"]).def("square"),pureColor:{type:[String,Object],default:"#000000"},gradientColor:f.string.def("linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%)"),format:{type:String,default:"rgb"},disableAlpha:f.bool.def(!1),disableHistory:f.bool.def(!1),roundHistory:f.bool.def(!1),useType:f.oneOf(["pure","gradient","both"]).def("pure"),activeKey:f.oneOf(["pure","gradient"]).def("pure"),lang:{type:String,default:"ZH-cn"},zIndex:f.number.def(9999),pickerContainer:{type:[String,HTMLElement],default:"body"},debounce:f.number.def(100),theme:f.oneOf(["white","black"]).def("white"),blurClose:f.bool.def(!1),defaultPopup:f.bool.def(!1)},Kt=e.defineComponent({name:"ColorPicker",components:{FkColorPicker:re,ChromeColorPicker:le,GradientColorPicker:ie,WrapContainer:It},inheritAttrs:!1,props:Lt,emits:["update:pureColor","pureColorChange","update:gradientColor","gradientColorChange","update:activeKey","activeKeyChange"],setup(t,{emit:o}){e.provide(T,{lang:e.computed(()=>Dt[t.lang||"ZH-cn"])});const n=!!e.useSlots().extra,a=e.reactive({pureColor:t.pureColor||"",activeKey:t.useType==="gradient"?"gradient":t.activeKey,isAdvanceMode:!1}),c=new N("#000"),s=new N("#000"),r=new N(a.pureColor),l=e.reactive({startColor:c,endColor:s,startColorStop:0,endColorStop:100,angle:0,type:"linear",gradientColor:t.gradientColor}),d=e.ref(r),B=e.ref(t.defaultPopup),p=e.ref(null),g=e.ref(null);let h=null;const y=e.computed(()=>({background:a.activeKey!=="gradient"?V(a.pureColor).toRgbString():l.gradientColor})),b=e.computed(()=>a.activeKey==="gradient"?ie.name:t.pickerType==="fk"?re.name:le.name),u=i=>{a.isAdvanceMode=i},_=e.computed(()=>{const i={disableAlpha:t.disableAlpha,disableHistory:t.disableHistory,roundHistory:t.roundHistory,pickerType:t.pickerType};return a.activeKey==="gradient"?{...i,startColor:l.startColor,endColor:l.endColor,angle:l.angle,type:l.type,startColorStop:l.startColorStop,endColorStop:l.endColorStop,onStartColorChange:k=>{l.startColor=k,H()},onEndColorChange:k=>{l.endColor=k,H()},onStartColorStopChange:k=>{l.startColorStop=k,H()},onEndColorStopChange:k=>{l.endColorStop=k,H()},onAngleChange:k=>{l.angle=k,H()},onTypeChange:k=>{l.type=k,H()},onAdvanceChange:u}:{...i,disableAlpha:t.disableAlpha,disableHistory:t.disableHistory,roundHistory:t.roundHistory,color:d.value,onChange:K,onAdvanceChange:u}}),C=()=>{B.value=!0,h?h.update():L()},$=()=>{B.value=!1},S=m.useDebounceFn(()=>{!t.isWidget&&t.blurClose&&$()},100);m.onClickOutside(g,()=>{$()});const I=()=>{var i,k,E,A;try{const[M]=te.parse(l.gradientColor);if(M&&M.type.includes("gradient")&&M.colorStops.length>=2){const ce=M.colorStops[0],de=M.colorStops[1];l.startColorStop=Number((i=ce.length)==null?void 0:i.value)||0,l.endColorStop=Number((k=de.length)==null?void 0:k.value)||0,M.type==="linear-gradient"&&((E=M.orientation)==null?void 0:E.type)==="angular"&&(l.angle=Number((A=M.orientation)==null?void 0:A.value)||0),l.type=M.type.split("-")[0];const[Gt,Xt,Yt,jt]=ce.value,[Ut,Zt,Jt,Qt]=de.value;l.startColor=new N({r:Number(Gt),g:Number(Xt),b:Number(Yt),a:Number(jt)}),l.endColor=new N({r:Number(Ut),g:Number(Zt),b:Number(Jt),a:Number(Qt)})}}catch(M){console.log(`[Parse Color]: ${M}`)}},H=m.useDebounceFn(()=>{const i=R();try{l.gradientColor=te.stringify(i),o("update:gradientColor",l.gradientColor),o("gradientColorChange",l.gradientColor)}catch(k){console.log(k)}},t.debounce),R=()=>{const i=[],k=l.startColor.RGB.map(M=>M.toString()),E=l.endColor.RGB.map(M=>M.toString()),A=[{type:"rgba",value:[k[0],k[1],k[2],k[3]],length:{value:l.startColorStop+"",type:"%"}},{type:"rgba",value:[E[0],E[1],E[2],E[3]],length:{value:l.endColorStop+"",type:"%"}}];return l.type==="linear"?i.push({type:"linear-gradient",orientation:{type:"angular",value:l.angle+""},colorStops:A}):l.type==="radial"&&i.push({type:"radial-gradient",orientation:[{type:"shape",value:"circle"}],colorStops:A}),i},L=()=>{p.value&&g.value&&(h=he.createPopper(p.value,g.value,{placement:"auto",modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"flip",options:{allowedAutoPlacements:["top","bottom","left","right"],rootBoundary:"viewport"}}]}))},K=i=>{d.value=i,a.pureColor=i.toString(t.format),D()},D=m.useDebounceFn(()=>{o("update:pureColor",a.pureColor),o("pureColorChange",a.pureColor)},t.debounce),ee=i=>{a.activeKey=i,o("update:activeKey",i),o("activeKeyChange",i)};return m.tryOnMounted(()=>{I(),h||L()}),m.whenever(()=>t.gradientColor,i=>{i!=l.gradientColor&&(l.gradientColor=i)}),m.whenever(()=>l.gradientColor,()=>{I()}),m.whenever(()=>t.activeKey,i=>{a.activeKey=i}),m.whenever(()=>t.useType,i=>{a.activeKey!=="gradient"&&i==="gradient"?a.activeKey="gradient":a.activeKey="pure"}),m.whenever(()=>t.pureColor,i=>{V.equals(i,a.pureColor)||(a.pureColor=i,d.value=new N(i))},{deep:!0}),{colorCubeRef:p,pickerRef:g,showPicker:B,colorInstance:d,getBgColorStyle:y,getComponentName:b,getBindArgs:_,state:a,hasExtra:n,onColorChange:K,onShowPicker:C,onActiveKeyChange:ee,onAutoClose:S}}}),Ot={key:0,class:"vc-color-extra"},Wt={key:0,class:"vc-color-extra"};function Ft(t,o,n,a,c,s){const r=e.resolveComponent("WrapContainer");return e.openBlock(),e.createElementBlock(e.Fragment,null,[t.isWidget?(e.openBlock(),e.createBlock(r,{key:0,"active-key":t.state.activeKey,"onUpdate:activeKey":o[0]||(o[0]=l=>t.state.activeKey=l),"show-tab":t.useType==="both",style:e.normalizeStyle({zIndex:t.zIndex}),theme:t.theme,onChange:t.onActiveKeyChange},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.getComponentName),e.mergeProps({key:t.getComponentName},t.getBindArgs),null,16)),t.hasExtra?(e.openBlock(),e.createElementBlock("div",Ot,[e.renderSlot(t.$slots,"extra",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:3},8,["active-key","show-tab","style","theme","onChange"])):e.createCommentVNode("",!0),t.isWidget?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",{class:e.normalizeClass(["vc-color-wrap transparent",{round:t.shape==="circle"}]),ref:"colorCubeRef"},[e.createElementVNode("div",{class:"current-color",style:e.normalizeStyle(t.getBgColorStyle),onClick:o[1]||(o[1]=(...l)=>t.onShowPicker&&t.onShowPicker(...l))},null,4)],2),(e.openBlock(),e.createBlock(e.Teleport,{to:t.pickerContainer},[e.withDirectives(e.createElementVNode("div",{ref:"pickerRef",style:e.normalizeStyle({zIndex:t.zIndex}),onMouseleave:o[3]||(o[3]=(...l)=>t.onAutoClose&&t.onAutoClose(...l))},[t.showPicker?(e.openBlock(),e.createBlock(r,{key:0,"show-tab":t.useType==="both"&&!t.state.isAdvanceMode,theme:t.theme,"active-key":t.state.activeKey,"onUpdate:activeKey":o[2]||(o[2]=l=>t.state.activeKey=l),onChange:t.onActiveKeyChange},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.getComponentName),e.mergeProps({key:t.getComponentName},t.getBindArgs),null,16)),t.hasExtra?(e.openBlock(),e.createElementBlock("div",Wt,[e.renderSlot(t.$slots,"extra",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:3},8,["show-tab","theme","active-key","onChange"])):e.createCommentVNode("",!0)],36),[[e.vShow,t.showPicker]])],8,["to"]))],64))],64)}const W=z(Kt,[["render",Ft],["__scopeId","data-v-354ca836"]]),qt={install:t=>{t.component(W.name,W),t.component("Vue3"+W.name,W)}};w.ColorPicker=W,w.default=qt,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

2

package.json
{
"name": "vue3-colorpicker",
"version": "2.2.3",
"version": "2.3.0",
"main": "index.es.js",

@@ -5,0 +5,0 @@ "types": "types/index.d.ts",

1

types/chrome/ChromeColorPicker.vue.d.ts

@@ -48,2 +48,3 @@ import { Color } from "../utils/color";

onBoardChange: (saturation: number, brightness: number) => void;
onInputChange: (color: Color) => void;
onCompactChange: (color: string) => void;

@@ -50,0 +51,0 @@ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:color" | "change")[], "update:color" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

40

types/ColorPicker.vue.d.ts

@@ -75,2 +75,12 @@ import { ExtractPropTypes, PropType } from "vue";

};
blurClose: import("vue-types").VueTypeValidableDef<boolean> & {
default: boolean;
} & {
default: boolean;
};
defaultPopup: import("vue-types").VueTypeValidableDef<boolean> & {
default: boolean;
} & {
default: boolean;
};
};

@@ -149,2 +159,12 @@ declare type ColorPickerProps = Partial<ExtractPropTypes<typeof colorPickerProps>>;

};
blurClose: import("vue-types").VueTypeValidableDef<boolean> & {
default: boolean;
} & {
default: boolean;
};
defaultPopup: import("vue-types").VueTypeValidableDef<boolean> & {
default: boolean;
} & {
default: boolean;
};
}, {

@@ -174,5 +194,2 @@ colorCubeRef: import("vue").Ref<HTMLElement | null>;

}>;
onColorChange: (v: Color) => void;
onShowPicker: () => void;
onActiveKeyChange: (key: string) => void;
getComponentName: import("vue").ComputedRef<string>;

@@ -295,2 +312,7 @@ getBindArgs: import("vue").ComputedRef<{

};
hasExtra: boolean;
onColorChange: (v: Color) => void;
onShowPicker: () => void;
onActiveKeyChange: (key: string) => void;
onAutoClose: import("@vueuse/shared").PromisifyFn<() => void>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:activeKey" | "update:pureColor" | "pureColorChange" | "update:gradientColor" | "gradientColorChange" | "activeKeyChange")[], "update:activeKey" | "update:pureColor" | "pureColorChange" | "update:gradientColor" | "gradientColorChange" | "activeKeyChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{

@@ -366,2 +388,12 @@ isWidget: import("vue-types").VueTypeValidableDef<boolean> & {

};
blurClose: import("vue-types").VueTypeValidableDef<boolean> & {
default: boolean;
} & {
default: boolean;
};
defaultPopup: import("vue-types").VueTypeValidableDef<boolean> & {
default: boolean;
} & {
default: boolean;
};
}>> & {

@@ -391,3 +423,5 @@ "onUpdate:activeKey"?: ((...args: any[]) => any) | undefined;

theme: string;
blurClose: boolean;
defaultPopup: boolean;
}, {}>;
export default _default;

4

types/common/Board.vue.d.ts

@@ -25,3 +25,5 @@ import { Color } from "../utils/color";

}>;
onClickBoard: (event: Event) => void;
onClickBoard: (event: MouseEvent) => void;
onDrag: (event: MouseEvent) => void;
onDragEnd: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

@@ -28,0 +30,0 @@ color: import("vue-types").VueTypeDef<Color>;

5

types/common/Display.vue.d.ts

@@ -29,3 +29,3 @@ import { Color } from "../utils/color";

hex: string | undefined;
alpha: string;
alpha: number;
rgba: number[] | undefined;

@@ -38,5 +38,8 @@ previewBgColor: string | undefined;

inputType: import("vue").Ref<"hex" | "rgba">;
copied: import("vue").ComputedRef<boolean>;
onInputTypeChange: () => void;
onAlphaBlur: import("@vueuse/shared").PromisifyFn<(event: any) => void>;
onInputChange: import("@vueuse/shared").PromisifyFn<(event: any, key?: number | undefined) => void>;
onBlurChange: import("@vueuse/shared").PromisifyFn<(event: any, key?: number | undefined) => void>;
onCopyColorStr: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:color" | "change")[], "update:color" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

@@ -43,0 +46,0 @@ color: import("vue-types").VueTypeDef<Color>;

style.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc