From 7f57c315b5eaab368220fa683bca8f47db5e9d58 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Thu, 29 Jul 2021 23:22:49 +0800
Subject: [PATCH 1/7] docs(card): API table (#720)

---
 src/card/demos/enUS/index.demo-entry.md | 26 ++++++++++++-------------
 src/card/demos/zhCN/index.demo-entry.md | 26 ++++++++++++-------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/card/demos/enUS/index.demo-entry.md b/src/card/demos/enUS/index.demo-entry.md
index 48b34ae56..f20ef6ad0 100644
--- a/src/card/demos/enUS/index.demo-entry.md
+++ b/src/card/demos/enUS/index.demo-entry.md
@@ -21,11 +21,11 @@ no-title
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bordered | `boolean` | `true` | Whether the card shows the border. |
-| closable | `boolean` | `false` | Whether the card displays the close icon. |
-| content-style | `Object \| string` | `undefined` | Style of the card content. |
-| footer-style | `Object \| string` | `undefined` | Style of the card footer. |
-| header-style | `Object \| string` | `undefined` | Style of the card header. |
+| bordered | `boolean` | `true` | Whether to show the card border. |
+| closable | `boolean` | `false` | Is it allowed to close. |
+| content-style | `Object \| string` | `undefined` | The style of the card content area. |
+| footer-style | `Object \| string` | `undefined` | The style of the bottom area of the card. |
+| header-style | `Object \| string` | `undefined` | The style of the card head area. |
 | hoverable | `boolean` | `false` | Whether to show shadow when hovering on the card. |
 | segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' \| 'hard' }` | `false` | Segment divider settings of the card. |
 | size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | Card size. |
@@ -34,11 +34,11 @@ no-title
 
 ## Slots
 
-| Name         | Parameters | Description                           |
-| ------------ | ---------- | ------------------------------------- |
-| cover        | `()`       | The content of the cover part.        |
-| header       | `()`       | The content of the header part.       |
-| header-extra | `()`       | The content of the header-extra part. |
-| default      | `()`       | The default content of the card.      |
-| footer       | `()`       | The content of the footer part.       |
-| action       | `()`       | The content of the action part.       |
+| Name         | Parameters | Description             |
+| ------------ | ---------- | ----------------------- |
+| cover        | `()`       | Cover content.          |
+| header       | `()`       | Header content.         |
+| header-extra | `()`       | Header extra content.   |
+| default      | `()`       | Card content.           |
+| footer       | `()`       | Footer content.         |
+| action       | `()`       | Operating area content. |
diff --git a/src/card/demos/zhCN/index.demo-entry.md b/src/card/demos/zhCN/index.demo-entry.md
index 8ac1a6ff8..63844be75 100644
--- a/src/card/demos/zhCN/index.demo-entry.md
+++ b/src/card/demos/zhCN/index.demo-entry.md
@@ -23,11 +23,11 @@ rtl-debug
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| bordered | `boolean` | `true` | 卡片是否显示 border |
-| closable | `boolean` | `false` | 卡片是否显示 close 图标 |
-| content-style | `Object \| string` | `undefined` | 卡片 content 的样式设置 |
-| footer-style | `Object \| string` | `undefined` | 卡片 footer 的样式设置 |
-| header-style | `Object \| string` | `undefined` | 卡片 header 的样式设置 |
+| bordered | `boolean` | `true` | 是否显示卡片边框 |
+| closable | `boolean` | `false` | 是否允许关闭 |
+| content-style | `Object \| string` | `undefined` | 卡片内容区域的样式 |
+| footer-style | `Object \| string` | `undefined` | 卡片底部区域的样式 |
+| header-style | `Object \| string` | `undefined` | 卡片头部区域的样式 |
 | hoverable | `boolean` | `false` | 卡片是否可悬浮 |
 | segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' \| 'hard' }` | `false` | 卡片的分段区域设置 |
 | size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | 卡片的尺寸 |
@@ -36,11 +36,11 @@ rtl-debug
 
 ## Slots
 
-| 名称         | 参数 | 说明                        |
-| ------------ | ---- | --------------------------- |
-| cover        | `()` | cover 部分填充的内容        |
-| header       | `()` | header 部分填充的内容       |
-| header-extra | `()` | header-extra 部分填充的内容 |
-| default      | `()` | card 默认填充的内容         |
-| footer       | `()` | footer 部分填充的内容       |
-| action       | `()` | action 部分填充的内容       |
+| 名称         | 参数 | 说明         |
+| ------------ | ---- | ------------ |
+| cover        | `()` | 覆盖内容     |
+| header       | `()` | 头部内容     |
+| header-extra | `()` | 头部额外内容 |
+| default      | `()` | 卡片内容     |
+| footer       | `()` | 底部内容     |
+| action       | `()` | 操作区域内容 |

From 85d6591dff8dff6a09134e738d972b9c00a0557a Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Fri, 30 Jul 2021 23:10:36 +0800
Subject: [PATCH 2/7] docs(collapse): api table (#730)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs(Collapse): 完善折叠面板组件的说明文档

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>
---
 src/collapse/demos/enUS/index.demo-entry.md | 20 ++++++++---------
 src/collapse/demos/zhCN/index.demo-entry.md | 24 ++++++++++-----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/collapse/demos/enUS/index.demo-entry.md b/src/collapse/demos/enUS/index.demo-entry.md
index fb6f1c7ef..29eddc2d7 100644
--- a/src/collapse/demos/enUS/index.demo-entry.md
+++ b/src/collapse/demos/enUS/index.demo-entry.md
@@ -22,9 +22,9 @@ customize-icon
 | --- | --- | --- | --- |
 | accordion | `boolean` | `false` | Whether to only allow on panel open. |
 | arrow-placement | `'left' \| 'right'` | `'left'` | Arrow placement. |
-| default-expanded-names | `string \| number \| Array<string \| number> \| null` | `null` | If set to `accrodion`, it will be a non-array value. |
+| default-expanded-names | `string \| number \| Array<string \| number> \| null` | `null` | Panel expanded in uncontrolled mode. If `accrodion` is set, it should be a non-array value. |
 | display-directive | `'if' \| 'show'` | `'if'` | The display directive to use when its inner `n-collapse-item` render content. `'if'` corresponds to `v-if` and `'show'` corresponds to `v-show`. |
-| expanded-names | `string \| number \| Array<string \| number> \| null` | `undefined` | If set to `accrodion`, it will be a non-array value. |
+| expanded-names | `string \| number \| Array<string \| number> \| null` | `undefined` | Expanded panel in controlled mode. If `accrodion` is set, it should be a non-array value.  |
 | on-update:expanded-names | `(expandedNames: Array<string \| number> \| string \| number \| null) => void` | `undefined` | Callback function triggered when expanded-names changes. |
 | on-item-header-click | `(data: { name: string \| number, expanded: boolean, event: MouseEvent }) => void` | `undefined` | Callback function triggered when the title is clicked. |
 
@@ -33,22 +33,22 @@ customize-icon
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | display-directive | `'if' \| 'show'` | `undefined` | The display directive to use when it is rendering its content. `'if'` corresponds to `v-if` and `'show'` corresponds to `v-show`. When it is set to `undefined` the value will follow its outer `n-collapse`. |
-| name | `string \| number` | random string | Name of the collapse item. |
+| name | `string \| number` | random string | Name. |
 | title | `string` | `undefined` | Title. |
 
 ## Slots
 
 ### Collapse Slots
 
-| Name    | Parameters                          | Description         |
-| ------- | ----------------------------------- | ------------------- |
-| default | `()`                                | Collapse's content. |
-| arrow   | `(options: { collapsed: boolean })` | Collapse's icon.    |
+| Name | Parameters | Description |
+| --- | --- | --- |
+| default | `()` | The contents of the collapsible panel. |
+| arrow | `(options: { collapsed: boolean })` | Custom icons for folding panels. |
 
 ### Collapse Item Slots
 
 | Name | Parameters | Description |
 | --- | --- | --- |
-| default | `()` | Collapse item's content. |
-| header | `()` | Collapse item's header. |
-| arrow | `(options: { collapsed: boolean })` | Collapse item's icon. |
+| default | `()` | The contents of the collapsible panel node. |
+| header | `()` | The content of the header of the collapsed panel node. |
+| arrow | `(options: { collapsed: boolean })` | The custom icon of the node header of the collapsible panel. |
diff --git a/src/collapse/demos/zhCN/index.demo-entry.md b/src/collapse/demos/zhCN/index.demo-entry.md
index 6617ff1ee..fb7f7e207 100644
--- a/src/collapse/demos/zhCN/index.demo-entry.md
+++ b/src/collapse/demos/zhCN/index.demo-entry.md
@@ -22,9 +22,9 @@ customize-icon
 | --- | --- | --- | --- |
 | accordion | `boolean` | `false` | 是否只允许展开一个面板 |
 | arrow-placement | `'left' \| 'right'` | `'left'` | 箭头位置 |
-| default-expanded-names | `string \| number \| Array<string \| number> \| null` | `null` | `accordion` 模式时不为数组 |
+| default-expanded-names | `string \| number \| Array<string \| number> \| null` | `null` | 非受控模式下展开的面板 `name`。`accordion` 模式时不为数组 |
 | display-directive | `'if' \| 'show'` | `'if'` | 内部 `n-collapse-item` 在控制内容是否渲染时使用的指令，`'if'` 对应 `v-if`，`'show'` 对应 `v-show` |
-| expanded-names | `string \| number \| Array<string \| number> \| null` | `undefined` | `accordion` 模式时不为数组 |
+| expanded-names | `string \| number \| Array<string \| number> \| null` | `undefined` | 受控模式下展开的面板的 `name`，`accordion` 模式时不为数组 |
 | on-update:expanded-names | `(expandedNames: Array<string \| number> \| string \| number \| null) => void` | `undefined` | 展开内容改变时触发的回调函数 |
 | on-item-header-click | `(data: { name: string \| number, expanded: boolean, event: MouseEvent }) => void` | `undefined` | 点击标题时触发的回调函数 |
 
@@ -33,22 +33,22 @@ customize-icon
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | display-directive | `'if' \| 'show'` | `undefined` | 自身在控制内容是否渲染时使用的指令，`'if'` 对应 `v-if`，`'show'` 对应 `v-show`。在设定为 `undefined` 的时候跟随外层的 `n-collapse` |
-| name | `string \| number` | 随机字符串 | name 值，会在选中时被用到 |
+| name | `string \| number` | 随机字符串 | 名称 |
 | title | `string` | `undefined` | 标题 |
 
 ## Slots
 
 ### Collapse Slots
 
-| 名称    | 参数                                | 说明                |
-| ------- | ----------------------------------- | ------------------- |
-| default | `()`                                | Collapse 的内容     |
-| arrow   | `(options: { collapsed: boolean })` | Collapse 自定义图标 |
+| 名称    | 参数                                | 说明                 |
+| ------- | ----------------------------------- | -------------------- |
+| default | `()`                                | 折叠面板的内容       |
+| arrow   | `(options: { collapsed: boolean })` | 折叠面板的自定义图标 |
 
 ### Collapse Item Slots
 
-| 名称 | 参数 | 说明 |
-| --- | --- | --- |
-| default | `()` | Collapse Item 的内容 |
-| header | `()` | Collapse Item 的 header |
-| arrow | `(options: { collapsed: boolean })` | Collapse Item 自定义图标 |
+| 名称    | 参数                                | 说明                         |
+| ------- | ----------------------------------- | ---------------------------- |
+| default | `()`                                | 折叠面板节点的内容           |
+| header  | `()`                                | 折叠面板节点头部的内容       |
+| arrow   | `(options: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |

From 051e710f133e353b1e29852482727377b25233b6 Mon Sep 17 00:00:00 2001
From: Yugang Cao <34439652+Talljack@users.noreply.github.com>
Date: Sat, 31 Jul 2021 11:46:04 +0800
Subject: [PATCH 3/7] docs(avatar): update avatar docs (#739)

---
 src/avatar/demos/enUS/icon.demo.md      | 11 +++++------
 src/avatar/demos/enUS/name-size.demo.md | 10 ++++++----
 src/avatar/demos/zhCN/icon.demo.md      | 11 +++++------
 src/avatar/demos/zhCN/name-size.demo.md | 10 ++++++----
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/avatar/demos/enUS/icon.demo.md b/src/avatar/demos/enUS/icon.demo.md
index 9def81e79..0fad6f67d 100644
--- a/src/avatar/demos/enUS/icon.demo.md
+++ b/src/avatar/demos/enUS/icon.demo.md
@@ -11,13 +11,12 @@ I like using icon in avatar.
 ```
 
 ```js
-import { MdCash, MdContacts, IosContacts } from '@vicons/ionicons4'
+import { MdCash } from '@vicons/ionicons4'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
-    MdCash,
-    MdContacts,
-    IosContacts
+    MdCash
   }
-}
+})
 ```
diff --git a/src/avatar/demos/enUS/name-size.demo.md b/src/avatar/demos/enUS/name-size.demo.md
index 888ed186c..272bcde06 100644
--- a/src/avatar/demos/enUS/name-size.demo.md
+++ b/src/avatar/demos/enUS/name-size.demo.md
@@ -13,11 +13,13 @@ Words' sizing would be auto adjusted in avatar.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: 'Oasis'
+      value: ref('Oasis')
     }
   }
