build: compile 1.1.0-beta.2

dist/stepper/index.js

@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { addUnit, isDef } from '../common/utils';
+import { isDef } from '../common/utils';
 const LONG_PRESS_START_TIME = 600;
 const LONG_PRESS_INTERVAL = 200;
 // add num and avoid float number
@@ -7,6 +7,9 @@ function add(num1, num2) {
     const cardinal = Math.pow(10, 10);
     return Math.round((num1 + num2) * cardinal) / cardinal;
 }
+function equal(value1, value2) {
+    return String(value1) === String(value2);
+}
 VantComponent({
     field: true,
     classes: ['input-class', 'plus-class', 'minus-class'],
@@ -14,47 +17,34 @@ VantComponent({
         value: {
             type: null,
             observer(value) {
-                if (value === '') {
+                if (!equal(value, this.data.currentValue)) {
-                    return;
+                    this.setData({ currentValue: this.format(value) });
                 }
-                const newValue = this.range(value);
-                if (typeof newValue === 'number' && +this.data.value !== newValue) {
-                    this.setData({ value: newValue });
-                }
-            },
-        },
-        integer: Boolean,
-        disabled: Boolean,
-        inputWidth: {
-            type: null,
-            observer() {
-                this.setData({
-                    inputStyle: this.computeInputStyle()
-                });
-            },
-        },
-        buttonSize: {
-            type: null,
-            observer() {
-                this.setData({
-                    inputStyle: this.computeInputStyle(),
-                    buttonStyle: this.computeButtonStyle()
-                });
             }
         },
+        integer: {
+            type: Boolean,
+            observer: 'check'
+        },
+        disabled: Boolean,
+        inputWidth: null,
+        buttonSize: null,
         asyncChange: Boolean,
         disableInput: Boolean,
         decimalLength: {
             type: Number,
-            value: null
+            value: null,
+            observer: 'check'
         },
         min: {
             type: null,
-            value: 1
+            value: 1,
+            observer: 'check'
         },
         max: {
             type: null,
-            value: Number.MAX_SAFE_INTEGER
+            value: Number.MAX_SAFE_INTEGER,
+            observer: 'check'
         },
         step: {
             type: null,
@@ -73,36 +63,52 @@ VantComponent({
         longPress: {
             type: Boolean,
             value: true
-        },
+        }
     },
     data: {
-        focus: false,
+        currentValue: ''
-        inputStyle: '',
-        buttonStyle: ''
     },
     created() {
         this.setData({
-            value: this.range(this.data.value)
+            currentValue: this.format(this.data.value)
         });
     },
     methods: {
+        check() {
+            const val = this.format(this.data.currentValue);
+            if (!equal(val, this.data.currentValue)) {
+                this.setData({ currentValue: val });
+            }
+        },
         isDisabled(type) {
             if (type === 'plus') {
-                return this.data.disabled || this.data.disablePlus || this.data.value >= this.data.max;
+                return (this.data.disabled ||
+                    this.data.disablePlus ||
+                    this.data.currentValue >= this.data.max);
             }
-            return this.data.disabled || this.data.disableMinus || this.data.value <= this.data.min;
+            return (this.data.disabled ||
+                this.data.disableMinus ||
+                this.data.currentValue <= this.data.min);
         },
         onFocus(event) {
             this.$emit('focus', event.detail);
         },
         onBlur(event) {
-            const value = this.range(this.data.value);
+            const value = this.format(event.detail.value);
-            this.triggerInput(value);
+            this.emitChange(value);
-            this.$emit('blur', event.detail);
+            this.$emit('blur', Object.assign(Object.assign({}, event.detail), { value }));
+        },
+        // filter illegal characters
+        filter(value) {
+            value = String(value).replace(/[^0-9.-]/g, '');
+            if (this.data.integer && value.indexOf('.') !== -1) {
+                value = value.split('.')[0];
+            }
+            return value;
         },
         // limit value range
-        range(value) {
+        format(value) {
-            value = String(value).replace(/[^0-9.-]/g, '');
+            value = this.filter(value);
             // format range
             value = value === '' ? 0 : +value;
             value = Math.max(Math.min(this.data.max, value), this.data.min);
@@ -114,7 +120,23 @@ VantComponent({
         },
         onInput(event) {
             const { value = '' } = event.detail || {};
-            this.triggerInput(value);
+            // allow input to be empty
+            if (value === '') {
+                return;
+            }
+            let formatted = this.filter(value);
+            // limit max decimal length
+            if (isDef(this.data.decimalLength) && formatted.indexOf('.') !== -1) {
+                const pair = formatted.split('.');
+                formatted = `${pair[0]}.${pair[1].slice(0, this.data.decimalLength)}`;
+            }
+            this.emitChange(formatted);
+        },
+        emitChange(value) {
+            if (!this.data.asyncChange) {
+                this.setData({ currentValue: value });
+            }
+            this.$emit('change', value);
         },
         onChange() {
             const { type } = this;
@@ -123,8 +145,8 @@ VantComponent({
                 return;
             }
             const diff = type === 'minus' ? -this.data.step : +this.data.step;
-            const value = add(+this.data.value, diff);
+            const value = this.format(add(+this.data.currentValue, diff));
-            this.triggerInput(this.range(value));
+            this.emitChange(value);
             this.$emit(type);
         },
         longPressStep() {
@@ -157,30 +179,6 @@ VantComponent({
                 return;
             }
             clearTimeout(this.longPressTimer);
-        },
-        triggerInput(value) {
-            this.setData({
-                value: this.data.asyncChange ? this.data.value : value
-            });
-            this.$emit('change', value);
-        },
-        computeInputStyle() {
-            let style = '';
-            if (this.data.inputWidth) {
-                style = `width: ${addUnit(this.data.inputWidth)};`;
-            }
-            if (this.data.buttonSize) {
-                style += `height: ${addUnit(this.data.buttonSize)};`;
-            }
-            return style;
-        },
-        computeButtonStyle() {
-            let style = '';
-            const size = addUnit(this.data.buttonSize);
-            if (this.data.buttonSize) {
-                style = `width: ${size};height: ${size};`;
-            }
-            return style;
         }
     }
 });

dist/stepper/index.wxml

@@ -4,8 +4,8 @@
   <view
     wx:if="{{ showMinus }}"
     data-type="minus"
-    style="{{ buttonStyle }}"
+    style="width: {{ utils.addUnit(buttonSize) }}; height: {{ utils.addUnit(buttonSize) }}"
-    class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || disableMinus || value <= min }) }}"
+    class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || disableMinus || currentValue <= min }) }}"
     hover-class="van-stepper__minus--hover"
     hover-stay-time="70"
     bind:tap="onTap"
@@ -15,8 +15,8 @@
   <input
     type="{{ integer ? 'number' : 'digit' }}"
     class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
-    style="{{ inputStyle }}"
+    style="width: {{ utils.addUnit(inputWidth) }}; height: {{ utils.addUnit(buttonSize) }}"
-    value="{{ value }}"
+    value="{{ currentValue }}"
     focus="{{ focus }}"
     disabled="{{ disabled || disableInput }}"
     bindinput="onInput"
@@ -26,8 +26,8 @@
   <view
     wx:if="{{ showPlus }}"
     data-type="plus"
-    style="{{ buttonStyle }}"
+    style="width: {{ utils.addUnit(buttonSize) }}; height: {{ utils.addUnit(buttonSize) }}"
-    class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || disablePlus || value >= max }) }}"
+    class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || disablePlus || currentValue >= max }) }}"
     hover-class="van-stepper__plus--hover"
     hover-stay-time="70"
     bind:tap="onTap"

