feat(tabs): add support for scrolling via mouse wheel or touchpad

packages/web-vue/components/tabs/README.en-US.md

@@ -24,6 +24,8 @@ description: Organize content in the same view. You can view the content of one
 
 @import ./__demo__/trigger.md
 
+@import ./__demo__/scroll.md
+
 ## API
 
 
@@ -47,6 +49,7 @@ description: Organize content in the same view. You can view the content of one
 |auto-switch|Whether to switch to a new tab after creating a tab (the last one)|`boolean`|`false`|2.18.0|
 |hide-content|Whether to hide content|`boolean`|`false`|2.25.0|
 |trigger|Trigger method|`'hover' \| 'click'`|`'click'`|2.34.0|
+|scroll-position|The scroll position of the selected tab, the default auto will scroll the activeTab to the visible area, but will not adjust the position intentionally|`'start' \| 'end' \| 'center' \| 'auto' \| number`|`'auto'`||
 ### `<tabs>` Events
 
 |Event Name|Description|Parameters|

packages/web-vue/components/tabs/README.zh-CN.md

@@ -22,6 +22,8 @@ description: 将内容组织同一视图中，一次可查看一个视图内容
 
 @import ./__demo__/trigger.md
 
+@import ./__demo__/scroll.md
+
 ## API
 
 
@@ -45,6 +47,7 @@ description: 将内容组织同一视图中，一次可查看一个视图内容
 |auto-switch|创建标签后是否切换到新标签（最后一个）|`boolean`|`false`|2.18.0|
 |hide-content|是否隐藏内容|`boolean`|`false`|2.25.0|
 |trigger|触发方式|`'hover' \| 'click'`|`'click'`|2.34.0|
+|scroll-position|被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整|`'start' \| 'end' \| 'center' \| 'auto' \| number`|`'auto'`||
 ### `<tabs>` Events
 
 |事件名|描述|参数|

packages/web-vue/components/tabs/TEMPLATE.md

@@ -33,6 +33,8 @@ description: Organize content in the same view. You can view the content of one
 
 @import ./__demo__/trigger.md
 
+@import ./__demo__/scroll.md
+
 ## API
 
 %%API(tabs.tsx)%%

packages/web-vue/components/tabs/__demo__/scroll.md

@@ -0,0 +1,79 @@
+```yaml
+title:
+  zh-CN: 滚动
+  en-US: Scrollable
+```
+
+## zh-CN
+
+支持通过滚轮或者触摸板进行滚动操作，且可以通过 `scrollPosition` 属性设置滚动位置。
+
+---
+
+## en-US
+
+Support scrolling operation via scroll wheel or touch pad. And you can set the scroll position through the `scrollPosition` property.
+
+---
+
+```vue
+
+<template>
+  <a-space direction="vertical" size="large">
+    <a-radio-group v-model="position" type="button">
+      <a-radio value="left">Left</a-radio>
+      <a-radio value="top">Top</a-radio>
+      <a-radio value="right">Right</a-radio>
+      <a-radio value="bottom">Bottom</a-radio>
+    </a-radio-group>
+    <a-radio-group v-model="scrollPosition" type="button">
+      <a-radio value="auto">auto</a-radio>
+      <a-radio value="start">start</a-radio>
+      <a-radio value="center">center</a-radio>
+      <a-radio value="end">end</a-radio>
+    </a-radio-group>
+    <a-button @click="changeActive"> Change: {{activeKey}}</a-button>
+  </a-space>
+  <a-tabs
+    v-model:activeKey="activeKey"
+    :position="position"
+    :scrollPosition="scrollPosition"
+    style="width: 100%;height: 300px;margin-top: 20px"
+  >
+    <a-tab-pane v-for="tab in tabs" :key="tab.key" :title="tab.title">
+      {{ tab.content }}
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const position = ref('top');
+    const scrollPosition = ref('auto');
+    const activeKey = ref('Tab1');
+    const tabs = Array.from({ length: 30 }, (v, i) => {
+      return {
+        key: `Tab${i + 1}`,
+        title: `Tab ${i + 1}`,
+        content: `Content of Tab Panel ${i + 1}`
+      }
+    });
+
+    const changeActive = () => {
+      activeKey.value = `Tab${Math.floor(Math.random() * 30) + 1}`;
+    }
+
+    return {
+      tabs,
+      position,
+      scrollPosition,
+      activeKey,
+      changeActive
+    }
+  },
+}
+</script>
+```

