Card.js 12 KB

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