[improvement] Switch: support form-field (#478)

dist/field/index.wxss

@@ -1 +1 @@
-.van-field__body{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items: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{-webkit-flex-shrink:0;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}
+.van-field__body{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items: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{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear,.van-field__icon-container{padding:0 10px;line-height:inherit;margin-right:-10px;vertical-align:middle}.van-field__clear{color:#c9c9c9}.van-field__icon-container{color:#999}.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}

dist/icon/index.js

@@ -10,7 +10,10 @@ Component({
     name: String,
     size: String,
     color: String,
-    classPrefix: String
+    classPrefix: {
+      type: String,
+      value: 'van-icon'
+    }
   },
 
   methods: {

dist/stepper/index.js

@@ -3,6 +3,8 @@
 const MAX = 2147483647;
 
 Component({
+  behaviors: ['wx://form-field'],
+
   options: {
     addGlobalClass: true
   },
@@ -15,14 +17,6 @@ Component({
   ],
 
   properties: {
-    value: {
-      type: null,
-      observer(val) {
-        if (val !== this.currentValue) {
-          this.setData({ currentValue: this.range(val) });
-        }
-      }
-    },
     integer: Boolean,
     disabled: Boolean,
     disableInput: Boolean,
@@ -42,7 +36,7 @@ Component({
 
   attached() {
     this.setData({
-      currentValue: this.range(this.data.value)
+      value: this.range(this.data.value)
     });
   },
 
@@ -64,14 +58,14 @@ Component({
       }
 
       const diff = type === 'minus' ? -this.data.step : +this.data.step;
-      const value = Math.round((this.data.currentValue + diff) * 100) / 100;
+      const value = Math.round((this.data.value + diff) * 100) / 100;
       this.triggerInput(this.range(value));
       this.triggerEvent(type);
     },
 
     onBlur(event) {
-      const currentValue = this.range(this.data.currentValue);
+      const value = this.range(this.data.value);
-      this.triggerInput(currentValue);
+      this.triggerInput(value);
       this.triggerEvent('blur', event);
     },
 
@@ -83,10 +77,9 @@ Component({
       this.onChange('plus');
     },
 
-    triggerInput(currentValue) {
+    triggerInput(value) {
-      this.setData({ currentValue });
+      this.setData({ value });
-      this.triggerEvent('input', currentValue);
+      this.triggerEvent('change', value);
-      this.triggerEvent('change', currentValue);
     }
   }
 });

dist/stepper/index.wxml

@@ -1,18 +1,18 @@
 <view class="van-stepper custom-class">
   <view
-    class="minus-class van-stepper__minus {{ disabled || currentValue <= min ? 'van-stepper__minus--disabled' : '' }}"
+    class="minus-class van-stepper__minus {{ disabled || value <= min ? 'van-stepper__minus--disabled' : '' }}"
     bind:tap="onMinus"
   />
   <input
     type="{{ integer ? 'number' : 'digit' }}"
     class="input-class van-stepper__input {{ disabled || disableInput ? 'van-stepper__input--disabled' : '' }}"
-    value="{{ currentValue }}"
+    value="{{ value }}"
     disabled="{{ disabled || disableInput }}"
     bindinput="onInput"
     bind:blur="onBlur"
   />
   <view
-    class="plus-class van-stepper__plus {{ disabled || currentValue >= max ? 'van-stepper__plus--disabled' : '' }}"
+    class="plus-class van-stepper__plus {{ disabled || value >= max ? 'van-stepper__plus--disabled' : '' }}"
     bind:tap="onPlus"
   />
 </view>

dist/switch/index.js

@@ -1,4 +1,6 @@
 Component({
+  behaviors: ['wx://form-field'],
+
   options: {
     addGlobalClass: true
   },
@@ -6,15 +8,24 @@ Component({
   externalClasses: ['custom-class', 'node-class'],
 
   properties: {
-    checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
+    checked: {
+      type: Boolean,
+      observer(value) {
+        this.setData({ value });
+      }
+    },
     size: {
       type: String,
       value: '30px'
     }
   },
 
+  attached() {
+    this.setData({ value: this.data.checked });
+  },
+
   methods: {
     onClick() {
       if (!this.data.disabled && !this.data.loading) {

packages/switch/README.md

@@ -71,6 +71,7 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
+| name | 在表单内提交时的标识符 | `String` | - |
 | checked | 开关选中状态 | `Boolean` | `false` |
 | loading | 是否为加载状态 | `Boolean` | `false` |
 | disabled | 是否为禁用状态 | `Boolean` | `false` |

packages/switch/index.js

@@ -1,4 +1,6 @@
 Component({
+  behaviors: ['wx://form-field'],
+
   options: {
     addGlobalClass: true
   },
@@ -6,15 +8,24 @@ Component({
   externalClasses: ['custom-class', 'node-class'],
 
   properties: {
-    checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
+    checked: {
+      type: Boolean,
+      observer(value) {
+        this.setData({ value });
+      }
+    },
     size: {
       type: String,
       value: '30px'
     }
   },
 
+  attached() {
+    this.setData({ value: this.data.checked });
+  },
+
   methods: {
     onClick() {
       if (!this.data.disabled && !this.data.loading) {