Quasar modals should take a VM instance instead of a component config object

[mlenormand]

The Quasar modal constructor takes a component config object instead of a VM instance. This doesn't allow us to configure the modal content.
For example, I want to pass dynamic data to my Modal window like as I do for other UI components but I can't because it's the Modal which is responsible for instancing the VM from the component config. I can pass data to the Modal by other means (events / vuex / get component ref and set data/props values) but it's not very clean.

I think it will be more convenient to pass a VM instance (created either by javascript with new Operator or by the HTML template). I will make the Modal component as a thin wrapper that just take a instanciated component (VM) and shows it on a modal window. With this solution, the modal window can keep its state while being hidden/shown several times (currently not possible to hide the Modal, only to close/destroy it).

[rstoenescu]

The Modal constructor indeed takes a Vue component object and NOT an instance. The reason is simple: it wraps the given template with required HTML markup so you won't have to.

An instantiated VM would have to already contain the markup. But let's think for a moment: we wanna be able to pass instantiated VM so we can also pass data, right? But we can already do that. If we want to be able to access data scope for our Modal, just pass a Javascript reference when creating Modal:

var someData = {
   progress: 5,
   list: [....]
}
let modal = Modal.create({
   data: {
     someData
   },
   template: '...'
})

// don't destroy it when we close it,
// so we can show it up again when we want to
modal.set({selfDestroy: false})
modal.show()

someData.progress = 7
modal.close()
modal.show()
modal.close()
someData.progress = 10
// ....or even
modal.vm.someData.progress = 10

modal.show()
....
modal.close()
/// finally when we don't need it anymore:
modal.destroy()

It's easier to write a *.vue component file and use it to create your Modal:

import { Modal } from 'quasar'
import LoginScreen from './login.vue'
Modal.create(LoginScreen)

Ok, so we've seen we can skip accessing data through events, vuex etc, but Vue best practices dictates that it's best to anyway use Vuex due to its many advantages.

Next Quasar (v0.6.0 -- skipping 0.5.1 due to its many novelties) will also make Modal be able to use a VM object containing an element, so you can use an existing template in DOM.

Given said that, is there still a case you wanna use and can't with current Modal?

[rstoenescu]

Updated the documentation too to make it more clear. Will update website in a few hours.

[mlenormand]

Yes, you're right, we can just set data to the vm object backed by this Modal once it is instanciated. We loose the features of props (data validation, types, ...) but in my current case current case, the way you describe fits my needs. I think there is more advanced cases where passing a VM instance could be useful

[rstoenescu]

Well, the validation can still be done through VM object. Even if set from "outside" of it. Add a watcher for your VM data prop on the VM object and validate it there, for example.

[rstoenescu]

Will make a thorough analysis on how Modal management can be improved though. Thanks for opening this issue!