fix: closing nested dialog also allow body to be scrollable (#494)

packages/radix-vue/src/Dialog/DialogOverlay.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { PrimitiveProps } from '@/Primitive'
+import DialogOverlayImpl, { type DialogOverlayImplProps } from './DialogOverlayImpl.vue'
 
-export interface DialogOverlayProps extends PrimitiveProps {
+export interface DialogOverlayProps extends DialogOverlayImplProps {
   /**
    * Used to force mounting when more control is needed. Useful when
    * controlling animation with Vue animation libraries.
@@ -11,35 +11,17 @@ export interface DialogOverlayProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { watch } from 'vue'
 import { injectDialogRootContext } from './DialogRoot.vue'
-import { Primitive } from '@/Primitive'
 import { Presence } from '@/Presence'
-import { useBodyScrollLock } from '@/shared'
 
 defineProps<DialogOverlayProps>()
 const rootContext = injectDialogRootContext()
-
-const isLocked = useBodyScrollLock()
-watch(
-  rootContext.open,
-  isOpen => (isLocked.value = isOpen),
-  { immediate: true },
-)
 </script>
 
 <template>
   <Presence v-if="rootContext?.modal.value" :present="forceMount || rootContext.open.value">
-    <Primitive
-      v-bind="$attrs"
-      :as="as"
-      :as-child="asChild"
-      :data-state="rootContext.open.value ? 'open' : 'closed'"
-      style="pointer-events: auto"
-      data-aria-hidden="true"
-      aria-hidden="true"
-    >
+    <DialogOverlayImpl :as="as" :as-child="asChild" v-bind="$attrs">
       <slot />
-    </Primitive>
+    </DialogOverlayImpl>
   </Presence>
 </template>

packages/radix-vue/src/Dialog/DialogOverlayImpl.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface DialogOverlayImplProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { injectDialogRootContext } from './DialogRoot.vue'
+import { Primitive } from '@/Primitive'
+import { useBodyScrollLock } from '@/shared'
+
+defineProps<DialogOverlayImplProps>()
+const rootContext = injectDialogRootContext()
+
+useBodyScrollLock(true)
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
+    style="pointer-events: auto"
+    data-aria-hidden="true"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>