goodteditor-ui 1.0.78 → 1.0.80

package/package.json

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

package/src/components/ui/Datalist.vue

@@ -19,16 +19,20 @@
                     option,
                     index,
                     cursorIndex,
-                    setCursorIndex,
-                }"
-            >
-                <li
-                    :class="{ active: index == cursorIndex }"
-                    :key="index"
-                    @click="onOptionClick(option, index)"
-                >
+                    setCursorIndex
+                }">
+                <li :class="{ active: index == cursorIndex }" :key="index" @click="onOptionClick(option, index)">
                     <div class="text-truncate" style="min-height: calc(var(--line-height) * 1rem)">
-                        {{ option }}
+                        <slot
+                            name="option-label"
+                            v-bind="{
+                                option,
+                                index,
+                                cursorIndex,
+                                setCursorIndex
+                            }">
+                            {{ option }}
+                        </slot>
                     </div>
                 </li>
             </slot>
@@ -42,9 +46,11 @@
 <style lang="less" scoped>
 .dropdown {
     outline: none;
+
     ul {
         scroll-behavior: smooth;
     }
+
     &.no-scroll-animation {
         ul {
             scroll-behavior: auto;
@@ -64,7 +70,7 @@ export default {
             type: Array,
             default() {
                 return [];
-            },
+            }
         },
         /**
          * Defines the size of the component
@@ -75,22 +81,22 @@ export default {
             default: '',
             validator: function (value) {
                 return ['', 'small', 'large'].indexOf(value) >= 0;
-            },
+            }
         },
         /**
          * Defines the max-height of the dropdown list (value may be any css unit/expression)
          */
         maxHeight: {
             type: String,
-            default: '',
+            default: ''
         },
         /**
          * The current cursor index position (.sync)
          */
         cursorIndex: {
             type: Number,
-            default: -1,
-        },
+            default: -1
+        }
     },
     data() {
         return { useScrollAnimation: true };
@@ -102,7 +108,7 @@ export default {
             size && o.push(`dropdown-${this.size}`);
             !useScrollAnimation && o.push('no-scroll-animation');
             return o;
-        },
+        }
     },
     watch: {
         cursorIndex: {
@@ -114,8 +120,8 @@ export default {
                     this.useScrollAnimation = true;
                 });
             },
-            immediate: true,
-        },
+            immediate: true
+        }
     },
     methods: {
         onOptionClick(option, index) {
@@ -158,7 +164,7 @@ export default {
                  */
                 this.$emit('select-option', { option, index: this.cursorIndex });
             }
-        },
-    },
+        }
+    }
 };
 </script>

package/src/components/ui/InputAutocomplete.vue

@@ -4,8 +4,7 @@
         :class="cssClass"
         @focus="onRootFocus"
         tabindex="0"
-        :data-popover="popoverTargetId"
-    >
+        :data-popover="popoverTargetId">
         <div style="flex: 1 0 0">
             <!-- 
             @slot Custom input slot
@@ -21,8 +20,7 @@
                     type="text"
                     :value="value"
                     v-bind="inputBinds"
-                    v-on="inputEvents"
-                />
+                    v-on="inputEvents" />
             </slot>
         </div>
         <!-- 
@@ -39,8 +37,7 @@
                 @select-option="onDatalistSelectOption"
                 v-bind="{ size, maxHeight: dropdownMaxHeight, options: suggestedOptions }"
                 :cursorIndex.sync="dataListCursorIndex"
-                ref="datalist"
-            >
+                ref="datalist">
                 <template #header>
                     <!-- 
                     @slot Dropdown header content
@@ -71,9 +68,31 @@
                             valueLocal: delimitedValue,
                             cursorIndex,
                             selectOption,
-                            setCursorIndex,
-                        }"
-                    ></slot>
+                            setCursorIndex
+                        }"></slot>
+                </template>
+                <template #option-label="{ option, index, cursorIndex, setCursorIndex }">
+                    <!--
+                    @slot Dropdown option label
+                    @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 {Function} selectOption    function that select's the option
+                    @binding {Function} setCursorIndex  function that sets the cursor index
+                    -->
+                    <slot
+                        name="option-label"
+                        v-bind="{
+                            option: option,
+                            optionIndex: index,
+                            value,
+                            valueLocal: delimitedValue,
+                            cursorIndex,
+                            selectOption,
+                            setCursorIndex
+                        }"></slot>
                 </template>
                 <template #footer>
                     <slot name="dropdown-footer"></slot>
