docs(swipe): add international en-us

src/packages/__VUE/swipe/demo.vue

@@ -1,54 +1,59 @@
 <template>
   <div class="demo full">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-swipe>
-      <nut-cell round-radius="0" desc="左滑删除" />
+      <nut-cell round-radius="0" :desc="translate('leftDel')" />
       <template #right>
-        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
       </template>
     </nut-swipe>
-    <h2>禁止滑动</h2>
+    <h2>{{ translate('disable') }}</h2>
     <nut-swipe disabled>
-      <nut-cell round-radius="0" desc="禁止滑动" />
+      <nut-cell round-radius="0" :desc="translate('disable')" />
       <template #right>
-        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
       </template>
     </nut-swipe>
-    <h2>左右滑动</h2>
+    <h2>{{ translate('swipeLR') }}</h2>
     <nut-swipe>
       <template #left>
-        <nut-button shape="square" style="height: 100%" type="success">选择</nut-button>
+        <nut-button shape="square" style="height: 100%" type="success">{{ translate('select') }}</nut-button>
       </template>
-      <nut-cell round-radius="0" desc="左滑右滑都可以哦" />
+      <nut-cell round-radius="0" :desc="translate('swipeLRDesc')" />
       <template #right>
-        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
-        <nut-button shape="square" style="height: 100%" type="info">收藏</nut-button>
+        <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
+        <nut-button shape="square" style="height: 100%" type="info">{{ translate('collect') }}</nut-button>
       </template>
     </nut-swipe>
-    <h2>异步控制</h2>
+    <h2>{{ translate('async') }}</h2>
     <nut-swipe ref="refSwipe" @open="open" @close="close">
-      <nut-cell title="异步打开关闭">
+      <nut-cell :title="translate('asyncDesc')">
         <template v-slot:link>
-          <nut-switch v-model="checked" @change="changSwitch" active-text="开" inactive-text="关" />
+          <nut-switch
+            v-model="checked"
+            @change="changSwitch"
+            :active-text="translate('open')"
+            :inactive-text="translate('close')"
+          />
         </template>
       </nut-cell>
       <template #right>
-        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
       </template>
     </nut-swipe>
-    <h2>自定义</h2>
+    <h2>{{ translate('custom') }}</h2>
     <nut-swipe>
       <template #left>
-        <nut-button shape="square" style="height: 100%" type="success">选择</nut-button>
+        <nut-button shape="square" style="height: 100%" type="success">{{ translate('select') }}</nut-button>
       </template>
-      <nut-cell title="商品描述">
+      <nut-cell :title="translate('desc')">
         <template v-slot:link>
           <nut-inputnumber v-model="number" />
         </template>
       </nut-cell>
       <template #right>
-        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
-        <nut-button shape="square" style="height: 100%" type="info">收藏</nut-button>
+        <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
+        <nut-button shape="square" style="height: 100%" type="info">{{ translate('collect') }}</nut-button>
       </template>
     </nut-swipe>
   </div>
@@ -57,7 +62,42 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('swipe');
+const { createDemo, translate } = createComponent('swipe');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    leftDel: '左滑删除',
+    disable: '禁用滑动',
+    swipeLR: '左右滑动',
+    swipeLRDesc: '左滑右滑都可以哦',
+    async: '异步控制',
+    asyncDesc: '异步打开关闭',
+    open: '开',
+    close: '关',
+    custom: '自定义',
+    desc: '商品描述',
+    delete: '删除',
+    select: '选择',
+    collect: '收藏'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    leftDel: 'Swipe left to delete',
+    disable: 'Disable swipe',
+    swipeLR: 'Swipe left and right',
+    swipeLRDesc: 'You can swipe left and right',
+    async: 'Async control swipe',
+    asyncDesc: 'Async on and off',
+    open: 'on',
+    close: 'off',
+    custom: 'Custom',
+    desc: 'product description',
+    delete: 'Delelte',
+    select: 'Select',
+    collect: 'Collect'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -78,7 +118,7 @@ export default createDemo({
     const close = () => {
       checked.value = false;
     };
-    return { checked, number, changSwitch, refSwipe, open, close };
+    return { checked, number, changSwitch, refSwipe, open, close, translate };
   }
 });
 </script>

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

