From a2c6b3c5aab1feb3c599dbbc74867d0e35fb5ec6 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 9 May 2024 15:42:08 +0300
Subject: [PATCH] Drawer: new footer slot added

---
 components/lib/drawer/Drawer.d.ts          |  4 ++++
 components/lib/drawer/Drawer.vue           | 13 ++++++++++++-
 components/lib/drawer/style/DrawerStyle.js |  7 ++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/lib/drawer/Drawer.d.ts b/components/lib/drawer/Drawer.d.ts
index ac35bdfa9..a0bc7b56d 100755
--- a/components/lib/drawer/Drawer.d.ts
+++ b/components/lib/drawer/Drawer.d.ts
@@ -242,6 +242,10 @@ export interface DrawerSlots {
          */
         closeCallback: () => void;
     }): VNode[];
+    /**
+     * Custom footer template.
+     */
+    footer(): VNode[];
 }
 
 /**
diff --git a/components/lib/drawer/Drawer.vue b/components/lib/drawer/Drawer.vue
index b181e8f76..8b4269a96 100755
--- a/components/lib/drawer/Drawer.vue
+++ b/components/lib/drawer/Drawer.vue
@@ -31,6 +31,9 @@
                         <div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
                             <slot></slot>
                         </div>
+                        <div :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
+                            <slot name="footer"> </slot>
+                        </div>
                     </template>
                 </div>
             </transition>
@@ -61,6 +64,7 @@ export default {
     mask: null,
     content: null,
     headerContainer: null,
+    footerContainer: null,
     closeButton: null,
     outsideClickListener: null,
     documentKeydownListener: null,
@@ -129,7 +133,11 @@ export default {
                 focusTarget = this.$slots.default && findFocusableElement(this.container);
 
                 if (!focusTarget) {
-                    focusTarget = this.closeButton;
+                    focusTarget = this.$slots.footer && findFocusableElement(this.footerContainer);
+
+                    if (!focusTarget) {
+                        focusTarget = this.closeButton;
+                    }
                 }
             }
 
@@ -168,6 +176,9 @@ export default {
         headerContainerRef(el) {
             this.headerContainer = el;
         },
+        footerContainerRef(el) {
+            this.footerContainer = el;
+        },
         closeButtonRef(el) {
             this.closeButton = el ? el.$el : undefined;
         },
diff --git a/components/lib/drawer/style/DrawerStyle.js b/components/lib/drawer/style/DrawerStyle.js
index 804e17727..abf0194ee 100644
--- a/components/lib/drawer/style/DrawerStyle.js
+++ b/components/lib/drawer/style/DrawerStyle.js
@@ -28,6 +28,10 @@ const theme = ({ dt }) => `
     padding: ${dt('drawer.header.padding')};
 }
 
+.p-drawer-footer {
+    padding: ${dt('drawer.header.padding')};
+}
+
 .p-drawer-title {
     font-weight: ${dt('drawer.title.font.weight')};
     font-size: ${dt('drawer.title.font.size')};
@@ -148,7 +152,8 @@ const classes = {
     header: 'p-drawer-header',
     title: 'p-drawer-title',
     pcCloseButton: 'p-drawer-close-button',
-    content: 'p-drawer-content'
+    content: 'p-drawer-content',
+    footer: 'p-drawer-footer'
 };
 
 export default BaseStyle.extend({