@indielayer/ui/lib/virtual/components/virtualList/VirtualList.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as k, ref as E, computed as i, watch as h, openBlock as w, createBlock as B, resolveDynamicComponent as D, normalizeClass as V, normalizeStyle as f, withCtx as P, createElementBlock as L, Fragment as N, renderList as O, renderSlot as g, createElementVNode as X, unref as Y } from "vue";
import { useVirtualizer as F } from "../../core/useVirtualizer.js";
import { isDynamicRowHeight as G } from "./isDynamicRowHeight.js";
import { DATA_ATTRIBUTE_LIST_INDEX as U } from "./useDynamicRowHeight.js";
const j = {
  name: "XVirtualList"
}, Q = /* @__PURE__ */ k({
  ...j,
  props: {
    class: {},
    defaultHeight: { default: 0 },
    onResize: {},
    onRowsRendered: {},
    overscanCount: { default: 3 },
    rowCount: {},
    rowHeight: {},
    rowProps: {},
    style: {},
    tag: { default: "div" }
  },
  setup(v, { expose: y }) {
    const t = v, n = E(null), p = i(() => t.rowProps || {}), x = i(() => t.rowCount), a = i(() => G(t.rowHeight)), H = i(() => {
      if (a.value) {
        const e = t.rowHeight, o = e.getAverageRowHeight();
        return (r) => e.getRowHeight(r) ?? o;
      }
      return t.rowHeight;
    }), {
      getCellBounds: R,
      getEstimatedSize: C,
      scrollToIndex: I,
      startIndexOverscan: u,
      startIndexVisible: z,
      stopIndexOverscan: c,
      stopIndexVisible: b
    } = F({
      containerElement: n,
      containerStyle: t.style,
      defaultContainerSize: t.defaultHeight,
      direction: "vertical",
      itemCount: x,
      itemProps: p,
      itemSize: H,
      onResize: t.onResize,
      overscanCount: t.overscanCount
    });
    y({
      get element() {
        return n.value;
      },
      scrollToRow({
        align: e = "auto",
        behavior: o = "auto",
        index: r
      }) {
        var d, l;
        const s = I({
          align: e,
          containerScrollOffset: ((d = n.value) == null ? void 0 : d.scrollTop) ?? 0,
          index: r
        });
        typeof ((l = n.value) == null ? void 0 : l.scrollTo) == "function" && s !== void 0 && n.value.scrollTo({
          behavior: o,
          top: s
        });
      }
    }), h(
      [n, u, c, a, () => t.rowHeight],
      ([e, o, r, s], d, l) => {
        if (!e || !s)
          return;
        const T = Array.from(e.children).filter((m, _) => {
          if (m.hasAttribute("aria-hidden"))
            return !1;
          const $ = `${o + _}`;
          return m.setAttribute(U, $), !0;
        }), S = t.rowHeight;
        l(S.observeRowElements(T));
      },
      { flush: "post" }
      // Run after DOM updates
    ), h(
      [u, z, c, b],
      ([e, o, r, s]) => {
        e >= 0 && r >= 0 && t.onRowsRendered && t.onRowsRendered(
          {
            startIndex: o,
            stopIndex: s
          },
          {
            startIndex: e,
            stopIndex: r
          }
        );
      }
    );
    const A = i(() => {
      const e = [];
      if (t.rowCount > 0)
        for (let o = u.value; o <= c.value; o++) {
          const r = R(o), s = {
            position: "absolute",
            left: 0,
            transform: `translateY(${r.scrollOffset}px)`,
            // In case of dynamic row heights, don't specify a height style
            height: a.value ? void 0 : `${r.size}px`,
            width: "100%"
          };
          e.push({
            key: o,
            index: o,
            style: s,
            ariaAttributes: {
              "aria-posinset": o + 1,
              "aria-setsize": t.rowCount,
              role: "listitem"
            }
          });
        }
      return e;
    });
    return (e, o) => (w(), B(D(e.tag), {
      ref_key: "element",
      ref: n,
      class: V(e.$props.class),
      style: f({
        position: "relative",
        maxHeight: "100%",
        flexGrow: 1,
        overflowY: "auto",
        ...e.style
      }),
      role: "list"
    }, {
      default: P(() => [
        (w(!0), L(N, null, O(A.value, (r) => g(e.$slots, "row", {
          key: r.key,
          index: r.index,
          style: f(r.style),
          ariaAttributes: r.ariaAttributes,
          props: p.value
        })), 128)),
        g(e.$slots, "default"),
        X("div", {
          "aria-hidden": "",
          style: f({
            height: `${Y(C)}px`,
            width: "100%",
            zIndex: -1
          })
        }, null, 4)
      ]),
      _: 3
    }, 8, ["class", "style"]));
  }
});
export {
  Q as default
};