Merge branch 'dev' into next

Author: hunterliu1003

README.md

@@ -182,23 +182,23 @@ Changes API name from "$vfm" to any other string value. It is useful when you us
 
 ## **API**
 
-Plugin API can be called within any component through `this.$vfm`.
-
-### `$vfm.openedModals`
+- In Options API:
 
-- Type: `Array`
-
-A stack array store the opened modal's vue component instance.
+Plugin API can be called within any component through `this.$vfm`.
 
-You can use:
-1. `$vfm.openedModals[0]` to get the first opened modal instance.
-2. `$vfm.openedModals.length` to get how many modals is opened.
+- In Composition API (Only in Vue 3 version): 
 
-### `$vfm.modals`
+> Only support in Vue 3
 
-- Type: `Array`
+```js
+import { inject } from 'vue'
 
-All modal instances include show and hide.
+export default {
+  setup() {
+    const $vfm = inject('$vfm')
+  }
+}
+```
 
 ### `$vfm.show(name, params)`
 
@@ -227,19 +227,22 @@ Or get `params` on `@beforeOpen` event:
 
 ```html
 <template>
-    <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
+  <vue-final-modal v-model="show" name="example">
+    <template v-slot="{ params }">
+      Hi {{ params.userName }}
+    </template>
+  </vue-final-modal>
 </template>
 
 <script>
-export default {
-    name: 'MyComponent',
+  export default {
     data: () => ({
       show: false
     }),
-    mounted () {
-        this.$vfm.show('example')
+    mounted() {
+      this.$vfm.show('example', { userName: 'vue-final-modal' })
     }
-}
+  }
 </script>
 ```
 
