feat(OverlayProvider): support stacking

[Barbapapazes]

🔗 Linked issue

❓ 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

Hello 👋,

This PR introduces two variables on the dynamic component in the OverlayProvider component in order to allow clean modal stacking.

Related to https://soubiran.dev/posts/a-journey-to-craft-interactive-ui-experiences-with-dialogs

📝 Checklist

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

[benjamincanac]

Thanks @Barbapapazes! Should we add an example to the docs as well?

[Barbapapazes]

Thanks @Barbapapazes! Should we add an example to the docs as well?

Yes, I can add one!

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4360

commit: 01ca7cf

[Barbapapazes]

Thanks @Barbapapazes! Should we add an example to the docs as well?

done! (with additional refinement like preventing multiple overlays when using useOverlay)

see https://x.com/soubiran_/status/1934965903566798972 and replies with @HugoRCD

[benjamincanac]

Wouldn't it be better to provide a real case example here?

[Barbapapazes]

I change the timing to 200 to have something more realistic.

[benjamincanac]

Instead of adding all of this manually, why not add a stacked prop to the OverlayProvider component? 🤔

[Barbapapazes]

with a theme overlay-provider to allow customization?

[benjamincanac]

Yes, kinda like Toaster.vue I guess! What do you think?

[Barbapapazes]

Yes seems to be a better way

[benjamincanac]

What happens by default if we don't specify these? Just an idea but maybe we could add a stacked prop to the UModal component as well to use those animations (which would be defined inside keyframe.css)?

[Barbapapazes]

by default, it uses the animation scale-in which does not looks really great. but I agree that we can add a new props to modal with a new animation (that looks better in that specific case).

[benjamincanac]

@Barbapapazes Are you done on this or maybe do you want me to take over to finish the animation?

[Barbapapazes]

@Barbapapazes Are you done on this or maybe do you want me to take over to finish the animation?

Yes, I'm done! 👌

[benjamincanac]

@Barbapapazes Does setting stacked: true by default won't break the slideovers? 🤔

Just thinking but wouldn't it be better to use a nested prop on the Modal itself to match Drawer's behavior?

Also, I find the animation a bit weird (but I don't how to fix it right now):
https://github.com/user-attachments/assets/2300b9c5-afc8-4504-9866-4ba350597eea

[genu]

@benjamincanac @Barbapapazes is there anything blocking this?

Let me know if there is anything I can do to bring this over the finish line. 🚀

[Barbapapazes]

@benjamincanac @Barbapapazes is there anything blocking this?

Let me know if there is anything I can do to bring this over the finish line. 🚀

I'm currently on vacation for two weeks and I'm not sure I'll be able to work on it.

If you have any idea on how to implement the nested props, I'm open to any suggestions.