Add apparent way to capture emits when using $q.dialog

[uglyluigi]

As of now, there isn't an ergonomic way to capture custom events emitted from dialogs when using $q.dialog. In the past, it was recommended to pass functions as props to the dialog as a workaround. This is unnecessary and becomes really messy when using Quasar with TypeScript and Vue 3's composition API.

Example of the pain point:

I have a dialog created thru $q.dialog() that is used to set some settings for a game board. Right now, it can emit whatever events it wants, but you can only set callbacks to quasar dialog's default emits, making custom emits basically useless. Following past recommendations, you end up with this:

(in the dialog component)

const props = defineProps<{
	onSettingsOK: (settings: BoardSettings) => void,
}>();

BoardSettings is just a basic object that holds some numbers and booleans. In the component that hosts the dialog:

$q
  .dialog({
	  component: SubmitHanjieDialog,
	  componentProps: {
		  onSettingsOK: (val: BoardSettings) => {
			  const { width, height, showGridLines, showCoordinates } = val;
			  this.width = width;
			  this.height = height;
			  this.showGridLines = showGridLines;
			  this.showCoordinates = showCoordinates;
		  },
	  },
  })
  .onOk(() => {
	  // console.log('OK')
  })
  .onCancel(() => {
	  // console.log('Cancel')
  })
  .onDismiss(() => {
	  // console.log('I am triggered on both OK and Cancel')
  });

Besides not working as intended, it's not really obvious what I need to type things. Plus, it's unnecessary, and does not make it obvious where behavior is supposed to be triggered. I have two proposals for allowing parent components to listen to custom events from dialogs simple.

Say you define your emits like this:

const emit = defineEmits<{
	(e: "ok", event: any): void;
	(e: "hide", event: any): void;
	(e: 'updateSettings', settings: BoardSettings): void;
        (e: 'doOtherThing', event: any): void;
}>();

Those first 2 are the default emits provided and hooked by quasar. The third one is a custom emit that I would like to use. I have thought of 2 different ways to do this:

Option 1: Dialog option - kind of Options API-flavored:

$q
.dialog({
    component: Component,
    componentProps: {...},
    emits: {
	'updateSettings': function(event) {
	    ...
	},

	'doOtherThing': function(event) {
	    ...
	}
    }
})

Option 2:

$q
.dialog({
    component: Component,
    componentProps: {...},
})
.onOK(...)
.onCancel(...)
.on({
    'updateSettings': function(event) {...},
    'doOtherThing': function(event) {...},
})

Thoughts?

[pdanpdan]

The dialog can only have two exit points: onCancel and onOk
onCancel is a dead-end (cancel) and onOk can have payload - so put whatever you need in the payload and act based on that.
It looks like you want to implement onA, onB, onX instead of onLetter(letter) as a system of events

And if using typescript it would be really nice because you can use a discriminant in the payload

[drahkrub]

Would be a great extension for custom dialogs! And I like both options/ideas. Even something (maybe simpler) like

$q.dialog({...})
.onOK(...)
.onCancel(...)
.onMessage(...) // for arbitrary messages in between from dialog to parent component without closing the dialog

would be very useful.

[metalsadman]

imho, what the OP's doing with componentProps is already viable for such usecase. https://codepen.io/metalsadman/pen/RwJqgXp

[drahkrub]

In vue passing down functions a props is usually considered as an anti-pattern. But you are right, in this special case its a viable workaround.

[drahkrub]

for completeness: Also the following is possible:

// inside the dialog:

const emit = defineEmits([...useDialogPluginComponent.emits]);

// and later on do not call onDialogOK(payload) which closes the dialog, instead just emit "ok" with payload:

emit('ok', payload);

// and in the component which opens the dialog:

$q.dialog({
    component: ...
  }).onOk((payload: unknown) => {
    console.log('payload', payload);
  });

Works, but I don't like it very much. Passing down a function as prop is not vue-like but it looks cleaner to me.

[rstoenescu]

Check the answer marked as correct pls

[BenJackGill]

I found this while searching a related issue. In case anyone comes along later on this is now possible using componentProps as shown here in the docs: https://quasar.dev/quasar-plugins/dialog#invoking-custom-component

Can mark this one as answered I think.

[rstoenescu]

And supplying function(s) as componentProps that your dialog component can call

[drahkrub]

as I said, that's way cleaner than my "emit-ok-hack", but still

...even though it can be tempting to pass functions as props in Vue, it's considered an anti-pattern.

(quote from Michael Thiessen)