Merge branch 'dev' into next

Author: hunterliu1003

README.md

@@ -200,11 +200,29 @@ You can use:
 
 All modal instances include show and hide.
 
-### `$vfm.show(name)`
+### `$vfm.show(name, params)`
 
 - Type: `Function`
 - Arguments:
   - name: `String` - Name of the modal
+  - params: `?: object` - Any data that you would want to pass into the modal (@before-open event handler will contain `params` in the event). You can also using scoped-slot to get `params` in template:
+
+```html
+<template v-slot="{ params }">
+  <!-- modal content -->
+</template>
+```
+
+Or get `params` on `@beforeOpen` event:
+
+```html
+<vue-final-modal @beforeOpen="e => e.ref.params">
+  <!-- modal content -->
+</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()`.
+
 - Example:
 
 ```html
@@ -254,12 +272,29 @@ export default {
 
 hide all modals.
 
-### `$vfm.toggle(name, show)`
+### `$vfm.toggle(name, show, params)`
 
 - Type: `Function`
 - Arguments:
   - name: `String` - Name of the modal
-  - show: `Boolean` - Show modal or not
+  - show: `?: Boolean` - Show modal or not
+  - params: `?: object` - Any data that you would want to pass into the modal (@before-open event handler will contain params in the event). You can also using scoped-slot to get `params` in template:
+
+```html
+<template v-slot="{ params }">
+  <!-- modal content -->
+</template>
+```
+
+Or get `params` on `@beforeOpen` event:
+
+```html
+<vue-final-modal @beforeOpen="e => e.ref.params">
+  <!-- modal content -->
+</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()`.
 
 toggle modal by name.
 
@@ -300,21 +335,41 @@ toggle modal by name.
 
 ### `@before-open`
 
-- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()` .
+- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()`.
 
 ### `@opened`
 
 - Emits after modal became visible and transition ended.
 
 ### `@before-close`
 
-- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()` .
+- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()`.
 
 ### `@closed`
 
-- Emits right before modal is destroyed.
+- Emits right before modal is destroyed. Further after the modal was closed, you can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
+
+## **Slots**
+
+If you open a modal though API `show(name, params)`, You can using scoped-slot to get `params` in template:
+
+```html
+<template v-slot="{ params }">
+  <!-- modal content -->
+</template>
+```
+
+Or get `params` on `@beforeOpen` event:
+
+```html
+<vue-final-modal @beforeOpen="e => e.ref.params">
+  <!-- modal content -->
+</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()`.
 
-## Contribution
+## **Contribution**
 
 👋 Hi I'm Hunter, the author of `vue-final-modal`. 
 

dist/VueFinalModal.esm.js

@@ -168,8 +168,6 @@ this.$vfm.show('example')
 
 ## **Configuration**
 
-<badge>v0.18+</badge>
-
 Configuration options can be passed as a second argument to `Vue.use`.
 
 ```js
@@ -194,8 +192,6 @@ Changes API name from "$vfm" to any other string value. It is useful when you us
 
 ## **API**
 
-<badge>v0.15+</badge>
-
 Plugin API can be called within any component through `this.$vfm`.
 
 ### `$vfm.openedModals`
@@ -214,11 +210,29 @@ You can use:
 
 All modal instances include show and hide.
 
-### `$vfm.show(name)`
+### `$vfm.show(name, params)`
 
 - Type: `Function`
 - Arguments:
   - name: `String` - Name of the modal
+  - params: `?: object` - Any data that you would want to pass into the modal (@before-open event handler will contain `params` in the event). You can also using scoped-slot to get params in template:
+
+```html
+<template v-slot="{ params }">
+  <!-- modal content -->
+</template>
+```
+
+Or get `params` on `@beforeOpen` event:
+
+```html
+<vue-final-modal @beforeOpen="e => e.ref.params">
+  <!-- modal content -->
+</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()`.
+
 - Example:
 
 ```html
@@ -268,12 +282,29 @@ export default {
 
 hide all modals.
 
-### `$vfm.toggle(name, show)`
+### `$vfm.toggle(name, show, params)`
 
 - Type: `Function`
 - Arguments:
   - name: `String` - Name of the modal
-  - show: `Boolean` - Show modal or not
+  - show: `?: Boolean` - Show modal or not
+  - params: `?: object` - Any data that you would want to pass into the modal (@before-open event handler will contain params in the event). You can also using scoped-slot to get params in template:
+
+```html
+<template v-slot="{ params }">
+  <!-- modal content -->
+</template>
+```
+
+Or get `params` on `@beforeOpen` event:
+
+```html
+<vue-final-modal @beforeOpen="e => e.ref.params">
+  <!-- modal content -->
+</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()`.
 
 toggle modal by name.
 
@@ -308,23 +339,20 @@ Custom class names for the modal content element.
 Custom class names for the modal overlay element.
 
 ### `styles`
-<badge>v0.17+</badge><badge>v1.4+</badge>
 
 - Type: `[String, Object, Array]`
 - Default: `''`
 
 Style that will be applied to the modal container element.
 
 ### `contentStyle`
-<badge>v0.17+</badge><badge>v1.4+</badge>
 
 - Type: `[String, Object, Array]`
 - Default: `''`
 
 Style that will be applied to the modal content element.
 
 ### `overlayStyle`
-<badge>v0.17+</badge><badge>v1.4+</badge>
 
 - Type: `[String, Object, Array]`
 - Default: `''`
@@ -394,8 +422,6 @@ Clicking overlay of modal to close the modal.
 
 ### `escToClose`
 
-<badge>v0.19+</badge>
-
 - Type: `Boolean`
 - Default: `false`
 
@@ -436,8 +462,6 @@ Set specific `z-index` to root of the modal element. If zIndex is set, `zIndexBa
 
 ### `focusRemain`
 
