Merge branch 'dev' into feature/dynamic-modal

Author: hunterliu1003

README.md

@@ -143,6 +143,8 @@ export default {
 
 ### **Open modal with API**
 
+> `v-model` is necessary when you open a modal with `$vfm.show(name)` API.
+
 ```html
 <vue-final-modal v-model="showModal" name="example">
   Modal Content Here
@@ -182,23 +184,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`
-
-- Type: `Array`
+- In Options API:
 
-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,22 +229,27 @@ 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>
 ```
 
+> `v-model` is necessary when you open a modal with `$vfm.show(name)` API.
+
 ### `$vfm.hide(name)`
 
 - Type: `Function`
@@ -257,7 +264,6 @@ export default {
 
 <script>
 export default {
-    name: 'MyComponent',
     data: () => ({
       show: true
     }),
@@ -298,11 +304,36 @@ 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
 {
   value: { type: Boolean, default: false },
+  name: { type: String, default: null },
   ssr: { type: Boolean, default: true },
   classes: { type: [String, Object, Array], default: '' },
   overlayClass: { type: [String, Object, Array], default: '' },

dist/VueFinalModal.esm.js

@@ -3,7 +3,7 @@ title: Introduction
 description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
 position: 0
 category: Getting Start
-version: 0.20
+version: 0.21
 features:
   - Support Vue 3 and Vue 2
   - Tailwind CSS friendly
@@ -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**
 
@@ -156,6 +153,8 @@ export default {
 
 ### **Open modal with API**
 
+<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
+
 ```html
 <vue-final-modal v-model="showModal" name="example">
   Modal Content Here
@@ -188,15 +187,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,28 +228,33 @@ 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>
 ```
 
+<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
+
 ### `$vfm.hide(name)`
 
 - Type: `Function`
@@ -260,19 +264,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 +305,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 +324,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.
 
@@ -332,6 +336,15 @@ All modal instances include show and hide.
 
 ## **Props**
 
+### `name`
+
+- Type: `String`
+- Default: `null`
+
+Modal name for global API `$vfm.show(name)`, `$vfm.hide(name)`, etc.
+
+<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
+
 ### `ssr`
 
 - Type: `Boolean`
@@ -464,7 +477,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 +526,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 +556,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 +584,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 +605,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

@@ -11,7 +11,7 @@
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.6.1",
     "nuxt": "^2.14.8",
-    "vue-final-modal": "^0.20.1"
+    "vue-final-modal": "^0.21.1"
   },
   "devDependencies": {
     "@nuxtjs/google-analytics": "^2.4.0",