Closing popouts (one or all) programmatically

[kalnode]

Hey just thought I'd share my implementation.

I have a custom component "flyout" which I use for all popups/tooltips in my app. Within "flyout" I have an instance of this library (v-tooltip) and at any time I could load up another tooltip library.

PROBLEM: In my app I also have modals-with-fullscreen-dimmed-backgrounds which captured all clicks and therefore inhibited my flyouts (v-tooltip instances) from closing (via an outside-click). So I would have annoying flyouts remaining open in the background while the user navigates a modal.

SOLUTION: Using an event bus I broadcast (from anywhere in the app) a "flyout-close" command which the flyout component is listening to, and consequently closes itself. I use $refs to set the isOpen variable.

On a side note, this library does have a Close Directive but I didn't see a clear way to make use of this programmatically. Does anyone know?

Anywhere in my app:

import { UIBus } from "./eventbus"

export default {
//...
    methods: {
        closeFlyouts(value) {
            UIBus.$emit('flyouts-close')
        }
//...

In my "flyout" component:

<template>
    <div>
        <v-popover ref="myPopover" :popperOptions="{ modifiers: { preventOverflow: { boundariesElement: 'window' } } }">      
            <slot name="button" />
            <template slot="popover">
                <slot name="content" />
            </template>
        </v-popover>
    </div>
</template>

<script>
import Vue from "vue"
import { VTooltip, VPopover, VClosePopover } from "v-tooltip"
import { UIBus } from "../eventbus.js"

Vue.directive("tooltip", VTooltip)
Vue.directive("close-popover", VClosePopover)
Vue.component("v-popover", VPopover)

export default {
    name: "Flyout",

    props: {
        item: Object
    },

    mounted() {
        UIBus.$on('flyouts-close', () => {
            this.$refs.myPopover.isOpen = false
        })
    }
    
}
</script>