add stepper test

src/packages/range/__test__/range.spec.js

@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils'
 import Range, {toRGBA} from '../range.vue';
-import Vue from 'vue';
 
 describe('Range.vue', () => {
 

src/packages/stepper/__test__/stepper.spec.js

@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Stepper from '../stepper.vue';
+
+describe('Stepper.vue', () => {
+    const wraper = shallowMount(Stepper, {
+        propsData: {
+            // v-model
+            value: 0
+        }
+    });
+
+    it('设置最大最小值', () => {
+        const minVal = '10';
+        const maxVal = '100';
+        wraper.setProps({
+            min: minVal,
+            max: maxVal
+        });
+        const input = wraper.find('input');
+        expect(wraper.contains('.nut-stepper-grey')).toBe(true);
+        expect(input.attributes('min')).toBe(minVal);
+        expect(input.attributes('max')).toBe(maxVal);
+    });
+
+    it('设置加减的步长', () => {
+        const stepVal = 10;
+
+        wraper.setProps({
+            step: stepVal
+        });
+        wraper.findAll('span').at(1).trigger('click');
+        const [min, max] = wraper.vm.animNum;
+        expect(max - min).toBe(stepVal);
+    });
+
+    it('设置只读属性', () => {
+        wraper.setProps({
+            readonly: true
+        });
+        expect(wraper.find('input').attributes('readonly')).toBe('readonly');
+    });
+    
+});

src/packages/stepper/demo.vue

@@ -4,7 +4,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper init="1"></nut-stepper>
+          <nut-stepper v-model="val1"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -12,7 +12,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper init="25" min="1" max="100"></nut-stepper>
+          <nut-stepper v-model="val2" :min="5" :max="100"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -20,7 +20,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper init="10" step="5"></nut-stepper>
+          <nut-stepper v-model="val3" :step="5"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -28,7 +28,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper readonly></nut-stepper>
+          <nut-stepper v-model="val4" readonly></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -36,7 +36,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper :simple="false"></nut-stepper>
+          <nut-stepper v-model="val5" :simple="false"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -44,7 +44,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper :transition="false" :simple="false"></nut-stepper>
+          <nut-stepper v-model="val6" :transition="false" :simple="false"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -53,6 +53,16 @@
 
 <script>
 export default {
+  data() {
+    return {
+      val1: 0,
+      val2: 12,
+      val3: 5,
+      val4: 0,
+      val5: 0,
+      val6: 0
+    }
+  },
 };
 </script>
 

src/packages/stepper/stepper.vue

@@ -5,7 +5,7 @@
             :class="{'nut-stepper-grey': num - step < min}"
             v-html="require('../../assets/svg/minus.svg')">
         </span>
-        <input type="number" v-model="num" @input="numchange" :min="min" :max="max" :readonly="readonly" :style="{visibility:showNum? 'visible': 'hidden'}" />
+        <input type="number" :value="num | maxv(min)" @input="numchange" :min="min" :max="max" :readonly="readonly" :style="{visibility:showNum? 'visible': 'hidden'}" />
         <div 
             :class="['nut-stepper-fake', showAddAnim? 'nut-stepper-transition': 'nut-stepper-none-transition']"
             :style="{
@@ -47,10 +47,6 @@ export default {
             type: Boolean,
             default: true,
         },
-        init: {
-            type: [Number, String],
-            default: 1,
-        },
         min: {
             type: [Number, String],
             default: 0,
@@ -70,21 +66,31 @@ export default {
         transition: {
             type: Boolean,
             default: true
+        },
+        value: {
+            type: [String, Number],
+            required: true
         }
     },
     data() {
         return {
-            num: this.init,
+            num: this.value,
             showNum: true,
             showAddAnim: false,
             showReduceAnim: false,
-            animNum: [this.init, this.init],
+            animNum: [this.value, this.value],
             animTranslate_add: 0,
             animTranslate_: -100
         }
     },
+    filters: {
+        maxv(v, min) {
+            return Math.max(v, min);
+        }
+    },
     methods: {
         numchange() {
+            this.$emit('input', this.num);
             this.$emit('change', this.num);
         },
         add() {
@@ -108,6 +114,7 @@ export default {
                 };
             }
             this.$emit('add', this.num);
+            this.$emit('input', this.num); 
             this.$emit('change', this.num); 
         },
         animEnd() {
@@ -134,6 +141,7 @@ export default {
                 }    
             }
             this.$emit('reduce', this.num);
+            this.$emit('input', this.num);
             this.$emit('change', this.num);
         },