Typescript error on Switch and Listbox v-model in VSCode using Volar

[ananni13]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.1.0

What browser are you using?

Chrome

Reproduction repository

https://github.com/ananni13/test-headlessui

So this is just an IDE issue, in VSCode (using Volar), v-model on the Switch component shows this error:

[pingustar]

I have the same issue and it is causing my build to fail because of tsc.

[pingustar]

@RobinMalfait

Would you like a PR to fix this?

I think this should fix it:

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

Line 64 in 0534b2e

modelValue: { type: [Object, Boolean], default: null },

change this:

modelValue: { type: [Object, Boolean], default: null },

to:

modelValue: { type: Boolean, default: false },

[RobinMalfait]

@pingustar that would be awesome, can you create a PR against the develop branch?

[ananni13]

I also tried Listbox and RadioGroup (I think those are the only other components that use v-model so far).
I updated the demo repository as well, copying the examples directly from the docs.

Listbox shows the same type of error as Switch:

And there's also a problem with ListboxOption value prop:

RadioGroup and RadioGroupOption show no errors, v-model is recognized as modelValue?: unknown and value as value?: unknown.

[ananni13]

Looks like the difference between Listbox and RadioGroup is here:

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

Lines 62 to 69 in 0534b2e

	export let RadioGroup = defineComponent({
	name: 'RadioGroup',
	emits: ['update:modelValue'],
	props: {
	as: { type: [Object, String], default: 'div' },
	disabled: { type: [Boolean], default: false },
	modelValue: { type: [Object, String, Number, Boolean] },
	},

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

Lines 230 to 238 in 0534b2e

	export let RadioGroupOption = defineComponent({
	name: 'RadioGroupOption',
	props: {
	as: { type: [Object, String], default: 'div' },
	value: { type: [Object, String, Number, Boolean] },
	disabled: { type: Boolean, default: false },
	class: { type: [String, Function], required: false },
	className: { type: [String, Function], required: false },
	},

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

Lines 75 to 82 in 0534b2e

	export let Listbox = defineComponent({
	name: 'Listbox',
	emits: ['update:modelValue'],
	props: {
	as: { type: [Object, String], default: 'template' },
	disabled: { type: [Boolean], default: false },
	modelValue: { type: [Object, String, Number, Boolean], default: null },
	},

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

Lines 444 to 452 in 0534b2e

	export let ListboxOption = defineComponent({
	name: 'ListboxOption',
	props: {
	as: { type: [Object, String], default: 'li' },
	value: { type: [Object, String], default: null },
	disabled: { type: Boolean, default: false },
	class: { type: [String, Function], required: false },
	className: { type: [String, Function], required: false },
	},

RadioGroup doesn't have a default for modelValue (and value), so in the generated declaration file they are typed as unknown instead of null.