@@ -84,11 +103,7 @@
         @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 }"
-        >
+        <slot name="clear-btn" v-if="useClearBtn && value.length > 0" v-bind="{ clear: clearValue }">
             <i class="mdi mdi-close cursor-pointer" @click="clearValue"></i>
         </slot>
     </div>
@@ -97,6 +112,7 @@
 .ui-input-autocomplete {
     display: inline-flex;
     align-items: center;
+
     &-input {
         border: none;
         line-height: 1.5;
@@ -126,63 +142,71 @@ export default {
             type: Array,
             default() {
                 return [];
-            },
+            }
         },
         /**
          * Function which filters suggestions function(val, options):Promise<Array>
          */
         filter: {
             type: Function,
-            default: null,
+            default: null
         },
         /**
          * Filter debounce delay in ms
          */
         filterDebounce: {
             type: Number,
-            default: 0,
+            default: 0
         },
         /**
          * Value delimiter for multiple autocomplete suggestions
          */
         delimiter: {
             type: String,
-            default: ',',
+            default: ','
         },
         /**
          * Show suggestions on focus event
          */
         suggestOnFocus: {
             type: Boolean,
-            default: true,
+            default: true
         },
         /**
          * Min length to show suggestions
          */
         minLength: {
             type: Number,
-            default: 0,
+            default: 0
         },
         /**
          * Defines the dropdown's max-height
          */
         dropdownMaxHeight: {
-            default: '',
+            default: ''
         },
         /**
          * Auto width
          */
         autoWidth: {
             type: Boolean,
-            default: true,
+            default: true
         },
         /**
          * Clear data btn
          */
         useClearBtn: {
             type: Boolean,
-            default: false,
+            default: false
         },
+        /**
+         * Hide options popover on user input match
+         * single element suggested options list item value
+         */
+        hideOnMatch: {
+            type: Boolean,
+            default: false
+        }
     },
     data() {
         return {
@@ -193,16 +217,16 @@ export default {
             filterTID: null,
             inputBinds: {
                 placeholder: this.placeholder,
-                readonly: this.readonly,
+                readonly: this.readonly
             },
             inputEvents: {
                 change: this.onInputChange,
                 input: this.onInputInput,
                 keydown: this.onInputKeyDown,
                 focus: this.onInputFocus,
-                blur: this.onInputBlur,
+                blur: this.onInputBlur
             },
-            delimitedValuePrev: null,
+            delimitedValuePrev: null
         };
     },
     computed: {
@@ -220,7 +244,7 @@ export default {
                 return this.value.split(this.delimiter)[this.delimitedIndex];
             }
             return this.value;
-        },
+        }
     },
     methods: {
         clearValue() {
@@ -231,8 +255,8 @@ export default {
             this.suggestedOptions = [];
         },
         defaultFilter(val, options) {
-            return new Promise(resolve => {
-                let arr = options.filter(opt => opt.toLowerCase().indexOf(val.toLowerCase()) === 0);
+            return new Promise((resolve) => {
+                let arr = options.filter((opt) => opt.toLowerCase().indexOf(val.toLowerCase()) === 0);
                 resolve(arr);
             });
         },
@@ -250,9 +274,12 @@ export default {
             this.loading = true;
             let h = this.filter ? this.filter : this.defaultFilter;
             h(val, this.options)
-                .then(arr => {
+                .then((arr) => {
                     this.suggestedOptions = arr;
                     this.dataListCursorIndex = -1;
+                    if (this.hideOnMatch && arr.length === 1 && arr[0] === val) {
+                        this.popoverShow = false;
+                    }
                 })
                 .finally(() => (this.loading = false));
         },
@@ -368,7 +395,7 @@ export default {
         },
         onDatalistSelectOption({ option }) {
             this.selectOption(option);
-        },
-    },
+        }
+    }
 };
 </script>