feat: dispatchevent

Refactor dispatch event mixin to support underlying html and  material-components-web events as well as global event bus

components/base/dispatch-event-mixin.js

@@ -1,5 +1,3 @@
-import { eventBus } from '../common';
-
 export const DispatchEventMixin = {
   props: {
     event: String,
@@ -8,12 +6,20 @@ export const DispatchEventMixin = {
   },
   methods: {
     dispatchEvent(evt) {
-      this.$emit(evt.type);
+      evt && this.$emit(evt.type, evt);
       if (this.event) {
-        let target = this.eventTarget || eventBus;
+        let target = this.eventTarget || this.$root;
         let args = this.eventArgs || [];
         target.$emit(this.event, ...args);
       }
     },
   },
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+        click: e => this.dispatchEvent(e),
+      };
+    },
+  },
 };

components/button/mdc-button-base.vue

@@ -1,24 +1,24 @@
 <template>
   <custom-button ref="root"
-    :class="classes" :style="styles" 
-    :href="href" :link="link" :disabled="disabled" 
-    @click="dispatchEvent">
+    :class="classes" :style="styles"
+    :href="href" :link="link" :disabled="disabled"
+    v-on="listeners">
     <slot />
   </custom-button>
 </template>
 
 <script>
-import {DispatchEventMixin, CustomButtonMixin} from '../base'
-import {RippleMixin} from '../ripple'
+import { DispatchEventMixin, CustomButtonMixin } from '../base';
+import { RippleMixin } from '../ripple';
 
 export default {
   name: 'mdc-button-base',
   mixins: [DispatchEventMixin, CustomButtonMixin, RippleMixin],
-  data () {
+  data() {
     return {
       classes: {},
-      styles: {}
-    }
-  }
-}
+      styles: {},
+    };
+  },
+};
 </script>

components/card/mdc-card-action-icon.vue

@@ -1,45 +1,45 @@
 <template>
   <span :class="classes" :style="styles" 
-    @click="dispatchEvent">
+     v-on="listeners">
     <slot>{{ icon }}</slot>
   </span>
 </template>
 
 <script>
-import {DispatchEventMixin} from '../base'
-import {RippleBase} from '../ripple'
+import { DispatchEventMixin } from '../base';
+import { RippleBase } from '../ripple';
 
 export default {
   name: 'mdc-card-action-icon',
   mixins: [DispatchEventMixin],
   props: {
-    icon: String
+    icon: String,
   },
-  data () {
+  data() {
     return {
       classes: {
-        'mdc-card-action-icon': true, 
-        'material-icons':!!this.icon,
+        'mdc-card-action-icon': true,
+        'material-icons': !!this.icon,
         'mdc-card__action': true,
         'mdc-card__action--icon': true,
-        'mdc-icon-toggle': true
+        'mdc-icon-toggle': true,
       },
-      styles: {}
-    }
+      styles: {},
+    };
   },
   watch: {
-    icon () {
-      this.$set(this.classes, 'material-icons', !!this.icon)
-    }
+    icon() {
+      this.$set(this.classes, 'material-icons', !!this.icon);
+    },
   },
-  mounted () {
-    this.ripple = new RippleBase(this,{
+  mounted() {
+    this.ripple = new RippleBase(this, {
       isUnbounded: () => true,
-    })
-    this.ripple.init()
+    });
+    this.ripple.init();
   },
-  beforeDestroy () {
-    this.ripple.destroy()
-  }
-}
+  beforeDestroy() {
+    this.ripple.destroy();
+  },
+};
 </script>

components/card/mdc-card-primary-action.vue

@@ -3,22 +3,22 @@
     class="mdc-card-primary-action mdc-card__primary-action"
     :class="classes" :style="styles" 
     :link="link" 
-    @click="dispatchEvent">
+    v-on="listeners">
     <slot />
   </custom-link>
 </template>
 
 <script>
-import {DispatchEventMixin, CustomLinkMixin} from '../base'
+import { DispatchEventMixin, CustomLinkMixin } from '../base';
 import { RippleMixin } from '../ripple/index';
 export default {
   name: 'mdc-card-primary-action',
   mixins: [DispatchEventMixin, CustomLinkMixin, RippleMixin],
-  data () {
+  data() {
     return {
       classes: {},
-      styles: {}
-    }
-  }
-}
+      styles: {},
+    };
+  },
+};
 </script>

components/common/event-bus.js

@@ -5,15 +5,15 @@ export const eventBus = {
     bus_ = new vue();
   },
   $emit(event, ...args) {
-    bus_.$emit(event, ...args);
+    bus_ && bus_.$emit(event, ...args);
   },
   $on(event, callback) {
     bus_ && bus_.$on(event, callback);
   },
   $once(event, callback) {
-    bus_.$once(event, callback);
+    bus_ && bus_.$once(event, callback);
   },
   $off(event, callback) {
-    bus_.$off(event, callback);
+    bus_ && bus_.$off(event, callback);
   },
 };

components/drawer/mdc-drawer-item.vue

@@ -1,8 +1,8 @@
 <template>
-  <custom-link :link="link" 
-    class="mdc-drawer-item mdc-list-item" 
+  <custom-link :link="link"
+    class="mdc-drawer-item mdc-list-item"
     :class="[classes, itemClasses]" :style="styles"
