123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318 |
- 'use strict';
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
- var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
- var _extends3 = require('babel-runtime/helpers/extends');
- var _extends4 = _interopRequireDefault(_extends3);
- var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
- var _defineProperty3 = _interopRequireDefault(_defineProperty2);
- var _omit = require('omit.js');
- var _omit2 = _interopRequireDefault(_omit);
- var _tabs = require('../tabs');
- var _tabs2 = _interopRequireDefault(_tabs);
- var _row = require('../row');
- var _row2 = _interopRequireDefault(_row);
- var _col = require('../col');
- var _col2 = _interopRequireDefault(_col);
- var _vueTypes = require('../_util/vue-types');
- var _vueTypes2 = _interopRequireDefault(_vueTypes);
- var _propsUtil = require('../_util/props-util');
- var _BaseMixin = require('../_util/BaseMixin');
- var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
- var _configConsumerProps = require('../config-provider/configConsumerProps');
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
- var TabPane = _tabs2['default'].TabPane;
- exports['default'] = {
- name: 'ACard',
- mixins: [_BaseMixin2['default']],
- props: {
- prefixCls: _vueTypes2['default'].string,
- title: _vueTypes2['default'].any,
- extra: _vueTypes2['default'].any,
- bordered: _vueTypes2['default'].bool.def(true),
- bodyStyle: _vueTypes2['default'].object,
- headStyle: _vueTypes2['default'].object,
- loading: _vueTypes2['default'].bool.def(false),
- hoverable: _vueTypes2['default'].bool.def(false),
- type: _vueTypes2['default'].string,
- size: _vueTypes2['default'].oneOf(['default', 'small']),
- actions: _vueTypes2['default'].any,
- tabList: _vueTypes2['default'].array,
- tabProps: _vueTypes2['default'].object,
- tabBarExtraContent: _vueTypes2['default'].any,
- activeTabKey: _vueTypes2['default'].string,
- defaultActiveTabKey: _vueTypes2['default'].string
- },
- inject: {
- configProvider: { 'default': function _default() {
- return _configConsumerProps.ConfigConsumerProps;
- } }
- },
- data: function data() {
- return {
- widerPadding: false
- };
- },
- methods: {
- getAction: function getAction(actions) {
- var h = this.$createElement;
- var actionList = actions.map(function (action, index) {
- return h(
- 'li',
- { style: { width: 100 / actions.length + '%' }, key: 'action-' + index },
- [h('span', [action])]
- );
- });
- return actionList;
- },
- onTabChange: function onTabChange(key) {
- this.$emit('tabChange', key);
- },
- isContainGrid: function isContainGrid() {
- var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
- var containGrid = void 0;
- obj.forEach(function (element) {
- if (element && (0, _propsUtil.getSlotOptions)(element).__ANT_CARD_GRID) {
- containGrid = true;
- }
- });
- return containGrid;
- }
- },
- render: function render() {
- var _classString, _extends2;
- var h = arguments[0];
- var _$props = this.$props,
- customizePrefixCls = _$props.prefixCls,
- _$props$headStyle = _$props.headStyle,
- headStyle = _$props$headStyle === undefined ? {} : _$props$headStyle,
- _$props$bodyStyle = _$props.bodyStyle,
- bodyStyle = _$props$bodyStyle === undefined ? {} : _$props$bodyStyle,
- loading = _$props.loading,
- _$props$bordered = _$props.bordered,
- bordered = _$props$bordered === undefined ? true : _$props$bordered,
- _$props$size = _$props.size,
- size = _$props$size === undefined ? 'default' : _$props$size,
- type = _$props.type,
- tabList = _$props.tabList,
- _$props$tabProps = _$props.tabProps,
- tabProps = _$props$tabProps === undefined ? {} : _$props$tabProps,
- hoverable = _$props.hoverable,
- activeTabKey = _$props.activeTabKey,
- defaultActiveTabKey = _$props.defaultActiveTabKey;
- var getPrefixCls = this.configProvider.getPrefixCls;
- var prefixCls = getPrefixCls('card', customizePrefixCls);
- var $slots = this.$slots,
- $scopedSlots = this.$scopedSlots;
- var tabBarExtraContent = (0, _propsUtil.getComponentFromProp)(this, 'tabBarExtraContent');
- 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);
- var loadingBlockStyle = bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
- var loadingBlock = h(
- 'div',
- { 'class': prefixCls + '-loading-content', style: loadingBlockStyle },
- [h(
- _row2['default'],
- {
- attrs: { gutter: 8 }
- },
- [h(
- _col2['default'],
- {
- attrs: { span: 22 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- )]
- ), h(
- _row2['default'],
- {
- attrs: { gutter: 8 }
- },
- [h(
- _col2['default'],
- {
- attrs: { span: 8 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- ), h(
- _col2['default'],
- {
- attrs: { span: 15 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- )]
- ), h(
- _row2['default'],
- {
- attrs: { gutter: 8 }
- },
- [h(
- _col2['default'],
- {
- attrs: { span: 6 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- ), h(
- _col2['default'],
- {
- attrs: { span: 18 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- )]
- ), h(
- _row2['default'],
- {
- attrs: { gutter: 8 }
- },
- [h(
- _col2['default'],
- {
- attrs: { span: 13 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- ), h(
- _col2['default'],
- {
- attrs: { span: 9 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- )]
- ), h(
- _row2['default'],
- {
- attrs: { gutter: 8 }
- },
- [h(
- _col2['default'],
- {
- attrs: { span: 4 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- ), h(
- _col2['default'],
- {
- attrs: { span: 3 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- ), h(
- _col2['default'],
- {
- attrs: { span: 16 }
- },
- [h('div', { 'class': prefixCls + '-loading-block' })]
- )]
- )]
- );
- var hasActiveTabKey = activeTabKey !== undefined;
- var tabsProps = {
- props: (0, _extends4['default'])({
- size: 'large'
- }, tabProps, (_extends2 = {}, (0, _defineProperty3['default'])(_extends2, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey), (0, _defineProperty3['default'])(_extends2, 'tabBarExtraContent', tabBarExtraContent), _extends2)),
- on: {
- change: this.onTabChange
- },
- 'class': prefixCls + '-head-tabs'
- };
- var head = void 0;
- var tabs = tabList && tabList.length ? h(
- _tabs2['default'],
- tabsProps,
- [tabList.map(function (item) {
- var temp = item.tab,
- _item$scopedSlots = item.scopedSlots,
- scopedSlots = _item$scopedSlots === undefined ? {} : _item$scopedSlots;
- var name = scopedSlots.tab;
- var tab = temp !== undefined ? temp : $scopedSlots[name] ? $scopedSlots[name](item) : null;
- return h(TabPane, {
- attrs: { tab: tab, disabled: item.disabled },
- key: item.key });
- })]
- ) : null;
- var titleDom = (0, _propsUtil.getComponentFromProp)(this, 'title');
- var extraDom = (0, _propsUtil.getComponentFromProp)(this, 'extra');
- if (titleDom || extraDom || tabs) {
- head = h(
- 'div',
- { 'class': prefixCls + '-head', style: headStyle },
- [h(
- 'div',
- { 'class': prefixCls + '-head-wrapper' },
- [titleDom && h(
- 'div',
- { 'class': prefixCls + '-head-title' },
- [titleDom]
- ), extraDom && h(
- 'div',
- { 'class': prefixCls + '-extra' },
- [extraDom]
- )]
- ), tabs]
- );
- }
- var children = $slots['default'];
- var cover = (0, _propsUtil.getComponentFromProp)(this, 'cover');
- var coverDom = cover ? h(
- 'div',
- { 'class': prefixCls + '-cover' },
- [cover]
- ) : null;
- var body = h(
- 'div',
- { 'class': prefixCls + '-body', style: bodyStyle },
- [loading ? loadingBlock : children]
- );
- var actions = (0, _propsUtil.filterEmpty)(this.$slots.actions);
- var actionDom = actions && actions.length ? h(
- 'ul',
- { 'class': prefixCls + '-actions' },
- [this.getAction(actions)]
- ) : null;
- return h(
- 'div',
- (0, _babelHelperVueJsxMergeProps2['default'])([{
- 'class': classString,
- ref: 'cardContainerRef'
- }, { on: (0, _omit2['default'])((0, _propsUtil.getListeners)(this), ['tabChange', 'tab-change']) }]),
- [head, coverDom, children ? body : null, actionDom]
- );
- }
- };
|