primevue 3.26.1 → 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,42 +155,70 @@ 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, {
         label: $options.rejectLabel,
-        icon: $options.rejectIcon,
         class: vue.normalizeClass($options.rejectClass),
+        iconPos: "left",
         onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
-        autofocus: $options.autoFocusReject
-      }, null, 8, ["label", "icon", "class", "autofocus"]),
+        autofocus: $options.autoFocusReject,
+        pt: _ctx.ptm('rejectButton')
+      }, {
+        icon: vue.withCtx((iconProps) => [
+          vue.renderSlot(_ctx.$slots, "rejecticon", {}, () => [
+            vue.createElementVNode("span", vue.mergeProps({
+              class: [$options.rejectIcon, iconProps.class]
+            }, _ctx.ptm('rejectButton')['icon']), null, 16)
+          ])
+        ]),
+        _: 3
+      }, 8, ["label", "class", "autofocus", "pt"]),
       vue.createVNode(_component_CDButton, {
         label: $options.acceptLabel,
-        icon: $options.acceptIcon,
         class: vue.normalizeClass($options.acceptClass),
+        iconPos: "left",
         onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
-        autofocus: $options.autoFocusAccept
-      }, null, 8, ["label", "icon", "class", "autofocus"])
+        autofocus: $options.autoFocusAccept,
+        pt: _ctx.ptm('acceptButton')
+      }, {
+        icon: vue.withCtx((iconProps) => [
+          vue.renderSlot(_ctx.$slots, "accepticon", {}, () => [
+            vue.createElementVNode("span", vue.mergeProps({
+              class: [$options.acceptIcon, iconProps.class]
+            }, _ctx.ptm('acceptButton')['icon']), null, 16)
+          ])
+        ]),
+        _: 3
+      }, 8, ["label", "class", "autofocus", "pt"])
     ]),
     default: vue.withCtx(() => [
       (!_ctx.$slots.message)
         ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            ($data.confirmation.icon)
-              ? (vue.openBlock(), vue.createElementBlock("i", {
-                  key: 0,
-                  class: vue.normalizeClass($options.iconClass)
-                }, null, 2))
-              : vue.createCommentVNode("", true),
-            vue.createElementVNode("span", _hoisted_1, vue.toDisplayString($options.message), 1)
+            vue.renderSlot(_ctx.$slots, "icon", { class: "p-confirm-dialog-icon" }, () => [
+              (_ctx.$slots.icon)
+                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
+                    key: 0,
+                    class: "p-confirm-dialog-icon"
+                  }))
+                : ($data.confirmation.icon)
+                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                      key: 1,
+                      class: $options.iconClass
+                    }, _ctx.ptm('icon')), null, 16))
+                  : vue.createCommentVNode("", true)
+            ]),
+            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,
             message: $data.confirmation
           }, null, 8, ["message"]))
     ]),
-    _: 1
-  }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
+    _: 3
+  }, 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"),i=require("primevue/dialog"),t=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(i).default,CDButton:c.default}};const r={class:"p-confirm-dialog-message"};a.render=function(e,o,i,n,c,s){const a=t.resolveComponent("CDButton"),l=t.resolveComponent("CDialog");return t.openBlock(),t.createBlock(l,{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:i.breakpoints,closeOnEscape:s.closeOnEscape,draggable:i.draggable},{footer:t.withCtx((()=>[t.createVNode(a,{label:s.rejectLabel,icon:s.rejectIcon,class:t.normalizeClass(s.rejectClass),onClick:o[0]||(o[0]=e=>s.reject()),autofocus:s.autoFocusReject},null,8,["label","icon","class","autofocus"]),t.createVNode(a,{label:s.acceptLabel,icon:s.acceptIcon,class:t.normalizeClass(s.acceptClass),onClick:o[1]||(o[1]=e=>s.accept()),autofocus:s.autoFocusAccept},null,8,["label","icon","class","autofocus"])])),default:t.withCtx((()=>[e.$slots.message?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.message),{key:1,message:c.confirmation},null,8,["message"])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[c.confirmation.icon?(t.openBlock(),t.createElementBlock("i",{key:0,class:t.normalizeClass(s.iconClass)},null,2)):t.createCommentVNode("",!0),t.createElementVNode("span",r,t.toDisplayString(s.message),1)],64))])),_:1},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, createElementBlock, Fragment, createCommentVNode, createElementVNode, toDisplayString, resolveDynamicComponent } 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,42 +146,70 @@ 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, {
         label: $options.rejectLabel,
-        icon: $options.rejectIcon,
         class: normalizeClass($options.rejectClass),
+        iconPos: "left",
         onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
