vue3-simple-typeahead - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/vue3-simple-typeahead.esm.js

@@ -18,2 +18,5 @@ import { defineComponent, pushScopeId, popScopeId, openBlock, createElementBlock, withDirectives, createElementVNode, withKeys, withModifiers, vModelText, renderSlot, createCommentVNode, Fragment, renderList, normalizeClass } from 'vue';
     },
+    defaultItem: {
+      default: null
+    },
     itemProjection: {
@@ -36,3 +39,7 @@ type: Function,
 
-  created() {},
+  mounted() {
+    if (this.defaultItem !== undefined && this.defaultItem !== null) {
+      this.selectItem(this.defaultItem);
+    }
+  },
 
@@ -155,3 +162,3 @@ data() {
 
-pushScopeId("data-v-31617217");
+pushScopeId("data-v-04d98098");
 
@@ -220,3 +227,3 @@ const _hoisted_1 = ["id"];
 script.render = render;
-script.__scopeId = "data-v-31617217";
+script.__scopeId = "data-v-04d98098";
 
@@ -223,0 +230,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},itemProjection:{type:Function,default:function(e){return e}},minInputLength:{type:Number,default:2,validator:function(e){return e>=0}}},created:function(){},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-31617217");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",{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"},null,40,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-31617217";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,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-04d98098");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",{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"},null,40,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-04d98098";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);

dist/vue3-simple-typeahead.ssr.js

@@ -73,2 +73,5 @@ 'use strict';var vue=require('vue');function _slicedToArray(arr, i) {
     },
+    defaultItem: {
+      default: null
+    },
     itemProjection: {
@@ -88,3 +91,7 @@ type: Function,
   },
-  created: function created() {},
+  mounted: function mounted() {
+    if (this.defaultItem !== undefined && this.defaultItem !== null) {
+      this.selectItem(this.defaultItem);
+    }
+  },
   data: function data() {
@@ -195,3 +202,3 @@ return {
   }
-});vue.pushScopeId("data-v-31617217");
+});vue.pushScopeId("data-v-04d98098");
 
@@ -276,3 +283,3 @@ var _hoisted_1 = ["id"];
 }script.render = render;
-script.__scopeId = "data-v-31617217";// Import vue component
+script.__scopeId = "data-v-04d98098";// Import vue component
 // IIFE injects install function into component, allowing component
@@ -279,0 +286,0 @@ // to be registered via Vue.use() as well as Vue.component(),

package.json

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

@@ -5,3 +5,2 @@ # vue3-simple-typeahead
 [![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://v3.vuejs.org/)
-[![no-dependecies](https://img.shields.io/david/frikinside/vue3-simple-typeahead)](https://www.npmjs.com/package/vue3-simple-typeahead?activeTab=dependencies)
 [![License](https://img.shields.io/npm/l/vue3-simple-typeahead)](https://en.wikipedia.org/wiki/MIT_License)
@@ -22,2 +21,4 @@ [![npm](https://img.shields.io/npm/dt/vue3-simple-typeahead.svg)](https://www.npmjs.com/package/vue3-simple-typeahead)
 
+[vue3-simple-typeahead-demo source code](https://github.com/frikinside/vue3-simple-typeahead-demo)
+
 ## Installation
@@ -138,2 +139,3 @@
 | [`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 |
@@ -155,9 +157,9 @@ | [`itemProjection`](#itemProjection) | Function: String | `(item) => {return item;}` | Projection function to map the items to a string value for search and display           |
 
-| Prop                                 | Parent                                  | Props                                     | Description                                                     |
+| Slot                                 | Parent                                  | Props                                     | Description                                                     |
 | :----------------------------------- | :-------------------------------------- | :---------------------------------------- | :-------------------------------------------------------------- |
 | [`#list-header`](#list-header)       | `div.simple-typeahead-list-header`      |                                           | Slot to be show at top of the suggestion list                   |
-| [`#list-item-text`](#list-item-text) | `span.simple-typeahead-list-item-text'` |                                           | Slot to customize the text of every item in the suggestion list |
-| [`#list-footer`](#list-footer)       | `div.simple-typeahead-list-footer`      | `item`, `itemProjection`, `boldMatchText` | Slot to be show at bottom of the suggestion list                |
+| [`#list-item-text`](#list-item-text) | `span.simple-typeahead-list-item-text'` | `item`, `itemProjection`, `boldMatchText` | Slot to customize the text of every item in the suggestion list |
+| [`#list-footer`](#list-footer)       | `div.simple-typeahead-list-footer`      |                                           | Slot to be show at bottom of the suggestion list                |
 
-#### Slot `#list-footer` props
+#### Slot `#list-item-text` props
 
@@ -164,0 +166,0 @@ | Prop                                | Type             | Description                                                                                                   |

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

47632

increased by1.76%

Lines of code

529

increased by2.72%

Number of lines in readme file

181

increased by1.12%

No dependency changes