goodteditor-ui 1.0.79 → 1.0.81

package/package.json

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

package/src/components/ui/InputAutocomplete.vue

@@ -5,8 +5,8 @@
         @focus="onRootFocus"
         tabindex="0"
         :data-popover="popoverTargetId">
-        <div style="flex: 1 0 0">
-            <!-- 
+        <div class="ui-input-autocomplete-input-wrapper text-truncate" :style="{ '--use-clear-btn': useClearBtn ? '1rem' : '0' }">
+            <!--
             @slot Custom input slot
             @binding {String} id    input id attribute value
             @binding {String} value    input value
@@ -23,7 +23,7 @@
                     v-on="inputEvents" />
             </slot>
         </div>
-        <!-- 
+        <!--
         @slot Loading custom content
         -->
         <slot name="loading" v-if="loading">
@@ -39,23 +39,23 @@
                 :cursorIndex.sync="dataListCursorIndex"
                 ref="datalist">
                 <template #header>
-                    <!-- 
+                    <!--
                     @slot Dropdown header content
                     -->
                     <slot name="dropdown-header"></slot>
-                    <!-- 
+                    <!--
                     @slot No results content
                     -->
                     <slot name="noresults" v-if="!loading && !suggestedOptions.length"></slot>
                 </template>
                 <template #option="{ option, index, cursorIndex, setCursorIndex }">
-                    <!-- 
+                    <!--
                     @slot Dropdown option
                     @binding {String} option         option label
                     @binding {Number} optionIndex    option index
                     @binding {String} value          current value
                     @binding {String} valueLocal     current delimited value
-                    @binding {Number} cursorIndex    current dropdown selection index 
+                    @binding {Number} cursorIndex    current dropdown selection index
                     @binding {Function} selectOption    function that select's the option
                     @binding {Function} setCursorIndex  function that sets the cursor index
                     -->
@@ -99,12 +99,12 @@
                 </template>
             </ui-datalist>
         </ui-popover>
-        <!-- 
+        <!--
         @slot Custom clear btn slot
         @binding {Function} clear   function that clears the value
         -->
         <slot name="clear-btn" v-if="useClearBtn && value.length > 0" v-bind="{ clear: clearValue }">
-            <i class="mdi mdi-close cursor-pointer" @click="clearValue"></i>
+            <i class="mdi mdi-close cursor-pointer mar-left-2" @click="clearValue"></i>
         </slot>
     </div>
 </template>
@@ -112,6 +112,7 @@
 .ui-input-autocomplete {
     display: inline-flex;
     align-items: center;
+    --use-clear-btn: 0;
 
     &-input {
         border: none;
@@ -122,6 +123,11 @@
         background: transparent;
         outline: none;
     }
+
+    &-input-wrapper {
+        flex: 1 0 0;
+        max-width: calc(100% - var(--use-clear-btn));
+    }
 }
 </style>
 <script>
@@ -198,6 +204,14 @@ export default {
         useClearBtn: {
             type: Boolean,
             default: false
+        },
+        /**
+         * Hide options popover on user input match
+         * single element suggested options list item value
+         */
+        hideOnMatch: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -241,10 +255,14 @@ export default {
     methods: {
         clearValue() {
             this.$emit('input', '');
+            this.$emit('change', '');
             this.caretIndex = 0;
             this.delimitedValuePrev = null;
             this.filterTID = null;
-            this.suggestedOptions = [];
+            this.suggestedOptions = this.options;
+            if (this.suggestedOptions.length > 0) {
+                this.popoverShow = true;
+            }
         },
         defaultFilter(val, options) {
             return new Promise((resolve) => {
@@ -269,6 +287,9 @@ export default {
                 .then((arr) => {
                     this.suggestedOptions = arr;
                     this.dataListCursorIndex = -1;
+                    if (this.hideOnMatch && arr.length === 1 && arr[0] === val) {
+                        this.popoverShow = false;
+                    }
                 })
                 .finally(() => (this.loading = false));
         },
@@ -309,12 +330,14 @@ export default {
             input && input.focus();
         },
         onInputBlur(e) {
-            this.rootHasFocus = false;
-            /**
-             * Blur event reemit
-             * @property {Event} event
-             */
-            this.$emit('blur', e);
+            if (this.popoverShow === false || this.value === '') {
+                this.rootHasFocus = false;
+                /**
+                 * Blur event reemit
+                 * @property {Event} event
+                 */
+                this.$emit('blur', e);
+            }
         },
         onInputFocus(e) {
             this.rootHasFocus = true;