docs(indicator、list、sidenavbar): add international en-us

src/packages/__VUE/indicator/demo.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell>
       <nut-indicator :size="3" :current="3">step1</nut-indicator>
     </nut-cell>
     <nut-cell>
       <nut-row>
         <nut-col :span="12">
-          <nut-button size="small" type="primary">主要按钮</nut-button>
+          <nut-button size="small" type="primary">{{ translate('button') }}</nut-button>
         </nut-col>
         <nut-col :span="12">
           <nut-indicator :block="true" align="right" :size="6" :current="5">step1</nut-indicator>
         </nut-col>
       </nut-row>
     </nut-cell>
-    <h2>block用法</h2>
+    <h2>{{ translate('title') }}</h2>
     <nut-cell>
       <nut-indicator :block="true" algin="center" :size="6" :current="5">step1</nut-indicator>
     </nut-cell>
@@ -24,7 +24,7 @@
     <nut-cell>
       <nut-indicator :block="true" align="right" :size="6" :current="5">step1</nut-indicator>
     </nut-cell>
-    <h2>不补0</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-cell>
       <nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
     </nut-cell>
@@ -33,11 +33,26 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('Indicator');
+const { createDemo, translate } = createComponent('Indicator');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    button: '主要按钮',
+    title: 'block用法',
+    title2: '不补0'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    button: 'Main Button',
+    title: 'Block usage',
+    title2: 'Do not make up 0'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
-    return {};
+    return { translate };
   }
 });
 </script>

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

@@ -0,0 +1,83 @@
+# Indicator
+
+### Intro
+
+Displays the progress of a task or process, which is often used to open a process.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+// vue
+import { Indicator } from '@nutui/nutui'
+// taro
+import { Indicator } from '@nutui/nutui-taro'
+
+const app = createApp();
+
+app.use(Indicator);
+
+```
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+  <nut-cell>
+    <nut-indicator :size="3" :current="3">step1</nut-indicator>
+  </nut-cell>
+  <nut-cell>
+    <nut-row>
+      <nut-col :span="12">
+        <nut-button size="small" type="primary">Main button</nut-button>
+      </nut-col>
+      <nut-col :span="12">
+        <nut-indicator :block="true" align="right" :size="6" :current="5">step1</nut-indicator>
+      </nut-col>
+    </nut-row>
+  </nut-cell>
+</template>
+```
+:::
+
+### Block usage
+:::demo
+```html
+<template>
+    <nut-cell>
+      <nut-indicator :block="true" algin="center" :size="6" :current="5">step1</nut-indicator>
+    </nut-cell>
+    <nut-cell>
+      <nut-indicator :block="true" align="left" :size="6" :current="1">step1</nut-indicator>
+    </nut-cell>
+    <nut-cell>
+      <nut-indicator :block="true" align="right" :size="6" :current="5">step1</nut-indicator>
+    </nut-cell>
+</template>
+```
+:::
+
+### Do not make up 0
+:::demo
+```html
+<template>
+    <nut-cell>
+      <nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
+    </nut-cell>
+</template>
+```
+:::
+
+
+## API
+
+### Props
+
+| Attribute         | Description                             | Type   | Default           |
+|--------------|----------------------------------|--------|------------------|
+| current  | Current step               | Number | 1              |
+| size       | Step length                         | Number | 3               |
+| block | Enable block level layout     | Boolean | false |
+| align | Alignment, which takes effect only when `block` is true. optional value 'left', 'right', 'center'| String | left |
+| fill-zero     | Whether to add 0 before singular number                      | Boolean | true        |

src/packages/__VUE/list/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell>
       <nut-list :height="50" :listData="count" @scroll="handleScroll">
         <template v-slot="{ item }">
@@ -15,7 +15,16 @@
 <script lang="ts">
 import { onMounted, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('list');
+const { createDemo, translate } = createComponent('list');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法'
+  },
+  'en-US': {
+    basic: 'Basic Usage'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -33,7 +42,7 @@ export default createDemo({
       state.count = state.count.map((item: number, index: number) => index + 1);
     });
 
-    return { ...toRefs(state), handleScroll };
+    return { ...toRefs(state), handleScroll, translate };
   }
 });
 </script>

src/packages/__VUE/list/doc.md

@@ -1,7 +1,7 @@
 # List 虚拟列表
 
 ### 介绍
-在正常的列表展示以及上拉加载中，我们通常使用 `NutUI` 提供的 [滚动加载](#/infiniteloading) 组件，那如果我们加载的数据量非常大时，则可能会产生严重的性能问题，导致视图无法响应操作一段时间，这时候我们就用到了虚拟列表组件 `List`，它可以保证只渲染当前可视区域，其他部分在用户滚动到可视区域内之后再渲染。保证了页面流程度，提升性能。
+在正常的列表展示以及上拉加载中，我们通常使用 `NutUI` 提供的 [滚动加载](#/zh-CN/infiniteloading) 组件，那如果我们加载的数据量非常大时，则可能会产生严重的性能问题，导致视图无法响应操作一段时间，这时候我们就用到了虚拟列表组件 `List`，它可以保证只渲染当前可视区域，其他部分在用户滚动到可视区域内之后再渲染。保证了页面流程度，提升性能。
 
 ### 安装
 

src/packages/__VUE/sidenavbar/demo.vue

@@ -1,62 +1,72 @@
 <template>
   <div class="demo">
-    <h2>基本用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell @click="handleClick1">
-      <span><label>右侧</label></span>
+      <span
+        ><label>{{ translate('right') }}</label></span
+      >
     </nut-cell>
     <nut-popup position="right" v-model:visible="show1" :style="{ width, height }">
       <nut-sidenavbar>
-        <nut-subsidenavbar title="智能城市AI" ikey="6">
-          <nut-subsidenavbar title="人体识别1" ikey="9">
-            <nut-sidenavbaritem ikey="10" title="人体检测1"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="11" title="细粒度人像分割1"></nut-sidenavbaritem>
+        <nut-subsidenavbar :title="translate('title1')" ikey="6">
+          <nut-subsidenavbar :title="translate('title2')" ikey="9">
+            <nut-sidenavbaritem ikey="10" :title="translate('title3')"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="11" :title="translate('title4')"></nut-sidenavbaritem>
           </nut-subsidenavbar>
-          <nut-subsidenavbar title="人体识别2" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="人体检测2"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="细粒度人像分割2"></nut-sidenavbaritem>
+          <nut-subsidenavbar :title="translate('title16')" ikey="12">
+            <nut-sidenavbaritem ikey="13" :title="translate('title5')"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="14" :title="translate('title6')"></nut-sidenavbaritem>
           </nut-subsidenavbar>
         </nut-subsidenavbar>
       </nut-sidenavbar>
     </nut-popup>
     <nut-cell @click="handleClick2">
-      <span><label>左侧</label></span>
+      <span
+        ><label>{{ translate('left') }}</label></span
+      >
     </nut-cell>
     <nut-popup position="left" v-model:visible="show2" :style="{ width, height }">
       <nut-sidenavbar>
-        <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
-          <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+        <nut-subsidenavbar :title="translate('title7')" ikey="3" :open="false">
+          <nut-sidenavbaritem ikey="4" :title="translate('title8')"></nut-sidenavbaritem>
+          <nut-sidenavbaritem ikey="5" :title="translate('title9')"></nut-sidenavbaritem>
         </nut-subsidenavbar>
-        <nut-subsidenavbar title="自然语言处理" ikey="12">
-          <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+        <nut-subsidenavbar :title="translate('title10')" ikey="12">
+          <nut-sidenavbaritem ikey="13" :title="translate('title11')"></nut-sidenavbaritem>
+          <nut-sidenavbaritem ikey="14" :title="translate('title12')"></nut-sidenavbaritem>
         </nut-subsidenavbar>
       </nut-sidenavbar>
     </nut-popup>
-    <h2>导航嵌套（建议最多三层）,点击第一条回调</h2>
+    <h2>{{ translate('nest') }}</h2>
     <div>
       <nut-cell @click="handleClick3">
-        <span><label>显示</label></span>
+        <span
+          ><label>{{ translate('show') }}</label></span
+        >
       </nut-cell>
       <nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
         <nut-sidenavbar :show="show3">
-          <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick4('人脸识别')"></nut-sidenavbaritem>
-          <nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
-          <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
-            <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+          <nut-sidenavbaritem
+            ikey="1"
+            :title="translate('title13')"
+            @click="handleClick4(translate('title13'))"
+          ></nut-sidenavbaritem>
+          <nut-sidenavbaritem ikey="2" :title="translate('title10')"></nut-sidenavbaritem>
+          <nut-subsidenavbar :title="translate('title7')" ikey="3" :open="false">
+            <nut-sidenavbaritem ikey="4" :title="translate('title8')"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="5" :title="translate('title9')"></nut-sidenavbaritem>
           </nut-subsidenavbar>
-          <nut-subsidenavbar title="智能城市AI" ikey="6">
-            <nut-sidenavbaritem ikey="7" title="企业风险预警模型"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="8" title="水质量检测"></nut-sidenavbaritem>
-            <nut-subsidenavbar title="人体识别" ikey="9">
-              <nut-sidenavbaritem ikey="10" title="人体检测"></nut-sidenavbaritem>
-              <nut-sidenavbaritem ikey="11" title="细粒度人像分割"></nut-sidenavbaritem>
+          <nut-subsidenavbar :title="translate('title1')" ikey="6">
+            <nut-sidenavbaritem ikey="7" :title="translate('title14')"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="8" :title="translate('title15')"></nut-sidenavbaritem>
+            <nut-subsidenavbar :title="translate('title2')" ikey="9">
+              <nut-sidenavbaritem ikey="10" :title="translate('title3')"></nut-sidenavbaritem>
+              <nut-sidenavbaritem ikey="11" :title="translate('title4')"></nut-sidenavbaritem>
             </nut-subsidenavbar>
           </nut-subsidenavbar>
-          <nut-subsidenavbar title="自然语言处理" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+          <nut-subsidenavbar :title="translate('title10')" ikey="12">
+            <nut-sidenavbaritem ikey="13" :title="translate('title11')"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="14" :title="translate('title12')"></nut-sidenavbaritem>
           </nut-subsidenavbar>
           <nut-subsidenavbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
             <nut-sidenavbaritem v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-sidenavbaritem>
@@ -70,8 +80,57 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('sidenavbar');
+const { createDemo, translate } = createComponent('sidenavbar');
 import { Toast } from '@/packages/nutui.vue';
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '智能城市AI',
+    title2: '人体识别1',
+    title3: '人体检测1',
+    title4: '细粒度人像分割1',
+    title5: '人体检测2',
+    title6: '细粒度人像分割2',
+    title7: '图像理解',
+    title8: '菜品识别',
+    title9: '拍照购',
+    title10: '自然语言处理',
+    title11: '词法分析',
+    title12: '句法分析',
+    title13: '人脸识别',
+    title14: '企业风险预警模型',
+    title15: '水质量检测',
+    title16: '人体识别2',
+    left: '左侧',
+    right: '右侧',
+    show: '显示',
+    nest: '导航嵌套（建议最多三层）,点击第一条回调'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Intelligent City Ai',
+    title2: 'Human body recognition 1',
+    title3: 'Human testing 1',
+    title4: 'Fine grained portrait segment 1',
+    title5: 'Human testing 2',
+    title6: 'Fine grained portrait segment 2',
+    title7: 'image understanding',
+    title8: 'Dish identification',
+    title9: 'Photo shopping',
+    title10: 'natural language processing',
+    title11: 'lexical analysis',
+    title12: 'Syntactic analysis',
+    title13: 'Face recognition',
+    title14: 'Enterprise risk early warning model',
+    title15: 'Water quality inspection',
+    title16: 'Human body recognition 2',
+    left: 'left',
+    right: 'right',
+    show: 'show',
+    nest: 'Navigation nesting (up to three layers are recommended), and click the first callback'
+  }
+});
 export default createDemo({
   setup() {
     const state = reactive({
@@ -97,12 +156,12 @@ export default createDemo({
         state.navs = [
           {
             id: 16,
-            name: '异步abc16',
+            name: 'asyc abc16',
             arr: [{ pid: 16, id: 17, name: 'abc16-id17' }]
           },
           {
             id: 17,
-            name: '异步abc17',
+            name: 'asyc abc17',
             arr: [{ pid: 17, id: 18, name: 'abc17-id18' }]
           }
         ];
@@ -118,7 +177,8 @@ export default createDemo({
       handleClick1,
       handleClick2,
       handleClick3,
-      handleClick4
+      handleClick4,
+      translate
     };
   }
 });

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

@@ -0,0 +1,186 @@
+# SideNavBar
+
+### Intro
+
+For content selection and switching
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui';
+// taro
+import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(SideNavBar).use(SubSideNavBar).use(SideNavBarItem);
+```
+
+### Basic Usage
+
+:::demo
+
+``` html
+<template>
+  <nut-cell @click="handleClick1">
+    <span><label>right</label></span>
+  </nut-cell>
+  <nut-popup position="right" v-model:visible="show1" :style="{ width, height }">
+    <nut-sidenavbar>
+      <nut-subsidenavbar title="Intelligent City Ai" ikey="6">
+        <nut-subsidenavbar title="Human body recognition 1" ikey="9">
+          <nut-sidenavbaritem ikey="10" title="Human testing 1"></nut-sidenavbaritem>
+          <nut-sidenavbaritem ikey="11" title="Fine grained portrait segment 1"></nut-sidenavbaritem>
+        </nut-subsidenavbar>
+        <nut-subsidenavbar title="Human body recognition 2" ikey="12">
+          <nut-sidenavbaritem ikey="13" title="Human testing 2"></nut-sidenavbaritem>
+          <nut-sidenavbaritem ikey="14" title="Fine grained portrait segment 2"></nut-sidenavbaritem>
+        </nut-subsidenavbar>
+      </nut-subsidenavbar>
+    </nut-sidenavbar>
+  </nut-popup>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        show1: false,
+        width: '80%',
+        height: '100%',
+      });
+
+      const handleClick1 = () => {
+        state.show1 = true;
+      };
+
+      return {
+        ...toRefs(state),
+        handleClick1
+      };
+    }
+  }
+</script>
+```
+
+:::
+
+### Nesting (up to three layers recommended)
+> The miniProgram does not support asynchronous loading temporarily
+
+:::demo
+
+``` html
+<template>
+  <nut-cell @click="handleClick3">
+    <span><label>show</label></span>
+  </nut-cell>
+  <nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
+    <nut-sidenavbar :show="show3">
+      <nut-sidenavbaritem ikey="1" title="Face recognition" @click="handleClick4('Face recognition')"></nut-sidenavbaritem>
+      <nut-sidenavbaritem ikey="2" title="natural language processing"></nut-sidenavbaritem>
+      <nut-subsidenavbar title="image understanding" ikey="3" :open="false">
+        <nut-sidenavbaritem ikey="4" title="Dish identification"></nut-sidenavbaritem>
+        <nut-sidenavbaritem ikey="5" title="Photo shopping"></nut-sidenavbaritem>
+      </nut-subsidenavbar>
+      <nut-subsidenavbar title="Intelligent City Ai" ikey="6">
+        <nut-sidenavbaritem ikey="7" title="Enterprise risk early warning model"></nut-sidenavbaritem>
+        <nut-sidenavbaritem ikey="8" title="Water quality inspection"></nut-sidenavbaritem>
+        <nut-subsidenavbar title="Human body recognition" ikey="9">
+          <nut-sidenavbaritem ikey="10" title="Human testing"></nut-sidenavbaritem>
+          <nut-sidenavbaritem ikey="11" title="Fine grained portrait segment"></nut-sidenavbaritem>
+        </nut-subsidenavbar>
+      </nut-subsidenavbar>
+      <nut-subsidenavbar title="natural language processing" ikey="12">
+        <nut-sidenavbaritem ikey="13" title="lexical analysis"></nut-sidenavbaritem>
+        <nut-sidenavbaritem ikey="14" title="Syntactic analysis"></nut-sidenavbaritem>
+      </nut-subsidenavbar>
+      <nut-subsidenavbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
+        <nut-sidenavbaritem v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-sidenavbaritem>
+      </nut-subsidenavbar>
+    </nut-sidenavbar>
+  </nut-popup>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        show3: false,
+        width: '80%',
+        height: '100%',
+        navs: [] as any[]
+      });
+
+      const handleClick3 = () => {
+        state.show3 = true;
+        setTimeout(() => {
+          state.navs = [
+            {
+              id: 16,
+              name: 'asyc abc16',
+              arr: [{ pid: 16, id: 17, name: 'abc16-id17' }]
+            },
+            {
+              id: 17,
+              name: 'asyc abc17',
+              arr: [{ pid: 17, id: 18, name: 'abc17-id18' }]
+            }
+          ];
+        }, 2000);
+      };
+
+      const handleClick4 = (msg: string) => {
+        
+      }
+
+      return {
+        ...toRefs(state),
+        handleClick3,
+        handleClick4
+      };
+    }
+  }
+</script>
+```
+
+:::
+
+## API
+
+### SideNavBar
+
+| Attribute                   | Description                                                             | Type    | Default |
+|------------------------|----------------------------------------------------------------|---------|------|
+| offset                 | Navigation indent width                                                    | Number、String  | `15`
+
+### SubSideNavBar
+
+| Attribute                   | Description                                                             | Type    | Default |
+|------------------------|----------------------------------------------------------------|---------|------|
+| title                 | Navigation title                                                    | String  | ``
+| ikey                 | Navigation unique identifier                                                    | String、Number  | ``
+| open                 | Whether navigation is expanded by default                                                    | Boolean  | `true`
+
+### SideNavBarItem
+
+| Attribute                   | Description                                                             | Type    | Default |
+|------------------------|----------------------------------------------------------------|---------|------|
+| title                 | Navigation title                                                    | String  | `15`
+| ikey                 | Navigation unique identifier                                                    | String、Number  | ``
+
+
+### SubSideNavBar Event
+
+| Event  | Description     | Arguments    |
+|-------|----------|-------------|
+| title-click | Navigation Click | - |
+
+### SideNavBarItem Event
+
+| Event  | Description     | Arguments    |
+|-------|----------|-------------|
+| click | Navigation Click | - |
+
+

src/packages/__VUE/sidenavbar/doc.md

@@ -79,7 +79,7 @@ app.use(SideNavBar).use(SubSideNavBar).use(SideNavBarItem);
   <nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
     <nut-sidenavbar :show="show3">
       <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick4('人脸识别')"></nut-sidenavbaritem>
-      <nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
+      <nut-sidenavbaritem ikey="2" title="自然语言处理"></nut-sidenavbaritem>
       <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
         <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
         <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
@@ -119,12 +119,12 @@ app.use(SideNavBar).use(SubSideNavBar).use(SideNavBarItem);
           state.navs = [
             {
               id: 16,
-              name: '异步abc16',
+              name: 'asyc abc16',
               arr: [{ pid: 16, id: 17, name: 'abc16-id17' }]
             },
             {
               id: 17,
-              name: '异步abc17',
+              name: 'asyc abc17',
               arr: [{ pid: 17, id: 18, name: 'abc17-id18' }]
             }
           ];