@@ -0,0 +1,184 @@
+#  Swipe
+
+### Intro
+
+Used for cell components that can slide left and right to display operation buttons.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+//vue
+import { Swipe,Cell,Button } from '@nutui/nutui';
+//taro
+import { Swipe,Cell,Button } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Swipe);
+app.use(Cell);
+app.use(Button);
+```
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+<nut-swipe>
+    <nut-cell round-radius="0" desc="Swipe left to delete" />
+    <template #right>
+        <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
+    </template>
+</nut-swipe>
+</template>
+```
+:::
+
+
+### Disable swipe
+
+
+:::demo
+```html
+<template>
+<nut-swipe disabled>
+    <nut-cell round-radius="0" desc="Disable swipe" />
+    <template #right>
+        <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
+    </template>
+</nut-swipe>
+</template>
+```
+:::
+
+### Swipe left and right
+
+
+:::demo
+```html
+<template>
+<nut-swipe>
+    <template #left>
+        <nut-button shape="square" style="height:100%" type="success">Select</nut-button>
+    </template>
+    <nut-cell round-radius="0" desc="You can swipe left and right" />
+    <template #right>
+        <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
+        <nut-button shape="square" style="height:100%" type="info">Collect</nut-button>
+    </template>
+</nut-swipe>
+</template>
+```
+:::
+
+### Async control swipe
+
+Need to introduce the `switch` component separately
+
+:::demo
+```html
+<template>
+<nut-swipe ref="refSwipe" @open="open" @close="close">
+    <nut-cell title="Async on and off">
+    <template v-slot:link>
+        <nut-switch v-model="checked" @change="changSwitch" active-text="on" inactive-text="off" />
+    </template>
+    </nut-cell>
+    <template #right>
+        <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
+    </template>
+</nut-swipe>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const refSwipe = ref<HTMLElement>();
+        const checked = ref(false);
+        const changSwitch = (value: boolean) => {
+            if (value) {
+                refSwipe.value?.open('left');
+            } else {
+                refSwipe.value?.close();
+            }
+        };
+         const open = (obj: any) => {
+            console.log(obj);
+            checked.value = true;
+        };
+        const close = () => {
+            checked.value = false;
+        };
+        return { checked, changSwitch, refSwipe, open, close };
+    }
+}
+</script>
+```
+:::
+
+### Custom
+
+Need to introduce the `inputnumber` component separately
+
+:::demo
+```html
+<template>
+<nut-swipe>
+    <template #left>
+        <nut-button shape="square" style="height:100%" type="success">Select</nut-button>
+    </template>
+    <nut-cell title="product description">
+    <template v-slot:link>
+        <nut-inputnumber v-model="number" />
+    </template>
+    </nut-cell>
+    <template #right>
+        <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
+        <nut-button shape="square" style="height:100%" type="info">Collect</nut-button>
+    </template>
+</nut-swipe>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const number = ref(0);
+        return { number };
+    }
+}
+</script>
+```
+:::
+
+
+### Props
+
+| Attribute                   | Description               | Type    | Default |
+|-----------------------------|---------------------------|---------|---------|
+| name                        | identifies                | String  | -       |
+| disabled                    | Whether to disabled swipe | String  | false   |
+| touch-move-prevent-default  | Whether to stop touchmove event preventdefault       | boolean | false   |
+| touch-move-stop-propagation | Whether to stop touchmove event propagation      | boolean | false   |
+### Events
+
+| Event | Description                  | Arguments              |
+|-------|------------------------------|------------------------|
+| open  | Emitted when Swipe is opened | {type:'left or right'} |
+| close | Emitted when Swipe is closed | {type:'left or right'} |
+    
+
+### Slots
+| Name    | Description    |
+|---------|----------------|
+| left    | Custom left    |
+| default | Custom default |
+| right   | Custom right   |
+
+### Methods
+
+Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Swipe instance and call instance methods.
+
+| Name  | Description | Arguments     |
+|-------|-------------|---------------|
+| open  | open swipe  | left or right |
+| close | close swipe |               |

src/packages/__VUE/swipe/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-常用于单元格左滑删除等手势操作
+常用于单元格左右滑删除等手势操作
 
 ### 安装
 
@@ -177,7 +177,7 @@ export default {
 | right   | 右侧滑动内容 |
 
 ### 方法
-通过 ref 可以获取到 Swipe 实例并调用实例方法。
+通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 Swipe 实例并调用实例方法。
 
 | 方法名 | 说明             | 参数          |
 |--------|------------------|---------------|