Card.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
  6. var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
  7. var _extends3 = require('babel-runtime/helpers/extends');
  8. var _extends4 = _interopRequireDefault(_extends3);
  9. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  10. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  11. var _omit = require('omit.js');
  12. var _omit2 = _interopRequireDefault(_omit);
  13. var _tabs = require('../tabs');
  14. var _tabs2 = _interopRequireDefault(_tabs);
  15. var _row = require('../row');
  16. var _row2 = _interopRequireDefault(_row);
  17. var _col = require('../col');
  18. var _col2 = _interopRequireDefault(_col);
  19. var _vueTypes = require('../_util/vue-types');
  20. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  21. var _propsUtil = require('../_util/props-util');
  22. var _BaseMixin = require('../_util/BaseMixin');
  23. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  24. var _configConsumerProps = require('../config-provider/configConsumerProps');
  25. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  26. var TabPane = _tabs2['default'].TabPane;
  27. exports['default'] = {
  28. name: 'ACard',
  29. mixins: [_BaseMixin2['default']],
  30. props: {
  31. prefixCls: _vueTypes2['default'].string,
  32. title: _vueTypes2['default'].any,
  33. extra: _vueTypes2['default'].any,
  34. bordered: _vueTypes2['default'].bool.def(true),
  35. bodyStyle: _vueTypes2['default'].object,
  36. headStyle: _vueTypes2['default'].object,
  37. loading: _vueTypes2['default'].bool.def(false),
  38. hoverable: _vueTypes2['default'].bool.def(false),
  39. type: _vueTypes2['default'].string,
  40. size: _vueTypes2['default'].oneOf(['default', 'small']),
  41. actions: _vueTypes2['default'].any,
  42. tabList: _vueTypes2['default'].array,
  43. tabProps: _vueTypes2['default'].object,
  44. tabBarExtraContent: _vueTypes2['default'].any,
  45. activeTabKey: _vueTypes2['default'].string,
  46. defaultActiveTabKey: _vueTypes2['default'].string
  47. },
  48. inject: {
  49. configProvider: { 'default': function _default() {
  50. return _configConsumerProps.ConfigConsumerProps;
  51. } }
  52. },
  53. data: function data() {
  54. return {
  55. widerPadding: false
  56. };
  57. },
  58. methods: {
  59. getAction: function getAction(actions) {
  60. var h = this.$createElement;
  61. var actionList = actions.map(function (action, index) {
  62. return h(
  63. 'li',
  64. { style: { width: 100 / actions.length + '%' }, key: 'action-' + index },
  65. [h('span', [action])]
  66. );
  67. });
  68. return actionList;
  69. },
  70. onTabChange: function onTabChange(key) {
  71. this.$emit('tabChange', key);
  72. },
  73. isContainGrid: function isContainGrid() {
  74. var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  75. var containGrid = void 0;
  76. obj.forEach(function (element) {
  77. if (element && (0, _propsUtil.getSlotOptions)(element).__ANT_CARD_GRID) {
  78. containGrid = true;
  79. }
  80. });
  81. return containGrid;
  82. }
  83. },
  84. render: function render() {
  85. var _classString, _extends2;
  86. var h = arguments[0];
  87. var _$props = this.$props,
  88. customizePrefixCls = _$props.prefixCls,
  89. _$props$headStyle = _$props.headStyle,
  90. headStyle = _$props$headStyle === undefined ? {} : _$props$headStyle,
  91. _$props$bodyStyle = _$props.bodyStyle,
  92. bodyStyle = _$props$bodyStyle === undefined ? {} : _$props$bodyStyle,
  93. loading = _$props.loading,
  94. _$props$bordered = _$props.bordered,
  95. bordered = _$props$bordered === undefined ? true : _$props$bordered,
  96. _$props$size = _$props.size,
  97. size = _$props$size === undefined ? 'default' : _$props$size,
  98. type = _$props.type,
  99. tabList = _$props.tabList,
  100. _$props$tabProps = _$props.tabProps,
  101. tabProps = _$props$tabProps === undefined ? {} : _$props$tabProps,
  102. hoverable = _$props.hoverable,
  103. activeTabKey = _$props.activeTabKey,
  104. defaultActiveTabKey = _$props.defaultActiveTabKey;
  105. var getPrefixCls = this.configProvider.getPrefixCls;
  106. var prefixCls = getPrefixCls('card', customizePrefixCls);
  107. var $slots = this.$slots,
  108. $scopedSlots = this.$scopedSlots;
  109. var tabBarExtraContent = (0, _propsUtil.getComponentFromProp)(this, 'tabBarExtraContent');
  110. var classString = (_classString = {}, (0, _defineProperty3['default'])(_classString, '' + prefixCls, true), (0, _defineProperty3['default'])(_classString, prefixCls + '-loading', loading), (0, _defineProperty3['default'])(_classString, prefixCls + '-bordered', bordered), (0, _defineProperty3['default'])(_classString, prefixCls + '-hoverable', !!hoverable), (0, _defineProperty3['default'])(_classString, prefixCls + '-contain-grid', this.isContainGrid($slots['default'])), (0, _defineProperty3['default'])(_classString, prefixCls + '-contain-tabs', tabList && tabList.length), (0, _defineProperty3['default'])(_classString, prefixCls + '-' + size, size !== 'default'), (0, _defineProperty3['default'])(_classString, prefixCls + '-type-' + type, !!type), _classString);
  111. var loadingBlockStyle = bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
  112. var loadingBlock = h(
  113. 'div',
  114. { 'class': prefixCls + '-loading-content', style: loadingBlockStyle },
  115. [h(
  116. _row2['default'],
  117. {
  118. attrs: { gutter: 8 }
  119. },
  120. [h(
  121. _col2['default'],
  122. {
  123. attrs: { span: 22 }
  124. },
  125. [h('div', { 'class': prefixCls + '-loading-block' })]
  126. )]
  127. ), h(
  128. _row2['default'],
  129. {
  130. attrs: { gutter: 8 }
  131. },
  132. [h(
  133. _col2['default'],
  134. {
  135. attrs: { span: 8 }
  136. },
  137. [h('div', { 'class': prefixCls + '-loading-block' })]
  138. ), h(
  139. _col2['default'],
  140. {
  141. attrs: { span: 15 }
  142. },
  143. [h('div', { 'class': prefixCls + '-loading-block' })]
  144. )]
  145. ), h(
  146. _row2['default'],
  147. {
  148. attrs: { gutter: 8 }
  149. },
  150. [h(
  151. _col2['default'],
  152. {
  153. attrs: { span: 6 }
  154. },
  155. [h('div', { 'class': prefixCls + '-loading-block' })]
  156. ), h(
  157. _col2['default'],
  158. {
  159. attrs: { span: 18 }
  160. },
  161. [h('div', { 'class': prefixCls + '-loading-block' })]
  162. )]
  163. ), h(
  164. _row2['default'],
  165. {
  166. attrs: { gutter: 8 }
  167. },
  168. [h(
  169. _col2['default'],
  170. {
  171. attrs: { span: 13 }
  172. },
  173. [h('div', { 'class': prefixCls + '-loading-block' })]
  174. ), h(
  175. _col2['default'],
  176. {
  177. attrs: { span: 9 }
  178. },
  179. [h('div', { 'class': prefixCls + '-loading-block' })]
  180. )]
  181. ), h(
  182. _row2['default'],
  183. {
  184. attrs: { gutter: 8 }
  185. },
  186. [h(
  187. _col2['default'],
  188. {
  189. attrs: { span: 4 }
  190. },
  191. [h('div', { 'class': prefixCls + '-loading-block' })]
  192. ), h(
  193. _col2['default'],
  194. {
  195. attrs: { span: 3 }
  196. },
  197. [h('div', { 'class': prefixCls + '-loading-block' })]
  198. ), h(
  199. _col2['default'],
  200. {
  201. attrs: { span: 16 }
  202. },
  203. [h('div', { 'class': prefixCls + '-loading-block' })]
  204. )]
  205. )]
  206. );
  207. var hasActiveTabKey = activeTabKey !== undefined;
  208. var tabsProps = {
  209. props: (0, _extends4['default'])({
  210. size: 'large'
  211. }, tabProps, (_extends2 = {}, (0, _defineProperty3['default'])(_extends2, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey), (0, _defineProperty3['default'])(_extends2, 'tabBarExtraContent', tabBarExtraContent), _extends2)),
  212. on: {
  213. change: this.onTabChange
  214. },
  215. 'class': prefixCls + '-head-tabs'
  216. };
  217. var head = void 0;
  218. var tabs = tabList && tabList.length ? h(
  219. _tabs2['default'],
  220. tabsProps,
  221. [tabList.map(function (item) {
  222. var temp = item.tab,
  223. _item$scopedSlots = item.scopedSlots,
  224. scopedSlots = _item$scopedSlots === undefined ? {} : _item$scopedSlots;
  225. var name = scopedSlots.tab;
  226. var tab = temp !== undefined ? temp : $scopedSlots[name] ? $scopedSlots[name](item) : null;
  227. return h(TabPane, {
  228. attrs: { tab: tab, disabled: item.disabled },
  229. key: item.key });
  230. })]
  231. ) : null;
  232. var titleDom = (0, _propsUtil.getComponentFromProp)(this, 'title');
  233. var extraDom = (0, _propsUtil.getComponentFromProp)(this, 'extra');
  234. if (titleDom || extraDom || tabs) {
  235. head = h(
  236. 'div',
  237. { 'class': prefixCls + '-head', style: headStyle },
  238. [h(
  239. 'div',
  240. { 'class': prefixCls + '-head-wrapper' },
  241. [titleDom && h(
  242. 'div',
  243. { 'class': prefixCls + '-head-title' },
  244. [titleDom]
  245. ), extraDom && h(
  246. 'div',
  247. { 'class': prefixCls + '-extra' },
  248. [extraDom]
  249. )]
  250. ), tabs]
  251. );
  252. }
  253. var children = $slots['default'];
  254. var cover = (0, _propsUtil.getComponentFromProp)(this, 'cover');
  255. var coverDom = cover ? h(
  256. 'div',
  257. { 'class': prefixCls + '-cover' },
  258. [cover]
  259. ) : null;
  260. var body = h(
  261. 'div',
  262. { 'class': prefixCls + '-body', style: bodyStyle },
  263. [loading ? loadingBlock : children]
  264. );
  265. var actions = (0, _propsUtil.filterEmpty)(this.$slots.actions);
  266. var actionDom = actions && actions.length ? h(
  267. 'ul',
  268. { 'class': prefixCls + '-actions' },
  269. [this.getAction(actions)]
  270. ) : null;
  271. return h(
  272. 'div',
  273. (0, _babelHelperVueJsxMergeProps2['default'])([{
  274. 'class': classString,
  275. ref: 'cardContainerRef'
  276. }, { on: (0, _omit2['default'])((0, _propsUtil.getListeners)(this), ['tabChange', 'tab-change']) }]),
  277. [head, coverDom, children ? body : null, actionDom]
  278. );
  279. }
  280. };