Improve ListboxOption and ComboboxOption types (#2067)

* improve `ListboxOption` and `ComboboxOption` types * update changelog
tailwindlabs · Dec 5, 2022 · ef3e154 · ef3e154
1 parent 9ef269e
commit ef3e154
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -15,7 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve syncing of the `ComboboxInput` value ([#2042](https://github.com/tailwindlabs/headlessui/pull/2042))
 - Fix crash when using `multiple` mode without `value` prop (uncontrolled) for `Listbox` and `Combobox` components ([#2058](https://github.com/tailwindlabs/headlessui/pull/2058))
 - Allow passing in your own `id` prop ([#2060](https://github.com/tailwindlabs/headlessui/pull/2060))
-- Add `null` as a valid type for Listbox and Combobox in Vue ([#2064](https://github.com/tailwindlabs/headlessui/pull/2064))
+- Add `null` as a valid type for Listbox and Combobox in Vue ([#2064](https://github.com/tailwindlabs/headlessui/pull/2064), [#2067](https://github.com/tailwindlabs/headlessui/pull/2067))
 
 ## [1.7.4] - 2022-11-03
 

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -124,7 +124,12 @@ export let Combobox = defineComponent({
       >,
       default: undefined,
     },
-    defaultValue: { type: [Object, String, Number, Boolean], default: undefined },
+    defaultValue: {
+      type: [Object, String, Number, Boolean] as PropType<
+        object | string | number | boolean | null
+      >,
+      default: undefined,
+    },
     name: { type: String },
     nullable: { type: Boolean, default: false },
     multiple: { type: [Boolean], default: false },
@@ -993,7 +998,11 @@ export let ComboboxOption = defineComponent({
   name: 'ComboboxOption',
   props: {
     as: { type: [Object, String], default: 'li' },
-    value: { type: [Object, String, Number, Boolean] },
+    value: {
+      type: [Object, String, Number, Boolean] as PropType<
+        object | string | number | boolean | null
+      >,
+    },
     disabled: { type: Boolean, default: false },
   },
   setup(props, { slots, attrs, expose }) {

diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -126,7 +126,12 @@ export let Listbox = defineComponent({
       >,
       default: undefined,
     },
-    defaultValue: { type: [Object, String, Number, Boolean], default: undefined },
+    defaultValue: {
+      type: [Object, String, Number, Boolean] as PropType<
+        object | string | number | boolean | null
+      >,
+      default: undefined,
+    },
     name: { type: String, optional: true },
     multiple: { type: [Boolean], default: false },
   },
@@ -679,7 +684,11 @@ export let ListboxOption = defineComponent({
   name: 'ListboxOption',
   props: {
     as: { type: [Object, String], default: 'li' },
-    value: { type: [Object, String, Number, Boolean] },
+    value: {
+      type: [Object, String, Number, Boolean] as PropType<
+        object | string | number | boolean | null
+      >,
+    },
     disabled: { type: Boolean, default: false },
     id: { type: String, default: () => `headlessui-listbox.option-${useId()}` },
   },