-}
+})
 ```
diff --git a/src/avatar/demos/zhCN/icon.demo.md b/src/avatar/demos/zhCN/icon.demo.md
index 978d317a0..3b6993936 100644
--- a/src/avatar/demos/zhCN/icon.demo.md
+++ b/src/avatar/demos/zhCN/icon.demo.md
@@ -11,13 +11,12 @@
 ```
 
 ```js
-import { MdCash, MdContacts, IosContacts } from '@vicons/ionicons4'
+import { MdCash } from '@vicons/ionicons4'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
-    MdCash,
-    MdContacts,
-    IosContacts
+    MdCash
   }
-}
+})
 ```
diff --git a/src/avatar/demos/zhCN/name-size.demo.md b/src/avatar/demos/zhCN/name-size.demo.md
index d7f61a202..cff053cb5 100644
--- a/src/avatar/demos/zhCN/name-size.demo.md
+++ b/src/avatar/demos/zhCN/name-size.demo.md
@@ -13,11 +13,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: 'Oasis'
+      value: ref('Oasis')
     }
   }
-}
+})
 ```

From 1cbd62fc24e567286a1eaabec9a1cae5d56af73f Mon Sep 17 00:00:00 2001
From: Yugang Cao <34439652+Talljack@users.noreply.github.com>
Date: Sat, 31 Jul 2021 18:39:42 +0800
Subject: [PATCH 4/7] docs(icon): update icon code docs (#741)

---
 src/icon/demos/enUS/basic.demo.md | 5 +++--
 src/icon/demos/enUS/depth.demo.md | 5 +++--
 src/icon/demos/zhCN/basic.demo.md | 5 +++--
 src/icon/demos/zhCN/depth.demo.md | 5 +++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/icon/demos/enUS/basic.demo.md b/src/icon/demos/enUS/basic.demo.md
index 925e1f235..eb5d469b0 100644
--- a/src/icon/demos/enUS/basic.demo.md
+++ b/src/icon/demos/enUS/basic.demo.md
@@ -11,11 +11,12 @@
 
 ```js
 import { GameControllerOutline, GameController } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     GameControllerOutline,
     GameController
   }
