24 lines
680 B
Vue
24 lines
680 B
Vue
<script setup>
|
|
const item = inject('accordionItem');
|
|
const contentHeight = ref(0);
|
|
const content = ref(null);
|
|
|
|
watch(item.hidden, () => {
|
|
if (!item.hidden.value) {
|
|
setTimeout(() => {
|
|
contentHeight.value = content.value.offsetHeight;
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :id="`vueless-${item.index}`" role="region" :aria-labelledby="`vueless-${item.index}`" class="vl-accordion-content"
|
|
:style="`--vueless-accordion-content-height: ${contentHeight}px`"
|
|
:data-state="(item.isOpen.value) ? 'open' : 'closed'"
|
|
@animationend="(!item.isOpen.value) ? item.hidden.value = true : ''" :hidden="item.hidden.value">
|
|
<div ref="content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template> |