[Feature Request] $root.$emit('bv::toggle::modal', 'idOfModal')

[vesper8]

I am porting over from using https://github.com/euvl/vue-js-modal to using bootstrap-vue's modal and one thing I'm missing is that this other project had a means of programatically showing/hiding modals as well as a means of "toggling" modals

I need this because I use keyboard shortcuts to open modals and I want to be able to press the letter "A" and it will open a model if it's not opened, and if it is opened then it will close it.. effectively toggling it

Currently it seems you can only show or hide by using

this.$root.$emit('bv::show::modal', 'idOfModal')
and
this.$root.$emit('bv::hide::modal', 'idOfModal')

Since I created a single "modal" component which implements b-modal and I create all my modals by extending this component, I was easily able to add this functionality like this:

<template>
  <b-modal
    :id="id"
    v-model="shown"
    @shown="onShown"
    @hidden="onHidden"
  >
    <slot />
  </b-modal>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: () => '',
    },
  },

  data() {
    return {
      shown: false,
    };
  },

  mounted() {
    Bus.$on('toggle_modal', (modalId) => {
      if (this.id === modalId) {
        this.shown = !this.shown;
      }
    });
  },

  beforeDestroy() {
    Bus.$off('toggle_modal');
  },

  methods: {
    onShown() {
      this.$emit('opened');
    },

    onHidden() {
      this.$emit('closed');
    },
  },
};
</script>

but it would be nice if "toggle" was included in a future release

thanks!

[tmorehouse]

I think this would be possible. We could add both a toggle() method and a toggle $root event.

The current way would be to use a v-model for show and toggle the value from true to false and vice versa (i.e. modalShow = !modalShow)