From 1d334a01bd31611303a8226e35de3c367772db67 Mon Sep 17 00:00:00 2001
From: LittleLama <moi@littlelama.fr>
Date: Tue, 17 Oct 2023 13:30:54 +0200
Subject: [PATCH 1/3] Create events.js

---
 src/events.js | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/events.js

diff --git a/src/events.js b/src/events.js
new file mode 100644
index 0000000..ed6d0eb
--- /dev/null
+++ b/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;

From f6c01cfa4b9faa23a03173fed0d754d55acdab14 Mon Sep 17 00:00:00 2001
From: LittleLama <moi@littlelama.fr>
Date: Tue, 17 Oct 2023 13:32:55 +0200
Subject: [PATCH 2/3] Added events listeners, dynamic import, bundle choose

---
 src/VuePlotly.vue | 42 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/VuePlotly.vue b/src/VuePlotly.vue
index a178335..1db9577 100644
--- a/src/VuePlotly.vue
+++ b/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,7 +45,21 @@ 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);
@@ -34,7 +67,10 @@ export default {
     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() {

From a4c61daed2ee4f13a0655e51f51fbcaf99800bab Mon Sep 17 00:00:00 2001
From: LittleLama <moi@littlelama.fr>
Date: Tue, 17 Oct 2023 13:35:24 +0200
Subject: [PATCH 3/3] Added other Plotly bundles to let user chose which to
 load and use

---
 package.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 69edfe3..f525471 100644
--- a/package.json
+++ b/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",
   }
 }