Merge pull request #752 from TuSimple/docs

Docs

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
-    }
   }
-}
+})
 ```

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: ''
-    }
   }
-}
+})
 ```

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: ''
-    }
   }
-}
+})
 ```

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: ''
-    }
   }
-}
+})
 ```

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
-    }
   }
-}
+})
 ```

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: ''
-    }
   }
-}
+})
 ```

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: ''
-    }
   }
-}
+})
 ```

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: ''
-    }
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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')
     }
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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')
     }
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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. |

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       | `()` | 操作区域内容 |

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)
     }
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```

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. |

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 })` | 折叠面板节点头部的自定义图标 |

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```

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
   }
-}
+})
 ```