feat(useBodyScrollLock): supports optional lock pointer events

[serkodev]

This PR allows users to pass the following state to useBodyScrollLock to optionally lock scrolling and pointer events:

interface UseBodyScrollLockState {
  scroll?: boolean
  pointerEvents?: boolean
}

This change remains backward compatible since it still supports boolean. When set to true, both scroll and pointerEvents are locked as before.

Why

In my project, I needed to lock the body scroll. However, using VueUse’s useScrollLock caused some issues. For instance, after locking the body scroll and manually setting the body’s padding-right, opening and closing a Radix Dialog would clear the padding-right.

To address this, I decided to use Radix’s useBodyScrollLock for locking the body scroll. By default, it will set pointerEvents to none, which prevents clicking on any elements.

While a workaround like the one below exists:

const locked = useBodyScrollLock()
locked.value = true
nextTick(() => {
  document.body.style.pointerEvents = ''
})

It didn’t feel intuitive to me. I believe that "scroll locking" should not disable all pointer events. Therefore, I’ve added an option for pointerEvents in useBodyScrollLock so that users can choose whether to lock pointer events or not.