docs(steps、swiper): add international en-us

src/packages/__VUE/steps/demo.vue

@@ -1,56 +1,56 @@
 <template>
   <div class="demo padding">
-    <h2>基本用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <div class="steps-wrapper">
       <nut-steps :current="current1" @click-step="handleClickStep">
-        <nut-step title="步骤一">
+        <nut-step :title="translate('step1')">
           1
-          <template v-slot:title>步骤一</template>
+          <template v-slot:title>{{ translate('step1') }}</template>
         </nut-step>
-        <nut-step title="步骤二">2</nut-step>
-        <nut-step title="步骤三">3</nut-step>
+        <nut-step :title="translate('step2')">2</nut-step>
+        <nut-step :title="translate('step3')">3</nut-step>
       </nut-steps>
       <div class="steps-button">
-        <nut-button size="mini" type="primary" @click="handleStep('current1')">下一步</nut-button>
+        <nut-button size="mini" type="primary" @click="handleStep('current1')">{{ translate('next') }}</nut-button>
       </div>
     </div>
-    <h2>标题和描述信息</h2>
+    <h2>{{ translate('desc') }}</h2>
     <div class="steps-wrapper">
       <nut-steps :current="current2">
-        <nut-step title="步骤一" content="步骤描述">1</nut-step>
-        <nut-step title="步骤二" content="步骤描述"></nut-step>
-        <nut-step title="步骤三" content="步骤描述"></nut-step>
+        <nut-step :title="translate('step1')" :content="translate('stepdesc')">1</nut-step>
+        <nut-step :title="translate('step2')" :content="translate('stepdesc')"></nut-step>
+        <nut-step :title="translate('step3')" :content="translate('stepdesc')"></nut-step>
       </nut-steps>
       <div class="steps-button" style="margin-top: 10px">
-        <nut-button size="mini" type="primary" @click="handleStep('current2')">下一步</nut-button>
+        <nut-button size="mini" type="primary" @click="handleStep('current2')">{{ translate('next') }}</nut-button>
       </div>
     </div>
-    <h2>自定义图标</h2>
+    <h2>{{ translate('cicon') }}</h2>
     <div class="steps-wrapper">
       <nut-steps current="1">
-        <nut-step title="已完成" icon="service">1</nut-step>
-        <nut-step title="进行中" icon="people">2</nut-step>
-        <nut-step title="未开始" icon="location2">3</nut-step>
+        <nut-step :title="translate('complete')" icon="service">1</nut-step>
+        <nut-step :title="translate('progress')" icon="people">2</nut-step>
+        <nut-step :title="translate('start')" icon="location2">3</nut-step>
       </nut-steps>
     </div>
-    <h2>竖向步骤条</h2>
+    <h2>{{ translate('verstep') }}</h2>
     <div class="steps-wrapper" style="height: 300px; padding: 15px 30px">
       <nut-steps direction="vertical" current="2">
-        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
-        <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-        <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
+        <nut-step :title="translate('complete')" :content="translate('content1')">1</nut-step>
+        <nut-step :title="translate('progress')" :content="translate('content2')">2</nut-step>
+        <nut-step :title="translate('start')" :content="translate('content3')">3</nut-step>
       </nut-steps>
     </div>
-    <h2>竖向步骤条</h2>
-    <div class="steps-wrapper" style="height: 300px; padding: 15px 40px">
+    <h2>{{ translate('verstep') }}</h2>
+    <div class="steps-wrapper" style="height: 350px; padding: 15px 40px">
       <nut-steps direction="vertical" progress-dot current="2">
-        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
-        <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-        <nut-step title="未开始"
+        <nut-step :title="translate('complete')" :content="translate('content1')">1</nut-step>
+        <nut-step :title="translate('progress')" :content="translate('content2')">2</nut-step>
+        <nut-step :title="translate('start')"
           >3
           <template v-slot:content>
-            <p>收货地址为：</p>
-            <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
+            <p>{{ translate('content4') }}：</p>
+            <p>{{ translate('content5') }}</p>
           </template>
         </nut-step>
       </nut-steps>
@@ -61,7 +61,49 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('steps');
+const { createDemo, translate } = createComponent('steps');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    step1: '步骤一',
+    step2: '步骤二',
+    step3: '步骤三',
+    desc: '标题和描述信息',
+    stepdesc: '步骤描述',
+    next: '下一步',
+    cicon: '自定义图标',
+    complete: '已完成',
+    progress: '进行中',
+    start: '未开始',
+    content1: '您的订单已经打包完成，商品已发出',
+    content2: '您的订单正在配送途中',
+    content3: '收货地址为：北京市经济技术开发区科创十一街18号院京东大厦',
+    content4: '收货地址为',
+    content5: '北京市经济技术开发区科创十一街18号院京东大厦',
+    verstep: '竖向步骤条'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    step1: 'Step One',
+    step2: 'Step Two',
+    step3: 'Step Three',
+    desc: 'Title and description information',
+    stepdesc: 'Step description',
+    next: 'next step',
+    cicon: 'Custom Icon',
+    complete: 'Completed',
+    progress: 'In progress',
+    start: 'Not started',
+    content1: 'Your order has been packaged and the goods have been delivered',
+    content2: 'Your order is in transit',
+    content3:
+      'The receiving address is Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone',
+    content4: 'The receiving address is',
+    content5: 'Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone',
+    verstep: 'Vertical step bar'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -88,7 +130,8 @@ export default createDemo({
     return {
       ...toRefs(state),
       handleStep,
-      handleClickStep
+      handleClickStep,
+      translate
     };
   }
 });

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

