vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
55 lines (54 loc) • 1.94 kB
JavaScript
import { computed as v, ref as x, onBeforeUnmount as y } from "vue";
import { HSVtoRGB as g } from "../utils.mjs";
const w = (n, s, a, h) => {
const f = v(() => {
const { r: e, g: t, b: r } = g({ h: n.hue, s: n.sat, v: n.val }), E = `rgba(${e}, ${t}, ${r}, 0)`, b = `rgba(${e}, ${t}, ${r}, 1)`;
return `linear-gradient(to right, ${E}, ${b})`;
}), $ = v(() => {
const { r: e, g: t, b: r } = g({ h: n.hue, s: n.sat, v: n.val });
return `rgba(${e}, ${t}, ${r}, ${n.alpha})`;
}), u = v(() => n.width), o = x(0), i = (e) => {
if (a.value) {
a.value.style.transform = `translate(${e}px, 0px)`;
const t = e / u.value * 100 / 100;
h("update:alpha", t);
}
}, c = (e) => {
if (e.cancelable && e.preventDefault(), !s.value || !a.value)
return;
let t = 0;
e instanceof MouseEvent ? t = e.pageX - o.value : t = e.touches[0].pageX - o.value, t = Math.min(u.value, Math.max(0, t)), i(t);
}, l = () => {
if (s.value) {
const e = s.value.getBoundingClientRect();
o.value = e.left;
}
}, p = () => {
if (s.value) {
const e = n.alpha * (u.value ?? 0);
a.value.style.transform = `translate(${e}px, 0px)`;
}
}, m = () => {
document.removeEventListener("mousemove", c), document.removeEventListener("touchmove", c);
}, d = () => {
m();
}, L = () => {
document.addEventListener("mouseup", d, { once: !0 }), document.addEventListener("touchend", d, { once: !0, passive: !1 }), document.addEventListener("mousemove", c), document.addEventListener("touchmove", c, { passive: !1 });
}, M = (e) => {
L(), l();
let t;
e instanceof MouseEvent ? t = e.pageX - o.value : t = e.touches[0].pageX - o.value, t = Math.min(u.value, Math.max(0, t)), i(t);
};
return y(() => {
m();
}), {
alphaBgColor: f,
cursorColor: $,
setSizePoses: l,
setCursor: p,
onMousedown: M
};
};
export {
w as useAlpha
};