From 9df9f27a4a8bf5307ee83112cab0bc27d6e02424 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 7 Dec 2016 19:18:49 -0200
Subject: [PATCH] create custom tags in whiteframe component (#170)

* create custom tags in whiteframe

* add custom tag in api. fix #169

* add custom tag in examples. fix #169
---
 docs/src/pages/Introduction.vue              | 46 ++++++++++----------
 docs/src/pages/components/Whiteframe.vue     | 10 ++++-
 src/components/mdTabs/mdTabs.vue             | 38 ++++++++--------
 src/components/mdWhiteframe/mdWhiteframe.vue | 35 +++++++--------
 4 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/docs/src/pages/Introduction.vue b/docs/src/pages/Introduction.vue
index 68db730..e4432bb 100644
--- a/docs/src/pages/Introduction.vue
+++ b/docs/src/pages/Introduction.vue
@@ -1,31 +1,33 @@
 <template>
   <page-content page-title="Introduction">
     <div class="main-content">
-      <div class="button-actions">
-        <div class="example">
-          <img src="assets/vue-material-example.png" alt="Material Design">
+      <div class="introduction">
+        <div class="button-actions">
+          <div class="example">
+            <img src="assets/vue-material-example.png" alt="Material Design">
+          </div>
+
+          <div class="introduction">Build well-crafted apps with Material Design and Vue 2</div>
+
+          <md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
+          <md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
         </div>
 
-        <div class="introduction">Build well-crafted apps with Material Design and Vue 2</div>
+        <div class="row">
+          <div class="column">
+            <h2 class="md-headline">Material Design</h2>
+            <p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
+          </div>
 
-        <md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
-        <md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
-      </div>
+          <div class="column">
+            <h2 class="md-headline">Full-featured</h2>
+            <p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
+          </div>
 
-      <div class="row">
-        <div class="column">
-          <h2 class="md-headline">Material Design</h2>
-          <p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
-        </div>
-
-        <div class="column">
-          <h2 class="md-headline">Full-featured</h2>
-          <p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
-        </div>
-
-        <div class="column">
-          <h2 class="md-headline">Compatible</h2>
-          <p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.0.</p>
+          <div class="column">
+            <h2 class="md-headline">Compatible</h2>
+            <p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.0.</p>
+          </div>
         </div>
       </div>
     </div>
@@ -33,7 +35,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .main-content {
+  .introduction {
     max-width: 960px;
     margin: 0 auto;
   }
diff --git a/docs/src/pages/components/Whiteframe.vue b/docs/src/pages/components/Whiteframe.vue
index bd0cafb..51fc972 100644
--- a/docs/src/pages/components/Whiteframe.vue
+++ b/docs/src/pages/components/Whiteframe.vue
@@ -22,6 +22,12 @@
                 <md-table-cell><code>Number</code></md-table-cell>
                 <md-table-cell>The amount of elevation. From 0 to 24. <br>Default: <code>1</code></md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-tag</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>The generated html tag <br>Default: <code>div</code></md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
@@ -30,7 +36,7 @@
       <div slot="example">
         <example-box card-title="Default">
           <div slot="demo">
-            <md-whiteframe>1dp</md-whiteframe>
+            <md-whiteframe md-tag="section">1dp</md-whiteframe>
             <md-whiteframe md-elevation="2">2dp</md-whiteframe>
             <md-whiteframe md-elevation="3">3dp</md-whiteframe>
             <md-whiteframe md-elevation="4">4dp</md-whiteframe>
@@ -58,7 +64,7 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-whiteframe&gt;1dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-tag=&quot;section&quot;&gt;1dp&lt;/md-whiteframe&gt;
               &lt;md-whiteframe md-elevation=&quot;2&quot;&gt;2dp&lt;/md-whiteframe&gt;
               &lt;md-whiteframe md-elevation=&quot;3&quot;&gt;3dp&lt;/md-whiteframe&gt;
               &lt;md-whiteframe md-elevation=&quot;4&quot;&gt;4dp&lt;/md-whiteframe&gt;
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index 112309e..b171461 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -1,25 +1,23 @@
 <template>
   <div class="md-tabs" :class="tabClasses">
-    <md-whiteframe :md-elevation="mdElevation">
-      <div class="md-tabs-navigation" :class="navigationClasses" ref="tabNavigation">
-        <button
-          v-for="header in tabList"
-          :key="header.id"
-          type="button"
-          class="md-tab-header"
-          :class="getHeaderClass(header)"
-          :disabled="header.disabled"
-          @click="setActiveTab(header)"
-          ref="tabHeader">
-          <md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
-          <div class="md-tab-header-container">
-            <md-icon v-if="header.icon">{{ header.icon }}</md-icon>
-            <span v-if="header.label">{{ header.label }}</span>
-          </div>
-        </button>
+    <md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
+      <button
+        v-for="header in tabList"
+        :key="header.id"
+        type="button"
+        class="md-tab-header"
+        :class="getHeaderClass(header)"
+        :disabled="header.disabled"
+        @click="setActiveTab(header)"
+        ref="tabHeader">
+        <md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
+        <div class="md-tab-header-container">
+          <md-icon v-if="header.icon">{{ header.icon }}</md-icon>
+          <span v-if="header.label">{{ header.label }}</span>
+        </div>
+      </button>
 
-        <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
-      </div>
+      <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
     </md-whiteframe>
 
     <div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
@@ -129,7 +127,7 @@
           attributeOldValue: true,
           characterDataOldValue: true
         });
-        this.navigationObserver.observe(this.$refs.tabNavigation, {
+        this.navigationObserver.observe(this.$refs.tabNavigation.$el, {
           attributes: true
         });
       },
diff --git a/src/components/mdWhiteframe/mdWhiteframe.vue b/src/components/mdWhiteframe/mdWhiteframe.vue
index b01de09..5d28c63 100644
--- a/src/components/mdWhiteframe/mdWhiteframe.vue
+++ b/src/components/mdWhiteframe/mdWhiteframe.vue
@@ -1,40 +1,37 @@
-<template>
-  <div class="md-whiteframe" :class="classes">
-    <slot></slot>
-  </div>
-</template>
-
 <style lang="scss" src="./mdWhiteframe.scss"></style>
 
 <script>
   export default {
     props: {
-      mdElevation: [String, Number]
-    },
-    data() {
-      return {
-        elevation: this.mdElevation === 0 ? 0 : this.mdElevation || 1
-      };
-    },
-    watch: {
-      mdElevation() {
-        this.elevation = this.mdElevation;
+      mdElevation: {
+        type: [String, Number],
+        default: 1
+      },
+      mdTag: {
+        type: String,
+        default: 'div'
       }
     },
     computed: {
       classes() {
-        let numberedElevation = parseInt(this.elevation, 10);
+        let numberedElevation = parseInt(this.mdElevation, 10);
         let elevationClass = 'md-whiteframe-';
 
         if (!isNaN(numberedElevation) && typeof numberedElevation === 'number') {
           elevationClass += numberedElevation;
           elevationClass += 'dp';
-        } else if (this.elevation.indexOf('dp') > -1) {
-          elevationClass += this.elevation;
+        } else if (this.mdElevation.indexOf('dp') > -1) {
+          elevationClass += this.mdElevation;
         }
 
         return elevationClass;
       }
+    },
+    render(createElement) {
+      return createElement(this.mdTag, {
+        staticClass: 'md-whiteframe',
+        class: this.classes
+      }, this.$slots.default);
     }
   };
 </script>