primevue 3.8.2 → 3.9.0

package/resources/themes/vela-orange/theme.css

@@ -345,14 +345,16 @@
 .p-datepicker .p-datepicker-header .p-datepicker-title {
   line-height: 2rem;
 }
-.p-datepicker .p-datepicker-header .p-datepicker-title select {
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+  color: rgba(255, 255, 255, 0.87);
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  font-weight: 600;
+  padding: 0.5rem;
 }
-.p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #ffe284;
-  border-color: #FFD54F;
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+  color: #FFD54F;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
   margin-right: 0.5rem;
@@ -450,8 +452,20 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 213, 79, 0.16);
 }
+.p-datepicker .p-yearpicker {
+  margin: 0.5rem 0;
+}
+.p-datepicker .p-yearpicker .p-yearpicker-year {
+  padding: 0.5rem;
+  transition: box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 213, 79, 0.16);
+}
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #304562;
+  border-left: 1px solid #304562;
   padding-right: 0.5rem;
   padding-left: 0.5rem;
   padding-top: 0;
@@ -459,10 +473,10 @@
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
   padding-left: 0;
+  border-left: 0 none;
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
   padding-right: 0;
-  border-right: 0 none;
 }
 .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.03);
@@ -472,10 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+}
+.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
@@ -1407,7 +1429,7 @@
 .p-rating .p-rating-icon:first-child {
   margin-left: 0;
 }
-.p-rating .p-rating-icon.pi-star {
+.p-rating .p-rating-icon.pi-star-fill {
   color: #FFD54F;
 }
 .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
@@ -2270,7 +2292,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #ffe284;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2312,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #ffe284;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -2853,6 +2878,10 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
+.fc.fc-theme-standard .fc-highlight {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 213, 79, 0.16);
+}
 
 .p-orderlist .p-orderlist-controls {
   padding: 1rem;
@@ -3253,7 +3282,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #ffe284;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3287,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #ffe284;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3966,6 +3998,7 @@
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #304562;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
   width: 12.5rem;
 }
 .p-contextmenu .p-menuitem-link {
@@ -4007,6 +4040,7 @@
   background: #1f2d40;
   border: 1px solid #304562;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
   background: #17212f;
@@ -5265,7 +5299,7 @@
   background: #FFD54F;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
@@ -5346,3 +5380,10 @@
 .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
   background: #FFD54F;
 }
+
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #FFD54F;
+}
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #FFD54F;
+}

package/resources/themes/vela-purple/theme.css

@@ -345,14 +345,16 @@
 .p-datepicker .p-datepicker-header .p-datepicker-title {
   line-height: 2rem;
 }
-.p-datepicker .p-datepicker-header .p-datepicker-title select {
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+  color: rgba(255, 255, 255, 0.87);
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  font-weight: 600;
+  padding: 0.5rem;
 }
-.p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #cf95d9;
-  border-color: #BA68C8;
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+  color: #BA68C8;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
   margin-right: 0.5rem;
@@ -450,8 +452,20 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
+.p-datepicker .p-yearpicker {
+  margin: 0.5rem 0;
+}
+.p-datepicker .p-yearpicker .p-yearpicker-year {
+  padding: 0.5rem;
+  transition: box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(186, 104, 200, 0.16);
+}
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #304562;
+  border-left: 1px solid #304562;
   padding-right: 0.5rem;
   padding-left: 0.5rem;
   padding-top: 0;
@@ -459,10 +473,10 @@
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
   padding-left: 0;
+  border-left: 0 none;
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
   padding-right: 0;
-  border-right: 0 none;
 }
 .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.03);
@@ -472,10 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+}
+.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
@@ -1407,7 +1429,7 @@
 .p-rating .p-rating-icon:first-child {
   margin-left: 0;
 }
-.p-rating .p-rating-icon.pi-star {
+.p-rating .p-rating-icon.pi-star-fill {
   color: #BA68C8;
 }
 .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
@@ -2270,7 +2292,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #cf95d9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2312,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #cf95d9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -2853,6 +2878,10 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
+.fc.fc-theme-standard .fc-highlight {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(186, 104, 200, 0.16);
+}
 
 .p-orderlist .p-orderlist-controls {
   padding: 1rem;
@@ -3253,7 +3282,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #cf95d9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3287,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #cf95d9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3966,6 +3998,7 @@
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #304562;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
   width: 12.5rem;
 }
 .p-contextmenu .p-menuitem-link {
@@ -4007,6 +4040,7 @@
   background: #1f2d40;
   border: 1px solid #304562;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
   background: #17212f;
@@ -5265,7 +5299,7 @@
   background: #BA68C8;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
@@ -5346,3 +5380,10 @@
 .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
   background: #BA68C8;
 }
+
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #BA68C8;
+}
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #BA68C8;
+}

