adverich-kun-ui/dist/components/KunInfiniteScroll/src/composables/useKunInfiniteScroll.js

Una librería de componentes Vue.js con Tailwind CSS

import { ref as I, computed as t, watch as b, nextTick as k } from "vue";
function q({
  items: g,
  search: i,
  searchableKeys: v = [],
  itemsPerIntersection: r = 20
}) {
  const l = I(1), f = I(null), n = t(
    () => Array.isArray(v) ? v : []
  ), w = t(
    () => typeof r == "number" && r > 0 ? r : 20
  ), u = t(() => {
    var d;
    const e = g.value || [], a = (d = i.value) == null ? void 0 : d.trim().toLowerCase();
    if (!a || !n.value) return e;
    const o = Array.isArray(n.value) ? n.value : [n.value];
    return e.filter((A) => o.some((C) => {
      const p = C.split(".").reduce((y, T) => y != null ? y[T] : void 0, A);
      return p == null ? !1 : String(p).toLowerCase().includes(a);
    }));
  }), x = t(() => u.value.length), s = t(
    () => u.value.slice(
      0,
      l.value * w.value
    )
  ), c = t(
    () => s.value.length >= u.value.length
  ), B = t(() => l.value === 1);
  function h() {
    c.value || l.value++;
  }
  function m() {
    l.value = 1;
  }
  b(
    () => i.value,
    () => {
      m();
    },
    { flush: "pre" }
  );
  async function S(e) {
    if (typeof e != "number" || e < 0) return;
    f.value = e;
    const a = u.value.length - 1, o = Math.min(e, a);
    for (; o >= s.value.length && !c.value; )
      h(), await k();
  }
  return {
    visibleItems: s,
    loadNextBatch: h,
    resetCurrentBatchStep: m,
    lastBatchReached: c,
    isFirstBatch: B,
    totalItems: x,
    setScrollToIndex: S,
    scrollToIndex: f
    // opcional, si lo necesitás desde el componente padre
  };
}
export {
  q as useKunInfiniteScroll
};