From 0d2ba6f69b8debea37a306e54a661b42431d1a2f Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 2 May 2017 17:10:42 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Dialog:=20slot=20for=20header=20and?=
 =?UTF-8?q?=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Eduardo San Martin Morote <posva13@gmail.com>
---
 src/Dialog/Dialog.vue           | 24 ++++++++++++++----------
 src/Dialog/DialogHeaderTitle.js | 13 +++++++++++++
 test/specs/Dialog.spec.js       | 16 ++++++++++++++++
 3 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 src/Dialog/DialogHeaderTitle.js

diff --git a/src/Dialog/Dialog.vue b/src/Dialog/Dialog.vue
index e481502..9a2ac94 100644
--- a/src/Dialog/Dialog.vue
+++ b/src/Dialog/Dialog.vue
@@ -7,8 +7,10 @@
          aria-describedby="mdc-dialog-with-list-description">
     <div class="mdc-dialog__surface" ref="surface">
       <header class="mdc-dialog__header">
-        <h2 id="mdc-dialog-with-list-label"
-            class="mdc-dialog__header__title">{{ title }}</h2>
+        <slot name="header">
+          <h2 id="mdc-dialog-with-list-label"
+              class="mdc-dialog__header__title">{{ title }}</h2>
+        </slot>
       </header>
       <section id="mdc-dialog-with-list-description"
                :class="bodyClasses"
@@ -16,14 +18,16 @@
         <slot></slot>
       </section>
       <footer class="mdc-dialog__footer">
-        <MdcButton class="mdc-dialog__footer__button mdc-dialog__footer__button--cancel"
-                   v-ripple
-                   v-if="cancelText"
-        >{{ cancelText }}</MdcButton>
-        <MdcButton class="mdc-dialog__footer__button mdc-dialog__footer__button--accept"
-                   v-ripple
-                   ref="accept"
-        >{{ acceptText || 'OK' }}</MdcButton>
+        <slot name="footer">
+          <MdcButton class="mdc-dialog__footer__button mdc-dialog__footer__button--cancel"
+                     v-ripple
+                     v-if="cancelText"
+          >{{ cancelText }}</MdcButton>
+          <MdcButton class="mdc-dialog__footer__button mdc-dialog__footer__button--accept"
+                     v-ripple
+                     ref="accept"
+          >{{ acceptText || 'OK' }}</MdcButton>
+        </slot>
       </footer>
     </div>
     <div class="mdc-dialog__backdrop"></div>
diff --git a/src/Dialog/DialogHeaderTitle.js b/src/Dialog/DialogHeaderTitle.js
new file mode 100644
index 0000000..c28b853
--- /dev/null
+++ b/src/Dialog/DialogHeaderTitle.js
@@ -0,0 +1,13 @@
+export default {
+  functional: true,
+
+  render (h, { data, children }) {
+    const staticClass = 'mdc-dialog__header__title'
+    data.staticClass = data.staticClass
+                     ? `${data.staticClass} ${staticClass}`
+                     : staticClass
+    return h('h2', {
+      ...data,
+    }, children)
+  },
+}
diff --git a/test/specs/Dialog.spec.js b/test/specs/Dialog.spec.js
index e077737..16c4319 100644
--- a/test/specs/Dialog.spec.js
+++ b/test/specs/Dialog.spec.js
@@ -1,4 +1,5 @@
 import Dialog from 'src/Dialog/Dialog'
+import DialogHeaderTitle from 'src/Dialog/DialogHeaderTitle'
 import {
   createVM,
   dataPropagationTest,
@@ -230,4 +231,19 @@ describe('Dialog', function () {
       }).then(done)
     })
   })
+
+  it('can override the header', function () {
+    const vm = createVM(this, function (h) {
+      return (
+        <div>
+          <Dialog ref='dialog'>
+            <DialogHeaderTitle slot='header'>Custom</DialogHeaderTitle>
+            Dialog content
+          </Dialog>
+          <button onClick={() => this.$refs.dialog.open()}>Open</button>
+        </div>
+      )
+    })
+    vm.$('.mdc-dialog__header__title').should.exist.and.have.text('Custom')
+  })
 })