feat(tabs): add autoHeight #1066

src/packages/__VUE/cascader/__tests__/__snapshots__/cascader.spec.ts.snap

@@ -157,7 +157,7 @@ exports[`Cascader change tab 3`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" aria-checked=\\"false\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">浙江</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -170,14 +170,14 @@ exports[`Cascader change tab 3`] = `
               </view>
             </view>
           </view>
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item active\\" aria-checked=\\"true\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">福州</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
               </view>
             </view>
           </view>
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item active\\" aria-checked=\\"true\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">鼓楼区</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -206,7 +206,7 @@ exports[`Cascader modelValue 1`] = `
       <view class=\\"nut-tabs horizontal nut-cascader\\">
         <view class=\\"nut-tabs__titles line scrollable normal\\"></view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">浙江</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -309,7 +309,7 @@ exports[`Cascader modelValue 3`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" aria-checked=\\"false\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">浙江</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -347,7 +347,7 @@ exports[`Cascader modelValue 4`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">浙江</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -385,7 +385,7 @@ exports[`Cascader modelValue with lazy 1`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view class=\\"nut-cascader-pane\\"></view>
           </view>
         </view>
@@ -658,7 +658,7 @@ exports[`Cascader select 1`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">浙江</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -826,7 +826,7 @@ exports[`Cascader select 4`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">浙江</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -858,7 +858,7 @@ exports[`Cascader select with lazy 1`] = `
       <view class=\\"nut-tabs horizontal nut-cascader\\">
         <view class=\\"nut-tabs__titles line scrollable normal\\"></view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view class=\\"nut-cascader-pane\\"></view>
           </view>
         </view>
@@ -886,7 +886,7 @@ exports[`Cascader select with lazy 2`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">A0</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -1101,7 +1101,7 @@ exports[`Cascader select with lazy 6`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">A0</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>
@@ -1186,7 +1186,7 @@ exports[`Cascader visible 1`] = `
           </view>
         </view>
         <view class=\\"nut-tabs__content\\" style=\\"transform: translate3d(-0%, 0, 0); transition-duration: 300ms;\\">
-          <view class=\\"nut-tabpane active\\">
+          <view class=\\"nut-tabpane\\">
             <view role=\\"menu\\" class=\\"nut-cascader-pane\\">
               <view class=\\"nut-cascader-item\\" role=\\"menuitemradio\\">
                 <view class=\\"nut-cascader-item__title\\">浙江</view><i class=\\"nutui-iconfont nut-icon nut-icon-checklist nut-cascader-item__icon-check\\" src=\\"\\"></i>

src/packages/__VUE/tabpane/index.scss

@@ -6,7 +6,9 @@
   padding: 24px 20px;
   box-sizing: border-box;
   overflow: auto;
-  &.active {
-    // overflow: visible;
+  height: 100%;
+  &.inactive {
+    overflow: visible;
+    height: 0;
   }
 }

src/packages/__VUE/tabpane/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-tabpane" :class="{ active: paneKey == activeKey }">
+  <view class="nut-tabpane" :class="{ inactive: paneKey != activeKey && autoHeight }">
     <slot></slot>
   </view>
 </template>
@@ -26,7 +26,11 @@ export default create({
   emits: ['click'],
   setup(props, { emit }) {
     const parent = inject('activeKey') as any;
-    return { activeKey: parent.activeKey };
+    const parentOption = inject('autoHeight') as any;
+    return {
+      activeKey: parent.activeKey,
+      autoHeight: parentOption.autoHeight
+    };
   }
 });
 </script>

src/packages/__VUE/tabs/common.ts

@@ -38,6 +38,10 @@ export const component = {
       type: Boolean,
       default: true
     },
+    autoHeight: {
+      type: Boolean,
+      default: false
+    },
     background: {
       type: String,
       default: ''
@@ -57,6 +61,7 @@ export const component = {
 
   setup(props: any, { emit, slots }: any) {
     provide('activeKey', { activeKey: computed(() => props.modelValue) });
+    provide('autoHeight', { autoHeight: computed(() => props.autoHeight) });
     const titles: Ref<Title[]> = ref([]);
 
     const renderTitles = (vnodes: VNode[]) => {
@@ -65,9 +70,9 @@ export const component = {
         type = (type as any).name || type;
         if (type == 'nut-tabpane') {
           let title = new Title();
-          if (vnode.props?.title || vnode.props?.['pane-key']) {
+          if (vnode.props?.title || vnode.props?.['pane-key'] || vnode.props?.['paneKey']) {
             title.title = vnode.props?.title;
-            title.paneKey = vnode.props?.['pane-key'] || index;
+            title.paneKey = vnode.props?.['pane-key'] || vnode.props?.['paneKey'] || index;
             title.disabled = vnode.props?.disabled;
           } else {
             // title.titleSlot = vnode.children?.title() as VNode[];

src/packages/__VUE/tabs/demo.vue

@@ -18,6 +18,17 @@
       <nut-tabpane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
     </nut-tabs>
+    <h2>{{ translate('title9') }}</h2>
+    <nut-tabs v-model="state.tab2value" :auto-height="true">
+      <nut-tabpane title="Tab 1" pane-key="0">
+        <p>Tab 1</p>
+        <p>Tab 1</p>
+        <p>Tab 1</p>
+        <p>Tab 1</p>
+      </nut-tabpane>
+      <nut-tabpane title="Tab 2" pane-key="1"> Tab 2 </nut-tabpane>
+      <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+    </nut-tabs>
     <h2>{{ translate('title3') }}</h2>
     <nut-tabs v-model="state.tab3value">
       <nut-tabpane v-for="item in state.list3" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
@@ -90,6 +101,7 @@ useTranslate({
     title6: '左右布局-微笑曲线',
     title7: '标签栏字体尺寸 large normal small',
     title8: '自定义标签栏',
+    title9: 'Tabpane 自动高度',
     custom: (val: string) => `自定义 ${1}`
   },
   'en-US': {
@@ -102,6 +114,7 @@ useTranslate({
     title6: 'Left and Right Layout - Smile Curve',
     title7: 'tab bar font size large normal small',
     title8: 'custom tab bar',
+    title9: 'Tabpane auto height',
     custom: (val: string) => `custom ${1}`
   }
 });

src/packages/__VUE/tabs/doc.en-US.md

@@ -109,6 +109,38 @@ export default {
 ```
 :::
 
+### Tabpane height auto
+
+Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will change with the height of the current `nut-tabpane`.
+
+:::demo
+```html
+<template>
+  <nut-tabs v-model="state.tab2value" :auto-height="true">
+    <nut-tabpane title="Tab 1" pane-key="0">
+      <p>Tab 1</p>
+      <p>Tab 1</p>
+      <p>Tab 1</p>
+      <p>Tab 1</p>
+    </nut-tabpane>
+    <nut-tabpane title="Tab 2" pane-key="1"> Tab 2 </nut-tabpane>
+    <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+  </nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab2value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
 ### Data is rendered asynchronously for 3s
 
 :::demo
@@ -303,18 +335,19 @@ export default {
 
 ### Tabs Props
 
-| Attribute     | Description                                                       | Type          | Default    |
-|---------------|-------------------------------------------------------------------|---------------|------------|
-| v-model       | Index of active tab                                               | number,string | 0          |
-| color         | Label selection color                                             | string        | #1a1a1a    |
-| background    | Tab bar background color                                          | string        | #f5f5f5    |
-| direction     | Use landscape orientation optional value `horizontal`、`vertical` | string        | horizontal |
-| type          | Check the bottom display style optional value `line`、`smile`     | string        | line       |
-| title-scroll  | Is the tab bar scrollable                                         | boolean       | false      |
-| ellipsis      | Whether to omit too long title text                               | boolean       | true       |
-| animated-time | Switch animation duration, unit ms 0 means no animation           | number,string | 300        |
-| title-gutter  | Label gap                                                         | number,string | 0          |
-| size`v3.1.13` | Tab bar font size optional value  `large` `normal` `small`        | string        | normal     |
+| Attribute            | Description                                                                                                                        | Type          | Default    |
+|----------------------|------------------------------------------------------------------------------------------------------------------------------------|---------------|------------|
+| v-model              | Index of active tab                                                                                                                | number,string | 0          |
+| color                | Label selection color                                                                                                              | string        | #1a1a1a    |
+| background           | Tab bar background color                                                                                                           | string        | #f5f5f5    |
+| direction            | Use landscape orientation optional value `horizontal`、`vertical`                                                                  | string        | horizontal |
+| type                 | Check the bottom display style optional value `line`、`smile`                                                                      | string        | line       |
+| title-scroll         | Is the tab bar scrollable                                                                                                          | boolean       | false      |
+| ellipsis             | Whether to omit too long title text                                                                                                | boolean       | true       |
+| animated-time        | Switch animation duration, unit ms 0 means no animation                                                                            | number,string | 300        |
+| title-gutter         | Label gap                                                                                                                          | number,string | 0          |
+| size`v3.1.13`        | Tab bar font size optional value  `large` `normal` `small`                                                                         | string        | normal     |
+| auto-height`v3.1.21` | Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will change with the height of the current `nut-tabpane`. | boolean       | false      |
 
 ## Tabs Slots
 

src/packages/__VUE/tabs/doc.md

@@ -109,6 +109,38 @@ export default {
 ```
 :::
 
+### Tabpane 自动高度
+
+自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tabpane 的高度而发生变化。
+
+:::demo
+```html
+<template>
+  <nut-tabs v-model="state.tab2value" :auto-height="true">
+    <nut-tabpane title="Tab 1" pane-key="0">
+      <p>Tab 1</p>
+      <p>Tab 1</p>
+      <p>Tab 1</p>
+      <p>Tab 1</p>
+    </nut-tabpane>
+    <nut-tabpane title="Tab 2" pane-key="1"> Tab 2 </nut-tabpane>
+    <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+  </nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab2value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
 ### 数据异步渲染 3s
 
 :::demo
@@ -303,18 +335,19 @@ export default {
 
 ### Tabs Props
 
-| 参数          | 说明                                          | 类型          | 默认值     |
-|---------------|-----------------------------------------------|---------------|------------|
-| v-model       | 绑定当前选中标签的标识符                      | number,string | 0          |
-| color         | 标签选中色                                    | string        | #1a1a1a    |
-| background    | 标签栏背景颜色                                | string        | #f5f5f5    |
-| direction     | 使用横纵方向 可选值 horizontal、vertical      | string        | horizontal |
-| type          | 选中底部展示样式 可选值 line、smile           | string        | line       |
-| title-scroll  | 标签栏是否可以滚动                            | boolean       | false      |
-| ellipsis      | 是否省略过长的标题文字                        | boolean       | true       |
-| animated-time | 切换动画时长,单位 ms 0 代表无动画              | number,string | 300        |
-| title-gutter  | 标签间隙                                      | number,string | 0          |
-| size`v3.1.13`          | 标签栏字体尺寸大小 可选值  large normal small | string        | normal     |
+| 参数                 | 说明                                                                                              | 类型          | 默认值     |
+|----------------------|---------------------------------------------------------------------------------------------------|---------------|------------|
+| v-model              | 绑定当前选中标签的标识符                                                                          | number,string | 0          |
+| color                | 标签选中色                                                                                        | string        | #1a1a1a    |
+| background           | 标签栏背景颜色                                                                                    | string        | #f5f5f5    |
+| direction            | 使用横纵方向 可选值 horizontal、vertical                                                          | string        | horizontal |
+| type                 | 选中底部展示样式 可选值 line、smile                                                               | string        | line       |
+| title-scroll         | 标签栏是否可以滚动                                                                                | boolean       | false      |
+| ellipsis             | 是否省略过长的标题文字                                                                            | boolean       | true       |
+| animated-time        | 切换动画时长,单位 ms 0 代表无动画                                                                 | number,string | 300        |
+| title-gutter         | 标签间隙                                                                                          | number,string | 0          |
+| size`v3.1.13`        | 标签栏字体尺寸大小 可选值  large normal small                                                     | string        | normal     |
+| auto-height`v3.1.21` | 自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tabpane 的高度而发生变化。 | boolean       | false      |
 
 ## Tabs Slots
 

src/sites/mobile-taro/vue/src/nav/pages/tabs/index.vue

@@ -18,6 +18,17 @@
       <nut-tabpane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
     </nut-tabs>
+    <h2>Tabpane 自动高度</h2>
+    <nut-tabs v-model="state.tab2value" :auto-height="true">
+      <nut-tabpane title="Tab 1" pane-key="0">
+        <p>Tab 1</p>
+        <p>Tab 1</p>
+        <p>Tab 1</p>
+        <p>Tab 1</p>
+      </nut-tabpane>
+      <nut-tabpane title="Tab 2" pane-key="1"> Tab 2 </nut-tabpane>
+      <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+    </nut-tabs>
     <h2>数据异步渲染 3s</h2>
     <nut-tabs v-model="state.tab3value">
       <nut-tabpane v-for="item in state.list3" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>