fix(mdc-tab-bar): Remove obsolete support for primary/secondary indic…

…ators.
stasson · Apr 10, 2018 · 6b902ba · 6b902ba
1 parent 62d9251
commit 6b902ba
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 39 deletions.
diff --git a/components/tabs/README.md b/components/tabs/README.md
@@ -1,47 +1,54 @@
 ## Usage
 
 ```html
-<mdc-tab-bar>
-  <mdc-tab>item one</mdc-tab>              
-  <mdc-tab>item two</mdc-tab>              
-  <mdc-tab>item three</mdc-tab>              
+<mdc-tab-bar @change="onSelected">
+  <mdc-tab>item one</mdc-tab>
+  <mdc-tab>item two</mdc-tab>
+  <mdc-tab>item three</mdc-tab>
 </mdc-tab-bar>
 ```
 
+```javascript
+var vm = new Vue({
+  methods: {
+    onSelected(idx) {
+      console.log(`selected index: ${idx}`);
+    },
+  },
+});
+```
+
 ### props
 
 #### mdc-tab
 
 mdc-tab behaves as a navigational link. Add an `href` for simple link behavior
 or the `to` property for router-link behavior. mdc-tab dispatches `@click` event.
 
-
-| prop | Type | Default | Description |
-|-------|------|---------|-------------|
-|`active`|Boolean| false | set the tab active |
-|`event`|String| optional | optional event to emit on click  |
-|`event-target`|Object| vm.$root | optional event target, defaults to root bus |
-|`event-args`|Array| [] | optional event args |
-|`to`|String, Object| undefined | router-link property _(*)_ |
-|`replace`|Boolean| false | router-link property _(*)_ |
-|`append`|Boolean| false | router-link property _(*)_ |
-|`exact`|Boolean| false | router-link property _(*)_ |
-|`active-class`|String| router-link-active | router-link property _(*)_ |
-|`exact-active-class`|String| router-link-exact-active | router-link property _(*)_ |
-
-> _(*)_ Requires [vue-router](https://router.vuejs.org)
+| prop                 | Type           | Default                  | Description                                 |
+| -------------------- | -------------- | ------------------------ | ------------------------------------------- |
+| `active`             | Boolean        | false                    | set the tab active                          |
+| `event`              | String         | optional                 | optional event to emit on click             |
+| `event-target`       | Object         | vm.$root                 | optional event target, defaults to root bus |
+| `event-args`         | Array          | []                       | optional event args                         |
+| `to`                 | String, Object | undefined                | router-link property _(\*)_                 |
+| `replace`            | Boolean        | false                    | router-link property _(\*)_                 |
+| `append`             | Boolean        | false                    | router-link property _(\*)_                 |
+| `exact`              | Boolean        | false                    | router-link property _(\*)_                 |
+| `active-class`       | String         | router-link-active       | router-link property _(\*)_                 |
+| `exact-active-class` | String         | router-link-exact-active | router-link property _(\*)_                 |
+
+> _(\*)_ Requires [vue-router](https://router.vuejs.org)
 > If the `to` property is defined, the item behaves as a
 > [router-link](https://router.vuejs.org/en/api/router-link.html)
 
 #### mdc-tab-bar
 
-| prop | Type | Default | Description |
-|-------|------|---------|-------------|
-|`indicator-primary`|Boolean| false | whether the indicator has the primary color |
-|`indicator-accent`|Boolean| false | whether the indicator has the accent color  |
-
-> emits `@change` event with the active index as parameter
+### events
 
+| props     | args   | Description                                          |
+| --------- | ------ | ---------------------------------------------------- |
+| `@change` | number | notify listeners with the active index as parameter. |
 
 ### Tabs with icons
 
@@ -66,4 +73,5 @@ or the `to` property for router-link behavior. mdc-tab dispatches `@click` event
 ```
 
 ### reference
-- <https://material.io/components/web/catalog/tabs>
+
+* <https://material.io/components/web/catalog/tabs>
diff --git a/components/tabs/demo.vue b/components/tabs/demo.vue
@@ -2,19 +2,44 @@
 <div class="">
   <h3>Simple</h3>
   <section class="mdc-demo mdc-demo--container">
-    <mdc-tab-bar indicator-accent>
-      <mdc-tab>item one</mdc-tab>
-      <mdc-tab>item two</mdc-tab>
-      <mdc-tab>item three</mdc-tab>
+    <mdc-tab-bar @change="onSelected">
+      <mdc-tab v-for="item in items" :key="item">{{item}}</mdc-tab>
     </mdc-tab-bar>
   </section>
+  <br>
+  <div v-if="selectedItem">
+    Selected: <span class="demo-tabs-selected">{{selectedItem}}</span>
+  </div>
   <h3>With icons and text</h3>
   <section class="mdc-demo mdc-demo--container">
-    <mdc-tab-bar indicator-accent>
+    <mdc-tab-bar>
       <mdc-tab icon="phone">Recents</mdc-tab>
       <mdc-tab icon="favorite">Favorites</mdc-tab>
       <mdc-tab icon="personal_pin">Nearby</mdc-tab>
     </mdc-tab-bar>
   </section>
 </div>
 </template>
+
+<script>
+export default {
+  data() {
+    const items = ['item one', 'item two', 'item three'];
+    return {
+      selectedItem: items[0],
+      items,
+    };
+  },
+  methods: {
+    onSelected(idx) {
+      this.selectedItem = this.items[idx];
+    },
+  },
+};
+</script>
+
+<style>
+.demo-tabs-selected {
+  font-style: italic;
+}
+</style>
diff --git a/components/tabs/mdc-tab-bar.vue b/components/tabs/mdc-tab-bar.vue
@@ -12,16 +12,9 @@ import MDCTabFoundation from '@material/tabs/tab/foundation';
 
 export default {
   name: 'mdc-tab-bar',
-  props: {
-    'indicator-primary': Boolean,
-    'indicator-accent': Boolean,
-  },
   data() {
     return {
-      classes: {
-        'mdc-tab-bar--indicator-primary': this.indicatorPrimary,
-        'mdc-tab-bar--indicator-accent': this.indicatorAccent,
-      },
+      classes: {},
       indicatorStyles: {},
       tabs: [],
     };