refactor(Tabs): move renderTitle to Tab component (#11781)

packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap

@@ -85,6 +85,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
              class="van-tab van-tab--line van-tab--shrink van-cascader__tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Jiangsu
@@ -95,6 +96,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
              class="van-tab van-tab--line van-tab--shrink van-tab--active van-cascader__tab van-cascader__tab--unselected"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Select

packages/vant/src/picker-group/test/__snapshots__/demo.spec.ts.snap

@@ -29,6 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tab van-tab--line van-tab--shrink van-tab--active van-picker-group__tab-title"
                tabindex="0"
                aria-selected="true"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text">
               Date
@@ -39,6 +40,7 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tab van-tab--line van-tab--shrink van-picker-group__tab-title"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text">
               Time
@@ -1357,6 +1359,7 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tab van-tab--line van-tab--shrink van-tab--active van-picker-group__tab-title"
                tabindex="0"
                aria-selected="true"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text">
               Date
@@ -1367,6 +1370,7 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tab van-tab--line van-tab--shrink van-picker-group__tab-title"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text">
               Time
@@ -2685,6 +2689,7 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tab van-tab--line van-tab--shrink van-tab--active van-picker-group__tab-title"
                tabindex="0"
                aria-selected="true"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text">
               Start Date
@@ -2695,6 +2700,7 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tab van-tab--line van-tab--shrink van-picker-group__tab-title"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text">
               End Date
@@ -3677,6 +3683,7 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tab van-tab--line van-tab--shrink van-tab--active van-picker-group__tab-title"
                tabindex="0"
                aria-selected="true"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text">
               Start Time
@@ -3687,6 +3694,7 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tab van-tab--line van-tab--shrink van-picker-group__tab-title"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text">
               End Time

packages/vant/src/tab/Tab.tsx

@@ -5,6 +5,7 @@ import {
   computed,
   nextTick,
   defineComponent,
+  getCurrentInstance,
   type PropType,
   type CSSProperties,
   type ExtractPropTypes,
@@ -12,11 +13,13 @@ import {
 
 // Utils
 import {
+  pick,
   extend,
   truthProp,
   unknownProp,
   numericProp,
   createNamespace,
+  ComponentInstance,
 } from '../utils';
 import { TABS_KEY } from '../tabs/Tabs';
 
@@ -28,6 +31,7 @@ import { routeProps } from '../composables/use-route';
 import { TAB_STATUS_KEY } from '../composables/use-tab-status';
 
 // Components
+import { TabTitle } from './TabTitle';
 import { SwipeItem } from '../swipe-item';
 
 const [name, bem] = createNamespace('tab');
@@ -53,6 +57,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const id = useId();
     const inited = ref(false);
+    const instance = getCurrentInstance();
     const { parent, index } = useParent(TABS_KEY);
 
     if (!parent) {
@@ -84,6 +89,33 @@ export default defineComponent({
       return isActive;
     });
 
+    const renderTitle = (
+      onClickTab: (
+        instance: ComponentInstance,
+        index: number,
+        event: MouseEvent
+      ) => void
+    ) => (
+      <TabTitle
+        key={id}
+        v-slots={{ title: slots.title }}
+        id={`${parent.id}-${index.value}`}
+        ref={parent.setTitleRefs(index.value)}
+        style={props.titleStyle}
+        class={props.titleClass}
+        isActive={active.value}
+        controls={id}
+        scrollable={parent.scrollable.value}
+        activeColor={parent.props.titleActiveColor}
+        inactiveColor={parent.props.titleInactiveColor}
+        onClick={(event: MouseEvent) =>
+          onClickTab(instance!.proxy!, index.value, event)
+        }
+        {...pick(parent.props, ['type', 'color', 'shrink'])}
+        {...pick(props, ['dot', 'badge', 'title', 'disabled', 'showZeroBadge'])}
+      />
+    );
+
     const hasInactiveClass = ref(!active.value);
 
     watch(active, (val) => {
@@ -109,6 +141,11 @@ export default defineComponent({
 
     provide(TAB_STATUS_KEY, active);
 
+    useExpose({
+      id,
+      renderTitle,
+    });
+
     return () => {
       const label = `${parent.id}-${index.value}`;
       const { animated, swipeable, scrollspy, lazyRender } = parent.props;
@@ -137,8 +174,6 @@ export default defineComponent({
       const shouldRender = inited.value || scrollspy || !lazyRender;
       const Content = shouldRender ? slots.default?.() : null;
 
-      useExpose({ id });
-
       return (
         <div
           v-show={show}

packages/vant/src/tab/TabTitle.tsx

@@ -4,7 +4,7 @@ import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('tab');
 
-export default defineComponent({
+export const TabTitle = defineComponent({
   name,
 
   props: {

packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap

@@ -896,6 +896,7 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 1
@@ -906,6 +907,7 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2
@@ -916,6 +918,7 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 3
@@ -926,6 +929,7 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 4
@@ -1001,6 +1005,7 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 1
@@ -1011,6 +1016,7 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2
@@ -1021,6 +1027,7 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 3
@@ -1031,6 +1038,7 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 4

packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap

@@ -347,6 +347,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
            class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
@@ -357,6 +358,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
            class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
@@ -367,6 +369,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
            class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -434,6 +437,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
            class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
@@ -444,6 +448,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
            class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
@@ -454,6 +459,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
            class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -524,6 +530,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
            class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
@@ -534,6 +541,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
            class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
@@ -544,6 +552,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
            class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3

packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap

@@ -166,6 +166,7 @@ exports[`should render correctly after inserting a tab from an array 1`] = `
            class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           1
@@ -176,6 +177,7 @@ exports[`should render correctly after inserting a tab from an array 1`] = `
            class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           2
@@ -186,6 +188,7 @@ exports[`should render correctly after inserting a tab from an array 1`] = `
            class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           3

packages/vant/src/tabs/Tabs.tsx

@@ -15,7 +15,6 @@ import {
 
 // Utils
 import {
-  pick,
   isDef,
   addUnit,
   isHidden,
@@ -53,7 +52,6 @@ import { useVisibilityChange } from '../composables/use-visibility-change';
 
 // Components
 import { Sticky } from '../sticky';
-import TabsTitle from './TabsTitle';
 import TabsContent from './TabsContent';
 
 // Types
@@ -352,34 +350,6 @@ export default defineComponent({
       }
     };
 
-    const renderNav = () =>
-      children.map((item, index) => (
-        <TabsTitle
-          key={item.id}
-          v-slots={{ title: item.$slots.title }}
-          id={`${id}-${index}`}
-          ref={setTitleRefs(index)}
-          type={props.type}
-          color={props.color}
-          style={item.titleStyle}
-          class={item.titleClass}
-          shrink={props.shrink}
-          isActive={index === state.currentIndex}
-          controls={item.id}
-          scrollable={scrollable.value}
-          activeColor={props.titleActiveColor}
-          inactiveColor={props.titleInactiveColor}
-          onClick={(event: MouseEvent) => onClickTab(item, index, event)}
-          {...pick(item, [
-            'dot',
-            'badge',
-            'title',
-            'disabled',
-            'showZeroBadge',
-          ])}
-        />
-      ));
-
     const renderLine = () => {
       if (props.type === 'line' && children.length) {
         return <div class={bem('line')} style={state.lineStyle} />;
@@ -408,7 +378,7 @@ export default defineComponent({
             aria-orientation="horizontal"
           >
             {slots['nav-left']?.()}
-            {renderNav()}
+            {children.map((item) => item.renderTitle(onClickTab))}
             {renderLine()}
             {slots['nav-right']?.()}
           </div>
@@ -491,8 +461,10 @@ export default defineComponent({
       id,
       props,
       setLine,
+      scrollable,
       onRendered,
       currentName,
+      setTitleRefs,
       scrollIntoView,
     });
 

packages/vant/src/tabs/types.ts

@@ -15,9 +15,11 @@ export type TabsProvide = {
   id: string;
   props: TabsProps;
   setLine: () => void;
+  scrollable: ComputedRef<boolean>;
   onRendered: (name: Numeric, title?: string) => void;
-  scrollIntoView: (immediate?: boolean) => void;
   currentName: ComputedRef<Numeric | undefined>;
+  setTitleRefs: (index: number) => (el: unknown) => void;
+  scrollIntoView: (immediate?: boolean) => void;
 };
 
 export type TabsExpose = {