vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
672 lines (671 loc) • 24.3 kB
JavaScript
import { defineComponent as xt, ref as C, computed as c, watch as Ve, watchEffect as Rt, createBlock as te, openBlock as k, unref as M, normalizeStyle as v, withCtx as ce, createElementVNode as s, mergeProps as ye, createElementBlock as E, createCommentVNode as H, renderSlot as Ne, createTextVNode as de, toDisplayString as we, Fragment as $e, normalizeClass as Et, withModifiers as Ht, renderList as Be } from "vue";
import { toRgbaString as z, toHexString as le, rgba as U, rgb2hsv as Ae, hsla as W, hsl2hsv as De, hsva as Z, hsl2rgb as Se, hsv2rgb as B, rgb2hsl as Ce, hsv2hsl as ve, toHexaString as D, toHslaString as F, toRgbString as xe, toHslString as Re, toHsvaString as T, toHsvString as Ee } from "seemly";
import Pt from "../tooltip/index.js";
import Fe from "../input/index.js";
import Xe from "../button/index.js";
import { useInject as Mt, useSlotsExist as zt } from "../utils/index.js";
const Ut = { class: "color-picker-preview" }, It = { class: "color-picker-preview-sliders" }, Lt = {
key: 0,
class: "color-picker-preview-circle"
}, Vt = ["value"], Nt = { class: "color-picker-input" }, Bt = { class: "color-picker-input-group" }, Dt = {
key: 0,
class: "color-picker-swatches"
}, Ft = ["onClick"], Xt = {
key: 0,
class: "color-picker-actions"
}, Ot = {
key: 1,
class: "color-picker-footer"
}, Zt = { class: "color-picker-wrap" }, Tt = { class: "color-picker-fill" }, y = "12px", Oe = 12, m = "6px", Ze = 6, Kt = /* @__PURE__ */ xt({
__name: "ColorPicker",
props: {
width: { default: "100%" },
label: { type: Function, default: void 0 },
tooltipStyle: { default: () => ({}) },
inputProps: { default: () => ({}) },
showAlpha: { type: Boolean, default: !0 },
showPreview: { type: Boolean, default: !1 },
size: { default: "middle" },
disabled: { type: Boolean, default: !1 },
value: { default: void 0 },
modes: { default: () => ["rgb", "hex", "hsl"] },
swatches: { default: () => [] },
actions: { default: () => [] },
footer: { default: void 0 }
},
emits: ["update:value", "complete", "confirm", "clear"],
setup(f, { emit: Te }) {
const n = f, he = C(), Y = C(null), q = C(null), J = C(null), P = C(0), pe = C(1), re = C([0, 0]), K = C(), u = C(n.value), g = C(ie(u.value) || n.modes[0] || "rgb"), oe = C(), I = C([]), { colorPalettes: He, shadowColor: je } = Mt("ColorPicker"), X = Te, Ge = zt("footer"), We = c(() => Ge.value || n.footer), Ye = c(() => ({
width: y,
height: y,
borderRadius: m,
left: `calc(${re.value[0]}% - ${m})`,
bottom: `calc(${re.value[1]}% - ${m})`
})), qe = c(() => h.value ? `rgb(${h.value[0]}, ${h.value[1]}, ${h.value[2]})` : ""), Je = c(() => ({
backgroundColor: qe.value,
borderRadius: m,
width: y,
height: y
})), Pe = c(() => ({
height: y,
borderRadius: m
})), Ke = c(() => ({
position: "relative",
boxShadow: "inset 0 0 2px 0 rgba(0, 0, 0, 0.24)",
backgroundImage: "linear-gradient(90deg, red, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, red)",
height: y,
borderRadius: m,
touchAction: "none"
})), Qe = c(() => ({
left: `calc((${P.value}%) / 359 * 100 - ${m})`,
borderRadius: m,
width: y,
height: y
})), _e = c(() => ({
backgroundColor: `hsl(${P.value}, 100%, 50%)`,
borderRadius: m,
width: y,
height: y
})), et = c(() => h.value ? `linear-gradient(to right, rgba(${h.value[0]}, ${h.value[1]}, ${h.value[2]}, 0) 0%, rgba(${h.value[0]}, ${h.value[1]}, ${h.value[2]}, 1) 100%)` : ""), tt = c(() => ({
left: `calc(${pe.value * 100}% - ${m})`,
borderRadius: m,
width: y,
height: y
})), lt = c(() => ({
backgroundColor: h.value ? z(h.value) : void 0,
borderRadius: m,
width: y,
height: y
})), Me = c(() => h.value && le(h.value)), ze = c(() => typeof n.width == "number" ? `${n.width}px` : n.width), fe = c(() => `${{
small: 24,
middle: 32,
large: 40
}[n.size]}px`), rt = c(() => {
const e = {
small: 6,
middle: 8,
large: 10
};
return `calc((${fe.value} - ${e[n.size]}px) / 3)`;
}), me = c(() => ie(u.value)), Q = c(() => g.value.toUpperCase() + (n.showAlpha ? "A" : "")), ot = c(() => Q.value.split(""));
let w, $, j, G, L, V, N, A;
const x = c(() => {
if (!u.value) return null;
switch (me.value) {
case "hsv":
return Z(u.value);
case "hsl":
return [w, $, j, A] = W(u.value), [...De(w, $, j), A];
case "rgb":
case "hex":
return [L, V, N, A] = U(u.value), [...Ae(L, V, N), A];
}
}), h = c(() => {
if (!u.value) return null;
switch (me.value) {
case "rgb":
case "hex":
return U(u.value);
case "hsv":
return [w, $, G, A] = Z(u.value), [...B(w, $, G), A];
case "hsl":
return [w, $, j, A] = W(u.value), [...Se(w, $, j), A];
}
}), O = c(() => {
if (!u.value) return null;
switch (me.value) {
case "hsl":
return W(u.value);
case "hsv":
return [w, $, G, A] = Z(u.value), [...ve(w, $, G), A];
case "rgb":
case "hex":
return [L, V, N, A] = U(u.value), [...Ce(L, V, N), A];
}
}), R = c(() => {
switch (g.value) {
case "rgb":
case "hex":
return h.value;
case "hsv":
return x.value;
case "hsl":
return O.value;
}
}), Ue = c(
() => n.swatches.map((e) => {
const t = ie(e);
return {
value: e,
mode: t,
legalValue: yt(e, t)
};
})
);
Ve(
() => n.value,
(e) => {
u.value = e;
}
), Ve(
() => [g.value, R.value],
() => {
g.value === "hex" ? oe.value = R.value === null ? void 0 : (n.showAlpha ? D : le)(R.value) : R.value === null ? I.value = new Array(n.showAlpha ? 4 : 3).fill(void 0) : I.value = R.value.map((e, t) => n.showAlpha && t === 3 ? `${Math.floor(e * 100)}%` : `${Math.floor(e)}`);
},
{
immediate: !0,
deep: !0
}
), Rt(() => {
(K.value === void 0 || K.value !== u.value) && x.value && (P.value = x.value[0], pe.value = x.value[3], re.value = [x.value[1], x.value[2]]), K.value = void 0;
});
function b(e, t) {
t === "cursor" ? K.value = e : K.value = void 0, u.value = e, X("update:value", e), t === "input" && X("complete", e);
}
function at(e, t) {
const l = x.value ? x.value[3] : 1;
switch (re.value = [e, t], g.value) {
case "hsv":
b((n.showAlpha ? T : Ee)([P.value, e, t, l]), "cursor");
break;
case "hsl":
b(
(n.showAlpha ? F : Re)([...ve(P.value, e, t), l]),
"cursor"
);
break;
case "rgb":
b(
(n.showAlpha ? z : xe)([...B(P.value, e, t), l]),
"cursor"
);
break;
case "hex":
b(
(n.showAlpha ? D : le)([...B(P.value, e, t), l]),
"cursor"
);
break;
}
}
function nt(e) {
Y.value && (Y.value.setPointerCapture(e.pointerId), document.addEventListener("pointermove", ge), document.addEventListener("pointerup", ae), document.addEventListener("pointercancel", ae), ge(e));
}
function ge(e) {
if (!Y.value) return;
const { width: t, height: l, left: o, bottom: S } = Y.value.getBoundingClientRect(), r = (S - e.clientY) / l, a = (e.clientX - o) / t, i = 100 * (a > 1 ? 1 : a < 0 ? 0 : a), d = 100 * (r > 1 ? 1 : r < 0 ? 0 : r);
at(i, d);
}
function ae() {
document.removeEventListener("pointermove", ge), document.removeEventListener("pointerup", ae), document.removeEventListener("pointercancel", ae), X("complete", u.value);
}
function st(e) {
if (P.value = e, !x.value)
return;
const [, t, l, o] = x.value;
switch (g.value) {
case "hsv":
b((n.showAlpha ? T : Ee)([e, t, l, o]), "cursor");
break;
case "rgb":
b((n.showAlpha ? z : xe)([...B(e, t, l), o]), "cursor");
break;
case "hex":
b((n.showAlpha ? D : le)([...B(e, t, l), o]), "cursor");
break;
case "hsl":
b((n.showAlpha ? F : Re)([...ve(e, t, l), o]), "cursor");
break;
}
}
function it(e) {
q.value && (q.value.setPointerCapture(e.pointerId), document.addEventListener("pointermove", be), document.addEventListener("pointerup", ne), document.addEventListener("pointercancel", ne), be(e));
}
function ut(e) {
return e = Math.round(e), e >= 360 ? 359 : e < 0 ? 0 : e;
}
function be(e) {
if (!q.value) return;
const { width: t, left: l } = q.value.getBoundingClientRect(), o = ut((e.clientX - l - Ze) / (t - Oe) * 360);
st(o);
}
function ne() {
document.removeEventListener("pointermove", be), document.removeEventListener("pointerup", ne), document.removeEventListener("pointercancel", ne), X("complete", u.value);
}
function ct(e) {
switch (g.value) {
case "hsv":
[w, $, G] = x.value, b(T([w, $, G, e]), "cursor");
break;
case "rgb":
[L, V, N] = h.value, b(z([L, V, N, e]), "cursor");
break;
case "hex":
[L, V, N] = h.value, b(D([L, V, N, e]), "cursor");
break;
case "hsl":
[w, $, j] = O.value, b(F([w, $, j, e]), "cursor");
break;
}
pe.value = e;
}
function dt(e) {
J.value && (J.value.setPointerCapture(e.pointerId), document.addEventListener("pointermove", ke), document.addEventListener("pointerup", se), document.addEventListener("pointercancel", se), ke(e));
}
function vt(e) {
return e = Math.round(e * 100) / 100, e > 1 ? 1 : e < 0 ? 0 : e;
}
function ke(e) {
if (!J.value) return;
const { width: t, left: l } = J.value.getBoundingClientRect(), o = vt((e.clientX - l - Ze) / (t - Oe));
ct(o);
}
function se() {
document.removeEventListener("pointermove", ke), document.removeEventListener("pointerup", se), document.removeEventListener("pointercancel", se), X("complete", u.value);
}
function ie(e) {
if (e !== void 0) {
if (/^ *#/.test(e)) return "hex";
if (e.includes("rgb")) return "rgb";
if (e.includes("hsl")) return "hsl";
if (e.includes("hsv")) return "hsv";
}
}
function ht() {
const e = n.modes.findIndex((t) => t === g.value);
e !== -1 ? g.value = n.modes[(e + 1) % n.modes.length] : g.value = "rgb";
}
function pt(e) {
const t = e.target, l = Le(t.value.toUpperCase(), g.value, "hex");
b(l, "input");
}
function ft(e) {
const t = e.trim();
return /^#[0-9a-fA-F]+$/.test(t) ? [4, 5, 7, 9].includes(t.length) : !1;
}
function mt(e) {
return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 360)) : !1;
}
function gt(e) {
return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 100)) : !1;
}
function bt(e) {
return /^\d{1,3}\.?\d*%$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e) / 100, 100)) : !1;
}
function kt(e) {
return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 255)) : !1;
}
function _(e, t) {
return e === void 0 ? "" : t === "HEX" || t === "HEXA" ? e : t === "A" ? `${Math.floor(Number(e) * 100)}%` : String(Math.floor(Number(e)));
}
function ue(e) {
b(e, "input");
}
function ee(e, t) {
if (g.value === "hex") {
ue((n.showAlpha ? D : le)(t));
return;
}
let l;
switch (R.value === null ? l = [0, 0, 0, 0] : l = [...R.value], g.value) {
case "hsv":
l[e] = t, ue((n.showAlpha ? T : Ee)(l));
break;
case "rgb":
l[e] = t, ue((n.showAlpha ? z : xe)(l));
break;
case "hsl":
l[e] = t, ue((n.showAlpha ? F : Re)(l));
break;
}
}
function Ie(e, t) {
const l = e.target;
let o, S, r;
const a = l.value;
t === void 0 ? r = R.value === null ? void 0 : R.value : r = R.value?.[t] === void 0 ? void 0 : R.value?.[t].toString();
const i = t === void 0 ? Q.value : Q.value[t];
switch (i) {
case "HEX":
case "HEXA":
S = ft(a), S && ee(0, a), oe.value = _(a, i);
break;
case "H":
o = mt(a), o === !1 ? I.value[t] = _(r, i) : ee(t, o);
break;
case "S":
case "L":
case "V":
o = gt(a), o === !1 ? I.value[t] = _(r, i) : ee(t, o);
break;
case "A":
o = bt(a), o === !1 ? I.value[t] = _(r, i) : ee(t, o);
break;
case "R":
case "G":
case "B":
o = kt(a), o === !1 ? I.value[t] = _(r, i) : ee(t, o);
break;
}
}
function yt(e, t) {
if (t === "hsv") {
const [l, o, S, r] = Z(e);
return z([...B(l, o, S), r]);
}
return e;
}
function wt(e) {
const t = document.createElement("canvas").getContext("2d");
return t ? (t.fillStyle = e, t.fillStyle) : "#000000";
}
function Le(e, t, l) {
return l = l || ie(e), l ? l === t ? e : {
rgb: {
hex(r) {
return D(U(r));
},
hsl(r) {
const [a, i, d, p] = U(r);
return F([...Ce(a, i, d), p]);
},
hsv(r) {
const [a, i, d, p] = U(r);
return T([...Ae(a, i, d), p]);
}
},
hex: {
rgb(r) {
return z(U(r));
},
hsl(r) {
const [a, i, d, p] = U(r);
return F([...Ce(a, i, d), p]);
},
hsv(r) {
const [a, i, d, p] = U(r);
return T([...Ae(a, i, d), p]);
}
},
hsl: {
hex(r) {
const [a, i, d, p] = W(r);
return D([...Se(a, i, d), p]);
},
rgb(r) {
const [a, i, d, p] = W(r);
return z([...Se(a, i, d), p]);
},
hsv(r) {
const [a, i, d, p] = W(r);
return T([...De(a, i, d), p]);
}
},
hsv: {
hex(r) {
const [a, i, d, p] = Z(r);
return D([...B(a, i, d), p]);
},
rgb(r) {
const [a, i, d, p] = Z(r);
return z([...B(a, i, d), p]);
},
hsl(r) {
const [a, i, d, p] = Z(r);
return F([...ve(a, i, d), p]);
}
}
}[l][t](e) : void 0;
}
function $t(e) {
let { value: t, mode: l } = e;
return l || (l = "hex", /^[a-zA-Z]+$/.test(t) ? t = wt(t) : (console.warn("color-picker", `color ${t} in swatches is invalid.`), t = "#000000")), l === g.value ? t : Le(t, g.value, l);
}
function At(e) {
b($t(e), "input");
}
function St() {
X("confirm", u.value), he.value.hide();
}
function Ct() {
b(void 0, "input"), X("clear"), he.value.hide();
}
return (e, t) => (k(), te(M(Pt), {
ref_key: "tooltipRef",
ref: he,
style: v(`width: ${ze.value}; height: ${fe.value};`),
"max-width": "none",
arrow: !1,
placement: "bottom",
"bg-color": "#fff",
"tooltip-style": {
width: "240px",
padding: 0,
borderRadius: "4px",
color: "rgba(0, 0, 0, 0.88)",
...f.tooltipStyle
},
"content-style": { width: "100%", height: "100%" },
trigger: "click",
"transition-duration": 200
}, {
tooltip: ce(() => [
f.disabled ? H("", !0) : (k(), E($e, { key: 0 }, [
s("div", {
class: Et(["color-picker-panel", { "panel-with-actions": f.actions.length }])
}, [
s("div", {
ref_key: "palleteRef",
ref: Y,
class: "color-picker-pallete",
onPointerdown: nt
}, [
s("div", {
class: "color-picker-pallete-layer",
style: v({ backgroundImage: `linear-gradient(90deg, white, hsl(${P.value}, 100%, 50%))` })
}, null, 4),
t[1] || (t[1] = s("div", {
class: "color-picker-pallete-layer pallete-layer-shadowed",
style: { "background-image": "linear-gradient(180deg, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%))" }
}, null, -1)),
s("div", {
class: "color-picker-handle",
style: v(Ye.value)
}, [
s("div", {
class: "color-picker-handle-fill",
style: v(Je.value)
}, null, 4)
], 4)
], 544),
s("div", Ut, [
s("div", It, [
s("div", {
class: "color-picker-slider",
style: v(Pe.value)
}, [
s("div", {
ref_key: "hueRailRef",
ref: q,
style: v(Ke.value),
onPointerdown: it
}, [
s("div", {
style: v(`position: absolute; top: 0px; bottom: 0; left: ${m}; right: ${m}`)
}, [
s("div", {
class: "color-picker-handle",
style: v(Qe.value)
}, [
s("div", {
class: "color-picker-handle-fill",
style: v(_e.value)
}, null, 4)
], 4)
], 4)
], 36)
], 4),
f.showAlpha ? (k(), E("div", {
key: 0,
ref_key: "alphaRailRef",
ref: J,
class: "color-picker-slider",
style: v(Pe.value),
onPointerdown: dt
}, [
s("div", {
style: v(`
border-radius: ${m};
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0px;
overflow: hidden;
`)
}, [
t[2] || (t[2] = s("div", { class: "color-picker-checkboard" }, null, -1)),
s("div", {
class: "color-picker-slider-image",
style: v(`background-image: ${et.value}`)
}, null, 4)
], 4),
h.value ? (k(), E("div", {
key: 0,
style: v(`position: absolute; top: 0px; bottom: 0; left: ${m}; right: ${m}`)
}, [
s("div", {
class: "color-picker-handle",
style: v(tt.value)
}, [
s("div", {
class: "color-picker-handle-fill",
style: v(lt.value)
}, null, 4)
], 4)
], 4)) : H("", !0)
], 36)) : H("", !0)
]),
f.showPreview ? (k(), E("div", Lt, [
s("span", {
class: "color-picker-circle-fill",
style: v(`background: ${Me.value || "#000000"};`)
}, null, 4),
s("input", {
class: "color-picker-circle-input",
type: "color",
value: Me.value,
onChange: Ht(pt, ["stop"])
}, null, 40, Vt)
])) : H("", !0)
]),
s("div", Nt, [
s("div", {
class: "color-picker-input-mode",
style: v({ cursor: f.modes.length === 1 ? "" : "pointer" }),
onClick: ht
}, we(Q.value), 5),
s("div", Bt, [
g.value === "hex" ? (k(), te(M(Fe), ye({
key: 0,
size: "small",
placeholder: Q.value,
value: oe.value,
"onUpdate:value": t[0] || (t[0] = (l) => oe.value = l),
valueModifiers: { lazy: !0 },
onChange: Ie
}, f.inputProps), null, 16, ["placeholder", "value"])) : (k(!0), E($e, { key: 1 }, Be(ot.value, (l, o) => (k(), te(M(Fe), ye({
size: "small",
style: `${l === "A" ? "flex-grow: 1.25" : ""}`,
key: o,
placeholder: l,
value: I.value[o],
"onUpdate:value": (S) => I.value[o] = S,
valueModifiers: { lazy: !0 },
onChange: (S) => Ie(S, o)
}, { ref_for: !0 }, f.inputProps), null, 16, ["style", "placeholder", "value", "onUpdate:value", "onChange"]))), 128))
])
]),
Ue.value.length ? (k(), E("div", Dt, [
(k(!0), E($e, null, Be(Ue.value, (l, o) => (k(), E("div", {
tabindex: "0",
class: "color-picker-swatch",
key: o,
onClick: (S) => At(l)
}, [
s("div", {
class: "color-picker-swatch-fill",
style: v(`background: ${l.legalValue};`)
}, null, 4)
], 8, Ft))), 128))
])) : H("", !0)
], 2),
f.actions.length ? (k(), E("div", Xt, [
f.actions.includes("confirm") ? (k(), te(M(Xe), {
key: 0,
type: "primary",
size: "small",
onClick: St
}, {
default: ce(() => [...t[3] || (t[3] = [
de("确认", -1)
])]),
_: 1
})) : H("", !0),
f.actions.includes("clear") ? (k(), te(M(Xe), {
key: 1,
size: "small",
onClick: Ct
}, {
default: ce(() => [...t[4] || (t[4] = [
de("清除", -1)
])]),
_: 1
})) : H("", !0)
])) : H("", !0),
We.value ? (k(), E("div", Ot, [
Ne(e.$slots, "footer", {}, () => [
de(we(f.footer), 1)
], !0)
])) : H("", !0)
], 64))
]),
default: ce(() => [
s("div", ye({
tabindex: "1",
class: ["color-picker-display", [`color-picker-${f.size}`, { "color-picker-disabled": f.disabled }]],
style: `
--color-picker-width: ${ze.value};
--color-picker-height: ${fe.value};
--color-picker-block-size: ${rt.value};
--color-picker-primary-color-hover: ${M(He)[4]};
--color-picker-primary-color-focus: ${M(He)[4]};
--color-picker-primary-shadow-color: ${M(je)};
`
}, e.$attrs), [
s("div", Zt, [
s("div", Tt, [
t[5] || (t[5] = s("div", { class: "color-picker-checkboard" }, null, -1)),
s("div", {
style: v(`position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: ${O.value ? M(F)(O.value) : ""};`)
}, null, 4),
u.value && O.value ? (k(), E("div", {
key: 0,
class: "color-picker-value",
style: v({ color: O.value[2] > 50 || O.value[3] < 0.5 ? "black" : "white" })
}, [
Ne(e.$slots, "label", { color: u.value }, () => [
de(we(f.label ? f.label(u.value) : u.value), 1)
], !0)
], 4)) : H("", !0)
])
])
], 16)
]),
_: 3
}, 8, ["style", "tooltip-style"]));
}
});
export {
Kt as default
};