primevue 3.27.0 → 3.28.0

package/confirmdialog/confirmdialog.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var Button = require('primevue/button');
 var ConfirmationEventBus = require('primevue/confirmationeventbus');
 var Dialog = require('primevue/dialog');
@@ -7,12 +8,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 ConfirmationEventBus__default = /*#__PURE__*/_interopDefaultLegacy(ConfirmationEventBus);
 var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
 
 var script = {
     name: 'ConfirmDialog',
+    extends: BaseComponent__default["default"],
     props: {
         group: String,
         breakpoints: {
@@ -134,8 +137,6 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-confirm-dialog-message" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CDButton = vue.resolveComponent("CDButton");
   const _component_CDialog = vue.resolveComponent("CDialog");
@@ -154,7 +155,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     position: $options.position,
     breakpoints: $props.breakpoints,
     closeOnEscape: $options.closeOnEscape,
-    draggable: $props.draggable
+    draggable: $props.draggable,
+    pt: _ctx.pt
   }, {
     footer: vue.withCtx(() => [
       vue.createVNode(_component_CDButton, {
@@ -162,33 +164,35 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         class: vue.normalizeClass($options.rejectClass),
         iconPos: "left",
         onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
-        autofocus: $options.autoFocusReject
+        autofocus: $options.autoFocusReject,
+        pt: _ctx.ptm('rejectButton')
       }, {
         icon: vue.withCtx((iconProps) => [
           vue.renderSlot(_ctx.$slots, "rejecticon", {}, () => [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass([$options.rejectIcon, iconProps.class])
-            }, null, 2)
+            vue.createElementVNode("span", vue.mergeProps({
+              class: [$options.rejectIcon, iconProps.class]
+            }, _ctx.ptm('rejectButton')['icon']), null, 16)
           ])
         ]),
         _: 3
-      }, 8, ["label", "class", "autofocus"]),
+      }, 8, ["label", "class", "autofocus", "pt"]),
       vue.createVNode(_component_CDButton, {
         label: $options.acceptLabel,
         class: vue.normalizeClass($options.acceptClass),
         iconPos: "left",
         onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
-        autofocus: $options.autoFocusAccept
+        autofocus: $options.autoFocusAccept,
+        pt: _ctx.ptm('acceptButton')
       }, {
         icon: vue.withCtx((iconProps) => [
           vue.renderSlot(_ctx.$slots, "accepticon", {}, () => [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass([$options.acceptIcon, iconProps.class])
-            }, null, 2)
+            vue.createElementVNode("span", vue.mergeProps({
+              class: [$options.acceptIcon, iconProps.class]
+            }, _ctx.ptm('acceptButton')['icon']), null, 16)
           ])
         ]),
         _: 3
-      }, 8, ["label", "class", "autofocus"])
+      }, 8, ["label", "class", "autofocus", "pt"])
     ]),
     default: vue.withCtx(() => [
       (!_ctx.$slots.message)
@@ -200,13 +204,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     class: "p-confirm-dialog-icon"
                   }))
                 : ($data.confirmation.icon)
-                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                       key: 1,
-                      class: vue.normalizeClass($options.iconClass)
-                    }, null, 2))
+                      class: $options.iconClass
+                    }, _ctx.ptm('icon')), null, 16))
                   : vue.createCommentVNode("", true)
             ]),
-            vue.createElementVNode("span", _hoisted_1, vue.toDisplayString($options.message), 1)
+            vue.createElementVNode("span", vue.mergeProps({ class: "p-confirm-dialog-message" }, _ctx.ptm('message')), vue.toDisplayString($options.message), 17)
           ], 64))
         : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.message), {
             key: 1,
@@ -214,7 +218,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["message"]))
     ]),
     _: 3
-  }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
+  }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible", "pt"]))
 }
 
 script.render = render;

