use zanui name

packages/button/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/o2-button",
+  "name": "@youzan/z-button",
   "version": "0.0.1",
   "description": "button component",
   "main": "./lib/index.js",

packages/button/src/button.vue

@@ -2,9 +2,9 @@
   <button
     :type="nativeType"
     :class="[
-      'o2-button',
-      'o2-button--' + type,
-      'o2-button--' + size,
+      'z-button',
+      'z-button--' + type,
+      'z-button--' + size,
       {
         'is-disabled': disabled,
         'is-loading': loading
@@ -13,14 +13,14 @@
     :disabled="disabled"
     @click="handleClick"
   >
-    <i v-if="loading" class="o2-icon-loading"></i>
-    <span class="o2-button-text"><slot></slot></span>
+    <i v-if="loading" class="z-icon-loading"></i>
+    <span class="z-button-text"><slot></slot></span>
   </button>
 </template>
 
 <script>
 /**
- * o2-header
+ * z-header
  * @module components/button
  * @desc 按钮
  * @param {string} [type=default] - 显示类型，接受 default, primary, danger
@@ -30,10 +30,10 @@
  * @param {slot} - 显示文本
  *
  * @example
- * <o2-button size="large" type="primary">按钮</o2-button>
+ * <z-button size="large" type="primary">按钮</z-button>
  */
 export default {
-  name: 'o2-button',
+  name: 'z-button',
 
   methods: {
     handleClick(e) {

packages/cell/src/cell-group.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="o2-cell-group">
+  <div class="z-cell-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'o2-cell-group'
+  name: 'z-cell-group'
 };
 </script>

packages/cell/src/cell.vue

@@ -1,15 +1,15 @@
 <template>
-  <a class="o2-cell" :href="url" @click="handleClick">
-    <div class="o2-cell-title">
+  <a class="z-cell" :href="url" @click="handleClick">
+    <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="o2-cell-text" v-text="title"></span>
-        <span class="o2-cell-label" v-if="label" v-text="label"></span>
+        <span class="z-cell-text" v-text="title"></span>
+        <span class="z-cell-label" v-if="label" v-text="label"></span>
       </slot>
     </div>
-    <div class="o2-cell-value" :class="{ 'is-link' : isLink }">
+    <div class="z-cell-value" :class="{ 'is-link' : isLink }">
       <slot>
         <span v-text="value"></span>
       </slot>
@@ -20,7 +20,7 @@
 
 <script>
 export default {
-  name: 'o2-cell',
+  name: 'z-cell',
 
   props: {
     icon: String,

packages/dialog/src/dialog.vue

@@ -1,16 +1,16 @@
 <template>
   <transition name="dialog-bounce">
-    <div class="o2-dialog-wrapper">
-      <div class="o2-dialog" v-show="value">
-        <div class="o2-dialog-header" v-if="title">
-          <div class="o2-dialog-title" v-text="title"></div>
+    <div class="z-dialog-wrapper">
+      <div class="z-dialog" v-show="value">
+        <div class="z-dialog-header" v-if="title">
+          <div class="z-dialog-title" v-text="title"></div>
         </div>
-        <div class="o2-dialog-content" v-if="message">
-          <div class="o2-dialog-message" v-html="message"></div>
+        <div class="z-dialog-content" v-if="message">
+          <div class="z-dialog-message" v-html="message"></div>
         </div>
-        <div class="o2-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="o2-dialog-btn o2-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="o2-dialog-btn o2-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        <div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
         </div>
       </div>
     </div>
@@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
 const CONFIRM_TEXT = '确认';
 
 export default {
-  name: 'o2-dialog',
+  name: 'z-dialog',
 
   mixins: [Popup],
 

packages/field/package.json

@@ -1,3 +1,3 @@
 {
-  "name": "o2-field"
+  "name": "z-field"
 }

packages/field/src/field.vue

@@ -1,6 +1,6 @@
 <template>
-  <o2-cell
-    class="o2-field"
+  <z-cell
+    class="z-field"
     :title="label"
     :class="{
       'is-textarea': type === 'textarea',
@@ -8,7 +8,7 @@
     }">
     <textarea
       v-if="type === 'textarea'"
-      class="o2-field-control"
+      class="z-field-control"
       v-model="currentValue"
       @change="$emit('change', currentValue)"
       :placeholder="placeholder"
@@ -18,7 +18,7 @@
     </textarea>
     <input
       v-else
-      class="o2-field-control"
+      class="z-field-control"
       :value="currentValue"
       @change="$emit('change', currentValue)"
       @input="handleInput"
@@ -27,17 +27,17 @@
       :maxlength="maxlength"
       :disabled="disabled"
       :readonly="readonly">
-  </o2-cell>
+  </z-cell>
 </template>
 
 <script>
-import O2Cell from 'packages/cell';
+import zCell from 'packages/cell';
 
 export default {
-  name: 'o2-field',
+  name: 'z-field',
 
   components: {
-    O2Cell
+    zCell
   },
 
   props: {

packages/icon/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "o2-icon",
+  "name": "z-icon",
   "version": "0.0.1",
-  "description": "o2-icon",
+  "description": "z-icon",
   "main": "index.js",
   "author": "zhangmin <zhangmin@youzan.com>",
   "devDependencies": {},

packages/icon/src/icon.vue

@@ -4,7 +4,7 @@
 
 <script>
   export default {
-    name: 'o2-icon',
+    name: 'z-icon',
 
     props: {
       name: String

packages/picker/CHANGELOG.md

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

packages/picker/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/picker/index.js

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

packages/picker/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/picker/src/picker-column.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="z-picker-column">
+    
+  </div>
+</template>
+
+<script>
+const DEFAULT_ITEM_HEIGHT = 44;
+
+export default {
+  name: 'z-picker-column',
+
+  props: {
+    /**
+     * 每一列可见备选元素的个数
+     */
+    visibileColumnCount: {
+      type: Number,
+      default: 5
+    },
+    values: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    className: {},
+    itemHeight: {
+      type: Number,
+      default: DEFAULT_ITEM_HEIGHT
+    },
+    value: {}
+  },
+
+  data() {
+    return {
+      currentValue: this.value,
+      dragging: false
+    };
+  },
+
+  watch: {
+    values(val) {
+
+    },
+
+    currentValue(val) {
+      this.$emit('change');
+    }
+  },
+
+  computed: {
+    /**
+     * picker可见备选元素总高度
+     */
+    visibleContentHeight() {
+      return this.itemHeight * this.visibileColumnCount;
+    }
+  },
+
+  methods: {
+
+  }
+};
+</script>

packages/picker/src/picker.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="z-picker">
+    <div class="z-picker-toolbar">
+      <slot>
+      </slot>
+    </div>
+    <div class="z-picker-columns">
+      <picker-column
+        v-for="(item, index) in columns"
+        v-model="values[index]"
+        :values="item.values"
+        :class-name="item.className"
+        :itemHeight="itemHeight"
+        :visible-item-count="visibleItemCount"
+        @change="columnValueChange">
+      </picker-column>
+    </div>
+  </div>
+</template>
+
+<script>
+import PickerColumn from './picker-column';
+
+const DEFAULT_ITEM_HEIGHT = 44;
+
+export default {
+  name: 'z-picker',
+
+  components: {
+    PickerColumn
+  },
+
+  props: {
+    /**
+     * 每一列可见备选元素的个数
+     */
+    visibileColumnCount: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * 选中元素区高度
+     */
+    itemHeight: {
+      type: Number,
+      default: DEFAULT_ITEM_HEIGHT
+    },
+    /**
+     * 对象数组，配置每一列显示的数据
+     */
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * 否在组件顶部显示一个toolbar
+     */
+    showToolbar: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    values() {
+      let columns = this.columns || [];
+      let values = [];
+
+      columns.forEach(column => {
+        values.push(column.value || column[column.defaultIndex || 0]);
+      });
+
+      return values;
+    }
+  },
+
+  methods: {
+    /**
+     * 处理列`change`事件
+     */
+    columnValueChange() {
+      this.$emit('change', this, this.values);
+    },
+
+    /**
+     * 获取对应索引的列的实例
+     */
+    getColumn(index) {
+      let children = this.$children.filter(child => child.$options.name === 'z-picker-column');
+      return children[index];
+    },
+
+    /**
+     * 获取对应列中选中的值
+     */
+    getColumnValue(index) {
+      let column = this.getColumn(index);
+      return column && column.value;
+    },
+
+    /**
+     * 设置对应列中选中的值
+     */
+    setColumnValue(index, value) {
+      let column = this.getColumn(index);
+      if (column) {
+        column.currentValue = value;
+      }
+    },
+
+    /**
+     * 获取对应列中所有的备选值
+     */
+    getColumnValues(index) {
+      let column = this.getColumn(index);
+    },
+
+    /**
+     * 设置对应列中所有的备选值
+     */
+    setColumnValues(index, values) {
+      let column = this.getColumn(index);
+      if (column) {
+
+      }
+    },
+
+    /**
+     * 获取所有列中被选中的值，返回一个数组
+     */
+    getValues() {
+      return this.values;
+    },
+
+    /**
+     * `values`为一个数组，设置所有列中被选中的值
+     */
+    setValues(values) {
+      values.forEach((value, index) => {
+        this.setColumnValue(index, value);
+      });
+    }
+  }
+};
+</script>

packages/popup/src/popup.vue

@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="currentValue" class="o2-popup" :class="[position ? 'o2-popup--' + position : '']">
+    <div v-show="currentValue" class="z-popup" :class="[position ? 'z-popup--' + position : '']">
       <slot></slot>
     </div>
   </transition>
@@ -10,7 +10,7 @@
 import Popup from 'src/mixins/popup';
 
 export default {
-  name: 'o2-popup',
+  name: 'z-popup',
 
   mixins: [Popup],
 

packages/radio/src/radio-group.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="o2-radio-group">
+  <div class="z-radio-group">
     <slot></slot>
   </div>
 </template>

packages/radio/src/radio.vue

@@ -1,20 +1,20 @@
 <template>
-  <o2-cell
-    class="o2-radio"
+  <z-cell
+    class="z-radio"
     :class="{
       'is-disabled': disabled
     }">
-  </o2-cell>
+  </z-cell>
 </template>
 
 <script>
-import O2Cell from 'packages/cell';
+import zCell from 'packages/cell';
 
 export default {
-  name: 'o2-radio',
+  name: 'z-radio',
 
   components: {
-    O2Cell
+    zCell
   },
 
   props: {

packages/switch/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/o2-switch",
+  "name": "@youzan/z-switch",
   "version": "0.0.1",
   "description": "switch component",
   "main": "./lib/index.js",

packages/switch/src/switch.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
-    <div class="o2-switch-node"></div>
+  <div class="z-switch" :class="['is-' + switchState]" @click="toggleState">
+    <div class="z-switch-node"></div>
   </div>
 </template>
 
 <script>
 /**
- * o2-switch
+ * z-switch
  * @module components/switch
  * @desc 开关
  * @param {boolean} [checked=false] - 开关状态
@@ -15,10 +15,10 @@
  * @param {callback} [onChange] - 开关状态改变回调函数。
  *
  * @example
- * <o2-switch checked="true" disabled="false"></o2-switch>
+ * <z-switch checked="true" disabled="false"></z-switch>
  */
 export default {
-  name: 'o2-switch',
+  name: 'z-switch',
   props: {
     checked: {
       type: Boolean,

packages/zanui/src/button.pcss

@@ -1,6 +1,6 @@
 @import "./common/var.pcss";
 
-@component-namespace o2 {
+@component-namespace z {
   @component button {
     position: relative;
     display: block;

packages/zanui/src/cell.pcss

@@ -1,7 +1,7 @@
 @import "./common/var.pcss";
 @import "./mixins/border_retina.pcss";
 
-@component-namespace o2 {
+@component-namespace z {
   @component cell-group {
     padding-left: 10px;
     position: relative;

packages/zanui/src/dialog.pcss

@@ -1,6 +1,6 @@
 @import "./mixins/border_retina.pcss";
 
-@component-namespace o2 {
+@component-namespace z {
   @component dialog-wrapper {
     position: absolute;
   }
@@ -53,11 +53,11 @@
     }
 
     .is-twobtn {
-      .o2-dialog-btn {
+      .z-dialog-btn {
         width: 50%;
       }
 
-      .o2-dialog-cancel {
+      .z-dialog-cancel {
         &::after {
           @mixin border-retina (right);
         }

packages/zanui/src/field.pcss

@@ -1,42 +1,42 @@
 @import "./common/var.pcss";
 @import "./mixins/border_retina.pcss";
 
-@component-namespace o2 {
+@component-namespace z {
   @component field {
     width: 100%;
     overflow: hidden;
 
     @when textarea {
-      .o2-field-control {
+      .z-field-control {
         min-height: 60px;
       }
     }
 
     @when nolabel {
-      .o2-cell-title {
+      .z-cell-title {
         display: none;
       }
 
-      .o2-cell-value {
+      .z-cell-value {
         width: 100%;
         padding-left: 0;
       }
     }
 
-    .o2-cell-title,
-    .o2-cell-value {
+    .z-cell-title,
+    .z-cell-value {
       float: none;
       box-sizing: border-box;
     }
 
-    .o2-cell-title {
+    .z-cell-title {
       width: 90px;
       position: absolute;
       top: 10px;
       left: 0;
     }
 
-    .o2-cell-value {
+    .z-cell-value {
       width: 100%;
       padding-left: 90px;
     }

packages/zanui/src/popup.pcss

@@ -7,7 +7,7 @@
   background-color: rgba(0, 0, 0, 0.701961);
 }
 
-@component-namespace o2 {
+@component-namespace z {
   @component popup {
     position: fixed;
     background-color: #fff;

packages/zanui/src/switch.pcss

@@ -1,4 +1,4 @@
-@component-namespace o2 {
+@component-namespace z {
   @component switch { 
     height: 29px;
     width: 49px;