From 369aed4ea3f1835047a7ff8f55e44c2ac48dc234 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Fri, 9 Dec 2016 00:47:32 -0200
Subject: [PATCH] fix md-tabs with v-if and fix whiteframe

---
 docs/src/components/PageContent.vue   | 36 +++++-------
 docs/src/pages/components/Toolbar.vue | 80 +++++++++++++--------------
 src/components/mdSelect/mdSelect.vue  |  2 -
 src/components/mdTabs/mdTab.vue       |  2 +-
 src/components/mdTabs/mdTabs.vue      | 25 +++++----
 5 files changed, 69 insertions(+), 76 deletions(-)

diff --git a/docs/src/components/PageContent.vue b/docs/src/components/PageContent.vue
index 1115b79..1c4db15 100644
--- a/docs/src/components/PageContent.vue
+++ b/docs/src/components/PageContent.vue
@@ -1,24 +1,22 @@
 <template>
   <div class="page-content">
-    <md-whiteframe md-elevation="1" class="main-header">
-      <md-toolbar>
-        <md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
-          <md-icon>menu</md-icon>
-        </md-button>
+    <md-whiteframe md-tag="md-toolbar" md-elevation="1" class="main-header">
+      <md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
+        <md-icon>menu</md-icon>
+      </md-button>
 
-        <div class="md-title">{{ pageTitle }}</div>
+      <div class="md-title">{{ pageTitle }}</div>
 
-        <div class="release-version">
-          <span>Version:</span>
-          <md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
-            <md-option v-for="doc in availableDocs" :value="doc" v-once>{{ doc }}</md-option>
-          </md-select>
-        </div>
+      <div class="release-version">
+        <span>Version:</span>
+        <md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
+          <md-option v-for="doc in availableDocs" :value="doc" v-once>{{ doc }}</md-option>
+        </md-select>
+      </div>
 
-        <md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></path></svg>
-        </md-button>
-      </md-toolbar>
+      <md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></path></svg>
+      </md-button>
     </md-whiteframe>
 
     <slot></slot>