package/confirmdialog/confirmdialog.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/button"),o=require("primevue/confirmationeventbus"),t=require("primevue/dialog"),i=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(e),s=n(o),a={name:"ConfirmDialog",props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},s.default.on("confirm",this.confirmListener),s.default.on("close",this.closeListener)},beforeUnmount(){s.default.off("confirm",this.confirmListener),s.default.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:n(t).default,CDButton:c.default}};const l={class:"p-confirm-dialog-message"};a.render=function(e,o,t,n,c,s){const a=i.resolveComponent("CDButton"),r=i.resolveComponent("CDialog");return i.openBlock(),i.createBlock(r,{visible:c.visible,"onUpdate:visible":[o[2]||(o[2]=e=>c.visible=e),s.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:s.header,blockScroll:s.blockScroll,position:s.position,breakpoints:t.breakpoints,closeOnEscape:s.closeOnEscape,draggable:t.draggable},{footer:i.withCtx((()=>[i.createVNode(a,{label:s.rejectLabel,class:i.normalizeClass(s.rejectClass),iconPos:"left",onClick:o[0]||(o[0]=e=>s.reject()),autofocus:s.autoFocusReject},{icon:i.withCtx((o=>[i.renderSlot(e.$slots,"rejecticon",{},(()=>[i.createElementVNode("span",{class:i.normalizeClass([s.rejectIcon,o.class])},null,2)]))])),_:3},8,["label","class","autofocus"]),i.createVNode(a,{label:s.acceptLabel,class:i.normalizeClass(s.acceptClass),iconPos:"left",onClick:o[1]||(o[1]=e=>s.accept()),autofocus:s.autoFocusAccept},{icon:i.withCtx((o=>[i.renderSlot(e.$slots,"accepticon",{},(()=>[i.createElementVNode("span",{class:i.normalizeClass([s.acceptIcon,o.class])},null,2)]))])),_:3},8,["label","class","autofocus"])])),default:i.withCtx((()=>[e.$slots.message?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.$slots.message),{key:1,message:c.confirmation},null,8,["message"])):(i.openBlock(),i.createElementBlock(i.Fragment,{key:0},[i.renderSlot(e.$slots,"icon",{class:"p-confirm-dialog-icon"},(()=>[e.$slots.icon?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.$slots.icon),{key:0,class:"p-confirm-dialog-icon"})):c.confirmation.icon?(i.openBlock(),i.createElementBlock("span",{key:1,class:i.normalizeClass(s.iconClass)},null,2)):i.createCommentVNode("",!0)])),i.createElementVNode("span",l,i.toDisplayString(s.message),1)],64))])),_:3},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible"])},module.exports=a;
+"use strict";var e=require("primevue/basecomponent"),o=require("primevue/button"),t=require("primevue/confirmationeventbus"),i=require("primevue/dialog"),n=require("vue");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(e),r=c(o),a=c(t),l=c(i),m={name:"ConfirmDialog",extends:s.default,props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},a.default.on("confirm",this.confirmListener),a.default.on("close",this.closeListener)},beforeUnmount(){a.default.off("confirm",this.confirmListener),a.default.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:l.default,CDButton:r.default}};m.render=function(e,o,t,i,c,s){const r=n.resolveComponent("CDButton"),a=n.resolveComponent("CDialog");return n.openBlock(),n.createBlock(a,{visible:c.visible,"onUpdate:visible":[o[2]||(o[2]=e=>c.visible=e),s.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:s.header,blockScroll:s.blockScroll,position:s.position,breakpoints:t.breakpoints,closeOnEscape:s.closeOnEscape,draggable:t.draggable,pt:e.pt},{footer:n.withCtx((()=>[n.createVNode(r,{label:s.rejectLabel,class:n.normalizeClass(s.rejectClass),iconPos:"left",onClick:o[0]||(o[0]=e=>s.reject()),autofocus:s.autoFocusReject,pt:e.ptm("rejectButton")},{icon:n.withCtx((o=>[n.renderSlot(e.$slots,"rejecticon",{},(()=>[n.createElementVNode("span",n.mergeProps({class:[s.rejectIcon,o.class]},e.ptm("rejectButton").icon),null,16)]))])),_:3},8,["label","class","autofocus","pt"]),n.createVNode(r,{label:s.acceptLabel,class:n.normalizeClass(s.acceptClass),iconPos:"left",onClick:o[1]||(o[1]=e=>s.accept()),autofocus:s.autoFocusAccept,pt:e.ptm("acceptButton")},{icon:n.withCtx((o=>[n.renderSlot(e.$slots,"accepticon",{},(()=>[n.createElementVNode("span",n.mergeProps({class:[s.acceptIcon,o.class]},e.ptm("acceptButton").icon),null,16)]))])),_:3},8,["label","class","autofocus","pt"])])),default:n.withCtx((()=>[e.$slots.message?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.message),{key:1,message:c.confirmation},null,8,["message"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[n.renderSlot(e.$slots,"icon",{class:"p-confirm-dialog-icon"},(()=>[e.$slots.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.icon),{key:0,class:"p-confirm-dialog-icon"})):c.confirmation.icon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:1,class:s.iconClass},e.ptm("icon")),null,16)):n.createCommentVNode("",!0)])),n.createElementVNode("span",n.mergeProps({class:"p-confirm-dialog-message"},e.ptm("message")),n.toDisplayString(s.message),17)],64))])),_:3},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible","pt"])},module.exports=m;

