primevue/dropdown/dropdown.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)

var dropdown=function(e,t,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={emits:["update:modelValue","before-show","before-hide","show","hide","change","filter"],props:{modelValue:null,options:Array,optionLabel:null,optionValue:null,optionDisabled:null,scrollHeight:{type:String,default:"200px"},filter:Boolean,filterPlaceholder:String,filterLocale:String,editable:Boolean,placeholder:String,disabled:Boolean,dataKey:null,showClear:Boolean,inputId:String,tabindex:String,ariaLabelledBy:null,appendTo:{type:String,default:null},emptyFilterMessage:{type:String,default:"No results found"}},data:()=>({focused:!1,filterValue:null,overlayVisible:!1}),outsideClickListener:null,scrollHandler:null,resizeListener:null,searchTimeout:null,currentSearchChar:null,previousSearchChar:null,searchValue:null,overlay:null,beforeUnmount(){this.restoreAppend(),this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay=null},methods:{getOptionLabel(t){return this.optionLabel?e.ObjectUtils.resolveFieldData(t,this.optionLabel):t},getOptionValue(t){return this.optionValue?e.ObjectUtils.resolveFieldData(t,this.optionValue):t},getOptionRenderKey(t){return this.dataKey?e.ObjectUtils.resolveFieldData(t,this.dataKey):this.getOptionLabel(t)},isOptionDisabled(t){return!!this.optionDisabled&&e.ObjectUtils.resolveFieldData(t,this.optionDisabled)},getSelectedOption(){let t;if(null!=this.modelValue&&this.options)for(let i of this.options)if(e.ObjectUtils.equals(this.modelValue,this.getOptionValue(i),this.equalityKey)){t=i;break}return t},isSelected(t){return e.ObjectUtils.equals(this.modelValue,this.getOptionValue(t),this.equalityKey)},getSelectedOptionIndex(){let t=-1;if(null!=this.modelValue&&this.visibleOptions)for(let i=0;i<this.visibleOptions.length;i++)if(e.ObjectUtils.equals(this.modelValue,this.getOptionValue(this.visibleOptions[i]),this.equalityKey)){t=i;break}return t},show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1},onFocus(){this.focused=!0},onBlur(){this.focused=!1},onKeyDown(e){switch(e.which){case 40:this.onDownKey(e);break;case 38:this.onUpKey(e);break;case 32:this.overlayVisible||(this.show(),e.preventDefault());break;case 13:case 27:this.overlayVisible&&(this.hide(),e.preventDefault());break;case 9:this.hide();break;default:this.search(e)}},onFilterKeyDown(e){switch(e.which){case 40:this.onDownKey(e);break;case 38:this.onUpKey(e);break;case 13:case 27:this.overlayVisible=!1,e.preventDefault()}},onDownKey(e){if(this.visibleOptions)if(!this.overlayVisible&&e.altKey)this.show();else{let t=this.findNextOption(this.getSelectedOptionIndex());t&&this.updateModel(e,this.getOptionValue(t))}e.preventDefault()},onUpKey(e){if(this.visibleOptions){let t=this.findPrevOption(this.getSelectedOptionIndex());t&&this.updateModel(e,this.getOptionValue(t))}e.preventDefault()},findNextOption(e){let t=e+1;if(t===this.visibleOptions.length)return null;let i=this.visibleOptions[t];return this.isOptionDisabled(i)?this.findNextOption(t):i},findPrevOption(e){let t=e-1;if(t<0)return null;let i=this.visibleOptions[t];return this.isOptionDisabled(i)?this.findPrevOption(t):i},onClearClick(e){this.updateModel(e,null)},onClick(t){this.disabled||e.DomHandler.hasClass(t.target,"p-dropdown-clear-icon")||"INPUT"===t.target.tagName||this.overlay&&this.overlay.contains(t.target)||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onOptionSelect(e,t){let i=this.getOptionValue(t);this.updateModel(e,i),this.$refs.focusInput.focus(),setTimeout((()=>{this.hide()}),200)},onEditableInput(e){this.$emit("update:modelValue",e.target.value)},onOverlayEnter(){this.overlay.style.zIndex=String(e.DomHandler.generateZIndex()),this.appendContainer(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.filter&&this.$refs.filterInput.focus(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},alignOverlay(){this.appendTo?(e.DomHandler.absolutePosition(this.overlay,this.$el),this.overlay.style.minWidth=e.DomHandler.getOuterWidth(this.$el)+"px"):e.DomHandler.relativePosition(this.overlay,this.$el)},updateModel(e,t){this.$emit("update:modelValue",t),this.$emit("change",{originalEvent:e,value:t})},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.overlay&&!this.$el.contains(e.target)&&!this.overlay.contains(e.target)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},search(e){if(!this.visibleOptions)return;this.searchTimeout&&clearTimeout(this.searchTimeout);const t=String.fromCharCode(e.keyCode);this.previousSearchChar=this.currentSearchChar,this.currentSearchChar=t,this.previousSearchChar===this.currentSearchChar?this.searchValue=this.currentSearchChar:this.searchValue=this.searchValue?this.searchValue+t:t;let i=this.getSelectedOptionIndex(),l=this.searchOption(++i);l&&this.updateModel(e,this.getOptionValue(l)),this.searchTimeout=setTimeout((()=>{this.searchValue=null}),250)},searchOption(e){let t;return this.searchValue&&(t=this.searchOptionInRange(e,this.visibleOptions.length),t||(t=this.searchOptionInRange(0,e))),t},searchOptionInRange(e,t){for(let i=e;i<t;i++){let e=this.visibleOptions[i];if(this.getOptionLabel(e).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)))return e}return null},appendContainer(){this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.overlay):document.getElementById(this.appendTo).appendChild(this.overlay))},restoreAppend(){this.overlay&&this.appendTo&&("body"===this.appendTo?document.body.removeChild(this.overlay):document.getElementById(this.appendTo).removeChild(this.overlay))},onFilterChange(e){this.$emit("filter",{originalEvent:e,value:e.target.value}),this.overlayVisible&&this.alignOverlay()},overlayRef(e){this.overlay=e}},computed:{visibleOptions(){return this.filterValue&&this.filterValue.trim().length>0?this.options.filter((e=>this.getOptionLabel(e).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale))>-1)):this.options},containerClass(){return["p-dropdown p-component p-inputwrapper",{"p-disabled":this.disabled,"p-dropdown-clearable":this.showClear&&!this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":this.modelValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-dropdown-label p-inputtext",{"p-placeholder":this.label===this.placeholder,"p-dropdown-label-empty":!this.$slots.value&&("p-emptylabel"===this.label||0===this.label.length)}]},label(){let e=this.getSelectedOption();return e?this.getOptionLabel(e):this.placeholder||"p-emptylabel"},editableInputValue(){let e=this.getSelectedOption();return e?this.getOptionLabel(e):this.modelValue},equalityKey(){return this.optionValue?null:this.dataKey}},directives:{ripple:l(t).default}};const o={class:"p-hidden-accessible"},s=i.createVNode("span",{class:"p-dropdown-trigger-icon pi pi-chevron-down"},null,-1),r={key:0,class:"p-dropdown-header"},a={class:"p-dropdown-filter-container"},d=i.createVNode("span",{class:"p-dropdown-filter-icon pi pi-search"},null,-1),p={class:"p-dropdown-items",role:"listbox"},h={key:0,class:"p-dropdown-empty-message"};return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&l.firstChild?l.insertBefore(n,l.firstChild):l.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-dropdown {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-dropdown-clear-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n.p-dropdown-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dropdown-label {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n    text-overflow: ellipsis;\n    cursor: pointer;\n}\n.p-dropdown-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\ninput.p-dropdown-label  {\n    cursor: default;\n}\n.p-dropdown .p-dropdown-panel {\n    min-width: 100%;\n}\n.p-dropdown-panel {\n    position: absolute;\n}\n.p-dropdown-items-wrapper {\n    overflow: auto;\n}\n.p-dropdown-item {\n    cursor: pointer;\n    font-weight: normal;\n    white-space: nowrap;\n    position: relative;\n    overflow: hidden;\n}\n.p-dropdown-items {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n.p-dropdown-filter {\n    width: 100%;\n}\n.p-dropdown-filter-container {\n    position: relative;\n}\n.p-dropdown-filter-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n.p-fluid .p-dropdown {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-fluid .p-dropdown .p-dropdown-label {\n    width: 1%;\n}\n"),n.render=function(e,t,l,n,c,u){const b=i.resolveDirective("ripple");return i.openBlock(),i.createBlock("div",{ref:"container",class:u.containerClass,onClick:t[11]||(t[11]=e=>u.onClick(e))},[i.createVNode("div",o,[i.createVNode("input",{ref:"focusInput",type:"text",id:l.inputId,readonly:"",disabled:l.disabled,onFocus:t[1]||(t[1]=(...e)=>u.onFocus&&u.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>u.onBlur&&u.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>u.onKeyDown&&u.onKeyDown(...e)),tabindex:l.tabindex,"aria-haspopup":"listbox","aria-expanded":c.overlayVisible,"aria-labelledby":l.ariaLabelledBy},null,40,["id","disabled","tabindex","aria-expanded","aria-labelledby"])]),l.editable?(i.openBlock(),i.createBlock("input",{key:0,type:"text",class:"p-dropdown-label p-inputtext",disabled:l.disabled,onFocus:t[4]||(t[4]=(...e)=>u.onFocus&&u.onFocus(...e)),onBlur:t[5]||(t[5]=(...e)=>u.onBlur&&u.onBlur(...e)),placeholder:l.placeholder,value:u.editableInputValue,onInput:t[6]||(t[6]=(...e)=>u.onEditableInput&&u.onEditableInput(...e)),"aria-haspopup":"listbox","aria-expanded":c.overlayVisible},null,40,["disabled","placeholder","value","aria-expanded"])):i.createCommentVNode("",!0),l.editable?i.createCommentVNode("",!0):(i.openBlock(),i.createBlock("span",{key:1,class:u.labelClass},[i.renderSlot(e.$slots,"value",{value:l.modelValue,placeholder:l.placeholder},(()=>[i.createTextVNode(i.toDisplayString(u.label),1)]))],2)),l.showClear&&null!=l.modelValue?(i.openBlock(),i.createBlock("i",{key:2,class:"p-dropdown-clear-icon pi pi-times",onClick:t[7]||(t[7]=e=>u.onClearClick(e))})):i.createCommentVNode("",!0),i.createVNode("div",{class:"p-dropdown-trigger",role:"button","aria-haspopup":"listbox","aria-expanded":c.overlayVisible},[s],8,["aria-expanded"]),i.createVNode(i.Transition,{name:"p-connected-overlay",onEnter:u.onOverlayEnter,onLeave:u.onOverlayLeave},{default:i.withCtx((()=>[c.overlayVisible?(i.openBlock(),i.createBlock("div",{key:0,ref:u.overlayRef,class:"p-dropdown-panel p-component"},[l.filter?(i.openBlock(),i.createBlock("div",r,[i.createVNode("div",a,[i.withDirectives(i.createVNode("input",{type:"text",ref:"filterInput","onUpdate:modelValue":t[8]||(t[8]=e=>c.filterValue=e),autoComplete:"off",class:"p-dropdown-filter p-inputtext p-component",placeholder:l.filterPlaceholder,onKeydown:t[9]||(t[9]=(...e)=>u.onFilterKeyDown&&u.onFilterKeyDown(...e)),onInput:t[10]||(t[10]=(...e)=>u.onFilterChange&&u.onFilterChange(...e))},null,40,["placeholder"]),[[i.vModelText,c.filterValue]]),d])])):i.createCommentVNode("",!0),i.createVNode("div",{class:"p-dropdown-items-wrapper",style:{"max-height":l.scrollHeight}},[i.createVNode("ul",p,[(i.openBlock(!0),i.createBlock(i.Fragment,null,i.renderList(u.visibleOptions,((t,l)=>i.withDirectives((i.openBlock(),i.createBlock("li",{class:["p-dropdown-item",{"p-highlight":u.isSelected(t),"p-disabled":u.isOptionDisabled(t)}],"aria-label":u.getOptionLabel(t),key:u.getOptionRenderKey(t),onClick:e=>u.onOptionSelect(e,t),role:"option","aria-selected":u.isSelected(t)},[i.renderSlot(e.$slots,"option",{option:t,index:l},(()=>[i.createTextVNode(i.toDisplayString(u.getOptionLabel(t)),1)]))],10,["aria-label","onClick","aria-selected"])),[[b]]))),128)),c.filterValue&&(!u.visibleOptions||u.visibleOptions&&0===u.visibleOptions.length)?(i.openBlock(),i.createBlock("li",h,i.toDisplayString(l.emptyFilterMessage),1)):i.createCommentVNode("",!0)])],4)],512)):i.createCommentVNode("",!0)])),_:1},8,["onEnter","onLeave"])],2)},n}(primevue.utils,primevue.ripple,Vue);