feat(drawer): add support for drawer-item activated style

closes #247

Author: stasson

components/drawer/README.md

@@ -80,6 +80,7 @@ By default the drawer component is responsive and will switch from temporary to
 |`exact`|Boolean| false | router-link property _(*)_ |
 |`active-class`|String| router-link-active | router-link property _(*)_ |
 |`exact-active-class`|String| router-link-exact-active | router-link property _(*)_ |
+|`activated`|Boolean| undefined | whether this item is selected (not needed if router-link mode is used) |
 
 > _(*)_ Requires [vue-router](https://router.vuejs.org)
 > If the `to` property is defined, the item behaves as a

components/drawer/mdc-drawer-item.vue

@@ -1,7 +1,7 @@
 <template>
   <custom-link :link="link" 
     class="mdc-drawer-item mdc-list-item" 
-    :class="classes" :style="styles"
+    :class="[classes. itemClasses]" :style="styles"
     @click="onClick">
     <span class="mdc-list-item__graphic" v-if="hasStartDetail">
       <slot name="start-detail">
@@ -21,8 +21,16 @@ export default {
   inject: ['mdcDrawer'],
   mixins: [DispatchEventMixin, CustomLinkMixin],
   props: {
-    'start-icon': String,
-    'temporary-close': {type: Boolean, default: true},
+    startIcon: String,
+    temporaryClose: { 
+      type: Boolean, 
+      default: true
+    },
+    activated: Boolean,
+    exactActiveClass: { 
+      type: String, 
+      default: 'mdc-list-item--activated' 
+    }
   },
   data () {
     return {
@@ -31,6 +39,11 @@ export default {
     }
   },
   computed: {
+    itemClasses () {
+      return {
+        'mdc-list-item--activated': this.activated
+      }
+    },
     hasStartDetail () {
       return this.startIcon || this.$slots['start-detail']
     }

demo/styles/demo.scss

@@ -22,10 +22,6 @@ $mdc-theme-background: #fff;
     font-family: "Roboto Mono", Monaco, courier, monospace;
     font-weight: 400;
     font-size: .875rem;
-
-    &.router-link-exact-active {
-      font-weight: 500;  
-    }
   }
 }