diff --git a/components/drawer/README.md b/components/drawer/README.md
index 277cacbf..310117fd 100644
--- a/components/drawer/README.md
+++ b/components/drawer/README.md
@@ -1,168 +1,159 @@
-## Usage
-
-The `mdc-drawer` component implements permanent, persistent, and temporary drawers.
-By default the drawer component is responsive and will switch from temporary to persistent design according to viewport width.
-
-```html
-<mdc-drawer v-model="open">
-  <mdc-drawer-list>
-    <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
-    <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
-    <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
-  </mdc-drawer-list>
-</mdc-drawer>
-```
-
-```javascript
-// ...
-methods: {
-  toggle() {
-    this.open = !this.open;
-  }
-},
-```
-
-> For proper positioning of the drawer, use the `mdc-layout-app` component.
-
-```html
-<mdc-layout-app>
-  <mdc-toolbar slot="toolbar" fixed>
-    <mdc-toolbar-row>
-      <mdc-toolbar-section align-start >
-        <mdc-toolbar-menu-icon event="toggle-drawer"></mdc-toolbar-menu-icon>
-        <mdc-toolbar-title>Drawer Example</mdc-toolbar-title>
-      </mdc-toolbar-section>
-    </mdc-toolbar-row>
-  </mdc-toolbar>
-  <mdc-drawer slot="drawer" toggle-on="toggle-drawer">
-    <mdc-drawer-list>
-        <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
-        <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
-        <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
-    </mdc-drawer-list>
-  </mdc-drawer>
-  <main class="content" >
-  </main>
-</mdc-layout-app>
-```
-
-### Drawer
-
-| prop               | Type    | Default   | Description                                        |
-| ------------------ | ------- | --------- | -------------------------------------------------- |
-| `drawer-type`      | String  | undefined | 'temporary', 'persistent' or 'permanent' (\*)      |
-| `permanent`        | Boolean | undefined | shorthand for drawer-type="permanent" (\*)         |
-| `persistent`       | Boolean | undefined | shorthand for drawer-type="persistent" (\*)        |
-| `temporary`        | Boolean | undefined | shorthand for drawer-type="temporary" (\*)         |
-| `toolbar-spacer`   | Boolean | undefined | add a toolbar spacer                               |
-| `open`             | Boolean | false     | optional v-model when true opens drawer            |
-| `toggle-on`        | String  | undefined | optional toggle event to listen on                 |
-| `toggle-on-source` | Object  | vm.$root  | optional toggle event source, defaults to root bus |
-| `open-on`          | String  | undefined | optional open event to listen on                   |
-| `open-on-source`   | Object  | vm.$root  | optional open event source, defaults to root bus   |
-| `close-on`         | String  | undefined | optional close event to listen on                  |
-| `close-on-source`  | Object  | vm.$root  | optional close event source, defaults to root bus  |
-
-> (\*) drawer is responsive if `drawer-type` undefined: temporary on mobile breakpoint and persistent otherwise.
-
-| event         | args    | Description                                             |
-| ------------- | ------- | ------------------------------------------------------- |
-| `@change`     | Boolean | notify v-model/listeners that drawer state has changed. |
-| `@open`       |         | triggered on drawer open                                |
-| `@close`      |         | triggered on drawer close                               |
-| `@vma:layout` | Boolean | notify listeners that screen layout has changed.        |
-
-### Drawer Header
-
-| prop         | Type    | Default   | Description                              |
-| ------------ | ------- | --------- | ---------------------------------------- |
-| `permanent`  | Boolean | undefined | show only if drawer is permanent (\*\*)  |
-| `persistent` | Boolean | undefined | show only if drawer is persistent (\*\*) |
-| `temporary`  | Boolean | undefined | show only if drawer is temporary (\*\*)  |
-
-> (\*\*) specifies whether or not the header is shown for responsive drawer
-
-### Drawer Items
-
-| prop                 | Type           | Default                  | Description                                                            |
-| -------------------- | -------------- | ------------------------ | ---------------------------------------------------------------------- |
-| `start-icon`         | String         | undefined                | material start icon                                                    |
-| `temporary-close`    | Boolean        | true                     | whether temporary drawer closes on click                               |
-| `event`              | String         | undefined                | optional event to emit on click                                        |
-| `event-target`       | Object         | vm.$root                 | optional event target, defaults to root bus                            |
-| `event-args`         | Array          | []                       | optional event args                                                    |
-| `to`                 | String, Object | undefined                | router-link property _(\*)_                                            |
-| `replace`            | Boolean        | false                    | router-link property _(\*)_                                            |
-| `append`             | Boolean        | false                    | router-link property _(\*)_                                            |
-| `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
-> [router-link](https://router.vuejs.org/en/api/router-link.html)
-
-### Item usage
-
-* A simple link
-
-```html
-  <mdc-drawer-item href="#">Inbox</mdc-drawer-item>
-```
-
-* With vue-router
-
-```html
-  <mdc-drawer-item  to="/path">Inbox</mdc-drawer-item>
-  <mdc-drawer-item  :to='folder' append >Inbox</mdc-drawer-item>
-```
-
-> Customize the active links style with vue-router active or exact-active classes:
-
-```css
-.mdc-drawer-item.router-link-exact-active {
-  color: red;
-}
-```
-
-* Trigger an event
-
-```html
-  <mdc-drawer-item event='my-event'>Inbox</mdc-drawer-item>
-```
-
-* Click handler
-
-```html
-  <mdc-drawer-item @click='handler'>Inbox</mdc-drawer-item>
-```
-
-#### Start Detail
-
-```html
-<mdc-drawer>
-  <mdc-drawer-list>
-    <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
-    <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
-    <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
-    <mdc-drawer-divider />
-    <mdc-drawer-item start-icon="email">All mail</mdc-drawer-item>
-    <mdc-drawer-item start-icon="delete">Trash</mdc-drawer-item>
-    <mdc-drawer-item start-icon="report">Spam</mdc-drawer-item>
-  </mdc-drawer-list>
-</mdc-drawer>
-```
-
-> to override start-icon detail, use `start-detail` named slot:
-
-```html
-<mdc-drawer-item>
-  <mdc-icon slot='start-detail' class="fa fa-home"></mdc-icon>
-  {{ Text }}
-</mdc-drawer-item>
-```
-
-### Reference
-
-* <https://material.io/components/web/catalog/drawers>
+## Usage
+
+The `mdc-drawer` component implements permanent, persistent, and temporary drawers.
+By default the drawer component is responsive and will switch from temporary to persistent design according to viewport width.
+
+```html
+<mdc-drawer v-model="open">
+  <mdc-drawer-list>
+    <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
+    <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
+    <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
+  </mdc-drawer-list>
+</mdc-drawer>
+```
+
+> For proper positioning of the drawer, use the `mdc-layout-app` component.
+
+```html
+<mdc-layout-app>
+  <mdc-toolbar slot="toolbar" fixed>
+    <mdc-toolbar-row>
+      <mdc-toolbar-section align-start >
+        <mdc-toolbar-menu-icon event="toggle-drawer"></mdc-toolbar-menu-icon>
+        <mdc-toolbar-title>Drawer Example</mdc-toolbar-title>
+      </mdc-toolbar-section>
+    </mdc-toolbar-row>
+  </mdc-toolbar>
+  <mdc-drawer slot="drawer" toggle-on="toggle-drawer">
+    <mdc-drawer-list>
+        <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
+        <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
+        <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
+    </mdc-drawer-list>
+  </mdc-drawer>
+  <main class="content" >
+  </main>
+</mdc-layout-app>
+```
+
+### Drawer
+
+| prop               | Type    | Default   | Description                                        |
+| ------------------ | ------- | --------- | -------------------------------------------------- |
+| `drawer-type`      | String  | undefined | 'temporary', 'persistent' or 'permanent' (\*)      |
+| `permanent`        | Boolean | undefined | shorthand for drawer-type="permanent" (\*)         |
+| `persistent`       | Boolean | undefined | shorthand for drawer-type="persistent" (\*)        |
+| `temporary`        | Boolean | undefined | shorthand for drawer-type="temporary" (\*)         |
+| `toolbar-spacer`   | Boolean | undefined | add a toolbar spacer                               |
+| `open`             | Boolean | false     | optional v-model when true opens drawer            |
+| `toggle-on`        | String  | undefined | optional toggle event to listen on                 |
+| `toggle-on-source` | Object  | vm.$root  | optional toggle event source, defaults to root bus |
+| `open-on`          | String  | undefined | optional open event to listen on                   |
+| `open-on-source`   | Object  | vm.$root  | optional open event source, defaults to root bus   |
+| `close-on`         | String  | undefined | optional close event to listen on                  |
+| `close-on-source`  | Object  | vm.$root  | optional close event source, defaults to root bus  |
+
+> (\*) drawer is responsive if `drawer-type` undefined: temporary on mobile breakpoint and persistent otherwise.
+
+| event         | args    | Description                                             |
+| ------------- | ------- | ------------------------------------------------------- |
+| `@change`     | Boolean | notify v-model/listeners that drawer state has changed. |
+| `@open`       |         | triggered on drawer open                                |
+| `@close`      |         | triggered on drawer close                               |
+| `@vma:layout` | Boolean | notify listeners that screen layout has changed.        |
+
+### Drawer Header
+
+| prop         | Type    | Default   | Description                              |
+| ------------ | ------- | --------- | ---------------------------------------- |
+| `permanent`  | Boolean | undefined | show only if drawer is permanent (\*\*)  |
+| `persistent` | Boolean | undefined | show only if drawer is persistent (\*\*) |
+| `temporary`  | Boolean | undefined | show only if drawer is temporary (\*\*)  |
+
+> (\*\*) specifies whether or not the header is shown for responsive drawer
+
+### Drawer Items
+
+| prop                 | Type           | Default                  | Description                                                            |
+| -------------------- | -------------- | ------------------------ | ---------------------------------------------------------------------- |
+| `start-icon`         | String         | undefined                | material start icon                                                    |
+| `temporary-close`    | Boolean        | true                     | whether temporary drawer closes on click                               |
+| `event`              | String         | undefined                | optional event to emit on click                                        |
+| `event-target`       | Object         | vm.$root                 | optional event target, defaults to root bus                            |
+| `event-args`         | Array          | []                       | optional event args                                                    |
+| `to`                 | String, Object | undefined                | router-link property _(\*)_                                            |
+| `replace`            | Boolean        | false                    | router-link property _(\*)_                                            |
+| `append`             | Boolean        | false                    | router-link property _(\*)_                                            |
+| `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
+> [router-link](https://router.vuejs.org/en/api/router-link.html)
+
+### Item usage
+
+* A simple link
+
+```html
+  <mdc-drawer-item href="#">Inbox</mdc-drawer-item>
+```
+
+* With vue-router
+
+```html
+  <mdc-drawer-item  to="/path">Inbox</mdc-drawer-item>
+  <mdc-drawer-item  :to='folder' append >Inbox</mdc-drawer-item>
+```
+
+> Customize the active links style with vue-router active or exact-active classes:
+
+```css
+.mdc-drawer-item.router-link-exact-active {
+  color: red;
+}
+```
+
+* Trigger an event
+
+```html
+  <mdc-drawer-item event='my-event'>Inbox</mdc-drawer-item>
+```
+
+* Click handler
+
+```html
+  <mdc-drawer-item @click='handler'>Inbox</mdc-drawer-item>
+```
+
+#### Start Detail
+
+```html
+<mdc-drawer>
+  <mdc-drawer-list>
+    <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
+    <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
+    <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
+    <mdc-drawer-divider />
+    <mdc-drawer-item start-icon="email">All mail</mdc-drawer-item>
+    <mdc-drawer-item start-icon="delete">Trash</mdc-drawer-item>
+    <mdc-drawer-item start-icon="report">Spam</mdc-drawer-item>
+  </mdc-drawer-list>
+</mdc-drawer>
+```
+
+> to override start-icon detail, use `start-detail` named slot:
+
+```html
+<mdc-drawer-item>
+  <mdc-icon slot='start-detail' class="fa fa-home"></mdc-icon>
+  {{ Text }}
+</mdc-drawer-item>
+```
+
+### Reference
+
+* <https://material.io/components/web/catalog/drawers>
diff --git a/components/drawer/demo.html b/components/drawer/demo.html
index 9c01fadd..668bb577 100644
--- a/components/drawer/demo.html
+++ b/components/drawer/demo.html
@@ -29,8 +29,8 @@
                     </mdc-toolbar-section>
                 </mdc-toolbar-row>
                 </mdc-toolbar>
-                
-                <mdc-drawer ref="drawer" slot="drawer" toggle-on="toggle-drawer" 
+
+                <mdc-drawer ref="drawer" slot="drawer" toggle-on="toggle-drawer"
                     :temporary="drawerType == 'temporary'"
                     :persistent="drawerType =='persistent'"
                     :permanent="drawerType == 'permanent'"
@@ -41,7 +41,7 @@
                     <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
                 </mdc-drawer-list>
                 </mdc-drawer>
-                
+
                 <main class="content"  style="display:flex;justify-content:center">
                     <div>
                         <mdc-radio name="drawer" v-model="drawerType" label="temporary" checked></mdc-radio>
@@ -49,10 +49,10 @@
                         <mdc-radio name="drawer" v-model="drawerType" label="permanent"></mdc-radio>
                     </div>
                 </main>
-                
+
             </mdc-layout-app>
         </div>
-                    
+
         <script>
             var app = new Vue({
                 el: '#layout-app-demo',
@@ -63,16 +63,16 @@
                 },
                 watch: {
                     drawerType: function () {
-                        this.$refs.drawer.open()
+                        this.$refs.drawer.show()
                     }
                 },
                 mounted:  function () {
                     var vm = this
                     vm.$nextTick( function () {
-                        vm.$refs.drawer.open()
+                        vm.$refs.drawer.show()
                     })
                 }
             })
         </script>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/components/drawer/mdc-drawer.vue b/components/drawer/mdc-drawer.vue
