fix(dynamicTags): document & events

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

@@ -1,6 +1,6 @@
 # Edit Dynamically
 ```html
-<n-dynamic-tags v-model="model.tags" @change="hanleChange" />
+<n-dynamic-tags v-model="model.tags" @change="handleChange" />
 
 Use in form.
 <n-form :model="model" :rules="rules">
@@ -31,7 +31,7 @@ export default {
     }
   },
   methods: {
-    hanleChange (tags) {
+    handleChange (tags) {
       console.log('tags', tags)
     }
   }

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

@@ -11,10 +11,16 @@ shape
 dynamicTags
 ```
 ## V-model
+### Tag
 |Prop|Event|
 |-|-|
 |checked|checked-change|
 
+### DynamicTags
+|Prop|Event|
+|-|-|
+|value|change|
+
 ## Props
 ### Tag
 |Name|Type|Default|Description|
@@ -31,15 +37,15 @@ dynamicTags
 ### DynamicTags
 |Name|Type|Default|Description|
 |-|-|-|-|
-|value|`array`|`[]`||
+|value|`Array`|`[]`||
 |theme|`'light' \| 'dark'`|`null`||
 |type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default'`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |disabled|`boolean`|`false`||
 |round|`boolean`|`false`||
 |closable|`boolean`|`false`||
-|spacing|`number`|`5`|`Label spacing, default is 5px`|
-
+|inputStyle|`object`|`{ width: '50px' }`||
+|tagStyle|`object`|`{ marginRight: '5px', marginBottom: '5px' }`||
 
 ## Slots
 |Name|Parameters|Description|
@@ -56,4 +62,4 @@ dynamicTags
 ### DynamicTags
 |Name|Parameters|Description|
 |-|-|-|
-|change|`(tags: array)`||
+|change|`(tags: Array)`||

demo/documentation/components/tag/zhCN/dynamicTags.md

@@ -1,6 +1,6 @@
 # 动态编辑标签
 ```html
-<n-dynamic-tags v-model="model.tags" @change="hanleChange" />
+<n-dynamic-tags v-model="model.tags" @change="handleChange" />
 
 在表单中使用
 <n-form :model="model" :rules="rules">
@@ -23,7 +23,7 @@ export default {
         tags: {
           trigger: ['change'],
           validator (rule, value) {
-            if (value.length >= 5) return new Error('最多四个')
+            if (value.length >= 5) return new Error('最多允许四个标签')
             return true
           }
         }
@@ -31,7 +31,7 @@ export default {
     }
   },
   methods: {
-    hanleChange (tags) {
+    handleChange (tags) {
       console.log('所有标签值', tags)
     }
   }

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

@@ -13,10 +13,16 @@ dynamicTags
 ```
 
 ## V-model
+### Tag
 |prop|event|
 |-|-|
 |checked|checked-change|
 
+### DynamicTags
+|prop|event|
+|-|-|
+|value|change|
+
 ## Props
 ### Tag
 |名称|类型|默认值|说明|
@@ -33,14 +39,15 @@ dynamicTags
 ### DynamicTags
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|value|`array`|`[]`||
+|value|`Array`|`[]`||
 |theme|`'light' \| 'dark'`|`null`||
 |type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default'`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |disabled|`boolean`|`false`||
 |round|`boolean`|`false`||
 |closable|`boolean`|`false`||
-|spacing|`number`|`5`|`标签间距, 默认是 5px`|
+|inputStyle|`object`|`{ width: '50px' }`||
+|tagStyle|`object`|`{ marginRight: '5px', marginBottom: '5px' }`||
 
 ## Slots
 |名称|参数|说明|
@@ -57,4 +64,4 @@ dynamicTags
 ### DynamicTags
 |名称|参数|说明|
 |-|-|-|
-|change|`(tags: array)`||
+|change|`(tags: Array)`||

src/Tag/src/DynamicTags.vue

@@ -2,8 +2,9 @@
   <div class="n-dynamic-tags">
     <n-tag
       v-for="(tag, index) in value"
-      :key="tag + index"
-      :style="{marginRight: spacing + 'px' }"
+      :key="index"
+      :theme="theme"
+      :style="tagStyle"
       :type="type"
       :round="round"
       :size="size"
@@ -17,17 +18,19 @@
       v-if="inputVisible"
       ref="tagInput"
       v-model="inputValue"
-      style="width:50px;"
-      size="small"
+      :theme="theme"
+      :style="inputStyle"
+      :size="inputSize"
       @keyup.enter.native="handleInputConfirm"
       @blur="handleInputConfirm"
     />
     <n-button
       v-else
-      size="small"
-      @click="handleClickAdd"
+      :theme="theme"
+      :size="inputSize"
+      @click="handleAddClick"
     >
-      + Add
+      + {{ localizedAdd }}
     </n-button>
   </div>
 </template>
@@ -35,52 +38,48 @@
 <script>
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
-import NTag from './main'
 import asformitem from '../../_mixins/asformitem'
