primevue 3.16.2 → 3.17.0

package/splitbutton/splitbutton.esm.js

@@ -15,7 +15,7 @@ var script = {
             type: String,
             default: null
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -36,7 +36,7 @@ var script = {
     },
     methods: {
         onDropdownButtonClick() {
-            this.$refs.menu.toggle({currentTarget: this.$el});
+            this.$refs.menu.toggle({ currentTarget: this.$el });
         },
         onDefaultButtonClick() {
             this.$refs.menu.hide();
@@ -51,8 +51,8 @@ var script = {
         }
     },
     components: {
-        'PVSButton': Button,
-        'PVSMenu': TieredMenu
+        PVSButton: Button,
+        PVSMenu: TieredMenu
     }
 };
 
@@ -84,8 +84,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": $options.ariaId + '_overlay'
     }, null, 8, ["onClick", "disabled", "aria-controls"]),
     createVNode(_component_PVSMenu, {
-      id: $options.ariaId + '_overlay',
       ref: "menu",
+      id: $options.ariaId + '_overlay',
       model: $props.model,
       popup: true,
       autoZIndex: $props.autoZIndex,
@@ -122,10 +122,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-splitbutton[data-v-3d44cde8] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-3d44cde8],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-3d44cde8],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-3d44cde8] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-3d44cde8],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-3d44cde8],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-3d44cde8] {\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    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-3d44cde8] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-3d44cde8]  {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
+var css_248z = "\n.p-splitbutton[data-v-b81856b6] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-b81856b6],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-b81856b6],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-b81856b6] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-b81856b6],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-b81856b6],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-b81856b6] {\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    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-b81856b6] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-b81856b6] {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-3d44cde8";
+script.__scopeId = "data-v-b81856b6";
 
 export { script as default };

package/splitbutton/splitbutton.esm.min.js

@@ -1 +1 @@
-import t from"primevue/button";import e from"primevue/tieredmenu";import{UniqueComponentId as n}from"primevue/utils";import{resolveComponent as o,openBlock as l,createElementBlock as d,normalizeClass as i,normalizeStyle as a,renderSlot as u,createVNode as p,mergeProps as s}from"vue";var r={name:"SplitButton",inheritAttrs:!1,props:{label:{type:String,default:null},icon:{type:String,default:null},model:{type:Array,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},class:null,style:null},methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el})},onDefaultButtonClick(){this.$refs.menu.hide()}},computed:{ariaId:()=>n(),containerClass(){return["p-splitbutton p-component",this.class]}},components:{PVSButton:t,PVSMenu:e}};!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=t:l.appendChild(document.createTextNode(t))}}("\n.p-splitbutton[data-v-3d44cde8] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-3d44cde8],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-3d44cde8],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-3d44cde8] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-3d44cde8],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-3d44cde8],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-3d44cde8] {\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    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-3d44cde8] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-3d44cde8]  {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),r.render=function(t,e,n,r,b,c){const m=o("PVSButton"),f=o("PVSMenu");return l(),d("div",{class:i(c.containerClass),style:a(n.style)},[u(t.$slots,"default",{},(()=>[p(m,s({type:"button",class:"p-splitbutton-defaultbutton"},t.$attrs,{icon:n.icon,label:n.label,onClick:c.onDefaultButtonClick}),null,16,["icon","label","onClick"])])),p(m,{type:"button",class:"p-splitbutton-menubutton",icon:"pi pi-chevron-down",onClick:c.onDropdownButtonClick,disabled:t.$attrs.disabled,"aria-haspopup":"true","aria-controls":c.ariaId+"_overlay"},null,8,["onClick","disabled","aria-controls"]),p(f,{id:c.ariaId+"_overlay",ref:"menu",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo},null,8,["id","model","autoZIndex","baseZIndex","appendTo"])],6)},r.__scopeId="data-v-3d44cde8";export{r as default};
+import t from"primevue/button";import n from"primevue/tieredmenu";import{UniqueComponentId as e}from"primevue/utils";import{resolveComponent as o,openBlock as l,createElementBlock as i,normalizeClass as a,normalizeStyle as u,renderSlot as p,createVNode as d,mergeProps as s}from"vue";var b={name:"SplitButton",inheritAttrs:!1,props:{label:{type:String,default:null},icon:{type:String,default:null},model:{type:Array,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},class:null,style:null},methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el})},onDefaultButtonClick(){this.$refs.menu.hide()}},computed:{ariaId:()=>e(),containerClass(){return["p-splitbutton p-component",this.class]}},components:{PVSButton:t,PVSMenu:n}};!function(t,n){void 0===n&&(n={});var e=n.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===e&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=t:l.appendChild(document.createTextNode(t))}}("\n.p-splitbutton[data-v-b81856b6] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-b81856b6],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-b81856b6],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-b81856b6] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-b81856b6],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-b81856b6],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-b81856b6] {\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    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-b81856b6] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-b81856b6] {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),b.render=function(t,n,e,b,r,c){const m=o("PVSButton"),f=o("PVSMenu");return l(),i("div",{class:a(c.containerClass),style:u(e.style)},[p(t.$slots,"default",{},(()=>[d(m,s({type:"button",class:"p-splitbutton-defaultbutton"},t.$attrs,{icon:e.icon,label:e.label,onClick:c.onDefaultButtonClick}),null,16,["icon","label","onClick"])])),d(m,{type:"button",class:"p-splitbutton-menubutton",icon:"pi pi-chevron-down",onClick:c.onDropdownButtonClick,disabled:t.$attrs.disabled,"aria-haspopup":"true","aria-controls":c.ariaId+"_overlay"},null,8,["onClick","disabled","aria-controls"]),d(f,{ref:"menu",id:c.ariaId+"_overlay",model:e.model,popup:!0,autoZIndex:e.autoZIndex,baseZIndex:e.baseZIndex,appendTo:e.appendTo},null,8,["id","model","autoZIndex","baseZIndex","appendTo"])],6)},b.__scopeId="data-v-b81856b6";export{b as default};

package/splitbutton/splitbutton.js

@@ -19,7 +19,7 @@ this.primevue.splitbutton = (function (Button, TieredMenu, utils, vue) {
                 type: String,
                 default: null
             },
-    		model: {
+            model: {
                 type: Array,
                 default: null
             },
@@ -40,7 +40,7 @@ this.primevue.splitbutton = (function (Button, TieredMenu, utils, vue) {
         },
         methods: {
             onDropdownButtonClick() {
-                this.$refs.menu.toggle({currentTarget: this.$el});
+                this.$refs.menu.toggle({ currentTarget: this.$el });
             },
             onDefaultButtonClick() {
                 this.$refs.menu.hide();
@@ -55,8 +55,8 @@ this.primevue.splitbutton = (function (Button, TieredMenu, utils, vue) {
             }
         },
         components: {
-            'PVSButton': Button__default["default"],
-            'PVSMenu': TieredMenu__default["default"]
+            PVSButton: Button__default["default"],
+            PVSMenu: TieredMenu__default["default"]
         }
     };
 
@@ -88,8 +88,8 @@ this.primevue.splitbutton = (function (Button, TieredMenu, utils, vue) {
           "aria-controls": $options.ariaId + '_overlay'
         }, null, 8, ["onClick", "disabled", "aria-controls"]),
         vue.createVNode(_component_PVSMenu, {
-          id: $options.ariaId + '_overlay',
           ref: "menu",
+          id: $options.ariaId + '_overlay',
           model: $props.model,
           popup: true,
           autoZIndex: $props.autoZIndex,
@@ -126,11 +126,11 @@ this.primevue.splitbutton = (function (Button, TieredMenu, utils, vue) {
       }
     }
 
-    var css_248z = "\n.p-splitbutton[data-v-3d44cde8] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-3d44cde8],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-3d44cde8],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-3d44cde8] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-3d44cde8],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-3d44cde8],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-3d44cde8] {\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    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-3d44cde8] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-3d44cde8]  {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
+    var css_248z = "\n.p-splitbutton[data-v-b81856b6] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-b81856b6],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-b81856b6],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-b81856b6] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-b81856b6],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-b81856b6],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-b81856b6] {\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    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-b81856b6] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-b81856b6] {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
     styleInject(css_248z);
 
     script.render = render;
-    script.__scopeId = "data-v-3d44cde8";
+    script.__scopeId = "data-v-b81856b6";
 
     return script;
 

package/splitbutton/splitbutton.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.splitbutton=function(t,e,n,o){"use strict";function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var d=l(t),i=l(e),u={name:"SplitButton",inheritAttrs:!1,props:{label:{type:String,default:null},icon:{type:String,default:null},model:{type:Array,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},class:null,style:null},methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el})},onDefaultButtonClick(){this.$refs.menu.hide()}},computed:{ariaId:()=>n.UniqueComponentId(),containerClass(){return["p-splitbutton p-component",this.class]}},components:{PVSButton:d.default,PVSMenu:i.default}};return function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=t:l.appendChild(document.createTextNode(t))}}("\n.p-splitbutton[data-v-3d44cde8] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-3d44cde8],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-3d44cde8],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-3d44cde8] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-3d44cde8],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-3d44cde8],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-3d44cde8] {\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    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-3d44cde8] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-3d44cde8]  {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),u.render=function(t,e,n,l,d,i){const u=o.resolveComponent("PVSButton"),a=o.resolveComponent("PVSMenu");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(i.containerClass),style:o.normalizeStyle(n.style)},[o.renderSlot(t.$slots,"default",{},(()=>[o.createVNode(u,o.mergeProps({type:"button",class:"p-splitbutton-defaultbutton"},t.$attrs,{icon:n.icon,label:n.label,onClick:i.onDefaultButtonClick}),null,16,["icon","label","onClick"])])),o.createVNode(u,{type:"button",class:"p-splitbutton-menubutton",icon:"pi pi-chevron-down",onClick:i.onDropdownButtonClick,disabled:t.$attrs.disabled,"aria-haspopup":"true","aria-controls":i.ariaId+"_overlay"},null,8,["onClick","disabled","aria-controls"]),o.createVNode(a,{id:i.ariaId+"_overlay",ref:"menu",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo},null,8,["id","model","autoZIndex","baseZIndex","appendTo"])],6)},u.__scopeId="data-v-3d44cde8",u}(primevue.button,primevue.tieredmenu,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.splitbutton=function(t,e,n,o){"use strict";function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=l(t),u=l(e),a={name:"SplitButton",inheritAttrs:!1,props:{label:{type:String,default:null},icon:{type:String,default:null},model:{type:Array,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},class:null,style:null},methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el})},onDefaultButtonClick(){this.$refs.menu.hide()}},computed:{ariaId:()=>n.UniqueComponentId(),containerClass(){return["p-splitbutton p-component",this.class]}},components:{PVSButton:i.default,PVSMenu:u.default}};return function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=t:l.appendChild(document.createTextNode(t))}}("\n.p-splitbutton[data-v-b81856b6] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-b81856b6],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-b81856b6],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-b81856b6] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-b81856b6],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-b81856b6],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-b81856b6] {\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    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-b81856b6] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-b81856b6] {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),a.render=function(t,e,n,l,i,u){const a=o.resolveComponent("PVSButton"),p=o.resolveComponent("PVSMenu");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(u.containerClass),style:o.normalizeStyle(n.style)},[o.renderSlot(t.$slots,"default",{},(()=>[o.createVNode(a,o.mergeProps({type:"button",class:"p-splitbutton-defaultbutton"},t.$attrs,{icon:n.icon,label:n.label,onClick:u.onDefaultButtonClick}),null,16,["icon","label","onClick"])])),o.createVNode(a,{type:"button",class:"p-splitbutton-menubutton",icon:"pi pi-chevron-down",onClick:u.onDropdownButtonClick,disabled:t.$attrs.disabled,"aria-haspopup":"true","aria-controls":u.ariaId+"_overlay"},null,8,["onClick","disabled","aria-controls"]),o.createVNode(p,{ref:"menu",id:u.ariaId+"_overlay",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo},null,8,["id","model","autoZIndex","baseZIndex","appendTo"])],6)},a.__scopeId="data-v-b81856b6",a}(primevue.button,primevue.tieredmenu,primevue.utils,Vue);

