<template>
    <Transition
        @enter="onEnter"
        @after-enter="onAfterEnter"
        @before-leave="onBeforeLeave"
        @leave="onLeave"
    >
        <div v-show="open" class="flex transition-[height] overflow-hidden"><slot /></div>
    </Transition>
</template>
<script setup>
const props = defineProps({
    open: {
        type: Boolean,
        default: true
    }
})
function onEnter(_el, done) {
    const el = _el
    el.style.height = '0'
    el.offsetHeight
    el.style.height = el.scrollHeight + 'px'
    el.addEventListener('transitionend', done, { once: true })
}
function onBeforeLeave(_el) {
    const el = _el
    el.style.height = el.scrollHeight + 'px'
    el.offsetHeight
}
function onAfterEnter(_el) {
    const el = _el
    el.style.height = 'auto'
}
function onLeave(_el, done) {
    const el = _el
    el.style.height = '0'
    el.addEventListener('transitionend', done, { once: true })
}
</script>
