Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 189ccc0

Browse files
Fix data table responsive issues when useDialog in components not using DataTable atom
1 parent 6683d64 commit 189ccc0

File tree

4 files changed

+50
-67
lines changed

4 files changed

+50
-67
lines changed

‎src/components/vue-ui-chestnut.vue

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { useConfig } from "../useConfig";
3737
import { useLoading } from "../useLoading";
3838
import { usePrinter } from "../usePrinter";
3939
import { useNestedProp } from "../useNestedProp";
40+
import { useTableResponsive } from "../useTableResponsive";
4041
import { useUserOptionState } from "../useUserOptionState";
4142
import { useChartAccessibility } from "../useChartAccessibility";
4243
import img from "../img";
@@ -248,7 +249,7 @@ watch(FINAL_CONFIG, () => {
248249
}, { immediate: true });
249250
250251
const tableContainer = ref(null)
251-
constisResponsive=ref(false)
252+
252253
const breakpoint = computed(() => {
253254
return FINAL_CONFIG.value.table.responsiveBreakpoint
254255
})
@@ -546,34 +547,10 @@ function isArcBigEnough(arc) {
546547
return arc.proportion * 100 > FINAL_CONFIG.value.style.chart.layout.nuts.selected.labels.dataLabels.hideUnderValue;
547548
}
548549
549-
const tableObserver = shallowRef(null);
550-
551-
function observeTable() {
552-
if (tableObserver.value) {
553-
tableObserver.value.disconnect();
554-
}
555-
556-
tableObserver.value = new ResizeObserver((entries) => {
557-
entries.forEach(entry => {
558-
isResponsive.value = entry.contentRect.width < breakpoint.value;
559-
})
560-
})
561-
562-
if (tableContainer.value) {
563-
tableObserver.value.observe(tableContainer.value);
564-
}
565-
}
566-
567550
onMounted(() => {
568551
prepareChart();
569552
});
570553
571-
onBeforeUnmount(() => {
572-
if (tableObserver.value) {
573-
tableObserver.value.disconnect();
574-
}
575-
})
576-
577554
const debug = computed(() => FINAL_CONFIG.value.debug);
578555
579556
function prepareChart() {
@@ -587,7 +564,6 @@ function prepareChart() {
587564
588565
const height = totalBranches.value * (svg.value.branchSize + svg.value.gap) + svg.value.padding.top + svg.value.padding.bottom;
589566
svg.value.height = height;
590-
observeTable()
591567
}
592568
593569
const table = computed(() => {
@@ -725,17 +701,20 @@ const tableComponent = computed(() => {
725701
}
726702
});
727703
728-
watch(() => mutableConfig.value.showTable, v => {
704+
watch(() => mutableConfig.value.showTable, async (v) => {
729705
if (FINAL_CONFIG.value.table.show) return;
730706
if (v && FINAL_CONFIG.value.table.useDialog && tableUnit.value) {
731-
tableUnit.value.open()
707+
await nextTick();
708+
tableUnit.value.open();
732709
} else {
733710
if ('close' in tableUnit.value) {
734711
tableUnit.value.close()
735712
}
736713
}
737714
})
738715
716+
const { isResponsive } = useTableResponsive(tableContainer, breakpoint);
717+
739718
defineExpose({
740719
getData,
741720
getImage,

‎src/components/vue-ui-heatmap.vue

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { useLoading } from "../useLoading";
3737
import { useNestedProp } from "../useNestedProp";
3838
import { useResponsive } from "../useResponsive";
3939
import { useTimeLabels } from "../useTimeLabels";
40+
import { useTableResponsive } from "../useTableResponsive";
4041
import { useUserOptionState } from "../useUserOptionState";
4142
import { useTimeLabelCollision } from "../useTimeLabelCollider";
4243
import { useChartAccessibility } from "../useChartAccessibility";
@@ -91,7 +92,6 @@ const hoveredCell = ref(undefined);
9192
const selectedClone = ref(null);
9293
const step = ref(0);
9394
const tableContainer = ref(null);
94-
const isTableResponsive = ref(false);
9595
const titleStep = ref(0);
9696
const datapoints = ref(null);
9797
const tableUnit = ref(null);
@@ -253,26 +253,6 @@ const breakpoint = computed(() => {
253253
return FINAL_CONFIG.value.table.responsiveBreakpoint
254254
});
255255
256-
const tableObserver = shallowRef(null);
257-
258-
function observeTable() {
259-
if (tableObserver.value) {
260-
tableObserver.value.disconnect();
261-
}
262-
tableObserver.value = new ResizeObserver((entries) => {
263-
entries.forEach(entry => {
264-
isTableResponsive.value = entry.contentRect.width < breakpoint.value;
265-
});
266-
});
267-
tableContainer.value && tableObserver.value.observe(tableContainer.value);
268-
}
269-
270-
onBeforeUnmount(() => {
271-
if (tableObserver.value) {
272-
tableObserver.value.disconnect();
273-
}
274-
})
275-
276256
const resizeObserver = ref(null);
277257
278258
const debug = computed(() => !!FINAL_CONFIG.value.debug);
@@ -321,8 +301,6 @@ function prepareChart() {
321301
observedEl.value = heatmapChart.value.parentNode;
322302
resizeObserver.value.observe(observedEl.value);
323303
}
324-
325-
observeTable();
326304
}
327305
328306
onBeforeUnmount(() => {
@@ -832,16 +810,19 @@ const tableComponent = computed(() => {
832810
}
833811
});
834812
835-
watch(() => mutableConfig.value.showTable, v => {
813+
watch(() => mutableConfig.value.showTable, async (v) => {
836814
if (FINAL_CONFIG.value.table.show) return;
837815
if (v && FINAL_CONFIG.value.table.useDialog && tableUnit.value) {
816+
await nextTick();
838817
tableUnit.value.open()
839818
} else {
840819
if ('close' in tableUnit.value) {
841820
tableUnit.value.close()
842821
}
843822
}
844-
})
823+
});
824+
825+
const { isResponsive: isTableResponsive } = useTableResponsive(tableContainer, breakpoint);
845826
846827
defineExpose({
847828
getData,

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

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { useLoading } from "../useLoading.js";
2727
import { usePrinter } from "../usePrinter";
2828
import { useResponsive } from "../useResponsive";
2929
import { useNestedProp } from "../useNestedProp";
30+
import { useTableResponsive } from "../useTableResponsive";
3031
import { useUserOptionState } from "../useUserOptionState";
3132
import { useChartAccessibility } from "../useChartAccessibility.js";
3233
import themes from "../themes.json";
@@ -249,7 +250,7 @@ const customPalette = computed(() => {
249250
})
250251
251252
const tableContainer = ref(null)
252-
constisResponsive=ref(false)
253+
253254
const breakpoint = computed(() => {
254255
return FINAL_CONFIG.value.table.responsiveBreakpoint
255256
});
@@ -347,7 +348,6 @@ function prepareChart() {
347348
return 1;
348349
}
349350
}).reduce((a, b) => a + b, 0);
350-
observeTable();
351351
352352
// v3
353353
if (!objectIsEmpty(props.dataset)) {
@@ -398,23 +398,12 @@ onBeforeUnmount(() => {
398398
}
399399
});
400400
401-
function observeTable() {
402-
if (loading.value) return;
403-
const observer = new ResizeObserver((entries) => {
404-
entries.forEach(entry => {
405-
isResponsive.value = entry.contentRect.width < breakpoint.value;
406-
})
407-
})
408-
observer.observe(tableContainer.value)
409-
}
410-
411401
const mutableConfig = ref({
412402
showTable: FINAL_CONFIG.value.table.show,
413403
sortDesc: FINAL_CONFIG.value.style.chart.layout.bars.sort === "desc",
414404
showTooltip: FINAL_CONFIG.value.style.chart.tooltip.show
415405
});
416406
417-
418407
const isSortDown = computed(() => {
419408
return mutableConfig.value.sortDesc;
420409
})
@@ -947,7 +936,9 @@ watch(() => mutableConfig.value.showTable, v => {
947936
tableUnit.value.close()
948937
}
949938
}
950-
})
939+
});
940+
941+
const { isResponsive } = useTableResponsive(tableContainer, breakpoint);
951942
952943
defineExpose({
953944
autoSize, // v3

‎src/useTableResponsive.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { ref, watch, nextTick, onBeforeUnmount } from "vue";
2+
3+
export function useTableResponsive(elRef, breakpointRef) {
4+
const isResponsive = ref(false);
5+
let ro = null;
6+
7+
function stop() {
8+
if (ro) {
9+
ro.disconnect();
10+
ro = null;
11+
}
12+
}
13+
14+
async function start() {
15+
stop();
16+
await nextTick(); // ensure Teleport content has mounted
17+
const el = elRef.value;
18+
if (!el) return;
19+
20+
ro = new ResizeObserver((entries) => {
21+
const w = entries[0].contentRect.width;
22+
isResponsive.value = w < breakpointRef.value;
23+
});
24+
ro.observe(el);
25+
}
26+
27+
watch([elRef, breakpointRef], () => { start(); }, { immediate: true });
28+
29+
onBeforeUnmount(stop);
30+
31+
return { isResponsive, start, stop };
32+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /