feat(tabs): add scrollPosition API (#3196)

* feat(tabs): add scrollPosition API * chore: update ssr snapshots
Tencent · Jun 17, 2024 · 3a66f60 · 3a66f60
1 parent 88618ea
commit 3a66f60
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 74 deletions.
diff --git a/src/tabs/_example-composition/combination.vue b/src/tabs/_example-composition/combination.vue
@@ -1,12 +1,16 @@
 <template>
   <t-space direction="vertical" style="width: 100%" size="32px">
-    <t-space>
-      <t-radio-group variant="default-filled" v-model="theme">
-        <t-radio-button value="normal">常规型</t-radio-button>
-        <t-radio-button value="card">卡片型</t-radio-button>
-      </t-radio-group>
-    </t-space>
-    <t-tabs v-model="value" :theme="theme">
+    <t-radio-group variant="default-filled" v-model="theme">
+      <t-radio-button value="normal">常规型</t-radio-button>
+      <t-radio-button value="card">卡片型</t-radio-button>
+    </t-radio-group>
+    <t-radio-group variant="default-filled" v-model="scrollPosition">
+      <t-radio-button value="auto">Auto</t-radio-button>
+      <t-radio-button value="start">Start</t-radio-button>
+      <t-radio-button value="center">Center</t-radio-button>
+      <t-radio-button value="end">End</t-radio-button>
+    </t-radio-group>
+    <t-tabs v-model="value" :theme="theme" :scrollPosition="scrollPosition">
       <t-tab-panel v-for="(item, index) in 30" :key="index" :value="index + ''" :label="`选项卡${index + 1}`">
         <p style="padding: 25px">选项卡{{ index + 1 }}</p>
       </t-tab-panel>
@@ -19,4 +23,5 @@ import { ref } from 'vue';
 
 const theme = ref('normal');
 const value = ref('21');
+const scrollPosition = ref('auto');
 </script>
diff --git a/src/tabs/_example/combination.vue b/src/tabs/_example/combination.vue
@@ -1,12 +1,16 @@
 <template>
   <t-space direction="vertical" style="width: 100%" size="32px">
-    <t-space>
-      <t-radio-group variant="default-filled" v-model="theme">
-        <t-radio-button value="normal">常规型</t-radio-button>
-        <t-radio-button value="card">卡片型</t-radio-button>
-      </t-radio-group>
-    </t-space>
-    <t-tabs v-model="value" :theme="theme">
+    <t-radio-group variant="default-filled" v-model="theme">
+      <t-radio-button value="normal">常规型</t-radio-button>
+      <t-radio-button value="card">卡片型</t-radio-button>
+    </t-radio-group>
+    <t-radio-group variant="default-filled" v-model="scrollPosition">
+      <t-radio-button value="auto">Auto</t-radio-button>
+      <t-radio-button value="start">Start</t-radio-button>
+      <t-radio-button value="center">Center</t-radio-button>
+      <t-radio-button value="end">End</t-radio-button>
+    </t-radio-group>
+    <t-tabs v-model="value" :theme="theme" :scrollPosition="scrollPosition">
       <t-tab-panel v-for="(item, index) in 30" :key="index" :value="index + ''" :label="`选项卡${index + 1}`">
         <p style="padding: 25px">选项卡{{ index + 1 }}</p>
       </t-tab-panel>
@@ -20,6 +24,7 @@ export default {
     return {
       theme: 'normal',
       value: '21',
+      scrollPosition: 'auto',
     };
   },
 };

diff --git a/src/tabs/props.ts b/src/tabs/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TdTabsProps } from './type';
@@ -22,14 +21,25 @@ export default {
     type: String as PropType<TdTabsProps['placement']>,
     default: 'top' as TdTabsProps['placement'],
     validator(val: TdTabsProps['placement']): boolean {
+      if (!val) return true;
       return ['left', 'top', 'bottom', 'right'].includes(val);
     },
   },
+  /** Tab较多的时候，选中滑块滚动最终停留的位置 */
+  scrollPosition: {
+    type: String as PropType<TdTabsProps['scrollPosition']>,
+    default: 'auto' as TdTabsProps['scrollPosition'],
+    validator(val: TdTabsProps['scrollPosition']): boolean {
+      if (!val) return true;
+      return ['auto', 'start', 'center', 'end'].includes(val);
+    },
+  },
   /** 组件尺寸 */
   size: {
     type: String as PropType<TdTabsProps['size']>,
     default: 'medium' as TdTabsProps['size'],
     validator(val: TdTabsProps['size']): boolean {
+      if (!val) return true;
       return ['medium', 'large'].includes(val);
     },
   },
