[Bug]: Typescript errors using Listbox with vite

[mseele]

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?

N/A

Reproduction repository

https://github.com/mseele/headless-ui-ts-issue

Describe your issue

Steps to reproduce (please see my linked repo):

• run yarn create @vitejs/app my-vue-app --template vue-ts
• add tailwindcss and @headlessui/vue
• run yarn run build
• output is the following:

$ vue-tsc --noEmit && vite build
src/App.vue:2:12 - error TS2322: Type '{ id: number; name: string; unavailable: boolean; }' is not assignable to type 'null | undefined'.
  Type '{ id: number; name: string; unavailable: boolean; }' is not assignable to type 'null'.

2   <Listbox v-model="selectedPerson">
             ~~~~~~~

  node_modules/@headlessui/vue/dist/components/listbox/listbox.d.ts:26:5
    26     modelValue: null;
           ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'Partial<{ as: string; disabled: boolean; modelValue: null; }> & Omit<Readonly<{ as: string; disabled: boolean; modelValue: 
null; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "disabled" | ... 1 more ... | "modelValue"> & Omit<...> & Record<...>'

src/App.vue:7:10 - error TS2322: Type '{ id: number; name: string; unavailable: boolean; }' is not assignable to type 'string | number | undefined'.
  Type '{ id: number; name: string; unavailable: boolean; }' is not assignable to type 'number'.

7         :key="person"
           ~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1370:5
    1370     key?: string | number;
             ~~~
    The expected type comes from property 'key' which is declared here on type 'Partial<{ as: string; disabled: boolean; value: null; }> & Omit<Readonly<{ as: string; disabled: boolean; value: null; } & { class?: string | Function | undefined; className?: string | ... 1 more ... | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "disabled" | ... 1 more ... | "as"> & Om...'

src/App.vue:8:10 - error TS2322: Type '{ id: number; name: string; unavailable: boolean; }' is not assignable to type 'null | undefined'.
  Type '{ id: number; name: string; unavailable: boolean; }' is not assignable to type 'null'.

8         :value="person"
           ~~~~~

  node_modules/@headlessui/vue/dist/components/listbox/listbox.d.ts:119:5
    119     value: null;
            ~~~~~
    The expected type comes from property 'value' which is declared here on type 'Partial<{ as: string; disabled: boolean; value: null; }> & Omit<Readonly<{ as: string; disabled: boolean; value: null; } & { class?: string | Function | undefined; className?: string | ... 1 more ... | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "disabled" | ... 1 more ... | "as"> & Om...'


Found 3 errors.

[ananni13]

Also discussed here #368