primevue 3.15.0 → 3.16.2

package/selectbutton/selectbutton.cjs.js

@@ -18,11 +18,36 @@ var script = {
         optionValue: null,
         optionDisabled: null,
 		multiple: Boolean,
+        unselectable: {
+            type: Boolean,
+            default: true
+        },
         disabled: Boolean,
         dataKey: null,
-        ariaLabelledBy: null
+        'aria-labelledby': {
+            type: String,
+			default: null
+        }
+    },
+    data() {
+        return {
+            focusedIndex: 0
+        }
+    },
+    mounted() {
+        this.defaultTabIndexes();
     },
     methods: {
+        defaultTabIndexes() {
+            let opts = utils.DomHandler.find(this.$refs.container, '.p-button');
+            let firstHighlight = utils.DomHandler.findSingle(this.$refs.container, '.p-highlight');
+
+            for (let i = 0; i < opts.length; i++) {
+                if ((utils.DomHandler.hasClass(opts[i], 'p-highlight') && utils.ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
+                    this.focusedIndex = i;
+                }
+            }
+        },
         getOptionLabel(option) {
             return this.optionLabel ? utils.ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
         },
@@ -35,25 +60,30 @@ var script = {
         isOptionDisabled(option) {
             return this.optionDisabled ? utils.ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
-        onOptionSelect(event, option) {
+        onOptionSelect(event, option, index) {
             if (this.disabled || this.isOptionDisabled(option)) {
                 return;
             }
 
             let selected = this.isSelected(option);
+            if (selected && !this.unselectable) {
+                return;
+            }
+
             let optionValue = this.getOptionValue(option);
             let newValue;
 
-            if(this.multiple) {
+            if (this.multiple) {
                 if (selected)
                     newValue = this.modelValue.filter(val => !utils.ObjectUtils.equals(val, optionValue, this.equalityKey));
                 else
                     newValue = this.modelValue ? [...this.modelValue, optionValue]: [optionValue];
             }
             else {
-                newValue = optionValue;
+                newValue = selected ? null : optionValue;
             }
 
+            this.focusedIndex = index;
             this.$emit('update:modelValue', newValue);
             this.$emit('change', {event: event, value: newValue});
         },
@@ -77,11 +107,56 @@ var script = {
 
             return selected;
         },
+        onKeydown(event, option, index) {
+            switch (event.code) {
+                case 'Space': {
+                    this.onOptionSelect(event, option, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown':
+                case 'ArrowRight': {
+                    this.changeTabIndexes(event, 'next');
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp':
+                case 'ArrowLeft': {
+                    this.changeTabIndexes(event, 'prev');
+                    event.preventDefault();
+                    break;
+                }
+            }
+        },
+        changeTabIndexes(event, direction) {
+            let firstTabableChild, index;
+            for (let i = 0; i <= this.$refs.container.children.length - 1; i++) {
+                if (this.$refs.container.children[i].getAttribute('tabindex') === '0')
+                    firstTabableChild = {elem: this.$refs.container.children[i], index: i};
+            }
+
+            if (direction === 'prev') {
+                if (firstTabableChild.index === 0) index = this.$refs.container.children.length - 1;
+                else index = firstTabableChild.index - 1;
+            }
+            else {
+                if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0;
+                else index = firstTabableChild.index + 1;
+            }
+
+            this.focusedIndex = index;
+            this.$refs.container.children[index].focus();
+        },
         onFocus(event) {
             this.$emit('focus', event);
         },
-        onBlur(event) {
-            this.$emit('blur', event);
+        onBlur(event, option) {
+            if (event.target && event.relatedTarget && event.target.parentElement !== event.relatedTarget.parentElement) {
+                this.defaultTabIndexes();
+            }
+            this.$emit('blur', event, option);
         },
         getButtonClass(option) {
             return ['p-button p-component', {
@@ -105,44 +180,44 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["aria-label", "aria-pressed", "onClick", "onKeydown", "tabindex", "aria-labelledby"];
-const _hoisted_2 = { class: "p-button-label" };
+const _hoisted_1 = ["aria-labelledby"];
+const _hoisted_2 = ["tabindex", "aria-label", "role", "aria-checked", "aria-disabled", "onClick", "onKeydown", "onBlur"];
+const _hoisted_3 = { class: "p-button-label" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return (vue.openBlock(), vue.createElementBlock("div", {
+    ref: "container",
     class: vue.normalizeClass($options.containerClass),
-    role: "group"
+    role: "group",
+    "aria-labelledby": _ctx.ariaLabelledby
   }, [
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.options, (option, i) => {
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
         key: $options.getOptionRenderKey(option),
+        tabindex: i === $data.focusedIndex ? '0' : '-1',
         "aria-label": $options.getOptionLabel(option),
-        role: "button",
-        "aria-pressed": $options.isSelected(option),
+        role: $props.multiple ? 'checkbox' : 'radio',
+        "aria-checked": $options.isSelected(option),
+        "aria-disabled": $props.optionDisabled,
+        class: vue.normalizeClass($options.getButtonClass(option, i)),
         onClick: $event => ($options.onOptionSelect($event, option, i)),
-        onKeydown: [
-          vue.withKeys(vue.withModifiers($event => ($options.onOptionSelect($event, option, i)), ["prevent"]), ["enter"]),
-          vue.withKeys(vue.withModifiers($event => ($options.onOptionSelect($event, option)), ["prevent"]), ["space"])
-        ],
-        tabindex: $options.isOptionDisabled(option) ? null : '0',
+        onKeydown: $event => ($options.onKeydown($event, option, i)),
         onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
-        onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
-        "aria-labelledby": $props.ariaLabelledBy,
-        class: vue.normalizeClass($options.getButtonClass(option))
+        onBlur: $event => ($options.onBlur($event, option))
       }, [
         vue.renderSlot(_ctx.$slots, "option", {
           option: option,
           index: i
         }, () => [
-          vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($options.getOptionLabel(option)), 1)
+          vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($options.getOptionLabel(option)), 1)
         ])
-      ], 42, _hoisted_1)), [
+      ], 42, _hoisted_2)), [
         [_directive_ripple]
       ])
     }), 128))
-  ], 2))
+  ], 10, _hoisted_1))
 }
 
 script.render = render;

