primevue 3.27.0 → 3.28.0

package/splitbutton/splitbutton.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var Button = require('primevue/button');
 var ChevronDownIcon = require('primevue/icons/chevrondown');
 var TieredMenu = require('primevue/tieredmenu');
@@ -8,12 +9,14 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
 var TieredMenu__default = /*#__PURE__*/_interopDefaultLegacy(TieredMenu);
 
 var script = {
     name: 'SplitButton',
+    extends: BaseComponent__default["default"],
     emits: ['click'],
     props: {
         label: {
@@ -148,10 +151,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PVSButton = vue.resolveComponent("PVSButton");
   const _component_PVSMenu = vue.resolveComponent("PVSMenu");
 
-  return (vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass($options.containerClass),
-    style: vue.normalizeStyle($props.style)
-  }, [
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    class: $options.containerClass,
+    style: $props.style
+  }, _ctx.ptm('root')), [
     vue.renderSlot(_ctx.$slots, "default", {}, () => [
       vue.createVNode(_component_PVSButton, vue.mergeProps({
         type: "button",
@@ -160,12 +163,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         disabled: $props.disabled,
         "aria-label": $props.label,
         onClick: $options.onDefaultButtonClick
-      }, $props.buttonProps), {
+      }, { ...$props.buttonProps, ..._ctx.ptm('button') }), {
         icon: vue.withCtx((slotProps) => [
           vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass([$props.icon, slotProps.class])
-            }, null, 2)
+            vue.createElementVNode("span", vue.mergeProps({
+              class: [$props.icon, slotProps.class]
+            }, _ctx.ptm('icon')), null, 16)
           ])
         ]),
         _: 3
@@ -180,17 +183,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-expanded": $data.isExpanded,
       "aria-controls": $options.ariaId + '_overlay',
       onClick: $options.onDropdownButtonClick,
-      onKeydown: $options.onDropdownKeydown
+      onKeydown: $options.onDropdownKeydown,
+      pt: _ctx.ptm('menuButton')
     }, $props.menuButtonProps), {
       icon: vue.withCtx((slotProps) => [
         vue.renderSlot(_ctx.$slots, "menubuttonicon", {}, () => [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.menuButtonIcon ? 'span' : 'ChevronDownIcon'), {
-            class: vue.normalizeClass([$props.menuButtonIcon, slotProps.class])
-          }, null, 8, ["class"]))
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.menuButtonIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
+            class: [$props.menuButtonIcon, slotProps.class]
+          }, _ctx.ptm('menuButton')['icon']), null, 16, ["class"]))
         ])
       ]),
       _: 3
-    }, 16, ["disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown"]),
+    }, 16, ["disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown", "pt"]),
     vue.createVNode(_component_PVSMenu, {
       ref: "menu",
       id: $options.ariaId + '_overlay',
@@ -198,9 +202,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       popup: true,
       autoZIndex: $props.autoZIndex,
       baseZIndex: $props.baseZIndex,
-      appendTo: $props.appendTo
-    }, null, 8, ["id", "model", "autoZIndex", "baseZIndex", "appendTo"])
-  ], 6))
+      appendTo: $props.appendTo,
+      pt: _ctx.ptm('menu')
+    }, null, 8, ["id", "model", "autoZIndex", "baseZIndex", "appendTo", "pt"])
+  ], 16))
 }
 
 function styleInject(css, ref) {
@@ -230,10 +235,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-splitbutton[data-v-5a8b8d41] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41] {\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-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41] {\n    display: flex;\n    align-items: 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-5a8b8d41] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-5a8b8d41] {\n    display: flex;\n}\n";
+var css_248z = "\n.p-splitbutton[data-v-adce18cc] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc] {\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-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-adce18cc] {\n    display: flex;\n    align-items: 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-adce18cc] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-adce18cc] {\n    display: flex;\n}\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-5a8b8d41";
+script.__scopeId = "data-v-adce18cc";
 
 module.exports = script;

package/splitbutton/splitbutton.cjs.min.js

