primevue/selectbutton/selectbutton.esm.min.js

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

import e from"primevue/basecomponent";import t from"primevue/ripple";import{DomHandler as i,ObjectUtils as l}from"primevue/utils";import{resolveDirective as n,openBlock as a,createElementBlock as o,mergeProps as s,Fragment as r,renderList as d,withDirectives as u,renderSlot as p,createElementVNode as h,toDisplayString as c}from"vue";var b={name:"SelectButton",extends:e,emits:["update:modelValue","focus","blur","change"],props:{modelValue:null,options:Array,optionLabel:null,optionValue:null,optionDisabled:null,multiple:Boolean,unselectable:{type:Boolean,default:!1},disabled:Boolean,dataKey:null,"aria-labelledby":{type:String,default:null}},data:()=>({focusedIndex:0}),mounted(){this.defaultTabIndexes()},methods:{defaultTabIndexes(){let e=i.find(this.$refs.container,".p-button"),t=i.findSingle(this.$refs.container,".p-highlight");for(let n=0;n<e.length;n++)(i.hasClass(e[n],"p-highlight")&&l.equals(e[n],t)||null===t&&0==n)&&(this.focusedIndex=n)},getOptionLabel(e){return this.optionLabel?l.resolveFieldData(e,this.optionLabel):e},getOptionValue(e){return this.optionValue?l.resolveFieldData(e,this.optionValue):e},getOptionRenderKey(e){return this.dataKey?l.resolveFieldData(e,this.dataKey):this.getOptionLabel(e)},getPTOptions(e,t){return this.ptm(t,{context:{active:this.isSelected(e),disabled:this.isOptionDisabled(e)}})},isOptionDisabled(e){return!!this.optionDisabled&&l.resolveFieldData(e,this.optionDisabled)},onOptionSelect(e,t,i){if(this.disabled||this.isOptionDisabled(t))return;let n=this.isSelected(t);if(n&&this.unselectable)return;let a,o=this.getOptionValue(t);a=this.multiple?n?this.modelValue.filter((e=>!l.equals(e,o,this.equalityKey))):this.modelValue?[...this.modelValue,o]:[o]:n?null:o,this.focusedIndex=i,this.$emit("update:modelValue",a),this.$emit("change",{event:e,value:a})},isSelected(e){let t=!1,i=this.getOptionValue(e);if(this.multiple){if(this.modelValue)for(let e of this.modelValue)if(l.equals(e,i,this.equalityKey)){t=!0;break}}else t=l.equals(this.modelValue,i,this.equalityKey);return t},onKeydown(e,t,i){switch(e.code){case"Space":this.onOptionSelect(e,t,i),e.preventDefault();break;case"ArrowDown":case"ArrowRight":this.changeTabIndexes(e,"next"),e.preventDefault();break;case"ArrowUp":case"ArrowLeft":this.changeTabIndexes(e,"prev"),e.preventDefault()}},changeTabIndexes(e,t){let i,l;for(let e=0;e<=this.$refs.container.children.length-1;e++)"0"===this.$refs.container.children[e].getAttribute("tabindex")&&(i={elem:this.$refs.container.children[e],index:e});l="prev"===t?0===i.index?this.$refs.container.children.length-1:i.index-1:i.index===this.$refs.container.children.length-1?0:i.index+1,this.focusedIndex=l,this.$refs.container.children[l].focus()},onFocus(e){this.$emit("focus",e)},onBlur(e,t){e.target&&e.relatedTarget&&e.target.parentElement!==e.relatedTarget.parentElement&&this.defaultTabIndexes(),this.$emit("blur",e,t)},getButtonClass(e){return["p-button p-component",{"p-highlight":this.isSelected(e),"p-disabled":this.isOptionDisabled(e)}]}},computed:{containerClass(){return["p-selectbutton p-buttonset p-component",{"p-disabled":this.disabled}]},equalityKey(){return this.optionValue?null:this.dataKey}},directives:{ripple:t}};const f=["aria-labelledby"],m=["tabindex","aria-label","role","aria-checked","aria-disabled","onClick","onKeydown","onBlur"];b.render=function(e,t,i,l,b,g){const y=n("ripple");return a(),o("div",s({ref:"container",class:g.containerClass,role:"group","aria-labelledby":e.ariaLabelledby},e.ptm("root")),[(a(!0),o(r,null,d(i.options,((l,n)=>u((a(),o("div",s({key:g.getOptionRenderKey(l),tabindex:n===b.focusedIndex?"0":"-1","aria-label":g.getOptionLabel(l),role:i.multiple?"checkbox":"radio","aria-checked":g.isSelected(l),"aria-disabled":i.optionDisabled,class:g.getButtonClass(l,n),onClick:e=>g.onOptionSelect(e,l,n),onKeydown:e=>g.onKeydown(e,l,n),onFocus:t[0]||(t[0]=e=>g.onFocus(e)),onBlur:e=>g.onBlur(e,l)},g.getPTOptions(l,"button")),[p(e.$slots,"option",{option:l,index:n},(()=>[h("span",s({class:"p-button-label"},g.getPTOptions(l,"label")),c(g.getOptionLabel(l)),17)]))],16,m)),[[y]]))),128))],16,f)};export{b as default};