feat(list): update to mdc-web v3.1.1 (#397)

* feat(list): update to mdc-web v3.1.1

* doc(list): update to mdc-web v3.1.1

components/list/List.vue

@@ -1,11 +1,31 @@
 <template>
   <ul
+    v-if="tag === 'ul'"
     :class="classes"
     class="mdc-list"
     v-bind="$attrs"
+    @MDCList:action="onAction"
   >
     <slot />
   </ul>
+  <nav
+    v-else-if="tag === 'nav'"
+    :class="classes"
+    class="mdc-list"
+    v-bind="$attrs"
+    @MDCList:action="onAction"
+  >
+    <slot />
+  </nav>
+  <div
+    v-else-if="tag === 'div'"
+    :class="classes"
+    class="mdc-list"
+    v-bind="$attrs"
+    @MDCList:action="onAction"
+  >
+    <slot />
+  </div>
 </template>
 
 <script>
@@ -14,6 +34,10 @@ import { MDCList } from '@material/list'
 
 export default {
   mixins: [baseComponentMixin, themeClassMixin],
+  model: {
+    prop: 'selectedIndex',
+    event: 'change'
+  },
   props: {
     avatar: {
       type: Boolean,
@@ -42,11 +66,24 @@ export default {
     wrapFocus: {
       type: Boolean,
       default: true
+    },
+    selectedIndex: {
+      type: [Number, Array],
+      default: -1
+    },
+    tag: {
+      type: String,
+      default: 'ul'
+    },
+    js: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
     return {
-      mdcList: undefined
+      mdcList: undefined,
+      slotObserver: undefined
     }
   },
   computed: {
@@ -62,26 +99,86 @@ export default {
   watch: {
     singleSelection () {
       if (this.mdcList) { this.mdcList.singleSelection = this.singleSelection }
+      if (this.singleSelection) {
+        this.$el.setAttribute('role', 'listbox')
+        this.$slots.default.forEach((n) => {
+          if (n.elm) {
+            n.elm.setAttribute('role', 'option')
+          }
+        })
+      }
     },
     vertical () {
       if (this.mdcList) { this.mdcList.vertical = this.vertical }
     },
     wrapFocus () {
       if (this.mdcList) { this.mdcList.wrapFocus = this.wrapFocus }
+    },
+    selectedIndex () {
+      if (this.mdcList && ((this.selectedIndex instanceof Number && this.selectedIndex > -1) || this.selectedIndex instanceof Array)) this.mdcList.selectedIndex = this.selectedIndex
+    },
+    js () {
+      this.reInstantiateList()
+    },
+    tag () {
+      this.$nextTick(() => {
+        this.reInstantiateList()
+      })
     }
   },
   mounted () {
-    if (this.$parent.$options._componentTag !== 'm-menu') {
-      this.mdcList = MDCList.attachTo(this.$el)
-      this.mdcList.singleSelection = this.singleSelection
-      this.mdcList.wrapFocus = this.wrapFocus
-      this.mdcList.vertical = this.vertical
-    } else {
-      this.$el.setAttribute('tabindex', '0')
-    }
+    this.$nextTick(() => {
+      if (this.js && !this.mdcList) {
+        this.mdcList = MDCList.attachTo(this.$el)
+        this.mdcList.singleSelection = this.singleSelection
+        if (this.singleSelection) this.$el.setAttribute('role', 'listbox')
+        this.mdcList.vertical = this.vertical
+        if ((this.selectedIndex instanceof Number && this.selectedIndex > -1) || this.selectedIndex instanceof Array) this.mdcList.selectedIndex = this.selectedIndex
+        this.mdcList.wrapFocus = this.wrapFocus
+
+        this.slotObserver = new MutationObserver(() => this.updateSlot())
+        this.slotObserver.observe(this.$el, {
+          childList: true,
+          subtree: true
+        })
+      }
+    })
   },
   beforeDestroy () {
     if (this.mdcList) this.mdcList.destroy()
+  },
+  methods: {
+    reInstantiateList () {
+      if (this.js) {
+        if (this.mdcList) {
+          this.mdcList.destroy()
+        }
+        MDCList.attachTo(this.$el)
+        this.mdcList.singleSelection = this.singleSelection
+        this.mdcList.vertical = this.vertical
+        this.mdcList.selectedIndex = this.selectedIndex
+        this.mdcList.wrapFocus = this.wrapFocus
+      } else {
+        if (this.mdcList) {
+          this.mdcList.destroy()
+        }
+        this.mdcList = undefined
+      }
+    },
+    updateSlot () {
+      if (this.mdcList) this.mdcList.layout()
+      if (this.singleSelection) {
+        this.$slots.default.forEach((n) => {
+          if (n.elm) {
+            n.elm.setAttribute('role', 'option')
+          }
+        })
+      }
+    },
+    onAction (e) {
+      this.$emit('change', this.mdcList.selectedIndex)
+      this.$emit('action', e.detail)
+    }
   }
 }
 </script>

components/list/ListDivider.vue

@@ -14,12 +14,10 @@ export default {
   props: {
     inset: {
       type: Boolean,
-      required: false,
       default: false
     },
     padded: {
       type: Boolean,
-      required: false,
       default: false
     }
   },
@@ -28,7 +26,6 @@ export default {
       return {
         'mdc-list-divider--inset': this.inset,
         'mdc-list-divider--padded': this.padded
-
       }
     }
   }

components/list/ListGroup.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="mdc-list-group">
+    <h3
+      v-if="subheader.length > 0"
+      class="mdc-list-group__subheader"
+    >
+      {{ subheader }}
+    </h3>
     <slot />
   </div>
 </template>
@@ -8,6 +14,12 @@
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
-  mixins: [baseComponentMixin, themeClassMixin]
+  mixins: [baseComponentMixin, themeClassMixin],
+  props: {
+    subheader: {
+      type: String,
+      default: ''
+    }
+  }
 }
 </script>

components/list/ListGroupDivider.vue

@@ -1,11 +1,29 @@
 <template>
-  <hr class="mdc-list-divider">
+  <hr class="mdc-list-divider" :class="classes">
 </template>
 
 <script>
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
-  mixins: [baseComponentMixin, themeClassMixin]
+  mixins: [baseComponentMixin, themeClassMixin],
+  props: {
+    inset: {
+      type: Boolean,
+      default: false
+    },
+    padded: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'mdc-list-divider--inset': this.inset,
+        'mdc-list-divider--padded': this.padded
+      }
+    }
+  }
 }
 </script>

components/list/ListGroupSubheader.vue

@@ -1,22 +1,26 @@
-<template>
-  <h6
-    v-if="$parent.$options._componentTag === 'm-drawer-list'"
-    class="mdc-list-group__subheader"
-  >
-    <slot />
-  </h6>
-  <h3
-    v-else
-    class="mdc-list-group__subheader"
-  >
-    <slot />
-  </h3>
-</template>
-
 <script>
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
-  mixins: [baseComponentMixin, themeClassMixin]
+  mixins: [baseComponentMixin, themeClassMixin],
+  props: {
+    level: {
+      type: Number,
+      default: 3,
+      validator: function (value) {
+        return value > 0 && value < 7
+      }
+    }
+  },
+  render: function (createElement) {
+    return createElement(
+      'h' + this.level, // tag name
+      {
+        class: {
+          'mdc-list-group__subheader': true
+        }
+      }, this.$slots.default // array of children
+    )
+  }
 }
 </script>

