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