colorspick
Version:
801 lines (799 loc) • 30 kB
JavaScript
import { useCssVars as le, unref as u, useAttrs as ne, computed as S, onMounted as ce, watch as de, ref as I, reactive as ue, openBlock as v, createElementBlock as w, Fragment as M, createElementVNode as s, mergeProps as he, toDisplayString as P, renderSlot as _, createCommentVNode as L, normalizeStyle as f, renderList as $, normalizeClass as A, withDirectives as ee, vShow as te, pushScopeId as pe, popScopeId as ge } from "vue";
const O = (h) => {
const o = document.createElement("textarea");
o.setAttribute("readonly", "readonly"), o.value = h, document.body.appendChild(o), o.select();
const e = document.execCommand("copy");
return document.body.removeChild(o), e;
};
function ve() {
const h = [];
for (let p = 0; p < 3; p++)
h.push(Math.floor(128 * Math.random() + 128));
const [o, e, l] = h;
return `#${o.toString(16).length > 1 ? o.toString(16) : "0" + o.toString(16)}${e.toString(16).length > 1 ? e.toString(16) : "0" + e.toString(16)}${l.toString(16).length > 1 ? l.toString(16) : "0" + l.toString(16)}`;
}
class we {
constructor(o, e, l) {
this.colorArr = o, this.slideW = Number(e), this.iconS = Number(l), this.biLi = this.slideW / 100, this.ofLeft = 0, this.dwonWindowX = 0, this.downColorX = 0, this.downColorIndex = 0, this.isMove = !1, this.evArr = [], this.startEvName = null, this.moveEvName = null, this.endEvName = null, this.init();
}
init() {
this.colorArr.forEach((c) => {
if (c.tiptoggle = "hide", c.disabled = !1, c.zindexUp = "", c.pos === 0) {
const p = -this.iconS / 2;
c.x = p;
} else {
const p = c.pos * this.biLi - this.iconS / 2;
c.x = p;
}
});
const [o, e, l] = this.pcOrMobileEv();
this.startEvName = o, this.moveEvName = e, this.endEvName = l;
}
rmSpliceUpColorIndex(o) {
const e = this.colorArr[o];
this.colorArr.splice(o, 1), this.colorArr.splice(this.downColorIndex, 0, e), this.downColorIndex = o;
}
sortPos() {
const o = this.colorArr.length - 1, e = this.colorArr[this.downColorIndex].pos;
if (this.downColorIndex === 0) {
const l = this.downColorIndex + 1, c = this.colorArr[l].pos;
e > c && this.rmSpliceUpColorIndex(l);
} else if (this.downColorIndex === o) {
const l = this.downColorIndex - 1, c = this.colorArr[l].pos;
e < c && this.rmSpliceUpColorIndex(l);
} else {
const l = this.downColorIndex + 1, c = this.downColorIndex - 1, p = this.colorArr[c].pos, y = this.colorArr[l].pos, a = e - p, N = y - e;
Math.min(a, N) === a ? e < p && this.rmSpliceUpColorIndex(c) : e > y && this.rmSpliceUpColorIndex(l);
}
}
mouseover(o) {
if (this.isMove)
return !1;
this.colorArr[o].zindexUp = "z-index-up", this.colorArr[o].tiptoggle = "show";
}
mouseout(o) {
if (this.isMove)
return !1;
this.colorArr[o].zindexUp = "", this.colorArr[o].tiptoggle = "hide";
}
updataPos(o) {
o.forEach((e) => {
const l = this.colorArr[e].pos * this.biLi - this.iconS / 2;
this.colorArr[e].x = l;
});
}
down(o, e) {
e.type === "touchstart" ? (this.dwonWindowX = e.changedTouches[0].clientX, this.colorArr[this.downColorIndex].tiptoggle = "hide", this.colorArr[o].tiptoggle = "show") : this.dwonWindowX = e.x, this.ofLeft = e.target.getBoundingClientRect().left, this.colorArr[o].zindexUp = "z-index-up", this.colorArr[o].disabled = !1, this.downColorX = this.colorArr[o].x, this.downColorIndex = o, this.evArr.push((l) => this.up(l)), document.addEventListener(this.endEvName, this.evArr[this.evArr.length - 1]), this.evArr.push((l) => this.move(l)), document.addEventListener(this.moveEvName, this.evArr[this.evArr.length - 1]);
}
move(o) {
let e = 0;
if (e = this.startEvName === "touchstart" ? o.changedTouches[0].clientX - this.dwonWindowX : o.x - this.dwonWindowX, this.isMove = !0, this.moveFinish(this.downColorIndex, e) === !1 || this.isMove === !1)
return !1;
let c = this.downColorX + e;
const p = this.slideW - this.iconS / 2, y = -this.iconS / 2;
c > p ? c = p : c < y && (c = y), this.colorArr[this.downColorIndex].x = c;
const a = Math.round(Math.abs((c + this.iconS / 2) / this.biLi));
this.colorArr[this.downColorIndex].pos = a, this.sortPos();
}
up(o) {
this.isMove === !0 && (this.colorArr[this.downColorIndex].disabled = !0, this.isMove = !1), this.evArr.forEach((e) => {
document.removeEventListener(this.moveEvName, e), document.removeEventListener(this.endEvName, e);
}), this.evArr = [], this.startEvName === "touchstart" ? this.colorArr[this.downColorIndex].tiptoggle = "show" : this.colorArr[this.downColorIndex].tiptoggle = "hide";
}
moveFinish(o, e) {
const l = this.colorArr[o].x > this.slideW - this.iconS / 2, c = this.colorArr[o].x < -this.iconS / 2;
let p = null, y = e > 0 ? "R" : "L";
return p = (y === "R" && l === !1) === !0 || (y === "L" && c === !1) === !0, p;
}
pcOrMobileEv() {
return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) !== null ? ["touchstart", "touchmove", "touchend"] : ["mousedown", "mousemove", "mouseup"];
}
}
const me = (h, o) => {
const e = h.__vccOpts || h;
for (const [l, c] of o)
e[l] = c;
return e;
}, F = (h) => (pe("data-v-537b9b8a"), h = h(), ge(), h), fe = {
key: 0,
class: "colors-pick flex"
}, be = { class: "flex" }, ye = ["disabled", "value"], xe = /* @__PURE__ */ F(() => /* @__PURE__ */ s("svg", {
t: "1681639555524",
class: "icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "6780",
width: "200",
height: "200"
}, [
/* @__PURE__ */ s("path", {
d: "M896 896V128H320V0h704v896h-128zM768 192h64v832H0V192h768zM128 896h576V320H128v576z",
fill: "#4C89FB",
"p-id": "6781"
})
], -1)), Ce = ["onClick"], Se = {
key: 1,
class: "cp-gradc"
}, ke = /* @__PURE__ */ F(() => /* @__PURE__ */ s("svg", {
t: "1681639555524",
class: "icon icon-defalut hover active cue-po cp-gradc-copy",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "6780",
width: "200",
height: "200"
}, [
/* @__PURE__ */ s("path", {
d: "M896 896V128H320V0h704v896h-128zM768 192h64v832H0V192h768zM128 896h576V320H128v576z",
fill: "#4C89FB",
"p-id": "6781"
})
], -1)), Ae = { class: "line-box" }, _e = { class: "rotate-val" }, Fe = { class: "cp-color-bar flex" }, ze = { class: "cp-color-set flex" }, Ie = ["onMouseover", "onMousedown", "onMouseenter", "onTouchstart"], Me = ["disabled", "value", "onInput"], $e = { class: "rotate-close-set flex" }, Ne = ["value"], Ee = /* @__PURE__ */ F(() => /* @__PURE__ */ s("svg", {
t: "1681721662679",
class: "icon icon-defalut active hover cue-po",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "17550",
width: "200",
height: "200"
}, [
/* @__PURE__ */ s("path", {
d: "M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z",
fill: "#F55300",
"p-id": "17551"
}),
/* @__PURE__ */ s("path", {
d: "M258.56 358.912l434.432 434.432a51.2 51.2 0 0 0 72.3968-72.3968L330.9568 286.5152A51.2 51.2 0 1 0 258.56 358.912z",
fill: "#F9F9F9",
"p-id": "17552"
}),
/* @__PURE__ */ s("path", {
d: "M258.56 712.192l434.432-434.432a51.2 51.2 0 0 1 72.448 72.3968l-434.4832 434.432A51.2 51.2 0 1 1 258.56 712.192z",
fill: "#F9F9F9",
"p-id": "17553"
})
], -1)), Be = { class: "set-color-bar flex" }, De = ["disabled", "value", "onInput"], Le = /* @__PURE__ */ F(() => /* @__PURE__ */ s("svg", {
t: "1681701231439",
class: "icon icon-defalut",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "9826",
width: "200",
height: "200"
}, [
/* @__PURE__ */ s("path", {
d: "M627.2 972.8c19.456 19.456 51.2 25.6 76.8 12.8 45.056-19.456 83.456-38.4 121.856-70.656 19.456-19.456 32.256-44.544 25.6-76.8-6.656-38.4 0-83.456 19.456-121.856s57.344-64 96.256-76.8c25.6-6.656 44.544-32.256 51.2-57.344 6.656-45.056 6.656-96.256 0-140.8-6.656-25.6-25.6-51.2-51.2-57.856-38.4-12.8-76.8-38.4-96.256-76.8s-25.6-83.456-19.456-121.856c6.656-25.6-6.656-57.856-25.6-76.8-38.4-31.744-76.8-51.2-121.856-70.656-25.6-12.8-57.344-6.656-76.8 12.8C563.2 109.056 460.8 109.056 396.8 51.2c-19.456-19.456-51.2-25.6-76.8-12.8-44.544 18.944-83.456 38.4-121.856 70.656-25.6 19.456-32.256 45.056-25.6 76.8C192 268.8 140.8 358.4 57.856 384c-32.256 6.656-51.2 32.256-51.2 57.856C0 467.456 0 486.4 0 512s0 45.056 6.656 70.656c0 25.6 19.456 51.2 51.2 57.344 38.4 12.8 76.8 38.4 96.256 76.8s25.6 83.456 18.944 121.856c-6.656 25.6 6.656 57.344 25.6 76.8 38.4 32.256 76.8 51.2 121.856 70.656 25.6 12.8 57.856 6.656 76.8-12.8 63.488-64.512 165.888-64.512 229.888-0.512z",
fill: "#919BF2",
"p-id": "9827"
}),
/* @__PURE__ */ s("path", {
d: "M512 512m-147.456 0a147.456 147.456 0 1 0 294.912 0 147.456 147.456 0 1 0-294.912 0Z",
fill: "#FFFFFF",
"p-id": "9828"
})
], -1)), Te = /* @__PURE__ */ F(() => /* @__PURE__ */ s("svg", {
t: "1681701036913",
class: "icon active icon-defalut",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "6896",
width: "200",
height: "200"
}, [
/* @__PURE__ */ s("path", {
d: "M512 0a89.043478 89.043478 0 0 1 89.043478 89.043478v44.521739H422.956522V89.043478a89.043478 89.043478 0 0 1 89.043478-89.043478zM155.826087 178.086957v756.869565a89.043478 89.043478 0 0 0 89.043478 89.043478h534.26087a89.043478 89.043478 0 0 0 89.043478-89.043478V178.086957z m222.608696 623.304347a44.521739 44.521739 0 0 1-89.043479 0V311.652174a44.521739 44.521739 0 0 1 89.043479 0z m178.086956 0a44.521739 44.521739 0 0 1-89.043478 0V311.652174a44.521739 44.521739 0 0 1 89.043478 0z m178.086957 0a44.521739 44.521739 0 0 1-89.043479 0V311.652174a44.521739 44.521739 0 0 1 89.043479 0z",
fill: "#F55E55",
"p-id": "6897"
}),
/* @__PURE__ */ s("path", {
d: "M66.782609 89.043478m44.521739 0l801.391304 0q44.521739 0 44.521739 44.521739l0 0q0 44.521739-44.521739 44.52174l-801.391304 0q-44.521739 0-44.521739-44.52174l0 0q0-44.521739 44.521739-44.521739Z",
fill: "#F9BBB8",
"p-id": "6898"
})
], -1)), Ve = /* @__PURE__ */ F(() => /* @__PURE__ */ s("svg", {
t: "1681700429214",
class: "icon icon-defalut",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "4388",
width: "200",
height: "200"
}, [
/* @__PURE__ */ s("path", {
d: "M512 42.666667C253.866667 42.666667 42.666667 253.866667 42.666667 512s211.2 469.333333 469.333333 469.333333 469.333333-211.2 469.333333-469.333333S770.133333 42.666667 512 42.666667z m213.333333 512h-170.666666v170.666666c0 23.466667-19.2 42.666667-42.666667 42.666667s-42.666667-19.2-42.666667-42.666667v-170.666666h-170.666666c-23.466667 0-42.666667-19.2-42.666667-42.666667s19.2-42.666667 42.666667-42.666667h170.666666v-170.666666c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666667 42.666667v170.666666h170.666666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667z",
fill: "#80B8F8",
"p-id": "4389"
})
], -1)), He = ["onClick"], We = /* @__PURE__ */ F(() => /* @__PURE__ */ s("div", { class: "copy-success flex" }, [
/* @__PURE__ */ s("span", null, "复制成功"),
/* @__PURE__ */ s("svg", {
t: "1681647941254",
class: "icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "8621",
width: "200",
height: "200"
}, [
/* @__PURE__ */ s("path", {
d: "M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z",
fill: "#67EBB2",
opacity: ".15",
"p-id": "8622"
}),
/* @__PURE__ */ s("path", {
d: "M512 814.545455a302.545455 302.545455 0 0 1-213.934545-516.48 302.545455 302.545455 0 1 1 427.86909 427.86909A300.555636 300.555636 0 0 1 512 814.545455z m-124.148364-328.052364a36.072727 36.072727 0 0 0-25.6 61.486545l92.997819 93.730909a29.917091 29.917091 0 0 0 42.46109 0l165.853091-166.74909a29.928727 29.928727 0 0 0-40.226909-44.218182l-127.418182 104.808727a29.905455 29.905455 0 0 1-38.597818-0.488727l-45.905454-39.761455a36.002909 36.002909 0 0 0-23.563637-8.808727z",
fill: "#20D76D",
"p-id": "8623"
})
])
], -1)), Re = {
name: "ColorsPick"
}, Pe = /* @__PURE__ */ Object.assign(Re, {
props: {
cpEvs: {
type: String,
default: "input"
},
gradResData: {
default: "all",
type: String
},
cpSwatSize: {
default: "30px",
type: String
},
cpSwatActive: {
default: "love",
type: String
},
cpSwatGap: {
default: "5px",
type: String
},
cpSwatWidth: {
default: "150px",
type: String
},
cpSwat: {
default: !1,
type: Boolean
},
// 纯色板
swateColors: {
default: ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8B00FF"],
type: [Array, String, Object]
},
cpSwatColors: {
default: ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8B00FF"],
type: Array
},
gradColorNum: {
default: 99,
type: Number
},
zIndex: {
default: 1,
type: Number
},
cpSwatActiveIndex: {
default: 0,
type: Number
},
gradColorRotate: {
default: 90,
type: Number
},
gradDashColor: {
default: "rgba(0,0,0,.4)",
type: String
},
gradDashActiveColor: {
default: "#fff",
type: String
},
gradDashSize: {
default: 70,
type: Number
},
gradDashLineHeight: {
default: 10,
type: Number
},
gradRangeColor: {
default: "#cbcbcb",
type: String
},
gradIconSize: {
default: 15,
type: Number
},
cpBorder: {
default: "2px #f4f4f4",
type: String
},
gradRangeWidth: {
default: 200,
type: Number
},
gradRangeHeight: {
default: "2px",
type: String
},
height: {
default: "200px",
type: [String, Number]
},
width: {
default: "200px",
type: [String, Number]
},
modelValue: {
type: [String, Array, Object],
default: "#05b9e6"
},
cpType: {
default: "onec",
type: String,
validator(h) {
return ["onec", "gradc", "swate"].includes(h);
}
},
copy: {
default: !0,
type: Boolean
},
color: {
type: [String, Array],
default: "#05b9e6"
},
round: {
type: Boolean,
default: !1
},
toastTime: {
type: Number,
default: 1e3
},
disabled: {
type: Boolean,
default: !0
},
square: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue"],
setup(h, { emit: o }) {
const e = h;
le((t) => ({
"014e0460": u(V).dashSize,
"73a7a4b4": u(V).dashTop,
"4578ab38": u(V).gradLineDashHeight,
"641088f6": e.gradIconSize + "px",
"55b3a1e7": e.gradRangeHeight,
"03254ae7": e.gradRangeWidth + "px",
d1b1f2ba: e.gradRangeColor,
b78bb870: e.cpBorder,
"7d84c3a3": u(H),
"77a3210f": g.value
})), ne();
let l, c = null;
const p = (t) => {
const n = t.type, i = t.target.value;
(e.cpEvs === "change" && n === "change" || e.cpEvs === "input" && n === "input") && (g.value = i, o("update:modelValue", g.value)), C.value = y.value;
}, y = S(() => C.value = e.cpSwatColors.findIndex((t) => t.toLocaleLowerCase() === g.value.toLocaleLowerCase()));
ce(() => {
e.cpType === "gradc" && (l = new we(a.value, e.gradRangeWidth, e.gradIconSize), de(a, E, { deep: !0 }));
});
const a = I([]), N = S(() => {
let t = "";
return a.value.forEach((i, r) => {
r === a.value.length - 1 ? t += i.color + " " + i.pos + "% " : t += i.color + " " + i.pos + "% ,";
}), {
"background-image": "-webkit-linear-gradient(" + m.rotateDeg + "deg," + t + ")",
"background-image": "-moz-linear-gradient(" + m.rotateDeg + "deg," + t + ")",
"background-image": "-o-linear-gradient(" + m.rotateDeg + "deg," + t + ")",
"background-image": "linear-gradient(" + m.rotateDeg + "deg," + t + ")",
width: D.value.w,
height: D.value.h
};
}), m = ue({
rotateDeg: Number(e.gradColorRotate),
// 旋转角度 默认90
showOrHide: "hide"
}), re = (t) => {
clearTimeout(c), m.rotateDeg = Number(t.target.value), m.showOrHide = "show", E(), c = setTimeout(() => {
m.showOrHide = "hide";
}, 1e3);
}, E = () => {
let t = "", n = [];
const i = m.rotateDeg + "deg";
a.value.forEach((r, d) => {
const b = r.color, k = r.pos;
n.push({
color: b,
pos: k
}), a.value.length - 1 === d ? t += b + " " + k + "% " : t += b + " " + k + "%, ";
}), t = i + ", " + t, e.gradResData === "gradinfo" ? x.value = t : e.gradResData === "gradarr" ? x.value = n : e.gradResData === "bgcss" ? x.value = `
background-image: -webkit-linear-gradient(${t});
background-image: -moz-linear-gradient(${t});
background-image: -o-linear-gradient(${t});
background-image: linear-gradient(${t});
` : e.gradResData === "txtcss" ? x.value = `
background-image: -webkit-linear-gradient(${t});
background-image: -moz-linear-gradient(${t});
background-image: -o-linear-gradient(${t});
background-image: linear-gradient(${t});
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
` : x.value = {
rotateDeg: i,
colorArr: n,
colorInfo: t,
bgcss: `
background-image: -webkit-linear-gradient(${t});
background-image: -moz-linear-gradient(${t});
background-image: -o-linear-gradient(${t});
background-image: linear-gradient(${t});
`,
txtcss: `
background-image: -webkit-linear-gradient(${t});
background-image: -moz-linear-gradient(${t});
background-image: -o-linear-gradient(${t});
background-image: linear-gradient(${t});
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
`,
css: `
.cp-color {
/* 背景渐变 */
background-image: -webkit-linear-gradient(${t});
background-image: -moz-linear-gradient(${t});
background-image: -o-linear-gradient(${t});
background-image: linear-gradient(${t});
/* 文字渐变 */
/* background-image: -webkit-linear-gradient(${t});
background-image: -moz-linear-gradient(${t});
background-image: -o-linear-gradient(${t});
background-image: linear-gradient(${t});
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;*/
}
`
}, o("update:modelValue", x.value);
}, B = I(!0), U = (t, n) => {
const i = n.target.value;
a.value[t].color = i;
}, ae = () => {
const t = a.value.length;
if (t >= Z.value)
return;
const n = t - 1, i = a.value[n].pos;
let r = {
color: ve(),
pos: 100
};
if (t === 2)
a.value[1].pos = 50, r.pos = 100;
else {
const d = a.value[t - 2].pos, k = Math.round((i - d) / 2) + d;
a.value[n].pos = k >= 100 ? 100 : k;
}
r.tiptoggle = "hide", a.value.push(r), l.updataPos([t - 1, t]);
}, se = () => a.value.length > 2 === !0 ? (a.value.pop(), !0) : !1, X = () => B.value = !B.value, x = I(), T = I(), q = () => {
let t = null;
if (e.cpType === "onec" ? t = O(g.value) : (x.value === void 0 && E(), typeof x.value == "object" ? t = O(JSON.stringify(x.value)) : t = O(x.value)), t === !0) {
T.value = !0;
let n = 1e3;
/^\d+$/.test(e.toastTime) === !0 && (n = e.toastTime), setTimeout(() => {
T.value = !1;
}, n);
}
}, G = /^\d+(px|%|vw|vh|rem|em|pt|pc|in|Q|mm|cm|ex|cap|ch|c|lh|rlh|vi|vb|vmin|vmax)$/, j = /(?=.*\d)^\d+$/, V = S(() => {
const t = e.gradDashSize + "px", n = e.gradDashLineHeight + "px", r = (Number(e.height.match(/\d+/g)) - Number(e.gradDashSize) * 2) / 2 + "px";
return {
dashSize: t,
gradLineDashHeight: n,
dashTop: r
};
}), Z = S(() => /(?=.*\d)^([1-9][0-9]|[2-9]{1})$/.test(e.gradColorNum) ? e.gradColorNum : 99), ie = S(() => T.value === !0 ? "show" : "hide"), z = S(() => /^(onec|gradc|swate)$/.test(e.cpType) ? e.cpType : "onec"), g = I(), C = I(0), Q = S(() => {
let t = e.cpSwatActive;
switch (t) {
case "border":
t = "active-border";
break;
case "yes":
t = "active-yes";
break;
case "love":
t = "active-love";
break;
case "goly":
t = "active-goly";
break;
case "square":
t = "active-square";
break;
case "circle":
t = "active-circle";
break;
default:
t = "active-love";
break;
}
return {
swtActive: t
};
}), J = (t, n) => {
z.value === "swate" ? t.disabled === !0 && (g.value = t.color, C.value = n) : z.value === "onec" && (g.value = t, C.value = n), o("update:modelValue", g.value);
}, K = [
{
color: "#6284FF",
pos: 0
},
{
color: "#FF0000",
pos: 100
}
];
if (z.value === "onec") {
if (e.cpSwat === !0) {
const t = e.cpSwatColors.findIndex((n) => n === e.color);
g.value = e.cpSwatColors[t], C.value = t;
}
g.value = e.color, o("update:modelValue", g.value);
} else if (z.value === "gradc") {
if (Array.isArray(e.color))
if (!e.color.some((i) => /^#[a-f\d]{6}$/ig.test(i) === !1) && e.color.length > 1) {
let i = [], r = [];
e.color.length > e.gradColorNum === !0 ? r = e.color.slice(0, e.gradColorNum) : r = e.color;
const b = r.length - 1;
let k = 100 / b;
r.forEach((W, R) => {
if (R === 0)
i.push({
pos: 0,
color: W
});
else if (R === b)
i.push({
pos: 100,
color: W
});
else {
let Y = Math.round(R * k);
i.push({
pos: Y > 100 ? 100 : Y,
color: W
});
}
}), a.value = i;
} else
a.value = K;
else
a.value = K;
E();
} else {
const t = [];
e.swateColors.forEach((n) => {
n instanceof Object ? n.disabled === !0 ? a.value.push(n) : t.unshift(n) : a.value.push({
disabled: !0,
color: n
});
}), a.value = a.value.concat(t), C.value = e.cpSwatActiveIndex, g.value = a.value[C.value] && a.value[C.value].color, o("update:modelValue", g.value);
}
const D = S(() => {
const t = G.test(e.width), n = G.test(e.height), i = j.test(e.width), r = j.test(e.height);
let d = 0, b = 0;
return i === !0 ? d = e.width + "px" : t === !0 && (e.cpType === "onec" && e.width === "200px" ? d = "30px" : d = e.width), r === !0 ? b = e.height + "px" : n === !0 && (e.cpType === "onec" && e.height === "200px" ? b = "30px" : b = e.height), {
w: d,
h: b
};
}), H = S(() => e.square === !1 && e.round === !1 ? "3px" : e.square === !0 ? "0" : "50%");
return (t, n) => (v(), w(M, null, [
u(z) === "onec" ? (v(), w("div", fe, [
s("div", be, [
s("input", he({
style: { width: u(D).w, height: u(D).h },
disabled: !e.disabled,
class: "set-color cue-po",
type: "color"
}, t.$attrs, {
value: g.value,
onChange: p,
onInput: p
}), null, 16, ye),
e.copy ? (v(), w("div", {
key: 0,
class: "copy color-box active cue-po",
onClick: q
}, [
s("div", null, P(g.value), 1),
_(t.$slots, "copy", {}, () => [
xe
], !0)
])) : L("", !0)
]),
e.cpType !== "gradc" && e.cpSwat ? (v(), w("div", {
key: 0,
class: "cp-swatches",
style: f({ width: e.cpSwatWidth, gap: e.cpSwatGap })
}, [
(v(!0), w(M, null, $(e.cpSwatColors, (i, r) => (v(), w("div", {
onClick: (d) => J(i, r),
class: A([C.value === r ? u(Q).swtActive : "", "cue-po hover active"]),
style: f({ background: i, width: e.cpSwatSize, height: e.cpSwatSize, "border-radius": u(H) }),
key: r
}, null, 14, Ce))), 128))
], 4)) : L("", !0)
])) : u(z) === "gradc" ? (v(), w("div", Se, [
s("div", {
class: "show-demo",
style: f(u(N))
}, [
e.copy ? (v(), w("div", {
key: 0,
onClick: q
}, [
_(t.$slots, "copy", {}, () => [
ke
], !0)
])) : L("", !0),
s("div", {
class: A(["rotate-view", m.showOrHide])
}, [
s("div", Ae, [
(v(), w(M, null, $(90, (i, r) => s("div", {
style: f({
transform: "rotate(" + (r + 1) * 4 + "deg)",
"background-color": m.rotateDeg > r * 4 ? e.gradDashActiveColor : e.gradDashColor
}),
key: r
}, null, 4)), 64))
]),
s("span", _e, P(m.rotateDeg) + "°", 1)
], 2)
], 4),
ee(s("div", Fe, [
s("div", ze, [
(v(!0), w(M, null, $(a.value, (i, r) => (v(), w("div", {
key: r,
class: A(a.value[r].zindexUp),
style: f({ left: a.value[r].x + "px" }),
onMouseover: (d) => u(l).mouseout(r),
onMousedown: (d) => u(l).down(r, d),
onMouseenter: (d) => u(l).mouseover(r),
onTouchstart: (d) => u(l).down(r, d)
}, [
s("input", {
disabled: e.disabled === !1 ? !0 : a.value[r].disabled,
type: "color",
value: a.value[r].color,
onInput: (d) => U(r, d)
}, null, 40, Me),
s("span", {
class: A([a.value[r].tiptoggle, "color-tip-value"])
}, P(a.value[r].pos) + "%", 3)
], 46, Ie))), 128))
]),
s("div", $e, [
s("input", {
onInput: re,
value: m.rotateDeg,
style: f({ width: e.gradRangeWidth - 30 + "px" }),
type: "range",
min: "0",
max: "360",
step: "1"
}, null, 44, Ne),
s("div", {
onClick: X,
style: f({
width: e.gradIconSize + "px",
height: e.gradIconSize + "px"
})
}, [
_(t.$slots, "grad-close-setting", {}, () => [
Ee
], !0)
], 4)
])
], 512), [
[te, !B.value]
]),
ee(s("div", Be, [
(v(!0), w(M, null, $(a.value, (i, r) => (v(), w("input", {
key: r,
disabled: !e.disabled,
class: "gradc-select hover cue-po",
type: "color",
value: a.value[r].color,
onInput: (d) => U(r, d)
}, null, 40, De))), 128)),
s("div", {
onClick: X,
style: f({
width: e.gradIconSize + "px",
height: e.gradIconSize + "px"
}),
class: "active hover cue-po"
}, [
_(t.$slots, "grad-setting", {}, () => [
Le
], !0)
], 4),
s("div", {
style: f({
width: e.gradIconSize + "px",
height: e.gradIconSize + "px"
}),
onClick: se,
class: A(a.value.length > 2 ? "active hover cue-po" : "disabled")
}, [
_(t.$slots, "grad-del", {}, () => [
Te
], !0)
], 6),
s("div", {
style: f({
width: e.gradIconSize + "px",
height: e.gradIconSize + "px"
}),
onClick: ae,
class: A(a.value.length < u(Z) ? "active hover cue-po" : "disabled")
}, [
_(t.$slots, "grad-add", {}, () => [
Ve
], !0)
], 6)
], 512), [
[te, B.value]
])
])) : (v(), w("div", {
key: 2,
class: "cp-swatches",
style: f({ width: e.cpSwatWidth, gap: e.cpSwatGap })
}, [
(v(!0), w(M, null, $(a.value, (i, r) => (v(), w("div", {
onClick: (d) => J(i, r),
class: A([[C.value === r ? u(Q).swtActive : "", i.disabled === !0 ? "hover" : "swat-disabled"], "cue-po active"]),
style: f({ background: i.color, width: e.cpSwatSize, height: e.cpSwatSize, "border-radius": u(H) }),
key: r
}, null, 14, He))), 128))
], 4)),
e.copy ? (v(), w("div", {
key: 3,
style: f({ "z-index": e.zIndex }),
class: A(u(ie))
}, [
_(t.$slots, "copy-tip", {}, () => [
We
], !0)
], 6)) : L("", !0)
], 64));
}
}), oe = /* @__PURE__ */ me(Pe, [["__scopeId", "data-v-537b9b8a"]]), Oe = (h) => {
h.component(oe.name, oe);
}, Xe = { install: Oe };
export {
oe as ColorsPick,
Xe as default
};