doc(tag)

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

@@ -1,4 +1,5 @@
-# Basic
+# Type
+It has some types.
 ```html
 <n-tag
   closable

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

@@ -1,4 +1,5 @@
 # Checkable
+It can be checkable.
 ```html
 <n-tag
   checkable

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

@@ -1,7 +1,31 @@
 # Tag
+Always it's for showing attribute. Sometimes it's for toggle options.
+## Demos
 ```demo
 basic
 disabled
 size
 checkable
+shape
 ```
+## V-model
+|Prop|Event|
+|-|-|
+|checked|checked-change|
+
+## Props
+|Name|Type|Default|Description|
+|-|-|-|-|
+|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default`||
+|size|`'small' \| 'medium' \| 'large'`|`'medium`||
+|disabled|`boolean`|`false`||
+|round|`boolean`|`false`||
+|checkable|`boolean`|`false`||
+|checked|`boolean`|`false`||
+|closable|`boolean`|`false`||
+
+## Events
+|Name|Parameter|Description|
+|-|-|-|
+|close|()|
+|checked-change|(checked)||

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

@@ -0,0 +1,44 @@
+# Size
+Why using a round tag? Maybe when you want everything looks like a pill.
+```html
+<n-tag
+  closable
+  size="small"
+  round
+  @close="handleClose"
+>
+  Real Love
+</n-tag>
+<n-tag
+  type="success"
+  size="large"
+  round
+  closable
+  @close="handleClose"
+>
+  Yes It Is
+</n-tag>
+<n-tag
+  type="warning"
+  closable
+  round
+  @close="handleClose"
+>
+  I'm Down
+</n-tag>
+```
+```js
+export default {
+  methods: {
+    handleClose () {
+      this.$NMessage.info('tag close')
+    }
+  }
+}
+```
+```css
+.n-tag {
+  margin-right: 12px;
+  margin-bottom: 8px;
+}
+```

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

@@ -1,9 +1,14 @@
 # Size
 ```html
 <n-tag
-  closable
   size="small"
-  round
+  closable
+  @close="handleClose"
+>
+  Real Love
+</n-tag>
+<n-tag
+  closable
   @close="handleClose"
 >
   Real Love
@@ -11,34 +16,11 @@
 <n-tag
   type="success"
   size="large"
-  round
   closable
   @close="handleClose"
 >
   Yes It Is
 </n-tag>
-<n-tag
-  type="warning"
-  closable
-  @close="handleClose"
->
-  I'm Down
-</n-tag>
-<n-tag
-  type="error"
-  closable
-  round
-  @close="handleClose"
->
-  Yesterday
-</n-tag>
-<n-tag
-  type="info"
-  closable
-  @close="handleClose"
->
-  I'm Looking Through You
-</n-tag>
 ```
 ```js
 export default {

demo/loaders/NaiveUIMdLoader.js

@@ -16,7 +16,7 @@ module.exports = function (content) {
   return `<template>
   <component-documentation>
     <div style="display: flex; flex-wrap: nowrap;">
-      <div style="width: calc(100% - 184px); margin-right: 24x;">
+      <div style="width: calc(100% - 196px); margin-right: 36x;">
         ${marked(content, {
     renderer
   })}

demo/loaders/convertMd2Doc.js

@@ -119,7 +119,7 @@ function convertMd2ComponentDocumentation (text) {
 <template>
   <component-documentation>
     <div style="display: flex; flex-wrap: nowrap;">
-      <div style="width: calc(100% - 184px); margin-right: 24px;">
+      <div style="width: calc(100% - 196px); margin-right: 36px;">
         ${documentationContent}
       </div>
       <div style="width: 160px;">

demo/utils/ComponentDocumentation.vue

@@ -6,6 +6,6 @@
 
 <style>
 .n-documentation {
-  padding: 24px 24px 24px 48px;
+  padding: 24px 24px 24px 56px;
 }
 </style>

packages/common/Tag/src/main.vue

@@ -39,7 +39,7 @@ export default {
   mixins: [withapp, themeable, asthemecontext],
   model: {
     prop: 'checked',
-    event: 'input'
+    event: 'checked-change'
   },
   props: {
     type: {
@@ -56,12 +56,6 @@ export default {
       type: Boolean,
       default: false
     },
-    value: {
-      validator () {
-        return true
-      },
-      default: undefined
-    },
     checkable: {
       type: Boolean,
       default: false
@@ -89,8 +83,7 @@ export default {
     handleClick (e) {
       if (!this.disabled) {
         if (this.checkable) {
-          this.$emit('change', !this.checked)
-          this.$emit('input', !this.checked)
+          this.$emit('checked-change', !this.checked)
         }
       }
     },