✨ Add event bus to events composable (for Vue 2 internal events)

.eslintrc.cjs

@@ -31,4 +31,7 @@ module.exports = {
   env: {
     es6: true,
   },
+  globals: {
+    __VUE_VERSION__: 'readonly',
+  },
 };

packages/lib/src/components/core/lume-chart/lume-chart.vue

@@ -248,6 +248,7 @@ import LumeTooltip from '@/components/core/lume-tooltip';
 import LumeOverlayGroup from '@/components/groups/lume-overlay-group';
 
 import { useBase } from '@/composables/base';
+import { useEvents } from '@/composables/events';
 import { withChartProps } from '@/composables/props';
 import { isScale, Scale, useBaseScales } from '@/composables/scales';
 import { ChartOptions, useOptions } from '@/composables/options';
@@ -303,6 +304,8 @@ const { allOptions } = useOptions<ChartOptions>(options);
 const { internalData, computedLabels, containerSize, updateSize, chartID } =
   useBase(data, labels, color, allOptions, orientation);
 
+const { busListen } = useEvents(emit, chartID);
+
 const { xScale, yScale } = useBaseScales(
   internalData,
   computedLabels,
@@ -474,11 +477,15 @@ watch(
   { flush: 'post' }
 );
 
-onMounted(() => {
+onMounted(async () => {
   emit('rendered');
   if (!slots.groups) {
     console.error('"groups" `<slot>` must have content.');
   }
+
+  if (__VUE_VERSION__ === 2) {
+    await busListen('lume__internal--hover', handleInternalHover);
+  }
 });
 
 provide('chartID', chartID);

packages/lib/src/components/groups/lume-bar-group/lume-bar-group.vue

@@ -6,7 +6,7 @@
     <g
       v-for="(barGroup, groupIndex) in groupedData"
       :key="groupIndex"
-      @mouseenter="emit('lume__internal--hover', groupIndex)"
+      @mouseenter="handleInternalHover(groupIndex)"
     >
       <lume-bar
         v-for="(barValue, index) in barGroup"
@@ -35,10 +35,11 @@ const MIXIN_MAP = {
 </script>
 
 <script setup lang="ts">
-import { computed, PropType, toRefs } from 'vue';
+import { computed, inject, PropType, toRefs } from 'vue';
 
 import LumeBar from '@/components/core/lume-bar';
 
+import { useEvents } from '@/composables/events';
 import { withGroupProps } from '@/composables/group-props';
 import {
   getBarChartType,
@@ -85,6 +86,10 @@ const {
   classList,
 } = toRefs(props);
 
+const chartID = inject<string>('chartID');
+
+const { busEmit } = useEvents(emit, chartID);
+
 const { groupedData } = useBarMixin(data);
 
 const { barXScale, barYScale } = useBarScales(xScale, yScale, orientation);
@@ -112,4 +117,12 @@ const computedTransition = computed(() => {
   if (!transition.value) return;
   return orientation.value === ORIENTATIONS.HORIZONTAL ? 'width' : 'height';
 });
+
+async function handleInternalHover(groupIndex: number) {
+  emit('lume__internal--hover', groupIndex);
+
+  if (__VUE_VERSION__ === 2) {
+    await busEmit('lume__internal--hover', groupIndex);
+  }
+}
 </script>

packages/lib/src/composables/events.ts

@@ -32,8 +32,47 @@ const CHART_EVENTS = [
   'tooltip-closed',
 ];
 
+interface EventBusInstance {
+  $on: (
+    event: string | Array<string>,
+    fn: (...args: Array<unknown>) => void
+  ) => void;
+  $emit: (event: string, ...args: Array<unknown>) => void;
+}
+
+interface EventBusInstanceConstructor {
+  new (): EventBusInstance;
+}
+
+let eventBus: EventBusInstance | null = null;
+
 // Used to propagate events from the top-most component (needed for Vue 2)
-export const useEvents = (emit: (e: string, p: any) => void) => {
+export const useEvents = (
+  emit: (e: string, p: unknown) => void,
+  chartID: string
+) => {
+  async function initEventBus() {
+    if (__VUE_VERSION__ === 3) return null;
+
+    const Vue = (await import('vue')).default;
+    eventBus = new (Vue as unknown as EventBusInstanceConstructor)();
+  }
+
+  async function busEmit(eventName: string, ...args: Array<unknown>) {
+    if (!eventBus) await initEventBus();
+
+    eventBus.$emit(`${chartID}_${eventName}`, ...args);
+  }
+
+  async function busListen(
+    eventName: string,
+    listener: (...args: Array<unknown>) => void
+  ) {
+    if (!eventBus) await initEventBus();
+
+    eventBus.$on(`${chartID}_${eventName}`, listener);
+  }
+
   const componentEventPropagator =
     __VUE_VERSION__ === 2
       ? CHART_EVENTS.reduce((obj, event) => {
@@ -42,5 +81,5 @@ export const useEvents = (emit: (e: string, p: any) => void) => {
       }, {})
       : {};
 
-  return { componentEventPropagator };
+  return { componentEventPropagator, busEmit, busListen };
 };