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

[genu]

@noook Thanks for the comments, I made most changes.

I'm thinking, would it make better sense to create instances without open?

This would allow us do declare instances like this:

const slideover = useSlideover()
const slideoverA = slideover.create(SlideoverExampleComponent)

const openSlideover = () => {
  const slideoverA = slideover.open()
}

const doSomethingElse = () => {
   slideOverA.patch({..})
}

const doAnotherThing = () => {
   slideOverA.close()
}

[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.