@@ -1 +1 @@
-"use strict";var t=require("primevue/button"),e=require("primevue/icons/chevrondown"),n=require("primevue/tieredmenu"),o=require("primevue/utils"),l=require("vue");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var u=a(t),d=a(e),i=a(n),s={name:"SplitButton",emits:["click"],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"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:void 0},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},data:()=>({isExpanded:!1}),methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=!this.$refs.menu.visible},onDropdownKeydown(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick(t){this.isExpanded&&this.$refs.menu.hide(t),this.$emit("click",t)}},computed:{ariaId:()=>o.UniqueComponentId(),containerClass(){return["p-splitbutton p-component",this.class,{[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size}]}},components:{PVSButton:u.default,PVSMenu:i.default,ChevronDownIcon:d.default}};!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-5a8b8d41] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41] {\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-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41] {\n    display: flex;\n    align-items: 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-5a8b8d41] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-5a8b8d41] {\n    display: flex;\n}\n"),s.render=function(t,e,n,o,a,u){const d=l.resolveComponent("PVSButton"),i=l.resolveComponent("PVSMenu");return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(u.containerClass),style:l.normalizeStyle(n.style)},[l.renderSlot(t.$slots,"default",{},(()=>[l.createVNode(d,l.mergeProps({type:"button",class:"p-splitbutton-defaultbutton",label:n.label,disabled:n.disabled,"aria-label":n.label,onClick:u.onDefaultButtonClick},n.buttonProps),{icon:l.withCtx((e=>[l.renderSlot(t.$slots,"icon",{},(()=>[l.createElementVNode("span",{class:l.normalizeClass([n.icon,e.class])},null,2)]))])),_:3},16,["label","disabled","aria-label","onClick"])])),l.createVNode(d,l.mergeProps({ref:"button",type:"button",class:"p-splitbutton-menubutton",disabled:n.disabled,"aria-haspopup":"true","aria-expanded":a.isExpanded,"aria-controls":u.ariaId+"_overlay",onClick:u.onDropdownButtonClick,onKeydown:u.onDropdownKeydown},n.menuButtonProps),{icon:l.withCtx((e=>[l.renderSlot(t.$slots,"menubuttonicon",{},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(n.menuButtonIcon?"span":"ChevronDownIcon"),{class:l.normalizeClass([n.menuButtonIcon,e.class])},null,8,["class"]))]))])),_:3},16,["disabled","aria-expanded","aria-controls","onClick","onKeydown"]),l.createVNode(i,{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)},s.__scopeId="data-v-5a8b8d41",module.exports=s;
+"use strict";var t=require("primevue/basecomponent"),e=require("primevue/button"),n=require("primevue/icons/chevrondown"),o=require("primevue/tieredmenu"),l=require("primevue/utils"),u=require("vue");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var d=a(t),i=a(e),p=a(n),r=a(o),s={name:"SplitButton",extends:d.default,emits:["click"],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"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:void 0},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},data:()=>({isExpanded:!1}),methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=!this.$refs.menu.visible},onDropdownKeydown(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick(t){this.isExpanded&&this.$refs.menu.hide(t),this.$emit("click",t)}},computed:{ariaId:()=>l.UniqueComponentId(),containerClass(){return["p-splitbutton p-component",this.class,{[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size}]}},components:{PVSButton:i.default,PVSMenu:r.default,ChevronDownIcon:p.default}};!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-adce18cc] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc] {\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-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-adce18cc] {\n    display: flex;\n    align-items: 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-adce18cc] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-adce18cc] {\n    display: flex;\n}\n"),s.render=function(t,e,n,o,l,a){const d=u.resolveComponent("PVSButton"),i=u.resolveComponent("PVSMenu");return u.openBlock(),u.createElementBlock("div",u.mergeProps({class:a.containerClass,style:n.style},t.ptm("root")),[u.renderSlot(t.$slots,"default",{},(()=>[u.createVNode(d,u.mergeProps({type:"button",class:"p-splitbutton-defaultbutton",label:n.label,disabled:n.disabled,"aria-label":n.label,onClick:a.onDefaultButtonClick},{...n.buttonProps,...t.ptm("button")}),{icon:u.withCtx((e=>[u.renderSlot(t.$slots,"icon",{},(()=>[u.createElementVNode("span",u.mergeProps({class:[n.icon,e.class]},t.ptm("icon")),null,16)]))])),_:3},16,["label","disabled","aria-label","onClick"])])),u.createVNode(d,u.mergeProps({ref:"button",type:"button",class:"p-splitbutton-menubutton",disabled:n.disabled,"aria-haspopup":"true","aria-expanded":l.isExpanded,"aria-controls":a.ariaId+"_overlay",onClick:a.onDropdownButtonClick,onKeydown:a.onDropdownKeydown,pt:t.ptm("menuButton")},n.menuButtonProps),{icon:u.withCtx((e=>[u.renderSlot(t.$slots,"menubuttonicon",{},(()=>[(u.openBlock(),u.createBlock(u.resolveDynamicComponent(n.menuButtonIcon?"span":"ChevronDownIcon"),u.mergeProps({class:[n.menuButtonIcon,e.class]},t.ptm("menuButton").icon),null,16,["class"]))]))])),_:3},16,["disabled","aria-expanded","aria-controls","onClick","onKeydown","pt"]),u.createVNode(i,{ref:"menu",id:a.ariaId+"_overlay",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo,pt:t.ptm("menu")},null,8,["id","model","autoZIndex","baseZIndex","appendTo","pt"])],16)},s.__scopeId="data-v-adce18cc",module.exports=s;

