@aplus-frontend/ui
Version:
89 lines (88 loc) • 2.49 kB
JavaScript
import { defineComponent as b, toRef as z, shallowRef as g, ref as x, watchEffect as _, unref as a, watch as k, computed as s, createBlock as C, createCommentVNode as R, openBlock as B, mergeProps as L } from "vue";
import "./internal.vue2.mjs";
import { omit as w } from "lodash-unified";
import { getScrollable as u, ensureRangeValue as y } from "./utils/index.mjs";
import { useResizeObserver as E } from "@vueuse/core";
import N from "./internal.vue.mjs";
const j = /* @__PURE__ */ b({
name: "ScrollBar",
__name: "index",
props: {
scrollContainer: {},
extraSize: { default: 0 },
direction: { default: "vertical" },
scroll: {},
barLength: { default: 30 },
width: {},
barColor: {},
trackColor: {},
trackWidth: {},
disabled: { type: Boolean, default: !1 },
showTrack: { type: Boolean, default: !0 },
trackSpeed: { default: 2 },
onScrollStart: {},
onScroll: {},
onScrollEnd: {}
},
setup(p, { expose: S }) {
const r = p, o = z(r, "scrollContainer"), l = g(), n = x(r.barLength);
function m() {
if (!o.value || !l.value) return;
const { totalSize: e, visibleSize: t, distance: c } = u(
o.value,
r.direction
), i = c / (e + r.extraSize - t || 1) * 100;
l.value.scroll(i);
}
function f() {
const { visibleSize: e, totalSize: t } = u(
o.value,
r.direction
);
n.value = y(
e / (t + r.extraSize || 1) * 100
);
}
E(o, () => {
f();
}), _(
() => {
const e = a(o.value);
e && (f(), e.addEventListener("scroll", m));
},
{ flush: "post" }
), k(
() => r.barLength,
(e) => {
n.value = e;
}
);
function d(e) {
const t = a(o);
if (!t) return;
const { totalSize: c, visibleSize: i, topOrLeft: v } = u(
t,
r.direction
);
if (c <= i) return;
const h = `scroll${v}`;
t[h] = e * (c + r.extraSize - i) / 100;
}
return S({
currentScroll: s(() => a(l.value?.currentScroll)),
scroll: d,
visible: s(() => n.value < 100),
rootElement: s(() => a(l.value?.container))
}), (e, t) => n.value !== 100 ? (B(), C(N, L({
key: 0,
ref_key: "barRef",
ref: l
}, a(w)(r, ["onScroll", "extraSize", "scrollContainer"]), {
"bar-length": n.value,
onScroll: d
}), null, 16, ["bar-length"])) : R("", !0);
}
});
export {
j as default
};