Added dynamic import, bundle choice & event listeners

package.json

@@ -42,6 +42,14 @@
     "vuepress": "^1.9.9"
   },
   "dependencies": {
-    "plotly.js-dist": "^2.24.2"
+    "plotly.js-dist": "^2.24.2",
+    "plotly.js-basic-dist-min": "^2.26.2",
+    "plotly.js-cartesian-dist-min": "^2.26.2",
+    "plotly.js-finance-dist-min": "^2.26.2",
+    "plotly.js-geo-dist-min": "^2.26.2",
+    "plotly.js-gl2d-dist-min": "^2.26.2",
+    "plotly.js-gl3d-dist-min": "^2.26.2",
+    "plotly.js-mapbox-dist-min": "^2.26.2",
+    "plotly.js-strict-dist-min": "^2.26.2",
   }
 }

src/VuePlotly.vue

@@ -3,8 +3,9 @@
 </template>
 
 <script>
+let Plotly;
+import events from "./events.js";
 import { v4 as uuidv4 } from 'uuid';
-import Plotly from 'plotly.js-dist';
 
 let timeOutFunctionId;
 
@@ -17,7 +18,25 @@ export default {
     };
   },
 
-  props: ['data', 'layout', 'config'],
+  props: {
+		'data' : {
+			type : Array,
+			required:false,
+		}, 
+		'layout': {
+			type : Object,
+			required:false,
+		}, 
+		'config':{
+			type : Object,
+			required:false,
+		}, 
+		'bundle':{
+			type : String,
+			default : "full",
+			required:false
+		}
+	},
 
   watch: {
     data() { this.setGraph(); },
@@ -26,15 +45,32 @@ export default {
   },
 
   mounted() {
+    switch(this.bundle){
+			case "basic" : Plotly = await import("plotly.js-basic-dist-min"); break;
+			case "cartesian" : Plotly = await import("plotly.js-cartesian-dist-min"); break;
+			case "geo" : Plotly = await import("plotly.js-geo-dist-min"); break;
+			case "gl3d" : Plotly = await import("plotly.js-gl3d-dist-min"); break;
+			case "gl2d" : Plotly = await import("plotly.js-gl2d-dist-min"); break;
+			case "mapbox" : Plotly = await import("plotly.js-mapbox-dist-min"); break;
+			case "finance" : Plotly = await import("plotly.js-finance-dist-min"); break;
+			case "strict" : Plotly = await import("plotly.js-strict-dist-min"); break;*/
+			default : Plotly = await import("plotly.js-dist");
+		}		
     this.setGraph();
+    events.forEach(evt => {
+			this.$el.on(evt.completeName, evt.handler(this));
+		});
     this.resizeObserver = new ResizeObserver(() => {
       clearTimeout(timeOutFunctionId); // debounce the reset
       timeOutFunctionId = setTimeout(this.setGraph, 100);
     });
     this.resizeObserver.observe(document.getElementById(this.plotlyId));
   },
 
-  beforeUnmount() { this.resizeObserver.disconnect(); },
+  beforeUnmount() { 
+    events.forEach(event => this.$el.removeAllListeners(event.completeName));
+    this.resizeObserver.disconnect(); 
+  },
 
   methods: {
     setGraph() {

src/events.js

@@ -0,0 +1,40 @@
+const eventsName = [
+	"AfterExport",
+	"AfterPlot",
+	"Animated",
+	"AnimatingFrame",
+	"AnimationInterrupted",
+	"AutoSize",
+	"BeforeExport",
+	"ButtonClicked",
+	"Click",
+	"ClickAnnotation",
+	"Deselect",
+	"DoubleClick",
+	"Framework",
+	"Hover",
+	"LegendClick",
+	"LegendDoubleClick",
+	"Relayout",
+	"Restyle",
+	"Redraw",
+	"Selected",
+	"Selecting",
+	"SliderChange",
+	"SliderEnd",
+	"SliderStart",
+	"Transitioning",
+	"TransitionInterrupted",
+	"Unhover"
+];
+
+const events = eventsName
+.map(evt => evt.toLocaleLowerCase())
+.map(eventName => ({
+	completeName: "plotly_" + eventName,
+	handler: context => (...args) => {			
+			context.$emit.apply(context, [eventName, ...args]);
+	}
+}));
+
+export default events;