Background

When using bootstrap vue, I noticed that I often end-up with a modal that I want to reuse across multiple places. For instance, I am currently trying to reproduce the Android modal style select picker, but with some added filtering for long lists of values. Basically, a modal with a dynamic list of radio buttons in it. For this I am using a lazy bootstrap modal, global to my application, that I trigger with a $root event.

Current solution

To get this to work, I had to wrap the modal in a component with a bunch of extra logic to get the context out of the event and set it into the modal when it loads. In the end, I basically wrap the show and hide methods/events.

Better solution

This feels like stuff that could be included in the bootstrap vue modal out of the box in a much more interesting way. What I would like to see is support for the vuejs scoped slots feature. That way, we could do something like this:

<!-- Assuming this modal definition -->
<b-modal id="listSelector" title="Pick a value...">
  <template slot-scope="{ foo, bar }">
    <p>{{foo}} {{bar}}</p>
  </template>
</b-modal>

<!-- We could display it in these manners... -->

<!-- Show with directive and modifier -->
<b-button v-b-modal.listSelector="{ foo: 42, bar: 'stuff' }">Pick...</b-button>

<!-- Show with directive but no modifier. -->
<!-- Can still support the old string param when no context is needed. -->
<b-button v-b-modal="{ $modal: 'listSelector', foo: 42, bar: 'stuff' }">Pick...</b-button>

<!-- Show with this.$refs.myModalRef.show({ foo: 42, bar: 'stuff' }) -->
<b-button ref="myModalRef">Pick...</b-button>

<!-- Show with <b-modal v-model="context">...</b-modal> -->
<!-- Accept any truthy value instead boolean. -->
<b-button @click="context = { foo: 42, bar: 'stuff' }">Pick...</b-button>

<!-- Show with a root event. -->
<!-- Same as the no modifier directive so accepts either a string or object. -->
<b-button @click="$root.$emit('bv::show::modal', { $modal: 'listSelector', foo: 42, bar: 'stuff' })">Pick...</b-button>

Obviously, since these modals are declared using a template, they would have to be lazy.

Thoughts

What are you thoughts? Does this looks like a good idea?
I am considering writing a wrapper for my project to enable this in my project. Would you be interested in including it inside this library or would you prefer to include the feature straight in the b-modal component?