docs(radio、sticky、timeselect): add international en-us

src/packages/__VUE/radio/demo.vue

@@ -1,75 +1,75 @@
 <template>
   <div class="demo full">
-    <nut-cell-group title="基本用法">
+    <nut-cell-group :title="translate('basic')">
       <nut-cell>
         <nut-radiogroup v-model="radioVal">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio disabled label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
+          <nut-radio label="1">{{ translate('option1') }}</nut-radio>
+          <nut-radio disabled label="2">{{ translate('option2') }}</nut-radio>
+          <nut-radio label="3">{{ translate('option3') }}</nut-radio>
         </nut-radiogroup>
       </nut-cell>
       <nut-cell>
         <nut-radiogroup v-model="radioVal" text-position="left">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio disabled label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
+          <nut-radio label="1">{{ translate('option1') }}</nut-radio>
+          <nut-radio disabled label="2">{{ translate('option2') }}</nut-radio>
+          <nut-radio label="3">{{ translate('option3') }}</nut-radio>
         </nut-radiogroup>
       </nut-cell>
       <nut-cell>
         <nut-radiogroup v-model="radioVal">
-          <nut-radio shape="button" label="1">选项1</nut-radio>
-          <nut-radio disabled shape="button" label="2">选项2</nut-radio>
-          <nut-radio shape="button" label="3">选项3</nut-radio>
+          <nut-radio shape="button" label="1">{{ translate('option1') }}</nut-radio>
+          <nut-radio disabled shape="button" label="2">{{ translate('option2') }}</nut-radio>
+          <nut-radio shape="button" label="3">{{ translate('option3') }}</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
-    <nut-cell-group title="水平使用">
+    <nut-cell-group :title="translate('vertical')">
       <nut-cell>
         <nut-radiogroup v-model="radioVal" direction="horizontal">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
+          <nut-radio label="1">{{ translate('option1') }}</nut-radio>
+          <nut-radio label="2">{{ translate('option2') }}</nut-radio>
+          <nut-radio label="3">{{ translate('option3') }}</nut-radio>
         </nut-radiogroup>
       </nut-cell>
       <nut-cell>
         <nut-radiogroup v-model="radioVal" text-position="left" direction="horizontal">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
+          <nut-radio label="1">{{ translate('option1') }}</nut-radio>
+          <nut-radio label="2">{{ translate('option2') }}</nut-radio>
+          <nut-radio label="3">{{ translate('option3') }}</nut-radio>
         </nut-radiogroup>
       </nut-cell>
       <nut-cell>
         <nut-radiogroup v-model="radioVal" direction="horizontal">
-          <nut-radio shape="button" label="1">选项1</nut-radio>
-          <nut-radio shape="button" label="2">选项2</nut-radio>
-          <nut-radio shape="button" label="3">选项3</nut-radio>
+          <nut-radio shape="button" label="1">{{ translate('option1') }}</nut-radio>
+          <nut-radio shape="button" label="2">{{ translate('option2') }}</nut-radio>
+          <nut-radio shape="button" label="3">{{ translate('option3') }}</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
-    <nut-cell-group title="自定义尺寸">
+    <nut-cell-group :title="translate('size')">
       <nut-cell>
         <nut-radiogroup v-model="radioVal4">
-          <nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
-          <nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
+          <nut-radio label="1" icon-size="12">{{ translate('size') }} 12</nut-radio>
+          <nut-radio label="2" icon-size="12">{{ translate('size') }} 12</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
-    <nut-cell-group title="Radio自定义图标">
+    <nut-cell-group :title="translate('icon')">
       <nut-cell>
         <nut-radiogroup v-model="radioVal5">
-          <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
-          <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
+          <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">{{ translate('icon') }}</nut-radio>
+          <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">{{ translate('icon') }}</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
-    <nut-cell-group title="触发事件">
+    <nut-cell-group :title="translate('trigger')">
       <nut-cell>
         <nut-radiogroup v-model="radioVal6" @change="handleChange">
