vue-autosuggest
Version:
Vue autosuggest component.
2 lines (1 loc) • 12.6 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VueAutosuggest={})}(this,function(e){"use strict";var t={name:"default-section",props:{section:{type:Object,required:!0},currentIndex:{type:[Number,String],required:!1,default:1/0},renderSuggestion:{type:Function,required:!1},normalizeItemFunction:{type:Function,required:!0},componentAttrPrefix:{type:String,required:!0},componentAttrIdAutosuggest:{type:String,required:!0}},data:function(){return{_currentIndex:this.currentIndex}},computed:{list:function(){var e=this.section,t=e.limit,n=e.data;return n.length<t&&(t=n.length),n.slice(0,t)}},methods:{getItemIndex:function(e){return this.section.start_index+e},getItemByIndex:function(e){return this.section.data[e]},onMouseEnter:function(e){var t=parseInt(e.currentTarget.getAttribute("data-suggestion-index"));this._currentIndex=t,this.$emit("updateCurrentIndex",t)},onMouseLeave:function(){this.$emit("updateCurrentIndex",null)}},render:function(e){var t=this,n=this.componentAttrPrefix,s={beforeSection:this.$scopedSlots["before-section-"+this.section.name],afterSectionDefault:this.$scopedSlots["after-section"],afterSectionNamed:this.$scopedSlots["after-section-"+this.section.name]},i=n+"__results-before "+n+"__results-before--"+this.section.name,r=s.beforeSection&&s.beforeSection({section:this.section,className:i})||[];return e("ul",{attrs:{role:"listbox","aria-labelledby":this.section.label&&this.componentAttrIdAutosuggest+"-"+this.section.label},class:this.section.ulClass},[r[0]&&r[0]||this.section.label&&e("li",{class:i,id:this.componentAttrIdAutosuggest+"-"+this.section.label},this.section.label)||"",this.list.map(function(s,i){var r,o=t.normalizeItemFunction(t.section.name,t.section.type,t.section.label,t.section.liClass,s),u=t.getItemIndex(i),l=t._currentIndex===u||parseInt(t.currentIndex)===u;return e("li",{attrs:Object.assign({},{role:"option","data-suggestion-index":u,"data-section-name":o.name,id:n+"__results-item--"+u},o.liAttributes),key:u,class:Object.assign((r={},r[n+"__results-item--highlighted"]=l,r[n+"__results-item"]=!0,r),o.liClass),on:{mouseenter:t.onMouseEnter,mouseleave:t.onMouseLeave}},[t.renderSuggestion?t.renderSuggestion(o):t.$scopedSlots.default&&t.$scopedSlots.default({_key:i,suggestion:o})])}),s.afterSectionDefault&&s.afterSectionDefault({section:this.section,className:n+"__results-after "+n+"__results-after--"+this.section.name}),s.afterSectionNamed&&s.afterSectionNamed({section:this.section,className:n+"__results_after "+n+"__results-after--"+this.section.name})])}};function n(e,t){(function(e,t){return!!e.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))})(e,t)||(e.className+=" "+t)}var s="default",i="default-section",r={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:e.componentAttrIdAutosuggest}},[e._t("before-input"),n("div",{attrs:{role:"combobox","aria-expanded":e.isOpen?"true":"false","aria-haspopup":"listbox","aria-owns":e.componentAttrIdAutosuggest+"-"+e.componentAttrPrefix+"__results"}},[n("input",e._g(e._b({class:[e.isOpen?e.componentAttrPrefix+"__input--open":"",e.internal_inputProps.class],attrs:{type:e.internal_inputProps.type,autocomplete:e.internal_inputProps.autocomplete,"aria-autocomplete":"list","aria-activedescendant":e.isOpen&&null!==e.currentIndex?e.componentAttrPrefix+"__results-item--"+e.currentIndex:"","aria-controls":e.componentAttrIdAutosuggest+"-"+e.componentAttrPrefix+"__results"},domProps:{value:e.internalValue},on:{input:e.inputHandler,keydown:e.handleKeyStroke}},"input",e.internal_inputProps,!1),e.listeners))]),e._t("after-input"),e._v(" "),n("div",{class:e._componentAttrClassAutosuggestResultsContainer,attrs:{id:e.componentAttrIdAutosuggest+"-"+e.componentAttrPrefix+"__results"}},[e.isOpen?n("div",{class:e._componentAttrClassAutosuggestResults,attrs:{"aria-labelledby":e.componentAttrIdAutosuggest}},[e._t("before-suggestions"),e._v(" "),e._l(e.computedSections,function(t,s){return n(t.type,{key:e.getSectionRef(""+t.name+s),ref:e.getSectionRef(""+t.name+s),refInFor:!0,tag:"component",attrs:{"current-index":e.currentIndex,"normalize-item-function":e.normalizeItem,"render-suggestion":e.renderSuggestion,section:t,"component-attr-prefix":e.componentAttrPrefix,"component-attr-id-autosuggest":e.componentAttrIdAutosuggest},on:{updateCurrentIndex:e.updateCurrentIndex},scopedSlots:e._u([{key:"before-section-"+(t.name||t.label),fn:function(n){var s=n.section,i=n.className;return[e._t("before-section-"+(t.name||t.label),null,{section:s,className:i})]}},{key:"default",fn:function(t){var n=t.suggestion,s=t._key;return[e._t("default",[e._v(" "+e._s(n.item)+" ")],{suggestion:n,index:s})]}},{key:"after-section-"+(t.name||t.label),fn:function(n){var s=n.section;return[e._t("after-section-"+(t.name||t.label),null,{section:s})]}},{key:"after-section",fn:function(t){var n=t.section;return[e._t("after-section",null,{section:n})]}}])})}),e._v(" "),e._t("after-suggestions")],2):e._e(),e._v(" "),e._t("after-suggestions-container")],2)],2)},staticRenderFns:[],name:"Autosuggest",components:{DefaultSection:t},props:{value:{type:String,default:null},inputProps:{type:Object,required:!0},limit:{type:Number,required:!1,default:1/0},suggestions:{type:Array,required:!0},renderSuggestion:{type:Function,required:!1,default:null},getSuggestionValue:{type:Function,required:!1,default:function(e){var t=e.item;return"object"==typeof t&&t.hasOwnProperty("name")?t.name:t}},shouldRenderSuggestions:{type:Function,required:!1,default:function(e,t){return e>0&&!t}},sectionConfigs:{type:Object,required:!1,default:function(){return{default:{onSelected:null}}}},onSelected:{type:Function,required:!1,default:null},componentAttrIdAutosuggest:{type:String,required:!1,default:"autosuggest"},componentAttrClassAutosuggestResultsContainer:{type:String,required:!1,default:null},componentAttrClassAutosuggestResults:{type:String,required:!1,default:null},componentAttrPrefix:{type:String,required:!1,default:"autosuggest"}},data:function(){return{internalValue:null,searchInputOriginal:null,currentIndex:null,currentItem:null,loading:!1,didSelectFromOptions:!1,defaultInputProps:{type:"text",autocomplete:"off"},clientXMouseDownInitial:null}},computed:{internal_inputProps:function(){return Object.assign({},this.defaultInputProps,this.inputProps)},listeners:function(){var e=this;return Object.assign({},this.$listeners,{input:function(e){},click:function(){e.loading=!1,e.$listeners.click&&e.$listeners.click(e.currentItem),e.$nextTick(function(){e.ensureItemVisible(e.currentItem,e.currentIndex)})},selected:function(){e.currentItem&&e.sectionConfigs[e.currentItem.name]&&e.sectionConfigs[e.currentItem.name].onSelected?e.sectionConfigs[e.currentItem.name].onSelected(e.currentItem,e.searchInputOriginal):e.sectionConfigs.default.onSelected?e.sectionConfigs.default.onSelected(null,e.searchInputOriginal):e.$listeners.selected&&e.$emit("selected",e.currentItem,e.currentIndex),e.setChangeItem(null)}})},isOpen:function(){return this.shouldRenderSuggestions(this.totalResults,this.loading)},computedSections:function(){var e=this,t=0;return this.suggestions.map(function(n){if(n.data){var r,o,u,l,a=n.name?n.name:s,c=null;e.sectionConfigs[a]&&(r=e.sectionConfigs[a].limit,u=e.sectionConfigs[a].type,o=e.sectionConfigs[a].label,l=e.sectionConfigs[a].ulClass,c=e.sectionConfigs[a].liClass),u=u||i,r=(r=r||e.limit)||1/0,r=n.data.length<r?n.data.length:r;var d={name:a,label:o=o||n.label,type:u,limit:r,data:n.data,start_index:t,end_index:t+r-1,ulClass:l,liClass:c};return t+=r,d}})},totalResults:function(){return this.computedSections.reduce(function(e,t){if(!t)return e;var n=t.limit,s=t.data;return e+(s.length>=n?n:s.length)},0)},_componentAttrClassAutosuggestResultsContainer:function(){return this.componentAttrClassAutosuggestResultsContainer||this.componentAttrPrefix+"__results-container"},_componentAttrClassAutosuggestResults:function(){return this.componentAttrClassAutosuggestResults||this.componentAttrPrefix+"__results"}},watch:{value:{handler:function(e){this.internalValue=e},immediate:!0},isOpen:{handler:function(e,t){e!==t&&this.$emit(e?"opened":"closed")},immediate:!0}},created:function(){this.loading=!0},mounted:function(){document.addEventListener("mouseup",this.onDocumentMouseUp),document.addEventListener("mousedown",this.onDocumentMouseDown)},beforeDestroy:function(){document.removeEventListener("mouseup",this.onDocumentMouseUp),document.removeEventListener("mousedown",this.onDocumentMouseDown)},methods:{inputHandler:function(e){var t=e.target.value;this.$emit("input",t),this.internalValue=t,this.didSelectFromOptions||(this.searchInputOriginal=t,this.currentIndex=null)},getSectionRef:function(e){return"computed_section_"+e},getItemByIndex:function(e){var t=!1;if(null===e)return t;for(var n=0;n<this.computedSections.length;n++)if(e>=this.computedSections[n].start_index&&e<=this.computedSections[n].end_index){var s=e-this.computedSections[n].start_index,i=this.computedSections[n].name,r=this.$refs[this.getSectionRef(""+i+n)][0];if(r){t=this.normalizeItem(this.computedSections[n].name,this.computedSections[n].type,r.section.label,r.section.liClass,r.getItemByIndex(s));break}}return t},handleKeyStroke:function(e){var t=this,n=e.keyCode;if(!([16,9,17,18,91,93].indexOf(n)>-1)){var s=!this.isOpen;if(this.loading=!1,this.didSelectFromOptions=!1,this.isOpen)switch(n){case 40:case 38:if(e.preventDefault(),38===n&&null===this.currentIndex)break;var i=40===n?1:-1,r=Math.max((parseInt(this.currentIndex)||0)+(s?0:i),-1);this.setCurrentIndex(r,this.totalResults),this.didSelectFromOptions=!0,this.totalResults>0&&this.currentIndex>=0?(this.setChangeItem(this.getItemByIndex(this.currentIndex)),this.didSelectFromOptions=!0):-1===this.currentIndex&&(this.setChangeItem(null),this.internalValue=this.searchInputOriginal,e.preventDefault()),this.$nextTick(function(){t.ensureItemVisible(t.currentItem,t.currentIndex)});break;case 13:e.preventDefault(),this.totalResults>0&&this.currentIndex>=0&&(this.setChangeItem(this.getItemByIndex(this.currentIndex),!0),this.didSelectFromOptions=!0),this.loading=!0,this.listeners.selected(this.didSelectFromOptions);break;case 27:this.loading=!0,this.currentIndex=null,this.internalValue=this.searchInputOriginal,this.$emit("input",this.searchInputOriginal),e.preventDefault()}}},setChangeItem:function(e,t){if(void 0===t&&(t=!1),null!==this.currentIndex&&e){if(e){this.currentItem=e,this.$emit("item-changed",e,this.currentIndex);var n=this.getSuggestionValue(e);this.internalValue=n,t&&(this.searchInputOriginal=n),this.ensureItemVisible(e,this.currentIndex)}}else this.currentItem=null,this.$emit("item-changed",null,null)},normalizeItem:function(e,t,n,s,i){return{name:e,type:t,label:n,liClass:i.liClass||s,item:i}},ensureItemVisible:function(e,t,n){var s=this.$el.querySelector(n||"."+this._componentAttrClassAutosuggestResults);if(s){var i=s.querySelector("#"+this.componentAttrPrefix+"__results-item--"+t);if(i){var r=s.clientHeight,o=s.scrollTop,u=i.clientHeight,l=i.offsetTop;u+l>=o+r?s.scrollTop=u+l-r:l<o&&o>0&&(s.scrollTop=l)}}},updateCurrentIndex:function(e){this.setCurrentIndex(e,-1,!0)},clickedOnScrollbar:function(e,t){var n=this.$el.querySelector("."+this._componentAttrClassAutosuggestResults),s=n&&n.clientWidth<=t+17&&t+17<=n.clientWidth+34;return"DIV"===e.target.tagName&&n&&s||!1},onDocumentMouseDown:function(e){var t=e.target.getBoundingClientRect?e.target.getBoundingClientRect():0;this.clientXMouseDownInitial=e.clientX-t.left},onDocumentMouseUp:function(e){if(!this.$el.contains(e.target))return this.loading=!0,void(this.currentIndex=null);"INPUT"===e.target.tagName||this.clickedOnScrollbar(e,this.clientXMouseDownInitial)||(this.loading=!0,this.didSelectFromOptions=!0,this.setChangeItem(this.getItemByIndex(this.currentIndex),!0),this.listeners.selected(!0))},setCurrentIndex:function(e,t,s){void 0===t&&(t=-1),void 0===s&&(s=!1);var i=e;s||(null===this.currentIndex||e>=t)&&(i=0);this.currentIndex=i;var r,o,u=this.$el.querySelector("#"+this.componentAttrPrefix+"__results-item--"+this.currentIndex),l=this.componentAttrPrefix+"__results-item--highlighted";this.$el.querySelector("."+l)&&(r=this.$el.querySelector("."+l),o=l,r.classList&&r.classList.remove(o)),u&&n(u,l)}}},o={install:function(e){e.component("vue-autosuggest-default-section",t),e.component("vue-autosuggest",r)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(o),e.default=o,e.VueAutosuggest=r,e.DefaultSection=t,Object.defineProperty(e,"__esModule",{value:!0})});