docs(cell): add international en-us

src/packages/__VUE/cell/demo.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="demo">
-    <h2>基本用法</h2>
-    <nut-cell title="我是标题" desc="描述文字"></nut-cell>
-    <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
-    <nut-cell title="点击测试" @click="testClick"></nut-cell>
-    <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
+    <h2>{{ translate('basic') }}</h2>
+    <nut-cell :title="translate('title')" :desc="translate('desc')"></nut-cell>
+    <nut-cell :title="translate('title')" :sub-title="translate('title1')" :desc="translate('desc')"></nut-cell>
+    <nut-cell :title="translate('title3')" @click="testClick"></nut-cell>
+    <nut-cell :title="translate('title4')" round-radius="0"></nut-cell>
 
-    <h2>直接使用插槽(slot)</h2>
+    <h2>{{ translate('title2') }}</h2>
 
-    <nut-cell title="我是标题" desc="描述文字">
-      <div>自定义内容</div>
+    <nut-cell :title="translate('title')" :desc="translate('desc')">
+      <div>{{ translate('content') }}</div>
     </nut-cell>
 
-    <nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
-      <nut-cell title="链接" is-link></nut-cell>
-      <nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
-      <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+    <nut-cell-group :title="translate('title5')" :desc="translate('desc1')">
+      <nut-cell :title="translate('link')" is-link></nut-cell>
+      <nut-cell :title="translate('urlJump')" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
+      <nut-cell :title="translate('routerJump')" to="/"></nut-cell>
     </nut-cell-group>
 
-    <nut-cell-group title="自定义右侧箭头区域">
+    <nut-cell-group :title="translate('customRight')">
       <nut-cell title="Switch">
         <template v-slot:link>
           <nut-switch v-model="switchChecked" />
@@ -26,8 +26,8 @@
       </nut-cell>
     </nut-cell-group>
 
-    <nut-cell-group title="自定义左侧 Icon 区域">
-      <nut-cell title="图片">
+    <nut-cell-group :title="translate('customLeftIcon')">
+      <nut-cell :title="translate('image')">
         <template v-slot:icon>
           <img
             class="nut-icon"
@@ -37,24 +37,69 @@
       </nut-cell>
     </nut-cell-group>
 
-    <h2>展示图标</h2>
-    <nut-cell title="姓名" icon="my" desc="张三" isLink> </nut-cell>
-    <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>
-    <nut-cell desc-text-align="left" desc="张三"></nut-cell>
+    <h2>{{ translate('displayIcon') }}</h2>
+    <nut-cell :title="translate('name')" icon="my" :desc="translate('desc')" isLink> </nut-cell>
+    <h2>{{ translate('title6') }}</h2>
+    <nut-cell desc-text-align="left" :desc="translate('desc')"></nut-cell>
   </div>
 </template>
 
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('cell');
+const { createDemo, translate } = createComponent('cell');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    desc: '描述文字',
+    desc1: '使用 nut-cell-group 支持 title desc slots',
+    title: '我是标题',
+    title1: '副标题描述',
+    title2: '直接使用插槽(slot)',
+    title3: '点击测试',
+    title4: '圆角设置 0',
+    title5: '链接 | 分组用法',
+    title6: '只展示 desc ，可通过 desc-text-align 调整内容位置',
+    link: '链接',
+    urlJump: 'URL 跳转',
+    routerJump: '路由跳转 ’/‘ ',
+    name: '姓名',
+    image: '图片',
+    content: '自定义内容',
+    customRight: '自定义右侧箭头区域',
+    customLeftIcon: '自定义左侧 Icon 区域',
+    displayIcon: '展示图标'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    desc: 'Description',
+    desc1: 'Usage nut-cell-group support title desc slots',
+    title: 'Title',
+    title1: 'Subtitle Description',
+    title2: 'Use Slots',
+    title3: 'Click Test',
+    title4: 'Round Radius 0',
+    title5: 'Link | CellGroup Usage',
+    title6: 'Only display desc , you can adjust the content position through desc-text-align',
+    link: 'Link',
+    urlJump: 'URL Jump',
+    routerJump: 'Router Jump ’/‘ ',
+    name: 'Name',
+    image: 'Image',
+    content: 'Content',
+    customRight: 'Customize the right arrow area',
+    customLeftIcon: 'Customize the left Icon area',
+    displayIcon: 'Display Icon'
+  }
+});
 export default createDemo({
   setup() {
     const testClick = (event: Event) => {
-      console.log('点击事件');
+      console.log('Click Test');
     };
     const switchChecked = ref(true);
-    return { testClick, switchChecked };
+    return { testClick, switchChecked, translate };
   }
 });
 </script>

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

