@indielayer/ui/lib/composables/useVirtualList.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { computed as h, unref as C, ref as v, shallowRef as P, watch as O } from "vue";
import { useElementSize as x } from "../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
function Y(t, e) {
  if (e.disabled)
    return {
      list: h(() => C(t).map((a, u) => ({ data: a, index: u }))),
      scrollTo: () => {
      },
      reset: () => {
      },
      containerProps: {
        ref: v(null),
        style: {},
        onScroll: () => {
        }
      },
      wrapperProps: {}
    };
  const { containerStyle: r, wrapperProps: o, scrollTo: n, calculateRange: l, currentList: s, containerRef: c } = _(e, t);
  return {
    list: s,
    scrollTo: n,
    reset: l,
    containerProps: {
      ref: c,
      onScroll: () => {
        l();
      },
      style: r
    },
    wrapperProps: o
  };
}
function G(t) {
  const e = v(null), r = x(e), o = v([]), n = P(t);
  return { state: v({ start: 0, end: 10 }), source: n, currentList: o, size: r, containerRef: e };
}
function H(t, e, r) {
  return (o) => {
    if (typeof r == "number")
      return Math.ceil(o / r);
    const { start: n = 0 } = t.value;
    let l = 0, s = 0;
    for (let c = n; c < e.value.length; c++) {
      const a = r(c);
      if (l += a, s = c, l > o)
        break;
    }
    return s - n;
  };
}
function k(t, e) {
  return (r) => {
    if (typeof e == "number")
      return Math.floor(r / e) + 1;
    let o = 0, n = 0;
    for (let l = 0; l < t.value.length; l++) {
      const s = e(l);
      if (o += s, o >= r) {
        n = l;
        break;
      }
    }
    return n + 1;
  };
}
function z(t, e, r, o, { containerRef: n, state: l, currentList: s, source: c }) {
  return () => {
    const a = n.value;
    if (a) {
      const u = r(t === "vertical" ? a.scrollTop : a.scrollLeft), f = o(t === "vertical" ? a.clientHeight : a.clientWidth), i = u - e, p = u + f + e;
      l.value = {
        start: i < 0 ? 0 : i,
        end: p > c.value.length ? c.value.length : p
      }, s.value = c.value.slice(l.value.start, l.value.end).map((g, y) => ({
        data: g,
        index: y + l.value.start
      }));
    }
  };
}
function D(t, e) {
  return (r) => typeof t == "number" ? r * t : e.value.slice(0, r).reduce((n, l, s) => n + t(s), 0);
}
function E(t, e, r, o) {
  O([t.width, t.height, e, r], () => {
    o();
  });
}
function F(t, e) {
  return h(() => typeof t == "number" ? e.value.length * t : e.value.reduce((r, o, n) => r + t(n), 0));
}
const M = {
  horizontal: "scrollLeft",
  vertical: "scrollTop"
};
function W(t, e, r, o) {
  return (n) => {
    o.value && (o.value[M[t]] = r(n), e());
  };
}
function _(t, e) {
  const r = G(e), { state: o, source: n, currentList: l, size: s, containerRef: c } = r, a = { overflowY: "auto" }, { itemHeight: u, topOffset: f = 0, bottomOffset: i = 0, overscan: p = 5 } = t, g = H(o, n, u), y = k(n, u), d = z("vertical", p, y, g, r), m = D(u, n), T = h(() => m(o.value.start)), w = F(u, n), R = W("vertical", d, m, c);
  E(s, n, c, d);
  const V = h(() => {
    const b = w.value + f + i, L = T.value > b ? b : T.value;
    return {
      style: {
        width: "100%",
        height: `${w.value - L + f + i}px`,
        marginTop: `${L}px`
      }
    };
  });
  return {
    calculateRange: d,
    scrollTo: R,
    containerStyle: a,
    wrapperProps: V,
    currentList: l,
    containerRef: c
  };
}
export {
  Y as useVirtualList
};