-}
+})
 ```
diff --git a/src/icon/demos/enUS/depth.demo.md b/src/icon/demos/enUS/depth.demo.md
index d33e0b99c..48917d84c 100644
--- a/src/icon/demos/enUS/depth.demo.md
+++ b/src/icon/demos/enUS/depth.demo.md
@@ -22,10 +22,11 @@ To match different level text colors, icon provides `depth` prop.
 
 ```js
 import { CashOutline } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashOutline
   }
-}
+})
 ```
diff --git a/src/icon/demos/zhCN/basic.demo.md b/src/icon/demos/zhCN/basic.demo.md
index 4f006a369..235cd4a56 100644
--- a/src/icon/demos/zhCN/basic.demo.md
+++ b/src/icon/demos/zhCN/basic.demo.md
@@ -11,11 +11,12 @@
 
 ```js
 import { GameControllerOutline, GameController } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     GameControllerOutline,
     GameController
   }
-}
+})
 ```
diff --git a/src/icon/demos/zhCN/depth.demo.md b/src/icon/demos/zhCN/depth.demo.md
index f901b3490..19171df05 100644
--- a/src/icon/demos/zhCN/depth.demo.md
+++ b/src/icon/demos/zhCN/depth.demo.md
@@ -22,10 +22,11 @@
 
 ```js
 import { CashOutline } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashOutline
   }
