From dc39cc3163382062511f05f015d90b748df33758 Mon Sep 17 00:00:00 2001
From: daiyanze <ginoalex8964@yahoo.com>
Date: Wed, 18 Oct 2017 17:13:06 +0900
Subject: [PATCH 1/4] Feature: Checkable tag

---
 examples/routers/tag.vue   | 11 ++++++++---
 src/components/tag/tag.vue | 34 ++++++++++++++++++++++++++++------
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/examples/routers/tag.vue b/examples/routers/tag.vue
index 645170c6..09801cb5 100644
--- a/examples/routers/tag.vue
+++ b/examples/routers/tag.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
-        <Tag v-for="item in count" :key="item" :name="item" @on-close="close" closable>标签{{ item + 1 }}</Tag>
+        <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable>标签{{ item + 1 }}</Tag>
+        <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable checkable>标签{{ 1 - item }}</Tag>
         <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button>
     </div>
 </template>
@@ -9,13 +10,17 @@
         data () {
             return {
                 count: 3
-            }
+            };
         },
         methods: {
             close (e, name) {
                 console.log(e);
                 console.log(name);
+            },
+            check (e, name) {
+                console.log(e);
+                console.log(name);
             }
         }
-    }
+    };
 </script>
diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue
index 1be13116..1984e69f 100644
--- a/src/components/tag/tag.vue
+++ b/src/components/tag/tag.vue
@@ -1,7 +1,8 @@
 <template>
     <transition name="fade">
-        <div :class="classes">
-            <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
+        <div :class="classes" @click.stop="check">
+            <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span>
+            <Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
         </div>
     </transition>
 </template>
@@ -19,6 +20,14 @@
                 type: Boolean,
                 default: false
             },
+            checkable: {
+                type: Boolean,
+                default: false
+            },
+            checked: {
+                type: Boolean,
+                default: true
+            },
             color: {
                 validator (value) {
                     return oneOf(value, ['blue', 'green', 'red', 'yellow', 'default']);
@@ -33,14 +42,20 @@
                 type: [String, Number]
             }
         },
+        data () {
+            return {
+                isChecked: this.checked
+            };
+        },
         computed: {
             classes () {
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-${this.color}`]: !!this.color,
+                        [`${prefixCls}-${this.color}`]: !!this.color && (this.checkable && this.isChecked),
                         [`${prefixCls}-${this.type}`]: !!this.type,
-                        [`${prefixCls}-closable`]: this.closable
+                        [`${prefixCls}-closable`]: this.closable,
+                        [`${prefixCls}-checkable`]: this.checkable
                     }
                 ];
             },
@@ -56,10 +71,17 @@
         },
         methods: {
             close (event) {
+                this._emitAction(event, 'on-close');
+            },
+            check (event) {
+                this.isChecked = !this.isChecked;
+                this._emitAction(event, 'on-check');
+            },
+            _emitAction (event, action) {
                 if (this.name === undefined) {
-                    this.$emit('on-close', event);
+                    this.$emit(action, event);
                 } else {
-                    this.$emit('on-close', event, this.name);
+                    this.$emit(action, event, this.name);
                 }
             }
         }

From 62bf2b3ceb0ad4ead6dfdf78ef6600cdabecc678 Mon Sep 17 00:00:00 2001
From: daiyanze <ginoalex8964@yahoo.com>
Date: Wed, 18 Oct 2017 17:21:52 +0900
Subject: [PATCH 2/4] Modify: example of tags

---
 examples/routers/tag.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/routers/tag.vue b/examples/routers/tag.vue
index 09801cb5..330f0617 100644
--- a/examples/routers/tag.vue
+++ b/examples/routers/tag.vue
@@ -1,7 +1,9 @@
 <template>
     <div>
         <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable>标签{{ item + 1 }}</Tag>
-        <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable checkable>标签{{ 1 - item }}</Tag>
+        <div><Tag v-for="item in count" :key="item" :name="item" color="yellow" @on-close="close" @on-check="check" checkable>可选标签{{ item + 1 }}</Tag></div>
+        <div><Tag v-for="item in count" :key="item" :name="item" type="dot" color="blue" @on-close="close" @on-check="check" closable checkable>可选可关闭标签{{ item + 1 }}</Tag></div>
+        <br />
         <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button>
     </div>
 </template>

From 4c6d996226ae4e892de35808a6ca14fc37585f61 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Mon, 23 Oct 2017 03:40:39 -0500
Subject: [PATCH 3/4] Update tag.vue

---
 src/components/tag/tag.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue
index 1984e69f..0754d2b1 100644
--- a/src/components/tag/tag.vue
+++ b/src/components/tag/tag.vue
@@ -1,8 +1,7 @@
 <template>
     <transition name="fade">
         <div :class="classes" @click.stop="check">
-            <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span>
-            <Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
+            <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
         </div>
     </transition>
 </template>
@@ -71,17 +70,20 @@
         },
         methods: {
             close (event) {
-                this._emitAction(event, 'on-close');
-            },
-            check (event) {
-                this.isChecked = !this.isChecked;
-                this._emitAction(event, 'on-check');
-            },
-            _emitAction (event, action) {
                 if (this.name === undefined) {
-                    this.$emit(action, event);
+                    this.$emit('on-close', event);
                 } else {
-                    this.$emit(action, event, this.name);
+                    this.$emit('on-close', event, this.name);
+                }
+            },
+            check () {
+                if (!this.checkable) return;
+                const checked = !this.isChecked;
+                this.isChecked = checked;
+                if (this.name === undefined) {
+                    this.$emit('on-change', checked);
+                } else {
+                    this.$emit('on-change', checked, this.name);
                 }
             }
         }

From fd79f102dbbd15a2b6f62100c071cb1f0f1a688c Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Mon, 23 Oct 2017 03:57:05 -0500
Subject: [PATCH 4/4] Update tag.vue

---
 src/components/tag/tag.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue
index 0754d2b1..79a76b0f 100644
--- a/src/components/tag/tag.vue
+++ b/src/components/tag/tag.vue
@@ -54,7 +54,7 @@
                         [`${prefixCls}-${this.color}`]: !!this.color && (this.checkable && this.isChecked),
                         [`${prefixCls}-${this.type}`]: !!this.type,
                         [`${prefixCls}-closable`]: this.closable,
-                        [`${prefixCls}-checkable`]: this.checkable
+                        [`${prefixCls}-checked`]: this.isChecked
                     }
                 ];
             },