@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>

import { style } from "../style/var.js";
import { proPaginationProps } from "../ProPagination/props.js";
import { ProPagination } from "../ProPagination/index.js";
import { computed, createVNode, defineComponent, ref } from "vue";
import { List } from "@arco-design/web-vue";
import { useElementSize } from "@vueuse/core";
import { getByPath } from "@vill-v/path-prop";
const ProList = /* @__PURE__ */ defineComponent({
	name: "vrx-arco-pro-list",
	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
		},
		virtualList: {
			type: Boolean,
			default: false
		},
		gridProps: Object,
		rowKey: String,
		dataKey: String,
		maxHeight: [Number, String]
	},
	emits: {
		scroll: () => true,
		reachBottom: () => true,
		pageChange: (page) => true,
		pageSizeChange: (pageSize) => true
	},
	setup: (props, { emit, slots }) => {
		const wrapperRef = ref();
		const { height } = useElementSize(wrapperRef);
		const { bemClass } = style("pro-list");
		const maxHeight = computed(() => props.maxHeight ?? height.value);
		return () => {
			const { virtualList, size, bordered, split, loading, hoverable, bottomOffset, gridProps, rowKey, dataKey, data, pagination, paginationProps } = props;
			const isVirtualList = !gridProps && virtualList;
			return createVNode(ProPagination, {
				"class": bemClass(),
				"data": data,
				"pagination": pagination,
				"paginationProps": paginationProps,
				"onCurrentChange": (current) => {
					emit("pageChange", current);
				},
				"onPageSizeChange": (pageSize) => {
					emit("pageSizeChange", pageSize);
				}
			}, {
				header: slots.header,
				default: (list) => createVNode(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 }) => createVNode(List.Item, { "key": rowKey ? getByPath(item, rowKey) : index }, { default: () => [slots.item?.({
					item: dataKey ? getByPath(item, dataKey) : item,
					index
				})] }) })
			});
		};
	}
});
export { ProList };