-        autofocus: $options.autoFocusReject
-      }, null, 8, ["label", "icon", "class", "autofocus"]),
+        autofocus: $options.autoFocusReject,
+        pt: _ctx.ptm('rejectButton')
+      }, {
+        icon: withCtx((iconProps) => [
+          renderSlot(_ctx.$slots, "rejecticon", {}, () => [
+            createElementVNode("span", mergeProps({
+              class: [$options.rejectIcon, iconProps.class]
+            }, _ctx.ptm('rejectButton')['icon']), null, 16)
+          ])
+        ]),
+        _: 3
+      }, 8, ["label", "class", "autofocus", "pt"]),
       createVNode(_component_CDButton, {
         label: $options.acceptLabel,
-        icon: $options.acceptIcon,
         class: normalizeClass($options.acceptClass),
+        iconPos: "left",
         onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
-        autofocus: $options.autoFocusAccept
-      }, null, 8, ["label", "icon", "class", "autofocus"])
+        autofocus: $options.autoFocusAccept,
+        pt: _ctx.ptm('acceptButton')
+      }, {
+        icon: withCtx((iconProps) => [
+          renderSlot(_ctx.$slots, "accepticon", {}, () => [
+            createElementVNode("span", mergeProps({
+              class: [$options.acceptIcon, iconProps.class]
+            }, _ctx.ptm('acceptButton')['icon']), null, 16)
+          ])
+        ]),
+        _: 3
+      }, 8, ["label", "class", "autofocus", "pt"])
     ]),
     default: withCtx(() => [
       (!_ctx.$slots.message)
         ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            ($data.confirmation.icon)
-              ? (openBlock(), createElementBlock("i", {
-                  key: 0,
-                  class: normalizeClass($options.iconClass)
-                }, null, 2))
-              : createCommentVNode("", true),
-            createElementVNode("span", _hoisted_1, toDisplayString($options.message), 1)
+            renderSlot(_ctx.$slots, "icon", { class: "p-confirm-dialog-icon" }, () => [
+              (_ctx.$slots.icon)
+                ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.icon), {
+                    key: 0,
+                    class: "p-confirm-dialog-icon"
+                  }))
+                : ($data.confirmation.icon)
+                  ? (openBlock(), createElementBlock("span", mergeProps({
+                      key: 1,
+                      class: $options.iconClass
+                    }, _ctx.ptm('icon')), null, 16))
+                  : createCommentVNode("", true)
+            ]),
+            createElementVNode("span", mergeProps({ class: "p-confirm-dialog-message" }, _ctx.ptm('message')), toDisplayString($options.message), 17)
           ], 64))
         : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.message), {
             key: 1,
             message: $data.confirmation
           }, null, 8, ["message"]))
     ]),
-    _: 1
-  }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
+    _: 3
+  }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible", "pt"]))
 }
 
 script.render = render;

package/confirmdialog/confirmdialog.esm.min.js

@@ -1 +1 @@
-import i from"primevue/button";import o from"primevue/confirmationeventbus";import t from"primevue/dialog";import{resolveComponent as e,openBlock as n,createBlock as c,withCtx as s,createVNode as r,normalizeClass as a,createElementBlock as l,Fragment as m,createCommentVNode as u,createElementVNode as f,toDisplayString as p,resolveDynamicComponent as h}from"vue";var b={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=i=>{i&&i.group===this.group&&(this.confirmation=i,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},o.on("confirm",this.confirmListener),o.on("close",this.closeListener)},beforeUnmount(){o.off("confirm",this.confirmListener),o.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:i}};const d={class:"p-confirm-dialog-message"};b.render=function(i,o,t,b,g,v){const j=e("CDButton"),C=e("CDialog");return n(),c(C,{visible:g.visible,"onUpdate:visible":[o[2]||(o[2]=i=>g.visible=i),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},{footer:s((()=>[r(j,{label:v.rejectLabel,icon:v.rejectIcon,class:a(v.rejectClass),onClick:o[0]||(o[0]=i=>v.reject()),autofocus:v.autoFocusReject},null,8,["label","icon","class","autofocus"]),r(j,{label:v.acceptLabel,icon:v.acceptIcon,class:a(v.acceptClass),onClick:o[1]||(o[1]=i=>v.accept()),autofocus:v.autoFocusAccept},null,8,["label","icon","class","autofocus"])])),default:s((()=>[i.$slots.message?(n(),c(h(i.$slots.message),{key:1,message:g.confirmation},null,8,["message"])):(n(),l(m,{key:0},[g.confirmation.icon?(n(),l("i",{key:0,class:a(v.iconClass)},null,2)):u("",!0),f("span",d,p(v.message),1)],64))])),_:1},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible"])};export{b 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,46 +151,74 @@ 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, {
             label: $options.rejectLabel,
-            icon: $options.rejectIcon,
             class: vue.normalizeClass($options.rejectClass),
+            iconPos: "left",
             onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
-            autofocus: $options.autoFocusReject
-          }, null, 8, ["label", "icon", "class", "autofocus"]),
+            autofocus: $options.autoFocusReject,
+            pt: _ctx.ptm('rejectButton')
+          }, {
+            icon: vue.withCtx((iconProps) => [
+              vue.renderSlot(_ctx.$slots, "rejecticon", {}, () => [
+                vue.createElementVNode("span", vue.mergeProps({
+                  class: [$options.rejectIcon, iconProps.class]
+                }, _ctx.ptm('rejectButton')['icon']), null, 16)
+              ])
+            ]),
+            _: 3
+          }, 8, ["label", "class", "autofocus", "pt"]),
           vue.createVNode(_component_CDButton, {
             label: $options.acceptLabel,
-            icon: $options.acceptIcon,
             class: vue.normalizeClass($options.acceptClass),
+            iconPos: "left",
             onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
-            autofocus: $options.autoFocusAccept
-          }, null, 8, ["label", "icon", "class", "autofocus"])
+            autofocus: $options.autoFocusAccept,
+            pt: _ctx.ptm('acceptButton')
+          }, {
+            icon: vue.withCtx((iconProps) => [
+              vue.renderSlot(_ctx.$slots, "accepticon", {}, () => [
+                vue.createElementVNode("span", vue.mergeProps({
+                  class: [$options.acceptIcon, iconProps.class]
+                }, _ctx.ptm('acceptButton')['icon']), null, 16)
+              ])
+            ]),
+            _: 3
+          }, 8, ["label", "class", "autofocus", "pt"])
         ]),
         default: vue.withCtx(() => [
           (!_ctx.$slots.message)
             ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                ($data.confirmation.icon)
-                  ? (vue.openBlock(), vue.createElementBlock("i", {
-                      key: 0,
-                      class: vue.normalizeClass($options.iconClass)
-                    }, null, 2))
-                  : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", _hoisted_1, vue.toDisplayString($options.message), 1)
+                vue.renderSlot(_ctx.$slots, "icon", { class: "p-confirm-dialog-icon" }, () => [
+                  (_ctx.$slots.icon)
+                    ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
+                        key: 0,
+                        class: "p-confirm-dialog-icon"
+                      }))
+                    : ($data.confirmation.icon)
+                      ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                          key: 1,
+                          class: $options.iconClass
+                        }, _ctx.ptm('icon')), null, 16))
+                      : vue.createCommentVNode("", true)
+                ]),
+                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,
                 message: $data.confirmation
               }, null, 8, ["message"]))
         ]),