package/confirmdialog/confirmdialog.esm.js

@@ -1,10 +1,12 @@
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import Dialog from 'primevue/dialog';
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, renderSlot, createElementVNode, createElementBlock, Fragment, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeClass, renderSlot, createElementVNode, mergeProps, createElementBlock, Fragment, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'ConfirmDialog',
+    extends: BaseComponent,
     props: {
         group: String,
         breakpoints: {
@@ -126,8 +128,6 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-confirm-dialog-message" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CDButton = resolveComponent("CDButton");
   const _component_CDialog = resolveComponent("CDialog");
@@ -146,7 +146,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     position: $options.position,
     breakpoints: $props.breakpoints,
     closeOnEscape: $options.closeOnEscape,
-    draggable: $props.draggable
+    draggable: $props.draggable,
+    pt: _ctx.pt
   }, {
     footer: withCtx(() => [
       createVNode(_component_CDButton, {
@@ -154,33 +155,35 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass($options.rejectClass),
         iconPos: "left",
         onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
-        autofocus: $options.autoFocusReject
+        autofocus: $options.autoFocusReject,
+        pt: _ctx.ptm('rejectButton')
       }, {
         icon: withCtx((iconProps) => [
           renderSlot(_ctx.$slots, "rejecticon", {}, () => [
-            createElementVNode("span", {
-              class: normalizeClass([$options.rejectIcon, iconProps.class])
-            }, null, 2)
+            createElementVNode("span", mergeProps({
+              class: [$options.rejectIcon, iconProps.class]
+            }, _ctx.ptm('rejectButton')['icon']), null, 16)
           ])
         ]),
         _: 3
-      }, 8, ["label", "class", "autofocus"]),
+      }, 8, ["label", "class", "autofocus", "pt"]),
       createVNode(_component_CDButton, {
         label: $options.acceptLabel,
         class: normalizeClass($options.acceptClass),
         iconPos: "left",
         onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
-        autofocus: $options.autoFocusAccept
+        autofocus: $options.autoFocusAccept,
+        pt: _ctx.ptm('acceptButton')
       }, {
         icon: withCtx((iconProps) => [
           renderSlot(_ctx.$slots, "accepticon", {}, () => [
-            createElementVNode("span", {
-              class: normalizeClass([$options.acceptIcon, iconProps.class])
-            }, null, 2)
+            createElementVNode("span", mergeProps({
+              class: [$options.acceptIcon, iconProps.class]
+            }, _ctx.ptm('acceptButton')['icon']), null, 16)
           ])
         ]),
         _: 3
-      }, 8, ["label", "class", "autofocus"])
+      }, 8, ["label", "class", "autofocus", "pt"])
     ]),
     default: withCtx(() => [
       (!_ctx.$slots.message)
@@ -192,13 +195,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     class: "p-confirm-dialog-icon"
                   }))
                 : ($data.confirmation.icon)
