feat(grid-list): Add interactive support

components/grid-list/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mdc-demo mdc-demo--container">
     <mdc-grid-list icon-align-start with-support-text width=150 
-      class="mdc-demo">
+      class="mdc-demo" interactive>
       <mdc-grid-tile :src="tile"
         :title="'Title ' + (index + 1)"
         support-text="support text" cover icon="star_border"

components/grid-list/mdc-grid-list.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="mdc-grid-list" :class="classes" :style=styles>
-    <ul class="mdc-grid-list__tiles">
-      <slot></slot>
+  <div class="mdc-grid-list">
+    <ul class="mdc-grid-list__tiles" :class="classes" :style=styles>
+        <slot></slot>
     </ul>
   </div>
 </template>
@@ -18,35 +18,31 @@ export default {
     'header-caption': Boolean,
     'icon-align-start': Boolean,
     'icon-align-end': Boolean,
-    'with-support-text': Boolean
+    'with-support-text': Boolean,
+    'interactive': Boolean
   },
-  data () {
-    let classes = {}
-    if (this.narrowGutter) {
-      classes['mdc-grid-list--tile-gutter-1'] = true
-    }
-    if (this.headerCaption) {
-      classes['mdc-grid-list--header-caption'] = true
-    }
-    if (this.ratio) {
-      classes[`mdc-grid-list--tile-aspect-${this.ratio}`] = true
-    }
-    if (this.iconAlignStart) {
-      classes['mdc-grid-list--with-icon-align-start'] = true
-    }
-    if (this.iconAlignEnd) {
-      classes['mdc-grid-list--with-icon-align-end'] = true
-    }
-    if (this.withSupportText) {
-      classes['mdc-grid-list--twoline-caption'] = true
-    }
+  provide () {
+    return { mdcGrid: this }
+  },
+  computed: {
+    classes () {
+      let classes = {}
 
-    let styles = {}
-    if (this.width) {
-      styles['--mdc-grid-list-tile-width'] = `${this.width}px`
-    }
+      classes['mdc-grid-list--tile-gutter-1'] = this.narrowGutter
+      classes['mdc-grid-list--header-caption'] = this.headerCaption
+      classes[`mdc-grid-list--tile-aspect-${this.ratio}`] = this.ratio
+      classes['mdc-grid-list--with-icon-align-start'] = this.iconAlignStart
+      classes['mdc-grid-list--with-icon-align-end'] = this.iconAlignEnd
+      classes['mdc-grid-list--twoline-caption'] = this.withSupportText
+      classes['mdc-grid-list--non-interactive'] = !this.interactive
 
-    return { classes, styles }
+      return classes
+    },
+    styles () {
+      return {
+        '--mdc-grid-list-tile-width': `${this.width}px`
+      }
+    }
   },
   mounted () {
     this.foundation = new MDCGridListFoundation({

components/grid-list/mdc-grid-tile.vue

@@ -1,5 +1,8 @@
 <template>
-  <li class="mdc-grid-tile">
+  <li class="mdc-grid-tile" @click="onClick"
+    :class="[classes, itemClasses]" :style="styles"
+    :tabindex="isInteractive ? '0' : undefined"
+    v-on="isInteractive ? $listeners : {}">
     <div class="mdc-grid-tile__primary" v-if="cover">
       <div class="mdc-grid-tile__primary-content"
         :style="{ backgroundImage: 'url(' + src + ')' }">
@@ -16,15 +19,85 @@
   </li>
 </template>
 
+
 <script>
+import {DispatchEventMixin} from '../base'
+import {RippleBase} from '../ripple'
+
 export default {
   name: 'mdc-grid-tile',
+  inject: ['mdcGrid'],
+  mixins: [DispatchEventMixin],
   props: {
     'src': String,
     'cover': Boolean,
     'icon': String,
     'title': String,
     'support-text': String,
+    'selected': Boolean,
+    'activated': Boolean
+  },
+  data () {
+    return {
+      classes: {},
+      styles: {}
+    }
+  },
+  computed: {
+    itemClasses () {
+      return {
+        'mdc-grid-tile--selected': this.selected,
+        'mdc-grid-tile--activated': this.activated
+      }
+    },
+    isInteractive () {
+      return this.mdcGrid && this.mdcGrid.interactive
+    },
+    hasStartDetail () {
+      return this.startIcon || this.$slots['start-detail']
+    },
+    hasEndDetail () {
+      return this.endIcon || this.$slots['end-detail']
+    }
+  },
+  watch: {
+    isInteractive (value) {
+      if (value) {
+        this.addRipple()
+      } else {
+        this.removeRipple()
+      }
+    }
+  },
+  methods: {
+    onClick (evt) {
+      this.dispatchEvent(evt)
+    },
+    addRipple () {
+      if (!this.ripple) {
+        let ripple = new RippleBase(this)
+        ripple.init()
+        this.ripple = ripple
+      }
+    },
+    removeRipple () {
+      if (this.ripple) {
+        let ripple = this.ripple
+        this.ripple = null
+        ripple.destroy()
+      }
+    }
+  },
+  mounted () {
+    this.isInteractive && this.addRipple()
+    /* eslint-disable no-console */
+    console.log(this)
+    console.log(this.$el.getBoundingClientRect())
+    console.log(this.ripple)
+    /* eslint-enable no-console */
+  },
+  beforeDestroy () {
+    this.removeRipple()
   }
 }
 </script>

components/grid-list/styles.scss

@@ -1 +1,35 @@
 @import "@material/grid-list/mdc-grid-list";
+
+// Interactive support
+@import "@material/ripple/common";
+@import "@material/ripple/mixins";
+
+// Mixins
+@mixin mdc-grid-tile-primary-text-ink-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+@mixin mdc-grid-tile-graphic-ink-color($color) {
+  .mdc-grid-tile__primary-content {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+.mdc-grid-tile--selected,
+.mdc-grid-tile--activated {
+  @include mdc-grid-tile-primary-text-ink-color(primary);
+  @include mdc-grid-tile-graphic-ink-color(primary);
+}
+
+:not(.mdc-grid-list--non-interactive) > .mdc-grid-tile {
+  cursor: pointer;
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius-bounded;
+  @include mdc-states;
+  @include mdc-states-activated(primary);
+  @include mdc-states-selected(primary);
+}
+
+.mdc-grid-tile {
+  overflow: hidden;
+}