-    @click="onClick">
+    v-on="mylisteners">
     <span class="mdc-list-item__graphic" v-if="hasStartDetail">
       <slot name="start-detail">
         <i class="material-icons" aria-hidden="true">{{startIcon}}</i>
@@ -13,55 +13,59 @@
 </template>
 
 <script>
-import {DispatchEventMixin, CustomLinkMixin} from '../base'
-import {RippleBase} from '../ripple'
+import { DispatchEventMixin, CustomLinkMixin } from '../base';
+import { RippleBase } from '../ripple';
 
 export default {
   name: 'mdc-drawer-item',
   inject: ['mdcDrawer'],
   mixins: [DispatchEventMixin, CustomLinkMixin],
   props: {
     startIcon: String,
-    temporaryClose: { 
-      type: Boolean, 
-      default: true
+    temporaryClose: {
+      type: Boolean,
+      default: true,
     },
     activated: Boolean,
-    exactActiveClass: { 
-      type: String, 
-      default: 'mdc-list-item--activated' 
-    }
+    exactActiveClass: {
+      type: String,
+      default: 'mdc-list-item--activated',
+    },
   },
-  data () {
+  data() {
     return {
       classes: {},
-      styles: {}
-    }
+      styles: {},
+    };
   },
   computed: {
-    itemClasses () {
+    mylisteners() {
+      return {
+        ...this.$listeners,
+        click: e => {
+          this.mdcDrawer.isTemporary &&
+            this.temporaryClose &&
+            this.mdcDrawer.close();
+          this.dispatchEvent(e);
+        },
+      };
+    },
+    itemClasses() {
       return {
-        'mdc-list-item--activated': this.activated
-      }
+        'mdc-list-item--activated': this.activated,
+      };
+    },
+    hasStartDetail() {
+      return this.startIcon || this.$slots['start-detail'];
     },
-    hasStartDetail () {
-      return this.startIcon || this.$slots['start-detail']
-    }
   },
-  methods: {
-    onClick (evt) {
-      this.mdcDrawer.isTemporary && this.temporaryClose 
-        && this.mdcDrawer.close()
-      this.dispatchEvent(evt)
-    }
+  mounted() {
+    this.ripple = new RippleBase(this);
+    this.ripple.init();
   },
-  mounted () {
-    this.ripple = new RippleBase(this)
-    this.ripple.init()
+  beforeDestroy() {
+    this.ripple && this.ripple.destroy();
+    this.ripple = null;
   },
-  beforeDestroy () {
-    this.ripple && this.ripple.destroy()
-    this.ripple = null
-  }
-}
+};
 </script>

components/drawer/mdc-drawer.vue

@@ -141,15 +141,15 @@ export default {
   },
   mounted() {
     if (this.toggleOn) {
-      this.toggleOnEventSource = this.toggleOnSource || eventBus;
+      this.toggleOnEventSource = this.toggleOnSource || this.$root;
       this.toggleOnEventSource.$on(this.toggleOn, this.toggle);
     }
     if (this.openOn) {
-      this.openOnEventSource = this.openOnSource || eventBus;
+      this.openOnEventSource = this.openOnSource || this.$root;
       this.openOnEventSource.$on(this.openOn, this.open);
     }
     if (this.closeOn) {
-      this.closeOnEventSource = this.closeOnSource || eventBus;
+      this.closeOnEventSource = this.closeOnSource || this.$root;
       this.closeOnEventSource.$on(this.closeOn, this.close);
     }
     media.small.addListener(this.refreshMedia);

components/fab/mdc-fab.vue

@@ -2,16 +2,16 @@
   <custom-button class="mdc-fab" 
     :class="classes" :style="styles"
     :href="href" :link="link" 
-    @click="dispatchEvent" >
+    v-on="listeners" >
     <span class="mdc-fab__icon">
       <slot>{{ icon }}</slot>
     </span>
   </custom-button>
 </template>
 
 <script>
-import {DispatchEventMixin, CustomButtonMixin} from '../base'
-import {RippleMixin} from '../ripple'
+import { DispatchEventMixin, CustomButtonMixin } from '../base';
+import { RippleMixin } from '../ripple';
 
 export default {
   name: 'mdc-fab',
@@ -20,26 +20,26 @@ export default {
     icon: String,
     mini: Boolean,
     absolute: Boolean,
-    fixed: Boolean
+    fixed: Boolean,
   },
-  data () {
+  data() {
     return {
       classes: {
         'material-icons': this.icon,
         'mdc-fab--mini': this.mini,
         'mdc-fab--absolute': this.absolute,
-        'mdc-fab--fixed': this.fixed
+        'mdc-fab--fixed': this.fixed,
       },
-      styles: {}
-    }
+      styles: {},
+    };
   },
   watch: {
-    icon () {
-      this.$set(this.classes, 'material-icons', this.icon )
+    icon() {
+      this.$set(this.classes, 'material-icons', this.icon);
     },
-    mini () {
-      this.$set(this.classes, 'mdc-fab--mini', this.mini )
-    }
-  }
-}
+    mini() {
+      this.$set(this.classes, 'mdc-fab--mini', this.mini);
+    },
+  },
+};
 </script>