package/selectbutton/selectbutton.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),l=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"SelectButton",emits:["update:modelValue","focus","blur","change"],props:{modelValue:null,options:Array,optionLabel:null,optionValue:null,optionDisabled:null,multiple:Boolean,disabled:Boolean,dataKey:null,ariaLabelledBy: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)},onOptionSelect(t,l){if(this.disabled||this.isOptionDisabled(l))return;let i,o=this.isSelected(l),s=this.getOptionValue(l);i=this.multiple?o?this.modelValue.filter((t=>!e.ObjectUtils.equals(t,s,this.equalityKey))):this.modelValue?[...this.modelValue,s]:[s]:s,this.$emit("update:modelValue",i),this.$emit("change",{event:t,value:i})},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},onFocus(e){this.$emit("focus",e)},onBlur(e){this.$emit("blur",e)},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(t).default}};const s=["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"],a={class:"p-button-label"};o.render=function(e,t,i,o,n,r){const u=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(r.containerClass),role:"group"},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(i.options,((o,n)=>l.withDirectives((l.openBlock(),l.createElementBlock("div",{key:r.getOptionRenderKey(o),"aria-label":r.getOptionLabel(o),role:"button","aria-pressed":r.isSelected(o),onClick:e=>r.onOptionSelect(e,o,n),onKeydown:[l.withKeys(l.withModifiers((e=>r.onOptionSelect(e,o,n)),["prevent"]),["enter"]),l.withKeys(l.withModifiers((e=>r.onOptionSelect(e,o)),["prevent"]),["space"])],tabindex:r.isOptionDisabled(o)?null:"0",onFocus:t[0]||(t[0]=e=>r.onFocus(e)),onBlur:t[1]||(t[1]=e=>r.onBlur(e)),"aria-labelledby":i.ariaLabelledBy,class:l.normalizeClass(r.getButtonClass(o))},[l.renderSlot(e.$slots,"option",{option:o,index:n},(()=>[l.createElementVNode("span",a,l.toDisplayString(r.getOptionLabel(o)),1)]))],42,s)),[[u]]))),128))],2)},module.exports=o;
+"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),l=require("vue");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:!0},disabled:Boolean,dataKey:null,"aria-labelledby":{type:String,default:null}},data:()=>({focusedIndex:0}),mounted(){this.defaultTabIndexes()},methods:{defaultTabIndexes(){let t=e.DomHandler.find(this.$refs.container,".p-button"),l=e.DomHandler.findSingle(this.$refs.container,".p-highlight");for(let i=0;i<t.length;i++)(e.DomHandler.hasClass(t[i],"p-highlight")&&e.ObjectUtils.equals(t[i],l)||null===l&&0==i)&&(this.focusedIndex=i)},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)},onOptionSelect(t,l,i){if(this.disabled||this.isOptionDisabled(l))return;let n=this.isSelected(l);if(n&&!this.unselectable)return;let a,o=this.getOptionValue(l);a=this.multiple?n?this.modelValue.filter((t=>!e.ObjectUtils.equals(t,o,this.equalityKey))):this.modelValue?[...this.modelValue,o]:[o]:n?null:o,this.focusedIndex=i,this.$emit("update:modelValue",a),this.$emit("change",{event:t,value:a})},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},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(t).default}};const a=["aria-labelledby"],o=["tabindex","aria-label","role","aria-checked","aria-disabled","onClick","onKeydown","onBlur"],s={class:"p-button-label"};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",s,l.toDisplayString(d.getOptionLabel(n)),1)]))],42,o)),[[u]]))),128))],10,a)},module.exports=n;

