vue3-simple-typeahead - npm Package Compare versions

Comparing version 1.0.7 to 1.0.9

dist/vue3-simple-typeahead.esm.js

@@ -6,2 +6,3 @@ import { defineComponent, pushScopeId, popScopeId, openBlock, createElementBlock, withDirectives, createElementVNode, mergeProps, withKeys, withModifiers, vModelText, renderSlot, createCommentVNode, Fragment, renderList, normalizeClass } from 'vue';
   emits: ['onInput', 'onFocus', 'onBlur', 'selectItem'],
+  inheritAttrs: false,
   props: {
@@ -126,3 +127,3 @@ id: {
       this.currentSelectionIndex = 0;
-      document.getElementById(this.inputId).blur();
+      this.$refs.inputRef.blur();
       this.$emit('selectItem', item);
@@ -138,2 +139,20 @@ },
       return text.replace(regexp, '<strong>$1</strong>');
+    },
+
+    clearInput() {
+      this.input = '';
+    },
+
+    getInput() {
+      return this.$refs.inputRef;
+    },
+
+    focusInput() {
+      this.$refs.inputRef.focus();
+      this.onFocus();
+    },
+
+    blurInput() {
+      this.$refs.inputRef.blur();
+      this.onBlur();
     }
@@ -163,3 +182,3 @@
 
-pushScopeId("data-v-590ce012");
+pushScopeId("data-v-0ccb6f26");
 
