[new feature] Stepper: update style

packages/common/style/var.less

@@ -111,3 +111,9 @@
 
 // Search
 @search-background-color: #f7f8fA;
+
+// Stepper
+@stepper-background-color: #f2f3f5;
+@stepper-button-disabled-color: #f7f8fa;
+@stepper-border-radius: 4px;
+@stepper-input-disabled-color: #f2f3f5;

packages/stepper/index.less

@@ -3,33 +3,17 @@
 .van-stepper {
   font-size: 0;
 
-  &__minus,
-  &__plus,
-  &__input-wrapper {
-    display: inline-block;
-    vertical-align: middle;
-    background-color: @white;
-  }
-
-  &__minus {
-    border-radius: 2px 0 0 2px;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  &__plus {
-    border-radius: 0 2px 2px 0;
-  }
-
   &__minus,
   &__plus {
     position: relative;
-    width: 40px;
+    display: inline-block;
-    height: 30px;
+    width: 28px;
+    height: 28px;
     padding: 5px;
-    border: 1px solid @border-color;
+    margin: 1px;
+    vertical-align: middle;
+    background-color: @stepper-background-color;
+    border: 0;
     box-sizing: border-box;
 
     &::before {
@@ -50,7 +34,7 @@
       bottom: 0;
       left: 0;
       margin: auto;
-      background-color: @gray-darker;
+      background-color: @text-color;
       content: '';
     }
 
@@ -59,7 +43,7 @@
     }
 
     &--disabled {
-      background-color: @background-color;
+      background-color: @stepper-button-disabled-color;
 
       &::before,
       &::after {
@@ -68,36 +52,42 @@
     }
 
     &--disabled&--hover {
-      background-color: @background-color;
+      background-color: @stepper-button-disabled-color;
     }
   }
 
-  &__input-wrapper {
+  &__minus {
-    position: relative;
+    border-radius: @stepper-border-radius 0 0 @stepper-border-radius;
-    width: 35px;
-    height: 30px;
-    padding: 1px;
-    font-size: 14px;
-    color: @gray-darker;
-    text-align: center;
-    border: 1px solid @border-color;
-    border-width: 1px 0;
-    border-radius: 0;
-    box-sizing: border-box;
 
-    &--disabled {
+    &::after {
-      color: @gray;
+      display: none;
-      background-color: @background-color;
     }
   }
 
+  &__plus {
+    border-radius: 0 @stepper-border-radius @stepper-border-radius 0;
+  }
+
   &__input {
-    position: absolute;
+    display: inline-block;
-    top: 50%;
+    width: 30px;
-    left: 50%;
+    height: 26px;
-    width: 100%;
+    padding: 1px;
-    min-height: 0; // reset wechat default min height
+    margin: 1px;
-    transform: translate3d(-50%, -50%, 0);
+    font-size: 14px;
-    appearance: none;
+    color: @text-color;
+    text-align: center;
+    vertical-align: middle;
+    background-color: @stepper-background-color;
+    border: 0;
+    border-width: 1px 0;
+    border-radius: 0;
+    box-sizing: content-box;
+    -webkit-appearance: none;
+
+    &--disabled {
+      color: @gray;
+      background-color: @stepper-input-disabled-color;
+    }
   }
 }

packages/stepper/index.ts

@@ -1,9 +1,5 @@
 import { VantComponent } from '../common/component';
 
-// Note that the bitwise operators and shift operators operate on 32-bit ints
-// so in that case, the max safe integer is 2^31-1, or 2147483647
-const MAX = 2147483647;
-
 VantComponent({
   field: true,
 
@@ -25,7 +21,7 @@ VantComponent({
     },
     max: {
       type: null,
-      value: MAX
+      value: Number.MAX_SAFE_INTEGER
     },
     step: {
       type: null,
@@ -45,10 +41,14 @@ VantComponent({
 
   watch: {
     value(value) {
-      if (value !== '') {
+      if (value === '') {
-        this.set({
+        return;
-          value: this.range(value)
+      }
-        });
+
+      const newValue = this.range(value);
+
+      if (typeof newValue === 'number' && value !== newValue) {
+        this.set({ value: newValue });
       }
     }
   },
@@ -64,12 +64,6 @@ VantComponent({
   },
 
   methods: {
-    onClickWrapper() {
-      if (!this.data.focus) {
-        this.setData({ focus: true });
-      }
-    },
-
     onFocus(event: Weapp.Event) {
       this.$emit('focus', event.detail);
     },

packages/stepper/index.wxml

@@ -1,24 +1,24 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-stepper custom-class">
   <view
-    class="minus-class van-stepper__minus {{ minusDisabled ? 'van-stepper__minus--disabled' : '' }}"
+    class="minus-class {{ utils.bem('stepper__minus', { disabled: minusDisabled }) }}"
     hover-class="van-stepper__minus--hover"
     hover-stay-time="70"
     bind:tap="onMinus"
   />
-  <view class="input-class van-stepper__input-wrapper {{ disabled || disableInput ? 'van-stepper__input-wrapper--disabled' : '' }}" bindtap="onClickWrapper">
+  <input
-    <input
+    type="{{ integer ? 'number' : 'digit' }}"
-      type="{{ integer ? 'number' : 'digit' }}"
+    class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
-      class="van-stepper__input"
+    value="{{ value }}"
-      value="{{ value }}"
+    focus="{{ focus }}"
-      focus="{{ focus }}"
+    disabled="{{ disabled || disableInput }}"
-      disabled="{{ disabled || disableInput }}"
+    bindinput="onInput"
-      bindinput="onInput"
+    bind:focus="onFocus"
-      bind:focus="onFocus"
+    bind:blur="onBlur"
-      bind:blur="onBlur"
+  />
-    />
-  </view>
   <view
-    class="plus-class van-stepper__plus {{ plusDisabled ? 'van-stepper__plus--disabled' : '' }}"
+    class="plus-class {{ utils.bem('stepper__plus', { disabled: plusDisabled }) }}"
     hover-class="van-stepper__plus--hover"
     hover-stay-time="70"
     bind:tap="onPlus"