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