Return value from Modal #

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:

Using PromptModal #

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:

File ModalCode.vue

<template>
  <button @click="handleClick">Click</button>
</template>
<script>
import {Modal} from "jenesius-vue-modal";

export default {
  methods: {
    handleClick() {
      // Current emit will close the modal and provided Meth.random() 
      // result to Promise returned by promptModal
      this.$emit(Modal.EVENT_PROMPT, Math.random());
    }
  }
}
</script>

How to use:

import {promptModal} from "jenesius-vue-modal"
const code = await promptModal(ModalCode);

What happened in this example:

• promptModal 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 the 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()
})