Add close emit to Popover

[thraizz]

This aligns the popover with the dialog api. Now, both share the same emit logic.

Reference in dialog.ts: https://github.com/tailwindlabs/headlessui/blob/0befd75df52da35ac66dfb1e9b365ab5b87b5b86/packages/%40headlessui-vue/src/components/dialog/dialog.ts#L79

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 19, 2024 9:28am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 19, 2024 9:28am

[thraizz]

This is kind-of superseded with #2996, this PR takes the logic from dialog.ts which is meant for outside state management, the watcher is probably cleaner.

[RobinMalfait]

Hey!

Thank you for the contribution. The big difference in API between a Dialog and a Popover is that a Dialog is fully controlled and a Popover is not controlled at all. This means that the Dialog requires an onClose in React or a close event in Vue otherwise there is no way to close the Dialog at all.

This also means that only components that you control have events or callback so that you can (and should) act upon the events.

For v2 of Headless UI we want to expose events for exposing information when internal state changes, ideally with information about why a change happened. This however is a bigger project because it applies to all the components and we have to decide on the API/naming we want to use for exposing this information.

For that reason, I'm going to close this PR for now and we will work on the API. I also wrote down your username so that we can include you as a co-author once we open some PRs for adding this information in a way that applies to all the components.

Thanks again for contributing!