vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
211 lines (210 loc) • 8.84 kB
JavaScript
import { defineComponent as Be, ref as t, computed as i, onMounted as Re, createElementBlock as Ce, openBlock as De, normalizeStyle as B, createElementVNode as g, withDirectives as re, normalizeClass as H, renderSlot as Ue, withModifiers as ue, vShow as ie } from "vue";
import { useScroll as Ne, useResizeObserver as Ve, debounce as R } from "../utils/index.js";
const Oe = /* @__PURE__ */ Be({
__name: "Scrollbar",
props: {
contentClass: { default: void 0 },
contentStyle: { default: () => ({}) },
size: { default: 5 },
trigger: { default: "hover" },
autoHide: { type: Boolean, default: !1 },
delay: { default: 0 },
xScrollable: { type: Boolean, default: !1 },
yScrollable: { type: Boolean, default: !0 },
xPlacement: { default: "bottom" },
yPlacement: { default: "right" }
},
emits: ["scroll", "scrollend"],
setup(o, { expose: ce, emit: ve }) {
const a = o, n = t(), L = t(), q = t(), A = t(), m = t(!1), h = t(!1), E = t(0), M = t(0), C = t(0), D = t(0), c = t(0), s = t(0), f = t(0), d = t(0), x = t(0), k = t(0), z = t(0), U = t(0), P = t(!1), p = t(!1), b = t(!1), S = t(!1), G = t(0), J = t(0), K = t(0), Q = t(0), se = { width: "fit-content" }, X = t(!1), Y = t(!1), $ = ve, r = i(() => a.trigger === "hover"), Z = i(() => E.value > C.value), _ = i(() => M.value > D.value), N = i(() => E.value || M.value ? a.yScrollable && Z.value || a.xScrollable && _.value : !0), V = i(() => {
if (a.yScrollable && Z.value && c.value && f.value && x.value) {
const e = Math.min(
c.value,
x.value * c.value / f.value + 1.5 * a.size
);
return Number(e.toFixed(4));
}
return 0;
}), fe = i(() => c.value && f.value && x.value ? z.value / (f.value - c.value) * (x.value - V.value) : 0), de = i(() => ({
top: `${fe.value}px`,
height: `${V.value}px`
})), F = i(() => {
if (a.xScrollable && _.value && s.value && d.value && k.value) {
const e = k.value * s.value / d.value + 1.5 * a.size;
return Number(e.toFixed(4));
}
return 0;
}), me = i(() => s.value && d.value && k.value ? U.value / (d.value - s.value) * (k.value - F.value) : 0), he = i(() => ({
left: `${me.value}px`,
width: `${F.value}px`
}));
Re(() => {
ne();
});
const {
left: ee,
right: le,
top: te,
bottom: ae
} = Ne(n);
Ve([n, L], ne);
function oe() {
z.value = n.value.scrollTop, U.value = n.value.scrollLeft;
}
function pe() {
E.value = n.value.scrollHeight, M.value = n.value.scrollWidth, C.value = n.value.clientHeight, D.value = n.value.clientWidth, c.value = n.value.offsetHeight, s.value = n.value.offsetWidth, f.value = L.value.offsetHeight, d.value = L.value.offsetWidth, x.value = q.value.offsetHeight, k.value = A.value.offsetWidth;
}
function ne() {
oe(), pe();
}
const be = R(ge, 100), Se = R(He, 100), y = R(xe, 100 + a.delay), T = R(ke, 100 + a.delay);
function ge(e, l) {
$("scrollend", e, l);
}
function He(e, l) {
$("scrollend", e, l);
}
function xe() {
r.value && (a.autoHide && !X.value && (m.value = !1), !a.autoHide && !P.value && (m.value = !1));
}
function ke() {
r.value && (a.autoHide && !Y.value && (h.value = !1), !a.autoHide && !P.value && (h.value = !1));
}
function ye(e) {
if (ee.value || le.value) {
let l = "";
ee.value && (l = "left"), le.value && (l = "right"), $("scroll", e, l), r.value && (h.value = !0, !b.value && a.autoHide && (Se(e, l), T()));
}
if (te.value || ae.value) {
let l = "";
te.value && (l = "top"), ae.value && (l = "bottom"), $("scroll", e, l), r.value && (m.value = !0, !p.value && a.autoHide && (be(e, l), y()));
}
oe();
}
function Te() {
P.value = !0, b.value || p.value ? S.value = !1 : a.autoHide || (h.value = !0, m.value = !0);
}
function Le() {
P.value = !1, b.value || p.value ? S.value = !0 : a.autoHide || (h.value && T(), m.value && y());
}
function Ee() {
X.value = !0;
}
function Me() {
X.value = !1, p.value || y();
}
function ze() {
Y.value = !0;
}
function Pe() {
Y.value = !1, b.value || T();
}
function Xe(e) {
p.value = !0, G.value = z.value, K.value = e.clientY, e.target.setPointerCapture(e.pointerId), document.addEventListener("pointermove", I), document.addEventListener("pointerup", w), document.addEventListener("pointercancel", w), I(e);
}
function I(e) {
const v = (e.clientY - K.value) * (f.value - c.value) / (c.value - V.value), j = f.value - c.value;
let u = G.value + v;
u = Math.min(j, u), u = Math.max(u, 0), n.value.scrollTop = u;
}
function w() {
p.value = !1, r.value && a.autoHide && !X.value ? y() : r.value && !a.autoHide && S.value && (S.value = !1, y()), document.removeEventListener("pointermove", I), document.removeEventListener("pointerup", w), document.removeEventListener("pointercancel", w);
}
function Ye(e) {
b.value = !0, J.value = U.value, Q.value = e.clientX, e.target.setPointerCapture(e.pointerId), document.addEventListener("pointermove", O), document.addEventListener("pointerup", W), document.addEventListener("pointercancel", W), O(e);
}
function O(e) {
const v = (e.clientX - Q.value) * (d.value - s.value) / (s.value - F.value), j = d.value - s.value;
let u = J.value + v;
u = Math.min(j, u), u = Math.max(u, 0), n.value.scrollLeft = u;
}
function W() {
b.value = !1, r.value && a.autoHide && !Y.value ? T() : r.value && !a.autoHide && S.value && (S.value = !1, T()), document.removeEventListener("pointermove", O), document.removeEventListener("pointerup", W), document.removeEventListener("pointercancel", W);
}
function $e(...e) {
n.value?.scrollTo(...e);
}
function we(...e) {
n.value?.scrollBy(...e);
}
function We() {
return {
scrollTop: z.value,
scrollWidth: M.value,
scrollHeight: E.value,
clientWidth: D.value,
clientHeight: C.value
};
}
return ce({
scrollTo: $e,
scrollBy: we,
getScrollData: We
}), (e, l) => (De(), Ce("div", {
class: "scrollbar-wrap",
style: B(`
--scrollbar-width: ${o.size}px;
--scrollbar-height: ${o.size}px;
--scrollbar-border-radius: ${o.size}px;
--scrollbar-color: rgba(0, 0, 0, 0.25);
--scrollbar-color-hover: rgba(0, 0, 0, 0.4);
--scrollbar-rail-horizontal-top: 4px 2px auto 2px;
--scrollbar-rail-horizontal-bottom: auto 2px 4px 2px;
--scrollbar-rail-vertical-right: 2px 4px 2px auto;
--scrollbar-rail-vertical-left: 2px auto 2px 4px;
--scrollbar-rail-color: transparent;
`),
onMouseenter: l[4] || (l[4] = (v) => N.value && o.trigger === "hover" ? Te() : () => !1),
onMouseleave: l[5] || (l[5] = (v) => N.value && o.trigger === "hover" ? Le() : () => !1)
}, [
g("div", {
ref_key: "containerRef",
ref: n,
class: H(["scrollbar-container", { "container-scroll": N.value }]),
onScroll: ye
}, [
g("div", {
ref_key: "contentRef",
ref: L,
class: H(["scrollbar-content", o.contentClass]),
style: B([o.xScrollable ? { ...se, ...o.contentStyle } : o.contentStyle])
}, [
Ue(e.$slots, "default", {}, void 0, !0)
], 6)
], 34),
re(g("div", {
ref_key: "railVerticalRef",
ref: q,
class: H(["scrollbar-rail rail-vertical", `rail-vertical-${o.yPlacement}`])
}, [
g("div", {
class: H(["scrollbar-track", { "track-visible": o.trigger === "none" || m.value }]),
style: B(de.value),
onMouseenter: l[0] || (l[0] = (v) => r.value && a.autoHide ? Ee() : () => !1),
onMouseleave: l[1] || (l[1] = (v) => r.value && a.autoHide ? Me() : () => !1),
onPointerdown: ue(Xe, ["prevent", "stop"])
}, null, 38)
], 2), [
[ie, o.yScrollable]
]),
re(g("div", {
ref_key: "railHorizontalRef",
ref: A,
class: H(["scrollbar-rail rail-horizontal", `rail-horizontal-${o.xPlacement}`])
}, [
g("div", {
class: H(["scrollbar-track", { "track-visible": o.trigger === "none" || h.value }]),
style: B(he.value),
onMouseenter: l[2] || (l[2] = (v) => r.value && a.autoHide ? ze() : () => !1),
onMouseleave: l[3] || (l[3] = (v) => r.value && a.autoHide ? Pe() : () => !1),
onPointerdown: ue(Ye, ["prevent", "stop"])
}, null, 38)
], 2), [
[ie, o.xScrollable]
])
], 36));
}
});
export {
Oe as default
};