package/splitter/Splitter.d.ts

@@ -38,6 +38,11 @@ export interface SplitterProps {
      * Default value is 'session'.
      */
     stateStorage?: SplitterStateStorageType;
+    /**
+     * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
+     * Default value is 1.
+     */
+    step?: number | undefined;
 }
 
 export interface SplitterSlots {
@@ -52,14 +57,14 @@ export declare type SplitterEmits = {
      * Callback to invoke when resize ends.
      * @param {SplitterResizeEndEvent} event - Custom resize end event.
      */
-    'resizeend': (event: SplitterResizeEndEvent) => void;
-}
+    resizeend: (event: SplitterResizeEndEvent) => void;
+};
 
-declare class Splitter extends ClassComponent<SplitterProps, SplitterSlots, SplitterEmits> { }
+declare class Splitter extends ClassComponent<SplitterProps, SplitterSlots, SplitterEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Splitter: GlobalComponentConstructor<Splitter>
+        Splitter: GlobalComponentConstructor<Splitter>;
     }
 }
 
@@ -73,7 +78,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Splitter](https://www.primefaces.org/primevue/showcase/#/splitter)
+ * - [Splitter](https://www.primefaces.org/primevue/splitter)
  *
  */
 export default Splitter;

package/splitter/Splitter.vue

@@ -1,20 +1,25 @@
 <template>
     <div :class="containerClass">
-        <template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
-            <component :is="panel"></component>
-            <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
+        <template v-for="(panel, i) of panels" :key="i" class="p-splitter-panel">
+            <component :is="panel" tabindex="-1"></component>
+            <div
+                v-if="i !== panels.length - 1"
+                class="p-splitter-gutter"
+                role="separator"
+                tabindex="-1"
                 @mousedown="onGutterMouseDown($event, i)"
                 @touchstart="onGutterTouchStart($event, i)"
                 @touchmove="onGutterTouchMove($event, i)"
-                @touchend="onGutterTouchEnd($event, i)">
-                <div class="p-splitter-gutter-handle"></div>
+                @touchend="onGutterTouchEnd($event, i)"
+            >
+                <div class="p-splitter-gutter-handle" tabindex="0" :style="gutterStyle" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)"></div>
             </div>
         </template>
     </div>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Splitter',
@@ -35,6 +40,10 @@ export default {
         stateStorage: {
             type: String,
             default: 'session'
+        },
+        step: {
+            type: Number,
+            default: 5
         }
     },
     dragging: false,
@@ -51,25 +60,34 @@ export default {
     prevPanelSize: null,
     panelSizes: null,
     prevPanelIndex: null,
+    timer: null,
+    data() {
+        return {
+            prevSize: null
+        };
+    },
     mounted() {
         if (this.panels && this.panels.length) {
             let initialized = false;
+
             if (this.isStateful()) {
                 initialized = this.restoreState();
             }
 
             if (!initialized) {
-                let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
+                let children = [...this.$el.children].filter((child) => DomHandler.hasClass(child, 'p-splitter-panel'));
                 let _panelSizes = [];
 
                 this.panels.map((panel, i) => {
-                    let panelInitialSize = panel.props && panel.props.size ? panel.props.size: null;
-                    let panelSize = panelInitialSize || (100 / this.panels.length);
+                    let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
+                    let panelSize = panelInitialSize || 100 / this.panels.length;
+
                     _panelSizes[i] = panelSize;
-                    children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                    children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
                 });
 
                 this.panelSizes = _panelSizes;
+                this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
             }
         }
     },
@@ -81,32 +99,54 @@ export default {
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },
-        onResizeStart(event, index) {
-            this.gutterElement = event.currentTarget;
+        onResizeStart(event, index, isKeyDown) {
+            this.gutterElement = event.currentTarget || event.target.parentElement;
             this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
-            this.dragging = true;
-            this.startPos = this.layout === 'horizontal' ? (event.pageX || event.changedTouches[0].pageX) : (event.pageY || event.changedTouches[0].pageY);
+
+            if (!isKeyDown) {
+                this.dragging = true;
+                this.startPos = this.layout === 'horizontal' ? event.pageX || event.changedTouches[0].pageX : event.pageY || event.changedTouches[0].pageY;
+            }
+
             this.prevPanelElement = this.gutterElement.previousElementSibling;
             this.nextPanelElement = this.gutterElement.nextElementSibling;
-            this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
-            this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
+
+            if (isKeyDown) {
+                this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true);
+                this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true);
+            } else {
+                this.prevPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true))) / this.size;
+                this.nextPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true))) / this.size;
+            }
+
             this.prevPanelIndex = index;
             DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing');
             DomHandler.addClass(this.$el, 'p-splitter-resizing');
         },