+import locale from '../../_mixins/locale'
+import NTag from './main'
+import commonProps from './commonProps'
 
 export default {
   name: 'NDynamicTags',
   components: {
     NTag
   },
-  mixins: [withapp, themeable, asformitem({
+  mixins: [withapp, themeable, locale('Tag'), asformitem({
     change: 'change',
     input: 'input'
   })],
+  model: {
+    name: ' value',
+    event: 'change'
+  },
   props: {
+    ...commonProps,
     value: {
       type: Array,
       default: () => {
         return []
       }
     },
-    type: {
-      validator (value) {
-        return ['default', 'success', 'info', 'warning', 'error'].includes(value)
-      },
-      default: 'default'
+    tagStyle: {
+      type: Object,
+      default: () => {
+        return {
+          marginRight: '5px',
+          marginBottom: '5px'
+        }
+      }
     },
-    round: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      validator (value) {
-        return ['small', 'medium', 'large'].includes(value)
-      },
-      default: 'medium'
-    },
-    closable: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    spacing: {
-      type: Number,
-      default: 5
+    inputStyle: {
+      type: Object,
+      default: () => {
+        return {
+          width: '50px'
+        }
+      }
     }
   },
   data () {
@@ -89,30 +88,36 @@ export default {
       inputVisible: false
     }
   },
-  watch: {
-    value (tags) {
-      this.$emit('change', tags)
+  computed: {
+    localizedAdd () {
+      return this.localeNamespace.add
+    },
+    inputSize () {
+      const sizes = ['small', 'medium', 'large']
+      const tagSizeIndex = sizes.findIndex(size => size === this.size)
+      const inputSizeIndex = (tagSizeIndex - 1) > 0 ? tagSizeIndex - 1 : 0
+      return sizes[inputSizeIndex]
     }
   },
   methods: {
     handleCloseClick (index) {
       const tags = this.value.slice(0)
       tags.splice(index, 1)
-      this.$emit('input', tags)
+      this.$emit('change', tags)
     },
     handleInputConfirm () {
       if (this.inputValue) {
         const tags = this.value.slice(0)
         tags.push(this.inputValue)
-        this.$emit('input', tags)
+        this.$emit('change', tags)
       }
       this.inputVisible = false
       this.inputValue = ''
     },
-    handleClickAdd () {
+    handleAddClick () {
       this.inputVisible = true
-      this.$nextTick(_ => {
-        this.$refs.tagInput.$refs.input.focus()
+      this.$nextTick(() => {
+        this.$refs.tagInput.focus()
       })
     }
   }

src/Tag/src/commonProps.js

@@ -0,0 +1,26 @@
+export default {
+  type: {
+    validator (value) {
+      return ['default', 'success', 'info', 'warning', 'error'].includes(value)
+    },
+    default: 'default'
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    validator (value) {
+      return ['small', 'medium', 'large'].includes(value)
+    },
+    default: 'medium'
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+}

src/Tag/src/main.vue

@@ -29,6 +29,7 @@
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import mdClose from '../../_icons/md-close.vue'
+import commonProps from './commonProps'
 
 export default {
   name: 'NTag',
@@ -41,16 +42,7 @@ export default {
     event: 'checked-change'
   },
   props: {
-    type: {
-      validator (value) {
-        return ['default', 'success', 'info', 'warning', 'error'].includes(value)
-      },
-      default: 'default'
-    },
-    round: {
-      type: Boolean,
-      default: false
-    },
+    ...commonProps,
     checked: {
       type: Boolean,
       default: false
@@ -59,20 +51,6 @@ export default {
       type: Boolean,
       default: false
     },
-    size: {
-      validator (value) {
-        return ['small', 'medium', 'large'].includes(value)
-      },
-      default: 'medium'
-    },
-    closable: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     stopClickPropagation: {
       type: Boolean,
       default: false

src/_interoperation/darkStyleScheme.scss

@@ -31,6 +31,6 @@
   dividerColor: $--overlay-divider;
   borderColor: $--n-border-color;
   easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
-  tableHeaderColor: composite-color($--neutral-card, $--overlay-action);
-  inputBackgroundColor:  $--overlay-input;
-}
+  tableHeaderBackgroundColor: $--n-table-header-overlay-background-color;
+  inputBackgroundColor: $--n-input-overlay-background-color;
+}

src/_interoperation/lightStyleScheme.scss

@@ -32,6 +32,6 @@
   dividerColor: $--overlay-divider;
   borderColor: $--n-border-color;
   easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
-  tableHeaderColor: composite-color($--neutral-card, $--overlay-action);
-  inputBackgroundColor:  $--overlay-input;
-}
+  tableHeaderBackgroundColor: $--n-table-header-overlay-background-color;
+  inputBackgroundColor: $--n-input-overlay-background-color;
+}

src/locale/enUS.js

@@ -68,5 +68,8 @@ export default {
   Pagination: {
     goto: 'Goto',
     selectionSuffix: 'page'
+  },
+  Tag: {
+    add: 'Add'
   }
 }

src/locale/zhCN.js

@@ -68,5 +68,8 @@ export default {
   Pagination: {
     goto: '跳至',
     selectionSuffix: '页'
+  },
+  Tag: {
+    add: '添加'
   }
 }

styles/DynamicTags.scss

@@ -1,12 +0,0 @@
-@import './mixins/mixins.scss';
-
-@include themes-mixin {
-  @include once {
-    @include b(dynamic-tags) {
-      width: 100%;
-      @include b(tag) {
-        margin-bottom: 5px;
-      }
-    }
-  }
-}

styles/index.scss

@@ -70,5 +70,4 @@
 @import "./Empty.scss";
 @import "./Log.scss";
 @import "./Typography.scss";
-@import "./Upload.scss";
-@import "./DynamicTags.scss";
+@import "./Upload.scss";