From 962ddb13530e4a109971dc02012317a6a6da68c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 19 Sep 2023 12:36:33 +0300
Subject: [PATCH] Fixed #4470 - Dialog/Toast: new container template

---
 api-generator/components/dialog.js    |  4 ++
 api-generator/components/toast.js     |  4 ++
 components/lib/dialog/Dialog.d.ts     | 15 +++++
 components/lib/dialog/Dialog.vue      | 91 ++++++++++++++-------------
 components/lib/toast/Toast.d.ts       | 14 +++++
 components/lib/toast/ToastMessage.vue |  3 +-
 6 files changed, 86 insertions(+), 45 deletions(-)

diff --git a/api-generator/components/dialog.js b/api-generator/components/dialog.js
index 96efd0501..268c457e4 100644
--- a/api-generator/components/dialog.js
+++ b/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.'
     }
 ];
 
diff --git a/api-generator/components/toast.js b/api-generator/components/toast.js
index 055a5a200..679266540 100644
--- a/api-generator/components/toast.js
+++ b/api-generator/components/toast.js
@@ -80,6 +80,10 @@ const ToastSlots = [
     {
         name: 'closeicon',
         description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 
diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts
index 98190f8aa..2a553f8e9 100755
--- a/components/lib/dialog/Dialog.d.ts
+++ b/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[];
 }
 
 /**
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index 4885f3646..fcb1e826d 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -3,51 +3,54 @@
         <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') }">
-                    <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>
-                        </slot>
-                        <div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
-                            <button
-                                v-if="maximizable"
-                                :ref="maximizableRef"
-                                v-ripple
-                                :autofocus="focusableMax"
-                                :class="cx('maximizableButton')"
-                                @click="maximize"
-                                type="button"
-                                :tabindex="maximizable ? '0' : '-1'"
-                                v-bind="ptm('maximizableButton')"
-                                data-pc-group-section="headericon"
-                            >
-                                <slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
-                                    <component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
-                                </slot>
-                            </button>
-                            <button
-                                v-if="closable"
-                                :ref="closeButtonRef"
-                                v-ripple
-                                :autofocus="focusableClose"
-                                :class="cx('closeButton')"
-                                @click="close"
-                                :aria-label="closeAriaLabel"
-                                type="button"
-                                v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
-                                data-pc-group-section="headericon"
-                            >
-                                <slot name="closeicon" :class="cx('closeButtonIcon')">
-                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
-                                </slot>
-                            </button>
+                    <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>
+                            </slot>
+                            <div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
+                                <button
+                                    v-if="maximizable"
+                                    :ref="maximizableRef"
+                                    v-ripple
+                                    :autofocus="focusableMax"
+                                    :class="cx('maximizableButton')"
+                                    @click="maximize"
+                                    type="button"
+                                    :tabindex="maximizable ? '0' : '-1'"
+                                    v-bind="ptm('maximizableButton')"
+                                    data-pc-group-section="headericon"
+                                >
+                                    <slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
+                                        <component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
+                                    </slot>
+                                </button>
+                                <button
+                                    v-if="closable"
+                                    :ref="closeButtonRef"
+                                    v-ripple
+                                    :autofocus="focusableClose"
+                                    :class="cx('closeButton')"
+                                    @click="close"
+                                    :aria-label="closeAriaLabel"
+                                    type="button"
+                                    v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
+                                    data-pc-group-section="headericon"
+                                >
+                                    <slot name="closeicon" :class="cx('closeButtonIcon')">
+                                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
+                                    </slot>
+                                </button>
+                            </div>
                         </div>
-                    </div>
-                    <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
-                        <slot></slot>
-                    </div>
-                    <div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
-                        <slot name="footer">{{ footer }}</slot>
-                    </div>
+                        <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
+                            <slot></slot>
+                        </div>
+                        <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>
diff --git a/components/lib/toast/Toast.d.ts b/components/lib/toast/Toast.d.ts
index 0a1124d0b..e040ed875 100755
--- a/components/lib/toast/Toast.d.ts
+++ b/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[];
 }
 
 /**
diff --git a/components/lib/toast/ToastMessage.vue b/components/lib/toast/ToastMessage.vue
index 00a298cb8..b47de3f9b 100755
--- a/components/lib/toast/ToastMessage.vue
+++ b/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')">