Merge pull request #8 from Tnifey/feature/body-scroll-options

Add body-scroll options

README.md

@@ -93,6 +93,22 @@ export default {
 </script>
 ```
 
+### [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock#options) options
+
+Options can be passed when installing the directive:
+
+```js
+import VScrollLock from 'v-scroll-lock'
+
+Vue.use(VScrollLock, {
+  bodyScrollOptions: {
+    reserveScrollBarGap: true,
+  },
+})
+```
+
+See [https://github.com/willmcpo/body-scroll-lock#options](https://github.com/willmcpo/body-scroll-lock#options) for full list of options.
+
 ### Providing Your Own Version of [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock)
 
 To make using this directive easier [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) is included in the package. In the case that you would like to use a version different than the packaged version this can be specified in the plugin options. Also note that `v-scroll-lock-no-dep.esm.js` should be imported to prevent duplicate code in your bundle. See example below:

src/index.ts

@@ -16,6 +16,7 @@ const VScrollLock: VScrollLockInterface = {
       const {
         enableBodyScroll: enableBodyScrollOption,
         disableBodyScroll: disableBodyScrollOption,
+        bodyScrollOptions,
       } = options
 
       if (enableBodyScrollOption) {
@@ -25,6 +26,10 @@ const VScrollLock: VScrollLockInterface = {
       if (disableBodyScrollOption) {
         this.disableBodyScroll = disableBodyScrollOption
       }
+
+      if (bodyScrollOptions) {
+        this.bodyScrollOptions = bodyScrollOptions
+      }
     }
     Vue.directive('scroll-lock', {
       inserted: this.inserted.bind(this),
@@ -34,12 +39,12 @@ const VScrollLock: VScrollLockInterface = {
   },
   inserted(el, binding) {
     if (binding.value) {
-      this.disableBodyScroll(el)
+      this.disableBodyScroll(el, this.bodyScrollOptions)
     }
   },
   componentUpdated(el, binding) {
     if (binding.value) {
-      this.disableBodyScroll(el)
+      this.disableBodyScroll(el, this.bodyScrollOptions)
     } else {
       this.enableBodyScroll(el)
     }

src/interfaces/plugin-options.interface.ts

@@ -1,6 +1,11 @@
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+  BodyScrollOptions,
+} from 'body-scroll-lock'
 
 export default interface PluginOptions {
   disableBodyScroll?: typeof disableBodyScroll
   enableBodyScroll?: typeof enableBodyScroll
+  bodyScrollOptions?: Partial<BodyScrollOptions>
 }

src/interfaces/v-scroll-lock.interface.ts

@@ -1,6 +1,10 @@
 import PluginOptions from './plugin-options.interface'
 import { PluginFunction, DirectiveFunction } from 'vue'
-import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'
+import {
+  enableBodyScroll,
+  disableBodyScroll,
+  BodyScrollOptions,
+} from 'body-scroll-lock'
 
 export default interface VScrollLock {
   enableBodyScroll: typeof enableBodyScroll
@@ -9,4 +13,5 @@ export default interface VScrollLock {
   inserted: DirectiveFunction
   componentUpdated: DirectiveFunction
   unbind: DirectiveFunction
+  bodyScrollOptions?: Partial<BodyScrollOptions>
 }