vexip-ui/es/components/native-scroll/hooks.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { ref as O, reactive as Q, computed as i, watch as b, onMounted as V } from "vue";
import { useManualRef as X, useRtl as Y, useMounted as Z, isHiddenElement as _ } from "@vexip-ui/hooks";
import { boundRange as a, multipleFixed as x, debounceMinor as $, isElement as A, debounce as ee } from "@vexip-ui/utils";
import { animateScrollTo as te } from "./helper.mjs";
function re({
  mode: u,
  disabled: M,
  appear: g,
  scrollX: m,
  scrollY: d,
  onResize: p,
  onBeforeRefresh: T,
  onAfterRefresh: P
}) {
  const { manualRef: f, triggerUpdate: R } = X(), { isRtl: w } = Y(), H = O(), e = Q({
    el: H,
    scrollWidth: 0,
    offsetWidth: 0,
    scrollHeight: 0,
    offsetHeight: 0
  }), l = f(0), o = f(0), B = f(0), E = f(0), c = i(() => e.el ? e.scrollWidth - e.offsetWidth : 0), s = i(() => e.el ? e.scrollHeight - e.offsetHeight : 0), L = i(() => !M.value && u.value !== "vertical" && !!e.el && e.scrollWidth > e.offsetWidth), C = i(() => !M.value && u.value !== "horizontal" && !!e.el && e.scrollHeight > e.offsetHeight), G = i(() => e.el ? a(e.offsetWidth / (e.scrollWidth || 1) * 100, 5, 99) : 35), I = i(() => e.el ? a(e.offsetHeight / (e.scrollHeight || 1) * 100, 5, 99) : 35);
  b(H, () => {
    k();
  }), b(m, (t) => {
    W(t);
  }), b(d, (t) => {
    y(t);
  });
  function W(t) {
    l.value = a(t, 0, c.value), F();
  }
  function y(t) {
    o.value = a(t, 0, s.value), F();
  }
  function F() {
    e.el && e.el.scrollTo({
      top: o.value,
      left: w.value ? -l.value : l.value,
      behavior: "instant"
    });
  }
  const { isMounted: z } = Z();
  function k() {
    !e.el || _(e.el) || (e.scrollWidth = e.el.scrollWidth, e.offsetWidth = e.el.offsetWidth, e.scrollHeight = e.el.scrollHeight, e.offsetHeight = e.el.offsetHeight, u.value !== "vertical" && W(!z.value && g.value ? m.value : l.value || 0), u.value !== "horizontal" && y(!z.value && g.value ? d.value : o.value || 0), q(), R());
  }
  function q() {
    e.el && (B.value = w.value ? -x(l.value / (c.value || 1), 100, 2) : x(l.value / (c.value || 1), 100, 2), E.value = x(o.value / (s.value || 1), 100, 2));
  }
  function J(t) {
    S(), p == null || p(t);
  }
  V(() => {
    S(), g.value && v(m.value, d.value);
  });
  const S = $(() => new Promise((t) => {
    typeof T == "function" && T(), k(), setTimeout(() => {
      typeof P == "function" && P(), t();
    }, 0);
  }));
  function v(t, n, r = 500) {
    return new Promise((h) => {
      e.el && ((!L.value || Math.abs(l.value - t) < 0.01) && (t = l.value), (!C.value || Math.abs(o.value - n) < 0.01) && (n = o.value), te({
        duration: r,
        el: e.el,
        xFrom: l.value,
        xTo: a(t, 0, c.value),
        yFrom: o.value,
        yTo: a(n, 0, s.value),
        callback: h
      }));
    });
  }
  function K(t, n, r = 500) {
    return v(l.value + t, o.value + n, r);
  }
  function N(t, n, r = 0) {
    if (!e.el || (typeof t == "string" && (t = e.el.querySelector(t)), !A(t))) return Promise.resolve();
    const h = e.el.getBoundingClientRect(), U = t.getBoundingClientRect();
    let j = 0, D = 0;
    return u.value !== "vertical" && (j = U.left - h.left + r), u.value !== "horizontal" && (D = U.top - h.top + r), v(j, D, n);
  }
  return {
    contentEl: H,
    content: e,
    x: l,
    y: o,
    percentX: B,
    percentY: E,
    xScrollLimit: c,
    yScrollLimit: s,
    enableXScroll: L,
    enableYScroll: C,
    xBarLength: G,
    yBarLength: I,
    handleResize: ee(J),
    setScrollX: W,
    setScrollY: y,
    computePercent: q,
    refresh: S,
    scrollTo: v,
    scrollBy: K,
    scrollToElement: N,
    triggerUpdate: R
  };
}
export {
  re as useScrollWrapper
};
//# sourceMappingURL=hooks.mjs.map