From e0be5b962ef919216363112dbcfc47d2126cde33 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 1 Mar 2017 11:15:15 +0800
Subject: [PATCH] checkbox component

---
 components.json                          |  4 +-
 docs/examples/checkbox.vue               | 39 +++++++++++
 packages/checkbox-group/index.js         |  3 +
 packages/checkbox/CHANGELOG.md           |  8 +++
 packages/checkbox/README.md              | 26 ++++++++
 packages/checkbox/index.js               |  3 +
 packages/checkbox/package.json           | 10 +++
 packages/checkbox/src/checkbox-group.vue | 22 ++++++
 packages/checkbox/src/checkbox.vue       | 85 ++++++++++++++++++++++++
 packages/radio/src/radio.vue             | 34 +++-------
 packages/zanui-css/src/checkbox.css      | 44 ++++++++++++
 packages/zanui-css/src/index.css         |  1 +
 src/index.js                             |  8 ++-
 src/mixins/findParent.js                 | 22 ++++++
 14 files changed, 283 insertions(+), 26 deletions(-)
 create mode 100644 docs/examples/checkbox.vue
 create mode 100644 packages/checkbox-group/index.js
 create mode 100644 packages/checkbox/CHANGELOG.md
 create mode 100644 packages/checkbox/README.md
 create mode 100644 packages/checkbox/index.js
 create mode 100644 packages/checkbox/package.json
 create mode 100644 packages/checkbox/src/checkbox-group.vue
 create mode 100644 packages/checkbox/src/checkbox.vue
 create mode 100644 packages/zanui-css/src/checkbox.css
 create mode 100644 src/mixins/findParent.js

diff --git a/components.json b/components.json
index 3c3cd88de..5827ed020 100644
--- a/components.json
+++ b/components.json
@@ -15,5 +15,7 @@
   "panel": "./packages/panel/index.js",
   "card": "./packages/card/index.js",
   "steps": "./packages/steps/index.js",
-  "tag": "./packages/tag/index.js"
+  "tag": "./packages/tag/index.js",
+  "checkbox": "./packages/checkbox/index.js",
+  "checkbox-group": "./packages/checkbox-group/index.js"
 }
diff --git a/docs/examples/checkbox.vue b/docs/examples/checkbox.vue
new file mode 100644
index 000000000..3f4e97252
--- /dev/null
+++ b/docs/examples/checkbox.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="page-checkbox">
+    <h1 class="page-title">Checkbox</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+
+    <h2 class="page-sub-title">禁用状态</h2>
+    <zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
+
+    <h2 class="page-sub-title">Checkbox组</h2>
+    <zan-checkbox-group v-model="result">
+      <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+    </zan-checkbox-group>
+  </div>  
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: []
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+</script>
diff --git a/packages/checkbox-group/index.js b/packages/checkbox-group/index.js
new file mode 100644
index 000000000..b6265c833
--- /dev/null
+++ b/packages/checkbox-group/index.js
@@ -0,0 +1,3 @@
+import CheckboxGroup from 'packages/checkbox/src/checkbox-group';
+
+export default CheckboxGroup;
diff --git a/packages/checkbox/CHANGELOG.md b/packages/checkbox/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/checkbox/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/checkbox/README.md
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/checkbox/index.js b/packages/checkbox/index.js
new file mode 100644
index 000000000..d4bcea5a2
--- /dev/null
+++ b/packages/checkbox/index.js
@@ -0,0 +1,3 @@
+import Checkbox from './src/checkbox';
+
+export default Checkbox;
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
new file mode 100644
index 000000000..f15aa3a03
--- /dev/null
+++ b/packages/checkbox/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/zan-checkbox",
+  "version": "0.0.1",
+  "description": "checkbox component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}
diff --git a/packages/checkbox/src/checkbox-group.vue b/packages/checkbox/src/checkbox-group.vue
new file mode 100644
index 000000000..40439ce9e
--- /dev/null
+++ b/packages/checkbox/src/checkbox-group.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="zan-checkbox-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-checkbox-group',
+
+  props: {
+    value: {},
+    disabled: Boolean
+  },
+
+  watch: {
+    value(val) {
+      this.$emit('change', val);
+    }
+  }
+};
+</script>
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
new file mode 100644
index 000000000..33cbce9b8
--- /dev/null
+++ b/packages/checkbox/src/checkbox.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="zan-checkbox"
+    :class="{
+      'is-disabled': isDisabled
+    }">
+    <span class="zan-checkbox__input">
+      <input
+        v-model="currentValue"
+        type="checkbox"
+        class="zan-checkbox__control"
+        :disabled="isDisabled">
+      <span class="zan-icon" :class="{
+        'zan-icon-checked': isChecked,
+        'zan-icon-check': !isChecked
+      }">
+      </span>
+    </span>
+    <span class="zan-checkbox__label">
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script>
+import findParent from 'src/mixins/findParent';
+
+export default {
+  name: 'zan-checkbox',
+
+  mixins: [findParent],
+
+  props: {
+    disabled: Boolean,
+    value: {},
+    name: [String, Number]
+  },
+
+  computed: {
+    isGroup() {
+      return !!this.findParentByComponentName('zan-checkbox-group');
+    },
+
+    currentValue: {
+      get() {
+        return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
+      },
+
+      set(val) {
+        if (this.isGroup && this.parentGroup) {
+          let parentValue = this.parentGroup.value.slice();
+          if (val) {
+            if (parentValue.indexOf(this.name) === -1) {
+              parentValue.push(this.name);
+              this.parentGroup.$emit('input', parentValue);
+            }
+          } else {
+            let index = parentValue.indexOf(this.name);
+            if (index !== -1) {
+              parentValue.splice(index, 1);
+              this.parentGroup.$emit('input', parentValue);
+            }
+          }
+        } else {
+          this.$emit('input', val);
+        }
+      }
+    },
+
+    isChecked() {
+      if ({}.toString.call(this.currentValue) === '[object Boolean]') {
+        return this.currentValue;
+      } else if (Array.isArray(this.currentValue)) {
+        return this.currentValue.indexOf(this.name) > -1;
+      }
+    },
+
+    isDisabled() {
+      return this.isGroup && this.parentGroup
+          ? this.parentGroup.disabled || this.disabled
+          : this.disabled;
+    }
+  }
+};
+</script>
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index b026834d7..ad7d3e3a6 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -24,9 +24,13 @@
 </template>
 
 <script>