-          <nut-radio label="1">触发事件</nut-radio>
-          <nut-radio label="2">触发事件</nut-radio>
+          <nut-radio label="1">{{ translate('trigger') }}</nut-radio>
+          <nut-radio label="2">{{ translate('trigger') }}</nut-radio>
         </nut-radiogroup>
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="radioVal6"></nut-cell>
+      <nut-cell :title="translate('current')" :desc="radioVal6"></nut-cell>
     </nut-cell-group>
   </div>
 </template>
@@ -77,7 +77,32 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { reactive, toRefs } from 'vue';
-const { createDemo } = createComponent('radio');
+const { createDemo, translate } = createComponent('radio');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    option1: '选项1',
+    option2: '选项2',
+    option3: '选项3',
+    vertical: '水平使用',
+    size: '自定义尺寸',
+    icon: '自定义图标',
+    trigger: '触发事件',
+    current: '当前选中值'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    option1: 'Option 1',
+    option2: 'Option 2',
+    option3: 'Option 3',
+    vertical: 'Horizontal use',
+    size: 'Custom size',
+    icon: 'Custom icon',
+    trigger: 'Trigger event',
+    current: 'Currently selected value'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -94,7 +119,8 @@ export default createDemo({
     };
     return {
       ...toRefs(data),
-      handleChange
+      handleChange,
+      translate
     };
   }
 });

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