@@ -38,6 +48,7 @@ export default {
     type: String as PropType<TdTabsProps['theme']>,
     default: 'normal' as TdTabsProps['theme'],
     validator(val: TdTabsProps['theme']): boolean {
+      if (!val) return true;
       return ['normal', 'card'].includes(val);
     },
   },

diff --git a/src/tabs/tab-nav.tsx b/src/tabs/tab-nav.tsx
@@ -34,6 +34,7 @@ export default mixins(classPrefixMixins, getGlobalIconMixins()).extend({
     },
     value: tabProps.value,
     placement: tabProps.placement,
+    scrollPosition: tabProps.scrollPosition,
     size: tabProps.size,
     disabled: tabProps.disabled,
     addable: tabProps.addable,
@@ -255,7 +256,7 @@ export default mixins(classPrefixMixins, getGlobalIconMixins()).extend({
             rightOperations: this.$refs.rightOperationsZone as HTMLElement,
           },
           this.scrollLeft,
-          'auto',
+          this.scrollPosition,
         ),
       );
     },

diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
 name | type | default | description | required
@@ -10,9 +11,10 @@ addable | Boolean | false | \- | N
 disabled | Boolean | false | \- | N
 dragSort | Boolean | false | \- | N
 list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
-placement | String | top | options：left/top/bottom/right | N
-size | String | medium | options：medium/large | N
-theme | String | normal | options：normal/card | N
+placement | String | top | options: left/top/bottom/right | N
+scrollPosition | String | auto | The final position where the tab item stops scrolling after being selected.。options: auto/start/center/end | N
+size | String | medium | options: medium/large | N
+theme | String | normal | options: normal/card | N
 value | String / Number | - | `v-model` is supported。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts) | N
 defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts) | N
 onAdd | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -29,6 +31,7 @@ change | `(value: TabValue)` | \-
 drag-sort | `(context: TabsDragSortContext)` | trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts)。<br/>`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`<br/>
 remove | `(options: { value: TabValue; index: number; e: MouseEvent })` | \-
 
+
 ### TabPanel Props
 
 name | type | default | description | required

diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
@@ -1,16 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 action | String / Slot / Function | - | 【开发中】选项卡右侧的操作区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 addable | Boolean | false | 选项卡是否可增加 | N
 disabled | Boolean | false | 是否禁用选项卡 | N
 dragSort | Boolean | false | 是否开启拖拽调整顺序 | N
 list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
 placement | String | top | 选项卡位置。可选项：left/top/bottom/right | N
+scrollPosition | String | auto | Tab较多的时候，选中滑块滚动最终停留的位置。可选项：auto/start/center/end | N
 size | String | medium | 组件尺寸。可选项：medium/large | N
 theme | String | normal | 选项卡风格，包含 默认风格 和 卡片风格两种。可选项：normal/card | N
 value | String / Number | - | 激活的选项卡值。支持语法糖 `v-model`。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts) | N
@@ -29,9 +31,10 @@ change | `(value: TabValue)` | 激活的选项卡发生变化时触发
 drag-sort | `(context: TabsDragSortContext)` | 拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts)。<br/>`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`<br/>
 remove | `(options: { value: TabValue; index: number; e: MouseEvent })` | 删除选项卡时触发
 
+
 ### TabPanel Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 default | Slot / Function | - | 用于自定义选项卡导航，同 panel。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N

diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
@@ -101,6 +101,7 @@ export default mixins(Vue as VueConstructor<TabParentInjectVue>, classPrefixMixi
         placement: this.placement,
         addable: this.addable,
         panels: this.panels,
+        scrollPosition: this.scrollPosition,
       };
       return (
         <div

diff --git a/src/tabs/type.ts b/src/tabs/type.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TNode } from '../common';
@@ -27,6 +26,11 @@ export interface TdTabsProps {
    * @default top
    */
   placement?: 'left' | 'top' | 'bottom' | 'right';
+  /**
+   * Tab较多的时候，选中滑块滚动最终停留的位置
+   * @default auto
+   */
+  scrollPosition?: 'auto' | 'start' | 'center' | 'end';
   /**
    * 组件尺寸
    * @default medium