@@ -33,12 +31,8 @@
   }
 
   .main-header {
-    position: relative;
     z-index: 2;
-
-    .md-toolbar {
-      color: #fff !important;
-    }
+    color: #fff !important;
   }
 
   .nav-trigger {
diff --git a/docs/src/pages/components/Toolbar.vue b/docs/src/pages/components/Toolbar.vue
index d03c139..2e49548 100644
--- a/docs/src/pages/components/Toolbar.vue
+++ b/docs/src/pages/components/Toolbar.vue
@@ -418,32 +418,30 @@
         <example-box card-title="Complete example">
           <div slot="demo">
             <div class="phone-viewport complete-example">
-              <md-whiteframe md-elevation="2">
-                <md-toolbar class="md-large" v-md-theme="'light-blue'">
-                  <div class="md-toolbar-container">
-                    <md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
-                      <md-icon>menu</md-icon>
-                    </md-button>
+              <md-whiteframe md-elevation="2" md-tag="md-toolbar" class="md-large" v-md-theme="'light-blue'">
+                <div class="md-toolbar-container">
+                  <md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
+                    <md-icon>menu</md-icon>
+                  </md-button>
 
-                    <span style="flex: 1"></span>
+                  <span style="flex: 1"></span>
 
-                    <md-button class="md-icon-button">
-                      <md-icon>search</md-icon>
-                    </md-button>
+                  <md-button class="md-icon-button">
+                    <md-icon>search</md-icon>
+                  </md-button>
 
-                    <md-button class="md-icon-button">
-                      <md-icon>view_module</md-icon>
-                    </md-button>
-                  </div>
+                  <md-button class="md-icon-button">
+                    <md-icon>view_module</md-icon>
+                  </md-button>
+                </div>
 
-                  <div class="md-toolbar-container">
-                    <h2 class="md-title">My Files</h2>
+                <div class="md-toolbar-container">
+                  <h2 class="md-title">My Files</h2>
 
-                    <md-button class="md-fab md-mini">
-                      <md-icon>add</md-icon>
-                    </md-button>
-                  </div>
-                </md-toolbar>
+                  <md-button class="md-fab md-mini">
+                    <md-icon>add</md-icon>
+                  </md-button>
+                </div>
               </md-whiteframe>
 
               <md-list class="md-double-line">
@@ -619,32 +617,30 @@
           <div slot="code">
             <code-block lang="xml">
               &lt;div class=&quot;phone-viewport complete-example&quot;&gt;
-                &lt;md-whiteframe md-elevation=&quot;2&quot;&gt;
-                  &lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;light-blue&#039;&quot;&gt;
-                    &lt;div class=&quot;md-toolbar-container&quot;&gt;
-                      &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
-                        &lt;md-icon&gt;menu&lt;/md-icon&gt;
-                      &lt;/md-button&gt;
+                &lt;md-whiteframe md-elevation=&quot;2&quot; md-tag=&quot;md-toolbar&quot; class=&quot;md-large&quot; v-md-theme=&quot;&#039;light-blue&#039;&quot;&gt;
+                  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                      &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
 
-                      &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
+                    &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
 
-                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
-                        &lt;md-icon&gt;search&lt;/md-icon&gt;
-                      &lt;/md-button&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                      &lt;md-icon&gt;search&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
 
-                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
-                        &lt;md-icon&gt;view_module&lt;/md-icon&gt;
-                      &lt;/md-button&gt;
-                    &lt;/div&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                      &lt;md-icon&gt;view_module&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/div&gt;
 
-                    &lt;div class=&quot;md-toolbar-container&quot;&gt;
-                      &lt;h2 class=&quot;md-title&quot;&gt;My Files&lt;/h2&gt;
+                  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                    &lt;h2 class=&quot;md-title&quot;&gt;My Files&lt;/h2&gt;
 
-                      &lt;md-button class=&quot;md-fab md-mini&quot;&gt;
-                        &lt;md-icon&gt;add&lt;/md-icon&gt;
-                      &lt;/md-button&gt;
-                    &lt;/div&gt;
-                  &lt;/md-toolbar&gt;
+                    &lt;md-button class=&quot;md-fab md-mini&quot;&gt;
+                      &lt;md-icon&gt;add&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/div&gt;
                 &lt;/md-whiteframe&gt;
 
                 &lt;md-list class=&quot;md-double-line&quot;&gt;
diff --git a/src/components/mdSelect/mdSelect.vue b/src/components/mdSelect/mdSelect.vue
index 78c6f9a..181ba3e 100644
--- a/src/components/mdSelect/mdSelect.vue
+++ b/src/components/mdSelect/mdSelect.vue
@@ -43,8 +43,6 @@
     },
     computed: {
       classes() {
-        console.log(this.disabled);
-
         return {
           'md-disabled': this.disabled
         };
diff --git a/src/components/mdTabs/mdTab.vue b/src/components/mdTabs/mdTab.vue
index a809cf1..2ed997d 100644
--- a/src/components/mdTabs/mdTab.vue
+++ b/src/components/mdTabs/mdTab.vue
@@ -71,7 +71,7 @@
       }
 
       this.mounted = true;
-      this.parentTabs.registerTab(tabData);
+      this.parentTabs.updateTab(tabData);
 
       if (this.mdActive) {
         this.parentTabs.setActiveTab(tabData);
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index d14d0af..1be568b 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -102,7 +102,7 @@
         if (tabData.active) {
           if (!tabData.disabled) {
             this.setActiveTab(tabData);
-          } else {
+          } else if (Object.keys(this.tabList).length) {
             let tabsIds = Object.keys(this.tabList);
             let targetIndex = tabsIds.indexOf(tabData.id) + 1;
             let target = tabsIds[targetIndex];
@@ -136,13 +136,15 @@
         return idList.indexOf(id);
       },
       calculateIndicatorPos() {
-        let tabsWidth = this.$el.offsetWidth;
-        let activeTab = this.$refs.tabHeader[this.activeTabNumber];
-        let left = activeTab.offsetLeft;
-        let right = tabsWidth - left - activeTab.offsetWidth;
+        if (this.$refs.tabHeader) {
+          let tabsWidth = this.$el.offsetWidth;
+          let activeTab = this.$refs.tabHeader[this.activeTabNumber];
+          let left = activeTab.offsetLeft;
+          let right = tabsWidth - left - activeTab.offsetWidth;
 
-        this.$refs.indicator.style.left = left + 'px';
-        this.$refs.indicator.style.right = right + 'px';
+          this.$refs.indicator.style.left = left + 'px';
+          this.$refs.indicator.style.right = right + 'px';
+        }
       },
       calculateTabsWidthAndPosition() {
         const width = this.$el.offsetWidth;
@@ -161,9 +163,11 @@
       },
       calculateContentHeight() {
         this.$nextTick(() => {
-          let height = this.tabList[this.activeTab].ref.$el.offsetHeight;
+          if (Object.keys(this.tabList).length) {
+            let height = this.tabList[this.activeTab].ref.$el.offsetHeight;
 
-          this.contentHeight = height + 'px';
+            this.contentHeight = height + 'px';
+          }
         });
       },
       calculatePosition() {
@@ -199,7 +203,7 @@
         this.observeElementChanges();
         window.addEventListener('resize', this.calculateOnWatch);
 
-        if (this.tabList.length && !this.activeTab) {
+        if (Object.keys(this.tabList).length && !this.activeTab) {
           let firstTab = Object.keys(this.tabList)[0];
 
           this.setActiveTab(this.tabList[firstTab]);
@@ -208,6 +212,7 @@
     },
     beforeDestroy() {
       this.contentObserver.disconnect();
+      this.navigationObserver.disconnect();
       window.removeEventListener('resize', this.calculateOnWatch);
     }
   };