vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
673 lines (672 loc) • 23.9 kB
JavaScript
import { defineComponent as Cl, ref as A, computed as d, watch as Le, watchEffect as Ml, createBlock as J, openBlock as b, unref as z, normalizeStyle as p, withCtx as se, createElementVNode as n, mergeProps as me, createElementBlock as R, createCommentVNode as H, renderSlot as Ne, createTextVNode as ne, toDisplayString as ge, Fragment as be, normalizeClass as Rl, withModifiers as Hl, renderList as Be } from "vue";
import { toRgbaString as U, toHexString as K, rgba as x, rgb2hsv as ke, hsla as j, hsl2hsv as Pe, hsva as X, hsl2rgb as ye, hsv2rgb as B, rgb2hsl as we, hsv2hsl as ue, toHexaString as P, toHslaString as _, toRgbString as $e, toHslString as Se, toHsvaString as O, toHsvString as Ae } from "seemly";
import El from "../tooltip/index.js";
import _e from "../input/index.js";
import De from "../button/index.js";
import { useInject as zl, useSlotsExist as Ul } from "../utils/index.js";
const xl = { class: "color-picker-preview" }, Vl = { class: "color-picker-preview-sliders" }, Il = {
key: 0,
class: "color-picker-preview-circle"
}, Ll = ["value"], Nl = { class: "color-picker-input" }, Bl = { class: "color-picker-input-group" }, Pl = {
key: 0,
class: "color-picker-swatches"
}, _l = ["onClick"], Dl = {
key: 0,
class: "color-picker-actions"
}, Fl = {
key: 1,
class: "color-picker-footer"
}, Xl = { class: "color-picker-wrap" }, Ol = { class: "color-picker-fill" }, k = "12px", Fe = 12, f = "6px", Zl = 6, Jl = /* @__PURE__ */ Cl({
__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(Xe, { emit: Oe }) {
const s = Xe, ie = A(), Q = A(null), ee = A(null), le = A(null), E = A(0), ce = A(1), te = A([0, 0]), G = A(), i = A(s.value), m = A(oe(i.value) || s.modes[0] || "rgb"), re = A(), V = A([]), { colorPalettes: Ce, shadowColor: Ze } = zl("ColorPicker"), D = Oe, Te = Ul("footer"), je = d(() => Te.value || s.footer), Ge = d(() => ({
width: k,
height: k,
borderRadius: f,
left: `calc(${te.value[0]}% - ${f})`,
bottom: `calc(${te.value[1]}% - ${f})`
})), We = d(() => h.value ? `rgb(${h.value[0]}, ${h.value[1]}, ${h.value[2]})` : ""), Ye = d(() => ({
backgroundColor: We.value,
borderRadius: f,
width: k,
height: k
})), Me = d(() => ({
height: k,
borderRadius: f
})), qe = d(() => ({
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: k,
borderRadius: f
})), Je = d(() => ({
left: `calc((${E.value}%) / 359 * 100 - ${f})`,
borderRadius: f,
width: k,
height: k
})), Ke = d(() => ({
backgroundColor: `hsl(${E.value}, 100%, 50%)`,
borderRadius: f,
width: k,
height: k
})), Qe = d(() => 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%)` : ""), el = d(() => ({
left: `calc(${ce.value * 100}% - ${f})`,
borderRadius: f,
width: k,
height: k
})), ll = d(() => ({
backgroundColor: h.value ? U(h.value) : void 0,
borderRadius: f,
width: k,
height: k
})), Re = d(() => h.value && K(h.value)), He = d(() => typeof s.width == "number" ? `${s.width}px` : s.width), de = d(() => `${{
small: 24,
middle: 32,
large: 40
}[s.size]}px`), tl = d(() => {
const e = {
small: 6,
middle: 8,
large: 10
};
return `calc((${de.value} - ${e[s.size]}px) / 3)`;
}), ve = d(() => oe(i.value)), W = d(() => m.value.toUpperCase() + (s.showAlpha ? "A" : "")), rl = d(() => W.value.split(""));
let y, w, Z, T, I, L, N, $;
const C = d(() => {
if (!i.value) return null;
switch (ve.value) {
case "hsv":
return X(i.value);
case "hsl":
return [y, w, Z, $] = j(i.value), [...Pe(y, w, Z), $];
case "rgb":
case "hex":
return [I, L, N, $] = x(i.value), [...ke(I, L, N), $];
}
}), h = d(() => {
if (!i.value) return null;
switch (ve.value) {
case "rgb":
case "hex":
return x(i.value);
case "hsv":
return [y, w, T, $] = X(i.value), [...B(y, w, T), $];
case "hsl":
return [y, w, Z, $] = j(i.value), [...ye(y, w, Z), $];
}
}), F = d(() => {
if (!i.value) return null;
switch (ve.value) {
case "hsl":
return j(i.value);
case "hsv":
return [y, w, T, $] = X(i.value), [...ue(y, w, T), $];
case "rgb":
case "hex":
return [I, L, N, $] = x(i.value), [...we(I, L, N), $];
}
}), M = d(() => {
switch (m.value) {
case "rgb":
case "hex":
return h.value;
case "hsv":
return C.value;
case "hsl":
return F.value;
}
}), Ee = d(
() => s.swatches.map((e) => {
const l = oe(e);
return {
value: e,
mode: l,
legalValue: kl(e, l)
};
})
);
Le(
() => s.value,
(e) => {
i.value = e;
}
), Le(
() => [m.value, M.value],
() => {
m.value === "hex" ? re.value = M.value === null ? void 0 : (s.showAlpha ? P : K)(M.value) : M.value === null ? V.value = new Array(s.showAlpha ? 4 : 3).fill(void 0) : V.value = M.value.map((e, l) => s.showAlpha && l === 3 ? `${Math.floor(e * 100)}%` : `${Math.floor(e)}`);
},
{
immediate: !0,
deep: !0
}
), Ml(() => {
(G.value === void 0 || G.value !== i.value) && C.value && (E.value = C.value[0], ce.value = C.value[3], te.value = [C.value[1], C.value[2]]), G.value = void 0;
});
function g(e, l) {
l === "cursor" ? G.value = e : G.value = void 0, i.value = e, D("update:value", e), l === "input" && D("complete", e);
}
function ol(e, l) {
const t = C.value ? C.value[3] : 1;
switch (te.value = [e, l], m.value) {
case "hsv":
g((s.showAlpha ? O : Ae)([E.value, e, l, t]), "cursor");
break;
case "hsl":
g(
(s.showAlpha ? _ : Se)([...ue(E.value, e, l), t]),
"cursor"
);
break;
case "rgb":
g(
(s.showAlpha ? U : $e)([...B(E.value, e, l), t]),
"cursor"
);
break;
case "hex":
g(
(s.showAlpha ? P : K)([...B(E.value, e, l), t]),
"cursor"
);
break;
}
}
function al(e) {
Q.value && (document.addEventListener("mousemove", he), document.addEventListener("mouseup", ze), he(e));
}
function he(e) {
if (!Q.value) return;
const { width: l, height: t, left: o, bottom: S } = Q.value.getBoundingClientRect(), r = (S - e.clientY) / t, a = (e.clientX - o) / l, u = 100 * (a > 1 ? 1 : a < 0 ? 0 : a), c = 100 * (r > 1 ? 1 : r < 0 ? 0 : r);
ol(u, c);
}
function ze() {
document.removeEventListener("mousemove", he), document.removeEventListener("mouseup", ze), D("complete", i.value);
}
function sl(e) {
if (E.value = e, !C.value)
return;
const [, l, t, o] = C.value;
switch (m.value) {
case "hsv":
g((s.showAlpha ? O : Ae)([e, l, t, o]), "cursor");
break;
case "rgb":
g((s.showAlpha ? U : $e)([...B(e, l, t), o]), "cursor");
break;
case "hex":
g((s.showAlpha ? P : K)([...B(e, l, t), o]), "cursor");
break;
case "hsl":
g((s.showAlpha ? _ : Se)([...ue(e, l, t), o]), "cursor");
break;
}
}
function nl(e) {
ee.value && (document.addEventListener("mousemove", pe), document.addEventListener("mouseup", Ue), pe(e));
}
function ul(e) {
return e = Math.round(e), e >= 360 ? 359 : e < 0 ? 0 : e;
}
function pe(e) {
if (!ee.value) return;
const { width: l, left: t } = ee.value.getBoundingClientRect(), o = ul((e.clientX - t - Zl) / (l - Fe) * 360);
sl(o);
}
function Ue() {
document.removeEventListener("mousemove", pe), document.removeEventListener("mouseup", Ue), D("complete", i.value);
}
function il(e) {
switch (m.value) {
case "hsv":
[y, w, T] = C.value, g(O([y, w, T, e]), "cursor");
break;
case "rgb":
[I, L, N] = h.value, g(U([I, L, N, e]), "cursor");
break;
case "hex":
[I, L, N] = h.value, g(P([I, L, N, e]), "cursor");
break;
case "hsl":
[y, w, Z] = F.value, g(_([y, w, Z, e]), "cursor");
break;
}
ce.value = e;
}
function cl(e) {
!le.value || !h.value || (document.addEventListener("mousemove", fe), document.addEventListener("mouseup", xe), fe(e));
}
function dl(e) {
return e = Math.round(e * 100) / 100, e > 1 ? 1 : e < 0 ? 0 : e;
}
function fe(e) {
if (!le.value) return;
const { width: l, left: t } = le.value.getBoundingClientRect(), o = dl((e.clientX - t) / (l - Fe));
il(o);
}
function xe() {
document.removeEventListener("mousemove", fe), document.removeEventListener("mouseup", xe), D("complete", i.value);
}
function oe(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 vl() {
const e = s.modes.findIndex((l) => l === m.value);
e !== -1 ? m.value = s.modes[(e + 1) % s.modes.length] : m.value = "rgb";
}
function hl(e) {
const l = e.target, t = Ie(l.value.toUpperCase(), m.value, "hex");
g(t, "input");
}
function pl(e) {
const l = e.trim();
return /^#[0-9a-fA-F]+$/.test(l) ? [4, 5, 7, 9].includes(l.length) : !1;
}
function fl(e) {
return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 360)) : !1;
}
function ml(e) {
return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 100)) : !1;
}
function gl(e) {
return /^\d{1,3}\.?\d*%$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e) / 100, 100)) : !1;
}
function bl(e) {
return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 255)) : !1;
}
function Y(e, l) {
return e === void 0 ? "" : l === "HEX" || l === "HEXA" ? e : l === "A" ? `${Math.floor(Number(e) * 100)}%` : String(Math.floor(Number(e)));
}
function ae(e) {
g(e, "input");
}
function q(e, l) {
if (m.value === "hex") {
ae((s.showAlpha ? P : K)(l));
return;
}
let t;
switch (M.value === null ? t = [0, 0, 0, 0] : t = [...M.value], m.value) {
case "hsv":
t[e] = l, ae((s.showAlpha ? O : Ae)(t));
break;
case "rgb":
t[e] = l, ae((s.showAlpha ? U : $e)(t));
break;
case "hsl":
t[e] = l, ae((s.showAlpha ? _ : Se)(t));
break;
}
}
function Ve(e, l) {
var c, v;
const t = e.target;
let o, S, r;
const a = t.value;
l === void 0 ? r = M.value === null ? void 0 : M.value : r = ((c = M.value) == null ? void 0 : c[l]) === void 0 || (v = M.value) == null ? void 0 : v[l].toString();
const u = l === void 0 ? W.value : W.value[l];
switch (u) {
case "HEX":
case "HEXA":
S = pl(a), S && q(0, a), re.value = Y(a, u);
break;
case "H":
o = fl(a), o === !1 ? V.value[l] = Y(r, u) : q(l, o);
break;
case "S":
case "L":
case "V":
o = ml(a), o === !1 ? V.value[l] = Y(r, u) : q(l, o);
break;
case "A":
o = gl(a), o === !1 ? V.value[l] = Y(r, u) : q(l, o);
break;
case "R":
case "G":
case "B":
o = bl(a), o === !1 ? V.value[l] = Y(r, u) : q(l, o);
break;
}
}
function kl(e, l) {
if (l === "hsv") {
const [t, o, S, r] = X(e);
return U([...B(t, o, S), r]);
}
return e;
}
function yl(e) {
const l = document.createElement("canvas").getContext("2d");
return l ? (l.fillStyle = e, l.fillStyle) : "#000000";
}
function Ie(e, l, t) {
return t = t || oe(e), t ? t === l ? e : {
rgb: {
hex(r) {
return P(x(r));
},
hsl(r) {
const [a, u, c, v] = x(r);
return _([...we(a, u, c), v]);
},
hsv(r) {
const [a, u, c, v] = x(r);
return O([...ke(a, u, c), v]);
}
},
hex: {
rgb(r) {
return U(x(r));
},
hsl(r) {
const [a, u, c, v] = x(r);
return _([...we(a, u, c), v]);
},
hsv(r) {
const [a, u, c, v] = x(r);
return O([...ke(a, u, c), v]);
}
},
hsl: {
hex(r) {
const [a, u, c, v] = j(r);
return P([...ye(a, u, c), v]);
},
rgb(r) {
const [a, u, c, v] = j(r);
return U([...ye(a, u, c), v]);
},
hsv(r) {
const [a, u, c, v] = j(r);
return O([...Pe(a, u, c), v]);
}
},
hsv: {
hex(r) {
const [a, u, c, v] = X(r);
return P([...B(a, u, c), v]);
},
rgb(r) {
const [a, u, c, v] = X(r);
return U([...B(a, u, c), v]);
},
hsl(r) {
const [a, u, c, v] = X(r);
return _([...ue(a, u, c), v]);
}
}
}[t][l](e) : void 0;
}
function wl(e) {
let { value: l, mode: t } = e;
return t || (t = "hex", /^[a-zA-Z]+$/.test(l) ? l = yl(l) : (console.warn("color-picker", `color ${l} in swatches is invalid.`), l = "#000000")), t === m.value ? l : Ie(l, m.value, t);
}
function $l(e) {
g(wl(e), "input");
}
function Sl() {
D("confirm", i.value), ie.value.hide();
}
function Al() {
g(void 0, "input"), D("clear"), ie.value.hide();
}
return (e, l) => (b(), J(z(El), {
ref_key: "tooltipRef",
ref: ie,
style: p(`width: ${He.value}; height: ${de.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)",
...e.tooltipStyle
},
"content-style": { width: "100%", height: "100%" },
trigger: "click",
"transition-duration": 200
}, {
tooltip: se(() => [
e.disabled ? H("", !0) : (b(), R(be, { key: 0 }, [
n("div", {
class: Rl(["color-picker-panel", { "panel-with-actions": e.actions.length }])
}, [
n("div", {
ref_key: "palleteRef",
ref: Q,
class: "color-picker-pallete",
onMousedown: al
}, [
n("div", {
class: "color-picker-pallete-layer",
style: p({ backgroundImage: `linear-gradient(90deg, white, hsl(${E.value}, 100%, 50%))` })
}, null, 4),
l[1] || (l[1] = n("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)),
n("div", {
class: "color-picker-handle",
style: p(Ge.value)
}, [
n("div", {
class: "color-picker-handle-fill",
style: p(Ye.value)
}, null, 4)
], 4)
], 544),
n("div", xl, [
n("div", Vl, [
n("div", {
class: "color-picker-slider",
style: p(Me.value)
}, [
n("div", {
ref_key: "hueRailRef",
ref: ee,
style: p(qe.value),
onMousedown: nl
}, [
n("div", {
style: p(`position: absolute; top: 0px; bottom: 0; left: ${f}; right: ${f}`)
}, [
n("div", {
class: "color-picker-handle",
style: p(Je.value)
}, [
n("div", {
class: "color-picker-handle-fill",
style: p(Ke.value)
}, null, 4)
], 4)
], 4)
], 36)
], 4),
e.showAlpha ? (b(), R("div", {
key: 0,
ref_key: "alphaRailRef",
ref: le,
class: "color-picker-slider",
style: p(Me.value),
onMousedown: cl
}, [
n("div", {
style: p(`
border-radius: ${f};
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0px;
overflow: hidden;
`)
}, [
l[2] || (l[2] = n("div", { class: "color-picker-checkboard" }, null, -1)),
n("div", {
class: "color-picker-slider-image",
style: p(`background-image: ${Qe.value}`)
}, null, 4)
], 4),
h.value ? (b(), R("div", {
key: 0,
style: p(`position: absolute; top: 0px; bottom: 0; left: ${f}; right: ${f}`)
}, [
n("div", {
class: "color-picker-handle",
style: p(el.value)
}, [
n("div", {
class: "color-picker-handle-fill",
style: p(ll.value)
}, null, 4)
], 4)
], 4)) : H("", !0)
], 36)) : H("", !0)
]),
e.showPreview ? (b(), R("div", Il, [
n("span", {
class: "color-picker-circle-fill",
style: p(`background: ${Re.value || "#000000"};`)
}, null, 4),
n("input", {
class: "color-picker-circle-input",
type: "color",
value: Re.value,
onChange: Hl(hl, ["stop"])
}, null, 40, Ll)
])) : H("", !0)
]),
n("div", Nl, [
n("div", {
class: "color-picker-input-mode",
style: p({ cursor: e.modes.length === 1 ? "" : "pointer" }),
onClick: vl
}, ge(W.value), 5),
n("div", Bl, [
m.value === "hex" ? (b(), J(z(_e), me({
key: 0,
size: "small",
placeholder: W.value,
value: re.value,
"onUpdate:value": l[0] || (l[0] = (t) => re.value = t),
valueModifiers: { lazy: !0 },
onChange: Ve
}, e.inputProps), null, 16, ["placeholder", "value"])) : (b(!0), R(be, { key: 1 }, Be(rl.value, (t, o) => (b(), J(z(_e), me({
size: "small",
style: `${t === "A" ? "flex-grow: 1.25" : ""}`,
key: o,
placeholder: t,
value: V.value[o],
"onUpdate:value": (S) => V.value[o] = S,
valueModifiers: { lazy: !0 },
onChange: (S) => Ve(S, o),
ref_for: !0
}, e.inputProps), null, 16, ["style", "placeholder", "value", "onUpdate:value", "onChange"]))), 128))
])
]),
Ee.value.length ? (b(), R("div", Pl, [
(b(!0), R(be, null, Be(Ee.value, (t, o) => (b(), R("div", {
tabindex: "0",
class: "color-picker-swatch",
key: o,
onClick: (S) => $l(t)
}, [
n("div", {
class: "color-picker-swatch-fill",
style: p(`background: ${t.legalValue};`)
}, null, 4)
], 8, _l))), 128))
])) : H("", !0)
], 2),
e.actions.length ? (b(), R("div", Dl, [
e.actions.includes("confirm") ? (b(), J(z(De), {
key: 0,
type: "primary",
size: "small",
onClick: Sl
}, {
default: se(() => l[3] || (l[3] = [
ne("确认")
])),
_: 1
})) : H("", !0),
e.actions.includes("clear") ? (b(), J(z(De), {
key: 1,
size: "small",
onClick: Al
}, {
default: se(() => l[4] || (l[4] = [
ne("清除")
])),
_: 1
})) : H("", !0)
])) : H("", !0),
je.value ? (b(), R("div", Fl, [
Ne(e.$slots, "footer", {}, () => [
ne(ge(e.footer), 1)
], !0)
])) : H("", !0)
], 64))
]),
default: se(() => [
n("div", me({
tabindex: "1",
class: ["color-picker-display", [`color-picker-${e.size}`, { "color-picker-disabled": e.disabled }]],
style: `
--color-picker-width: ${He.value};
--color-picker-height: ${de.value};
--color-picker-block-size: ${tl.value};
--color-picker-primary-color-hover: ${z(Ce)[4]};
--color-picker-primary-color-focus: ${z(Ce)[4]};
--color-picker-primary-shadow-color: ${z(Ze)};
`
}, e.$attrs), [
n("div", Xl, [
n("div", Ol, [
l[5] || (l[5] = n("div", { class: "color-picker-checkboard" }, null, -1)),
n("div", {
style: p(`position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: ${F.value ? z(_)(F.value) : ""};`)
}, null, 4),
i.value && F.value ? (b(), R("div", {
key: 0,
class: "color-picker-value",
style: p({ color: F.value[2] > 50 || F.value[3] < 0.5 ? "black" : "white" })
}, [
Ne(e.$slots, "label", { color: i.value }, () => [
ne(ge(e.label ? e.label(i.value) : i.value), 1)
], !0)
], 4)) : H("", !0)
])
])
], 16)
]),
_: 3
}, 8, ["style", "tooltip-style"]));
}
});
export {
Jl as default
};