feat(Spinner): support precision & set value to 0 if value is null on…

… init, #195

components/spinner/demos/precision.md

@@ -0,0 +1,29 @@
+---
+title: 精度
+order: 1.1
+---
+
+给组件添加`precision`属性可以指定输入值的小数位数，当指定为`0`时，则只能输入整数
+
+```vdt
+import Spinner from 'kpc/components/spinner';
+
+<div>
+    <Spinner v-model="value1"
+        max={{ 10 }}
+        min={{ 0 }}
+        precision={{ 0 }}
+    />
+    <Spinner v-model="value2"
+        max={{ 10 }}
+        min={{ -10 }} 
+        step={{ 0.1 }}
+        precision={{ 1 }}
+    />
+</div>
+```
+
+```styl
+.k-spinner
+    margin-right 20px
+```

components/spinner/index.js

@@ -17,6 +17,7 @@ export default class Spinner extends Intact {
             step: 1,
             size: 'default',
             vertical: false,
+            precision: undefined,
 
             _value: 0,
         };
@@ -30,48 +31,49 @@ export default class Spinner extends Intact {
         step: Number,
         size: ['large', 'default', 'small', 'mini'],
         vertical: Boolean,
+        precision: Number,
     }
 
     _init() {
-        this.on('$receive:value', this._fixValue);
-        this.on('$change:_value', (c, val) => {
-            const {max, min} = this.get();
-            // if the _value is valid, then set it to value
-            if (numberReg.test(val)) {
-                val = Number(val);
-                if (val <= max && val >= min) {
-                    this.set('value', val);
-                }
-            }
+        ['max', 'min', 'precision'].forEach(item => {
+            this.on(`$receive:${item}`, () => this._fixValue());
+        })
+        this.on('$receive:value', (c, v) => {
+            this._fixValue(v);
         });
     }
 
-    _fixValue() {
-        let value = this.get('value');
-        if (value == null) {
-            const min = this.get('min');
-            if (min === Number.NEGATIVE_INFINITY) {
-                value = 0;
-            } else {
-                value = min;
-            }
+    _fixValue(value = this.get('value'), fallbackValue = 0) {
+        const {precision, max, min} = this.get();
+        const originValue = this.get('value');
+        if (value == null || !numberReg.test(value)) {
+            value = fallbackValue;
         }
-        this.set({
-            '_value': value,
-            'value': value,
-        });
+        value = Number(value);
+        if (value >= max) {
+            value = max;
+        } else if (value < min) {
+            value = min;
+        }
+
+        let _value = value;
+        if (precision != null) {
+            _value = value.toFixed(precision);
+        }
+
+        this.set({_value, value});
     }
 
     _increase(e) {
         const {_value, step} = this.get();
 
-        this.set('_value', Number((_value + step).toFixed(10)));
+        this._fixValue(Number((+_value + step).toFixed(10)));
     }
 
     _decrease(e) {
         const {_value, step} = this.get();
 
-        this.set('_value', Number((_value - step).toFixed(10)));
+        this._fixValue(Number((+_value - step).toFixed(10)));
     }
 
     _disableDecrease() {
@@ -87,21 +89,7 @@ export default class Spinner extends Intact {
     }
 
     _changeValue(e) {
-        let val = e.target.value.trim();
-
-        const {disabled, max, min, value} = this.get();
-
-        if (!numberReg.test(val) || disabled) {
-            this.set('_value', value);
-        } else {
-            val = Number(val);
-            if (val >= max) {
-                val = max;
-            } else if (val < min) {
-                val = min;
-            }
-            this.set('_value', val);
-        }
+        this._fixValue(e.target.value.trim(), this.get('value'));
     }
 }
 

components/spinner/index.spec.js

@@ -1,42 +1,71 @@
 import StepDemo from '~/components/spinner/demos/step';
+import PrecisionDemo from '~/components/spinner/demos/precision';
 import {mount, unmount, dispatchEvent} from 'test/utils';
 
 describe('Spinner', () => {
     let instance;
 
-    afterEach(() => {
-        unmount(instance);
-        instance = null
-    });
+    // afterEach(() => {
+        // unmount(instance);
+        // instance = null
+    // });
 
     it('step/max/min test', () => {
         instance = mount(StepDemo);
 
         const [prev, next] = instance.element.querySelectorAll('.k-btn');
+        const input = instance.element.querySelector('.k-inner');
         next.click();
         expect(instance.element.innerHTML).to.matchSnapshot();
+        expect(input.value).to.eql('1.2');
         prev.click();
         expect(instance.element.innerHTML).to.matchSnapshot();
+        expect(input.value).to.eql('0');
 
-        const input = instance.element.querySelector('.k-inner');
         input.value = '9.9';
         dispatchEvent(input, 'change');
         expect(instance.element.innerHTML).to.matchSnapshot();
+        expect(input.value).eql('9.9');
         prev.click();
         expect(instance.element.innerHTML).to.matchSnapshot();
+        expect(input.value).eql('8.7');
 
         input.value = '19.9';
         dispatchEvent(input, 'change');
         expect(instance.element.innerHTML).to.matchSnapshot();
-
-        input.value = '-10';
-        dispatchEvent(input, 'change');
-        expect(instance.element.innerHTML).to.matchSnapshot();
+        expect(input.value).eql('10');
 
         input.value = 'x19.9';
         // to make the _input eql 'x19.9', then lead change
         dispatchEvent(input, 'input');
         dispatchEvent(input, 'change');
         expect(instance.element.innerHTML).to.matchSnapshot();
+        expect(input.value).to.eql('10');
+
+        input.value = '-10';
+        dispatchEvent(input, 'change');
+        expect(instance.element.innerHTML).to.matchSnapshot();
+        expect(input.value).to.eql('0');
+    });
+
+    it('precision', () => {
+        instance = mount(PrecisionDemo);
+
+        expect(instance.element.innerHTML).to.matchSnapshot();
+
+        const [spinner1, spinner2] = instance.element.querySelectorAll('.k-spinner');
+        const input1 = spinner1.querySelector('.k-inner');
+        input1.value = '0.6';
+        dispatchEvent(input1, 'input');
+        dispatchEvent(input1, 'change');
+        expect(spinner1.innerHTML).to.matchSnapshot();
+        expect(input1.value).to.eql('1');
+
+        const input2 = spinner2.querySelector('.k-inner');
+        expect(input2.value).to.eql('0.0');
+        input2.value = '0.61';
+        dispatchEvent(input2, 'input');
+        dispatchEvent(input2, 'change');
+        expect(input2.value).to.eql('0.6');
     });
 });

components/tree/demos/custom.md

@@ -34,8 +34,6 @@ const data = self.get('data');
                 <Button icon size="small" ev-click={{ self._append.bind(self, node) }}>+</Button>
                 <Button icon size="small" ev-click={{ self._remove.bind(self, node) }}>-</Button>
             </ButtonGroup>
-            <div v-else-if={{ a }}>test</div>
-            <div v-else>aaa</div>
         </b:label>
     </Tree>
 </div>

test/demos.js

@@ -7,9 +7,9 @@ const vueReq = require.context('~/components/', true, /demos\/.*index\.vue$/);
 describe('Demos', () => {
     let demo;
 
-    afterEach(() => {
-        unmount(demo);
-    });
+    // afterEach(() => {
+        // unmount(demo);
+    // });
 
     describe('Intact', () => {
         testDemos(req, (Demo, done) => {