From 5bae32c726b9002fb89f7668a3cb95e528c010bf Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Mon, 20 Feb 2017 11:49:37 +0800
Subject: [PATCH 1/8] picker component

---
 docs/examples/picker.md               |  22 ++++
 package.json                          |   1 -
 packages/picker/src/draggable.js      |  51 ++++++++++
 packages/picker/src/picker-column.vue | 141 ++++++++++++++++++++++++--
 packages/picker/src/picker.vue        |   6 +-
 packages/zanui-css/src/index.pcss     |   1 +
 packages/zanui-css/src/picker.pcss    |  73 +++++++++++++
 src/utils/transition.js               | 100 ++++++++++++++++++
 8 files changed, 385 insertions(+), 10 deletions(-)
 create mode 100644 packages/picker/src/draggable.js
 create mode 100644 packages/zanui-css/src/picker.pcss
 create mode 100644 src/utils/transition.js

diff --git a/docs/examples/picker.md b/docs/examples/picker.md
index d9c84223b..f4d8959f3 100644
--- a/docs/examples/picker.md
+++ b/docs/examples/picker.md
@@ -1,7 +1,29 @@
+<script>
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水']
+        }
+      ]
+    };
+  }
+};
+</script>
+
 ## Picker组件
 
 模仿iOS中的`UIPickerView`。
 