-}
+})
 ```

From faa73a62709179a4847179a82adf682e0f0da2eb Mon Sep 17 00:00:00 2001
From: Yugang Cao <34439652+Talljack@users.noreply.github.com>
Date: Sat, 31 Jul 2021 23:48:24 +0800
Subject: [PATCH 5/7] docs(button): update button code docs (#740)

---
 src/button/demos/enUS/color.demo.md   | 5 +++--
 src/button/demos/enUS/group.demo.md   | 5 +++--
 src/button/demos/enUS/icon.demo.md    | 5 +++--
 src/button/demos/enUS/loading.demo.md | 9 +++++----
 src/button/demos/enUS/shape.demo.md   | 5 +++--
 src/button/demos/enUS/text.demo.md    | 5 +++--
 src/button/demos/zhCN/color.demo.md   | 5 +++--
 src/button/demos/zhCN/debug.demo.md   | 5 +++--
 src/button/demos/zhCN/group.demo.md   | 5 +++--
 src/button/demos/zhCN/icon.demo.md    | 5 +++--
 src/button/demos/zhCN/loading.demo.md | 9 +++++----
 src/button/demos/zhCN/shape.demo.md   | 5 +++--
 src/button/demos/zhCN/text.demo.md    | 5 +++--
 13 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/button/demos/enUS/color.demo.md b/src/button/demos/enUS/color.demo.md
index 617dcf313..748cc759f 100644
--- a/src/button/demos/enUS/color.demo.md
+++ b/src/button/demos/enUS/color.demo.md
@@ -57,10 +57,11 @@ The two colors look like toadstool.
 
 ```js
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/enUS/group.demo.md b/src/button/demos/enUS/group.demo.md
index 50a68b6ad..357a11891 100644
--- a/src/button/demos/enUS/group.demo.md
+++ b/src/button/demos/enUS/group.demo.md
@@ -89,10 +89,11 @@ Button can be grouped.
 
 ```js
 import { LogInOutline as LogInIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     LogInIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/enUS/icon.demo.md b/src/button/demos/enUS/icon.demo.md
index c0ec460cf..94765ea0a 100644
--- a/src/button/demos/enUS/icon.demo.md
+++ b/src/button/demos/enUS/icon.demo.md
@@ -25,10 +25,11 @@ Use icon in button.
 
 ```js
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/enUS/loading.demo.md b/src/button/demos/enUS/loading.demo.md
index 17d916787..8f0fd116e 100644
--- a/src/button/demos/enUS/loading.demo.md
+++ b/src/button/demos/enUS/loading.demo.md
@@ -24,15 +24,16 @@ Button has loading status.
 
 ```js
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent, ref } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   },
-  data () {
+  setup () {
     return {
-      loading: false
+      loading: ref(false)
     }
   }
-}
+})
 ```
