feat: update vc-tabs

components/vc-tabs/src/InkTabBar.jsx

@@ -4,24 +4,19 @@ import TabBarRootNode from './TabBarRootNode';
 import SaveRef from './SaveRef';
 function noop() {}
 
-export default {
+const InkTabBar = (_, { attrs }) => {
-  name: 'InkTabBar',
+  const { onTabClick = noop, ...props } = attrs;
-  functional: true,
-  render(h, context) {
-    const { props, listeners = {} } = context;
   return (
     <SaveRef
       children={(saveRef, getRef) => (
         <TabBarRootNode saveRef={saveRef} {...props}>
-            <TabBarTabsNode
+          <TabBarTabsNode onTabClick={onTabClick} saveRef={saveRef} {...props} />
-              onTabClick={listeners.tabClick || noop}
+          <InkTabBarNode saveRef={saveRef} getRef={getRef} {...props} />
-              saveRef={saveRef}
-              {...{ props }}
-            />
-            <InkTabBarNode saveRef={saveRef} getRef={getRef} {...{ props }} />
         </TabBarRootNode>
       )}
     />
   );
-  },
 };
+
+InkTabBar.inheritAttrs = false;
+export default InkTabBar;

components/vc-tabs/src/InkTabBarNode.jsx

@@ -8,6 +8,7 @@ import {
   getActiveIndex,
 } from './utils';
 import BaseMixin from '../../_util/BaseMixin';
+import createRefHooks from '../../_util/createRefHooks';
 
 function componentDidUpdate(component, init) {
   const { styles = {}, panels, activeKey, direction } = component.$props;
@@ -120,14 +121,7 @@ export default {
         style={styles.inkBar}
         class={classes}
         key="inkBar"
-        {...{
+        {...createRefHooks(this.saveRef('inkBar'))}
-          directives: [
-            {
-              name: 'ant-ref',
-              value: this.saveRef('inkBar'),
-            },
-          ],
-        }}
       />
     );
   },

components/vc-tabs/src/ScrollableInkTabBar.jsx

@@ -3,7 +3,6 @@ import TabBarTabsNode from './TabBarTabsNode';
 import TabBarRootNode from './TabBarRootNode';
 import ScrollableTabBarNode from './ScrollableTabBarNode';
 import SaveRef from './SaveRef';
-import { getListeners } from '../../_util/props-util';
 
 export default {
   name: 'ScrollableInkTabBar',
@@ -21,19 +20,14 @@ export default {
     'nextIcon',
   ],
   render() {
-    const props = { ...this.$props };
+    const { default: renderTabBarNode } = this.$slots;
-    const listeners = getListeners(this);
-    const { default: renderTabBarNode } = this.$scopedSlots;
     return (
       <SaveRef
         children={(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
+          <TabBarRootNode saveRef={saveRef} {...this.$attrs}>
-            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...{ props, on: listeners }}>
+            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.$attrs}>
-              <TabBarTabsNode
+              <TabBarTabsNode saveRef={saveRef} {...{ ...this.$attrs, renderTabBarNode }} />
-                saveRef={saveRef}
+              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.$attrs} />
-                {...{ props: { ...props, renderTabBarNode }, on: listeners }}
-              />
-              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...{ props, on: listeners }} />
             </ScrollableTabBarNode>
           </TabBarRootNode>
         )}

components/vc-tabs/src/ScrollableTabBar.jsx

@@ -3,21 +3,18 @@ import TabBarRootNode from './TabBarRootNode';
 import TabBarTabsNode from './TabBarTabsNode';
 import SaveRef from './SaveRef';
 
-export default {
+const ScrollableTabBar = (_, { attrs }) => {
-  name: 'ScrollableTabBar',
-  functional: true,
-  render(h, context) {
-    const { props, listeners = {} } = context;
   return (
     <SaveRef
       children={(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
+        <TabBarRootNode saveRef={saveRef} {...attrs}>
-            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...{ props, on: listeners }}>
+          <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...attrs}>
-              <TabBarTabsNode saveRef={saveRef} {...{ props, on: listeners }} />
+            <TabBarTabsNode saveRef={saveRef} {...attrs} />
           </ScrollableTabBarNode>
         </TabBarRootNode>
       )}
     />
   );
-  },
 };
+ScrollableTabBar.inheritAttrs = false;
+export default ScrollableTabBar;

components/vc-tabs/src/ScrollableTabBarNode.jsx

@@ -2,8 +2,9 @@ import debounce from 'lodash/debounce';
 import ResizeObserver from 'resize-observer-polyfill';
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getComponentFromProp } from '../../_util/props-util';
+import { getComponent, getSlot } from '../../_util/props-util';
 import { setTransform, isTransform3dSupported } from './utils';