-        onResize(event) {
-            let newPos;
-            if (this.horizontal)
-                newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
-            else
-                newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
+        onResize(event, step, isKeyDown) {
+            let newPos, newPrevPanelSize, newNextPanelSize;
+
+            if (isKeyDown) {
+                if (this.horizontal) {
+                    newPrevPanelSize = (100 * (this.prevPanelSize + step)) / this.size;
+                    newNextPanelSize = (100 * (this.nextPanelSize - step)) / this.size;
+                } else {
+                    newPrevPanelSize = (100 * (this.prevPanelSize - step)) / this.size;
+                    newNextPanelSize = (100 * (this.nextPanelSize + step)) / this.size;
+                }
+            } else {
+                if (this.horizontal) newPos = (event.pageX * 100) / this.size - (this.startPos * 100) / this.size;
+                else newPos = (event.pageY * 100) / this.size - (this.startPos * 100) / this.size;
 
-            let newPrevPanelSize = this.prevPanelSize + newPos;
-            let newNextPanelSize = this.nextPanelSize - newPos;
+                newPrevPanelSize = this.prevPanelSize + newPos;
+                newNextPanelSize = this.nextPanelSize - newPos;
+            }
+
+            this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
 
             if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
-                this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
-                this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
+                this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
                 this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
                 this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
             }
@@ -116,11 +156,73 @@ export default {
                 this.saveState();
             }
 
-            this.$emit('resizeend', {originalEvent: event, sizes: this.panelSizes});
+            this.$emit('resizeend', { originalEvent: event, sizes: this.panelSizes });
             DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
             DomHandler.removeClass(this.$el, 'p-splitter-resizing');
             this.clear();
         },