diff --git a/src/button/demos/enUS/shape.demo.md b/src/button/demos/enUS/shape.demo.md
index d9a16f712..acb7921ef 100644
--- a/src/button/demos/enUS/shape.demo.md
+++ b/src/button/demos/enUS/shape.demo.md
@@ -16,10 +16,11 @@ Button has different shapes.
 
 ```js
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/enUS/text.demo.md b/src/button/demos/enUS/text.demo.md
index b9a2478ee..b7a4d1477 100644
--- a/src/button/demos/enUS/text.demo.md
+++ b/src/button/demos/enUS/text.demo.md
@@ -15,10 +15,11 @@ Just look like text.
 
 ```js
 import { TrainOutline as TrainIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     TrainIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/zhCN/color.demo.md b/src/button/demos/zhCN/color.demo.md
index a978355a4..d91aa3972 100644
--- a/src/button/demos/zhCN/color.demo.md
+++ b/src/button/demos/zhCN/color.demo.md
@@ -57,10 +57,11 @@
 
 ```js
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/zhCN/debug.demo.md b/src/button/demos/zhCN/debug.demo.md
index 9dd889fd0..495c86f17 100644
--- a/src/button/demos/zhCN/debug.demo.md
+++ b/src/button/demos/zhCN/debug.demo.md
@@ -375,13 +375,14 @@
 
 ```js
 import { LogInOutline, CashOutline } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashOutline,
     LogInOutline
   }
-}
+})
 ```
 
 ```css
diff --git a/src/button/demos/zhCN/group.demo.md b/src/button/demos/zhCN/group.demo.md
index 76c6a55e8..ff7d2d969 100644
--- a/src/button/demos/zhCN/group.demo.md
+++ b/src/button/demos/zhCN/group.demo.md
@@ -89,10 +89,11 @@
 
 ```js
 import { LogInOutline as LogInIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     LogInIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/zhCN/icon.demo.md b/src/button/demos/zhCN/icon.demo.md
index 96cea73da..33fc4ba87 100644
--- a/src/button/demos/zhCN/icon.demo.md
+++ b/src/button/demos/zhCN/icon.demo.md
@@ -25,10 +25,11 @@
 
 ```js
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/zhCN/loading.demo.md b/src/button/demos/zhCN/loading.demo.md
index accf97dfd..89ef75d18 100644
--- a/src/button/demos/zhCN/loading.demo.md
+++ b/src/button/demos/zhCN/loading.demo.md
@@ -18,15 +18,16 @@
 
 ```js
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent, ref } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   },
-  data () {
+  setup () {
     return {
-      loading: false
+      loading: ref(false)
     }
   }
-}
+})
 ```
