ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
278 lines • 10.9 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import { isVNode, defineComponent, renderSlot } from 'vue';
import Tabs from '../tabs';
import Row from '../row';
import Col from '../col';
import PropTypes from '../_util/vue-types';
import { flattenChildren, isEmptyElement, filterEmptyWithUndefined } from '../_util/props-util';
import isPlainObject from 'lodash-es/isPlainObject';
import useConfigInject from '../_util/hooks/useConfigInject';
import devWarning from '../vc-util/devWarning';
var TabPane = Tabs.TabPane;
export var cardProps = function cardProps() {
return {
prefixCls: String,
title: PropTypes.any,
extra: PropTypes.any,
bordered: {
type: Boolean,
default: true
},
bodyStyle: {
type: Object,
default: undefined
},
headStyle: {
type: Object,
default: undefined
},
loading: {
type: Boolean,
default: false
},
hoverable: {
type: Boolean,
default: false
},
type: {
type: String
},
size: {
type: String
},
actions: PropTypes.any,
tabList: {
type: Array
},
tabBarExtraContent: PropTypes.any,
activeTabKey: String,
defaultActiveTabKey: String,
cover: PropTypes.any,
onTabChange: {
type: Function
}
};
};
var Card = defineComponent({
compatConfig: {
MODE: 3
},
name: 'ACard',
props: cardProps(),
slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'],
setup: function setup(props, _ref) {
var slots = _ref.slots;
var _useConfigInject = useConfigInject('card', props),
prefixCls = _useConfigInject.prefixCls,
direction = _useConfigInject.direction,
size = _useConfigInject.size;
var getAction = function getAction(actions) {
var actionList = actions.map(function (action, index) {
return isVNode(action) && !isEmptyElement(action) || !isVNode(action) ? _createVNode("li", {
"style": {
width: "".concat(100 / actions.length, "%")
},
"key": "action-".concat(index)
}, [_createVNode("span", null, [action])]) : null;
});
return actionList;
};
var triggerTabChange = function triggerTabChange(key) {
var _props$onTabChange;
(_props$onTabChange = props.onTabChange) === null || _props$onTabChange === void 0 ? void 0 : _props$onTabChange.call(props, key);
};
var isContainGrid = function isContainGrid() {
var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var containGrid;
obj.forEach(function (element) {
if (element && isPlainObject(element.type) && element.type.__ANT_CARD_GRID) {
containGrid = true;
}
});
return containGrid;
};
return function () {
var _slots$tabBarExtraCon, _slots$title, _slots$extra, _slots$actions, _slots$cover, _slots$default, _classString, _tabsProps;
var _props$headStyle = props.headStyle,
headStyle = _props$headStyle === void 0 ? {} : _props$headStyle,
_props$bodyStyle = props.bodyStyle,
bodyStyle = _props$bodyStyle === void 0 ? {} : _props$bodyStyle,
loading = props.loading,
_props$bordered = props.bordered,
bordered = _props$bordered === void 0 ? true : _props$bordered,
type = props.type,
tabList = props.tabList,
hoverable = props.hoverable,
activeTabKey = props.activeTabKey,
defaultActiveTabKey = props.defaultActiveTabKey,
_props$tabBarExtraCon = props.tabBarExtraContent,
tabBarExtraContent = _props$tabBarExtraCon === void 0 ? filterEmptyWithUndefined((_slots$tabBarExtraCon = slots.tabBarExtraContent) === null || _slots$tabBarExtraCon === void 0 ? void 0 : _slots$tabBarExtraCon.call(slots)) : _props$tabBarExtraCon,
_props$title = props.title,
title = _props$title === void 0 ? filterEmptyWithUndefined((_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots)) : _props$title,
_props$extra = props.extra,
extra = _props$extra === void 0 ? filterEmptyWithUndefined((_slots$extra = slots.extra) === null || _slots$extra === void 0 ? void 0 : _slots$extra.call(slots)) : _props$extra,
_props$actions = props.actions,
actions = _props$actions === void 0 ? filterEmptyWithUndefined((_slots$actions = slots.actions) === null || _slots$actions === void 0 ? void 0 : _slots$actions.call(slots)) : _props$actions,
_props$cover = props.cover,
cover = _props$cover === void 0 ? filterEmptyWithUndefined((_slots$cover = slots.cover) === null || _slots$cover === void 0 ? void 0 : _slots$cover.call(slots)) : _props$cover;
var children = flattenChildren((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
var pre = prefixCls.value;
var classString = (_classString = {}, _defineProperty(_classString, "".concat(pre), true), _defineProperty(_classString, "".concat(pre, "-loading"), loading), _defineProperty(_classString, "".concat(pre, "-bordered"), bordered), _defineProperty(_classString, "".concat(pre, "-hoverable"), !!hoverable), _defineProperty(_classString, "".concat(pre, "-contain-grid"), isContainGrid(children)), _defineProperty(_classString, "".concat(pre, "-contain-tabs"), tabList && tabList.length), _defineProperty(_classString, "".concat(pre, "-").concat(size.value), size.value), _defineProperty(_classString, "".concat(pre, "-type-").concat(type), !!type), _defineProperty(_classString, "".concat(pre, "-rtl"), direction.value === 'rtl'), _classString);
var loadingBlockStyle = bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? {
padding: '24px'
} : undefined;
var block = _createVNode("div", {
"class": "".concat(pre, "-loading-block")
}, null);
var loadingBlock = _createVNode("div", {
"class": "".concat(pre, "-loading-content"),
"style": loadingBlockStyle
}, [_createVNode(Row, {
"gutter": 8
}, {
default: function _default() {
return [_createVNode(Col, {
"span": 22
}, {
default: function _default() {
return [block];
}
})];
}
}), _createVNode(Row, {
"gutter": 8
}, {
default: function _default() {
return [_createVNode(Col, {
"span": 8
}, {
default: function _default() {
return [block];
}
}), _createVNode(Col, {
"span": 15
}, {
default: function _default() {
return [block];
}
})];
}
}), _createVNode(Row, {
"gutter": 8
}, {
default: function _default() {
return [_createVNode(Col, {
"span": 6
}, {
default: function _default() {
return [block];
}
}), _createVNode(Col, {
"span": 18
}, {
default: function _default() {
return [block];
}
})];
}
}), _createVNode(Row, {
"gutter": 8
}, {
default: function _default() {
return [_createVNode(Col, {
"span": 13
}, {
default: function _default() {
return [block];
}
}), _createVNode(Col, {
"span": 9
}, {
default: function _default() {
return [block];
}
})];
}
}), _createVNode(Row, {
"gutter": 8
}, {
default: function _default() {
return [_createVNode(Col, {
"span": 4
}, {
default: function _default() {
return [block];
}
}), _createVNode(Col, {
"span": 3
}, {
default: function _default() {
return [block];
}
}), _createVNode(Col, {
"span": 16
}, {
default: function _default() {
return [block];
}
})];
}
})]);
var hasActiveTabKey = activeTabKey !== undefined;
var tabsProps = (_tabsProps = {
size: 'large'
}, _defineProperty(_tabsProps, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey), _defineProperty(_tabsProps, "onChange", triggerTabChange), _defineProperty(_tabsProps, "class", "".concat(pre, "-head-tabs")), _tabsProps);
var head;
var tabs = tabList && tabList.length ? _createVNode(Tabs, tabsProps, {
default: function _default() {
return [tabList.map(function (item) {
var temp = item.tab,
itemSlots = item.slots;
var name = itemSlots === null || itemSlots === void 0 ? void 0 : itemSlots.tab;
devWarning(!itemSlots, 'Card', "tabList slots is deprecated, Please use `customTab` instead.");
var tab = temp !== undefined ? temp : slots[name] ? slots[name](item) : null;
tab = renderSlot(slots, 'customTab', item, function () {
return [tab];
});
return _createVNode(TabPane, {
"tab": tab,
"key": item.key,
"disabled": item.disabled
}, null);
})];
},
rightExtra: tabBarExtraContent ? function () {
return tabBarExtraContent;
} : null
}) : null;
if (title || extra || tabs) {
head = _createVNode("div", {
"class": "".concat(pre, "-head"),
"style": headStyle
}, [_createVNode("div", {
"class": "".concat(pre, "-head-wrapper")
}, [title && _createVNode("div", {
"class": "".concat(pre, "-head-title")
}, [title]), extra && _createVNode("div", {
"class": "".concat(pre, "-extra")
}, [extra])]), tabs]);
}
var coverDom = cover ? _createVNode("div", {
"class": "".concat(pre, "-cover")
}, [cover]) : null;
var body = _createVNode("div", {
"class": "".concat(pre, "-body"),
"style": bodyStyle
}, [loading ? loadingBlock : children]);
var actionDom = actions && actions.length ? _createVNode("ul", {
"class": "".concat(pre, "-actions")
}, [getAction(actions)]) : null;
return _createVNode("div", {
"class": classString,
"ref": "cardContainerRef"
}, [head, coverDom, children && children.length ? body : null, actionDom]);
};
}
});
export default Card;