docs(tabs): add international en-us

src/packages/__VUE/tabs/demo.vue

@@ -1,41 +1,41 @@
 <template>
   <div class="demo full">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-tabs v-model="state.tab1value">
       <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
       <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
     </nut-tabs>
-    <h2>基础用法-微笑曲线</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-tabs v-model="state.tab11value" type="smile">
       <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
       <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
     </nut-tabs>
-    <h2>通过 pane-key 匹配</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-tabs v-model="state.tab2value">
       <nut-tabpane title="Tab 1" pane-key="0"> Tab 1 </nut-tabpane>
       <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>数据异步渲染 3s</h2>
+    <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>
     </nut-tabs>
 
-    <h2>数量多,滚动操作</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
       <nut-tabpane v-for="item in state.list4" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
-    <h2>左右布局</h2>
+    <h2>{{ translate('title5') }}</h2>
     <nut-tabs style="height: 300px" v-model="state.tab5value" title-scroll direction="vertical">
       <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
-    <h2>左右布局-微笑曲线</h2>
+    <h2>{{ translate('title6') }}</h2>
     <nut-tabs style="height: 300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
       <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
-    <h2>标签栏字体尺寸 large normal small </h2>
+    <h2>{{ translate('title7') }}</h2>
     <nut-tabs v-model="state.tab1value" size="large">
       <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
       <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
@@ -51,7 +51,7 @@
       <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
     </nut-tabs>
-    <h2>自定义标签栏</h2>
+    <h2>{{ translate('title8') }}</h2>
     <nut-tabs v-model="state.tab7value">
       <template v-slot:titles>
         <div
@@ -74,9 +74,37 @@
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue';
+import { reactive, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('tabs');
+const { createDemo, translate } = createComponent('tabs');
+
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    title1: '基础用法-微笑曲线',
+    title2: '通过 pane-key 匹配',
+    title3: '数据异步渲染 3s',
+    title4: '数量多,滚动操作',
+    title5: '左右布局',
+    title6: '左右布局-微笑曲线',
+    title7: '标签栏字体尺寸 large normal small',
+    title8: '自定义标签栏',
+    custom: (val: string) => `自定义 ${1}`
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Basic Usage - Smile Curve',
+    title2: 'Match by pane-key',
+    title3: 'Data is rendered asynchronously for 3s',
+    title4: 'A large number of scrolling operations',
+    title5: 'Left and right layout',
+    title6: 'Left and Right Layout - Smile Curve',
+    title7: 'tab bar font size large normal small',
+    title8: 'custom tab bar',
+    custom: (val: string) => `custom ${1}`
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -92,29 +120,29 @@ export default createDemo({
       list3: Array.from(new Array(2).keys()),
       list4: Array.from(new Array(10).keys()),
       list5: Array.from(new Array(2).keys()),
-      list6: [
+      list6: computed(() => [
         {
-          title: '自定义 1',
+          title: translate('custom', 1),
           paneKey: 'c1',
           icon: 'dongdong'
         },
         {
-          title: '自定义 2',
+          title: translate('custom', 2),
           paneKey: 'c2',
           icon: 'JD'
         },
         {
-          title: '自定义 3',
+          title: translate('custom', 3),
           paneKey: 'c3'
         }
-      ]
+      ])
     });
     setTimeout(() => {
       state.list3.push(999);
       state.tab3value = '2';
     }, 3000);
 
-    return { state };
+    return { state, translate };
   }
 });
 </script>

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

