Fix compatibility with future VueJS versions #65

Author: QuentiumYT

package-lock.json

@@ -92,6 +92,6 @@
     "standard": "^17.1.2",
     "storybook": "^10.3.5",
     "vite": "^8.0.8",
-    "vue": "3.5.29"
+    "vue": "^3.5.32"
   }
 }

package.json

@@ -1,7 +1,8 @@
 <template>
   <Teleport
-    :disabled="!$el?.ownerDocument.getElementById(databoxId) || (!databoxId && !databoxType && databoxSource === 'default')"
+    v-if="!databoxId || targetReady"
     :to="'#' + databoxId + '-' + databoxType + '-' + databoxSource"
+    :disabled="!databoxId"
   >
     <div
       :ref="widgetId"
@@ -192,6 +193,7 @@ export default {
       isSubChart: false,
       isSubLevel: false,
       subTitle: null,
+      targetReady: false,
     };
   },
   watch: {
@@ -207,23 +209,50 @@ export default {
       deep: true,
       immediate: true,
     },
+    targetReady(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.resetData();
+          this.createChart();
+        });
+      }
+    },
   },
   created() {
     configureChartDefaults();
     this.chartId = `dsfr-chart-${Math.floor(Math.random() * 1000)}`;
     this.widgetId = `dsfr-widget-${Math.floor(Math.random() * 1000)}`;
   },
   mounted() {
-    this.resetData();
-    this.createChart();
+    if (!this.databoxId || !this.databoxType) {
+      this.resetData();
+      this.createChart();
+    } else {
+      const targetId = `${this.databoxId}-${this.databoxType}-${this.databoxSource}`;
+      if (document.getElementById(targetId)) {
+        this.targetReady = true;
+      } else {
+        this._targetObserver = new MutationObserver(() => {
+          if (document.getElementById(targetId)) {
+            this._targetObserver.disconnect();
+            this.targetReady = true;
+        }
+        });
+        this._targetObserver.observe(document.body, { childList: true, subtree: true });
+      }
+    }
 
-    const element = document.documentElement;
-    element.addEventListener('dsfr.theme', (e) => {
+    document.documentElement.addEventListener('dsfr.theme', (e) => {
       if (this.chartId !== '') {
         this.changeColors(e.detail.theme);
       }
     });
   },
+  beforeUnmount() {
+    if (this._targetObserver) {
+      this._targetObserver.disconnect();
+    }
+  },
   methods: {
     resetData() {
       if (this.chart) {

src/components/BarChart.vue

@@ -1,7 +1,8 @@
 <template>
   <Teleport
-    :disabled="!$el?.ownerDocument.getElementById(databoxId) || (!databoxId && !databoxType && databoxSource === 'default')"
+    v-if="!databoxId || targetReady"
     :to="'#' + databoxId + '-' + databoxType + '-' + databoxSource"
+    :disabled="!databoxId"
   >
     <div
       :ref="widgetId"
@@ -235,6 +236,7 @@ export default {
       colorBarParse: [],
       colorHover: [],
       colorBarHover: [],
+      targetReady: false,
     };
   },
   watch: {
@@ -250,23 +252,50 @@ export default {
       deep: true,
       immediate: true,
     },
+    targetReady(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.resetData();
+          this.createChart();
+        });
+      }
+    },
   },
   created() {
     configureChartDefaults();
     this.chartId = `dsfr-chart-${Math.floor(Math.random() * 1000)}`;
     this.widgetId = `dsfr-widget-${Math.floor(Math.random() * 1000)}`;
   },
   mounted() {
-    this.resetData();
-    this.createChart();
+    if (!this.databoxId || !this.databoxType) {
+      this.resetData();
+      this.createChart();
+    } else {
+      const targetId = `${this.databoxId}-${this.databoxType}-${this.databoxSource}`;
+      if (document.getElementById(targetId)) {
+        this.targetReady = true;
+      } else {
+        this._targetObserver = new MutationObserver(() => {
+          if (document.getElementById(targetId)) {
+            this._targetObserver.disconnect();
+            this.targetReady = true;
+        }
+        });
+        this._targetObserver.observe(document.body, { childList: true, subtree: true });
+      }
+    }
 
-    const element = document.documentElement;
-    element.addEventListener('dsfr.theme', (e) => {
+    document.documentElement.addEventListener('dsfr.theme', (e) => {
       if (this.chartId !== '') {
         this.changeColors(e.detail.theme);
       }
     });
   },
+  beforeUnmount() {
+    if (this._targetObserver) {
+      this._targetObserver.disconnect();
+    }
+  },
   methods: {
     resetData() {
       if (this.chart) {