dk-plus
Version:
42 lines (41 loc) • 1.75 kB
JavaScript
import "vue";
import { getColor as l } from "../../public/get-color/index.js";
import "../../../_icon/index.js";
const v = () => {
const a = (r, t, e, o) => {
o = l(o).rgbaToHex();
const s = l(o).hexToRgba(t).replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+)\)/, "$1, $2, $3"), n = () => {
t += e, t < 1 && t > 0 && (r.style.setProperty("--scrollbar-thumb-color", `rgba(${s}, ${t})`), requestAnimationFrame(n));
};
n();
}, h = (r) => {
r.classList.remove("dk-scrollbar"), r.removeEventListener("mouseenter", () => {
}), r.removeEventListener("mouseleave", () => {
});
}, u = (r, t) => {
const e = (s) => t.value[s], o = (s) => e(s) || r.getAttribute(`${s}`) || "";
return {
width: o("width"),
height: o("height"),
barWidth: o("bar-width"),
thumbRadius: o("thumb-radius"),
trackColor: o("track-color"),
thumbColor: o("thumb-color")
};
}, c = (r, t) => {
r.className = "dk-scrollbar";
const e = u(r, t), o = l(e.thumbColor || "#c1c1c1").hexToRgba(0);
e.width && r.style.setProperty("--scrollbar-width", e.width), e.height && r.style.setProperty("--scrollbar-height", e.height), e.trackColor && r.style.setProperty("--scrollbar-track-color", e.trackColor), e.barWidth && r.style.setProperty("--scrollbar-bar-width", e.barWidth), e.thumbRadius && r.style.setProperty("--scrollbar-thumb-radius", e.thumbRadius), r.style.setProperty("--scrollbar-thumb-color", o), r.addEventListener("mouseenter", () => a(r, 0, 0.1, o)), r.addEventListener("mouseleave", () => a(r, 1, -0.1, o));
};
return {
mounted: (r, t) => {
t.value && c(r, t);
},
updated: (r, t) => {
t.value ? c(r, t) : h(r);
}
};
};
export {
v as DirectiveScroll
};