Add Vue emit types (#712)

* Add Vue emit types

* ensure value is a boolean

Even though we only use `false` for now

* add Vue emit types for Tabs component

* update changelog

Co-authored-by: henribru <[email protected]>

Author: RobinMalfait

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixes
 
 - Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
+- Add Vue emit types ([#679](https://github.com/tailwindlabs/headlessui/pull/679), [#712](https://github.com/tailwindlabs/headlessui/pull/712))
 
 ## [@headlessui/react@v1.4.0] - 2021-07-29
 

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -74,7 +74,7 @@ export let Dialog = defineComponent({
     open: { type: [Boolean, String], default: Missing },
     initialFocus: { type: Object as PropType<HTMLElement | null>, default: null },
   },
-  emits: ['close'],
+  emits: { close: (_close: boolean) => true },
   render() {
     let propsWeControl = {
       // Manually passthrough the attributes, because Vue can't automatically pass

packages/@headlessui-vue/src/components/listbox/listbox.ts

@@ -79,7 +79,7 @@ function useListboxContext(component: string) {
 
 export let Listbox = defineComponent({
   name: 'Listbox',
-  emits: ['update:modelValue'],
+  emits: { 'update:modelValue': (_value: any) => true },
   props: {
     as: { type: [Object, String], default: 'template' },
     disabled: { type: [Boolean], default: false },

packages/@headlessui-vue/src/components/radio-group/radio-group.ts

@@ -60,7 +60,7 @@ function useRadioGroupContext(component: string) {
 
 export let RadioGroup = defineComponent({
   name: 'RadioGroup',
-  emits: ['update:modelValue'],
+  emits: { 'update:modelValue': (_value: any) => true },
   props: {
     as: { type: [Object, String], default: 'div' },
     disabled: { type: [Boolean], default: false },

packages/@headlessui-vue/src/components/switch/switch.ts

@@ -59,7 +59,7 @@ export let SwitchGroup = defineComponent({
 
 export let Switch = defineComponent({
   name: 'Switch',
-  emits: ['update:modelValue'],
+  emits: { 'update:modelValue': (_value: boolean) => true },
   props: {
     as: { type: [Object, String], default: 'button' },
     modelValue: { type: Boolean, default: false },

packages/@headlessui-vue/src/components/tabs/tabs.ts

@@ -52,7 +52,9 @@ function useTabsContext(component: string) {
 
 export let TabGroup = defineComponent({
   name: 'TabGroup',
-  emits: ['change'],
+  emits: {
+    change: (_index: number) => true,
+  },
   props: {
     as: { type: [Object, String], default: 'template' },
     defaultIndex: { type: [Number], default: 0 },

packages/@headlessui-vue/src/components/transitions/transition.ts

@@ -145,7 +145,12 @@ export let TransitionChild = defineComponent({
     leaveFrom: { type: [String], default: '' },
     leaveTo: { type: [String], default: '' },
   },
-  emits: ['beforeEnter', 'afterEnter', 'beforeLeave', 'afterLeave'],
+  emits: {
+    beforeEnter: () => true,
+    afterEnter: () => true,
+    beforeLeave: () => true,
+    afterLeave: () => true,
+  },
   render() {
     if (this.renderAsRoot) {
       return h(
@@ -357,7 +362,12 @@ export let TransitionRoot = defineComponent({
     leaveFrom: { type: [String], default: '' },
     leaveTo: { type: [String], default: '' },
   },
-  emits: ['beforeEnter', 'afterEnter', 'beforeLeave', 'afterLeave'],
+  emits: {
+    beforeEnter: () => true,
+    afterEnter: () => true,
+    beforeLeave: () => true,
+    afterLeave: () => true,
+  },
   render() {
     let { show, appear, unmount, ...passThroughProps } = this.$props
     let sharedProps = { unmount }