🐛 Fix event emission for Vue 2

packages/lib/src/components/charts/lume-alluvial-diagram/lume-alluvial-diagram.vue

@@ -3,11 +3,13 @@
     v-bind="props"
     :options="getAlluvialDiagramOptions(allOptions)"
     data-j-alluvial-diagram
+    v-on="componentEventPropagator"
   >
     <template #groups="groupProps">
       <lume-alluvial-group
         v-bind="groupProps"
         :hovered-element-id="hoveredElement"
+        v-on="componentEventPropagator"
       >
         <template
           v-for="(_, name) in groupSlots"
@@ -38,6 +40,7 @@ import { toRefs, useSlots } from 'vue';
 import LumeChart from '@/components/core/lume-chart';
 import LumeAlluvialGroup from '@/components/groups/lume-alluvial-group';
 
+import { useEvents } from '@/composables/events';
 import { withDiagramProps } from '@/composables/props';
 import { AlluvialDiagramOptions, useOptions } from '@/composables/options';
 
@@ -46,12 +49,20 @@ import {
   excludeGroups,
   singleDatasetValidator,
 } from '@/utils/helpers';
+import { ChartEmits } from '@/types/events';
 import { options as defaultOptions } from './defaults';
 
 const props = defineProps({
   ...withDiagramProps<AlluvialDiagramOptions>(singleDatasetValidator),
 });
 
+// https://github.com/vuejs/core/issues/4294#issuecomment-1480392140
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Emits extends ChartEmits {}
+const emit = defineEmits<Emits>();
+
+const { componentEventPropagator } = useEvents(emit);
+
 const slots = excludeGroups(useSlots());
 const groupSlots = excludeChartSlots(useSlots());
 

packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.vue

@@ -3,6 +3,7 @@
     :is="component"
     v-bind="{ ...props, ...$attrs }"
     :options="getBarChartOptions(options)"
+    v-on="componentEventPropagator"
   >
     <template
       v-for="(_, name) in slots"
