From 02f58855f286c48bfbe757fa24b87466897ee7fc Mon Sep 17 00:00:00 2001
From: vanhoavn <vanhoa@vhn.vn>
Date: Tue, 21 Mar 2017 07:10:23 +0700
Subject: [PATCH] allow customize tab item using slot (#596)

Allow customize tab item using slot
---
 docs/src/components/ApiTable.vue   |  4 ++
 docs/src/pages/components/Tabs.vue | 95 ++++++++++++++++++++++++++++++
 src/components/mdTabs/mdTab.vue    | 10 ++++
 src/components/mdTabs/mdTabs.vue   |  6 +-
 4 files changed, 113 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/ApiTable.vue b/docs/src/components/ApiTable.vue
index 914189c..9d7bdb7 100644
--- a/docs/src/components/ApiTable.vue
+++ b/docs/src/components/ApiTable.vue
@@ -20,6 +20,10 @@
       <md-tab class="api-tab" md-label="Methods" v-if="$slots.methods">
         <slot name="methods"></slot>
       </md-tab>
+
+      <md-tab class="api-tab" md-label="Slots" v-if="$slots.slots">
+        <slot name="slots"></slot>
+      </md-tab>
     </md-tabs>
   </div>
 </template>
diff --git a/docs/src/pages/components/Tabs.vue b/docs/src/pages/components/Tabs.vue
index 68e94ca..575dff3 100644
--- a/docs/src/pages/components/Tabs.vue
+++ b/docs/src/pages/components/Tabs.vue
@@ -55,6 +55,22 @@
             </md-table-body>
           </md-table>
 
+          <md-table slot="slots">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>header-item</md-table-cell>
+                <md-table-cell>Change the template of the header item. Optional.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+
           <md-table slot="events">
             <md-table-header>
               <md-table-row>
@@ -98,6 +114,12 @@
                 <md-table-cell>The tab text</md-table-cell>
               </md-table-row>
 
+              <md-table-row>
+                <md-table-cell>md-options</md-table-cell>
+                <md-table-cell><code>any</code></md-table-cell>
+                <md-table-cell>Any additional options (which can be used in <code>header-item</code> slot of <code>md-tabs</code>)</md-table-cell>
+              </md-table-row>
+
               <md-table-row>
                 <md-table-cell>md-icon</md-table-cell>
                 <md-table-cell><code>String</code></md-table-cell>
@@ -314,7 +336,80 @@
             </code-block>
           </div>
         </example-box>
+
+        <example-box card-title="Header item templating">
+          <div slot="demo">
+            <md-tabs class="md-transparent">
+              <template slot="header-item" scope="props">
+                <md-icon v-if="props.header.icon">{{ props.header.icon }}</md-icon>
+                <template v-if="props.header.options && props.header.options.new_badge">
+                  <span v-if="props.header.label" class="label-with-new-badge">
+                    {{ props.header.label }}
+                    <span class="new-badge">{{props.header.options.new_badge}}</span>
+                  </span>
+                </template>
+                <template v-else>
+                  <span v-if="props.header.label">{{ props.header.label }}</span>
+                </template>
+              </template>
+              <md-tab md-icon="phone" md-label="Phone">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
+              </md-tab>
+
+              <md-tab md-icon="favorite" md-label="Favorite" :md-options="{new_badge: 3}">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
+              </md-tab>
+
+              <md-tab md-icon="near_me" md-label="Near me" :md-options="{new_badge: 1}">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
+            </md-tabs>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &#x3C;md-tabs class=&#x22;md-transparent&#x22;&#x3E;
+                &#x3C;template slot=&#x22;header-item&#x22; scope=&#x22;props&#x22;&#x3E;
+                  &#x3C;md-icon v-if=&#x22;props.header.icon&#x22;&#x3E;{{ '\x7b\x7b' }} props.header.icon {{ '\x7d\x7d' }}&#x3C;/md-icon&#x3E;
+                  &#x3C;template v-if=&#x22;props.header.options &#x26;&#x26; props.header.options.new_badge&#x22;&#x3E;
+                    &#x3C;span v-if=&#x22;props.header.label&#x22; class=&#x22;label-with-new-badge&#x22;&#x3E;
+                      {{ '\x7b\x7b' }} props.header.label {{ '\x7d\x7d' }}
+                      &#x3C;span class=&#x22;new-badge&#x22;&#x3E;{{ '\x7b\x7b' }} props.header.options.new_badge {{ '\x7d\x7d' }}&#x3C;/span&#x3E;
+                    &#x3C;/span&#x3E;
+                  &#x3C;/template&#x3E;
+                  &#x3C;template v-else&#x3E;
+                    &#x3C;span v-if=&#x22;props.header.label&#x22;&#x3E;{{ '\x7b\x7b' }} props.header.label {{ '\x7d\x7d' }}&#x3C;/span&#x3E;
+                  &#x3C;/template&#x3E;
+                &#x3C;/template&#x3E;
+                &#x3C;md-tab md-icon=&#x22;phone&#x22; md-label=&#x22;Phone&#x22;&#x3E;
+                  &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&#x3C;/p&#x3E;
+                &#x3C;/md-tab&#x3E;
+
+                &#x3C;md-tab md-icon=&#x22;favorite&#x22; md-label=&#x22;Favorite&#x22; :md-options=&#x22;&#x7B;new_badge: 3&#x7D;&#x22;&#x3E;
+                  &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&#x3C;/p&#x3E;
+                  &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&#x3C;/p&#x3E;
+                &#x3C;/md-tab&#x3E;
+
+                &#x3C;md-tab md-icon=&#x22;near_me&#x22; md-label=&#x22;Near me&#x22; :md-options=&#x22;&#x7B;new_badge: 1&#x7D;&#x22;&#x3E;
+                  &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&#x3C;/p&#x3E;
+                &#x3C;/md-tab&#x3E;
+              &#x3C;/md-tabs&#x3E;
+            </code-block>
+          </div>
+        </example-box>
       </div>
     </docs-component>
   </page-content>
 </template>
+<style>
+  .label-with-new-badge {
+    font-weight: bolder;
+  }
+  .new-badge {
+    background-color: red;
+    color: white;
+    padding: 3px;
+    border-radius: 3px;
+  }
+</style>
diff --git a/src/components/mdTabs/mdTab.vue b/src/components/mdTabs/mdTab.vue
index d9e69d3..45325c8 100644
--- a/src/components/mdTabs/mdTab.vue
+++ b/src/components/mdTabs/mdTab.vue
@@ -16,6 +16,9 @@
       mdIcon: String,
       mdActive: Boolean,
       mdDisabled: Boolean,
+      mdOptions: {
+        default: undefined
+      },
       mdTooltip: String,
       mdTooltipDelay: {
         type: String,
@@ -44,6 +47,12 @@
       mdIcon() {
         this.updateTabData();
       },
+      mdOptions: {
+        deep: true,
+        handler() {
+          this.updateTabData();
+        }
+      },
       mdLabel() {
         this.updateTabData();
       },
@@ -71,6 +80,7 @@
           id: this.tabId,
           label: this.mdLabel,
           icon: this.mdIcon,
+          options: this.mdOptions,
           active: this.mdActive,
           disabled: this.mdDisabled,
           tooltip: this.mdTooltip,
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index 0b08b28..a091642 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -12,8 +12,10 @@
         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>
+          <slot name="header-item" :header="header">
+            <md-icon v-if="header.icon">{{ header.icon }}</md-icon>
+            <span v-if="header.label">{{ header.label }}</span>
+          </slot>
           <md-tooltip v-if="header.tooltip" :md-direction="header.tooltipDirection" :md-delay="header.tooltipDelay">{{ header.tooltip }}</md-tooltip>
         </div>
       </button>