feat(Slideovers): Allow multiple instances of programmatic slideover

[genu]

🔗 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

This PR opens the possibility to open multiple instance of the <Slideover/> component using the useSlideover() composable.

This capability was discussed in the past, so this is an attempt at such a feature.

📝 Checklist

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

[genu]

Tagging @noook for feedback

[noook]

There is an issue: Slideovers should be dismissable when clicking outside unless you explicitly prevent them from closing with the appropriate prop.

Your example components do not specify it so it should keep the original behaviour:
https://ui-9x1er5zyw-nuxt-js.vercel.app/dev/components/slideover#control-programmatically

[genu]

There is an issue: Slideovers should be dismissable when clicking outside unless you explicitly prevent them from closing with the appropriate prop.

Your example components do not specify it so it should keep the original behaviour: https://ui-9x1er5zyw-nuxt-js.vercel.app/dev/components/slideover#control-programmatically

I fixed it by listening to model changes on the modal and closing it when the model is changed. An issue I run into is that when clicking on the outside, it always closes the first one that was open, rather than the last one (i.e. the one on top).

This issue would probably happen if we implement something similar in UModal. I'm digging through how the outside click is handled in the component and see if there is anything to be done there.

@noook Open to suggestions.

[benjamincanac]

Would it be possible to apply the same changes to the useModal composable in the same PR? @noook What do you think?

[genu]

@benjamincanac I updated this PR to move it along.

A caveat that I ran into, (maybe its not a major issue?) is the preventClose attribute (which defaults to false) affects all of the slideover instances.

What this means in practice is that when preventClose is set to false, all of the slideovers on the page would respond to the close event, becaues there is no way to know "which" slideover's backdrop actually triggered the close event.

I don't think there is a way to get around this limitation at the moment without doing some gymnastics around the headlessui components.

We can document this limitation and roll with it, or wait until the next major release and deal with it then when we move to radix-vue

Let me know your thoughts.

If we decide to roll with it, I can make the same changes to the useModal composable.

[benjamincanac]

@genu Sorry for the delay!! Should we really release this with the Headless UI limitation though?

I would rather implement this only in the v3.

[genu]

I agree, not a big fan releasing a half baked solution.

I'm fine with revisiting this feature with the release of v3.

As a side note, I have been playing with vue-final-modal as a drop replacement for both useModal and useSlideover and it's been working much better than the built in compostables.

Perhaps for v3, it can be used as an inspiration.

[benjamincanac]

Should we close this then? If you want to work on this, you can make a pull request against the v3 branch already https://github.com/nuxt/ui/tree/v3 😊