tabs.js 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  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 _extends2 = require('babel-runtime/helpers/extends');
  8. var _extends3 = _interopRequireDefault(_extends2);
  9. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  10. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  11. var _typeof2 = require('babel-runtime/helpers/typeof');
  12. var _typeof3 = _interopRequireDefault(_typeof2);
  13. var _icon = require('../icon');
  14. var _icon2 = _interopRequireDefault(_icon);
  15. var _src = require('../vc-tabs/src');
  16. var _src2 = _interopRequireDefault(_src);
  17. var _TabContent = require('../vc-tabs/src/TabContent');
  18. var _TabContent2 = _interopRequireDefault(_TabContent);
  19. var _styleChecker = require('../_util/styleChecker');
  20. var _vueTypes = require('../_util/vue-types');
  21. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  22. var _propsUtil = require('../_util/props-util');
  23. var _vnode = require('../_util/vnode');
  24. var _isValid = require('../_util/isValid');
  25. var _isValid2 = _interopRequireDefault(_isValid);
  26. var _configConsumerProps = require('../config-provider/configConsumerProps');
  27. var _TabBar = require('./TabBar');
  28. var _TabBar2 = _interopRequireDefault(_TabBar);
  29. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  30. exports['default'] = {
  31. TabPane: _src.TabPane,
  32. name: 'ATabs',
  33. model: {
  34. prop: 'activeKey',
  35. event: 'change'
  36. },
  37. props: {
  38. prefixCls: _vueTypes2['default'].string,
  39. activeKey: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
  40. defaultActiveKey: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
  41. hideAdd: _vueTypes2['default'].bool.def(false),
  42. tabBarStyle: _vueTypes2['default'].object,
  43. tabBarExtraContent: _vueTypes2['default'].any,
  44. destroyInactiveTabPane: _vueTypes2['default'].bool.def(false),
  45. type: _vueTypes2['default'].oneOf(['line', 'card', 'editable-card']),
  46. tabPosition: _vueTypes2['default'].oneOf(['top', 'right', 'bottom', 'left']).def('top'),
  47. size: _vueTypes2['default'].oneOf(['default', 'small', 'large']),
  48. animated: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].object]),
  49. tabBarGutter: _vueTypes2['default'].number,
  50. renderTabBar: _vueTypes2['default'].func
  51. },
  52. inject: {
  53. configProvider: { 'default': function _default() {
  54. return _configConsumerProps.ConfigConsumerProps;
  55. } }
  56. },
  57. mounted: function mounted() {
  58. var NO_FLEX = ' no-flex';
  59. var tabNode = this.$el;
  60. if (tabNode && !_styleChecker.isFlexSupported && tabNode.className.indexOf(NO_FLEX) === -1) {
  61. tabNode.className += NO_FLEX;
  62. }
  63. },
  64. methods: {
  65. removeTab: function removeTab(targetKey, e) {
  66. e.stopPropagation();
  67. if ((0, _isValid2['default'])(targetKey)) {
  68. this.$emit('edit', targetKey, 'remove');
  69. }
  70. },
  71. handleChange: function handleChange(activeKey) {
  72. this.$emit('change', activeKey);
  73. },
  74. createNewTab: function createNewTab(targetKey) {
  75. this.$emit('edit', targetKey, 'add');
  76. },
  77. onTabClick: function onTabClick(val) {
  78. this.$emit('tabClick', val);
  79. },
  80. onPrevClick: function onPrevClick(val) {
  81. this.$emit('prevClick', val);
  82. },
  83. onNextClick: function onNextClick(val) {
  84. this.$emit('nextClick', val);
  85. }
  86. },
  87. render: function render() {
  88. var _cls,
  89. _this = this,
  90. _contentCls;
  91. var h = arguments[0];
  92. var props = (0, _propsUtil.getOptionProps)(this);
  93. var customizePrefixCls = props.prefixCls,
  94. size = props.size,
  95. _props$type = props.type,
  96. type = _props$type === undefined ? 'line' : _props$type,
  97. tabPosition = props.tabPosition,
  98. _props$animated = props.animated,
  99. animated = _props$animated === undefined ? true : _props$animated,
  100. hideAdd = props.hideAdd,
  101. renderTabBar = props.renderTabBar;
  102. var getPrefixCls = this.configProvider.getPrefixCls;
  103. var prefixCls = getPrefixCls('tabs', customizePrefixCls);
  104. var children = (0, _propsUtil.filterEmpty)(this.$slots['default']);
  105. var tabBarExtraContent = (0, _propsUtil.getComponentFromProp)(this, 'tabBarExtraContent');
  106. var tabPaneAnimated = (typeof animated === 'undefined' ? 'undefined' : (0, _typeof3['default'])(animated)) === 'object' ? animated.tabPane : animated;
  107. // card tabs should not have animation
  108. if (type !== 'line') {
  109. tabPaneAnimated = 'animated' in props ? tabPaneAnimated : false;
  110. }
  111. var cls = (_cls = {}, (0, _defineProperty3['default'])(_cls, prefixCls + '-vertical', tabPosition === 'left' || tabPosition === 'right'), (0, _defineProperty3['default'])(_cls, prefixCls + '-' + size, !!size), (0, _defineProperty3['default'])(_cls, prefixCls + '-card', type.indexOf('card') >= 0), (0, _defineProperty3['default'])(_cls, prefixCls + '-' + type, true), (0, _defineProperty3['default'])(_cls, prefixCls + '-no-animation', !tabPaneAnimated), _cls);
  112. // only card type tabs can be added and closed
  113. var childrenWithClose = [];
  114. if (type === 'editable-card') {
  115. childrenWithClose = [];
  116. children.forEach(function (child, index) {
  117. var props = (0, _propsUtil.getOptionProps)(child);
  118. var closable = props.closable;
  119. closable = typeof closable === 'undefined' ? true : closable;
  120. var closeIcon = closable ? h(_icon2['default'], {
  121. attrs: {
  122. type: 'close'
  123. },
  124. 'class': prefixCls + '-close-x',
  125. on: {
  126. 'click': function click(e) {
  127. return _this.removeTab(child.key, e);
  128. }
  129. }
  130. }) : null;
  131. childrenWithClose.push((0, _vnode.cloneElement)(child, {
  132. props: {
  133. tab: h(
  134. 'div',
  135. { 'class': closable ? undefined : prefixCls + '-tab-unclosable' },
  136. [(0, _propsUtil.getComponentFromProp)(child, 'tab'), closeIcon]
  137. )
  138. },
  139. key: child.key || index
  140. }));
  141. });
  142. // Add new tab handler
  143. if (!hideAdd) {
  144. tabBarExtraContent = h('span', [h(_icon2['default'], {
  145. attrs: { type: 'plus' },
  146. 'class': prefixCls + '-new-tab', on: {
  147. 'click': this.createNewTab
  148. }
  149. }), tabBarExtraContent]);
  150. }
  151. }
  152. tabBarExtraContent = tabBarExtraContent ? h(
  153. 'div',
  154. { 'class': prefixCls + '-extra-content' },
  155. [tabBarExtraContent]
  156. ) : null;
  157. var renderTabBarSlot = renderTabBar || this.$scopedSlots.renderTabBar;
  158. var listeners = (0, _propsUtil.getListeners)(this);
  159. var tabBarProps = {
  160. props: (0, _extends3['default'])({}, this.$props, {
  161. prefixCls: prefixCls,
  162. tabBarExtraContent: tabBarExtraContent,
  163. renderTabBar: renderTabBarSlot
  164. }),
  165. on: listeners
  166. };
  167. var contentCls = (_contentCls = {}, (0, _defineProperty3['default'])(_contentCls, prefixCls + '-' + tabPosition + '-content', true), (0, _defineProperty3['default'])(_contentCls, prefixCls + '-card-content', type.indexOf('card') >= 0), _contentCls);
  168. var tabsProps = {
  169. props: (0, _extends3['default'])({}, (0, _propsUtil.getOptionProps)(this), {
  170. prefixCls: prefixCls,
  171. tabBarPosition: tabPosition,
  172. // https://github.com/vueComponent/ant-design-vue/issues/2030
  173. // 如仅传递 tabBarProps 会导致,第二次执行 renderTabBar 时,丢失 on 属性,
  174. // 添加key之后,会在babel jsx 插件中做一次merge,最终TabBar接收的是一个新的对象,而不是 tabBarProps
  175. renderTabBar: function renderTabBar() {
  176. return h(_TabBar2['default'], (0, _babelHelperVueJsxMergeProps2['default'])([{ key: 'tabBar' }, tabBarProps]));
  177. },
  178. renderTabContent: function renderTabContent() {
  179. return h(_TabContent2['default'], { 'class': contentCls, attrs: { animated: tabPaneAnimated, animatedWithMargin: true }
  180. });
  181. },
  182. children: childrenWithClose.length > 0 ? childrenWithClose : children,
  183. __propsSymbol__: Symbol()
  184. }),
  185. on: (0, _extends3['default'])({}, listeners, {
  186. change: this.handleChange
  187. }),
  188. 'class': cls
  189. };
  190. return h(_src2['default'], tabsProps);
  191. }
  192. };