feat(drawer): make header slot to be the content inside `<div class="… (

#400)

* feat(drawer): make header slot to be the content inside `<div class="mdc-drawer__header">`

* test(drawer): update snapshots

components/drawer/Drawer.vue

@@ -6,7 +6,7 @@
     @MDCDrawer:opened="onOpened"
   >
     <div
-      v-if="!hasHeaderClass || title !== '' || subtitle !== ''"
+      v-if="$slots.header || title !== '' || subtitle !== ''"
       class="mdc-drawer__header"
     >
       <h3
@@ -23,10 +23,6 @@
       </h6>
       <slot name="header" />
     </div>
-    <slot
-      v-else
-      name="header"
-    />
     <slot />
   </aside>
 </template>
@@ -114,10 +110,8 @@ export default {
     }
   },
   mounted () {
-    // the slots can only be accessible in nextTick
+    // to avoid error throw by focus trap
     this.$nextTick(function () {
-      // judge whether the slots have the header class
-      this.hasHeaderClass = this.$slots.header[0].elm.classList.contains('mdc-drawer__header')
       if (!this.mdcDrawer && (this.dismissible || this.modal)) { this.mdcDrawer = new MDCDrawer(this.$el) }
     })
   },

components/drawer/__test__/__snapshots__/Drawer.spec.js.snap

@@ -2,28 +2,19 @@
 
 exports[`Drawer should render as dismissible 1`] = `
 <aside class="mdc-drawer mdc-drawer--dismissible">
-  <div class="mdc-drawer__header">
-    <!---->
-    <!---->
-  </div>
+  <!---->
 </aside>
 `;
 
 exports[`Drawer should render as modal 1`] = `
 <aside class="mdc-drawer mdc-drawer--modal">
-  <div class="mdc-drawer__header">
-    <!---->
-    <!---->
-  </div>
+  <!---->
 </aside>
 `;
 
 exports[`Drawer should render with no prop 1`] = `
 <aside class="mdc-drawer">
-  <div class="mdc-drawer__header">
-    <!---->
-    <!---->
-  </div>
+  <!---->
 </aside>
 `;