feat(drawer): add openOn and closeOn property

components/drawer/README.md

@@ -46,8 +46,12 @@ By default the drawer component is responsive and will switch from temporary to
 |`persistent`|Boolean| undefined | shorthand for drawer-type="persistent" (*) |
 |`temporary`|Boolean| undefined | shorthand for drawer-type="temporary" (*) |
 |`toolbar-spacer`|Boolean| undefined | add a toolbar spacer  |
-|`toggle-on`|String| undefined | optional event to listen on  |
-|`toggle-on-source`|Object| vm.$root | optional event source, defaults to root bus |
+|`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.
 
@@ -143,4 +147,4 @@ By default the drawer component is responsive and will switch from temporary to
 
 ### Reference
 
-- <https://material.io/components/web/catalog/drawers>
+- <https://material.io/components/web/catalog/drawers>

components/drawer/mdc-drawer.vue

@@ -35,9 +35,13 @@ export default {
         return val in ['temporary', 'persistent', 'permanent']
       }
     },
+    'toolbar-spacer': Boolean,
     'toggle-on': String,
     'toggle-on-source': {type: Object, required: false},
-    'toolbar-spacer': Boolean
+    'open-on': String,
+    'open-on-source': {type: Object, required: false},
+    'close-on': String,
+    'close-on-source': {type: Object, required: false},
   },
   provide () {
     return { mdcDrawer: this }
@@ -125,6 +129,14 @@ export default {
       let source = this.toggleOnSource || this.$root
       source.$on(this.toggleOn, () => this.toggle())
     }
+    if (this.openOn) {
+      let source = this.openOnSource || this.$root
+      source.$on(this.openOn, () => this.open())
+    }
+    if (this.closeOn) {
+      let source = this.closeOnSource || this.$root
+      source.$on(this.closeOn, () => this.close())
+    }
     media.small.addListener(this.refreshMedia)
     media.large.addListener(this.refreshMedia)
     this.$nextTick(() => this.refreshMedia())