Merge pull request #227 from graphieros/trunk

graphieros · web-flow · commit 01722c0fe5a7 · 2025-07-12T07:40:17.000+02:00
#221 #222 #225
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.15.2",
+  "version": "2.15.3-beta.1",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
diff --git a/src/atoms/UserOptions.vue b/src/atoms/UserOptions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed } from "vue";
+import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
 import vClickOutside from '../directives/vClickOutside';
 import BaseIcon from "./BaseIcon.vue";
 import img from "../img";
@@ -255,39 +255,35 @@ function toggleTooltip() {
     }
 }
 
-const isFullscreen = ref(false);
+const _isFullscreen = computed({
+    get: () => props.isFullscreen,
+    set: (val) => emit('toggleFullscreen', val)
+});
+
+function toggleFullscreen() {
+    if (!props.chartElement) return;
+
+    const next = !props.isFullscreen;
+    _isFullscreen.value = next;
 
-function toggleFullscreen(state) {
-    if (props.callbacks.fullscreen) {
-        props.callbacks.fullscreen();
+    if (next) {
+        props.chartElement.requestFullscreen()
     } else {
-        if(!props.chartElement) return;
-        if(state === "in") {
-            isFullscreen.value = true;
-            props.chartElement.requestFullscreen();
-            emit('toggleFullscreen', true);
-        }else {
-            isFullscreen.value = false;
-            document && document.exitFullscreen();
-            emit('toggleFullscreen', false);
-        }
+        document.exitFullscreen();
     }
 }
 
-function fullscreenchanged(_event) {
-    if (document.fullscreenElement) {
-        isFullscreen.value = true;
-    } else {
-        isFullscreen.value = false;
-    }
+function fullscreenchanged() {
+    const flag = !!document.fullscreenElement;
+    emit('toggleFullscreen', flag);
 }
 
 onMounted(() => {
-    document.addEventListener('fullscreenchange', fullscreenchanged)
+    document.addEventListener('fullscreenchange', fullscreenchanged);
 })
 
 onBeforeUnmount(() => {
-    document.removeEventListener('fullscreenchange', fullscreenchanged)
+    document.removeEventListener('fullscreenchange', fullscreenchanged);
 })
 
 const isDesktop = ref(window.innerWidth > 600)
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
@@ -287,8 +287,8 @@
                 <!-- HIGHLIGHT AREAS -->
                 <g v-for="oneArea in highlightAreas">
                     <template v-if="oneArea.show">
+                        <!-- HIGHLIGHT AREA FILLED RECT UNITS -->
                         <g v-for="(_, i) in oneArea.span">
-                            <!-- HIGHLIGHT AREA FILLED RECT UNITS -->
                             <rect
                                 data-cy="highlight-area"
                                 :style="{ 
@@ -301,8 +301,9 @@
                                 :width="drawingArea.width / maxSeries < 0 ? 0.00001 : drawingArea.width / maxSeries"
                                 :fill="setOpacity(oneArea.color, oneArea.opacity)"
                             />
-
-                            <!-- HIGHLIGHT AREA CAPTION -->
+                        </g>
+                        <!-- HIGHLIGHT AREA CAPTION -->
+                        <g v-for="(_, i) in oneArea.span">
                             <foreignObject v-if="oneArea.caption.text && i === 0"
                                 :x="drawingArea.left + (drawingArea.width / maxSeries) * ((oneArea.from + i) - slicer.start) - (oneArea.caption.width === 'auto' ? 0 : oneArea.caption.width / 2 - (drawingArea.width / maxSeries) * oneArea.span / 2)"
                                 :y="drawingArea.top + oneArea.caption.offsetY"
@@ -3269,23 +3270,23 @@ export default {
                 // Title height to substract
                 let title = null;
                 let titleHeight = 0;
-                if (this.FINAL_CONFIG.chart.title.show) {
+                if (this.FINAL_CONFIG.chart.title.show && this.$refs.chartTitle) {
                     title = this.$refs.chartTitle;
                     titleHeight = title.getBoundingClientRect().height;
                 }
 
                 // Slicer height to substract
                 let slicer = null;
                 let slicerHeight = 0;
-                if (this.FINAL_CONFIG.chart.zoom.show && this.maxX > 6 && this.isDataset) {
+                if (this.FINAL_CONFIG.chart.zoom.show && this.maxX > 6 && this.isDataset && this.$refs.chartSlicer && this.$refs.chartSlicer.$el) {
                     slicer = this.$refs.chartSlicer.$el;
                     slicerHeight = slicer.getBoundingClientRect().height;
                 }
 
                 // Legend height to substract
                 let legend = null;
                 let legendHeight = 0
-                if (this.FINAL_CONFIG.chart.legend.show) {
+                if (this.FINAL_CONFIG.chart.legend.show && this.$refs.chartLegend) {
                     legend = this.$refs.chartLegend;
                     legendHeight = legend.getBoundingClientRect().height;
                 }
@@ -3302,27 +3303,54 @@ export default {
                     noTitleHeight = this.$refs.noTitle.getBoundingClientRect().height;
                 }
 
-                this.height = height - titleHeight - legendHeight - slicerHeight - sourceHeight - noTitleHeight;
+                this.height = height 
+                    - titleHeight 
+                    - legendHeight 
+                    - slicerHeight 
+                    - sourceHeight 
+                    - noTitleHeight
+                    - 12;
+
                 this.width = width;
                 this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`;
                 this.convertSizes();
 
                 const ro = new ResizeObserver((entries) => {
                     for(const entry of entries) {
-                        if (this.$refs.chartTitle) {
+                        if (this.FINAL_CONFIG.chart.title.show && this.$refs.chartTitle) {
                             titleHeight = this.$refs.chartTitle.getBoundingClientRect().height;
+                        } else {
+                            titleHeight = 0;
                         }
                         if (this.$refs.chartSlicer && this.$refs.chartSlicer.$el) {
                             slicerHeight = this.$refs.chartSlicer.$el.getBoundingClientRect().height;
+                        } else {
+                            slicerHeight = 0;
                         }
                         if (this.$refs.chartLegend) {
                             legendHeight = this.$refs.chartLegend.getBoundingClientRect().height;
+                        } else {
+                            legendHeight = 0;
                         }
                         if (this.$refs.source) {
                             sourceHeight = this.$refs.source.getBoundingClientRect().height;
+                        } else {
+                            sourceHeight = 0;
+                        }
+                        if (this.$refs.noTitle) {
+                            noTitleHeight = this.$refs.noTitle.getBoundingClientRect().height;
+                        } else {
+                            noTitleHeight = 0;
                         }
                         requestAnimationFrame(() => {
-                            this.height = entry.contentBoxSize[0].blockSize - titleHeight - legendHeight - slicerHeight - sourceHeight - 24;
+                            this.height = entry.contentRect.height
+                                - titleHeight 
+                                - legendHeight 
+                                - slicerHeight 
+                                - sourceHeight 
+                                - noTitleHeight
+                                - 12
+
                             this.width = entry.contentBoxSize[0].inlineSize;
                             this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`;
                             this.convertSizes();
diff --git a/src/useResponsive.js b/src/useResponsive.js
@@ -23,22 +23,35 @@ export function useResponsive({
     
         if (title) {
             heightTitle = title.getBoundingClientRect().height;
+        } else {
+            heightTitle = 0;
         }
         if (slicer) {
             heightSlicer = slicer.getBoundingClientRect().height;
+        } else {
+            heightSlicer = 0;
         }
         if (legend) {
             heightLegend = legend.getBoundingClientRect().height;
+        } else {
+            heightLegend = 0;
         }
         if (source) {
             heightSource = source.getBoundingClientRect().height;
+        } else {
+            heightSource = 0;
         }
         if (noTitle) {
             heightNoTitle = noTitle.getBoundingClientRect().height;
+        } else {
+            heightNoTitle = 0;
         }
         if (padding) {
             heightPadding = padding.top + padding.bottom;
             widthPadding = padding.right + padding.left;
+        } else {
+            heightPadding = 0;
+            widthPadding = 0;
         }
     
         height = parentHeight 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-data-ui",`
`3`	`3`	`"private": false,`
`4`		`- "version": "2.15.2",`
	`4`	`+ "version": "2.15.3-beta.1",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",`
`7`	`7`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -23,22 +23,35 @@ export function useResponsive({`
`23`	`23`
`24`	`24`	`if (title) {`
`25`	`25`	`heightTitle = title.getBoundingClientRect().height;`
	`26`	`+ } else {`
	`27`	`+ heightTitle = 0;`
`26`	`28`	`}`
`27`	`29`	`if (slicer) {`
`28`	`30`	`heightSlicer = slicer.getBoundingClientRect().height;`
	`31`	`+ } else {`
	`32`	`+ heightSlicer = 0;`
`29`	`33`	`}`
`30`	`34`	`if (legend) {`
`31`	`35`	`heightLegend = legend.getBoundingClientRect().height;`
	`36`	`+ } else {`
	`37`	`+ heightLegend = 0;`
`32`	`38`	`}`
`33`	`39`	`if (source) {`
`34`	`40`	`heightSource = source.getBoundingClientRect().height;`
	`41`	`+ } else {`
	`42`	`+ heightSource = 0;`
`35`	`43`	`}`
`36`	`44`	`if (noTitle) {`
`37`	`45`	`heightNoTitle = noTitle.getBoundingClientRect().height;`
	`46`	`+ } else {`
	`47`	`+ heightNoTitle = 0;`
`38`	`48`	`}`
`39`	`49`	`if (padding) {`
`40`	`50`	`heightPadding = padding.top + padding.bottom;`
`41`	`51`	`widthPadding = padding.right + padding.left;`
	`52`	`+ } else {`
	`53`	`+ heightPadding = 0;`
	`54`	`+ widthPadding = 0;`
`42`	`55`	`}`
`43`	`56`
`44`	`57`	`height = parentHeight`