Card.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  3. import { isVNode, defineComponent, renderSlot } from 'vue';
  4. import Tabs from '../tabs';
  5. import Row from '../row';
  6. import Col from '../col';
  7. import PropTypes from '../_util/vue-types';
  8. import { flattenChildren, isEmptyElement, filterEmptyWithUndefined } from '../_util/props-util';
  9. import isPlainObject from 'lodash-es/isPlainObject';
  10. import useConfigInject from '../_util/hooks/useConfigInject';
  11. import devWarning from '../vc-util/devWarning';
  12. var TabPane = Tabs.TabPane;
  13. export var cardProps = function cardProps() {
  14. return {
  15. prefixCls: String,
  16. title: PropTypes.any,
  17. extra: PropTypes.any,
  18. bordered: {
  19. type: Boolean,
  20. default: true
  21. },
  22. bodyStyle: {
  23. type: Object,
  24. default: undefined
  25. },
  26. headStyle: {
  27. type: Object,
  28. default: undefined
  29. },
  30. loading: {
  31. type: Boolean,
  32. default: false
  33. },
  34. hoverable: {
  35. type: Boolean,
  36. default: false
  37. },
  38. type: {
  39. type: String
  40. },
  41. size: {
  42. type: String
  43. },
  44. actions: PropTypes.any,
  45. tabList: {
  46. type: Array
  47. },
  48. tabBarExtraContent: PropTypes.any,
  49. activeTabKey: String,
  50. defaultActiveTabKey: String,
  51. cover: PropTypes.any,
  52. onTabChange: {
  53. type: Function
  54. }
  55. };
  56. };
  57. var Card = defineComponent({
  58. compatConfig: {
  59. MODE: 3
  60. },
  61. name: 'ACard',
  62. props: cardProps(),
  63. slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'],
  64. setup: function setup(props, _ref) {
  65. var slots = _ref.slots;
  66. var _useConfigInject = useConfigInject('card', props),
  67. prefixCls = _useConfigInject.prefixCls,
  68. direction = _useConfigInject.direction,
  69. size = _useConfigInject.size;
  70. var getAction = function getAction(actions) {
  71. var actionList = actions.map(function (action, index) {
  72. return isVNode(action) && !isEmptyElement(action) || !isVNode(action) ? _createVNode("li", {
  73. "style": {
  74. width: "".concat(100 / actions.length, "%")
  75. },
  76. "key": "action-".concat(index)
  77. }, [_createVNode("span", null, [action])]) : null;
  78. });
  79. return actionList;
  80. };
  81. var triggerTabChange = function triggerTabChange(key) {
  82. var _props$onTabChange;
  83. (_props$onTabChange = props.onTabChange) === null || _props$onTabChange === void 0 ? void 0 : _props$onTabChange.call(props, key);
  84. };
  85. var isContainGrid = function isContainGrid() {
  86. var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  87. var containGrid;
  88. obj.forEach(function (element) {
  89. if (element && isPlainObject(element.type) && element.type.__ANT_CARD_GRID) {
  90. containGrid = true;
  91. }
  92. });
  93. return containGrid;
  94. };
  95. return function () {
  96. var _slots$tabBarExtraCon, _slots$title, _slots$extra, _slots$actions, _slots$cover, _slots$default, _classString, _tabsProps;
  97. var _props$headStyle = props.headStyle,
  98. headStyle = _props$headStyle === void 0 ? {} : _props$headStyle,
  99. _props$bodyStyle = props.bodyStyle,
  100. bodyStyle = _props$bodyStyle === void 0 ? {} : _props$bodyStyle,
  101. loading = props.loading,
  102. _props$bordered = props.bordered,
  103. bordered = _props$bordered === void 0 ? true : _props$bordered,
  104. type = props.type,
  105. tabList = props.tabList,
  106. hoverable = props.hoverable,
  107. activeTabKey = props.activeTabKey,
  108. defaultActiveTabKey = props.defaultActiveTabKey,
  109. _props$tabBarExtraCon = props.tabBarExtraContent,
  110. tabBarExtraContent = _props$tabBarExtraCon === void 0 ? filterEmptyWithUndefined((_slots$tabBarExtraCon = slots.tabBarExtraContent) === null || _slots$tabBarExtraCon === void 0 ? void 0 : _slots$tabBarExtraCon.call(slots)) : _props$tabBarExtraCon,
  111. _props$title = props.title,
  112. title = _props$title === void 0 ? filterEmptyWithUndefined((_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots)) : _props$title,
  113. _props$extra = props.extra,
  114. extra = _props$extra === void 0 ? filterEmptyWithUndefined((_slots$extra = slots.extra) === null || _slots$extra === void 0 ? void 0 : _slots$extra.call(slots)) : _props$extra,
  115. _props$actions = props.actions,
  116. actions = _props$actions === void 0 ? filterEmptyWithUndefined((_slots$actions = slots.actions) === null || _slots$actions === void 0 ? void 0 : _slots$actions.call(slots)) : _props$actions,
  117. _props$cover = props.cover,
  118. cover = _props$cover === void 0 ? filterEmptyWithUndefined((_slots$cover = slots.cover) === null || _slots$cover === void 0 ? void 0 : _slots$cover.call(slots)) : _props$cover;
  119. var children = flattenChildren((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
  120. var pre = prefixCls.value;
  121. 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);
  122. var loadingBlockStyle = bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? {
  123. padding: '24px'
  124. } : undefined;
  125. var block = _createVNode("div", {
  126. "class": "".concat(pre, "-loading-block")
  127. }, null);
  128. var loadingBlock = _createVNode("div", {
  129. "class": "".concat(pre, "-loading-content"),
  130. "style": loadingBlockStyle
  131. }, [_createVNode(Row, {
  132. "gutter": 8
  133. }, {
  134. default: function _default() {
  135. return [_createVNode(Col, {
  136. "span": 22
  137. }, {
  138. default: function _default() {
  139. return [block];
  140. }
  141. })];
  142. }
  143. }), _createVNode(Row, {
  144. "gutter": 8
  145. }, {
  146. default: function _default() {
  147. return [_createVNode(Col, {
  148. "span": 8
  149. }, {
  150. default: function _default() {
  151. return [block];
  152. }
  153. }), _createVNode(Col, {
  154. "span": 15
  155. }, {
  156. default: function _default() {
  157. return [block];
  158. }
  159. })];
  160. }
  161. }), _createVNode(Row, {
  162. "gutter": 8
  163. }, {
  164. default: function _default() {
  165. return [_createVNode(Col, {
  166. "span": 6
  167. }, {
  168. default: function _default() {
  169. return [block];
  170. }
  171. }), _createVNode(Col, {
  172. "span": 18
  173. }, {
  174. default: function _default() {
  175. return [block];
  176. }
  177. })];
  178. }
  179. }), _createVNode(Row, {
  180. "gutter": 8
  181. }, {
  182. default: function _default() {
  183. return [_createVNode(Col, {
  184. "span": 13
  185. }, {
  186. default: function _default() {
  187. return [block];
  188. }
  189. }), _createVNode(Col, {
  190. "span": 9
  191. }, {
  192. default: function _default() {
  193. return [block];
  194. }
  195. })];
  196. }
  197. }), _createVNode(Row, {
  198. "gutter": 8
  199. }, {
  200. default: function _default() {
  201. return [_createVNode(Col, {
  202. "span": 4
  203. }, {
  204. default: function _default() {
  205. return [block];
  206. }
  207. }), _createVNode(Col, {
  208. "span": 3
  209. }, {
  210. default: function _default() {
  211. return [block];
  212. }
  213. }), _createVNode(Col, {
  214. "span": 16
  215. }, {
  216. default: function _default() {
  217. return [block];
  218. }
  219. })];
  220. }
  221. })]);
  222. var hasActiveTabKey = activeTabKey !== undefined;
  223. var tabsProps = (_tabsProps = {
  224. size: 'large'
  225. }, _defineProperty(_tabsProps, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey), _defineProperty(_tabsProps, "onChange", triggerTabChange), _defineProperty(_tabsProps, "class", "".concat(pre, "-head-tabs")), _tabsProps);
  226. var head;
  227. var tabs = tabList && tabList.length ? _createVNode(Tabs, tabsProps, {
  228. default: function _default() {
  229. return [tabList.map(function (item) {
  230. var temp = item.tab,
  231. itemSlots = item.slots;
  232. var name = itemSlots === null || itemSlots === void 0 ? void 0 : itemSlots.tab;
  233. devWarning(!itemSlots, 'Card', "tabList slots is deprecated, Please use `customTab` instead.");
  234. var tab = temp !== undefined ? temp : slots[name] ? slots[name](item) : null;
  235. tab = renderSlot(slots, 'customTab', item, function () {
  236. return [tab];
  237. });
  238. return _createVNode(TabPane, {
  239. "tab": tab,
  240. "key": item.key,
  241. "disabled": item.disabled
  242. }, null);
  243. })];
  244. },
  245. rightExtra: tabBarExtraContent ? function () {
  246. return tabBarExtraContent;
  247. } : null
  248. }) : null;
  249. if (title || extra || tabs) {
  250. head = _createVNode("div", {
  251. "class": "".concat(pre, "-head"),
  252. "style": headStyle
  253. }, [_createVNode("div", {
  254. "class": "".concat(pre, "-head-wrapper")
  255. }, [title && _createVNode("div", {
  256. "class": "".concat(pre, "-head-title")
  257. }, [title]), extra && _createVNode("div", {
  258. "class": "".concat(pre, "-extra")
  259. }, [extra])]), tabs]);
  260. }
  261. var coverDom = cover ? _createVNode("div", {
  262. "class": "".concat(pre, "-cover")
  263. }, [cover]) : null;
  264. var body = _createVNode("div", {
  265. "class": "".concat(pre, "-body"),
  266. "style": bodyStyle
  267. }, [loading ? loadingBlock : children]);
  268. var actionDom = actions && actions.length ? _createVNode("ul", {
  269. "class": "".concat(pre, "-actions")
  270. }, [getAction(actions)]) : null;
  271. return _createVNode("div", {
  272. "class": classString,
  273. "ref": "cardContainerRef"
  274. }, [head, coverDom, children && children.length ? body : null, actionDom]);
  275. };
  276. }
  277. });
  278. export default Card;