123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278 |
- 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;
|