From 94c6c59285a6ef695297b34b022fafa5bf84ff9d Mon Sep 17 00:00:00 2001
From: stasson <sebastien.tasson@gmail.com>
Date: Sat, 10 Feb 2018 18:59:18 +0100
Subject: [PATCH] feat(drawer): add support for drawer-item activated style

closes #247
---
 components/drawer/README.md           |  1 +
 components/drawer/mdc-drawer-item.vue | 19 ++++++++++++++++---
 demo/styles/demo.scss                 |  4 ----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/drawer/README.md b/components/drawer/README.md
index 05e8eb55..c583e529 100644
--- a/components/drawer/README.md
+++ b/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
diff --git a/components/drawer/mdc-drawer-item.vue b/components/drawer/mdc-drawer-item.vue
index 12fca473..b316c523 100644
--- a/components/drawer/mdc-drawer-item.vue
+++ b/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']
     }
diff --git a/demo/styles/demo.scss b/demo/styles/demo.scss
index ae6507f2..b31541ed 100644
--- a/demo/styles/demo.scss
+++ b/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;  
-    }
   }
 }