fix(components): broken types for update:model-value event (#4853)

Co-authored-by: Benjamin Canac <[email protected]>

Author: J-Michalek

src/runtime/components/Checkbox.vue

@@ -48,7 +48,7 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
 }
 
 export type CheckboxEmits = {
-  change: [payload: Event]
+  change: [event: Event]
 }
 
 export interface CheckboxSlots {

src/runtime/components/CheckboxGroup.vue

@@ -60,7 +60,7 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupI
 }
 
 export type CheckboxGroupEmits = CheckboxGroupRootEmits & {
-  change: [payload: Event]
+  change: [event: Event]
 }
 
 type SlotProps<T extends CheckboxGroupItem> = (props: { item: T & { id: string } }) => any

src/runtime/components/Chip.vue

@@ -35,7 +35,7 @@ export interface ChipProps {
 }
 
 export interface ChipEmits {
-  'update:show': [payload: boolean]
+  'update:show': [value: boolean]
 }
 
 export interface ChipSlots {

src/runtime/components/ColorPicker.vue

@@ -82,6 +82,7 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
   throttle: 50,
   defaultValue: '#FFFFFF'
 })
+
 const modelValue = defineModel<string>(undefined)
 
 const appConfig = useAppConfig() as ColorPicker['AppConfig']

src/runtime/components/FileUpload.vue

@@ -96,9 +96,8 @@ export interface FileUploadProps<M extends boolean = false> {
   ui?: FileUpload['slots']
 }
 
-export interface FileUploadEmits<M extends boolean = false> {
-  'update:modelValue': [payload: M extends true ? File[] : File | null]
-  'change': [event: Event]
+export interface FileUploadEmits {
+  change: [event: Event]
 }
 
 type FileUploadFiles<M> = (M extends true ? File[] : File) | null
@@ -146,7 +145,7 @@ const props = withDefaults(defineProps<FileUploadProps<M>>(), {
   layout: 'grid',
   position: 'outside'
 })
-const emits = defineEmits<FileUploadEmits<M>>()
+const emits = defineEmits<FileUploadEmits>()
 const slots = defineSlots<FileUploadSlots<M>>()
 
 const modelValue = defineModel<(M extends true ? File[] : File) | null>()

src/runtime/components/Form.vue

@@ -54,8 +54,8 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
 }
 
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
-  submit: [payload: FormSubmitEvent<FormData<S, T>>]
-  error: [payload: FormErrorEvent]
+  submit: [event: FormSubmitEvent<FormData<S, T>>]
+  error: [event: FormErrorEvent]
 }
 
 export interface FormSlots {

src/runtime/components/Input.vue

@@ -52,7 +52,7 @@ export interface InputProps<T extends AcceptableValue = AcceptableValue> extends
 }
 
 export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
-  'update:modelValue': [payload: T]
+  'update:modelValue': [value: T]
   'blur': [event: FocusEvent]
   'change': [event: Event]
 }

src/runtime/components/InputMenu.vue

@@ -128,9 +128,9 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
 }
 
 export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
-  'change': [payload: Event]
-  'blur': [payload: FocusEvent]
-  'focus': [payload: FocusEvent]
+  'change': [event: Event]
+  'blur': [event: FocusEvent]
+  'focus': [event: FocusEvent]
   'create': [item: string]
   /** Event handler when highlighted element changes. */
   'highlight': [payload: {

src/runtime/components/InputNumber.vue

@@ -63,9 +63,9 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
 }
 
 export interface InputNumberEmits {
-  'update:modelValue': [payload: number]
+  'update:modelValue': [value: number]
   'blur': [event: FocusEvent]
-  'change': [payload: Event]
+  'change': [event: Event]
 }
 
 export interface InputNumberSlots {

src/runtime/components/PinInput.vue

@@ -41,8 +41,8 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
 }
 
 export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T> & {
-  change: [payload: Event]
-  blur: [payload: Event]
+  change: [event: Event]
+  blur: [event: Event]
 }
 
 </script>