feat: remove params

packages/docs/.vitepress/components/use-cases/CustomModal.vue

@@ -1,10 +1,10 @@
 <template>
-  <vue-final-modal v-slot="{ params, close }" v-bind="$attrs" classes="modal-container" content-class="modal-content">
+  <vue-final-modal v-slot="{ close }" v-bind="$attrs" classes="modal-container" content-class="modal-content">
     <span class="modal__title">
       <slot name="title"></slot>
     </span>
     <div class="modal__content">
-      <slot :params="params"></slot>
+      <slot></slot>
     </div>
     <div class="modal__action">
       <button class="btn" @click="$emit('confirm', close)">confirm</button>

packages/docs/.vitepress/config.js

@@ -124,7 +124,6 @@ module.exports = {
             { text: 'Properties', link: '/reference/properties.html' },
             { text: 'Events', link: '/reference/events.html' },
             { text: 'Scoped Slots', link: '/reference/scoped-slots.html' },
-            { text: 'Params', link: '/reference/params.html' }
           ]
         },
         {

packages/docs/reference/api.md

@@ -10,12 +10,11 @@ import { $vfm } from 'vue-final-modal'
 
 ## API
 
-### `$vfm.show(name, params)`
+### `$vfm.show(name)`
 
 - Type: `Function`
 - Arguments:
   - name: `String` - Name of the modal
-  - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/reference/params).
 - Returns: `Promise<Object>` | `Promise<Array>`
 - Example:
 
@@ -108,13 +107,12 @@ import { $vfm } from 'vue-final-modal'
 
   Hide all modals.
 
-### `$vfm.toggle(name, show, params)`
+### `$vfm.toggle(name, show)`
 
 - Type: `Function`
 - Arguments:
   - name: [`String` | `Array`] - The names of the modal
   - show: `?: Boolean` - Show modal or not
-  - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/reference/params).
 - Returns: `Promise<Object>` | `Promise<Array>`
 - Example:
 

packages/docs/reference/dynamic-modal.md

@@ -41,7 +41,6 @@ The component `MyDynamicModal` is hypothetical, check the [advanced example](#ad
       }
     }
     ```
-  - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/reference/params).
 - Returns: `{ show, hide, options }`
 
 To show dynamic modal you can use `useModal` hook.
@@ -69,7 +68,7 @@ import { ModalsContainer } from 'vue-final-modal'
 
 ## API
 
-### `$vfm.show(dynamicModalOptions, params)`
+### `$vfm.show(dynamicModalOptions)`
 
 - Type: `Function`,
 - Arguments:
@@ -90,7 +89,6 @@ import { ModalsContainer } from 'vue-final-modal'
       }
     }
     ```
-  - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/reference/params).
 - Returns: `Promise<Object>` | `Promise<Array>`
 
 To show dynamic modal you can use the API `$vfm.show` function.

packages/docs/reference/events.md

@@ -48,11 +48,6 @@ Further closing of the modal can be blocked from this event listener by calling
 
 Emits right before modal is destroyed.
 
-:::tip
-Further after the modal was closed, you can avoid the modal to reset the [`params`](/reference/params) to empty object by calling `event.stop()`.
-:::
-
-
 ## `@drag:start`
 
 Emits on drag start.

packages/docs/reference/scoped-slots.md

@@ -21,16 +21,3 @@ export default {
 }
 </script>
 ```
-
-## params
-
-- type: `Any`
-- default: `{}`
-
-When you open a modal though the [API](/reference/api) `$vfm.show(name, params)`, you can get `params` with scoped-slot:
-
-```html
-<template v-slot="{ params }">
-  <!-- modal content -->
-</template>
-```

packages/lib/src/ModalsContainer.vue

@@ -37,7 +37,6 @@ export default {
       }
     },
     async beforeOpen(e, modal, index) {
-      e.ref.params.value = modal.params
       await this.$nextTick()
       await this.$nextTick()
       if (!modal.value) {

packages/lib/src/VueFinalModal.vue

@@ -37,7 +37,7 @@
           :style="bindContentStyle"
           @mousedown="onMousedown(null)"
         >
-          <slot :params="params" :close="() => $emit('update:modelValue', false)" />
+          <slot :close="() => $emit('update:modelValue', false)" />
           <div
             v-if="resizeVisible && visibility.modal"
             ref="vfmResize"
@@ -165,7 +165,6 @@ export default {
     const { state: modalTransitionState, listeners: modalListeners } = useTransitionState()
 
     const _stopEvent = ref(false)
-    const params = ref({})
 
     const { focusTrap } = useFocusTrap({
       props,
@@ -291,18 +290,9 @@ export default {
         case TransitionState.Leave:
           modalStackIndex.value = null
 
-          let stopEvent = false
-          const event = createModalEvent({
-            type: 'closed',
-            stop() {
-              stopEvent = true
-            }
-          })
           emit('_closed')
-          emit('closed', event)
+          emit('closed', createModalEvent({ type: 'closed' }))
           resolveToggle('hide')
-          if (stopEvent) return
-          params.value = {}
           break
       }
     })
@@ -336,8 +326,7 @@ export default {
         modalStackIndex,
         visibility,
         handleLockScroll,
-        toggle,
-        params
+        toggle
       }
     }
 
@@ -485,7 +474,7 @@ export default {
       return false
     }
 
-    function toggle(show, _params) {
+    function toggle(show) {
       return new Promise((resolve, reject) => {
         resolveToggle = res => {
           resolve(res)
@@ -496,9 +485,6 @@ export default {
           rejectToggle = noop
         }
         const value = typeof show === 'boolean' ? show : !props.modelValue
-        if (value && arguments.length === 2) {
-          params.value = _params
-        }
         emit('update:modelValue', value)
       })
     }
@@ -516,7 +502,6 @@ export default {
       modalListeners,
       visible,
       visibility,
-      params,
       resizeVisible,
       calculateZIndex,
       bindStyle,

packages/lib/src/modalInstance.js

@@ -52,15 +52,14 @@ export class ModalInstance {
     return this.dynamicModals.indexOf(options) !== -1
   }
 
-  useModal(_options, params = {}) {
+  useModal(_options) {
     let options = reactive({
       value: false,
       component: this.VueFinalModal,
       id: Symbol('useModal'),
       bind: {},
       slots: {},
       on: {},
-      params,
       ..._options
     })
 

packages/lib/tests/unit/VueFinalModal.spec.js

@@ -449,25 +449,5 @@ describe('VueFinalModal.vue', () => {
       expect(wrapper.find('.vfm').isVisible()).toBe(true)
       wrapper.unmount()
     })
-
-    it('avoid modal reset params after modal was closed', async () => {
-      const { wrapper, $vfm } = await createClosedModal(
-        {
-          name: 'testModal'
-        },
-        {
-          onClosed(event) {
-            event.stop()
-          }
-        }
-      )
-      const params = {
-        test: 123
-      }
-      await $vfm.show('testModal', params)
-      await $vfm.hide('testModal')
-      expect(isEqual(wrapper.findComponent('.vfm').vm.params, params)).toBe(true)
-      wrapper.unmount()
-    })
   })
 })