feat(useDialog): new function

[innocenzi]

useDialog

Description

This is a new function similar to the existing useConfirmDialog but more generic. It supports passing properties when revealed and returning a response, both typed.

const { isRevealed, reveal, close, on, properties } = useDialog<DialogProperties, DialogResult>()

reveal(/** DialogProperties **/)
close(/** DialogResult **/)

on.reveal(({ data }) => {})
on.close(({ result }) => {})

While useDialog is useful, the interesting function is makeDialogComposable, that allows for making specific composable functions for a specific dialog.

makeDialogComposable

Description

This is a new function based on useDialog, that simply returns a composable function for that dialog. This is super useful when you have multiple, application-wide, typed dialogs:

export const useLoginDialog = makeDialogComposable<PrefilledLoginForm, LoginFormResult>()
export const useRegisterDialog = makeDialogComposable<RegisterDialogResult>()
export const use2faDialog = makeDialogComposable<ChallengeData, ChallengeResult>()

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

[jd-solanki]

Can I bind reveal with modelValue to create a component using this composable?

[jd-solanki]

Moreover, I was also looking for something like this. However, one major thing missing is body scroll lock.

Do you have any idea how one can achieve that? (even without composable)

[innocenzi]

However, one major thing missing is body scroll lock.

I think body scroll lock is out of scope? The composable just gives state and functions to help creating and managing dialogs. I suggest using Headless UI for implementing the actual dialogs, it has scroll lock built-in 👍

Can I bind reveal with modelValue to create a component using this composable?

Can you show me with pseudo-code what you mean?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[innocenzi]

Is there a way to get this in VueUse v10?

[antfu]

Do you think that https://github.com/antfu/vue-template-promise (later #2957) + vuejs/core#8048 would solve this more organically?

[innocenzi]

I can explore that for the use case I was trying to solve — it's a bit of a different paradigm and it's lower-level, but it does seem like a potential solution 👍

I'll mark this PR as draft in the meantime

[innocenzi]

@antfu vue-c2c is more akin to solve this problem. This PR is definitely not worth with such a tool. I think c2c could be merged in VueUse. 👍

Just used createTemplatePromise today, but it's more for one-off dialogs inside components, while this PR and c2c allow for reusing dialogs everywhere.