diff --git a/src/button/demos/zhCN/shape.demo.md b/src/button/demos/zhCN/shape.demo.md
index 09b891739..28bc168a0 100644
--- a/src/button/demos/zhCN/shape.demo.md
+++ b/src/button/demos/zhCN/shape.demo.md
@@ -16,10 +16,11 @@
 
 ```js
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   }
-}
+})
 ```
diff --git a/src/button/demos/zhCN/text.demo.md b/src/button/demos/zhCN/text.demo.md
index c88a6d84f..3a024b59c 100644
--- a/src/button/demos/zhCN/text.demo.md
+++ b/src/button/demos/zhCN/text.demo.md
@@ -15,10 +15,11 @@
 
 ```js
 import { TrainOutline as TrainIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     TrainIcon
   }
-}
+})
 ```

From b2843a3e9a9ffb02506b00edc245d4f52a76ee01 Mon Sep 17 00:00:00 2001
From: Yugang Cao <34439652+Talljack@users.noreply.github.com>
Date: Sat, 31 Jul 2021 23:55:00 +0800
Subject: [PATCH 6/7] docs(auto-complete): update code docs (#742)

---
 .../demos/enUS/after-select.demo.md           | 33 ++++++++++---------
 src/auto-complete/demos/enUS/basic.demo.md    | 31 ++++++++---------
 .../demos/enUS/custom-input.demo.md           | 31 ++++++++---------
 src/auto-complete/demos/enUS/size.demo.md     | 31 ++++++++---------
 .../demos/zhCN/after-select.demo.md           | 33 ++++++++++---------
 src/auto-complete/demos/zhCN/basic.demo.md    | 31 ++++++++---------
 .../demos/zhCN/custom-input.demo.md           | 31 ++++++++---------
 src/auto-complete/demos/zhCN/size.demo.md     | 31 ++++++++---------
 8 files changed, 130 insertions(+), 122 deletions(-)

diff --git a/src/auto-complete/demos/enUS/after-select.demo.md b/src/auto-complete/demos/enUS/after-select.demo.md
index 01e5397e1..f93b5ec62 100644
--- a/src/auto-complete/demos/enUS/after-select.demo.md
+++ b/src/auto-complete/demos/enUS/after-select.demo.md
@@ -20,23 +20,24 @@ Blur after selection or clear after selection.
 ```
 
 ```js
-export default {
-  computed: {
-    options () {
-      return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
-        const value = this.value === null ? '' : this.value
-        const prefix = value.split('@')[0]
-        return {
-          label: prefix + suffix,
-          value: prefix + suffix
-        }
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const value = valueRef.value === null ? '' : valueRef.value
+          const prefix = value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
       })
     }
-  },
-  data () {
-    return {
-      value: null
-    }
   }
-}
+})
 ```
diff --git a/src/auto-complete/demos/enUS/basic.demo.md b/src/auto-complete/demos/enUS/basic.demo.md
index f0fb5ecb0..388e949a1 100644
--- a/src/auto-complete/demos/enUS/basic.demo.md
+++ b/src/auto-complete/demos/enUS/basic.demo.md
@@ -5,22 +5,23 @@
 ```
 
 ```js
-export default {
-  computed: {
-    options () {
-      return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
-        const prefix = this.value.split('@')[0]
-        return {
-          label: prefix + suffix,
-          value: prefix + suffix
-        }
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const prefix = valueRef.value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
       })
     }
-  },
-  data () {
-    return {
-      value: ''
-    }
   }
-}
+})
 ```
diff --git a/src/auto-complete/demos/enUS/custom-input.demo.md b/src/auto-complete/demos/enUS/custom-input.demo.md
index 764c936e7..73e85d741 100644
--- a/src/auto-complete/demos/enUS/custom-input.demo.md
+++ b/src/auto-complete/demos/enUS/custom-input.demo.md
@@ -20,22 +20,23 @@ You can replace auto-complete's input element.
 ```
 
 ```js
