docs(tag): update docs (#522)

* fix: change tag docs

* Apply suggestions from code review

* Update src/dynamic-tags/demos/zhCN/basic.demo.md

* Update src/dynamic-tags/demos/zhCN/basic.demo.md

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>

src/dynamic-tags/demos/enUS/basic.demo.md

@@ -5,11 +5,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      tags: ['teacher', 'programmer']
-    }
+      tags: ref(['teacher', 'programmer'])
     }
   }
+})
 ```

src/dynamic-tags/demos/enUS/form.demo.md

@@ -9,12 +9,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      model: {
+      model: ref({
         tags: ['teacher', 'programmer']
-      },
+      }),
       rules: {
         tags: {
           trigger: ['change'],
@@ -26,5 +28,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/dynamic-tags/demos/enUS/index.demo-entry.md

@@ -20,6 +20,6 @@ form
 | round | `boolean` | `false` | Whether the tag has round corner. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |
 | tag-style | `string \| Object` | `undefined` | Customize the style of the tag. |
-| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |
+| type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |
 | value | `string[]` | `undefined` | Value in controlled mode. |
 | on-update:value | `(value: boolean) => void` | `undefined` | Callback when the component's value changes. |

src/dynamic-tags/demos/zhCN/basic.demo.md

@@ -5,11 +5,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      tags: ['教师', '程序员']
-    }
+      tags: ref(['教师', '程序员'])
     }
   }
+})
 ```

src/dynamic-tags/demos/zhCN/form.demo.md

@@ -9,12 +9,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      model: {
+      model: ref({
         tags: ['教师', '程序员']
-      },
+      }),
       rules: {
         tags: {
           trigger: ['change'],
@@ -26,5 +28,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/dynamic-tags/demos/zhCN/index.demo-entry.md

@@ -20,6 +20,6 @@ form
 | round | `boolean` | `false` | 是否圆角 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 |
 | tag-style | `string \| Object` | `undefined` | 自定义标签的样式 |
-| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 标签类型 |
+| type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 标签类型 |
 | value | `string[]` | `undefined` | 受控模式下的值 |
 | on-update:value | `(value: boolean) => void` | `undefined` | 组件值发生变化时的回调 |

src/tag/demos/enUS/checkable.demo.md

@@ -5,21 +5,23 @@ It can be checkable.
 ```html
 <n-space>
   <n-tag checkable disabled v-model:checked="checked"> Real Love </n-tag>
-  <n-tag type="success" checkable v-model:checked="checked"> Yes It Is </n-tag>
-  <n-tag type="warning" checkable v-model:checked="checked"> I'm Down </n-tag>
-  <n-tag type="error" checkable v-model:checked="checked"> Yesterday </n-tag>
-  <n-tag type="info" checkable v-model:checked="checked">
+  <n-tag checkable v-model:checked="checked"> Yes It Is </n-tag>
+  <n-tag checkable v-model:checked="checked"> I'm Down </n-tag>
+  <n-tag checkable v-model:checked="checked"> Yesterday </n-tag>
+  <n-tag checkable v-model:checked="checked">
     I'm Looking Through You
   </n-tag>
 </n-space>
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      checked: false
-    }
+      checked: ref(false)
     }
   }
+})
 ```

src/tag/demos/enUS/index.demo-entry.md

@@ -20,13 +20,13 @@ shape
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | bordered | `boolean` | `true` | Whether the tag has border. |
-| checkable | `boolean` | `false` | Whether the tag is checkable. |
-| checked | `boolean` | `false` | Whether the tag is checked. |
+| checkable | `boolean` | `false` | Whether the tag is checkable, use checkable the type property invalid. |
+| checked | `boolean` | `false` | Whether the tag is checked, use with checkable. |
 | closable | `boolean` | `false` | Whether the tag is closable. |
 | disabled | `boolean` | `false` | Whether the tag is disabled. |
 | round | `boolean` | `false` | Whether the tag has round corner. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |
-| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |
+| type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |
 | on-click | `(e: MouseEvent) => void` | `undefined` | Callback on click. |
 | on-update:checked | `(value: boolean) => void` | `undefined` | Callback on checked status changes. |
 

src/tag/demos/zhCN/checkable.demo.md

@@ -5,19 +5,21 @@
 ```html
 <n-space>
   <n-tag checkable disabled v-model:checked="checked"> 爱在西元前 </n-tag>
-  <n-tag type="success" checkable v-model:checked="checked"> 不该 </n-tag>
-  <n-tag type="warning" checkable v-model:checked="checked"> 超人不会飞 </n-tag>
-  <n-tag type="error" checkable v-model:checked="checked"> 手写的从前 </n-tag>
-  <n-tag type="info" checkable v-model:checked="checked"> 哪里都是你 </n-tag>
+  <n-tag checkable v-model:checked="checked"> 不该 </n-tag>
+  <n-tag checkable v-model:checked="checked"> 超人不会飞 </n-tag>
+  <n-tag checkable v-model:checked="checked"> 手写的从前 </n-tag>
+  <n-tag checkable v-model:checked="checked"> 哪里都是你 </n-tag>
 </n-space>
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      checked: false
-    }
+      checked: ref(false)
     }
   }
+})
 ```

src/tag/demos/zhCN/index.demo-entry.md

@@ -21,13 +21,13 @@ rtl-debug
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | bordered | `boolean` | `true` | 是否有边框 |
-| checkable | `boolean` | `false` | 是否可以选择 |
-| checked | `boolean` | `false` | 是否被选中 |
+| checkable | `boolean` | `false` | 是否可以选择，使用后 type 将不生效 |
+| checked | `boolean` | `false` | 是否被选中，配合 checkable 一起使用 |
 | closable | `boolean` | `false` | 是否可关闭 |
 | disabled | `boolean` | `false` | 是否禁用 |
 | round | `boolean` | `false` | 是否圆角 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
-| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 类型 |
+| type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 类型 |
 | on-click | `(e: MouseEvent) => void` | `undefined` | 点击关闭时的回调 |
 | on-update:checked | `(value: boolean) => void` | `undefined` | 选择状态更改时的回调 |
 

src/tag/demos/zhCN/rtl-debug.demo.md

@@ -21,6 +21,7 @@
 ```js
 import { defineComponent, ref } from 'vue'
 import { unstableTagRtl } from 'naive-ui'
+
 export default defineComponent({
   setup () {
     return {