package/selectbutton/selectbutton.esm.js

@@ -1,6 +1,6 @@
-import { ObjectUtils } from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, openBlock, createElementBlock, normalizeClass, Fragment, renderList, withDirectives, withKeys, withModifiers, renderSlot, createElementVNode, toDisplayString } from 'vue';
+import { resolveDirective, openBlock, createElementBlock, normalizeClass, Fragment, renderList, withDirectives, renderSlot, createElementVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'SelectButton',
@@ -12,11 +12,36 @@ var script = {
         optionValue: null,
         optionDisabled: null,
 		multiple: Boolean,
+        unselectable: {
+            type: Boolean,
+            default: true
+        },
         disabled: Boolean,
         dataKey: null,
-        ariaLabelledBy: null
+        'aria-labelledby': {
+            type: String,
+			default: null
+        }
+    },
+    data() {
+        return {
+            focusedIndex: 0
+        }
+    },
+    mounted() {
+        this.defaultTabIndexes();
     },
     methods: {
+        defaultTabIndexes() {
+            let opts = DomHandler.find(this.$refs.container, '.p-button');
+            let firstHighlight = DomHandler.findSingle(this.$refs.container, '.p-highlight');
+
+            for (let i = 0; i < opts.length; i++) {
+                if ((DomHandler.hasClass(opts[i], 'p-highlight') && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
+                    this.focusedIndex = i;
+                }
+            }
+        },
         getOptionLabel(option) {
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
         },
@@ -29,25 +54,30 @@ var script = {
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
-        onOptionSelect(event, option) {
+        onOptionSelect(event, option, index) {
             if (this.disabled || this.isOptionDisabled(option)) {
                 return;
             }
 
             let selected = this.isSelected(option);
+            if (selected && !this.unselectable) {
+                return;
+            }
+
             let optionValue = this.getOptionValue(option);
             let newValue;
 
-            if(this.multiple) {
+            if (this.multiple) {
                 if (selected)
                     newValue = this.modelValue.filter(val => !ObjectUtils.equals(val, optionValue, this.equalityKey));
                 else
                     newValue = this.modelValue ? [...this.modelValue, optionValue]: [optionValue];
             }
             else {
-                newValue = optionValue;
+                newValue = selected ? null : optionValue;
             }
 
+            this.focusedIndex = index;
             this.$emit('update:modelValue', newValue);
             this.$emit('change', {event: event, value: newValue});
         },
@@ -71,11 +101,56 @@ var script = {
 
             return selected;
         },
+        onKeydown(event, option, index) {
+            switch (event.code) {
+                case 'Space': {
+                    this.onOptionSelect(event, option, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown':
+                case 'ArrowRight': {
+                    this.changeTabIndexes(event, 'next');
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp':
+                case 'ArrowLeft': {
+                    this.changeTabIndexes(event, 'prev');
+                    event.preventDefault();
+                    break;
+                }
+            }
+        },
+        changeTabIndexes(event, direction) {
+            let firstTabableChild, index;
+            for (let i = 0; i <= this.$refs.container.children.length - 1; i++) {
+                if (this.$refs.container.children[i].getAttribute('tabindex') === '0')
+                    firstTabableChild = {elem: this.$refs.container.children[i], index: i};
+            }
+
+            if (direction === 'prev') {
+                if (firstTabableChild.index === 0) index = this.$refs.container.children.length - 1;
+                else index = firstTabableChild.index - 1;
+            }
+            else {
+                if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0;
+                else index = firstTabableChild.index + 1;
+            }
+
+            this.focusedIndex = index;
+            this.$refs.container.children[index].focus();
+        },
         onFocus(event) {
             this.$emit('focus', event);
         },
-        onBlur(event) {
-            this.$emit('blur', event);
+        onBlur(event, option) {
+            if (event.target && event.relatedTarget && event.target.parentElement !== event.relatedTarget.parentElement) {
+                this.defaultTabIndexes();
+            }
+            this.$emit('blur', event, option);
         },
         getButtonClass(option) {
             return ['p-button p-component', {
@@ -99,44 +174,44 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["aria-label", "aria-pressed", "onClick", "onKeydown", "tabindex", "aria-labelledby"];
-const _hoisted_2 = { class: "p-button-label" };
+const _hoisted_1 = ["aria-labelledby"];
+const _hoisted_2 = ["tabindex", "aria-label", "role", "aria-checked", "aria-disabled", "onClick", "onKeydown", "onBlur"];
+const _hoisted_3 = { class: "p-button-label" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
   return (openBlock(), createElementBlock("div", {
+    ref: "container",
     class: normalizeClass($options.containerClass),
-    role: "group"
+    role: "group",
+    "aria-labelledby": _ctx.ariaLabelledby
   }, [
     (openBlock(true), createElementBlock(Fragment, null, renderList($props.options, (option, i) => {
       return withDirectives((openBlock(), createElementBlock("div", {
         key: $options.getOptionRenderKey(option),
+        tabindex: i === $data.focusedIndex ? '0' : '-1',
         "aria-label": $options.getOptionLabel(option),
-        role: "button",
-        "aria-pressed": $options.isSelected(option),
+        role: $props.multiple ? 'checkbox' : 'radio',
+        "aria-checked": $options.isSelected(option),
+        "aria-disabled": $props.optionDisabled,
+        class: normalizeClass($options.getButtonClass(option, i)),
         onClick: $event => ($options.onOptionSelect($event, option, i)),
-        onKeydown: [
-          withKeys(withModifiers($event => ($options.onOptionSelect($event, option, i)), ["prevent"]), ["enter"]),
-          withKeys(withModifiers($event => ($options.onOptionSelect($event, option)), ["prevent"]), ["space"])
-        ],
-        tabindex: $options.isOptionDisabled(option) ? null : '0',
+        onKeydown: $event => ($options.onKeydown($event, option, i)),
         onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
-        onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
-        "aria-labelledby": $props.ariaLabelledBy,
-        class: normalizeClass($options.getButtonClass(option))
+        onBlur: $event => ($options.onBlur($event, option))
       }, [
         renderSlot(_ctx.$slots, "option", {
           option: option,
           index: i
         }, () => [
-          createElementVNode("span", _hoisted_2, toDisplayString($options.getOptionLabel(option)), 1)
+          createElementVNode("span", _hoisted_3, toDisplayString($options.getOptionLabel(option)), 1)
         ])
-      ], 42, _hoisted_1)), [
+      ], 42, _hoisted_2)), [
         [_directive_ripple]
       ])
     }), 128))
-  ], 2))
+  ], 10, _hoisted_1))
 }
 
 script.render = render;

package/selectbutton/selectbutton.esm.min.js

@@ -1 +1 @@
-import{ObjectUtils as e}from"primevue/utils";import t from"primevue/ripple";import{resolveDirective as l,openBlock as i,createElementBlock as o,normalizeClass as a,Fragment as n,renderList as s,withDirectives as u,withKeys as r,withModifiers as p,renderSlot as d,createElementVNode as h,toDisplayString as b}from"vue";var c={name:"SelectButton",emits:["update:modelValue","focus","blur","change"],props:{modelValue:null,options:Array,optionLabel:null,optionValue:null,optionDisabled:null,multiple:Boolean,disabled:Boolean,dataKey:null,ariaLabelledBy: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)},onOptionSelect(t,l){if(this.disabled||this.isOptionDisabled(l))return;let i,o=this.isSelected(l),a=this.getOptionValue(l);i=this.multiple?o?this.modelValue.filter((t=>!e.equals(t,a,this.equalityKey))):this.modelValue?[...this.modelValue,a]:[a]:a,this.$emit("update:modelValue",i),this.$emit("change",{event:t,value:i})},isSelected(t){let l=!1,i=this.getOptionValue(t);if(this.multiple){if(this.modelValue)for(let t of this.modelValue)if(e.equals(t,i,this.equalityKey)){l=!0;break}}else l=e.equals(this.modelValue,i,this.equalityKey);return l},onFocus(e){this.$emit("focus",e)},onBlur(e){this.$emit("blur",e)},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 m=["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"],y={class:"p-button-label"};c.render=function(e,t,c,O,g,V){const v=l("ripple");return i(),o("div",{class:a(V.containerClass),role:"group"},[(i(!0),o(n,null,s(c.options,((l,n)=>u((i(),o("div",{key:V.getOptionRenderKey(l),"aria-label":V.getOptionLabel(l),role:"button","aria-pressed":V.isSelected(l),onClick:e=>V.onOptionSelect(e,l,n),onKeydown:[r(p((e=>V.onOptionSelect(e,l,n)),["prevent"]),["enter"]),r(p((e=>V.onOptionSelect(e,l)),["prevent"]),["space"])],tabindex:V.isOptionDisabled(l)?null:"0",onFocus:t[0]||(t[0]=e=>V.onFocus(e)),onBlur:t[1]||(t[1]=e=>V.onBlur(e)),"aria-labelledby":c.ariaLabelledBy,class:a(V.getButtonClass(l))},[d(e.$slots,"option",{option:l,index:n},(()=>[h("span",y,b(V.getOptionLabel(l)),1)]))],42,m)),[[v]]))),128))],2)};export{c as default};
+import{DomHandler as e,ObjectUtils as t}from"primevue/utils";import i from"primevue/ripple";import{resolveDirective as l,openBlock as n,createElementBlock as a,normalizeClass as o,Fragment as s,renderList as r,withDirectives as d,renderSlot as u,createElementVNode as h,toDisplayString as p}from"vue";var c={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:!0},disabled:Boolean,dataKey:null,"aria-labelledby":{type:String,default:null}},data:()=>({focusedIndex:0}),mounted(){this.defaultTabIndexes()},methods:{defaultTabIndexes(){let i=e.find(this.$refs.container,".p-button"),l=e.findSingle(this.$refs.container,".p-highlight");for(let n=0;n<i.length;n++)(e.hasClass(i[n],"p-highlight")&&t.equals(i[n],l)||null===l&&0==n)&&(this.focusedIndex=n)},getOptionLabel(e){return this.optionLabel?t.resolveFieldData(e,this.optionLabel):e},getOptionValue(e){return this.optionValue?t.resolveFieldData(e,this.optionValue):e},getOptionRenderKey(e){return this.dataKey?t.resolveFieldData(e,this.dataKey):this.getOptionLabel(e)},isOptionDisabled(e){return!!this.optionDisabled&&t.resolveFieldData(e,this.optionDisabled)},onOptionSelect(e,i,l){if(this.disabled||this.isOptionDisabled(i))return;let n=this.isSelected(i);if(n&&!this.unselectable)return;let a,o=this.getOptionValue(i);a=this.multiple?n?this.modelValue.filter((e=>!t.equals(e,o,this.equalityKey))):this.modelValue?[...this.modelValue,o]:[o]:n?null:o,this.focusedIndex=l,this.$emit("update:modelValue",a),this.$emit("change",{event:e,value:a})},isSelected(e){let i=!1,l=this.getOptionValue(e);if(this.multiple){if(this.modelValue)for(let e of this.modelValue)if(t.equals(e,l,this.equalityKey)){i=!0;break}}else i=t.equals(this.modelValue,l,this.equalityKey);return i},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:i}};const b=["aria-labelledby"],f=["tabindex","aria-label","role","aria-checked","aria-disabled","onClick","onKeydown","onBlur"],g={class:"p-button-label"};c.render=function(e,t,i,c,m,y){const x=l("ripple");return n(),a("div",{ref:"container",class:o(y.containerClass),role:"group","aria-labelledby":e.ariaLabelledby},[(n(!0),a(s,null,r(i.options,((l,s)=>d((n(),a("div",{key:y.getOptionRenderKey(l),tabindex:s===m.focusedIndex?"0":"-1","aria-label":y.getOptionLabel(l),role:i.multiple?"checkbox":"radio","aria-checked":y.isSelected(l),"aria-disabled":i.optionDisabled,class:o(y.getButtonClass(l,s)),onClick:e=>y.onOptionSelect(e,l,s),onKeydown:e=>y.onKeydown(e,l,s),onFocus:t[0]||(t[0]=e=>y.onFocus(e)),onBlur:e=>y.onBlur(e,l)},[u(e.$slots,"option",{option:l,index:s},(()=>[h("span",g,p(y.getOptionLabel(l)),1)]))],42,f)),[[x]]))),128))],10,b)};export{c as default};

package/selectbutton/selectbutton.js

@@ -16,11 +16,36 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
             optionValue: null,
             optionDisabled: null,
     		multiple: Boolean,
+            unselectable: {
+                type: Boolean,
+                default: true
+            },
             disabled: Boolean,
             dataKey: null,
-            ariaLabelledBy: null
+            'aria-labelledby': {
+                type: String,
+    			default: null
+            }
+        },
+        data() {
+            return {
+                focusedIndex: 0
+            }
+        },
+        mounted() {
+            this.defaultTabIndexes();
         },
         methods: {
+            defaultTabIndexes() {
+                let opts = utils.DomHandler.find(this.$refs.container, '.p-button');
+                let firstHighlight = utils.DomHandler.findSingle(this.$refs.container, '.p-highlight');
+
+                for (let i = 0; i < opts.length; i++) {
+                    if ((utils.DomHandler.hasClass(opts[i], 'p-highlight') && utils.ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
+                        this.focusedIndex = i;
+                    }
+                }
+            },
             getOptionLabel(option) {
                 return this.optionLabel ? utils.ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
             },
@@ -33,25 +58,30 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
             isOptionDisabled(option) {
                 return this.optionDisabled ? utils.ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
             },
-            onOptionSelect(event, option) {
+            onOptionSelect(event, option, index) {
                 if (this.disabled || this.isOptionDisabled(option)) {
                     return;
                 }
 
                 let selected = this.isSelected(option);
+                if (selected && !this.unselectable) {
+                    return;
+                }
+
                 let optionValue = this.getOptionValue(option);
                 let newValue;
 
-                if(this.multiple) {
+                if (this.multiple) {
                     if (selected)
                         newValue = this.modelValue.filter(val => !utils.ObjectUtils.equals(val, optionValue, this.equalityKey));
                     else
                         newValue = this.modelValue ? [...this.modelValue, optionValue]: [optionValue];
                 }
                 else {
-                    newValue = optionValue;
+                    newValue = selected ? null : optionValue;
                 }
 
+                this.focusedIndex = index;
                 this.$emit('update:modelValue', newValue);
                 this.$emit('change', {event: event, value: newValue});
             },
@@ -75,11 +105,56 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
 
                 return selected;
             },
+            onKeydown(event, option, index) {
+                switch (event.code) {
+                    case 'Space': {
+                        this.onOptionSelect(event, option, index);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'ArrowDown':
+                    case 'ArrowRight': {
+                        this.changeTabIndexes(event, 'next');
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'ArrowUp':
+                    case 'ArrowLeft': {
+                        this.changeTabIndexes(event, 'prev');
+                        event.preventDefault();
+                        break;
+                    }
+                }
+            },
+            changeTabIndexes(event, direction) {
+                let firstTabableChild, index;
+                for (let i = 0; i <= this.$refs.container.children.length - 1; i++) {
+                    if (this.$refs.container.children[i].getAttribute('tabindex') === '0')
+                        firstTabableChild = {elem: this.$refs.container.children[i], index: i};
+                }
+
+                if (direction === 'prev') {
+                    if (firstTabableChild.index === 0) index = this.$refs.container.children.length - 1;
+                    else index = firstTabableChild.index - 1;
+                }
+                else {
+                    if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0;
+                    else index = firstTabableChild.index + 1;
+                }
+
+                this.focusedIndex = index;
+                this.$refs.container.children[index].focus();
+            },
             onFocus(event) {
                 this.$emit('focus', event);
             },
-            onBlur(event) {
-                this.$emit('blur', event);
+            onBlur(event, option) {
+                if (event.target && event.relatedTarget && event.target.parentElement !== event.relatedTarget.parentElement) {
+                    this.defaultTabIndexes();
+                }
+                this.$emit('blur', event, option);
             },
             getButtonClass(option) {
                 return ['p-button p-component', {
@@ -103,44 +178,44 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
         }
     };
 
-    const _hoisted_1 = ["aria-label", "aria-pressed", "onClick", "onKeydown", "tabindex", "aria-labelledby"];
-    const _hoisted_2 = { class: "p-button-label" };
+    const _hoisted_1 = ["aria-labelledby"];
+    const _hoisted_2 = ["tabindex", "aria-label", "role", "aria-checked", "aria-disabled", "onClick", "onKeydown", "onBlur"];
+    const _hoisted_3 = { class: "p-button-label" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return (vue.openBlock(), vue.createElementBlock("div", {
+        ref: "container",
         class: vue.normalizeClass($options.containerClass),
-        role: "group"
+        role: "group",
+        "aria-labelledby": _ctx.ariaLabelledby
       }, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.options, (option, i) => {
           return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
             key: $options.getOptionRenderKey(option),
+            tabindex: i === $data.focusedIndex ? '0' : '-1',
             "aria-label": $options.getOptionLabel(option),
-            role: "button",
-            "aria-pressed": $options.isSelected(option),
+            role: $props.multiple ? 'checkbox' : 'radio',
+            "aria-checked": $options.isSelected(option),
+            "aria-disabled": $props.optionDisabled,
+            class: vue.normalizeClass($options.getButtonClass(option, i)),
             onClick: $event => ($options.onOptionSelect($event, option, i)),
-            onKeydown: [
-              vue.withKeys(vue.withModifiers($event => ($options.onOptionSelect($event, option, i)), ["prevent"]), ["enter"]),
-              vue.withKeys(vue.withModifiers($event => ($options.onOptionSelect($event, option)), ["prevent"]), ["space"])
-            ],
-            tabindex: $options.isOptionDisabled(option) ? null : '0',
+            onKeydown: $event => ($options.onKeydown($event, option, i)),
             onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
-            onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
-            "aria-labelledby": $props.ariaLabelledBy,
-            class: vue.normalizeClass($options.getButtonClass(option))
+            onBlur: $event => ($options.onBlur($event, option))
           }, [
             vue.renderSlot(_ctx.$slots, "option", {
               option: option,
               index: i
             }, () => [
-              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($options.getOptionLabel(option)), 1)
+              vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($options.getOptionLabel(option)), 1)
             ])
-          ], 42, _hoisted_1)), [
+          ], 42, _hoisted_2)), [
             [_directive_ripple]
           ])
         }), 128))
-      ], 2))
+      ], 10, _hoisted_1))
     }
 
     script.render = render;

