docs(rate): add international en-us

src/packages/__VUE/rate/demo.vue

@@ -1,37 +1,63 @@
 <template>
   <div class="demo">
-    <h2>基本用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-rate v-model="state.val" />
 
-    <h2>半星</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-rate allow-half v-model="state.val1"></nut-rate>
 
-    <h2>自定义 icon </h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="state.val2"></nut-rate>
 
-    <h2>自定义数量</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-rate :count="6" v-model="state.val3"></nut-rate>
 
-    <h2>自定义颜色</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate>
 
-    <h2>禁用状态</h2>
+    <h2>{{ translate('title5') }}</h2>
     <nut-rate disabled v-model="state.val5"></nut-rate>
 
-    <h2>只读状态</h2>
+    <h2>{{ translate('title6') }}</h2>
     <nut-rate v-model="state.val6" readonly></nut-rate>
 
-    <h2>绑定事件</h2>
+    <h2>{{ translate('title7') }}</h2>
     <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
-    <h2>自定义尺寸 35px</h2>
+
+    <h2>{{ translate('title8') }}</h2>
     <nut-rate v-model="state.val8" icon-size="35"></nut-rate>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('rate');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+const { createDemo, translate } = createComponent('rate');
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    title1: '半星',
+    title2: '自定义 icon',
+    title3: '自定义数量',
+    title4: '自定义颜色',
+    title5: '禁用状态',
+    title6: '只读状态',
+    title7: '绑定事件',
+    title8: '自定义尺寸 35px'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Half Star',
+    title2: 'Custom icon',
+    title3: 'Custom quantity',
+    title4: 'Custom color',
+    title5: 'disabled state',
+    title6: 'read-only status',
+    title7: 'bind event',
+    title8: 'Custom size 35px'
+  }
+});
 export default createDemo({
   setup() {
     let { proxy } = getCurrentInstance();
@@ -52,7 +78,8 @@ export default createDemo({
     };
     return {
       state,
-      onChange
+      onChange,
+      translate
     };
   }
 });

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

@@ -0,0 +1,219 @@
+# Rate
+
+### Intro
+
+Use for quick rating actions, or to showcase reviews.
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+//vue
+import { Rate,Icon } from '@nutui/nutui';
+//taro
+import { Rate,Icon } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Rate);
+app.use(Icon);
+```
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+    <nut-rate v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### Half Star
+
+:::demo
+```html
+<template>
+    <nut-rate allow-half v-model="value"></nut-rate>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3.5);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### Custom icon
+
+:::demo
+```html
+<template>
+    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### Custom quantity
+
+:::demo
+```html
+<template>
+    <nut-rate :count="6" v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### Custom color
+
+:::demo
+```html
+<template>
+    <nut-rate active-color="#FFC800" v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### disabled state
+
+:::demo
+```html
+<template>
+    <nut-rate disabled v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### read-only status
+
+:::demo
+```html
+<template>
+    <nut-rate v-model="value" readonly />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+### bind event
+
+:::demo
+```html
+<template>
+    <nut-rate v-model="value" @change="onChange" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+    setup() {
+        const value = ref(3);
+        const onChange = (val)=>{
+            Toast.text(val);
+        }
+    return { value,onChange }
+    }
+}
+</script>
+```
+:::
+
+### Custom size 35px
+
+:::demo
+```html
+<template>
+    <nut-rate v-model="value" icon-size="35" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+
+
+## Prop
+
+| Attribute       | Description                                                                      | Type    | Default          |
+|-----------------|----------------------------------------------------------------------------------|---------|------------------|
+| v-model         | The current number of stars, you can use v-model to bind data in both directions | Number  | -                |
+| count           | Total number of stars                                                            | Number  | 5                |
+| icon-size       | Star size                                                                        | Number  | 18               |
+| active-color    | Icon selection color                                                             | String  | #fa200c          |
+| void-color      | Icon unselected color                                                            | String  | #ccc             |
+| unchecked-icon  | Use icon (unchecked)[icon name](#/icon)                                          | String  | star-n           |
+| checked-icon    | Use icon (checked)[icon name](#/icon)                                            | String  | star-fill-n      |
+| font-class-name | Custom icon font base class name                                                 | String  | `nutui-iconfont` |
+| class-prefix    | Custom icon class name prefix for using custom icons                             | String  | `nut-icon`       |
+| allow-half      | half star                                                                        | Boolean | false            |
+| readonly        | read-only                                                                        | Boolean | false            |
+| disabled        | whether to disable                                                               | Boolean | false            |
+| spacing         | spacing                                                                          | Number  | 20               |
+
+## Event
+| Event  | Description                                                | Arguments |
+|--------|------------------------------------------------------------|-----------|
+| change | An event that fires whenever the current score is modified | val       |