fix emits

altai-ui · Mar 1, 2021 · a28e287 · cheesytim · Mar 1, 2021 · a28e287
1 parent f7279f6
commit a28e287
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/src/qComponents/QDatePicker/src/QDatePicker.vue b/src/qComponents/QDatePicker/src/QDatePicker.vue
@@ -87,7 +87,7 @@
 
 <script>
 import { createPopper } from '@popperjs/core';
-import { isEqual, isString } from 'lodash-es';
+import { isString } from 'lodash-es';
 import {
   formatISO,
   isDate,
@@ -150,6 +150,11 @@ export default {
     }
   },
 
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+
   props: {
     /**
      * one of sugested types
@@ -395,7 +400,6 @@ export default {
         this.createPopper();
       } else {
         this.destroyPopper();
-        this.emitChange(this.transformedValue);
         this.userInput = null;
         if (this.validateEvent) {
           this.qFormItem?.validateField('blur');
@@ -418,7 +422,6 @@ export default {
     handlePickClick(val, { hidePicker = true } = {}) {
       this.pickerVisible = !hidePicker;
       this.emitChange(val);
-      this.emitInput(val);
     },
 
     createPopper() {
@@ -555,10 +558,9 @@ export default {
               resultValue = value;
               break;
           }
-          this.emitInput(resultValue);
+          this.emitChange(resultValue);
         }
       } else {
-        this.emitInput(null);
         this.emitChange(null);
       }
       this.userInput = null;
@@ -568,8 +570,8 @@ export default {
       if (this.pickerDisabled) return;
       if (this.showClose) {
         event.stopPropagation();
-        this.emitInput(null);
         this.emitChange(null);
+        this.userInput = null;
         this.showClose = false;
       } else {
         this.pickerVisible = !this.pickerVisible;
@@ -613,22 +615,16 @@ export default {
     },
 
     emitChange(val) {
-      if (val !== this.value) {
-        this.$emit('change', val);
-        if (this.validateEvent) {
-          this.qFormItem?.validateField('change');
-        }
-      }
-    },
-
-    emitInput(val) {
       let formatted = val;
       if (this.outputFormat === 'iso' && val) {
         formatted = this.formatToISO(val);
       }
 
-      if (!isEqual(this.transformedValue, formatted)) {
-        this.$emit('input', formatted);
+      if (formatted !== this.value) {
+        this.$emit('change', formatted);
+        if (this.validateEvent) {
+          this.qFormItem?.validateField('change');
+        }
       }
     }
   }

diff --git a/src/qComponents/QDatePicker/src/styles/picker-panel.scss b/src/qComponents/QDatePicker/src/styles/picker-panel.scss
@@ -135,6 +135,7 @@
     height: 20px;
     padding: 0;
     font-size: 20px;
+    line-height: 21px;
     color: var(--color-primary-blue);
     background: var(--color-tertiary-gray-light);
     border: 0;

diff --git a/src/qComponents/mixins/pickers.js b/src/qComponents/mixins/pickers.js
@@ -38,7 +38,9 @@ export default {
         array.pop();
       }
 
-      this.userInput = array.join('');
+      const parsedInputValue = array.join('');
+      this.userInput = parsedInputValue;
+      this.$emit('input', parsedInputValue);
     }
   }
 };
diff --git a/stories/components/QDatePicker/Default.js b/stories/components/QDatePicker/Default.js
@@ -11,6 +11,12 @@ export default (_, { argTypes }) => ({
   methods: {
     handleRangePickClick(val) {
       console.log('handleRangePickClick', val);
+    },
+    handleChange(value) {
+      console.log('handleChange', value);
+    },
+    handleInput(value) {
+      console.log('handleInput', value);
     }
   },
   watch: {
@@ -74,6 +80,8 @@ export default (_, { argTypes }) => ({
         :range-separator="rangeSeparator"
         :validate-event="validateEvent"
         @rangepick="handleRangePickClick"
+        @input="handleInput"
+        @change="handleChange"
         :append-to-body="appendToBody"
       />`
 });