-export default {
-  computed: {
-    options () {
-      return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
-        const prefix = this.value.split('@')[0]
-        return {
-          label: prefix + suffix,
-          value: prefix + suffix
-        }
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const prefix = valueRef.value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
       })
     }
-  },
-  data () {
-    return {
-      value: ''
-    }
   }
-}
+})
 ```
diff --git a/src/auto-complete/demos/enUS/size.demo.md b/src/auto-complete/demos/enUS/size.demo.md
index cb610590a..3365f4487 100644
--- a/src/auto-complete/demos/enUS/size.demo.md
+++ b/src/auto-complete/demos/enUS/size.demo.md
@@ -24,22 +24,23 @@
 ```
 
 ```js
-export default {
-  computed: {
-    options () {
-      return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
-        const prefix = this.value.split('@')[0]
-        return {
-          label: prefix + suffix,
-          value: prefix + suffix
-        }
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const prefix = valueRef.value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
       })
     }
-  },
-  data () {
-    return {
-      value: ''
-    }
   }
-}
+})
 ```
diff --git a/src/auto-complete/demos/zhCN/after-select.demo.md b/src/auto-complete/demos/zhCN/after-select.demo.md
index 7a1262850..37d07b2e7 100644
--- a/src/auto-complete/demos/zhCN/after-select.demo.md
+++ b/src/auto-complete/demos/zhCN/after-select.demo.md
@@ -20,23 +20,24 @@
 ```
 
 ```js
-export default {
-  computed: {
-    options () {
-      return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
-        const value = this.value === null ? '' : this.value
-        const prefix = value.split('@')[0]
-        return {
-          label: prefix + suffix,
-          value: prefix + suffix
-        }
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const value = valueRef.value === null ? '' : valueRef.value
+          const prefix = value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
       })
     }
-  },
-  data () {
-    return {
-      value: null
-    }
   }
-}
+})
 ```
diff --git a/src/auto-complete/demos/zhCN/basic.demo.md b/src/auto-complete/demos/zhCN/basic.demo.md
index 4caaf323f..fe0ab6bd2 100644
--- a/src/auto-complete/demos/zhCN/basic.demo.md
+++ b/src/auto-complete/demos/zhCN/basic.demo.md
@@ -5,22 +5,23 @@
 ```
 
 ```js
-export default {
-  computed: {
-    options () {
-      return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
-        const prefix = this.value.split('@')[0]
-        return {
-          label: prefix + suffix,
-          value: prefix + suffix
-        }
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const prefix = valueRef.value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
       })
     }
-  },
-  data () {
-    return {
-      value: ''
-    }
   }
-}
+})
 ```
diff --git a/src/auto-complete/demos/zhCN/custom-input.demo.md b/src/auto-complete/demos/zhCN/custom-input.demo.md
index c0516548f..eecc0ba70 100644
--- a/src/auto-complete/demos/zhCN/custom-input.demo.md
+++ b/src/auto-complete/demos/zhCN/custom-input.demo.md
@@ -20,22 +20,23 @@
 ```
 
 ```js
-export default {
-  computed: {
-    options () {
-      return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
-        const prefix = this.value.split('@')[0]
-        return {
-          label: prefix + suffix,
-          value: prefix + suffix
-        }
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const prefix = valueRef.value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
       })
     }
-  },
-  data () {
-    return {
-      value: ''
-    }
   }
-}
+})
 ```
diff --git a/src/auto-complete/demos/zhCN/size.demo.md b/src/auto-complete/demos/zhCN/size.demo.md
index 49207ff06..a62554466 100644
--- a/src/auto-complete/demos/zhCN/size.demo.md
+++ b/src/auto-complete/demos/zhCN/size.demo.md
@@ -24,22 +24,23 @@
 ```
 
 ```js
-export default {
-  computed: {
-    options () {
-      return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
-        const prefix = this.value.split('@')[0]
-        return {
-          label: prefix + suffix,
-          value: prefix + suffix
-        }
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const prefix = valueRef.value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
       })
     }
-  },
-  data () {
-    return {
-      value: ''
-    }
   }
-}
+})
 ```