index eba1fae2..a6d2193b 100644
--- a/components/drawer/mdc-drawer.vue
+++ b/components/drawer/mdc-drawer.vue
@@ -1,187 +1,186 @@
-<template>
-  <component 
-    ref="drawer" 
-    :is="type"
-    v-model="open_" 
-    :toolbar-spacer="toolbarSpacer"
-    class="mdc-drawer"
-    @change="onChange"
-    @open="$emit('open')"
-    @close="$emit('close')" >
-    <slot />
-  </component>
-</template>
-
-<script>
-import mdcPermanentDrawer from './mdc-permanent-drawer.vue'
-import mdcPersistentDrawer from './mdc-persistent-drawer.vue'
-import mdcTemporaryDrawer from './mdc-temporary-drawer.vue'
-
-const media = new class {
-  get small() {
-    return (
-      this._small || (this._small = window.matchMedia('(max-width: 839px)'))
-    )
-  }
-
-  get large() {
-    return (
-      this._large || (this._large = window.matchMedia('(min-width: 1200px)'))
-    )
-  }
-}()
-
-export default {
-  name: 'mdc-drawer',
-  components: {
-    'mdc-permanent-drawer': mdcPermanentDrawer,
-    'mdc-persistent-drawer': mdcPersistentDrawer,
-    'mdc-temporary-drawer': mdcTemporaryDrawer
-  },
-  model: {
-    prop: 'open',
-    event: 'change'
-  },
-  props: {
-    open: Boolean,
-    permanent: Boolean,
-    persistent: Boolean,
-    temporary: Boolean,
-    drawerType: {
-      type: String,
-      validator: val => {
-        return val in ['temporary', 'persistent', 'permanent']
-      }
-    },
-    toolbarSpacer: Boolean,
-    toggleOn: String,
-    toggleOnSource: { type: Object, required: false },
-    openOn: String,
-    openOnSource: { type: Object, required: false },
-    closeOn: String,
-    closeOnSource: { type: Object, required: false }
-  },
-  provide() {
-    return { mdcDrawer: this }
-  },
-  data() {
-    return {
-      small: false,
-      large: false,
-      open_: false
-    }
-  },
-  computed: {
-    type() {
-      if (this.permanent) {
-        return 'mdc-permanent-drawer'
-      } else if (this.persistent) {
-        return 'mdc-persistent-drawer'
-      } else if (this.temporary) {
-        return 'mdc-temporary-drawer'
-      } else {
-        switch (this.drawerType) {
-          case 'permanent':
-            return 'mdc-permanent-drawer'
-          case 'persistent':
-            return 'mdc-persistent-drawer'
-          case 'temporary':
-            return 'mdc-temporary-drawer'
-          default:
-            return this.small ? 'mdc-temporary-drawer' : 'mdc-persistent-drawer'
-        }
-      }
-    },
-    isPermanent() {
-      return this.permanent || this.type === 'mdc-permanent-drawer'
-    },
-    isPersistent() {
-      return this.persistent || this.type === 'mdc-persistent-drawer'
-    },
-    isTemporary() {
-      return this.temporary || this.type === 'mdc-temporary-drawer'
-    },
-    isResponsive() {
-      return !(
-        this.permanent ||
-        this.persistent ||
-        this.temporary ||
-        this.drawerType
-      )
-    }
-  },
-  watch: {
-    open: 'onOpen_'
-  },
-  created() {
-    if (window && window.matchMedia) {
-      this.small = media.small.matches
-      this.large = media.large.matches
-    }
-  },
-  mounted() {
-    if (this.toggleOn) {
-      this.toggleOnEventSource = this.toggleOnSource || this.$root
-      this.toggleOnEventSource.$on(this.toggleOn, this.toggleDrawer)
-    }
-    if (this.openOn) {
-      this.openOnEventSource = this.openOnSource || this.$root
-      this.openOnEventSource.$on(this.openOn, this.openDrawer)
-    }
-    if (this.closeOn) {
-      this.closeOnEventSource = this.closeOnSource || this.$root
-      this.closeOnEventSource.$on(this.closeOn, this.closeDrawer)
-    }
-    media.small.addListener(this.refreshMedia)
-    media.large.addListener(this.refreshMedia)
-    this.$nextTick(() => this.refreshMedia())
-  },
-  beforeDestroy() {
-    media.small.removeListener(this.refreshMedia)
-    media.large.removeListener(this.refreshMedia)
-
-    if (this.toggleOnEventSource) {
-      this.toggleOnEventSource.$off(this.toggleOn, this.toggleDrawer)
-    }
-    if (this.openOnEventSource) {
-      this.openOnEventSource.$off(this.openOn, this.openDrawer)
-    }
-    if (this.closeOnEventSource) {
-      this.closeOnEventSource.$off(this.closeOn, this.closeDrawer)
-    }
-  },
-  methods: {
-    onOpen_(value) {
-      this.isPermanent || (this.open_ = value)
-    },
-    onChange(event) {
-      this.$emit('change', event)
-      this.$root.$emit('vma:layout')
-    },
-    openDrawer() {
-      this.open_ = true
-    },
-    closeDrawer() {
-      this.isPermanent || (this.open_ = false)
-    },
-    toggleDrawer() {
-      this.isPermanent ||
-        (this.isOpen() ? this.closeDrawer() : this.openDrawer())
-    },
-    isOpen() {
-      return this.isPermanent || this.open_
-    },
-    refreshMedia() {
-      this.small = media.small.matches
-      this.large = media.large.matches
-      if (this.isResponsive) {
-        if (this.large) {
-          this.openDrawer()
-        } else {
-          this.closeDrawer()
-        }
-      }
-    }
-  }
-}
-</script>
+<template>
+  <component
+    ref="drawer"
+    :is="type"
+    v-model="open_"
+    :toolbar-spacer="toolbarSpacer"
+    class="mdc-drawer"
+    @change="onChange"
+    @open="$emit('open')"
+    @close="$emit('close')" >
+    <slot />
+  </component>
+</template>
+
+<script>
+import mdcPermanentDrawer from './mdc-permanent-drawer.vue'
+import mdcPersistentDrawer from './mdc-persistent-drawer.vue'
+import mdcTemporaryDrawer from './mdc-temporary-drawer.vue'
+
+const media = new class {
+  get small() {
+    return (
+      this._small || (this._small = window.matchMedia('(max-width: 839px)'))
+    )
+  }
+
+  get large() {
+    return (
+      this._large || (this._large = window.matchMedia('(min-width: 1200px)'))
+    )
+  }
+}()
+
+export default {
+  name: 'mdc-drawer',
+  components: {
+    'mdc-permanent-drawer': mdcPermanentDrawer,
+    'mdc-persistent-drawer': mdcPersistentDrawer,
+    'mdc-temporary-drawer': mdcTemporaryDrawer
+  },
+  model: {
+    prop: 'open',
+    event: 'change'
+  },
+  props: {
+    open: Boolean,
+    permanent: Boolean,
+    persistent: Boolean,
+    temporary: Boolean,
+    drawerType: {
+      type: String,
+      validator: val => {
+        return val in ['temporary', 'persistent', 'permanent']
+      }
+    },
+    toolbarSpacer: Boolean,
+    toggleOn: String,
+    toggleOnSource: { type: Object, required: false },
+    openOn: String,
+    openOnSource: { type: Object, required: false },
+    closeOn: String,
+    closeOnSource: { type: Object, required: false }
+  },
+  provide() {
+    return { mdcDrawer: this }
+  },
+  data() {
+    return {
+      small: false,
+      large: false,
+      open_: false
+    }
+  },
+  computed: {
+    type() {
+      if (this.permanent) {
+        return 'mdc-permanent-drawer'
+      } else if (this.persistent) {
+        return 'mdc-persistent-drawer'
+      } else if (this.temporary) {
+        return 'mdc-temporary-drawer'
+      } else {
+        switch (this.drawerType) {
+          case 'permanent':
+            return 'mdc-permanent-drawer'
+          case 'persistent':
+            return 'mdc-persistent-drawer'
+          case 'temporary':
+            return 'mdc-temporary-drawer'
+          default:
+            return this.small ? 'mdc-temporary-drawer' : 'mdc-persistent-drawer'
+        }
+      }
+    },
+    isPermanent() {
+      return this.permanent || this.type === 'mdc-permanent-drawer'
+    },
+    isPersistent() {
+      return this.persistent || this.type === 'mdc-persistent-drawer'
+    },
+    isTemporary() {
+      return this.temporary || this.type === 'mdc-temporary-drawer'
+    },
+    isResponsive() {
+      return !(
+        this.permanent ||
+        this.persistent ||
+        this.temporary ||
+        this.drawerType
+      )
+    }
+  },
+  watch: {
+    open: 'onOpen_'
+  },
+  created() {
+    if (window && window.matchMedia) {
+      this.small = media.small.matches
+      this.large = media.large.matches
+    }
+  },
+  mounted() {
+    if (this.toggleOn) {
+      this.toggleOnEventSource = this.toggleOnSource || this.$root
+      this.toggleOnEventSource.$on(this.toggleOn, this.toggle)
+    }
+    if (this.openOn) {
+      this.openOnEventSource = this.openOnSource || this.$root
+      this.openOnEventSource.$on(this.openOn, this.show)
+    }
+    if (this.closeOn) {
+      this.closeOnEventSource = this.closeOnSource || this.$root
+      this.closeOnEventSource.$on(this.closeOn, this.close)
+    }
+    media.small.addListener(this.refreshMedia)
+    media.large.addListener(this.refreshMedia)
+    this.$nextTick(() => this.refreshMedia())
+  },
+  beforeDestroy() {
+    media.small.removeListener(this.refreshMedia)
+    media.large.removeListener(this.refreshMedia)
+
+    if (this.toggleOnEventSource) {
+      this.toggleOnEventSource.$off(this.toggleOn, this.toggle)
+    }
+    if (this.openOnEventSource) {
+      this.openOnEventSource.$off(this.openOn, this.show)
+    }
+    if (this.closeOnEventSource) {
+      this.closeOnEventSource.$off(this.closeOn, this.close)
+    }
+  },
+  methods: {
+    onOpen_(value) {
+      this.isPermanent || (this.open_ = value)
+    },
+    onChange(event) {
+      this.$emit('change', event)
+      this.$root.$emit('vma:layout')
+    },
+    show() {
+      this.open_ = true
+    },
+    close() {
+      this.isPermanent || (this.open_ = false)
+    },
+    toggle() {
+      this.isPermanent || (this.isOpen() ? this.close() : this.show())
+    },
+    isOpen() {
+      return this.isPermanent || this.open_
+    },
+    refreshMedia() {
+      this.small = media.small.matches
+      this.large = media.large.matches
+      if (this.isResponsive) {
+        if (this.large) {
+          this.show()
+        } else {
+          this.close()
+        }
+      }
+    }
+  }
+}
+</script>