feat: useBodyScrollLock

Author: teleskop150750

packages/vue-primitives/src/dialog/DialogOverlay.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DialogOverlayProps } from './DialogOverlay.ts'
-import { shallowRef } from 'vue'
-import { useForwardElement } from '../hooks/index.ts'
+import { onWatcherCleanup, shallowRef, watchEffect } from 'vue'
+import { useBodyScrollLock, useForwardElement } from '../hooks/index.ts'
 import { usePresence } from '../presence/index.ts'
 import { Primitive } from '../primitive/index.ts'
 import { useDialogContext } from './DialogRoot.ts'
@@ -19,6 +19,12 @@ const $el = shallowRef<HTMLElement>()
 const forwardElement = useForwardElement($el)
 
 const isPresent = usePresence($el, () => props.forceMount || context.open.value)
+
+watchEffect(() => {
+  if (isPresent.value) {
+    onWatcherCleanup(useBodyScrollLock())
+  }
+})
 </script>
 
 <template>

packages/vue-primitives/src/hooks/useBodyScrollLock.ts

@@ -53,7 +53,7 @@ export function useBodyScrollLock(): () => void {
     }
   }
 
-  function onlock() {
+  const unlock = () => {
     bodyStyle.overflow = initialOverflow ?? ''
     body.removeAttribute('data-scroll-lock')
 
@@ -70,7 +70,7 @@ export function useBodyScrollLock(): () => void {
     stopTouchMoveListener?.()
   }
 
-  return onlock
+  return unlock
 }
 
 function preventDefault(event: TouchEvent): boolean {

packages/vue-primitives/src/menu/MenuContentImpl.vue

@@ -4,7 +4,7 @@ import { onBeforeUnmount, shallowRef } from 'vue'
 import { useDismissableLayer } from '../dismissable-layer/index.ts'
 import { useFocusGuards } from '../focus-guards/index.ts'
 import { useFocusScope } from '../focus-scope/index.ts'
-import { useForwardElement, useRef } from '../hooks/index.ts'
+import { useBodyScrollLock, useForwardElement, useRef } from '../hooks/index.ts'
 import { PopperContent, usePopperContext } from '../popper/index.ts'
 import { useRovingFocusGroupRoot } from '../roving-focus/index.ts'
 import { focusFirst } from '../utils/focusFirst.ts'
@@ -40,11 +40,7 @@ let pointerGraceIntentRef: GraceIntent | undefined
 let pointerDirRef: Side = 'right'
 let lastPointerXRef = 0
 
-// TODO: ScrollLock
-// const ScrollLockWrapper = disableOutsideScroll ? RemoveScroll : React.Fragment
-// const scrollLockWrapperProps = disableOutsideScroll
-// ? { as: Slot, allowPinchZoom: true }
-// : undefined
+const unlock = props.disableOutsideScroll ? useBodyScrollLock() : undefined
 
 function handleTypeaheadSearch(key: string) {
   const search = searchRef.current + key
@@ -76,6 +72,7 @@ function handleTypeaheadSearch(key: string) {
 
 onBeforeUnmount(() => {
   window.clearTimeout(timerRef)
+  unlock?.()
 })
 
 // Make sure the whole tree has focus guards as our `MenuContent` may be

packages/vue-primitives/src/popover/PopoverContentModal.vue

@@ -6,6 +6,7 @@ import { onBeforeUnmount } from 'vue'
 import { useDismissableLayer } from '../dismissable-layer/index.ts'
 import { useFocusGuards } from '../focus-guards/index.ts'
 import { useFocusScope } from '../focus-scope/index.ts'
+import { useBodyScrollLock } from '../hooks/useBodyScrollLock.ts'
 import { PopperContent, usePopperContext } from '../popper/index.ts'
 import { composeEventHandlers } from '../utils/vue.ts'
 import { usePopoverContext } from './PopoverRoot.ts'
@@ -50,7 +51,10 @@ const onFocusOutside = composeEventHandlers<FocusOutsideEvent>((event) => {
   emit('focusOutside', event)
 }, event => event.preventDefault(), { checkForDefaultPrevented: false })
 
+const unlock = useBodyScrollLock()
+
 onBeforeUnmount(() => {
+  unlock()
   if (popperContext.content.value)
     hideOthers(popperContext.content.value)
 })