+### 基础用法
+
+:::demo 基础用法
+```html
+<z-picker :columns="pickerColumns"></z-picker>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
diff --git a/package.json b/package.json
index 2090aa0d9..f10b62000 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,6 @@
     "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
     "saladcss-bem": "^0.0.1",
-    "sass-loader": "^3.2.3",
     "style-loader": "^0.13.1",
     "theaterjs": "^3.0.0",
     "transliteration": "^1.1.11",
diff --git a/packages/picker/src/draggable.js b/packages/picker/src/draggable.js
new file mode 100644
index 000000000..4f524c986
--- /dev/null
+++ b/packages/picker/src/draggable.js
@@ -0,0 +1,51 @@
+import Vue from 'vue';
+
+let isDragging = false;
+
+const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
+
+export default function(element, options) {
+  const moveFn = function(event) {
+    if (options.drag) {
+      options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  const endFn = function(event) {
+    if (!supportTouch) {
+      document.removeEventListener('mousemove', moveFn);
+      document.removeEventListener('mouseup', endFn);
+    }
+    document.onselectstart = null;
+    document.ondragstart = null;
+
+    isDragging = false;
+
+    if (options.end) {
+      options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
+    if (isDragging) return;
+    document.onselectstart = function() { return false; };
+    document.ondragstart = function() { return false; };
+
+    if (!supportTouch) {
+      document.addEventListener('mousemove', moveFn);
+      document.addEventListener('mouseup', endFn);
+    }
+    isDragging = true;
+
+    if (options.start) {
+      event.preventDefault();
+      options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  });
+
+  if (supportTouch) {
+    element.addEventListener('touchmove', moveFn);
+    element.addEventListener('touchend', endFn);
+    element.addEventListener('touchcancel', endFn);
+  }
+};
diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue
index b07316837..f0ab04053 100644
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@@ -1,14 +1,21 @@
 <template>
   <div class="z-picker-column">
-    <div class="z-picker-column-wrapper">
-      <div class="z-picker-item">
-        
+    <div class="z-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
+      <div
+        v-for="item in currentValues"
+        class="z-picker-column__item"
+        :class="{ 'z-picker-column__item--selected': item === currentValue }"
+        :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
+        {{item}}
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import translateUtil from 'src/utils/transition';
+import draggable from './draggable';
+
 const DEFAULT_ITEM_HEIGHT = 44;
 
 export default {
@@ -40,7 +47,7 @@ export default {
     return {
       currentValue: this.value,
       currentValues: this.values,
-      dragging: false
+      isDragging: false
     };
   },
 
@@ -50,11 +57,16 @@ export default {
     },
 
     currentValues(val) {
-
+      if (this.valueIndex === -1) {
+        this.currentValue = (val || [])[0];
+      }
     },
 
     currentValue(val) {
+      this.doOnValueChange();
+
       this.$emit('change', this);
+      this.$emit('input', val);
     }
   },
 
@@ -64,11 +76,128 @@ export default {
      */
     visibleContentHeight() {
       return this.itemHeight * this.visibileColumnCount;
+    },
+
+    valueIndex() {
+      return this.currentValues.indexOf(this.currentValue);
+    },
+
+    dragRange() {
+      var values = this.currentValues;
+      var visibileColumnCount = this.visibileColumnCount;
+      var itemHeight = this.itemHeight;
+
+      return [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
     }
   },
 
-  methods: {
+  mounted() {
+    this.ready = true;
+    this.$emit('input', this.currentValue);
 
+    this.initEvents();
+    this.doOnValueChange();
+  },
+
+  methods: {
+    value2Translate(value) {
+      let values = this.currentValues;
+      let valueIndex = values.indexOf(value);
+      let offset = Math.floor(this.visibileColumnCount / 2);
+      let itemHeight = this.itemHeight;
+
+      if (valueIndex !== -1) {
+        return (valueIndex - offset) * -itemHeight;
+      }
+    },
+
+    translate2Value(translate) {
+      let itemHeight = this.itemHeight;
+      translate = Math.round(translate / itemHeight) * itemHeight;
+
+      let index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
+
+      return this.currentValues[index];
+    },
+
+    initEvents() {
+      var el = this.$refs.wrapper;
+      var dragState = {};
+
+      var velocityTranslate, prevTranslate, pickerItems;
+
+      draggable(el, {
+        start: (event) => {
+          dragState = {
+            range: this.dragRange,
+            start: new Date(),
+            startLeft: event.pageX,
+            startTop: event.pageY,
+            startTranslateTop: translateUtil.getElementTranslate(el).top
+          };
+          pickerItems = el.querySelectorAll('.z-picker-item');
+        },
+
+        drag: (event) => {
+          this.isDragging = true;
+
+          dragState.left = event.pageX;
+          dragState.top = event.pageY;
+
+          let deltaY = dragState.top - dragState.startTop;
+          let translate = dragState.startTranslateTop + deltaY;
+
+          translateUtil.translateElement(el, null, translate);
+
+          velocityTranslate = translate - prevTranslate || translate;
+
+          prevTranslate = translate;
+        },
+
+        end: () => {
+          if (this.isDragging) {
+            this.isDragging = false;
+
+            var momentumRatio = 7;
+            var currentTranslate = translateUtil.getElementTranslate(el).top;
+            var duration = new Date() - dragState.start;
+
+            var momentumTranslate;
+            if (duration < 300) {
+              momentumTranslate = currentTranslate + velocityTranslate * momentumRatio;
+            }
+
+            var dragRange = dragState.range;
+
+            this.$nextTick(() => {
+              var translate;
+              var itemHeight = this.itemHeight;
+
+              if (momentumTranslate) {
+                translate = Math.round(momentumTranslate / itemHeight) * itemHeight;
+              } else {
+                translate = Math.round(currentTranslate / itemHeight) * itemHeight;
+              }
+
+              translate = Math.max(Math.min(translate, dragRange[1]), dragRange[0]);
+
+              translateUtil.translateElement(el, null, translate);
+
+              this.currentValue = this.translate2Value(translate);
+            });
+          }
+
+          dragState = {};
+        }
+      });
+    },
+
+    doOnValueChange() {
+      let value = this.currentValue;
+      let wrapper = this.$refs.wrapper;
+
+      translateUtil.translateElement(wrapper, null, this.value2Translate(value));
+    }
   }
 };
 </script>
diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue
index 513e33c8b..90e2d6d7a 100644
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="z-picker">
-    <div class="z-picker-toolbar">
+    <div class="z-picker__toolbar">
       <slot>
       </slot>
     </div>
-    <div class="z-picker-columns">
+    <div class="z-picker__columns" :class="['z-picker__columns--' + columns.length]">
       <picker-column
         v-for="(item, index) in columns"
         v-model="values[index]"
@@ -69,7 +69,7 @@ export default {
       let values = [];
 
       columns.forEach(column => {
-        values.push(column.value || column[column.defaultIndex || 0]);
+        values.push(column.value || column.values[column.defaultIndex || 0]);
       });
 
       return values;
diff --git a/packages/zanui-css/src/index.pcss b/packages/zanui-css/src/index.pcss
index 8a849223c..afe503ef7 100644
--- a/packages/zanui-css/src/index.pcss
+++ b/packages/zanui-css/src/index.pcss
@@ -8,4 +8,5 @@
 @import './field.pcss';
 @import './icon.pcss';
 @import './popup.pcss';
+@import './picker.pcss';
 @import './switch.pcss';
diff --git a/packages/zanui-css/src/picker.pcss b/packages/zanui-css/src/picker.pcss
new file mode 100644
index 000000000..59947341d
--- /dev/null
+++ b/packages/zanui-css/src/picker.pcss
@@ -0,0 +1,73 @@
+@component-namespace z {
+  @b picker {
+    overflow: hidden;
+
+    @e toolbar {
+      height: 40px;
+    }
+
+    @e columns {
+      position: relative;
+      overflow: hidden;
+
+      @m 1 {
+        .z-picker-column {
+          width: 100%;
+        }
+      }
+
+      @m 2 {
+        .z-picker-column {
+          width: 50%;
+        }
+      }
+
+      @m 2 {
+        .z-picker-column {
+          width: 33.333%;
+        }
+      }
+    }
+  }
+
+  @b picker-column {
+    font-size: 18px;
+    overflow: hidden;
+    position: relative;
+    max-height: 100%;
+    text-align: center;
+
+    @e item {
+      height: 44px;
+      line-height: 44px;
+      padding: 0 10px;
+      white-space: nowrap;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #707274;
+      left: 0;
+      top: 0;
+      width: 100%;
+      box-sizing: border-box;
+      transition-duration: .3s;
+      backface-visibility: hidden;
+
+      @m selected {
+        color: #000;
+        transform: translate3d(0, 0, 0) rotateX(0);
+      }
+    }
+  }
+
+  .picker-column-wrapper {
+    transition-duration: 0.3s;
+    transition-timing-function: ease-out;
+    backface-visibility: hidden;
+  }
+
+  .picker-column-wrapper.dragging,
+  .picker-column-wrapper.dragging .picker-item {
+    transition-duration: 0s;
+  }
+}
diff --git a/src/utils/transition.js b/src/utils/transition.js
new file mode 100644
index 000000000..215dc0d4f
--- /dev/null
+++ b/src/utils/transition.js
@@ -0,0 +1,100 @@
+import Vue from 'vue';
+
+var exportObj = {};
+
+if (!Vue.prototype.$isServer) {
+  var docStyle = document.documentElement.style;
+  var engine;
+  var translate3d = false;
+
+  if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
+    engine = 'presto';
+  } else if ('MozAppearance' in docStyle) {
+    engine = 'gecko';
+  } else if ('WebkitAppearance' in docStyle) {
+    engine = 'webkit';
+  } else if (typeof navigator.cpuClass === 'string') {
+    engine = 'trident';
+  }
+
+  var cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine];
+
+  var vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine];
+
+  var helperElem = document.createElement('div');
+  var perspectiveProperty = vendorPrefix + 'Perspective';
+  var transformProperty = vendorPrefix + 'Transform';
+  var transformStyleName = cssPrefix + 'transform';
+  var transitionProperty = vendorPrefix + 'Transition';
+  var transitionStyleName = cssPrefix + 'transition';
+  var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
+
+  if (helperElem.style[perspectiveProperty] !== undefined) {
+    translate3d = true;
+  }
+
+  var getTranslate = function(element) {
+    var result = {left: 0, top: 0};
+    if (element === null || element.style === null) return result;
+
+    var transform = element.style[transformProperty];
+    var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/ig.exec(transform);
+    if (matches) {
+      result.left = +matches[1];
+      result.top = +matches[3];
+    }
+
+    return result;
+  };
+
+  var translateElement = function(element, x, y) {
+    if (x === null && y === null) return;
+
+    if (element === null || element === undefined || element.style === null) return;
+
+    if (!element.style[transformProperty] && x === 0 && y === 0) return;
+
+    if (x === null || y === null) {
+      var translate = getTranslate(element);
+      if (x === null) {
+        x = translate.left;
+      }
+      if (y === null) {
+        y = translate.top;
+      }
+    }
+
+    cancelTranslateElement(element);
+
+    if (translate3d) {
+      element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)';
+    } else {
+      element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ')';
+    }
+  };
+
+  var cancelTranslateElement = function(element) {
+    if (element === null || element.style === null) return;
+
+    var transformValue = element.style[transformProperty];
+    
+    if (transformValue) {
+      transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
+      element.style[transformProperty] = transformValue;
+    }
+  };
+
+  exportObj = {
+    transformProperty: transformProperty,
+    transformStyleName: transformStyleName,
+    transitionProperty: transitionProperty,
+    transitionStyleName: transitionStyleName,
+    transitionEndProperty: transitionEndProperty,
+    getElementTranslate: getTranslate,
+    translateElement: translateElement,
+    cancelTranslateElement: cancelTranslateElement
+  };
+};
+
+export default exportObj;
+

From b6bb3c0fa856b26c823e4edfa9db26a05035ee44 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Mon, 20 Feb 2017 11:51:22 +0800
Subject: [PATCH 2/8] picker component

---
 docs/examples/picker.md            | 3 +++
 packages/zanui-css/src/picker.pcss | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/examples/picker.md b/docs/examples/picker.md
index f4d8959f3..d3f1a1503 100644
--- a/docs/examples/picker.md
+++ b/docs/examples/picker.md
@@ -3,6 +3,9 @@ export default {
   data() {
     return {
       pickerColumns: [
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水']
+        },
         {
           values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水']
         }
diff --git a/packages/zanui-css/src/picker.pcss b/packages/zanui-css/src/picker.pcss
index 59947341d..9dfb84acd 100644
--- a/packages/zanui-css/src/picker.pcss
+++ b/packages/zanui-css/src/picker.pcss
@@ -22,7 +22,7 @@
         }
       }
 
-      @m 2 {
+      @m 3 {
         .z-picker-column {
           width: 33.333%;
         }
@@ -35,6 +35,7 @@
     overflow: hidden;
     position: relative;
     max-height: 100%;
+    float: left;
     text-align: center;
 
     @e item {

From 10768acc9f92477ef276958a4e9d6f50f79ae516 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Mon, 20 Feb 2017 14:10:01 +0800
Subject: [PATCH 3/8] field css

---
 packages/zanui-css/src/field.pcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/zanui-css/src/field.pcss b/packages/zanui-css/src/field.pcss
index 17596194c..3a189b103 100644
--- a/packages/zanui-css/src/field.pcss
+++ b/packages/zanui-css/src/field.pcss
@@ -41,7 +41,7 @@
       padding-left: 90px;
     }
 
-    @descendent control {
+    .z-field-control {
       border: 0;
       font-size: 14px;
       line-height: 22px;

From a0910a754ecc59964d6a0a71b74f0cf4b32c3913 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Mon, 20 Feb 2017 17:05:43 +0800
Subject: [PATCH 4/8] picker component

---
 docs/examples/picker.md               | 20 ++++++++++++---
 packages/picker/src/picker-column.vue | 34 +++++++++++++++++++------
 packages/picker/src/picker.vue        |  4 ++-
 packages/zanui-css/src/picker.pcss    | 36 +++++++++++++++++++++++++++
 4 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/docs/examples/picker.md b/docs/examples/picker.md
index d3f1a1503..cbd242a8a 100644
--- a/docs/examples/picker.md
+++ b/docs/examples/picker.md
@@ -1,16 +1,30 @@
 <script>
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
 export default {
   data() {
     return {
       pickerColumns: [
         {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水']
+          values: Object.keys(citys),
+          className: 'column1'
         },
         {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水']
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
         }
       ]
     };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
   }
 };
 </script>
@@ -23,7 +37,7 @@ export default {
 
 :::demo 基础用法
 ```html
