@antdv/pro-list/lib/Item.js

@antdv/pro-list

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
  default: () => stdin_default,
  itemProps: () => itemProps,
  renderExpandIcon: () => renderExpandIcon
});
module.exports = __toCommonJS(stdin_exports);
var import_vue = require("vue");
var import_icons_vue = require("@ant-design/icons-vue");
var import_pro_card = require("@antdv/pro-card");
var import_pro_provider = require("@antdv/pro-provider");
var import_pro_utils = require("@antdv/pro-utils");
var import_ant_design_vue = require("ant-design-vue");
var import_context = require("ant-design-vue/lib/config-provider/context");
var import_vue2 = require("vue");
function renderExpandIcon({
  prefixCls,
  expandIcon = (0, import_vue.createVNode)(import_icons_vue.RightOutlined, null, null),
  onExpand,
  expanded,
  record,
  hashId
}) {
  let icon = expandIcon;
  const expandClassName = `${prefixCls}-row-expand-icon`;
  const onClick = (event) => {
    onExpand(!expanded);
    event.stopPropagation();
  };
  if (typeof expandIcon === "function") {
    icon = expandIcon({
      expanded,
      onExpand,
      record
    });
  }
  return (0, import_vue.createVNode)("span", {
    "class": (0, import_pro_utils.classNames)(expandClassName, hashId, {
      [`${prefixCls}-row-expanded`]: expanded,
      [`${prefixCls}-row-collapsed`]: !expanded
    }),
    "onClick": onClick
  }, [icon]);
}
function itemProps() {
  return {
    title: (0, import_pro_utils.vNodeType)(),
    subTitle: (0, import_pro_utils.vNodeType)(),
    checkbox: (0, import_pro_utils.vNodeType)(),
    className: String,
    prefixCls: String,
    item: (0, import_pro_utils.anyType)(),
    subheaderTitle: (0, import_pro_utils.vNodeType)(),
    subheaderActions: (0, import_pro_utils.vNodeType)(),
    index: (0, import_pro_utils.numberType)().isRequired,
    selected: Boolean,
    avatar: (0, import_pro_utils.vNodeType)(),
    content: (0, import_pro_utils.vNodeType)(),
    actions: (0, import_pro_utils.vNodeType)(),
    extra: (0, import_pro_utils.vNodeType)(),
    description: (0, import_pro_utils.vNodeType)(),
    loading: Boolean,
    style: (0, import_pro_utils.objectType)(),
    grid: (0, import_pro_utils.objectType)(),
    expand: Boolean,
    rowSupportExpand: Boolean,
    cardActionProps: (0, import_pro_utils.stringType)(),
    onExpand: (0, import_pro_utils.funcType)(),
    expandable: (0, import_pro_utils.objectType)(),
    showActions: (0, import_pro_utils.stringType)(),
    showExtra: (0, import_pro_utils.stringType)(),
    type: (0, import_pro_utils.stringType)(),
    isEditable: (0, import_pro_utils.boolType)().isRequired,
    recordKey: (0, import_pro_utils.oneOfType)([String, Number]),
    cardProps: (0, import_pro_utils.objectType)(),
    record: (0, import_pro_utils.objectType)().isRequired,
    onRow: (0, import_pro_utils.funcType)(),
    onItem: (0, import_pro_utils.funcType)(),
    itemHeaderRender: (0, import_pro_utils.oneOfType)([Function, Boolean]),
    itemTitleRender: (0, import_pro_utils.oneOfType)([Function, Boolean])
  };
}
var stdin_default = (0, import_vue2.defineComponent)({
  name: "ProListItem",
  props: itemProps(),
  slots: Object,
  setup(props, {
    slots
  }) {
    const {
      getPrefixCls
    } = (0, import_context.useConfigContextInject)();
    const {
      hashId
    } = import_pro_provider.ProProvider.useContext();
    const [expanded, onExpand] = (0, import_pro_utils.useMountMergeState)(!!props.expand, {
      value: (0, import_vue2.toRef)(props, "expand", false),
      onChange: props.onExpand
    });
    return () => {
      var _a, _b, _c, _d, _e, _f, _h;
      const prefixCls = getPrefixCls("pro-list", props.prefixCls);
      const defaultClassName = `${prefixCls}-row`;
      const _g = props, {
        title = (_a = slots.title) == null ? void 0 : _a.call(slots),
        subTitle = (_b = slots.subTitle) == null ? void 0 : _b.call(slots),
        content = (_c = slots.content) == null ? void 0 : _c.call(slots),
        itemTitleRender,
        prefixCls: restPrefixCls,
        actions = (_d = slots.actions) == null ? void 0 : _d.call(slots),
        item,
        recordKey,
        avatar,
        cardProps,
        description = (_e = slots.description) == null ? void 0 : _e.call(slots),
        isEditable,
        checkbox,
        index,
        selected,
        loading,
        expand: propsExpand,
        onExpand: propsOnExpand,
        expandable: expandableConfig,
        rowSupportExpand,
        showActions,
        showExtra,
        type,
        style,
        className: propsClassName = defaultClassName,
        record,
        onRow,
        onItem,
        itemHeaderRender,
        cardActionProps,
        extra = (_f = slots.extra) == null ? void 0 : _f.call(slots)
      } = _g, rest = __objRest(_g, [
        "title",
        "subTitle",
        "content",
        "itemTitleRender",
        "prefixCls",
        "actions",
        "item",
        "recordKey",
        "avatar",
        "cardProps",
        "description",
        "isEditable",
        "checkbox",
        "index",
        "selected",
        "loading",
        "expand",
        "onExpand",
        "expandable",
        "rowSupportExpand",
        "showActions",
        "showExtra",
        "type",
        "style",
        "className",
        "record",
        "onRow",
        "onItem",
        "itemHeaderRender",
        "cardActionProps",
        "extra"
      ]);
      const {
        expandedRowRender,
        expandIcon,
        expandRowByClick,
        indentSize = 8,
        expandedRowClassName
      } = expandableConfig || {};
      const className = (0, import_pro_utils.classNames)({
        [`${defaultClassName}-selected`]: !cardProps && selected,
        [`${defaultClassName}-show-action-hover`]: showActions === "hover",
        [`${defaultClassName}-type-${type}`]: !!type,
        [`${defaultClassName}-editable`]: isEditable,
        [`${defaultClassName}-show-extra-hover`]: showExtra === "hover"
      }, hashId, defaultClassName);
      const extraClassName = (0, import_pro_utils.classNames)(hashId, {
        [`${propsClassName}-extra`]: showExtra === "hover"
      });
      const needExpanded = expanded.value || Object.values(expandableConfig || {}).length === 0;
      const expandedRowDom = expandedRowRender && expandedRowRender({
        record,
        index,
        indent: indentSize,
        expanded: expanded.value
      });
      const extraDom = () => {
        if (!actions || cardActionProps === "actions") {
          return void 0;
        }
        return [(0, import_vue.createVNode)("div", {
          "key": "action",
          "onClick": (e) => e.stopPropagation()
        }, [actions])];
      };
      const actionsDom = () => {
        if (!actions || !cardActionProps || cardActionProps === "extra") {
          return void 0;
        }
        return [(0, import_vue.createVNode)("div", {
          "key": "action",
          "class": `${defaultClassName}-actions ${hashId}`.trim(),
          "onClick": (e) => e.stopPropagation()
        }, [actions])];
      };
      const titleDom = title || subTitle ? (0, import_vue.createVNode)("div", {
        "class": `${defaultClassName}-header-container ${hashId}`.trim()
      }, [title && (0, import_vue.createVNode)("div", {
        "class": (0, import_pro_utils.classNames)(`${defaultClassName}-title`, hashId, {
          [`${defaultClassName}-title-editable`]: isEditable
        })
      }, [title]), subTitle && (0, import_vue.createVNode)("div", {
        "class": (0, import_pro_utils.classNames)(`${defaultClassName}-subTitle`, hashId, {
          [`${defaultClassName}-subTitle-editable`]: isEditable
        })
      }, [subTitle])]) : null;
      const metaTitle = (_h = itemTitleRender && (itemTitleRender == null ? void 0 : itemTitleRender(record, index, titleDom))) != null ? _h : titleDom;
      const metaDom = metaTitle || avatar || subTitle || description ? (0, import_vue.createVNode)(import_ant_design_vue.List.Item.Meta, {
        "avatar": avatar,
        "title": metaTitle,
        "description": description && needExpanded && (0, import_vue.createVNode)("div", {
          "class": `${className}-description ${hashId}`.trim()
        }, [description])
      }, null) : null;
      const rowClassName = (0, import_pro_utils.classNames)(hashId, {
        [`${defaultClassName}-item-has-checkbox`]: checkbox,
        [`${defaultClassName}-item-has-avatar`]: avatar,
        [className]: className
      });
      const cardTitleDom = () => {
        if (avatar || title) {
          return (0, import_vue.createVNode)(import_vue.Fragment, null, [avatar, (0, import_vue.createVNode)("span", {
            "class": `${getPrefixCls("list-item-meta-title")} ${hashId}`.trim()
          }, [title])]);
        }
        return null;
      };
      const getItemProps = onItem == null ? void 0 : onItem(record, index);
      const defaultDom = !cardProps ? (0, import_vue.createVNode)(import_ant_design_vue.List.Item, (0, import_vue.mergeProps)({
        "class": (0, import_pro_utils.classNames)(rowClassName, hashId, {
          [propsClassName]: propsClassName !== defaultClassName
        })
      }, rest, {
        "actions": extraDom(),
        "extra": !!extra && (0, import_vue.createVNode)("div", {
          "class": extraClassName
        }, [extra])
      }, onRow == null ? void 0 : onRow(record, index), getItemProps), {
        default: () => [(0, import_vue.createVNode)("div", {
          "onClick": (e) => {
            var _a2, _b2, _c2, _d2;
            (_b2 = (_a2 = onRow == null ? void 0 : onRow(record, index)) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, e);
            (_d2 = (_c2 = onItem == null ? void 0 : onItem(record, index)) == null ? void 0 : _c2.onClick) == null ? void 0 : _d2.call(_c2, e);
            if (expandRowByClick) {
              onExpand(!expanded.value);
            }
          }
        }, [(0, import_vue.createVNode)(import_ant_design_vue.Skeleton, {
          "avatar": true,
          "title": false,
          "loading": loading,
          "active": true
        }, {
          default: () => {
            var _a2;
            return [(0, import_vue.createVNode)("div", {
              "class": `${className}-header ${hashId}`.trim()
            }, [(0, import_vue.createVNode)("div", {
              "class": `${className}-header-option ${hashId}`.trim()
            }, [!!checkbox && (0, import_vue.createVNode)("div", {
              "class": `${className}-checkbox ${hashId}`.trim()
            }, [checkbox]), Object.values(expandableConfig || {}).length > 0 && rowSupportExpand && renderExpandIcon({
              prefixCls,
              hashId,
              expandIcon,
              onExpand,
              expanded: expanded.value,
              record
            })]), (_a2 = itemHeaderRender && (itemHeaderRender == null ? void 0 : itemHeaderRender(record, index, metaDom))) != null ? _a2 : metaDom]), needExpanded && (content || expandedRowDom) && (0, import_vue.createVNode)("div", {
              "class": `${className}-content ${hashId}`.trim()
            }, [content, expandedRowRender && rowSupportExpand && (0, import_vue.createVNode)("div", {
              "class": expandedRowClassName && expandedRowClassName(record, index, indentSize)
            }, [expandedRowDom])])];
          }
        })])]
      }) : (0, import_vue.createVNode)(import_pro_card.CheckCard, (0, import_vue.mergeProps)({
        "bordered": true,
        "style": {
          width: "100%"
        }
      }, cardProps, {
        "title": cardTitleDom(),
        "subTitle": subTitle,
        "extra": extraDom(),
        "actions": actionsDom(),
        "bodyStyle": __spreadValues({
          padding: 24
        }, cardProps.bodyStyle)
      }, getItemProps, {
        "onClick": (e) => {
          var _a2, _b2;
          (_a2 = cardProps == null ? void 0 : cardProps.onClick) == null ? void 0 : _a2.call(cardProps, e);
          (_b2 = getItemProps == null ? void 0 : getItemProps.onClick) == null ? void 0 : _b2.call(getItemProps, e);
        }
      }), {
        default: () => [(0, import_vue.createVNode)(import_ant_design_vue.Skeleton, {
          "avatar": true,
          "title": false,
          "loading": loading,
          "active": true
        }, {
          default: () => [(0, import_vue.createVNode)("div", {
            "class": `${className}-header ${hashId}`.trim()
          }, [itemTitleRender && (itemTitleRender == null ? void 0 : itemTitleRender(record, index, titleDom)), content])]
        })]
      });
      if (!cardProps) {
        return defaultDom;
      }
      return (0, import_vue.createVNode)("div", {
        "class": (0, import_pro_utils.classNames)(hashId, {
          [`${className}-card`]: cardProps,
          [propsClassName]: propsClassName !== defaultClassName
        }),
        "style": style
      }, [defaultDom]);
    };
  }
});