<template>
    <b-dropdown @shown="shown"
                @hidden="hidden"
                :variant="variant"
                :size="size"
                ref="dd"
                :block="block">
        <template v-slot:button-content>
            <slot name="button"></slot>
        </template>
        <slot></slot>
    </b-dropdown>
</template>
<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        },
        variant: {
            type: String,
            default: 'primary'
        },
        size: {
            type: String,
            default: null       // null or sm or lg
        },
        block: {
            default: false
        }
    },
    data() {
        return {
            visible: this.value
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.refresh();
        });
    },
    methods: {
        shown() {
            this.visible = true;
            this.$emit('input', true);
        },
        hidden() {
            this.visible = false;
            this.$emit('input', false);
        },
        refresh() {
            if (this.visible) {
                this.$refs.dd.show();
            } else {
                this.$refs.dd.hide();
            }
        }
    },
    watch: {
        value() {
            if (this.visible != this.value) {
                this.visible = this.value;
                this.refresh();
            }
        }
    }
}
</script>