UNPKG

primevue

Version:

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

2 lines (1 loc) 7.71 kB
import{ObjectUtils as e,DomHandler as t}from"primevue/utils";import{FilterService as i}from"primevue/api";import l from"primevue/ripple";import{resolveDirective as o,openBlock as n,createBlock as s,renderSlot as a,createVNode as p,withDirectives as r,vModelText as u,createCommentVNode as d,Fragment as h,renderList as c,createTextVNode as m,toDisplayString as b}from"vue";var f={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.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)},getOptionGroupRenderKey(t){return e.resolveFieldData(t,this.optionGroupLabel)},getOptionGroupLabel(t){return e.resolveFieldData(t,this.optionGroupLabel)},getOptionGroupChildren(t){return e.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.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")||t.hasClass(i,"p-listbox-item-group")?this.findNextItem(i):i:null},findPrevItem(e){let i=e.previousElementSibling;return i?t.hasClass(i,"p-disabled")||t.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 t of this.options){let l=i.filter(this.getOptionGroupChildren(t),this.searchFields,this.filterValue,this.filterMatchMode,this.filterLocale);l&&l.length&&e.push({...t,items:l})}return e}return i.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:l}};const g={class:"p-listbox p-component"},y={key:0,class:"p-listbox-header"},O={class:"p-listbox-filter-container"},v=p("span",{class:"p-listbox-filter-icon pi pi-search"},null,-1),x={class:"p-listbox-list",role:"listbox","aria-multiselectable":"multiple"},S={class:"p-listbox-item-group"},V={key:2,class:"p-listbox-empty-message"},K={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"),f.render=function(e,t,i,l,f,D){const L=o("ripple");return n(),s("div",g,[a(e.$slots,"header",{value:i.modelValue,options:D.visibleOptions}),i.filter?(n(),s("div",y,[p("div",O,[r(p("input",{type:"text",class:"p-listbox-filter p-inputtext p-component","onUpdate:modelValue":t[1]||(t[1]=e=>f.filterValue=e),placeholder:i.filterPlaceholder,onInput:t[2]||(t[2]=(...e)=>D.onFilterChange&&D.onFilterChange(...e))},null,40,["placeholder"]),[[u,f.filterValue]]),v])])):d("",!0),p("div",{class:"p-listbox-list-wrapper",style:i.listStyle},[p("ul",x,[i.optionGroupLabel?(n(!0),s(h,{key:1},c(D.visibleOptions,((i,l)=>(n(),s(h,{key:D.getOptionGroupRenderKey(i)},[p("li",S,[a(e.$slots,"optiongroup",{option:i,index:l},(()=>[m(b(D.getOptionGroupLabel(i)),1)]))]),(n(!0),s(h,null,c(D.getOptionGroupChildren(i),((i,l)=>r((n(),s("li",{tabindex:D.isOptionDisabled(i)?null:"0",class:["p-listbox-item",{"p-highlight":D.isSelected(i),"p-disabled":D.isOptionDisabled(i)}],key:D.getOptionRenderKey(i),onClick:e=>D.onOptionSelect(e,i),onTouchend:t[4]||(t[4]=e=>D.onOptionTouchEnd()),onKeydown:e=>D.onOptionKeyDown(e,i),role:"option","aria-label":D.getOptionLabel(i),"aria-selected":D.isSelected(i)},[a(e.$slots,"option",{option:i,index:l},(()=>[m(b(D.getOptionLabel(i)),1)]))],42,["tabindex","onClick","onKeydown","aria-label","aria-selected"])),[[L]]))),128))],64)))),128)):(n(!0),s(h,{key:0},c(D.visibleOptions,((i,l)=>r((n(),s("li",{tabindex:D.isOptionDisabled(i)?null:"0",class:["p-listbox-item",{"p-highlight":D.isSelected(i),"p-disabled":D.isOptionDisabled(i)}],key:D.getOptionRenderKey(i),onClick:e=>D.onOptionSelect(e,i),onTouchend:t[3]||(t[3]=e=>D.onOptionTouchEnd()),onKeydown:e=>D.onOptionKeyDown(e,i),role:"option","aria-label":D.getOptionLabel(i),"aria-selected":D.isSelected(i)},[a(e.$slots,"option",{option:i,index:l},(()=>[m(b(D.getOptionLabel(i)),1)]))],42,["tabindex","onClick","onKeydown","aria-label","aria-selected"])),[[L]]))),128)),f.filterValue&&(!D.visibleOptions||D.visibleOptions&&0===D.visibleOptions.length)?(n(),s("li",V,[a(e.$slots,"emptyfilter",{},(()=>[m(b(D.emptyFilterMessageText),1)]))])):!i.options||i.options&&0===i.options.length?(n(),s("li",K,[a(e.$slots,"empty",{},(()=>[m(b(D.emptyMessageText),1)]))])):d("",!0)])],4),a(e.$slots,"footer",{value:i.modelValue,options:D.visibleOptions})])};export default f;