-<badge>v0.19+</badge>
-
 - Type: `Boolean`
 - Default: `true`
 
@@ -477,8 +501,6 @@ Enables focus trap meaning that only inputs/buttons that are withing the modal w
 
 ### `@click-outside`
 
-<badge>v0.14+</badge>
-
 - Emits while modal container on click.
 
 <alert>
@@ -489,23 +511,42 @@ If prop `clickToClose` is `false`, the event will still be emitted.
 
 ### `@before-open`
 
-- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()` .
+- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()`.
 
 ### `@opened`
 
 - Emits after modal became visible and transition ended. 
 
 ### `@before-close`
 
-- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()` .
-
-#
+- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()`.
 
 ### `@closed`
 
-- Emits right before modal is destroyed.
+- Emits right before modal is destroyed. Further after the modal was closed, you can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
+
+## **Slots**
+
+If you open a modal though API `$vfm.show(name, params)`, You can using scoped-slot to get `params` in template:
+
+```html
+<template v-slot="{ params }">
+  <!-- modal content -->
+</template>
+```
+
+Or get `params` on `@beforeOpen` event:
+
+```html
+<vue-final-modal @beforeOpen="e => e.ref.params">
+  <!-- modal content -->
+</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()`.
+
 
-## Contribution
+## **Contribution**
 
 👋 Hi I'm Hunter, the author of `vue-final-modal`. 
 

dist/VueFinalModal.esm.js.map

@@ -11,8 +11,8 @@ function createVfm(options) {
         return this.modals.filter(modal => modal.props.modelValue)
       },
       modals: [],
-      show(name) {
-        this.toggle(name, true)
+      show(name, ...args) {
+        this.toggle(name, true, ...args)
       },
       hide(name) {
         this.toggle(name, false)
@@ -22,10 +22,10 @@ function createVfm(options) {
           modal.emit('update:modelValue', false)
         })
       },
-      toggle(name, show) {
+      toggle(name, ...args) {
         const modal = this.modals.find(modal => modal.props.name === name)
         if (modal !== undefined) {
-          modal.emit('update:modelValue', show === undefined ? !modal.props.modelValue : show)
+          modal.toggle(...args)
         }
       },
       lockScroll() {

dist/VueFinalModal.umd.js

@@ -47,7 +47,7 @@
           :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
           :style="contentStyle"
         >
-          <slot />
+          <slot :params="_params" />
         </div>
       </div>
     </transition>
@@ -121,6 +121,7 @@ export const visibility = reactive({
 const overlayTransitionState = ref(null)
 const modalTransitionState = ref(null)
 const _stopEvent = ref(false)
+export const _params = ref({})
 
 const isComponentReadyToBeDestroyed = computed(() => {
   return (
@@ -199,7 +200,8 @@ function getModalInfo() {
     modalStackIndex,
     visibility,
     handleLockScroll,
-    $focusTrap
+    $focusTrap,
+    toggle
   }
 }
 function mounted() {
@@ -320,7 +322,17 @@ export function afterModalLeave() {
   if ($vfm.openedModals.length === 0) {
     props.lockScroll && $vfm.unlockScroll()
   }
-  emit('closed', createModalEvent({ type: 'closed' }))
+
+  let stopEvent = false
+  const event = createModalEvent({
+    type: 'closed',
+    stop() {
+      stopEvent = true
+    }
+  })
+  emit('closed', event)
+  if (stopEvent) return
+  _params.value = {}
 }
 export function onClickContainer() {
   emit('click-outside', createModalEvent({ type: 'click-outside' }))
@@ -331,10 +343,10 @@ export function onEsc(evt) {
     emit('update:modelValue', false)
   }
 }
-function createModalEvent(params = {}) {
+function createModalEvent(eventProps = {}) {
   return {
     ref: getModalInfo(),
-    ...params
+    ...eventProps
   }
 }
 function emitEvent(eventType, value) {
@@ -355,6 +367,13 @@ function emitEvent(eventType, value) {
   }
   return false
 }
+function toggle(show, params) {
+  const value = typeof show === 'boolean' ? show : !props.modelValue
+  if (value && arguments.length === 2) {
+    _params.value = params
+  }
+  emit('update:modelValue', value)
+}
 </script>
 
 <style lang="css" scoped>