229 lines
6.7 KiB
Vue
229 lines
6.7 KiB
Vue
import type { VNodeTypes, PropType, VNode, ExtractPropTypes } from 'vue';
|
|
import { inject, isVNode, defineComponent } from 'vue';
|
|
import { tuple } from '../_util/type';
|
|
import Tabs from '../tabs';
|
|
import Row from '../row';
|
|
import Col from '../col';
|
|
import PropTypes from '../_util/vue-types';
|
|
import { getComponent, getSlot, isEmptyElement } from '../_util/props-util';
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
import { defaultConfigProvider } from '../config-provider';
|
|
import isPlainObject from 'lodash-es/isPlainObject';
|
|
|
|
export interface CardTabListType {
|
|
key: string;
|
|
tab: VNodeTypes;
|
|
slots?: { tab: string };
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export type CardType = 'inner';
|
|
|
|
const { TabPane } = Tabs;
|
|
|
|
const cardProps = {
|
|
prefixCls: PropTypes.string,
|
|
title: PropTypes.VNodeChild,
|
|
extra: PropTypes.VNodeChild,
|
|
bordered: PropTypes.looseBool.def(true),
|
|
bodyStyle: PropTypes.style,
|
|
headStyle: PropTypes.style,
|
|
loading: PropTypes.looseBool.def(false),
|
|
hoverable: PropTypes.looseBool.def(false),
|
|
type: PropTypes.string,
|
|
size: PropTypes.oneOf(tuple('default', 'small')),
|
|
actions: PropTypes.VNodeChild,
|
|
tabList: {
|
|
type: Array as PropType<CardTabListType[]>,
|
|
},
|
|
tabBarExtraContent: PropTypes.VNodeChild,
|
|
activeTabKey: PropTypes.string,
|
|
defaultActiveTabKey: PropTypes.string,
|
|
cover: PropTypes.VNodeChild,
|
|
onTabChange: {
|
|
type: Function as PropType<(key: string) => void>,
|
|
},
|
|
};
|
|
|
|
export type CardProps = Partial<ExtractPropTypes<typeof cardProps>>;
|
|
|
|
const Card = defineComponent({
|
|
name: 'ACard',
|
|
mixins: [BaseMixin],
|
|
props: cardProps,
|
|
setup() {
|
|
return {
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
widerPadding: false,
|
|
};
|
|
},
|
|
methods: {
|
|
getAction(actions: VNodeTypes[]) {
|
|
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,
|
|
);
|
|
return actionList;
|
|
},
|
|
triggerTabChange(key: string) {
|
|
this.$emit('tabChange', key);
|
|
},
|
|
isContainGrid(obj: VNode[] = []) {
|
|
let containGrid: boolean;
|
|
obj.forEach(element => {
|
|
if (element && isPlainObject(element.type) && (element.type as any).__ANT_CARD_GRID) {
|
|
containGrid = true;
|
|
}
|
|
});
|
|
return containGrid;
|
|
},
|
|
},
|
|
render() {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
headStyle = {},
|
|
bodyStyle = {},
|
|
loading,
|
|
bordered = true,
|
|
size = 'default',
|
|
type,
|
|
tabList,
|
|
hoverable,
|
|
activeTabKey,
|
|
defaultActiveTabKey,
|
|
} = this.$props;
|
|
const { $slots } = this;
|
|
const children = getSlot(this);
|
|
const { getPrefixCls } = this.configProvider;
|
|
const prefixCls = getPrefixCls('card', customizePrefixCls);
|
|
|
|
const tabBarExtraContent = getComponent(this, 'tabBarExtraContent');
|
|
const classString = {
|
|
[`${prefixCls}`]: true,
|
|
[`${prefixCls}-loading`]: loading,
|
|
[`${prefixCls}-bordered`]: bordered,
|
|
[`${prefixCls}-hoverable`]: !!hoverable,
|
|
[`${prefixCls}-contain-grid`]: this.isContainGrid(children),
|
|
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
|
|
[`${prefixCls}-${size}`]: size !== 'default',
|
|
[`${prefixCls}-type-${type}`]: !!type,
|
|
};
|
|
|
|
const loadingBlockStyle =
|
|
bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
|
|
|
|
const loadingBlock = (
|
|
<div class={`${prefixCls}-loading-content`} style={loadingBlockStyle}>
|
|
<Row gutter={8}>
|
|
<Col span={22}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={8}>
|
|
<Col span={8}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
<Col span={15}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={8}>
|
|
<Col span={6}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
<Col span={18}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={8}>
|
|
<Col span={13}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
<Col span={9}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={8}>
|
|
<Col span={4}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
<Col span={3}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
<Col span={16}>
|
|
<div class={`${prefixCls}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
|
|
const hasActiveTabKey = activeTabKey !== undefined;
|
|
const tabsProps = {
|
|
size: 'large',
|
|
[hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
|
|
? activeTabKey
|
|
: defaultActiveTabKey,
|
|
tabBarExtraContent,
|
|
onChange: this.triggerTabChange,
|
|
class: `${prefixCls}-head-tabs`,
|
|
};
|
|
|
|
let head;
|
|
const tabs =
|
|
tabList && tabList.length ? (
|
|
<Tabs {...tabsProps}>
|
|
{tabList.map(item => {
|
|
const { tab: temp, slots } = item as CardTabListType;
|
|
const name = slots?.tab;
|
|
const tab = temp !== undefined ? temp : $slots[name] ? $slots[name](item) : null;
|
|
return <TabPane tab={tab} key={item.key} disabled={item.disabled} />;
|
|
})}
|
|
</Tabs>
|
|
) : null;
|
|
const titleDom = getComponent(this, 'title');
|
|
const extraDom = getComponent(this, 'extra');
|
|
if (titleDom || extraDom || tabs) {
|
|
head = (
|
|
<div class={`${prefixCls}-head`} style={headStyle}>
|
|
<div class={`${prefixCls}-head-wrapper`}>
|
|
{titleDom && <div class={`${prefixCls}-head-title`}>{titleDom}</div>}
|
|
{extraDom && <div class={`${prefixCls}-extra`}>{extraDom}</div>}
|
|
</div>
|
|
{tabs}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const cover = getComponent(this, 'cover');
|
|
const coverDom = cover ? <div class={`${prefixCls}-cover`}>{cover}</div> : null;
|
|
const body = (
|
|
<div class={`${prefixCls}-body`} style={bodyStyle}>
|
|
{loading ? loadingBlock : children}
|
|
</div>
|
|
);
|
|
const actions = getComponent(this, 'actions');
|
|
const actionDom =
|
|
actions && actions.length ? (
|
|
<ul class={`${prefixCls}-actions`}>{this.getAction(actions)}</ul>
|
|
) : null;
|
|
|
|
return (
|
|
<div class={classString} ref="cardContainerRef">
|
|
{head}
|
|
{coverDom}
|
|
{children ? body : null}
|
|
{actionDom}
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default Card;
|