@@ -0,0 +1,347 @@
+# Tabs
+
+### Intro
+
+It is often used for the storage and display of large blocks of content in the level area, and supports the form of embedded tags and rendering loop data.
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { Tabs, TabPane } from '@nutui/nutui';
+// taro
+import { Tabs, TabPane } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Tabs);
+app.use(TabPane);
+```
+
+### Basic Usage
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab1value">
+  <nut-tabpane title="Tab 1">
+    Tab 1
+  </nut-tabpane>
+  <nut-tabpane title="Tab 2">
+    Tab 2
+  </nut-tabpane>
+  <nut-tabpane title="Tab 3">
+    Tab 3
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab1value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Basic Usage - Smile Curve
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab11value" type="smile">
+  <nut-tabpane title="Tab 1">
+    Tab 1
+  </nut-tabpane>
+  <nut-tabpane title="Tab 2">
+    Tab 2
+  </nut-tabpane>
+  <nut-tabpane title="Tab 3">
+    Tab 3
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab11value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Match by pane-key
+
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab2value">
+  <nut-tabpane title="Tab 1" pane-key="0">
+    Tab 1
+  </nut-tabpane>
+  <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>
+</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
+```html
+<template>
+<nut-tabs v-model="state.tab3value">
+  <nut-tabpane v-for="item in state.list3" :title="'Tab '+ item">
+    Tab {{item}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab3value: '0',
+      list3: Array.from(new Array(2).keys()),
+    });
+    setTimeout(() => {
+      state.list3.push(999);
+      state.tab3value = '2';
+    }, 3000);
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### A large number of scrolling operations
+
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
+  <nut-tabpane v-for="item in state.list4" :title="'Tab '+ item">
+    Tab {{item}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab1value: '0',
+      list4: Array.from(new Array(10).keys()),
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Left and right layout
+
+:::demo
+```html
+<template>
+<nut-tabs style="height:300px" v-model="state.tab5value" title-scroll direction="vertical">
+  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
+    Tab {{item}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab5value: '0',
+      list5: Array.from(new Array(2).keys()),
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Left and Right Layout - Smile Curve
+
+:::demo
+```html
+<template>
+<nut-tabs style="height:300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
+  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
+    Tab {{item}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab6value: '0',
+      list5: Array.from(new Array(2).keys()),
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### tab bar font size large normal small
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab1value" size="large">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+<nut-tabs v-model="state.tab1value" size="normal">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+<nut-tabs v-model="state.tab1value" size="small">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab1value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### custom tab bar
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab7value">
+  <template v-slot:titles>
+    <div class="nut-tabs__titles-item" @click="state.tab7value=item.paneKey"
+      :class="{active:state.tab7value==item.paneKey}" :key="item.paneKey" v-for="item in state.list6">
+      <nut-icon v-if="item.icon" :name="item.icon" />
+      <span class="nut-tabs__titles-item__text">{{item.title}}</span>
+      <span class="nut-tabs__titles-item__line"></span>
+    </div>
+  </template>
+  <nut-tabpane v-for="item in state.list6" :pane-key="item.paneKey">
+    {{item.title}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab7value: 'c1',
+       list6: [
+        {
+          title: 'custom 1',
+          paneKey: 'c1',
+          icon: 'dongdong'
+        },
+        {
+          title: 'custom 2',
+          paneKey: 'c2',
+          icon: 'JD'
+        },
+        {
+          title: 'custom 3',
+          paneKey: 'c3'
+        }
+      ]
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+## API
+
+### 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     |
+
+## Tabs Slots
+
+| Name    | Description            |
+|---------|------------------------|
+| titles  | Custom Titles Area     |
+| default | Custom Default Content |
+
+### Tabpane Props
+
+| Attribute | Description                       | Type    | Default          |
+|-----------|-----------------------------------|---------|------------------|
+| title     | title                             | string  |                  |
+| pane-key  | Tag Key , the matching identifier | string  | 默认索引0,1,2... |
+| disabled  | whether to disable tabs           | boolean | false            |
+
+
+## Tabpane Slots
+
+| Name    | Description            |
+|---------|------------------------|
+| default | Custom Default Content |
+
+### Tabs Events
+
+| Event  | Description                                 | Arguments                |
+|--------|---------------------------------------------|--------------------------|
+| click  | Triggered when the label is clicked         | {title,paneKey,disabled} |
+| change | Fired when the currently active tab changes | {title,paneKey,disabled} |
+