goodteditor-ui 1.0.80 → 1.0.82

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.80",
+    "version": "1.0.82",
     "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>
@@ -249,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) => {
@@ -320,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;

package/src/components/ui/Select.vue

@@ -374,6 +374,9 @@ export default {
         },
         options() {
             this.importModel(this.value);
+        },
+        popoverShow(isPopoverShown) {
+            this.$emit('options-toggle', isPopoverShown);
         }
     },
     methods: {