@@ -0,0 +1,227 @@
+# Radio
+
+### Intro
+
+Used to make a single selection in a set of alternatives
+
+### Install
+
+``` ts
+import { createApp } from 'vue';
+//vue
+import { Radio,RadioGroup } from '@nutui/nutui';
+//taro
+import { Radio,RadioGroup } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Radio).use(RadioGroup);
+```
+## Basic Usage
+
+Bind the **label** of the current option through **v-model**. And it must be used in combination with **nut-radiogroup** and **nut-radio**
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="Basic">
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal">
+        <nut-radio label="1">Option 1</nut-radio>
+        <nut-radio disabled label="2">Option 2</nut-radio>
+        <nut-radio label="3">Option 3</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal" text-position="left">
+        <nut-radio label="1">Option 1</nut-radio>
+        <nut-radio disabled label="2">Option 2</nut-radio>
+        <nut-radio label="3">Option 3</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal">
+        <nut-radio shape="button" label="1">Option 1</nut-radio>
+        <nut-radio disabled shape="button" label="2">Option 2</nut-radio>
+        <nut-radio shape="button" label="3">Option 3</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const radioVal = ref('1');
+      return { radioVal };
+    },
+  };
+</script>
+```
+
+:::
+
+## Horizontal use
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="Horizontal use">
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal" direction="horizontal">
+        <nut-radio label="1">Option 1</nut-radio>
+        <nut-radio label="2">Option 2</nut-radio>
+        <nut-radio label="3">Option 3</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal" text-position="left" direction="horizontal">
+        <nut-radio label="1">Option 1</nut-radio>
+        <nut-radio label="2">Option 2</nut-radio>
+        <nut-radio label="3">Option 3</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal" direction="horizontal">
+        <nut-radio shape="button" label="1">Option 1</nut-radio>
+        <nut-radio shape="button" label="2">Option 2</nut-radio>
+        <nut-radio shape="button" label="3">Option 3</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const radioVal = ref('1');
+      return { radioVal };
+    },
+  };
+</script>
+```
+
+:::
+## Custom size
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="Custom size">
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal">
+        <nut-radio label="1" icon-size="12">Custom size 12</nut-radio>
+        <nut-radio label="2" icon-size="12">Custom size 12</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const radioVal = ref('1');
+      return { radioVal };
+    },
+  };
+</script>
+```
+
+:::
+
+## Custom icon
+
+It is suggested to modify `icon-name` and `icon-active-name`
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="Radio Custom icon">
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal">
+        <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">Custom icon</nut-radio>
+        <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">Custom icon</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const radioVal = ref('1');
+      return { radioVal };
+    },
+  };
+</script>
+```
+
+:::
+
+## Trigger change event
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="Trigger event">
+    <nut-cell>
+      <nut-radiogroup v-model="radioVal" @change="handleChange">
+        <nut-radio label="1">Trigger event</nut-radio>
+        <nut-radio label="2">Trigger event</nut-radio>
+      </nut-radiogroup>
+    </nut-cell>
+    <nut-cell title="Currently selected value" :desc="radioVal"></nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const radioVal = ref('1');
+      const handleChange = (value: any) => {
+        console.log(value);
+      };
+      return { radioVal, handleChange };
+    },
+  };
+</script>
+```
+:::
+
+## Prop
+
+### Radio
+
+| Attribute             | Description                                                         | Type                    | Default            |
+|------------------|--------------------------------------------------------------|-------------------------|-------------------|
+| disabled         | Disable selection                                           | Boolean                 | `false`           |
+| icon-size        | [Icon Size](#/en-US/icon)                                           | String、Number          | `18`              |
+| icon-name        | [Icon Name](#en-US//icon)，Before selection (it is suggested to modify it together with `icon-active-name`) | String                  | `'check-normal'`  |
+| icon-active-name | [Icon Name](#en-US//icon)，After selection (it is suggested to modify it together with `icon-name`)       | String                  | `'check-checked'` |
+| icon-class-prefix | Custom icon class name prefix, used to use custom icons        | String                  | `nut-icon` |
+| icon-font-class-name | Basic class name of custom icon font        | String                  | `nutui-iconfont` |
+| label            | Radio box ID                                                  | String、Number、Boolean | -                 |
+| shape            | Shape, optional values are `button`、`round`                                | String                  | round             |
+
+### RadioGroup
+
+| Attribute          | Description                                          | Type                    | Default     |
+|---------------|-----------------------------------------------|-------------------------|------------|
+| v-model       | The identifier of the currently selected item is selected when it is consistent with the `label` value | String、Number、Boolean | -          |
+| text-position | The position of the text, optional value：`left`,`right`        | String                  | `right`    |
+| direction     | Use horizontal and vertical optional values `horizontal`、`vertical`      | String                  | `vertical` |
+
+## RadioGroup Event
+
+| Event   | Description         | Arguments                                           |
+|--------|--------------|----------------------------------------------------|
+| change | Triggered when the value changes | Currently selected item value（label）【There is a value after setting `label`, which is empty by default】 |

src/packages/__VUE/sticky/demo.vue

@@ -1,27 +1,27 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell>
       <nut-sticky top="57">
-        <nut-button type="primary">吸顶按钮</nut-button>
+        <nut-button type="primary">{{ translate('content') }}</nut-button>
       </nut-sticky>
     </nut-cell>
-    <h2>吸顶距离</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-cell>
       <nut-sticky top="120">
-        <nut-button type="primary">吸顶距离120px</nut-button>
+        <nut-button type="primary">{{ translate('title1') }} 120px</nut-button>
       </nut-sticky>
     </nut-cell>
-    <h2>指定容器</h2>
+    <h2>{{ translate('title2') }}</h2>
     <div class="sticky-container" ref="container">
       <nut-sticky top="100" :container="container" z-index="1">
-        <nut-button type="info">指定容器</nut-button>
+        <nut-button type="info">{{ translate('title2') }}</nut-button>
       </nut-sticky>
     </div>
-    <h2>吸底距离</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-cell>
       <nut-sticky bottom="100" position="bottom">
-        <nut-button type="primary">吸底距离100px</nut-button>
+        <nut-button type="primary">{{ translate('title3') }} 100px</nut-button>
       </nut-sticky>
     </nut-cell>
   </div>
@@ -29,13 +29,31 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('sticky');
+const { createDemo, translate } = createComponent('sticky');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    title1: '吸顶距离',
+    title2: '指定容器',
+    title3: '吸底距离',
+    content: '吸顶按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Ceiling distance',
+    title2: 'Specify container',
+    title3: 'Suction distance',
+    content: 'Ceiling button'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
     const container = ref(null);
     return {
-      container
+      container,
+      translate
     };
   }
 });

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

@@ -0,0 +1,162 @@
+# Sticky
+
+### Intro
+
+The effect is the same as `position: sticky` in `CSS`, which can be used for compatibility with low-end browsers
+
+### Install
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { Sticky } from '@nutui/nutui';
+// taro
+import { Sticky } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Sticky);
+
+```
+
+### Basic Usage
+
+:::demo
+
+```html
+<template>
+  <nut-cell>
+    <nut-sticky top="57">
+      <nut-button type="primary">Ceiling button</nut-button>
+    </nut-sticky>
+  </nut-cell>
+</template>
+<script lang="ts">
+  export default {
+    setup() {
+      return {  };
+    }
+  };
+</script>
+<style lang="scss">
+#app{
+  height: auto !important;
+}
+</style>
+```
+
+:::
+
+### Ceiling distance
+
+:::demo
+
+```html
+<template>
+  <nut-cell>
+    <nut-sticky top="120">
+      <nut-button type="primary">Ceiling distance 120px</nut-button>
+    </nut-sticky>
+  </nut-cell>
+</template>
+<script lang="ts">
+  export default {
+    setup() {
+      return {  };
+    }
+  };
+</script>
+<style lang="scss">
+#app{
+  height: auto !important;
+}
+</style>
+```
+
+:::
+
+### Specify container
+
+:::demo
+
+```html
+<template>
+  <div class="sticky-container" ref="container">
+    <nut-sticky top="100" :container="container" z-index="1">
+      <nut-button type="info">Specify container</nut-button>
+    </nut-sticky>
+  </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const container = ref(null);
+      return {
+        container
+      };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+.sticky-container{
+  width: 100%;
+  height: 300px;
+  background-color: #fff;
+}
+</style>
+<style lang="scss">
+#app{
+  height: auto !important;
+}
+</style>
+```
+
+:::
+
+### Suction distance
+
+:::demo
+
+```html
+<template>
+  <nut-cell>
+    <nut-sticky bottom="100" position="bottom">
+      <nut-button type="primary">Suction distance 100px</nut-button>
+    </nut-sticky>
+  </nut-cell>
+</template>
+<script lang="ts">
+  export default {
+    setup() {
+      return {  };
+    }
+  };
+</script>
+<style lang="scss">
+#app{
+  height: auto !important;
+}
+</style>
+```
+
+:::
+
+## API
+
+### Props
+
+| Attribute    | Description                      | Type   | Default          |
+|--------------|----------------------------------|--------|------------------|
+| position         | Adsorption position（`top`、`bottom`）               | String | `top`                |
+| top         | Ceiling distance               | Number | `0`                |
+| bottom         | Suction distance               | Number | `0`                |
+| container         | The 'HTML' node of the container needs to specify the `id` at the same time in the miniProgram        | Element | -                |
+| z-index         | Level of adsorption               | Number | `2000`               |
+
+### Events
+
+| Event | Description                  | Arguments   |
+|--------|----------------|--------------|
+| change  | Triggered when the adsorption state changes | `val: Boolean` |
+| scroll  | Triggered when scrolling | `{ top: Number, fixed: Boolean }` |

