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

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

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