feat(list): add support for interactive prop, default to non-interactive

closes #224

Author: stasson

components/list/README.md

@@ -18,7 +18,7 @@
 |`bordered`|Boolean|| bordered style |
 |`two-line`|Boolean|| two-line style |
 |`avatar-list`|Boolean|| set avatar style list |
-
+|`interactive`|Boolean|| set interactive style for hover, focus, and press states |
 
 ### Dense List
 

components/list/demo.vue

@@ -22,7 +22,7 @@
       </mdc-layout-cell>
 
       <mdc-layout-cell>
-        <mdc-list dense bordered >
+        <mdc-list dense bordered>
           <mdc-list-item>
             <i slot="start-detail" class="material-icons">favorite_border</i>
             start details

components/list/mdc-list-item.vue

@@ -1,5 +1,7 @@
 <template>
-  <li class="mdc-list-item">
+  <li class="mdc-list-item"
+    :class="classes" :style="styles"   
+    :tabindex="isInteractive ? '0' : undefined">
 
     <span class="mdc-list-item__graphic" v-if="hasStartDetail">
       <slot name="start-detail"></slot>
@@ -21,9 +23,21 @@
 </template>
 
 <script>
+import {RippleBase} from '../ripple'
+
 export default {
   name: 'mdc-list-item',
+  inject: ['mdcList'],
+  data () {
+    return {
+      classes: {},
+      styles: {}
+    } 
+  },
   computed: {
+    isInteractive () {
+      return this.mdcList && this.mdcList.interactive
+    },
     hasSecondary () {
       return !!this.$slots['secondary']
     },
@@ -33,6 +47,17 @@ export default {
     hasStartDetail () {
       return !!this.$slots['start-detail']
     }
+  },
+  mounted () {
+    if (this.isInteractive) {
+      this.ripple = new RippleBase(this)
+      this.ripple.init()
+    }
+  },
+  beforeDestroy () {
+    this.ripple && this.ripple.destroy()
+    this.ripple = null
   }
 }
 </script>
+  

components/list/mdc-list.vue

@@ -8,19 +8,24 @@
 export default {
   name: 'mdc-list',
   props: {
-    'dense': Boolean,
-    'avatar-list': Boolean,
-    'two-line': Boolean,
-    'bordered': Boolean
+    dense: Boolean,
+    avatarList: Boolean,
+    twoLine: Boolean,
+    bordered: Boolean,
+    interactive: Boolean
+  },
+  provide () {
+    return { mdcList: this }
   },
   data () {
     return {
       classes: {
         'mdc-list--dense': this.dense,
         'mdc-list--avatar-list': this.avatarList,
         'mdc-list--two-line': this.twoLine,
-        'mdc-list--bordered': this.bordered
-      }
+        'mdc-list--bordered': this.bordered,
+        'mdc-list--non-interactive': !this.interactive
+      }      
     }
   }
 }