add 'changed' event to mdBottomBar. (#296)

Now we fire off an event when the active item changes, just like mdTabs. Additionally, this moves activation logic to mdBottomBar, instead of each mdBottomBarItem. It made the change easier to implement, and seems a bit cleaner, though that's subjective.

Author: Morgul

docs/src/pages/components/BottomBar.vue

@@ -30,6 +30,24 @@
               </md-table-row>
             </md-table-body>
           </md-table>
+
+          <md-table slot="events">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Value</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>change</md-table-cell>
+                <md-table-cell>Receive the item index</md-table-cell>
+                <md-table-cell>Triggered when an item is activated.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
         </api-table>
 
         <api-table name="md-bottom-bar-item">

src/components/mdBottomBar/mdBottomBar.vue

@@ -18,6 +18,15 @@
       classes() {
         return this.mdShift ? 'md-shift' : 'md-fixed';
       }
+    },
+    methods: {
+      setActive(item) {
+        this.$children.forEach((child) => {
+          child.active = child === item;
+        });
+
+        this.$emit('change', this.$children.findIndex((i) => i === item));
+      }
     }
   };
 </script>

src/components/mdBottomBar/mdBottomBarItem.vue

@@ -47,11 +47,9 @@
     },
     methods: {
       setActive(active) {
-        this.$parent.$children.forEach((item) => {
-          item.active = false;
-        });
-
-        this.active = !!active;
+        if (active) {
+          this.$parent.setActive(this);
+        }
       }
     },
     mounted() {