Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mesqueeb opened this Issue Mar 5, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@mesqueeb
Copy link
Contributor

commented Mar 5, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 5, 2019

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 ;)

@rstoenescu rstoenescu closed this Mar 5, 2019

@mesqueeb

This comment has been minimized.

Copy link
Contributor Author

commented Mar 8, 2019

@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!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.