Merge pull request #111 from wanli-song/develop

feat(DynamicTags && export some colors)

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

@@ -0,0 +1,39 @@
+# Edit Dynamically
+```html
+<n-dynamic-tags v-model="model.tags" @change="handleChange" />
+
+Use in form.
+<n-form :model="model" :rules="rules">
+  <n-form-item
+    path="tags"
+  >
+    <n-dynamic-tags v-model="model.tags" />
+  </n-form-item>
+</n-form>
+{{model.tags}}
+```
+```js
+export default {
+  data () {
+    return {
+      model: {
+        tags: ['teacher', 'programmer']
+      },
+      rules: {
+        tags: {
+          trigger: ['change'],
+          validator (rule, value) {
+            if (value.length >= 5) return new Error('Up to 4 tags')
+            return true
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    handleChange (tags) {
+      console.log('tags', tags)
+    }
+  }
+}
+```

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

@@ -8,17 +8,25 @@ disabled
 size
 checkable
 shape
+dynamicTags
 ```
 ## V-model
+### Tag
 |Prop|Event|
 |-|-|
 |checked|checked-change|
 
+### DynamicTags
+|Prop|Event|
+|-|-|
+|value|change|
+
 ## Props
+### Tag
 |Name|Type|Default|Description|
 |-|-|-|-|
 |theme|`'light' \| 'dark'`|`null`||
-|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default'`||
+|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |disabled|`boolean`|`false`||
 |round|`boolean`|`false`||
@@ -26,13 +34,32 @@ shape
 |checked|`boolean`|`false`||
 |closable|`boolean`|`false`||
 
+### DynamicTags
+|Name|Type|Default|Description|
+|-|-|-|-|
+|value|`Array<string>`|`[]`||
+|theme|`'light' \| 'dark'`|`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' }`||
+
 ## Slots
 |Name|Parameters|Description|
 |-|-|-|
 |default|`()`||
 
 ## Events
+### Tag
 |Name|Parameters|Description|
 |-|-|-|
 |close|`()`|
-|checked-change|`(checked: boolean)`||
+|checked-change|`(checked: boolean)`||
+
+### DynamicTags
+|Name|Parameters|Description|
+|-|-|-|
+|change|`(tags: Array<string>)`||

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

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

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

@@ -9,18 +9,26 @@ disabled
 size
 checkable
 shape
+dynamicTags
 ```
 
 ## V-model
+### Tag
 |prop|event|
 |-|-|
 |checked|checked-change|
 
+### DynamicTags
+|prop|event|
+|-|-|
+|value|change|
+
 ## Props
+### Tag
 |名称|类型|默认值|说明|
 |-|-|-|-|
 |theme|`'light' \| 'dark'`|`null`||
-|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default'`||
+|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |disabled|`boolean`|`false`||
 |round|`boolean`|`false`||
@@ -28,13 +36,32 @@ shape
 |checked|`boolean`|`false`||
 |closable|`boolean`|`false`||
 
+### DynamicTags
+|名称|类型|默认值|说明|
+|-|-|-|-|
+|value|`Array<string>`|`[]`||
+|theme|`'light' \| 'dark'`|`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' }`||
+
 ## Slots
 |名称|参数|说明|
 |-|-|-|
 |default|`()`||
 
 ## Events
+### Tag
 |名称|参数|说明|
 |-|-|-|
 |close|`()`|
 |checked-change|`(checked: boolean)`||
+
+### DynamicTags
+|名称|参数|说明|
+|-|-|-|
+|change|`(tags: Array<string>)`||

src/Tag/index.js

@@ -1,8 +1,10 @@
 /* istanbul ignore file */
 import Tag from './src/main.vue'
+import DynamicTags from './src/DynamicTags.vue'
 
 Tag.install = function (Vue) {
   Vue.component(Tag.name, Tag)
+  Vue.component(DynamicTags.name, DynamicTags)
 }
 
 export default Tag

src/Tag/src/DynamicTags.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="n-dynamic-tags">
+    <n-tag
+      v-for="(tag, index) in value"
+      :key="index"
+      :theme="theme"
+      :style="tagStyle"
+      :type="type"
+      :round="round"
+      :size="size"
+      :closable="closable"
+      :disabled="disabled"
+      @close="handleCloseClick(index)"
+    >
+      {{ tag }}
+    </n-tag>
+    <n-input
+      v-if="inputVisible"
+      ref="tagInput"
+      v-model="inputValue"
+      :theme="theme"
+      :style="inputStyle"
+      :size="inputSize"
+      @keyup.enter.native="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+    <n-button
+      v-else
+      :theme="theme"
+      :size="inputSize"
+      @click="handleAddClick"
+    >
+      + {{ localizedAdd }}
+    </n-button>
+  </div>
+</template>
+
+<script>
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
+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, locale('Tag'), asformitem({
+    change: 'change'
+  })],
+  model: {
+    name: 'value',
+    event: 'change'
+  },
+  props: {
+    ...commonProps,
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    tagStyle: {
+      type: Object,
+      default: () => {
+        return {
+          marginRight: '5px',
+          marginBottom: '5px'
+        }
+      }
+    },
+    inputStyle: {
+      type: Object,
+      default: () => {
+        return {
+          width: '50px'
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      inputValue: '',
+      inputVisible: false
+    }
+  },
+  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('change', tags)
+    },
+    handleInputConfirm () {
+      if (this.inputValue) {
+        const tags = this.value.slice(0)
+        tags.push(this.inputValue)
+        this.$emit('change', tags)
+      }
+      this.inputVisible = false
+      this.inputValue = ''
+    },
+    handleAddClick () {
+      this.inputVisible = true
+      this.$nextTick(() => {
+        this.$refs.tagInput.focus()
+      })
+    }
+  }
+}
+</script>

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,4 +31,6 @@
   dividerColor: $--overlay-divider;
   borderColor: $--n-border-color;
   easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
-}
+  tableHeaderOverlayBackgroundColor: $--n-table-header-overlay-background-color;
+  inputOverlayBackgroundColor: $--n-input-overlay-background-color;
+}

src/_interoperation/lightStyleScheme.scss

@@ -32,4 +32,6 @@
   dividerColor: $--overlay-divider;
   borderColor: $--n-border-color;
   easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
-}
+  tableHeaderOverlayBackgroundColor: $--n-table-header-overlay-background-color;
+  inputOverlayBackgroundColor: $--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: '添加'
   }
 }