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) 4.14 kB
this.primevue=this.primevue||{},this.primevue.selectbutton=function(e,t,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"SelectButton",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=t.DomHandler.find(this.$refs.container,".p-button"),l=t.DomHandler.findSingle(this.$refs.container,".p-highlight");for(let i=0;i<e.length;i++)(t.DomHandler.hasClass(e[i],"p-highlight")&&t.ObjectUtils.equals(e[i],l)||null===l&&0==i)&&(this.focusedIndex=i)},getOptionLabel(e){return this.optionLabel?t.ObjectUtils.resolveFieldData(e,this.optionLabel):e},getOptionValue(e){return this.optionValue?t.ObjectUtils.resolveFieldData(e,this.optionValue):e},getOptionRenderKey(e){return this.dataKey?t.ObjectUtils.resolveFieldData(e,this.dataKey):this.getOptionLabel(e)},isOptionDisabled(e){return!!this.optionDisabled&&t.ObjectUtils.resolveFieldData(e,this.optionDisabled)},onOptionSelect(e,l,i){if(this.disabled||this.isOptionDisabled(l))return;let n=this.isSelected(l);if(n&&this.unselectable)return;let a,s=this.getOptionValue(l);a=this.multiple?n?this.modelValue.filter((e=>!t.ObjectUtils.equals(e,s,this.equalityKey))):this.modelValue?[...this.modelValue,s]:[s]:n?null:s,this.focusedIndex=i,this.$emit("update:modelValue",a),this.$emit("change",{event:e,value:a})},isSelected(e){let l=!1,i=this.getOptionValue(e);if(this.multiple){if(this.modelValue)for(let e of this.modelValue)if(t.ObjectUtils.equals(e,i,this.equalityKey)){l=!0;break}}else l=t.ObjectUtils.equals(this.modelValue,i,this.equalityKey);return l},onKeydown(e,t,l){switch(e.code){case"Space":this.onOptionSelect(e,t,l),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 l,i;for(let e=0;e<=this.$refs.container.children.length-1;e++)"0"===this.$refs.container.children[e].getAttribute("tabindex")&&(l={elem:this.$refs.container.children[e],index:e});i="prev"===t?0===l.index?this.$refs.container.children.length-1:l.index-1:l.index===this.$refs.container.children.length-1?0:l.index+1,this.focusedIndex=i,this.$refs.container.children[i].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:i(e).default}};const a=["aria-labelledby"],s=["tabindex","aria-label","role","aria-checked","aria-disabled","onClick","onKeydown","onBlur"],o={class:"p-button-label"};return n.render=function(e,t,i,n,r,d){const u=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("div",{ref:"container",class:l.normalizeClass(d.containerClass),role:"group","aria-labelledby":e.ariaLabelledby},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(i.options,((n,a)=>l.withDirectives((l.openBlock(),l.createElementBlock("div",{key:d.getOptionRenderKey(n),tabindex:a===r.focusedIndex?"0":"-1","aria-label":d.getOptionLabel(n),role:i.multiple?"checkbox":"radio","aria-checked":d.isSelected(n),"aria-disabled":i.optionDisabled,class:l.normalizeClass(d.getButtonClass(n,a)),onClick:e=>d.onOptionSelect(e,n,a),onKeydown:e=>d.onKeydown(e,n,a),onFocus:t[0]||(t[0]=e=>d.onFocus(e)),onBlur:e=>d.onBlur(e,n)},[l.renderSlot(e.$slots,"option",{option:n,index:a},(()=>[l.createElementVNode("span",o,l.toDisplayString(d.getOptionLabel(n)),1)]))],42,s)),[[u]]))),128))],10,a)},n}(primevue.ripple,primevue.utils,Vue);