Comments (3)
@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.
from vue-modal.
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
}
from vue-modal.
https://modal.jenesius.com/guide/guide-methods.html#prompt-modal
from vue-modal.
Related Issues (20)
- Nuxt compatibility HOT 7
- Dialog - backgroundClose: true - mouseup HOT 7
- Vue Warn deprecation TRANSITION_GROUP_ROOT HOT 5
- Version 2.0.0 HOT 3
- How to pass values back from modal component to parent HOT 4
- [BUG] На сайте кнопка Следующая страница всегда ведет на первую HOT 2
- promptModal produce promise cannot go next step when call openModal HOT 10
- modal cannot open when give namespace HOT 3
- problems using namespace with pushModal HOT 4
- click on the title, hold and drag HOT 32
- How can I pass the slot HOT 2
- Examples of animation
- Dialog HTML HOT 1
- Uncaught (in promise) Error: Modal's queue is not empty. Probably some modal reject closing by onClose hook. HOT 2
- Restruct repo.
- add side drawer feature HOT 3
- Vue.use(Modal) support? HOT 12
- Create multiple instances HOT 6
- Gaurd return false.Modal navigation was stoped. HOT 4
- Open Modal Vue 3 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-modal.