From 12691a8946d8292fe598d9109a69a9c3266ce281 Mon Sep 17 00:00:00 2001
From: Yugang Cao <34439652+Talljack@users.noreply.github.com>
Date: Mon, 2 Aug 2021 01:06:44 +0800
Subject: [PATCH 7/7] docs(checkbox): update checkbox code docs (#746)

---
 src/checkbox/demos/enUS/basic.demo.md         | 12 +++++++-----
 src/checkbox/demos/enUS/controlled.demo.md    | 10 ++++++----
 src/checkbox/demos/enUS/group.demo.md         | 10 ++++++----
 src/checkbox/demos/enUS/indeterminate.demo.md | 12 +++++++-----
 src/checkbox/demos/zhCN/basic.demo.md         | 12 +++++++-----
 src/checkbox/demos/zhCN/controlled.demo.md    | 10 ++++++----
 src/checkbox/demos/zhCN/group.demo.md         | 10 ++++++----
 src/checkbox/demos/zhCN/indeterminate.demo.md | 12 +++++++-----
 8 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/src/checkbox/demos/enUS/basic.demo.md b/src/checkbox/demos/enUS/basic.demo.md
index 3f3e28163..1ac734e97 100644
--- a/src/checkbox/demos/enUS/basic.demo.md
+++ b/src/checkbox/demos/enUS/basic.demo.md
@@ -10,12 +10,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: false,
-      disabled: true
+      value: ref(false),
+      disabled: ref(true)
     }
   }
-}
+})
 ```
diff --git a/src/checkbox/demos/enUS/controlled.demo.md b/src/checkbox/demos/enUS/controlled.demo.md
index 17eee183c..be6473bce 100644
--- a/src/checkbox/demos/enUS/controlled.demo.md
+++ b/src/checkbox/demos/enUS/controlled.demo.md
@@ -8,11 +8,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: false
+      value: ref(false)
     }
   }
-}
+})
 ```
diff --git a/src/checkbox/demos/enUS/group.demo.md b/src/checkbox/demos/enUS/group.demo.md
index 7fe332760..45188ead2 100644
--- a/src/checkbox/demos/enUS/group.demo.md
+++ b/src/checkbox/demos/enUS/group.demo.md
@@ -12,11 +12,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      cities: null
+      cities: ref(null)
     }
   }
-}
+})
 ```
diff --git a/src/checkbox/demos/enUS/indeterminate.demo.md b/src/checkbox/demos/enUS/indeterminate.demo.md
index 6b7a4448e..79f0e00e0 100644
--- a/src/checkbox/demos/enUS/indeterminate.demo.md
+++ b/src/checkbox/demos/enUS/indeterminate.demo.md
@@ -15,12 +15,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: false,
-      indeterminate: false
+      value: ref(false),
+      indeterminate: ref(false)
     }
   }
-}
+})
 ```
diff --git a/src/checkbox/demos/zhCN/basic.demo.md b/src/checkbox/demos/zhCN/basic.demo.md
index f86892bba..483ba5785 100644
--- a/src/checkbox/demos/zhCN/basic.demo.md
+++ b/src/checkbox/demos/zhCN/basic.demo.md
@@ -10,12 +10,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: false,
-      disabled: true
+      value: ref(false),
+      disabled: ref(true)
     }
   }
-}
+})
 ```
diff --git a/src/checkbox/demos/zhCN/controlled.demo.md b/src/checkbox/demos/zhCN/controlled.demo.md
index b699db9a6..444e95e2b 100644
--- a/src/checkbox/demos/zhCN/controlled.demo.md
+++ b/src/checkbox/demos/zhCN/controlled.demo.md
@@ -8,11 +8,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: false
+      value: ref(false)
     }
   }
-}
+})
 ```
diff --git a/src/checkbox/demos/zhCN/group.demo.md b/src/checkbox/demos/zhCN/group.demo.md
index af3440286..09d913c60 100644
--- a/src/checkbox/demos/zhCN/group.demo.md
+++ b/src/checkbox/demos/zhCN/group.demo.md
@@ -12,11 +12,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      cities: null
+      cities: ref(null)
     }
   }
-}
+})
 ```
diff --git a/src/checkbox/demos/zhCN/indeterminate.demo.md b/src/checkbox/demos/zhCN/indeterminate.demo.md
index 93369ac30..828cf6a7d 100644
--- a/src/checkbox/demos/zhCN/indeterminate.demo.md
+++ b/src/checkbox/demos/zhCN/indeterminate.demo.md
@@ -15,12 +15,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: false,
-      indeterminate: false
+      value: ref(false),
+      indeterminate: ref(false)
     }
   }
-}
+})
 ```