@@ -257,7 +260,6 @@ export default {
 
 <script>
 export default {
-    name: 'MyComponent',
     data: () => ({
       show: true
     }),
@@ -298,6 +300,30 @@ Or get `params` on `@beforeOpen` event:
 
 toggle modal by name.
 
+### `$vfm.get(name)`
+
+- Type: `Function`
+- Arguments:
+  - name: `String` - Name of the modal
+
+return the modal comopnent instance.
+
+### `$vfm.openedModals`
+
+- Type: `Array`
+
+A stack array store the opened modal's vue component instance.
+
+You can use:
+1. `$vfm.openedModals[0]` to get the first opened modal instance.
+2. `$vfm.openedModals.length` to get how many modals is opened.
+
+### `$vfm.modals`
+
+- Type: `Array`
+
+All modal instances include show and hide.
+
 ## **Props**
 
 ```js

dist/VueFinalModal.esm.js

@@ -37,7 +37,6 @@ features:
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/badgesize/brotli/hunterliu1003/vue-final-modal/next/dist/VueFinalModal.umd.js" alt="Size"></a>
 </p>
 
-
 <p align="right">
   <a href="https://www.buymeacoffee.com/PL2qJIx" target="_blank" rel="noopener noreferrer">
     <img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
@@ -117,18 +116,16 @@ Vue.use(VueFinalModal())
 
 ```js[nuxt.config.js]
 export default {
-  plugins: [
-    '~plugins/vue-final-modal.js'
-  ],
+  plugins: ['~plugins/vue-final-modal.js'],
   build: {
-    transpile: ['vue-final-modal'],
+    transpile: ['vue-final-modal']
   }
 }
 ```
 
 ### CDN
 
-> [Live demo](https://codepen.io/hunterliu1003/pen/ZEWoYeE)
+<alert>[Live demo](https://codepen.io/hunterliu1003/pen/ZEWoYeE)</alert>
 
 - **jsDelivr**
 
@@ -188,15 +185,15 @@ Changes component name from "VueFinalModal" to any other string value. It is use
 - Type: `String`
 - default: `'$vfm'`
 
-Changes API name from "$vfm" to any other string value. It is useful when you use `vue-final-modal` as spinner, toast, notify, etc.
+Changes API name from "\$vfm" to any other string value. It is useful when you use `vue-final-modal` as spinner, toast, notify, etc.
 
 ## **API**
 
-- In Options API:
+- **Options API**
 
 Plugin API can be called within any component through `this.$vfm`.
 
-- In Composition API:
+- **Composition API** <badge>Only in Vue 3 version</badge>
 
 ```js
 import { inject } from 'vue'
@@ -229,25 +226,28 @@ Or get `params` on `@beforeOpen` event:
 </vue-final-modal>
 ```
 
-> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
+<alert>`parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>
 
 - Example:
 
 ```html
 <template>
-    <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
+  <vue-final-modal v-model="show" name="example">
+    <template v-slot="{ params }">
+      Hi {{ params.userName }}
+    </template>
+  </vue-final-modal>
 </template>
 
 <script>
-export default {
-    name: 'MyComponent',
+  export default {
     data: () => ({
       show: false
     }),
-    mounted () {
-        this.$vfm.show('example')
+    mounted() {
+      this.$vfm.show('example', { userName: 'vue-final-modal' })
     }
-}
+  }
 </script>
 ```
 
@@ -260,19 +260,18 @@ export default {
 
 ```html
 <template>
-    <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
+  <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
 </template>
 
 <script>
-export default {
-    name: 'MyComponent',
+  export default {
     data: () => ({
       show: true
     }),
-    mounted () {
-        this.$vfm.hide('example')
+    mounted() {
+      this.$vfm.hide('example')
     }
-}
+  }
 </script>
 ```
 
@@ -302,7 +301,7 @@ Or get `params` on `@beforeOpen` event:
 </vue-final-modal>
 ```
 
-> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
+<alert>`parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>
 
 toggle modal by name.
 
@@ -321,6 +320,7 @@ return the modal comopnent instance.
 A stack array store the opened modal's vue component instance.
 
 You can use:
+
 1. `$vfm.openedModals[0]` to get the first opened modal instance.
 2. `$vfm.openedModals.length` to get how many modals is opened.
 
@@ -464,7 +464,7 @@ Set the root element of `vue-final-modal` style to `pointer-events: none;`.
 
 Specifies which DOM element that this component should detach to.
 
-1. Set `false` will disabled this feature. 
+1. Set `false` will disabled this feature.
 2. String can be any valid `querySelector`, e.g. `'body'`, `'#app'`.
 3. Object can be any valid `Node`, e.g. `this.$refs.container`.
 
@@ -513,21 +513,20 @@ Enables focus trap meaning that only inputs/buttons that are withing the modal w
 
 ```vue
 <template>
-    <vue-final-modal
-      @click-outside="clickOutside"
-      @before-open="beforeOpen"
-      @opened="opened"
-      @before-close="beforeClose"
-      @closed="closed"
-    >
-      ...modal content
-    </vue-final-modal>
+  <vue-final-modal
+    @click-outside="clickOutside"
+    @before-open="beforeOpen"
+    @opened="opened"
+    @before-close="beforeClose"
+    @closed="closed"
+  >
+    ...modal content
+  </vue-final-modal>
 </template>
 ```
 
 </show-code>
 
-
 ### `@click-outside`
 
 - Emits while modal container on click.
@@ -544,7 +543,7 @@ If prop `clickToClose` is `false`, the event will still be emitted.
 
 ### `@opened`
 
-- Emits after modal became visible and transition ended. 
+- Emits after modal became visible and transition ended.
 
 ### `@before-close`
 
@@ -572,12 +571,11 @@ Or get `params` on `@beforeOpen` event:
 </vue-final-modal>
 ```
 
-> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
-
+<alert>`parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>
 
 ## **Contribution**
 
-👋 Hi I'm Hunter, the author of `vue-final-modal`. 
+👋 Hi I'm Hunter, the author of `vue-final-modal`.
 
 To develop vue-final-modal, I learn a lot from these awesome libraries:
 
@@ -594,6 +592,6 @@ To develop vue-final-modal, I learn a lot from these awesome libraries:
 - [Bootstrap Vue](https://bootstrap-vue.org/)
   - lockScroll
 
-> There is no perfect library even the `final` of vue modal. 
+<alert>There is no perfect library even the `final` of vue modal.</alert>
 
-If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).
+🚀 If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).

dist/VueFinalModal.esm.js.map

@@ -3,11 +3,11 @@
     <v-modal
       v-model="showModal"
       :ssr="ssr"
-      :lockScroll="lockScroll"
-      :hideOverlay="hideOverlay"
-      :clickToClose="clickToClose"
-      :escToClose="escToClose"
-      :preventClick="preventClick"
+      :lock-scroll="lockScroll"
+      :hide-overlay="hideOverlay"
+      :click-to-close="clickToClose"
+      :esc-to-close="escToClose"
+      :prevent-click="preventClick"
       :transition="transition ? 'vfm' : ''"
       :overlay-transition="overlayTransition ? 'vfm' : ''"
       :z-index-auto="zIndexAuto"

dist/VueFinalModal.umd.js

@@ -5129,11 +5129,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-mobile@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-2.2.2.tgz#f6c9c5d50ee01254ce05e739bdd835f1ed4e9954"
-  integrity sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg==
-
 is-negative-zero@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"

dist/VueFinalModal.umd.js.map

@@ -1,11 +1,9 @@
 import { bindPrototype, registComponent } from './PluginCore'
 import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT } from './utils/errors'
-import mobile from 'is-mobile'
 
 const defaultOptions = {
   componentName: 'VueFinalModal',
-  key: '$vfm',
-  isMobile: mobile()
+  key: '$vfm'
 }
 
 const Plugin = () => ({

docs/content/en/index.md

@@ -1,7 +1,6 @@
 import VueFinalModal from './VueFinalModal.vue'
-import { setStyle, removeStyle } from './utils/dom.js'
 
-function createVfm(options) {
+function createVfm() {
   let vfm
 
   return function() {
@@ -23,27 +22,6 @@ function createVfm(options) {
           modal.toggle(...args)
         }
       },
-      isScrollLocked: false,
-      lockScroll() {
-        if (this.isScrollLocked) return
-        if (options.isMobile) {
-          setStyle(document.body, 'overflow', 'hidden')
-        } else {
-          window.addEventListener('wheel', this.lockScrollListener, { passive: false })
-        }
-        this.isScrollLocked = true
-      },
-      unlockScroll() {
-        if (options.isMobile) {
-          removeStyle(document.body, 'overflow')
-        } else {
-          window.removeEventListener('wheel', this.lockScrollListener)
-        }
-        this.isScrollLocked = false
-      },
-      lockScrollListener(e) {
-        e.preventDefault()
-      },
       get(name) {
         return this.modals.find(modal => modal.props.name === name)
       },
@@ -57,7 +35,7 @@ function createVfm(options) {
 }
 
 export function bindPrototype(app, options) {
-  const vfm = createVfm(options)()
+  const vfm = createVfm()()
   Object.defineProperty(app.config.globalProperties, options.key, {
     get() {
       return vfm