+import createRefHooks from '../../_util/createRefHooks';
 
 function noop() {}
 export default {
@@ -202,9 +203,6 @@ export default {
     },
 
     setNext(v) {
-      if (!v) {
-        // debugger
-      }
       if (this.next !== v) {
         this.next = v;
       }
@@ -275,8 +273,8 @@ export default {
   render() {
     const { next, prev } = this;
     const { prefixCls, scrollAnimated, navWrapper } = this.$props;
-    const prevIcon = getComponentFromProp(this, 'prevIcon');
+    const prevIcon = getComponent(this, 'prevIcon');
-    const nextIcon = getComponentFromProp(this, 'nextIcon');
+    const nextIcon = getComponent(this, 'nextIcon');
     const showNextPrev = prev || next;
 
     const prevButton = (
@@ -321,41 +319,14 @@ export default {
           [`${prefixCls}-nav-container-scrolling`]: showNextPrev,
         }}
         key="container"
-        {...{
+        {...createRefHooks(this.saveRef('container'))}
-          directives: [
-            {
-              name: 'ant-ref',
-              value: this.saveRef('container'),
-            },
-          ],
-        }}
       >
         {prevButton}
         {nextButton}
-        <div
+        <div class={`${prefixCls}-nav-wrap`} {...createRefHooks(this.saveRef('navWrap'))}>
-          class={`${prefixCls}-nav-wrap`}
-          {...{
-            directives: [
-              {
-                name: 'ant-ref',
-                value: this.saveRef('navWrap'),
-              },
-            ],
-          }}
-        >
           <div class={`${prefixCls}-nav-scroll`}>
-            <div
+            <div class={navClasses} {...createRefHooks(this.saveRef('nav'))}>
-              class={navClasses}
+              {navWrapper(getSlot(this))}
-              {...{
-                directives: [
-                  {
-                    name: 'ant-ref',
-                    value: this.saveRef('nav'),
-                  },
-                ],
-              }}
-            >
-              {navWrapper(this.$slots.default)}
             </div>
           </div>
         </div>

components/vc-tabs/src/Sentinel.jsx

@@ -1,5 +1,7 @@
 import PropTypes from '../../_util/vue-types';
 import KeyCode from '../../_util/KeyCode';
+import createRefHooks from '../../_util/createRefHooks';
+import { getSlot } from '../../_util/props-util';
 
 const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' };
 export default {
@@ -31,19 +33,12 @@ export default {
     return (
       <div
         tabIndex={0}
-        {...{
+        {...createRefHooks(setRef)}
-          directives: [
-            {
-              name: 'ant-ref',
-              value: setRef,
-            },
-          ],
-        }}
         style={sentinelStyle}
         onKeydown={this.onKeyDown}
         role="presentation"
       >
-        {this.$slots.default}
+        {getSlot(this)}
       </div>
     );
   },

components/vc-tabs/src/TabBar.jsx

@@ -1,19 +1,16 @@
 import TabBarRootNode from './TabBarRootNode';
 import TabBarTabsNode from './TabBarTabsNode';
 import SaveRef from './SaveRef';
-import { getAttrs, getListeners } from '../../_util/props-util';
 
 export default {
   name: 'TabBar',
   inheritAttrs: false,
   render() {
-    const props = getAttrs(this);
-    const listeners = getListeners(this);
     return (
       <SaveRef
         children={saveRef => (
-          <TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
+          <TabBarRootNode saveRef={saveRef} {...this.$attrs}>
-            <TabBarTabsNode saveRef={saveRef} {...{ props, on: listeners }} />
+            <TabBarTabsNode saveRef={saveRef} {...this.$attrs} />
           </TabBarRootNode>
         )}
       />

components/vc-tabs/src/TabBarRootNode.jsx

@@ -1,6 +1,7 @@
 import { cloneElement } from '../../_util/vnode';
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
+import createRefHooks from '../../_util/createRefHooks';
 function noop() {}
 export default {
   name: 'TabBarRootNode',
@@ -11,6 +12,7 @@ export default {
     prefixCls: PropTypes.string.def(''),
     tabBarPosition: PropTypes.string.def('top'),
     extraContent: PropTypes.any,
+    onKeydown: PropTypes.func,
   },
   methods: {
     onKeyDown(e) {
@@ -45,14 +47,7 @@ export default {
         class={cls}
         tabIndex="0"
         onKeydown={onKeyDown}
-        {...{
+        {...createRefHooks(this.saveRef('root'))}
-          directives: [
-            {
-              name: 'ant-ref',
-              value: this.saveRef('root'),
-            },
-          ],
-        }}
       >
         {newChildren}
       </div>

components/vc-tabs/src/index.js

@@ -1,11 +1,7 @@
 // based on rc-tabs 9.7.0
-import ref from 'vue-ref';
-import Vue from 'vue';
 import Tabs from './Tabs';
 import TabPane from './TabPane';
 import TabContent from './TabContent';
 
-Vue.use(ref, { name: 'ant-ref' });
-
 export default Tabs;
 export { TabPane, TabContent };