+import findParent from 'src/mixins/findParent';
+
 export default {
   name: 'zan-radio',
 
+  mixins: [findParent],
+
   props: {
     disabled: Boolean,
     value: {},
@@ -35,17 +39,17 @@ export default {
 
   computed: {
     isGroup() {
-      return !!this.findRadioGroup();
+      return !!this.findParentByComponentName('zan-radio-group');
     },
 
     currentValue: {
       get() {
-        return this.isGroup ? (this.parentGroup && this.parentGroup.value) : this.value;
+        return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value;
       },
 
       set(val) {
-        if (this.isGroup) {
-          this.parentGroup && this.parentGroup.$emit('input', val);
+        if (this.isGroup && this.parentGroup) {
+           this.parentGroup.$emit('input', val);
         } else {
           this.$emit('input', val);
         }
@@ -53,28 +57,10 @@ export default {
     },
 
     isDisabled() {
-      return this.isGroup
-          ? (this.parentGroup && this.parentGroup.disabled) || this.disabled
+      return this.isGroup && this.parentGroup
+          ? this.parentGroup.disabled || this.disabled
           : this.disabled;
     }
-  },
-
-  methods: {
-    findRadioGroup() {
-      if (this.parentGroup) return;
-
-      let parent = this.$parent;
-      while (parent) {
-        if (parent.$options.name === 'zan-radio-group') {
-          this.parentGroup = parent;
-          break;
-        } else {
-          parent = parent.$parent;
-        }
-      }
-
-      return this.parentGroup;
-    }
   }
 };
 </script>
diff --git a/packages/zanui-css/src/checkbox.css b/packages/zanui-css/src/checkbox.css
new file mode 100644
index 000000000..391c1da04
--- /dev/null
+++ b/packages/zanui-css/src/checkbox.css
@@ -0,0 +1,44 @@
+@import "./common/var.css";
+
+@component-namespace zan {
+  @b checkbox {
+    @when disabled {
+      .zan-icon {
+        color: #d1dbe5;
+      }
+    }
+
+    @e input {
+      position: relative;
+      height: 22px;
+      margin-right: 15px;
+    }
+
+    @e control {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 22px;
+      height: 22px;
+      opacity: 0;
+      margin: 0;
+    }
+
+    @e label {
+      line-height: 22px;
+    }
+
+    .zan-icon {
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .zan-icon-checked {
+      color: $c-green;
+    }
+
+    .zan-icon-check {
+      color: $c-gray-dark;
+    }
+  }
+}
diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css
index 387aaba63..b8c02e927 100644
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@@ -16,3 +16,4 @@
 @import './panel.css';
 @import './steps.css';
 @import './tag.css';
+@import './checkbox.css';
diff --git a/src/index.js b/src/index.js
index 62c44f605..b124b77fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,6 +15,8 @@ import Panel from '../packages/panel/index.js';
 import Card from '../packages/card/index.js';
 import Steps from '../packages/steps/index.js';
 import Tag from '../packages/tag/index.js';
+import Checkbox from '../packages/checkbox/index.js';
+import CheckboxGroup from '../packages/checkbox-group/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -34,6 +36,8 @@ const install = function(Vue) {
   Vue.component(Card.name, Card);
   Vue.component(Steps.name, Steps);
   Vue.component(Tag.name, Tag);
+  Vue.component(Checkbox.name, Checkbox);
+  Vue.component(CheckboxGroup.name, CheckboxGroup);
 };
 
 // auto install
@@ -60,5 +64,7 @@ module.exports = {
   Panel,
   Card,
   Steps,
-  Tag
+  Tag,
+  Checkbox,
+  CheckboxGroup
 };
diff --git a/src/mixins/findParent.js b/src/mixins/findParent.js
new file mode 100644
index 000000000..9c4ec13f4
--- /dev/null
+++ b/src/mixins/findParent.js
@@ -0,0 +1,22 @@
+/**
+ * 根据父组件名找到对应`parent`
+ */
+export default {
+  methods: {
+    findParentByComponentName(name) {
+      if (this.parentGroup) return;
+
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options.name === name) {
+          this.parentGroup = parent;
+          break;
+        } else {
+          parent = parent.$parent;
+        }
+      }
+
+      return this.parentGroup;
+    }
+  }
+};