@@ -0,0 +1,192 @@
+# Cell
+
+### Intro
+
+The cell is a single display item in the list.
+
+### Install
+
+```javascript
+import { createApp } from 'vue';
+import { Cell, CellGroup, Icon } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Cell).use(CellGroup).use(Icon);
+```
+
+### Basic Usage
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="Title" desc="Description"></nut-cell>
+  <nut-cell title="Title" sub-title="Subtitle Description" desc="Desc"></nut-cell>
+  <nut-cell title="Click Test" @click="testClick"></nut-cell>
+  <nut-cell title="Round Radius 0" round-radius="0"></nut-cell>
+</template>
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const switchChecked = ref(true);
+      const testClick = (event) => {
+        console.log('Click Test');
+      };
+      return { testClick, switchChecked };
+    }
+  };
+</script>
+```
+
+:::
+
+### Use Slots
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="Title" desc="Description">
+    <div>Content</div>
+  </nut-cell>
+</template>
+```
+
+:::
+
+### Link | CellGroup Usage
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="Link | CellGroup Usage" desc="Usage nut-cell-group support title desc slots">
+    <nut-cell title="Link Usage" is-link></nut-cell>
+    <nut-cell title="URL Jump" desc="https://m.jd.com" is-link url="https://m.jd.com"></nut-cell>
+    <nut-cell title="Router Jump ’/‘ " to="/"></nut-cell>
+  </nut-cell-group>
+</template>
+```
+
+:::
+
+### Customize the right arrow area
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="Customize the right arrow area">
+    <nut-cell title="Switch">
+      <template v-slot:link>
+        <nut-switch v-model="switchChecked" />
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const testClick = (event: Event) => {
+        console.log('Click Test');
+      };
+      const switchChecked = ref(true);
+      return { testClick, switchChecked };
+    }
+  };
+</script>
+```
+
+:::
+
+### Customize the left Icon area
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="Customize the left Icon area">
+    <nut-cell title="Image">
+      <template v-slot:icon>
+        <img
+          class="nut-icon"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+        />
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+```
+
+:::
+
+### Cell Display Icon
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="Name" icon="my" desc="Description"></nut-cell>
+</template>
+```
+
+:::
+
+### Only display desc , you can adjust the content position through desc-text-align
+
+:::demo
+
+```html
+<template>
+  <nut-cell desc-text-align="left" desc="Description"></nut-cell>
+</template>
+```
+
+:::
+
+## API
+
+### CellGroup Prop
+
+| Attribute | Description | Type   | Default |
+|-----------|-------------|--------|---------|
+| title     | Title       | String | -       |
+| desc      | Description | String | -       |
+
+### Cell Prop
+
+| Attribute       | Description                                                                                              | Type             | Default |
+|-----------------|----------------------------------------------------------------------------------------------------------|------------------|---------|
+| title           | Title                                                                                                    | String           | -       |
+| sub-title       | Subtitle                                                                                                 | String           | -       |
+| desc            | Description                                                                                              | String           | -       |
+| desc-text-align | Right description text alignment [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp) | String           | right   |
+| is-link         | Whether to show the right arrow and turn on click feedback                                               | Boolean          | false   |
+| icon            | Left [icon name](#/icon) or image url                                                                    | String           | -       |
+| round-radius    | Corner radius                                                                                            | Number           | 6px     |
+| url             | Link URL                                                                                                 | String           | -       |
+| to              | Target route of the link, same as to of vue-router                                                       | String ｜ Object | -       |
+| replace         | If true, the navigation will not leave a history record                                                  | Boolean          | false   |
+
+### Cell Event
+
+| Event | Description                  | Arguments   |
+|-------|------------------------------|-------------|
+| click | Emitted when cell is clicked | event:Event |
+
+## Cell Slots
+
+| Name          | Description        |
+|---------------|--------------------|
+| icon `v3.1.4` | Custom Left `icon` |
+| default       | Default slot       |
+| link          | Custom Right`link` |
+
+## CellGroup Slots
+
+| Name            | Description       |
+|-----------------|-------------------|
+| title `v3.1.10` | Custom`title`slot |
+| desc `v3.1.12`  | Custom`desc`slot  |