package/selectbutton/SelectButton.d.ts

@@ -1,9 +1,13 @@
+type SelectButtonOptionLabelType = string | ((data: any) => string) | undefined;
+type SelectButtonOptionValueType = string | ((data: any) => any) | undefined;
+type SelectButtonOptionDisabledType = string | ((data: any) => boolean) | undefined;
+
 interface SelectButtonProps {
     modelValue?: any;
     options?: any[];
-    optionLabel?: string;
-    optionValue?: any;
-    optionDisabled?: boolean;
+    optionLabel?: SelectButtonOptionLabelType;
+    optionValue?: SelectButtonOptionValueType;
+    optionDisabled?: SelectButtonOptionDisabledType;
     multiple?: boolean;
     disabled?: boolean;
     dataKey?: string;
@@ -18,6 +22,7 @@ interface SelectButtonOptionSlotInterface {
 declare class SelectButton {
     $props: SelectButtonProps;
     $emit(eventName: 'update:modelValue', value: any): this;
+    $emit(eventName: 'change', event: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'focus', event: Event): this;
     $emit(eventName: 'blur', event: Event): this;
     $slots: {

package/selectbutton/SelectButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-selectbutton p-buttonset p-component" role="group">
+    <div :class="containerClass" role="group">
         <div v-for="(option, i) of options" :key="getOptionRenderKey(option)" :aria-label="getOptionLabel(option)" role="button" :aria-pressed="isSelected(option)"
             @click="onOptionSelect($event, option, i)" @keydown.enter.prevent="onOptionSelect($event, option, i)" @keydown.space.prevent="onOptionSelect($event, option)"
             :tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy" v-ripple
@@ -17,7 +17,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'SelectButton',
-    emits: ['update:modelValue', 'focus', 'blur'],
+    emits: ['update:modelValue', 'focus', 'blur', 'change'],
     props: {
         modelValue: null,
         options: Array,
@@ -62,6 +62,7 @@ export default {
             }
 
             this.$emit('update:modelValue', newValue);
+            this.$emit('change', {event: event, value: newValue});
         },
         isSelected(option) {
             let selected = false;
@@ -97,6 +98,11 @@ export default {
         }
     },
 	computed: {
+        containerClass() {
+            return ['p-selectbutton p-buttonset p-component', {
+                'p-disabled': this.disabled
+            }];
+        },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
         }

package/selectbutton/selectbutton.cjs.js

@@ -10,7 +10,7 @@ var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'SelectButton',
-    emits: ['update:modelValue', 'focus', 'blur'],
+    emits: ['update:modelValue', 'focus', 'blur', 'change'],
     props: {
         modelValue: null,
         options: Array,
@@ -55,6 +55,7 @@ var script = {
             }
 
             this.$emit('update:modelValue', newValue);
+            this.$emit('change', {event: event, value: newValue});
         },
         isSelected(option) {
             let selected = false;
@@ -90,6 +91,11 @@ var script = {
         }
     },
 	computed: {
+        containerClass() {
+            return ['p-selectbutton p-buttonset p-component', {
+                'p-disabled': this.disabled
+            }];
+        },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
         }
@@ -99,16 +105,15 @@ var script = {
     }
 };
 
-const _hoisted_1 = {
-  class: "p-selectbutton p-buttonset p-component",
-  role: "group"
-};
-const _hoisted_2 = { class: "p-button-label" };
+const _hoisted_1 = { class: "p-button-label" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
+  return (vue.openBlock(), vue.createBlock("div", {
+    class: $options.containerClass,
+    role: "group"
+  }, [
     (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.options, (option, i) => {
       return vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
         key: $options.getOptionRenderKey(option),
@@ -130,13 +135,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           option: option,
           index: i
         }, () => [
-          vue.createVNode("span", _hoisted_2, vue.toDisplayString($options.getOptionLabel(option)), 1)
+          vue.createVNode("span", _hoisted_1, vue.toDisplayString($options.getOptionLabel(option)), 1)
         ])
       ], 42, ["aria-label", "aria-pressed", "onClick", "onKeydown", "tabindex", "aria-labelledby"])), [
         [_directive_ripple]
       ])
     }), 128))
