Merge branch 'dev'

.npmignore

@@ -0,0 +1 @@
+changelog.generated.md

docs/markdown/changelog.md

@@ -1,5 +1,31 @@
 ## 更新日志
 
+## [v0.4.9](https://github.com/youzan/vant-weapp/tree/v0.4.9)
+`2018-12-07`
+
+**Improvements**
+
+- Tab: 新增 sticky 属性 [\#1019](https://github.com/youzan/vant-weapp/pull/1019)
+- Tab: 新增 swipeable 属性 [\#1019](https://github.com/youzan/vant-weapp/pull/1019)
+- Rate: 新增 icon-class 外部样式类 [\#1026](https://github.com/youzan/vant-weapp/pull/1026)
+- Icon: 优化内部 setData 次数 [\#1009](https://github.com/youzan/vant-weapp/pull/1009)
+- Popup: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+- Tabbar: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+- SubmitBar: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+- ActionSheet: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+- GoodsAction: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+
+**Bug Fixes**
+
+- 修复 Collapse 箭头方向错误 [\#1014](https://github.com/youzan/vant-weapp/pull/1014)
+- 修复 Steps 在开发者工具体验评分中提示选择器错误的问题 [\#1015](https://github.com/youzan/vant-weapp/pull/1015)
+- 修复 Stepper 动态设置 value 时禁用状态未更新的问题 [\#1022](https://github.com/youzan/vant-weapp/pull/1022)
+- 修复 Popup 在 iOS 8 下动画错误的问题 [\#1008](https://github.com/youzan/vant-weapp/pull/1008) [\#1029](https://github.com/youzan/vant-weapp/pull/1029)
+- 修复 Transition 在 iOS 8 下动画错误的问题 [\#1008](https://github.com/youzan/vant-weapp/pull/1008) [\#1029](https://github.com/youzan/vant-weapp/pull/1029)
+- 修复 DatetimePicker 动态设置 type 后报错的问题 [\#1004](https://github.com/youzan/vant-weapp/pull/1004)
+- 修复劫持 setData 方法导致无法适配支付宝小程序的问题 [\#1023](https://github.com/youzan/vant-weapp/pull/1023)
+
+
 ## [v0.4.8](https://github.com/youzan/vant-weapp/tree/v0.4.8)
 `2018-12-03`
 

example/app.json

@@ -37,7 +37,8 @@
     "pages/swipe-cell/index",
     "pages/datetime-picker/index",
     "pages/rate/index",
-    "pages/collapse/index"
+    "pages/collapse/index",
+    "pages/picker/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#f8f8f8",
@@ -94,6 +95,7 @@
     "van-datetime-picker": "../../dist/datetime-picker/index",
     "van-rate": "../../dist/rate/index",
     "van-collapse": "../../dist/collapse/index",
-    "van-collapse-item": "../../dist/collapse-item/index"
+    "van-collapse-item": "../../dist/collapse-item/index",
+    "van-picker": "../../dist/picker/index"
   }
 }

example/config.js

@@ -43,6 +43,10 @@ export default [
         path: '/field',
         title: 'Field 输入框'
       },
+      {
+        path: '/picker',
+        title: 'Picker 选择器'
+      },
       {
         path: '/radio',
         title: 'Radio 单选框'

example/pages/badge/index.wxml

@@ -4,7 +4,7 @@
       <van-badge title="标签名称" />
       <van-badge title="标签名称" info="8" />
       <van-badge title="标签名称" info="99" />
-      <van-badge title="标签名称" info="199" />
+      <van-badge title="标签名称" info="99+" />
     </van-badge-group>
   </view>
 </demo-block>

example/pages/button/index.wxml

@@ -34,5 +34,4 @@
     <van-button size="small" class="demo-margin-right">小型按钮</van-button>
     <van-button size="mini">迷你按钮</van-button>
   </demo-block>
-
 </demo-section>

example/pages/card/index.wxml

@@ -9,6 +9,15 @@
     />
   </demo-block>
 
+  <demo-block title="没有商品图片">
+    <van-card
+      num="2"
+      price="2.00"
+      desc="描述信息"
+      title="商品标题"
+    />
+  </demo-block>
+
   <demo-block title="高级用法">
     <van-card
       num="2"
@@ -22,9 +31,9 @@
       <view slot="tags">
         <van-tag plain type="danger">满减</van-tag>
       </view>
-      <view slot="footer">
+      <view slot="footer" class="van-card__footer">
-        <van-button size="mini" custom-class="button">按钮</van-button>
+        <van-button size="mini" round custom-class="button">按钮</van-button>
-        <van-button size="mini">按钮</van-button>
+        <van-button size="mini" round>按钮</van-button>
       </view>
     </van-card>
   </demo-block>

example/pages/card/index.wxss

@@ -6,3 +6,7 @@
 .button {
   margin-right: 5px;
 }
+
+.van-card__footer {
+  margin-top: 5px;
+}

example/pages/collapse/index.wxml

@@ -1,37 +1,31 @@
 <demo-block title="基础用法">
   <van-collapse value="{{ active1 }}" data-key="active1" bind:change="onChange">
-    <van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
+    <van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
-    <van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
+    <van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
-    <van-collapse-item
+    <van-collapse-item title="{{ title3 }}" disabled>{{ content3 }}</van-collapse-item>
-      title="{{ title3 }}"
-      content-class="van-collapse-item__content"
-      disabled
-    >
-      {{ content3 }}
-    </van-collapse-item>
   </van-collapse>
 </demo-block>
 
 <demo-block title="手风琴">
   <van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange">
-    <van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
+    <van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
-    <van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
+    <van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
-    <van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
+    <van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
   </van-collapse>
 </demo-block>
 
 <demo-block title="自定义标题内容">
   <van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange">
-    <van-collapse-item content-class="van-collapse-item__content">
+    <van-collapse-item>
       <view slot="title">{{ title1 }}<van-icon name="question" custom-class="van-icon-question" /></view>
       {{ content1 }}
     </van-collapse-item>
     <van-collapse-item
       title="{{ title2 }}"
-      content-class="van-collapse-item__content"
+     
       value="内容"
       icon="shop"
     >{{ content2 }}</van-collapse-item>
-    <van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
+    <van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
   </van-collapse>
 </demo-block>

example/pages/collapse/index.wxss

@@ -1,9 +1,3 @@
-.van-collapse-item__content {
-  font-size: 13px;
-  line-height: 1.5;
-  color: #666;
-}
-
 .van-icon-question {
   margin-left: 5px;
   font-size: 15px !important;

example/pages/picker/index.js

@@ -0,0 +1,48 @@
+import Page from '../../common/page';
+import Toast from '../../dist/toast/toast';
+
+Page({
+  data: {
+    column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+    column2: [
+      { text: '杭州', disabled: true },
+      { text: '宁波' },
+      { text: '温州' }
+    ],
+    column3: {
+      浙江: ['杭州', { text: '宁波' }, { text: '温州', disabled: true }, '嘉兴', '湖州'],
+      福建: ['福州', '厦门', '莆田', '三明', '泉州']
+    },
+    column4: [
+      {
+        values: ['浙江', '福建'],
+        className: 'column1'
+      },
+      {
+        values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+        className: 'column2',
+        defaultIndex: 2
+      }
+    ]
+  },
+
+  onChange1(event) {
+    const { value, index } = event.detail;
+    Toast(`Value: ${value}, Index：${index}`);
+  },
+
+  onConfirm(event) {
+    const { value, index } = event.detail;
+    Toast(`Value: ${value}, Index：${index}`);
+  },
+
+  onCancel() {
+    Toast('取消');
+  },
+
+  onChange2(event) {
+    const { picker, value } = event.detail;
+    picker.setColumnValues(1, this.data.column3[value[0]]);
+    getApp().picker = picker;
+  }
+});

example/pages/picker/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Picker 选择器"
+}

example/pages/picker/index.wxml

@@ -0,0 +1,39 @@
+<demo-block title="基础用法">
+  <van-picker
+    columns="{{ column1 }}"
+    bind:change="onChange1"
+  />
+</demo-block>
+
+<demo-block title="禁用选项">
+  <van-picker
+    columns="{{ column2 }}"
+  />
+</demo-block>
+
+<demo-block title="展示顶部栏">
+  <van-picker
+    show-toolbar
+    title="标题"
+    columns="{{ column1 }}"
+    bind:change="onChange1"
+    bind:confirm="onConfirm"
+    bind:cancel="onCancel"
+  />
+</demo-block>
+
+<demo-block title="多列联动">
+  <van-picker
+    columns="{{ column4 }}"
+    bind:change="onChange2"
+  />
+</demo-block>
+
+<demo-block title="加载状态">
+  <van-picker
+    loading
+    columns="{{ column4 }}"
+  />
+</demo-block>
+
+<van-toast id="van-toast" />

example/pages/stepper/index.wxss

@@ -1 +1 @@
-/* pages/stepper/index.wxss */
+/* pages/stepper/index.wxss */

example/pages/switch/index.wxml

@@ -21,12 +21,27 @@
   />
 </demo-block>
 
-<demo-block title="高级用法" padding>
+<demo-block title="自定义大小" padding>
+  <van-switch
+    checked="{{ checked }}"
+    size="24px"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="自定义颜色" padding>
+  <van-switch
+    checked="{{ checked }}"
+    active-color="#4b0"
+    inactive-color="#f44"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="异步控制" padding>
   <van-switch
     checked="{{ checked2 }}"
     size="36px"
-    active-color="#4b0"
-    inactive-color="#f44"
     bind:change="onChange2"
   />
 </demo-block>

example/pages/tabbar/index.wxml

@@ -9,7 +9,7 @@
 
 <demo-block title="自定义图标">
   <van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
-    <van-tabbar-item>
+    <van-tabbar-item info="3">
       <span>自定义</span>
       <image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
       <image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />

example/pages/tag/index.wxml

@@ -30,7 +30,8 @@
   <van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
   <van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
   <van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
-  <van-tag color="#7232dd" plain>标签</van-tag>
+  <van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
+  <van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
 </demo-block>
 
 <demo-block title="标签大小" padding>

example/pages/tree-select/config.js

@@ -27,5 +27,13 @@ export default {
   }, {
     text: '苏州',
     id: 8
+  }],
+  pro3Name: '福建',
+  pro3: [{
+    text: '泉州',
+    id: 9
+  }, {
+    text: '厦门',
+    id: 10
   }]
 };

example/pages/tree-select/index.js

@@ -17,6 +17,10 @@ Page({
       }, {
         text: config.pro2Name,
         children: config.pro2
+      }, {
+        text: config.pro3Name,
+        disabled: true,
+        children: config.pro3
       }
     ],
     mainActiveIndex: 0,

example/pages/tree-select/index.wxml

@@ -5,5 +5,6 @@
     active-id="{{ activeId }}"
     bind:click-item="onClickItem"
     bind:click-nav="onClickNav"
+    content-item-class="content-item-class"
   ></van-tree-select>
 </demo-block>

example/pages/tree-select/index.wxss

@@ -1 +1 @@
-/* pages/tree-select/index.wxss */
+/* pages/tree-select/index.wxss */

packages/action-sheet/index.ts

@@ -1,6 +1,9 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 
 VantComponent({
+  mixins: [iphonex],
+
   props: {
     show: Boolean,
     title: String,
@@ -20,10 +23,6 @@ VantComponent({
     closeOnClickOverlay: {
       type: Boolean,
       value: true
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
     }
   },
 

packages/area/index.less

@@ -57,11 +57,10 @@
 
     &__item {
       padding: 0 5px;
-      color: @gray-dark;
+      color: @text-color;
 
       &--selected {
         font-weight: 500;
-        color: @text-color;
       }
 
       &--disabled {

packages/area/index.ts

@@ -33,13 +33,6 @@ VantComponent({
     columns: []
   },
 
-  computed: {
-    displayColumns() {
-      const { columns = [], columnsNum } = this.data;
-      return columns.slice(0, +columnsNum);
-    }
-  },
-
   watch: {
     value(value) {
       this.code = value;
@@ -68,7 +61,8 @@ VantComponent({
 
     onChange(event: Weapp.Event) {
       const { value } = event.detail;
-      const { pickerValue, displayColumns } = this.data;
+      const { pickerValue } = this.data;
+      const displayColumns = this.getDisplayColumns();
       const index = pickerValue.findIndex(
         (item, index) => item !== value[index]
       );
@@ -159,7 +153,8 @@ VantComponent({
     },
 
     getValues() {
-      const { displayColumns = [], pickerValue = [] } = this.data;
+      const { pickerValue = [] } = this.data;
+      const displayColumns = this.getDisplayColumns();
       return displayColumns
         .map((option, index) => option[pickerValue[index]])
         .filter(value => !!value);
@@ -201,6 +196,11 @@ VantComponent({
     reset() {
       this.code = '';
       this.setValues();
+    },
+
+    getDisplayColumns() {
+      const { columns = [], columnsNum } = this.data;
+      return columns.slice(0, +columnsNum);
     }
   }
 });

packages/area/index.wxml

@@ -17,7 +17,8 @@
     class="van-picker__columns"
   >
     <picker-view-column
-      wx:for="{{ displayColumns }}"
+      wx:if="{{ rowIndex < columnsNum }}"
+      wx:for="{{ columns }}"
       wx:for-item="row"
       wx:for-index="rowIndex"
       wx:key="rowIndex"

packages/badge/README.md

@@ -20,7 +20,7 @@
   <van-badge title="标签名称" />
   <van-badge title="标签名称" info="8" />
   <van-badge title="标签名称" info="99" />
-  <van-badge title="标签名称" info="199" />
+  <van-badge title="标签名称" info="99+" />
 </van-badge-group>
 ```
 

packages/badge/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
 }

packages/badge/index.less

@@ -36,20 +36,7 @@
     }
   }
 
-  &__info {
+  &__text {
-    position: absolute;
+    position: relative;
-    top: 4px;
-    right: 2px;
-    color: @white;
-    font-size: 12px;
-    font-weight: 500;
-    transform: scale(0.8);
-    text-align: center;
-    box-sizing: border-box;
-    padding: 0 6px;
-    min-width: 18px;
-    line-height: 18px;
-    border-radius: 9px;
-    background-color: @red;
   }
 }

packages/badge/index.ts

@@ -7,7 +7,7 @@ VantComponent({
   },
 
   props: {
-    info: Number,
+    info: null,
     title: String
   },
 

packages/badge/index.wxml

@@ -1,4 +1,10 @@
 <view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
-  <view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
+  <view class="van-badge__text">
-  {{ title }}
+    <van-info
+      wx:if="{{ info !== null }}"
+      info="{{ info }}"
+      custom-style="right: 4px"
+    />
+    {{ title }}
+  </view>
 </view>

packages/button/index.ts

@@ -24,21 +24,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    classes(): string {
-      const { type, size, block, plain, round, square, loading, disabled } = this.data;
-      return this.classNames('van-button', `van-button--${type}`, `van-button--${size}`, {
-        'van-button--block': block,
-        'van-button--round': round,
-        'van-button--plain': plain,
-        'van-button--square': square,
-        'van-button--loading': loading,
-        'van-button--disabled': disabled,
-        'van-button--unclickable': disabled || loading
-      });
-    }
-  },
-
   methods: {
     onClick() {
       if (!this.data.disabled && !this.data.loading) {

packages/button/index.wxml

@@ -1,7 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <button
   id="{{ id }}"
   lang="{{ lang }}"
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, unclickable: disabled || loading }]) }}"
   open-type="{{ openType }}"
   session-from="{{ sessionFrom }}"
   app-parameter="{{ appParameter }}"

packages/card/README.md

@@ -24,7 +24,8 @@
 ```
 
 #### 高级用法
-可以通过具名`slot`添加定制内容
+
+可以通过插槽添加定制内容
 
 ```html
 <van-card
@@ -47,7 +48,7 @@
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
 | thumb | 左侧图片 | `String` | - |
-| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | `String` | `scaleToFill` |
+| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | `String` | `aspectFit` |
 | title | 标题 | `String` | - |
 | desc | 描述 | `String` | - |
 | tag | 标签 | `String` | - |
@@ -58,7 +59,7 @@
 | currency | 货币符号 |  `String` | `¥` |
 | thumb-link | 点击左侧图片后的跳转链接 | `String` | - |
 | link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` |
-| lazy-load | 是否开启图片懒加载 | `String` | `false` |
+| lazy-load | 是否开启图片懒加载 | `Boolean` | `false` |
 
 ### Slot
 

packages/card/index.less

@@ -1,13 +1,14 @@
 @import '../common/style/var.less';
 
 .van-card {
-  box-sizing: border-box;
   position: relative;
-  height: 100px;
+  display: flex;
+  padding: 5px 15px;
   font-size: 12px;
   color: @text-color;
-  padding: 5px 15px 5px 115px;
   background: @background-color-light;
+  box-sizing: border-box;
+  flex-wrap: wrap;
 
   &--center {
     align-items: center;
@@ -15,11 +16,15 @@
   }
 
   &__thumb {
-    position: absolute;
+    position: relative;
-    top: 5px;
-    left: 15px;
     width: 90px;
     height: 90px;
+    margin-right: 10px;
+    flex: none;
+
+    &:empty {
+      display: none;
+    }
   }
 
   &__img {
@@ -27,49 +32,52 @@
     height: 100%;
   }
 
-  &,
   &__content {
-    display: flex;
+    position: relative;
-  }
+    height: 90px;
-
+    flex: 1;
-  &__content {
-    width: 100%;
   }
 
   &__title,
   &__desc {
-    line-height: 20px;
+    line-height: 17px;
     word-break: break-all;
   }
 
   &__title {
-    max-height: 40px;
+    max-height: 34px;
+    font-weight: bold;
   }
 
   &__desc {
-    max-height: 20px;
+    max-height: 17px;
     color: @gray-darker;
   }
 
-  &__left {
+  &__bottom {
-    flex: 1;
+    position: absolute;
-    min-width: 0; // hack for flex box ellipsis
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    line-height: 17px;
   }
 
-  &__right {
+  &__price {
-    flex: none;
+    display: inline-block;
-    padding-left: 10px;
+    font-weight: bold;
-    line-height: 20px;
+    color: @red;
-    text-align: right;
   }
 
   &__origin-price {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 10px;
     color: @gray-darker;
     text-decoration: line-through;
   }
 
   &__num {
-    color: @gray-darker;
+    float: right;
   }
 
   &__tag {
@@ -79,12 +87,8 @@
   }
 
   &__footer {
-    position: absolute;
+    width: 100%;
-    right: 15px;
+    text-align: right;
-    bottom: 5px;
+    flex: none;
-
-    .van-button {
-      margin-left: 5px;
-    }
   }
 }

packages/card/index.ts

@@ -26,7 +26,7 @@ VantComponent({
     originPrice: String,
     thumbMode: {
       type: String,
-      value: 'scaleToFill'
+      value: 'aspectFit'
     },
     currency: {
       type: String,

packages/card/index.wxml

@@ -7,7 +7,7 @@
       lazy-load="{{ lazyLoad }}"
       class="van-card__img thumb-class"
     />
-    <slot wx:else name="thumb" />
+    <slot name="thumb" />
     <van-tag
       wx:if="{{ tag }}"
       mark
@@ -19,16 +19,15 @@
   </view>
 
   <view class="van-card__content">
-    <view class="van-card__left">
+    <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
-      <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
+    <slot wx:else name="title" />
-      <slot wx:else name="title" />
 
-      <view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
+    <view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
-      <slot wx:else name="desc" />
+    <slot wx:else name="desc" />
 
-      <slot name="tags" />
+    <slot name="tags" />
-    </view>
+
-    <view class="van-card__right">
+    <view class="van-card__bottom">
       <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
       <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
       <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>

packages/cell/index.ts

@@ -30,24 +30,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    cellClass(): string {
-      const { data } = this;
-      return this.classNames('van-cell', {
-        'van-cell--center': data.center,
-        'van-cell--required': data.required,
-        'van-cell--borderless': !data.border,
-        'van-cell--clickable': data.isLink || data.clickable,
-        [`van-cell--${data.size}`]: data.size
-      });
-    },
-
-    titleStyle(): string {
-      const { titleWidth } = this.data;
-      return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : '';
-    }
-  },
-
   methods: {
     onClick(event: Weapp.Event) {
       this.$emit('click', event.detail);

packages/cell/index.wxml

@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="custom-class {{ cellClass }}"
+  class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}"
   style="{{ customStyle }}"
   bind:tap="onClick"
 >
@@ -12,7 +14,7 @@
   <slot wx:else name="icon" />
 
   <view
-    style="{{ titleStyle }}"
+    style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}"
     class="van-cell__title title-class"
   >
     <block wx:if="{{ title }}">

packages/checkbox-group/index.ts

@@ -16,9 +16,9 @@ VantComponent({
   },
 
   props: {
+    max: Number,
     value: Array,
-    disabled: Boolean,
+    disabled: Boolean
-    max: Number
   },
 
   watch: {

packages/checkbox/index.less

@@ -1,7 +1,5 @@
 @import '../common/style/var.less';
 
-@checkbox-size: 20px;
-
 .van-checkbox {
   overflow: hidden;
   user-select: none;
@@ -14,15 +12,15 @@
   }
 
   &__icon {
-    box-sizing: border-box;
     display: block;
+    font-size: 14px;
     width: @checkbox-size;
     height: @checkbox-size;
-    border: 1px solid @gray-light;
     color: transparent;
-    font-size: 14px;
     text-align: center;
-    transition: .2s;
+    box-sizing: border-box;
+    border: 1px solid @checkbox-border-color;
+    transition: @checkbox-transition-duration;
 
     &--round {
       border-radius: 100%;
@@ -30,28 +28,31 @@
 
     &--checked {
       color: @white;
-      border-color: @blue;
+      border-color: @checkbox-checked-icon-color;
-      background-color: @blue;
+      background-color: @checkbox-checked-icon-color;
     }
 
     &--disabled {
-      border-color: @border-color;
+      border-color: @checkbox-disabled-icon-color;
-      background-color: currentColor;
+      background-color: @checkbox-disabled-background-color;
-      color: @background-color;
     }
 
     &--disabled&--checked {
-      border-color: @border-color;
+      color: @checkbox-disabled-icon-color;
-      background-color: @border-color;
     }
   }
 
   &__label {
-    margin-left: 10px;
+    color: @checkbox-label-color;
+    margin-left: @checkbox-label-margin;
 
     &--left {
-      margin: 0 10px 0 0;
       float: left;
+      margin: 0 @checkbox-label-margin 0 0;
+    }
+
+    &--disabled {
+      color: @checkbox-disabled-label-color;
     }
 
     &:empty {

packages/checkbox/index.ts

@@ -23,28 +23,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    iconClass(): string {
-      const { disabled, value, shape } = this.data;
-      return this.classNames(
-        'van-checkbox__icon',
-        `van-checkbox__icon--${shape}`,
-        {
-          'van-checkbox__icon--disabled': disabled,
-          'van-checkbox__icon--checked': value
-        }
-      );
-    },
-
-    iconStyle(): string {
-      const { value, disabled, checkedColor } = this.data;
-      if (checkedColor && value && !disabled) {
-        return `border-color: ${checkedColor}; background-color: ${checkedColor}`;
-      }
-      return '';
-    }
-  },
-
   methods: {
     emitChange(value) {
       const parent = this.getRelationNodes('../checkbox-group/index')[0];

packages/checkbox/index.wxml

@@ -1,16 +1,18 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-checkbox custom-class">
   <view class="van-checkbox__icon-wrap" bindtap="toggle">
     <slot wx:if="{{ useIconSlot }}" name="icon" />
     <van-icon
       wx:else
       name="success"
-      class="{{ iconClass }}"
+      class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
-      style="{{ iconStyle }}"
+      style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
       custom-class="icon-class"
       custom-style="line-height: 20px;"
     />
   </view>
-  <view class="van-checkbox__label van-checkbox__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
+  <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
     <slot />
   </view>
 </view>

packages/col/index.ts

@@ -15,16 +15,6 @@ VantComponent({
     style: ''
   },
 
-  computed: {
-    classes(): string {
-      const { span, offset } = this.data;
-      return this.classNames('van-col', {
-        [`van-col--${span}`]: span,
-        [`van-col--offset-${offset}`]: offset
-      });
-    }
-  },
-
   methods: {
     setGutter(gutter: number) {
       const padding = `${gutter / 2}px`;

packages/col/index.wxml

@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
   style="{{ style }}"
 >
   <slot />

packages/collapse-item/index.less

@@ -4,7 +4,7 @@
   &__title {
     .van-cell__right-icon {
       transform: rotate(90deg);
-      transition: 0.3s;
+      transition: @collapse-item-transition-duration;
     }
 
     &--expanded {
@@ -14,12 +14,12 @@
     }
 
     &--disabled {
-      & .van-cell,
+      .van-cell,
-      & .van-cell__right-icon {
+      .van-cell__right-icon {
-        color: @gray !important;
+        color: @collapse-item-title-disabled-color !important;
       }
 
-      &:active {
+      .van-cell:active {
         background-color: @white !important;
       }
     }
@@ -28,11 +28,14 @@
   &__wrapper {
     overflow: hidden;
     will-change: max-height;
-    transition: max-height 0.3s ease-in-out;
+    transition: max-height @collapse-item-transition-duration ease-in-out;
   }
 
   &__content {
-    padding: 15px;
+    color: @collapse-item-content-text-color;
-    background-color: @white;
+    padding: @collapse-item-content-padding;
+    font-size: @collapse-item-content-font-size;
+    line-height: @collapse-item-content-line-height;
+    background-color: @collapse-item-content-background-color;
   }
 }

packages/collapse-item/index.ts

@@ -12,11 +12,11 @@ VantComponent({
   },
 
   props: {
-    name: [String, Number],
+    name: null,
+    title: null,
+    value: null,
     icon: String,
     label: String,
-    title: [String, Number],
-    value: [String, Number],
     disabled: Boolean,
     border: {
       type: Boolean,
@@ -33,16 +33,6 @@ VantComponent({
     expanded: false
   },
 
-  computed: {
-    titleClass() {
-      const { disabled, expanded } = this.data;
-      return this.classNames('van-collapse-item__title', {
-        'van-collapse-item__title--disabled': disabled,
-        'van-collapse-item__title--expanded': expanded
-      });
-    }
-  },
-
   methods: {
     updateExpanded() {
       if (!this.parent) {
@@ -68,11 +58,9 @@ VantComponent({
 
     updateStyle(expanded) {
       if (expanded) {
-        this.getRect('.van-collapse-item__content').then(res => {
+        this.set({
-          this.set({
+            contentHeight: 'auto'
-            contentHeight: res.height ? res.height + 'px' : null
           });
-        });
       } else {
         this.set({
           contentHeight: 0

packages/collapse-item/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-collapse-item van-hairline--top custom-class">
   <van-cell
     title="{{ title }}"
@@ -6,7 +8,7 @@
     value="{{ value }}"
     label="{{ label }}"
     border="{{ border && expanded }}"
-    class="{{ titleClass }}"
+    class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
     right-icon-class="van-cell__right-icon"
     custom-class="van-cell"
     bind:click="onClick"

packages/collapse/README.md

@@ -32,6 +32,11 @@
 Page({
   data: {
     activeNames: ['1']
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail
+    });
   }
 });
 ```
@@ -57,6 +62,11 @@ Page({
 Page({
   data: {
     activeName: '1'
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail
+    });
   }
 });
 ```
@@ -75,7 +85,18 @@ Page({
 </van-collapse>
 ```
 
-
+``` javascript
+Page({
+  data: {
+    activeName: ['1']
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail
+    });
+  }
+});
+```
 
 ### Collapse API
 

packages/common/class-names.ts

@@ -1,29 +0,0 @@
-const hasOwn = {}.hasOwnProperty;
-
-export function classNames(): string {
-  const classes = [];
-
-  for (let i = 0; i < arguments.length; i++) {
-    const arg = arguments[i];
-    if (!arg) continue;
-
-    const argType = typeof arg;
-
-    if (argType === 'string' || argType === 'number') {
-      classes.push(arg);
-    } else if (Array.isArray(arg) && arg.length) {
-      const inner = classNames.apply(null, arg);
-      if (inner) {
-        classes.push(inner);
-      }
-    } else if (argType === 'object') {
-      for (const key in arg) {
-        if (hasOwn.call(arg, key) && arg[key]) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-};

packages/common/style/var.less

@@ -37,11 +37,58 @@
 @button-bottom-action-primary-color: @white;
 @button-bottom-action-primary-background-color: @red;
 
+// Checkbox
+@checkbox-size: 20px;
+@checkbox-border-color: @gray-light;
+@checkbox-transition-duration: .2s;
+@checkbox-label-margin: 10px;
+@checkbox-label-color: @text-color;
+@checkbox-checked-icon-color: @blue;
+@checkbox-disabled-icon-color: @gray;
+@checkbox-disabled-label-color: @gray;
+@checkbox-disabled-background-color: @border-color;
+
+// Collapse
+@collapse-item-transition-duration: .3s;
+@collapse-item-content-padding: 15px;
+@collapse-item-content-font-size: 13px;
+@collapse-item-content-line-height: 1.5;
+@collapse-item-content-text-color: @gray-dark;
+@collapse-item-content-background-color: @white;
+@collapse-item-title-disabled-color: @gray;
+
+// Info
+@info-size: 16px;
+@info-color: @white;
+@info-padding: 0 3px;
+@info-font-size: 12px;
+@info-font-weight: 500;
+@info-border-width: 1px;
+@info-background-color: @red;
+@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+
 // Notify
 @notify-padding: 6px 15px;
 @notify-font-size: 14px;
 @notify-line-height: 20px;
 
+// Switch
+@switch-width: 2em;
+@switch-height: 1em;
+@switch-node-size: 1em;
+@switch-node-z-index: 1;
+@switch-node-background-color: @white;
+@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+@switch-background-color: @white;
+@switch-on-background-color: @blue;
+@switch-transition-duration: .3s;
+@switch-disabled-opacity: .4;
+@switch-border: 1px solid rgba(0, 0, 0, .1);
+
+// SwitchCell
+@switch-cell-padding-top: 9px;
+@switch-cell-padding-bottom: 9px;
+
 // Toast
 @toast-max-width: 70%;
 @toast-font-size: 14px;
@@ -49,7 +96,7 @@
 @toast-line-height: 20px;
 @toast-border-radius: 4px;
 @toast-background-color: rgba(0, 0, 0, .7);
-@toast-icon-size: 50px;
+@toast-icon-size: 48px;
 @toast-text-min-width: 96px;
 @toast-text-padding: 8px 12px;
 @toast-default-padding: 15px;

packages/common/utils.ts

@@ -11,8 +11,13 @@ function isNumber(value) {
   return /^\d+$/.test(value);
 }
 
+function range(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max);
+}
+
 export {
   isObj,
   isDef,
-  isNumber
+  isNumber,
+  range
 };

packages/common/utils.wxs

@@ -1,5 +0,0 @@
-function isSrc(url) {
-  return url.indexOf('http') === 0 || url.indexOf('data:image') === 0;
-}
-
-module.exports.isSrc = isSrc;

packages/datetime-picker/README.md

@@ -13,6 +13,8 @@
 
 #### 选择完整时间
 
+`value` 为时间戳
+
 ```html
 <van-datetime-picker
   type="datetime"
@@ -43,6 +45,8 @@ Page({
 
 #### 选择日期（年月日）
 
+`value` 为时间戳
+
 ```html
 <van-datetime-picker
   type="date"
@@ -69,6 +73,8 @@ Page({
 
 #### 选择日期（年月）
 
+`value` 为时间戳
+
 ```html
 <van-datetime-picker
   type="year-month"
@@ -95,6 +101,8 @@ Page({
 
 #### 选择时间
 
+`value` 为字符串
+
 ```html
 <van-datetime-picker
   type="time"
@@ -125,7 +133,8 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|------|------|------|
-| type | 类型，可选值为 `date` <br> `time` `year-month` | `String` | `datetime` |
+| value | 当前选中值 | `String | Number` | - |
+| type | 类型，可选值为 `date` `time` `year-month` <br> <strong>不建议动态修改</strong> | `String` | `datetime` |
 | min-date | 可选的最小时间，精确到分钟 | `Number` | 十年前 |
 | max-date | 可选的最大时间，精确到分钟 | `Number` | 十年后 |
 | min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` |

packages/dialog/README.md

@@ -39,6 +39,7 @@ Dialog.alert({
 ```
 
 #### 消息确认
+
 用于确认消息，包含取消和确认按钮
 
 ```javascript
@@ -127,6 +128,7 @@ Page({
 |-----------|-----------|-----------|-------------|
 | title | 标题 | `String` | - |
 | message | 内容 | `String` | - |
+| messageAlign | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
 | zIndex | z-index 层级 | `Number` | `100` |
 | selector | 自定义选择器 | `String` | `van-dialog` |
 | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
@@ -149,6 +151,7 @@ Page({
 | show | 是否显示弹窗 | `Boolean` | - |
 | title | 标题 | `String` | - |
 | message | 内容 | `String` | - |
+| message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
 | z-index | z-index 层级 | `Number` | `100` |
 | show-confirm-button | 是否展示确认按钮 | `Boolean` |  `true` |
 | show-cancel-button | 是否展示取消按钮 | `Boolean` |  `false` |

packages/dialog/dialog.ts

@@ -11,6 +11,7 @@ type DialogOptions = {
   selector?: string;
   transition?: string;
   asyncClose?: boolean;
+  messageAlign?: string;
   confirmButtonText?: string;
   cancelButtonText?: string;
   showConfirmButton?: boolean;
@@ -68,6 +69,7 @@ Dialog.defaultOptions = {
   zIndex: 100,
   overlay: true,
   asyncClose: false,
+  messageAlign: '',
   transition: 'scale',
   selector: '#van-dialog',
   confirmButtonText: '确认',

packages/dialog/index.less

@@ -23,12 +23,21 @@
     line-height: 1.5;
     max-height: 60vh;
     overflow-y: auto;
+    text-align: center;
     -webkit-overflow-scrolling: touch;
 
     &--has-title {
       padding-top: 12px;
       color: @gray-darker;
     }
+
+    &--left {
+      text-align: left;
+    }
+
+    &--right {
+      text-align: right;
+    }
   }
 
   &__footer {

packages/dialog/index.ts

@@ -10,6 +10,7 @@ VantComponent({
     message: String,
     useSlot: Boolean,
     asyncClose: Boolean,
+    messageAlign: String,
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,
     confirmButtonOpenType: String,
@@ -95,7 +96,9 @@ VantComponent({
         this.close();
       }
       this.$emit('close', action);
-      this.$emit(action);
+      
+      //把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
+      this.$emit(action, { dialog: this });
 
       const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];
       if (callback) {

packages/dialog/index.wxml

@@ -17,7 +17,7 @@
   <slot wx:if="{{ useSlot }}" />
   <view
     wx:elif="{{ message }}"
-    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }}"
+    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
   >
     <text>{{ message }}</text>
   </view>

packages/field/README.md

@@ -164,6 +164,7 @@ Page({
 | adjust-position | 键盘弹起时，是否自动上推页面 | `Boolean` | `true` |
 | use-icon-slot | 是否使用 icon slot  | `Boolean` | `false` |
 | use-button-slot | 是否使用 button slot  | `Boolean` | `false` |
+| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | `Boolean` | `true` |
 
 ### Event
 

packages/field/index.less

@@ -37,6 +37,10 @@
     &--right {
       text-align: right;
     }
+
+    &--error {
+      color: @red;
+    }
   }
 
   &__clear-root {
@@ -78,8 +82,4 @@
     font-size: 12px;
     text-align: left;
   }
-
-  &--error {
-    color: @red;
-  }
 }

packages/field/index.ts

@@ -29,6 +29,10 @@ VantComponent({
     customStyle: String,
     useIconSlot: Boolean,
     useButtonSlot: Boolean,
+    showConfirmBar: {
+      type: Boolean,
+      value: true
+    },
     placeholderStyle: String,
     adjustPosition: {
       type: Boolean,
@@ -60,18 +64,6 @@ VantComponent({
     showClear: false
   },
 
-  computed: {
-    inputClass(): string {
-      const { data } = this;
-      return this.classNames('input-class', 'van-field__input', {
-        'van-field--error': data.error,
-        'van-field__textarea': data.type === 'textarea',
-        'van-field__input--disabled': data.disabled,
-        [`van-field__input--${data.inputAlign}`]: data.inputAlign
-      });
-    }
-  },
-
   beforeCreate() {
     this.focused = false;
   },

packages/field/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-cell
   icon="{{ leftIcon }}"
   title="{{ label }}"
@@ -14,7 +16,7 @@
   <view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
     <textarea
       wx:if="{{ type === 'textarea' }}"
-      class="{{ inputClass }}"
+      class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
       fixed="{{ fixed }}"
       focus="{{ focus }}"
       value="{{ value }}"
@@ -23,9 +25,10 @@
       auto-height="{{ autosize }}"
       placeholder="{{ placeholder }}"
       placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ error ? 'van-field--error' : '' }}"
+      placeholder-class="{{ error ? 'van-field__input--error' : '' }}"
       cursor-spacing="{{ cursorSpacing }}"
       adjust-position="{{ adjustPosition }}"
+      show-confirm-bar="{{ showConfirmBar }}"
       bindinput="onInput"
       bind:blur="onBlur"
       bind:focus="onFocus"
@@ -33,7 +36,7 @@
     />
     <input
       wx:else
-      class="{{ inputClass }}"
+      class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
       type="{{ type }}"
       focus="{{ focus }}"
       value="{{ value }}"
@@ -41,7 +44,7 @@
       maxlength="{{ maxlength }}"
       placeholder="{{ placeholder }}"
       placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ error ? 'van-field--error' : '' }}"
+      placeholder-class="{{ error ? 'van-field__input--error' : '' }}"
       confirm-type="{{ confirmType }}"
       confirm-hold="{{ confirmHold }}"
       cursor-spacing="{{ cursorSpacing }}"

packages/goods-action/index.ts

@@ -1,19 +1,6 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 
 VantComponent({
-  props: {
+  mixins: [iphonex]
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
-    }
-  },
-
-  computed: {
-    rootClass() {
-      const { safeAreaInsetBottom, isIPhoneX } = this.data;
-      return this.classNames('van-goods-action', 'custom-class', {
-        [`van-goods-action--safe`]: isIPhoneX && safeAreaInsetBottom
-      });
-    }
-  }
 });

packages/goods-action/index.wxml

@@ -1,3 +1,5 @@
-<view class="{{ rootClass }}">
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('goods-action', { safe: isIPhoneX && safeAreaInsetBottom }) }}">
   <slot />
 </view>

packages/icon/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
 }

packages/icon/index.less

@@ -30,26 +30,6 @@
     }
   }
 
-  &__info {
-    position: absolute;
-    right: 0;
-    top: -8px;
-    color: @white;
-    font-size: 12px;
-    font-weight: 500;
-    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
-    text-align: center;
-    box-sizing: border-box;
-    padding: 0 3px;
-    min-width: 16px;
-    line-height: 14px;
-    border: 1px solid @white;
-    border-radius: 16px;
-    background-color: @red;
-    transform: translateX(50%);
-    transform-origin: 100%;
-  }
-
   &::before {
     display: inline-block;
   }

packages/icon/index.wxml

@@ -1,18 +1,16 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   class="custom-class {{ classPrefix }} {{ utils.isSrc(name) ? 'van-icon--image' : classPrefix + '-' + name }}"
   style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + size + ';' : '' }}{{ customStyle }}"
   bind:tap="onClick"
 >
-  <view
+  <van-info
     wx:if="{{ info !== null }}"
-    class="van-icon__info"
+    info="{{ info }}"
-  >
+  />
-    {{ info }}
-  </view>
   <image
     wx:if="{{ utils.isSrc(name) }}"
     src="{{ name }}"
   />
 </view>
-
-<wxs src="../common/utils.wxs" module="utils" />

packages/info/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/info/index.less

@@ -0,0 +1,21 @@
+@import '../common/style/var.less';
+
+.van-info {
+  position: absolute;
+  right: 0;
+  top: -@info-size / 2;
+  color: @info-color;
+  font-size: @info-font-size;
+  font-weight: @info-font-weight;
+  font-family: @info-font-family;
+  text-align: center;
+  box-sizing: border-box;
+  padding: @info-padding;
+  min-width: @info-size;
+  line-height: @info-size - @info-border-width * 2;
+  border: @info-border-width solid @white;
+  border-radius: @info-size;
+  background-color: @info-background-color;
+  transform: translateX(50%);
+  transform-origin: 100%;
+}

packages/info/index.ts

@@ -0,0 +1,8 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  props: {
+    info: null,
+    customStyle: String
+  }
+});

packages/info/index.wxml

@@ -0,0 +1,7 @@
+<view
+  wx:if="{{ info !== null }}"
+  class="custom-class van-info"
+  style="{{ customStyle }}"
+>
+  {{ info }}
+</view>

packages/mixins/basic.ts

@@ -1,24 +1,5 @@
-import { classNames } from '../common/class-names';
-
 export const basic = Behavior({
-  created() {
-    wx.getSystemInfo({
-      success: ({ model, screenHeight }) => {
-        const isIphoneX = /iphone x/i.test(model);
-        const isIphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
-
-        if (isIphoneX || isIphoneNew) {
-          this.set({
-            isIPhoneX: true
-          });
-        }
-      }
-    });
-  },
-
   methods: {
-    classNames,
-
     $emit() {
       this.triggerEvent.apply(this, arguments);
     },

packages/mixins/iphonex.ts

@@ -0,0 +1,34 @@
+let isIPhoneX = null;
+
+function getIsIPhoneX() {
+  return new Promise((resolve, reject) => {
+    if (isIPhoneX !== null) {
+      resolve(isIPhoneX);
+    } else {
+      wx.getSystemInfo({
+        success: ({ model, screenHeight }) => {
+          const iphoneX = /iphone x/i.test(model);
+          const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
+          isIPhoneX = iphoneX || iphoneNew;
+          resolve(isIPhoneX);
+        },
+        fail: reject
+      });
+    }
+  });
+}
+
+export const iphonex = Behavior({
+  properties: {
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  created() {
+    getIsIPhoneX().then(isIPhoneX => {
+      this.set({ isIPhoneX });
+    });
+  }
+});

packages/picker-column/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/picker-column/index.less

@@ -0,0 +1,21 @@
+@import '../common/style/var';
+
+.van-picker-column {
+  overflow: hidden;
+  font-size: 16px;
+  text-align: center;
+
+  &__item {
+    padding: 0 5px;
+    color: @gray-dark;
+
+    &--selected {
+      font-weight: 500;
+      color: @text-color;
+    }
+
+    &--disabled {
+      opacity: 0.3;
+    }
+  }
+}

packages/picker-column/index.ts

@@ -0,0 +1,160 @@
+import { VantComponent } from '../common/component';
+import { isObj, range } from '../common/utils';
+
+const DEFAULT_DURATION = 200;
+
+VantComponent({
+  classes: ['active-class'],
+
+  props: {
+    valueKey: String,
+    className: String,
+    itemHeight: Number,
+    visibleItemCount: Number,
+    initialOptions: {
+      type: Array,
+      value: []
+    },
+    defaultIndex: {
+      type: Number,
+      value: 0
+    }
+  },
+
+  data: {
+    startY: 0,
+    offset: 0,
+    duration: 0,
+    startOffset: 0,
+    options: [],
+    currentIndex: 0
+  },
+
+  created() {
+    const { defaultIndex, initialOptions } = this.data;
+    this.set({
+      currentIndex: defaultIndex,
+      options: initialOptions
+    });
+  },
+
+  computed: {
+    count() {
+      return this.data.options.length;
+    },
+
+    baseOffset() {
+      const { data } = this;
+      return (data.itemHeight * (data.visibleItemCount - 1)) / 2;
+    },
+
+    wrapperStyle() {
+      const { data } = this;
+      return [
+        `transition: ${data.duration}ms`,
+        `transform: translate3d(0, ${data.offset + data.baseOffset}px, 0)`,
+        `line-height: ${data.itemHeight}px`
+      ].join('; ');
+    }
+  },
+
+  watch: {
+    defaultIndex(value: number) {
+      this.setIndex(value);
+    }
+  },
+
+  methods: {
+    onTouchStart(event: Weapp.TouchEvent) {
+      this.set({
+        startY: event.touches[0].clientY,
+        startOffset: this.data.offset,
+        duration: 0
+      });
+    },
+
+    onTouchMove(event: Weapp.TouchEvent) {
+      const { data } = this;
+      const deltaY = event.touches[0].clientY - data.startY;
+      this.set({
+        offset: range(
+          data.startOffset + deltaY,
+          -(data.count * data.itemHeight),
+          data.itemHeight
+        )
+      });
+    },
+
+    onTouchEnd() {
+      const { data } = this;
+      if (data.offset !== data.startOffset) {
+        this.set({
+          duration: DEFAULT_DURATION
+        });
+        const index = range(
+          Math.round(-data.offset / data.itemHeight),
+          0,
+          data.count - 1
+        );
+        this.setIndex(index, true);
+      }
+    },
+
+    onClickItem(event: Weapp.Event) {
+      const { index } = event.currentTarget.dataset;
+      this.setIndex(index, true);
+    },
+
+    adjustIndex(index: number) {
+      const { data } = this;
+      index = range(index, 0, data.count);
+      for (let i = index; i < data.count; i++) {
+        if (!this.isDisabled(data.options[i])) return i;
+      }
+      for (let i = index - 1; i >= 0; i--) {
+        if (!this.isDisabled(data.options[i])) return i;
+      }
+    },
+
+    isDisabled(option: any) {
+      return isObj(option) && option.disabled;
+    },
+
+    getOptionText(option: any) {
+      const { data } = this;
+      return isObj(option) && data.valueKey in option
+        ? option[data.valueKey]
+        : option;
+    },
+
+    setIndex(index: number, userAction: boolean) {
+      const { data } = this;
+      index = this.adjustIndex(index) || 0;
+
+      this.set({
+        offset: -index * data.itemHeight
+      });
+
+      if (index !== data.currentIndex) {
+        this.set({
+          currentIndex: index
+        });
+        userAction && this.$emit('change', index);
+      }
+    },
+
+    setValue(value: string) {
+      const { options } = this.data;
+      for (let i = 0; i < options.length; i++) {
+        if (this.getOptionText(options[i]) === value) {
+          return this.setIndex(i);
+        }
+      }
+    },
+
+    getValue() {
+      const { data } = this;
+      return data.options[data.currentIndex];
+    }
+  }
+});

packages/picker-column/index.wxml

@@ -0,0 +1,31 @@
+<view
+  class="van-picker-column custom-class"
+  style="height: {{ itemHeight * visibleItemCount }}px"
+  bind:touchstart="onTouchStart"
+  catch:touchmove="onTouchMove"
+  bind:touchend="onTouchEnd"
+  bind:touchcancel="onTouchEnd"
+>
+  <view style="{{ wrapperStyle }}">
+    <view
+      wx:for="{{ options }}"
+      wx:for-item="option"
+      wx:key="index"
+      data-index="{{ index }}"
+      style="height: {{ itemHeight }}px"
+      class="van-ellipsis van-picker-column__item {{ option && option.disabled ? 'van-picker-column__item--disabled' : '' }} {{ index === currentIndex ? 'van-picker-column__item--selected active-class' : '' }}"
+      bindtap="onClickItem"
+    >{{ getOptionText(option, valueKey) }}</view>
+  </view>
+</view>
+
+<wxs module="getOptionText">
+function isObj(x) {
+  var type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+module.exports = function (option, valueKey) {
+  return isObj(option) && option[valueKey] ? option[valueKey] : option;
+}
+</wxs>

packages/picker/README.md

@@ -0,0 +1,185 @@
+## Picker 选择器
+选择器组件通常与 [弹出层](#/popup) 组件配合使用
+
+### 使用指南
+在 app.json 或 index.json 中引入组件
+```json
+"usingComponents": {
+  "van-picker": "path/to/vant-weapp/dist/picker/index"
+}
+```
+
+### 代码演示
+
+
+#### 基础用法
+
+```html
+<van-picker columns="{{ columns }}" bind:change="onChange" />
+```
+
+```javascript
+import Toast from 'path/to/vant-weapp/dist/toast/toast';
+
+Page({
+  data: {
+    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
+  },
+
+  onChange(event) {
+    const { picker, value, index } = event.detail;
+    Toast(`当前值：${value}, 当前索引：${index}`);
+  }
+});
+```
+
+#### 禁用选项
+选项可以为对象结构，通过设置 disabled 来禁用该选项
+
+```html
+<van-picker columns="{{ columns }}" />
+```
+
+```javascript
+Page({
+  data: {
+    columns: [
+      { text: '杭州', disabled: true },
+      { text: '宁波' },
+      { text: '温州' }
+    ]
+  }
+});
+```
+
+#### 展示顶部栏
+
+```html
+<van-picker
+  show-toolbar
+  title="标题"
+  columns="{{ columns }}"
+  bind:cancel="onCancel"
+  bind:confirm="onConfirm"
+/>
+```
+
+```javascript
+import Toast from 'path/to/vant-weapp/dist/toast/toast';
+
+Page({
+  data: {
+    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
+  },
+
+  onConfirm(event) {
+    const { picker, value, index } = event.detail;
+    Toast(`当前值：${value}, 当前索引：${index}`);
+  },
+
+  onCancel() {
+    Toast('取消');
+  }
+});
+```
+
+#### 多列联动
+
+```html
+<van-picker columns="{{ columns }}" bind:change="onChange" />
+```
+
+```javascript
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州']
+};
+
+Page({
+  data: {
+    columns: [
+      {
+        values: Object.keys(citys),
+        className: 'column1'
+      },
+      {
+        values: citys['浙江'],
+        className: 'column2',
+        defaultIndex: 2
+      }
+    ]
+  },
+
+  onChange(event) {
+    const { picker, value, index } = event.detail;
+    picker.setColumnValues(1, citys[values[0]]);
+  }
+});
+```
+
+#### 加载状态
+当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
+
+```html
+<van-picker columns="{{ columns }}" loading />
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - |
+| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
+| title | 顶部栏标题 | `String` | `''` | - |
+| loading | 是否显示加载状态 | `Boolean` | `false` | - |
+| value-key | 选项对象中，文字对应的 key | `String` | `text` | - |
+| item-height | 选项高度 | `Number` | `44` | - |
+| confirm-button-text | 确认按钮文字 | `String` | `确认` | - |
+| cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
+| visible-item-count | 可见的选项个数 | `Number` | `5` | - |
+
+### Event
+
+Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
+| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
+| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
+
+
+### Columns 数据结构
+
+当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
+
+| key | 说明 |
+|------|------|
+| values | 列中对应的备选值 |
+| defaultIndex | 初始选中项的索引，默认为 0 |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| active-class | 选中项样式类 |
+| toolbar-class | 顶部栏样式类 |
+| column-class | 列样式类 |
+
+### 方法
+
+通过 selectComponent 可以获取到 picker 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|------|------|------|------|
+| getValues | - | values | 获取所有列选中的值 |
+| setValues | values | - | 设置所有列选中的值 |
+| getIndexes | - | indexes | 获取所有列选中值对应的索引 |
+| setIndexes | indexes | - | 设置所有列选中值对应的索引 |
+| getColumnValue | columnIndex | value | 获取对应列选中的值 |
+| setColumnValue | columnIndex, value | - | 设置对应列选中的值 |
+| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 |
+| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 |
+| getColumnValues | columnIndex | values | 获取对应列中所有选项 |
+| setColumnValues | columnIndex, values | - | 设置对应列中所有选项 |

packages/picker/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "picker-column": "../picker-column/index",
+    "loading": "../loading/index"
+  }
+}

packages/picker/index.less

@@ -0,0 +1,67 @@
+@import '../common/style/var';
+
+.van-picker {
+  position: relative;
+  overflow: hidden;
+  -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
+  background-color: @white;
+  user-select: none;
+
+  &__toolbar {
+    display: flex;
+    height: 44px;
+    line-height: 44px;
+    justify-content: space-between;
+  }
+
+  &__cancel,
+  &__confirm {
+    padding: 0 15px;
+    font-size: 14px;
+    color: @blue;
+
+    &:active {
+      background-color: @active-color;
+    }
+  }
+
+  &__title {
+    max-width: 50%;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  &__columns {
+    position: relative;
+    display: flex;
+  }
+
+  &__column {
+    flex: 1;
+  }
+
+  &__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 4;
+    display: flex;
+    background-color: rgba(255, 255, 255, 0.9);
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__loading .van-loading,
+  &__frame {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+}

packages/picker/index.ts

@@ -0,0 +1,154 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  classes: ['active-class', 'toolbar-class', 'column-class'],
+
+  props: {
+    title: String,
+    loading: Boolean,
+    showToolbar: Boolean,
+    confirmButtonText: String,
+    cancelButtonText: String,
+    visibleItemCount: {
+      type: Number,
+      value: 5
+    },
+    valueKey: {
+      type: String,
+      value: 'text'
+    },
+    itemHeight: {
+      type: Number,
+      value: 44
+    },
+    columns: {
+      type: Array,
+      value: [],
+      observer(columns = []) {
+        this.set({
+          simple: columns.length && !columns[0].values
+        }, () => {
+          const children = this.children = this.selectAllComponents('.van-picker__column');
+
+          if (Array.isArray(children) && children.length) {
+            this.setColumns();
+          }
+        });
+      }
+    }
+  },
+
+  methods: {
+    noop() {},
+
+    setColumns() {
+      const { data } = this;
+      const columns = data.simple ? [{ values: data.columns }] : data.columns;
+      columns.forEach((columns, index: number) => {
+        this.setColumnValues(index, columns.values);
+      });
+    },
+
+    emit(event: Weapp.Event) {
+      const { type } = event.currentTarget.dataset;
+      if (this.data.simple) {
+        this.$emit(type, {
+          value: this.getColumnValue(0),
+          index: this.getColumnIndex(0)
+        });
+      } else {
+        this.$emit(type, {
+          value: this.getValues(),
+          index: this.getIndexes()
+        });
+      }
+    },
+
+    onChange(event: Weapp.Event) {
+      if (this.data.simple) {
+        this.$emit('change', {
+          picker: this,
+          value: this.getColumnValue(0),
+          index: this.getColumnIndex(0)
+        });
+      } else {
+        this.$emit('change', {
+          picker: this,
+          value: this.getValues(),
+          index: event.currentTarget.dataset.index
+        });
+      }
+    },
+
+    // get column instance by index
+    getColumn(index: number) {
+      return this.children[index];
+    },
+
+    // get column value by index
+    getColumnValue(index: number) {
+      const column = this.getColumn(index);
+      return column && column.getValue();
+    },
+
+    // set column value by index
+    setColumnValue(index: number, value: any) {
+      const column = this.getColumn(index);
+      column && column.setValue(value);
+    },
+
+    // get column option index by column index
+    getColumnIndex(columnIndex: number) {
+      return (this.getColumn(columnIndex) || {}).data.currentIndex;
+    },
+
+    // set column option index by column index
+    setColumnIndex(columnIndex: number, optionIndex: number) {
+      const column = this.getColumn(columnIndex);
+      column && column.setIndex(optionIndex);
+    },
+
+    // get options of column by index
+    getColumnValues(index: number) {
+      return (this.children[index] || {}).data.options;
+    },
+
+    // set options of column by index
+    setColumnValues(index: number, options: any[]) {
+      const column = this.children[index];
+
+      if (
+        column &&
+        JSON.stringify(column.data.options) !== JSON.stringify(options)
+      ) {
+        column.set({ options }, () => {
+          column.setIndex(0);
+        });
+      }
+    },
+
+    // get values of all columns
+    getValues() {
+      return this.children.map((child: Weapp.Component) => child.getValue());
+    },
+
+    // set values of all columns
+    setValues(values: []) {
+      values.forEach((value, index) => {
+        this.setColumnValue(index, value);
+      });
+    },
+
+    // get indexes of all columns
+    getIndexes() {
+      return this.children.map((child: Weapp.Component) => child.data.currentIndex);
+    },
+
+    // set indexes of all columns
+    setIndexes(indexes: number[]) {
+      indexes.forEach((optionIndex, columnIndex) => {
+        this.setColumnIndex(columnIndex, optionIndex);
+      });
+    }
+  }
+});

packages/picker/index.wxml

@@ -0,0 +1,41 @@
+<view class="van-picker custom-class">
+  <view
+    wx:if="{{ showToolbar }}"
+    class="van-picker__toolbar van-hairline--top-bottom toolbar-class"
+  >
+    <view class="van-picker__cancel" data-type="cancel" bindtap="emit">
+      {{ cancelButtonText || '取消' }}
+    </view>
+    <view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ title }}</view>
+    <view class="van-picker__confirm" data-type="confirm" bindtap="emit">
+      {{ confirmButtonText || '确认' }}
+    </view>
+  </view>
+  <view wx:if="{{ loading }}" class="van-picker__loading">
+    <loading color="#1989fa"/>
+  </view>
+  <view
+    class="van-picker__columns"
+    style="height: {{ itemHeight * visibleItemCount }}px"
+    catch:touchmove="noop"
+  >
+    <picker-column
+      class="van-picker__column"
+      wx:for="{{ simple ? [columns] : columns }}"
+      wx:key="index"
+      data-index="{{ index }}"
+      custom-class="column-class"
+      value-key="{{ valueKey }}"
+      initial-options="{{ simple ? item : item.values }}"
+      default-index="{{ item.defaultIndex }}"
+      item-height="{{ itemHeight }}"
+      visible-item-count="{{ visibleItemCount }}"
+      active-class="active-class"
+      bind:change="onChange"
+    />
+    <view
+      class="van-picker__frame van-hairline--top-bottom"
+      style="height: {{ itemHeight }}px"
+    />
+  </view>
+</view>

packages/popup/index.ts

@@ -1,8 +1,9 @@
 import { VantComponent } from '../common/component';
 import { transition } from '../mixins/transition';
+import { iphonex } from '../mixins/iphonex';
 
 VantComponent({
-  mixins: [transition(false)],
+  mixins: [transition(false), iphonex],
 
   props: {
     transition: String,
@@ -23,20 +24,6 @@ VantComponent({
     position: {
       type: String,
       value: 'center'
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
-    }
-  },
-
-  computed: {
-    popupClass() {
-      const { position, safeAreaInsetBottom, isIPhoneX } = this.data;
-      return this.classNames('custom-class', 'van-popup', {
-        [`van-popup--${position}`]: position,
-        [`van-popup--safe`]: isIPhoneX && safeAreaInsetBottom && position === 'bottom'
-      });
     }
   },
 

packages/popup/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-overlay
   wx:if="{{ inited && overlay }}"
   mask
@@ -8,7 +10,7 @@
 />
 <view
   wx:if="{{ inited }}"
-  class="{{ popupClass }}"
+  class="custom-class {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom && position === 'bottom' }]) }}"
   style="z-index: {{ zIndex }}; -webkit-animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; {{ display ? '' : 'display: none;' }}{{ customStyle }}"
   bind:animationend="onAnimationEnd"
 >

packages/radio/index.ts

@@ -19,17 +19,6 @@ VantComponent({
     checkedColor: String
   },
 
-  computed: {
-    iconClass(): string {
-      const { disabled, name, value } = this.data;
-      return this.classNames('van-radio__icon', {
-        'van-radio__icon--disabled': disabled,
-        'van-radio__icon--checked': !disabled && name === value,
-        'van-radio__icon--check': !disabled && name !== value
-      });
-    }
-  },
-
   methods: {
     emitChange(value) {
       const instance = this.getRelationNodes('../radio-group/index')[0] || this;

packages/radio/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-radio custom-class">
   <view class="van-radio__input">
     <radio-group bindchange="onChange">
@@ -9,7 +11,7 @@
       />
     </radio-group>
     <van-icon
-      class="{{ iconClass }}"
+      class="{{ utils.bem('radio__icon', { disabled, checked: !disabled && name === value, check: !disabled && name !== value }) }}"
       custom-class="icon-class"
       color="{{ value === name ? checkedColor : '' }}"
       name="{{ value === name ? 'checked' : 'check' }}"

packages/stepper/index.less

@@ -5,7 +5,7 @@
 
   &__minus,
   &__plus,
-  &__input {
+  &__input-wrapper {
     display: inline-block;
     vertical-align: middle;
     background-color: @white;
@@ -13,12 +13,12 @@
 
   &__minus,
   &__plus {
+    position: relative;
     width: 40px;
     height: 30px;
-    box-sizing: border-box;
-    border: 1px solid @border-color;
-    position: relative;
     padding: 5px;
+    border: 1px solid @border-color;
+    box-sizing: border-box;
 
     &::before {
       width: 9px;
@@ -32,14 +32,14 @@
 
     &::before,
     &::after {
-      content: '';
       position: absolute;
-      margin: auto;
       top: 0;
-      left: 0;
       right: 0;
       bottom: 0;
+      left: 0;
+      margin: auto;
       background-color: @gray-darker;
+      content: '';
     }
 
     &:active {
@@ -72,23 +72,32 @@
     border-radius: 0 2px 2px 0;
   }
 
-  &__input {
+  &__input-wrapper {
-    width: 33px;
+    position: relative;
-    height: 26px;
+    width: 35px;
+    height: 30px;
     padding: 1px;
-    min-height: 0; // reset wechat default min height
+    font-size: 14px;
+    color: @gray-darker;
+    text-align: center;
     border: 1px solid @border-color;
     border-width: 1px 0;
     border-radius: 0;
-    box-sizing: content-box;
+    box-sizing: border-box;
-    color: @gray-darker;
-    font-size: 14px;
-    text-align: center;
-    -webkit-appearance: none;
 
     &--disabled {
       color: @gray;
       background-color: @background-color;
     }
   }
+
+  &__input {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    min-height: 0; // reset wechat default min height
+    transform: translate3d(-50%, -50%, 0);
+    appearance: none;
+  }
 }

packages/stepper/index.ts

@@ -50,6 +50,10 @@ VantComponent({
     }
   },
 
+  data: {
+    focus: false
+  },
+
   created() {
     this.set({
       value: this.range(this.data.value)
@@ -57,6 +61,12 @@ VantComponent({
   },
 
   methods: {
+    onFocus() {
+      this.setData({
+        focus: true
+      });
+    },
+
     // limit value range
     range(value) {
       return Math.max(Math.min(this.data.max, value), this.data.min);

packages/stepper/index.wxml

@@ -3,14 +3,17 @@
     class="minus-class van-stepper__minus {{ minusDisabled ? 'van-stepper__minus--disabled' : '' }}"
     bind:tap="onMinus"
   />
-  <input
+  <view class="input-class van-stepper__input-wrapper {{ disabled || disableInput ? 'van-stepper__input-wrapper--disabled' : '' }}" bindtap="onFocus">
-    type="{{ integer ? 'number' : 'digit' }}"
+    <input
-    class="input-class van-stepper__input {{ disabled || disableInput ? 'van-stepper__input--disabled' : '' }}"
+      type="{{ integer ? 'number' : 'digit' }}"
-    value="{{ value }}"
+      class="van-stepper__input"
-    disabled="{{ disabled || disableInput }}"
+      value="{{ value }}"
-    bindinput="onInput"
+      focus="{{ focus }}"
-    bind:blur="onBlur"
+      disabled="{{ disabled || disableInput }}"
-  />
+      bindinput="onInput"
+      bind:blur="onBlur"
+    />
+  </view>
   <view
     class="plus-class van-stepper__plus {{ plusDisabled ? 'van-stepper__plus--disabled' : '' }}"
     bind:tap="onPlus"

packages/submit-bar/index.ts

@@ -1,6 +1,9 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 
 VantComponent({
+  mixins: [iphonex],
+
   classes: [
     'bar-class',
     'price-class',
@@ -22,10 +25,6 @@ VantComponent({
     buttonType: {
       type: String,
       value: 'danger'
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
     }
   },
 
@@ -41,13 +40,6 @@ VantComponent({
     tipStr() {
       const { tip } = this.data;
       return typeof tip === 'string' ? tip : '';
-    },
-
-    barClass() {
-      const { isIPhoneX, safeAreaInsetBottom } = this.data;
-      return this.classNames('van-submit-bar__bar', 'bar-class', {
-        'van-submit-bar__bar--safe': safeAreaInsetBottom && isIPhoneX
-      });
     }
   },
 

packages/submit-bar/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-submit-bar custom-class">
   <slot name="top" />
 
@@ -5,7 +7,7 @@
     {{ tipStr }}<slot name="tip" />
   </view>
 
-  <view class="{{ barClass }}">
+  <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
     <slot />
     <view class="van-submit-bar__text">
       <block wx:if="{{ hasPrice }}">

packages/switch-cell/README.md

@@ -66,7 +66,9 @@ Page({
 | title | 左侧标题 |  `String` | `''` |
 | loading | 是否为加载状态 |  `Boolean` | `false` |
 | disabled | 是否为禁用状态 |  `Boolean` | `false` |
-| size | 开关尺寸 | `String` | `26px` |
+| size | 开关尺寸 | `String` | `24px` |
+| active-color | 开关打开时的背景色 | `String` | `#1989fa` |
+| inactive-color | 开关关闭时的背景色 | `String` | `#fff` |
 
 ### Event
 

packages/switch-cell/index.less

@@ -1,8 +1,8 @@
 @import '../common/style/var.less';
 
 .van-switch-cell {
-  padding-top: 8px;
+  padding-top: @switch-cell-padding-top;
-  padding-bottom: 8px;
+  padding-bottom: @switch-cell-padding-bottom;
 
   &__switch {
     vertical-align: middle;

packages/switch-cell/index.ts

@@ -9,9 +9,11 @@ VantComponent({
     checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
     size: {
       type: String,
-      value: '26px'
+      value: '24px'
     }
   },
 

packages/switch-cell/index.wxml

@@ -9,6 +9,8 @@
     checked="{{ checked }}"
     loading="{{ loading }}"
     disabled="{{ disabled }}"
+    active-color="{{ activeColor }}"
+    inactive-color="{{ inactiveColor }}"
     custom-class="van-switch-cell__switch"
     bind:change="onChange"
   />

packages/switch/README.md

@@ -42,14 +42,27 @@ Page({
 <van-switch checked="{{ checked }}" loading />
 ```
 
-#### 高级用法
+#### 自定义大小
+
+```html
+<van-switch checked="{{ checked }}" size="24px" />
+```
+
+#### 自定义颜色
 
 ```html
 <van-switch
-  size="36px"
   checked="{{ checked }}"
   active-color="#4b0"
   inactive-color="#f44"
+/>
+```
+
+#### 异步控制
+
+```html
+<van-switch
+  checked="{{ checked }}"
   bind:change="onChange"
 />
 ```

packages/switch/index.less

@@ -1,27 +1,27 @@
 @import '../common/style/var.less';
 
 .van-switch {
-  height: 1em;
-  width: 1.8em;
   display: inline-block;
   position: relative;
-  border-radius: 1em;
+  width: @switch-width;
+  height: @switch-height;
+  border: @switch-border;
+  border-radius: @switch-node-size;
   box-sizing: content-box;
-  border: 1px solid rgba(0, 0, 0, .1);
+  background-color: @switch-background-color;
-  background-color: @white;
+  transition: background-color @switch-transition-duration;
-  transition: background-color .3s;
 
   &__node {
     top: 0;
     left: 0;
-    z-index: 1;
-    width: 1em;
-    height: 1em;
-    transition: .3s;
     position: absolute;
     border-radius: 100%;
-    background-color: @white;
+    width: @switch-node-size;
-    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+    height: @switch-node-size;
+    z-index: @switch-node-z-index;
+    transition: @switch-transition-duration;
+    box-shadow: @switch-node-box-shadow;
+    background-color: @switch-node-background-color;
   }
 
   &__loading {
@@ -31,14 +31,14 @@
   }
 
   &--on {
-    background-color: @blue;
+    background-color: @switch-on-background-color;
 
     .van-switch__node {
-      transform: translateX(.8em);
+      transform: translateX(@switch-width - @switch-node-size);
     }
   }
 
   &--disabled {
-    opacity: .4;
+    opacity: @switch-disabled-opacity;
   }
 }

packages/switch/index.ts

@@ -23,20 +23,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    classes(): string {
-      return this.classNames('van-switch', {
-        'van-switch--on': this.data.checked,
-        'van-switch--disabled': this.data.disabled
-      });
-    },
-
-    style() {
-      const backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
-      return `font-size: ${this.data.size}; ${ backgroundColor ? `background-color: ${backgroundColor}` : '' }`
-    }
-  },
-
   created() {
     this.set({ value: this.data.checked });
   },

packages/switch/index.wxml

@@ -1,6 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  style="{{ style }}"
+  class="custom-class {{ utils.bem('switch', { on: checked, disabled }) }}"
-  class="custom-class {{ classes }}"
+  style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">