<!--
    #VUE3 Done

    Base class that provides a single visible property / data value this is sync capable. Also
    provides show/hide/toggle methods. Override the visible prop to change the default state.
-->

<script>
export default {
    props: {
        visible: { default: false },
    },
    data() {
        return {
            // mirrors visible
            visibleValue: this.visible,
        };
    },
    watch: {
        visible(nv) {
            // update visibleValue when visible changes
            this.visibleValue = nv;
        },

        visibleValue(nv) {
            // emit update when visibleValue changes (enables .sync on parent)
            this.$emit('update:visible', nv);
        },
    },
    methods: {
        show() {
            this.visibleValue = true;
        },
        hide() {
            this.visibleValue = false;
        },
        toggle() {
            this.visibleValue = !this.visibleValue;
        },
    },
};
</script>