src/packages/__VUE/timeselect/demo.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="demo">
-    <h2>基本用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell @click="handleClick1">
-      <span><label>请选择配送时间</label></span>
+      <span
+        ><label>{{ translate('deliveryTime') }}</label></span
+      >
     </nut-cell>
     <nut-timeselect
       v-model:visible="visible1"
@@ -12,16 +14,18 @@
       @select="handleSelected1"
     >
       <template #pannel>
-        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-timepannel>
-        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-timepannel>
+        <nut-timepannel :name="translate('time1')" pannel-key="0" @change="handleChange1"></nut-timepannel>
+        <nut-timepannel :name="translate('time2')" pannel-key="1" @change="handleChange1"></nut-timepannel>
       </template>
       <template #detail>
         <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
       </template>
     </nut-timeselect>
-    <h2>可选择多个日期时间</h2>
+    <h2>{{ translate('title') }}</h2>
     <nut-cell @click="handleClick2">
-      <span><label>请选择配送时间</label></span>
+      <span
+        ><label>{{ translate('deliveryTime') }}</label></span
+      >
     </nut-cell>
     <nut-timeselect
       v-model:visible="visible2"
@@ -31,8 +35,8 @@
       @select="handleSelected2"
     >
       <template #pannel>
-        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
-        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+        <nut-timepannel :name="translate('time1')" pannel-key="0" @change="handleChange2"></nut-timepannel>
+        <nut-timepannel :name="translate('time2')" pannel-key="1" @change="handleChange2"></nut-timepannel>
       </template>
       <template #detail>
         <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
