Fix data table responsive issues when useDialog in components not using DataTable atom

Author: graphieros

src/components/vue-ui-chestnut.vue

@@ -37,6 +37,7 @@ import { useConfig } from "../useConfig";
 import { useLoading } from "../useLoading";
 import { usePrinter } from "../usePrinter";
 import { useNestedProp } from "../useNestedProp";
+import { useTableResponsive } from "../useTableResponsive";
 import { useUserOptionState } from "../useUserOptionState";
 import { useChartAccessibility } from "../useChartAccessibility";
 import img from "../img";
@@ -248,7 +249,7 @@ watch(FINAL_CONFIG, () => {
 }, { immediate: true });
 
 const tableContainer = ref(null)
-const isResponsive = ref(false)
+
 const breakpoint = computed(() => {
     return FINAL_CONFIG.value.table.responsiveBreakpoint
 })
@@ -546,34 +547,10 @@ function isArcBigEnough(arc) {
     return arc.proportion * 100 > FINAL_CONFIG.value.style.chart.layout.nuts.selected.labels.dataLabels.hideUnderValue;
 }
 
-const tableObserver = shallowRef(null);
-
-function observeTable() {
-    if (tableObserver.value) {
-        tableObserver.value.disconnect();
-    }
-
-    tableObserver.value = new ResizeObserver((entries) => {
-        entries.forEach(entry => {
-            isResponsive.value = entry.contentRect.width < breakpoint.value;
-        })
-    })
-
-    if (tableContainer.value) {
-        tableObserver.value.observe(tableContainer.value);
-    }
-}
-
 onMounted(() => {
     prepareChart();
 });
 
