fix: tabs

antdv-demo

@@ -1 +1 @@
-Subproject commit 7e7899bc49e5e5ebe4716a5ba12215ecfe0d3d22
+Subproject commit 19713260a1fcd951d75129e542f40c8e7c1bac35

breakChange-2.x.md

@@ -63,3 +63,9 @@ v-model -> v-model:value
 ## Switch
 
 v-model -> v-model:checked
+
+## tabs
+
+v-model -> v-model:activeKey
+
+renderTabBar({props, on, style, class}, DefaultTabBar) -> {DefaultTabBar, ...props} 多参数改成单参数并且扁平化处理

components/_util/props-util.js

@@ -141,7 +141,7 @@ const getComponent = (instance, prop, options = instance, execute = true) => {
     const temp = instance.props && instance.props[prop];
     if (temp !== undefined) {
       return typeof temp === 'function' && execute ? temp(options) : temp;
-    } else if (instance.children && instance.children[name]) {
+    } else if (instance.children && instance.children[prop]) {
       let com = instance.children[prop];
       com = execute && com ? com(options) : com;
       return Array.isArray(com) && com.length === 1 ? com[0] : com;

components/tabs/TabBar.jsx

@@ -3,7 +3,6 @@ import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import ScrollableInkTabBar from '../vc-tabs/src/ScrollableInkTabBar';
-import { cloneElement } from '../_util/vnode';
 import PropTypes from '../_util/vue-types';
 
 const TabBar = {
@@ -74,12 +73,8 @@ const TabBar = {
       class: cls,
     };
 
-    let RenderTabBar;
-
     if (renderTabBar) {
-      RenderTabBar = renderTabBar(renderProps, ScrollableInkTabBar);
-      // https://github.com/vueComponent/ant-design-vue/issues/2157
-      return cloneElement(RenderTabBar, renderProps);
+      return renderTabBar({ ...renderProps, DefaultTabBar: ScrollableInkTabBar });
     } else {
       return <ScrollableInkTabBar {...renderProps} />;
     }

components/tabs/tabs.jsx

@@ -21,10 +21,7 @@ import TabBar from './TabBar';
 export default {
   TabPane,
   name: 'ATabs',
-  model: {
-    prop: 'activeKey',
-    event: 'change',
-  },
+  inheritAttrs: false,
   props: {
     prefixCls: PropTypes.string,
     activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -88,8 +85,8 @@ export default {
       hideAdd,
       renderTabBar,
     } = props;
-    const { class: className, style, ...restProps } = this.$attrs;
-    const getPrefixCls = this.configProvider().getPrefixCls;
+    const { class: className, ...restProps } = this.$attrs;
+    const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('tabs', customizePrefixCls);
     const children = filterEmpty(getSlot(this));
 
@@ -151,7 +148,7 @@ export default {
 
     const renderTabBarSlot = renderTabBar || this.$slots.renderTabBar;
     const tabBarProps = {
-      ...this.$props,
+      ...props,
       prefixCls,
       tabBarExtraContent,
       renderTabBar: renderTabBarSlot,
@@ -162,7 +159,7 @@ export default {
       [`${prefixCls}-card-content`]: type.indexOf('card') >= 0,
     };
     const tabsProps = {
-      ...getOptionProps(this),
+      ...props,
       prefixCls,
       tabBarPosition: tabPosition,
       // https://github.com/vueComponent/ant-design-vue/issues/2030

components/vc-tabs/src/InkTabBarNode.jsx

@@ -84,6 +84,7 @@ function componentDidUpdate(component, init) {
 export default {
   name: 'InkTabBarNode',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     inkBarAnimated: {
       type: Boolean,
@@ -99,13 +100,13 @@ export default {
     activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   },
   updated() {
-    this.$nextTick(function() {
+    this.$nextTick(() => {
       componentDidUpdate(this);
     });
   },
 
   mounted() {
-    this.$nextTick(function() {
+    this.$nextTick(() => {
       componentDidUpdate(this, true);
     });
   },

components/vc-tabs/src/ScrollableInkTabBar.jsx

@@ -7,18 +7,6 @@ import SaveRef from './SaveRef';
 export default {
   name: 'ScrollableInkTabBar',
   inheritAttrs: false,
-  props: [
-    'extraContent',
-    'inkBarAnimated',
-    'tabBarGutter',
-    'prefixCls',
-    'navWrapper',
-    'tabBarPosition',
-    'panels',
-    'activeKey',
-    'prevIcon',
-    'nextIcon',
-  ],
   render() {
     const { default: renderTabBarNode } = this.$slots;
     return (

components/vc-tabs/src/ScrollableTabBarNode.jsx

@@ -10,6 +10,7 @@ function noop() {}
 export default {
   name: 'ScrollableTabBarNode',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     activeKey: PropTypes.any,
     getRef: PropTypes.func.def(() => {}),

components/vc-tabs/src/TabBarRootNode.jsx

@@ -3,17 +3,18 @@ import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
 import createRefHooks from '../../_util/createRefHooks';
 import { getSlot } from '../../_util/props-util';
+import { getDataAttr } from './utils';
 function noop() {}
 export default {
   name: 'TabBarRootNode',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     saveRef: PropTypes.func.def(noop),
     getRef: PropTypes.func.def(noop),
     prefixCls: PropTypes.string.def(''),
     tabBarPosition: PropTypes.string.def('top'),
     extraContent: PropTypes.any,
-    onKeydown: PropTypes.func,
   },
   methods: {
     onKeyDown(e) {
@@ -22,8 +23,10 @@ export default {
   },
   render() {
     const { prefixCls, onKeyDown, tabBarPosition, extraContent } = this;
+    const { class: className, style, onKeydown, ...restProps } = this.$attrs;
     const cls = {
       [`${prefixCls}-bar`]: true,
+      [className]: !!className,
     };
     const topOrBottom = tabBarPosition === 'top' || tabBarPosition === 'bottom';
     const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {};
@@ -48,7 +51,9 @@ export default {
         class={cls}
         tabIndex="0"
         onKeydown={onKeyDown}
+        style={style}
         {...createRefHooks(this.saveRef('root'))}
+        {...getDataAttr(restProps)}
       >
         {newChildren}
       </div>

components/vc-tabs/src/TabBarTabsNode.jsx

@@ -8,6 +8,7 @@ function noop() {}
 export default {
   name: 'TabBarTabsNode',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     panels: PropTypes.any.def([]),

components/vc-tabs/src/TabContent.jsx

@@ -6,7 +6,6 @@ import {
   getTransformPropValue,
   getMarginStyle,
 } from './utils';
-import { getSlot } from '../../_util/props-util';
 export default {
   name: 'TabContent',
   props: {
@@ -17,6 +16,7 @@ export default {
     tabBarPosition: PropTypes.string,
     direction: PropTypes.string,
     destroyInactiveTabPane: PropTypes.bool,
+    children: PropTypes.any,
   },
   computed: {
     classes() {
@@ -52,9 +52,16 @@ export default {
     },
   },
   render() {
-    const { activeKey, tabBarPosition, animated, animatedWithMargin, direction, classes } = this;
+    const {
+      activeKey,
+      tabBarPosition,
+      animated,
+      animatedWithMargin,
+      direction,
+      classes,
+      children,
+    } = this;
     let style = {};
-    const children = getSlot(this);
     if (animated && children) {
       const activeIndex = getActiveIndex(children, activeKey);
       if (activeIndex !== -1) {

components/vc-tabs/src/Tabs.jsx

@@ -7,6 +7,7 @@ import { getOptionProps } from '../../_util/props-util';
 import { cloneElement } from '../../_util/vnode';
 import Sentinel from './Sentinel';
 import isValid from '../../_util/isValid';
+import { getDataAttr } from './utils';
 
 function getDefaultActiveKey(props) {
   let activeKey;
@@ -54,6 +55,10 @@ export default {
     } else {
       activeKey = getDefaultActiveKey(props);
     }
+    this.panelSentinelStart = undefined;
+    this.panelSentinelEnd = undefined;
+    this.sentinelStart = undefined;
+    this.sentinelEnd = undefined;
     return {
       _activeKey: activeKey,
     };
@@ -187,7 +192,7 @@ export default {
       direction,
       tabBarGutter,
     } = props;
-    const { class: className, onChange, ...restProps } = this.$attrs;
+    const { class: className, onChange, style, ...restProps } = this.$attrs;
     const cls = {
       [className]: className,
       [prefixCls]: 1,
@@ -242,7 +247,8 @@ export default {
       contents.push(tabBar, sentinelStart, tabContent, sentinelEnd);
     }
     const p = {
-      ...restProps,
+      ...getDataAttr(restProps),
+      style,
       onScroll: this.onScroll,
       class: cls,
     };

components/vc-tabs/src/utils.js

@@ -1,7 +1,8 @@
+import { isVNode } from 'vue';
 export function toArray(children) {
   const c = [];
   children.forEach(child => {
-    if (child.data) {
+    if (isVNode(child)) {
       c.push(child);
     }
   });
@@ -100,6 +101,9 @@ function getTypeValue(start, current, end, tabNode, wrapperNode) {
 
   const { childNodes } = tabNode.parentNode;
   Array.prototype.some.call(childNodes, node => {
+    if (!node.tagName) {
+      return false;
+    }
     const style = window.getComputedStyle(node);
     if (node !== tabNode) {
       total += toNum(style, `margin-${start}`);

examples/index.js

@@ -2,7 +2,7 @@ import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
 import Avatar from 'ant-design-vue/avatar';
-// import Breadcrumb from 'ant-design-vue/breadcrumb';
+import Breadcrumb from 'ant-design-vue/breadcrumb';
 import Button from 'ant-design-vue/button';
 import Comment from 'ant-design-vue/comment';
 import Drawer from 'ant-design-vue/drawer';
@@ -37,6 +37,7 @@ import Dropdown from 'ant-design-vue/dropdown';
 import Steps from 'ant-design-vue/steps';
 import Switch from 'ant-design-vue/switch';
 import Layout from 'ant-design-vue/layout';
+import Tabs from 'ant-design-vue/tabs';
 import 'ant-design-vue/style.js';
 
 const basic = {
@@ -54,7 +55,7 @@ app
   .component('CN', { ...basic })
   .component('US', { ...basic })
   .use(Avatar)
-  // .use(Breadcrumb)
+  .use(Breadcrumb)
   .use(Button)
   .use(Comment)
   .use(ConfigProvider)
@@ -87,4 +88,5 @@ app
   .use(Steps)
   .use(Switch)
   .use(Layout)
+  .use(Tabs)
   .mount('#app');

package.json

@@ -160,7 +160,7 @@
         "vue-i18n": "^8.3.2",
         "vue-infinite-scroll": "^2.0.2",
         "vue-jest": "^3.0.5",
-        "vue-loader": "^16.0.0-beta.2",
+        "vue-loader": "^16.0.0-beta.4",
         "vue-router": "^4.0.0-alpha.12",
         "vue-server-renderer": "^2.6.11",
         "vue-virtual-scroller": "^1.0.0",