goodteditor-ui 1.0.15 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.15",
+    "version": "1.0.16",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/InputDatePicker.vue

@@ -197,25 +197,30 @@ export default {
                 readonly: this.readonly || !this.editable,
             },
             inputEvents: {
+                input: this.onInputInput,
                 change: this.onInputChange,
                 focus: this.onInputFocus,
                 blur: this.onInputBlur,
             },
+            inputValue: '',
+            inputValueRaw: '',
         };
     },
     watch: {
         value: {
             handler(val) {
+                this.inputValueRaw = val;
+
                 if (this.isRange) {
-                    let d = Array.isArray(val) ? val.map(this.toDate) : [];
-                    let [s, e] = d;
+                    const d = Array.isArray(val) ? val.map(this.toDate) : [];
+                    const [s, e] = d;
                     if (s && e && isDateValid(s) && isDateValid(e) && s < e) {
                         this.date = d;
                     } else {
                         this.date = [];
                     }
                 } else {
-                    let d = this.toDate(val);
+                    const d = this.toDate(val);
                     this.date = isDateValid(d) ? d : null;
                 }
             },
@@ -256,47 +261,31 @@ export default {
             let input = this.getInputRef();
             input && input.focus();
         },
+        onInputInput({ target }) {
+            this.inputValueRaw = target.value;
+        },
         onInputChange(e) {
-            let val = e.target.value;
-            let data = null;
-
-            if (this.isRange) {
-                let d = val.split(this.delimiter).map(this.toDate);
-                let [s, e] = d;
-                data = isDateValid(s) && isDateValid(e) && s < e ? d.map(this.toValue) : [];
-            } else {
-                let d = this.toDate(val);
-                data = isDateValid(d) ? this.toValue(d) : '';
-            }
-            /**
-             * Input event
-             * @property {String|Array} value
-             */
-            this.$emit('input', data);
-            /**
-             * Change event
-             * @property {String|Array} value
-             */
-            this.$emit('change', data);
+            this.setDateFromString(e.target.value);
         },
         onInputFocus(e) {
             this.rootHasFocus = true;
         },
         onInputBlur(e) {
             this.rootHasFocus = false;
+            this.setDateFromString(this.inputValueRaw);
         },
         onDpChange(date) {
-            let data = Array.isArray(date) ? date.map(this.toValue) : this.toValue(date);
+            const model = Array.isArray(date) ? date.map(this.toValue) : this.toValue(date);
             /**
              * Input event
-             * @property {String} date
+             * @property {String|Array} value
              */
-            this.$emit('input', data);
+            this.$emit('input', model);
             /**
              * Change event
-             * @property {String} date
+             * @property {String|Array} value
              */
-            this.$emit('change', data);
+            this.$emit('change', model);
         },
         onDpSetDate(date) {
             /**
@@ -305,6 +294,33 @@ export default {
              */
             this.$emit('set-date', date);
         },
+        setDateFromString(value) {
+            if (value == this.inputValue) {
+                return;
+            }
+            this.inputValue = value;
+
+            let model = null;
+
+            if (this.isRange) {
+                const d = value.split(this.delimiter).map(this.toDate);
+                const [s, e] = d;
+                model = isDateValid(s) && isDateValid(e) && s < e ? d.map(this.toValue) : [];
+            } else {
+                const d = this.toDate(value);
+                model = isDateValid(d) ? this.toValue(d) : '';
+            }
+            /**
+             * Input event
+             * @property {String|Array} value
+             */
+            this.$emit('input', model);
+            /**
+             * Change event
+             * @property {String|Array} value
+             */
+            this.$emit('change', model);
+        },
     },
 };
 </script>