fix(InputMenu/Select/SelectMenu): improve types (#2471)

test/components/InputMenu.spec.ts

@@ -5,6 +5,7 @@ import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
 import { flushPromises, mount } from '@vue/test-utils'
 import type { FormInputEvents } from '~/src/module'
+import { expectEmitPayloadType } from '../utils/types'
 
 describe('InputMenu', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -157,5 +158,66 @@ describe('InputMenu', () => {
       await flushPromises()
       expect(wrapper.text()).not.toContain('Error message')
     })
+
+    test('should have the correct types', () => {
+      // with object item
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: [{ label: 'foo', value: 'bar' }]
+      })).toEqualTypeOf<[{ label: string, value: string }]>()
+
+      // with object item and multiple
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: [{ label: 'foo', value: 1 }],
+        multiple: true
+      })).toEqualTypeOf<[{ label: string, value: number }[]]>()
+
+      // with object item and valueKey
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: [{ label: 'foo', value: 'bar' }],
+        valueKey: 'value'
+      })).toEqualTypeOf<[string]>()
+
+      // with object item and multiple and valueKey
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: [{ label: 'foo', value: 1 }],
+        multiple: true,
+        valueKey: 'value'
+      })).toEqualTypeOf<[number[]]>()
+
+      // with string item
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: ['foo']
+      })).toEqualTypeOf<[string]>()
+
+      // with string item and multiple
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: ['foo'],
+        multiple: true
+      })).toEqualTypeOf<[string[]]>()
+
+      // with groups
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: [['foo']]
+      })).toEqualTypeOf<[string]>()
+
+      // with groups and multiple
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: [['foo']],
+        multiple: true
+      })).toEqualTypeOf<[string[]]>()
+
+      // with groups, multiple and mixed types
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
+        multiple: true
+      })).toEqualTypeOf<[(string | number | { value: string } | { value: number })[]]>()
+
+      // with groups, multiple, mixed types and valueKey
+      expectEmitPayloadType('update:modelValue', () => InputMenu({
+        items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
+        multiple: true,
+        valueKey: 'value'
+      })).toEqualTypeOf<[(string | number)[]]>()
+    })
   })
 })

test/components/Select.spec.ts

@@ -5,6 +5,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
 import type { FormInputEvents } from '~/src/module'
+import { expectEmitPayloadType } from '../utils/types'
 
 describe('Select', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -166,5 +167,33 @@ describe('Select', () => {
       await flushPromises()
       expect(wrapper.text()).not.toContain('Error message')
     })
+
+    test('should have the correct types', () => {
+      // with object item
+      expectEmitPayloadType('update:modelValue', () => Select({
+        items: [{ label: 'foo', value: 'bar' }]
+      })).toEqualTypeOf<[string]>()
+
+      // with string item
+      expectEmitPayloadType('update:modelValue', () => Select({
+        items: ['foo']
+      })).toEqualTypeOf<[string]>()
+
+      // with groups
+      expectEmitPayloadType('update:modelValue', () => Select({
+        items: [['foo']]
+      })).toEqualTypeOf<[string]>()
+
+      // with groups and mixed types
+      expectEmitPayloadType('update:modelValue', () => Select({
+        items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]]
+      })).toEqualTypeOf<[string | number]>()
+
+      // with groups, mixed types and valueKey = undefined
+      expectEmitPayloadType('update:modelValue', () => Select({
+        items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
+        valueKey: undefined
+      })).toEqualTypeOf<[string | number]>()
+    })
   })
 })

test/components/SelectMenu.spec.ts

@@ -5,6 +5,7 @@ import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
 import { flushPromises, mount } from '@vue/test-utils'
 import type { FormInputEvents } from '~/src/module'
+import { expectEmitPayloadType } from '../utils/types'
 
 describe('SelectMenu', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -161,5 +162,66 @@ describe('SelectMenu', () => {
       await flushPromises()
       expect(wrapper.text()).not.toContain('Error message')
     })
+
+    test('should have the correct types', () => {
+      // with object item
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: [{ label: 'foo', value: 'bar' }]
+      })).toEqualTypeOf<[{ label: string, value: string }]>()
+
+      // with object item and multiple
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: [{ label: 'foo', value: 1 }],
+        multiple: true
+      })).toEqualTypeOf<[{ label: string, value: number }[]]>()
+
+      // with object item and valueKey
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: [{ label: 'foo', value: 'bar' }],
+        valueKey: 'value'
+      })).toEqualTypeOf<[string]>()
+
+      // with object item and multiple and valueKey
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: [{ label: 'foo', value: 1 }],
+        multiple: true,
+        valueKey: 'value'
+      })).toEqualTypeOf<[number[]]>()
+
+      // with string item
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: ['foo']
+      })).toEqualTypeOf<[string]>()
+
+      // with string item and multiple
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: ['foo'],
+        multiple: true
+      })).toEqualTypeOf<[string[]]>()
+
+      // with groups
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: [['foo']]
+      })).toEqualTypeOf<[string]>()
+
+      // with groups and multiple
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: [['foo']],
+        multiple: true
+      })).toEqualTypeOf<[string[]]>()
+
+      // with groups, multiple and mixed types
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
+        multiple: true
+      })).toEqualTypeOf<[(string | number | { value: string } | { value: number })[]]>()
+
+      // with groups, multiple, mixed types and valueKey
+      expectEmitPayloadType('update:modelValue', () => SelectMenu({
+        items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
+        multiple: true,
+        valueKey: 'value'
+      })).toEqualTypeOf<[(string | number)[]]>()
+    })
   })
 })

test/utils/types.ts

@@ -0,0 +1,13 @@
+import { expectTypeOf } from 'vitest'
+import type { VNode } from 'vue'
+
+/**
+ * Expect the type of a component emit payload.
+ */
+export function expectEmitPayloadType<T extends VNode, E extends keyof Events<T>>(_event: E, _cb: () => T) {
+  return expectTypeOf<NonNullable<Events<T>[E]>>()
+}
+
+type Events<T> = T extends { __ctx?: { props: infer Props } } ? {
+  [K in keyof Props as K extends `on${infer E}${infer Rest}` ? `${Lowercase<E>}${Rest}` : never]: NonNullable<Props[K]> extends (...args: infer P) => any ? P : never
+} : never