packages/web-vue/components/tabs/__test__/__snapshots__/demo.test.ts.snap

@@ -209,6 +209,130 @@ exports[`<tabs> demo: render [position] correctly 1`] = `
 </div>"
 `;
 
+exports[`<tabs> demo: render [scroll] correctly 1`] = `
+"<div class=\\"arco-space arco-space-vertical\\">
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-bottom: 24px;\\"><span class=\\"arco-radio-group-button arco-radio-group-size-undefined arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"left\\"><span class=\\"arco-radio-button-content\\">Left</span></label><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"top\\"><span class=\\"arco-radio-button-content\\">Top</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"right\\"><span class=\\"arco-radio-button-content\\">Right</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"bottom\\"><span class=\\"arco-radio-button-content\\">Bottom</span></label></span></div>
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-bottom: 24px;\\"><span class=\\"arco-radio-group-button arco-radio-group-size-undefined arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"auto\\"><span class=\\"arco-radio-button-content\\">auto</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"start\\"><span class=\\"arco-radio-button-content\\">start</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"center\\"><span class=\\"arco-radio-button-content\\">center</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"end\\"><span class=\\"arco-radio-button-content\\">end</span></label></span></div>
+  <!---->
+  <div class=\\"arco-space-item\\"><button class=\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\" type=\\"button\\">
+      <!--v-if--> Change: Tab1
+    </button></div>
+</div>
+<div class=\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\" style=\\"width: 100%; height: 300px; margin-top: 20px;\\">
+  <!---->
+  <div class=\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\">
+    <!---->
+    <div class=\\"arco-tabs-nav-tab\\">
+      <div class=\\"arco-tabs-nav-tab-list\\" style=\\"transform: translateX(0px);\\">
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"arco-tabs-nav-extra\\">
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <div class=\\"arco-tabs-content\\">
+    <div class=\\"arco-tabs-content-list\\" style=\\"margin-left: -0%;\\">
+      <div class=\\"arco-tabs-content-item arco-tabs-content-item-active\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 1</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 2</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 3</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 4</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 5</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 6</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 7</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 8</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 9</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 10</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 11</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 12</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 13</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 14</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 15</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 16</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 17</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 18</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 19</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 20</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 21</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 22</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 23</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 24</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 25</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 26</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 27</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 28</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 29</div>
+      </div>
+      <div class=\\"arco-tabs-content-item\\">
+        <div class=\\"arco-tabs-pane\\">Content of Tab Panel 30</div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`<tabs> demo: render [trigger] correctly 1`] = `
 "<span class=\\"arco-radio-group arco-radio-group-size-undefined arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"click\\"><span class=\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\"><span class=\\"arco-radio-icon\\"></span></span><span class=\\"arco-radio-label\\">click</span></label><label class=\\"arco-radio\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"hover\\"><span class=\\"arco-icon-hover arco-radio-icon-hover\\"><span class=\\"arco-radio-icon\\"></span></span><span class=\\"arco-radio-label\\">hover</span></label></span>
 <div class=\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\">

packages/web-vue/components/tabs/interface.ts

@@ -19,3 +19,5 @@ export interface TabData {
 }
 
 export type TabTriggerEvent = 'click' | 'hover';
+
+export type ScrollPosition = 'start' | 'end' | 'center' | 'auto' | number;