Fixed #4470 - Dialog/Toast: new container template

api-generator/components/dialog.js

@@ -215,6 +215,10 @@ const DialogSlots = [
     {
         name: 'maximizeicon',
         description: 'Custom maximizeicon icon template of dialog.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 

api-generator/components/toast.js

@@ -80,6 +80,10 @@ const ToastSlots = [
     {
         name: 'closeicon',
         description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 

components/lib/dialog/Dialog.d.ts

@@ -332,6 +332,21 @@ export interface DialogSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Close dialog function.
+         */
+        onClose: () => void;
+        /**
+         * Maximize/minimize dialog function.
+         * @param {Event} event - Browser event
+         */
+        onMaximize: (event: Event) => void;
+    }): VNode[];
 }
 
 /**

components/lib/dialog/Dialog.vue

@@ -3,6 +3,8 @@
         <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
+                    <slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)"></slot>
+                    <template v-else>
                         <div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
                             <slot name="header" :class="cx('headerTitle')">
                                 <span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
@@ -48,6 +50,7 @@
                         <div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
                             <slot name="footer">{{ footer }}</slot>
                         </div>
+                    </template>
                 </div>
             </transition>
         </div>

components/lib/toast/Toast.d.ts

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

components/lib/toast/ToastMessage.vue

@@ -1,6 +1,7 @@
 <template>
     <div :class="cx('container')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
-        <div :class="[cx('content'), message.contentStyleClass]" v-bind="ptm('content')">
+        <component v-if="templates.container" :is="templates.container" :message="message" :onClose="onCloseClick" />
+        <div v-else :class="[cx('content'), message.contentStyleClass]" v-bind="ptm('content')">
             <template v-if="!templates.message">
                 <component :is="templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('icon')" v-bind="ptm('icon')" />
                 <div :class="cx('text')" v-bind="ptm('text')">