Refactor #4433 - ConfirmDialog

api-generator/components/confirmdialog.js

@@ -47,6 +47,10 @@ const ConfirmDialogSlots = [
     {
         name: 'rejecticon',
         description: 'Custom reject icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 

components/lib/confirmdialog/ConfirmDialog.d.ts

@@ -211,6 +211,20 @@ export interface ConfirmDialogSlots {
      * Custom icon template.
      */
     rejecticon(): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Message of the component
+         */
+        message: any;
+        /**
+         * Close dialog function.
+         */
+        onClose: () => void;
+    }): VNode[];
 }
 
 /**

components/lib/confirmdialog/ConfirmDialog.vue

@@ -14,6 +14,10 @@
         :pt="pt"
         :unstyled="unstyled"
     >
+        <template v-if="$slots.container" #container="slotProps">
+            <slot name="container" :message="confirmation" :onClose="slotProps.onClose" />
+        </template>
+        <template v-if="!$slots.container">
             <template v-if="!$slots.message">
                 <slot name="icon">
                     <component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
@@ -22,7 +26,8 @@
                 <span :class="cx('message')" v-bind="ptm('message')">{{ message }}</span>
             </template>
             <component v-else :is="$slots.message" :message="confirmation"></component>
-        <template #footer>
+        </template>
+        <template v-if="!$slots.container" #footer>
             <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')" data-pc-name="rejectbutton">
                 <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                     <slot name="rejecticon">