@aplus-frontend/ui 0.4.9 → 0.4.10

package/es/src/scroll-view/hooks/use-scroll-back.d.ts

@@ -0,0 +1,26 @@
+import { ScrollBarDirection } from '../../scroll-bar';
+import { Ref } from 'vue';
+type ScrollBackOptions = {
+    scrollOffset: {
+        x: number;
+        y: number;
+    };
+    maxScrollDistance: {
+        x: number;
+        y: number;
+    };
+    timer?: number;
+    onScroll?: (direction: ScrollBarDirection) => void;
+    onScrollEnd?: (direction: ScrollBarDirection) => void;
+};
+/**
+ * 在特定的时间内滚动到0
+ * @param options
+ * @returns
+ */
+declare const useScrollBack: ({ scrollOffset, maxScrollDistance, timer, onScroll, onScrollEnd }: ScrollBackOptions) => {
+    start: (direction: ScrollBarDirection) => void;
+    stop: () => void;
+    isActive: Readonly< Ref<boolean, boolean>>;
+};
+export { useScrollBack };

package/es/src/scroll-view/hooks/use-scroll-back.mjs

@@ -0,0 +1,37 @@
+import "../../scroll-bar/index.mjs";
+import { useRafFn as x } from "@vueuse/core";
+import { ensureRangeValue as u } from "../../scroll-bar/utils/index.mjs";
+const m = {
+  horizontal: "x",
+  vertical: "y"
+}, p = () => {
+}, M = (e) => 1 - Math.pow(1 - e, 3), y = ({
+  scrollOffset: e,
+  maxScrollDistance: d,
+  timer: l = 500,
+  onScroll: n = p,
+  onScrollEnd: f = p
+}) => {
+  let a, t, i;
+  const { pause: r, resume: g, isActive: h } = x(
+    () => {
+      const o = Date.now(), s = m[t], T = o - a, c = u(T / l, 0, 1), v = M(c);
+      c === 1 ? (e[s] = 0, r(), n(t), f(t)) : (e[s] = u(
+        i * (1 - v),
+        0,
+        d[s]
+      ), n(t));
+    },
+    { immediate: !1 }
+  );
+  function w(o) {
+    t = o, a = Date.now(), i = e[m[o]], g();
+  }
+  function D() {
+    r();
+  }
+  return { start: w, stop: D, isActive: h };
+};
+export {
+  y as useScrollBack
+};

package/es/src/scroll-view/hooks/use-scroll-smooth.d.ts

@@ -0,0 +1,26 @@
+import { ScrollOffsetType } from '../interface';
+import { Ref } from 'vue';
+type ScrollBackOptions = {
+    scrollOffset: {
+        x: number;
+        y: number;
+    };
+    maxScrollDistance: {
+        x: number;
+        y: number;
+    };
+    timer?: number;
+    onScroll?: (x: boolean, y: boolean) => void;
+    onScrollEnd?: (x: boolean, y: boolean) => void;
+};
+/**
+ * 在特定的时间内滚动到0
+ * @param options
+ * @returns
+ */
+declare const useScrollSmooth: ({ scrollOffset, maxScrollDistance, timer, onScroll, onScrollEnd }: ScrollBackOptions) => {
+    start: (target: Partial<ScrollOffsetType>) => void;
+    stop: () => void;
+    isActive: Readonly< Ref<boolean, boolean>>;
+};
+export { useScrollSmooth };

package/es/src/scroll-view/hooks/use-scroll-smooth.mjs

