feat: added useSubmitCount helper

docs/content/api/composition-helpers.md

@@ -257,3 +257,35 @@ const isSubmitting = useIsSubmitting();
 
 useIsSubmitting.value; // true or false
 ```
+
+<code-title level="4">
+
+`useSubmitCount(): ComputedRef<number>`
+
+</code-title>
+
+Returns a computed ref to the form's `submitCount` state.
+
+```js
+import { useSubmitCount } from 'vee-validate';
+
+const count = useSubmitCount();
+
+count.value;
+```
+
+<code-title level="4">
+
+`useResetForm(): () => void`
+
+</code-title>
+
+Returns a function that you can use to reset the form
+
+```js
+import { useResetForm } from 'vee-validate';
+
+const resetForm = useResetForm();
+
+resetForm(); // resets the form
+```

docs/content/guide/composition-api.md

@@ -189,6 +189,8 @@ Here is a list of the functions available that you can use:
 - `useIsFormValid` If all fields are **validated and valid**
 - `useValidateField` Returns a function that validates a specific field
 - `useValidateForm` Returns a function that validates the entire form
+- `useResetForm` Resets the form to its initial state
 - `useIsSubmitting` If the form is currently submitting
+- `useSubmitCount` The number of times the user attempted to submit the form
 
 For more information about the functions, you can head over to the [API reference and check them out](/api/composition-helpers).

packages/vee-validate/src/index.ts

@@ -17,3 +17,4 @@ export { useIsFormDirty } from './useIsFormDirty';
 export { useIsFormTouched } from './useIsFormTouched';
 export { useIsFormValid } from './useIsFormValid';
 export { useValidateForm } from './useValidateForm';
+export { useSubmitCount } from './useSubmitCount';

packages/vee-validate/src/useSubmitCount.ts

@@ -0,0 +1,17 @@
+import { computed } from 'vue';
+import { FormSymbol } from './symbols';
+import { injectWithSelf, warn } from './utils';
+
+/**
+ * The number of form's submission count
+ */
+export function useSubmitCount() {
+  const form = injectWithSelf(FormSymbol);
+  if (!form) {
+    warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
+  }
+
+  return computed(() => {
+    return form?.submitCount.value ?? 0;
+  });
+}

packages/vee-validate/tests/useSubmitCount.spec.ts

@@ -0,0 +1,54 @@
+import flushPromises from 'flush-promises';
+import { useField, useForm, useSubmitCount } from '@/vee-validate';
+import { mountWithHoc } from './helpers';
+
+describe('useSubmitCount()', () => {
+  test('indicates the number of submissions', async () => {
+    mountWithHoc({
+      setup() {
+        const { submitForm } = useForm();
+        useField('test');
+        const submitCount = useSubmitCount();
+
+        return {
+          submitCount,
+          submitForm,
+        };
+      },
+      template: `
+      <button @click="submitForm()">Submit</button>
+      <span>{{ submitCount }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const button = document.querySelector('button');
+    const submitText = document.querySelector('span');
+    expect(submitText?.textContent).toBe('0');
+    button?.click();
+    await flushPromises();
+    expect(submitText?.textContent).toBe('1');
+  });
+
+  test('returns 0 and warns if form is not found', async () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation();
+    mountWithHoc({
+      setup() {
+        const submitCount = useSubmitCount();
+
+        return {
+          submitCount,
+        };
+      },
+      template: `
+      <span>{{ submitCount }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const submitText = document.querySelector('span');
+    expect(submitText?.textContent).toBe('0');
+    expect(console.warn).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+});