Merge pull request #50 from Qvant-lab/qinputnumber_fix

[QInputNumber] fix null value, fix "-" value, add placeholder

src/qComponents/QInputNumber/QInputNumber.test.js

@@ -0,0 +1,23 @@
+import Component from './src/QInputNumber';
+
+describe('QInputNumber', () => {
+  it('should match snapshot', () => {
+    const { element } = shallowMount(Component);
+
+    expect(element).toMatchSnapshot();
+  });
+
+  it('should match snapshot without controls', () => {
+    const { element } = shallowMount(Component, {
+      propsData: {
+        controls: false
+      }
+    });
+
+    expect(element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});

src/qComponents/QInputNumber/__snapshots__/QInputNumber.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QInputNumber data should match snapshot 1`] = `
+Object {
+  "number": null,
+  "prevNumber": null,
+  "userNumber": null,
+}
+`;
+
+exports[`QInputNumber should match snapshot 1`] = `
+<div
+  class="q-input-number q-input-number_with-controls"
+>
+  <button
+    class="q-input-number__button_decrease q-input-number__button q-icon-minus"
+  />
+   
+  <q-input-stub
+    autocomplete="off"
+    class="q-input-number__input"
+    label=""
+    suffixicon=""
+    tabindex=""
+    type="number"
+    value=""
+  />
+   
+  <button
+    class="q-input-number__button_increase q-input-number__button q-icon-plus"
+  />
+</div>
+`;
+
+exports[`QInputNumber should match snapshot without controls 1`] = `
+<div
+  class="q-input-number"
+>
+  <!---->
+   
+  <q-input-stub
+    autocomplete="off"
+    class="q-input-number__input"
+    label=""
+    suffixicon=""
+    tabindex=""
+    type="number"
+    value=""
+  />
+   
+  <!---->
+</div>
+`;

src/qComponents/QInputNumber/src/QInputNumber.vue

@@ -15,10 +15,13 @@
       :value="currentValue"
       class="q-input-number__input"
       :disabled="isDisabled"
+      :placeholder="placeholder"
+      :validate-event="false"
+      type="number"
       @blur="handleBlur"
       @focus="handleFocus"
-      @input="handleInput"
-      @change="handleChange"
+      @input="handleChangeInput($event, 'input')"
+      @change="handleChangeInput($event, 'change')"
     />
 
     <button
@@ -39,6 +42,9 @@ export default {
   inject: {
     qForm: {
       default: null
+    },
+    qFormItem: {
+      default: null
     }
   },
 
@@ -88,6 +94,10 @@ export default {
       type: Boolean,
       default: true
     },
+    placeholder: {
+      type: String,
+      default: null
+    },
     value: {
       type: [Number, String],
       default: null,
@@ -96,13 +106,18 @@ export default {
 
         return false;
       }
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
     }
   },
 
   data() {
     return {
       number: null,
-      userNumber: null
+      userNumber: null,
+      prevNumber: null
     };
   },
 
@@ -150,50 +165,77 @@ export default {
       const updatedNumber = Math.round((this.number + this.step) * 100) / 100;
 
       if (updatedNumber > this.max) return;
-      this.changesEmmiter(updatedNumber);
+
+      this.userNumber = updatedNumber;
+      this.changesEmmiter(updatedNumber, 'change');
     },
 
     handleDecreaseClick() {
       const updatedNumber = Math.round((this.number - this.step) * 100) / 100;
 
       if (updatedNumber < this.min) return;
-      this.changesEmmiter(updatedNumber);
+
+      this.userNumber = updatedNumber;
+      this.changesEmmiter(updatedNumber, 'change');
     },
 
     handleBlur(event) {
       this.$emit('blur', event);
+      if (this.validateEvent) this.qFormItem?.validateField('blur');
     },
 
     handleFocus(event) {
       this.$emit('focus', event);
     },
 
-    handleInput(value) {
-      this.userNumber = value;
+    handleChangeInput(value, type) {
+      if (!value) {
+        this.userNumber = value;
+        this.changesEmmiter(null, type);
+        return;
+      }
+
+      this.processUserValue(value, type);
     },
 
-    handleChange(value) {
+    processUserValue(value, type) {
       const userValue = Number(value);
-
       this.userNumber = null;
 
-      if (
-        !value.length ||
-        Number.isNaN(userValue) ||
-        value > this.max ||
-        value < this.min
-      ) {
+      if (Number.isNaN(userValue) || value > this.max || value < this.min) {
+        return;
+      }
+
+      this.prevNumber = userValue;
+
+      if (type === 'change') {
+        this.changesEmmiter(userValue, type);
         return;
       }
 
-      this.changesEmmiter(userValue);
+      this.$emit('input', Number(userValue.toFixed(this.precision)));
+      if (this.validateEvent) this.qFormItem?.validateField('input');
     },
 
-    changesEmmiter(value) {
-      this.number = Number(value.toFixed(this.precision));
+    changesEmmiter(value, type) {
+      let passedData = null;
+
+      if (value) {
+        this.number = Number(value.toFixed(this.precision));
+        passedData = this.number;
+      }
+
+      this.prevNumber = passedData;
+
+      if (type === 'change') {
+        this.$emit('input', passedData);
+        this.$emit('change', passedData);
+        if (this.validateEvent) this.qFormItem?.validateField('change');
+        return;
+      }
 
-      this.$emit('input', this.number);
-      this.$emit('change', this.number);
+      this.$emit('input', passedData);
+      if (this.validateEvent) this.qFormItem?.validateField('input');
     }
   }
 };

stories/components/QInputNumber.stories.js

@@ -16,11 +16,22 @@ export const Default = (_, { argTypes }) => ({
   props: Object.keys(argTypes).filter(val => val !== 'value'),
   data() {
     return {
-      value: ''
+      value: 2
     };
   },
-  template: '<q-input-number v-bind="$props" v-model="value" />'
+  methods: {
+    handleEmit(value, type) {
+      console.log(value, type);
+    }
+  },
+  template: `
+    <q-input-number 
+      v-bind="$props" 
+      v-model="value"
+      @input="handleEmit($event, 'input')"
+      @change="handleEmit($event, 'change')"
+    />
+  `
 });
 
 Default.storyName = 'Default';
-Default.args = { value: 17 };