color-picker-plus
Version:
423 lines (422 loc) • 30.1 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.left-\\[50\\%\\]{left:50%}.top-\\[-10px\\]{top:-10px}.top-\\[50px\\]{top:50px}.mx-auto{margin-left:auto;margin-right:auto}.my-\\[10px\\]{margin-top:10px;margin-bottom:10px}.my-\\[300px\\]{margin-top:300px;margin-bottom:300px}.ml-2{margin-left:.5rem}.ml-\\[-25\\%\\]{margin-left:-25%}.mr-\\[10px\\]{margin-right:10px}.mt-1{margin-top:.25rem}.mt-\\[10px\\]{margin-top:10px}.mt-\\[12px\\]{margin-top:12px}.flex{display:flex}.h-\\[10px\\]{height:10px}.h-\\[12px\\]{height:12px}.h-\\[180px\\]{height:180px}.h-\\[20px\\]{height:20px}.h-\\[25px\\]{height:25px}.h-\\[40px\\]{height:40px}.h-full{height:100%}.w-10\\/12{width:83.333333%}.w-\\[20px\\]{width:20px}.w-\\[25px\\]{width:25px}.w-\\[300px\\]{width:300px}.w-full{width:100%}.flex-grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.rounded{border-radius:.25rem}.border{border-width:1px}.border-\\[\\#4d79ff\\]{--tw-border-opacity: 1;border-color:rgb(77 121 255 / var(--tw-border-opacity))}.border-\\[\\#e6e6e6\\]{--tw-border-opacity: 1;border-color:rgb(230 230 230 / var(--tw-border-opacity))}.bg-\\[\\#4d79ff\\]{--tw-bg-opacity: 1;background-color:rgb(77 121 255 / var(--tw-bg-opacity))}.px-\\[10px\\]{padding-left:10px;padding-right:10px}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.px-\\[15px\\]{padding-left:15px;padding-right:15px}.py-\\[12px\\]{padding-top:12px;padding-bottom:12px}.py-\\[3px\\]{padding-top:3px;padding-bottom:3px}.py-\\[5px\\]{padding-top:5px;padding-bottom:5px}.text-center{text-align:center}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[\\#4d79ff\\]{--tw-text-opacity: 1;color:rgb(77 121 255 / var(--tw-text-opacity))}.text-\\[\\#fff\\]{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.outline{outline-style:solid}html,body{font-size:14px;color:#333}.leiy-hue-box{font-size:12px;background-color:#fff}.leiy-hue-box .colorBar-box{cursor:pointer;position:relative}.leiy-hue-box .colorBar-box .color-slider{background:linear-gradient(to right,#f00,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00)}.leiy-hue-box .colorBar-box .color-slider .color-columnar{top:0px;width:6px;height:10px;background-color:#fff;box-shadow:0 0 2px #1c1c1c}.leiy-hue-box .colorBar-box .alpha-slider{position:relative;margin-top:5px;height:8px;box-shadow:1px 1px 1px #0000001a;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);background-size:8px 8px}.leiy-hue-box .colorBar-box .alpha-slider .alpha-columnar{top:0px;width:6px;height:10px;background-color:#fff;box-shadow:0 0 2px #1c1c1c}.leiy-hue-box .colorBar-box .color-show-box{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);background-size:8px 8px}.leiy-hue-box .colorBar-box .color-thumb{position:absolute;left:-3px;transform:translateY(-3px);border-radius:2px;background-color:#0a0a0a;border:3px solid #fff;margin-left:9px}.leiy-hue-box .saturation-box1 .origin{width:6px;height:6px;border:1px #000 solid;z-index:99;border-radius:100%}.leiy-hue-box .saturation-box2{background:linear-gradient(to right,white,transparent)}.leiy-hue-box .saturation-box3{background:linear-gradient(to top,black,transparent)}.leiy-hue-box .color-show{display:flex;text-align:center}.leiy-hue-box .color-show input{border:1px #f1f2f5 solid;width:100%;text-align:center}.leiy-select-box{min-width:200px}.leiy-select-box .leiy-colorPicker-box{box-shadow:0 2px 12px #0000001a;background:#fff;z-index:999}.leiy-select-box .tip{width:12%;max-width:20px}.leiy-select-box .color-box{width:80%}.leiy-select-box .trangle2{width:0px;height:0px;border-bottom:#e6e6e6 10px solid;border-left:transparent 8px solid;border-right:transparent 8px solid}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { ref as h, defineComponent as ue, reactive as L, watch as ge, onMounted as ie, openBlock as E, createElementBlock as O, createElementVNode as s, normalizeStyle as A, unref as m, Fragment as he, renderList as Ie, toDisplayString as xe, createCommentVNode as re, withDirectives as b, vModelText as M, createVNode as Re } from "vue";
const Be = (l, o) => {
const a = l;
return a.install = (u) => {
u.component(a.name || a.displayName, l), o && (u.config.globalProperties[o] = l);
}, l;
};
function q(l = 0, o = 0, a = 0, u = !1) {
const n = (1 - Math.abs(2 * a - 1)) * o, c = n * (1 - Math.abs(l / 60 % 2 - 1)), r = a - n / 2, d = [];
l >= 0 && l < 60 ? d.push(n, c, 0) : l >= 60 && l < 120 ? d.push(c, n, 0) : l >= 120 && l < 180 ? d.push(0, n, c) : l >= 180 && l < 240 ? d.push(0, c, n) : l >= 240 && l < 300 ? d.push(c, 0, n) : l >= 300 && l < 360 && d.push(n, 0, c);
const [x, w, R] = d, I = Math.ceil(255 * (x + r)), f = Math.floor(255 * (w + r)), g = Math.ceil(255 * (R + r));
return u ? `rgb(${I},${f},${g})` : { R: I, G: f, B: g };
}
function te(l) {
if (!/^(rgb|RGB)/.test(l))
return !1;
let o = l.split(","), a = +o[0].split("(")[1], u = +o[1], n = +o[2].split(")")[0];
return "#" + ((1 << 24) + (a << 16) + (u << 8) + n).toString(16).slice(1);
}
function Se(l, o = 1) {
let a = l.slice(1);
if (a.length === 6) {
let u = a;
return {
R: parseInt("0x" + u.slice(0, 2)),
G: parseInt("0x" + u.slice(2, 4)),
B: parseInt("0x" + u.slice(4, 6))
};
}
}
function oe(l, o, a) {
l = l / 255, o = o / 255, a = a / 255;
var u = Math.min(l, o, a), n = Math.max(l, o, a), c = (u + n) / 2, r = n - u;
let d = 0, x = 0;
if (n == u)
d = 0, x = 0;
else {
switch (x = c > 0.5 ? r / (2 - n - u) : r / (n + u), n) {
case l:
d = (o - a) / r + (o < a ? 6 : 0);
break;
case o:
d = 2 + (a - l) / r;
break;
case a:
d = 4 + (l - o) / r;
break;
}
d = Math.floor(d * 60);
}
return x = Math.round(x * 100), c = Math.round(c * 100), {
h: d,
s: x,
l: c
};
}
h(!1);
const p = h();
function Xe(l) {
l != null && l.disabled || (l = { ...l, disabled: !1 }), p.value = l;
function o() {
console.log("useColor instance");
}
return [o, {
// 测试方法
// getColor,
}];
}
const ye = { class: "leiy-hue-box w-full" }, ke = { class: "w-full h-[180px]" }, we = /* @__PURE__ */ s("div", { class: "saturation-box2 w-full h-full absolute" }, null, -1), Ue = /* @__PURE__ */ s("div", { class: "saturation-box3 w-full h-full absolute" }, null, -1), Ae = {
key: 0,
class: "default flex justify-start items-center my-[10px]"
}, me = ["onClick"], je = { class: "colorBar-box w-full mt-[10px] flex justify-between items-center" }, He = { class: "w-10/12" }, Ce = { class: "color-show-box" }, Fe = { class: "color-show flex w-full gap-2 mt-[10px]" }, be = { class: "flex-grow w-full" }, Ee = /* @__PURE__ */ s("p", { class: "mt-1" }, "hex", -1), Oe = /* @__PURE__ */ s("p", { class: "mt-1" }, "r", -1), Qe = /* @__PURE__ */ s("p", { class: "mt-1" }, "g", -1), Me = /* @__PURE__ */ s("p", { class: "mt-1" }, "b", -1), Ve = /* @__PURE__ */ s("p", { class: "mt-1" }, "a", -1), Ge = /* @__PURE__ */ ue({
__name: "colorPicker",
setup(l, { expose: o }) {
const a = h(), u = h(0), n = h(100), c = h(50), r = h(), d = h(), x = h(), w = h("#f00f00"), R = h(0), I = h(0), f = h(0), g = h(1), S = L({
//颜色面板
left: 0,
top: 0
}), H = L({
//色柱
left: 0
}), j = L({
//色柱
left: 0
}), V = (t) => {
if (t.target.value.length >= 7) {
let e = Se(t.target.value);
r.value = `rgb(${e == null ? void 0 : e.R},${e == null ? void 0 : e.G},${e == null ? void 0 : e.B})`, G(e);
let i = oe((e == null ? void 0 : e.R) || 0, (e == null ? void 0 : e.G) || 0, (e == null ? void 0 : e.B) || 0);
D(i);
}
}, C = (t, e) => {
e === "R" && (R.value = t.target.value > 255 ? 255 : t.target.value), e === "G" && (I.value = t.target.value > 255 ? 255 : t.target.value), e === "B" && (f.value = t.target.value > 255 ? 255 : t.target.value), e === "a" && (g.value = t.target.value > 1 ? 1 : t.target.value);
const i = oe(R.value, I.value, f.value);
r.value = `rgb(${R.value},${f.value},${f.value})`, D(i);
}, ce = (t) => {
let e = a.value.clientWidth, i = a.value.clientHeight, y = t.offsetX, v = t.offsetY;
n.value = Math.floor(y / e * 100), c.value = Math.ceil(50 - v / i * 50);
let F = q(u.value, n.value / 100, c.value / 100);
console.log(u.value, n.value, c.value), G(F);
}, N = (t) => {
let e = d.value.clientWidth, i = t.pageX - a.value.getBoundingClientRect().left;
H.left = i > 0 && i < e - 5 ? i : i >= e - 5 ? e - 5 : 0, u.value = Math.floor(H.left / e * 360);
let y = q(u.value, n.value / 100, c.value / 100);
G(y);
}, de = (t) => {
window.addEventListener("mousemove", N), window.addEventListener("mouseup", T);
};
function T() {
window.removeEventListener("mousemove", N), window.removeEventListener("mouseup", T);
}
const ve = (t) => {
window.addEventListener("mousemove", W), window.addEventListener("mouseup", Y);
};
function Y() {
window.removeEventListener("mousemove", W), window.removeEventListener("mouseup", Y);
}
const W = (t) => {
let e = x.value.clientWidth, i = t.pageX - a.value.getBoundingClientRect().left;
j.left = i > 0 && i < e - 5 ? i : i >= e - 6 ? e - 6 : 0, g.value = Math.floor((j.left + 6) / e * 100) / 100;
}, G = (t) => {
r.value = `rgb(${t.R},${t.G},${t.B})`, R.value = t.R, I.value = t.G, f.value = t.B, w.value = te(r.value) || "", X();
}, D = (t) => {
console.log(t), u.value = t.h, n.value = t.s, c.value = t.l, w.value = te(r.value) || "", X();
}, X = () => {
let t = a.value.clientWidth, e = a.value.clientHeight, i = Math.ceil(n.value / 100 * t), y = e - Math.ceil(c.value / 50 * e);
S.left = i < 0 ? 0 : i > t - 5 ? t - 6 : i, S.top = y < 0 ? 0 : y > e - 5 ? e - 6 : y;
let v = d.value.clientWidth, F = Math.floor(u.value / 360 * v);
H.left = F;
}, pe = (t) => {
let e = (t == null ? void 0 : t.type) || "hex", i = "";
switch (e) {
case "hsl":
i = `hsl(${u.value},${n.value}%,${c.value}%)`;
break;
case "rgb":
i = `${r.value}`;
break;
case "rgba":
i = `rgb(${R.value},${I.value},${f.value},${g.value})`;
break;
case "hex":
i = w.value;
break;
}
return i;
};
return ge(
() => p.value,
(t) => {
t && console.log(t, p.value, "watch");
}
), ie(() => {
var e, i, y, v, F, Z, P, $, z, ee, le;
try {
console.log("mounted"), console.log((e = p.value) == null ? void 0 : e.defaultColor);
let k = q(u.value, n.value / 100, c.value / 100);
if (r.value = `rgb(${k == null ? void 0 : k.R},${k == null ? void 0 : k.G},${k == null ? void 0 : k.B})`, G(k), j.left = d.value.clientWidth - 6, (i = p.value) != null && i.defaultColor) {
if (((y = p.value) == null ? void 0 : y.type) === "hex")
V({ target: { value: (v = p.value) == null ? void 0 : v.defaultColor } });
else if (((F = p.value) == null ? void 0 : F.type) === "rgb" || ((Z = p.value) == null ? void 0 : Z.type) === "rgba")
if (console.log("rgba"), ((P = p.value) == null ? void 0 : P.type) === "rgb") {
var t = /^rgb\(((,?\s*\d+){3}).+$/;
let B = ($ = p.value) == null ? void 0 : $.defaultColor.replace(t, "$1").split(",");
I.value = Number((B == null ? void 0 : B[1]) || 0), f.value = Number((B == null ? void 0 : B[2]) || 0), console.log(B, "color"), C({ target: { value: Number((B == null ? void 0 : B[0]) || 0) } }, "R");
} else {
let B = (z = p.value) == null ? void 0 : z.defaultColor.split(","), U = +B[0].split("(")[1], J = +B[1], _ = +B[2], Q = +B[3].split(")")[0];
I.value = Number(J), f.value = Number(_), g.value = Q, C({ target: { value: Number(U) } }, "R");
let fe = x.value.clientWidth;
j.left = Math.floor(g.value * 100 / 100 * fe);
}
else if (((ee = p.value) == null ? void 0 : ee.type) === "hsl") {
var t = /^hsl\(((,?\s*\d+%*){3}).+$/;
let U = (le = p.value) == null ? void 0 : le.defaultColor.replace(t, "$1").split(",");
const J = Number(U == null ? void 0 : U[1].replace("%", "")), _ = Number(U == null ? void 0 : U[2].replace("%", ""));
let Q = q(Number(U == null ? void 0 : U[0]), J / 100, _ / 100);
I.value = Q.G, f.value = Q.B, g.value = 1, C({ target: { value: Q.R } }, "R");
}
}
} catch (k) {
console.log("错误"), console.log(k);
}
}), o({ getColor: pe }), (t, e) => {
var i, y;
return E(), O("div", ye, [
s("div", ke, [
s("div", {
class: "w-full h-full relative",
ref_key: "hueBox",
ref: a,
onMousedown: ce
}, [
s("div", {
class: "saturation-box1 w-full h-full absolute",
style: A(`background-color: hsl(${u.value}, 100%, 50%);`)
}, [
s("div", {
class: "origin absolute",
style: A({ left: S.left + "px", top: S.top + "px" })
}, null, 4)
], 4),
we,
Ue
], 544)
]),
(i = m(p)) != null && i.usuallyColorBlock ? (E(), O("div", Ae, [
(E(!0), O(he, null, Ie((y = m(p)) == null ? void 0 : y.usuallyColorBlock, (v) => (E(), O("div", {
class: "color-item w-[20px] h-[20px] mr-[10px] rounded",
onClick: (F) => V({ target: { value: v } }),
style: A(`background:${v}`),
key: v
}, xe(), 13, me))), 128))
])) : re("", !0),
s("div", je, [
s("div", He, [
s("div", {
class: "color-slider w-full h-[10px] relative",
ref_key: "colorBar",
ref: d,
onClick: N,
onMousedown: de
}, [
s("div", {
class: "color-columnar absolute",
style: A({ left: H.left + "px" })
}, null, 4)
], 544),
s("div", {
class: "w-full h-[12px] alpha-slider",
ref_key: "alpha_slider",
ref: x,
onClick: W,
onMousedown: ve
}, [
s("div", {
class: "alpha-columnar absolute",
style: A({ left: j.left + "px" })
}, null, 4),
s("div", {
style: A(`background: linear-gradient(to right, rgba(0,0,0,0), ${r.value});width: 100%;height: 100%`)
}, null, 4)
], 544)
]),
s("div", Ce, [
s("div", {
class: "w-[25px] h-[25px]",
style: A(`background-color: rgba(${R.value},${I.value},${f.value},${g.value})`)
}, null, 4)
])
]),
s("div", Fe, [
s("div", be, [
b(s("input", {
type: "text",
"onUpdate:modelValue": e[0] || (e[0] = (v) => w.value = v),
onInput: V
}, null, 544), [
[M, w.value]
]),
Ee
]),
s("div", null, [
b(s("input", {
type: "text",
"onUpdate:modelValue": e[1] || (e[1] = (v) => R.value = v),
onInput: e[2] || (e[2] = (v) => C(v, "R"))
}, null, 544), [
[M, R.value]
]),
Oe
]),
s("div", null, [
b(s("input", {
type: "text",
"onUpdate:modelValue": e[3] || (e[3] = (v) => I.value = v),
onInput: e[4] || (e[4] = (v) => C(v, "G"))
}, null, 544), [
[M, I.value]
]),
Qe
]),
s("div", null, [
b(s("input", {
type: "text",
"onUpdate:modelValue": e[5] || (e[5] = (v) => f.value = v),
onInput: e[6] || (e[6] = (v) => C(v, "B"))
}, null, 544), [
[M, f.value]
]),
Me
]),
s("div", null, [
b(s("input", {
type: "text",
"onUpdate:modelValue": e[7] || (e[7] = (v) => g.value = v),
onInput: e[8] || (e[8] = (v) => C(v, "a"))
}, null, 544), [
[M, g.value]
]),
Ve
])
])
]);
};
}
});
const qe = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAGE0lEQVR4nO3af60kxxVH8VsIUgxiBqkw8GOQMKgwcBiEwUIIhEAoBYHHDBbCmIFPyV55vX57t+a9+dE9fT7SUQO4+kr1R5eQ9FUOREo4ECnhQKSEA5ESDkRKOBAp4UCkhAOREg5ESjgQKeFApIQDkRIOREo4ECnhQKSEA5ESDkRKOBAp4UCkhAOREg5ESjgQKeFApIQDkRIOREo4ECnhQKSEA5ESDkRKOBAp4UCkhAOREg5ESjgQKeFApIQDkRIOREo4ECnhQKSEA5ESDkRKOBAp4UCkhAOREg5ESjgQKeFApIQDkRIOREo4ECnhQKSEA5ESDkRKOBAp4UCkhAOREg5ESjgQKeFApIQDkRIOREo4ECnhQKSEA5ESexnIdxHxV5r+T9q/Sn+j6Sc60+YU2roeER+o0nSif9H8ap8aDao0fYyIf9KJNqXQlvWI+C996UwvdCLtS6NBlT53ps3dtNBW9Xh9HJ+c6YVOpH1oNKjSa860qZsW2qLvIuJHqpQ50wudSNvWKBvHJyf6O21CoS36gT7QijO90Im0TY1WxvHJHMiJHq7QFvXIn1dfOtMLnUjb0mhQpVUO5BsqfYyIv9CqM73QibQNjS4dx0/UaBMKbdU/6H90iTO90In0WI0uHcfP9H1s6H6FtqzHZU+t6UwvdCI9RqNBlVZtbhxToa3r4Uj2pNGgSqs2OY6p0B70cCR70GhQpVWbHcdUaC96OJItazSo0qpNj2MqtCc9HMkWNRpUadXmxzEV2psejmRLGg2qtGoX45gK7VEPR7IFjQZVWrWbcUyF9qqHI3mkRoMqrdrVOKZCe9bDkTxCo0GVVu1uHFOhvevhSO6p0aBKq3Y5jqnQM+jhSO6h0aBKq3Y7jqnQs+jhSG6p0aBKq3Y9jqnQM+nhSG6h0aBKq3Y/jqnQs+nhSK6p0aBKq55iHFOhZ9TDkVxDo0GVVj3NOKZCz6qHI3mPRoMqrXqqcUyFnlkPR/IWjQZVWvV045gKPbsejuQSjQZVWvWU45gKHUEPR7Ki0aBKq552HFOho+jhSDKNBlVa9dTjmAodSQ9H8ppGgyqtevpxTIWOpocj+VyjQZVWHWIcU6Ej6uFIpkaDKq06zDimQkfV49gjaTSo0qpDjWMqdGQ9jjmSRoMqrTrcOKZCR9fjWCNpNKjSqkOOYyqk44yk0aBKqw47jqmQftXjuUfSaFClVYcex1RIv+vxnCNpNKjSqsOPYyqkP+rxXCNpNKjSKsfxm0L6sx7PMZJGgyqtchyfKaTX9dj3SBoNqrTKcXyhkL6uxz5H0mhQpVWO4xWFlOuxr5E0GlRpleP4ikL6th77GEmjQZVWOY5EIa3pse2RNBpUaZXj+IZCWtdjmyNpNKjSKsexoJAu02NbI2k0qNIqx7GokC7XYxsjaTSo0irHcYFCepsejx1Jo0GVVjmOCxXS2/V4zEgaDaq0ynG8QSG9T4/7jqTRoEqrHMcbFdL79bjPSBoNqrTKcbxDIV1Hj9uOpNGgSqscxzsV0vX0uM1IGg2qtMpxXEEhXVeP646k0aBKqxzHlRTS9fW4zkgaDaq0ynFcUSHdRo/3jaTRoEqrHMeVFdLt9HjbSP5NH6jSqp/p+3AcV+VAbq/H5SO5lOO4EQdyHz1uNxLHcUMO5H56XH8kjuPGHMh99bjeSBzHHTiQ++vx/pE4jjtxII/R4+0jcRx35EAep8flI3Ecd+ZAHqvH+kgcxwM4kMfr8e2ROI4HcSDb0OPrI3EcD+RAtqPHn0fiOB7MgWxLo//Er/9gfYyIH+hMehAHIiUciJRwIFLCgUgJByIlHIiUcCBSwoFICQciJRyIlHAgUsKBSAkHIiUciJRwIFLCgUgJByIlHIiUcCBSwoFICQciJRyIlHAgUsKBSAkHIiUciJRwIFLCgUgJByIlHIiUcCBSwoFICQciJRyIlHAgUsKBSAkHIiUciJRwIFLCgUgJByIlHIiUcCBSwoFICQciJRyIlHAgUsKBSAkHIiUciJRwIFLCgUgJByIlHIiUcCBSwoFICQciJRyIlHAgUsKBSAkHIiUciJRwIFLCgUgJByIlfgH8v3jYSYboWQAAAABJRU5ErkJggg==", Ke = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAGDklEQVR4nO3Y3ZGcSRFG4SwPCgswgfJgwQN5wJYHeIDkwXpArgWsByVMwANMwAQOKAbFrjQ5UzP983X3eSLOZV2+kRHVQtKzHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRzI8Qz6Pf2T/hW6KgdyHJ3+Rh/oyceI+ES6kka6vk6LBv1WRsQkXUEjXVen58bxJMORXEUjXU+nl8bxJMORXFwjXUen147jSYYjuahGurxOu+N4kuFILqaRLqvTW8fxJMORXEQjXU6n947jSYYjObtGuoxOpxrHkwxHclaNdH6dTj2OJxmO5Gwa6bw6nWscTzIcyVk00vl0ess4/kE/0I4MR3JyjXQenRYN2jEp40t/ph0ZX97rRBrp9DotGrRjUsZXGY7kqhrptDotGrRjUsa3MhzJ1TTS6XRaNGjHpIznZTiSq2ik0+i0aNCOSRkvy3AkF9dI79dp0aAdkzJeL8ORXFQjvU+nRYN2TMrYl+FILqaR3q7TokE7JmW8XYYjuYhGeptOiwbtmJTxfhmO5OwaaV+nRYN2TMo4nQxHclaNtKfTokE7JmWcXoYjOZtGer1OiwbtmJRxPhmO5Cwa6XU6LRq0Y1LG+WU4kpNrpJd1WjRox6SMy8lwJCfVSLVOiwbtmJRxeRmO5GQa6XmdFg3aMSnjejIcyUk00vd1WjRox6SM68twJO/WSN/qtGjQjkkZx5HhSN6lkX6t06JBOyZlHE+GI3mzRvqq06JBOyZlHFeGI3mTRvqi06JBOyZlHF+GI9nWSPc/jicZjmRLo0fXadGgHZMybk+GI3m1Ro+s06JBOyZl3K4MR/IqjR5Vp0WDdkzKuH0ZjuRFjR5Rp0WDdkzKuB8ZjqTU6NF0WjRox6SM+5PhSJ7V6JF0WjRox6SM+5XhSL6r0aPotGjQjkkZ9y/DkXyj0SPotGjQjkkZjyPDkfxKo3vXadGgHZMyHk+GI/m/Rves06JBOyZlPK4MR/I/je5Vp0WDdkzKUIYjuduBdFo0aMekDD3JePCRNLo3nRYN2jEpQ7+V8cAjaXRPOi0atGNShp6T8aAjaXQvOi0atGNShl6S8YAjaXQPOi0atGNShl4r48FG0ujWdVo0aMekDO3KeKCRNLplnRYN2jEpQ2+V8SAjaXSrOi0atGNSht4r4wFG0ugWdVo0aMekDJ1Kxp2PpNGt6bRo0I5JGTq1jDseSaNb0mnRoB2TMnQuGXc6kka3otOiQTsmZejcMu5wJI1uQadFg3ZMytClZNzZSBodXadFg3ZMytClZdzRSBodWadFg3ZMytC1ZNzJSBodVadFg3ZMytC1ZdzBSBod1aI/xp5JGTqKjP2RfKKPcRCNjugD/Z12TMrQ0WTsj+R39G+6ukZH9DEi/kqvNSlDR5WxN5I/0ec4gEZH9IFee0EmZejoMl4/Ei/IK3yOiB+oMilDtyLj5ZF8oo9xEI2OqtPniPgDfc+kDN2ajOdH8jP9GAfS6MieG8mkDN2qjG9H8jP9GAfT6BZ8jK9fvj/RL6Tb9hf6QP/1E/1Ch3MrA5GuwoFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUsGBSAUHIhUciFRwIFLBgUgFByIVHIhUcCBSwYFIBQciFRyIVHAgUuE/x/X/yWkIafgAAAAASUVORK5CYII=";
function ae(l, o, a) {
l && o && a && l.addEventListener(o, a, !1);
}
const Ne = typeof window > "u", K = /* @__PURE__ */ new Map();
let se;
Ne || (ae(document, "mousedown", (l) => se = l), ae(document, "mouseup", (l) => {
for (const { documentHandler: o } of K.values())
o(l, se);
}));
function ne(l, o) {
let a = [];
return Array.isArray(o.arg) ? a = o.arg : a.push(o.arg), function(u, n) {
const c = o.instance.popperRef, r = u.target, d = n.target, x = !o || !o.instance, w = !r || !d, R = l.contains(r) || l.contains(d), I = l === r, f = a.length && a.some((S) => S == null ? void 0 : S.contains(r)) || a.length && a.includes(d), g = c && (c.contains(r) || c.contains(d));
x || w || R || I || f || g || o.value();
};
}
const We = {
beforeMount(l, o) {
K.set(l, {
documentHandler: ne(l, o),
bindingFn: o.value
});
},
updated(l, o) {
K.set(l, {
documentHandler: ne(l, o),
bindingFn: o.value
});
},
unmounted(l) {
K.delete(l);
}
}, Je = ["src"], _e = /* @__PURE__ */ s("div", { class: "trangle2 absolute top-[-10px] left-[50%] ml-[-25%]" }, null, -1), Le = { class: "btn-group mt-[12px] flex justify-end text-[12px] text-[#fff]" }, Te = {
// 导出组件name
name: "ColorPicker"
}, Ye = /* @__PURE__ */ ue({
...Te,
props: {
value: {
type: String
}
},
emits: ["update:value"],
setup(l, { emit: o }) {
const a = l, u = h(), n = h(!1), c = h(), r = h(), d = h(0), x = () => {
var f;
(f = p.value) != null && f.disabled || (n.value = !n.value);
};
function w() {
n.value = !1, u.value = c.value.getColor(p.value), console.log(u.value), o("update:value", u.value);
}
function R() {
n.value = !1;
}
function I() {
R();
}
return ie(() => {
var g, S;
console.log(a.value), (g = p.value) != null && g.defaultColor && (u.value = p.value.defaultColor);
const f = ((S = p.value) == null ? void 0 : S.modalwidth) || 300;
d.value = r.value.clientWidth > f ? r.value.clientWidth - f : 0;
}), (f, g) => {
var S, H, j;
return b((E(), O("div", {
class: "leiy-select-box text-center relative w-full",
ref_key: "colorSelectBox",
ref: r,
style: A({ background: (S = m(p)) != null && S.disabled ? "#f5f5f5" : "transparent", cursor: (H = m(p)) != null && H.disabled ? "not-allowed" : "pointer" })
}, [
s("div", {
class: "border border-[#e6e6e6] h-[40px] px-[10px] py-[5px] flex justify-between items-center",
onClick: x
}, [
s("div", {
class: "color-box h-full border border-[#e6e6e6]",
style: A(`background-color:${u.value}`)
}, null, 4),
s("img", {
src: n.value ? m(Ke) : m(qe),
class: "tip"
}, null, 8, Je)
]),
n.value ? (E(), O("div", {
key: 0,
class: "leiy-colorPicker-box border border-[#e6e6e6] w-[300px] px-[12px] py-[12px] rounded absolute top-[50px]",
style: A({ left: `${d.value}px`, width: (j = m(p)) != null && j.modalwidth ? `${m(p).modalwidth}px` : "300px" })
}, [
Re(Ge, {
ref_key: "colorPicker",
ref: c
}, null, 512),
_e,
s("div", Le, [
s("div", {
class: "border text-[11px] border-[#4d79ff] rounded text-[#4d79ff] px-[15px] py-[3px] cursor-pointer",
onClick: R
}, "取消"),
s("div", {
class: "border rounded bg-[#4d79ff] px-[15px] py-[3px] cursor-pointer ml-2",
onClick: g[0] || (g[0] = (V) => w())
}, "确定")
])
], 4)) : re("", !0)
], 4)), [
[m(We), I]
]);
};
}
});
const Ze = Be(Ye);
export {
Ze as ColorPicker,
Xe as useColor
};