use zanui name

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>