@vrx-arco/pro-components/dist/ProCardList/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 use = require("@vrx-arco/use");
const index = require("../ProList/index.js");
const props = require("../ProPagination/props.js");
const ProCardList = /* @__PURE__ */ vue.defineComponent({
  name: "vrx-arco-pro-card-list",
  props: __spreadProps(__spreadValues({}, props.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, index2) => true
  },
  setup: (props2, {
    emit,
    slots
  }) => {
    const column = vue.toRef(props2, "column");
    const gutter = vue.toRef(props2, "gutter");
    const {
      gridProps
    } = use.useGrid(true, column, gutter);
    return () => {
      const {
        pagination,
        paginationProps,
        data,
        rowKey,
        bottomOffset,
        loading,
        dataKey,
        maxHeight
      } = props2;
      return vue.createVNode(index.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: index2
        }) => vue.createVNode(webVue.Card, vue.mergeProps({
          "hoverable": true
        }, {
          onClick: () => emit("itemClick", item, index2)
        }), {
          default: () => {
            var _a;
            return [(_a = slots.item) == null ? void 0 : _a.call(slots, {
              item,
              index: index2
            })];
          }
        })
      });
    };
  }
});
exports.ProCardList = ProCardList;