-        _: 1
-      }, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
+        _: 3
+      }, 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,i,t){"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(i).default,CDButton:c.default}};const l={class:"p-confirm-dialog-message"};return a.render=function(e,o,i,n,c,s){const a=t.resolveComponent("CDButton"),r=t.resolveComponent("CDialog");return t.openBlock(),t.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:i.breakpoints,closeOnEscape:s.closeOnEscape,draggable:i.draggable},{footer:t.withCtx((()=>[t.createVNode(a,{label:s.rejectLabel,icon:s.rejectIcon,class:t.normalizeClass(s.rejectClass),onClick:o[0]||(o[0]=e=>s.reject()),autofocus:s.autoFocusReject},null,8,["label","icon","class","autofocus"]),t.createVNode(a,{label:s.acceptLabel,icon:s.acceptIcon,class:t.normalizeClass(s.acceptClass),onClick:o[1]||(o[1]=e=>s.accept()),autofocus:s.autoFocusAccept},null,8,["label","icon","class","autofocus"])])),default:t.withCtx((()=>[e.$slots.message?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.message),{key:1,message:c.confirmation},null,8,["message"])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[c.confirmation.icon?(t.openBlock(),t.createElementBlock("i",{key:0,class:t.normalizeClass(s.iconClass)},null,2)):t.createCommentVNode("",!0),t.createElementVNode("span",l,t.toDisplayString(s.message),1)],64))])),_:1},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;
 }
 
 /**
@@ -29,7 +104,29 @@ export interface ConfirmPopupSlots {
      * Custom message template.
      * @param {Object} scope - message slot's params.
      */
-    message(scope: { message: ConfirmationOptions }): VNode[];
+    message(scope: {
+        /**
+         * Message of the component
+         */
+        message: ConfirmationOptions;
+    }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(scope: {
+        /**
+         * Style class of the icon template
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    accepticon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    rejecticon(): VNode[];
 }
 
 /**

package/confirmpopup/ConfirmPopup.vue

@@ -1,17 +1,32 @@
 <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">
-                        <i :class="iconClass" />
-                        <span class="p-confirm-popup-message">{{ confirmation.message }}</span>
+                    <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" v-bind="ptm('icon')" />
+                        </slot>
+                        <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" :icon="rejectIcon" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" />
-                    <CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" />
+                <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]" v-bind="ptm('rejectButton')['icon']" />
+                            </slot>
+                        </template>
+                    </CPButton>
+                    <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]" v-bind="ptm('acceptButton')['icon']" />
+                            </slot>
+                        </template>
+                    </CPButton>
                 </div>
             </div>
         </transition>
@@ -19,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';
@@ -28,6 +44,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue
 
 export default {
     name: 'ConfirmPopup',
+    extends: BaseComponent,
     inheritAttrs: false,
     props: {
         group: String