-<z-picker :columns="pickerColumns"></z-picker>
+<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
 ```
 :::
 
diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue
index f0ab04053..5e3525cf4 100644
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="z-picker-column">
+  <div class="z-picker-column" :class="classNames">
     <div class="z-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
       <div
         v-for="item in currentValues"
@@ -53,7 +53,7 @@ export default {
 
   watch: {
     values(val) {
-      this.currentValue = val;
+      this.currentValues = val;
     },
 
     currentValues(val) {
@@ -66,7 +66,6 @@ export default {
       this.doOnValueChange();
 
       this.$emit('change', this);
-      this.$emit('input', val);
     }
   },
 
@@ -78,28 +77,41 @@ export default {
       return this.itemHeight * this.visibileColumnCount;
     },
 
+    /**
+     * 当前选中值在`values`中的索引
+     */
     valueIndex() {
       return this.currentValues.indexOf(this.currentValue);
     },
 
+    /**
+     * 计算picker的拖动范围
+     */
     dragRange() {
       var values = this.currentValues;
       var visibileColumnCount = this.visibileColumnCount;
       var itemHeight = this.itemHeight;
 
       return [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
+    },
+
+    /**
+     * 计算`classNames`
+     */
+    classNames() {
+      return this.className.split(' ');
     }
   },
 
   mounted() {
-    this.ready = true;
-    this.$emit('input', this.currentValue);
-
     this.initEvents();
     this.doOnValueChange();
   },
 
   methods: {
+    /**
+     * 将当前`value`值转换成需要垂直方向需要`translate`的值
+     */
     value2Translate(value) {
       let values = this.currentValues;
       let valueIndex = values.indexOf(value);
@@ -107,10 +119,13 @@ export default {
       let itemHeight = this.itemHeight;
 
       if (valueIndex !== -1) {
-        return (valueIndex - offset) * -itemHeight;
+        return (valueIndex - offset) * (-itemHeight);
       }
     },
 
+    /**
+     * 根据当前`translate`的值转换成当前选中的`value`
+     */
     translate2Value(translate) {
       let itemHeight = this.itemHeight;
       translate = Math.round(translate / itemHeight) * itemHeight;
@@ -120,6 +135,9 @@ export default {
       return this.currentValues[index];
     },
 
+    /**
+     * 初始化拖动事件
+     */
     initEvents() {
       var el = this.$refs.wrapper;
       var dragState = {};
@@ -196,6 +214,8 @@ export default {
       let value = this.currentValue;
       let wrapper = this.$refs.wrapper;
 
+      this.$emit('input', this.currentValue);
+
       translateUtil.translateElement(wrapper, null, this.value2Translate(value));
     }
   }
diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue
index 90e2d6d7a..6be3a5821 100644
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@@ -14,6 +14,7 @@
         :visible-item-count="visibleItemCount"
         @change="columnValueChange">
       </picker-column>
+      <div class="z-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
     </div>
   </div>
 </template>
@@ -97,7 +98,8 @@ export default {
      */
     getColumnValue(index) {
       let column = this.getColumn(index);
-      return column && column.value;
+      console.log(column)
+      return column && column.values[column.valueIndex];
     },
 
     /**
diff --git a/packages/zanui-css/src/picker.pcss b/packages/zanui-css/src/picker.pcss
index 9dfb84acd..05aa9d123 100644
--- a/packages/zanui-css/src/picker.pcss
+++ b/packages/zanui-css/src/picker.pcss
@@ -30,6 +30,42 @@
     }
   }
 
+  .z-picker-center-highlight {
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top: 50%;
+    margin-top: -18px;
+    pointer-events: none;
+  }
+
+  .z-picker-center-highlight:before,
+  .z-picker-center-highlight:after {
+    content: '';
+    position: absolute;
+    height: 1px;
+    width: 100%;
+    background-color: #eaeaea;
+    display: block;
+    z-index: 15;
+    transform: scaleY(0.5);
+  }
+
+  .z-picker-center-highlight:before {
+    left: 0;
+    top: 0;
+    bottom: auto;
+    right: auto;
+  }
+
+  .z-picker-center-highlight:after {
+    left: 0;
+    bottom: 0;
+    right: auto;
+    top: auto;
+  }
+
   @b picker-column {
     font-size: 18px;
     overflow: hidden;

From 8782fe99cb85e8b9e536b1afc8786c0937c2c293 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Tue, 21 Feb 2017 09:52:46 +0800
Subject: [PATCH 5/8] radio component

---
 components.json                       |  3 ++-
 packages/picker/src/picker-column.vue | 18 +++++++++++++++++-
 packages/radio-group/CHANGELOG.md     |  8 ++++++++
 packages/radio-group/README.md        | 26 ++++++++++++++++++++++++++
 packages/radio-group/index.js         |  3 +++
 packages/radio-group/package.json     | 10 ++++++++++
 packages/radio/src/radio.vue          |  3 +++
 7 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 packages/radio-group/CHANGELOG.md
 create mode 100644 packages/radio-group/README.md
 create mode 100644 packages/radio-group/index.js
 create mode 100644 packages/radio-group/package.json

diff --git a/components.json b/components.json
index 981b1b9db..413d66319 100644
--- a/components.json
+++ b/components.json
@@ -8,5 +8,6 @@
   "cell-group": "./packages/cell-group/index.js",
   "popup": "./packages/popup/index.js",
   "dialog": "./packages/dialog/index.js",
-  "picker": "./packages/picker/index.js"
+  "picker": "./packages/picker/index.js",
+  "radio-group": "./packages/radio-group/index.js"
 }
diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue
index 5e3525cf4..81b387db2 100644
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@@ -29,13 +29,25 @@ export default {
       type: Number,
       default: 5
     },
+    /**
+     * 该列所有的可选值
+     */
     values: {
       type: Array,
       default() {
         return [];
       }
     },
-    className: {},
+    /**
+     * 每列添加额外的`className`
+     */
+    className: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 行高
+     */
     itemHeight: {
       type: Number,
       default: DEFAULT_ITEM_HEIGHT
@@ -146,6 +158,7 @@ export default {
 
       draggable(el, {
         start: (event) => {
+          // 存储当前状态
           dragState = {
             range: this.dragRange,
             start: new Date(),
@@ -210,6 +223,9 @@ export default {
       });
     },
 
+    /**
+     * `value`改变时调用
+     */
     doOnValueChange() {
       let value = this.currentValue;
       let wrapper = this.$refs.wrapper;
diff --git a/packages/radio-group/CHANGELOG.md b/packages/radio-group/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/radio-group/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/radio-group/README.md b/packages/radio-group/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/radio-group/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/radio-group/index.js b/packages/radio-group/index.js
new file mode 100644
index 000000000..596da9a2c
--- /dev/null
+++ b/packages/radio-group/index.js
@@ -0,0 +1,3 @@
+import RadioGroup from '../cell/src/radio-group';
+
+export default RadioGroup;
diff --git a/packages/radio-group/package.json b/packages/radio-group/package.json
new file mode 100644
index 000000000..7dbfa2900
--- /dev/null
+++ b/packages/radio-group/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index fad1b7259..be88dbedb 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -4,6 +4,9 @@
     :class="{
       'is-disabled': disabled
     }">
+    <span class="z-radio__label">
+      <slot></slot>
+    </span>
   </z-cell>
 </template>
 

From 3426ea0ac41f6ffa353a3c905bf36600396d26f2 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 22 Feb 2017 10:56:53 +0800
Subject: [PATCH 6/8] radio component

---
 packages/radio-group/index.js      |  2 +-
 packages/radio/src/radio-group.vue |  4 ++++
 packages/radio/src/radio.vue       | 35 ++++++++++++++++++++++++++++--
 packages/zanui-css/src/radio.pcss  |  5 +++++
 src/index.js                       |  5 ++++-
 5 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 packages/zanui-css/src/radio.pcss

diff --git a/packages/radio-group/index.js b/packages/radio-group/index.js
index 596da9a2c..6f65c1c39 100644
--- a/packages/radio-group/index.js
+++ b/packages/radio-group/index.js
@@ -1,3 +1,3 @@
-import RadioGroup from '../cell/src/radio-group';
+import RadioGroup from 'packages/radio/src/radio-group';
 
 export default RadioGroup;
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index 0327fa3d1..157922b3b 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -6,6 +6,10 @@
 
 <script>
 export default {
+  name: 'z-radio-group',
 
+  props: {
+    value: [String, Number]
+  }
 };
 </script>
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index be88dbedb..cae6c3e9d 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -4,6 +4,10 @@
     :class="{
       'is-disabled': disabled
     }">
+    <span class="z-radio__input">
+      <input type="radio" class="z-radio__control">
+      <span class="z-radio__circle"></span>
+    </span>
     <span class="z-radio__label">
       <slot></slot>
     </span>
@@ -22,10 +26,37 @@ export default {
 
   props: {
     disabled: Boolean,
-    value: {}
+    value: {},
+    parentGroup: null
   },
 
-  created() {
+  computed: {
+    isGroup() {
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options.name === 'z-radio-group') {
+          this.parentGroup = parent;
+          return true;
+        } else {
+          parent = parent.$parent;
+        }
+      }
+      return false;
+    },
+
+    model: {
+      get() {
+        return this.isGroup ? this.parentGroup.value : this.value;
+      },
+
+      set(val) {
+        if (this.isGroup) {
+
+        } else {
+          this.$emit('input', val);
+        }
+      }
+    }
   }
 };
 </script>
diff --git a/packages/zanui-css/src/radio.pcss b/packages/zanui-css/src/radio.pcss
new file mode 100644
index 000000000..c8ec135cd
--- /dev/null
+++ b/packages/zanui-css/src/radio.pcss
@@ -0,0 +1,5 @@
+@component-namespace z {
+  @b radio {
+
+  }
+}
diff --git a/src/index.js b/src/index.js
index dc0270226..4fa0815ec 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import CellGroup from '../packages/cell-group/index.js';
 import Popup from '../packages/popup/index.js';
 import Dialog from '../packages/dialog/index.js';
 import Picker from '../packages/picker/index.js';
+import RadioGroup from '../packages/radio-group/index.js';
 // zanui
 import '../packages/zanui-css/src/index.pcss';
 
@@ -23,6 +24,7 @@ const install = function(Vue) {
   Vue.component(CellGroup.name, CellGroup);
   Vue.component(Popup.name, Popup);
   Vue.component(Picker.name, Picker);
+  Vue.component(RadioGroup.name, RadioGroup);
 };
 
 // auto install
@@ -42,5 +44,6 @@ module.exports = {
   CellGroup,
   Popup,
   Dialog,
-  Picker
+  Picker,
+  RadioGroup
 };

From 396e46ef0acafe12467e3d19892bae61cd017400 Mon Sep 17 00:00:00 2001
From: jiangruowei <jiangruowei@youzan.com>
Date: Wed, 22 Feb 2017 15:30:45 +0800
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E5=8F=8A=E4=BD=BF=E7=94=A8BEM=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/examples/switch.md            | 12 ++++++++----
 packages/switch/src/switch.vue     | 19 ++++++++-----------
 packages/zanui-css/src/switch.pcss | 20 ++++++++++----------
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/docs/examples/switch.md b/docs/examples/switch.md
index 400912c95..b77773cb3 100644
--- a/docs/examples/switch.md
+++ b/docs/examples/switch.md
@@ -43,13 +43,17 @@ export default {
 :::demo 样例代码
 ```html
 <div class="page-switch">