package/selectbutton/selectbutton.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.selectbutton=function(e,t,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"SelectButton",emits:["update:modelValue","focus","blur","change"],props:{modelValue:null,options:Array,optionLabel:null,optionValue:null,optionDisabled:null,multiple:Boolean,disabled:Boolean,dataKey:null,ariaLabelledBy: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)},onOptionSelect(t,i){if(this.disabled||this.isOptionDisabled(i))return;let l,o=this.isSelected(i),s=this.getOptionValue(i);l=this.multiple?o?this.modelValue.filter((t=>!e.ObjectUtils.equals(t,s,this.equalityKey))):this.modelValue?[...this.modelValue,s]:[s]:s,this.$emit("update:modelValue",l),this.$emit("change",{event:t,value:l})},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},onFocus(e){this.$emit("focus",e)},onBlur(e){this.$emit("blur",e)},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:l(t).default}};const s=["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"],n={class:"p-button-label"};return o.render=function(e,t,l,o,a,r){const u=i.resolveDirective("ripple");return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(r.containerClass),role:"group"},[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(l.options,((o,a)=>i.withDirectives((i.openBlock(),i.createElementBlock("div",{key:r.getOptionRenderKey(o),"aria-label":r.getOptionLabel(o),role:"button","aria-pressed":r.isSelected(o),onClick:e=>r.onOptionSelect(e,o,a),onKeydown:[i.withKeys(i.withModifiers((e=>r.onOptionSelect(e,o,a)),["prevent"]),["enter"]),i.withKeys(i.withModifiers((e=>r.onOptionSelect(e,o)),["prevent"]),["space"])],tabindex:r.isOptionDisabled(o)?null:"0",onFocus:t[0]||(t[0]=e=>r.onFocus(e)),onBlur:t[1]||(t[1]=e=>r.onBlur(e)),"aria-labelledby":l.ariaLabelledBy,class:i.normalizeClass(r.getButtonClass(o))},[i.renderSlot(e.$slots,"option",{option:o,index:a},(()=>[i.createElementVNode("span",n,i.toDisplayString(r.getOptionLabel(o)),1)]))],42,s)),[[u]]))),128))],2)},o}(primevue.utils,primevue.ripple,Vue);
+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:!0},disabled:Boolean,dataKey:null,"aria-labelledby":{type:String,default:null}},data:()=>({focusedIndex:0}),mounted(){this.defaultTabIndexes()},methods:{defaultTabIndexes(){let t=e.DomHandler.find(this.$refs.container,".p-button"),l=e.DomHandler.findSingle(this.$refs.container,".p-highlight");for(let i=0;i<t.length;i++)(e.DomHandler.hasClass(t[i],"p-highlight")&&e.ObjectUtils.equals(t[i],l)||null===l&&0==i)&&(this.focusedIndex=i)},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)},onOptionSelect(t,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((t=>!e.ObjectUtils.equals(t,s,this.equalityKey))):this.modelValue?[...this.modelValue,s]:[s]:n?null:s,this.focusedIndex=i,this.$emit("update:modelValue",a),this.$emit("change",{event:t,value:a})},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},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(t).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.utils,primevue.ripple,Vue);