feat(core): add initialValues for submit helper (#18)

* feat: Add initialValue to FormSubmitHelper and use it in submit and reset tests

* docs(core): Add "initialValue" property to FormSubmitHelper

* test(core): Update useForm tests to format family as an array instead of an object

* docs(core): Update documentation to reflect change to initialValue

* feat(core): use consistent variable names

* docs: update doc

* docs: fix typo

* docs: fix typo

---------

Co-authored-by: Alex Liu <[email protected]>

Author: Rock070

docs/api/use-form.md

@@ -229,6 +229,7 @@ This is your form submission handler, witch will pass your form's `values`. But
   ```ts
   interface FormSubmitHelper {
     setSubmitting: (isSubmitting: boolean) => void;
+    initialValues: Values;
   }
   ```
 
@@ -240,6 +241,7 @@ This is your form submission handler, witch will pass your form's `values`. But
   | Name          | Description                   |
   |---------------|-------------------------------|
   |`setSubmitting`| Set isSubmitting imperatively.|
+  |`initialValues`| Form initial values.          |
 
 ::: warning Important
 When the `onSubmit()` function is asynchronous, the `isSubmitting` variable is automatically reset to `false` upon completion. Conversely, if `onSubmit()` is synchronous, you must manually call `setSubmitting(false)` to reset `isSubmitting`.

packages/core/src/composables/useForm.ts

@@ -43,8 +43,9 @@ interface FieldArrayRegistry {
   };
 }
 
-export interface FormSubmitHelper {
+export interface FormSubmitHelper<Values extends FormValues> {
   setSubmitting: (isSubmitting: boolean) => void;
+  readonly initialValues: Values;
 }
 
 export type ValidateMode = 'blur' | 'input' | 'change' | 'submit';
@@ -56,7 +57,10 @@ export interface UseFormOptions<Values extends FormValues> {
   validateMode?: ValidateMode;
   reValidateMode?: ValidateMode;
   validateOnMounted?: boolean;
-  onSubmit: (values: Values, helper: FormSubmitHelper) => void | Promise<any>;
+  onSubmit: (
+    values: Values,
+    helper: FormSubmitHelper<Values>,
+  ) => void | Promise<any>;
   onInvalid?: (errors: FormErrors<Values>) => void;
   validate?: (values: Values) => void | object | Promise<FormErrors<Values>>;
 }
@@ -410,8 +414,11 @@ export function useForm<Values extends FormValues = FormValues>(
     return !isEqual(get(initialValues, name), get(state.values, name));
   };
 
-  const submitHelper: FormSubmitHelper = {
+  const submitHelper: FormSubmitHelper<Values> = {
     setSubmitting,
+    get initialValues() {
+      return deepClone(initialValues);
+    },
   };
 
   const runSingleFieldValidateHandler = (name: string, value: unknown) => {

packages/core/tests/composables/useForm.test.ts

@@ -1066,4 +1066,93 @@ describe('useForm', () => {
     await wrapper.find('button[type="reset"]').trigger('click');
     expect(wrapper.find('span#values').text()).toEqual('');
   });
+
+  it('Get the initial values parameter in the callback of the onSubmit function', async () => {
+    const Comp = defineComponent({
+      setup() {
+        const defaultValues = {
+          name: 'Alex',
+          age: 10,
+          habit: ['basketball', 'football'],
+          family: [
+            {
+              name: 'Tom',
+              age: 12,
+              habit: ['TV', 'PhotoGraphy'],
+            },
+          ],
+        };
+
+        const { handleSubmit } = useForm({
+          initialValues: defaultValues,
+          onSubmit(_, { initialValues }) {
+            expect(initialValues).toEqual(defaultValues);
+          },
+        });
+
+        return {
+          handleSubmit,
+        };
+      },
+      template: `
+        <form @submit="handleSubmit">
+          <button type="submit">Submit</button>
+        </form>
+      `,
+    });
+    document.body.innerHTML = `<div id="app"></div>`;
+    const wrapper = mount(Comp, {
+      attachTo: '#app',
+    });
+
+    await wrapper.find('button').trigger('click');
+  });
+
+  it('Get the initial values parameter in the callback of the onSubmit function after resetFrom execute', async () => {
+    const Comp = defineComponent({
+      setup() {
+        const defaultValues = {
+          name: 'Alex',
+          age: 10,
+        };
+
+        const resetValues = {
+          name: 'Alex',
+          age: 10,
+          habit: ['basketball', 'football'],
+          family: [
+            {
+              name: 'Tom',
+              age: 12,
+              habit: ['TV', 'PhotoGraphy'],
+            },
+          ],
+        };
+
+        const { handleSubmit, resetForm } = useForm({
+          initialValues: defaultValues,
+          onSubmit(_, { initialValues }) {
+            expect(initialValues).toEqual(resetValues);
+          },
+        });
+
+        resetForm({ values: resetValues });
+
+        return {
+          handleSubmit,
+        };
+      },
+      template: `
+        <form @submit="handleSubmit">
+          <button type="submit">Submit</button>
+        </form>
+      `,
+    });
+    document.body.innerHTML = `<div id="app"></div>`;
+    const wrapper = mount(Comp, {
+      attachTo: '#app',
+    });
+
+    await wrapper.find('button').trigger('click');
+  });
 });