add null value, fix emitter, fix -

altai-ui · Jan 27, 2021 · a438ecf · a438ecf
1 parent f02a306
commit a438ecf
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 22 deletions.
diff --git a/src/qComponents/QInputNumber/src/QInputNumber.vue b/src/qComponents/QInputNumber/src/QInputNumber.vue
@@ -17,8 +17,8 @@
       :disabled="isDisabled"
       @blur="handleBlur"
       @focus="handleFocus"
-      @input="handleInput"
-      @change="handleChange"
+      @input="handleChangeInput($event, 'input')"
+      @change="handleChangeInput($event, 'change')"
     />
 
     <button
@@ -102,7 +102,8 @@ export default {
   data() {
     return {
       number: null,
-      userNumber: null
+      userNumber: null,
+      prevNumber: null
     };
   },
 
@@ -150,14 +151,18 @@ 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) {
@@ -168,32 +173,54 @@ export default {
       this.$emit('focus', event);
     },
 
-    handleInput(value) {
-      this.userNumber = value;
+    handleChangeInput(value, type) {
+      switch (value) {
+        case '-':
+          this.userNumber = type === 'change' ? this.prevNumber : value;
+          break;
+        case '':
+          this.userNumber = value;
+          this.changesEmmiter(null, type);
+          break;
+        default:
+          this.processUserValue(value, type);
+          break;
+      }
     },
 
-    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.changesEmmiter(userValue);
+      this.prevNumber = userValue;
+
+      if (type === 'change') {
+        this.changesEmmiter(userValue);
+        return;
+      }
+
+      this.$emit('input', Number(userValue.toFixed(this.precision)));
     },
 
-    changesEmmiter(value) {
-      this.number = Number(value.toFixed(this.precision));
+    changesEmmiter(value, type) {
+      let passedData = null;
+
+      if (value && value !== null) {
+        this.number = Number(value.toFixed(this.precision));
+        passedData = this.number;
+      }
+
+      if (type === 'change') {
+        this.$emit('input', passedData);
+        this.$emit('change', passedData);
+        return;
+      }
 
-      this.$emit('input', this.number);
-      this.$emit('change', this.number);
+      this.$emit('input', passedData);
     }
   }
 };

diff --git a/stories/components/QInputNumber.stories.js b/stories/components/QInputNumber.stories.js
@@ -16,10 +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($event, type) {
+      console.log($event, type);
+    }
+  },
+  template: `
+    <q-input-number 
+      v-bind="$props" 
+      v-model="value"
+      @input="handleEmit($event, 'input')"
+      @change="handleEmit($event, 'change')"
+    />
+  `
 });
 
 Default.storyName = 'Default';