package/splitbutton/splitbutton.esm.js

@@ -1,11 +1,13 @@
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import TieredMenu from 'primevue/tieredmenu';
 import { UniqueComponentId } from 'primevue/utils';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createVNode, mergeProps, withCtx, createElementVNode, createBlock, resolveDynamicComponent } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createVNode, withCtx, createElementVNode, createBlock, resolveDynamicComponent } from 'vue';
 
 var script = {
     name: 'SplitButton',
+    extends: BaseComponent,
     emits: ['click'],
     props: {
         label: {
@@ -140,10 +142,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PVSButton = resolveComponent("PVSButton");
   const _component_PVSMenu = resolveComponent("PVSMenu");
 
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass),
-    style: normalizeStyle($props.style)
-  }, [
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: $options.containerClass,
+    style: $props.style
+  }, _ctx.ptm('root')), [
     renderSlot(_ctx.$slots, "default", {}, () => [
       createVNode(_component_PVSButton, mergeProps({
         type: "button",
@@ -152,12 +154,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         disabled: $props.disabled,
         "aria-label": $props.label,
         onClick: $options.onDefaultButtonClick
-      }, $props.buttonProps), {
+      }, { ...$props.buttonProps, ..._ctx.ptm('button') }), {
         icon: withCtx((slotProps) => [
           renderSlot(_ctx.$slots, "icon", {}, () => [
-            createElementVNode("span", {
-              class: normalizeClass([$props.icon, slotProps.class])
-            }, null, 2)
+            createElementVNode("span", mergeProps({
+              class: [$props.icon, slotProps.class]
+            }, _ctx.ptm('icon')), null, 16)
           ])
         ]),
         _: 3
@@ -172,17 +174,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-expanded": $data.isExpanded,
       "aria-controls": $options.ariaId + '_overlay',
       onClick: $options.onDropdownButtonClick,
-      onKeydown: $options.onDropdownKeydown
+      onKeydown: $options.onDropdownKeydown,
+      pt: _ctx.ptm('menuButton')
     }, $props.menuButtonProps), {
       icon: withCtx((slotProps) => [
         renderSlot(_ctx.$slots, "menubuttonicon", {}, () => [
-          (openBlock(), createBlock(resolveDynamicComponent($props.menuButtonIcon ? 'span' : 'ChevronDownIcon'), {
-            class: normalizeClass([$props.menuButtonIcon, slotProps.class])
-          }, null, 8, ["class"]))
+          (openBlock(), createBlock(resolveDynamicComponent($props.menuButtonIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
+            class: [$props.menuButtonIcon, slotProps.class]
+          }, _ctx.ptm('menuButton')['icon']), null, 16, ["class"]))
         ])
       ]),
       _: 3
-    }, 16, ["disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown"]),
+    }, 16, ["disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown", "pt"]),
     createVNode(_component_PVSMenu, {
       ref: "menu",
       id: $options.ariaId + '_overlay',
@@ -190,9 +193,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       popup: true,
       autoZIndex: $props.autoZIndex,
       baseZIndex: $props.baseZIndex,
-      appendTo: $props.appendTo
-    }, null, 8, ["id", "model", "autoZIndex", "baseZIndex", "appendTo"])
-  ], 6))
+      appendTo: $props.appendTo,
+      pt: _ctx.ptm('menu')
+    }, null, 8, ["id", "model", "autoZIndex", "baseZIndex", "appendTo", "pt"])
+  ], 16))
 }
 
 function styleInject(css, ref) {
@@ -222,10 +226,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-splitbutton[data-v-5a8b8d41] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41] {\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-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41] {\n    display: flex;\n    align-items: 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-5a8b8d41] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-5a8b8d41] {\n    display: flex;\n}\n";
+var css_248z = "\n.p-splitbutton[data-v-adce18cc] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc] {\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-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-adce18cc] {\n    display: flex;\n    align-items: 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-adce18cc] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-adce18cc] {\n    display: flex;\n}\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-5a8b8d41";
+script.__scopeId = "data-v-adce18cc";
 
 export { script as default };