-  ]))
+  ], 2))
 }
 
 script.render = render;

package/selectbutton/selectbutton.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),i=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"SelectButton",emits:["update:modelValue","focus","blur"],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)},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:{equalityKey(){return this.optionValue?null:this.dataKey}},directives:{ripple:l(t).default}};const s={class:"p-selectbutton p-buttonset p-component",role:"group"},a={class:"p-button-label"};o.render=function(e,t,l,o,n,r){const u=i.resolveDirective("ripple");return i.openBlock(),i.createBlock("div",s,[(i.openBlock(!0),i.createBlock(i.Fragment,null,i.renderList(l.options,((o,s)=>i.withDirectives((i.openBlock(),i.createBlock("div",{key:r.getOptionRenderKey(o),"aria-label":r.getOptionLabel(o),role:"button","aria-pressed":r.isSelected(o),onClick:e=>r.onOptionSelect(e,o,s),onKeydown:[i.withKeys(i.withModifiers((e=>r.onOptionSelect(e,o,s)),["prevent"]),["enter"]),i.withKeys(i.withModifiers((e=>r.onOptionSelect(e,o)),["prevent"]),["space"])],tabindex:r.isOptionDisabled(o)?null:"0",onFocus:t[1]||(t[1]=e=>r.onFocus(e)),onBlur:t[2]||(t[2]=e=>r.onBlur(e)),"aria-labelledby":l.ariaLabelledBy,class:r.getButtonClass(o)},[i.renderSlot(e.$slots,"option",{option:o,index:s},(()=>[i.createVNode("span",a,i.toDisplayString(r.getOptionLabel(o)),1)]))],42,["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"])),[[u]]))),128))])},module.exports=o;
+"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),i=require("vue");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={class:"p-button-label"};o.render=function(e,t,l,o,a,n){const r=i.resolveDirective("ripple");return i.openBlock(),i.createBlock("div",{class:n.containerClass,role:"group"},[(i.openBlock(!0),i.createBlock(i.Fragment,null,i.renderList(l.options,((o,a)=>i.withDirectives((i.openBlock(),i.createBlock("div",{key:n.getOptionRenderKey(o),"aria-label":n.getOptionLabel(o),role:"button","aria-pressed":n.isSelected(o),onClick:e=>n.onOptionSelect(e,o,a),onKeydown:[i.withKeys(i.withModifiers((e=>n.onOptionSelect(e,o,a)),["prevent"]),["enter"]),i.withKeys(i.withModifiers((e=>n.onOptionSelect(e,o)),["prevent"]),["space"])],tabindex:n.isOptionDisabled(o)?null:"0",onFocus:t[1]||(t[1]=e=>n.onFocus(e)),onBlur:t[2]||(t[2]=e=>n.onBlur(e)),"aria-labelledby":l.ariaLabelledBy,class:n.getButtonClass(o)},[i.renderSlot(e.$slots,"option",{option:o,index:a},(()=>[i.createVNode("span",s,i.toDisplayString(n.getOptionLabel(o)),1)]))],42,["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"])),[[r]]))),128))],2)},module.exports=o;

package/selectbutton/selectbutton.esm.js