+        repeat(event, index, step) {
+            this.onResizeStart(event, index, true);
+            this.onResize(event, step, true);
+        },
+        setTimer(event, index, step) {
+            this.clearTimer();
+            this.timer = setTimeout(() => {
+                this.repeat(event, index, step);
+            }, 40);
+        },
+        clearTimer() {
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
+        },
+        onGutterKeyUp() {
+            this.clearTimer();
+            this.onResizeEnd();
+        },
+        onGutterKeyDown(event, index) {
+            switch (event.code) {
+                case 'ArrowLeft': {
+                    if (this.layout === 'horizontal') {
+                        this.setTimer(event, index, this.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    if (this.layout === 'horizontal') {
+                        this.setTimer(event, index, this.step);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown': {
+                    if (this.layout === 'vertical') {
+                        this.setTimer(event, index, this.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    if (this.layout === 'vertical') {
+                        this.setTimer(event, index, this.step);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
         onGutterMouseDown(event, index) {
             this.onResizeStart(event, index);
             this.bindMouseListeners();
@@ -141,39 +243,43 @@ export default {
         },
         bindMouseListeners() {
             if (!this.mouseMoveListener) {
-                this.mouseMoveListener = event => this.onResize(event)
+                this.mouseMoveListener = (event) => this.onResize(event);
                 document.addEventListener('mousemove', this.mouseMoveListener);
             }
 
             if (!this.mouseUpListener) {
-                this.mouseUpListener = event => {
+                this.mouseUpListener = (event) => {
                     this.onResizeEnd(event);
                     this.unbindMouseListeners();
-                }
+                };
+
                 document.addEventListener('mouseup', this.mouseUpListener);
             }
         },
         bindTouchListeners() {
             if (!this.touchMoveListener) {
-                this.touchMoveListener = event => this.onResize(event.changedTouches[0])
+                this.touchMoveListener = (event) => this.onResize(event.changedTouches[0]);
                 document.addEventListener('touchmove', this.touchMoveListener);
             }
 
             if (!this.touchEndListener) {
-                this.touchEndListener = event => {
+                this.touchEndListener = (event) => {
                     this.resizeEnd(event);
                     this.unbindTouchListeners();
-                }
+                };
+
                 document.addEventListener('touchend', this.touchEndListener);
             }
         },
         validateResize(newPrevPanelSize, newNextPanelSize) {
             let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize');
+
             if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
                 return false;
             }
 
             let newPanelMinSize = ObjectUtils.getVNodeProp(this.panels[1], 'minSize');
+
             if (this.panels[1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) {
                 return false;
             }
@@ -217,7 +323,7 @@ export default {
             return this.stateKey != null;
         },
         getStorage() {
-            switch(this.stateStorage) {
+            switch (this.stateStorage) {
                 case 'local':
                     return window.localStorage;
 
@@ -237,9 +343,10 @@ export default {
 
             if (stateString) {
                 this.panelSizes = JSON.parse(stateString);
-                let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
+                let children = [...this.$el.children].filter((child) => DomHandler.hasClass(child, 'p-splitter-panel'));
+
                 children.forEach((child, i) => {
-                    child.style.flexBasis = 'calc(' + this.panelSizes[i] + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                    child.style.flexBasis = 'calc(' + this.panelSizes[i] + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
                 });
 
                 return true;
@@ -254,32 +361,30 @@ export default {
         },
         panels() {
             const panels = [];
-            this.$slots.default().forEach(child => {
-                    if (this.isSplitterPanel(child)) {
-                        panels.push(child);
-                    }
-                    else if (child.children instanceof Array) {
-                        child.children.forEach(nestedChild => {
-                            if (this.isSplitterPanel(nestedChild)) {
-                                panels.push(nestedChild)
-                            }
-                        });
-                    }
+
+            this.$slots.default().forEach((child) => {
+                if (this.isSplitterPanel(child)) {
+                    panels.push(child);
+                } else if (child.children instanceof Array) {
+                    child.children.forEach((nestedChild) => {
+                        if (this.isSplitterPanel(nestedChild)) {
+                            panels.push(nestedChild);
+                        }
+                    });
                 }
-            )
+            });
+
             return panels;
         },
         gutterStyle() {
-            if (this.horizontal)
-                return {width: this.gutterSize + 'px'};
-            else
-                return {height: this.gutterSize + 'px'};
+            if (this.horizontal) return { width: this.gutterSize + 'px' };
+            else return { height: this.gutterSize + 'px' };
         },
         horizontal() {
             return this.layout === 'horizontal';
         }
     }
-}
+};
 </script>
 
 <style>