<template>
  <blockquote ref="el">
    <slot />
  </blockquote>
</template>

<script setup lang="ts">
const attrs = useAttrs(), el = ref<HTMLQuoteElement>(), title = ref<Element | null>(null);

onMounted(() => {
  if(el && el.value && attrs.hasOwnProperty("dataCalloutFold"))
  {
    title.value = el.value.querySelector('.callout-title');
    title.value?.addEventListener('click', toggle);
  }
});
onUnmounted(() => {
  title.value?.removeEventListener('click', toggle);
})
function toggle() {
  el.value?.classList?.toggle('is-collapsed');
}
</script>