package/splitbutton/splitbutton.esm.min.js

@@ -1 +1 @@
-import t from"primevue/button";import e from"primevue/icons/chevrondown";import n from"primevue/tieredmenu";import{UniqueComponentId as o}from"primevue/utils";import{resolveComponent as l,openBlock as a,createElementBlock as u,normalizeClass as d,normalizeStyle as i,renderSlot as s,createVNode as p,mergeProps as r,withCtx as b,createElementVNode as c,createBlock as m,resolveDynamicComponent as f}from"vue";var y={name:"SplitButton",emits:["click"],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"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:void 0},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},data:()=>({isExpanded:!1}),methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=!this.$refs.menu.visible},onDropdownKeydown(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick(t){this.isExpanded&&this.$refs.menu.hide(t),this.$emit("click",t)}},computed:{ariaId:()=>o(),containerClass(){return["p-splitbutton p-component",this.class,{[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size}]}},components:{PVSButton:t,PVSMenu:n,ChevronDownIcon: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-5a8b8d41] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41] {\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-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41] {\n    display: flex;\n    align-items: 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-5a8b8d41] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-5a8b8d41] {\n    display: flex;\n}\n"),y.render=function(t,e,n,o,y,h){const v=l("PVSButton"),x=l("PVSMenu");return a(),u("div",{class:d(h.containerClass),style:i(n.style)},[s(t.$slots,"default",{},(()=>[p(v,r({type:"button",class:"p-splitbutton-defaultbutton",label:n.label,disabled:n.disabled,"aria-label":n.label,onClick:h.onDefaultButtonClick},n.buttonProps),{icon:b((e=>[s(t.$slots,"icon",{},(()=>[c("span",{class:d([n.icon,e.class])},null,2)]))])),_:3},16,["label","disabled","aria-label","onClick"])])),p(v,r({ref:"button",type:"button",class:"p-splitbutton-menubutton",disabled:n.disabled,"aria-haspopup":"true","aria-expanded":y.isExpanded,"aria-controls":h.ariaId+"_overlay",onClick:h.onDropdownButtonClick,onKeydown:h.onDropdownKeydown},n.menuButtonProps),{icon:b((e=>[s(t.$slots,"menubuttonicon",{},(()=>[(a(),m(f(n.menuButtonIcon?"span":"ChevronDownIcon"),{class:d([n.menuButtonIcon,e.class])},null,8,["class"]))]))])),_:3},16,["disabled","aria-expanded","aria-controls","onClick","onKeydown"]),p(x,{ref:"menu",id:h.ariaId+"_overlay",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo},null,8,["id","model","autoZIndex","baseZIndex","appendTo"])],6)},y.__scopeId="data-v-5a8b8d41";export{y as default};
+import t from"primevue/basecomponent";import e from"primevue/button";import n from"primevue/icons/chevrondown";import o from"primevue/tieredmenu";import{UniqueComponentId as l}from"primevue/utils";import{resolveComponent as u,openBlock as a,createElementBlock as d,mergeProps as i,renderSlot as p,createVNode as s,withCtx as r,createElementVNode as c,createBlock as b,resolveDynamicComponent as m}from"vue";var f={name:"SplitButton",extends:t,emits:["click"],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"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:void 0},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},data:()=>({isExpanded:!1}),methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=!this.$refs.menu.visible},onDropdownKeydown(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick(t){this.isExpanded&&this.$refs.menu.hide(t),this.$emit("click",t)}},computed:{ariaId:()=>l(),containerClass(){return["p-splitbutton p-component",this.class,{[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size}]}},components:{PVSButton:e,PVSMenu:o,ChevronDownIcon:n}};!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-adce18cc] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc] {\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-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-adce18cc] {\n    display: flex;\n    align-items: 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-adce18cc] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-adce18cc] {\n    display: flex;\n}\n"),f.render=function(t,e,n,o,l,f){const y=u("PVSButton"),h=u("PVSMenu");return a(),d("div",i({class:f.containerClass,style:n.style},t.ptm("root")),[p(t.$slots,"default",{},(()=>[s(y,i({type:"button",class:"p-splitbutton-defaultbutton",label:n.label,disabled:n.disabled,"aria-label":n.label,onClick:f.onDefaultButtonClick},{...n.buttonProps,...t.ptm("button")}),{icon:r((e=>[p(t.$slots,"icon",{},(()=>[c("span",i({class:[n.icon,e.class]},t.ptm("icon")),null,16)]))])),_:3},16,["label","disabled","aria-label","onClick"])])),s(y,i({ref:"button",type:"button",class:"p-splitbutton-menubutton",disabled:n.disabled,"aria-haspopup":"true","aria-expanded":l.isExpanded,"aria-controls":f.ariaId+"_overlay",onClick:f.onDropdownButtonClick,onKeydown:f.onDropdownKeydown,pt:t.ptm("menuButton")},n.menuButtonProps),{icon:r((e=>[p(t.$slots,"menubuttonicon",{},(()=>[(a(),b(m(n.menuButtonIcon?"span":"ChevronDownIcon"),i({class:[n.menuButtonIcon,e.class]},t.ptm("menuButton").icon),null,16,["class"]))]))])),_:3},16,["disabled","aria-expanded","aria-controls","onClick","onKeydown","pt"]),s(h,{ref:"menu",id:f.ariaId+"_overlay",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo,pt:t.ptm("menu")},null,8,["id","model","autoZIndex","baseZIndex","appendTo","pt"])],16)},f.__scopeId="data-v-adce18cc";export{f as default};

