docs(tag): vue3

demo/documentation/components/tag/enUS/checkable.demo.md

@@ -4,35 +4,35 @@ It can be checkable.
 <n-tag
   checkable
   disabled
-  v-model="checked"
+  v-model:checked="checked"
 >
   Real Love
 </n-tag>
 <n-tag
   type="success"
   checkable
-  v-model="checked"
+  v-model:checked="checked"
 >
   Yes It Is
 </n-tag>
 <n-tag
   type="warning"
   checkable
-  v-model="checked"
+  v-model:checked="checked"
 >
   I'm Down
 </n-tag>
 <n-tag
   type="error"
   checkable
-  v-model="checked"
+  v-model:checked="checked"
 >
   Yesterday
 </n-tag>
 <n-tag
   type="info"
   checkable
-  v-model="checked"
+  v-model:checked="checked"
 >
   I'm Looking Through You
 </n-tag>

demo/documentation/components/tag/enUS/closable.demo.md

@@ -37,9 +37,10 @@
 ```
 ```js
 export default {
+  inject: ['message'],
   methods: {
     handleClose () {
-      this.$NMessage.info('tag close')
+      this.message.info('tag close')
     }
   }
 }

demo/documentation/components/tag/enUS/disabled.demo.md

@@ -39,13 +39,14 @@
 >
   I'm Looking Through You
 </n-tag>
-<n-switch v-model="disabled"/>
+<n-switch v-model:value="disabled"/>
 ```
 ```js
 export default {
+  inject: ['message'],
   methods: {
     handleClose () {
-      this.$NMessage.info('tag close')
+      this.message.info('tag close')
     }
   },
   data () {

demo/documentation/components/tag/enUS/dynamic-tags.demo.md

@@ -1,13 +1,15 @@
 # Edit Dynamically
 ```html
-<n-dynamic-tags v-model="model.tags" @change="handleChange" />
+<n-dynamic-tags
+  v-model:value="model.tags"
+/>
 <p style="margin: 20px 0 16px 0;">Use in form.</p>
 <n-form :model="model" :rules="rules">
   <n-form-item
     style="padding-top:0"
     path="tags"
   >
-    <n-dynamic-tags v-model="model.tags" />
+    <n-dynamic-tags v-model:value="model.tags" />
   </n-form-item>
 </n-form>
 {{model.tags}}
@@ -29,11 +31,6 @@ export default {
         }
       }
     }
-  },
-  methods: {
-    handleChange (tags) {
-      console.log('tags', tags)
-    }
   }
 }
 ```

demo/documentation/components/tag/enUS/index.demo-entry.md

@@ -10,56 +10,37 @@ checkable
 shape
 dynamic-tags
 ```
-## V-model
-### Tag
-|Prop|Event|
-|-|-|
-|checked|checked-change|
-
-### DynamicTags
-|Prop|Event|
-|-|-|
-|value|change|
 
 ## Props
 ### Tag
 |Name|Type|Default|Description|
 |-|-|-|-|
-|theme|`'light' \| 'dark' \| null \| string`|`null`||
-|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
-|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
-|disabled|`boolean`|`false`||
-|round|`boolean`|`false`||
 |checkable|`boolean`|`false`||
 |checked|`boolean`|`false`||
 |closable|`boolean`|`false`||
+|disabled|`boolean`|`false`||
+|round|`boolean`|`false`||
+|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
+|theme|`'light' \| 'dark' \| null \| string`|`null`||
+|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
+|on-update:checked|`(value: boolean) => any`|`undefined`||
 
 ### DynamicTags
 |Name|Type|Default|Description|
 |-|-|-|-|
-|value|`Array<string>`|`[]`||
+|closable|`boolean`|`false`||
+|disabled|`boolean`|`false`||
+|input-style|`Object`|`{ width: '50px' }`||
+|round|`boolean`|`false`||
+|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
+|tag-style|`Object`|`{ marginRight: '5px', marginBottom: '5px' }`||
 |theme|`'light' \| 'dark' \| null \| string`|`null`||
 |type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
-|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
-|disabled|`boolean`|`false`||
-|round|`boolean`|`false`||
-|closable|`boolean`|`false`||
-|inputStyle|`Object`|`{ width: '50px' }`||
-|tagStyle|`Object`|`{ marginRight: '5px', marginBottom: '5px' }`||
+|value|`Array<string>`|`[]`||
+|on-update:value|`(value: boolean) => any`|`undefined`||
 
 ## Slots
-|Name|Parameters|Description|
-|-|-|-|
-|default|`()`||
-
-## Events
 ### Tag
 |Name|Parameters|Description|
 |-|-|-|
-|close|`()`|
-|checked-change|`(checked: boolean)`||
-
-### DynamicTags
-|Name|Parameters|Description|
-|-|-|-|
-|change|`(tags: Array<string>)`||
+|default|`()`||

demo/documentation/components/tag/enUS/shape.demo.md

@@ -29,9 +29,10 @@ Round tag looks like a capsule.
 ```
 ```js
 export default {
+  inject: ['message'],
   methods: {
     handleClose () {
-      this.$NMessage.info('tag close')
+      this.message.info('tag close')
     }
   }
 }

demo/documentation/components/tag/enUS/size.demo.md

@@ -24,9 +24,10 @@
 ```
 ```js
 export default {
+  inject: ['message'],
   methods: {
     handleClose () {
-      this.$NMessage.info('tag close')
+      this.message.info('tag close')
     }
   }
 }

demo/documentation/components/tag/zhCN/dynamic-tags.demo.md

@@ -1,6 +1,8 @@
 # 动态编辑标签
 ```html
-<n-dynamic-tags v-model:value="model.tags" />
+<n-dynamic-tags
+  v-model:value="model.tags"
+/>
 <p style="margin: 20px 0 16px 0;">在表单中使用</p>
 <n-form :model="model" :rules="rules">
   <n-form-item