Dynamic Dialog - data and typescript

[phijma-leukeleu]

Currently you can pass data when you want to open a dialog:

const dialog = useDialog()

dialog.open(SomeComponent, { data: { someProp } })

Is it possible to make this work with typescript? In this case: SomeComponent needs someProp, so auto completion would be preferred.

[antoniogiroz]

I've used this approach:

import type { Component } from 'vue';
import type { DynamicDialogOptions } from 'primevue/dynamicdialogoptions';

/**
 * vue-component-type-helpers
 * Copy from https://github.com/vuejs/language-tools/tree/master/packages/component-type-helpers
 */
export type ComponentProps<T> = T extends new () => {
  $props: infer P;
} ? NonNullable<P> : T extends (props: infer P, ...args: any) => any ? P : unknown;

export interface DialogOptions<T extends Component> extends DynamicDialogOptions {
  data?: ComponentProps<T>;
}

[filipbekic01]

That's too much boilerplate, we definitely need easier way to define data type.

[phijma-leukeleu]

For now I'm just using the render function..

const dialog = useDialog()

dialog.open(h(SomeComponent, { someProp }))