feat(Modal): open programmatically

[noook]

🔗 Linked issue

Resolves #285

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Following the discussion in #285, we'd like to display a modal programmatically.

• Create a useModal composable to control the displaying of a modal from a component
• Inject the modal state within the app with an injection key (stores the component to display, and a reference to its props)
• Create a ModalsContainer to include at the root-level of the app

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Feb 7, 2024 3:17pm

[benjamincanac]

Thanks for the initiative! 😊 The initial implementation looks good to me, I'd say this is the way to go.

[noook]

When calling reveal and passing props, should those props be reactive ? Meaning, if I pass a count ref in the props options, and that I keep updating it from the parent component, should the updated value be updated in the modal as well ?
In the current implementation, the second option in reveal is the UModal props, combined with the component modal custom props

ui/playground/app.vue

Lines 27 to 42 in 68e7de3

	function reveal () {
	// question: do we want the props to be reactive here ?
	modal.reveal(Test, {
	// UModal props
	fullscreen: true,
	// Test component props
	// @ts-ignore
	// count // Warning, this is an object and not a number. Reactive.
	count: count.value // Ok, but not reactive.
	})
	setTimeout(() => {
	modal.patch({
	fullscreen: false
	})
	}, 3000)
	}

If yes, how would you proceed to make the values reactive, and what would the API look like user-facing ?

[benjamincanac]

Just an idea but wouldn't it be easier to make those values reactive to pass the component and the props directly to useModal? The composable could then expose an open and close methods.

[noook]

I'm not sure, a very basic usecase would be to open a modal A or B given a branch in your code. And as a composable should be called during the setup function, you can't know at this moment what modal you would like to display.

Options could be passed to useModal, but maybe not the ModalComponent and its props

const modal = useModal()

if (success) {
  modal.open(ModalSuccess, data)
} else {
  modal.open(ModalError, error)
}

[benjamincanac]

Yeah my solution would require to instantiate useModal multiple times, it was just an idea. Maybe we can start like this and improve with reactivity later on?

[noook]

Demo of nested modals using useModal
https://github.com/nuxt/ui/assets/19751938/57188536-bbde-4747-a5cf-73ee062b0519

[benjamincanac]

Amazing work, thanks a lot!! 🎉😊

[benjamincanac]

@noook I had to rename the Modals component to Modals.client.vue: ade99a8 to make it client-only otherwise I was having errors about modalState.component with modalState being null when refreshing the page. Let me know if this is the right fix, not sure about this!

[noook]

I made sure to have div as the default component for this reason. However it makes total sense to have it client only anyway.

[yulafezmesi]

hey @noook! look forward this for a long time, great job!

one more suggestion, can you add async/await support? like useConfirmDialog

also would be awesome if we open nested modals. currently it supports only one modal, right?

please let me know your thoughts, if look forward to contribute if agreed with me!

https://vueuse.org/core/useConfirmDialog/

[noook]

@yulafezmesi It does support nested modal. You have two ways of achieving it:

// app.vue
const modal = useModal()
modal.open(YourModal)

// YourModal.vue
modal.open(AnotherModal) // This will swap the component displayed, and will briefly close then reopen the modal

You can check the demo here: https://github.com/nuxt/ui/assets/19751938/57188536-bbde-4747-a5cf-73ee062b0519

The second way of achieving it is with the events listener:

// app.vue
const modal = useModal()
modal.open(YourModal, {
  // prop and emit types inferred from your component :)
  onConfirm() {
    modal.open(AnotherModal)
  }
})

// YourModal.vue
const props = defineProps<{
  confirm: []
}>()

const onConfirm = () => emit('confirm')

The second example demonstrates perfectly how you could handle a callback when clicking on a confirm button within your component. This mimics the behaviour of https://vueuse.org/core/useConfirmDialog/, except it does not use async/await.

If you really need to await something from the modal, I think you could wrap it like this:

const modal = useModal()

function openConfirmModal() {
  return new Promise((resolve, reject) => {
    modal.open(YourConfirmModal, {
      onConfirm: (eventArg) => resolve(eventArg),
      onClose: () => reject()
    })
  })
}

async function start() {
  try {
    await openConfirmModal()
    console.log('user did confirm')
  } catch {
    console.log('user did not confirm')
  }
}

[yulafezmesi]

@noook that you for the work around, totally make sense to async usage like this. however, really wondering swapping components causes losing state for previous component? I mean i can easly back to old component where the trigger second modal?

[noook]

The component should get destroyed. Also, the current implementation limits us to open a modal with unreactive props.

If saving the state is part of your feature, maybe the usage of a store should be relevant here

[yulafezmesi]

what i want to achieve by nested modals basically this:

Screen.Recording.2024-02-09.at.23.11.18.mov

[noook]

Oh this is not possible at all with the current implementation sorry. Earlier I meant chained instead of nested

[yulafezmesi]

wouldn't be nice if can get support this? i'm thinking we can use array of modalState. wondering your thoughts.

[anthonyfranc]

@noook -- Is there a way to close the modal from another component?
modal.close(component) seems to forcefully close rather than fade like normal modal behavior.

[noook]

@anthonyfranc i need to check. I think the reason why this is happening is because I don't let elapse enough time before reseting the modal state's component

[avinean]

@noook nice feature.
But the fact that nesting is impossible makes me sad.
Do you plan to make nesting possible?
I mean to make this possible #1319 (comment)

[noook]

@avinean Feel free to open an issue so we can discuss it there instead. As of now I don't have anything in mind regarding the implementation of this feature

[anthonyfranc]

@anthonyfranc i need to check. I think the reason why this is happening is because I don't let elapse enough time before reseting the modal state's component

Did you happen to figure out the issue with this?

[professorhaseeb]

@yulafezmesi It does support nested modal. You have two ways of achieving it:

// app.vue
const modal = useModal()
modal.open(YourModal)

// YourModal.vue
modal.open(AnotherModal) // This will swap the component displayed, and will briefly close then reopen the modal

You can check the demo here: https://github.com/nuxt/ui/assets/19751938/57188536-bbde-4747-a5cf-73ee062b0519

this example closes the parent modal, and opens then nested modal, and breaks the app.

[jheredev]

Hello, any solution to this problem?

[larsjanssen6]

@yulafezmesi It does support nested modal. You have two ways of achieving it:

// app.vue
const modal = useModal()
modal.open(YourModal)

// YourModal.vue
modal.open(AnotherModal) // This will swap the component displayed, and will briefly close then reopen the modal

You can check the demo here: https://github.com/nuxt/ui/assets/19751938/57188536-bbde-4747-a5cf-73ee062b0519

this example closes the parent modal, and opens then nested modal, and breaks the app.

It works like this:

modal.open(ModalUpgrade, {
      title: "Upgrade your account",
      description:
        "You need to upgrade your account to create more workspaces.",
      async onUpgrade() {
        await modal.reset();
        modal.open(ModalSubscription);
      },
    });

Note: Async await