Finish alternate header

docs/src/pages/components/Table.vue

@@ -70,10 +70,6 @@
         </md-table-card>
 
         <md-table-card>
-          <md-table-alternate-header>
-            <md-button class="md-primary">Remove</md-button>
-          </md-table-alternate-header>
-
           <md-toolbar>
             <h1 class="md-title">Nutrition</h1>
             <md-button class="md-icon-button">
@@ -85,6 +81,16 @@
             </md-button>
           </md-toolbar>
 
+          <md-table-alternate-header md-selected-label="selected">
+            <md-button class="md-icon-button">
+              <md-icon>delete</md-icon>
+            </md-button>
+
+            <md-button class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+          </md-table-alternate-header>
+
           <md-table md-row-selection md-sort="calories">
             <md-table-header>
               <md-table-row>

src/components/mdTable/mdTable.scss

@@ -6,7 +6,7 @@
   overflow: auto;
 
   &.md-transition-off {
-    tr,
+    .md-table-cell,
     .md-checkbox .md-checkbox-container,
     .md-checkbox .md-checkbox-container:after {
       transition: none !important;
@@ -20,7 +20,7 @@
     overflow: hidden;
   }
 
-  tbody tr {
+  tbody .md-table-row {
     border-top: 1px solid #e0e0e0;
 
     &.md-selected .md-table-cell {
@@ -307,3 +307,26 @@
     font-size: 20px;
   }
 }
+
+.md-table-alternate-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  pointer-events: none;
+  opacity: 0;
+  transition: $swift-ease-out;
+  transition-duration: .3s;
+
+  &.md-active {
+    pointer-events: auto;
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+
+  .md-counter {
+    margin-left: 8px;
+    flex: 1;
+  }
+}

src/components/mdTable/mdTable.theme

@@ -10,4 +10,18 @@
       color: #{'BACKGROUND-CONTRAST-A100'};
     }
   }
+
+  .md-table-alternate-header,
+  &.md-table-alternate-header {
+    background-color: #{'BACKGROUND-COLOR-A100'};
+
+    .md-toolbar {
+      background-color: #{'ACCENT-COLOR-A100-0.2'};
+      color: #{'ACCENT-CONTRAST-A100'};
+    }
+
+    .md-counter {
+      color: #{'ACCENT-COLOR'};
+    }
+  }
 }

src/components/mdTable/mdTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-table" :class="classes">
+  <div class="md-table">
     <table>
       <slot></slot>
     </table>
@@ -29,6 +29,11 @@
         this.sortBy = name;
         this.$emit('sort', name);
       }
+    },
+    mounted() {
+      if (this.$parent.$el.classList.contains('md-table-card')) {
+        this.$parent.tableInstance = this;
+      }
     }
   };
 </script>

src/components/mdTable/mdTableAlternateHeader.vue

@@ -1,13 +1,38 @@
 <template>
-  <md-toolbar class="md-table-alternate-header">
-    <slot></slot>
-  </md-toolbar>
+  <div class="md-table-alternate-header" :class="classes">
+    <md-toolbar>
+      <div class="md-counter">
+        <span ref="counter">{{ tableInstance.numberOfSelected }}</span>
+        <span>{{ mdSelectedLabel }}</span>
+      </div>
+
+      <slot></slot>
+    </md-toolbar>
+  </div>
 </template>
 
 <script>
   export default {
     props: {
+      mdSelectedLabel: String
+    },
+    data() {
+      return {
+        classes: {},
+        tableInstance: {}
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.tableInstance = this.$parent.tableInstance;
 
+        this.$watch('tableInstance.numberOfSelected', () => {
+          this.$refs.counter.textContent = this.tableInstance.numberOfSelected;
+          this.classes = {
+            'md-active': this.tableInstance.numberOfSelected > 0
+          };
+        });
+      });
     }
   };
 </script>