feat: allow setting a name for the form (#4933)

* feat: allow setting a name for the form

Resolves #4930

* chore: default the name to `Form`

Author: genu

packages/vee-validate/src/Form.ts

@@ -75,6 +75,10 @@ const FormImpl = /** #__PURE__ */ defineComponent({
       type: Boolean,
       default: false,
     },
+    name: {
+      type: String,
+      default: 'Form',
+    },
   },
   setup(props, ctx) {
     const validationSchema = toRef(props, 'validationSchema');
@@ -108,6 +112,7 @@ const FormImpl = /** #__PURE__ */ defineComponent({
       initialTouched: props.initialTouched,
       validateOnMount: props.validateOnMount,
       keepValuesOnUnmount: keepValues,
+      name: props.name,
     });
 
     const submitForm = handleSubmit((_, { evt }) => {

packages/vee-validate/src/devtools.ts

@@ -254,7 +254,7 @@ function mapFormForDevtoolsInspector(form: PrivateFormContext): CustomInspectorN
 
   return {
     id: encodeNodeId(form),
-    label: 'Form',
+    label: form.name,
     children,
     tags: [
       {

packages/vee-validate/src/types/forms.ts

@@ -323,6 +323,7 @@ export interface PrivateFormContext<
   TValues extends GenericObject = GenericObject,
   TOutput extends GenericObject = TValues,
 > extends FormActions<TValues> {
+  name: string;
   formId: number;
   values: TValues;
   initialValues: Ref<Partial<TValues>>;

packages/vee-validate/src/useForm.ts

@@ -92,6 +92,7 @@ export interface FormOptions<
   initialTouched?: FlattenAndSetPathsType<TValues, boolean>;
   validateOnMount?: boolean;
   keepValuesOnUnmount?: MaybeRef<boolean>;
+  name?: string;
 }
 
 let FORM_COUNTER = 0;
@@ -117,6 +118,7 @@ export function useForm<
     | TypedSchema<TValues, TOutput>,
 >(opts?: FormOptions<TValues, TOutput, TSchema>): FormContext<TValues, TOutput> {
   const formId = FORM_COUNTER++;
+  const name = opts?.name || 'Form';
 
   // Prevents fields from double resetting their values, which causes checkboxes to toggle their initial value
   let FIELD_ID_COUNTER = 0;
@@ -638,6 +640,7 @@ export function useForm<
   }
 
   const formCtx: PrivateFormContext<TValues, TOutput> = {
+    name,
     formId,
     values: formValues,
     controlledValues,