chore(Cascader): enable tabs shrink (#10128)

packages/vant/src/cascader/Cascader.tsx

@@ -269,10 +269,10 @@ export default defineComponent({
     const renderTabs = () => (
       <Tabs
         v-model:active={activeTab.value}
+        shrink
         animated
         class={bem('tabs')}
         color={props.activeColor}
-        swipeThreshold={0}
         swipeable={props.swipeable}
         onClick-tab={onClickTab}
       >

packages/vant/src/cascader/index.less

@@ -37,19 +37,9 @@
   }
 
   &__tabs {
-    .van-tab {
-      flex: none;
-      padding: 0 10px;
-    }
-
     &.van-tabs--line .van-tabs__wrap {
       height: var(--van-cascader-tabs-height);
     }
-
-    .van-tabs__nav--complete {
-      padding-right: 6px;
-      padding-left: 6px;
-    }
   }
 
   &__tab {

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

@@ -75,14 +75,14 @@ exports[`should update tabs when previous tab is clicked 1`] = `
     </i>
   </div>
   <div class="van-tabs van-tabs--line van-cascader__tabs">
-    <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+    <div class="van-tabs__wrap">
       <div role="tablist"
-           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
+           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--line van-cascader__tab"
+             class="van-tab van-tab--line van-tab--shrink van-cascader__tab"
              tabindex="-1"
              aria-selected="false"
         >
@@ -92,7 +92,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--line van-tab--active van-cascader__tab van-cascader__tab--unselected"
+             class="van-tab van-tab--line van-tab--shrink van-tab--active van-cascader__tab van-cascader__tab--unselected"
              tabindex="0"
              aria-selected="true"
         >

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

@@ -172,14 +172,14 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-tabs van-tabs--line">
-    <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+    <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--line van-tab--active"
+             class="van-tab van-tab--line van-tab--grow van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -190,7 +190,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -201,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -212,7 +212,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-3"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -223,7 +223,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-4"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -234,7 +234,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-5"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -245,7 +245,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-6"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -256,7 +256,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-7"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -644,7 +644,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap">
       <div role="tablist"
-           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink"
+           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
         <div id="van-tabs-0"
@@ -654,7 +654,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="true"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 1
           </span>
         </div>
@@ -665,7 +665,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 2
           </span>
         </div>
@@ -676,7 +676,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 3
           </span>
         </div>
@@ -687,7 +687,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 4
           </span>
         </div>
@@ -736,7 +736,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs van-tabs--card">
     <div class="van-tabs__wrap">
       <div role="tablist"
-           class="van-tabs__nav van-tabs__nav--card van-tabs__nav--shrink"
+           class="van-tabs__nav van-tabs__nav--card van-tabs__nav--shrink van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
         <div id="van-tabs-0"
@@ -746,7 +746,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="true"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 1
           </span>
         </div>
@@ -757,7 +757,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 2
           </span>
         </div>
@@ -768,7 +768,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 3
           </span>
         </div>
@@ -779,7 +779,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 4
           </span>
         </div>
@@ -1096,14 +1096,14 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs van-tabs--line">
     <div>
       <div class="van-sticky">
-        <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+        <div class="van-tabs__wrap">
           <div role="tablist"
                class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
                aria-orientation="horizontal"
           >
             <div id="van-tabs-0"
                  role="tab"
-                 class="van-tab van-tab--line van-tab--active"
+                 class="van-tab van-tab--line van-tab--grow van-tab--active"
                  tabindex="0"
                  aria-selected="true"
                  aria-controls="van-tab"
@@ -1114,7 +1114,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-1"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1125,7 +1125,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-2"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1136,7 +1136,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-3"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1147,7 +1147,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-4"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1158,7 +1158,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-5"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1169,7 +1169,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-6"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1180,7 +1180,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-7"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"

packages/vant/src/tabs/Tabs.tsx

@@ -139,7 +139,10 @@ export default defineComponent({
 
     // whether the nav is scrollable
     const scrollable = computed(
-      () => children.length > props.swipeThreshold || !props.ellipsis
+      () =>
+        children.length > props.swipeThreshold ||
+        !props.ellipsis ||
+        props.shrink
     );
 
     const navStyle = computed(() => ({
@@ -398,7 +401,7 @@ export default defineComponent({
         <div
           ref={wrapRef}
           class={[
-            bem('wrap', { scrollable: scrollable.value }),
+            bem('wrap'),
             { [BORDER_TOP_BOTTOM]: type === 'line' && border },
           ]}
         >

packages/vant/src/tabs/TabsTitle.tsx

@@ -83,6 +83,7 @@ export default defineComponent({
           bem([
             props.type,
             {
+              grow: props.scrollable && !props.shrink,
               shrink: props.shrink,
               active: props.isActive,
               disabled: props.disabled,

packages/vant/src/tabs/index.less

@@ -38,6 +38,11 @@
     cursor: not-allowed;
   }
 
+  &--grow {
+    flex: 1 0 auto;
+    padding: 0 var(--van-padding-sm);
+  }
+
   &--shrink {
     flex: none;
     padding: 0 var(--van-padding-xs);
@@ -86,23 +91,6 @@
       top: auto;
       bottom: 0;
     }
-
-    &--scrollable {
-      .van-tab {
-        flex: 1 0 auto;
-        padding: 0 var(--van-padding-sm);
-      }
-
-      .van-tabs__nav {
-        overflow-x: auto;
-        overflow-y: hidden;
-        -webkit-overflow-scrolling: touch;
-
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-    }
   }
 
   &__nav {
@@ -111,6 +99,16 @@
     background: var(--van-tabs-nav-background-color);
     user-select: none;
 
+    &--complete {
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
     &--line {
       box-sizing: content-box;
       height: 100%;