@@ -0,0 +1,50 @@
+import "../../scroll-bar/index.mjs";
+import { useRafFn as R } from "@vueuse/core";
+import { isDef as f } from "../../utils/index.mjs";
+import { ensureRangeValue as s } from "../../scroll-bar/utils/index.mjs";
+const g = () => {
+}, b = (i) => 1 - Math.pow(1 - i, 3), V = ({
+  scrollOffset: i,
+  maxScrollDistance: r,
+  timer: l = 500,
+  onScroll: u = g,
+  onScrollEnd: T = g
+}) => {
+  let m, e, t, o, n;
+  const { pause: a, resume: w, isActive: p } = R(
+    () => {
+      const v = Date.now() - m, c = s(v / l, 0, 1), y = b(c);
+      c === 1 ? (o && (i.x = t.x), n && (i.y = t.y), a(), u(o, n), T(o, n)) : (o && (t.x > e.x ? i.x = s(
+        e.x + (t.x - e.x) * y,
+        e.x,
+        r.x
+      ) : i.x = s(
+        t.x + (e.x - t.x) * (1 - y),
+        0,
+        e.x
+      )), n && (t.y > e.y ? i.y = s(
+        e.y + (t.y - e.y) * y,
+        e.y,
+        r.y
+      ) : i.y = s(
+        t.y + (e.y - t.y) * (1 - y),
+        0,
+        e.y
+      )), u(o, n));
+    },
+    { immediate: !1 }
+  );
+  function d(x) {
+    p.value && a(), m = Date.now(), e = {
+      x: i.x,
+      y: i.y
+    }, t = x, o = f(x.x), n = f(x.y), w();
+  }
+  function h() {
+    a();
+  }
+  return { start: d, stop: h, isActive: p };
+};
+export {
+  V as useScrollSmooth
+};

package/es/src/scroll-view/index.vue.d.ts

@@ -1,6 +1,9 @@
-import { ScrollViewProps } from './interface';
+import { ScrollOptions, ScrollViewProps } from './interface';
 import { ScrollBarDirection, InternalScrollBarProps } from '../scroll-bar';
