Drawer: new footer slot added

components/lib/drawer/Drawer.d.ts

@@ -242,6 +242,10 @@ export interface DrawerSlots {
          */
         closeCallback: () => void;
     }): VNode[];
+    /**
+     * Custom footer template.
+     */
+    footer(): VNode[];
 }
 
 /**

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;
         },

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({