primevue/listbox/listbox.cjs.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

"use strict";var e=require("primevue/utils"),t=require("primevue/api"),l=require("primevue/ripple"),i=require("primevue/virtualscroller"),o=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(l),r=n(i),a={name:"Listbox",emits:["update:modelValue","change","filter"],props:{modelValue:null,options:Array,optionLabel:null,optionValue:null,optionDisabled:null,optionGroupLabel:null,optionGroupChildren:null,listStyle:null,disabled:Boolean,dataKey:null,multiple:Boolean,metaKeySelection:Boolean,filter:Boolean,filterPlaceholder:String,filterLocale:String,filterMatchMode:{type:String,default:"contains"},filterFields:{type:Array,default:null},emptyFilterMessage:{type:String,default:null},emptyMessage:{type:String,default:null},virtualScrollerOptions:{type:Object,default:null}},optionTouched:!1,virtualScroller:null,data:()=>({filterValue:null}),methods:{getOptionIndex(e,t){return this.virtualScrollerDisabled?e:t&&t(e).index},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)},getOptionGroupRenderKey(t){return e.ObjectUtils.resolveFieldData(t,this.optionGroupLabel)},getOptionGroupLabel(t){return e.ObjectUtils.resolveFieldData(t,this.optionGroupLabel)},getOptionGroupChildren(t){return e.ObjectUtils.resolveFieldData(t,this.optionGroupChildren)},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 l=this.isSelected(t),i=!1,o=null;if(!this.optionTouched&&this.metaKeySelection){let n=e.metaKey||e.ctrlKey;l?n&&(o=null,i=!0):(o=this.getOptionValue(t),i=!0)}else o=l?null:this.getOptionValue(t),i=!0;i&&this.updateModel(e,o)},onOptionSelectMultiple(e,t){let l=this.isSelected(t),i=!1,o=null;if(!this.optionTouched&&this.metaKeySelection){let n=e.metaKey||e.ctrlKey;l?(o=n?this.removeOption(t):[this.getOptionValue(t)],i=!0):(o=n&&this.modelValue||[],o=[...o,this.getOptionValue(t)],i=!0)}else o=l?this.removeOption(t):[...this.modelValue||[],this.getOptionValue(t)],i=!0;i&&this.updateModel(e,o)},isSelected(t){let l=!1,i=this.getOptionValue(t);if(this.multiple){if(this.modelValue)for(let t of this.modelValue)if(e.ObjectUtils.equals(t,i,this.equalityKey)){l=!0;break}}else l=e.ObjectUtils.equals(this.modelValue,i,this.equalityKey);return l},removeOption(t){return this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.getOptionValue(t),this.equalityKey)))},updateModel(e,t){this.$emit("update:modelValue",t),this.$emit("change",{originalEvent:e,value:t})},onOptionKeyDown(e,t){let l=e.currentTarget;switch(e.which){case 40:var i=this.findNextItem(l);i&&i.focus(),e.preventDefault();break;case 38:var o=this.findPrevItem(l);o&&o.focus(),e.preventDefault();break;case 13:this.onOptionSelect(e,t),e.preventDefault()}},findNextItem(t){let l=t.nextElementSibling;return l?e.DomHandler.hasClass(l,"p-disabled")||e.DomHandler.hasClass(l,"p-listbox-item-group")?this.findNextItem(l):l:null},findPrevItem(t){let l=t.previousElementSibling;return l?e.DomHandler.hasClass(l,"p-disabled")||e.DomHandler.hasClass(l,"p-listbox-item-group")?this.findPrevItem(l):l:null},onFilterChange(e){this.$emit("filter",{originalEvent:e,value:e.target.value})},virtualScrollerRef(e){this.virtualScroller=e}},computed:{visibleOptions(){if(this.filterValue){if(this.optionGroupLabel){let e=[];for(let l of this.options){let i=t.FilterService.filter(this.getOptionGroupChildren(l),this.searchFields,this.filterValue,this.filterMatchMode,this.filterLocale);i&&i.length&&e.push({...l,items:i})}return e}return t.FilterService.filter(this.options,this.searchFields,this.filterValue,"contains",this.filterLocale)}return this.options},equalityKey(){return this.optionValue?null:this.dataKey},searchFields(){return this.filterFields||[this.optionLabel]},emptyFilterMessageText(){return this.emptyFilterMessage||this.$primevue.config.locale.emptyFilterMessage},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},virtualScrollerDisabled(){return!this.virtualScrollerOptions}},directives:{ripple:s.default},components:{VirtualScroller:r.default}};const p={class:"p-listbox p-component"},d={key:0,class:"p-listbox-header"},u={class:"p-listbox-filter-container"},c=["placeholder"],h=o.createElementVNode("span",{class:"p-listbox-filter-icon pi pi-search"},null,-1),m=["tabindex","onClick","onKeydown","aria-label","aria-selected"],b={class:"p-listbox-item-group"},g=["tabindex","onClick","onKeydown","aria-label","aria-selected"],y={key:2,class:"p-listbox-empty-message"},f={key:3,class:"p-listbox-empty-message"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===l&&i.firstChild?i.insertBefore(o,i.firstChild):i.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-item-group {\n    cursor: auto;\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"),a.render=function(e,t,l,i,n,s){const r=o.resolveComponent("VirtualScroller"),a=o.resolveDirective("ripple");return o.openBlock(),o.createElementBlock("div",p,[o.renderSlot(e.$slots,"header",{value:l.modelValue,options:s.visibleOptions}),l.filter?(o.openBlock(),o.createElementBlock("div",d,[o.createElementVNode("div",u,[o.withDirectives(o.createElementVNode("input",{type:"text",class:"p-listbox-filter p-inputtext p-component","onUpdate:modelValue":t[0]||(t[0]=e=>n.filterValue=e),placeholder:l.filterPlaceholder,onInput:t[1]||(t[1]=(...e)=>s.onFilterChange&&s.onFilterChange(...e))},null,40,c),[[o.vModelText,n.filterValue]]),h])])):o.createCommentVNode("",!0),o.createElementVNode("div",{class:"p-listbox-list-wrapper",style:o.normalizeStyle(l.listStyle)},[o.createVNode(r,o.mergeProps({ref:s.virtualScrollerRef},l.virtualScrollerOptions,{style:l.listStyle,items:s.visibleOptions,disabled:s.virtualScrollerDisabled}),o.createSlots({content:o.withCtx((({styleClass:i,contentRef:r,items:p,getItemOptions:d,contentStyle:u})=>[o.createElementVNode("ul",{ref:r,class:o.normalizeClass(["p-listbox-list",i]),style:o.normalizeStyle(u),role:"listbox","aria-multiselectable":"multiple"},[l.optionGroupLabel?(o.openBlock(!0),o.createElementBlock(o.Fragment,{key:1},o.renderList(p,((l,i)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:s.getOptionGroupRenderKey(l)},[o.createElementVNode("li",b,[o.renderSlot(e.$slots,"optiongroup",{option:l,index:s.getOptionIndex(i,d)},(()=>[o.createTextVNode(o.toDisplayString(s.getOptionGroupLabel(l)),1)]))]),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(s.getOptionGroupChildren(l),((l,i)=>o.withDirectives((o.openBlock(),o.createElementBlock("li",{tabindex:s.isOptionDisabled(l)?null:"0",class:o.normalizeClass(["p-listbox-item",{"p-highlight":s.isSelected(l),"p-disabled":s.isOptionDisabled(l)}]),key:s.getOptionRenderKey(l),onClick:e=>s.onOptionSelect(e,l),onTouchend:t[3]||(t[3]=e=>s.onOptionTouchEnd()),onKeydown:e=>s.onOptionKeyDown(e,l),role:"option","aria-label":s.getOptionLabel(l),"aria-selected":s.isSelected(l)},[o.renderSlot(e.$slots,"option",{option:l,index:s.getOptionIndex(i,d)},(()=>[o.createTextVNode(o.toDisplayString(s.getOptionLabel(l)),1)]))],42,g)),[[a]]))),128))],64)))),128)):(o.openBlock(!0),o.createElementBlock(o.Fragment,{key:0},o.renderList(p,((l,i)=>o.withDirectives((o.openBlock(),o.createElementBlock("li",{tabindex:s.isOptionDisabled(l)?null:"0",class:o.normalizeClass(["p-listbox-item",{"p-highlight":s.isSelected(l),"p-disabled":s.isOptionDisabled(l)}]),key:s.getOptionRenderKey(l),onClick:e=>s.onOptionSelect(e,l),onTouchend:t[2]||(t[2]=e=>s.onOptionTouchEnd()),onKeydown:e=>s.onOptionKeyDown(e,l),role:"option","aria-label":s.getOptionLabel(l),"aria-selected":s.isSelected(l)},[o.renderSlot(e.$slots,"option",{option:l,index:s.getOptionIndex(i,d)},(()=>[o.createTextVNode(o.toDisplayString(s.getOptionLabel(l)),1)]))],42,m)),[[a]]))),128)),n.filterValue&&(!p||p&&0===p.length)?(o.openBlock(),o.createElementBlock("li",y,[o.renderSlot(e.$slots,"emptyfilter",{},(()=>[o.createTextVNode(o.toDisplayString(s.emptyFilterMessageText),1)]))])):!l.options||l.options&&0===l.options.length?(o.openBlock(),o.createElementBlock("li",f,[o.renderSlot(e.$slots,"empty",{},(()=>[o.createTextVNode(o.toDisplayString(s.emptyMessageText),1)]))])):o.createCommentVNode("",!0)],6)])),_:2},[e.$slots.loader?{name:"loader",fn:o.withCtx((({options:t})=>[o.renderSlot(e.$slots,"loader",{options:t})]))}:void 0]),1040,["style","items","disabled"])],4),o.renderSlot(e.$slots,"footer",{value:l.modelValue,options:s.visibleOptions})])},module.exports=a;