@extclp/vexip-ui/es/components/virtual-list/virtual-list.mjs

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

import { defineComponent as re, toRefs as le, ref as b, computed as T, watch as ne, nextTick as ae, createVNode as l, mergeProps as S, renderSlot as u } from "vue";
import "../native-scroll/index.mjs";
import "../resize-observer/index.mjs";
import { useProps as oe, useNameHelper as ue, emitEvent as I } from "@vexip-ui/config";
import { useVirtual as fe, createSlotRender as k } from "@vexip-ui/hooks";
import { virtualListProps as me } from "./props.mjs";
import p from "../resize-observer/resize-observer.mjs";
import K from "../native-scroll/native-scroll.mjs";
const xe = /* @__PURE__ */ re({
  name: "VirtualList",
  components: {
    NativeScroll: K,
    ResizeObserver: p
  },
  inheritAttrs: !1,
  props: me,
  emits: [],
  setup(A, {
    slots: i,
    attrs: y,
    expose: L
  }) {
    const e = oe("virtualList", A, {
      items: {
        default: () => [],
        static: !0
      },
      itemSize: 36,
      itemFixed: !1,
      idKey: "id",
      defaultKeyAt: null,
      bufferSize: 5,
      listTag: "div",
      itemsTag: "ul",
      itemsAttrs: null,
      hideBar: !1,
      lockItems: !1,
      autoplay: !1,
      ignoreResize: !1,
      disabled: !1
    }), r = ue("virtual-list"), {
      items: V,
      itemSize: w,
      itemFixed: F,
      idKey: N,
      bufferSize: B
    } = le(e), n = b(), h = b(), v = T(() => {
      var t;
      return (t = n.value) == null ? void 0 : t.content;
    }), {
      indexMap: z,
      heightTree: O,
      scrollOffset: g,
      visibleItems: P,
      listStyle: C,
      itemsStyle: M,
      handleScroll: x,
      handleResize: E,
      handleItemResize: H,
      scrollTo: j,
      scrollBy: q,
      scrollToKey: D,
      scrollToIndex: G,
      ensureIndexInView: J,
      ensureKeyInView: Q
    } = fe({
      items: V,
      itemSize: w,
      itemFixed: F,
      idKey: N,
      bufferSize: B,
      wrapper: v,
      defaultKeyAt: e.defaultKeyAt,
      autoResize: !1
    });
    L({
      scroll: n,
      wrapper: v,
      list: h,
      indexMap: z,
      heightTree: O,
      scrollOffset: g,
      scrollTo: j,
      scrollBy: q,
      scrollToKey: D,
      scrollToIndex: G,
      ensureIndexInView: J,
      ensureKeyInView: Q,
      refresh: f
    }), ne(() => e.items.length, () => {
      ae(f);
    });
    const U = T(() => [r.b(), e.inherit && r.bm("inherit"), e.disabled && r.bm("disabled"), y.class]);
    function W(t) {
      x(), I(e.onScroll, t);
    }
    function X(t) {
      e.ignoreResize || (E(t), I(e.onResize, t));
    }
    function Y(t, s) {
      !e.lockItems && !e.ignoreResize && H(t, s);
    }
    async function f() {
      var t;
      await ((t = n.value) == null ? void 0 : t.refresh()), x();
    }
    function Z(t) {
      const s = e.idKey, m = e.itemFixed, c = z.value, {
        class: a,
        style: _,
        ...$
      } = e.itemsAttrs || {}, ee = e.listTag || "div", te = e.itemsTag || "ul";
      return l(p, {
        onResize: f
      }, {
        default: () => [l(ee, {
          ref: h,
          class: r.be("list"),
          style: C.value
        }, {
          default: () => [l(te, S($, {
            class: [r.be("items"), a],
            style: [M.value, _]
          }), {
            default: () => [i.default && e.items.length ? t.map((R) => {
              const o = R[s], ie = c.get(o), d = u(i, "default", {
                item: R,
                index: ie
              });
              if (m)
                return d.key = o, d;
              const se = Y.bind(null, o);
              return l(p, {
                key: o,
                onResize: se
              }, {
                default: () => d
              });
            }) : u(i, "empty")]
          })]
        })]
      });
    }
    return () => {
      let t = P.value;
      return l(K, S(y, {
        ref: n,
        class: U.value,
        inherit: e.inherit,
        "use-y-bar": !e.hideBar,
        "scroll-y": g.value,
        autoplay: e.autoplay,
        onScroll: W,
        onResize: X
      }), {
        default: () => e.disabled ? i.default && e.items.length ? e.items.map((s, m) => {
          const c = s[e.idKey], a = u(i, "default", {
            item: s,
            index: m
          });
          return a.key = c, a;
        }) : u(i, "empty") : Z(t),
        prefixTrap: k(i, ["prefix-trap", "prefixTrap"]),
        suffixTrap: k(i, ["suffix-trap", "suffixTrap"])
      });
    };
  }
});
export {
  xe as default
};
//# sourceMappingURL=virtual-list.mjs.map