package/splitbutton/splitbutton.js

@@ -1,15 +1,17 @@
 this.primevue = this.primevue || {};
-this.primevue.splitbutton = (function (Button, ChevronDownIcon, TieredMenu, utils, vue) {
+this.primevue.splitbutton = (function (BaseComponent, Button, ChevronDownIcon, TieredMenu, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
     var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
     var TieredMenu__default = /*#__PURE__*/_interopDefaultLegacy(TieredMenu);
 
     var script = {
         name: 'SplitButton',
+        extends: BaseComponent__default["default"],
         emits: ['click'],
         props: {
             label: {
@@ -144,10 +146,10 @@ this.primevue.splitbutton = (function (Button, ChevronDownIcon, TieredMenu, util
       const _component_PVSButton = vue.resolveComponent("PVSButton");
       const _component_PVSMenu = vue.resolveComponent("PVSMenu");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass),
-        style: vue.normalizeStyle($props.style)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: $options.containerClass,
+        style: $props.style
+      }, _ctx.ptm('root')), [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
           vue.createVNode(_component_PVSButton, vue.mergeProps({
             type: "button",
@@ -156,12 +158,12 @@ this.primevue.splitbutton = (function (Button, ChevronDownIcon, TieredMenu, util
             disabled: $props.disabled,
             "aria-label": $props.label,
             onClick: $options.onDefaultButtonClick
-          }, $props.buttonProps), {
+          }, { ...$props.buttonProps, ..._ctx.ptm('button') }), {
             icon: vue.withCtx((slotProps) => [
               vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass([$props.icon, slotProps.class])
-                }, null, 2)
+                vue.createElementVNode("span", vue.mergeProps({
+                  class: [$props.icon, slotProps.class]
+                }, _ctx.ptm('icon')), null, 16)
               ])
             ]),
             _: 3
@@ -176,17 +178,18 @@ this.primevue.splitbutton = (function (Button, ChevronDownIcon, TieredMenu, util
           "aria-expanded": $data.isExpanded,
           "aria-controls": $options.ariaId + '_overlay',
           onClick: $options.onDropdownButtonClick,
-          onKeydown: $options.onDropdownKeydown
+          onKeydown: $options.onDropdownKeydown,
+          pt: _ctx.ptm('menuButton')
         }, $props.menuButtonProps), {
           icon: vue.withCtx((slotProps) => [
             vue.renderSlot(_ctx.$slots, "menubuttonicon", {}, () => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.menuButtonIcon ? 'span' : 'ChevronDownIcon'), {
-                class: vue.normalizeClass([$props.menuButtonIcon, slotProps.class])
-              }, null, 8, ["class"]))
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.menuButtonIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
+                class: [$props.menuButtonIcon, slotProps.class]
+              }, _ctx.ptm('menuButton')['icon']), null, 16, ["class"]))
             ])
           ]),
           _: 3
