Quasar: [v1] Dialog Plugin - custom component

Created on 15 Feb 2019 · 10Comments · Source: quasarframework/quasar

The docs says "The advantage of using Dialogs as Quasar Plugins as opposed to as Components is that the plugin can also be called from outside of Vue space and doesn’t requires you to manage their templates. But as a result, their customization cannot be compared to their component counterpart.". Why can't I use Dialog Plugin with a custom component? e.g. this.$q.dialog({component: MyComponent, props}) would be the best of both worlds

Source

lucasfernog

👍4

Most helpful comment

Will be available in beta.20.

Example of usage:

this.$q.dialog({
  component: DialogComponent,
  // props forwarded to component:
  text: 'gigi'
}).onOk(() => {
  console.log('OK')
}).onCancel(() => {
  console.log('Cancel')
}).onDismiss(() => {
  console.log('Triggered on both OK and Cancel')
})

The API for the custom component will be detailed in docs in a subsequent commit.

rstoenescu on 28 Apr 2019

❤11

All 10 comments

This is actually really great idea, I like it 😉 It allows better separation of component and dialog logic.

I often find myself adding dialog tags with v-model="isShowing" just because I need to show a little bit more stuff in it. But it spreads bunch of dialog logic into multiple places in the parent component which usually doesn't use the dialog all that much.

I really like to use the $q.dialog injection because it keeps the dialog logic in one place and has more "flowing" syntax, which I think suits dialogs better than v-model approach.

I don't know how much is this possible, but I would like it ;) Just my 2 cents.

panstromek on 16 Feb 2019

👍2

On dialog plugin, add icon (to be beauty) and add custom component on input/content slot... Eg: myInputMoney

See Vue-Swal example:
https://jsfiddle.net/anteriovieira/8nawdjs7

frankdors on 10 Apr 2019

Will be available in beta.20.

Example of usage:

this.$q.dialog({
  component: DialogComponent,
  // props forwarded to component:
  text: 'gigi'
}).onOk(() => {
  console.log('OK')
}).onCancel(() => {
  console.log('Cancel')
}).onDismiss(() => {
  console.log('Triggered on both OK and Cancel')
})

The API for the custom component will be detailed in docs in a subsequent commit.

rstoenescu on 28 Apr 2019

❤11

Very nice! Quasar is really on another level.

lucasfernog on 28 Apr 2019

👍1

THIS IS AWESOME!!!!

Related is my previous thread #3471 . It brings QDialog much closer to something I wanted!!

mesqueeb on 1 May 2019

BTW,

Maybe the "required" methods we need to add can be provided by Quasar as well via a mixin?

Eg.

import { QDialogMethods } from 'quasar'

export default {
  name: 'my-custom-dialog',
  mixins: [QDialogMethods],
  // ...
}

mesqueeb on 1 May 2019

@mesqueeb Well, you don't gain much. The example that I've put in docs shows the interface, but you can tweak whatever you want. You are only required to emit those events ('hide', 'ok') and have a show() and hide() methods, but these methods can do anything you want.. The imagination is the limit :)

rstoenescu on 1 May 2019

@rstoenescu looks like Dialog plugin is broken with beta20. Check this: https://forum.quasar-framework.org/topic/3537/v1-dialog-plugin-persistent-property-does-not-work-quasar-1-0-0-beta-20