@vrx-arco/pro-components/dist/ProCardList/index.mjs

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

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));
import { defineComponent, toRef, createVNode, mergeProps } from "vue";
import { Card } from "@arco-design/web-vue";
import { useGrid } from "@vrx-arco/use";
import { ProList } from "../ProList/index.mjs";
import { proPaginationProps } from "../ProPagination/props.mjs";
const ProCardList = /* @__PURE__ */ defineComponent({
  name: "vrx-arco-pro-card-list",
  props: __spreadProps(__spreadValues({}, proPaginationProps()), {
    bottomOffset: {
      type: Number,
      default: 0
    },
    /**
     * 等同于 v-for的 key，用于性能优化
     */
    rowKey: String,
    /**
     * 根据数据key值筛选每个卡片获取的数据，可传递类似 "res.data.data" 的路径字符串
     */
    dataKey: String,
    /**
     * 加载状态
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 列表的最大高度受控
     */
    maxHeight: [Number, String],
    /**
     * 一行显示的列数
     */
    column: {
      type: [Number, Object],
      default: () => ({
        xs: 1,
        sm: 2,
        md: 2,
        lg: 3,
        xl: 3,
        xxl: 4
      })
    },
    /**
     * item的间距
     */
    gutter: {
      type: [Number, Array],
      default: 0
    }
  }),
  emits: {
    /**
     * @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,
    // @ts-ignore
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    itemClick: (item, index) => true
  },
  setup: (props, {
    emit,
    slots
  }) => {
    const column = toRef(props, "column");
    const gutter = toRef(props, "gutter");
    const {
      gridProps
    } = useGrid(true, column, gutter);
    return () => {
      const {
        pagination,
        paginationProps,
        data,
        rowKey,
        bottomOffset,
        loading,
        dataKey,
        maxHeight
      } = props;
      return createVNode(ProList, {
        "data": data,
        "bordered": false,
        "split": false,
        "pagination": pagination,
        "paginationProps": paginationProps,
        "onPageChange": (current) => {
          emit("pageChange", current);
        },
        "onPageSizeChange": (pageSize) => {
          emit("pageSizeChange", pageSize);
        },
        "rowKey": rowKey,
        "dataKey": dataKey,
        "loading": loading,
        "bottomOffset": bottomOffset,
        "maxHeight": maxHeight,
        "gridProps": gridProps.value
      }, {
        header: slots.header,
        item: ({
          item,
          index
        }) => createVNode(Card, mergeProps({
          "hoverable": true
        }, {
          onClick: () => emit("itemClick", item, index)
        }), {
          default: () => {
            var _a;
            return [(_a = slots.item) == null ? void 0 : _a.call(slots, {
              item,
              index
            })];
          }
        })
      });
    };
  }
});
export {
  ProCardList
};