-        }, 16, ["disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown"]),
+        }, 16, ["disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown", "pt"]),
         vue.createVNode(_component_PVSMenu, {
           ref: "menu",
           id: $options.ariaId + '_overlay',
@@ -194,9 +197,10 @@ this.primevue.splitbutton = (function (Button, ChevronDownIcon, TieredMenu, util
           popup: true,
           autoZIndex: $props.autoZIndex,
           baseZIndex: $props.baseZIndex,
-          appendTo: $props.appendTo
-        }, null, 8, ["id", "model", "autoZIndex", "baseZIndex", "appendTo"])
-      ], 6))
+          appendTo: $props.appendTo,
+          pt: _ctx.ptm('menu')
+        }, null, 8, ["id", "model", "autoZIndex", "baseZIndex", "appendTo", "pt"])
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -226,12 +230,12 @@ this.primevue.splitbutton = (function (Button, ChevronDownIcon, TieredMenu, util
       }
     }
 
-    var css_248z = "\n.p-splitbutton[data-v-5a8b8d41] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41] {\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-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41] {\n    display: flex;\n    align-items: 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-5a8b8d41] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-5a8b8d41] {\n    display: flex;\n}\n";
+    var css_248z = "\n.p-splitbutton[data-v-adce18cc] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc] {\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-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-adce18cc] {\n    display: flex;\n    align-items: 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-adce18cc] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-adce18cc] {\n    display: flex;\n}\n";
     styleInject(css_248z);
 
     script.render = render;
-    script.__scopeId = "data-v-5a8b8d41";
+    script.__scopeId = "data-v-adce18cc";
 
     return script;
 
-})(primevue.button, primevue.icons.chevrondown, primevue.tieredmenu, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.button, primevue.icons.chevrondown, primevue.tieredmenu, primevue.utils, Vue);

