vue3-simple-typeahead-stdunn/dist/vue3-simple-typeahead.min.js

Forked from original until PR is merged. A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.

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,default:""},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},tokenizedMatches:{type:Boolean,default:!1}},data:function(){return{inputId:this.id||"simple_typeahead_".concat((1e3*Math.random()).toFixed()),input:"",isInputFocused:!1,currentSelectionIndex:0}},mounted:function(){void 0!==this.defaultItem&&null!==this.defaultItem&&this.selectItem(this.defaultItem)},methods:{onInput:function(){this.isListVisible&&this.currentSelectionIndex>=this.filteredItems.length&&(this.currentSelectionIndex=Math.max(this.filteredItems.length-1,0)),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(){this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length-1&&this.currentSelectionIndex++,this.scrollSelectionIntoView()},onArrowUp:function(){this.isListVisible&&this.currentSelectionIndex>0&&this.currentSelectionIndex--,this.scrollSelectionIntoView()},scrollSelectionIntoView:function(){var e=this;this.$nextTick((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(t&&n&&!(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=this,n=this.input.trim().split(/\s+/),i=e;return n.forEach((function(e){if(e){var n=new RegExp("(".concat(t.escapeRegExp(e),")"),"ig");i=i.replace(n,"<strong>$1</strong>")}})),i},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=this.input.trim();if(!t)return this.items;if(!this.tokenizedMatches){var n=new RegExp(this.escapeRegExp(this.input),"i");return this.items.filter((function(t){return e.itemProjection(t).match(n)}))}var i=t.split(/\s+/).map((function(e){return e.toLowerCase()}));return this.items.filter((function(t){var n=e.itemProjection(t).toLowerCase();return i.some((function(e){return n.includes(e)}))}))},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-99a07096");var r=["id"],o=["id","placeholder"],s={key:0,class:"simple-typeahead-list"},l={key:0,class:"simple-typeahead-list-header"},u=["onClick","onMouseenter"],c=["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,c)):(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,u)})),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-99a07096";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);