-                  ? (openBlock(), createElementBlock("span", {
+                  ? (openBlock(), createElementBlock("span", mergeProps({
                       key: 1,
-                      class: normalizeClass($options.iconClass)
-                    }, null, 2))
+                      class: $options.iconClass
+                    }, _ctx.ptm('icon')), null, 16))
                   : createCommentVNode("", true)
             ]),
-            createElementVNode("span", _hoisted_1, toDisplayString($options.message), 1)
+            createElementVNode("span", mergeProps({ class: "p-confirm-dialog-message" }, _ctx.ptm('message')), toDisplayString($options.message), 17)
           ], 64))
         : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.message), {
             key: 1,
@@ -206,7 +209,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["message"]))
     ]),
     _: 3
-  }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
+  }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible", "pt"]))
 }
 
 script.render = render;

package/confirmdialog/confirmdialog.esm.min.js

@@ -1 +1 @@
-import o from"primevue/button";import i from"primevue/confirmationeventbus";import t from"primevue/dialog";import{resolveComponent as e,openBlock as n,createBlock as c,withCtx as s,createVNode as a,normalizeClass as r,renderSlot as l,createElementVNode as m,createElementBlock as f,Fragment as u,resolveDynamicComponent as p,createCommentVNode as h,toDisplayString as b}from"vue";var d={name:"ConfirmDialog",props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=o=>{o&&o.group===this.group&&(this.confirmation=o,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},i.on("confirm",this.confirmListener),i.on("close",this.closeListener)},beforeUnmount(){i.off("confirm",this.confirmListener),i.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:t,CDButton:o}};const g={class:"p-confirm-dialog-message"};d.render=function(o,i,t,d,v,j){const k=e("CDButton"),C=e("CDialog");return n(),c(C,{visible:v.visible,"onUpdate:visible":[i[2]||(i[2]=o=>v.visible=o),j.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:j.header,blockScroll:j.blockScroll,position:j.position,breakpoints:t.breakpoints,closeOnEscape:j.closeOnEscape,draggable:t.draggable},{footer:s((()=>[a(k,{label:j.rejectLabel,class:r(j.rejectClass),iconPos:"left",onClick:i[0]||(i[0]=o=>j.reject()),autofocus:j.autoFocusReject},{icon:s((i=>[l(o.$slots,"rejecticon",{},(()=>[m("span",{class:r([j.rejectIcon,i.class])},null,2)]))])),_:3},8,["label","class","autofocus"]),a(k,{label:j.acceptLabel,class:r(j.acceptClass),iconPos:"left",onClick:i[1]||(i[1]=o=>j.accept()),autofocus:j.autoFocusAccept},{icon:s((i=>[l(o.$slots,"accepticon",{},(()=>[m("span",{class:r([j.acceptIcon,i.class])},null,2)]))])),_:3},8,["label","class","autofocus"])])),default:s((()=>[o.$slots.message?(n(),c(p(o.$slots.message),{key:1,message:v.confirmation},null,8,["message"])):(n(),f(u,{key:0},[l(o.$slots,"icon",{class:"p-confirm-dialog-icon"},(()=>[o.$slots.icon?(n(),c(p(o.$slots.icon),{key:0,class:"p-confirm-dialog-icon"})):v.confirmation.icon?(n(),f("span",{key:1,class:r(j.iconClass)},null,2)):h("",!0)])),m("span",g,b(j.message),1)],64))])),_:3},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible"])};export{d as default};
+import o from"primevue/basecomponent";import i from"primevue/button";import t from"primevue/confirmationeventbus";import e from"primevue/dialog";import{resolveComponent as n,openBlock as c,createBlock as s,withCtx as a,createVNode as r,normalizeClass as l,renderSlot as m,createElementVNode as p,mergeProps as u,createElementBlock as f,Fragment as h,resolveDynamicComponent as b,createCommentVNode as d,toDisplayString as g}from"vue";var j={name:"ConfirmDialog",extends:o,props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=o=>{o&&o.group===this.group&&(this.confirmation=o,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},t.on("confirm",this.confirmListener),t.on("close",this.closeListener)},beforeUnmount(){t.off("confirm",this.confirmListener),t.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:e,CDButton:i}};j.render=function(o,i,t,e,j,v){const k=n("CDButton"),C=n("CDialog");return c(),s(C,{visible:j.visible,"onUpdate:visible":[i[2]||(i[2]=o=>j.visible=o),v.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:v.header,blockScroll:v.blockScroll,position:v.position,breakpoints:t.breakpoints,closeOnEscape:v.closeOnEscape,draggable:t.draggable,pt:o.pt},{footer:a((()=>[r(k,{label:v.rejectLabel,class:l(v.rejectClass),iconPos:"left",onClick:i[0]||(i[0]=o=>v.reject()),autofocus:v.autoFocusReject,pt:o.ptm("rejectButton")},{icon:a((i=>[m(o.$slots,"rejecticon",{},(()=>[p("span",u({class:[v.rejectIcon,i.class]},o.ptm("rejectButton").icon),null,16)]))])),_:3},8,["label","class","autofocus","pt"]),r(k,{label:v.acceptLabel,class:l(v.acceptClass),iconPos:"left",onClick:i[1]||(i[1]=o=>v.accept()),autofocus:v.autoFocusAccept,pt:o.ptm("acceptButton")},{icon:a((i=>[m(o.$slots,"accepticon",{},(()=>[p("span",u({class:[v.acceptIcon,i.class]},o.ptm("acceptButton").icon),null,16)]))])),_:3},8,["label","class","autofocus","pt"])])),default:a((()=>[o.$slots.message?(c(),s(b(o.$slots.message),{key:1,message:j.confirmation},null,8,["message"])):(c(),f(h,{key:0},[m(o.$slots,"icon",{class:"p-confirm-dialog-icon"},(()=>[o.$slots.icon?(c(),s(b(o.$slots.icon),{key:0,class:"p-confirm-dialog-icon"})):j.confirmation.icon?(c(),f("span",u({key:1,class:v.iconClass},o.ptm("icon")),null,16)):d("",!0)])),p("span",u({class:"p-confirm-dialog-message"},o.ptm("message")),g(v.message),17)],64))])),_:3},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible","pt"])};export{j as default};

package/confirmdialog/confirmdialog.js

@@ -1,15 +1,17 @@
 this.primevue = this.primevue || {};
-this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, vue) {
+this.primevue.confirmdialog = (function (BaseComponent, Button, ConfirmationEventBus, Dialog, 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 ConfirmationEventBus__default = /*#__PURE__*/_interopDefaultLegacy(ConfirmationEventBus);
     var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
 
     var script = {
         name: 'ConfirmDialog',
+        extends: BaseComponent__default["default"],
         props: {
             group: String,
             breakpoints: {
@@ -131,8 +133,6 @@ this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, v
         }
     };
 
-    const _hoisted_1 = { class: "p-confirm-dialog-message" };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_CDButton = vue.resolveComponent("CDButton");
       const _component_CDialog = vue.resolveComponent("CDialog");
@@ -151,7 +151,8 @@ this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, v
         position: $options.position,
         breakpoints: $props.breakpoints,
         closeOnEscape: $options.closeOnEscape,
-        draggable: $props.draggable
+        draggable: $props.draggable,
+        pt: _ctx.pt
       }, {
         footer: vue.withCtx(() => [
           vue.createVNode(_component_CDButton, {
@@ -159,33 +160,35 @@ this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, v
             class: vue.normalizeClass($options.rejectClass),
             iconPos: "left",
             onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
-            autofocus: $options.autoFocusReject
+            autofocus: $options.autoFocusReject,
+            pt: _ctx.ptm('rejectButton')
           }, {
             icon: vue.withCtx((iconProps) => [
               vue.renderSlot(_ctx.$slots, "rejecticon", {}, () => [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass([$options.rejectIcon, iconProps.class])
-                }, null, 2)
+                vue.createElementVNode("span", vue.mergeProps({
+                  class: [$options.rejectIcon, iconProps.class]
+                }, _ctx.ptm('rejectButton')['icon']), null, 16)
               ])
             ]),
             _: 3
-          }, 8, ["label", "class", "autofocus"]),
+          }, 8, ["label", "class", "autofocus", "pt"]),
           vue.createVNode(_component_CDButton, {
             label: $options.acceptLabel,
             class: vue.normalizeClass($options.acceptClass),
             iconPos: "left",
             onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
-            autofocus: $options.autoFocusAccept
+            autofocus: $options.autoFocusAccept,
+            pt: _ctx.ptm('acceptButton')
           }, {
             icon: vue.withCtx((iconProps) => [
               vue.renderSlot(_ctx.$slots, "accepticon", {}, () => [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass([$options.acceptIcon, iconProps.class])
-                }, null, 2)
+                vue.createElementVNode("span", vue.mergeProps({
+                  class: [$options.acceptIcon, iconProps.class]
+                }, _ctx.ptm('acceptButton')['icon']), null, 16)
               ])
             ]),
             _: 3
-          }, 8, ["label", "class", "autofocus"])
+          }, 8, ["label", "class", "autofocus", "pt"])
         ]),
         default: vue.withCtx(() => [
           (!_ctx.$slots.message)
@@ -197,13 +200,13 @@ this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, v
                         class: "p-confirm-dialog-icon"
                       }))
                     : ($data.confirmation.icon)