@@ -44,7 +48,26 @@
 <script lang="ts">
 import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('timeselect');
+const { createDemo, translate } = createComponent('timeselect');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    deliveryTime: '请选择配送时间',
+    time1: '2月23日(今天)',
+    time2: '2月24日(星期三)',
+    title: '可选择多个日期时间',
+    content: '您选择了'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    deliveryTime: 'Please select the delivery time',
+    time1: 'February 23rd(Today)',
+    time2: 'February 24th(Wednesday)',
+    title: 'Multiple dates and times can be selected',
+    content: 'Your choose'
+  }
+});
 export default createDemo({
   setup() {
     const { proxy } = getCurrentInstance() as any;
@@ -101,7 +124,7 @@ export default createDemo({
 
     const handleSelected1 = (obj: any) => {
       console.log(123);
-      proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
+      proxy.$toast.text(`${translate('content')}：${JSON.stringify(obj)}`);
     };
 
     const handleChange2 = (pannelKey: number) => {
@@ -130,7 +153,7 @@ export default createDemo({
     };
 
     const handleSelected2 = (obj: any) => {
-      proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
+      proxy.$toast.text(`${translate('content')}：${JSON.stringify(obj)}`);
     };
 
     onMounted(() => {
@@ -153,7 +176,8 @@ export default createDemo({
       handleChange2,
       handleSelected2,
       selectTime2,
-      handleClick2
+      handleClick2,
+      translate
     };
   }
 });

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

@@ -0,0 +1,229 @@
+# TimeSelect
+
+### Intro
+
+For delivery time selection
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { TimeSelect, TimePannel, TimeDetail, Popup } from '@nutui/nutui';
+// taro
+import { TimeSelect, TimePannel, TimeDetail, Popup } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(TimeSelect).use(TimePannel).use(TimeDetail).use(Popup);
+```
+
+### Basic Usage
+
+:::demo
+
+``` html
+<template>
+  <nut-cell @click="handleClick1">
+    <span><label>Please select the delivery time</label></span>
+  </nut-cell>
+  <nut-timeselect v-model:visible="visible1" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
+    <template #pannel>
+      <nut-timepannel name="February 23rd(Today)" pannel-key="0" @change="handleChange1"></nut-timepannel>
+      <nut-timepannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange1"></nut-timepannel>
+    </template>
+    <template #detail>
+      <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
+    </template>
+  </nut-timeselect>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, getCurrentInstance } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const { proxy } = getCurrentInstance() as any;
+      const state = reactive({
+        visible1: false,
+        currentKey1: 0,
+        currentTime1: [] as any[],
+        times1: [
+          {
+            key: 0,
+            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+          },
+          {
+            key: 1,
+            list: ['9:00-10:00', '10:00-11:00']
+          },
+        ],
+      });
+
+      const handleChange1 = (pannelKey: number) => {
+        state.currentKey1 = pannelKey;
+        state.currentTime1 = [];
+        state.currentTime1.push({
+          key: state.currentKey1,
+          list: []
+        });
+      };
+
+      const handleClick1 = () => {
+        state.visible1 = true;
+      };
+
+      const selectTime1 = (item: string) => {
+        let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
+        if(curTimeIndex === -1) {
+          state.currentTime1[0]['list'].push(item);
+        } else {
+          state.currentTime1[0]['list'].splice(curTimeIndex, 1);
+        }
+      };
+
+      const handleSelected1 = (obj: any) => {
+        proxy.$toast.text(`Your choose：${JSON.stringify(obj)}`);
+      };
+
+      return { 
+        ...toRefs(state), 
+        handleChange1,
+        handleSelected1,
+        selectTime1,
+        handleClick1, 
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### Multiple dates and times can be selected
+
+:::demo
+
+``` html
+<template>
+  <nut-cell @click="handleClick2">
+    <span><label>Please select the delivery time</label></span>
+  </nut-cell>
+  <nut-timeselect v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
+    <template #pannel>
+      <nut-timepannel name="February 23rd(Today)" pannel-key="0" @change="handleChange2"></nut-timepannel>
+      <nut-timepannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+    </template>
+    <template #detail>
+      <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+    </template>
+  </nut-timeselect>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, getCurrentInstance } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const { proxy } = getCurrentInstance() as any;
+      const state = reactive({
+        visible2: false,
+        currentKey2: 0,
+        currentTime2: [] as any[],
+        times2: [
+          {
+            key: 0,
+            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+          },
+          {
+            key: 1,
+            list: ['9:00-10:00', '10:00-11:00']
+          },
+        ]
+      });
+
+      const handleChange2 = (pannelKey: number) => {
+        state.currentKey2 = pannelKey;
+        let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
+        if(!curTime) {
+          state.currentTime2.push({
+            key: pannelKey,
+            list: []
+          });
+        }
+      };
+
+      const handleClick2 = () => {
+        state.visible2 = true;
+      };
+
+      const selectTime2 = (item: string) => {
+        let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
+        let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
+        if(curTimeIndex === -1) {
+          state.currentTime2[findIndex]['list'].push(item);
+        } else {
+          state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
+        }
+      };
+
+      const handleSelected2 = (obj: any) => {
+        proxy.$toast.text(`Your choose：${JSON.stringify(obj)}`);
+      };
+
+      return { 
+        ...toRefs(state), 
+        handleChange2,
+        handleSelected2,
+        selectTime2,
+        handleClick2, 
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+## API
+
+### TimeSelect Prop
+
+| Attribute                   | Description                                                             | Type    | Default |
+|------------------------|----------------------------------------------------------------|---------|------|
+| visible                 | Whether to display elastic layer                                                    | Boolean  | `false`
+| height                 | Height of bomb layer                                                    | String  | `20%`
+| title                 | Bomb layer title                                                    | String  | `Pickup Time`
+| current-key                 | Unique identification                                                    | String、Number  | `0`
+| current-time                 | The currently selected time, the array element contains:key: string; list: string[]      | Array  | `[]`
+
+### TimePannel Prop
+
+| Attribute                   | Description                                                             | Type    | Default |
+|------------------------|----------------------------------------------------------------|---------|------|
+| name                 | Name of display                                                    | String  | ``
+| pannel-key           | Unique ID, which identifies the currently selected day together with `current-key`                      | Number、String  | `0`
+
+### TimeDetail Prop
+
+| Attribute                   | Description                                                             | Type    | Default |
+|------------------------|----------------------------------------------------------------|---------|------|
+| times                 | Selectable time, the same as array elements `current-time`                              | Array  | `[]`
+
+
+### TimeSelect Event
+
+| Event | Description                  | Arguments   |
+|-------|----------|-------------|
+| select | Callback after closing mask | key: string | number, list: [] |
+
+### TimePannel Event
+
+| Event | Description                  | Arguments   |
+|-------|----------|-------------|
+| change | Click the callback of the content | pannelKey: string ｜ number |
+
+### TimeDetail Event
+
+| Event | Description                  | Arguments   |
+|-------|----------|-------------|
+| select | Callback of click time | time: string |
+
+