-onBeforeUnmount(() => {
-    if (tableObserver.value) {
-        tableObserver.value.disconnect();
-    }
-})
-
 const debug = computed(() => FINAL_CONFIG.value.debug);
 
 function prepareChart() {
@@ -587,7 +564,6 @@ function prepareChart() {
 
     const height = totalBranches.value * (svg.value.branchSize + svg.value.gap) + svg.value.padding.top + svg.value.padding.bottom;
     svg.value.height = height;
-    observeTable()
 }
 
 const table = computed(() => {
@@ -725,17 +701,20 @@ const tableComponent = computed(() => {
     }
 });
 
-watch(() => mutableConfig.value.showTable, v => {
+watch(() => mutableConfig.value.showTable, async (v) => {
     if (FINAL_CONFIG.value.table.show) return;
     if (v && FINAL_CONFIG.value.table.useDialog && tableUnit.value) {
-        tableUnit.value.open()
+        await nextTick();
+        tableUnit.value.open();
     } else {
         if ('close' in tableUnit.value) {
             tableUnit.value.close()
         }
     }
 })
 
+const { isResponsive } = useTableResponsive(tableContainer, breakpoint);
+
 defineExpose({
     getData,
     getImage,

src/components/vue-ui-heatmap.vue

@@ -37,6 +37,7 @@ import { useLoading } from "../useLoading";
 import { useNestedProp } from "../useNestedProp";
 import { useResponsive } from "../useResponsive";
 import { useTimeLabels } from "../useTimeLabels";
+import { useTableResponsive } from "../useTableResponsive";
 import { useUserOptionState } from "../useUserOptionState";
 import { useTimeLabelCollision } from "../useTimeLabelCollider";
 import { useChartAccessibility } from "../useChartAccessibility";
@@ -91,7 +92,6 @@ const hoveredCell = ref(undefined);
 const selectedClone = ref(null);
 const step = ref(0);
 const tableContainer = ref(null);
-const isTableResponsive = ref(false);
 const titleStep = ref(0);
 const datapoints = ref(null);
 const tableUnit = ref(null);
@@ -253,26 +253,6 @@ const breakpoint = computed(() => {
     return FINAL_CONFIG.value.table.responsiveBreakpoint
 });
 
-const tableObserver = shallowRef(null);
-
-function observeTable() {
-    if (tableObserver.value) {
-        tableObserver.value.disconnect();
-    }
-    tableObserver.value = new ResizeObserver((entries) => {
-        entries.forEach(entry => {
-            isTableResponsive.value = entry.contentRect.width < breakpoint.value;
-        });
-    });
-    tableContainer.value && tableObserver.value.observe(tableContainer.value);
-}
-
-onBeforeUnmount(() => {
-    if (tableObserver.value) {
-        tableObserver.value.disconnect();
-    }
-})
-
 const resizeObserver = ref(null);
 
 const debug = computed(() => !!FINAL_CONFIG.value.debug);
@@ -321,8 +301,6 @@ function prepareChart() {
         observedEl.value = heatmapChart.value.parentNode;
         resizeObserver.value.observe(observedEl.value);
     }
-
-    observeTable();
 }
 
 onBeforeUnmount(() => {
@@ -832,16 +810,19 @@ const tableComponent = computed(() => {
     }
 });
 
-watch(() => mutableConfig.value.showTable, v => {
+watch(() => mutableConfig.value.showTable, async (v) => {
     if (FINAL_CONFIG.value.table.show) return;
     if (v && FINAL_CONFIG.value.table.useDialog && tableUnit.value) {
+        await nextTick();
         tableUnit.value.open()
     } else {
         if ('close' in tableUnit.value) {
             tableUnit.value.close()
         }
     }
-})
+});
+
+const { isResponsive: isTableResponsive } = useTableResponsive(tableContainer, breakpoint);
 
 defineExpose({
     getData,

src/components/vue-ui-vertical-bar.vue

@@ -27,6 +27,7 @@ import { useLoading } from "../useLoading.js";
 import { usePrinter } from "../usePrinter";
 import { useResponsive } from "../useResponsive";
 import { useNestedProp } from "../useNestedProp";
+import { useTableResponsive } from "../useTableResponsive";
 import { useUserOptionState } from "../useUserOptionState";
 import { useChartAccessibility } from "../useChartAccessibility.js";
 import themes from "../themes.json";
@@ -249,7 +250,7 @@ const customPalette = computed(() => {
 })
 
 const tableContainer = ref(null)
-const isResponsive = ref(false)
+
 const breakpoint = computed(() => {
     return FINAL_CONFIG.value.table.responsiveBreakpoint
 });
@@ -347,7 +348,6 @@ function prepareChart() {
             return 1;
         }
     }).reduce((a, b) => a + b, 0);
-    observeTable();
 
     // v3
     if (!objectIsEmpty(props.dataset)) {
@@ -398,23 +398,12 @@ onBeforeUnmount(() => {
     }
 });
 
-function observeTable() {
-    if (loading.value) return;
-    const observer = new ResizeObserver((entries) => {
-        entries.forEach(entry => {
-            isResponsive.value = entry.contentRect.width < breakpoint.value;
-        })
-    })
-    observer.observe(tableContainer.value)
-}
-
 const mutableConfig = ref({
     showTable: FINAL_CONFIG.value.table.show,
     sortDesc: FINAL_CONFIG.value.style.chart.layout.bars.sort === "desc",
     showTooltip: FINAL_CONFIG.value.style.chart.tooltip.show
 });
 
-
 const isSortDown = computed(() => {
     return mutableConfig.value.sortDesc;
 })
@@ -947,7 +936,9 @@ watch(() => mutableConfig.value.showTable, v => {
             tableUnit.value.close()
         }
     }
-})
+});
+
+const { isResponsive } = useTableResponsive(tableContainer, breakpoint);
 
 defineExpose({
     autoSize, // v3

src/useTableResponsive.js

@@ -0,0 +1,32 @@
+import { ref, watch, nextTick, onBeforeUnmount } from "vue";
+
+export function useTableResponsive(elRef, breakpointRef) {
+    const isResponsive = ref(false);
+    let ro = null;
+
+    function stop() {
+        if (ro) {
+            ro.disconnect();
+            ro = null;
+        }
+    }
+
+    async function start() {
+        stop();
+        await nextTick(); // ensure Teleport content has mounted
+        const el = elRef.value;
+        if (!el) return;
+
+        ro = new ResizeObserver((entries) => {
+            const w = entries[0].contentRect.width;
+            isResponsive.value = w < breakpointRef.value;
+        });
+        ro.observe(el);
+    }
+
+    watch([elRef, breakpointRef], () => { start(); }, { immediate: true });
+
+    onBeforeUnmount(stop);
+
+    return { isResponsive, start, stop };
+}