-                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                      ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                           key: 1,
-                          class: vue.normalizeClass($options.iconClass)
-                        }, null, 2))
+                          class: $options.iconClass
+                        }, _ctx.ptm('icon')), null, 16))
                       : vue.createCommentVNode("", true)
                 ]),
-                vue.createElementVNode("span", _hoisted_1, vue.toDisplayString($options.message), 1)
+                vue.createElementVNode("span", vue.mergeProps({ class: "p-confirm-dialog-message" }, _ctx.ptm('message')), vue.toDisplayString($options.message), 17)
               ], 64))
             : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.message), {
                 key: 1,
@@ -211,11 +214,11 @@ this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, v
               }, null, 8, ["message"]))
         ]),
         _: 3
-      }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
+      }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible", "pt"]))
     }
 
     script.render = render;
 
     return script;
 
-})(primevue.button, primevue.confirmationeventbus, primevue.dialog, Vue);
+})(primevue.basecomponent, primevue.button, primevue.confirmationeventbus, primevue.dialog, Vue);

package/confirmdialog/confirmdialog.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.confirmdialog=function(e,o,t,i){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(e),s=n(o),a={name:"ConfirmDialog",props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},s.default.on("confirm",this.confirmListener),s.default.on("close",this.closeListener)},beforeUnmount(){s.default.off("confirm",this.confirmListener),s.default.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:n(t).default,CDButton:c.default}};const l={class:"p-confirm-dialog-message"};return a.render=function(e,o,t,n,c,s){const a=i.resolveComponent("CDButton"),r=i.resolveComponent("CDialog");return i.openBlock(),i.createBlock(r,{visible:c.visible,"onUpdate:visible":[o[2]||(o[2]=e=>c.visible=e),s.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:s.header,blockScroll:s.blockScroll,position:s.position,breakpoints:t.breakpoints,closeOnEscape:s.closeOnEscape,draggable:t.draggable},{footer:i.withCtx((()=>[i.createVNode(a,{label:s.rejectLabel,class:i.normalizeClass(s.rejectClass),iconPos:"left",onClick:o[0]||(o[0]=e=>s.reject()),autofocus:s.autoFocusReject},{icon:i.withCtx((o=>[i.renderSlot(e.$slots,"rejecticon",{},(()=>[i.createElementVNode("span",{class:i.normalizeClass([s.rejectIcon,o.class])},null,2)]))])),_:3},8,["label","class","autofocus"]),i.createVNode(a,{label:s.acceptLabel,class:i.normalizeClass(s.acceptClass),iconPos:"left",onClick:o[1]||(o[1]=e=>s.accept()),autofocus:s.autoFocusAccept},{icon:i.withCtx((o=>[i.renderSlot(e.$slots,"accepticon",{},(()=>[i.createElementVNode("span",{class:i.normalizeClass([s.acceptIcon,o.class])},null,2)]))])),_:3},8,["label","class","autofocus"])])),default:i.withCtx((()=>[e.$slots.message?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.$slots.message),{key:1,message:c.confirmation},null,8,["message"])):(i.openBlock(),i.createElementBlock(i.Fragment,{key:0},[i.renderSlot(e.$slots,"icon",{class:"p-confirm-dialog-icon"},(()=>[e.$slots.icon?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.$slots.icon),{key:0,class:"p-confirm-dialog-icon"})):c.confirmation.icon?(i.openBlock(),i.createElementBlock("span",{key:1,class:i.normalizeClass(s.iconClass)},null,2)):i.createCommentVNode("",!0)])),i.createElementVNode("span",l,i.toDisplayString(s.message),1)],64))])),_:3},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible"])},a}(primevue.button,primevue.confirmationeventbus,primevue.dialog,Vue);
+this.primevue=this.primevue||{},this.primevue.confirmdialog=function(e,o,t,i,n){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(e),a=c(o),r=c(t),l=c(i),m={name:"ConfirmDialog",extends:s.default,props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},r.default.on("confirm",this.confirmListener),r.default.on("close",this.closeListener)},beforeUnmount(){r.default.off("confirm",this.confirmListener),r.default.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:l.default,CDButton:a.default}};return m.render=function(e,o,t,i,c,s){const a=n.resolveComponent("CDButton"),r=n.resolveComponent("CDialog");return n.openBlock(),n.createBlock(r,{visible:c.visible,"onUpdate:visible":[o[2]||(o[2]=e=>c.visible=e),s.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:s.header,blockScroll:s.blockScroll,position:s.position,breakpoints:t.breakpoints,closeOnEscape:s.closeOnEscape,draggable:t.draggable,pt:e.pt},{footer:n.withCtx((()=>[n.createVNode(a,{label:s.rejectLabel,class:n.normalizeClass(s.rejectClass),iconPos:"left",onClick:o[0]||(o[0]=e=>s.reject()),autofocus:s.autoFocusReject,pt:e.ptm("rejectButton")},{icon:n.withCtx((o=>[n.renderSlot(e.$slots,"rejecticon",{},(()=>[n.createElementVNode("span",n.mergeProps({class:[s.rejectIcon,o.class]},e.ptm("rejectButton").icon),null,16)]))])),_:3},8,["label","class","autofocus","pt"]),n.createVNode(a,{label:s.acceptLabel,class:n.normalizeClass(s.acceptClass),iconPos:"left",onClick:o[1]||(o[1]=e=>s.accept()),autofocus:s.autoFocusAccept,pt:e.ptm("acceptButton")},{icon:n.withCtx((o=>[n.renderSlot(e.$slots,"accepticon",{},(()=>[n.createElementVNode("span",n.mergeProps({class:[s.acceptIcon,o.class]},e.ptm("acceptButton").icon),null,16)]))])),_:3},8,["label","class","autofocus","pt"])])),default:n.withCtx((()=>[e.$slots.message?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.message),{key:1,message:c.confirmation},null,8,["message"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[n.renderSlot(e.$slots,"icon",{class:"p-confirm-dialog-icon"},(()=>[e.$slots.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.icon),{key:0,class:"p-confirm-dialog-icon"})):c.confirmation.icon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:1,class:s.iconClass},e.ptm("icon")),null,16)):n.createCommentVNode("",!0)])),n.createElementVNode("span",n.mergeProps({class:"p-confirm-dialog-message"},e.ptm("message")),n.toDisplayString(s.message),17)],64))])),_:3},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible","pt"])},m}(primevue.basecomponent,primevue.button,primevue.confirmationeventbus,primevue.dialog,Vue);