package/splitbutton/splitbutton.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.splitbutton=function(t,e,n,o,l){"use strict";function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var u=a(t),d=a(e),i=a(n),s={name:"SplitButton",emits:["click"],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"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:void 0},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},data:()=>({isExpanded:!1}),methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=!this.$refs.menu.visible},onDropdownKeydown(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick(t){this.isExpanded&&this.$refs.menu.hide(t),this.$emit("click",t)}},computed:{ariaId:()=>o.UniqueComponentId(),containerClass(){return["p-splitbutton p-component",this.class,{[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size}]}},components:{PVSButton:u.default,PVSMenu:i.default,ChevronDownIcon:d.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-5a8b8d41] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-5a8b8d41] {\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-5a8b8d41],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-5a8b8d41] {\n    display: flex;\n    align-items: 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-5a8b8d41] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-5a8b8d41] {\n    display: flex;\n}\n"),s.render=function(t,e,n,o,a,u){const d=l.resolveComponent("PVSButton"),i=l.resolveComponent("PVSMenu");return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(u.containerClass),style:l.normalizeStyle(n.style)},[l.renderSlot(t.$slots,"default",{},(()=>[l.createVNode(d,l.mergeProps({type:"button",class:"p-splitbutton-defaultbutton",label:n.label,disabled:n.disabled,"aria-label":n.label,onClick:u.onDefaultButtonClick},n.buttonProps),{icon:l.withCtx((e=>[l.renderSlot(t.$slots,"icon",{},(()=>[l.createElementVNode("span",{class:l.normalizeClass([n.icon,e.class])},null,2)]))])),_:3},16,["label","disabled","aria-label","onClick"])])),l.createVNode(d,l.mergeProps({ref:"button",type:"button",class:"p-splitbutton-menubutton",disabled:n.disabled,"aria-haspopup":"true","aria-expanded":a.isExpanded,"aria-controls":u.ariaId+"_overlay",onClick:u.onDropdownButtonClick,onKeydown:u.onDropdownKeydown},n.menuButtonProps),{icon:l.withCtx((e=>[l.renderSlot(t.$slots,"menubuttonicon",{},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(n.menuButtonIcon?"span":"ChevronDownIcon"),{class:l.normalizeClass([n.menuButtonIcon,e.class])},null,8,["class"]))]))])),_:3},16,["disabled","aria-expanded","aria-controls","onClick","onKeydown"]),l.createVNode(i,{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)},s.__scopeId="data-v-5a8b8d41",s}(primevue.button,primevue.icons.chevrondown,primevue.tieredmenu,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.splitbutton=function(t,e,n,o,l,u){"use strict";function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var d=a(t),i=a(e),p=a(n),s=a(o),r={name:"SplitButton",extends:d.default,emits:["click"],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"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:void 0},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},data:()=>({isExpanded:!1}),methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=!this.$refs.menu.visible},onDropdownKeydown(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick(t){this.isExpanded&&this.$refs.menu.hide(t),this.$emit("click",t)}},computed:{ariaId:()=>l.UniqueComponentId(),containerClass(){return["p-splitbutton p-component",this.class,{[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size}]}},components:{PVSButton:i.default,PVSMenu:s.default,ChevronDownIcon:p.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-adce18cc] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-adce18cc] {\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-adce18cc],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-adce18cc],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-adce18cc] {\n    display: flex;\n    align-items: 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-adce18cc] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-adce18cc] {\n    display: flex;\n}\n"),r.render=function(t,e,n,o,l,a){const d=u.resolveComponent("PVSButton"),i=u.resolveComponent("PVSMenu");return u.openBlock(),u.createElementBlock("div",u.mergeProps({class:a.containerClass,style:n.style},t.ptm("root")),[u.renderSlot(t.$slots,"default",{},(()=>[u.createVNode(d,u.mergeProps({type:"button",class:"p-splitbutton-defaultbutton",label:n.label,disabled:n.disabled,"aria-label":n.label,onClick:a.onDefaultButtonClick},{...n.buttonProps,...t.ptm("button")}),{icon:u.withCtx((e=>[u.renderSlot(t.$slots,"icon",{},(()=>[u.createElementVNode("span",u.mergeProps({class:[n.icon,e.class]},t.ptm("icon")),null,16)]))])),_:3},16,["label","disabled","aria-label","onClick"])])),u.createVNode(d,u.mergeProps({ref:"button",type:"button",class:"p-splitbutton-menubutton",disabled:n.disabled,"aria-haspopup":"true","aria-expanded":l.isExpanded,"aria-controls":a.ariaId+"_overlay",onClick:a.onDropdownButtonClick,onKeydown:a.onDropdownKeydown,pt:t.ptm("menuButton")},n.menuButtonProps),{icon:u.withCtx((e=>[u.renderSlot(t.$slots,"menubuttonicon",{},(()=>[(u.openBlock(),u.createBlock(u.resolveDynamicComponent(n.menuButtonIcon?"span":"ChevronDownIcon"),u.mergeProps({class:[n.menuButtonIcon,e.class]},t.ptm("menuButton").icon),null,16,["class"]))]))])),_:3},16,["disabled","aria-expanded","aria-controls","onClick","onKeydown","pt"]),u.createVNode(i,{ref:"menu",id:a.ariaId+"_overlay",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo,pt:t.ptm("menu")},null,8,["id","model","autoZIndex","baseZIndex","appendTo","pt"])],16)},r.__scopeId="data-v-adce18cc",r}(primevue.basecomponent,primevue.button,primevue.icons.chevrondown,primevue.tieredmenu,primevue.utils,Vue);

package/steps/Steps.d.ts

@@ -11,6 +11,53 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type StepsPassThroughOptionType = StepsPassThroughAttributes | ((options: StepsPassThroughMethodOptions) => StepsPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepsPassThroughMethodOptions {
+    props: StepsProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepsProps.pt}
+ */
+export interface StepsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the step's DOM element.
+     */
+    step?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: StepsPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface StepsPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Steps component.
  */
@@ -33,6 +80,11 @@ export interface StepsProps {
      * @defaultValue true
      */
     exact?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {StepsPassThroughOptions}
+     */
+    pt?: StepsPassThroughOptions;
 }
 
 /**

package/steps/Steps.vue

@@ -1,8 +1,8 @@
 <template>
-    <nav :id="id" :class="containerClass">
-        <ol ref="list" class="p-steps-list">
+    <nav :id="id" :class="containerClass" v-bind="ptm('root')">
+        <ol ref="list" class="p-steps-list" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="item.to">
-                <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style">
+                <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style" v-bind="ptm('menuitem')">
                     <template v-if="!$slots.item">
                         <router-link v-if="!isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                             <a
@@ -12,14 +12,15 @@
                                 :aria-current="isExactActive ? 'step' : undefined"
                                 @click="onItemClick($event, item, navigate)"
                                 @keydown="onItemKeydown($event, item, navigate)"
+                                v-bind="ptm('action')"
                             >
-                                <span class="p-steps-number">{{ index + 1 }}</span>
-                                <span class="p-steps-title">{{ label(item) }}</span>
+                                <span class="p-steps-number" v-bind="ptm('step')">{{ index + 1 }}</span>
+                                <span class="p-steps-title" v-bind="ptm('label')">{{ label(item) }}</span>
                             </a>
                         </router-link>
-                        <span v-else :class="linkClass()" @keydown="onItemKeydown($event, item)">
-                            <span class="p-steps-number">{{ index + 1 }}</span>
-                            <span class="p-steps-title">{{ label(item) }}</span>
+                        <span v-else :class="linkClass()" @keydown="onItemKeydown($event, item)" v-bind="ptm('action')">
+                            <span class="p-steps-number" v-bind="ptm('step')">{{ index + 1 }}</span>
+                            <span class="p-steps-title" v-bind="ptm('label')">{{ label(item) }}</span>
                         </span>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -30,10 +31,12 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Steps',
+    extends: BaseComponent,
     props: {
         id: {
             type: String,