NuclearDispersionSystem/ant-design-vue-jeecg/node_modules/ant-design-vue/lib/tabs/tabs.js
2023-09-14 14:47:11 +08:00

228 lines
8.3 KiB
Java
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _typeof2 = require('babel-runtime/helpers/typeof');
var _typeof3 = _interopRequireDefault(_typeof2);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
var _src = require('../vc-tabs/src');
var _src2 = _interopRequireDefault(_src);
var _TabContent = require('../vc-tabs/src/TabContent');
var _TabContent2 = _interopRequireDefault(_TabContent);
var _styleChecker = require('../_util/styleChecker');
var _vueTypes = require('../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _propsUtil = require('../_util/props-util');
var _vnode = require('../_util/vnode');
var _isValid = require('../_util/isValid');
var _isValid2 = _interopRequireDefault(_isValid);
var _configConsumerProps = require('../config-provider/configConsumerProps');
var _TabBar = require('./TabBar');
var _TabBar2 = _interopRequireDefault(_TabBar);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
TabPane: _src.TabPane,
name: 'ATabs',
model: {
prop: 'activeKey',
event: 'change'
},
props: {
prefixCls: _vueTypes2['default'].string,
activeKey: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
defaultActiveKey: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
hideAdd: _vueTypes2['default'].bool.def(false),
tabBarStyle: _vueTypes2['default'].object,
tabBarExtraContent: _vueTypes2['default'].any,
destroyInactiveTabPane: _vueTypes2['default'].bool.def(false),
type: _vueTypes2['default'].oneOf(['line', 'card', 'editable-card']),
tabPosition: _vueTypes2['default'].oneOf(['top', 'right', 'bottom', 'left']).def('top'),
size: _vueTypes2['default'].oneOf(['default', 'small', 'large']),
animated: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].object]),
tabBarGutter: _vueTypes2['default'].number,
renderTabBar: _vueTypes2['default'].func
},
inject: {
configProvider: { 'default': function _default() {
return _configConsumerProps.ConfigConsumerProps;
} }
},
mounted: function mounted() {
var NO_FLEX = ' no-flex';
var tabNode = this.$el;
if (tabNode && !_styleChecker.isFlexSupported && tabNode.className.indexOf(NO_FLEX) === -1) {
tabNode.className += NO_FLEX;
}
},
methods: {
removeTab: function removeTab(targetKey, e) {
e.stopPropagation();
if ((0, _isValid2['default'])(targetKey)) {
this.$emit('edit', targetKey, 'remove');
}
},
handleChange: function handleChange(activeKey) {
this.$emit('change', activeKey);
},
createNewTab: function createNewTab(targetKey) {
this.$emit('edit', targetKey, 'add');
},
onTabClick: function onTabClick(val) {
this.$emit('tabClick', val);
},
onPrevClick: function onPrevClick(val) {
this.$emit('prevClick', val);
},
onNextClick: function onNextClick(val) {
this.$emit('nextClick', val);
}
},
render: function render() {
var _cls,
_this = this,
_contentCls;
var h = arguments[0];
var props = (0, _propsUtil.getOptionProps)(this);
var customizePrefixCls = props.prefixCls,
size = props.size,
_props$type = props.type,
type = _props$type === undefined ? 'line' : _props$type,
tabPosition = props.tabPosition,
_props$animated = props.animated,
animated = _props$animated === undefined ? true : _props$animated,
hideAdd = props.hideAdd,
renderTabBar = props.renderTabBar;
var getPrefixCls = this.configProvider.getPrefixCls;
var prefixCls = getPrefixCls('tabs', customizePrefixCls);
var children = (0, _propsUtil.filterEmpty)(this.$slots['default']);
var tabBarExtraContent = (0, _propsUtil.getComponentFromProp)(this, 'tabBarExtraContent');
var tabPaneAnimated = (typeof animated === 'undefined' ? 'undefined' : (0, _typeof3['default'])(animated)) === 'object' ? animated.tabPane : animated;
// card tabs should not have animation
if (type !== 'line') {
tabPaneAnimated = 'animated' in props ? tabPaneAnimated : false;
}
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);
// only card type tabs can be added and closed
var childrenWithClose = [];
if (type === 'editable-card') {
childrenWithClose = [];
children.forEach(function (child, index) {
var props = (0, _propsUtil.getOptionProps)(child);
var closable = props.closable;
closable = typeof closable === 'undefined' ? true : closable;
var closeIcon = closable ? h(_icon2['default'], {
attrs: {
type: 'close'
},
'class': prefixCls + '-close-x',
on: {
'click': function click(e) {
return _this.removeTab(child.key, e);
}
}
}) : null;
childrenWithClose.push((0, _vnode.cloneElement)(child, {
props: {
tab: h(
'div',
{ 'class': closable ? undefined : prefixCls + '-tab-unclosable' },
[(0, _propsUtil.getComponentFromProp)(child, 'tab'), closeIcon]
)
},
key: child.key || index
}));
});
// Add new tab handler
if (!hideAdd) {
tabBarExtraContent = h('span', [h(_icon2['default'], {
attrs: { type: 'plus' },
'class': prefixCls + '-new-tab', on: {
'click': this.createNewTab
}
}), tabBarExtraContent]);
}
}
tabBarExtraContent = tabBarExtraContent ? h(
'div',
{ 'class': prefixCls + '-extra-content' },
[tabBarExtraContent]
) : null;
var renderTabBarSlot = renderTabBar || this.$scopedSlots.renderTabBar;
var listeners = (0, _propsUtil.getListeners)(this);
var tabBarProps = {
props: (0, _extends3['default'])({}, this.$props, {
prefixCls: prefixCls,
tabBarExtraContent: tabBarExtraContent,
renderTabBar: renderTabBarSlot
}),
on: listeners
};
var contentCls = (_contentCls = {}, (0, _defineProperty3['default'])(_contentCls, prefixCls + '-' + tabPosition + '-content', true), (0, _defineProperty3['default'])(_contentCls, prefixCls + '-card-content', type.indexOf('card') >= 0), _contentCls);
var tabsProps = {
props: (0, _extends3['default'])({}, (0, _propsUtil.getOptionProps)(this), {
prefixCls: prefixCls,
tabBarPosition: tabPosition,
// https://github.com/vueComponent/ant-design-vue/issues/2030
// 如仅传递 tabBarProps 会导致,第二次执行 renderTabBar 时,丢失 on 属性,
// 添加key之后会在babel jsx 插件中做一次merge最终TabBar接收的是一个新的对象而不是 tabBarProps
renderTabBar: function renderTabBar() {
return h(_TabBar2['default'], (0, _babelHelperVueJsxMergeProps2['default'])([{ key: 'tabBar' }, tabBarProps]));
},
renderTabContent: function renderTabContent() {
return h(_TabContent2['default'], { 'class': contentCls, attrs: { animated: tabPaneAnimated, animatedWithMargin: true }
});
},
children: childrenWithClose.length > 0 ? childrenWithClose : children,
__propsSymbol__: Symbol()
}),
on: (0, _extends3['default'])({}, listeners, {
change: this.handleChange
}),
'class': cls
};
return h(_src2['default'], tabsProps);
}
};