@@ -0,0 +1,167 @@
+# Steps
+
+### Intro
+
+Split and display the steps of a process, guide users to complete tasks according to the process, or show users the current status.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+//vue
+import { Steps, Step } from '@nutui/nutui';
+//taro
+import { Steps, Step  } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Steps).use(Step);
+```
+
+### Basic Usage
+
+:::demo
+
+```html
+<template>
+  <nut-steps :current="current1" @click-step="handleClickStep">
+    <nut-step title="Step One">
+      1
+      <template v-slot:title>Step One</template>
+    </nut-step>
+    <nut-step title="Not started">2</nut-step>
+    <nut-step title="Not started">3</nut-step>
+    <nut-step title="Not started">4</nut-step>
+  </nut-steps>
+</template>
+<script>
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        current1: 1,
+      });
+      const handleClickStep = (index: number) => {
+        console.log(index)
+      };
+      return { ...toRefs(state), handleClickStep };
+    }
+  };
+</script>
+```
+:::
+
+### Title and description information
+
+:::demo
+
+```html
+<template>
+  <nut-steps :current="current2">
+    <nut-step title="Completed" content="Step description">1</nut-step>
+    <nut-step title="In progress" content="Step description">2</nut-step>
+    <nut-step title="Not started" content="Step description">3</nut-step>
+  </nut-steps>
+</template>
+<script>
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        current2: 1,
+      });
+      return { ...toRefs(state) };
+    }
+  };
+</script>
+```
+
+:::
+
+### Custom icon
+
+:::demo
+
+```html
+<template>
+  <nut-steps current="1">
+    <nut-step title="Completed" icon="service">1</nut-step>
+    <nut-step title="In progress" icon="people">2</nut-step>
+    <nut-step title="Not started" icon="location2">3</nut-step>
+  </nut-steps>
+</template>
+```
+
+:::
+
+### Vertical step bar
+
+:::demo
+
+```html
+<template>
+  <nut-steps direction="vertical" current="2">
+    <nut-step title="Completed" content="Your order has been packaged and the goods have been delivered">1</nut-step>
+    <nut-step title="In progress" content="Your order is in transit">2</nut-step>
+    <nut-step title="Not started" content="The receiving address is Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone">3</nut-step>
+  </nut-steps>
+</template>
+```
+
+:::
+
+### Point step and vertical direction
+
+:::demo
+
+```html
+<template>
+  <nut-steps direction="vertical" progress-dot current="2">
+    <nut-step title="Completed" content="Your order has been packaged and the goods have been delivered">1</nut-step>
+    <nut-step title="In progress" content="Your order is in transit">2</nut-step>
+    <nut-step title="Not started">
+      3
+      <template v-slot:content>
+        <p>The receiving address is：</p>
+        <p>Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone</p>
+      </template>
+    </nut-step>
+  </nut-steps>
+</template>
+```
+
+:::
+
+
+## API
+
+### Props
+
+#### nut-steps
+
+| Attribute       | Description                                         | Type             | Default |
+| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
+| direction	             | 	Show direction，`horizontal`,`vertical`  | String        | 'horizontal'  | 
+| current	               | 	Current step           | Number、String        | '0'      |
+| progress-dot            |  Dot step bar     | Boolean | false         |
+
+#### nut-steps events
+
+| Event | Description                  | Arguments   |
+|--------|----------------|--------------|
+| click-step  | Triggered when the title or icon of the step is clicked | index: number |
+
+#### nut-step
+
+| Attribute       | Description                         | Type             | Default |
+| ---------------- | ---------------------- | ------------ | ----------- |
+| title            | Title of the process step         | String | Step |
+| content          | Descriptive text of process steps (supporting HTML structure)      | String | Step description |
+| icon          | Icon       | String | null |
+| icon-color          | Icon color       | String | null |
+
+#### nut-step slots
+
+| Event | Description                  |
+| ---------------- | ---------------------- |
+| title            | Step title         |
+| content          | Step content       |

src/packages/__VUE/steps/doc.md

@@ -17,8 +17,6 @@ const app = createApp();
 app.use(Steps).use(Step);
 ```
 
-## 代码演示
-
 ### 基本用法
 
 :::demo

src/packages/__VUE/swiper/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <h2>基本用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <view class="demo-box">
       <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
         <nut-swiper-item v-for="item in list" :key="item">
@@ -8,7 +8,7 @@
         </nut-swiper-item>
       </nut-swiper>
     </view>
-    <h2>自定义大小</h2>
+    <h2>{{ translate('size') }}</h2>
     <view class="demo-box">
       <nut-swiper :init-page="page2" :loop="false" width="300">
         <nut-swiper-item v-for="item in list" :key="item">
