2022-03-26 14:52:54 +00:00
|
|
|
import type { VNodeTypes, PropType, VNode, ExtractPropTypes, CSSProperties } from 'vue';
|
2021-10-07 01:23:36 +00:00
|
|
|
import { isVNode, defineComponent, renderSlot } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import Tabs from '../tabs';
|
|
|
|
import Row from '../row';
|
|
|
|
import Col from '../col';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
2021-10-07 01:23:36 +00:00
|
|
|
import { flattenChildren, isEmptyElement } from '../_util/props-util';
|
|
|
|
import type { SizeType } from '../config-provider';
|
2020-09-02 14:44:16 +00:00
|
|
|
import isPlainObject from 'lodash-es/isPlainObject';
|
2021-10-07 01:23:36 +00:00
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
|
|
|
import devWarning from '../vc-util/devWarning';
|
2020-10-12 11:19:10 +00:00
|
|
|
export interface CardTabListType {
|
|
|
|
key: string;
|
2021-10-07 01:23:36 +00:00
|
|
|
tab: any;
|
|
|
|
/** @deprecated Please use `customTab` instead. */
|
2020-10-12 11:19:10 +00:00
|
|
|
slots?: { tab: string };
|
|
|
|
disabled?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export type CardType = 'inner';
|
2021-10-07 01:23:36 +00:00
|
|
|
export type CardSize = 'default' | 'small';
|
2020-10-12 11:19:10 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const { TabPane } = Tabs;
|
2020-10-12 11:19:10 +00:00
|
|
|
|
2022-03-18 01:30:37 +00:00
|
|
|
export const cardProps = () => ({
|
2022-03-26 14:52:54 +00:00
|
|
|
prefixCls: String,
|
2021-10-07 01:23:36 +00:00
|
|
|
title: PropTypes.any,
|
|
|
|
extra: PropTypes.any,
|
2022-03-26 14:52:54 +00:00
|
|
|
bordered: { type: Boolean, default: true },
|
|
|
|
bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
|
|
|
|
headStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
|
|
|
|
loading: { type: Boolean, default: false },
|
|
|
|
hoverable: { type: Boolean, default: false },
|
2021-10-07 01:23:36 +00:00
|
|
|
type: { type: String as PropType<CardType> },
|
|
|
|
size: { type: String as PropType<CardSize> },
|
|
|
|
actions: PropTypes.any,
|
2021-06-23 13:47:53 +00:00
|
|
|
tabList: {
|
|
|
|
type: Array as PropType<CardTabListType[]>,
|
|
|
|
},
|
2021-10-07 01:23:36 +00:00
|
|
|
tabBarExtraContent: PropTypes.any,
|
2022-03-26 14:52:54 +00:00
|
|
|
activeTabKey: String,
|
|
|
|
defaultActiveTabKey: String,
|
2021-10-07 01:23:36 +00:00
|
|
|
cover: PropTypes.any,
|
2021-06-23 13:47:53 +00:00
|
|
|
onTabChange: {
|
|
|
|
type: Function as PropType<(key: string) => void>,
|
|
|
|
},
|
2021-10-07 01:23:36 +00:00
|
|
|
});
|
2021-06-23 13:47:53 +00:00
|
|
|
|
2021-10-07 01:23:36 +00:00
|
|
|
export type CardProps = Partial<ExtractPropTypes<ReturnType<typeof cardProps>>>;
|
2021-06-23 13:47:53 +00:00
|
|
|
|
2020-10-12 11:19:10 +00:00
|
|
|
const Card = defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ACard',
|
2021-10-07 01:23:36 +00:00
|
|
|
props: cardProps(),
|
|
|
|
slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'],
|
|
|
|
setup(props, { slots }) {
|
|
|
|
const { prefixCls, direction, size } = useConfigInject('card', props);
|
|
|
|
const getAction = (actions: VNodeTypes[]) => {
|
2020-06-24 09:25:47 +00:00
|
|
|
const actionList = actions.map((action, index) =>
|
|
|
|
(isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? (
|
|
|
|
<li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
|
|
|
|
<span>{action}</span>
|
|
|
|
</li>
|
|
|
|
) : null,
|
|
|
|
);
|
2020-03-07 11:45:13 +00:00
|
|
|
return actionList;
|
2021-10-07 01:23:36 +00:00
|
|
|
};
|
|
|
|
const triggerTabChange = (key: string) => {
|
|
|
|
props.onTabChange?.(key);
|
|
|
|
};
|
|
|
|
const isContainGrid = (obj: VNode[] = []) => {
|
2020-11-13 02:51:12 +00:00
|
|
|
let containGrid: boolean;
|
2019-01-12 03:33:27 +00:00
|
|
|
obj.forEach(element => {
|
2020-10-12 11:19:10 +00:00
|
|
|
if (element && isPlainObject(element.type) && (element.type as any).__ANT_CARD_GRID) {
|
2019-01-12 03:33:27 +00:00
|
|
|
containGrid = true;
|
2018-03-19 02:47:23 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
|
|
|
return containGrid;
|
|
|
|
};
|
2018-01-20 06:33:42 +00:00
|
|
|
|
2021-10-07 01:23:36 +00:00
|
|
|
return () => {
|
|
|
|
const {
|
|
|
|
headStyle = {},
|
|
|
|
bodyStyle = {},
|
|
|
|
loading,
|
|
|
|
bordered = true,
|
|
|
|
type,
|
|
|
|
tabList,
|
|
|
|
hoverable,
|
|
|
|
activeTabKey,
|
|
|
|
defaultActiveTabKey,
|
|
|
|
tabBarExtraContent = slots.tabBarExtraContent?.(),
|
|
|
|
title = slots.title?.(),
|
|
|
|
extra = slots.extra?.(),
|
|
|
|
actions = slots.actions?.(),
|
|
|
|
cover = slots.cover?.(),
|
|
|
|
} = props;
|
|
|
|
const children = flattenChildren(slots.default?.());
|
|
|
|
const pre = prefixCls.value;
|
|
|
|
const classString = {
|
|
|
|
[`${pre}`]: true,
|
|
|
|
[`${pre}-loading`]: loading,
|
|
|
|
[`${pre}-bordered`]: bordered,
|
|
|
|
[`${pre}-hoverable`]: !!hoverable,
|
|
|
|
[`${pre}-contain-grid`]: isContainGrid(children),
|
|
|
|
[`${pre}-contain-tabs`]: tabList && tabList.length,
|
|
|
|
[`${pre}-${size.value}`]: size.value,
|
|
|
|
[`${pre}-type-${type}`]: !!type,
|
|
|
|
[`${pre}-rtl`]: direction.value === 'rtl',
|
|
|
|
};
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2021-10-07 01:23:36 +00:00
|
|
|
const loadingBlockStyle =
|
|
|
|
bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: '24px' } : undefined;
|
2018-01-20 06:33:42 +00:00
|
|
|
|
2021-10-07 01:23:36 +00:00
|
|
|
const block = <div class={`${pre}-loading-block`} />;
|
|
|
|
const loadingBlock = (
|
|
|
|
<div class={`${pre}-loading-content`} style={loadingBlockStyle}>
|
|
|
|
<Row gutter={8}>
|
|
|
|
<Col span={22}>{block}</Col>
|
|
|
|
</Row>
|
|
|
|
<Row gutter={8}>
|
|
|
|
<Col span={8}>{block}</Col>
|
|
|
|
<Col span={15}>{block}</Col>
|
|
|
|
</Row>
|
|
|
|
<Row gutter={8}>
|
|
|
|
<Col span={6}>{block}</Col>
|
|
|
|
<Col span={18}>{block}</Col>
|
|
|
|
</Row>
|
|
|
|
<Row gutter={8}>
|
|
|
|
<Col span={13}>{block}</Col>
|
|
|
|
<Col span={9}>{block}</Col>
|
|
|
|
</Row>
|
|
|
|
<Row gutter={8}>
|
|
|
|
<Col span={4}>{block}</Col>
|
|
|
|
<Col span={3}>{block}</Col>
|
|
|
|
<Col span={16}>{block}</Col>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
);
|
2018-04-06 12:56:19 +00:00
|
|
|
|
2021-10-07 01:23:36 +00:00
|
|
|
const hasActiveTabKey = activeTabKey !== undefined;
|
|
|
|
const tabsProps = {
|
|
|
|
size: 'large' as SizeType,
|
|
|
|
[hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
|
|
|
|
? activeTabKey
|
|
|
|
: defaultActiveTabKey,
|
|
|
|
onChange: triggerTabChange,
|
|
|
|
class: `${pre}-head-tabs`,
|
|
|
|
};
|
|
|
|
|
|
|
|
let head;
|
|
|
|
const tabs =
|
|
|
|
tabList && tabList.length ? (
|
|
|
|
<Tabs
|
|
|
|
{...tabsProps}
|
|
|
|
v-slots={{ rightExtra: tabBarExtraContent ? () => tabBarExtraContent : null }}
|
|
|
|
>
|
|
|
|
{tabList.map(item => {
|
|
|
|
const { tab: temp, slots: itemSlots } = item as CardTabListType;
|
|
|
|
const name = itemSlots?.tab;
|
|
|
|
devWarning(
|
|
|
|
!itemSlots,
|
|
|
|
'Card',
|
|
|
|
`tabList slots is deprecated, Please use \`customTab\` instead.`,
|
|
|
|
);
|
|
|
|
let tab = temp !== undefined ? temp : slots[name] ? slots[name](item) : null;
|
|
|
|
tab = renderSlot(slots, 'customTab', item as any, () => [tab]);
|
|
|
|
return <TabPane tab={tab} key={item.key} disabled={item.disabled} />;
|
|
|
|
})}
|
|
|
|
</Tabs>
|
|
|
|
) : null;
|
|
|
|
if (title || extra || tabs) {
|
|
|
|
head = (
|
|
|
|
<div class={`${pre}-head`} style={headStyle}>
|
|
|
|
<div class={`${pre}-head-wrapper`}>
|
|
|
|
{title && <div class={`${pre}-head-title`}>{title}</div>}
|
|
|
|
{extra && <div class={`${pre}-extra`}>{extra}</div>}
|
|
|
|
</div>
|
|
|
|
{tabs}
|
2018-01-20 06:33:42 +00:00
|
|
|
</div>
|
2021-10-07 01:23:36 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const coverDom = cover ? <div class={`${pre}-cover`}>{cover}</div> : null;
|
|
|
|
const body = (
|
|
|
|
<div class={`${pre}-body`} style={bodyStyle}>
|
|
|
|
{loading ? loadingBlock : children}
|
2018-01-20 06:33:42 +00:00
|
|
|
</div>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2021-10-07 01:23:36 +00:00
|
|
|
const actionDom =
|
|
|
|
actions && actions.length ? <ul class={`${pre}-actions`}>{getAction(actions)}</ul> : null;
|
2018-03-02 08:54:22 +00:00
|
|
|
|
2021-10-07 01:23:36 +00:00
|
|
|
return (
|
|
|
|
<div class={classString} ref="cardContainerRef">
|
|
|
|
{head}
|
|
|
|
{coverDom}
|
|
|
|
{children && children.length ? body : null}
|
|
|
|
{actionDom}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2018-03-19 02:47:23 +00:00
|
|
|
},
|
2020-10-12 11:19:10 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
export default Card;
|