@enso-ui/typeahead 3.0.11 → 3.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/typeahead",
-  "version": "3.0.11",
+  "version": "3.0.14",
   "description": "Vue Typeahead",
   "main": "index.js",
   "scripts": {
@@ -25,7 +25,7 @@
     "@enso-ui/dropdown": "^3.0",
     "@enso-ui/search-mode": "^3.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-solid-svg-icons": "^5.2.0",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "lodash": "^4.17.10",
     "vue": "^3.0"

package/src/bulma/EnsoTypeahead.vue

@@ -1,5 +1,5 @@
 <template>
-    <typeahead v-bind="$attrs"
+    <typeahead
         :http="http"
         :i18n="i18n"
         :source="source ? route(source) : null"

package/src/bulma/Typeahead.vue

@@ -1,9 +1,9 @@
 <template>
-    <core-typeahead v-bind="$attrs"
+    <core-typeahead
         ref="typeahead">
         <template #default="{
                 addTag, canAddTag, clearBindings, controlEvents, disabled,
-                invalidQuery, highlight, i18n, inputBindings, inputEvents,
+                invalidRegExp, highlight, i18n, inputBindings, inputEvents,
                 itemEvents, items, label, loading, minQueryLength,
                 modeSelector, modeBindings, modeEvents,
                 readonly, query, searchControl,
@@ -20,7 +20,7 @@
                             <input class="input is-fullwidth"
                                 :class="[
                                     { 'is-rounded': isRounded },
-                                    { 'is-danger': invalidQuery || hasError }
+                                    { 'is-danger': invalidRegExp || hasError }
                                 ]"
                                 v-bind="inputBindings"
                                 type="text"
@@ -71,9 +71,7 @@
                         :loading="loading"
                         :query="query"/>
                 </template>
-                <template #items
-                    :item-events="itemEvents"
-                    :highlight="highlight">
+                <template #items>
                     <dropdown-item v-for="(item, index) in items"
                         :key="index"
                         :selected="false"

package/src/renderless/CoreTypeahead.vue

@@ -6,15 +6,15 @@ export default {
     name: 'CoreTypeahead',
 
     props: {
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
         debounce: {
             type: Number,
             default: 250,
             validator: v => v > 0,
         },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
         errorHandler: {
             type: Function,
             default: error => {
@@ -59,9 +59,7 @@ export default {
         },
         regExp: {
             type: RegExp,
-            default() {
-                return /(.*?)/;
-            },
+            default:() => /(.*?)/,
         },
         searchControl: {
             type: Boolean,
@@ -95,21 +93,24 @@ export default {
         mode: v.searchMode,
         ongoingRequest: null,
         query: '',
-        waitingResponse: false,
     }),
 
     computed: {
         canAddTag() {
-            return this.taggable && !!this.query
-                && this.queryDoesntMatch && !this.waitingResponse;
+            return this.taggable && this.query !== ''
+                && !this.loading && this.queryHasNoResults;
         },
         invalidQuery() {
-            return this.query && !this.regExp.test(this.query);
+            return this.query.trim().length < this.minQueryLength
+                || this.invalidRegExp;
+        },
+        invalidRegExp() {
+            return !this.regExp.test(this.query);
         },
         modeSelector() {
             return this.searchModes.length > 1;
         },
-        queryDoesntMatch() {
+        queryHasNoResults() {
             return !this.items
                 .some(item => `${item[this.label]}`
                     .toLowerCase() === this.query.toLowerCase());
@@ -124,12 +125,6 @@ export default {
         },
     },
 
-    watch: {
-        query(query) {
-            this.waitingResponse = query !== '';
-        },
-    },
-
     created() {
         this.fetch = debounce(this.fetch, this.debounce);
     },
@@ -158,11 +153,6 @@ export default {
                 return;
             }
 
-            if (this.query.length < this.minQueryLength) {
-                this.items = [];
-                return;
-            }
-
             if (this.ongoingRequest) {
                 this.ongoingRequest.cancel();
             }
@@ -173,15 +163,9 @@ export default {
             this.http.get(this.source, {
                 params: this.requestParams,
                 cancelToken: this.ongoingRequest.token,
-            }).then(({ data }) => {
-                this.items = data;
-                this.loading = false;
-                this.waitingResponse = false;
-            }).catch(error => {
-                this.loading = false;
-                this.waitingResponse = false;
-                this.errorHandler(error);
-            });
+            }).then(({ data }) => (this.items = data))
+            .catch(this.errorHandler)
+            .finally(() => (this.loading = false));
         },
         highlight(item) {
             this.query.split(' ')
@@ -191,7 +175,7 @@ export default {
             return item;
         },
         search(item = null) {
-            if (this.query.length < this.minQueryLength) {
+            if (this.invalidQuery) {
                 return;
             }
 
@@ -200,6 +184,7 @@ export default {
             }
 
             this.$emit('search', { item, query: this.query });
+
             this.query = '';
         },
         select(index) {
@@ -222,7 +207,7 @@ export default {
                 click: this.search,
             },
             disabled: this.disabled,
-            invalidQuery: this.invalidQuery,
+            invalidRegExp: this.invalidRegExp,
             highlight: this.highlight,
             i18n: this.i18n,
             inputBindings: { value: this.query },