@@ -4,7 +4,7 @@ import { resolveDirective, openBlock, createBlock, Fragment, renderList, withDir
 
 var script = {
     name: 'SelectButton',
-    emits: ['update:modelValue', 'focus', 'blur'],
+    emits: ['update:modelValue', 'focus', 'blur', 'change'],
     props: {
         modelValue: null,
         options: Array,
@@ -49,6 +49,7 @@ var script = {
             }
 
             this.$emit('update:modelValue', newValue);
+            this.$emit('change', {event: event, value: newValue});
         },
         isSelected(option) {
             let selected = false;
@@ -84,6 +85,11 @@ var script = {
         }
     },
 	computed: {
+        containerClass() {
+            return ['p-selectbutton p-buttonset p-component', {
+                'p-disabled': this.disabled
+            }];
+        },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
         }
@@ -93,16 +99,15 @@ var script = {
     }
 };
 
-const _hoisted_1 = {
-  class: "p-selectbutton p-buttonset p-component",
-  role: "group"
-};
-const _hoisted_2 = { class: "p-button-label" };
+const _hoisted_1 = { class: "p-button-label" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createBlock("div", _hoisted_1, [
+  return (openBlock(), createBlock("div", {
+    class: $options.containerClass,
+    role: "group"
+  }, [
     (openBlock(true), createBlock(Fragment, null, renderList($props.options, (option, i) => {
       return withDirectives((openBlock(), createBlock("div", {
         key: $options.getOptionRenderKey(option),
@@ -124,13 +129,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           option: option,
           index: i
         }, () => [
-          createVNode("span", _hoisted_2, toDisplayString($options.getOptionLabel(option)), 1)
+          createVNode("span", _hoisted_1, toDisplayString($options.getOptionLabel(option)), 1)
         ])
       ], 42, ["aria-label", "aria-pressed", "onClick", "onKeydown", "tabindex", "aria-labelledby"])), [
         [_directive_ripple]
       ])
     }), 128))
-  ]))
+  ], 2))
 }
 
 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,createBlock as o,Fragment as a,renderList as n,withDirectives as s,withKeys as u,withModifiers as p,renderSlot as r,createVNode as d,toDisplayString as b}from"vue";var h={name:"SelectButton",emits:["update:modelValue","focus","blur"],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)},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:{equalityKey(){return this.optionValue?null:this.dataKey}},directives:{ripple:t}};const m={class:"p-selectbutton p-buttonset p-component",role:"group"},c={class:"p-button-label"};h.render=function(e,t,h,y,O,V){const f=l("ripple");return i(),o("div",m,[(i(!0),o(a,null,n(h.options,((l,a)=>s((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,a),onKeydown:[u(p((e=>V.onOptionSelect(e,l,a)),["prevent"]),["enter"]),u(p((e=>V.onOptionSelect(e,l)),["prevent"]),["space"])],tabindex:V.isOptionDisabled(l)?null:"0",onFocus:t[1]||(t[1]=e=>V.onFocus(e)),onBlur:t[2]||(t[2]=e=>V.onBlur(e)),"aria-labelledby":h.ariaLabelledBy,class:V.getButtonClass(l)},[r(e.$slots,"option",{option:l,index:a},(()=>[d("span",c,b(V.getOptionLabel(l)),1)]))],42,["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"])),[[f]]))),128))])};export default h;
+import{ObjectUtils as e}from"primevue/utils";import t from"primevue/ripple";import{resolveDirective as l,openBlock as i,createBlock as o,Fragment as a,renderList as n,withDirectives as s,withKeys as u,withModifiers as r,renderSlot as p,createVNode as d,toDisplayString as h}from"vue";var b={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 c={class:"p-button-label"};b.render=function(e,t,b,m,y,O){const g=l("ripple");return i(),o("div",{class:O.containerClass,role:"group"},[(i(!0),o(a,null,n(b.options,((l,a)=>s((i(),o("div",{key:O.getOptionRenderKey(l),"aria-label":O.getOptionLabel(l),role:"button","aria-pressed":O.isSelected(l),onClick:e=>O.onOptionSelect(e,l,a),onKeydown:[u(r((e=>O.onOptionSelect(e,l,a)),["prevent"]),["enter"]),u(r((e=>O.onOptionSelect(e,l)),["prevent"]),["space"])],tabindex:O.isOptionDisabled(l)?null:"0",onFocus:t[1]||(t[1]=e=>O.onFocus(e)),onBlur:t[2]||(t[2]=e=>O.onBlur(e)),"aria-labelledby":b.ariaLabelledBy,class:O.getButtonClass(l)},[p(e.$slots,"option",{option:l,index:a},(()=>[d("span",c,h(O.getOptionLabel(l)),1)]))],42,["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"])),[[g]]))),128))],2)};export default b;

package/selectbutton/selectbutton.js

@@ -8,7 +8,7 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
 
     var script = {
         name: 'SelectButton',
-        emits: ['update:modelValue', 'focus', 'blur'],
+        emits: ['update:modelValue', 'focus', 'blur', 'change'],
         props: {
             modelValue: null,
             options: Array,
@@ -53,6 +53,7 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
                 }
 
                 this.$emit('update:modelValue', newValue);
+                this.$emit('change', {event: event, value: newValue});
             },
             isSelected(option) {
                 let selected = false;
@@ -88,6 +89,11 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
             }
         },
     	computed: {
+            containerClass() {
+                return ['p-selectbutton p-buttonset p-component', {
+                    'p-disabled': this.disabled
+                }];
+            },
             equalityKey() {
                 return this.optionValue ? null : this.dataKey;
             }
@@ -97,16 +103,15 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
         }
     };
 
