primevue/listbox/listbox.esm.min.js

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

import{ObjectUtils as e,DomHandler as t}from"primevue/utils";import i from"primevue/ripple";import{resolveDirective as l,openBlock as o,createBlock as n,createVNode as s,withDirectives as a,vModelText as p,createCommentVNode as r,Fragment as u,renderList as d,renderSlot as h,createTextVNode as c,toDisplayString as m}from"vue";var f={emits:["update:modelValue","change","filter"],props:{modelValue:null,options:Array,optionLabel:null,optionValue:null,optionDisabled:null,listStyle:null,disabled:Boolean,dataKey:null,multiple:Boolean,metaKeySelection:Boolean,filter:Boolean,filterPlaceholder:String,filterLocale:String,emptyFilterMessage:{type:String,default:"No results found"}},optionTouched:!1,data:()=>({filterValue:null}),methods:{getOptionLabel(t){return this.optionLabel?e.resolveFieldData(t,this.optionLabel):t},getOptionValue(t){return this.optionValue?e.resolveFieldData(t,this.optionValue):t},getOptionRenderKey(t){return this.dataKey?e.resolveFieldData(t,this.dataKey):this.getOptionLabel(t)},isOptionDisabled(t){return!!this.optionDisabled&&e.resolveFieldData(t,this.optionDisabled)},onOptionSelect(e,t){this.disabled||this.isOptionDisabled(t)||(this.multiple?this.onOptionSelectMultiple(e,t):this.onOptionSelectSingle(e,t),this.optionTouched=!1)},onOptionTouchEnd(){this.disabled||(this.optionTouched=!0)},onOptionSelectSingle(e,t){let i=this.isSelected(t),l=!1,o=null;if(!this.optionTouched&&this.metaKeySelection){let n=e.metaKey||e.ctrlKey;i?n&&(o=null,l=!0):(o=this.getOptionValue(t),l=!0)}else o=i?null:this.getOptionValue(t),l=!0;l&&this.updateModel(e,o)},onOptionSelectMultiple(e,t){let i=this.isSelected(t),l=!1,o=null;if(!this.optionTouched&&this.metaKeySelection){let n=e.metaKey||e.ctrlKey;i?(o=n?this.removeOption(t):[this.getOptionValue(t)],l=!0):(o=n&&this.modelValue||[],o=[...o,this.getOptionValue(t)],l=!0)}else o=i?this.removeOption(t):[...this.modelValue||[],this.getOptionValue(t)],l=!0;l&&this.updateModel(e,o)},isSelected(t){let i=!1,l=this.getOptionValue(t);if(this.multiple){if(this.modelValue)for(let t of this.modelValue)if(e.equals(t,l,this.equalityKey)){i=!0;break}}else i=e.equals(this.modelValue,l,this.equalityKey);return i},removeOption(t){return this.modelValue.filter((i=>!e.equals(i,this.getOptionValue(t),this.equalityKey)))},updateModel(e,t){this.$emit("update:modelValue",t),this.$emit("change",{originalEvent:e,value:t})},onOptionKeyDown(e,t){let i=e.currentTarget;switch(e.which){case 40:var l=this.findNextItem(i);l&&l.focus(),e.preventDefault();break;case 38:var o=this.findPrevItem(i);o&&o.focus(),e.preventDefault();break;case 13:this.onOptionSelect(e,t),e.preventDefault()}},findNextItem(e){let i=e.nextElementSibling;return i?t.hasClass(i,"p-disabled")?this.findNextOption(i):i:null},findPrevItem(e){let i=e.previousElementSibling;return i?t.hasClass(i,"p-disabled")?this.findPrevItem(i):i:null},onFilterChange(e){this.$emit("filter",{originalEvent:e,value:e.target.value})}},computed:{visibleOptions(){return this.filterValue?this.options.filter((e=>this.getOptionLabel(e).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale))>-1)):this.options},equalityKey(){return this.optionValue?null:this.dataKey}},directives:{ripple:i}};const b={class:"p-listbox p-component"},y={key:0,class:"p-listbox-header"},g={class:"p-listbox-filter-container"},v=s("span",{class:"p-listbox-filter-icon pi pi-search"},null,-1),O={class:"p-listbox-list",role:"listbox","aria-multiselectable":"multiple"},x={key:0,class:"p-listbox-empty-message"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&l.firstChild?l.insertBefore(o,l.firstChild):l.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-listbox-list-wrapper {\n    overflow: auto;\n}\n.p-listbox-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n}\n.p-listbox-item {\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n}\n.p-listbox-filter-container {\n    position: relative;\n}\n.p-listbox-filter-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n.p-listbox-filter {\n    width: 100%;\n}\n"),f.render=function(e,t,i,f,V,S){const K=l("ripple");return o(),n("div",b,[i.filter?(o(),n("div",y,[s("div",g,[a(s("input",{type:"text",class:"p-listbox-filter p-inputtext p-component","onUpdate:modelValue":t[1]||(t[1]=e=>V.filterValue=e),placeholder:i.filterPlaceholder,onInput:t[2]||(t[2]=(...e)=>S.onFilterChange&&S.onFilterChange(...e))},null,40,["placeholder"]),[[p,V.filterValue]]),v])])):r("",!0),s("div",{class:"p-listbox-list-wrapper",style:i.listStyle},[s("ul",O,[(o(!0),n(u,null,d(S.visibleOptions,((i,l)=>a((o(),n("li",{tabindex:S.isOptionDisabled(i)?null:"0",class:["p-listbox-item",{"p-highlight":S.isSelected(i),"p-disabled":S.isOptionDisabled(i)}],"aria-label":S.getOptionLabel(i),key:S.getOptionRenderKey(i),onClick:e=>S.onOptionSelect(e,i),onTouchend:t[3]||(t[3]=e=>S.onOptionTouchEnd()),onKeydown:e=>S.onOptionKeyDown(e,i),role:"option","aria-selected":S.isSelected(i)},[h(e.$slots,"option",{option:i,index:l},(()=>[c(m(S.getOptionLabel(i)),1)]))],42,["tabindex","aria-label","onClick","onKeydown","aria-selected"])),[[K]]))),128)),V.filterValue&&(!S.visibleOptions||S.visibleOptions&&0===S.visibleOptions.length)?(o(),n("li",x,m(i.emptyFilterMessage),1)):r("",!0)])],4)])};export default f;