@enso-ui/typeahead 3.0.13 → 4.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 laravel-enso
+Copyright (c) 2026 laravel-enso
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -28,4 +28,4 @@ Thank you to all the people who already contributed to Enso!
 
 ## License
 
-[ISC](https://opensource.org/licenses/ISC)
+[MIT](https://opensource.org/licenses/MIT)

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@enso-ui/typeahead",
-  "version": "3.0.13",
+  "version": "4.0.0",
   "description": "Vue Typeahead",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enso-ui/typeahead.git"
@@ -16,7 +13,7 @@
     "vue"
   ],
   "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/enso-ui/typeahead/issues"
   },
@@ -24,21 +21,10 @@
   "dependencies": {
     "@enso-ui/dropdown": "^3.0",
     "@enso-ui/search-mode": "^3.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "3.1.3",
     "lodash": "^4.17.10",
     "vue": "^3.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "autoprefixer": "^9.6.1",
-    "babel-eslint": "^10.0.1",
-    "cross-env": "^6.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-vue": "^8.0.0"
   }
 }

package/src/bulma/Typeahead.vue

@@ -3,7 +3,7 @@
         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,
@@ -14,13 +14,13 @@
                 :disable-controls="items.length === 0"
                 manual>
                 <template #trigger="{ show, hide, selection }">
-                    <div class="field has-addons has-addons-right">
+                    <div class="field has-addons has-addons-right mt-0">
                         <div class="control is-expanded has-icons-left has-icons-right"
                             :class="{ 'is-loading': loading }">
                             <input class="input is-fullwidth"
                                 :class="[
                                     { 'is-rounded': isRounded },
-                                    { 'is-danger': invalidQuery || hasError }
+                                    { 'is-danger': invalidRegExp || hasError }
                                 ]"
                                 v-bind="inputBindings"
                                 type="text"
@@ -32,7 +32,7 @@
                                 v-on="inputEvents(selection)"
                                 ref="input">
                             <span class="icon is-small is-left">
-                                <fa icon="search"/>
+                                <fa :icon="faSearch"/>
                             </span>
                             <search-mode class="is-right is-small search-mode"
                                 v-bind="modeBindings"
@@ -52,7 +52,7 @@
                                     {{ i18n('Add') }}
                                 </span>
                                 <span class="icon is-small">
-                                    <fa icon="plus"/>
+                                    <fa :icon="faPlus"/>
                                 </span>
                             </a>
                         </div>
@@ -101,13 +101,11 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPlus, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { Dropdown, DropdownItem } from '@enso-ui/dropdown/bulma';
 import SearchMode from '@enso-ui/search-mode/bulma';
 import CoreTypeahead from '../renderless/CoreTypeahead.vue';
 
-library.add(faPlus, faSearch);
 export default {
     name: 'Typeahead',
 
@@ -115,6 +113,11 @@ export default {
         CoreTypeahead, Dropdown, DropdownItem, Fa, SearchMode,
     },
 
+    data: () => ({
+        faPlus,
+        faSearch,
+    }),
+
     props: {
         hasError: {
             type: Boolean,
@@ -162,6 +165,15 @@ export default {
         .dropdown-trigger {
             width: 100%;
 
+            .input {
+                background-color: var(--enso-filter-control-surface);
+                color: var(--bulma-input-color);
+
+                &::placeholder {
+                    color: var(--bulma-text-light);
+                }
+            }
+
             .search-mode {
                 pointer-events: all;
                 right: 1.6em;

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 },