feat(OverlayProvider): support stacking #4360
Conversation
benjamincanac
changed the title
There was a problem hiding this comment.
Thanks @Barbapapazes! Should we add an example to the docs as well?
Co-authored-by: Benjamin Canac <[email protected]>
Yes, I can add one! |
commit: |
done! (with additional refinement like preventing multiple overlays when using see https://x.com/soubiran_/status/1934965903566798972 and replies with @HugoRCD |
| <template> | ||
| <UModal | ||
| title="A Modal" | ||
| :ui="{ footer: 'justify-end', content: 'data-[state=open]:animate-[light-slide-in-from-bottom_600ms_ease-out] data-[state=closed]:animate-[light-slide-out-to-bottom_600ms_ease-in]' }" |
There was a problem hiding this comment.
Wouldn't it be better to provide a real case example here?
There was a problem hiding this comment.
I change the timing to 200 to have something more realistic.
docs/content/3.components/modal.md
Outdated
|
|
||
| ```ts | ||
| { | ||
| overlay: { |
There was a problem hiding this comment.
Instead of adding all of this manually, why not add a stacked prop to the OverlayProvider component? 🤔
There was a problem hiding this comment.
with a theme overlay-provider to allow customization?
There was a problem hiding this comment.
Yes, kinda like Toaster.vue I guess! What do you think?
There was a problem hiding this comment.
Yes seems to be a better way
Barbapapazes
force-pushed
the
feat/support-overlay-stacking
branch
from
de9f13a to
82e615f
Compare
🔗 Linked issue
❓ Type of 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