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"),i=require("primevue/ripple"),l=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={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}},optionTouched:!1,data:()=>({filterValue: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)},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 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.ObjectUtils.equals(t,l,this.equalityKey)){i=!0;break}}else i=e.ObjectUtils.equals(this.modelValue,l,this.equalityKey);return i},removeOption(t){return this.modelValue.filter((i=>!e.ObjectUtils.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(t){let i=t.nextElementSibling;return i?e.DomHandler.hasClass(i,"p-disabled")||e.DomHandler.hasClass(i,"p-listbox-item-group")?this.findNextItem(i):i:null},findPrevItem(t){let i=t.previousElementSibling;return i?e.DomHandler.hasClass(i,"p-disabled")||e.DomHandler.hasClass(i,"p-listbox-item-group")?this.findPrevItem(i):i:null},onFilterChange(e){this.$emit("filter",{originalEvent:e,value:e.target.value})}},computed:{visibleOptions(){if(this.filterValue){if(this.optionGroupLabel){let e=[];for(let i of this.options){let l=t.FilterService.filter(this.getOptionGroupChildren(i),this.searchFields,this.filterValue,this.filterMatchMode,this.filterLocale);l&&l.length&&e.push({...i,items:l})}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}},directives:{ripple:o(i).default}};const s={class:"p-listbox p-component"},r={key:0,class:"p-listbox-header"},a={class:"p-listbox-filter-container"},p=l.createVNode("span",{class:"p-listbox-filter-icon pi pi-search"},null,-1),d={class:"p-listbox-list",role:"listbox","aria-multiselectable":"multiple"},u={class:"p-listbox-item-group"},c={key:2,class:"p-listbox-empty-message"},h={key:3,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-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"),n.render=function(e,t,i,o,n,m){const b=l.resolveDirective("ripple");return l.openBlock(),l.createBlock("div",s,[l.renderSlot(e.$slots,"header",{value:i.modelValue,options:m.visibleOptions}),i.filter?(l.openBlock(),l.createBlock("div",r,[l.createVNode("div",a,[l.withDirectives(l.createVNode("input",{type:"text",class:"p-listbox-filter p-inputtext p-component","onUpdate:modelValue":t[1]||(t[1]=e=>n.filterValue=e),placeholder:i.filterPlaceholder,onInput:t[2]||(t[2]=(...e)=>m.onFilterChange&&m.onFilterChange(...e))},null,40,["placeholder"]),[[l.vModelText,n.filterValue]]),p])])):l.createCommentVNode("",!0),l.createVNode("div",{class:"p-listbox-list-wrapper",style:i.listStyle},[l.createVNode("ul",d,[i.optionGroupLabel?(l.openBlock(!0),l.createBlock(l.Fragment,{key:1},l.renderList(m.visibleOptions,((i,o)=>(l.openBlock(),l.createBlock(l.Fragment,{key:m.getOptionGroupRenderKey(i)},[l.createVNode("li",u,[l.renderSlot(e.$slots,"optiongroup",{option:i,index:o},(()=>[l.createTextVNode(l.toDisplayString(m.getOptionGroupLabel(i)),1)]))]),(l.openBlock(!0),l.createBlock(l.Fragment,null,l.renderList(m.getOptionGroupChildren(i),((i,o)=>l.withDirectives((l.openBlock(),l.createBlock("li",{tabindex:m.isOptionDisabled(i)?null:"0",class:["p-listbox-item",{"p-highlight":m.isSelected(i),"p-disabled":m.isOptionDisabled(i)}],key:m.getOptionRenderKey(i),onClick:e=>m.onOptionSelect(e,i),onTouchend:t[4]||(t[4]=e=>m.onOptionTouchEnd()),onKeydown:e=>m.onOptionKeyDown(e,i),role:"option","aria-label":m.getOptionLabel(i),"aria-selected":m.isSelected(i)},[l.renderSlot(e.$slots,"option",{option:i,index:o},(()=>[l.createTextVNode(l.toDisplayString(m.getOptionLabel(i)),1)]))],42,["tabindex","onClick","onKeydown","aria-label","aria-selected"])),[[b]]))),128))],64)))),128)):(l.openBlock(!0),l.createBlock(l.Fragment,{key:0},l.renderList(m.visibleOptions,((i,o)=>l.withDirectives((l.openBlock(),l.createBlock("li",{tabindex:m.isOptionDisabled(i)?null:"0",class:["p-listbox-item",{"p-highlight":m.isSelected(i),"p-disabled":m.isOptionDisabled(i)}],key:m.getOptionRenderKey(i),onClick:e=>m.onOptionSelect(e,i),onTouchend:t[3]||(t[3]=e=>m.onOptionTouchEnd()),onKeydown:e=>m.onOptionKeyDown(e,i),role:"option","aria-label":m.getOptionLabel(i),"aria-selected":m.isSelected(i)},[l.renderSlot(e.$slots,"option",{option:i,index:o},(()=>[l.createTextVNode(l.toDisplayString(m.getOptionLabel(i)),1)]))],42,["tabindex","onClick","onKeydown","aria-label","aria-selected"])),[[b]]))),128)),n.filterValue&&(!m.visibleOptions||m.visibleOptions&&0===m.visibleOptions.length)?(l.openBlock(),l.createBlock("li",c,[l.renderSlot(e.$slots,"emptyfilter",{},(()=>[l.createTextVNode(l.toDisplayString(m.emptyFilterMessageText),1)]))])):!i.options||i.options&&0===i.options.length?(l.openBlock(),l.createBlock("li",h,[l.renderSlot(e.$slots,"empty",{},(()=>[l.createTextVNode(l.toDisplayString(m.emptyMessageText),1)]))])):l.createCommentVNode("",!0)])],4),l.renderSlot(e.$slots,"footer",{value:i.modelValue,options:m.visibleOptions})])},module.exports=n;