package/confirmpopup/ConfirmPopup.d.ts

@@ -8,9 +8,79 @@
  *
  */
 import { VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ConfirmPopupPassThroughMethodOptions {
+    props: ConfirmPopupProps;
+    state: ConfirmPopupState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ConfirmPopupProps.pt}
+ */
+export interface ConfirmPopupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the message's DOM element.
+     */
+    message?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    rejectButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    acceptButton?: ButtonPassThroughOptions;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ConfirmPopupPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ConfirmPopup component.
+ */
+export interface ConfirmPopupState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current confirmation message.
+     */
+    confirmation: ConfirmationOptions;
+}
+
 /**
  * Defines valid properties in ConfirmPopup component.
  */
@@ -19,6 +89,11 @@ export interface ConfirmPopupProps {
      * Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
      */
     group?: string;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ConfirmPopupPassThroughOptions}
+     */
+    pt?: ConfirmPopupPassThroughOptions;
 }
 
 /**

package/confirmpopup/ConfirmPopup.vue

@@ -1,29 +1,29 @@
 <template>
     <Portal>
         <transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
                 <template v-if="!$slots.message">
-                    <div class="p-confirm-popup-content">
+                    <div class="p-confirm-popup-content" v-bind="ptm('content')">
                         <slot name="icon" class="p-confirm-popup-icon">
                             <component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-popup-icon" />
-                            <span v-else-if="confirmation.icon" :class="iconClass" />
+                            <span v-else-if="confirmation.icon" :class="iconClass" v-bind="ptm('icon')" />
                         </slot>
-                        <span class="p-confirm-popup-message">{{ confirmation.message }}</span>
+                        <span class="p-confirm-popup-message" v-bind="ptm('message')">{{ confirmation.message }}</span>
                     </div>
                 </template>
                 <component v-else :is="$slots.message" :message="confirmation"></component>
-                <div class="p-confirm-popup-footer">
-                    <CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject">
+                <div class="p-confirm-popup-footer" v-bind="ptm('footer')">
+                    <CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :pt="ptm('rejectButton')">
                         <template #icon="iconProps">
                             <slot name="rejecticon">
-                                <span :class="[rejectIcon, iconProps.class]" />
+                                <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
                             </slot>
                         </template>
                     </CPButton>
-                    <CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept">
+                    <CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')">
                         <template #icon="iconProps">
                             <slot name="accepticon">
-                                <span :class="[acceptIcon, iconProps.class]" />
+                                <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
                             </slot>
                         </template>
                     </CPButton>
@@ -34,6 +34,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import FocusTrap from 'primevue/focustrap';
@@ -43,6 +44,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue
 
 export default {
     name: 'ConfirmPopup',
+    extends: BaseComponent,
     inheritAttrs: false,
     props: {
         group: String