@vrx-arco/pro-components/dist/ProList/index.js

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

"use strict";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const webVue = require("@arco-design/web-vue");
const core = require("@vueuse/core");
const pathProp = require("@vill-v/path-prop");
const _var = require("../style/var.js");
const index = require("../ProPagination/index.js");
const props = require("../ProPagination/props.js");
const ProList = /* @__PURE__ */ vue.defineComponent({
  name: "vrx-arco-pro-list",
  props: __spreadProps(__spreadValues({}, props.proPaginationProps()), {
    size: {
      type: String,
      default: "medium"
    },
    /**
     * 是否显示边框
     */
    bordered: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示分割线
     */
    split: {
      type: Boolean,
      default: true
    },
    /**
     * 加载状态
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 列表项是否有反馈
     */
    hoverable: {
      type: Boolean,
      default: false
    },
    /**
     * 距离底部多少时触发触底事件
     */
    bottomOffset: {
      type: Number,
      default: 0
    },
    /**
     * 是否开启虚拟列表，需保证gridProps选项未使用
     */
    virtualList: {
      type: Boolean,
      default: false
    },
    /**
     * 栅格布局配置
     */
    gridProps: Object,
    /**
     * 等同于 v-for的 key，用于性能优化
     */
    rowKey: String,
    /**
     * 根据数据key值筛选每个卡片获取的数据，可传递类似 "res.data.data" 的路径字符串
     */
    dataKey: String,
    /**
     * 列表的最大高度受控
     */
    maxHeight: [Number, String]
  }),
  emits: {
    /**
     * @zh 列表滚动时触发
     * @en Triggered when the list scrolls
     */
    scroll: () => true,
    /**
     * @zh 当列表到达底部时触发
     * @en Triggered when the list reaches the bottom
     */
    reachBottom: () => true,
    /**
     * @zh 表格分页发生改变时触发
     * @en Triggered when the table pagination changes
     * @param {number} page
     */
    // @ts-ignore
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    pageChange: (page) => true,
    /**
     * @zh 表格每页数据数量发生改变时触发
     * @en Triggered when the number of data per page of the table changes
     * @param {number} pageSize
     */
    // @ts-ignore
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    pageSizeChange: (pageSize) => true
  },
  setup: (props2, {
    emit,
    slots
  }) => {
    const wrapperRef = vue.ref();
    const {
      height
    } = core.useElementSize(wrapperRef);
    const {
      bemClass
    } = _var.style("pro-list");
    const maxHeight = vue.computed(() => {
      var _a;
      return (_a = props2.maxHeight) != null ? _a : height.value;
    });
    return () => {
      const {
        virtualList,
        size,
        bordered,
        split,
        loading,
        hoverable,
        bottomOffset,
        gridProps,
        rowKey,
        dataKey,
        data,
        pagination,
        paginationProps
      } = props2;
      const isVirtualList = !gridProps && virtualList;
      return vue.createVNode(index.ProPagination, {
        "class": bemClass(),
        "data": data,
        "pagination": pagination,
        "paginationProps": paginationProps,
        "onCurrentChange": (current) => {
          emit("pageChange", current);
        },
        "onPageSizeChange": (pageSize) => {
          emit("pageSizeChange", pageSize);
        }
      }, {
        header: slots.header,
        default: (list) => vue.createVNode(webVue.List, {
          "class": bemClass(),
          "ref": wrapperRef,
          "data": list,
          "bordered": bordered,
          "split": split,
          "hoverable": hoverable,
          "loading": loading,
          "bottomOffset": bottomOffset,
          "virtualListProps": isVirtualList ? {
            height: maxHeight.value
          } : void 0,
          "size": size,
          "maxHeight": isVirtualList ? 0 : maxHeight.value,
          "gridProps": gridProps,
          "onScroll": () => emit("scroll"),
          "onReachBottom": () => emit("reachBottom")
        }, {
          item: ({
            item,
            index: index2
          }) => vue.createVNode(webVue.List.Item, {
            "key": rowKey ? pathProp.getByPath(item, rowKey) : index2
          }, {
            default: () => {
              var _a;
              return [(_a = slots.item) == null ? void 0 : _a.call(slots, {
                item: dataKey ? pathProp.getByPath(item, dataKey) : item,
                index: index2
              })];
            }
          })
        })
      });
    };
  }
});
exports.ProList = ProList;