@@ -191,2 +210,3 @@ const _hoisted_1 = ["id"];
   }, [withDirectives(createElementVNode("input", mergeProps({
+    ref: "inputRef",
     id: _ctx.inputId,
@@ -229,3 +249,3 @@ class: "simple-typeahead-input",
 script.render = render;
-script.__scopeId = "data-v-590ce012";
+script.__scopeId = "data-v-0ccb6f26";
 
@@ -232,0 +252,0 @@ // Import vue component

dist/vue3-simple-typeahead.min.js

@@ -1,1 +0,1 @@
-var Vue3SimpleTypeahead=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var i,o,r=[],l=!0,s=!1;try{for(n=n.call(e);!(l=(i=n.next()).done)&&(r.push(i.value),!t||r.length!==t);l=!0);}catch(e){s=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(s)throw o}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var i=e.defineComponent({name:"Vue3SimpleTypeahead",emits:["onInput","onFocus","onBlur","selectItem"],props:{id:{type:String},placeholder:{type:String,default:""},items:{type:Array,required:!0},defaultItem:{default:null},itemProjection:{type:Function,default:function(e){return e}},minInputLength:{type:Number,default:2,validator:function(e){return e>=0}}},mounted:function(){void 0!==this.defaultItem&&null!==this.defaultItem&&this.selectItem(this.defaultItem)},data:function(){return{inputId:this.id||"simple_typeahead_".concat((1e3*Math.random()).toFixed()),input:"",isInputFocused:!1,currentSelectionIndex:0}},methods:{onInput:function(){this.isListVisible&&this.currentSelectionIndex>=this.filteredItems.length&&(this.currentSelectionIndex=(this.filteredItems.length||1)-1),this.$emit("onInput",{input:this.input,items:this.filteredItems})},onFocus:function(){this.isInputFocused=!0,this.$emit("onFocus",{input:this.input,items:this.filteredItems})},onBlur:function(){this.isInputFocused=!1,this.$emit("onBlur",{input:this.input,items:this.filteredItems})},onArrowDown:function(e){this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length-1&&this.currentSelectionIndex++,this.scrollSelectionIntoView()},onArrowUp:function(e){this.isListVisible&&this.currentSelectionIndex>0&&this.currentSelectionIndex--,this.scrollSelectionIntoView()},scrollSelectionIntoView:function(){var e=this;setTimeout((function(){var t=document.querySelector("#".concat(e.wrapperId," .simple-typeahead-list")),n=document.querySelector("#".concat(e.wrapperId," .simple-typeahead-list-item.simple-typeahead-list-item-active"));if(!(n.offsetTop>=t.scrollTop&&n.offsetTop+n.offsetHeight<t.scrollTop+t.offsetHeight)){var i=0;n.offsetTop>t.scrollTop?i=n.offsetTop+n.offsetHeight-t.offsetHeight:n.offsetTop<t.scrollTop&&(i=n.offsetTop),t.scrollTo(0,i)}}))},selectCurrentSelection:function(){this.currentSelection&&this.selectItem(this.currentSelection)},selectItem:function(e){this.input=this.itemProjection(e),this.currentSelectionIndex=0,document.getElementById(this.inputId).blur(),this.$emit("selectItem",e)},escapeRegExp:function(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")},boldMatchText:function(e){var t=new RegExp("(".concat(this.escapeRegExp(this.input),")"),"ig");return e.replace(t,"<strong>$1</strong>")}},computed:{wrapperId:function(){return"".concat(this.inputId,"_wrapper")},filteredItems:function(){var e=this,t=new RegExp(this.escapeRegExp(this.input),"i");return this.items.filter((function(n){return e.itemProjection(n).match(t)}))},isListVisible:function(){return this.isInputFocused&&this.input.length>=this.minInputLength&&this.filteredItems.length},currentSelection:function(){return this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length?this.filteredItems[this.currentSelectionIndex]:void 0}}});e.pushScopeId("data-v-590ce012");var o=["id"],r=["id","placeholder"],l={key:0,class:"simple-typeahead-list"},s={key:0,class:"simple-typeahead-list-header"},c=["onClick","onMouseenter"],u=["data-text"],a=["data-text","innerHTML"],p={key:1,class:"simple-typeahead-list-footer"};e.popScopeId(),i.render=function(t,n,i,d,h,f){return e.openBlock(),e.createElementBlock("div",{id:t.wrapperId,class:"simple-typeahead"},[e.withDirectives(e.createElementVNode("input",e.mergeProps({id:t.inputId,class:"simple-typeahead-input",type:"text",placeholder:t.placeholder,"onUpdate:modelValue":n[0]||(n[0]=function(e){return t.input=e}),onInput:n[1]||(n[1]=function(){return t.onInput&&t.onInput.apply(t,arguments)}),onFocus:n[2]||(n[2]=function(){return t.onFocus&&t.onFocus.apply(t,arguments)}),onBlur:n[3]||(n[3]=function(){return t.onBlur&&t.onBlur.apply(t,arguments)}),onKeydown:[n[4]||(n[4]=e.withKeys(e.withModifiers((function(){return t.onArrowDown&&t.onArrowDown.apply(t,arguments)}),["prevent"]),["down"])),n[5]||(n[5]=e.withKeys(e.withModifiers((function(){return t.onArrowUp&&t.onArrowUp.apply(t,arguments)}),["prevent"]),["up"])),n[6]||(n[6]=e.withKeys(e.withModifiers((function(){return t.selectCurrentSelection&&t.selectCurrentSelection.apply(t,arguments)}),["prevent"]),["enter","tab"]))],autocomplete:"off"},t.$attrs),null,16,r),[[e.vModelText,t.input]]),t.isListVisible?(e.openBlock(),e.createElementBlock("div",l,[t.$slots["list-header"]?(e.openBlock(),e.createElementBlock("div",s,[e.renderSlot(t.$slots,"list-header")])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filteredItems,(function(i,o){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["simple-typeahead-list-item",{"simple-typeahead-list-item-active":t.currentSelectionIndex==o}]),key:o,onMousedown:n[7]||(n[7]=e.withModifiers((function(){}),["prevent"])),onClick:function(e){return t.selectItem(i)},onMouseenter:function(e){return t.currentSelectionIndex=o}},[t.$slots["list-item-text"]?(e.openBlock(),e.createElementBlock("span",{key:0,class:"simple-typeahead-list-item-text","data-text":t.itemProjection(i)},[e.renderSlot(t.$slots,"list-item-text",{item:i,itemProjection:t.itemProjection,boldMatchText:t.boldMatchText})],8,u)):(e.openBlock(),e.createElementBlock("span",{key:1,class:"simple-typeahead-list-item-text","data-text":t.itemProjection(i),innerHTML:t.boldMatchText(t.itemProjection(i))},null,8,a))],42,c)})),128)),t.$slots["list-footer"]?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(t.$slots,"list-footer")])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],8,o)},i.__scopeId="data-v-590ce012";var d=function(){var e=i;return e.install=function(t){t.component("Vue3SimpleTypeahead",e)},e}(),h=Object.freeze({__proto__:null,default:d});return Object.entries(h).forEach((function(e){var n=t(e,2),i=n[0],o=n[1];"default"!==i&&(d[i]=o)})),d}(Vue);
+var Vue3SimpleTypeahead=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var i,r,o=[],s=!0,l=!1;try{for(n=n.call(e);!(s=(i=n.next()).done)&&(o.push(i.value),!t||o.length!==t);s=!0);}catch(e){l=!0,r=e}finally{try{s||null==n.return||n.return()}finally{if(l)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var i=e.defineComponent({name:"Vue3SimpleTypeahead",emits:["onInput","onFocus","onBlur","selectItem"],inheritAttrs:!1,props:{id:{type:String},placeholder:{type:String,default:""},items:{type:Array,required:!0},defaultItem:{default:null},itemProjection:{type:Function,default:function(e){return e}},minInputLength:{type:Number,default:2,validator:function(e){return e>=0}}},mounted:function(){void 0!==this.defaultItem&&null!==this.defaultItem&&this.selectItem(this.defaultItem)},data:function(){return{inputId:this.id||"simple_typeahead_".concat((1e3*Math.random()).toFixed()),input:"",isInputFocused:!1,currentSelectionIndex:0}},methods:{onInput:function(){this.isListVisible&&this.currentSelectionIndex>=this.filteredItems.length&&(this.currentSelectionIndex=(this.filteredItems.length||1)-1),this.$emit("onInput",{input:this.input,items:this.filteredItems})},onFocus:function(){this.isInputFocused=!0,this.$emit("onFocus",{input:this.input,items:this.filteredItems})},onBlur:function(){this.isInputFocused=!1,this.$emit("onBlur",{input:this.input,items:this.filteredItems})},onArrowDown:function(e){this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length-1&&this.currentSelectionIndex++,this.scrollSelectionIntoView()},onArrowUp:function(e){this.isListVisible&&this.currentSelectionIndex>0&&this.currentSelectionIndex--,this.scrollSelectionIntoView()},scrollSelectionIntoView:function(){var e=this;setTimeout((function(){var t=document.querySelector("#".concat(e.wrapperId," .simple-typeahead-list")),n=document.querySelector("#".concat(e.wrapperId," .simple-typeahead-list-item.simple-typeahead-list-item-active"));if(!(n.offsetTop>=t.scrollTop&&n.offsetTop+n.offsetHeight<t.scrollTop+t.offsetHeight)){var i=0;n.offsetTop>t.scrollTop?i=n.offsetTop+n.offsetHeight-t.offsetHeight:n.offsetTop<t.scrollTop&&(i=n.offsetTop),t.scrollTo(0,i)}}))},selectCurrentSelection:function(){this.currentSelection&&this.selectItem(this.currentSelection)},selectItem:function(e){this.input=this.itemProjection(e),this.currentSelectionIndex=0,this.$refs.inputRef.blur(),this.$emit("selectItem",e)},escapeRegExp:function(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")},boldMatchText:function(e){var t=new RegExp("(".concat(this.escapeRegExp(this.input),")"),"ig");return e.replace(t,"<strong>$1</strong>")},clearInput:function(){this.input=""},getInput:function(){return this.$refs.inputRef},focusInput:function(){this.$refs.inputRef.focus(),this.onFocus()},blurInput:function(){this.$refs.inputRef.blur(),this.onBlur()}},computed:{wrapperId:function(){return"".concat(this.inputId,"_wrapper")},filteredItems:function(){var e=this,t=new RegExp(this.escapeRegExp(this.input),"i");return this.items.filter((function(n){return e.itemProjection(n).match(t)}))},isListVisible:function(){return this.isInputFocused&&this.input.length>=this.minInputLength&&this.filteredItems.length},currentSelection:function(){return this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length?this.filteredItems[this.currentSelectionIndex]:void 0}}});e.pushScopeId("data-v-0ccb6f26");var r=["id"],o=["id","placeholder"],s={key:0,class:"simple-typeahead-list"},l={key:0,class:"simple-typeahead-list-header"},c=["onClick","onMouseenter"],u=["data-text"],a=["data-text","innerHTML"],p={key:1,class:"simple-typeahead-list-footer"};e.popScopeId(),i.render=function(t,n,i,d,f,h){return e.openBlock(),e.createElementBlock("div",{id:t.wrapperId,class:"simple-typeahead"},[e.withDirectives(e.createElementVNode("input",e.mergeProps({ref:"inputRef",id:t.inputId,class:"simple-typeahead-input",type:"text",placeholder:t.placeholder,"onUpdate:modelValue":n[0]||(n[0]=function(e){return t.input=e}),onInput:n[1]||(n[1]=function(){return t.onInput&&t.onInput.apply(t,arguments)}),onFocus:n[2]||(n[2]=function(){return t.onFocus&&t.onFocus.apply(t,arguments)}),onBlur:n[3]||(n[3]=function(){return t.onBlur&&t.onBlur.apply(t,arguments)}),onKeydown:[n[4]||(n[4]=e.withKeys(e.withModifiers((function(){return t.onArrowDown&&t.onArrowDown.apply(t,arguments)}),["prevent"]),["down"])),n[5]||(n[5]=e.withKeys(e.withModifiers((function(){return t.onArrowUp&&t.onArrowUp.apply(t,arguments)}),["prevent"]),["up"])),n[6]||(n[6]=e.withKeys(e.withModifiers((function(){return t.selectCurrentSelection&&t.selectCurrentSelection.apply(t,arguments)}),["prevent"]),["enter","tab"]))],autocomplete:"off"},t.$attrs),null,16,o),[[e.vModelText,t.input]]),t.isListVisible?(e.openBlock(),e.createElementBlock("div",s,[t.$slots["list-header"]?(e.openBlock(),e.createElementBlock("div",l,[e.renderSlot(t.$slots,"list-header")])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filteredItems,(function(i,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["simple-typeahead-list-item",{"simple-typeahead-list-item-active":t.currentSelectionIndex==r}]),key:r,onMousedown:n[7]||(n[7]=e.withModifiers((function(){}),["prevent"])),onClick:function(e){return t.selectItem(i)},onMouseenter:function(e){return t.currentSelectionIndex=r}},[t.$slots["list-item-text"]?(e.openBlock(),e.createElementBlock("span",{key:0,class:"simple-typeahead-list-item-text","data-text":t.itemProjection(i)},[e.renderSlot(t.$slots,"list-item-text",{item:i,itemProjection:t.itemProjection,boldMatchText:t.boldMatchText})],8,u)):(e.openBlock(),e.createElementBlock("span",{key:1,class:"simple-typeahead-list-item-text","data-text":t.itemProjection(i),innerHTML:t.boldMatchText(t.itemProjection(i))},null,8,a))],42,c)})),128)),t.$slots["list-footer"]?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(t.$slots,"list-footer")])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],8,r)},i.__scopeId="data-v-0ccb6f26";var d=function(){var e=i;return e.install=function(t){t.component("Vue3SimpleTypeahead",e)},e}(),f=Object.freeze({__proto__:null,default:d});return Object.entries(f).forEach((function(e){var n=t(e,2),i=n[0],r=n[1];"default"!==i&&(d[i]=r)})),d}(Vue);

dist/vue3-simple-typeahead.ssr.js

@@ -61,2 +61,3 @@ 'use strict';var vue=require('vue');function _slicedToArray(arr, i) {
   emits: ['onInput', 'onFocus', 'onBlur', 'selectItem'],
+  inheritAttrs: false,
   props: {
@@ -171,3 +172,3 @@ id: {
       this.currentSelectionIndex = 0;
-      document.getElementById(this.inputId).blur();
+      this.$refs.inputRef.blur();
       this.$emit('selectItem', item);
@@ -181,2 +182,16 @@ },
       return text.replace(regexp, '<strong>$1</strong>');
+    },
+    clearInput: function clearInput() {
+      this.input = '';
+    },
+    getInput: function getInput() {
+      return this.$refs.inputRef;
+    },
+    focusInput: function focusInput() {
+      this.$refs.inputRef.focus();
+      this.onFocus();
+    },
+    blurInput: function blurInput() {
+      this.$refs.inputRef.blur();
+      this.onBlur();
     }
@@ -203,3 +218,3 @@ },
   }
-});vue.pushScopeId("data-v-590ce012");
+});vue.pushScopeId("data-v-0ccb6f26");
 
@@ -231,2 +246,3 @@ var _hoisted_1 = ["id"];
   }, [vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
+    ref: "inputRef",
     id: _ctx.inputId,
@@ -285,3 +301,3 @@ class: "simple-typeahead-input",
 }script.render = render;
-script.__scopeId = "data-v-590ce012";// Import vue component
+script.__scopeId = "data-v-0ccb6f26";// Import vue component
 // IIFE injects install function into component, allowing component
@@ -288,0 +304,0 @@ // to be registered via Vue.use() as well as Vue.component(),

package.json

 {
   "name": "vue3-simple-typeahead",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.",
@@ -5,0 +5,0 @@ "author": "frikinside <[e-mail]> (http://frikinside.net/)",

README.md

@@ -75,3 +75,3 @@ # vue3-simple-typeahead
 	placeholder="Start writing..."
-	:items="['One','Two','Three',...]"
+	:items="['One','Two','Three']"
 	:minInputLength="1"
@@ -93,3 +93,3 @@ :itemProjection="itemProjectionFunction"
 	placeholder="Start writing..."
-	:items="['One','Two','Three',...]"
+	:items="['One','Two','Three']"
 	:minInputLength="1"
@@ -139,3 +139,3 @@ :itemProjection="itemProjectionFunction"
 	placeholder="Start writing..."
-	:items="['One','Two','Three',...]"
+	:items="['One','Two','Three']"
 	:minInputLength="1"
@@ -198,2 +198,23 @@ :itemProjection="itemProjectionFunction"
 
+### Methods
+
+| Method                      | Signature                       | Description                                                      |
+| :-------------------------- | :------------------------------ | :--------------------------------------------------------------- |
+| [`clearInput`](#clearInput) | `function (): void`             | Clean the input with an empty string `''`                        |
+| [`focusInput`](#focusInput) | `function (): void`             | Trigger focus on the input and called `onFocus` event handler    |
+| [`blurInput`](#blurInput)   | `function (): void`             | Trigger blur on the input and called `onBlur` event handler      |
+| [`getInput`](#getInput)     | `function (): HTMLInputElement` | Return the `HTMLInputElement` corresponding to the input control |
+
+_This methods are accesible via [refs](https://vuejs.org/guide/essentials/template-refs.html)_
+
+```html
+<vue3-simple-typeahead ref="inputRef"> </vue3-simple-typeahead>
+```
+
+```javascript
+{
+	this.$refs.inputRef;
+}
+```
+
 ### Styling
@@ -200,0 +221,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50653

increased by4.61%

Lines of code

561

increased by6.05%

Number of lines in readme file

229

increased by10.1%

No dependency changes