feat: replace body-scroll-lock with scroll-lock #403

Author: hunterliu1003

packages/vue-final-modal/package.json

@@ -35,19 +35,22 @@
   "devDependencies": {
     "@cypress/vue": "^5.0.5",
     "@release-it/conventional-changelog": "^5.1.1",
+    "@types/scroll-lock": "^2.1.3",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cypress": "^13.6.0",
     "focus-trap": "^7.5.4",
     "release-it": "^16.1.3",
+    "scroll-lock": "^2.1.5",
     "vite-plugin-dts": "^3.6.3",
     "vue": "^3.4.7"
   },
   "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
     "@vueuse/core": ">=10.0.0",
     "@vueuse/integrations": ">=10.0.0",
     "focus-trap": ">=7.2.0",
-    "@vue/composition-api": "^1.0.0-rc.1",
+    "scroll-lock": ">=2.1.5",
     "vue": ">=2.7.0 || >=3.0.0"
   },
   "homepage": "https://vue-final-modal.org/",

packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue

@@ -5,7 +5,7 @@ import { useTransition } from './useTransition'
 import { useToClose } from './useToClose'
 import { useModelValue } from './useModelValue'
 import { useFocusTrap } from './useFocusTrap'
-import { useLockScroll } from './useBodyScrollLock'
+import { useScrollLock } from './useScrollLock'
 import { useZIndex } from './useZIndex'
 import { vVisible } from './vVisible'
 import { arrayMoveItemToLast, arrayRemoveItem, noop, once } from '~/utils'
@@ -50,7 +50,7 @@ const vfmContentEl = ref<HTMLDivElement>()
 const { focus, blur } = useFocusTrap(props, { focusEl: vfmRootEl })
 const { zIndex, refreshZIndex, resetZIndex } = useZIndex(props)
 const { modelValueLocal } = useModelValue(props, emit, { open, close })
-const { enableBodyScroll, disableBodyScroll } = useLockScroll(props, {
+const { disablePageScroll, enablePageScroll } = useScrollLock(props, {
   lockScrollEl: vfmRootEl,
   modelValueLocal,
 })
@@ -74,7 +74,7 @@ const {
   modelValueLocal,
   onEntering() {
     nextTick(() => {
-      disableBodyScroll()
+      disablePageScroll()
       focus()
     })
   },
@@ -87,7 +87,7 @@ const {
   onLeave() {
     arrayRemoveItem(openedModals, instance)
     resetZIndex()
-    enableBodyScroll()
+    enablePageScroll()
     emit('closed')
     // eslint-disable-next-line vue/custom-event-name-casing
     emit('_closed')
@@ -143,7 +143,7 @@ function close(): boolean {
 }
 
 onBeforeUnmount(() => {
-  enableBodyScroll()
+  enablePageScroll()
   arrayRemoveItem(modals, instance)
   arrayRemoveItem(openedModals, instance)
   blur()
@@ -208,6 +208,7 @@ export default {
       :style="{ zIndex }"
       role="dialog"
       aria-modal="true"
+      data-scroll-lock-scrollable
       @keydown.esc="() => onEsc()"
       @mouseup.self="() => onMouseupRoot()"
       @mousedown.self="e => onMousedown(e)"