Quasar: [V1] Request: Dialog global $dialog.show('my-dialog')

[mesqueeb]

The way I usually create the logic to open / close dialogs from my app is currently:

• add all dialogs to one Modals.vue component on the layout
• create a modals vuex module to be able to open/close modals from any vue component

When looking at plugins like vue-js-modal they have a $modal injection into vue components from where they can control opening/closing modals like so:

this.$modal.show('hello-world');
this.$modal.hide('hello-world');

This is in my opinion reaaally (1) clean, (2) useful and (3) would take away a lot of boilerplate I'm always writing now.

my humble request:

Add a similar $dialog object to be able to control any dialog's visibility.

this.$dialog.show('hello-world');
this.$dialog.hide('hello-world');

[rstoenescu]

Hi,

You can do this yourself in your app. In your Modals.vue:

methods: {
  openDialog (payload) {
     if (this.$refs[payload]) {
        this.$refs[payload].show()
     }
  }
},
mounted () {
   this.$root.on('showDialog', this.openDialog)
},
beforeDestroy () {
   this.$root.off('showDialog', this.openDialog)
}

Then you can call this.$root.$emit('showDialog', 'hello-world') from wherever you need. Basically you'll be assigning Vue references to each QDialog, and you'll use the root component as event bus ;)

[mesqueeb]

@rstoenescu I just feel that this is something so common that most people would want/need that a built-in quasar solution might be a good idea!

Your solution: this.$root.$emit('showDialog', 'hello-world') makes sense, but I believe it'd be awesome if this is built right into Quasar.

It would be just one extra wrap around the function like so:

export default ({ Vue }) => {
  function show (dialogName) {
    Vue.$emit('showDialog', dialogName)
  }
  Vue.$dialog.show = show
}

So a small price to pay for Quasar's file size, but a great benefit for developers!!

[34fame]

@rstoenescu I thought I could replicate this from the brief description but cannot. Events are emitting but no dialog appears. Is there a working example of this global dialogs concept I could look at?

[pdanpdan]

@34fame please post a codepen with what you did.

[34fame]

@pdanpdan I think this demonstrates where I am...

https://codesandbox.io/s/quirky-chandrasekhar-3r4ed

[smolinari]

Fixed. The functions for global events need a "$" in front of them, so $on and $off. Plus your emitting of the event was incorrect too.

https://codesandbox.io/s/quasar-dialogs-and-global-event-bus-6211b

Scott