@@ -26,15 +27,17 @@ enum TYPES {
 <script setup lang="ts">
 import { computed, defineAsyncComponent, PropType, useSlots } from 'vue';
 
-import { excludeGroups, singleDatasetValidator } from '@/utils/helpers';
+import { useEvents } from '@/composables/events';
 import { withChartProps } from '@/composables/props';
 import {
   BarChartOptions,
   Options,
   TooltipOptions,
 } from '@/composables/options';
 
+import { ChartEmits } from '@/types/events';
 import { ORIENTATIONS } from '@/utils/constants';
+import { excludeGroups, singleDatasetValidator } from '@/utils/helpers';
 
 const LumeSingleBarChart = defineAsyncComponent(
   () => import('@/components/charts/lume-single-bar-chart')
@@ -60,6 +63,13 @@ const props = defineProps({
   },
 });
 
+// https://github.com/vuejs/core/issues/4294#issuecomment-1480392140
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Emits extends ChartEmits {}
+const emit = defineEmits<Emits>();
+
+const { componentEventPropagator } = useEvents(emit);
+
 const slots = excludeGroups(useSlots());
 
 function getBarChartOptions(options: Options) {

packages/lib/src/components/charts/lume-grouped-bar-chart/lume-grouped-bar-chart.vue

@@ -4,11 +4,13 @@
     chart-type="grouped-bar"
     :options="allOptions"
     data-j-grouped-bar-chart
+    v-on="componentEventPropagator"
   >
     <template #groups="groupProps">
       <lume-bar-group
         v-bind="groupProps"
         type="grouped"
+        v-on="componentEventPropagator"
       />
     </template>
     <template
@@ -29,18 +31,27 @@ import { computed, ComputedRef, toRefs, useSlots } from 'vue';
 import LumeChart from '@/components/core/lume-chart';
 import LumeBarGroup from '@/components/groups/lume-bar-group';
 
+import { useEvents } from '@/composables/events';
 import { BarChartOptions, useOptions } from '@/composables/options';
 import { withChartProps } from '@/composables/props';
 
+import { ChartEmits } from '@/types/events';
 import { ORIENTATIONS } from '@/utils/constants';
+import { excludeGroups } from '@/utils/helpers';
 
 import { options as defaultOptions } from './defaults';
-import { excludeGroups } from '@/utils/helpers';
 
 const props = defineProps({
   ...withChartProps<BarChartOptions>(),
 });
 
+// https://github.com/vuejs/core/issues/4294#issuecomment-1480392140
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Emits extends ChartEmits {}
+const emit = defineEmits<Emits>();
+
+const { componentEventPropagator } = useEvents(emit);
+
 const slots = excludeGroups(useSlots());
 
 const { orientation, options } = toRefs(props);

packages/lib/src/components/charts/lume-line-chart/lume-line-chart.vue

@@ -4,9 +4,13 @@
     chart-type="line"
     :options="allOptions"
     data-j-lume-line-chart
+    v-on="componentEventPropagator"
   >
     <template #groups="groupProps">
-      <lume-line-group v-bind="groupProps" />
+      <lume-line-group
+        v-bind="groupProps"
+        v-on="componentEventPropagator"
+      />
     </template>
     <template
       v-for="(_, name) in slots"
@@ -26,16 +30,26 @@ import { toRefs, useSlots } from 'vue';
 import LumeChart from '@/components/core/lume-chart';
 import LumeLineGroup from '@/components/groups/lume-line-group';
 
+import { useEvents } from '@/composables/events';
 import { LineChartOptions, useOptions } from '@/composables/options';
 import { withChartProps } from '@/composables/props';
 
-import { options as defaultOptions } from './defaults';
+import { ChartEmits } from '@/types/events';
 import { excludeGroups } from '@/utils/helpers';
 
+import { options as defaultOptions } from './defaults';
+
 const props = defineProps({
   ...withChartProps<LineChartOptions>(null, false),
 });
 
+// https://github.com/vuejs/core/issues/4294#issuecomment-1480392140
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Emits extends ChartEmits {}
+const emit = defineEmits<Emits>();
+
+const { componentEventPropagator } = useEvents(emit);
+
 const slots = excludeGroups(useSlots());
 
 const { options } = toRefs(props);

packages/lib/src/components/charts/lume-single-bar-chart/lume-single-bar-chart.vue

@@ -4,11 +4,13 @@
     chart-type="single-bar"
     :options="allOptions"
     data-j-single-bar-chart
+    v-on="componentEventPropagator"
   >
     <template #groups="groupProps">
       <lume-bar-group
         v-bind="groupProps"
         :orientation="orientation"
+        v-on="componentEventPropagator"
       />
     </template>
     <template
@@ -29,9 +31,11 @@ import { computed, toRefs, useSlots } from 'vue';
 import LumeChart from '@/components/core/lume-chart';
 import LumeBarGroup from '@/components/groups/lume-bar-group';
 
+import { useEvents } from '@/composables/events';
 import { BarChartOptions, useOptions } from '@/composables/options';
 import { withChartProps } from '@/composables/props';
 
+import { ChartEmits } from '@/types/events';
 import { excludeGroups, singleDatasetValidator } from '@/utils/helpers';
 import { ORIENTATIONS } from '@/utils/constants';
 
@@ -41,6 +45,13 @@ const props = defineProps({
   ...withChartProps<BarChartOptions>(singleDatasetValidator),
 });
 
+// https://github.com/vuejs/core/issues/4294#issuecomment-1480392140
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Emits extends ChartEmits {}
+const emit = defineEmits<Emits>();
+
+const { componentEventPropagator } = useEvents(emit);
+
 const slots = excludeGroups(useSlots());
 
 const { orientation, options } = toRefs(props);

packages/lib/src/components/charts/lume-sparkline-chart/lume-sparkline-chart.vue

@@ -4,6 +4,7 @@
     chart-type="line"
     :options="getSparklineOptions(allOptions)"
     :x-scale="xScaleGenerator"
+    v-on="componentEventPropagator"
   >
     <template #groups="groupProps">
       <path
@@ -23,6 +24,7 @@
       <lume-line-group
         v-bind="groupProps"
         :with-points="false"
+        v-on="componentEventPropagator"
       />
     </template>
     <template
@@ -45,6 +47,7 @@ import LumeChart from '@/components/core/lume-chart';
 import LumeLineGroup from '@/components/groups/lume-line-group';
 
 import { useBase, withBase } from '@/composables/base';
+import { useEvents } from '@/composables/events';
 import {
   LineChartOptions,
   Options,
@@ -55,6 +58,7 @@ import { useLineNullValues } from '@/composables/line-null-values';
 import { useSparklineArea } from './composables/sparkline-area';
 
 import { Data } from '@/types/dataset';
+import { ChartEmits } from '@/types/events';
 import { ContainerSize } from '@/types/size';
 
 import { options as defaultOptions } from './defaults';
@@ -65,6 +69,13 @@ const props = defineProps({
   ...withOptions<LineChartOptions>(),
 });
 
+// https://github.com/vuejs/core/issues/4294#issuecomment-1480392140
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Emits extends ChartEmits {}
+const emit = defineEmits<Emits>();
+
+const { componentEventPropagator } = useEvents(emit);
+
 const slots = excludeGroups(useSlots());
 
 const { data, options } = toRefs(props);

packages/lib/src/components/charts/lume-stacked-bar-chart/lume-stacked-bar-chart.vue

@@ -6,11 +6,13 @@
     :x-scale="stackedXScaleGenerator"
     :y-scale="stackedYScaleGenerator"
     data-j-stacked-bar-chart
+    v-on="componentEventPropagator"
   >
     <template #groups="groupProps">
       <lume-bar-group
         v-bind="groupProps"
         type="stacked"
+        v-on="componentEventPropagator"
       />
     </template>
     <template
@@ -32,20 +34,29 @@ import LumeChart from '@/components/core/lume-chart';
 import LumeBarGroup from '@/components/groups/lume-bar-group';
 
 import { useBase } from '@/composables/base';
+import { useEvents } from '@/composables/events';
 import { BarChartOptions, useOptions } from '@/composables/options';
 import { withChartProps } from '@/composables/props';
 import { useBarMixin } from '@/components/groups/lume-bar-group/composables/bar-mixin';
 import { useStackedAxes } from '@/components/groups/lume-bar-group/composables/stacked-mixin';
 
+import { ChartEmits } from '@/types/events';
 import { ORIENTATIONS } from '@/utils/constants';
+import { excludeGroups } from '@/utils/helpers';
 
 import { options as defaultOptions } from './defaults';
-import { excludeGroups } from '@/utils/helpers';
 
 const props = defineProps({
   ...withChartProps<BarChartOptions>(),
 });
 
+// https://github.com/vuejs/core/issues/4294#issuecomment-1480392140
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Emits extends ChartEmits {}
+const emit = defineEmits<Emits>();
+
+const { componentEventPropagator } = useEvents(emit);
+
 const slots = excludeGroups(useSlots());
 
 const { data, orientation, options } = toRefs(props);

packages/lib/src/composables/events.ts

@@ -0,0 +1,46 @@
+const CHART_EVENTS = [
+  'axis-click',
+  'axis-mouseenter',
+  'axis-mouseleave',
+
+  'rendered',
+  'resize',
+
+  'data-changed',
+  'labels-changed',
+
+  'chart-click',
+  'chart-mouseenter',
+  'chart-mouseleave',
+
+  'legend-click',
+  'legend-mouseenter',
+  'legend-mouseleave',
+
+  'bar-click',
+  'line-click',
+  'point-click',
+  'node-click',
+  'node-mouseenter',
+  'node-mouseleave',
+  'link-click',
+  'link-mouseenter',
+  'link-mouseleave',
+
+  'tooltip-opened',
+  'tooltip-moved',
+  'tooltip-closed',
+];
+
+// Used to propagate events from the top-most component (needed for Vue 2)
+export const useEvents = (emit: (e: string, p: any) => void) => {
+  const componentEventPropagator =
+    __VUE_VERSION__ === 2
+      ? CHART_EVENTS.reduce((obj, event) => {
+        obj[event] = (payload) => emit(event, payload);
+        return obj;
+      }, {})
+      : {};
+
+  return { componentEventPropagator };
+};

packages/lib/typings/vue-shims.d.ts

@@ -7,3 +7,5 @@ declare module '*.scss' {
   const content: Record<string, string>;
   export default content;
 }
+
+declare const __VUE_VERSION__: 2 | 3;

packages/vue2/vite.config.ts

@@ -4,6 +4,9 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 import vue from '@vitejs/plugin-vue2';
 
 export default defineConfig({
+  define: {
+    __VUE_VERSION__: 2,
+  },
   build: {
     lib: {
       entry: {

packages/vue3/vite.config.ts

@@ -4,6 +4,9 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
+  define: {
+    __VUE_VERSION__: 3,
+  },
   build: {
     lib: {
       entry: {