[Build] build components

2025-04-06 03:58:05 +08:00 · 2018-08-07 15:10:21 +08:00 · 2018-08-07 15:10:21 +08:00 · 2ccc6c8604
commit 2ccc6c8604
parent 0fa5d8ba7c
141 changed files with 3306 additions and 0 deletions
--- a/dist/actionsheet/index.js
+++ b/dist/actionsheet/index.js
@ -0,0 +1,38 @@
+'use strict';
+
+Component({
+  properties: {
+    show: Boolean,
+    title: String,
+    cancelText: String,
+    actions: {
+      type: Array,
+      value: []
+    },
+    overlay: {
+      type: Boolean,
+      value: true
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  methods: {
+    onSelect: function onSelect(event) {
+      var index = event.currentTarget.dataset.index;
+
+      var item = this.data.actions[index];
+      if (item && !item.disabled && !item.loading) {
+        this.triggerEvent('select', item);
+      }
+    },
+    onCancel: function onCancel() {
+      this.triggerEvent('cancel');
+    },
+    onClose: function onClose() {
+      this.triggerEvent('close');
+    }
+  }
+});
--- a/dist/actionsheet/index.json
+++ b/dist/actionsheet/index.json
@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index",
+    "van-popup": "../popup/index",
+    "van-loading": "../loading/index"
+  }
+}
--- a/dist/actionsheet/index.wxml
+++ b/dist/actionsheet/index.wxml
@ -0,0 +1,38 @@
+<van-popup
+  show="{{ show }}"
+  overlay="{{ overlay }}"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
+  custom-class="van-actionsheet {{ title ? 'van-actionsheet--withtitle' : '' }}"
+  position="bottom"
+  bind:close="onClose"
+>
+  <view wx:if="{{ title }}" class="van-hairline--top-bottom van-actionsheet__header">
+    <view>{{ title }}</view>
+    <van-icon custom-class="van-actionsheet__close" name="close" bind:tap="onClose" />
+  </view>
+  <view wx:else class="van-hairline--bottom">
+    <view
+      wx:for="{{ actions }}"
+      wx:key="index"
+      class="van-actionsheet__item van-hairline--top {{ item.disabled || item.loading ? 'van-actionsheet__item--disabled' : '' }} {{ item.className || '' }}"
+      data-index="{{ index }}"
+      bind:tap="onSelect"
+    >
+      <block wx:if="{{ !item.loading }}">
+        <view class="van-actionsheet__name">{{ item.name }}</view>
+        <view class="van-actionsheet__subname" wx:if="{{ item.subname }}">{{ item.subname }}</view>
+      </block>
+      <van-loading wx:else custom-class="van-actionsheet__loading" size="20px" />
+    </view>
+  </view>
+  <view
+    wx:if="{{ cancelText }}"
+    class="van-actionsheet__cancel van-hairline--top"
+    bind:tap="onCancel"
+  >
+    {{ cancelText }}
+  </view>
+  <view wx:else class="van-actionsheet__content">
+    <slot />
+  </view>
+</van-popup>
--- a/dist/actionsheet/index.wxss
+++ b/dist/actionsheet/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-actionsheet{color:#333;max-height:90%;overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#f8f8f8}.van-actionsheet--withtitle{background-color:#fff}.van-actionsheet__cancel,.van-actionsheet__item{height:50px;line-height:50px;font-size:16px;text-align:center;background-color:#fff}.van-actionsheet__cancel:active,.van-actionsheet__item:active{background-color:#e8e8e8}.van-actionsheet__item--disabled{color:#c9c9c9}.van-actionsheet__item--disabled:active{background-color:#fff}.van-actionsheet__subname{font-size:12px;color:#666;margin-left:5px}.van-actionsheet__loading{display:inline-block}.van-actionsheet__cancel{margin-top:10px}.van-actionsheet__header{font-size:16px;line-height:44px;text-align:center}.van-actionsheet__close{top:0;right:0;padding:0 15px;font-size:18px;color:#999;position:absolute;line-height:inherit}
--- a/dist/badge-group/index.js
+++ b/dist/badge-group/index.js
@ -0,0 +1,66 @@
+'use strict';
+
+var _relations;
+
+var BADGE_PATH = '../badge/index';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  relations: (_relations = {}, _relations[BADGE_PATH] = {
+    type: 'descendant',
+
+    linked: function linked(target) {
+      this.data.badges.push(target);
+      this.setActive();
+    },
+    unlinked: function unlinked(target) {
+      this.data.badges = this.data.badges.filter(function (item) {
+        return item !== target;
+      });
+      this.setActive();
+    }
+  }, _relations),
+
+  properties: {
+    active: {
+      type: Number,
+      value: 0,
+      observer: function observer() {
+        this.setActive();
+      }
+    }
+  },
+
+  data: {
+    badges: []
+  },
+
+  attached: function attached() {
+    this.currentActive = -1;
+  },
+
+
+  methods: {
+    setActive: function setActive(badge) {
+      var active = this.data.active;
+
+      if (badge) {
+        active = this.data.badges.indexOf(badge);
+      }
+
+      if (active === this.currentActive) {
+        return;
+      }
+
+      if (this.currentActive !== -1) {
+        this.triggerEvent('change', active);
+      }
+
+      this.currentActive = active;
+      this.data.badges.forEach(function (badge, index) {
+        badge.setActive(index === active);
+      });
+    }
+  }
+});
--- a/dist/badge-group/index.json
+++ b/dist/badge-group/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/badge-group/index.wxml
+++ b/dist/badge-group/index.wxml
@ -0,0 +1,3 @@
+<view class="van-badge-group van-hairline--top-bottom custom-class">
+  <slot />
+</view>
--- a/dist/badge-group/index.wxss
+++ b/dist/badge-group/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-badge-group{width:85px}
--- a/dist/badge/index.js
+++ b/dist/badge/index.js
@ -0,0 +1,30 @@
+'use strict';
+
+var _relations;
+
+var BADGE_GROUP_PATH = '../badge-group/index';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  relations: (_relations = {}, _relations[BADGE_GROUP_PATH] = {
+    type: 'ancestor'
+  }, _relations),
+
+  properties: {
+    info: Number,
+    title: String
+  },
+
+  methods: {
+    onTap: function onTap() {
+      var group = this.getRelationNodes(BADGE_GROUP_PATH)[0];
+      if (group) {
+        group.setActive(this);
+      }
+    },
+    setActive: function setActive(active) {
+      this.setData({ active: active });
+    }
+  }
+});
--- a/dist/badge/index.json
+++ b/dist/badge/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/badge/index.wxml
+++ b/dist/badge/index.wxml
@ -0,0 +1,4 @@
+<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onTap">
+  <view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
+  {{ title }}
+</view>
--- a/dist/badge/index.wxss
+++ b/dist/badge/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-badge{display:block;overflow:hidden;font-size:14px;line-height:1.4;-webkit-user-select:none;user-select:none;color:#666;word-break:break-all;box-sizing:border-box;padding:20px 12px 20px 9px;background-color:#f8f8f8;border-left:3px solid transparent}.van-badge:active{background-color:#e8e8e8}.van-badge::after{border-bottom-width:1px}.van-badge--active{font-weight:700;color:#333;border-color:#f44}.van-badge--active::after{border-right-width:1px}.van-badge--active,.van-badge--active:active{background-color:#fff}.van-badge__info{position:absolute;top:2px;right:2px;color:#fff;font-size:10px;font-weight:400;-webkit-transform:scale(.8);transform:scale(.8);text-align:center;box-sizing:border-box;padding:0 6px;min-width:18px;line-height:18px;border-radius:9px;background-color:#f44}
--- a/dist/button/behaviors.js
+++ b/dist/button/behaviors.js
@ -0,0 +1,75 @@
+'use strict';
+
+module.exports = Behavior({
+  properties: {
+    loading: Boolean,
+    // 在自定义组件中，无法与外界的 form 组件联动，暂时不开放
+    // formType: String,
+    openType: String,
+    appParameter: String,
+    // 暂时不开放，直接传入无法设置样式
+    // hoverClass: {
+    //   type: String,
+    //   value: 'button-hover'
+    // },
+    hoverStopPropagation: Boolean,
+    hoverStartTime: {
+      type: Number,
+      value: 20
+    },
+    hoverStayTime: {
+      type: Number,
+      value: 70
+    },
+    lang: {
+      type: String,
+      value: 'en'
+    },
+    sessionFrom: {
+      type: String,
+      value: ''
+    },
+    sendMessageTitle: String,
+    sendMessagePath: String,
+    sendMessageImg: String,
+    showMessageCard: String
+  },
+
+  methods: {
+    bindgetuserinfo: function bindgetuserinfo() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$detail = _ref.detail,
+          detail = _ref$detail === undefined ? {} : _ref$detail;
+
+      this.triggerEvent('getuserinfo', detail);
+    },
+    bindcontact: function bindcontact() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref2$detail = _ref2.detail,
+          detail = _ref2$detail === undefined ? {} : _ref2$detail;
+
+      this.triggerEvent('contact', detail);
+    },
+    bindgetphonenumber: function bindgetphonenumber() {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref3$detail = _ref3.detail,
+          detail = _ref3$detail === undefined ? {} : _ref3$detail;
+
+      this.triggerEvent('getphonenumber', detail);
+    },
+    bindopensetting: function bindopensetting() {
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref4$detail = _ref4.detail,
+          detail = _ref4$detail === undefined ? {} : _ref4$detail;
+
+      this.triggerEvent('opensetting', detail);
+    },
+    binderror: function binderror() {
+      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref5$detail = _ref5.detail,
+          detail = _ref5$detail === undefined ? {} : _ref5$detail;
+
+      this.triggerEvent('error', detail);
+    }
+  }
+});
--- a/dist/button/index.js
+++ b/dist/button/index.js
@ -0,0 +1,79 @@
+'use strict';
+
+var nativeBehaviors = require('./behaviors');
+var classnames = require('../common/classnames');
+
+var observer = function observer() {
+  this.setClasses();
+};
+
+Component({
+  externalClasses: ['custom-class', 'loading-class'],
+
+  behaviors: [nativeBehaviors],
+
+  properties: {
+    type: {
+      type: String,
+      value: 'default',
+      observer: observer
+    },
+    size: {
+      type: String,
+      value: 'normal',
+      observer: observer
+    },
+    plain: {
+      type: Boolean,
+      value: false,
+      observer: observer
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+      observer: observer
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+      observer: observer
+    },
+    block: {
+      type: Boolean,
+      value: false,
+      observer: observer
+    }
+  },
+
+  attached: function attached() {
+    this.setClasses();
+  },
+
+
+  methods: {
+    onTap: function onTap(event) {
+      if (!this.data.disabled && !this.data.loading) {
+        this.triggerEvent('tap', event);
+      }
+    },
+    setClasses: function setClasses() {
+      var _data = this.data,
+          type = _data.type,
+          size = _data.size,
+          plain = _data.plain,
+          disabled = _data.disabled,
+          loading = _data.loading,
+          block = _data.block;
+
+      this.setData({
+        classes: classnames('van-button--' + type, 'van-button--' + size, {
+          'van-button--block': block,
+          'van-button--plain': plain,
+          'van-button--loading': loading,
+          'van-button--disabled': disabled,
+          'van-button--untapable': disabled || loading
+        })
+      });
+    }
+  }
+});
--- a/dist/button/index.json
+++ b/dist/button/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-loading": "../loading/index"
+  }
+}
--- a/dist/button/index.wxml
+++ b/dist/button/index.wxml
@ -0,0 +1,30 @@
+<button
+  class="custom-class van-button {{ classes }}"
+  disabled="{{ disabled }}"
+  hover-class="button-hover"
+  open-type="{{ openType }}"
+  app-parameter="{{ appParameter }}"
+  hover-stop-propagation="{{ hoverStopPropagation }}"
+  hover-start-time="{{ hoverStartTime }}"
+  hover-stay-time="{{ hoverStayTime }}"
+  lang="{{ lang }}"
+  session-from="{{ sessionFrom }}"
+  send-message-title="{{ sendMessageTitle }}"
+  send-message-path="{{ sendMessagePath }}"
+  send-message-img="{{ sendMessageImg }}"
+  show-message-card="{{ showMessageCard }}"
+  catch:tap="onTap"
+  bindcontact="bindcontact"
+  bindgetuserinfo="bindgetuserinfo"
+  bindgetphonenumber="bindgetphonenumber"
+  binderror="binderror"
+  bindopensetting="bindopensetting"
+>
+  <van-loading
+    wx:if="{{ loading }}"
+    size="20px"
+    custom-class="loading-class"
+    color="{{ type === 'default' ? '#c9c9c9' : '#fff' }}"
+  />
+  <slot></slot>
+</button>
--- a/dist/button/index.wxss
+++ b/dist/button/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-button{position:relative;padding:0;display:inline-block;height:44px;line-height:42px;border-radius:3px;box-sizing:border-box;font-size:16px;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button::after{content:" ";position:absolute;top:50%;left:50%;opacity:0;width:100%;height:100%;border:inherit;border-color:#000;background-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button:active::after{opacity:.3}.van-button--untapable::after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #e5e5e5}.van-button--primary{color:#fff;background-color:#4b0;border:1px solid #4b0}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#f85;border:1px solid #f85}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#4b0}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#f85}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;padding:0 8px;min-width:60px;font-size:12px;line-height:28px}.van-button--loading .van-loading{display:inline-block}.van-button--loading .van-button__text{display:none}.van-button--mini{display:inline-block;width:50px;height:22px;line-height:20px;font-size:10px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{width:100%;display:block}.van-button--disabled{color:#999;background-color:#e8e8e8;border:1px solid #e5e5e5}
--- a/dist/card/index.js
+++ b/dist/card/index.js
@ -0,0 +1,22 @@
+'use strict';
+
+Component({
+  options: {
+    multipleSlots: true
+  },
+
+  externalClasses: ['custom-class', 'thumb-class', 'title-class', 'price-class', 'desc-class', 'num-class'],
+
+  properties: {
+    num: String,
+    desc: String,
+    thumb: String,
+    title: String,
+    price: String,
+    centered: Boolean,
+    currency: {
+      type: String,
+      default: '¥'
+    }
+  }
+});
--- a/dist/card/index.json
+++ b/dist/card/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/card/index.wxml
+++ b/dist/card/index.wxml
@ -0,0 +1,22 @@
+<view class="custom-class van-card">
+  <view class="van-card__thumb">
+    <image wx:if="{{ thumb }}" src="{{ thumb }}" class="van-card__img thumb-class" />
+    <slot wx:else name="thumb" />
+  </view>
+  <view class="van-card__content">
+    <view wx:if="{{ title || price }}" class="van-card__row">
+      <view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
+      <view wx:if="{{ price }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
+    </view>
+    <slot wx:else name="title" />
+    <view wx:if="{{ desc || num }}" class="van-card__row">
+      <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
+      <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
+    </view>
+    <slot wx:else name="desc" />
+    <slot name="tags" />
+  </view>
+  <view class="van-card__footer">
+    <slot name="footer" />
+  </view>
+</view>
--- a/dist/card/index.wxss
+++ b/dist/card/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-card{color:#333;height:100px;font-size:16px;background:#fafafa;position:relative;box-sizing:border-box;padding:5px 15px 5px 115px}.van-card--center,.van-card__thumb{-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.van-card__thumb{top:5px;left:15px;width:90px;height:90px;position:absolute}.van-card__img{border:none;max-width:100%;max-height:100%}.van-card,.van-card__row,.van-card__thumb{display:-webkit-box;display:flex}.van-card__content{width:100%}.van-card__content--center{height:90px;-webkit-box-align:center;align-items:center}.van-card__desc,.van-card__title{line-height:20px;word-break:break-all}.van-card__title{max-height:40px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.van-card__desc{color:#666;font-size:12px;max-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-card__num,.van-card__price{-webkit-box-flex:1;flex:1;min-width:80px;line-height:20px;text-align:right}.van-card__price{font-size:14px}.van-card__num{color:#666;font-size:12px}.van-card__footer{right:15px;bottom:5px;position:absolute}.van-card__footer .van-button{margin-left:5px}
--- a/dist/cell-group/index.js
+++ b/dist/cell-group/index.js
@ -0,0 +1,12 @@
+'use strict';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  properties: {
+    border: {
+      type: Boolean,
+      value: true
+    }
+  }
+});
--- a/dist/cell-group/index.json
+++ b/dist/cell-group/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/cell-group/index.wxml
+++ b/dist/cell-group/index.wxml
@ -0,0 +1,3 @@
+<view class="custom-class van-cell-group {{ border ? 'van-hairline--top-bottom' : '' }}">
+  <slot />
+</view>
--- a/dist/cell-group/index.wxss
+++ b/dist/cell-group/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}
--- a/dist/cell/index.js
+++ b/dist/cell/index.js
@ -0,0 +1,42 @@
+'use strict';
+
+Component({
+  externalClasses: ['custom-class', 'title-class', 'label-class', 'value-class', 'left-icon-class', 'right-icon-class'],
+
+  options: {
+    multipleSlots: true
+  },
+
+  properties: {
+    title: null,
+    value: null,
+    url: String,
+    icon: String,
+    label: String,
+    center: Boolean,
+    isLink: Boolean,
+    required: Boolean,
+    tapable: Boolean,
+    titleWidth: String,
+    customStyle: String,
+    arrowDirection: String,
+    linkType: {
+      type: String,
+      value: 'navigateTo'
+    },
+    border: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  methods: {
+    onTap: function onTap() {
+      var url = this.data.url;
+
+      if (url) {
+        wx[this.data.linkType]({ url: url });
+      }
+    }
+  }
+});
--- a/dist/cell/index.json
+++ b/dist/cell/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}
--- a/dist/cell/index.wxml
+++ b/dist/cell/index.wxml
@ -0,0 +1,28 @@
+<view
+  class="custom-class van-cell {{ center ? 'van-cell--center' : '' }} {{ required ? 'van-cell--required' : '' }} {{ isLink || tapable ? 'van-cell--tapable' : '' }} {{ border ? 'van-hairline' : '' }}"  
+  style="{{ customStyle }}"
+  bind:tap="onTap"
+>
+  <van-icon wx:if="{{ icon }}" custom-class="van-cell__left-icon left-icon-class" name="{{ icon }}" />
+  <slot wx:else name="icon" />
+
+  <view wx:if="{{ title }}" class="van-cell__title title-class" style="{{ titleWidth ? 'max-width: ' + titleWidth + ';min-width: ' + titleWidth : '' }}">
+    {{ title }}
+    <view wx:if="{{ label }}" class="van-cell__label label-class">{{ label }}</view>
+  </view>
+  <slot name="title" />
+
+  <view class="van-cell__value value-class">
+    <view wx:if="{{ value }}">{{ value }}</view>
+    <slot wx:else />
+  </view>
+
+  <van-icon
+    wx:if="{{ isLink }}"
+    name="arrow"
+    custom-class="van-cell__right-icon right-icon-class {{ arrowDirection ? 'van-cell__right-icon--' + arrowDirection : '' }}"
+  />
+  <slot wx:else name="right-icon" />
+
+  <slot name="extra" />
+</view>
--- a/dist/cell/index.wxss
+++ b/dist/cell/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-cell{width:100%;display:-webkit-box;display:flex;padding:10px 15px;box-sizing:border-box;line-height:24px;position:relative;background-color:#fff;color:#333;font-size:14px}.van-cell::after{left:15px;right:0;width:auto;-webkit-transform:scale(1,.5);transform:scale(1,.5);border-bottom-width:1px}.van-cell-group{background-color:#fff}.van-cell__label{font-size:12px;line-height:1.2;color:#666}.van-cell__title,.van-cell__value{-webkit-box-flex:1;flex:1}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle}.van-cell__left-icon{font-size:16px;line-height:24px;margin-right:5px;vertical-align:middle}.van-cell__right-icon{color:#999;font-size:12px;line-height:24px;margin-left:5px}.van-cell__right-icon--left::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.van-cell__right-icon--up::before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-cell__right-icon--down::before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.van-cell--tapable:active{background-color:#e8e8e8}.van-cell--required{overflow:visible}.van-cell--required::before{content:'*';position:absolute;left:7px;font-size:14px;color:#f44}.van-cell--center{-webkit-box-align:center;align-items:center}
--- a/dist/checkbox-group/index.js
+++ b/dist/checkbox-group/index.js
@ -0,0 +1,29 @@
+'use strict';
+
+var _relations;
+
+var CHECKBOX_PATH = '../checkbox/index';
+
+Component({
+  relations: (_relations = {}, _relations[CHECKBOX_PATH] = {
+    type: 'child',
+    linked: function linked() {
+      this.updateChildren(CHECKBOX_PATH);
+    }
+  }, _relations),
+
+  data: {
+    elementUpdateTimeout: 0
+  },
+
+  methods: {
+    updateChildren: function updateChildren(childPath) {
+      // 把checkbox标记为在group中，设置不同样式
+      var elements = this.getRelationNodes(childPath);
+
+      elements.forEach(function (checkbox, index) {
+        checkbox.updateData({ isInGroup: true });
+      });
+    }
+  }
+});
--- a/dist/checkbox-group/index.json
+++ b/dist/checkbox-group/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/checkbox-group/index.wxml
+++ b/dist/checkbox-group/index.wxml
@ -0,0 +1,3 @@
+<view class="checkbox-group">
+  <slot></slot>
+</view>
--- a/dist/checkbox-group/index.wxss
+++ b/dist/checkbox-group/index.wxss
@ -0,0 +1 @@
+.checkbox-group{padding-bottom:10px;background-color:#fff}.checkbox-group .van-checkbox{margin-top:10px}
--- a/dist/checkbox/index.js
+++ b/dist/checkbox/index.js
@ -0,0 +1,44 @@
+'use strict';
+
+var _relations;
+
+var CHECKBOX_GROUP_PATH = '../checkbox-group/index';
+
+Component({
+  externalClasses: ['checkbox-class'],
+  relations: (_relations = {}, _relations[CHECKBOX_GROUP_PATH] = {
+    type: 'parent'
+  }, _relations),
+
+  properties: {
+    checked: Boolean,
+    disabled: Boolean,
+    isInGroup: Boolean,
+    labelDisabled: Boolean,
+    type: String
+  },
+
+  data: function data() {
+    return {
+      isInGroup: false,
+      isInCell: false
+    };
+  },
+
+
+  methods: {
+    handleClick: function handleClick() {
+      if (this.data.disabled) {
+        return;
+      }
+
+      var checked = !this.data.checked;
+
+      this.triggerEvent('change', checked);
+      this.setData({ checked: checked });
+    },
+    updateData: function updateData(data) {
+      this.setData(data);
+    }
+  }
+});
--- a/dist/checkbox/index.json
+++ b/dist/checkbox/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}
--- a/dist/checkbox/index.wxml
+++ b/dist/checkbox/index.wxml
@ -0,0 +1,13 @@
+<view
+  class="checkbox-class van-checkbox {{ isInGroup ? 'van-checkbox__item' : ''}} {{ type === 'list' ? 'van-checkbox__list-item' : ''}}"
+  bindtap="{{ labelDisabled ? '' : 'handleClick' }}"
+  >
+  <van-icon
+    type="{{ checked ? 'checked' : 'check'}}"
+    class="van-checkbox__icon {{ disabled ? 'van-checkbox--disabled' : '' }} {{ checked ? 'van-checkbox--checked' : '' }}"
+    bindtap="{{ labelDisabled ? 'handleClick': '' }}"
+  ></van-icon>
+  <text class="van-checkbox__label">
+    <slot></slot>
+  </text>
+</view>
--- a/dist/checkbox/index.wxss
+++ b/dist/checkbox/index.wxss
@ -0,0 +1 @@
+.van-checkbox{display:inline-block;padding:0 10px;font-size:14px}.van-checkbox__item{display:block;margin-top:10px}.van-checkbox__list-item{display:block;padding:10px 10px 10px 0;margin-left:10px;border-bottom:1px solid #e5e5e5}.van-checkbox__list-item .van-checkbox__icon{float:right}.van-checkbox__icon{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;color:#aaa}.van-checkbox__icon.van-checkbox--checked{color:#06bf04}.van-checkbox__icon.van-checkbox--disabled{color:#e5e5e5}.van-checkbox__label{display:inline-block;margin-left:10px}
--- a/dist/col/index.js
+++ b/dist/col/index.js
@ -0,0 +1,26 @@
+'use strict';
+
+var _relations;
+
+var ROW_PATH = '../row/index';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  relations: (_relations = {}, _relations[ROW_PATH] = {
+    type: 'ancestor'
+  }, _relations),
+
+  properties: {
+    span: Number,
+    offset: Number
+  },
+
+  methods: {
+    setGutter: function setGutter(gutter) {
+      var padding = gutter / 2 + 'px';
+      var style = gutter ? 'padding-left: ' + padding + '; padding-right: ' + padding + ';' : '';
+      this.setData({ style: style });
+    }
+  }
+});
--- a/dist/col/index.json
+++ b/dist/col/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/col/index.wxml
+++ b/dist/col/index.wxml
@ -0,0 +1,6 @@
+<view
+  class="custom-class van-col {{ span ? 'van-col--' + span : '' }} {{ offset ? 'van-col--offset-' + offset : '' }}"
+  style="{{ style }}"
+>
+  <slot />
+</view>
--- a/dist/col/index.wxss
+++ b/dist/col/index.wxss
@ -0,0 +1 @@
+.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16667%}.van-col--offset-1{margin-left:4.16667%}.van-col--2{width:8.33333%}.van-col--offset-2{margin-left:8.33333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66667%}.van-col--offset-4{margin-left:16.66667%}.van-col--5{width:20.83333%}.van-col--offset-5{margin-left:20.83333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16667%}.van-col--offset-7{margin-left:29.16667%}.van-col--8{width:33.33333%}.van-col--offset-8{margin-left:33.33333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66667%}.van-col--offset-10{margin-left:41.66667%}.van-col--11{width:45.83333%}.van-col--offset-11{margin-left:45.83333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16667%}.van-col--offset-13{margin-left:54.16667%}.van-col--14{width:58.33333%}.van-col--offset-14{margin-left:58.33333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66667%}.van-col--offset-16{margin-left:66.66667%}.van-col--17{width:70.83333%}.van-col--offset-17{margin-left:70.83333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16667%}.van-col--offset-19{margin-left:79.16667%}.van-col--20{width:83.33333%}.van-col--offset-20{margin-left:83.33333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66667%}.van-col--offset-22{margin-left:91.66667%}.van-col--23{width:95.83333%}.van-col--offset-23{margin-left:95.83333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}
--- a/dist/common/classnames.js
+++ b/dist/common/classnames.js
@ -0,0 +1,31 @@
+'use strict';
+
+var hasOwn = {}.hasOwnProperty;
+
+module.exports = function classNames() {
+  var classes = [];
+
+  for (var i = 0; i < arguments.length; i++) {
+    var arg = arguments[i];
+    if (!arg) continue;
+
+    var argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg) && arg.length) {
+      var inner = classNames.apply(null, arg);
+      if (inner) {
+        classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      for (var key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+};
--- a/dist/common/helper.js
+++ b/dist/common/helper.js
@ -0,0 +1,102 @@
+'use strict';
+
+// 从事件对象中解析得到 componentId
+// 需要在元素上声明 data-component-id
+function extractComponentId() {
+  var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = event.currentTarget || {},
+      componentId = _ref.dataset.componentId;
+
+  return componentId;
+}
+
+/*
+  注：默认合并所有生命周期函数
+  配置合并指定的生命周期 or 忽略指定字段
+  const extend = extendCreator({
+    life: ['onLoad', 'onPullDownRefresh'],
+    exclude: ['binder']
+  });
+
+  Page(extend({}, {
+    onLoad() {},
+    ...
+  }));
+*/
+
+var LIFE_CYCLE = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll'];
+
+var extendCreator = function extendCreator() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _config$life = config.life,
+      life = _config$life === undefined ? LIFE_CYCLE : _config$life,
+      _config$exclude = config.exclude,
+      exclude = _config$exclude === undefined ? [] : _config$exclude;
+
+
+  var excludeList = exclude.concat(LIFE_CYCLE.map(getFuncArrayName));
+
+  if (!Array.isArray(life) || !Array.isArray(exclude)) throw new Error('Invalid Extend Config');
+  var lifeCycleList = life.filter(function (item) {
+    return LIFE_CYCLE.indexOf(item) >= 0;
+  });
+  return function extend(target) {
+    for (var _len = arguments.length, objList = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      objList[_key - 1] = arguments[_key];
+    }
+
+    objList.forEach(function (source) {
+      if (source) {
+        var keys = Object.keys(source);
+        keys.forEach(function (key) {
+          var value = source[key];
+          if (excludeList.indexOf(key) >= 0) return;
+          if (lifeCycleList.indexOf(key) >= 0 && typeof value === 'function') {
+            var funcArrayName = getFuncArrayName(key);
+            if (!target[funcArrayName]) {
+              target[funcArrayName] = [];
+              if (target[key]) {
+                target[funcArrayName].push(target[key]);
+              }
+              target[key] = function () {
+                var _this = this;
+
+                for (var _len2 = arguments.length, rest = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  rest[_key2] = arguments[_key2];
+                }
+
+                target[funcArrayName].forEach(function (func) {
+                  return func.apply(_this, rest);
+                });
+              };
+            }
+
+            if (source[funcArrayName]) {
+              var _target$funcArrayName;
+
+              // 经过生命周期合并的组件直接整合函数列表
+              (_target$funcArrayName = target[funcArrayName]).push.apply(_target$funcArrayName, source[funcArrayName]);
+            } else {
+              // 添加生命周期函数进入函数列表
+              target[funcArrayName].push(value);
+            }
+          } else {
+            target[key] = value;
+          }
+        });
+      }
+    });
+    return target;
+  };
+};
+
+var getFuncArrayName = function getFuncArrayName(name) {
+  return '__$' + name;
+};
+
+module.exports = {
+  extractComponentId: extractComponentId,
+  extend: Object.assign,
+  extendCreator: extendCreator
+};
--- a/dist/common/index.wxss
+++ b/dist/common/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}
--- a/dist/common/pop-manager/index.js
+++ b/dist/common/pop-manager/index.js
@ -0,0 +1,31 @@
+'use strict';
+
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: false
+    },
+    // 是否有遮罩层
+    overlay: {
+      type: Boolean,
+      value: true
+    },
+    // 遮罩层是否会显示
+    showOverlay: {
+      type: Boolean,
+      value: true
+    },
+    // 内容从哪个方向出，可选 center top bottom left right
+    type: {
+      type: String,
+      value: 'center'
+    }
+  },
+
+  methods: {
+    handleMaskClick: function handleMaskClick() {
+      this.triggerEvent('clickmask', {});
+    }
+  }
+});
--- a/dist/common/pop-manager/index.json
+++ b/dist/common/pop-manager/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/common/pop-manager/index.wxml
+++ b/dist/common/pop-manager/index.wxml
@ -0,0 +1,12 @@
+<view
+  class="pop pop--{{ type }} {{ show ? 'pop--show' : '' }}"
+>
+  <view 
+    wx:if="{{ overlay }}"
+    class="pop__mask {{ showOverlay ? '' : 'pop__mask--hide' }}"
+    bindtap="handleMaskClick"
+  ></view>
+  <view class="pop__container">
+    <slot></slot>
+  </view>
+</view>
--- a/dist/common/pop-manager/index.wxss
+++ b/dist/common/pop-manager/index.wxss
@ -0,0 +1 @@
+.pop{visibility:hidden}.pop--show{visibility:visible}.pop__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.pop__mask--hide{background:0 0}.pop__container{position:fixed;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:all .4s ease;transition:all .4s ease;z-index:11;opacity:0}.pop--show .pop__container{opacity:1}.pop--show .pop__mask{display:block}.pop--left .pop__container{left:0;top:50%;-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.pop--show.pop--left .pop__container{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.pop--right .pop__container{right:0;top:50%;left:auto;-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.pop--show.pop--right .pop__container{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.pop--bottom .pop__container{top:auto;left:50%;bottom:0;-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}.pop--show.pop--bottom .pop__container{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.pop--top .pop__container{top:0;left:50%;-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}.pop--show.pop--top .pop__container{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}
--- a/dist/common/style/animation.wxss
+++ b/dist/common/style/animation.wxss
@ -0,0 +1 @@
+@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}
--- a/dist/common/style/clearfix.wxss
+++ b/dist/common/style/clearfix.wxss
@ -0,0 +1 @@
+.van-clearfix::after{content:'';display:table;clear:both}
--- a/dist/common/style/ellipsis.wxss
+++ b/dist/common/style/ellipsis.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
--- a/dist/common/style/hairline.wxss
+++ b/dist/common/style/hairline.wxss
@ -0,0 +1 @@
+.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}
--- a/dist/common/style/mixins/border-retina.wxss
+++ b/dist/common/style/mixins/border-retina.wxss
--- a/dist/common/style/mixins/clearfix.wxss
+++ b/dist/common/style/mixins/clearfix.wxss
--- a/dist/common/style/mixins/ellipsis.wxss
+++ b/dist/common/style/mixins/ellipsis.wxss
--- a/dist/common/style/var.wxss
+++ b/dist/common/style/var.wxss
--- a/dist/datetime-picker/date-picker-view.wxml
+++ b/dist/datetime-picker/date-picker-view.wxml
@ -0,0 +1,35 @@
+<import src="./picker-view-column.wxml" />
+
+<template name="date-picker-view">
+  <picker-view
+    value="{{ selected }}"
+    bindchange="change"
+    indicator-style="height: 50px;"
+    class="picker-visible">
+    
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[0], className: 'year-view-column', hidden: !use['years'], tip: '年' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[1], hidden: !use['months'], tip: '月' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[2], hidden: !use['days'], tip: '日' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[3], hidden: !use['hours'], tip: '时' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[4], hidden: !use['minutes'], tip: '分' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[5], hidden: !use['seconds'], tip: '秒' }}"
+    />
+  </picker-view>
+</template>
--- a/dist/datetime-picker/date-picker.js
+++ b/dist/datetime-picker/date-picker.js
@ -0,0 +1,105 @@
+'use strict';
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var LIMIT_YEAR_COUNT = 50;
+
+var _require = require('./utils'),
+    genNumber = _require.genNumber,
+    iso2utc = _require.iso2utc;
+
+module.exports = function () {
+  function DatePicker() {
+    var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();
+
+    _classCallCheck(this, DatePicker);
+
+    this.types = ['year', 'month', 'day', 'hour', 'minute', 'second'];
+    this.months = genNumber(1, 12, 2);
+    this.hours = genNumber(0, 23, 2);
+    this.seconds = genNumber(0, 59, 2);
+    this.minutes = genNumber(0, 59, 2);
+    this._date = date;
+  }
+
+  DatePicker.prototype.getYears = function getYears(year) {
+    var mid = Math.floor(LIMIT_YEAR_COUNT / 2);
+    var min = year - mid;
+    var max = year + (LIMIT_YEAR_COUNT - mid);
+    return genNumber(min, max, 4);
+  };
+
+  DatePicker.prototype.lastDay = function lastDay(year, month) {
+    return month !== 12 ? new Date(new Date(year + '/' + (month + 1) + '/1').getTime() - 24 * 60 * 60 * 1000).getDate() : 31;
+  };
+
+  DatePicker.prototype.getData = function getData(date) {
+    date = date || this._date || new Date();
+
+    // toUTCString ISO 格式部分 ios 手机会失败
+    if (new Date(date).toString() === 'Invalid Date' && typeof date === 'string' && date.indexOf('-') > 0) {
+      date = iso2utc(date);
+    }
+
+    var d = new Date(date);
+
+    var y = d.getFullYear();
+    var m = d.getMonth() + 1;
+    var years = this.getYears(y);
+    var lastDay = this.lastDay(y, m);
+    var days = genNumber(1, lastDay, 2);
+
+    this._years = years;
+    this._dataList = [years, this.months, days, this.hours, this.minutes, this.seconds];
+    this._indexs = [25, m - 1, d.getDate() - 1, d.getHours(), d.getMinutes(), d.getSeconds()];
+
+    return {
+      dataList: this._dataList,
+      selected: this._indexs
+    };
+  };
+
+  DatePicker.prototype.update = function update(col, index) {
+    var type = this.types[col];
+    switch (type) {
+      case 'year':
+        return this._updateYear(col, index);
+      case 'month':
+        return this._updateMonth(col, index);
+      default:
+        this._indexs[col] = index;
+        return [{ col: col, index: index }];
+    }
+  };
+
+  DatePicker.prototype._updateYear = function _updateYear(col, index, cb) {
+    var years = this._dataList[col];
+    var year = years[index];
+
+    this._dataList[col] = this.getYears(+year);
+
+    this._indexs[col] = Math.floor(LIMIT_YEAR_COUNT / 2);
+
+    return [{ col: 0, index: this._indexs[col], data: this._dataList[col] }];
+  };
+
+  DatePicker.prototype._updateMonth = function _updateMonth(col, index) {
+    var month = this._dataList[col][index];
+    var year = this._dataList[0][this._indexs[0]];
+    var lastDay = this.lastDay(+year, +month);
+    this._indexs[col] = index;
+    this._dataList[2] = genNumber(1, lastDay, 2);
+    this._indexs[2] = this._indexs[2] >= this._dataList[2].length ? this._dataList[2].length - 1 : this._indexs[2];
+
+    return [{
+      col: 1,
+      index: index
+    }, {
+      col: 2,
+      index: this._indexs[2],
+      data: this._dataList[2]
+    }];
+  };
+
+  return DatePicker;
+}();
--- a/dist/datetime-picker/index.js
+++ b/dist/datetime-picker/index.js
@ -0,0 +1,216 @@
+'use strict';
+
+var DatePicker = require('./date-picker');
+
+var _require = require('./utils'),
+    genNumber = _require.genNumber,
+    moment = _require.moment;
+
+Component({
+  properties: {
+    placeholder: {
+      type: String,
+      value: '请选择时间'
+    },
+    format: {
+      type: String,
+      value: 'YYYY-MM-DD HH:mm:ss'
+    },
+    pickerView: {
+      type: Boolean
+    },
+    date: {
+      type: String,
+      observer: function observer(value) {
+        if (value === {}.toString()) {
+          throw new Error('参数必须是一个字符串');
+        }
+        if (/^[0-9]+$/.test(value)) {
+          value = +value;
+        }
+        !this._inited && this._init();
+        this.updateDate(value);
+      }
+    },
+    notUse: {
+      type: Array
+    }
+  },
+  externalClasses: ['placeholder-class'],
+  data: {
+    transPos: [0, 0, 0, 0, 0, 0]
+  },
+  attached: function attached() {
+    !this._inited && this._init();
+  },
+
+
+  methods: {
+    _init: function _init() {
+      var _this = this;
+
+      this._inited = true;
+      this.use = {};
+
+      ['years', 'months', 'days', 'hours', 'minutes', 'seconds'].forEach(function (item) {
+        if ((_this.data.notUse || []).indexOf(item) === -1) {
+          _this.use[item] = true;
+        }
+      });
+
+      this.picker = new DatePicker(this.data.date);
+
+      var _picker$getData = this.picker.getData(this.data.date),
+          dataList = _picker$getData.dataList,
+          selected = _picker$getData.selected;
+
+      // 鬼他么知道为什么 dataList, selected 不能一起 setData
+
+
+      this.setData({
+        use: this.use,
+        dataList: dataList
+      }, function () {
+        _this.setData({
+          selected: selected
+        });
+      });
+
+      this._indexs = selected;
+    },
+    updatePicker: function updatePicker() {
+      var updateData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+      var _updateData = {};
+
+      for (var _iterator = updateData, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+        var _ref2;
+
+        if (_isArray) {
+          if (_i >= _iterator.length) break;
+          _ref2 = _iterator[_i++];
+        } else {
+          _i = _iterator.next();
+          if (_i.done) break;
+          _ref2 = _i.value;
+        }
+
+        var _ref = _ref2;
+        var col = _ref.col,
+            index = _ref.index,
+            data = _ref.data;
+
+        if (~index && this._indexs[col] !== index || col === 0) {
+          _updateData['selected[' + col + ']'] = index; // 更新索引
+          this._indexs[col] = index;
+        }
+
+        if (data) {
+          _updateData['dataList[' + col + ']'] = data;
+        }
+      }
+
+      this.setData(_updateData);
+    },
+    updateDate: function updateDate(date) {
+      var _this2 = this;
+
+      var _picker$getData2 = this.picker.getData(date),
+          dataList = _picker$getData2.dataList,
+          selected = _picker$getData2.selected;
+
+      this._indexs = selected;
+
+      // 好像必须要等到 datalist 完成
+      this.setData({ dataList: dataList }, function () {
+        _this2.setData({
+          selected: selected,
+          text: _this2.getFormatStr()
+        });
+      });
+    },
+    getFormatStr: function getFormatStr() {
+      var _this3 = this;
+
+      var date = new Date();
+      ['FullYear', 'Month', 'Date', 'Hours', 'Minutes', 'Seconds'].forEach(function (key, index) {
+        var value = _this3.data.dataList[index][_this3._indexs[index]];
+        if (key === 'Month') {
+          value = +_this3.data.dataList[index][_this3._indexs[index]] - 1;
+        }
+        date['set' + key](+value);
+      });
+
+      return moment(date, this.data.format);
+    },
+    showPicker: function showPicker() {
+      this.setData({
+        show: true
+      });
+    },
+    hidePicker: function hidePicker(e) {
+      var action = e.currentTarget.dataset.action;
+
+
+      this.setData({
+        show: false
+      });
+
+      if (action === 'cancel') {
+        this.cancel({
+          detail: {}
+        });
+      } else {
+        this.change({
+          detail: {
+            value: this._indexs
+          }
+        });
+      }
+    },
+    columnchange: function columnchange(e) {
+      var _e$detail = e.detail,
+          column = _e$detail.column,
+          value = _e$detail.value;
+
+      var updateData = this.picker.update(column, value);
+      this.updatePicker(updateData);
+    },
+    change: function change(e) {
+      var value = e.detail.value;
+
+
+      var data = this.data.dataList.map(function (item, index) {
+        return +item[value[index]];
+      });
+
+      var day = data.slice(0, 3);
+      var time = data.slice(3, 6);
+      var date = new Date(day.join('/') + ' ' + time.join(':'));
+
+      this.triggerEvent('change', {
+        value: data,
+        date: date
+      });
+
+      // 手动触发 columnchange
+      for (var index = 0; index < value.length; index++) {
+        if (this._indexs[index] !== value[index]) {
+          this.columnchange({
+            detail: {
+              column: index,
+              value: value[index]
+            }
+          });
+        }
+      }
+
+      this.setData({
+        text: this.getFormatStr()
+      });
+    },
+    cancel: function cancel(e) {
+      this.triggerEvent('cancel', e.detail);
+    }
+  }
+});
--- a/dist/datetime-picker/index.json
+++ b/dist/datetime-picker/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "pop-manager": "../common/pop-manager/index"    
+  }
+}
--- a/dist/datetime-picker/index.wxml
+++ b/dist/datetime-picker/index.wxml
@ -0,0 +1,18 @@
+<import src="./date-picker-view.wxml" />
+
+<view wx:if="{{ !pickerView }}" bindtap="showPicker" class="placeholder-class">{{text || placeholder}}</view>
+
+<view wx:if="{{ pickerView }}" class="picker-view">
+  <template is="date-picker-view" data="{{ dataList, selected, use }}" />
+</view>
+<view wx:else>
+  <pop-manager show="{{ show }}" type="bottom" >
+    <view class="picker">
+      <view class="picker-action">
+        <view data-action="cancel" bindtap="hidePicker">取消</view>
+        <view data-action="change" bindtap="hidePicker">确认</view>
+      </view>
+      <template is="date-picker-view" data="{{ dataList, selected, use }}" />
+    </view>
+  </pop-manager>
+</view>
--- a/dist/datetime-picker/index.wxss
+++ b/dist/datetime-picker/index.wxss
@ -0,0 +1,53 @@
+.picker-visible {
+  height: 236px;
+  bottom: 0;
+}
+
+picker-view-column.year-view-column {
+  width: 50px;
+  flex: 2;
+}
+picker-view-column {
+  width: 30px;
+  text-align: center;
+}
+.hidden {
+  display: none;
+}
+.view-column-tip {
+  height: 235px;
+  line-height: 235px;
+  margin: 0 5px;
+}
+
+.picker {
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 12;
+}
+
+.picker .picker-action {
+  height: 36px;
+  bottom: 235px;
+  padding: 0 15px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  background: #fff;
+  box-sizing: border-box;
+  border-bottom: 1rpx solid #e5e5e5;
+  justify-content: space-between;
+}
+.picker-action view:last-child {
+  color: #1aad16;
+}
+
+.picker picker-view {
+  position: absolute;
+  bottom: 0;
+  background: #fff;
+  width: 100vw;
+}
--- a/dist/datetime-picker/picker-view-column.wxml
+++ b/dist/datetime-picker/picker-view-column.wxml
@ -0,0 +1,6 @@
+<template name="picker-view-column">
+  <picker-view-column class="{{ className }} {{ hidden && 'hidden'}}">
+    <view wx:for="{{ data }}" style="line-height: 50px" wx:key="*this">{{item}}</view>
+  </picker-view-column>
+  <view class="view-column-tip {{ hidden && 'hidden'}}">{{ tip }}</view>
+</template>
--- a/dist/datetime-picker/utils.js
+++ b/dist/datetime-picker/utils.js
@ -0,0 +1,124 @@
+'use strict';
+
+function partStartWithZero(num, strlen) {
+  var zeros = '';
+  while (zeros.length < strlen) {
+    zeros += '0';
+  }
+  return (zeros + num).slice(-strlen);
+}
+
+module.exports.genNumber = function genNumber(begin, end, strlen) {
+  var nums = [];
+  while (begin <= end) {
+    nums.push(partStartWithZero(begin, strlen));
+    begin++;
+  }
+  return nums;
+};
+
+module.exports.moment = function moment(date) {
+  var formatStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY:MM:DD';
+
+  if (!date && date !== 0) date = new Date();
+
+  date = new Date(date);
+  if (date.toString() === 'Invalid Date') throw new Error('Invalid Date');
+
+  var getDateValue = function getDateValue(method, fn) {
+    return fn ? fn(date['get' + method]()) : date['get' + method]();
+  };
+  var map = new Map();
+
+  map.set(/(Y+)/i, function () {
+    return getDateValue('FullYear', function (year) {
+      return (year + '').substr(4 - RegExp.$1.length);
+    });
+  });
+  map.set(/(M+)/, function () {
+    return getDateValue('Month', function (month) {
+      return partStartWithZero(month + 1, RegExp.$1.length);
+    });
+  });
+  map.set(/(D+)/i, function () {
+    return getDateValue('Date', function (date) {
+      return partStartWithZero(date, RegExp.$1.length);
+    });
+  });
+  map.set(/(H+)/i, function () {
+    return getDateValue('Hours', function (hour) {
+      return partStartWithZero(hour, RegExp.$1.length);
+    });
+  });
+  map.set(/(m+)/, function () {
+    return getDateValue('Minutes', function (minute) {
+      return partStartWithZero(minute, RegExp.$1.length);
+    });
+  });
+  map.set(/(s+)/, function () {
+    return getDateValue('Seconds', function (second) {
+      return partStartWithZero(second, RegExp.$1.length);
+    });
+  });
+
+  for (var _iterator = map, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+    var _ref2;
+
+    if (_isArray) {
+      if (_i >= _iterator.length) break;
+      _ref2 = _iterator[_i++];
+    } else {
+      _i = _iterator.next();
+      if (_i.done) break;
+      _ref2 = _i.value;
+    }
+
+    var _ref = _ref2;
+    var reg = _ref[0];
+    var fn = _ref[1];
+
+    if (reg.test(formatStr)) {
+      formatStr = formatStr.replace(RegExp.$1, fn.call(null));
+    }
+  }
+
+  return formatStr;
+};
+
+module.exports.iso2utc = function (string) {
+  var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
+  if (string) {
+    var d = string.match(new RegExp(regexp));
+    var offset = 0;
+    var date = new Date(d[1], 0, 1);
+
+    if (d[3]) {
+      date.setMonth(d[3] - 1);
+    }
+    if (d[5]) {
+      date.setDate(+d[5]);
+    }
+    if (d[7]) {
+      date.setHours(d[7]);
+    }
+    if (d[8]) {
+      date.setMinutes(d[8]);
+    }
+    if (d[10]) {
+      date.setSeconds(d[10]);
+    }
+    if (d[12]) {
+      date.setMilliseconds(Number("0." + d[12]) * 1000);
+    }
+    if (d[14]) {
+      offset = Number(d[16]) * 60 + Number(d[17]);
+      offset *= d[15] == '-' ? 1 : -1;
+    }
+
+    offset -= date.getTimezoneOffset();
+
+    return Number(date) + offset * 60 * 1000;
+  } else {
+    return string;
+  }
+};
--- a/dist/dialog/data.js
+++ b/dist/dialog/data.js
@ -0,0 +1,26 @@
+'use strict';
+
+module.exports = {
+  // 标题
+  title: '',
+  // 内容
+  message: ' ',
+  // 选择节点
+  selector: '#van-dialog',
+  // 按钮是否展示为纵向
+  buttonsShowVertical: false,
+  // 是否展示确定
+  showConfirmButton: true,
+  // 确认按钮文案
+  confirmButtonText: '确定',
+  // 确认按钮颜色
+  confirmButtonColor: '#3CC51F',
+  // 是否展示取消
+  showCancelButton: false,
+  // 取消按钮文案
+  cancelButtonText: '取消',
+  // 取消按钮颜色
+  cancelButtonColor: '#333',
+  // 点击按钮自动关闭 dialog
+  autoClose: true
+};
--- a/dist/dialog/dialog.js
+++ b/dist/dialog/dialog.js
@ -0,0 +1,104 @@
+'use strict';
+
+var defaultData = require('./data');
+
+function getDialogCtx(_ref) {
+  var selector = _ref.selector,
+      pageCtx = _ref.pageCtx;
+
+  var ctx = pageCtx;
+  if (!ctx) {
+    var pages = getCurrentPages();
+    ctx = pages[pages.length - 1];
+  }
+  return ctx.selectComponent(selector);
+}
+
+function getParsedOptions() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  return Object.assign({
+    // 自定义 button 列表
+    // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
+    buttons: []
+  }, defaultData, options);
+}
+
+// options 使用参数
+// pageCtx 页面 page 上下文
+function Dialog(options, pageCtx) {
+  var parsedOptions = getParsedOptions(options);
+
+  var dialogCtx = getDialogCtx({
+    selector: parsedOptions.selector,
+    pageCtx: pageCtx
+  });
+
+  if (!dialogCtx) {
+    console.error('无法找到对应的dialog组件，请于页面中注册并在 wxml 中声明 dialog 自定义组件');
+    return Promise.reject({ type: 'component error' });
+  }
+
+  // 处理默认按钮的展示
+  // 纵向排布确认按钮在上方
+  var _parsedOptions$button = parsedOptions.buttons,
+      buttons = _parsedOptions$button === undefined ? [] : _parsedOptions$button;
+
+  var showCustomBtns = false;
+  if (buttons.length === 0) {
+    if (parsedOptions.showConfirmButton) {
+      buttons.push({
+        type: 'confirm',
+        text: parsedOptions.confirmButtonText,
+        color: parsedOptions.confirmButtonColor
+      });
+    }
+
+    if (parsedOptions.showCancelButton) {
+      var cancelButton = {
+        type: 'cancel',
+        text: parsedOptions.cancelButtonText,
+        color: parsedOptions.cancelButtonColor
+      };
+      if (parsedOptions.buttonsShowVertical) {
+        buttons.push(cancelButton);
+      } else {
+        buttons.unshift(cancelButton);
+      }
+    }
+  } else {
+    showCustomBtns = true;
+  }
+
+  return new Promise(function (resolve, reject) {
+    dialogCtx.setData(Object.assign({}, parsedOptions, {
+      buttons: buttons,
+      showCustomBtns: showCustomBtns,
+      key: '' + new Date().getTime(),
+      show: true,
+      promiseFunc: { resolve: resolve, reject: reject },
+      openTypePromiseFunc: null
+    }));
+  });
+}
+
+Dialog.close = function (options, pageCtx) {
+  var parsedOptions = getParsedOptions(options);
+
+  var dialogCtx = getDialogCtx({
+    selector: parsedOptions.selector,
+    pageCtx: pageCtx
+  });
+
+  if (!dialogCtx) {
+    return;
+  }
+
+  dialogCtx.setData({
+    show: false,
+    promiseFunc: null,
+    openTypePromiseFunc: null
+  });
+};
+
+module.exports = Dialog;
--- a/dist/dialog/index.js
+++ b/dist/dialog/index.js
@ -0,0 +1,133 @@
+'use strict';
+
+var _f = function _f() {};
+var needResponseOpenTypes = ['getUserInfo', 'getPhoneNumber', 'openSetting'];
+
+Component({
+  properties: {},
+
+  data: {
+    // 标题
+    title: '',
+    // 自定义 button 列表
+    // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色, openType: 微信开放能力 }
+    buttons: [],
+    // 内容
+    message: ' ',
+    // 选择节点
+    selector: '#van-dialog',
+    // 按钮是否展示为纵向
+    buttonsShowVertical: false,
+    // 是否展示确定
+    showConfirmButton: true,
+    // 确认按钮文案
+    confirmButtonText: '确定',
+    // 确认按钮颜色
+    confirmButtonColor: '#3CC51F',
+    // 是否展示取消
+    showCancelButton: false,
+    // 取消按钮文案
+    cancelButtonText: '取消',
+    // 取消按钮颜色
+    cancelButtonColor: '#333',
+    key: '',
+    autoClose: true,
+    show: false,
+    showCustomBtns: false,
+    promiseFunc: {},
+    openTypePromiseFunc: {}
+  },
+
+  methods: {
+    handleButtonClick: function handleButtonClick(e) {
+      var _this = this;
+
+      var _e$currentTarget = e.currentTarget,
+          currentTarget = _e$currentTarget === undefined ? {} : _e$currentTarget;
+      var _currentTarget$datase = currentTarget.dataset,
+          dataset = _currentTarget$datase === undefined ? {} : _currentTarget$datase;
+
+      // 获取当次弹出框的信息
+
+      var _ref = this.data.promiseFunc || {},
+          _ref$resolve = _ref.resolve,
+          resolve = _ref$resolve === undefined ? _f : _ref$resolve,
+          _ref$reject = _ref.reject,
+          reject = _ref$reject === undefined ? _f : _ref$reject;
+
+      // 重置展示
+
+
+      if (this.data.autoClose) {
+        this.setData({ show: false });
+      }
+
+      // 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
+      if (this.data.showCustomBtns) {
+        var isNeedOpenDataButton = needResponseOpenTypes.indexOf(dataset.openType) > -1;
+        var resolveData = { type: dataset.type };
+        // 如果需要 openData，就额外返回一个 promise，用于后续 open 数据返回
+        if (isNeedOpenDataButton) {
+          resolveData.openDataPromise = new Promise(function (resolve, reject) {
+            _this.setData({ openTypePromiseFunc: { resolve: resolve, reject: reject } });
+          });
+          resolveData.hasOpenDataPromise = true;
+        }
+        resolve(resolveData);
+        return;
+      }
+
+      // 默认按钮，确认为 resolve，取消为 reject
+      if (dataset.type === 'confirm') {
+        resolve({
+          type: 'confirm'
+        });
+      } else {
+        reject({
+          type: 'cancel'
+        });
+      }
+
+      this.setData({ promiseFunc: {} });
+    },
+
+
+    // 以下为处理微信按钮开放能力的逻辑
+    handleUserInfoResponse: function handleUserInfoResponse(_ref2) {
+      var detail = _ref2.detail;
+
+      this.__handleOpenDataResponse({
+        type: detail.errMsg === 'getUserInfo:ok' ? 'resolve' : 'reject',
+        data: detail
+      });
+    },
+    handlePhoneResponse: function handlePhoneResponse(_ref3) {
+      var detail = _ref3.detail;
+
+      this.__handleOpenDataResponse({
+        type: detail.errMsg === 'getPhoneNumber:ok' ? 'resolve' : 'reject',
+        data: detail
+      });
+    },
+    handleOpenSettingResponse: function handleOpenSettingResponse(_ref4) {
+      var detail = _ref4.detail;
+
+      this.__handleOpenDataResponse({
+        type: detail.errMsg === 'openSetting:ok' ? 'resolve' : 'reject',
+        data: detail
+      });
+    },
+    __handleOpenDataResponse: function __handleOpenDataResponse(_ref5) {
+      var _ref5$type = _ref5.type,
+          type = _ref5$type === undefined ? 'resolve' : _ref5$type,
+          _ref5$data = _ref5.data,
+          data = _ref5$data === undefined ? {} : _ref5$data;
+
+      var promiseFuncs = this.data.openTypePromiseFunc || {};
+      var responseFunc = promiseFuncs[type] || _f;
+
+      responseFunc(data);
+      this.setData({ openTypePromiseFunc: null });
+    }
+  }
+});
--- a/dist/dialog/index.json
+++ b/dist/dialog/index.json
@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "pop-manager": "../common/pop-manager/index",
+    "van-button": "../button/index"
+  } 
+}
--- a/dist/dialog/index.wxml
+++ b/dist/dialog/index.wxml
@ -0,0 +1,40 @@
+<pop-manager
+  show="{{ show }}"
+  type="center"
+>
+  <view class="van-dialog--container">
+    <view
+      wx:if="{{ title }}"
+      class="van-dialog__header"
+    >{{ title }}</view>
+    <view
+      class="van-dialog__content {{ title ? 'van-dialog__content--title' : '' }}"
+    >
+      <text>{{ message }}</text>
+    </view>
+    <view
+      class="van-dialog__footer {{ buttonsShowVertical ? 'van-dialog__footer--vertical' : 'van-dialog__footer--horizon' }}"
+    >
+      <block
+        wx:for="{{ buttons }}"
+        wx:key="{{ item.text }}-{{ item.type }}"
+      >
+        <van-button
+          class="van-dialog__button"
+          custom-class="{{ index === 0 ? 'van-dialog__button-inside--first' : 'van-dialog__button-inside' }}"
+          data-type="{{ item.type }}"
+          data-open-type="{{ item.openType }}"
+          open-type="{{ item.openType }}"
+          bind:tap="handleButtonClick"
+          bind:getuserinfo="handleUserInfoResponse"
+          bind:getphonenumber="handlePhoneResponse"
+          bind:opensetting="handleOpenSettingResponse"
+        >
+          <view
+            style="color: {{ item.color || '#333' }}"
+          >{{ item.text }}</view>
+        </van-button>
+      </block>
+    </view>
+  </view>
+</pop-manager>
--- a/dist/dialog/index.wxss
+++ b/dist/dialog/index.wxss
@ -0,0 +1 @@
+.van-dialog--container{width:80vw;font-size:16px;overflow:hidden;border-radius:4px;background-color:#fff;color:#333}.van-dialog__header{padding:15px 0 0;text-align:center}.van-dialog__content{position:relative;padding:15px 20px;line-height:1.5;min-height:40px}.van-dialog__content::after{border-bottom-width:1px}.van-dialog__content--title{color:#999;font-size:14px}.van-dialog__footer{overflow:hidden}.van-dialog__button{-webkit-box-flex:1;flex:1}.van-dialog__button-inside,.van-dialog__button-inside--first{margin-bottom:0;line-height:50px;height:50px}.van-dialog__button-inside--first::after,.van-dialog__button-inside::after{border-width:0;border-radius:0}.van-dialog__footer--horizon{display:-webkit-box;display:flex}.van-dialog__footer--horizon .van-dialog__button-inside::after{border-left-width:1px}.van-dialog__footer--vertical .van-dialog__button-inside::after{border-top-width:1px}
--- a/dist/field/index.js
+++ b/dist/field/index.js
@ -0,0 +1,125 @@
+'use strict';
+
+Component({
+  behaviors: ['wx://form-field'],
+
+  externalClasses: ['input-class'],
+
+  options: {
+    multipleSlots: true
+  },
+
+  properties: {
+    icon: String,
+    label: String,
+    error: Boolean,
+    focus: Boolean,
+    center: Boolean,
+    isLink: Boolean,
+    leftIcon: String,
+    disabled: Boolean,
+    autosize: Boolean,
+    readonly: Boolean,
+    required: Boolean,
+    iconClass: String,
+    clearable: Boolean,
+    labelAlign: String,
+    inputAlign: String,
+    customClass: String,
+    confirmType: String,
+    errorMessage: String,
+    placeholder: String,
+    customStyle: String,
+    useButtonSlot: Boolean,
+    placeholderClass: String,
+    cursorSpacing: {
+      type: Number,
+      value: 50
+    },
+    maxlength: {
+      type: Number,
+      value: -1
+    },
+    value: {
+      type: null,
+      value: '',
+      observer: function observer(currentValue) {
+        this.setData({ currentValue: currentValue });
+      }
+    },
+    type: {
+      type: String,
+      value: 'text'
+    },
+    border: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  data: {
+    focused: false,
+    showClear: false,
+    currentValue: ''
+  },
+
+  attached: function attached() {
+    this.setData({
+      currentValue: this.data.value
+    });
+  },
+
+
+  methods: {
+    onInput: function onInput(event) {
+      var _ref = event.detail || {},
+          _ref$value = _ref.value,
+          value = _ref$value === undefined ? '' : _ref$value;
+
+      this.triggerEvent('input', value);
+      this.triggerEvent('change', value);
+      this.setData({
+        currentValue: value,
+        showClear: this.getShowClear({ value: value })
+      });
+    },
+    onFocus: function onFocus(event) {
+      this.triggerEvent('focus', event);
+      this.setData({
+        focused: true,
+        showClear: this.getShowClear({ focused: true })
+      });
+    },
+    onBlur: function onBlur(event) {
+      this.focused = false;
+      this.triggerEvent('blur', event);
+      this.setData({
+        focused: false,
+        showClear: this.getShowClear({ focused: false })
+      });
+    },
+    onTapIcon: function onTapIcon() {
+      this.triggerEvent('tap-icon');
+    },
+    getShowClear: function getShowClear(options) {
+      var _options$focused = options.focused,
+          focused = _options$focused === undefined ? this.data.focused : _options$focused,
+          _options$value = options.value,
+          value = _options$value === undefined ? this.data.currentValue : _options$value;
+
+
+      return this.data.clearable && focused && value !== '' && !this.data.readonly;
+    },
+    onClear: function onClear() {
+      this.setData({
+        currentValue: '',
+        showClear: this.getShowClear({ value: '' })
+      });
+      this.triggerEvent('input', '');
+      this.triggerEvent('change', '');
+    },
+    onConfirm: function onConfirm() {
+      this.triggerEvent('confirm', this.data.currentValue);
+    }
+  }
+});
--- a/dist/field/index.json
+++ b/dist/field/index.json
@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../cell/index",
+    "van-icon": "../icon/index"
+  }
+}
--- a/dist/field/index.wxml
+++ b/dist/field/index.wxml
@ -0,0 +1,70 @@
+<van-cell
+  icon="{{ leftIcon }}"
+  title="{{ label }}"
+  center="{{ center }}"
+  border="{{ border }}"
+  is-link="{{ isLink }}"
+  required="{{ required }}"
+  custom-style="{{ customStyle }}"
+  title-width="90px"
+  custom-class="{{ customClass }} van-field {{ labelAlign ? 'van-field--label-' + labelAlign : '' }}"
+>
+  <slot name="label" slot="title" />
+  <view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
+    <textarea
+      wx:if="{{ type === 'textarea' }}"
+      class="input-class van-field__control van-field__textarea {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
+      focus="{{ focus }}"
+      value="{{ currentValue }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      maxlength="{{ maxlength }}"
+      placeholder="{{ placeholder }}"
+      auto-height="{{ autosize }}"
+      placeholder-class="{{ placeholderClass }} {{ error ? 'van-field--error' : '' }}"
+      cursor-spacing="{{ cursorSpacing }}"
+      bindinput="onInput"
+      bind:blur="onBlur"
+      bind:focus="onFocus"
+      bind:confirm="onConfirm"
+    />
+    <input
+      wx:else
+      class="input-class van-field__control {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
+      type="{{ type }}"
+      focus="{{ focus }}"
+      value="{{ currentValue }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      maxlength="{{ maxlength }}"
+      placeholder="{{ placeholder }}"
+      placeholder-class="{{ placeholderClass }} {{ error ? 'van-field--error' : '' }}"
+      confirm-type="{{ confirmType }}"
+      cursor-spacing="{{ cursorSpacing }}"
+      bindinput="onInput"
+      bind:blur="onBlur"
+      bind:focus="onFocus"
+      bind:confirm="onConfirm"
+    />
+    <van-icon
+      wx:if="{{ showClear }}"
+      name="clear"
+      custom-class="van-field__clear"
+      bind:touchstart="onClear"
+    />
+    <view class="van-field__icon-container" wx:if="{{ icon || useIconSlot }}" bind:tap="onTapIcon">
+      <van-icon
+        wx:if="{{ icon }}"
+        name="{{ icon }}"
+        custom-class="van-field__icon {{ iconClass }}"
+      />
+      <slot wx:else name="icon" />
+    </view>
+    <view wx:if="{{ useButtonSlot }}" class="van-field__button">
+      <slot name="button" />
+    </view>
+  </view>
+  <view wx:if="{{ errorMessage }}" class="van-field__error-message">
+    {{ errorMessage }}
+  </view>
+</van-cell>
--- a/dist/field/index.wxss
+++ b/dist/field/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-field__body{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.van-field__body--textarea{min-height:24px}.van-field__control{border:0;margin:0;padding:0;width:100%;resize:none;display:block;text-align:left;box-sizing:border-box;line-height:inherit;background-color:transparent}.van-field__control--disabled{opacity:1;color:#666;background-color:transparent}.van-field__control--center{text-align:center}.van-field__control--right{text-align:right}.van-field__button,.van-field__clear,.van-field__icon-container{flex-shrink:0}.van-field__clear,.van-field__icon-container{padding:0 10px;color:#999;line-height:inherit;margin-right:-10px;vertical-align:middle}.van-field__icon{display:block;font-size:16px;line-height:inherit}.van-field__button{padding-left:10px}.van-field__error-message{color:#f44;font-size:12px;text-align:left}.van-field--error{color:#f44}.van-field--label-center .van-cell__title{text-align:center}.van-field--label-right .van-cell__title{text-align:right}
--- a/dist/icon/index.js
+++ b/dist/icon/index.js
@ -0,0 +1,12 @@
+'use strict';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  properties: {
+    info: null,
+    name: String,
+    size: String,
+    color: String
+  }
+});
--- a/dist/icon/index.json
+++ b/dist/icon/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/icon/index.wxml
+++ b/dist/icon/index.wxml
@ -0,0 +1,6 @@
+<view
+  class="custom-class van-icon van-icon-{{ name }}"
+  style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size : '' }}"
+>
+  <view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
+</view>
--- a/dist/icon/index.wxss
+++ b/dist/icon/index.wxss
--- a/dist/index.js
+++ b/dist/index.js
@ -0,0 +1,5 @@
+'use strict';
+
+exports.Dialog = require('./dialog/dialog');
+exports.Toast = require('./toast/toast');
+exports.TopTips = require('./toptips/toptips');
--- a/dist/loading/index.js
+++ b/dist/loading/index.js
@ -0,0 +1,20 @@
+'use strict';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  properties: {
+    size: {
+      type: String,
+      value: '30px'
+    },
+    type: {
+      type: String,
+      value: 'circular'
+    },
+    color: {
+      type: String,
+      value: '#c9c9c9'
+    }
+  }
+});
--- a/dist/loading/index.json
+++ b/dist/loading/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/loading/index.wxml
+++ b/dist/loading/index.wxml
@ -0,0 +1,16 @@
+<view
+  class="van-loading custom-class"
+  style="width: {{ size }}; height: {{ size }}"
+>
+  <view
+    class="van-loading__spinner van-loading__spinner--{{ type }}"
+    style="color: {{ color }};"
+  >
+    <view
+      wx:if="{{ type === 'spinner' }}"
+      wx:for="item in 12"
+      wx:key="{{ index }}"
+      class="van-loading__dot"
+    />
+  </view>
+</view>
--- a/dist/loading/index.wxss
+++ b/dist/loading/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-loading{z-index:0;font-size:0;line-height:0;position:relative;display:inline-block;vertical-align:middle}.van-loading__spinner{z-index:-1;width:100%;height:100%;position:relative;display:inline-block;box-sizing:border-box;-webkit-animation:van-rotate .8s linear infinite;animation:van-rotate .8s linear infinite}.van-loading__spinner--spinner{-webkit-animation-timing-function:steps(12);animation-timing-function:steps(12)}.van-loading__spinner--circular{border:1px solid;border-radius:100%;border-color:currentColor;border-top-color:transparent}.van-loading__dot{top:0;left:0;width:100%;height:100%;position:absolute}.van-loading__dot::before{width:2px;height:25%;content:' ';display:block;margin:0 auto;border-radius:40%;background-color:currentColor}.van-loading__dot:nth-of-type(1){opacity:1;-webkit-transform:rotate(30deg);transform:rotate(30deg)}.van-loading__dot:nth-of-type(2){opacity:.9375;-webkit-transform:rotate(60deg);transform:rotate(60deg)}.van-loading__dot:nth-of-type(3){opacity:.875;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.van-loading__dot:nth-of-type(4){opacity:.8125;-webkit-transform:rotate(120deg);transform:rotate(120deg)}.van-loading__dot:nth-of-type(5){opacity:.75;-webkit-transform:rotate(150deg);transform:rotate(150deg)}.van-loading__dot:nth-of-type(6){opacity:.6875;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.van-loading__dot:nth-of-type(7){opacity:.625;-webkit-transform:rotate(210deg);transform:rotate(210deg)}.van-loading__dot:nth-of-type(8){opacity:.5625;-webkit-transform:rotate(240deg);transform:rotate(240deg)}.van-loading__dot:nth-of-type(9){opacity:.5;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.van-loading__dot:nth-of-type(10){opacity:.4375;-webkit-transform:rotate(300deg);transform:rotate(300deg)}.van-loading__dot:nth-of-type(11){opacity:.375;-webkit-transform:rotate(330deg);transform:rotate(330deg)}.van-loading__dot:nth-of-type(12){opacity:.3125;-webkit-transform:rotate(360deg);transform:rotate(360deg)}
--- a/dist/notice-bar/index.js
+++ b/dist/notice-bar/index.js
@ -0,0 +1,181 @@
+'use strict';
+
+var VALID_MODE = ['closeable', 'link'];
+var FONT_COLOR = '#f60';
+var BG_COLOR = '#fff7cc';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  properties: {
+    text: {
+      type: String,
+      value: '',
+      observer: function observer() {
+        this.setData({}, this._init);
+      }
+    },
+    mode: {
+      type: String,
+      value: ''
+    },
+    url: {
+      type: String,
+      value: ''
+    },
+    openType: {
+      type: String,
+      value: 'navigate'
+    },
+    delay: {
+      type: Number,
+      value: 0
+    },
+    speed: {
+      type: Number,
+      value: 50
+    },
+    scrollable: {
+      type: Boolean,
+      value: true
+    },
+    leftIcon: {
+      type: String,
+      value: ''
+    },
+    color: {
+      type: String,
+      value: FONT_COLOR
+    },
+    backgroundColor: {
+      type: String,
+      value: BG_COLOR
+    }
+  },
+
+  data: {
+    show: true,
+    hasRightIcon: false,
+    width: undefined,
+    wrapWidth: undefined,
+    elapse: undefined,
+    animation: null,
+    resetAnimation: null,
+    timer: null
+  },
+
+  attached: function attached() {
+    var mode = this.data.mode;
+
+    if (mode && this._checkMode(mode)) {
+      this.setData({
+        hasRightIcon: true
+      });
+    }
+  },
+  detached: function detached() {
+    var timer = this.data.timer;
+
+    timer && clearTimeout(timer);
+  },
+
+
+  methods: {
+    _checkMode: function _checkMode(val) {
+      var isValidMode = ~VALID_MODE.indexOf(val);
+      if (!isValidMode) {
+        console.warn('mode only accept value of ' + VALID_MODE + ', now get ' + val + '.');
+      }
+      return isValidMode;
+    },
+    _init: function _init() {
+      var _this = this;
+
+      wx.createSelectorQuery().in(this).select('.van-notice-bar__content').boundingClientRect(function (rect) {
+        if (!rect || !rect.width) {
+          return;
+        }
+        _this.setData({
+          width: rect.width
+        });
+
+        wx.createSelectorQuery().in(_this).select('.van-notice-bar__content-wrap').boundingClientRect(function (rect) {
+          if (!rect || !rect.width) {
+            return;
+          }
+
+          var wrapWidth = rect.width;
+          var _data = _this.data,
+              width = _data.width,
+              speed = _data.speed,
+              scrollable = _data.scrollable,
+              delay = _data.delay;
+
+
+          if (scrollable && wrapWidth < width) {
+            var elapse = width / speed * 1000;
+            var animation = wx.createAnimation({
+              duration: elapse,
+              timeingFunction: 'linear',
+              delay: delay
+            });
+            var resetAnimation = wx.createAnimation({
+              duration: 0,
+              timeingFunction: 'linear'
+            });
+
+            _this.setData({
+              elapse: elapse,
+              wrapWidth: wrapWidth,
+              animation: animation,
+              resetAnimation: resetAnimation
+            }, function () {
+              _this._scroll();
+            });
+          }
+        }).exec();
+      }).exec();
+    },
+    _scroll: function _scroll() {
+      var _this2 = this;
+
+      var _data2 = this.data,
+          animation = _data2.animation,
+          resetAnimation = _data2.resetAnimation,
+          wrapWidth = _data2.wrapWidth,
+          elapse = _data2.elapse,
+          speed = _data2.speed;
+
+      resetAnimation.translateX(wrapWidth).step();
+      var animationData = animation.translateX(-(elapse * speed) / 1000).step();
+      this.setData({
+        animationData: resetAnimation.export()
+      });
+      setTimeout(function () {
+        _this2.setData({
+          animationData: animationData.export()
+        });
+      }, 100);
+
+      var timer = setTimeout(function () {
+        _this2._scroll();
+      }, elapse);
+
+      this.setData({
+        timer: timer
+      });
+    },
+    _handleButtonClick: function _handleButtonClick() {
+      var timer = this.data.timer;
+
+      timer && clearTimeout(timer);
+      this.setData({
+        show: false,
+        timer: null
+      });
+    },
+    onTap: function onTap(event) {
+      this.triggerEvent('tap', event);
+    }
+  }
+});
--- a/dist/notice-bar/index.json
+++ b/dist/notice-bar/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}
--- a/dist/notice-bar/index.wxml
+++ b/dist/notice-bar/index.wxml
@ -0,0 +1,31 @@
+<view
+  wx:if="{{ show }}"
+  class="custom-class van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
+  style="color: {{ color }};background-color: {{ backgroundColor }}"
+  bind:tap="onTap"
+>
+  <view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon">
+    <image src="{{ leftIcon }}" />
+  </view>
+  <view class="van-notice-bar__content-wrap">
+    <view class="van-notice-bar__content" animation="{{ animationData }}">
+      {{ text }}
+    </view>
+  </view>
+
+  <block wx:if="{{ mode }}">
+    <van-icon
+      wx:if="{{ mode === 'closeable' }}"
+      class="van-notice-bar__right-icon"
+      name="close"
+      bindtap="_handleButtonClick"
+    />
+    <navigator
+      wx:if="{{ mode === 'link' }}"
+      url="{{ url }}"
+      open-type="{{ openType }}"
+    >
+      <van-icon class="van-notice-bar__right-icon" name="arrow" />
+    </navigator>
+  </block>
+</view>
--- a/dist/notice-bar/index.wxss
+++ b/dist/notice-bar/index.wxss
@ -0,0 +1 @@
+.van-notice-bar{display:-webkit-box;display:flex;padding:9px 10px;font-size:12px;line-height:1.5}.van-notice-bar--within-icon{position:relative;padding-right:30px}.van-notice-bar__left-icon{height:18px;min-width:20px;padding-top:1px;box-sizing:border-box}.van-notice-bar__left-icon>image{width:16px;height:16px}.van-notice-bar__right-icon{position:absolute;top:10px;right:10px;font-size:15px;line-height:1}.van-notice-bar__content-wrap{position:relative;-webkit-box-flex:1;flex:1;height:18px;overflow:hidden}.van-notice-bar__content{position:absolute;white-space:nowrap}
--- a/dist/panel/index.js
+++ b/dist/panel/index.js
@ -0,0 +1,17 @@
+'use strict';
+
+Component({
+  externalClasses: ['custom-class', 'footer-class'],
+
+  options: {
+    multipleSlots: true
+  },
+
+  properties: {
+    desc: String,
+    title: String,
+    status: String,
+    headerClass: String,
+    useFooterSlot: Boolean
+  }
+});
--- a/dist/panel/index.json
+++ b/dist/panel/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../cell/index"
+  }
+}
--- a/dist/panel/index.wxml
+++ b/dist/panel/index.wxml
@ -0,0 +1,19 @@
+<view class="van-panel van-hairline--top-bottom custom-class">
+  <van-cell 
+    wx:if="{{ title || desc || status }}"
+    title="{{ title }}"
+    label="{{ desc }}"
+    value="{{ status }}"
+    custom-class="{{ headerClass }}"
+    value-class="van-panel__header-value"
+  />
+  <slot wx:else name="header" />
+
+  <view class="van-panel__content">
+    <slot />
+  </view>
+
+  <view wx:if="{{ useFooterSlot }}" class="van-panel__footer van-hairline--top footer-class">
+    <slot name="footer" />
+  </view>
+</view>
--- a/dist/panel/index.wxss
+++ b/dist/panel/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-panel{background:#fff}.van-panel__header-value{color:#f44}.van-panel__footer{padding:10px 15px}
--- a/dist/popup/index.js
+++ b/dist/popup/index.js
@ -0,0 +1,32 @@
+'use strict';
+
+Component({
+  externalClasses: ['custom-class', 'overlay-class'],
+
+  properties: {
+    show: Boolean,
+    overlayStyle: String,
+    overlay: {
+      type: Boolean,
+      value: true
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      value: true
+    },
+    position: {
+      type: String,
+      value: 'center'
+    }
+  },
+
+  methods: {
+    onClickOverlay: function onClickOverlay() {
+      this.triggerEvent('click-overlay');
+
+      if (this.data.closeOnClickOverlay) {
+        this.triggerEvent('close');
+      }
+    }
+  }
+});
--- a/dist/popup/index.json
+++ b/dist/popup/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/popup/index.wxml
+++ b/dist/popup/index.wxml
@ -0,0 +1,9 @@
+<view
+  wx:if="{{ overlay }}"
+  class="overlay-class van-popup__overlay {{ show ? 'van-popup--show' : '' }}"
+  style="{{ overlayStyle }}"
+  bind:tap="onClickOverlay"
+/>
+<view class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }} {{ show ? 'van-popup--show' : '' }}">
+  <slot />
+</view>
--- a/dist/popup/index.wxss
+++ b/dist/popup/index.wxss
@ -0,0 +1 @@
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-popup{top:50%;left:50%;z-index:11;max-height:100%;overflow-y:auto;box-sizing:border-box;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup,.van-popup__overlay{display:none;position:fixed;-webkit-animation:van-fade-in .3s ease;animation:van-fade-in .3s ease}.van-popup__overlay{width:100%;height:100%;top:0;left:0;z-index:10;background-color:rgba(0,0,0,.7)}.van-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);-webkit-animation-name:van-popup-top;animation-name:van-popup-top}.van-popup--right{top:50%;right:0;bottom:auto;left:auto;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-animation-name:van-popup-right;animation-name:van-popup-right}.van-popup--bottom{width:100%;top:auto;bottom:0;right:auto;left:50%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);-webkit-animation-name:van-popup-bottom;animation-name:van-popup-bottom}.van-popup--left{top:50%;right:auto;bottom:auto;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-animation-name:van-popup-left;animation-name:van-popup-left}.van-popup--show{display:block}@-webkit-keyframes van-popup-top{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@keyframes van-popup-top{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@-webkit-keyframes van-popup-bottom{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@keyframes van-popup-bottom{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@-webkit-keyframes van-popup-left{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@keyframes van-popup-left{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@-webkit-keyframes van-popup-right{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@keyframes van-popup-right{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}
--- a/dist/radio/index.js
+++ b/dist/radio/index.js
@ -0,0 +1,33 @@
+'use strict';
+
+Component({
+  behaviors: ['wx://form-field'],
+
+  externalClasses: ['radio-class', 'radio-color'],
+
+  properties: {
+    items: Array,
+    type: String
+  },
+
+  methods: {
+    radioChange: function radioChange(e) {
+      this.selectItem(e.detail.value);
+      this.triggerEvent('change', e);
+    },
+    selectItem: function selectItem(value) {
+      var items = this.data.items;
+
+
+      items.forEach(function (item) {
+        if (item.name === value) {
+          item.checked = true;
+        } else {
+          item.checked = false;
+        }
+      });
+
+      this.setData({ items: items });
+    }
+  }
+});
--- a/dist/radio/index.json
+++ b/dist/radio/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}
--- a/dist/radio/index.wxml
+++ b/dist/radio/index.wxml
@ -0,0 +1,28 @@
+<radio-group
+  class="van-radio radio-class"
+  bindchange="radioChange"
+  wx:if="{{ items && items.length }}"
+>
+  <label
+    class="van-radio__label {{ type === 'list' ? 'van-radio__list-item' : 'van-radio__item'}}"
+    wx:for="{{ items }}"
+    wx:key="{{ item.value }}"
+    wx:for-item="item"
+    wx:for-index="index"
+  >
+    <view class="van-radio__icon-wrap">
+      <view class="van-radio__icon {{ item.disabled ? 'van-radio--disabled' : '' }} {{ item.checked ? 'van-radio--checked radio-color' : '' }}">
+        <view class="van-radio__icon-inside"></view>
+      </view>
+      <radio
+        class="van-radio__origin"
+        value="{{ item.name }}"
+        checked="{{ item.checked }}"
+        disabled="{{ item.disabled }}"
+      />
+    </view>
+    <view class="van-radio__name">
+      {{item.value}}
+    </view>
+  </label>
+</radio-group>
--- a/dist/radio/index.wxss
+++ b/dist/radio/index.wxss
@ -0,0 +1 @@
+.van-radio{display:block;padding:0 10px;font-size:14px}.van-radio__item{display:block;margin-top:10px;height:20px}.van-radio__item:last-child{margin-bottom:10px}.van-radio__list-item{display:block;padding:10px 10px 10px 0;border-bottom:1px solid #e5e5e5}.van-radio__list-item .van-radio__icon-wrap{float:right;margin-top:3px}.van-radio__icon-wrap{position:relative;width:14px;height:15px;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;color:#aaa}.van-radio__icon-wrap .van-radio__origin{opacity:0;width:14px;height:20px}.van-radio__icon-wrap .van-radio__icon{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border:1px solid #dcdfe6;border-radius:100%;width:14px;height:14px;background-color:#fff;cursor:pointer;box-sizing:border-box}.van-radio__icon-wrap .van-radio__icon .van-radio__icon-inside{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:4px;height:4px;border-radius:50%}.van-radio__icon-wrap .van-radio__icon.van-radio--checked{border-color:#06bf04;background:#06bf04}.van-radio__icon-wrap .van-radio__icon.van-radio--checked .van-radio__icon-inside{background-color:#fff}.van-radio__icon-wrap .van-radio__icon.van-radio--disabled{opacity:.6}.van-radio__name{display:inline-block;margin-left:10px}
--- a/dist/row/index.js
+++ b/dist/row/index.js
@ -0,0 +1,43 @@
+'use strict';
+
+var _relations;
+
+var COL_PATH = '../col/index';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  relations: (_relations = {}, _relations[COL_PATH] = {
+    type: 'descendant'
+  }, _relations),
+
+  properties: {
+    gutter: {
+      type: Number,
+      observer: function observer() {
+        this.setGutter();
+      }
+    }
+  },
+
+  ready: function ready() {
+    this.setGutter();
+  },
+
+
+  methods: {
+    setGutter: function setGutter() {
+      var _this = this;
+
+      var gutter = this.data.gutter;
+
+      var margin = '-' + Number(gutter) / 2 + 'px';
+      var style = gutter ? 'margin-right: ' + margin + '; margin-left: ' + margin + ';' : '';
+
+      this.setData({ style: style });
+      this.getRelationNodes(COL_PATH).forEach(function (col) {
+        col.setGutter(_this.data.gutter);
+      });
+    }
+  }
+});
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}.van-actionsheet{color:#333;max-height:90%;overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#f8f8f8}.van-actionsheet--withtitle{background-color:#fff}.van-actionsheet__cancel,.van-actionsheet__item{height:50px;line-height:50px;font-size:16px;text-align:center;background-color:#fff}.van-actionsheet__cancel:active,.van-actionsheet__item:active{background-color:#e8e8e8}.van-actionsheet__item--disabled{color:#c9c9c9}.van-actionsheet__item--disabled:active{background-color:#fff}.van-actionsheet__subname{font-size:12px;color:#666;margin-left:5px}.van-actionsheet__loading{display:inline-block}.van-actionsheet__cancel{margin-top:10px}.van-actionsheet__header{font-size:16px;line-height:44px;text-align:center}.van-actionsheet__close{top:0;right:0;padding:0 15px;font-size:18px;color:#999;position:absolute;line-height:inherit}
				`@ -0,0 +1 @@`
				`.checkbox-group{padding-bottom:10px;background-color:#fff}.checkbox-group .van-checkbox{margin-top:10px}`
				`@ -0,0 +1 @@`
				.van-checkbox{display:inline-block;padding:0 10px;font-size:14px}.van-checkbox__item{display:block;margin-top:10px}.van-checkbox__list-item{display:block;padding:10px 10px 10px 0;margin-left:10px;border-bottom:1px solid #e5e5e5}.van-checkbox__list-item .van-checkbox__icon{float:right}.van-checkbox__icon{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;color:#aaa}.van-checkbox__icon.van-checkbox--checked{color:#06bf04}.van-checkbox__icon.van-checkbox--disabled{color:#e5e5e5}.van-checkbox__label{display:inline-block;margin-left:10px}
				`@ -0,0 +1 @@`
				.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16667%}.van-col--offset-1{margin-left:4.16667%}.van-col--2{width:8.33333%}.van-col--offset-2{margin-left:8.33333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66667%}.van-col--offset-4{margin-left:16.66667%}.van-col--5{width:20.83333%}.van-col--offset-5{margin-left:20.83333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16667%}.van-col--offset-7{margin-left:29.16667%}.van-col--8{width:33.33333%}.van-col--offset-8{margin-left:33.33333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66667%}.van-col--offset-10{margin-left:41.66667%}.van-col--11{width:45.83333%}.van-col--offset-11{margin-left:45.83333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16667%}.van-col--offset-13{margin-left:54.16667%}.van-col--14{width:58.33333%}.van-col--offset-14{margin-left:58.33333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66667%}.van-col--offset-16{margin-left:66.66667%}.van-col--17{width:70.83333%}.van-col--offset-17{margin-left:70.83333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16667%}.van-col--offset-19{margin-left:79.16667%}.van-col--20{width:83.33333%}.van-col--offset-20{margin-left:83.33333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66667%}.van-col--offset-22{margin-left:91.66667%}.van-col--23{width:95.83333%}.van-col--offset-23{margin-left:95.83333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}
				`@ -0,0 +1 @@`
				.pop{visibility:hidden}.pop--show{visibility:visible}.pop__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.pop__mask--hide{background:0 0}.pop__container{position:fixed;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:all .4s ease;transition:all .4s ease;z-index:11;opacity:0}.pop--show .pop__container{opacity:1}.pop--show .pop__mask{display:block}.pop--left .pop__container{left:0;top:50%;-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.pop--show.pop--left .pop__container{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.pop--right .pop__container{right:0;top:50%;left:auto;-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.pop--show.pop--right .pop__container{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.pop--bottom .pop__container{top:auto;left:50%;bottom:0;-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}.pop--show.pop--bottom .pop__container{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.pop--top .pop__container{top:0;left:50%;-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}.pop--show.pop--top .pop__container{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}
				`@ -0,0 +1 @@`
				@-webkit-keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in;animation:.3s van-fade-in}.van-fade-leave-active{-webkit-animation:.3s van-fade-out;animation:.3s van-fade-out}.van-slide-bottom-enter-active{-webkit-animation:van-slide-bottom-enter .3s both ease;animation:van-slide-bottom-enter .3s both ease}.van-slide-bottom-leave-active{-webkit-animation:van-slide-bottom-leave .3s both ease;animation:van-slide-bottom-leave .3s both ease}
				`@ -0,0 +1 @@`
				`.van-clearfix::after{content:'';display:table;clear:both}`
				`@ -0,0 +1 @@`
				`.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`
				`@ -0,0 +1 @@`
				.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}
				`@ -0,0 +1 @@`
				.van-dialog--container{width:80vw;font-size:16px;overflow:hidden;border-radius:4px;background-color:#fff;color:#333}.van-dialog__header{padding:15px 0 0;text-align:center}.van-dialog__content{position:relative;padding:15px 20px;line-height:1.5;min-height:40px}.van-dialog__content::after{border-bottom-width:1px}.van-dialog__content--title{color:#999;font-size:14px}.van-dialog__footer{overflow:hidden}.van-dialog__button{-webkit-box-flex:1;flex:1}.van-dialog__button-inside,.van-dialog__button-inside--first{margin-bottom:0;line-height:50px;height:50px}.van-dialog__button-inside--first::after,.van-dialog__button-inside::after{border-width:0;border-radius:0}.van-dialog__footer--horizon{display:-webkit-box;display:flex}.van-dialog__footer--horizon .van-dialog__button-inside::after{border-left-width:1px}.van-dialog__footer--vertical .van-dialog__button-inside::after{border-top-width:1px}