From 900348a157e3ad992a301fa1f857f0afe9c25935 Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com> Date: Thu, 9 May 2024 14:39:13 +0200 Subject: [PATCH 1/3] Updates to dialog component --- .../src/components/layout/Dialog.vue | 32 ++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue index 7f1f453a33..73d4f413de 100644 --- a/packages/ui-components/src/components/layout/Dialog.vue +++ b/packages/ui-components/src/components/layout/Dialog.vue @@ -11,11 +11,10 @@ leave-to="opacity-0" >
- -
+
{ scrolledFromTop.value = scrollTop > 0 scrolledToBottom.value = scrollTop + offsetHeight >= scrollHeight }, 60) + +// Toggle 'dialog-open' class on to prevent scroll jumping and disable background scroll. +// This maintains user scroll position when Headless UI dialogs are activated. +watch(open, (newValue) => { + const html = document.documentElement + if (newValue) { + html.classList.add('dialog-open') + } else { + html.classList.remove('dialog-open') + } +}) + +// Clean up when the component unmounts +onUnmounted(() => { + document.documentElement.classList.remove('dialog-open') +}) + + From cd7faf0f3448f8cce0432b58aa9a1e75c4639ea0 Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com> Date: Mon, 13 May 2024 12:38:45 +0200 Subject: [PATCH 2/3] Fix build issues --- .../src/components/layout/Dialog.vue | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue index fc74d3af72..0a2b083e5d 100644 --- a/packages/ui-components/src/components/layout/Dialog.vue +++ b/packages/ui-components/src/components/layout/Dialog.vue @@ -95,6 +95,7 @@ import { FormButton } from '~~/src/lib' import { XMarkIcon } from '@heroicons/vue/24/outline' import { computed, ref, useSlots, watch, onUnmounted } from 'vue' import { throttle, noop } from 'lodash' +import { isClient } from '@vueuse/core' type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl' @@ -192,17 +193,21 @@ const onScroll = throttle((e: Event) => { // Toggle 'dialog-open' class on to prevent scroll jumping and disable background scroll. // This maintains user scroll position when Headless UI dialogs are activated. watch(open, (newValue) => { - const html = document.documentElement - if (newValue) { - html.classList.add('dialog-open') - } else { - html.classList.remove('dialog-open') + if (isClient) { + const html = document.documentElement + if (newValue) { + html.classList.add('dialog-open') + } else { + html.classList.remove('dialog-open') + } } }) // Clean up when the component unmounts onUnmounted(() => { - document.documentElement.classList.remove('dialog-open') + if (isClient) { + document.documentElement.classList.remove('dialog-open') + } }) From 38baf8a70852b4fbf2dbecc327b0ee9655d36233 Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com> Date: Mon, 13 May 2024 12:49:49 +0200 Subject: [PATCH 3/3] Fix build --- packages/ui-components/src/components/layout/Dialog.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue index 0a2b083e5d..d0391098dd 100644 --- a/packages/ui-components/src/components/layout/Dialog.vue +++ b/packages/ui-components/src/components/layout/Dialog.vue @@ -211,11 +211,11 @@ onUnmounted(() => { }) -