@@ -16,7 +16,7 @@
         </nut-swiper-item>
       </nut-swiper>
     </view>
-    <h2>自定义指示器</h2>
+    <h2>{{ translate('indicator') }}</h2>
     <view class="demo-box">
       <nut-swiper :init-page="page3" :loop="true" @change="change">
         <nut-swiper-item v-for="item in list" :key="item">
@@ -27,7 +27,7 @@
         </template>
       </nut-swiper>
     </view>
-    <h2>垂直方向</h2>
+    <h2>{{ translate('vertical') }}</h2>
     <view class="demo-box">
       <nut-swiper
         :init-page="page4"
@@ -49,7 +49,22 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('swiper');
+const { createDemo, translate } = createComponent('swiper');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    size: '自定义大小',
+    indicator: '自定义指示器',
+    vertical: '垂直方向'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    size: 'Custom size',
+    indicator: 'Custom indicator',
+    vertical: 'Vertical direction'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -71,7 +86,8 @@ export default createDemo({
     };
     return {
       ...toRefs(state),
-      change
+      change,
+      translate
     };
   }
 });

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

@@ -0,0 +1,266 @@
+# Swiper
+
+### Intro
+
+Often used in a group of pictures or card rotation.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+//vue
+import { Swiper,SwiperItem } from '@nutui/nutui';
+//taro
+import { Swiper,SwiperItem } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Swiper).use(SwiperItem);
+```
+
+### Basic Usage
+
+`auto-play` Duration of automatic rotation
+`init-page` Initial index value
+`pagination-visible` Show paging indicator
+`pagination-color` Indicator color customization
+
+:::demo
+
+```html
+<template>
+  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page: 2,
+      });
+      return { ...toRefs(state) };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
+```
+
+:::
+
+### Custom size
+
+`width` Custom rotation size
+
+:::demo
+
+```html
+<template>
+  <nut-swiper :init-page="page2" :loop="false" width="300">
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page2: 2,
+      });
+      return { ...toRefs(state) };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
+```
+
+:::
+
+### Custom paging indicator
+
+`v-slot:page` Represents a custom indicator
+
+:::demo
+
+```html
+<template>
+  <nut-swiper :init-page="page3" :loop="true" @change="change">
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+      </nut-swiper-item>
+      <template v-slot:page>
+        <div class="page"> {{ current }}/4 </div>
+      </template>
+  </nut-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page3: 0,
+        current: 1
+      });
+      const change = (index: number) => {
+        state.current = index + 1;
+      };
+      return { ...toRefs(state), change };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .page {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 46px;
+    height: 22px;
+    background: rgba(0, 0, 0, 0.33);
+    border-radius: 22px;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+  }
+</style>
+```
+
+:::
+
+### Vertical direction
+
+`direction` Custom rotation direction
+
+:::demo
+
+```html
+<template>
+  <nut-swiper :init-page="page4" :loop="true" auto-play="3000" direction="vertical" height="150" :pagination-visible="true" style="height: 150px">
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+    </nut-swiper-item>
+    <nut-swiper-item>
+      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page4: 0
+      });
+      return { ...toRefs(state) };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
+```
+
+:::
+
+
+## API
+
+### Props
+
+| Attribute                   | Description                                                        | Type           | Default      |
+| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
+| width                   | Width of rotation card           | Number、String        | window.innerWidth       |
+| height                | Height of rotation card                                                    | String、Number | 0        |
+| direction               | Rotation direction, optional value：`horizontal`,`vertical`     | String | 'horizontal'         |
+| pagination-visible          | Is the paging indicator displayed                                           | Boolean         | false           |
+| pagination-color         | The color selected by the pagination indicator                                              | String  | '#fff'           |
+| loop           | Whether to rotate                                             | Boolean        | true       |
+| duration                | Animation duration（Unit ms）                            | Number、String        | 500        |
+| auto-play | Automatic rotation duration, 0 means no automatic rotation                                          | Number、String        | 0        |
+| init-page               | Initialize index value                   | Number、String         | 0    |
+| touchable             | if touchable to slide                                                      | Boolean         | true          |
+| is-preventDefault                  | Disable default events during sliding                                              | Boolean  | true           |
+| is-stopPropagation               | Is bubbling prohibited during sliding                    | Boolean         | true    |
+
+
+
+### Events
+
+| Event           | Description                   | Arguments     |
+| ---------------- | ---------------------- | ------------ |
+| change            | Callback after sliding        |  Current index value |
+
+
+
+### API
+
+| Event           | Description                   | Arguments     |
+| ---------------- | ---------------------- | ------------ |
+| prev            | Switch to previous page         | - |
+| next            | Switch to next page         | - |
+| to            | Switch to the specified rotation         | index:number |

src/packages/__VUE/swiper/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
+常用于一组图片或卡片轮播。
 
 ### 安装
 
@@ -17,8 +17,6 @@ const app = createApp();
 app.use(Swiper).use(SwiperItem);
 ```
 
-## 代码演示
-
 ### 基础用法
 
 `auto-play` 自动轮播的时长