add event closed

[morteza-mortezai]

Hello,

there are many times that it's needed to call API request after modal has been closed and result of modal was true

because sometime you need to just call API when a modal closed and also result of modal was true .

so it's needed to pass variable in when closing modal with closeModal() Function

and this variable is used like this

  modal.onClosed = (result) => {
    if (result) {
      // get data from api
    }else{
      // do nothing
    }
  }

imagine if a user just opened a modal and do nothing in this situation API call should not fired .

[Jenesius]

@morteza-mortezai Hi! Thanks for creating the issue. I really appreciate the contribution of the community in the development of the library. If we are talking about the return value of modal windows, we must first understand their essence. By default, modal windows are treated as a separate layer of logic with their own data model. This approach is convenient and makes developing a web application with modal windows safe. This library inherits this concept. A modal window is a separate logical level that accepts input parameters and somehow interacts with them. However, there are times when a modal window is just part of a process. I sometimes encounter such cases (although I try my best to avoid them). I will describe the solutions that I use in my projects. Starting with the most convenient, ending with those that I would not use:

Creating a wrapper for interaction.

In vanilla JS, there is a function prompt, which, upon closing the popup, will wrap the entered value. To implement such logic, let's write a wrapper for the modal window opening function:

import Modal from "./modal-prompt.vue"
async function openPrompt() { // Wrap for opening ModalPrompt
  const modal = await openModal(Modal);
  
  return new Promise(resolve => {
    modal.onclose = () => {
      resolve(modal.instance.value);
    }
  })
}

// modal-prompt.vue
<template>
  <input v-model = "value">
</template>
<script>
export default {
  data: () => ({value: ""})
}
</script>

And how it use:

  const result = await openPrompt();

What happened in this example:

• openPrompt return Promise, which will be executed when the modal window is closed. It will also be passed the value, which is inside the modal window component.
• To describe the modal window, we implemented a simple input field that was concatenated with value (which is used as return value in the first step) This is the most elegant solution that I have found so far and often use in my projects.

Provide Handle

We can also pass a function to be called inside a modal window (Reminds me of the React component logic):

const modal = await openModal(Modal, {
  handleRequest: (value) => {
    // do something  
  }
})

And then in modal:

<script>
  export default {
    props: {
      handleRequest: Function
    },
    beforeModalClose() {
      this.handleRequest("some-value")
    }
  }
</script>

Emit value and closing

// modal.vue
<template>
  <button @click = "$emit('return', false)">run</button>
</template>

And when we open modal:

const modal = await openModal(Modal)
modal.on('return', (value) => {
  console.log(value); // false
  modal.close()
})

Perhaps one of the solutions will be the reference.

[Jenesius]

Each of this solution includes one mistake: If your guard will be registered before other one that will stop closing modal(validate) and the result of validate will false, we will have running request from first guard and not closed modal. Adding afterClose guard will be good innovation for this library, but don't resolve the problem described above.

---

I tried to add returned value before but this attempt was unsuccessful.

Maybe one of solution:

closeModal({ value: anyValue})

And then in guard:

modal.onclose = e => {
  e.value
}

[Jenesius]

https://modal.jenesius.com/guide/guide-methods.html#prompt-modal