vue3-simple-typeahead - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

dist/vue3-simple-typeahead.esm.js

@@ -37,2 +37,9 @@ import { defineComponent, pushScopeId, popScopeId, openBlock, createElementBlock, withDirectives, createElementVNode, mergeProps, withKeys, withModifiers, vModelText, renderSlot, createCommentVNode, Fragment, renderList, normalizeClass } from 'vue';
     },
+    minItemLength: {
+      type: Number,
+      default: 0,
+      validator: prop => {
+        return prop >= 0;
+      }
+    },
     selectOnTab: {
@@ -182,3 +189,3 @@ type: Boolean,
     isListVisible() {
-      return this.isInputFocused && this.input.length >= this.minInputLength && this.filteredItems.length;
+      return this.isInputFocused && this.input.length >= this.minInputLength && this.filteredItems.length > this.minItemLength;
     },
@@ -193,3 +200,3 @@
 
-pushScopeId("data-v-714f38b8");
+pushScopeId("data-v-f81ca714");
 
@@ -259,3 +266,3 @@ const _hoisted_1 = ["id"];
 script.render = render;
-script.__scopeId = "data-v-714f38b8";
+script.__scopeId = "data-v-f81ca714";
 
@@ -262,0 +269,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,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}},selectOnTab:{type:Boolean,default:!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)},selectCurrentSelectionTab:function(){this.selectOnTab?this.selectCurrentSelection():this.$refs.inputRef.blur()},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-714f38b8");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,f,d,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"])),n[7]||(n[7]=e.withKeys(e.withModifiers((function(){return t.selectCurrentSelectionTab&&t.selectCurrentSelectionTab.apply(t,arguments)}),["prevent"]),["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[8]||(n[8]=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-714f38b8";var f=function(){var e=i;return e.install=function(t){t.component("Vue3SimpleTypeahead",e)},e}(),d=Object.freeze({__proto__:null,default:f});return Object.entries(d).forEach((function(e){var n=t(e,2),i=n[0],r=n[1];"default"!==i&&(f[i]=r)})),f}(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}},minItemLength:{type:Number,default:0,validator:function(e){return e>=0}},selectOnTab:{type:Boolean,default:!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)},selectCurrentSelectionTab:function(){this.selectOnTab?this.selectCurrentSelection():this.$refs.inputRef.blur()},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>this.minItemLength},currentSelection:function(){return this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length?this.filteredItems[this.currentSelectionIndex]:void 0}}});e.pushScopeId("data-v-f81ca714");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,f,d,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"])),n[7]||(n[7]=e.withKeys(e.withModifiers((function(){return t.selectCurrentSelectionTab&&t.selectCurrentSelectionTab.apply(t,arguments)}),["prevent"]),["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[8]||(n[8]=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-f81ca714";var f=function(){var e=i;return e.install=function(t){t.component("Vue3SimpleTypeahead",e)},e}(),d=Object.freeze({__proto__:null,default:f});return Object.entries(d).forEach((function(e){var n=t(e,2),i=n[0],r=n[1];"default"!==i&&(f[i]=r)})),f}(Vue);

dist/vue3-simple-typeahead.ssr.js

@@ -90,2 +90,9 @@ 'use strict';var vue=require('vue');function _slicedToArray(arr, i) {
     },
+    minItemLength: {
+      type: Number,
+      default: 0,
+      validator: function validator(prop) {
+        return prop >= 0;
+      }
+    },
     selectOnTab: {
@@ -221,3 +228,3 @@ type: Boolean,
     isListVisible: function isListVisible() {
-      return this.isInputFocused && this.input.length >= this.minInputLength && this.filteredItems.length;
+      return this.isInputFocused && this.input.length >= this.minInputLength && this.filteredItems.length > this.minItemLength;
     },
@@ -228,3 +235,3 @@ currentSelection: function currentSelection() {
   }
-});vue.pushScopeId("data-v-714f38b8");
+});vue.pushScopeId("data-v-f81ca714");
 
@@ -312,3 +319,3 @@ var _hoisted_1 = ["id"];
 }script.render = render;
-script.__scopeId = "data-v-714f38b8";// Import vue component
+script.__scopeId = "data-v-f81ca714";// Import vue component
 // IIFE injects install function into component, allowing component
@@ -315,0 +322,0 @@ // to be registered via Vue.use() as well as Vue.component(),

package.json

 {
   "name": "vue3-simple-typeahead",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "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

@@ -159,11 +159,12 @@ # vue3-simple-typeahead
 
-| Prop                                | Type             | Default                    | Description                                                                             |
-| :---------------------------------- | :--------------- | :------------------------- | :-------------------------------------------------------------------------------------- |
-| [`id`](#id)                         | String           | Random id generation       | The id for the input control. Can be useful to link with a `label for=""`               |
-| [`placeholder`](#placeholder)       | String           | `''`                       | Placeholder text for the input                                                          |
-| [`items`](#items)                   | Array (Required) |                            | List of objects or strings with the elements for suggestions                            |
-| [`defaultItem`](#defaultItem)       | Any              |                            | Default item to be selected                                                             |
-| [`minInputLength`](#minInputLength) | Number           | 2                          | Minimum input length for the suggestion length to appear, the prop value has to be >= 0 |
-| [`itemProjection`](#itemProjection) | Function: String | `(item) => {return item;}` | Projection function to map the items to a string value for search and display           |
-| [`selectOnTab`](#selectOnTab)       | Boolean          | `true`                     | Enable/Disable item selection on <kbd>TAB</kbd>                                         |
+| Prop                                | Type             | Default                    | Description                                                                                              |
+| :---------------------------------- | :--------------- | :------------------------- | :------------------------------------------------------------------------------------------------------- |
+| [`id`](#id)                         | String           | Random id generation       | The id for the input control. Can be useful to link with a `label for=""`                                |
+| [`placeholder`](#placeholder)       | String           | `''`                       | Placeholder text for the input                                                                           |
+| [`items`](#items)                   | Array (Required) |                            | List of objects or strings with the elements for suggestions                                             |
+| [`defaultItem`](#defaultItem)       | Any              |                            | Default item to be selected                                                                              |
+| [`minInputLength`](#minInputLength) | Number           | 2                          | Minimum input length for the suggestion length to appear, the prop value has to be >= 0                  |
+| [`minItemLength`](#minItemLength)   | Number           | 0                          | Minimum number of items that need to be visible for suggestions to appear, the prop value has to be >= 0 |
+| [`itemProjection`](#itemProjection) | Function: String | `(item) => {return item;}` | Projection function to map the items to a string value for search and display                            |
+| [`selectOnTab`](#selectOnTab)       | Boolean          | `true`                     | Enable/Disable item selection on <kbd>TAB</kbd>                                                          |
 
@@ -170,0 +171,0 @@ _Remember you can always use lower-kebap-case for camelCase props like `min-input-length`_

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

53174

increased by1.72%

Lines of code

600

increased by2.39%

Number of lines in readme file

231

increased by0.43%

No dependency changes