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