feat(modal): Add support for reserveScrollBarGap prop (#376)

* feat(modal): implement reserveScrollBarGap props

* feat(docs): add docs for reserveScrollBarGap

* fix(modal): fix missing bracket

Author: negezor

docs/components/content/Playground.vue

@@ -12,6 +12,7 @@ const getInitialValues = () => ({
   escToClose: true,
   background: 'non-interactive',
   lockScroll: true,
+  reserveScrollBarGap: true,
   swipeToClose: 'none',
 })
 
@@ -71,6 +72,9 @@ function reset() {
     <h3>lockScroll:</h3>
     <label> <input v-model="options.lockScroll" type="checkbox"> </label>
 
+    <h3>reserveScrollBarGap:</h3>
+    <label> <input v-model="options.reserveScrollBarGap" type="checkbox"> </label>
+
     <h3>swipeToClose: </h3>
     <div class="flex flex-col">
       <label v-for="value in ['none', 'up', 'right', 'down', 'left']" :key="value" :for="value">
@@ -100,6 +104,7 @@ function reset() {
     :esc-to-close="options.escToClose"
     :background="options.background"
     :lock-scroll="options.lockScroll"
+    :reserve-scroll-bar-gap="options.reserveScrollBarGap"
     :swipe-to-close="options.swipeToClose"
     class="flex justify-center items-center"
     content-class="max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"

docs/content/3.api/1.components/1.vue-final-modal.md

@@ -177,6 +177,14 @@ Lock body scroll or not when the modal is opened.
     - TS: `PropType<boolean>`{lang=ts}
   - Default: `true`{lang=ts}
 
+### reserveScrollBarGap
+
+Creates a padding-right when scroll is locked to prevent the page from jumping.
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
+  - Default: `true`{lang=ts}
+  
 ### zIndexFn
 
 Define how to increase the zIndex when there are nested modals.

docs/content/4.use-cases/1.playground.md

@@ -24,6 +24,7 @@ head.title: 'Playground | Examples'
       escToClose: true,
       background: 'non-interactive',
       lockScroll: true,
+      reserveScrollBarGap: true,
       swipeToClose: 'none',
     })
 
@@ -83,6 +84,9 @@ head.title: 'Playground | Examples'
         <h3>lockScroll:</h3>
         <label> <input v-model="options.lockScroll" type="checkbox"> </label>
 
+        <h3>reserveScrollBarGap:</h3>
+        <label> <input v-model="options.reserveScrollBarGap" type="checkbox"> </label>
+
         <h3>swipeToClose: </h3>
         <div class="flex flex-col">
           <label v-for="value in ['none', 'up', 'right', 'down', 'left']" :key="value" :for="value">
@@ -112,6 +116,7 @@ head.title: 'Playground | Examples'
         :esc-to-close="options.escToClose"
         :background="options.background"
         :lock-scroll="options.lockScroll"
+        :reserve-scroll-bar-gap="options.reserveScrollBarGap"
         :swipe-to-close="options.swipeToClose"
         class="flex justify-center items-center"
         content-class="max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"

packages/vue-final-modal/src/components/CoreModal/CoreModalProps.ts

@@ -153,6 +153,14 @@ export const coreModalProps = {
     type: Boolean as PropType<boolean>,
     default: true,
   },
+  /**
+   * @description Creates a padding-right when scroll is locked to prevent the page from jumping
+   * @default `true`
+   */
+  reserveScrollBarGap: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
   /**
    * @description Define how to increase the zIndex when there are nested modals
    * @default `({ index }) => 1000 + 2 * index`

packages/vue-final-modal/src/components/CoreModal/useBodyScrollLock.ts

@@ -262,7 +262,7 @@ export function useLockScroll(props: InstanceType<typeof CoreModal>['$props'], o
       return
     props.lockScroll && _lockScrollEl
       && disableBodyScroll(_lockScrollEl, {
-        reserveScrollBarGap: true,
+        reserveScrollBarGap: props.reserveScrollBarGap,
         allowTouchMove: (el) => {
           while (el && el !== document.body) {
             if (el.getAttribute('vfm-scroll-lock-ignore') !== null)

viteplay/src/components/VueFinalModal/Basic.example.vue

@@ -54,6 +54,7 @@ const modal2 = useModal({
 
 const show = ref(false)
 const lockScroll = ref(false)
+const reserveScrollBarGap = ref(false)
 const theModalId = Symbol('theModalId')
 
 function beforeOpen() {
@@ -73,6 +74,9 @@ function clickOutside() {
     <button @click="lockScroll = !lockScroll">
       toggle lockScroll: {{ lockScroll }}
     </button>
+    <button @click="reserveScrollBarGap = !reserveScrollBarGap">
+      toggle reserveScrollBarGap: {{ reserveScrollBarGap }}
+    </button>
     <button @click="show = !show">
       open vfm
     </button>
@@ -95,6 +99,7 @@ function clickOutside() {
       class="test-vfm"
       :teleport-to="false"
       :lock-scroll="lockScroll"
+      :reserve-scroll-bar-gap="reserveScrollBarGap"
       display-directive="show"
       :click-to-close="true"
       content-transition="vfm-fade"