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,15 +14,20 @@
         :pt="pt"
         :unstyled="unstyled"
     >
-        <template v-if="!$slots.message">
-            <slot name="icon">
-                <component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
-                <span v-else-if="confirmation.icon" :class="cx('icon')" v-bind="ptm('icon')" />
-            </slot>
-            <span :class="cx('message')" v-bind="ptm('message')">{{ message }}</span>
+        <template v-if="$slots.container" #container="slotProps">
+            <slot name="container" :message="confirmation" :onClose="slotProps.onClose" />
         </template>
-        <component v-else :is="$slots.message" :message="confirmation"></component>
-        <template #footer>
+        <template v-if="!$slots.container">
+            <template v-if="!$slots.message">
+                <slot name="icon">
+                    <component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
+                    <span v-else-if="confirmation.icon" :class="cx('icon')" v-bind="ptm('icon')" />
+                </slot>
+                <span :class="cx('message')" v-bind="ptm('message')">{{ message }}</span>
+            </template>
+            <component v-else :is="$slots.message" :message="confirmation"></component>
+        </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">