Fixed #1685 - Templating Support for ConfirmPopup

api-generator/components/confirmpopup.js

@@ -7,10 +7,18 @@ const ConfirmPopupProps = [
     }
 ];
 
+const ConfirmPopupSlots = [
+    {
+        name: "message",
+        description: "Custom content for the component."
+    }
+];
+
 module.exports = {
     confirmpopup: {
         name: "ConfirmPopup",
         description: "ConfirmPopup displays a confirmation overlay displayed relatively to its target.",
-        props: ConfirmPopupProps
+        props: ConfirmPopupProps,
+        slots: ConfirmPopupSlots
     }
 };

src/components/confirmpopup/ConfirmPopup.d.ts

@@ -2,8 +2,15 @@ interface ConfirmPopupProps {
     group?: string;
 }
 
+interface ConfirmPopupMessageSlot {
+    message: any;
+}
+
 declare class ConfirmPopup {
     $props: ConfirmPopupProps;
+    $slots: {
+        message: ConfirmPopupMessageSlot
+    }
 }
 
 export default ConfirmPopup;

src/components/confirmpopup/ConfirmPopup.vue

@@ -2,10 +2,13 @@
     <Teleport to="body">
         <transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
+                <template v-if="!$slots.message">
                     <div class="p-confirm-popup-content">
                         <i :class="iconClass" />
                         <span class="p-confirm-popup-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()"/>
                     <CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" autofocus />

src/views/confirmpopup/ConfirmPopupDoc.vue

@@ -209,6 +209,24 @@ export default {
 			</table>
 		</div>
 
+        <h5>Slots</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>message</td>
+                        <td>-</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
+
 		<h5>Styling</h5>
 		<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
 		<div class="doc-tablewrapper">