lib/stepper/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var component_1 = require("../common/component");
 var utils_1 = require("../common/utils");
@@ -9,6 +20,9 @@ function add(num1, num2) {
     var cardinal = Math.pow(10, 10);
     return Math.round((num1 + num2) * cardinal) / cardinal;
 }
+function equal(value1, value2) {
+    return String(value1) === String(value2);
+}
 component_1.VantComponent({
     field: true,
     classes: ['input-class', 'plus-class', 'minus-class'],
@@ -16,47 +30,34 @@ component_1.VantComponent({
         value: {
             type: null,
             observer: function (value) {
-                if (value === '') {
+                if (!equal(value, this.data.currentValue)) {
-                    return;
+                    this.setData({ currentValue: this.format(value) });
                 }
-                var newValue = this.range(value);
-                if (typeof newValue === 'number' && +this.data.value !== newValue) {
-                    this.setData({ value: newValue });
-                }
-            },
-        },
-        integer: Boolean,
-        disabled: Boolean,
-        inputWidth: {
-            type: null,
-            observer: function () {
-                this.setData({
-                    inputStyle: this.computeInputStyle()
-                });
-            },
-        },
-        buttonSize: {
-            type: null,
-            observer: function () {
-                this.setData({
-                    inputStyle: this.computeInputStyle(),
-                    buttonStyle: this.computeButtonStyle()
-                });
             }
         },
+        integer: {
+            type: Boolean,
+            observer: 'check'
+        },
+        disabled: Boolean,
+        inputWidth: null,
+        buttonSize: null,
         asyncChange: Boolean,
         disableInput: Boolean,
         decimalLength: {
             type: Number,
-            value: null
+            value: null,
+            observer: 'check'
         },
         min: {
             type: null,
-            value: 1
+            value: 1,
+            observer: 'check'
         },
         max: {
             type: null,
-            value: Number.MAX_SAFE_INTEGER
+            value: Number.MAX_SAFE_INTEGER,
+            observer: 'check'
         },
         step: {
             type: null,
@@ -75,36 +76,52 @@ component_1.VantComponent({
         longPress: {
             type: Boolean,
             value: true
-        },
+        }
     },
     data: {
-        focus: false,
+        currentValue: ''
-        inputStyle: '',
-        buttonStyle: ''
     },
     created: function () {
         this.setData({
-            value: this.range(this.data.value)
+            currentValue: this.format(this.data.value)
         });
     },
     methods: {
+        check: function () {
+            var val = this.format(this.data.currentValue);
+            if (!equal(val, this.data.currentValue)) {
+                this.setData({ currentValue: val });
+            }
+        },
         isDisabled: function (type) {
             if (type === 'plus') {
-                return this.data.disabled || this.data.disablePlus || this.data.value >= this.data.max;
+                return (this.data.disabled ||
+                    this.data.disablePlus ||
+                    this.data.currentValue >= this.data.max);
             }
-            return this.data.disabled || this.data.disableMinus || this.data.value <= this.data.min;
+            return (this.data.disabled ||
+                this.data.disableMinus ||
+                this.data.currentValue <= this.data.min);
         },
         onFocus: function (event) {
             this.$emit('focus', event.detail);
         },
         onBlur: function (event) {
-            var value = this.range(this.data.value);
+            var value = this.format(event.detail.value);
-            this.triggerInput(value);
+            this.emitChange(value);
-            this.$emit('blur', event.detail);
+            this.$emit('blur', __assign(__assign({}, event.detail), { value: value }));
+        },
+        // filter illegal characters
+        filter: function (value) {
+            value = String(value).replace(/[^0-9.-]/g, '');
+            if (this.data.integer && value.indexOf('.') !== -1) {
+                value = value.split('.')[0];
+            }
+            return value;
         },
         // limit value range
-        range: function (value) {
+        format: function (value) {
-            value = String(value).replace(/[^0-9.-]/g, '');
+            value = this.filter(value);
             // format range
             value = value === '' ? 0 : +value;
             value = Math.max(Math.min(this.data.max, value), this.data.min);
@@ -116,7 +133,23 @@ component_1.VantComponent({
         },
         onInput: function (event) {
             var _a = (event.detail || {}).value, value = _a === void 0 ? '' : _a;
-            this.triggerInput(value);
+            // allow input to be empty
+            if (value === '') {
+                return;
+            }
+            var formatted = this.filter(value);
+            // limit max decimal length
+            if (utils_1.isDef(this.data.decimalLength) && formatted.indexOf('.') !== -1) {
+                var pair = formatted.split('.');
+                formatted = pair[0] + "." + pair[1].slice(0, this.data.decimalLength);
+            }
+            this.emitChange(formatted);
+        },
+        emitChange: function (value) {
+            if (!this.data.asyncChange) {
+                this.setData({ currentValue: value });
+            }
+            this.$emit('change', value);
         },
         onChange: function () {
             var type = this.type;
@@ -125,8 +158,8 @@ component_1.VantComponent({
                 return;
             }
             var diff = type === 'minus' ? -this.data.step : +this.data.step;
-            var value = add(+this.data.value, diff);
+            var value = this.format(add(+this.data.currentValue, diff));
-            this.triggerInput(this.range(value));
+            this.emitChange(value);
             this.$emit(type);
         },
         longPressStep: function () {
@@ -161,30 +194,6 @@ component_1.VantComponent({
                 return;
             }
             clearTimeout(this.longPressTimer);
-        },
-        triggerInput: function (value) {
-            this.setData({
-                value: this.data.asyncChange ? this.data.value : value
-            });
-            this.$emit('change', value);
-        },
-        computeInputStyle: function () {
-            var style = '';
-            if (this.data.inputWidth) {
-                style = "width: " + utils_1.addUnit(this.data.inputWidth) + ";";
-            }
-            if (this.data.buttonSize) {
-                style += "height: " + utils_1.addUnit(this.data.buttonSize) + ";";
-            }
-            return style;
-        },
-        computeButtonStyle: function () {
-            var style = '';
-            var size = utils_1.addUnit(this.data.buttonSize);
-            if (this.data.buttonSize) {
-                style = "width: " + size + ";height: " + size + ";";
-            }
-            return style;
         }
     }
 });

lib/stepper/index.wxml

@@ -4,8 +4,8 @@
   <view
     wx:if="{{ showMinus }}"
     data-type="minus"
-    style="{{ buttonStyle }}"
+    style="width: {{ utils.addUnit(buttonSize) }}; height: {{ utils.addUnit(buttonSize) }}"
-    class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || disableMinus || value <= min }) }}"
+    class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || disableMinus || currentValue <= min }) }}"
     hover-class="van-stepper__minus--hover"
     hover-stay-time="70"
     bind:tap="onTap"
@@ -15,8 +15,8 @@
   <input
     type="{{ integer ? 'number' : 'digit' }}"
     class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
-    style="{{ inputStyle }}"
+    style="width: {{ utils.addUnit(inputWidth) }}; height: {{ utils.addUnit(buttonSize) }}"
-    value="{{ value }}"
+    value="{{ currentValue }}"
     focus="{{ focus }}"
     disabled="{{ disabled || disableInput }}"
     bindinput="onInput"
@@ -26,8 +26,8 @@
   <view
     wx:if="{{ showPlus }}"
     data-type="plus"
-    style="{{ buttonStyle }}"
+    style="width: {{ utils.addUnit(buttonSize) }}; height: {{ utils.addUnit(buttonSize) }}"
-    class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || disablePlus || value >= max }) }}"
+    class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || disablePlus || currentValue >= max }) }}"
     hover-class="van-stepper__plus--hover"
     hover-stay-time="70"
     bind:tap="onTap"