From d60d2a558fc92c3d8e1241983deb3b55a1b965db Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 2 Aug 2021 14:37:45 +0200 Subject: [PATCH] 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 <6639509+henribru@users.noreply.github.com> --- CHANGELOG.md | 1 + .../src/components/dialog/dialog.ts | 2 +- .../src/components/listbox/listbox.ts | 2 +- .../src/components/radio-group/radio-group.ts | 2 +- .../src/components/switch/switch.ts | 2 +- .../@headlessui-vue/src/components/tabs/tabs.ts | 4 +++- .../src/components/transitions/transition.ts | 14 ++++++++++++-- 7 files changed, 20 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a34b450b19..0263eca7f7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts index 04103fac8b..346e7deaa3 100644 --- a/packages/@headlessui-vue/src/components/dialog/dialog.ts +++ b/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, default: null }, }, - emits: ['close'], + emits: { close: (_close: boolean) => true }, render() { let propsWeControl = { // Manually passthrough the attributes, because Vue can't automatically pass diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts index 94184f6275..d431f1b664 100644 --- a/packages/@headlessui-vue/src/components/listbox/listbox.ts +++ b/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 }, diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts index e332b8e940..dba087a802 100644 --- a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts +++ b/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 }, diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts index 033ab7ff0c..ae202f8786 100644 --- a/packages/@headlessui-vue/src/components/switch/switch.ts +++ b/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 }, diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts index b13361e9b7..7c50ac0145 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.ts +++ b/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 }, diff --git a/packages/@headlessui-vue/src/components/transitions/transition.ts b/packages/@headlessui-vue/src/components/transitions/transition.ts index 02ba8b8cb5..baed2a359f 100644 --- a/packages/@headlessui-vue/src/components/transitions/transition.ts +++ b/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 }