<!--
    #VUE3 Done
-->

<template>
    <px-transition-expand :duration="duration">
        <div v-show="expanded" style="position: relative">
            <slot />
        </div>
    </px-transition-expand>
</template>

<script>
import PxTransitionExpand from './PxTransitionExpand.vue';

export default {
    name: 'px-expander',
    components: { PxTransitionExpand },
    props: {
        /**
         * If true the child content will be visible.
         */
        expanded: { type: Boolean, default: null },

        /**
         * Override the transition duration (in seconds)
         */
        duration: { type: Number, default: null },
    },
    emits: ['update:expanded'],
    data() {
        return {
            expandedValue: this.expanded,
        };
    },
    watch: {
        expanded(nv) {
            this.expandedValue = nv;
        },
        expandedValue(nv) {
            this.$emit('update:expanded', nv);
        },
    },
    methods: {
        expand() {
            this.expandedValue = true;
        },
        collapse() {
            this.expandedValue = false;
        },
        toggle() {
            this.expandedValue = !this.expandedValue;
        },
    },
};
</script>