-import { CreateComponentPublicInstanceWithMixins, Ref, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, DefineComponent } from 'vue';
+import { CreateComponentPublicInstanceWithMixins, Ref, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, DefineComponent, ComputedRef } from 'vue';
+declare function scroll(x?: number, y?: number): void;
+declare function scrollTo({ smooth, left, top }: ScrollOptions): void;
+declare function scrollIntoView(element: HTMLElement, position?: 'start' | 'center' | 'end'): void;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -89,7 +92,13 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<ScrollViewProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ScrollViewProps> & Readonly<{}>, {
+declare const __VLS_component: DefineComponent<ScrollViewProps, {
+    scrollTop: ComputedRef<number>;
+    scrollLeft: ComputedRef<number>;
+    scroll: typeof scroll;
+    scrollTo: typeof scrollTo;
+    scrollIntoView: typeof scrollIntoView;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ScrollViewProps> & Readonly<{}>, {
     showXBar: boolean;
     showYBar: boolean;
     xBarProps: {

package/es/src/scroll-view/index.vue.mjs

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

package/es/src/scroll-view/interface.d.ts

@@ -1,5 +1,10 @@
 import { InternalScrollBarProps, ScrollBarDirection } from '../scroll-bar';
+import { Ref } from 'vue';
 type BarExtraProps = Omit<InternalScrollBarProps, 'direction' | 'scroll' | 'barLength'>;
+export type ScrollOffsetType = {
+    x: number;
+    y: number;
+};
 export type AutoPlayConfig = {
     /**
      * 自动滚动的方向
@@ -49,4 +54,39 @@ export interface ScrollViewProps {
      */
     onWheel?: (direction: ScrollBarDirection, offset: number) => void;
 }
+export type ScrollOptions = {
+    top?: number;
+    left?: number;
+    smooth?: boolean;
+};
+export type ScrollViewExpose = {
+    /**
+     * 当前滚动距离顶部的位置
+     */
+    scrollTop: Ref<number>;
+    /**
+     * 当前滚动距离左侧的位置
+     */
+    scrollLeft: Ref<number>;
+    /**
+     * 滚动到指定位置
+     * @param x
+     * @param y
+     * @returns
+     */
+    scroll: (x?: number, y?: number) => void;
+    /**
+     * 滚动到指定位置(支持指定平滑滚动)
+     * @param options
+     * @returns
+     */
+    scrollTo: (options: ScrollOptions) => void;
+    /**
+     * 将子元素滚动到可视区域
+     * @param element
+     * @param position
+     * @returns
+     */
+    scrollIntoView: (element: Element, position?: 'start' | 'center' | 'end') => void;
+};
 export {};

package/es/src/scroll-view/utils/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 获取某个元素相对滚动容器可见应该滚动的偏移量（绝对值）
+ * @param container
+ * @param element
+ * @param position
+ * @returns
+ */
+export declare function getElementScrollOffset(container: HTMLElement, element: HTMLElement, position: 'start' | 'center' | 'end'): {
+    x: number;
+    y: number;
+};

package/es/src/scroll-view/utils/index.mjs

@@ -0,0 +1,18 @@
+function i(o, c, t) {
+  const e = o.getBoundingClientRect(), n = c.getBoundingClientRect(), s = t === "x" ? "left" : "top", f = t === "x" ? "right" : "bottom", g = t === "x" ? "width" : "height";
+  return {
+    start: n[s] - e[s],
+    end: n[f] - e[f],
+    center: n[f] - e[f] + (e[g] - n[g]) / 2
+  };
+}
+function r(o, c, t) {
+  const e = i(o, c, "x"), n = i(o, c, "y");
+  return {
+    x: e[t],
+    y: n[t]
+  };
+}
+export {
+  r as getElementScrollOffset
+};

package/lib/src/scroll-view/hooks/use-scroll-back.d.ts

@@ -0,0 +1,26 @@
+import { ScrollBarDirection } from '../../scroll-bar';
+import { Ref } from 'vue';
+type ScrollBackOptions = {
+    scrollOffset: {
+        x: number;
+        y: number;
+    };
+    maxScrollDistance: {
+        x: number;
+        y: number;
+    };
+    timer?: number;
+    onScroll?: (direction: ScrollBarDirection) => void;
+    onScrollEnd?: (direction: ScrollBarDirection) => void;
+};
+/**
+ * 在特定的时间内滚动到0
+ * @param options
+ * @returns
+ */
+declare const useScrollBack: ({ scrollOffset, maxScrollDistance, timer, onScroll, onScrollEnd }: ScrollBackOptions) => {
+    start: (direction: ScrollBarDirection) => void;
+    stop: () => void;
+    isActive: Readonly< Ref<boolean, boolean>>;
+};
+export { useScrollBack };

package/lib/src/scroll-view/hooks/use-scroll-back.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../scroll-bar/index.js");const y=require("@vueuse/core"),u=require("../../scroll-bar/utils/index.js"),l={horizontal:"x",vertical:"y"},d=()=>{},D=e=>1-Math.pow(1-e,3),M=({scrollOffset:e,maxScrollDistance:p,timer:m=500,onScroll:a=d,onScrollEnd:g=d})=>{let o,t,r;const{pause:c,resume:T,isActive:b}=y.useRafFn(()=>{const n=Date.now(),s=l[t],v=n-o,i=u.ensureRangeValue(v/m,0,1),w=D(i);i===1?(e[s]=0,c(),a(t),g(t)):(e[s]=u.ensureRangeValue(r*(1-w),0,p[s]),a(t))},{immediate:!1});function h(n){t=n,o=Date.now(),r=e[l[n]],T()}function q(){c()}return{start:h,stop:q,isActive:b}};exports.useScrollBack=M;

package/lib/src/scroll-view/hooks/use-scroll-smooth.d.ts

@@ -0,0 +1,26 @@
+import { ScrollOffsetType } from '../interface';
+import { Ref } from 'vue';
+type ScrollBackOptions = {
+    scrollOffset: {
+        x: number;
+        y: number;
+    };
+    maxScrollDistance: {
+        x: number;
+        y: number;
+    };
+    timer?: number;
+    onScroll?: (x: boolean, y: boolean) => void;
+    onScrollEnd?: (x: boolean, y: boolean) => void;
+};
+/**
+ * 在特定的时间内滚动到0
+ * @param options
+ * @returns
+ */
+declare const useScrollSmooth: ({ scrollOffset, maxScrollDistance, timer, onScroll, onScrollEnd }: ScrollBackOptions) => {
+    start: (target: Partial<ScrollOffsetType>) => void;
+    stop: () => void;
+    isActive: Readonly< Ref<boolean, boolean>>;
+};
+export { useScrollSmooth };

package/lib/src/scroll-view/hooks/use-scroll-smooth.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../scroll-bar/index.js");const b=require("@vueuse/core"),m=require("../../utils/index.js"),i=require("../../scroll-bar/utils/index.js"),f=()=>{},h=t=>1-Math.pow(1-t,3),v=({scrollOffset:t,maxScrollDistance:y,timer:p=500,onScroll:x=f,onScrollEnd:d=f})=>{let c,e,n,u,s;const{pause:r,resume:R,isActive:l}=b.useRafFn(()=>{const q=Date.now()-c,g=i.ensureRangeValue(q/p,0,1),o=h(g);g===1?(u&&(t.x=n.x),s&&(t.y=n.y),r(),x(u,s),d(u,s)):(u&&(n.x>e.x?t.x=i.ensureRangeValue(e.x+(n.x-e.x)*o,e.x,y.x):t.x=i.ensureRangeValue(n.x+(e.x-n.x)*(1-o),0,e.x)),s&&(n.y>e.y?t.y=i.ensureRangeValue(e.y+(n.y-e.y)*o,e.y,y.y):t.y=i.ensureRangeValue(n.y+(e.y-n.y)*(1-o),0,e.y)),x(u,s))},{immediate:!1});function T(a){l.value&&r(),c=Date.now(),e={x:t.x,y:t.y},n=a,u=m.isDef(a.x),s=m.isDef(a.y),R()}function V(){r()}return{start:T,stop:V,isActive:l}};exports.useScrollSmooth=v;

package/lib/src/scroll-view/index.vue.d.ts

@@ -1,6 +1,9 @@
-import { ScrollViewProps } from './interface';
+import { ScrollOptions, ScrollViewProps } from './interface';
 import { ScrollBarDirection, InternalScrollBarProps } from '../scroll-bar';
-import { CreateComponentPublicInstanceWithMixins, Ref, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, DefineComponent } from 'vue';
+import { CreateComponentPublicInstanceWithMixins, Ref, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, DefineComponent, ComputedRef } from 'vue';
+declare function scroll(x?: number, y?: number): void;
+declare function scrollTo({ smooth, left, top }: ScrollOptions): void;
+declare function scrollIntoView(element: HTMLElement, position?: 'start' | 'center' | 'end'): void;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -89,7 +92,13 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<ScrollViewProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ScrollViewProps> & Readonly<{}>, {
+declare const __VLS_component: DefineComponent<ScrollViewProps, {
+    scrollTop: ComputedRef<number>;
+    scrollLeft: ComputedRef<number>;
+    scroll: typeof scroll;
+    scrollTo: typeof scrollTo;
+    scrollIntoView: typeof scrollIntoView;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ScrollViewProps> & Readonly<{}>, {
     showXBar: boolean;
     showYBar: boolean;
     xBarProps: {

package/lib/src/scroll-view/index.vue.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../config-provider/index.js");require("../scroll-bar/index.js");const z=require("../utils/index.js"),l=require("../scroll-bar/utils/index.js"),H=require("./hooks/use-scroll-wrapper.js"),R=require("lodash-unified"),y=require("@vueuse/core"),T=require("@aplus-frontend/utils"),U=require("../config-provider/hooks/use-namespace.js"),k=require("../scroll-bar/internal.vue.js"),G=e.defineComponent({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(V){const t=V,N={direction:"vertical",rate:1,repeat:!0},{b:_,e:h,em:v}=U.useNamespace("scroll-view"),c=e.ref(),o=e.reactive({x:30,y:30}),{scrollOffset:n,maxScrollDistance:i,xBarRef:q,yBarRef:W,containerRef:s,scrollYBar:g,scrollXBar:m,updateMaxScrollDistance:C}=H.default(),{width:$,height:E}=y.useElementSize(c),{width:M,height:D}=y.useElementSize(s),{resume:X,pause:f,isActive:Y}=y.useRafFn(()=>{if(!t.autoPlay){f();return}const a=t.autoPlay===!0?{}:t.autoPlay,r={...N,...a};if(r.direction==="horizontal"){if(n.x===i.x){r.repeat?n.x=0:f();return}n.x=l.ensureRangeValue(n.x+r.rate,0,i.x),m()}else{if(n.y===i.y){r.repeat?n.y=0:f();return}n.y=l.ensureRangeValue(n.y+r.rate,0,i.y),g()}},{immediate:!0}),d=e.computed(()=>t.showXBar&&o.x!==100),x=e.computed(()=>t.showYBar&&o.y!==100),A=e.computed(()=>({width:z.isDef(t.width)?R.isString(t.width)?t.width:Number.isNaN(t.width)?void 0:`${t.width}px`:void 0,height:z.isDef(t.heigth)?R.isString(t.heigth)?t.heigth:Number.isNaN(t.heigth)?void 0:`${t.heigth}px`:void 0,padding:`${t.xBarProps.trackWidth||10}px ${t.yBarProps.trackWidth||10}px`}));async function p(){Y.value&&(f(),await T.wait(500),X())}async function O(a){var r;if(e.unref(x))a.preventDefault(),a.stopPropagation();else return;n.y=l.ensureRangeValue(n.y+a.deltaY,0,i.y),g(),(r=t.onWheel)==null||r.call(t,"vertical",n.y),p()}function j(a){var r;if(e.unref(d))a.preventDefault(),a.stopPropagation();else return;n.x=l.ensureRangeValue(n.x+a.deltaX,0,i.x),m(),(r=t.onWheel)==null||r.call(t,"horizontal",n.x),p()}function B(){if(t.showYBar){const{visibleSize:a,totalSize:r}=l.getScrollable(s.value,"vertical");o.y=l.ensureRangeValue(Math.min(a/(r||1)*100))}if(t.showXBar){const{visibleSize:a,totalSize:r}=l.getScrollable(s.value,"horizontal");o.x=l.ensureRangeValue(Math.min(a/(r||1)*100))}}function w(a,r){const u=e.unref(s),L=e.unref(c);if(!u||!L)return;const{visibleSize:S,totalSize:b}=l.getScrollable(u,r);if(b<=S)return;const P=(b-S)*a/100,F=r==="vertical";if(p(),F){n.y=P;return}n.x=P}return e.watchEffect(()=>{e.unref(s.value)&&B()},{flush:"post"}),e.watch(()=>[$.value,E.value,M.value,D.value],()=>{B(),C()}),e.watchEffect(()=>{c.value&&(c.value.style.transform=`translate3d(-${n.x}px, -${n.y}px, 0px)`)}),(a,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:s,class:e.normalizeClass(e.unref(_)()),style:e.normalizeStyle(A.value),onWheel:[e.withModifiers(O,["exact"]),e.withModifiers(j,["shift"])]},[e.createElementVNode("div",{ref_key:"contentRef",ref:c,class:e.normalizeClass(e.unref(h)("content"))},[e.renderSlot(a.$slots,"default")],2),e.createElementVNode("div",{class:e.normalizeClass([e.unref(h)("bar-wrapper"),e.unref(v)("bar-wrapper","vertical")]),style:e.normalizeStyle(`height: calc(100% - ${d.value?a.xBarProps.trackWidth||10:0}px)`)},[x.value?(e.openBlock(),e.createBlock(e.unref(k.default),e.mergeProps({key:0,ref_key:"yBarRef",ref:W},a.yBarProps,{"bar-length":o.y,onScroll:r[0]||(r[0]=u=>w(u,"vertical"))}),null,16,["bar-length"])):e.createCommentVNode("",!0)],6),e.createElementVNode("div",{class:e.normalizeClass([e.unref(h)("bar-wrapper"),e.unref(v)("bar-wrapper","horizontal")])},[d.value?(e.openBlock(),e.createBlock(e.unref(k.default),e.mergeProps({key:0,ref_key:"xBarRef",ref:q},a.xBarProps,{direction:"horizontal","bar-length":o.x,onScroll:r[1]||(r[1]=u=>w(u,"horizontal"))}),null,16,["bar-length"])):e.createCommentVNode("",!0)],2)],38))}});exports.default=G;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../config-provider/index.js");require("../scroll-bar/index.js");const c=require("../utils/index.js"),o=require("../scroll-bar/utils/index.js"),Z=require("./hooks/use-scroll-wrapper.js"),W=require("lodash-unified"),w=require("@vueuse/core"),b=require("@aplus-frontend/utils"),ee=require("./hooks/use-scroll-back.js"),te=require("./hooks/use-scroll-smooth.js"),re=require("./utils/index.js"),ae=require("../config-provider/hooks/use-namespace.js"),D=require("../scroll-bar/internal.vue.js"),ne=e.defineComponent({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($,{expose:C}){const n=$,M={direction:"vertical",rate:1,repeat:!0},{b:X,e:g,em:z}=ae.useNamespace("scroll-view"),f=e.ref(),u=e.reactive({x:30,y:30});let m=!1;const{scrollOffset:a,maxScrollDistance:i,xBarRef:Y,yBarRef:O,containerRef:s,scrollYBar:h,scrollXBar:d,updateMaxScrollDistance:A}=Z.default(),{width:L,height:T}=w.useElementSize(f),{width:j,height:F}=w.useElementSize(s),{start:P}=ee.useScrollBack({scrollOffset:a,maxScrollDistance:i,onScroll:r=>{r==="horizontal"?d():h()},async onScrollEnd(){await b.wait(200),S()}}),{start:R}=te.useScrollSmooth({scrollOffset:a,maxScrollDistance:i,onScroll(r,t){V.value&&(y(),m=!0),r&&d(),t&&h()},async onScrollEnd(){m&&(await b.wait(200),S(),m=!1)}}),{resume:S,pause:y,isActive:V}=w.useRafFn(()=>{if(!n.autoPlay){y();return}const r=n.autoPlay===!0?{}:n.autoPlay,t={...M,...r};if(t.direction==="horizontal"){if(a.x===i.x){y(),t.repeat&&P("horizontal");return}a.x=o.ensureRangeValue(a.x+t.rate,0,i.x),d()}else{if(a.y===i.y){y(),t.repeat&&P("vertical");return}a.y=o.ensureRangeValue(a.y+t.rate,0,i.y),h()}},{immediate:!0}),p=e.computed(()=>n.showXBar&&u.x!==100),x=e.computed(()=>n.showYBar&&u.y!==100),H=e.computed(()=>({width:c.isDef(n.width)?W.isString(n.width)?n.width:Number.isNaN(n.width)?void 0:`${n.width}px`:void 0,height:c.isDef(n.heigth)?W.isString(n.heigth)?n.heigth:Number.isNaN(n.heigth)?void 0:`${n.heigth}px`:void 0,padding:`${n.xBarProps.trackWidth||10}px ${n.yBarProps.trackWidth||10}px`}));async function B(){V.value&&(y(),await b.wait(500),S())}async function I(r){var t;if(e.unref(x))r.preventDefault(),r.stopPropagation();else return;a.y=o.ensureRangeValue(a.y+r.deltaY,0,i.y),h(),(t=n.onWheel)==null||t.call(n,"vertical",a.y),B()}function U(r){var t;if(e.unref(p))r.preventDefault(),r.stopPropagation();else return;a.x=o.ensureRangeValue(a.x+r.deltaX,0,i.x),d(),(t=n.onWheel)==null||t.call(n,"horizontal",a.x),B()}function k(){if(n.showYBar){const{visibleSize:r,totalSize:t}=o.getScrollable(s.value,"vertical");u.y=o.ensureRangeValue(Math.min(r/(t||1)*100))}if(n.showXBar){const{visibleSize:r,totalSize:t}=o.getScrollable(s.value,"horizontal");u.x=o.ensureRangeValue(Math.min(r/(t||1)*100))}}function q(r,t){const l=e.unref(s),v=e.unref(f);if(!l||!v)return;const{visibleSize:N,totalSize:_}=o.getScrollable(l,t);if(_<=N)return;const E=(_-N)*r/100,Q=t==="vertical";if(B(),Q){a.y=E;return}a.x=E}e.watchEffect(()=>{e.unref(s.value)&&k()},{flush:"post"}),e.watch(()=>[L.value,T.value,j.value,F.value],()=>{k(),A()}),e.watchEffect(()=>{f.value&&(f.value.style.transform=`translate3d(-${a.x}px, -${a.y}px, 0px)`)});function G(r,t){c.isDef(r)&&p.value&&(a.x=o.ensureRangeValue(r,0,i.x),d()),c.isDef(t)&&x.value&&(a.y=o.ensureRangeValue(t,0,i.y),h())}function J({smooth:r,left:t,top:l}){r?R({x:t,y:l}):(c.isDef(t)&&(a.x=t),c.isDef(l)&&(a.y=l))}function K(r,t="start"){const l=re.getElementScrollOffset(s.value,r,t),v={};p.value&&(v.x=o.ensureRangeValue(a.x+l.x,0,i.x)),x.value&&(v.y=o.ensureRangeValue(a.y+l.y,0,i.y)),R(v)}return C({scrollTop:e.computed(()=>a.y),scrollLeft:e.computed(()=>a.x),scroll:G,scrollTo:J,scrollIntoView:K}),(r,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:s,class:e.normalizeClass(e.unref(X)()),style:e.normalizeStyle(H.value),onWheel:[e.withModifiers(I,["exact"]),e.withModifiers(U,["shift"])]},[e.createElementVNode("div",{ref_key:"contentRef",ref:f,class:e.normalizeClass(e.unref(g)("content"))},[e.renderSlot(r.$slots,"default")],2),e.createElementVNode("div",{class:e.normalizeClass([e.unref(g)("bar-wrapper"),e.unref(z)("bar-wrapper","vertical")]),style:e.normalizeStyle(`height: calc(100% - ${p.value?r.xBarProps.trackWidth||10:0}px)`)},[x.value?(e.openBlock(),e.createBlock(e.unref(D.default),e.mergeProps({key:0,ref_key:"yBarRef",ref:O},r.yBarProps,{"bar-length":u.y,onScroll:t[0]||(t[0]=l=>q(l,"vertical"))}),null,16,["bar-length"])):e.createCommentVNode("",!0)],6),e.createElementVNode("div",{class:e.normalizeClass([e.unref(g)("bar-wrapper"),e.unref(z)("bar-wrapper","horizontal")])},[p.value?(e.openBlock(),e.createBlock(e.unref(D.default),e.mergeProps({key:0,ref_key:"xBarRef",ref:Y},r.xBarProps,{direction:"horizontal","bar-length":u.x,onScroll:t[1]||(t[1]=l=>q(l,"horizontal"))}),null,16,["bar-length"])):e.createCommentVNode("",!0)],2)],38))}});exports.default=ne;

package/lib/src/scroll-view/interface.d.ts

@@ -1,5 +1,10 @@
 import { InternalScrollBarProps, ScrollBarDirection } from '../scroll-bar';
+import { Ref } from 'vue';
 type BarExtraProps = Omit<InternalScrollBarProps, 'direction' | 'scroll' | 'barLength'>;
+export type ScrollOffsetType = {
+    x: number;
+    y: number;
+};
 export type AutoPlayConfig = {
     /**
      * 自动滚动的方向
@@ -49,4 +54,39 @@ export interface ScrollViewProps {
      */
     onWheel?: (direction: ScrollBarDirection, offset: number) => void;
 }
+export type ScrollOptions = {
+    top?: number;
+    left?: number;
+    smooth?: boolean;
+};
+export type ScrollViewExpose = {
+    /**
+     * 当前滚动距离顶部的位置
+     */
+    scrollTop: Ref<number>;
+    /**
+     * 当前滚动距离左侧的位置
+     */
+    scrollLeft: Ref<number>;
+    /**
+     * 滚动到指定位置
+     * @param x
+     * @param y
+     * @returns
+     */
+    scroll: (x?: number, y?: number) => void;
+    /**
+     * 滚动到指定位置(支持指定平滑滚动)
+     * @param options
+     * @returns
+     */
+    scrollTo: (options: ScrollOptions) => void;
+    /**
+     * 将子元素滚动到可视区域
+     * @param element
+     * @param position
+     * @returns
+     */
+    scrollIntoView: (element: Element, position?: 'start' | 'center' | 'end') => void;
+};
 export {};

package/lib/src/scroll-view/utils/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 获取某个元素相对滚动容器可见应该滚动的偏移量（绝对值）
+ * @param container
+ * @param element
+ * @param position
+ * @returns
+ */
+export declare function getElementScrollOffset(container: HTMLElement, element: HTMLElement, position: 'start' | 'center' | 'end'): {
+    x: number;
+    y: number;
+};

package/lib/src/scroll-view/utils/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function g(o,c,t){const e=o.getBoundingClientRect(),n=c.getBoundingClientRect(),s=t==="x"?"left":"top",f=t==="x"?"right":"bottom",l=t==="x"?"width":"height";return{start:n[s]-e[s],end:n[f]-e[f],center:n[f]-e[f]+(e[l]-n[l])/2}}function r(o,c,t){const e=g(o,c,"x"),n=g(o,c,"y");return{x:e[t],y:n[t]}}exports.getElementScrollOffset=r;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aplus-frontend/ui",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "main": "./lib/index.js",
   "type": "module",
   "files": [