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