@aplus-frontend/ui
Version:
252 lines (251 loc) • 7.15 kB
JavaScript
import { defineComponent as fe, ref as ue, reactive as he, computed as v, unref as l, watchEffect as _, watch as pe, createElementBlock as ye, openBlock as P, withModifiers as M, normalizeStyle as A, normalizeClass as B, createElementVNode as z, renderSlot as me, createBlock as L, createCommentVNode as O, mergeProps as T } from "vue";
import "../config-provider/index.mjs";
import "../scroll-bar/index.mjs";
import { isDef as f } from "../utils/index.mjs";
import { ensureRangeValue as n, getScrollable as k } from "../scroll-bar/utils/index.mjs";
import de from "./hooks/use-scroll-wrapper.mjs";
import { isString as j } from "lodash-unified";
import { useElementSize as F, useRafFn as ve } from "@vueuse/core";
import { wait as R } from "@aplus-frontend/utils";
import { useScrollBack as xe } from "./hooks/use-scroll-back.mjs";
import { useScrollSmooth as Be } from "./hooks/use-scroll-smooth.mjs";
import { getElementScrollOffset as we } from "./utils/index.mjs";
import { useNamespace as ge } from "../config-provider/hooks/use-namespace.mjs";
import H from "../scroll-bar/internal.vue.mjs";
const Ye = /* @__PURE__ */ fe({
name: "ScrollView",
__name: "index",
props: {
width: {},
heigth: {},
showXBar: { type: Boolean, default: !0 },
showYBar: { type: Boolean, default: !0 },
autoPlay: { type: [Boolean, Object] },
xBarProps: { default: () => ({}) },
yBarProps: { default: () => ({}) },
onWheel: {}
},
setup(I, { expose: q }) {
const o = I, G = {
direction: "vertical",
rate: 1,
repeat: !0
}, { b: J, e: w, em: W } = ge("scroll-view"), u = ue(), c = he({ x: 30, y: 30 });
let g = !1;
const {
scrollOffset: r,
maxScrollDistance: i,
xBarRef: K,
yBarRef: Q,
containerRef: s,
scrollYBar: h,
scrollXBar: p,
updateMaxScrollDistance: U
} = de(), { width: Z, height: ee } = F(u), { width: te, height: re } = F(s), { start: N } = xe({
scrollOffset: r,
maxScrollDistance: i,
onScroll: (e) => {
e === "horizontal" ? p() : h();
},
async onScrollEnd() {
await R(200), S();
}
}), { start: $ } = Be({
scrollOffset: r,
maxScrollDistance: i,
onScroll(e, t) {
V.value && (y(), g = !0), e && p(), t && h();
},
async onScrollEnd() {
g && (await R(200), S(), g = !1);
}
}), { resume: S, pause: y, isActive: V } = ve(
() => {
if (!o.autoPlay) {
y();
return;
}
const e = o.autoPlay === !0 ? {} : o.autoPlay, t = {
...G,
...e
};
if (t.direction === "horizontal") {
if (r.x === i.x) {
y(), t.repeat && N("horizontal");
return;
}
r.x = n(
r.x + t.rate,
0,
i.x
), p();
} else {
if (r.y === i.y) {
y(), t.repeat && N("vertical");
return;
}
r.y = n(
r.y + t.rate,
0,
i.y
), h();
}
},
{ immediate: !0 }
), m = v(() => o.showXBar && c.x !== 100), x = v(() => o.showYBar && c.y !== 100), oe = v(() => ({
width: f(o.width) ? j(o.width) ? o.width : Number.isNaN(o.width) ? void 0 : `${o.width}px` : void 0,
height: f(o.heigth) ? j(o.heigth) ? o.heigth : Number.isNaN(o.heigth) ? void 0 : `${o.heigth}px` : void 0,
padding: `${o.xBarProps.trackWidth || 10}px ${o.yBarProps.trackWidth || 10}px`
}));
async function b() {
V.value && (y(), await R(500), S());
}
async function ae(e) {
if (l(x))
e.preventDefault(), e.stopPropagation();
else
return;
r.y = n(
r.y + e.deltaY,
0,
i.y
), h(), o.onWheel?.("vertical", r.y), b();
}
function le(e) {
if (l(m))
e.preventDefault(), e.stopPropagation();
else
return;
r.x = n(
r.x + e.deltaX,
0,
i.x
), p(), o.onWheel?.("horizontal", r.x), b();
}
function E() {
if (o.showYBar) {
const { visibleSize: e, totalSize: t } = k(
s.value,
"vertical"
);
c.y = n(
Math.min(e / (t || 1) * 100)
);
}
if (o.showXBar) {
const { visibleSize: e, totalSize: t } = k(
s.value,
"horizontal"
);
c.x = n(
Math.min(e / (t || 1) * 100)
);
}
}
function X(e, t) {
const a = l(s), d = l(u);
if (!a || !d) return;
const { visibleSize: C, totalSize: D } = k(a, t);
if (D <= C) return;
const Y = (D - C) * e / 100, ce = t === "vertical";
if (b(), ce) {
r.y = Y;
return;
}
r.x = Y;
}
_(
() => {
l(s.value) && E();
},
{ flush: "post" }
), pe(
() => [
Z.value,
ee.value,
te.value,
re.value
],
() => {
E(), U();
}
), _(() => {
u.value && (u.value.style.transform = `translate3d(-${r.x}px, -${r.y}px, 0px)`);
});
function ie(e, t) {
f(e) && m.value && (r.x = n(e, 0, i.x), p()), f(t) && x.value && (r.y = n(t, 0, i.y), h());
}
function ne({ smooth: e, left: t, top: a }) {
e ? $({ x: t, y: a }) : (f(t) && (r.x = t), f(a) && (r.y = a));
}
function se(e, t = "start") {
const a = we(
s.value,
e,
t
), d = {};
m.value && (d.x = n(
r.x + a.x,
0,
i.x
)), x.value && (d.y = n(
r.y + a.y,
0,
i.y
)), $(d);
}
return q({
scrollTop: v(() => r.y),
scrollLeft: v(() => r.x),
scroll: ie,
scrollTo: ne,
scrollIntoView: se
}), (e, t) => (P(), ye("div", {
ref_key: "containerRef",
ref: s,
class: B(l(J)()),
style: A(oe.value),
onWheel: [
M(ae, ["exact"]),
M(le, ["shift"])
]
}, [
z("div", {
ref_key: "contentRef",
ref: u,
class: B(l(w)("content"))
}, [
me(e.$slots, "default")
], 2),
z("div", {
class: B([l(w)("bar-wrapper"), l(W)("bar-wrapper", "vertical")]),
style: A(`height: calc(100% - ${m.value ? e.xBarProps.trackWidth || 10 : 0}px)`)
}, [
x.value ? (P(), L(l(H), T({
key: 0,
ref_key: "yBarRef",
ref: Q
}, e.yBarProps, {
"bar-length": c.y,
onScroll: t[0] || (t[0] = (a) => X(a, "vertical"))
}), null, 16, ["bar-length"])) : O("", !0)
], 6),
z("div", {
class: B([l(w)("bar-wrapper"), l(W)("bar-wrapper", "horizontal")])
}, [
m.value ? (P(), L(l(H), T({
key: 0,
ref_key: "xBarRef",
ref: K
}, e.xBarProps, {
direction: "horizontal",
"bar-length": c.x,
onScroll: t[1] || (t[1] = (a) => X(a, "horizontal"))
}), null, 16, ["bar-length"])) : O("", !0)
], 2)
], 38));
}
});
export {
Ye as default
};