feat(Slideover): open programmatically

[genu]

🔗 Linked issue

Resolves #1455

❓ 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

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

📝 Checklist

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

[benjamincanac]

@noook Since you originally created the useModal composable, would you mind having a look at this to ensure I didn't miss anything?

[noook]

LGTM.

@genu Just so you know, this implementation has the drawback that the passed props are not reactive within the slideover.

[genu]

LGTM.

@genu Just so you know, this implementation has the drawback that the passed props are not reactive within the slideover.

hmm, what needs to be changed, I thought its modeled pretty closely to useModal

If significant refactoring, perhaps defer that aspect to a later enhancement? 🤔

[noook]

@genu I don't know yet, useModal is built the same way and has the same drawback, this is something I noticed too while building it.

After thoughts, I realized that when opening the modal or the slideover, you don't really expect or have the need to have reactive props after all

[genu]

I agree, however, I'd note that I was able to use reactivity in useModal like this:

  const confirmPending = ref(false);

  modal.open(DialogConfirm, {
    title: 'Do something async?',
    description: "Are you sure you want to the async thing?",
    confirmPending,
    onConfirm: async () => {
      confirmPending.value = true;
      await doAsyncThing()
      confirmPending.value = false;
      modal.close();
    },
    onDismiss: modal.close,
  });

and in my Modal:

defineProps<{
    title: string;
    icon?: string;
    color?: string;
    description: string;
    confirmLabel?: string;
    dismissLabel?: string;
    confirmPending?: Ref<boolean>;
  }>(),

[noook]

Yes indeed, that works. I don't know to what extent passing a ref as is as a prop is correct