vee-validate icon indicating copy to clipboard operation
vee-validate copied to clipboard

Keep generic aspect of SubmissionHandler in FormSlotProps

Open quentinboudinel opened this issue 1 year ago • 2 comments

Is your feature request related to a problem? Please describe.

In the following scenario:

<script setup lang="ts">
import type { MyGenericObject } from '@/types' // MyGenericObject extends GenericObject

function onSubmit(values: MyGenericObject) {}
</script>

<template>
  <Form v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit($event, onSubmit)"></form>
  </Form>
</template>

My type checker doesn't agree with me defining the values param of the onSubmit function param as anything else than GenericObject and this because FormSlotProps is not generic and its property handleSubmit is defined strictly as SubmissionHandler (with no generic params)

Describe the solution you'd like

I would like to be able to define my submission handler as previously described without type checker error.

Describe alternatives you've considered

I think redefining

type FormSlotProps = UnwrapRef<Pick<FormContext, 'meta' | 'errors' | 'errorBag' | 'values' | 'isSubmitting' | 'isValidating' | 'submitCount' | 'validate' | 'validateField' | 'handleReset' | 'setErrors' | 'setFieldError' | 'setFieldValue' | 'setValues' | 'setFieldTouched' | 'setTouched' | 'resetForm' | 'resetField' | 'controlledValues'>> & {
    handleSubmit: (evt: Event | SubmissionHandler, onSubmit?: SubmissionHandler) => Promise<unknown>;
    submitForm(evt?: Event): void;
    getValues<TValues extends GenericObject = GenericObject>(): TValues;
    getMeta<TValues extends GenericObject = GenericObject>(): FormMeta<TValues>;
    getErrors<TValues extends GenericObject = GenericObject>(): FormErrors<TValues>;
};

to include generic params should do the trick

quentinboudinel avatar Aug 26 '24 09:08 quentinboudinel