checkbox component

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"
 }

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>

packages/checkbox-group/index.js

@@ -0,0 +1,3 @@
+import CheckboxGroup from 'packages/checkbox/src/checkbox-group';
+
+export default CheckboxGroup;

packages/checkbox/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

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)

packages/checkbox/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './src/checkbox';
+
+export default Checkbox;

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": {}
+}

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>

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>

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) {
+        if (this.isGroup && this.parentGroup) {
-          this.parentGroup && this.parentGroup.$emit('input', val);
+           this.parentGroup.$emit('input', val);
         } else {
           this.$emit('input', val);
         }
@@ -53,28 +57,10 @@ export default {
     },
 
     isDisabled() {
-      return this.isGroup
+      return this.isGroup && this.parentGroup
-          ? (this.parentGroup && this.parentGroup.disabled) || this.disabled
+          ? 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>

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;
+    }
+  }
+}

packages/zanui-css/src/index.css

@@ -16,3 +16,4 @@
 @import './panel.css';
 @import './steps.css';
 @import './tag.css';
+@import './checkbox.css';

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
 };

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;
+    }
+  }
+};