-    const _hoisted_1 = {
-      class: "p-selectbutton p-buttonset p-component",
-      role: "group"
-    };
-    const _hoisted_2 = { class: "p-button-label" };
+    const _hoisted_1 = { class: "p-button-label" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
+      return (vue.openBlock(), vue.createBlock("div", {
+        class: $options.containerClass,
+        role: "group"
+      }, [
         (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.options, (option, i) => {
           return vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
             key: $options.getOptionRenderKey(option),
@@ -128,13 +133,13 @@ this.primevue.selectbutton = (function (utils, Ripple, vue) {
               option: option,
               index: i
             }, () => [
-              vue.createVNode("span", _hoisted_2, vue.toDisplayString($options.getOptionLabel(option)), 1)
+              vue.createVNode("span", _hoisted_1, vue.toDisplayString($options.getOptionLabel(option)), 1)
             ])
           ], 42, ["aria-label", "aria-pressed", "onClick", "onKeydown", "tabindex", "aria-labelledby"])), [
             [_directive_ripple]
           ])
         }), 128))
-      ]))
+      ], 2))
     }
 
     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"],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)},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:{equalityKey(){return this.optionValue?null:this.dataKey}},directives:{ripple:l(t).default}};const s={class:"p-selectbutton p-buttonset p-component",role:"group"},n={class:"p-button-label"};return o.render=function(e,t,l,o,a,r){const u=i.resolveDirective("ripple");return i.openBlock(),i.createBlock("div",s,[(i.openBlock(!0),i.createBlock(i.Fragment,null,i.renderList(l.options,((o,s)=>i.withDirectives((i.openBlock(),i.createBlock("div",{key:r.getOptionRenderKey(o),"aria-label":r.getOptionLabel(o),role:"button","aria-pressed":r.isSelected(o),onClick:e=>r.onOptionSelect(e,o,s),onKeydown:[i.withKeys(i.withModifiers((e=>r.onOptionSelect(e,o,s)),["prevent"]),["enter"]),i.withKeys(i.withModifiers((e=>r.onOptionSelect(e,o)),["prevent"]),["space"])],tabindex:r.isOptionDisabled(o)?null:"0",onFocus:t[1]||(t[1]=e=>r.onFocus(e)),onBlur:t[2]||(t[2]=e=>r.onBlur(e)),"aria-labelledby":l.ariaLabelledBy,class:r.getButtonClass(o)},[i.renderSlot(e.$slots,"option",{option:o,index:s},(()=>[i.createVNode("span",n,i.toDisplayString(r.getOptionLabel(o)),1)]))],42,["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"])),[[u]]))),128))])},o}(primevue.utils,primevue.ripple,Vue);
+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={class:"p-button-label"};return o.render=function(e,t,l,o,n,a){const r=i.resolveDirective("ripple");return i.openBlock(),i.createBlock("div",{class:a.containerClass,role:"group"},[(i.openBlock(!0),i.createBlock(i.Fragment,null,i.renderList(l.options,((o,n)=>i.withDirectives((i.openBlock(),i.createBlock("div",{key:a.getOptionRenderKey(o),"aria-label":a.getOptionLabel(o),role:"button","aria-pressed":a.isSelected(o),onClick:e=>a.onOptionSelect(e,o,n),onKeydown:[i.withKeys(i.withModifiers((e=>a.onOptionSelect(e,o,n)),["prevent"]),["enter"]),i.withKeys(i.withModifiers((e=>a.onOptionSelect(e,o)),["prevent"]),["space"])],tabindex:a.isOptionDisabled(o)?null:"0",onFocus:t[1]||(t[1]=e=>a.onFocus(e)),onBlur:t[2]||(t[2]=e=>a.onBlur(e)),"aria-labelledby":l.ariaLabelledBy,class:a.getButtonClass(o)},[i.renderSlot(e.$slots,"option",{option:o,index:n},(()=>[i.createVNode("span",s,i.toDisplayString(a.getOptionLabel(o)),1)]))],42,["aria-label","aria-pressed","onClick","onKeydown","tabindex","aria-labelledby"])),[[r]]))),128))],2)},o}(primevue.utils,primevue.ripple,Vue);