goodteditor-ui 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.15",
+    "version": "1.0.17",
     "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>

package/src/components/ui/Select.vue

@@ -10,7 +10,7 @@
         <div class="ui-select-label u-select-none">
             <template v-if="multiple">
                 <template v-if="optionsSelected.length">
-                    <!-- 
+                    <!--
                     @slot Label slot for multiple mode
                     @binding {Object} option                option
                     @binding {any} value                    option's value
@@ -41,7 +41,7 @@
                     </slot>
                 </template>
                 <div class="ui-select-placeholder events-none" v-else>
-                    <!-- 
+                    <!--
                     @slot Placeholder slot
                     -->
                     <slot name="placeholder">
@@ -51,7 +51,7 @@
             </template>
 
             <template v-else>
-                <!-- 
+                <!--
                 @slot Label slot for single mode
                 @binding {Object} option    option
                 @binding {any} value        option's value
@@ -69,7 +69,7 @@
                     {{ getOptionLabel(optionsSelected[0]) }}
                 </slot>
                 <div class="ui-select-placeholder events-none" v-else>
-                    <!-- 
+                    <!--
                     @slot Placeholder slot
                     -->
                     <slot name="placeholder">
@@ -78,7 +78,7 @@
                 </div>
             </template>
         </div>
-        <!-- 
+        <!--
         @slot Open state icon slot
         -->
         <slot name="icon-open" v-if="popoverShow">
@@ -86,7 +86,7 @@
                 <i class="mdi mdi-chevron-up"></i>
             </div>
         </slot>
-        <!-- 
+        <!--
         @slot Close state icon slot
         -->
         <slot name="icon-close" v-else>
@@ -105,13 +105,13 @@
                 ref="datalist"
             >
                 <template #header>
-                    <!-- 
+                    <!--
                     @slot Dropdown header slot
                     -->
                     <slot name="dropdown-header"></slot>
                 </template>
                 <template #option="{ option, index, cursorIndex }">
-                    <!-- 
+                    <!--
                     @slot Label slot for single mode
                     @binding {Object} option             option
                     @binding {any} value                 option's value
@@ -121,7 +121,7 @@
                     @binding {Number} cursorIndex        current cursor index
                     @binding {Function} selectOption     function that selects option
                     @binding {Function} deselectOption   function that deselects option
-                    @binding {Function} toggleOption     function that toggles option selection                
+                    @binding {Function} toggleOption     function that toggles option selection
                     @binding {Number} optionIndex           option's index
                     @binding {Boolean} isOptionSelected     option selection status
                     -->
@@ -148,6 +148,7 @@
                                 'bg-grey-lighter': index == cursorIndex,
                             }"
                             :key="index"
+                            :title="getOptionLabel(option)"
                             @click="toggleOption(option)"
                         >
                             <div class="row row-collapse" v-if="multiple">
@@ -174,7 +175,7 @@
                     </slot>
                 </template>
                 <template #footer>
-                    <!-- 
+                    <!--
                     @slot Dropdown footer slot
                     -->
                     <slot name="dropdown-footer"></slot>