components/list/ListItem.vue

@@ -90,6 +90,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    ripple: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -109,8 +113,11 @@ export default {
   },
   watch: {
     classes () {
-      this.mdcRipple.destroy()
-      this.mdcRipple = MDCRipple.attachTo(this.$el)
+      this.reInstantiateRipple()
+      if (this.selected) this.$el.setAttribute('aria-selected', 'true')
+    },
+    ripple () {
+      this.reInstantiateRipple()
     }
   },
   mounted () {
@@ -120,7 +127,8 @@ export default {
       childList: true,
       subtree: true
     })
-    this.mdcRipple = MDCRipple.attachTo(this.$el)
+    if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el)
+    if (this.selected) this.$el.setAttribute('aria-selected', 'true')
   },
   beforeDestroy () {
     this.slotObserver.disconnect()
@@ -140,6 +148,19 @@ export default {
           n.elm.classList.add('mdc-list-item__meta')
         })
       }
+    },
+    reInstantiateRipple () {
+      if (this.ripple) {
+        if (this.mdcRipple) {
+          this.mdcRipple.destroy()
+        }
+        MDCRipple.attachTo(this.$el)
+      } else {
+        if (this.mdcRipple) {
+          this.mdcRipple.destroy()
+        }
+        this.mdcRipple = undefined
+      }
     }
   }
 }