Emit Vue events when Disclosure is opened/closed

[ustyantsevxx]

Would be helpful if Disclosure components would emit 'opened' and 'closed' events as sometimes its critical to do something just after panel opened or closed

[kjellmf]

I needed this functionality recently and ended up with this quick hack:

<template>
  <Disclosure v-slot="{ open }">
    <DisclosureButton @click="open ? emit('closed') : emit('opened')" class="py-2">
      Is team pricing available?
    </DisclosureButton>
    <DisclosurePanel class="text-gray-500">
      Yes! You can purchase a license that you can share with your entire team.
    </DisclosurePanel>
  </Disclosure>
</template>

<script setup>
import {
  Disclosure,
  DisclosureButton,
  DisclosurePanel
} from "@headlessui/vue";

const emit = defineEmits(["opened", "closed"]);
</script>