-  <div class="page-switch-wrapper">
+  <div class="page-switch__wrapper">
     <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
-    <div class="page-switch-text">{{switchStateText}}</div>
+    <div class="page-switch__text">{{switchStateText}}</div>
   </div>
-  <div class="page-switch-wrapper">
+  <div class="page-switch__wrapper">
     <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
-    <div class="page-switch-text">OFF, DISABLED</div>
+    <div class="page-switch__text">ON, DISABLED</div>
+  </div>
+  <div class="page-switch__wrapper">
+    <o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
+    <div class="page-switch__text">OFF, DISABLED</div>
   </div>
 </div>
 ```
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index 0b8413dce..d10f30faa 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
-    <div class="o2-switch-node" :class="['is-' + switchState]"></div>
+  <div class="z-switch" :class="switchState" @click="toggleState">
+    <div class="z-switch__node" :class="switchState"></div>
   </div>
 </template>
 
@@ -39,15 +39,12 @@ export default {
   },
   computed: {
     switchState: function() {
-      if (this.disabled) {
-        return 'disabled';
-      } else if (this.loading) {
-        return 'loading';
-      } else if (this.checked) {
-        return 'on';
-      } else {
-        return 'off';
-      }
+      let switchState = this.checked ? ['is-on'] : ['is-off'];
+
+      if (this.disabled) switchState.push('is-disabled');
+      if (this.loading) switchState.push('is-loading');
+
+      return switchState;
     }
   },
   methods: {
diff --git a/packages/zanui-css/src/switch.pcss b/packages/zanui-css/src/switch.pcss
index 1199114fa..7802cb39a 100644
--- a/packages/zanui-css/src/switch.pcss
+++ b/packages/zanui-css/src/switch.pcss
@@ -17,28 +17,23 @@
       box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
       @when on {
         left: 0;
+        transition: all .5s ease-in-out;
       }
 
       @when off {
-        right: 0;
+        left: 20px;
+        transition: all .5s ease-in-out;
       }
-
     }
 
     @when on {
       background-color: #44db5e;
       border-color: #44db5e;
-      @descendent node {
-        left: 0;
-      }
     }
 
     @when off {
       background-color: #fff;
       border-color: rgba(0, 0, 0, .1);
-      @descendent node {
-        right: 0;
-      }
     }
 
     @when loading {
@@ -46,8 +41,13 @@
     }
 
     @when disabled {
-      background-color: #f2f2f2;
-      border-color: rgba(0, 0, 0, .1);
+      @when off {
+        background-color: #f2f2f2;
+        border-color: rgba(0, 0, 0, .1);
+      }
+      @when on {
+        background-color: #a6e7b1;
+      }
     }
   }
 }

From c4b59b4a7bc30b35ef1f3b8d94cf41c0acd3df46 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 22 Feb 2017 18:49:50 +0800
Subject: [PATCH 8/8] component css

---
 packages/cell/src/cell.vue        |  6 +++---
 packages/field/src/field.vue      |  4 ++--
 packages/zanui-css/src/cell.pcss  | 10 +++++-----
 packages/zanui-css/src/field.pcss | 18 +++++++++---------
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
index 996bf3a12..8db64129c 100644
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@@ -1,15 +1,15 @@
 <template>
   <a class="z-cell" :href="url" @click="handleClick">
-    <div class="z-cell-title">
+    <div class="z-cell__title">
       <slot name="icon">
         <i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
       </slot>
       <slot name="title">
         <span class="z-cell-text" v-text="title"></span>
-        <span class="z-cell-label" v-if="label" v-text="label"></span>
+        <span class="z-cell__abel" v-if="label" v-text="label"></span>
       </slot>
     </div>
-    <div class="z-cell-value" :class="{ 'is-link' : isLink }">
+    <div class="z-cell__value" :class="{ 'is-link' : isLink }">
       <slot>
         <span v-text="value"></span>
       </slot>
diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue
index af4493bd8..43041684d 100644
--- a/packages/field/src/field.vue
+++ b/packages/field/src/field.vue
@@ -8,7 +8,7 @@
     }">
     <textarea
       v-if="type === 'textarea'"
-      class="z-field-control"
+      class="z-field__control"
       v-model="currentValue"
       @change="$emit('change', currentValue)"
       :placeholder="placeholder"
@@ -18,7 +18,7 @@
     </textarea>
     <input
       v-else
-      class="z-field-control"
+      class="z-field__control"
       :value="currentValue"
       @change="$emit('change', currentValue)"
       @input="handleInput"
diff --git a/packages/zanui-css/src/cell.pcss b/packages/zanui-css/src/cell.pcss
index ef7afc429..eed4745c9 100644
--- a/packages/zanui-css/src/cell.pcss
+++ b/packages/zanui-css/src/cell.pcss
@@ -2,7 +2,7 @@
 @import "./mixins/border_retina.pcss";
 
 @component-namespace z {
-  @component cell-group {
+  @b cell-group {
     padding-left: 10px;
     position: relative;
 
@@ -11,7 +11,7 @@
     }
   }
 
-  @component cell {
+  @b cell {
     display: block;
     overflow: hidden;
     position: relative;
@@ -33,19 +33,19 @@
       }
     }
 
-    @descendent title {
+    @empty-cells: show title {
       float: left;
       overflow: hidden;
     }
 
-    @descendent label {
+    @e label {
       display: block;
       font-size: 12px;
       line-height: 1.2;
       color: #666;
     }
 
-    @descendent value {
+    @e value {
       float: right;
       overflow: hidden;
 
diff --git a/packages/zanui-css/src/field.pcss b/packages/zanui-css/src/field.pcss
index 3a189b103..a9333e609 100644
--- a/packages/zanui-css/src/field.pcss
+++ b/packages/zanui-css/src/field.pcss
@@ -2,46 +2,46 @@
 @import "./mixins/border_retina.pcss";
 
 @component-namespace z {
-  @component field {
+  @b field {
     width: 100%;
     overflow: hidden;
 
     @when textarea {
-      .z-field-control {
+      .z-field__control {
         min-height: 60px;
       }
     }
 
     @when nolabel {
-      .z-cell-title {
+      .z-cell__title {
         display: none;
       }
 
-      .z-cell-value {
+      .z-cell__value {
         width: 100%;
         padding-left: 0;
       }
     }
 
-    .z-cell-title,
-    .z-cell-value {
+    .z-cell__title,
+    .z-cell__value {
       float: none;
       box-sizing: border-box;
     }
 
-    .z-cell-title {
+    .z-cell__title {
       width: 90px;
       position: absolute;
       top: 10px;
       left: 0;
     }
 
-    .z-cell-value {
+    .z-cell__value {
       width: 100%;
       padding-left: 90px;
     }
 
-    .z-field-control {
+    @e control {
       border: 0;
       font-size: 14px;
       line-height: 22px;