primevue 3.16.2 → 3.18.0

package/scrolltop/scrolltop.esm.js

@@ -5,11 +5,6 @@ var script = {
     name: 'ScrollTop',
     scrollListener: null,
     container: null,
-    data() {
-        return {
-            visible: false
-        }
-    },
     props: {
         target: {
             type: String,
@@ -28,17 +23,18 @@ var script = {
             default: 'smooth'
         }
     },
+    data() {
+        return {
+            visible: false
+        };
+    },
     mounted() {
-        if (this.target === 'window')
-            this.bindDocumentScrollListener();
-        else if (this.target === 'parent')
-            this.bindParentScrollListener();
+        if (this.target === 'window') this.bindDocumentScrollListener();
+        else if (this.target === 'parent') this.bindParentScrollListener();
     },
     beforeUnmount() {
-        if (this.target === 'window')
-            this.unbindDocumentScrollListener();
-        else if (this.target === 'parent')
-            this.unbindParentScrollListener();
+        if (this.target === 'window') this.unbindDocumentScrollListener();
+        else if (this.target === 'parent') this.unbindParentScrollListener();
 
         if (this.container) {
             ZIndexUtils.clear(this.container);
@@ -48,16 +44,15 @@ var script = {
     methods: {
         onClick() {
             let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
+
             scrollElement.scroll({
                 top: 0,
                 behavior: this.behavior
             });
         },
         checkVisibility(scrollY) {
-            if (scrollY > this.threshold)
-                this.visible = true;
-            else
-                this.visible = false;
+            if (scrollY > this.threshold) this.visible = true;
+            else this.visible = false;
         },
         bindParentScrollListener() {
             this.scrollListener = () => {
@@ -97,7 +92,7 @@ var script = {
     },
     computed: {
         containerClass() {
-            return ['p-scrolltop p-link p-component', {'p-scrolltop-sticky': this.target !== 'window'}];
+            return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
         },
         iconClass() {
             return ['p-scrolltop-icon', this.icon];
@@ -158,7 +153,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n";
+var css_248z = "\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/scrolltop/scrolltop.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t}from"primevue/utils";import{openBlock as n,createBlock as i,Transition as o,withCtx as r,createElementBlock as l,normalizeClass as s,createElementVNode as c,createCommentVNode as a}from"vue";var p={name:"ScrollTop",scrollListener:null,container:null,data:()=>({visible:!1}),props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(t.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]}}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n"),p.render=function(e,t,p,h,d,u){return n(),i(o,{name:"p-scrolltop",appear:"",onEnter:u.onEnter,onAfterLeave:u.onAfterLeave},{default:r((()=>[d.visible?(n(),l("button",{key:0,ref:u.containerRef,class:s(u.containerClass),onClick:t[0]||(t[0]=(...e)=>u.onClick&&u.onClick(...e)),type:"button"},[c("span",{class:s(u.iconClass)},null,2)],2)):a("",!0)])),_:1},8,["onEnter","onAfterLeave"])};export{p as default};
+import{ZIndexUtils as e,DomHandler as t}from"primevue/utils";import{openBlock as n,createBlock as i,Transition as o,withCtx as r,createElementBlock as l,normalizeClass as s,createElementVNode as c,createCommentVNode as a}from"vue";var p={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(t.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]}}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n"),p.render=function(e,t,p,h,d,u){return n(),i(o,{name:"p-scrolltop",appear:"",onEnter:u.onEnter,onAfterLeave:u.onAfterLeave},{default:r((()=>[d.visible?(n(),l("button",{key:0,ref:u.containerRef,class:s(u.containerClass),onClick:t[0]||(t[0]=(...e)=>u.onClick&&u.onClick(...e)),type:"button"},[c("span",{class:s(u.iconClass)},null,2)],2)):a("",!0)])),_:1},8,["onEnter","onAfterLeave"])};export{p as default};

package/scrolltop/scrolltop.js

@@ -6,11 +6,6 @@ this.primevue.scrolltop = (function (utils, vue) {
         name: 'ScrollTop',
         scrollListener: null,
         container: null,
-        data() {
-            return {
-                visible: false
-            }
-        },
         props: {
             target: {
                 type: String,
@@ -29,17 +24,18 @@ this.primevue.scrolltop = (function (utils, vue) {
                 default: 'smooth'
             }
         },
+        data() {
+            return {
+                visible: false
+            };
+        },
         mounted() {
-            if (this.target === 'window')
-                this.bindDocumentScrollListener();
-            else if (this.target === 'parent')
-                this.bindParentScrollListener();
+            if (this.target === 'window') this.bindDocumentScrollListener();
+            else if (this.target === 'parent') this.bindParentScrollListener();
         },
         beforeUnmount() {
-            if (this.target === 'window')
-                this.unbindDocumentScrollListener();
-            else if (this.target === 'parent')
-                this.unbindParentScrollListener();
+            if (this.target === 'window') this.unbindDocumentScrollListener();
+            else if (this.target === 'parent') this.unbindParentScrollListener();
 
             if (this.container) {
                 utils.ZIndexUtils.clear(this.container);
@@ -49,16 +45,15 @@ this.primevue.scrolltop = (function (utils, vue) {
         methods: {
             onClick() {
                 let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
+
                 scrollElement.scroll({
                     top: 0,
                     behavior: this.behavior
                 });
             },
             checkVisibility(scrollY) {
-                if (scrollY > this.threshold)
-                    this.visible = true;
-                else
-                    this.visible = false;
+                if (scrollY > this.threshold) this.visible = true;
+                else this.visible = false;
             },
             bindParentScrollListener() {
                 this.scrollListener = () => {
@@ -98,7 +93,7 @@ this.primevue.scrolltop = (function (utils, vue) {
         },
         computed: {
             containerClass() {
-                return ['p-scrolltop p-link p-component', {'p-scrolltop-sticky': this.target !== 'window'}];
+                return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
             },
             iconClass() {
                 return ['p-scrolltop-icon', this.icon];
@@ -159,7 +154,7 @@ this.primevue.scrolltop = (function (utils, vue) {
       }
     }
 
-    var css_248z = "\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n";
+    var css_248z = "\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n";
     styleInject(css_248z);
 
     script.render = render;

package/scrolltop/scrolltop.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.scrolltop=function(e,t){"use strict";var n={name:"ScrollTop",scrollListener:null,container:null,data:()=>({visible:!1}),props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(e.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.ZIndexUtils.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]}}};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n"),n.render=function(e,n,i,o,l,r){return t.openBlock(),t.createBlock(t.Transition,{name:"p-scrolltop",appear:"",onEnter:r.onEnter,onAfterLeave:r.onAfterLeave},{default:t.withCtx((()=>[l.visible?(t.openBlock(),t.createElementBlock("button",{key:0,ref:r.containerRef,class:t.normalizeClass(r.containerClass),onClick:n[0]||(n[0]=(...e)=>r.onClick&&r.onClick(...e)),type:"button"},[t.createElementVNode("span",{class:t.normalizeClass(r.iconClass)},null,2)],2)):t.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterLeave"])},n}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.scrolltop=function(e,t){"use strict";var n={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(e.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.ZIndexUtils.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]}}};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n"),n.render=function(e,n,i,o,l,r){return t.openBlock(),t.createBlock(t.Transition,{name:"p-scrolltop",appear:"",onEnter:r.onEnter,onAfterLeave:r.onAfterLeave},{default:t.withCtx((()=>[l.visible?(t.openBlock(),t.createElementBlock("button",{key:0,ref:r.containerRef,class:t.normalizeClass(r.containerClass),onClick:n[0]||(n[0]=(...e)=>r.onClick&&r.onClick(...e)),type:"button"},[t.createElementVNode("span",{class:t.normalizeClass(r.iconClass)},null,2)],2)):t.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterLeave"])},n}(primevue.utils,Vue);

package/selectbutton/SelectButton.d.ts

@@ -1,11 +1,11 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type SelectButtonOptionLabelType = string | ((data: any) => string) | undefined;
+type SelectButtonOptionLabelType = string | ((data: any) => string) | undefined;
 
-type SelectButtonOptionValueType = string | ((data: any) => any) | undefined;
+type SelectButtonOptionValueType = string | ((data: any) => any) | undefined;
 
-type SelectButtonOptionDisabledType = string | ((data: any) => boolean) | undefined;
+type SelectButtonOptionDisabledType = string | ((data: any) => boolean) | undefined;
 
 export interface SelectButtonChangeEvent {
     /**
@@ -58,7 +58,7 @@ export interface SelectButtonProps {
     /**
      * Identifier of the underlying element.
      */
-    "aria-labelledby"?: string | undefined;
+    'aria-labelledby'?: string | undefined;
 }
 
 export interface SelectButtonSlots {
@@ -88,24 +88,24 @@ export declare type SelectButtonEmits = {
      * Callback to invoke on value change.
      * @param {SelectButtonChangeEvent} event - Custom change event.
      */
-    'change': (event: SelectButtonChangeEvent) => void;
+    change: (event: SelectButtonChangeEvent) => void;
     /**
      * Callback to invoke on focus.
      * @param {SelectButtonChangeEvent} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke on blur.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
-}
+    blur: (event: Event) => void;
+};
 
-declare class SelectButton extends ClassComponent<SelectButtonProps, SelectButtonSlots, SelectButtonEmits> { }
+declare class SelectButton extends ClassComponent<SelectButtonProps, SelectButtonSlots, SelectButtonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        SelectButton: GlobalComponentConstructor<SelectButton>
+        SelectButton: GlobalComponentConstructor<SelectButton>;
     }
 }
 
@@ -115,7 +115,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [SelectButton](https://www.primefaces.org/primevue/showcase/#/selectbutton)
+ * - [SelectButton](https://www.primefaces.org/primevue/selectbutton)
  *
  */
 export default SelectButton;

package/selectbutton/SelectButton.vue

@@ -1,16 +1,29 @@
 <template>
     <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby">
-        <div v-for="(option, i) of options" :key="getOptionRenderKey(option)" :tabindex="i === focusedIndex ? '0' : '-1'" :aria-label="getOptionLabel(option)" :role="multiple ? 'checkbox' : 'radio'" :aria-checked="isSelected(option)" :aria-disabled="optionDisabled"
-            :class="getButtonClass(option, i)" @click="onOptionSelect($event, option, i)" @keydown="onKeydown($event, option, i)" @focus="onFocus($event)" @blur="onBlur($event, option)" v-ripple>
+        <div
+            v-for="(option, i) of options"
+            :key="getOptionRenderKey(option)"
+            v-ripple
+            :tabindex="i === focusedIndex ? '0' : '-1'"
+            :aria-label="getOptionLabel(option)"
+            :role="multiple ? 'checkbox' : 'radio'"
+            :aria-checked="isSelected(option)"
+            :aria-disabled="optionDisabled"
+            :class="getButtonClass(option, i)"
+            @click="onOptionSelect($event, option, i)"
+            @keydown="onKeydown($event, option, i)"
+            @focus="onFocus($event)"
+            @blur="onBlur($event, option)"
+        >
             <slot name="option" :option="option" :index="i">
-                <span class="p-button-label">{{getOptionLabel(option)}}</span>
+                <span class="p-button-label">{{ getOptionLabel(option) }}</span>
             </slot>
         </div>
     </div>
 </template>
 
 <script>
-import {ObjectUtils,DomHandler} from 'primevue/utils';
+import { ObjectUtils, DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -22,7 +35,7 @@ export default {
         optionLabel: null,
         optionValue: null,
         optionDisabled: null,
-		multiple: Boolean,
+        multiple: Boolean,
         unselectable: {
             type: Boolean,
             default: true
@@ -31,13 +44,13 @@ export default {
         dataKey: null,
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         }
     },
     data() {
         return {
             focusedIndex: 0
-        }
+        };
     },
     mounted() {
         this.defaultTabIndexes();
@@ -71,6 +84,7 @@ export default {
             }
 
             let selected = this.isSelected(option);
+
             if (selected && !this.unselectable) {
                 return;
             }
@@ -79,18 +93,15 @@ export default {
             let newValue;
 
             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 {
+                if (selected) newValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey));
+                else newValue = this.modelValue ? [...this.modelValue, optionValue] : [optionValue];
+            } else {
                 newValue = selected ? null : optionValue;
             }
 
             this.focusedIndex = index;
             this.$emit('update:modelValue', newValue);
-            this.$emit('change', {event: event, value: newValue});
+            this.$emit('change', { event: event, value: newValue });
         },
         isSelected(option) {
             let selected = false;
@@ -105,8 +116,7 @@ export default {
                         }
                     }
                 }
-            }
-            else {
+            } else {
                 selected = ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey);
             }
 
@@ -121,6 +131,7 @@ export default {
                 }
 
                 case 'ArrowDown':
+
                 case 'ArrowRight': {
                     this.changeTabIndexes(event, 'next');
                     event.preventDefault();
@@ -128,29 +139,29 @@ export default {
                 }
 
                 case 'ArrowUp':
+
                 case 'ArrowLeft': {
                     this.changeTabIndexes(event, 'prev');
                     event.preventDefault();
                     break;
                 }
-                
+
                 default:
                     //no op
-                break;
+                    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 (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 {
+            } else {
                 if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0;
                 else index = firstTabableChild.index + 1;
             }
@@ -165,27 +176,34 @@ export default {
             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', {
-                'p-highlight': this.isSelected(option),
-                'p-disabled': this.isOptionDisabled(option)
-            }];
+            return [
+                'p-button p-component',
+                {
+                    'p-highlight': this.isSelected(option),
+                    'p-disabled': this.isOptionDisabled(option)
+                }
+            ];
         }
     },
-	computed: {
+    computed: {
         containerClass() {
-            return ['p-selectbutton p-buttonset p-component', {
-                'p-disabled': this.disabled
-            }];
+            return [
+                'p-selectbutton p-buttonset p-component',
+                {
+                    'p-disabled': this.disabled
+                }
+            ];
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/selectbutton/selectbutton.cjs.js

@@ -17,7 +17,7 @@ var script = {
         optionLabel: null,
         optionValue: null,
         optionDisabled: null,
-		multiple: Boolean,
+        multiple: Boolean,
         unselectable: {
             type: Boolean,
             default: true
@@ -26,13 +26,13 @@ var script = {
         dataKey: null,
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         }
     },
     data() {
         return {
             focusedIndex: 0
-        }
+        };
     },
     mounted() {
         this.defaultTabIndexes();
@@ -66,6 +66,7 @@ var script = {
             }
 
             let selected = this.isSelected(option);
+
             if (selected && !this.unselectable) {
                 return;
             }
@@ -74,18 +75,15 @@ var script = {
             let newValue;
 
             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 {
+                if (selected) newValue = this.modelValue.filter((val) => !utils.ObjectUtils.equals(val, optionValue, this.equalityKey));
+                else newValue = this.modelValue ? [...this.modelValue, optionValue] : [optionValue];
+            } else {
                 newValue = selected ? null : optionValue;
             }
 
             this.focusedIndex = index;
             this.$emit('update:modelValue', newValue);
-            this.$emit('change', {event: event, value: newValue});
+            this.$emit('change', { event: event, value: newValue });
         },
         isSelected(option) {
             let selected = false;
@@ -100,8 +98,7 @@ var script = {
                         }
                     }
                 }
-            }
-            else {
+            } else {
                 selected = utils.ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey);
             }
 
@@ -116,6 +113,7 @@ var script = {
                 }
 
                 case 'ArrowDown':
+
                 case 'ArrowRight': {
                     this.changeTabIndexes(event, 'next');
                     event.preventDefault();
@@ -123,6 +121,7 @@ var script = {
                 }
 
                 case 'ArrowUp':
+
                 case 'ArrowLeft': {
                     this.changeTabIndexes(event, 'prev');
                     event.preventDefault();
@@ -132,16 +131,15 @@ var script = {
         },
         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 (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 {
+            } else {
                 if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0;
                 else index = firstTabableChild.index + 1;
             }
@@ -156,27 +154,34 @@ var script = {
             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', {
-                'p-highlight': this.isSelected(option),
-                'p-disabled': this.isOptionDisabled(option)
-            }];
+            return [
+                'p-button p-component',
+                {
+                    'p-highlight': this.isSelected(option),
+                    'p-disabled': this.isOptionDisabled(option)
+                }
+            ];
         }
     },
-	computed: {
+    computed: {
         containerClass() {
-            return ['p-selectbutton p-buttonset p-component', {
-                'p-disabled': this.disabled
-            }];
+            return [
+                'p-selectbutton p-buttonset p-component',
+                {
+                    'p-disabled': this.disabled
+                }
+            ];
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
         }
     },
     directives: {
-        'ripple': Ripple__default["default"]
+        ripple: Ripple__default["default"]
     }
 };