From bd253b4760ff60edf7b03c0255671ad64fa67ee1 Mon Sep 17 00:00:00 2001
From: Daniel Requejo <daniel.requejo@netcentric.biz>
Date: Tue, 28 Feb 2023 19:06:56 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fix=20submit=20issue=20&=20add?=
 =?UTF-8?q?=20prettier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/node.js.yml                 |  10 +-
 .github/workflows/package-size-report.yml     |   4 +-
 .prettierignore                               |   3 +
 .prettierrc.json                              |   5 +
 .vscode/extensions.json                       |   7 +-
 CONTRIBUTING.md                               |   2 +-
 License.md                                    |   2 +-
 README.md                                     | 117 +++++----
 docs/.vitepress/config.cts                    |  75 ++++--
 docs/.vitepress/theme/index.js                |  16 +-
 docs/api/form-handler.md                      |  31 +--
 docs/api/use-form-handler/clear-error.md      | 108 +++++----
 docs/api/use-form-handler/clear-field.md      |  52 ++--
 docs/api/use-form-handler/form-state.md       |  64 ++---
 docs/api/use-form-handler/handle-submit.md    |  96 +++++---
 docs/api/use-form-handler/index.md            | 187 +++++++-------
 docs/api/use-form-handler/modified-values.md  |  32 +--
 docs/api/use-form-handler/register.md         | 229 ++++++++++--------
 docs/api/use-form-handler/reset-field.md      |  27 ++-
 docs/api/use-form-handler/reset-form.md       |  71 +++---
 docs/api/use-form-handler/set-error.md        |  37 ++-
 docs/api/use-form-handler/set-value.md        |  32 ++-
 .../use-form-handler/trigger-validation.md    | 123 ++++++----
 docs/api/use-form-handler/unregister.md       |  30 +--
 docs/api/use-form-handler/values.md           |  37 +--
 docs/components/SandboxEmbedder.vue           |  41 ++--
 docs/examples/async-submission.md             |   4 +-
 docs/examples/async-validations.md            |   3 +-
 docs/examples/basic.md                        |   3 +-
 docs/examples/dependent-fields.md             |   3 +-
 docs/get-started/introduction.md              |  32 +--
 docs/get-started/quick-start.md               |  98 +++++---
 docs/guides/material-libraries.md             |   2 +-
 docs/guides/typescript.md                     |   2 +-
 docs/index.md                                 |   2 +-
 docs/vite.config.ts                           |   6 +-
 examples/async-submission/App.vue             |  83 ++++---
 examples/async-submission/index.html          |  31 ++-
 examples/async-submission/tsconfig.json       |   7 +-
 examples/async-validations/App.vue            |  87 ++++---
 examples/async-validations/index.html         |  31 ++-
 examples/async-validations/tsconfig.json      |   7 +-
 examples/basic/App.vue                        |  34 +--
 examples/basic/index.html                     |  31 ++-
 examples/basic/tsconfig.json                  |   7 +-
 examples/dependent-fields/App.vue             |  55 +++--
 examples/dependent-fields/index.html          |  31 ++-
 examples/dependent-fields/tsconfig.json       |   7 +-
 examples/interceptor/App.vue                  |  46 ++--
 examples/interceptor/index.html               |  31 ++-
 examples/interceptor/tsconfig.json            |   7 +-
 examples/tutorial/App.vue                     |  81 ++++---
 examples/tutorial/index.html                  |  31 ++-
 examples/tutorial/tsconfig.json               |   7 +-
 package-lock.json                             |  22 ++
 package.json                                  |   1 +
 playground/App.vue                            |  93 ++++---
 playground/index.html                         |  12 +-
 src/FormHandler.ts                            |  41 ++--
 src/constants.ts                              |  15 +-
 src/index.ts                                  |   2 +-
 src/logic/getDefaultFieldValue.ts             |  18 +-
 src/logic/getNativeFieldValue.ts              |  43 ++--
 src/logic/index.ts                            |   2 +-
 src/logic/refFn.ts                            |  97 ++++----
 src/logic/transformValidations.ts             |  91 ++++---
 src/logic/validateField.ts                    |  37 +--
 src/logic/validateForm.ts                     |  12 +-
 src/test/component.test.ts                    |  64 ++---
 src/test/handler.test.ts                      | 179 +++++++-------
 src/test/register.test.ts                     | 125 +++++-----
 src/types/baseControl.ts                      |  46 ++--
 src/types/formHandler.ts                      | 160 ++++++------
 src/types/index.ts                            |   2 +-
 src/types/logic.ts                            |  14 +-
 src/types/refs.ts                             |  46 +++-
 src/types/register.ts                         |  36 +--
 src/types/validations.ts                      |  92 +++----
 src/useFormHandler.ts                         | 128 ++++++----
 src/utils/index.ts                            |   2 +-
 src/utils/isCheckboxInput.ts                  |   3 +-
 src/utils/isMultipleSelect.ts                 |   2 +-
 src/utils/isNativeControl.ts                  |   2 +-
 src/utils/isRadioInput.ts                     |   3 +-
 src/utils/max.ts                              |  11 +-
 src/utils/maxLength.ts                        |  12 +-
 src/utils/min.ts                              |   9 +-
 src/utils/minLength.ts                        |  12 +-
 src/utils/pattern.ts                          |   9 +-
 src/utils/required.ts                         |   9 +-
 src/utils/test/isCheckboxInput.test.ts        |  14 +-
 src/utils/test/isMultipleSelect.test.ts       |  18 +-
 src/utils/test/isNativeControl.test.ts        |  34 +--
 src/utils/test/isRadioInput.test.ts           |  14 +-
 src/utils/test/max.test.ts                    |  19 +-
 src/utils/test/maxLength.test.ts              |  26 +-
 src/utils/test/min.test.ts                    |  18 +-
 src/utils/test/minLength.test.ts              |  24 +-
 src/utils/test/pattern.test.ts                |  18 +-
 src/utils/test/required.test.ts               |  18 +-
 tsconfig.json                                 |  16 +-
 tsconfig.node.json                            |   6 +-
 vite.config.ts                                |   8 +-
 103 files changed, 2137 insertions(+), 1755 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc.json

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 3a3ed55..a785ea1 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -5,9 +5,9 @@ name: CI
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ['master']
   pull_request:
-    branches: [ "master" ]
+    branches: ['master']
 
 jobs:
   build:
@@ -33,7 +33,7 @@ jobs:
 
       - name: Package build test
         run: npm run build --if-present
-    
+
   unit-test:
     name: Unit testing
     runs-on: ubuntu-latest
@@ -46,8 +46,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: '18'
-          
+
       - run: npm ci
-      
+
       - name: Unit tests
         run: npm run test
diff --git a/.github/workflows/package-size-report.yml b/.github/workflows/package-size-report.yml
index 911ffaa..9d95d1b 100644
--- a/.github/workflows/package-size-report.yml
+++ b/.github/workflows/package-size-report.yml
@@ -2,7 +2,7 @@ name: Package Size Report
 
 on:
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   pkg-size-report:
@@ -21,4 +21,4 @@ jobs:
       - name: Package size report
         uses: pkg-size/action@v1
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..1b07c39
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..e6f8ee3
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "semi": false
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index cf899f8..c0a6e5a 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,3 @@
 {
-  "recommendations": [
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin"
-  ]
-}
\ No newline at end of file
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 21b952c..e14376c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1 +1 @@
-**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://kcd.im/pull-request)
\ No newline at end of file
+**Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://kcd.im/pull-request)
diff --git a/License.md b/License.md
index 959464c..b05471f 100644
--- a/License.md
+++ b/License.md
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/README.md b/README.md
index fe9ab5b..4443d8a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-
 <div align="center">
 	<object data="https://vue-form-handler.com/favicon.png"></object>
 	<h1>vue-form-handler</h1>
@@ -12,39 +11,47 @@ The easy way of handling your vue forms
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
 <a href="https://www.buymeacoffee.com/dbssman" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
-</div>
 
+</div>
 
 ## 📦 Installation
+
 ---
-``` yarn add vue-form-handler ```
 
-``` npm i --save vue-form-handler ```
+`yarn add vue-form-handler`
+
+`npm i --save vue-form-handler`
 
 ## 🚀 Features
+
 ---
+
 - 💪 **Type strong**: Written in TypeScript
 - 🔩 **Flexible**: you can wrap the form handler over native inputs or any other like the ones from material libraries or custom inputs.
 - 🪶 **Super light**: Small package size
 - 💻 **DX**: Great development experience
 
 ## 🦄 Usage
+
 ---
+
 ### Basic usage
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<input v-bind="register('firstName')" />
-		<input v-bind="register('lastName')" />
-		<input v-bind="register('age')" type="number"/>
-		<input type="submit"/>
-	</form>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <input v-bind="register('firstName')" />
+    <input v-bind="register('lastName')" />
+    <input v-bind="register('age')" type="number" />
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
-const { register, handleSubmit } = useFormHandler();
-const successFn = (form: Record<string,any>) => {console.log({form})}
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+const { register, handleSubmit } = useFormHandler()
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
 
@@ -52,26 +59,37 @@ const successFn = (form: Record<string,any>) => {console.log({form})}
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<input v-bind="register('firstName',{
-			required:'This field is required'
-		})" />
-		<p>{{formState.errors.firstName}}</p>
-		<input v-bind="register('lastName')" />
-		<input v-bind="register('age', {
-			min:{
-				value: 18,
-				message: 'Your age is below the accepted range'
-			}
-		})" type="number" />
-		<p>{{formState.errors.age}}</p>
-		<input type="submit"/>
-	</form>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <input
+      v-bind="
+        register('firstName', {
+          required: 'This field is required',
+        })
+      "
+    />
+    <p>{{ formState.errors.firstName }}</p>
+    <input v-bind="register('lastName')" />
+    <input
+      v-bind="
+        register('age', {
+          min: {
+            value: 18,
+            message: 'Your age is below the accepted range',
+          },
+        })
+      "
+      type="number"
+    />
+    <p>{{ formState.errors.age }}</p>
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
-const { formState, register, handleSubmit } = useFormHandler();
-const successFn = (form: Record<string,any>) => {console.log({form})}
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+const { formState, register, handleSubmit } = useFormHandler()
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
 
@@ -79,32 +97,41 @@ const successFn = (form: Record<string,any>) => {console.log({form})}
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<q-input v-bind="register('name')" />
-		<q-checkbox v-bind="register('married')"/>
-		<q-select v-bind="register('pet')" :options="['dog','cat','mouse']"/>
-		<input type="submit"/>
-	</form>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <q-input v-bind="register('name')" />
+    <q-checkbox v-bind="register('married')" />
+    <q-select v-bind="register('pet')" :options="['dog', 'cat', 'mouse']" />
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
-const { formState, register, handleSubmit } = useFormHandler();
-const successFn = (form: Record<string,any>) => {console.log({form})}
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+const { formState, register, handleSubmit } = useFormHandler()
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
 
 ### For a more advanced usage visit the [Docs](https://vue-form-handler.com)
 
 ## 📈 Project activity
+
 ---
-![Alt](https://repobeats.axiom.co/api/embed/d0da4b79bde282068c5f3da3505091b1447a1f6c.svg "Repobeats analytics image")
+
+![Alt](https://repobeats.axiom.co/api/embed/d0da4b79bde282068c5f3da3505091b1447a1f6c.svg 'Repobeats analytics image')
 
 ## 💜 Thanks
+
 ---
+
 This project is heavily inspired by other awesome projects like:
+
 - [jaredpalmer/formik](https://github.com/jaredpalmer/formik)
 - [react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form)
 
 ## 📄 License
+
 ---
-[MIT License](https://github.com/dbssman/vue-form-handler/blob/master/License.md) © 2022-PRESENT [Dennis Bosmans](https://github.com/dbssman)
\ No newline at end of file
+
+[MIT License](https://github.com/dbssman/vue-form-handler/blob/master/License.md) © 2022-PRESENT [Dennis Bosmans](https://github.com/dbssman)
diff --git a/docs/.vitepress/config.cts b/docs/.vitepress/config.cts
index 9754ffc..744eaf1 100644
--- a/docs/.vitepress/config.cts
+++ b/docs/.vitepress/config.cts
@@ -1,4 +1,4 @@
-import { defineConfig } from "vitepress"
+import { defineConfig } from 'vitepress'
 
 export default defineConfig({
   title: 'VueFormHandler',
@@ -9,17 +9,31 @@ export default defineConfig({
     ['link', { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }],
     ['meta', { name: 'author', content: 'Dennis R. Bosmans' }],
     ['meta', { property: 'og:title', content: 'VueFormHandler' }],
-    ['meta', { property: 'og:image', content: 'https://vue-form-handler.com/favicon.png' }],
-    ['meta', { property: 'og:description', content: 'The only handler you\'ll need to easily work with forms in vue' }],
+    [
+      'meta',
+      {
+        property: 'og:image',
+        content: 'https://vue-form-handler.com/favicon.png',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'og:description',
+        content:
+          "The only handler you'll need to easily work with forms in vue",
+      },
+    ],
   ],
   themeConfig: {
     logo: '/favicon.svg',
     editLink: {
-      pattern: 'https://github.com/dbssman/vue-form-handler/edit/master/docs/:path',
+      pattern:
+        'https://github.com/dbssman/vue-form-handler/edit/master/docs/:path',
       text: 'Edit this page on GitHub',
     },
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/dbssman/vue-form-handler' }
+      { icon: 'github', link: 'https://github.com/dbssman/vue-form-handler' },
     ],
     footer: {
       message: 'Released under the MIT License.',
@@ -31,51 +45,68 @@ export default defineConfig({
     ],
     sidebar: [
       {
-        text: 'Get started', items: [
+        text: 'Get started',
+        items: [
           { text: 'Introduction', link: '/get-started/introduction' },
           { text: 'Quick Start', link: '/get-started/quick-start' },
-        ]
+        ],
       },
       {
-        text: 'Guides', collapsible: true, items: [
+        text: 'Guides',
+        collapsible: true,
+        items: [
           { text: 'Custom components', link: '/guides/custom-components' },
           { text: 'Material libraries', link: '/guides/material-libraries' },
           { text: 'Native support', link: '/guides/native-support' },
           { text: 'Typescript', link: '/guides/typescript' },
           { text: 'Validation', link: '/guides/validation' },
-        ]
+        ],
       },
       {
-        text: 'Examples', collapsible: true, items: [
+        text: 'Examples',
+        collapsible: true,
+        items: [
           { text: 'Async submission', link: '/examples/async-submission' },
           { text: 'Async validations', link: '/examples/async-validations' },
           { text: 'Basic', link: '/examples/basic' },
           { text: 'Dependent fields', link: '/examples/dependent-fields' },
-        ]
+        ],
       },
       {
-        text: 'API Reference', collapsible: true, items: [
+        text: 'API Reference',
+        collapsible: true,
+        items: [
           {
-            text: 'useFormHandler', link: '/api/use-form-handler/',
+            text: 'useFormHandler',
+            link: '/api/use-form-handler/',
             items: [
               { text: 'clearError', link: '/api/use-form-handler/clear-error' },
               { text: 'clearField', link: '/api/use-form-handler/clear-field' },
               { text: 'formState', link: '/api/use-form-handler/form-state' },
-              { text: 'handleSubmit', link: '/api/use-form-handler/handle-submit' },
-              { text: 'modifiedValues', link: '/api/use-form-handler/modified-values' },
+              {
+                text: 'handleSubmit',
+                link: '/api/use-form-handler/handle-submit',
+              },
+              {
+                text: 'modifiedValues',
+                link: '/api/use-form-handler/modified-values',
+              },
               { text: 'register', link: '/api/use-form-handler/register' },
               { text: 'resetField', link: '/api/use-form-handler/reset-field' },
               { text: 'resetForm', link: '/api/use-form-handler/reset-form' },
               { text: 'setError', link: '/api/use-form-handler/set-error' },
               { text: 'setValue', link: '/api/use-form-handler/set-value' },
-              { text: 'triggerValidation', link: '/api/use-form-handler/trigger-validation' },
+              {
+                text: 'triggerValidation',
+                link: '/api/use-form-handler/trigger-validation',
+              },
               { text: 'unregister', link: '/api/use-form-handler/unregister' },
               { text: 'values', link: '/api/use-form-handler/values' },
-            ]
+            ],
           },
-          { text: `FormHandler`, link: '/api/form-handler' }
-        ]
-      }
+          { text: `FormHandler`, link: '/api/form-handler' },
+        ],
+      },
     ],
-  }
-})
\ No newline at end of file
+  },
+})
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 894386c..2241992 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,10 +1,10 @@
-import DefaultTheme from "vitepress/theme";
-import SandboxEmbedder from "../../components/SandboxEmbedder.vue";
+import DefaultTheme from 'vitepress/theme'
+import SandboxEmbedder from '../../components/SandboxEmbedder.vue'
 
 export default {
-    ...DefaultTheme,
-    enhanceApp(ctx) {
-        DefaultTheme.enhanceApp(ctx)
-        ctx.app.component('CodeExample', SandboxEmbedder)
-    }
-}
\ No newline at end of file
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    ctx.app.component('CodeExample', SandboxEmbedder)
+  },
+}
diff --git a/docs/api/form-handler.md b/docs/api/form-handler.md
index 0159d19..86c6b12 100644
--- a/docs/api/form-handler.md
+++ b/docs/api/form-handler.md
@@ -1,34 +1,35 @@
 # \<FormHandler/>
 
-The `FormHandler` component is an utility for people that are still using the options API or, that for some reason want to do the handling on the template side. 
+The `FormHandler` component is an utility for people that are still using the options API or, that for some reason want to do the handling on the template side.
 
 ::: tip
 It is highly recommend that you use the `useFormHandler` composable if possible, since it is the intended way of making use of this package and gives you more control over the form.
 :::
+
 ## How it works
 
 You pass the same props as you'd be passing to the composable but to a component on the template, and the component will enable you a [scoped slot](https://vuejs.org/guide/components/slots.html#scoped-slots) with the return of `useFormHandler`.
 
 As you can imagine, the `FormHandler` composable and `useFormHandler` share the same API but differ in the usage.
 
-## Example: 
+## Example:
 
 ```vue
 <template @submit.prevent="handleSubmit(successFn)">
-    <FormHandler>
-        <template v-slot="{register, handleSubmit}">
-            <form @submit.prevent="handleSubmit(successFn)">
-                <input v-bind="register('firstName')">
-                <input v-bind="register('lastName')">
-            </form>
-        </template>
-    </FormHandler>
+  <FormHandler>
+    <template v-slot="{ register, handleSubmit }">
+      <form @submit.prevent="handleSubmit(successFn)">
+        <input v-bind="register('firstName')" />
+        <input v-bind="register('lastName')" />
+      </form>
+    </template>
+  </FormHandler>
 </template>
 <script setup lang="ts">
-    import { FormHandler } from 'vue-form-handler'
-    
-    const successFn = (form:Record<string,any>) => {
-        console.log({form})
-    }
+import { FormHandler } from 'vue-form-handler'
+
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
diff --git a/docs/api/use-form-handler/clear-error.md b/docs/api/use-form-handler/clear-error.md
index 71bac1d..bfeb7a4 100644
--- a/docs/api/use-form-handler/clear-error.md
+++ b/docs/api/use-form-handler/clear-error.md
@@ -5,40 +5,41 @@ Clears all the errors from the form or the error from a field programmatically.
 ## Demo
 
 Coming soon...
+
 ## Usage
 
 ### Validating/Invalidating the form without a field scoped validation
 
 ```vue
 <template>
-    <form>
-        <input type="text" v-bind="register('name')" />
-        <input type="text" v-bind="register('email')" />
-        <input type="text" v-bind="register('password')" />
-        <input type="text" v-bind="register('password_confirmation')" />
-        <button type="submit">Submit</button>
-    </form>
+  <form>
+    <input type="text" v-bind="register('name')" />
+    <input type="text" v-bind="register('email')" />
+    <input type="text" v-bind="register('password')" />
+    <input type="text" v-bind="register('password_confirmation')" />
+    <button type="submit">Submit</button>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler, Interceptor } from 'vue-form-handler'
 
 const sleep = (milliseconds: number) => {
-    return new Promise(resolve => setTimeout(resolve, milliseconds))
+  return new Promise((resolve) => setTimeout(resolve, milliseconds))
 }
 
 //validate your fields here
 const validateFieldGroup = async () => {
-    await sleep(1000)
-    return Math.random() < 0.5;
+  await sleep(1000)
+  return Math.random() < 0.5
 }
 
 const interceptor: Interceptor = async ({ name, setError, clearError }) => {
-    if (['name', 'email'].includes(name)) {
-        await validateUser()
-            ? clearError(name)
-            : setError('user', 'User already exists')
-    }
-    return true
+  if (['name', 'email'].includes(name)) {
+    ;(await validateUser())
+      ? clearError(name)
+      : setError('user', 'User already exists')
+  }
+  return true
 }
 
 const { register } = useFormHandler({ interceptor })
@@ -51,46 +52,59 @@ Notice how we use the combination of [setError](/api/use-form-handler/set-error)
 
 ```vue
 <template>
-    <form @submit.prevent="handleSubmit(successFn, errorFn)">
-        <input type="text" v-bind="register('name', {
-            required: true
-        })" />
-        <p v-if="formState.errors.name"> {{ formState.errors.name }} </p>
-        <input type="text" v-bind="register('email', {
-            required: true
-        })" />
-        <p v-if="formState.errors.email"> {{ formState.errors.email }} </p>
-        <input type="text" v-bind="register('summary')">
-        <button type="submit">Submit</button>
-    </form>
+  <form @submit.prevent="handleSubmit(successFn, errorFn)">
+    <input
+      type="text"
+      v-bind="
+        register('name', {
+          required: true,
+        })
+      "
+    />
+    <p v-if="formState.errors.name">{{ formState.errors.name }}</p>
+    <input
+      type="text"
+      v-bind="
+        register('email', {
+          required: true,
+        })
+      "
+    />
+    <p v-if="formState.errors.email">{{ formState.errors.email }}</p>
+    <input type="text" v-bind="register('summary')" />
+    <button type="submit">Submit</button>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 import { watch } from 'vue'
 
-let hasErrorsAfterSubmit = false;
-const successFn = (form: any) => { console.log({ form }) }
-const errorFn = () => { hasErrorsAfterSubmit = true }
-
+let hasErrorsAfterSubmit = false
+const successFn = (form: any) => {
+  console.log({ form })
+}
+const errorFn = () => {
+  hasErrorsAfterSubmit = true
+}
 
-const { register, handleSubmit, values, clearError, formState } = useFormHandler()
+const { register, handleSubmit, values, clearError, formState } =
+  useFormHandler()
 
 watch(
-    () => values,
-    () => {
-        if (hasErrorsAfterSubmit) {
-            clearError();
-            hasErrorsAfterSubmit = false
-        }
-    },
-    { deep: true })
+  () => values,
+  () => {
+    if (hasErrorsAfterSubmit) {
+      clearError()
+      hasErrorsAfterSubmit = false
+    }
+  },
+  { deep: true }
+)
 </script>
 ```
 
 ## Type Declarations
 
 ```ts
-export type ClearError = (
-    name?: string
-) => void
-```
\ No newline at end of file
+export type ClearError = (name?: string) => void
+```
diff --git a/docs/api/use-form-handler/clear-field.md b/docs/api/use-form-handler/clear-field.md
index 815e943..b43569f 100644
--- a/docs/api/use-form-handler/clear-field.md
+++ b/docs/api/use-form-handler/clear-field.md
@@ -13,34 +13,34 @@ Coming soon...
 
 ```vue
 <template>
-    <select v-bind="register('continent')" placeholder="Choose your country">
-        <option disabled value=null>Choose your continent</option>
-        <option value="AM">America</option>
-        <option value="AS">Asia</option>
-        <option value="EU">Europe</option>
-    </select>
-    <select v-bind="register('country')" placeholder="Choose your country">
-        <option disabled value=null>Choose your country</option>
-        <option value="CAN">Canada</option>
-        <option value="USA">United States</option>
-        <option value="JAP">Japan</option>
-        <option value="CHN">China</option>
-        <option value="ESP">Spain</option>
-        <option value="DEU">Germany</option>
-    </select>
+  <select v-bind="register('continent')" placeholder="Choose your country">
+    <option disabled value="null">Choose your continent</option>
+    <option value="AM">America</option>
+    <option value="AS">Asia</option>
+    <option value="EU">Europe</option>
+  </select>
+  <select v-bind="register('country')" placeholder="Choose your country">
+    <option disabled value="null">Choose your country</option>
+    <option value="CAN">Canada</option>
+    <option value="USA">United States</option>
+    <option value="JAP">Japan</option>
+    <option value="CHN">China</option>
+    <option value="ESP">Spain</option>
+    <option value="DEU">Germany</option>
+  </select>
 </template>
 <script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
 const interceptor = ({ name, clearField }) => {
-    if (name === 'continent') {
-        clearField('country')
-    }
-    return true
+  if (name === 'continent') {
+    clearField('country')
+  }
+  return true
 }
 
 const { register } = useFormHandler({
-    interceptor
+  interceptor,
 })
 </script>
 ```
@@ -49,10 +49,10 @@ const { register } = useFormHandler({
 
 ```vue
 <template>
-    <input type="text" v-bind="register('clearableField')">
-    <button @click="clearField('clearableField')">X</button>
+  <input type="text" v-bind="register('clearableField')" />
+  <button @click="clearField('clearableField')">X</button>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, clearField } = useFormHandler()
@@ -62,7 +62,5 @@ const { register, clearField } = useFormHandler()
 ## Type Declarations
 
 ```ts
-export type ClearField = (
-    name: string
-) => Promise<void>
-```
\ No newline at end of file
+export type ClearField = (name: string) => Promise<void>
+```
diff --git a/docs/api/use-form-handler/form-state.md b/docs/api/use-form-handler/form-state.md
index 29b5368..7cd12ce 100644
--- a/docs/api/use-form-handler/form-state.md
+++ b/docs/api/use-form-handler/form-state.md
@@ -4,14 +4,14 @@ Provides you with the reactive state of the form, including validation, dirty an
 
 ## Return
 
-| attribute | type   | description                                |
-|-----------|--------|--------------------------------------------|
-| dirty     | `Record<string, boolean>` | Object containing all the inputs that have been modified |
-| errors    | `Record<string, string>`  | Object containing all the current field errors of the form |
+| attribute | type                      | description                                                    |
+| --------- | ------------------------- | -------------------------------------------------------------- |
+| dirty     | `Record<string, boolean>` | Object containing all the inputs that have been modified       |
+| errors    | `Record<string, string>`  | Object containing all the current field errors of the form     |
 | touched   | `Record<string, boolean>` | Object containing all the inputs the users has interacted with |
-| isDirty   | `boolean` | True if there is any modified field on the form |
-| isTouched | `boolean` | True if there has been any interaction with a form field |
-| isValid   | `boolean` | True if there are no form errors |
+| isDirty   | `boolean`                 | True if there is any modified field on the form                |
+| isTouched | `boolean`                 | True if there has been any interaction with a form field       |
+| isValid   | `boolean`                 | True if there are no form errors                               |
 
 ## Rules
 
@@ -21,20 +21,30 @@ Provides you with the reactive state of the form, including validation, dirty an
 
 ```vue
 <template>
-    <form>
-        <input type="text" v-bind="register('name', {
-            required: true
-        })" />
-        <p v-if="formState.errors.name"> {{ formState.errors.name }} </p>
-        <input type="text" v-bind="register('email', {
-            required: true
-        })" />
-        <p v-if="formState.errors.email"> {{ formState.errors.email }} </p>
-        <input type="text" v-bind="register('summary')">
-        <button type="submit">Submit</button>
-    </form>
+  <form>
+    <input
+      type="text"
+      v-bind="
+        register('name', {
+          required: true,
+        })
+      "
+    />
+    <p v-if="formState.errors.name">{{ formState.errors.name }}</p>
+    <input
+      type="text"
+      v-bind="
+        register('email', {
+          required: true,
+        })
+      "
+    />
+    <p v-if="formState.errors.email">{{ formState.errors.email }}</p>
+    <input type="text" v-bind="register('summary')" />
+    <button type="submit">Submit</button>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, formState } = useFormHandler()
@@ -45,11 +55,11 @@ const { register, formState } = useFormHandler()
 
 ```ts
 export interface FormState {
-    isDirty: boolean
-    isTouched: boolean
-    isValid: boolean
-    dirty: Record<string, boolean>
-    touched: Record<string, boolean>
-    errors: Record<string, string>
+  isDirty: boolean
+  isTouched: boolean
+  isValid: boolean
+  dirty: Record<string, boolean>
+  touched: Record<string, boolean>
+  errors: Record<string, string>
 }
-```
\ No newline at end of file
+```
diff --git a/docs/api/use-form-handler/handle-submit.md b/docs/api/use-form-handler/handle-submit.md
index 5d07916..ff62860 100644
--- a/docs/api/use-form-handler/handle-submit.md
+++ b/docs/api/use-form-handler/handle-submit.md
@@ -12,32 +12,42 @@ Coming soon...
 
 ```vue
 <template>
-    <form @submit.prevent="submitFn">
-        <input type="text" v-bind="register('name', {
-            required: true
-        })" />
-        <input type="text" v-bind="register('email', {
-            required: true
-        })" />
-        <input type="text" v-bind="register('summary')">
-        <button type="submit">Submit</button>
-    </form>
+  <form @submit.prevent="submitFn">
+    <input
+      type="text"
+      v-bind="
+        register('name', {
+          required: true,
+        })
+      "
+    />
+    <input
+      type="text"
+      v-bind="
+        register('email', {
+          required: true,
+        })
+      "
+    />
+    <input type="text" v-bind="register('summary')" />
+    <button type="submit">Submit</button>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, handleSubmit, formState } = useFormHandler()
 const successFn = (form: any) => {
-    //do anything with form
-    console.log(form)
+  //do anything with form
+  console.log(form)
 }
 const submitFn = () => {
-    try {
-        handleSubmit(successFn)
-    } catch {
-        //do anything with errors
-        console.log(formState.errors)
-    }
+  try {
+    handleSubmit(successFn)
+  } catch {
+    //do anything with errors
+    console.log(formState.errors)
+  }
 }
 </script>
 ```
@@ -46,28 +56,38 @@ const submitFn = () => {
 
 ```vue
 <template>
-    <form @submit.prevent="handleSubmit(successFn,errorFn)">
-        <input type="text" v-bind="register('name', {
-            required: true
-        })" />
-        <input type="text" v-bind="register('email', {
-            required: true
-        })" />
-        <input type="text" v-bind="register('summary')">
-        <button type="submit">Submit</button>
-    </form>
+  <form @submit.prevent="handleSubmit(successFn, errorFn)">
+    <input
+      type="text"
+      v-bind="
+        register('name', {
+          required: true,
+        })
+      "
+    />
+    <input
+      type="text"
+      v-bind="
+        register('email', {
+          required: true,
+        })
+      "
+    />
+    <input type="text" v-bind="register('summary')" />
+    <button type="submit">Submit</button>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, handleSubmit } = useFormHandler()
 const successFn = (form: any) => {
-    //do anything with form
-    console.log(form)
+  //do anything with form
+  console.log(form)
 }
-const errorFn = (errors:any) => {
-    //do anything with errors
-    console.log(errors)
+const errorFn = (errors: any) => {
+  //do anything with errors
+  console.log(errors)
 }
 </script>
 ```
@@ -79,7 +99,7 @@ export type HandleSubmitSuccessFn = (values: Record<string, any>) => void
 export type HandleSubmitErrorFn = (errors: Record<string, string>) => void
 
 export type HandleSubmit = (
-    successFn: HandleSubmitSuccessFn, 
-    errorFn?: HandleSubmitErrorFn
+  successFn: HandleSubmitSuccessFn,
+  errorFn?: HandleSubmitErrorFn
 ) => void
-```
\ No newline at end of file
+```
diff --git a/docs/api/use-form-handler/index.md b/docs/api/use-form-handler/index.md
index 9d17930..8bd2cbb 100644
--- a/docs/api/use-form-handler/index.md
+++ b/docs/api/use-form-handler/index.md
@@ -13,21 +13,23 @@ Changing the initialValues will trigger a form reset, this means the formState a
 Values which we use to initialize the form, this is useful when we get an initial value state for the form from an external call.
 
 #### Example
+
 ```vue
 <template>
-    <input v-bind="register('firstName')"> // Should initially be 'John'
-    <input v-bind="register('lastName')"> // Should initially be 'Doe'
-    <pre>{{values}}</pre> // Should show the initialized values
+  <input v-bind="register('firstName')" /> // Should initially be 'John'
+  <input v-bind="register('lastName')" /> // Should initially be 'Doe'
+  <pre>{{ values }}</pre>
+  // Should show the initialized values
 </template>
 <script setup lang="ts">
-    import { useFormHandler } from 'vue-form-handler'
-
-    const { register, values } = useFormHandler({
-        initialValues: {
-            firstName: 'John',
-            lastName: 'Doe'
-        }
-    })
+import { useFormHandler } from 'vue-form-handler'
+
+const { register, values } = useFormHandler({
+  initialValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+})
 </script>
 ```
 
@@ -39,20 +41,20 @@ Function that allows us to intercept any value assignment, accept or deny it and
 
 The interceptor will be called passing an object as a parameter with the following:
 
-| attribute | type   | description                                |
-|-----------|--------|--------------------------------------------|
-| name      | `string`    | Name of the field that is about to be set  |
-| value     | `any`    | Value of the field that is about to be set |
-| clearError | [ClearError](/api/use-form-handler/clear-error#type-declarations) | [API - clearError](/api/use-form-handler/clear-error) |
-| clearField | [ClearField](/api/use-form-handler/clear-field#type-declarations) | [API - clearField](/api/use-form-handler/clear-field) |
-| formState | [FormState](/api/use-form-handler/form-state#type-declarations) | [API - formState](/api/use-form-handler/form-state) |
-| modifiedValues | [ModifiedValues](/api/use-form-handler/modified-values#type-declarations) | [API - modifiedValues](/api/use-form-handler/modified-values) |
-| resetField | [ResetField](/api/use-form-handler/reset-field#type-declarations) | [API - resetField](/api/use-form-handler/reset-field) |
-| resetForm | [ResetForm](/api/use-form-handler/reset-form#type-declarations) | [API - resetForm](/api/use-form-handler/reset-form) |
-| setError | [SetError](/api/use-form-handler/set-error#type-declarations) | [API - setError](/api/use-form-handler/set-error) |
-| setValue | [SetValue](/api/use-form-handler/set-value#type-declarations) | [API - setValue](/api/use-form-handler/set-value) |
+| attribute         | type                                                                            | description                                                         |
+| ----------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| name              | `string`                                                                        | Name of the field that is about to be set                           |
+| value             | `any`                                                                           | Value of the field that is about to be set                          |
+| clearError        | [ClearError](/api/use-form-handler/clear-error#type-declarations)               | [API - clearError](/api/use-form-handler/clear-error)               |
+| clearField        | [ClearField](/api/use-form-handler/clear-field#type-declarations)               | [API - clearField](/api/use-form-handler/clear-field)               |
+| formState         | [FormState](/api/use-form-handler/form-state#type-declarations)                 | [API - formState](/api/use-form-handler/form-state)                 |
+| modifiedValues    | [ModifiedValues](/api/use-form-handler/modified-values#type-declarations)       | [API - modifiedValues](/api/use-form-handler/modified-values)       |
+| resetField        | [ResetField](/api/use-form-handler/reset-field#type-declarations)               | [API - resetField](/api/use-form-handler/reset-field)               |
+| resetForm         | [ResetForm](/api/use-form-handler/reset-form#type-declarations)                 | [API - resetForm](/api/use-form-handler/reset-form)                 |
+| setError          | [SetError](/api/use-form-handler/set-error#type-declarations)                   | [API - setError](/api/use-form-handler/set-error)                   |
+| setValue          | [SetValue](/api/use-form-handler/set-value#type-declarations)                   | [API - setValue](/api/use-form-handler/set-value)                   |
 | triggerValidation | [TriggerValidation](/api/use-form-handler/trigger-validation#type-declarations) | [API - triggerValidation](/api/use-form-handler/trigger-validation) |
-| values    | `Record<string,any>` | [API - values](/api/use-form-handler/values) |
+| values            | `Record<string,any>`                                                            | [API - values](/api/use-form-handler/values)                        |
 
 ::: info
 As you can see, the interceptor is provided with everything the handler does provide but in a separate context.
@@ -67,34 +69,34 @@ return true to proceed setting the value and false if the value should not be se
 
 ```vue
 <template>
-    <select v-bind="register('continent')" placeholder="Choose your country">
-        <option disabled value=null>Choose your continent</option>
-        <option value="AM">America</option>
-        <option value="AS">Asia</option>
-        <option value="EU">Europe</option>
-    </select>
-    <select v-bind="register('country')" placeholder="Choose your country">
-        <option disabled value=null>Choose your country</option>
-        <option value="CAN">Canada</option>
-        <option value="USA">United States</option>
-        <option value="JAP">Japan</option>
-        <option value="CHN">China</option>
-        <option value="ESP">Spain</option>
-        <option value="DEU">Germany</option>
-    </select>
+  <select v-bind="register('continent')" placeholder="Choose your country">
+    <option disabled value="null">Choose your continent</option>
+    <option value="AM">America</option>
+    <option value="AS">Asia</option>
+    <option value="EU">Europe</option>
+  </select>
+  <select v-bind="register('country')" placeholder="Choose your country">
+    <option disabled value="null">Choose your country</option>
+    <option value="CAN">Canada</option>
+    <option value="USA">United States</option>
+    <option value="JAP">Japan</option>
+    <option value="CHN">China</option>
+    <option value="ESP">Spain</option>
+    <option value="DEU">Germany</option>
+  </select>
 </template>
 <script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
 const interceptor = ({ name, clearField }) => {
-    if (name === 'continent') {
-        clearField('country')
-    }
-    return true
+  if (name === 'continent') {
+    clearField('country')
+  }
+  return true
 }
 
 const { register } = useFormHandler({
-    interceptor
+  interceptor,
 })
 </script>
 ```
@@ -107,24 +109,24 @@ Use this function in the case you'd rather perform a custom/different validation
 
 ```vue
 <template @submit.prevent="handleSubmit(successFn)">
-    <form>
-        <input v-bind="register('firstName')">
-        <input v-bind="register('lastName')">
-        <input type="number" v-bind="register('age')">
-        <input type="submit">
-    </form>
+  <form>
+    <input v-bind="register('firstName')" />
+    <input v-bind="register('lastName')" />
+    <input type="number" v-bind="register('age')" />
+    <input type="submit" />
+  </form>
 </template>
 <script setup lang="ts">
-    import { useFormHandler } from 'vue-form-handler'
-    
-    const validation = (values) => values.age && Number(values.age)>=18
-    const successFn = (form:Record<string,any>) => {
-        console.log({form})
-    }
-
-    const { register, handleSubmit } = useFormHandler({
-        validation
-    })
+import { useFormHandler } from 'vue-form-handler'
+
+const validation = (values) => values.age && Number(values.age) >= 18
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
+
+const { register, handleSubmit } = useFormHandler({
+  validation,
+})
 </script>
 ```
 
@@ -132,12 +134,12 @@ Use this function in the case you'd rather perform a custom/different validation
 
 This option allows you to configure the validation mode or strategy the handler will follow.
 
-| name | type   | description                                |
-|-----------|--------|--------------------------------------------|
-| onChange      | `string`    | Validation will trigger on the change event with each input, and lead to multiple re-renders.  |
-| onBlur     | `string`    | Validation will trigger on the blur event. |
-| onSubmit    | `string` | 	Validation will trigger on the submit event. |
-| always    | `string` | 	Validation will trigger on change and blur events.  |
+| name     | type     | description                                                                                   |
+| -------- | -------- | --------------------------------------------------------------------------------------------- |
+| onChange | `string` | Validation will trigger on the change event with each input, and lead to multiple re-renders. |
+| onBlur   | `string` | Validation will trigger on the blur event.                                                    |
+| onSubmit | `string` | Validation will trigger on the submit event.                                                  |
+| always   | `string` | Validation will trigger on change and blur events.                                            |
 
 ::: warning
 Using the `always` validationMode will have a more significant impact on performance.
@@ -162,43 +164,36 @@ Using the `always` validationMode will have a more significant impact on perform
 ## Type Declarations
 
 ```ts
-
-export type Interceptor = (
-    _: InterceptorParams
-) => Promise<boolean> | boolean
+export type Interceptor = (_: InterceptorParams) => Promise<boolean> | boolean
 
 export type FormValidation = (
-    values: Record<string, any>
+  values: Record<string, any>
 ) => Promise<boolean> | boolean
 
 export interface FormHandlerParams {
-    initialValues?: Record<string, any> 
-    | Ref<Record<string, any>> 
+  initialValues?:
+    | Record<string, any>
+    | Ref<Record<string, any>>
     | ComputedRef<Record<string, any>>
-    interceptor?: Interceptor
-    validate?: FormValidation
-    validationMode?: 'onChange' 
-    | 'onBlur' 
-    | 'onSubmit' 
-    | 'always'
+  interceptor?: Interceptor
+  validate?: FormValidation
+  validationMode?: 'onChange' | 'onBlur' | 'onSubmit' | 'always'
 }
 export interface FormHandlerReturn {
-    formState: FormState
-    values: Record<string, any>
-    clearError: ClearError
-    clearField: ClearField
-    handleSubmit: HandleSubmit
-    modifiedValues: ModifiedValues
-    register: Register
-    resetField: ResetField
-    resetForm: ResetForm
-    setError: SetError
-    setValue: SetValue
-    triggerValidation: TriggerValidation
-    unregister: (name: string) => void
+  formState: FormState
+  values: Record<string, any>
+  clearError: ClearError
+  clearField: ClearField
+  handleSubmit: HandleSubmit
+  modifiedValues: ModifiedValues
+  register: Register
+  resetField: ResetField
+  resetForm: ResetForm
+  setError: SetError
+  setValue: SetValue
+  triggerValidation: TriggerValidation
+  unregister: (name: string) => void
 }
 
-export type FormHandler = (
-    _?: FormHandlerParams
-) => FormHandlerReturn
-```
\ No newline at end of file
+export type FormHandler = (_?: FormHandlerParams) => FormHandlerReturn
+```
diff --git a/docs/api/use-form-handler/modified-values.md b/docs/api/use-form-handler/modified-values.md
index 4b1dfb4..b435ab4 100644
--- a/docs/api/use-form-handler/modified-values.md
+++ b/docs/api/use-form-handler/modified-values.md
@@ -10,26 +10,28 @@ Coming soon...
 
 ```vue
 <template>
-    <form>
-        <input type="text" v-bind="register('name')" />
-        <input type="text" v-bind="register('email')" />
-        <input type="text" v-bind="register('summary')">
-        <pre>
+  <form>
+    <input type="text" v-bind="register('name')" />
+    <input type="text" v-bind="register('email')" />
+    <input type="text" v-bind="register('summary')" />
+    <pre>
             {{ modifiedValues() }} //should be initially
-        </pre>
-        <pre>
+        </pre
+    >
+    <pre>
             {{ values }} //should be filled with the initial values
-        </pre>
-    </form>
+        </pre
+    >
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, values, modifiedValues } = useFormHandler({
-    initialValues: {
-        name: 'My name',
-        email: 'myemail@mail.com'
-    }
+  initialValues: {
+    name: 'My name',
+    email: 'myemail@mail.com',
+  },
 })
 </script>
 ```
@@ -40,4 +42,4 @@ Let's say your form is initialized as above, because you're editing an existing
 
 ```ts
 export type ModifiedValues = () => Record<string, any>
-```
\ No newline at end of file
+```
diff --git a/docs/api/use-form-handler/register.md b/docs/api/use-form-handler/register.md
index 564e886..8033a5e 100644
--- a/docs/api/use-form-handler/register.md
+++ b/docs/api/use-form-handler/register.md
@@ -8,60 +8,57 @@ Coming soon...
 
 ## Props
 
-| attribute | type              | description                           |
-|-----------|-------------------|---------------------------------------|
-| name      | `string`            | Name for the field                    |
-| options   | [RegisterOptions](/api/use-form-handler/register.html#type-declarations)   | Optional configuration for the field  |
+| attribute | type                                                                     | description                          |
+| --------- | ------------------------------------------------------------------------ | ------------------------------------ |
+| name      | `string`                                                                 | Name for the field                   |
+| options   | [RegisterOptions](/api/use-form-handler/register.html#type-declarations) | Optional configuration for the field |
 
 ### `options`
 
-| attribute | type              | description                           |
-|-----------|-------------------|---------------------------------------|
-| native      | `boolean`       | Explicitly indicates if the field is a native input or not.  The main idea of this is to avoid binding the native input handler to custom components. |
-| defaultValue| `any`           | Default value for the field, would override the fallback value when the field is empty/cleared |
-| validate      | [Validations](/api/use-form-handler/register.html#type-declarations)    | [Custom validations](/get-started/quick-start.html#custom-validation) object. |
-| withDetails      | `boolean` | Explicitly indicates if you want to bind dirty and and touched state for the registered field |
-| disabled      | `boolean` | Disables the field. When a field is disabled it gets reset, and is not able to validate, or set new values until it is enabled again. The field is also not considered for the form validation. |
-| useNativeValidation      | `boolean`            | Set to true if you want to use native HTML validation |
-
-
+| attribute           | type                                                                 | description                                                                                                                                                                                     |
+| ------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| native              | `boolean`                                                            | Explicitly indicates if the field is a native input or not. The main idea of this is to avoid binding the native input handler to custom components.                                            |
+| defaultValue        | `any`                                                                | Default value for the field, would override the fallback value when the field is empty/cleared                                                                                                  |
+| validate            | [Validations](/api/use-form-handler/register.html#type-declarations) | [Custom validations](/get-started/quick-start.html#custom-validation) object.                                                                                                                   |
+| withDetails         | `boolean`                                                            | Explicitly indicates if you want to bind dirty and and touched state for the registered field                                                                                                   |
+| disabled            | `boolean`                                                            | Disables the field. When a field is disabled it gets reset, and is not able to validate, or set new values until it is enabled again. The field is also not considered for the form validation. |
+| useNativeValidation | `boolean`                                                            | Set to true if you want to use native HTML validation                                                                                                                                           |
 
 ## Return
 
-| attribute | type              | description                           |
-|-----------|-------------------|---------------------------------------|
-| name      | `string`          | Name of the field                     |
-| error     | <code>string &#124; undefined</code> | Current error of the field  |
-| ref | `(fieldRef:any) => void` | Takes care of updating and keeping the fields correctly aligned with the form, specially when talking about native inputs  |
-| modelValue      | `any`          | Current field value binding for non-native inputs |
-| 'onUpdate:modelValue'      | `(value: any) => Promise<void>`          | Value update handler for non-native inputs |
-| onBlur     | `() => void`          | Blur handler |
-| onClear      | `() => void`          | Clear handler |
-| disabled     | `boolean`          | Disabled state binding for the field |
-| isDirty     | `boolean`          | Dirty state binding for the field. Only returned if `withDetails` is true |
-| isTouched     | `boolean`          | Touched state binding for the field. Only returned if `withDetails` is true |
-| onChange     | `(el: any) => Promise<void>`          | Value update handler for native inputs |
-| required     | `boolean \| string`          | Native required validation. Only returned if `useNativeValidations` is set to true and `required` is set. |
-| min     | `number \| Object`          | Native min validation. Only returned if `useNativeValidations` is set to true and `min` is set. |
-| max     | `number \| Object`          | Native max validation. Only returned if `useNativeValidations` is set to true and `max` is set. |
-| minLength     | `number \| Object`          | Native minLength validation. Only returned if `useNativeValidations` is set to true and `minLength` is set. |
-| maxLength     | `number \| Object`          | Native maxLength validation. Only returned if `useNativeValidations` is set to true and `maxLength` is set. |
-| pattern     | `string  \| RegExp \| Object`          | Native pattern validation. Only returned if `useNativeValidations` is set to true and `pattern` is set. |
+| attribute             | type                                 | description                                                                                                               |
+| --------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| name                  | `string`                             | Name of the field                                                                                                         |
+| error                 | <code>string &#124; undefined</code> | Current error of the field                                                                                                |
+| ref                   | `(fieldRef:any) => void`             | Takes care of updating and keeping the fields correctly aligned with the form, specially when talking about native inputs |
+| modelValue            | `any`                                | Current field value binding for non-native inputs                                                                         |
+| 'onUpdate:modelValue' | `(value: any) => Promise<void>`      | Value update handler for non-native inputs                                                                                |
+| onBlur                | `() => void`                         | Blur handler                                                                                                              |
+| onClear               | `() => void`                         | Clear handler                                                                                                             |
+| disabled              | `boolean`                            | Disabled state binding for the field                                                                                      |
+| isDirty               | `boolean`                            | Dirty state binding for the field. Only returned if `withDetails` is true                                                 |
+| isTouched             | `boolean`                            | Touched state binding for the field. Only returned if `withDetails` is true                                               |
+| onChange              | `(el: any) => Promise<void>`         | Value update handler for native inputs                                                                                    |
+| required              | `boolean \| string`                  | Native required validation. Only returned if `useNativeValidations` is set to true and `required` is set.                 |
+| min                   | `number \| Object`                   | Native min validation. Only returned if `useNativeValidations` is set to true and `min` is set.                           |
+| max                   | `number \| Object`                   | Native max validation. Only returned if `useNativeValidations` is set to true and `max` is set.                           |
+| minLength             | `number \| Object`                   | Native minLength validation. Only returned if `useNativeValidations` is set to true and `minLength` is set.               |
+| maxLength             | `number \| Object`                   | Native maxLength validation. Only returned if `useNativeValidations` is set to true and `maxLength` is set.               |
+| pattern               | `string  \| RegExp \| Object`        | Native pattern validation. Only returned if `useNativeValidations` is set to true and `pattern` is set.                   |
 
 :::info
 Notice how `modelValue` and `'onUpdate:modelValue'` are used as our two way data binding for non-native inputs following the Vue [approach](https://vuejs.org/guide/components/v-model.html). So that your fields used for complex forms could also be re-used in other parts of your application with v-model.
 :::
 
-
 ## Usage
 
 ### Basic
 
 ```vue
 <template>
-    <input type="text" v-bind="register('name')" />
+  <input type="text" v-bind="register('name')" />
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 const { register } = useFormHandler()
 </script>
@@ -73,19 +70,24 @@ The usage is very simple and intuitive, we just get the `register` function from
 
 ```vue
 <template>
-    <select v-bind="register('country', {
-        defaultValue: 'ESP'
-    })" placeholder="Choose your country">
-        <option value="CAN">Canada</option>
-        <option value="USA">United States</option>
-        <option value="JAP">Japan</option>
-        <option value="CHN">China</option>
-        <option value="ESP">Spain</option>
-        <option value="DEU">Germany</option>
-    </select>
+  <select
+    v-bind="
+      register('country', {
+        defaultValue: 'ESP',
+      })
+    "
+    placeholder="Choose your country"
+  >
+    <option value="CAN">Canada</option>
+    <option value="USA">United States</option>
+    <option value="JAP">Japan</option>
+    <option value="CHN">China</option>
+    <option value="ESP">Spain</option>
+    <option value="DEU">Germany</option>
+  </select>
 </template>
 
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 const { register } = useFormHandler()
 </script>
@@ -94,41 +96,55 @@ const { register } = useFormHandler()
 As you can see, setting a default value for a field, in this case the country, is very simple, we just give it the value we want and it will be the `default`, not to confuse with the `initial` value, clearing the field will return it to it's default value, or to a value fallback if no default is specified.
 
 :::warning
-The handler supports also initialization via html attributes like `selected` or `checked`  but it is highly recommended to just use the tools that are provided.
+The handler supports also initialization via html attributes like `selected` or `checked` but it is highly recommended to just use the tools that are provided.
 :::
 
 ### In-built Validation
 
 ```vue
 <template>
-	<form>
-        <input type="email" v-bind="register('email', {
-            required: true,
-            pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
-        })" />
-        <p v-show="formState.errors.email">
-            {{ formState.errors.email }}
-        </p>
-        <input type="number" v-bind="register('age', {
-            min: 18,
-            max: 50
-        })" />
-        <p v-show="formState.errors.age">
-            {{ formState.errors.age }}
-        </p>
-        <textarea v-bind="register('description', {
-            minLength: 15,
-            maxLength: 300,
-        })" />
-        <p v-show="formState.errors.description">
-            {{ formState.errors.description }}
-        </p>
-	</form>
+  <form>
+    <input
+      type="email"
+      v-bind="
+        register('email', {
+          required: true,
+          pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+        })
+      "
+    />
+    <p v-show="formState.errors.email">
+      {{ formState.errors.email }}
+    </p>
+    <input
+      type="number"
+      v-bind="
+        register('age', {
+          min: 18,
+          max: 50,
+        })
+      "
+    />
+    <p v-show="formState.errors.age">
+      {{ formState.errors.age }}
+    </p>
+    <textarea
+      v-bind="
+        register('description', {
+          minLength: 15,
+          maxLength: 300,
+        })
+      "
+    />
+    <p v-show="formState.errors.description">
+      {{ formState.errors.description }}
+    </p>
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
 
-const { register, formState } = useFormHandler();
+const { register, formState } = useFormHandler()
 </script>
 ```
 
@@ -141,7 +157,7 @@ Quick an easy validate your fields by just passing a single attribute. The error
             required: 'This is the required message',
             pattern: {
                 value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                message: 'Pattern is failing'    
+                message: 'Pattern is failing'
             }
         })" />
         <p v-show="formState.errors.email">
@@ -156,6 +172,7 @@ import { useFormHandler } from 'vue-form-handler';
 const { register, formState } = useFormHandler();
 </script>
 ```
+
 The case of `required` is a bit special, you'll be able to get the custom message by just passing the string you wish. For the rest, they take an object as currently `pattern` does, with the `value` being the validation value, and `message` being the custom message to display.
 
 ### Native validations
@@ -183,11 +200,11 @@ const { register, formState, handleSubmit } = useFormHandler();
 const successFn = (form:Record<string,any>) => {console.log({form})}
 </script>
 ```
+
 :::warning
 Please remember that you'll not be able to pass custom messages to native validations.
 :::
 
-
 ### Custom validations
 
 ```vue{13-15}
@@ -219,57 +236,59 @@ const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
 const { values, register, formState } = useFormHandler({ validationMode: 'always' });
 </script>
 ```
+
 Custom validations are kept very simple, can be synchronous or asynchronous. We just pass a function that will get executed when the field needs to be validated. It is expected that the function returns: `true` if the field is valid/ a `string` corresponding to the error due to the failing validation.
+
 ## Type Declarations
 
 ```ts
 export interface BaseControlProps {
-    name: string,
-    error: string,
-    ref: any,
-    modelValue: any,
-    'onUpdate:modelValue': (value: any) => Promise<void>,
-    onBlur: () => void,
-    onClear: () => void,
-    disabled?: boolean
-    isDirty?: boolean
-    isTouched?: boolean
-    onChange?: (el: any) => Promise<void>,
+  name: string
+  error: string
+  ref: any
+  modelValue: any
+  'onUpdate:modelValue': (value: any) => Promise<void>
+  onBlur: () => void
+  onClear: () => void
+  disabled?: boolean
+  isDirty?: boolean
+  isTouched?: boolean
+  onChange?: (el: any) => Promise<void>
 }
 
 export type ValidationFn = (
-    value: any
+  value: any
 ) => Promise<boolean | string> | boolean | string
 
 export type Validations = Record<string, ValidationFn>
 
 export interface ValidationWithMessage {
-    value: number | string | RegExp
-    message: string
+  value: number | string | RegExp
+  message: string
 }
 
 export interface ValidationsConfiguration {
-    required?: boolean | string
-    min?: number | ValidationWithMessage
-    max?: number | ValidationWithMessage
-    minLength?: number | ValidationWithMessage
-    maxLength?: number | ValidationWithMessage
-    pattern?: string | RegExp | ValidationWithMessage
+  required?: boolean | string
+  min?: number | ValidationWithMessage
+  max?: number | ValidationWithMessage
+  minLength?: number | ValidationWithMessage
+  maxLength?: number | ValidationWithMessage
+  pattern?: string | RegExp | ValidationWithMessage
 }
 
 export interface RegisterOptions extends ValidationsConfiguration {
-    native?: boolean
-    defaultValue?: any
-    validate?: Validations
-    withDetails?: boolean
-    disabled?: boolean
-    useNativeValidation?: boolean
+  native?: boolean
+  defaultValue?: any
+  validate?: Validations
+  withDetails?: boolean
+  disabled?: boolean
+  useNativeValidation?: boolean
 }
 
 export type RegisterReturn = BaseControlProps & ValidationsConfiguration
 
 export type Register = (
-    name: string, 
-    options?: RegisterOptions
+  name: string,
+  options?: RegisterOptions
 ) => RegisterReturn
-```
\ No newline at end of file
+```
diff --git a/docs/api/use-form-handler/reset-field.md b/docs/api/use-form-handler/reset-field.md
index 048f063..d4b5c57 100644
--- a/docs/api/use-form-handler/reset-field.md
+++ b/docs/api/use-form-handler/reset-field.md
@@ -13,21 +13,24 @@ Coming soon...
 ### Reset a field on demand
 
 Choose any option of the select and then reset the field
+
 ```vue
 <template>
-    <select v-bind="register('continent')" placeholder="Choose your country">
-        <option value="AM">America</option>
-        <option value="AS">Asia</option>
-        <option value="EU">Europe</option>
-    </select>
-    <button @click="() => resetField('continent')">Reset a field on demand</button>
+  <select v-bind="register('continent')" placeholder="Choose your country">
+    <option value="AM">America</option>
+    <option value="AS">Asia</option>
+    <option value="EU">Europe</option>
+  </select>
+  <button @click="() => resetField('continent')">
+    Reset a field on demand
+  </button>
 </template>
 <script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 const { register, resetField } = useFormHandler({
-    initialValues: {
-        continent: 'AM'
-    }
+  initialValues: {
+    continent: 'AM',
+  },
 })
 </script>
 ```
@@ -35,7 +38,5 @@ const { register, resetField } = useFormHandler({
 ## Type Declarations
 
 ```ts
-export type ResetField = (
-    name: string
-) => void
-```
\ No newline at end of file
+export type ResetField = (name: string) => void
+```
diff --git a/docs/api/use-form-handler/reset-form.md b/docs/api/use-form-handler/reset-form.md
index e30e0c4..9f7c9eb 100644
--- a/docs/api/use-form-handler/reset-form.md
+++ b/docs/api/use-form-handler/reset-form.md
@@ -16,41 +16,54 @@ Fill the form and then reset it, values should reset and errors should disappear
 
 ```vue
 <template>
-    <form @submit.prevent="() => { }">
-        <input type="email" v-bind="register('email', {
-            required: true,
-            pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
-        })" />
-        <p v-show="formState.errors.email">
-            {{ formState.errors.email }}
-        </p>
-        <input type="number" v-bind="register('age', {
-            min: 18,
-            max: 50
-        })" />
-        <p v-show="formState.errors.age">
-            {{ formState.errors.age }}
-        </p>
-        <textarea v-bind="register('description', {
-            minLength: 15,
-            maxLength: 300,
-        })" />
-        <p v-show="formState.errors.description">
-            {{ formState.errors.description }}
-        </p>
-        <button @click="resetForm">Reset form</button>
-    </form>
+  <form @submit.prevent="() => {}">
+    <input
+      type="email"
+      v-bind="
+        register('email', {
+          required: true,
+          pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+        })
+      "
+    />
+    <p v-show="formState.errors.email">
+      {{ formState.errors.email }}
+    </p>
+    <input
+      type="number"
+      v-bind="
+        register('age', {
+          min: 18,
+          max: 50,
+        })
+      "
+    />
+    <p v-show="formState.errors.age">
+      {{ formState.errors.age }}
+    </p>
+    <textarea
+      v-bind="
+        register('description', {
+          minLength: 15,
+          maxLength: 300,
+        })
+      "
+    />
+    <p v-show="formState.errors.description">
+      {{ formState.errors.description }}
+    </p>
+    <button @click="resetForm">Reset form</button>
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
 
-const { register, formState, resetForm } = useFormHandler();
+const { register, formState, resetForm } = useFormHandler()
 </script>
 ```
 
-
 ## Type Declarations
 
 ```ts
 export type ResetForm = () => void
-```
\ No newline at end of file
+```
diff --git a/docs/api/use-form-handler/set-error.md b/docs/api/use-form-handler/set-error.md
index e5c6638..eb6220e 100644
--- a/docs/api/use-form-handler/set-error.md
+++ b/docs/api/use-form-handler/set-error.md
@@ -12,34 +12,34 @@ Coming soon...
 
 ```vue
 <template>
-    <form>
-        <input type="text" v-bind="register('name')" />
-        <input type="text" v-bind="register('email')" />
-        <input type="text" v-bind="register('password')" />
-        <input type="text" v-bind="register('password_confirmation')" />
-        <button type="submit">Submit</button>
-    </form>
+  <form>
+    <input type="text" v-bind="register('name')" />
+    <input type="text" v-bind="register('email')" />
+    <input type="text" v-bind="register('password')" />
+    <input type="text" v-bind="register('password_confirmation')" />
+    <button type="submit">Submit</button>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler, Interceptor } from 'vue-form-handler'
 
 const sleep = (milliseconds: number) => {
-    return new Promise(resolve => setTimeout(resolve, milliseconds))
+  return new Promise((resolve) => setTimeout(resolve, milliseconds))
 }
 
 //validate your fields here
 const validateFieldGroup = async () => {
-    await sleep(1000)
-    return Math.random() < 0.5;
+  await sleep(1000)
+  return Math.random() < 0.5
 }
 
 const interceptor: Interceptor = async ({ name, setError, clearError }) => {
-    if (['name', 'email'].includes(name)) {
-        await validateUser()
-            ? clearError(name)
-            : setError('user', 'User already exists')
-    }
-    return true
+  if (['name', 'email'].includes(name)) {
+    ;(await validateUser())
+      ? clearError(name)
+      : setError('user', 'User already exists')
+  }
+  return true
 }
 
 const { register } = useFormHandler({ interceptor })
@@ -48,7 +48,6 @@ const { register } = useFormHandler({ interceptor })
 
 Notice how we use the combination of [clearError](/api/use-form-handler/clear-error) and `setError` in order to invalidate the form when we have some fields that need to be validated together and the error is not scoped to one single field but to the whole field group.
 
-
 ## Type Declarations
 
 ```ts
@@ -56,4 +55,4 @@ export type SetError = (
     name:string
     error:string
 ) => void
-```
\ No newline at end of file
+```
diff --git a/docs/api/use-form-handler/set-value.md b/docs/api/use-form-handler/set-value.md
index 0518cde..ed0a679 100644
--- a/docs/api/use-form-handler/set-value.md
+++ b/docs/api/use-form-handler/set-value.md
@@ -16,28 +16,27 @@ Coming soon...
 
 ```vue
 <template>
-    <form>
-        <input type="text" v-bind="register('name')" />
-        <input type="email" v-bind="register('email')" />
-        <button type="submit">Submit</button>
-    </form>
+  <form>
+    <input type="text" v-bind="register('name')" />
+    <input type="email" v-bind="register('email')" />
+    <button type="submit">Submit</button>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { watch } from 'vue'
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, setValue, values } = useFormHandler()
 
 watch(
-    () => values.name,
-    (curr: string|null) => {
-        setValue('email', curr
-            ? `${curr.toLowerCase().trim()}@mail.com`
-            : '')
-    }
+  () => values.name,
+  (curr: string | null) => {
+    setValue('email', curr ? `${curr.toLowerCase().trim()}@mail.com` : '')
+  }
 )
 </script>
 ```
+
 Simple and easy assignments to any field, with no extra overhead or issues.
 
 ### `setValue` with validation trigger
@@ -72,14 +71,11 @@ watch(
 )
 </script>
 ```
-Just calling `triggerValidation` after a value is set ensures the validations are fired, remember to use `await` on setValue if you're expecting to intercept the value change so that it does trigger the validation when it should.
 
+Just calling `triggerValidation` after a value is set ensures the validations are fired, remember to use `await` on setValue if you're expecting to intercept the value change so that it does trigger the validation when it should.
 
 ## Type Declarations
 
 ```ts
-export type SetValue = (
-    name: string, 
-    value: any
-) => Promise<void>
-```
\ No newline at end of file
+export type SetValue = (name: string, value: any) => Promise<void>
+```
diff --git a/docs/api/use-form-handler/trigger-validation.md b/docs/api/use-form-handler/trigger-validation.md
index b9b17a4..b82207c 100644
--- a/docs/api/use-form-handler/trigger-validation.md
+++ b/docs/api/use-form-handler/trigger-validation.md
@@ -14,80 +14,99 @@ Coming soon...
 
 ```vue
 <template>
-    <form>
-        <input type="text" v-bind="register('name')" />
-        <input type="email" v-bind="register('email',{
-            pattern: {
-                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                message: 'Email field is not a valid regex'
-            }
-        })" />
-        <button type="submit">Submit</button>
-    </form>
+  <form>
+    <input type="text" v-bind="register('name')" />
+    <input
+      type="email"
+      v-bind="
+        register('email', {
+          pattern: {
+            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+            message: 'Email field is not a valid regex',
+          },
+        })
+      "
+    />
+    <button type="submit">Submit</button>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { watch } from 'vue'
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, setValue, values, triggerValidation } = useFormHandler()
 
 watch(
-    () => values.name,
-    (curr: string|null) => {
-        await setValue('email', curr
-            ? `${curr.toLowerCase().trim()}@mail.com`
-            : 'Set a name first')
-        triggerValidation('email')
-    }
+  () => values.name,
+  (curr: string | null) => {
+    await setValue(
+      'email',
+      curr ? `${curr.toLowerCase().trim()}@mail.com` : 'Set a name first'
+    )
+    triggerValidation('email')
+  }
 )
 </script>
 ```
+
 Just calling `triggerValidation` after a value is set ensures the validations are fired, remember to use `await` on setValue if you're expecting to intercept the value change so that it does trigger the validation when it should.
 
 ### To validate the form on demand without submitting it
 
 ```vue
 <template>
-    <form>
-        <input type="email" v-bind="register('email', {
-            required: true,
-            pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
-        })" />
-        <p v-show="formState.errors.email">
-            {{ formState.errors.email }}
-        </p>
-        <input type="number" v-bind="register('age', {
-            required: true,
-            min: 18,
-            max: 50
-        })" />
-        <p v-show="formState.errors.age">
-            {{ formState.errors.age }}
-        </p>
-        <textarea v-bind="register('description', {
-            required: true,
-            minLength: 15,
-            maxLength: 300,
-        })" />
-        <p v-show="formState.errors.description">
-            {{ formState.errors.description }}
-        </p>
-    </form>
-    <button @click="() => triggerValidation()"></button>
+  <form>
+    <input
+      type="email"
+      v-bind="
+        register('email', {
+          required: true,
+          pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+        })
+      "
+    />
+    <p v-show="formState.errors.email">
+      {{ formState.errors.email }}
+    </p>
+    <input
+      type="number"
+      v-bind="
+        register('age', {
+          required: true,
+          min: 18,
+          max: 50,
+        })
+      "
+    />
+    <p v-show="formState.errors.age">
+      {{ formState.errors.age }}
+    </p>
+    <textarea
+      v-bind="
+        register('description', {
+          required: true,
+          minLength: 15,
+          maxLength: 300,
+        })
+      "
+    />
+    <p v-show="formState.errors.description">
+      {{ formState.errors.description }}
+    </p>
+  </form>
+  <button @click="() => triggerValidation()"></button>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
 
-const { register, formState, triggerValidation } = useFormHandler();
+const { register, formState, triggerValidation } = useFormHandler()
 </script>
 ```
+
 All the fields get validated when triggering the validation without specifying any fieldName.
 
 ## Type Declarations
 
 ```ts
-export type TriggerValidation = (
-    name?: string
-) => Promise<void>
-
-```
\ No newline at end of file
+export type TriggerValidation = (name?: string) => Promise<void>
+```
diff --git a/docs/api/use-form-handler/unregister.md b/docs/api/use-form-handler/unregister.md
index 4e1b9a6..b8bd43d 100644
--- a/docs/api/use-form-handler/unregister.md
+++ b/docs/api/use-form-handler/unregister.md
@@ -12,37 +12,39 @@ Coming soon...
 
 ```vue
 <template>
-    <input type="text" v-bind="register('name')" />
-    <input type="checkbox" v-bind="register('children')" />
-    <input v-if="values.children" type="number" v-bind="register('childrenAmount')" />
+  <input type="text" v-bind="register('name')" />
+  <input type="checkbox" v-bind="register('children')" />
+  <input
+    v-if="values.children"
+    type="number"
+    v-bind="register('childrenAmount')"
+  />
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { watch } from 'vue'
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, values, unregister } = useFormHandler()
 
 watch(
-    () => values.children,
-    (curr) => {
-        if(!curr){
-            unregister('childrenAmount')
-        }
+  () => values.children,
+  (curr) => {
+    if (!curr) {
+      unregister('childrenAmount')
     }
+  }
 )
 </script>
 ```
+
 Easy way of handling a dynamic field by registering and un-registering it.
 
 :::warning
 The field value or state is not recovered after un-registering it. It starts every time again as a new field.
 :::
 
-
 ## Type Declarations
 
 ```ts
-export type Unregister = (
-    name: string
-) => void
-```
\ No newline at end of file
+export type Unregister = (name: string) => void
+```
diff --git a/docs/api/use-form-handler/values.md b/docs/api/use-form-handler/values.md
index 05d2227..3fac8ae 100644
--- a/docs/api/use-form-handler/values.md
+++ b/docs/api/use-form-handler/values.md
@@ -4,9 +4,10 @@ Provides you with the reactive state of the form, including validation, dirty an
 
 ## Return
 
-| attribute | type   | description                                |
-|-----------|--------|--------------------------------------------|
-| &lt;fieldName&gt; | `any`    | Current value of the specified field |
+| attribute         | type  | description                          |
+| ----------------- | ----- | ------------------------------------ |
+| &lt;fieldName&gt; | `any` | Current value of the specified field |
+
 ## Rules
 
 `values` is read-only, so no assignments are expected. It is entirely reactive, so you can react on changes of the whole element and/or it's main attributes.
@@ -15,21 +16,21 @@ Provides you with the reactive state of the form, including validation, dirty an
 
 ```vue
 <template>
-    <form>
-        <input type="text" v-bind="register('name')" />
-        <input type="text" v-bind="register('email')" />
-        <input type="text" v-bind="register('summary')">
-    </form>
-    <section>
-        <h2>Preview:</h2>
-        <div>
-            <h3>Name: {{values.name}}</h3>
-            <h4>Email: {{values.email}}</h4>
-            <p>Summary: {{values.summary}}</p>
-        </div>
-    </section>
+  <form>
+    <input type="text" v-bind="register('name')" />
+    <input type="text" v-bind="register('email')" />
+    <input type="text" v-bind="register('summary')" />
+  </form>
+  <section>
+    <h2>Preview:</h2>
+    <div>
+      <h3>Name: {{ values.name }}</h3>
+      <h4>Email: {{ values.email }}</h4>
+      <p>Summary: {{ values.summary }}</p>
+    </div>
+  </section>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
 const { register, values } = useFormHandler()
@@ -40,4 +41,4 @@ const { register, values } = useFormHandler()
 
 ```ts
 export type Values = Record<string, any>
-```
\ No newline at end of file
+```
diff --git a/docs/components/SandboxEmbedder.vue b/docs/components/SandboxEmbedder.vue
index 67ac3ed..7dfb8b2 100644
--- a/docs/components/SandboxEmbedder.vue
+++ b/docs/components/SandboxEmbedder.vue
@@ -1,20 +1,22 @@
 <template>
-    <iframe
-        :src="`https://codesandbox.io/embed/github/dbssman/vue-form-handler/tree/master/examples/${example}?fontsize=12&hidenavigation=1&theme=dark`"
-        style="border:0;borderRadius:4;overflow:hidden;max-height:100vh" :style="styleObject"
-        :title="`dbssman/vue-form-handler: ${example}`"
-        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
+  <iframe
+    :src="`https://codesandbox.io/embed/github/dbssman/vue-form-handler/tree/master/examples/${example}?fontsize=12&hidenavigation=1&theme=dark`"
+    style="border: 0; borderradius: 4; overflow: hidden; max-height: 100vh"
+    :style="styleObject"
+    :title="`dbssman/vue-form-handler: ${example}`"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  ></iframe>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue'
 
 defineProps({
-    example: {
-        type: String,
-        required: true,
-    },
+  example: {
+    type: String,
+    required: true,
+  },
 })
 
 const height = ref(0)
@@ -22,22 +24,19 @@ const width = ref(0)
 const fixedContainerPadding = 64
 
 const styleObject = computed(() => ({
-    width: `${width.value - fixedContainerPadding}px`,
-    height: `${height.value - fixedContainerPadding}px`,
+  width: `${width.value - fixedContainerPadding}px`,
+  height: `${height.value - fixedContainerPadding}px`,
 }))
 
 const setDimensions = () => {
-    height.value = Number(document?.querySelector('.VPContent')?.clientHeight)
-    width.value = Number(document?.querySelector('.VPDoc')?.clientWidth)
+  height.value = Number(document?.querySelector('.VPContent')?.clientHeight)
+  width.value = Number(document?.querySelector('.VPDoc')?.clientWidth)
 }
 
 onMounted(() => {
-    setDimensions()
-    window?.addEventListener('resize', setDimensions)
+  setDimensions()
+  window?.addEventListener('resize', setDimensions)
 })
-
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
diff --git a/docs/examples/async-submission.md b/docs/examples/async-submission.md
index 6f5d9bc..2b99bd9 100644
--- a/docs/examples/async-submission.md
+++ b/docs/examples/async-submission.md
@@ -1,7 +1,9 @@
 ---
 description: This example shows how to use `async/await` to submit a form with VueFormHandler
 ---
+
 # Async submission
+
 This example shows how to use `async/await` to submit a form with VueFormHandler
 
-<CodeExample example="async-submission"></CodeExample>
\ No newline at end of file
+<CodeExample example="async-submission"></CodeExample>
diff --git a/docs/examples/async-validations.md b/docs/examples/async-validations.md
index c43c19b..94633ce 100644
--- a/docs/examples/async-validations.md
+++ b/docs/examples/async-validations.md
@@ -1,8 +1,9 @@
 ---
 description: This example shows how to make use of asynchronous validations
 ---
+
 # Async validations
 
 This example shows how to make use of asynchronous validations
 
-<CodeExample example="async-validations"></CodeExample>
\ No newline at end of file
+<CodeExample example="async-validations"></CodeExample>
diff --git a/docs/examples/basic.md b/docs/examples/basic.md
index 52f8b6f..0442dc3 100644
--- a/docs/examples/basic.md
+++ b/docs/examples/basic.md
@@ -1,8 +1,9 @@
 ---
 description: This example shows how use the handler in it's most basic way
 ---
+
 # Basic
 
 This example shows how use the handler in it's most basic way
 
-<CodeExample example="basic"></CodeExample>
\ No newline at end of file
+<CodeExample example="basic"></CodeExample>
diff --git a/docs/examples/dependent-fields.md b/docs/examples/dependent-fields.md
index f3605bd..63b650d 100644
--- a/docs/examples/dependent-fields.md
+++ b/docs/examples/dependent-fields.md
@@ -1,8 +1,9 @@
 ---
 description: This example shows set and reset values of fields based on the current value of other fields with the form handler
 ---
+
 # Dependent fields
 
 This example shows set and reset values of fields based on the current value of other fields with the form handler
 
-<CodeExample example="dependent-fields"></CodeExample>
\ No newline at end of file
+<CodeExample example="dependent-fields"></CodeExample>
diff --git a/docs/get-started/introduction.md b/docs/get-started/introduction.md
index c6d5c01..39e6470 100644
--- a/docs/get-started/introduction.md
+++ b/docs/get-started/introduction.md
@@ -6,16 +6,18 @@ Here is a minimal example:
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<input v-bind="register('firstName')" />
-		<input v-bind="register('lastName')" />
-		<input type="submit"/>
-	</form>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <input v-bind="register('firstName')" />
+    <input v-bind="register('lastName')" />
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
-const { register, handleSubmit } = useFormHandler();
-const successFn = (form: Record<string,any>) => {console.log({form})}
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+const { register, handleSubmit } = useFormHandler()
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
 
@@ -33,21 +35,21 @@ I [@dbssman](https://github.com/dbssman) wrote VueFormHandler due to the need of
 
 You can install VueFormHandler
 
-```bash 
-yarn add vue-form-handler 
+```bash
+yarn add vue-form-handler
 ```
 
-```bash 
-npm i --save vue-form-handler 
+```bash
+npm i --save vue-form-handler
 ```
 
 ## Why not... ?
 
 There are some form solutions for vue 3 ([VueForm](https://vueform.com/), [FormKit](https://formkit.com/)), but you're forced to use the built-in components they provide, and you don't have enough control over the form itself that, for some approaches would be interesting.
 
-
 ## Influences
 
 This project is heavily inspired by other awesome projects like:
+
 - [jaredpalmer/formik](https://github.com/jaredpalmer/formik)
-- [react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form)
\ No newline at end of file
+- [react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form)
diff --git a/docs/get-started/quick-start.md b/docs/get-started/quick-start.md
index fb32392..df46bd3 100644
--- a/docs/get-started/quick-start.md
+++ b/docs/get-started/quick-start.md
@@ -49,7 +49,7 @@ npm install
 npm run dev
 ```
 
-After looking into it, let's now add our form handler using one of the [Installation Methods](/get-started/introduction.html#installation). 
+After looking into it, let's now add our form handler using one of the [Installation Methods](/get-started/introduction.html#installation).
 
 ```bash
 npm i vue-form-handler
@@ -72,7 +72,7 @@ Congratulations! You're all set to start the tutorial. Nevertheless it's recomme
 
 ## Overview
 
-VueFormHandler consists mainly of one composable, that can be used directly as is with Composition API or also available as a component for people using Options API. This piece handles and helps with: 
+VueFormHandler consists mainly of one composable, that can be used directly as is with Composition API or also available as a component for people using Options API. This piece handles and helps with:
 
 - Initializing a form
 - Getting and setting values
@@ -96,19 +96,22 @@ To set up a basic sign up form is very easy with our solution, we just have to r
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<input type="email" v-bind="register('email')" />
-		<input type="password" v-bind="register('password')" />
-        <input type="password" v-bind="register('confirmPassword')" />
-		<input type="submit"/>
-	</form>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <input type="email" v-bind="register('email')" />
+    <input type="password" v-bind="register('password')" />
+    <input type="password" v-bind="register('confirmPassword')" />
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
-const { register, handleSubmit } = useFormHandler();
-const successFn = (form: Record<string,any>) => {console.log({form})}
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+const { register, handleSubmit } = useFormHandler()
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
+
 Let's analyze what we've done above:
 
 On the script side of things we call the composable and for now we just make use of 2 functions returned by it:
@@ -124,41 +127,58 @@ Our current form works but it's not complete at all, we might want to add valida
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<input type="email" v-bind="register('email', {
-            required: true,
-            pattern: emailRegExp
-        })" />
+  <form @submit.prevent="handleSubmit(successFn)">
+    <input
+      type="email"
+      v-bind="
+        register('email', {
+          required: true,
+          pattern: emailRegExp,
+        })
+      "
+    />
     <p class="error" v-show="formState.errors.email">
-        {{formState.errors.email}}
+      {{ formState.errors.email }}
     </p>
-		<input type="password" v-bind="register('password', {
-            required: true,
-            pattern: passwordRegExp
-        })" />
+    <input
+      type="password"
+      v-bind="
+        register('password', {
+          required: true,
+          pattern: passwordRegExp,
+        })
+      "
+    />
     <p class="error" v-show="formState.errors.password">
-        {{formState.errors.password}}
+      {{ formState.errors.password }}
     </p>
-    <input type="password" v-bind="register('confirmPassword', {
-            required: true,
-            pattern: passwordRegExp
-        })" />
+    <input
+      type="password"
+      v-bind="
+        register('confirmPassword', {
+          required: true,
+          pattern: passwordRegExp,
+        })
+      "
+    />
     <p class="error" v-show="formState.errors.confirmPassword">
-        {{formState.errors.confirmPassword}}
+      {{ formState.errors.confirmPassword }}
     </p>
-		<input type="submit"/>
-	</form>
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
 
 const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
 const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
 
 const { register, formState, handleSubmit } = useFormHandler({
-    validationMode: 'always'
-});
-const successFn = (form: Record<string,any>) => {console.log({form})}
+  validationMode: 'always',
+})
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
 
@@ -167,7 +187,7 @@ As you can see, adding validations for a field is as easy as just using the `opt
 Our `formState` will be updated according to those validations and therefore we can obtain our field errors from `formState.errors.<fieldName>`
 and display them as we prefer.
 
-But with our in-built validations for instance, we cannot make the form invalid whenever the `confirmPassword` field does not match the `password`. That's the reason we have **Custom validation**. 
+But with our in-built validations for instance, we cannot make the form invalid whenever the `confirmPassword` field does not match the `password`. That's the reason we have **Custom validation**.
 
 We can also pass a validation function and specify `validationMode: 'onSubmit'` in order to just validate when the user submits the form.
 
@@ -261,8 +281,8 @@ const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
 const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
 
 const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
-const successFn = (form: Record<string, any>) => { 
-    console.log('Form correctly submitted:', form) 
+const successFn = (form: Record<string, any>) => {
+    console.log('Form correctly submitted:', form)
 }
 const errorFn = (errors: Record<string, any>) => {
     console.error('There where errors while submitting the form:', errors)
@@ -280,4 +300,4 @@ Congratulations! you created a form that:
 
 You can check the final result here: [Final Result](link-to-final-result.com)
 
-Of course this is not all, the VueFormHandler has a lot more potential that you can keep discovering while reading our docs.
\ No newline at end of file
+Of course this is not all, the VueFormHandler has a lot more potential that you can keep discovering while reading our docs.
diff --git a/docs/guides/material-libraries.md b/docs/guides/material-libraries.md
index 4293de5..216e048 100644
--- a/docs/guides/material-libraries.md
+++ b/docs/guides/material-libraries.md
@@ -4,4 +4,4 @@
 
 ## How it works
 
-## Examples
\ No newline at end of file
+## Examples
diff --git a/docs/guides/typescript.md b/docs/guides/typescript.md
index 3f57b12..0031ae7 100644
--- a/docs/guides/typescript.md
+++ b/docs/guides/typescript.md
@@ -1,5 +1,5 @@
 # Typescript
 
-## Type support 
+## Type support
 
 ## Examples
diff --git a/docs/index.md b/docs/index.md
index 203d2f8..e6a61c9 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -35,4 +35,4 @@ features:
   - title: Interactive demos
     details: Coming soon...
     icon: 🎪
----
\ No newline at end of file
+---
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index eb523c4..6447c02 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -2,7 +2,5 @@ import { defineConfig } from 'vite'
 import { SearchPlugin } from 'vitepress-plugin-search'
 
 export default defineConfig({
-    plugins: [
-        SearchPlugin()
-    ]
-})
\ No newline at end of file
+  plugins: [SearchPlugin()],
+})
diff --git a/examples/async-submission/App.vue b/examples/async-submission/App.vue
index 4df97f5..4e3258a 100644
--- a/examples/async-submission/App.vue
+++ b/examples/async-submission/App.vue
@@ -1,32 +1,51 @@
 <template>
   <section>
     <form @submit.prevent="submit()">
-      <label>Email:
-        <input type="email" v-bind="register('email', {
-          required: true,
-          pattern: emailRegExp,
-        })" />
+      <label
+        >Email:
+        <input
+          type="email"
+          v-bind="
+            register('email', {
+              required: true,
+              pattern: emailRegExp,
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.email">
         {{ formState.errors.email }}
       </p>
-      <label> Password:
-        <input type="password" v-bind="register('password', {
-          required: true,
-          pattern: passwordRegExp
-        })" />
+      <label>
+        Password:
+        <input
+          type="password"
+          v-bind="
+            register('password', {
+              required: true,
+              pattern: passwordRegExp,
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.password">
         {{ formState.errors.password }}
       </p>
-      <label> Confirm Password:
-        <input type="password" v-bind="register('confirmPassword', {
-          required: true,
-          pattern: passwordRegExp,
-          validate: {
-            match: (value) => value === values.password || 'Passwords do not match'
-          }
-        })" />
+      <label>
+        Confirm Password:
+        <input
+          type="password"
+          v-bind="
+            register('confirmPassword', {
+              required: true,
+              pattern: passwordRegExp,
+              validate: {
+                match: (value) =>
+                  value === values.password || 'Passwords do not match',
+              },
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.confirmPassword">
         {{ formState.errors.confirmPassword }}
@@ -35,15 +54,17 @@
     </form>
   </section>
 </template>
-<script lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
+<script lang="ts">
+import { useFormHandler } from 'vue-form-handler'
 
 export default {
   setup: () => {
     const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
     const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
 
-    const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
+    const { values, register, formState, handleSubmit } = useFormHandler({
+      validationMode: 'always',
+    })
 
     // success/error functions can be used in the handleSubmit function to handle the form submission
     const successFn = (form: Record<string, any>) => {
@@ -67,12 +88,10 @@ export default {
       values,
       register,
       formState,
-      submit
+      submit,
     }
-  }
+  },
 }
-
-
 </script>
 
 <style>
@@ -90,7 +109,7 @@ body {
   background-color: #242424;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
-  color: #42B883;
+  color: #42b883;
   min-height: 100vh;
 }
 
@@ -102,11 +121,9 @@ form {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 1rem
+  gap: 1rem;
 }
 
-
-
 input,
 select,
 textarea,
@@ -115,13 +132,13 @@ button {
   border-radius: 5px;
   width: 300px;
   min-height: 40px;
-  background-color: #35495E;
-  color: #42B883;
+  background-color: #35495e;
+  color: #42b883;
 }
 
 button {
-  background-color: #42B883;
-  color: #35495E;
+  background-color: #42b883;
+  color: #35495e;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
diff --git a/examples/async-submission/index.html b/examples/async-submission/index.html
index 1a64e08..c2503b2 100644
--- a/examples/async-submission/index.html
+++ b/examples/async-submission/index.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Async validations</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Async validations</title>
-</head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import { createApp } from 'vue'
+    import App from './App.vue'
 
-<body>
-  <div id="app"></div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import App from './App.vue'
-
-  createApp(App).mount('#app')
-
-</script>
-
-</html>
\ No newline at end of file
+    createApp(App).mount('#app')
+  </script>
+</html>
diff --git a/examples/async-submission/tsconfig.json b/examples/async-submission/tsconfig.json
index 2cf0126..a68df06 100644
--- a/examples/async-submission/tsconfig.json
+++ b/examples/async-submission/tsconfig.json
@@ -9,10 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true
   },
@@ -28,4 +25,4 @@
       "path": "./tsconfig.node.json"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/examples/async-validations/App.vue b/examples/async-validations/App.vue
index 756a19c..f9eda5f 100644
--- a/examples/async-validations/App.vue
+++ b/examples/async-validations/App.vue
@@ -1,35 +1,54 @@
 <template>
   <section>
     <form @submit.prevent="handleSubmit(successFn, errorFn)">
-      <label>Email:
-        <input type="email" v-bind="register('email', {
-          required: true,
-          pattern: emailRegExp,
-          validate: {
-            mailValidation
-          }
-        })" />
+      <label
+        >Email:
+        <input
+          type="email"
+          v-bind="
+            register('email', {
+              required: true,
+              pattern: emailRegExp,
+              validate: {
+                mailValidation,
+              },
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.email">
         {{ formState.errors.email }}
       </p>
-      <label> Password:
-        <input type="password" v-bind="register('password', {
-          required: true,
-          pattern: passwordRegExp
-        })" />
+      <label>
+        Password:
+        <input
+          type="password"
+          v-bind="
+            register('password', {
+              required: true,
+              pattern: passwordRegExp,
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.password">
         {{ formState.errors.password }}
       </p>
-      <label> Confirm Password:
-        <input type="password" v-bind="register('confirmPassword', {
-          required: true,
-          pattern: passwordRegExp,
-          validate: {
-            match: (value) => value === values.password || 'Passwords do not match'
-          }
-        })" />
+      <label>
+        Confirm Password:
+        <input
+          type="password"
+          v-bind="
+            register('confirmPassword', {
+              required: true,
+              pattern: passwordRegExp,
+              validate: {
+                match: (value) =>
+                  value === values.password || 'Passwords do not match',
+              },
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.confirmPassword">
         {{ formState.errors.confirmPassword }}
@@ -38,15 +57,17 @@
     </form>
   </section>
 </template>
-<script lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
+<script lang="ts">
+import { useFormHandler } from 'vue-form-handler'
 
 export default {
   setup: () => {
     const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
     const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
 
-    const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
+    const { values, register, formState, handleSubmit } = useFormHandler({
+      validationMode: 'always',
+    })
     const successFn = (form: Record<string, any>) => {
       console.log('Form correctly submitted:', form)
     }
@@ -75,10 +96,8 @@ export default {
       errorFn,
       mailValidation,
     }
-  }
+  },
 }
-
-
 </script>
 
 <style>
@@ -96,7 +115,7 @@ body {
   background-color: #242424;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
-  color: #42B883;
+  color: #42b883;
   min-height: 100vh;
 }
 
@@ -108,11 +127,9 @@ form {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 1rem
+  gap: 1rem;
 }
 
-
-
 input,
 select,
 textarea,
@@ -121,13 +138,13 @@ button {
   border-radius: 5px;
   width: 300px;
   min-height: 40px;
-  background-color: #35495E;
-  color: #42B883;
+  background-color: #35495e;
+  color: #42b883;
 }
 
 button {
-  background-color: #42B883;
-  color: #35495E;
+  background-color: #42b883;
+  color: #35495e;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
diff --git a/examples/async-validations/index.html b/examples/async-validations/index.html
index 26ae761..07012f8 100644
--- a/examples/async-validations/index.html
+++ b/examples/async-validations/index.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Async submission</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Async submission</title>
-</head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import { createApp } from 'vue'
+    import App from './App.vue'
 
-<body>
-  <div id="app"></div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import App from './App.vue'
-
-  createApp(App).mount('#app')
-
-</script>
-
-</html>
\ No newline at end of file
+    createApp(App).mount('#app')
+  </script>
+</html>
diff --git a/examples/async-validations/tsconfig.json b/examples/async-validations/tsconfig.json
index 2cf0126..a68df06 100644
--- a/examples/async-validations/tsconfig.json
+++ b/examples/async-validations/tsconfig.json
@@ -9,10 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true
   },
@@ -28,4 +25,4 @@
       "path": "./tsconfig.node.json"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/examples/basic/App.vue b/examples/basic/App.vue
index 49061db..b4b27a1 100644
--- a/examples/basic/App.vue
+++ b/examples/basic/App.vue
@@ -1,25 +1,30 @@
 <template>
   <section>
     <form @submit.prevent="handleSubmit(successFn)">
-      <label>Email:
+      <label
+        >Email:
         <input type="email" v-bind="register('email')" />
       </label>
-      <label> Password:
+      <label>
+        Password:
         <input type="password" v-bind="register('password')" />
       </label>
-      <label> Confirm Password:
+      <label>
+        Confirm Password:
         <input type="password" v-bind="register('confirmPassword')" />
       </label>
       <button>Submit</button>
     </form>
   </section>
 </template>
-<script lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
+<script lang="ts">
+import { useFormHandler } from 'vue-form-handler'
 
 export default {
   setup: () => {
-    const { register, handleSubmit } = useFormHandler({ validationMode: 'always' });
+    const { register, handleSubmit } = useFormHandler({
+      validationMode: 'always',
+    })
     const successFn = (form: Record<string, any>) => {
       console.log('Form correctly submitted:', form)
     }
@@ -29,9 +34,8 @@ export default {
       handleSubmit,
       successFn,
     }
-  }
+  },
 }
-
 </script>
 
 <style>
@@ -49,7 +53,7 @@ body {
   background-color: #242424;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
-  color: #42B883;
+  color: #42b883;
   min-height: 100vh;
 }
 
@@ -61,11 +65,9 @@ form {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 1rem
+  gap: 1rem;
 }
 
-
-
 input,
 select,
 textarea,
@@ -74,13 +76,13 @@ button {
   border-radius: 5px;
   width: 300px;
   min-height: 40px;
-  background-color: #35495E;
-  color: #42B883;
+  background-color: #35495e;
+  color: #42b883;
 }
 
 button {
-  background-color: #42B883;
-  color: #35495E;
+  background-color: #42b883;
+  color: #35495e;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
diff --git a/examples/basic/index.html b/examples/basic/index.html
index 44f62c6..c9df4e9 100644
--- a/examples/basic/index.html
+++ b/examples/basic/index.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Basic</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Basic</title>
-</head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import { createApp } from 'vue'
+    import App from './App.vue'
 
-<body>
-  <div id="app"></div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import App from './App.vue'
-
-  createApp(App).mount('#app')
-
-</script>
-
-</html>
\ No newline at end of file
+    createApp(App).mount('#app')
+  </script>
+</html>
diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json
index 2cf0126..a68df06 100644
--- a/examples/basic/tsconfig.json
+++ b/examples/basic/tsconfig.json
@@ -9,10 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true
   },
@@ -28,4 +25,4 @@
       "path": "./tsconfig.node.json"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/examples/dependent-fields/App.vue b/examples/dependent-fields/App.vue
index 05ff365..dcec9c3 100644
--- a/examples/dependent-fields/App.vue
+++ b/examples/dependent-fields/App.vue
@@ -1,51 +1,62 @@
 <template>
   <section>
     <form @submit.prevent="handleSubmit(successFn)">
-      <label>Name:
+      <label
+        >Name:
         <input v-bind="register('name')" />
       </label>
-      <label>Email:
+      <label
+        >Email:
         <input type="email" v-bind="register('email')" />
       </label>
-      <label> Password:
+      <label>
+        Password:
         <input type="password" v-bind="register('password')" />
       </label>
-      <label> Confirm Password:
+      <label>
+        Confirm Password:
         <input type="password" v-bind="register('confirmPassword')" />
       </label>
       <button>Submit</button>
     </form>
   </section>
 </template>
-<script lang="ts" >
-import { watch } from 'vue';
-import { useFormHandler } from 'vue-form-handler';
+<script lang="ts">
+import { watch } from 'vue'
+import { useFormHandler } from 'vue-form-handler'
 
 export default {
   setup: () => {
-    const { register, handleSubmit, values, clearField, setValue } = useFormHandler({ validationMode: 'always' });
+    const { register, handleSubmit, values, clearField, setValue } =
+      useFormHandler({ validationMode: 'always' })
     const successFn = (form: Record<string, any>) => {
       console.log('Form correctly submitted:', form)
     }
 
-    watch(() => values.name,
+    watch(
+      () => values.name,
       (curr) => {
-        setValue('email', curr ? `${curr?.toLowerCase().replace(' ', '')}@example.com` : '')
-      })
+        setValue(
+          'email',
+          curr ? `${curr?.toLowerCase().replace(' ', '')}@example.com` : ''
+        )
+      }
+    )
 
-    watch(() => values.password,
+    watch(
+      () => values.password,
       () => {
         clearField('confirmPassword')
-      })
+      }
+    )
 
     return {
       register,
       handleSubmit,
       successFn,
     }
-  }
+  },
 }
-
 </script>
 
 <style>
@@ -63,7 +74,7 @@ body {
   background-color: #242424;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
-  color: #42B883;
+  color: #42b883;
   min-height: 100vh;
 }
 
@@ -75,11 +86,9 @@ form {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 1rem
+  gap: 1rem;
 }
 
-
-
 input,
 select,
 textarea,
@@ -88,13 +97,13 @@ button {
   border-radius: 5px;
   width: 300px;
   min-height: 40px;
-  background-color: #35495E;
-  color: #42B883;
+  background-color: #35495e;
+  color: #42b883;
 }
 
 button {
-  background-color: #42B883;
-  color: #35495E;
+  background-color: #42b883;
+  color: #35495e;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
diff --git a/examples/dependent-fields/index.html b/examples/dependent-fields/index.html
index 1245557..6bbcbb9 100644
--- a/examples/dependent-fields/index.html
+++ b/examples/dependent-fields/index.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dependent Fields</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Dependent Fields</title>
-</head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import { createApp } from 'vue'
+    import App from './App.vue'
 
-<body>
-  <div id="app"></div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import App from './App.vue'
-
-  createApp(App).mount('#app')
-
-</script>
-
-</html>
\ No newline at end of file
+    createApp(App).mount('#app')
+  </script>
+</html>
diff --git a/examples/dependent-fields/tsconfig.json b/examples/dependent-fields/tsconfig.json
index 2cf0126..a68df06 100644
--- a/examples/dependent-fields/tsconfig.json
+++ b/examples/dependent-fields/tsconfig.json
@@ -9,10 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true
   },
@@ -28,4 +25,4 @@
       "path": "./tsconfig.node.json"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/examples/interceptor/App.vue b/examples/interceptor/App.vue
index 97a8d7d..c652cbf 100644
--- a/examples/interceptor/App.vue
+++ b/examples/interceptor/App.vue
@@ -1,15 +1,20 @@
 <template>
   <section>
     <form @submit.prevent="handleSubmit(successFn)">
-      <p> You can use the interceptor to perform actions on any field change before and after or deny a field value
-        change</p>
-      <label>Name:
+      <p>
+        You can use the interceptor to perform actions on any field change
+        before and after or deny a field value change
+      </p>
+      <label
+        >Name:
         <input v-bind="register('name')" />
       </label>
-      <label>Email:
+      <label
+        >Email:
         <input type="email" v-bind="register('email')" />
       </label>
-      <label>Type 1234Abcd to accept the terms and conditions:
+      <label
+        >Type 1234Abcd to accept the terms and conditions:
         <input v-bind="register('tAndC')" />
       </label>
       <pre>
@@ -19,16 +24,18 @@
     </form>
   </section>
 </template>
-<script lang="ts" >
-import { useFormHandler, Interceptor } from 'vue-form-handler';
+<script lang="ts">
+import { useFormHandler, Interceptor } from 'vue-form-handler'
 
-const pageLoadTime = new Date().getTime();
+const pageLoadTime = new Date().getTime()
 const interceptor: Interceptor = ({ name, value }) => {
   if (name !== 'tAndC' || value !== '1234Abcd') {
     return true
   }
   if (new Date().getTime() - pageLoadTime < 30000) {
-    alert('You have to wait 30 seconds before accepting the terms and conditions, since you have to read them')
+    alert(
+      'You have to wait 30 seconds before accepting the terms and conditions, since you have to read them'
+    )
     return false
   }
   return true
@@ -37,8 +44,8 @@ const interceptor: Interceptor = ({ name, value }) => {
 export default {
   setup: () => {
     const { register, handleSubmit, values } = useFormHandler({
-      interceptor
-    });
+      interceptor,
+    })
     const successFn = (form: Record<string, any>) => {
       console.log('Form correctly submitted:', form)
     }
@@ -49,9 +56,8 @@ export default {
       successFn,
       values,
     }
-  }
+  },
 }
-
 </script>
 
 <style>
@@ -69,7 +75,7 @@ body {
   background-color: #242424;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
-  color: #42B883;
+  color: #42b883;
   min-height: 100vh;
 }
 
@@ -81,11 +87,9 @@ form {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 1rem
+  gap: 1rem;
 }
 
-
-
 input,
 select,
 textarea,
@@ -94,13 +98,13 @@ button {
   border-radius: 5px;
   width: 300px;
   min-height: 40px;
-  background-color: #35495E;
-  color: #42B883;
+  background-color: #35495e;
+  color: #42b883;
 }
 
 button {
-  background-color: #42B883;
-  color: #35495E;
+  background-color: #42b883;
+  color: #35495e;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
diff --git a/examples/interceptor/index.html b/examples/interceptor/index.html
index c46fe27..d7cf32d 100644
--- a/examples/interceptor/index.html
+++ b/examples/interceptor/index.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Interceptor</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Interceptor</title>
-</head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import { createApp } from 'vue'
+    import App from './App.vue'
 
-<body>
-  <div id="app"></div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import App from './App.vue'
-
-  createApp(App).mount('#app')
-
-</script>
-
-</html>
\ No newline at end of file
+    createApp(App).mount('#app')
+  </script>
+</html>
diff --git a/examples/interceptor/tsconfig.json b/examples/interceptor/tsconfig.json
index 2cf0126..a68df06 100644
--- a/examples/interceptor/tsconfig.json
+++ b/examples/interceptor/tsconfig.json
@@ -9,10 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true
   },
@@ -28,4 +25,4 @@
       "path": "./tsconfig.node.json"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/examples/tutorial/App.vue b/examples/tutorial/App.vue
index 95585b2..b8259cc 100644
--- a/examples/tutorial/App.vue
+++ b/examples/tutorial/App.vue
@@ -1,32 +1,51 @@
 <template>
   <section>
     <form @submit.prevent="handleSubmit(successFn, errorFn)">
-      <label>Email:
-        <input type="email" v-bind="register('email', {
-          required: true,
-          pattern: emailRegExp
-        })" />
+      <label
+        >Email:
+        <input
+          type="email"
+          v-bind="
+            register('email', {
+              required: true,
+              pattern: emailRegExp,
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.email">
         {{ formState.errors.email }}
       </p>
-      <label> Password:
-        <input type="password" v-bind="register('password', {
-          required: true,
-          pattern: passwordRegExp
-        })" />
+      <label>
+        Password:
+        <input
+          type="password"
+          v-bind="
+            register('password', {
+              required: true,
+              pattern: passwordRegExp,
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.password">
         {{ formState.errors.password }}
       </p>
-      <label> Confirm Password:
-        <input type="password" v-bind="register('confirmPassword', {
-          required: true,
-          pattern: passwordRegExp,
-          validate: {
-            match: (value) => value === values.password || 'Passwords do not match'
-          }
-        })" />
+      <label>
+        Confirm Password:
+        <input
+          type="password"
+          v-bind="
+            register('confirmPassword', {
+              required: true,
+              pattern: passwordRegExp,
+              validate: {
+                match: (value) =>
+                  value === values.password || 'Passwords do not match',
+              },
+            })
+          "
+        />
       </label>
       <p class="error" v-show="formState.errors.confirmPassword">
         {{ formState.errors.confirmPassword }}
@@ -35,15 +54,17 @@
     </form>
   </section>
 </template>
-<script lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
+<script lang="ts">
+import { useFormHandler } from 'vue-form-handler'
 
 export default {
   setup: () => {
     const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
     const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
 
-    const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
+    const { values, register, formState, handleSubmit } = useFormHandler({
+      validationMode: 'always',
+    })
     const successFn = (form: Record<string, any>) => {
       console.log('Form correctly submitted:', form)
     }
@@ -61,10 +82,8 @@ export default {
       successFn,
       errorFn,
     }
-  }
+  },
 }
-
-
 </script>
 
 <style>
@@ -82,7 +101,7 @@ body {
   background-color: #242424;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
-  color: #42B883;
+  color: #42b883;
   min-height: 100vh;
 }
 
@@ -94,11 +113,9 @@ form {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 1rem
+  gap: 1rem;
 }
 
-
-
 input,
 select,
 textarea,
@@ -107,13 +124,13 @@ button {
   border-radius: 5px;
   width: 300px;
   min-height: 40px;
-  background-color: #35495E;
-  color: #42B883;
+  background-color: #35495e;
+  color: #42b883;
 }
 
 button {
-  background-color: #42B883;
-  color: #35495E;
+  background-color: #42b883;
+  color: #35495e;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
diff --git a/examples/tutorial/index.html b/examples/tutorial/index.html
index 47ddba0..b84e3b8 100644
--- a/examples/tutorial/index.html
+++ b/examples/tutorial/index.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tutorial</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Tutorial</title>
-</head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import { createApp } from 'vue'
+    import App from './App.vue'
 
-<body>
-  <div id="app"></div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import App from './App.vue'
-
-  createApp(App).mount('#app')
-
-</script>
-
-</html>
\ No newline at end of file
+    createApp(App).mount('#app')
+  </script>
+</html>
diff --git a/examples/tutorial/tsconfig.json b/examples/tutorial/tsconfig.json
index 2cf0126..a68df06 100644
--- a/examples/tutorial/tsconfig.json
+++ b/examples/tutorial/tsconfig.json
@@ -9,10 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true
   },
@@ -28,4 +25,4 @@
       "path": "./tsconfig.node.json"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index b4d6d43..bd1e415 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "lodash-es": "^4.17.21",
         "markdown-it": "^13.0.1",
         "path": "^0.12.7",
+        "prettier": "2.8.4",
         "typescript": "^4.6.4",
         "vite": "^3.2.3",
         "vite-plugin-dts": "^1.7.1",
@@ -3089,6 +3090,21 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -6480,6 +6496,12 @@
       "integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==",
       "dev": true
     },
+    "prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "dev": true
+    },
     "pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
diff --git a/package.json b/package.json
index 0f65772..051435a 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "path": "^0.12.7",
+    "prettier": "2.8.4",
     "typescript": "^4.6.4",
     "vite": "^3.2.3",
     "vite-plugin-dts": "^1.7.1",
diff --git a/playground/App.vue b/playground/App.vue
index b131bd8..36448f8 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -1,66 +1,93 @@
 <template>
-    <h2>Playground</h2>
-    <input v-bind="register('playground')">
+  <h2>Playground</h2>
+  <form @submit.prevent="submitForm">
+    <input v-bind="register('playground')" />
+    <button>Submit</button>
+    <button
+      type="button"
+      @click="
+        () => {
+          initialValues = {
+            playground: 'Hello Vue 3',
+          }
+        }
+      "
+    >
+      Change initialValues
+    </button>
+  </form>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useFormHandler } from '../src/index'
 
-const { register } = useFormHandler();
+const initialValues = ref({
+  playground: '',
+})
 
+const { register, handleSubmit } = useFormHandler({
+  initialValues,
+})
+
+const submitForm = () => {
+  handleSubmit((form: any) => {
+    console.log(form)
+  })
+}
 </script>
 
 <style>
 * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    text-align: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-align: center;
 }
 
 body {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #242424;
-    font-family: 'Open Sans', sans-serif;
-    font-size: 16px;
-    color: #42B883;
-    min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #242424;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  color: #42b883;
+  min-height: 100vh;
 }
 
 h2 {
-    margin: 1em;
+  margin: 1em;
 }
 
 label {
-    display: block;
+  display: block;
 }
 
 form {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1em;
 }
 
 input,
 select,
 textarea,
 button {
-    border: none;
-    border-radius: 5px;
-    width: 300px;
-    min-height: 40px;
-    background-color: #35495E;
-    color: #42B883;
+  border: none;
+  border-radius: 5px;
+  width: 300px;
+  min-height: 40px;
+  background-color: #35495e;
+  color: #42b883;
 }
 
 button {
-    background-color: #42B883;
-    color: #35495E;
-    cursor: pointer;
-    text-transform: uppercase;
-    font-weight: bold;
+  background-color: #42b883;
+  color: #35495e;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-weight: bold;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/playground/index.html b/playground/index.html
index 79c5410..7ce1e7f 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Playground</title>
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="app"></div>
     <script type="module" src="/main.ts"></script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/src/FormHandler.ts b/src/FormHandler.ts
index 1b0c2ae..c5eafd8 100644
--- a/src/FormHandler.ts
+++ b/src/FormHandler.ts
@@ -1,22 +1,23 @@
-import { useFormHandler } from './useFormHandler';
-import { FormHandlerParams, FormHandlerReturn } from './types/formHandler';
-import { defineComponent, PropType } from '@vue/runtime-core';
+import { useFormHandler } from './useFormHandler'
+import { FormHandlerParams, FormHandlerReturn } from './types/formHandler'
+import { defineComponent, PropType } from '@vue/runtime-core'
 
 export const FormHandler = defineComponent({
-    name: 'FormHandler',
-    props: {
-        initialValues: Object as PropType<FormHandlerParams['initialValues']>,
-        interceptor: Function as PropType<FormHandlerParams['interceptor']>,
-        validate: Function as PropType<FormHandlerParams['validate']>,
-        validationMode: Object as PropType<FormHandlerParams['validationMode']>
-    },
-    setup: (props, { slots }) => {
-        const { ...formHandler } = useFormHandler({
-            initialValues: props.initialValues,
-            interceptor: props.interceptor,
-            validate: props.validate,
-            validationMode: props.validationMode
-        })
-        return () => slots.default && slots.default({ ...formHandler } as FormHandlerReturn)
-    }
-})
\ No newline at end of file
+  name: 'FormHandler',
+  props: {
+    initialValues: Object as PropType<FormHandlerParams['initialValues']>,
+    interceptor: Function as PropType<FormHandlerParams['interceptor']>,
+    validate: Function as PropType<FormHandlerParams['validate']>,
+    validationMode: Object as PropType<FormHandlerParams['validationMode']>,
+  },
+  setup: (props, { slots }) => {
+    const { ...formHandler } = useFormHandler({
+      initialValues: props.initialValues,
+      interceptor: props.interceptor,
+      validate: props.validate,
+      validationMode: props.validationMode,
+    })
+    return () =>
+      slots.default && slots.default({ ...formHandler } as FormHandlerReturn)
+  },
+})
diff --git a/src/constants.ts b/src/constants.ts
index 4b8e7fb..2416ecb 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,6 @@
-import { BaseControlEmits } from "./types"
+import { BaseControlEmits } from './types'
 
-export const DEFAULT_FIELD_VALUE = null;
+export const DEFAULT_FIELD_VALUE = null
 
 export const BaseInputProps = {
   name: { type: String, required: true },
@@ -10,8 +10,15 @@ export const BaseInputProps = {
   error: { type: String, default: () => '' },
   onBlur: { type: Function, required: true },
   onClear: { type: Function, default: () => null },
-  modelValue: { type: [String, Object, Array, Number, Boolean, null], required: true },
+  modelValue: {
+    type: [String, Object, Array, Number, Boolean, null],
+    required: true,
+  },
   'onUpdate:modelValue': { type: Function, required: true },
 }
 
-export const BaseInputEmits: BaseControlEmits = ['update:modelValue', 'blur', 'clear']
\ No newline at end of file
+export const BaseInputEmits: BaseControlEmits = [
+  'update:modelValue',
+  'blur',
+  'clear',
+]
diff --git a/src/index.ts b/src/index.ts
index d8a45e6..d62fa6b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
 export * from './FormHandler'
 export * from './useFormHandler'
 export * from './types'
-export * from './constants'
\ No newline at end of file
+export * from './constants'
diff --git a/src/logic/getDefaultFieldValue.ts b/src/logic/getDefaultFieldValue.ts
index e5aea9f..e8d0f8e 100644
--- a/src/logic/getDefaultFieldValue.ts
+++ b/src/logic/getDefaultFieldValue.ts
@@ -1,12 +1,12 @@
-import { isCheckboxInput } from "../utils"
-import { DEFAULT_FIELD_VALUE } from "../constants"
+import { isCheckboxInput } from '../utils'
+import { DEFAULT_FIELD_VALUE } from '../constants'
 
 export default (el: any) => {
-    if (!el) {
-        return DEFAULT_FIELD_VALUE
-    }
-    if (isCheckboxInput(el)) {
-        return false
-    }
+  if (!el) {
     return DEFAULT_FIELD_VALUE
-}
\ No newline at end of file
+  }
+  if (isCheckboxInput(el)) {
+    return false
+  }
+  return DEFAULT_FIELD_VALUE
+}
diff --git a/src/logic/getNativeFieldValue.ts b/src/logic/getNativeFieldValue.ts
index e99d290..15c453f 100644
--- a/src/logic/getNativeFieldValue.ts
+++ b/src/logic/getNativeFieldValue.ts
@@ -1,22 +1,27 @@
-import { DEFAULT_FIELD_VALUE } from '../constants';
-import { isCheckboxInput, isMultipleSelect, isRadioInput } from "../utils"
+import { DEFAULT_FIELD_VALUE } from '../constants'
+import { isCheckboxInput, isMultipleSelect, isRadioInput } from '../utils'
 
 export default (el: any) => {
-    if (!el) {
-        return DEFAULT_FIELD_VALUE
+  if (!el) {
+    return DEFAULT_FIELD_VALUE
+  }
+  if (Array.isArray(el)) {
+    if (isRadioInput(el[0])) {
+      return (
+        el.find(({ checked, disabled }) => checked && !disabled)?.value ||
+        el[0].value
+      )
     }
-    if (Array.isArray(el)) {
-        if (isRadioInput(el[0])) {
-            return el.find(({ checked, disabled }) => checked && !disabled)?.value || el[0].value
-        }
-        return el[0].value
-    }
-    if (isCheckboxInput(el)) {
-        return el.checked
-    }
-    if (isMultipleSelect(el)) {
-        const values = [...el.options]?.filter(({ selected }: any) => selected).map(({ value }: any) => value)
-        return !values.length ? DEFAULT_FIELD_VALUE : values
-    }
-    return el.value || DEFAULT_FIELD_VALUE
-}
\ No newline at end of file
+    return el[0].value
+  }
+  if (isCheckboxInput(el)) {
+    return el.checked
+  }
+  if (isMultipleSelect(el)) {
+    const values = [...el.options]
+      ?.filter(({ selected }: any) => selected)
+      .map(({ value }: any) => value)
+    return !values.length ? DEFAULT_FIELD_VALUE : values
+  }
+  return el.value || DEFAULT_FIELD_VALUE
+}
diff --git a/src/logic/index.ts b/src/logic/index.ts
index 45d83d2..cb1ebcc 100644
--- a/src/logic/index.ts
+++ b/src/logic/index.ts
@@ -3,4 +3,4 @@ export { default as getDefaultFieldValue } from './getDefaultFieldValue'
 export { default as validateField } from './validateField'
 export { default as validateForm } from './validateForm'
 export { default as refFn } from './refFn'
-export { default as transformValidations } from './transformValidations'
\ No newline at end of file
+export { default as transformValidations } from './transformValidations'
diff --git a/src/logic/refFn.ts b/src/logic/refFn.ts
index c5ec948..a91dc3e 100644
--- a/src/logic/refFn.ts
+++ b/src/logic/refFn.ts
@@ -1,50 +1,57 @@
-import { Refs, FieldReference } from "../types";
-import { isCheckboxInput, isMultipleSelect, isNativeControl, isRadioInput } from "../utils"
+import { Refs, FieldReference } from '../types'
+import {
+  isCheckboxInput,
+  isMultipleSelect,
+  isNativeControl,
+  isRadioInput,
+} from '../utils'
 
 export default (name: string, _refs: Refs, values: any) => (fieldRef: any) => {
-    if (!fieldRef) {
-        delete _refs[name]
-        return
+  if (!fieldRef) {
+    delete _refs[name]
+    return
+  }
+  if (fieldRef.$el || !fieldRef.nodeName || !isNativeControl(fieldRef)) {
+    //TODO: Correctly type this in order to expect a fixed data structure
+    _refs[name].ref = {
+      type: 'custom',
     }
-    if (fieldRef.$el || !fieldRef.nodeName || !isNativeControl(fieldRef)) {
-        //TODO: Correctly type this in order to expect a fixed data structure
-        _refs[name].ref = {
-            type: 'custom'
-        }
-        return
+    return
+  }
+  const isFirstRegister =
+    _refs[name] &&
+    (!_refs[name].ref ||
+      (Array.isArray(_refs[name].ref) &&
+        isRadioInput(fieldRef) &&
+        !(_refs[name].ref as FieldReference[]).some(
+          (option: any) => option.value === fieldRef.value
+        )))
+  if (isFirstRegister) {
+    _refs[name].ref = isRadioInput(fieldRef)
+      ? [...((_refs[name].ref as FieldReference[]) || []), fieldRef]
+      : fieldRef
+  }
+  if (isRadioInput(fieldRef)) {
+    if (isFirstRegister && !!fieldRef.checked) {
+      values[name] = fieldRef.value
+      return
     }
-    const isFirstRegister = _refs[name] && (!_refs[name].ref
-        || (Array.isArray(_refs[name].ref)
-            && isRadioInput(fieldRef)
-            && (!(_refs[name].ref as FieldReference[])
-                .some((option: any) => option.value === fieldRef.value))))
-    if (isFirstRegister) {
-        _refs[name].ref = isRadioInput(fieldRef)
-            ? [...(_refs[name].ref as FieldReference[] || [])
-                , fieldRef]
-            : fieldRef
+    fieldRef.checked = values[name] === fieldRef.value
+    return
+  }
+  if (isCheckboxInput(fieldRef)) {
+    if (isFirstRegister && !!fieldRef.checked) {
+      values[name] = true
+      return
     }
-    if (isRadioInput(fieldRef)) {
-        if (isFirstRegister && !!fieldRef.checked) {
-            values[name] = fieldRef.value
-            return
-        }
-        fieldRef.checked = (values[name] === fieldRef.value)
-        return
-    }
-    if (isCheckboxInput(fieldRef)) {
-        if (isFirstRegister && !!fieldRef.checked) {
-            values[name] = true
-            return
-        }
-        fieldRef.checked = !!values[name]
-        return
-    }
-    if (isMultipleSelect(fieldRef)) {
-        [...fieldRef.options].forEach((option: any, index) => {
-            fieldRef[index].selected = !!values[name]?.includes(option.value)
-        })
-        return
-    }
-    fieldRef.value = values[name]
-};
\ No newline at end of file
+    fieldRef.checked = !!values[name]
+    return
+  }
+  if (isMultipleSelect(fieldRef)) {
+    ;[...fieldRef.options].forEach((option: any, index) => {
+      fieldRef[index].selected = !!values[name]?.includes(option.value)
+    })
+    return
+  }
+  fieldRef.value = values[name]
+}
diff --git a/src/logic/transformValidations.ts b/src/logic/transformValidations.ts
index 9e02e1a..0b5b02a 100644
--- a/src/logic/transformValidations.ts
+++ b/src/logic/transformValidations.ts
@@ -1,38 +1,59 @@
-import { ValidationsConfiguration, ValidationWithMessage, Validations } from "../types";
-import { max, maxLength, min, minLength, pattern, required } from "../utils";
+import {
+  ValidationsConfiguration,
+  ValidationWithMessage,
+  Validations,
+} from '../types'
+import { max, maxLength, min, minLength, pattern, required } from '../utils'
 
 export default (validations: ValidationsConfiguration = {}): Validations => {
-    return {
-        ...(validations.required && {
-            required: typeof validations.required === 'string'
-                ? required(validations.required)
-                : required()
-        }),
-        ...(validations.min && {
-            min: typeof validations.min === 'number'
-                ? min(validations.min)
-                : min(validations.min.value as number, validations.min.message)
-        }),
-        ...(validations.max && {
-            max: typeof validations.max === 'number'
-                ? max(validations.max)
-                : max(validations.max.value as number, validations.max.message)
-        }),
-        ...(validations.minLength && {
-            minLength: typeof validations.minLength === 'number'
-                ? minLength(validations.minLength)
-                : minLength(validations.minLength.value as number, validations.minLength.message)
-        }),
-        ...(validations.maxLength && {
-            maxLength: typeof validations.maxLength === 'number'
-                ? maxLength(validations.maxLength)
-                : maxLength(validations.maxLength.value as number, validations.maxLength.message)
-        }),
-        ...(validations.pattern && {
-            pattern: !(validations.pattern as ValidationWithMessage)?.value
-                ? pattern((typeof validations.pattern === 'string' ? new RegExp(validations.pattern) : validations.pattern) as RegExp)
-                : pattern((validations.pattern as ValidationWithMessage).value as RegExp, (validations.pattern as ValidationWithMessage).message as string)
-        })
-    }
+  return {
+    ...(validations.required && {
+      required:
+        typeof validations.required === 'string'
+          ? required(validations.required)
+          : required(),
+    }),
+    ...(validations.min && {
+      min:
+        typeof validations.min === 'number'
+          ? min(validations.min)
+          : min(validations.min.value as number, validations.min.message),
+    }),
+    ...(validations.max && {
+      max:
+        typeof validations.max === 'number'
+          ? max(validations.max)
+          : max(validations.max.value as number, validations.max.message),
+    }),
+    ...(validations.minLength && {
+      minLength:
+        typeof validations.minLength === 'number'
+          ? minLength(validations.minLength)
+          : minLength(
+              validations.minLength.value as number,
+              validations.minLength.message
+            ),
+    }),
+    ...(validations.maxLength && {
+      maxLength:
+        typeof validations.maxLength === 'number'
+          ? maxLength(validations.maxLength)
+          : maxLength(
+              validations.maxLength.value as number,
+              validations.maxLength.message
+            ),
+    }),
+    ...(validations.pattern && {
+      pattern: !(validations.pattern as ValidationWithMessage)?.value
+        ? pattern(
+            (typeof validations.pattern === 'string'
+              ? new RegExp(validations.pattern)
+              : validations.pattern) as RegExp
+          )
+        : pattern(
+            (validations.pattern as ValidationWithMessage).value as RegExp,
+            (validations.pattern as ValidationWithMessage).message as string
+          ),
+    }),
+  }
 }
-
diff --git a/src/logic/validateField.ts b/src/logic/validateField.ts
index caf3410..faf55d2 100644
--- a/src/logic/validateField.ts
+++ b/src/logic/validateField.ts
@@ -1,18 +1,23 @@
-import { ValidateFieldParams } from './../types/logic';
+import { ValidateFieldParams } from './../types/logic'
 
-export default async ({ name, values, formState, _refs }: ValidateFieldParams): Promise<void> => {
-    if (!Object.keys(_refs[name]._validations).length) {
-        return
+export default async ({
+  name,
+  values,
+  formState,
+  _refs,
+}: ValidateFieldParams): Promise<void> => {
+  if (!Object.keys(_refs[name]?._validations ?? {}).length) {
+    return
+  }
+  if (_refs[name]._disabled) {
+    return
+  }
+  for (const validation of Object.values(_refs[name]._validations)) {
+    const result = await validation(values[name])
+    if (result !== true) {
+      formState.errors[name] = result
+      break
     }
-    if (_refs[name]._disabled) {
-        return
-    }
-    for (const validation of Object.values(_refs[name]._validations)) {
-        const result = await validation(values[name])
-        if (result !== true) {
-            formState.errors[name] = result
-            break;
-        }
-        delete formState.errors[name]
-    }
-}
\ No newline at end of file
+    delete formState.errors[name]
+  }
+}
diff --git a/src/logic/validateForm.ts b/src/logic/validateForm.ts
index 1dea11d..37a77dc 100644
--- a/src/logic/validateForm.ts
+++ b/src/logic/validateForm.ts
@@ -1,8 +1,8 @@
-import { ValidateFormParams } from './../types/logic';
-import validateField from "./validateField"
+import { ValidateFormParams } from './../types/logic'
+import validateField from './validateField'
 
 export default async (params: ValidateFormParams) => {
-    for (const name of Object.keys(params.values)) {
-        await validateField({ ...params, name })
-    }
-}
\ No newline at end of file
+  for (const name of Object.keys(params.values)) {
+    await validateField({ ...params, name })
+  }
+}
diff --git a/src/test/component.test.ts b/src/test/component.test.ts
index c6fd3e6..25dfc48 100644
--- a/src/test/component.test.ts
+++ b/src/test/component.test.ts
@@ -1,44 +1,44 @@
 import { FormHandler } from '../FormHandler'
 import { mount } from '@vue/test-utils'
-import { expect, it, describe } from "vitest"
+import { expect, it, describe } from 'vitest'
 
 describe('FormHandler component testing', () => {
-    it('Form handler gets mounted', () => {
-        expect(FormHandler).toBeTruthy();
+  it('Form handler gets mounted', () => {
+    expect(FormHandler).toBeTruthy()
 
-        const wrapper = mount(FormHandler)
-        expect(wrapper.exists()).toBeTruthy()
-    })
-    it('Form handler scoped slot provides values and form state', () => {
-        expect(FormHandler).toBeTruthy();
+    const wrapper = mount(FormHandler)
+    expect(wrapper.exists()).toBeTruthy()
+  })
+  it('Form handler scoped slot provides values and form state', () => {
+    expect(FormHandler).toBeTruthy()
 
-        const wrapper = mount(FormHandler, {
-            slots: {
-                default: `<template #default="props">
+    const wrapper = mount(FormHandler, {
+      slots: {
+        default: `<template #default="props">
                     {{props}}
                     </template>
-                `
-            }
-        })
-        expect(wrapper.html()).toContain('values')
-        expect(wrapper.html()).toContain('formState')
+                `,
+      },
     })
-    it('Form handler is correctly initialized', () => {
-        const initialValues = {
-            field1: 'something',
-            field2: 'some other thing'
-        }
-        const wrapper = mount(FormHandler, {
-            props: {
-                initialValues
-            },
-            slots: {
-                default: `<template #default="props">
+    expect(wrapper.html()).toContain('values')
+    expect(wrapper.html()).toContain('formState')
+  })
+  it('Form handler is correctly initialized', () => {
+    const initialValues = {
+      field1: 'something',
+      field2: 'some other thing',
+    }
+    const wrapper = mount(FormHandler, {
+      props: {
+        initialValues,
+      },
+      slots: {
+        default: `<template #default="props">
                     {{props}}
                     </template>
-                `
-            }
-        })
-        expect(JSON.parse(wrapper.html())?.values).toStrictEqual(initialValues)
+                `,
+      },
     })
-})
\ No newline at end of file
+    expect(JSON.parse(wrapper.html())?.values).toStrictEqual(initialValues)
+  })
+})
diff --git a/src/test/handler.test.ts b/src/test/handler.test.ts
index c136ca5..b193b84 100644
--- a/src/test/handler.test.ts
+++ b/src/test/handler.test.ts
@@ -1,94 +1,95 @@
-import { initialState, useFormHandler } from '../useFormHandler';
-import { expect, it, describe } from "vitest"
+import { initialState, useFormHandler } from '../useFormHandler'
+import { expect, it, describe } from 'vitest'
 
 describe('Form handler testing', () => {
-    it('Initial form state and values', () => {
-        const { values, formState } = useFormHandler();
-        expect(values).toStrictEqual({})
-        expect(formState).toStrictEqual({ ...initialState() })
+  it('Initial form state and values', () => {
+    const { values, formState } = useFormHandler()
+    expect(values).toStrictEqual({})
+    expect(formState).toStrictEqual({ ...initialState() })
+  })
+  it('Initial values should be applied without', () => {
+    const initialValues = {
+      field: 'test',
+    }
+    const { values } = useFormHandler({ initialValues })
+    expect(values).toStrictEqual(initialValues)
+  })
+  it('Setting a value programmatically', async () => {
+    const { values, setValue, formState } = useFormHandler()
+    await setValue('field', 'oneTwoThree')
+    expect(values.field).toBe('oneTwoThree')
+    expect(formState.isDirty).toBeTruthy()
+  })
+  it('Clearing a field programmatically', async () => {
+    const { register, values, setValue, formState, clearField } =
+      useFormHandler()
+    register('field')
+    await setValue('field', 'oneTwoThree')
+    expect(values.field).toBe('oneTwoThree')
+    expect(formState.isDirty).toBeTruthy()
+    await clearField('field')
+    expect(values.field).toBe(null)
+    expect(formState.isDirty).toBeFalsy()
+  })
+  it('Clearing an initialized field leaves it dirty', async () => {
+    const { register, values, formState, clearField } = useFormHandler({
+      initialValues: { field: 'value' },
     })
-    it('Initial values should be applied without', () => {
-        const initialValues = {
-            field: 'test'
-        }
-        const { values } = useFormHandler({ initialValues });
-        expect(values).toStrictEqual(initialValues)
+    register('field')
+    expect(values.field).toBe('value')
+    expect(formState.isDirty).toBeFalsy()
+    await clearField('field')
+    expect(values.field).toBe(null)
+    expect(formState.isDirty).toBeTruthy()
+  })
+  it('Setting an error programmatically', async () => {
+    const { formState, setError } = useFormHandler()
+    setError('field', 'some error')
+    expect(formState.errors).toStrictEqual({ field: 'some error' })
+    expect(formState.isValid).toBeFalsy()
+  })
+  it('Clearing an error programmatically', async () => {
+    const { formState, setError, clearError } = useFormHandler()
+    const error = 'This field has an error'
+    setError('field', error)
+    expect(formState.isValid).toBeFalsy()
+    clearError('field')
+    expect(formState.errors.field).toBeUndefined()
+    expect(formState.isValid).toBeTruthy()
+  })
+  it('Clearing all errors of the form programmatically', async () => {
+    const { formState, setError, clearError } = useFormHandler()
+    const error = 'some error'
+    setError('field1', error)
+    setError('field2', error)
+    expect(formState.errors.field1).toBe(error)
+    expect(formState.errors.field2).toBe(error)
+    expect(formState.isValid).toBeFalsy()
+    clearError()
+    expect(formState.errors.field1).toBeUndefined()
+    expect(formState.errors.field2).toBeUndefined()
+    expect(formState.isValid).toBeTruthy()
+  })
+  it('Resetting a field it back to its initial values and state', async () => {
+    const { values, formState, resetField, setValue } = useFormHandler({
+      initialValues: { field: 'value' },
     })
-    it('Setting a value programmatically', async () => {
-        const { values, setValue, formState } = useFormHandler();
-        await setValue('field', 'oneTwoThree');
-        expect(values.field).toBe('oneTwoThree')
-        expect(formState.isDirty).toBeTruthy()
+    expect(values.field).toBe('value')
+    expect(formState.isDirty).toBeFalsy()
+    await setValue('field', 'some other value')
+    expect(values.field).toBe('some other value')
+    expect(formState.isDirty).toBeTruthy()
+    resetField('field')
+    expect(values.field).toBe('value')
+    expect(formState.isDirty).toBeFalsy()
+  })
+  it('Expecting modifiedValues to work', async () => {
+    const { modifiedValues, setValue } = useFormHandler({
+      initialValues: {
+        field: 'something',
+      },
     })
-    it('Clearing a field programmatically', async () => {
-        const { register, values, setValue, formState, clearField } = useFormHandler();
-        register('field')
-        await setValue('field', 'oneTwoThree');
-        expect(values.field).toBe('oneTwoThree')
-        expect(formState.isDirty).toBeTruthy()
-        await clearField('field');
-        expect(values.field).toBe(null)
-        expect(formState.isDirty).toBeFalsy()
-    })
-    it('Clearing an initialized field leaves it dirty', async () => {
-        const { register, values, formState, clearField } = useFormHandler({
-            initialValues: { field: 'value' }
-        });
-        register('field')
-        expect(values.field).toBe('value')
-        expect(formState.isDirty).toBeFalsy()
-        await clearField('field');
-        expect(values.field).toBe(null)
-        expect(formState.isDirty).toBeTruthy()
-    })
-    it('Setting an error programmatically', async () => {
-        const { formState, setError } = useFormHandler();
-        setError('field', 'some error')
-        expect(formState.errors).toStrictEqual({ field: 'some error' })
-        expect(formState.isValid).toBeFalsy()
-    })
-    it('Clearing an error programmatically', async () => {
-        const { formState, setError, clearError } = useFormHandler();
-        const error = 'This field has an error'
-        setError('field', error)
-        expect(formState.isValid).toBeFalsy()
-        clearError('field')
-        expect(formState.errors.field).toBeUndefined()
-        expect(formState.isValid).toBeTruthy()
-    })
-    it('Clearing all errors of the form programmatically', async () => {
-        const { formState, setError, clearError } = useFormHandler();
-        const error = 'some error'
-        setError('field1', error)
-        setError('field2', error)
-        expect(formState.errors.field1).toBe(error)
-        expect(formState.errors.field2).toBe(error)
-        expect(formState.isValid).toBeFalsy()
-        clearError()
-        expect(formState.errors.field1).toBeUndefined()
-        expect(formState.errors.field2).toBeUndefined()
-        expect(formState.isValid).toBeTruthy()
-    })
-    it('Resetting a field it back to its initial values and state', async () => {
-        const { values, formState, resetField, setValue } = useFormHandler({
-            initialValues: { field: 'value' }
-        });
-        expect(values.field).toBe('value')
-        expect(formState.isDirty).toBeFalsy()
-        await setValue('field', 'some other value')
-        expect(values.field).toBe('some other value')
-        expect(formState.isDirty).toBeTruthy()
-        resetField('field');
-        expect(values.field).toBe('value')
-        expect(formState.isDirty).toBeFalsy()
-    })
-    it('Expecting modifiedValues to work', async () => {
-        const { modifiedValues, setValue } = useFormHandler({
-            initialValues: {
-                field: 'something'
-            }
-        });
-        await setValue('field2', 'another thing')
-        expect(modifiedValues()).toStrictEqual({ field2: 'another thing' })
-    })
-})
\ No newline at end of file
+    await setValue('field2', 'another thing')
+    expect(modifiedValues()).toStrictEqual({ field2: 'another thing' })
+  })
+})
diff --git a/src/test/register.test.ts b/src/test/register.test.ts
index 37b636d..1dc00d8 100644
--- a/src/test/register.test.ts
+++ b/src/test/register.test.ts
@@ -2,67 +2,68 @@ import { describe, it, expect } from 'vitest'
 import { useFormHandler } from '../useFormHandler'
 
 describe('Register function testing', () => {
-    it('Registering a field', () => {
-        const { values, register } = useFormHandler();
-        const field = register('field')
-        expect(field.name).toBe('field')
-        expect(field.error).toBeUndefined()
-        expect(field.onBlur).toBeDefined()
-        expect(field.isDirty).toBeUndefined()
-        expect(field.isTouched).toBeUndefined()
-        expect(field.onClear).toBeDefined()
-        expect(field.onChange).toBeDefined()
-        expect(field.modelValue).toBe(null)
-        expect(field['onUpdate:modelValue']).toBeDefined()
-        expect(values.field).toBe(null)
+  it('Registering a field', () => {
+    const { values, register } = useFormHandler()
+    const field = register('field')
+    expect(field.name).toBe('field')
+    expect(field.error).toBeUndefined()
+    expect(field.onBlur).toBeDefined()
+    expect(field.isDirty).toBeUndefined()
+    expect(field.isTouched).toBeUndefined()
+    expect(field.onClear).toBeDefined()
+    expect(field.onChange).toBeDefined()
+    expect(field.modelValue).toBe(null)
+    expect(field['onUpdate:modelValue']).toBeDefined()
+    expect(values.field).toBe(null)
+  })
+  it('Specified native field should have native handlers', () => {
+    const { register } = useFormHandler()
+    const field = register('field', { native: true })
+    expect(field.ref).toBeDefined()
+    expect(field.onChange).toBeDefined()
+  })
+  it("Specified custom field shouldn't have native handlers", () => {
+    const { register } = useFormHandler()
+    const field = register('field', { native: false })
+    expect(field.onChange).toBeUndefined()
+    expect(field.modelValue).toBeDefined()
+    expect(field['onUpdate:modelValue']).toBeDefined()
+  })
+  it('Input registered with details receives dirty and touched states', () => {
+    const { register } = useFormHandler()
+    const field = register('field', { withDetails: true })
+    expect(field.isDirty).toBeDefined()
+    expect(field.isTouched).toBeDefined()
+  })
+  it('Registering a field with default value', () => {
+    const { values, register } = useFormHandler()
+    register('field', { defaultValue: 'something' })
+    expect(values.field).toBe('something')
+  })
+  it('Registered validations work on update via handler', async () => {
+    const { values, register, formState } = useFormHandler()
+    const field = register('field', {
+      validate: {
+        error: (val) => val !== 'error' || 'Error with your field',
+      },
     })
-    it('Specified native field should have native handlers', () => {
-        const { register } = useFormHandler();
-        const field = register('field', { native: true })
-        expect(field.ref).toBeDefined()
-        expect(field.onChange).toBeDefined()
+    if (field['onUpdate:modelValue']) {
+      await field['onUpdate:modelValue']('error')
+      expect(values.field).toBe('error')
+      expect(formState.isValid).toBeFalsy()
+    }
+  })
+  it('Registered validations work on update via setter', async () => {
+    const { values, register, formState, setValue, triggerValidation } =
+      useFormHandler()
+    register('field', {
+      validate: {
+        error: (val) => val !== 'error' || 'Error with your field',
+      },
     })
-    it('Specified custom field shouldn\'t have native handlers', () => {
-        const { register } = useFormHandler();
-        const field = register('field', { native: false })
-        expect(field.onChange).toBeUndefined()
-        expect(field.modelValue).toBeDefined()
-        expect(field['onUpdate:modelValue']).toBeDefined()
-    })
-    it('Input registered with details receives dirty and touched states', () => {
-        const { register } = useFormHandler();
-        const field = register('field', { withDetails: true })
-        expect(field.isDirty).toBeDefined()
-        expect(field.isTouched).toBeDefined()
-    })
-    it('Registering a field with default value', () => {
-        const { values, register } = useFormHandler();
-        register('field', { defaultValue: 'something' })
-        expect(values.field).toBe('something')
-    })
-    it('Registered validations work on update via handler', async () => {
-        const { values, register, formState } = useFormHandler();
-        const field = register('field', {
-            validate: {
-                error: (val) => val !== 'error' || 'Error with your field'
-            }
-        })
-        if (field['onUpdate:modelValue']) {
-            await field['onUpdate:modelValue']('error')
-            expect(values.field).toBe('error')
-            expect(formState.isValid).toBeFalsy()
-        }
-    })
-    it('Registered validations work on update via setter', async () => {
-        const { values, register, formState, setValue, triggerValidation } = useFormHandler();
-        register('field', {
-            validate: {
-                error: (val) => val !== 'error' || 'Error with your field'
-            }
-        })
-        await setValue('field', 'error')
-        await triggerValidation('field')
-        expect(values.field).toBe('error')
-        expect(formState.isValid).toBeFalsy()
-    })
-})
\ No newline at end of file
+    await setValue('field', 'error')
+    await triggerValidation('field')
+    expect(values.field).toBe('error')
+    expect(formState.isValid).toBeFalsy()
+  })
+})
diff --git a/src/types/baseControl.ts b/src/types/baseControl.ts
index 86e2d47..95f5042 100644
--- a/src/types/baseControl.ts
+++ b/src/types/baseControl.ts
@@ -1,40 +1,40 @@
 /** Props for a base control */
 export interface BaseControlProps {
-    /** Name of the control */
-    name: string,
+  /** Name of the control */
+  name: string
 
-    /** Current error of the control */
-    error: string | undefined
+  /** Current error of the control */
+  error: string | undefined
 
-    /** Value binding for native inputs */
-    ref: (fieldRef: any) => void,
+  /** Value binding for native inputs */
+  ref: (fieldRef: any) => void
 
-    /** Value binding for custom inputs */
-    modelValue: any,
+  /** Value binding for custom inputs */
+  modelValue: any
 
-    /** Handler binding for custom inputs */
-    'onUpdate:modelValue': (value: any) => Promise<void>,
+  /** Handler binding for custom inputs */
+  'onUpdate:modelValue': (value: any) => Promise<void>
 
-    /** Clear handler */
-    onClear: () => void,
+  /** Clear handler */
+  onClear: () => void
 
-    /** Blur handler */
-    onBlur: () => void,
+  /** Blur handler */
+  onBlur: () => void
 
-    /** Disabled state of the field*/
-    disabled?: boolean
+  /** Disabled state of the field*/
+  disabled?: boolean
 
-    /** Current dirty state of the control */
-    isDirty?: boolean
+  /** Current dirty state of the control */
+  isDirty?: boolean
 
-    /** Current touched state of the control */
-    isTouched?: boolean
+  /** Current touched state of the control */
+  isTouched?: boolean
 
-    /** Handler binding for native inputs */
-    onChange?: (el: any) => Promise<void>,
+  /** Handler binding for native inputs */
+  onChange?: (el: any) => Promise<void>
 }
 
 /** Each emit the handler could be expecting */
 export type EmitOption = 'update:modelValue' | 'blur' | 'clear'
 /** Emit collection for a base control */
-export type BaseControlEmits = EmitOption[]
\ No newline at end of file
+export type BaseControlEmits = EmitOption[]
diff --git a/src/types/formHandler.ts b/src/types/formHandler.ts
index d04d38f..72c234f 100644
--- a/src/types/formHandler.ts
+++ b/src/types/formHandler.ts
@@ -1,24 +1,24 @@
-import { ComputedRef, Ref } from "vue"
-import { RegisterOptions, Register } from "./register"
+import { ComputedRef, Ref } from 'vue'
+import { RegisterOptions, Register } from './register'
 
 export interface FormState {
-    /** Boolean holding the dirty state of the form */
-    isDirty: boolean
+  /** Boolean holding the dirty state of the form */
+  isDirty: boolean
 
-    /** Boolean holding the touched state of the form */
-    isTouched: boolean
+  /** Boolean holding the touched state of the form */
+  isTouched: boolean
 
-    /** Boolean holding the valid state of the form */
-    isValid: boolean
+  /** Boolean holding the valid state of the form */
+  isValid: boolean
 
-    /** Object holding the dirty fields of the form */
-    dirty: Record<string, boolean>
+  /** Object holding the dirty fields of the form */
+  dirty: Record<string, boolean>
 
-    /** Object holding the touched fields of the form */
-    touched: Record<string, boolean>
+  /** Object holding the touched fields of the form */
+  touched: Record<string, boolean>
 
-    /** Object holding the fields with errors (one or multiple, check:validationErrors)*/
-    errors: Record<string, string | undefined>
+  /** Object holding the fields with errors (one or multiple, check:validationErrors)*/
+  errors: Record<string, string | undefined>
 }
 
 /** Field initializer */
@@ -64,108 +64,118 @@ export type ModifiedValues = () => Record<string, any>
 export type HandleSubmitSuccessFn = (values: Record<string, any>) => void
 
 /** Optional function to be called after a form failed to submit */
-export type HandleSubmitErrorFn = (errors: Record<string, string | undefined>) => void
+export type HandleSubmitErrorFn = (
+  errors: Record<string, string | undefined>
+) => void
 
 /** Checks for the validity of the form before submitting */
 export type IsValidForm = () => Promise<boolean>
 
 /** Submit handler */
-export type HandleSubmit = (successFn: HandleSubmitSuccessFn, errorFn?: HandleSubmitErrorFn) => void
+export type HandleSubmit = (
+  successFn: HandleSubmitSuccessFn,
+  errorFn?: HandleSubmitErrorFn
+) => void
 
 export interface InterceptorParams {
-    /** Name of the field that is currently about to be set*/
-    name: string,
+  /** Name of the field that is currently about to be set*/
+  name: string
 
-    /** Value of the field that is currently about to be set */
-    value: any,
+  /** Value of the field that is currently about to be set */
+  value: any
 
-    /** Current form values */
-    values: Record<string, any>
+  /** Current form values */
+  values: Record<string, any>
 
-    /** Current form state */
-    formState: FormState
+  /** Current form state */
+  formState: FormState
 
-    /** Triggers the validation of a field */
-    triggerValidation: TriggerValidation
+  /** Triggers the validation of a field */
+  triggerValidation: TriggerValidation
 
-    /** Function to reset a field */
-    resetField: ResetField
+  /** Function to reset a field */
+  resetField: ResetField
 
-    /** Function to reset the whole form */
-    resetForm: ResetForm
+  /** Function to reset the whole form */
+  resetForm: ResetForm
 
-    /** Function to set an error on a field programmatically */
-    setError: SetError
+  /** Function to set an error on a field programmatically */
+  setError: SetError
 
-    /** Function to set the value of a field programmatically */
-    setValue: SetValue
+  /** Function to set the value of a field programmatically */
+  setValue: SetValue
 
-    /** Function to clear one or more errors on a desired field or the whole form*/
-    clearError: ClearError
+  /** Function to clear one or more errors on a desired field or the whole form*/
+  clearError: ClearError
 
-    /** Function to clear a desired field*/
-    clearField: ClearField
+  /** Function to clear a desired field*/
+  clearField: ClearField
 
-    /** Function that returns the modified values of the form */
-    modifiedValues: ModifiedValues
+  /** Function that returns the modified values of the form */
+  modifiedValues: ModifiedValues
 }
 
 export type Interceptor = (_: InterceptorParams) => Promise<boolean> | boolean
 
-export type FormValidation = (values: Record<string, any>) => Promise<boolean> | boolean
+export type FormValidation = (
+  values: Record<string, any>
+) => Promise<boolean> | boolean
 
 export interface FormHandlerParams {
-    /** Values to initialize the form */
-    initialValues?: Record<string, any> | Ref<Record<string, any>> | ComputedRef<Record<string, any>>
+  /** Values to initialize the form */
+  initialValues?:
+    | Record<string, any>
+    | Ref<Record<string, any>>
+    | ComputedRef<Record<string, any>>
 
-    /** Field change interceptor */
-    interceptor?: Interceptor
+  /** Field change interceptor */
+  interceptor?: Interceptor
 
-    /** Validation function to execute before submitting (when using this individual validations are invalidated) */
-    validate?: FormValidation
+  /** Validation function to execute before submitting (when using this individual validations are invalidated) */
+  validate?: FormValidation
 
-    /** Validation behavior options */
-    validationMode?: 'onChange' | 'onBlur' | 'onSubmit' | 'always'
+  /** Validation behavior options */
+  validationMode?: 'onChange' | 'onBlur' | 'onSubmit' | 'always'
 }
 export interface FormHandlerReturn {
-    /** Current form state */
-    formState: FormState
+  /** Current form state */
+  formState: FormState
 
-    /** Current form values */
-    values: Record<string, any>
+  /** Current form values */
+  values: Record<string, any>
 
-    /** Function to clear one or more errors on a desired field or the whole form*/
-    clearError: ClearError
+  /** Function to clear one or more errors on a desired field or the whole form*/
+  clearError: ClearError
 
-    /** Function to clear a desired field*/
-    clearField: ClearField
+  /** Function to clear a desired field*/
+  clearField: ClearField
 
-    /** Submit handler */
-    handleSubmit: HandleSubmit
+  /** Submit handler */
+  handleSubmit: HandleSubmit
 
-    /** Function that returns the modified values of the form */
-    modifiedValues: ModifiedValues
+  /** Function that returns the modified values of the form */
+  modifiedValues: ModifiedValues
 
-    /** Method to register a field and make it interact with the current form */
-    register: Register
+  /** Method to register a field and make it interact with the current form */
+  register: Register
 
-    /** Function to reset a field */
-    resetField: ResetField
+  /** Function to reset a field */
+  resetField: ResetField
 
-    /** Function to reset the whole form */
-    resetForm: ResetForm
+  /** Function to reset the whole form */
+  resetForm: ResetForm
 
-    /** Function to set an error on a field programmatically */
-    setError: SetError
+  /** Function to set an error on a field programmatically */
+  setError: SetError
 
-    /** Function to set the value of a field programmatically */
-    setValue: SetValue
+  /** Function to set the value of a field programmatically */
+  setValue: SetValue
 
-    /** Triggers the validation of a field */
-    triggerValidation: TriggerValidation
+  /** Triggers the validation of a field */
+  triggerValidation: TriggerValidation
 
-    /** Method to unregister a field and make it stop interacting with the current form */
-    unregister: (name: string) => void
+  /** Method to unregister a field and make it stop interacting with the current form */
+  unregister: (name: string) => void
 }
 
 /** Form handler solution as a composable function */
diff --git a/src/types/index.ts b/src/types/index.ts
index 47ad96a..d3e821a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -3,4 +3,4 @@ export * from './logic'
 export * from './register'
 export * from './validations'
 export * from './refs'
-export * from './baseControl'
\ No newline at end of file
+export * from './baseControl'
diff --git a/src/types/logic.ts b/src/types/logic.ts
index 892503e..9665106 100644
--- a/src/types/logic.ts
+++ b/src/types/logic.ts
@@ -1,14 +1,14 @@
-import { FormState } from "./formHandler"
-import { Refs } from "./refs"
+import { FormState } from './formHandler'
+import { Refs } from './refs'
 
 export interface ValidateFormParams {
-    _refs: Refs
-    formState: FormState
-    values: Record<string, any>
+  _refs: Refs
+  formState: FormState
+  values: Record<string, any>
 }
 
 export interface ValidateFieldParams extends ValidateFormParams {
-    name: string
+  name: string
 }
 
-export interface TriggerValidationParams extends ValidateFieldParams { }
\ No newline at end of file
+export interface TriggerValidationParams extends ValidateFieldParams {}
diff --git a/src/types/refs.ts b/src/types/refs.ts
index 65c2561..31c65f7 100644
--- a/src/types/refs.ts
+++ b/src/types/refs.ts
@@ -1,19 +1,41 @@
-import { Validations } from "./register";
+import { Validations } from './register'
 
 export interface FieldReference {
-    type: 'custom' | 'select' | 'select-multiple' | 'radio' | 'checkbox' | 'input' | 'textarea' | 'file' | 'range' | 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
-    value?: any;
-    checked?: boolean;
-    selected?: boolean;
-    options?: any;
-    nodeName?: string;
+  type:
+    | 'custom'
+    | 'select'
+    | 'select-multiple'
+    | 'radio'
+    | 'checkbox'
+    | 'input'
+    | 'textarea'
+    | 'file'
+    | 'range'
+    | 'color'
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'time'
+    | 'url'
+    | 'week'
+  value?: any
+  checked?: boolean
+  selected?: boolean
+  options?: any
+  nodeName?: string
 }
 
 export interface WrappedReference {
-    ref: FieldReference | FieldReference[];
-    _validations: Validations;
-    _disabled: boolean;
-    _defaultValue: any;
+  ref: FieldReference | FieldReference[]
+  _validations: Validations
+  _disabled: boolean
+  _defaultValue: any
 }
 
-export type Refs = Record<string, WrappedReference>;
\ No newline at end of file
+export type Refs = Record<string, WrappedReference>
diff --git a/src/types/register.ts b/src/types/register.ts
index 19a0f65..74af6f1 100644
--- a/src/types/register.ts
+++ b/src/types/register.ts
@@ -1,5 +1,5 @@
-import { BaseControlProps } from "./baseControl";
-import { ValidationsConfiguration, NativeValidations } from "./validations";
+import { BaseControlProps } from './baseControl'
+import { ValidationsConfiguration, NativeValidations } from './validations'
 
 /** Function returning true for correct validation or a string with an error if it's invalid */
 export type ValidationFn = (_: any) => Promise<true | string> | true | string
@@ -7,30 +7,32 @@ export type ValidationFn = (_: any) => Promise<true | string> | true | string
 /** Validations collection as an object */
 export type Validations = Record<string, ValidationFn>
 
-
 export interface RegisterOptions extends ValidationsConfiguration {
-    /** Indicates wether the input is native or not, set to false if the extra listeners are not desired */
-    native?: boolean
+  /** Indicates wether the input is native or not, set to false if the extra listeners are not desired */
+  native?: boolean
 
-    /** Default value for the field */
-    defaultValue?: any
+  /** Default value for the field */
+  defaultValue?: any
 
-    /** Custom validations for the field */
-    validate?: Validations
+  /** Custom validations for the field */
+  validate?: Validations
 
-    /** Set to true if you want to bind also dirty and touched states */
-    withDetails?: boolean
+  /** Set to true if you want to bind also dirty and touched states */
+  withDetails?: boolean
 
-    /** Set to true if the field should be disabled */
-    disabled?: boolean
+  /** Set to true if the field should be disabled */
+  disabled?: boolean
 
-    /** Indicates if the control should use the native html validation */
-    useNativeValidation?: boolean
+  /** Indicates if the control should use the native html validation */
+  useNativeValidation?: boolean
 }
 
 export type RegisterReturn = BaseControlProps & NativeValidations
 
 /** Function that allows you to register a control to interact with the form */
-export type Register = (name: string, options?: RegisterOptions) => RegisterReturn
+export type Register = (
+  name: string,
+  options?: RegisterOptions
+) => RegisterReturn
 
-export type Unregister = (name: string) => void
\ No newline at end of file
+export type Unregister = (name: string) => void
diff --git a/src/types/validations.ts b/src/types/validations.ts
index bb66b21..f8ab738 100644
--- a/src/types/validations.ts
+++ b/src/types/validations.ts
@@ -1,59 +1,59 @@
 export interface ValidationWithMessage {
-    /** Validation value */
-    value: number | string | RegExp
+  /** Validation value */
+  value: number | string | RegExp
 
-    /** Validation message */
-    message: string
+  /** Validation message */
+  message: string
 }
 
 export interface NativeValidations {
-    /** Required validation */
-    required?: boolean
+  /** Required validation */
+  required?: boolean
 
-    /** Min validation */
-    min?: number
+  /** Min validation */
+  min?: number
 
-    /** Max validation */
-    max?: number
+  /** Max validation */
+  max?: number
 
-    /** MinLength validation */
-    minLength?: number
+  /** MinLength validation */
+  minLength?: number
 
-    /** MaxLength validation */
-    maxLength?: number
+  /** MaxLength validation */
+  maxLength?: number
 
-    /** Pattern validation */
-    pattern?: string
+  /** Pattern validation */
+  pattern?: string
 }
 
 export interface ValidationsConfiguration {
-    /** Required validation */
-    /** If true, the field is required */
-    /** If a string, the field is required and the string is the validation message */
-    required?: boolean | string
-
-    /** Min validation */
-    /** If a number, the field must be greater than or equal to the number */
-    /** If an object, the field must be greater than or equal to the object.value and the object.message is the validation message */
-    min?: number | ValidationWithMessage
-
-    /** Max validation */
-    /** If a number, the field must be less than or equal to the number */
-    /** If an object, the field must be less than or equal to the object.value and the object.message is the validation message */
-    max?: number | ValidationWithMessage
-
-    /** MinLength validation */
-    /** If a number, the field must be greater than or equal to the number */
-    /** If an object, the field must be greater than or equal to the object.value and the object.message is the validation message */
-    minLength?: number | ValidationWithMessage
-
-    /** MaxLength validation */
-    /** If a number, the field must be less than or equal to the number */
-    /** If an object, the field must be less than or equal to the object.value and the object.message is the validation message */
-    maxLength?: number | ValidationWithMessage
-
-    /** Pattern validation */
-    /** If a RegExp, the field must match the RegExp */
-    /** If an object, the field must match the object.value and the object.message is the validation message */
-    pattern?: string | RegExp | ValidationWithMessage
-}
\ No newline at end of file
+  /** Required validation */
+  /** If true, the field is required */
+  /** If a string, the field is required and the string is the validation message */
+  required?: boolean | string
+
+  /** Min validation */
+  /** If a number, the field must be greater than or equal to the number */
+  /** If an object, the field must be greater than or equal to the object.value and the object.message is the validation message */
+  min?: number | ValidationWithMessage
+
+  /** Max validation */
+  /** If a number, the field must be less than or equal to the number */
+  /** If an object, the field must be less than or equal to the object.value and the object.message is the validation message */
+  max?: number | ValidationWithMessage
+
+  /** MinLength validation */
+  /** If a number, the field must be greater than or equal to the number */
+  /** If an object, the field must be greater than or equal to the object.value and the object.message is the validation message */
+  minLength?: number | ValidationWithMessage
+
+  /** MaxLength validation */
+  /** If a number, the field must be less than or equal to the number */
+  /** If an object, the field must be less than or equal to the object.value and the object.message is the validation message */
+  maxLength?: number | ValidationWithMessage
+
+  /** Pattern validation */
+  /** If a RegExp, the field must match the RegExp */
+  /** If an object, the field must match the object.value and the object.message is the validation message */
+  pattern?: string | RegExp | ValidationWithMessage
+}
diff --git a/src/useFormHandler.ts b/src/useFormHandler.ts
index cc69cff..aab63f6 100644
--- a/src/useFormHandler.ts
+++ b/src/useFormHandler.ts
@@ -1,5 +1,5 @@
-import { NativeValidations } from './types/validations';
-import { DEFAULT_FIELD_VALUE } from './constants';
+import { NativeValidations } from './types/validations'
+import { DEFAULT_FIELD_VALUE } from './constants'
 import {
   ModifiedValues,
   TriggerValidation,
@@ -22,12 +22,19 @@ import {
   Refs,
   ValidationsConfiguration,
   Unregister,
-  FieldReference
-} from './types';
+  FieldReference,
+} from './types'
 import { reactive, readonly, unref, watch } from '@vue/runtime-core'
 import { isEqual } from 'lodash-es'
-import { getNativeFieldValue, validateField, validateForm, getDefaultFieldValue, refFn, transformValidations } from './logic';
-import { isNativeControl } from './utils';
+import {
+  getNativeFieldValue,
+  validateField,
+  validateForm,
+  getDefaultFieldValue,
+  refFn,
+  transformValidations,
+} from './logic'
+import { isNativeControl } from './utils'
 
 export const initialState = () => ({
   touched: {},
@@ -42,23 +49,25 @@ export const useFormHandler: UseFormHandler = ({
   initialValues = {},
   interceptor,
   validate,
-  validationMode = 'onChange'
+  validationMode = 'onChange',
 } = {}) => {
   const values: Record<string, any> = reactive({ ...unref(initialValues) })
   const formState = reactive<FormState>({ ...initialState() })
 
   let _refs: Refs = {}
 
-  const _getDefault = (name: string): any => _refs[name]?._defaultValue ?? getDefaultFieldValue(_refs[name]?.ref)
-  const _getInitial = (name: string): any => unref(initialValues)?.[name] ?? _getDefault(name)
+  const _getDefault = (name: string): any =>
+    _refs[name]?._defaultValue ?? getDefaultFieldValue(_refs[name]?.ref)
+  const _getInitial = (name: string): any =>
+    unref(initialValues)?.[name] ?? _getDefault(name)
   const _initControl: InitControl = (name, options) => {
     const needsReset = options.disabled && _refs[name] && !_refs[name]._disabled
     _refs[name] = {
-      ..._refs[name] || {},
+      ...(_refs[name] || {}),
       _validations: {
-        ...(!options.useNativeValidation
-          && transformValidations(options as ValidationsConfiguration)),
-        ...(options.validate || {})
+        ...(!options.useNativeValidation &&
+          transformValidations(options as ValidationsConfiguration)),
+        ...(options.validate || {}),
       },
       _defaultValue: options.defaultValue,
       _disabled: !!options.disabled,
@@ -141,7 +150,9 @@ export const useFormHandler: UseFormHandler = ({
 
   const resetForm: ResetForm = () => {
     Object.assign(values, {
-      ...Object.fromEntries(Object.keys(values).map((key) => [key, _getInitial(key)])),
+      ...Object.fromEntries(
+        Object.keys(values).map((key) => [key, _getInitial(key)])
+      ),
     })
     Object.assign(formState, initialState())
   }
@@ -152,15 +163,16 @@ export const useFormHandler: UseFormHandler = ({
   }
 
   const modifiedValues: ModifiedValues = () => {
-    return Object.fromEntries(Object
-      .entries(values)
-      .filter(([name]) => formState.dirty[name]))
+    return Object.fromEntries(
+      Object.entries(values).filter(([name]) => formState.dirty[name])
+    )
   }
 
   const setValue: SetValue = async (name, value = DEFAULT_FIELD_VALUE) => {
-    if (!_refs[name]?._disabled
-      && (!interceptor
-        || await interceptor({
+    if (
+      !_refs[name]?._disabled &&
+      (!interceptor ||
+        (await interceptor({
           clearError,
           clearField,
           formState,
@@ -172,15 +184,20 @@ export const useFormHandler: UseFormHandler = ({
           setValue,
           triggerValidation,
           value,
-          values
-        }))) {
+          values,
+        })))
+    ) {
       values[name] = value
       setDirty(name, !isEqual(value, _getInitial(name)))
       return
     }
-    if (isNativeControl((Array.isArray(_refs[name].ref)
-      ? (_refs[name].ref as FieldReference[])[0]
-      : _refs[name].ref) as HTMLInputElement)) {
+    if (
+      isNativeControl(
+        (Array.isArray(_refs[name].ref)
+          ? (_refs[name].ref as FieldReference[])[0]
+          : _refs[name].ref) as HTMLInputElement
+      )
+    ) {
       const prev = values[name]
       values[name] = undefined
       values[name] = prev
@@ -194,7 +211,10 @@ export const useFormHandler: UseFormHandler = ({
     }
   }
 
-  const handleChange: HandleChange = async (name, value = DEFAULT_FIELD_VALUE) => {
+  const handleChange: HandleChange = async (
+    name,
+    value = DEFAULT_FIELD_VALUE
+  ) => {
     await setValue(name, value)
     setTouched(name, true)
     if (['always', 'onChange'].includes(validationMode)) {
@@ -203,7 +223,7 @@ export const useFormHandler: UseFormHandler = ({
   }
 
   const clearField: ClearField = async (name) => {
-    const defaultValue: any = _getDefault(name);
+    const defaultValue: any = _getDefault(name)
     if (defaultValue !== values[name]) {
       await setValue(name, defaultValue)
       await triggerValidation(name)
@@ -230,13 +250,15 @@ export const useFormHandler: UseFormHandler = ({
       native,
       useNativeValidation,
       pattern,
-      ...nativeValidations } = options
-    _initControl(name, options);
-    return ({
+      ...nativeValidations
+    } = options
+    _initControl(name, options)
+    return {
       name,
       modelValue: values[name],
       error: formState.errors[name],
-      'onUpdate:modelValue': async (value: any) => await handleChange(name, value),
+      'onUpdate:modelValue': async (value: any) =>
+        await handleChange(name, value),
       ref: refFn(name, _refs, values),
       onBlur: () => handleBlur(name),
       onClear: () => clearField(name),
@@ -247,7 +269,10 @@ export const useFormHandler: UseFormHandler = ({
       }),
       ...(native !== false && {
         onChange: async () => {
-          if (!_refs[name].ref || (_refs[name].ref as FieldReference).type === 'custom') {
+          if (
+            !_refs[name].ref ||
+            (_refs[name].ref as FieldReference).type === 'custom'
+          ) {
             return
           }
           await handleChange(name, getNativeFieldValue(_refs[name].ref))
@@ -256,10 +281,12 @@ export const useFormHandler: UseFormHandler = ({
       ...(useNativeValidation && {
         ...({
           ...nativeValidations,
-          ...(pattern && { pattern: pattern instanceof RegExp ? pattern.source : pattern }),
-        } as NativeValidations)
-      })
-    })
+          ...(pattern && {
+            pattern: pattern instanceof RegExp ? pattern.source : pattern,
+          }),
+        } as NativeValidations),
+      }),
+    }
   }
 
   const isValidForm: IsValidForm = async () => {
@@ -271,23 +298,22 @@ export const useFormHandler: UseFormHandler = ({
   }
 
   const handleSubmit: HandleSubmit = async (successFn, errorFn) => {
-    try {
-      if (await isValidForm()) {
-        successFn(values)
-        return
-      }
-      if (errorFn) {
-        errorFn(formState.errors)
-        return
-      }
-    } catch {
-      throw new Error('One or more errors found during validation')
+    if (await isValidForm()) {
+      successFn(values)
+      return
+    }
+    if (errorFn) {
+      errorFn(formState.errors)
     }
   }
 
-  watch(() => initialValues, () => {
-    resetForm()
-  }, { deep: true })
+  watch(
+    () => initialValues,
+    () => {
+      resetForm()
+    },
+    { deep: true }
+  )
 
   return {
     clearError,
@@ -302,6 +328,6 @@ export const useFormHandler: UseFormHandler = ({
     setValue,
     triggerValidation,
     unregister,
-    values: readonly(values)
+    values: readonly(values),
   }
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 64ef0e5..d5424ed 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -7,4 +7,4 @@ export { default as maxLength } from './maxLength'
 export { default as min } from './min'
 export { default as minLength } from './minLength'
 export { default as pattern } from './pattern'
-export { default as required } from './required'
\ No newline at end of file
+export { default as required } from './required'
diff --git a/src/utils/isCheckboxInput.ts b/src/utils/isCheckboxInput.ts
index 33e3134..ace1b4a 100644
--- a/src/utils/isCheckboxInput.ts
+++ b/src/utils/isCheckboxInput.ts
@@ -1,2 +1 @@
-export default (element: HTMLInputElement) =>
-    element.type === 'checkbox';
+export default (element: HTMLInputElement) => element.type === 'checkbox'
diff --git a/src/utils/isMultipleSelect.ts b/src/utils/isMultipleSelect.ts
index f61b637..b85703d 100644
--- a/src/utils/isMultipleSelect.ts
+++ b/src/utils/isMultipleSelect.ts
@@ -1,2 +1,2 @@
 export default (element: HTMLSelectElement) =>
-    element.type === `select-multiple`;
+  element.type === `select-multiple`
diff --git a/src/utils/isNativeControl.ts b/src/utils/isNativeControl.ts
index 9b507b5..5c66775 100644
--- a/src/utils/isNativeControl.ts
+++ b/src/utils/isNativeControl.ts
@@ -1,2 +1,2 @@
 export default (element: HTMLElement) =>
-    ['input', 'select', 'textarea'].includes(element.nodeName?.toLowerCase())
+  ['input', 'select', 'textarea'].includes(element.nodeName?.toLowerCase())
diff --git a/src/utils/isRadioInput.ts b/src/utils/isRadioInput.ts
index eec4495..f22c128 100644
--- a/src/utils/isRadioInput.ts
+++ b/src/utils/isRadioInput.ts
@@ -1,2 +1 @@
-export default (element: HTMLInputElement) =>
-    element.type === 'radio';
\ No newline at end of file
+export default (element: HTMLInputElement) => element.type === 'radio'
diff --git a/src/utils/max.ts b/src/utils/max.ts
index 5592c7b..9374058 100644
--- a/src/utils/max.ts
+++ b/src/utils/max.ts
@@ -2,15 +2,16 @@
  * @param max - The maximum value
  * @param message - The validation message
  * @returns A function that returns true if the value is less than the max or a string with the message if it's not
- * @example 
+ * @example
  * const max = max(10, 'This field must be less than 10')
- * 
+ *
  * max(5) // true
  * max(15) // 'This field must be less than 10'
  */
-export default (max: number, message = `This field must be less than ${max}`) => (value: any) => {
+export default (max: number, message = `This field must be less than ${max}`) =>
+  (value: any) => {
     if (value && value > max) {
-        return message
+      return message
     }
     return true
-}
\ No newline at end of file
+  }
diff --git a/src/utils/maxLength.ts b/src/utils/maxLength.ts
index cec7709..1a90325 100644
--- a/src/utils/maxLength.ts
+++ b/src/utils/maxLength.ts
@@ -4,13 +4,17 @@
  * @returns {function} A function that returns true if the value is less than the max or a string with the message if it's not
  * @example
  * const maxLength = maxLength(10, 'This field must be less than 10 characters')
- * 
+ *
  * maxLength('123456789') // true
  * maxLength('12345678901') // 'This field must be less than 10 characters'
  */
-export default (max: number, message = `This field must be less than ${max} characters`) => (value: any) => {
+export default (
+    max: number,
+    message = `This field must be less than ${max} characters`
+  ) =>
+  (value: any) => {
     if (value && value.length > max) {
-        return message
+      return message
     }
     return true
-}
+  }
diff --git a/src/utils/min.ts b/src/utils/min.ts
index adc94e0..3e8abb4 100644
--- a/src/utils/min.ts
+++ b/src/utils/min.ts
@@ -4,13 +4,14 @@
  * @returns A function that returns true if the value is greater than the min or a string with the message if it's not
  * @example
  * const min = min(10, 'This field must be at least 10')
- * 
+ *
  * min(15) // true
  * min(5) // 'This field must be at least 10'
  */
-export default (min: number, message = `This field must be at least ${min}`) => (value: any) => {
+export default (min: number, message = `This field must be at least ${min}`) =>
+  (value: any) => {
     if (value && value < min) {
-        return message
+      return message
     }
     return true
-}
\ No newline at end of file
+  }
diff --git a/src/utils/minLength.ts b/src/utils/minLength.ts
index bebb8de..a2a88ec 100644
--- a/src/utils/minLength.ts
+++ b/src/utils/minLength.ts
@@ -4,13 +4,17 @@
  * @returns A function that returns true if the value is greater than the min or a string with the message if it's not
  * @example
  * const minLength = minLength(10, 'This field must be at least 10 characters')
- * 
+ *
  * minLength('1234567890') // true
  * minLength('123456789') // 'This field must be at least 10 characters'
  */
-export default (min: number, message = `This field must be at least ${min} characters`) => (value: any) => {
+export default (
+    min: number,
+    message = `This field must be at least ${min} characters`
+  ) =>
+  (value: any) => {
     if (value && value.length < min) {
-        return message
+      return message
     }
     return true
-}
\ No newline at end of file
+  }
diff --git a/src/utils/pattern.ts b/src/utils/pattern.ts
index e951440..1f50534 100644
--- a/src/utils/pattern.ts
+++ b/src/utils/pattern.ts
@@ -4,13 +4,14 @@
  * @returns A function that returns true if the value matches the pattern or a string with the message if it doesn't
  * @example
  * const pattern = pattern(/^[a-z]+$/, 'This field is invalid')
- * 
+ *
  * pattern('abc') // true
  * pattern('123') // 'This field is invalid'
  */
-export default (pattern: RegExp, message = 'This field is invalid') => (value: any) => {
+export default (pattern: RegExp, message = 'This field is invalid') =>
+  (value: any) => {
     if (value && !pattern.test(value)) {
-        return message
+      return message
     }
     return true
-}
\ No newline at end of file
+  }
diff --git a/src/utils/required.ts b/src/utils/required.ts
index 79e172b..c01dbc8 100644
--- a/src/utils/required.ts
+++ b/src/utils/required.ts
@@ -3,13 +3,14 @@
  * @returns {function} A function that returns true if the value is not undefined, null or an empty string or a string with the message if it is
  * @example
  * const required = required('This field is required')
- * 
+ *
  * required('abc') // true
  * required('') // 'This field is required'
  */
-export default (message = 'This field is required') => (value: any) => {
+export default (message = 'This field is required') =>
+  (value: any) => {
     if (value === undefined || value === null || value === '') {
-        return message
+      return message
     }
     return true
-}
\ No newline at end of file
+  }
diff --git a/src/utils/test/isCheckboxInput.test.ts b/src/utils/test/isCheckboxInput.test.ts
index 6a4e4ef..6f708f9 100644
--- a/src/utils/test/isCheckboxInput.test.ts
+++ b/src/utils/test/isCheckboxInput.test.ts
@@ -2,11 +2,11 @@ import { describe, it, expect } from 'vitest'
 import isCheckboxInput from '../isCheckboxInput'
 
 describe('isCheckboxInput', () => {
-    it('should return true for checkbox inputs', () => {
-        expect(isCheckboxInput({ type: 'checkbox' } as HTMLInputElement)).toBe(true)
-    })
+  it('should return true for checkbox inputs', () => {
+    expect(isCheckboxInput({ type: 'checkbox' } as HTMLInputElement)).toBe(true)
+  })
 
-    it('should return false for non-checkbox inputs', () => {
-        expect(isCheckboxInput({ type: 'text' } as HTMLInputElement)).toBe(false)
-    })
-})
\ No newline at end of file
+  it('should return false for non-checkbox inputs', () => {
+    expect(isCheckboxInput({ type: 'text' } as HTMLInputElement)).toBe(false)
+  })
+})
diff --git a/src/utils/test/isMultipleSelect.test.ts b/src/utils/test/isMultipleSelect.test.ts
index 6f3faa1..1110522 100644
--- a/src/utils/test/isMultipleSelect.test.ts
+++ b/src/utils/test/isMultipleSelect.test.ts
@@ -2,11 +2,15 @@ import { describe, it, expect } from 'vitest'
 import isMultipleSelect from '../isMultipleSelect'
 
 describe('isMultipleSelect', () => {
-    it('should return true for multiple select', () => {
-        expect(isMultipleSelect({ type: 'select-multiple' } as HTMLSelectElement)).toBe(true)
-    })
+  it('should return true for multiple select', () => {
+    expect(
+      isMultipleSelect({ type: 'select-multiple' } as HTMLSelectElement)
+    ).toBe(true)
+  })
 
-    it('should return false for non-multiple select', () => {
-        expect(isMultipleSelect({ type: 'custom' } as HTMLSelectElement)).toBe(false)
-    })
-});
\ No newline at end of file
+  it('should return false for non-multiple select', () => {
+    expect(isMultipleSelect({ type: 'custom' } as HTMLSelectElement)).toBe(
+      false
+    )
+  })
+})
diff --git a/src/utils/test/isNativeControl.test.ts b/src/utils/test/isNativeControl.test.ts
index bbc5151..382caa8 100644
--- a/src/utils/test/isNativeControl.test.ts
+++ b/src/utils/test/isNativeControl.test.ts
@@ -2,23 +2,23 @@ import { describe, it, expect } from 'vitest'
 import isNativeControl from '../isNativeControl'
 
 describe('isNativeControl', () => {
-    it('should return true for input control', () => {
-        const input = document.createElement('input')
-        expect(isNativeControl(input)).toBe(true)
-    })
+  it('should return true for input control', () => {
+    const input = document.createElement('input')
+    expect(isNativeControl(input)).toBe(true)
+  })
 
-    it('should return true for select control', () => {
-        const select = document.createElement('select')
-        expect(isNativeControl(select)).toBe(true)
-    })
+  it('should return true for select control', () => {
+    const select = document.createElement('select')
+    expect(isNativeControl(select)).toBe(true)
+  })
 
-    it('should return true for textarea control', () => {
-        const textarea = document.createElement('textarea')
-        expect(isNativeControl(textarea)).toBe(true)
-    })
+  it('should return true for textarea control', () => {
+    const textarea = document.createElement('textarea')
+    expect(isNativeControl(textarea)).toBe(true)
+  })
 
-    it('should return false for non-native controls', () => {
-        const div = document.createElement('div')
-        expect(isNativeControl(div)).toBe(false)
-    })
-})
\ No newline at end of file
+  it('should return false for non-native controls', () => {
+    const div = document.createElement('div')
+    expect(isNativeControl(div)).toBe(false)
+  })
+})
diff --git a/src/utils/test/isRadioInput.test.ts b/src/utils/test/isRadioInput.test.ts
index 5910e64..3469166 100644
--- a/src/utils/test/isRadioInput.test.ts
+++ b/src/utils/test/isRadioInput.test.ts
@@ -2,11 +2,11 @@ import { describe, it, expect } from 'vitest'
 import isRadioInput from '../isRadioInput'
 
 describe('isRadioInput', () => {
-    it('should return true for radio inputs', () => {
-        expect(isRadioInput({ type: 'radio' } as HTMLInputElement)).toBe(true)
-    })
+  it('should return true for radio inputs', () => {
+    expect(isRadioInput({ type: 'radio' } as HTMLInputElement)).toBe(true)
+  })
 
-    it('should return false for non-radio inputs', () => {
-        expect(isRadioInput({ type: 'text' } as HTMLInputElement)).toBe(false)
-    })
-})
\ No newline at end of file
+  it('should return false for non-radio inputs', () => {
+    expect(isRadioInput({ type: 'text' } as HTMLInputElement)).toBe(false)
+  })
+})
diff --git a/src/utils/test/max.test.ts b/src/utils/test/max.test.ts
index aeb0cae..abf8d59 100644
--- a/src/utils/test/max.test.ts
+++ b/src/utils/test/max.test.ts
@@ -2,13 +2,12 @@ import { describe, expect, it } from 'vitest'
 import max from '../max'
 
 describe('max', () => {
-    it('should return a function that returns a message if the value is greater than the max', () => {
-        const max10 = max(10, 'This field must be less than 10')
-        expect(max10(15)).toBe('This field must be less than 10')
-    })
-    it('should return a function that returns true if the value is less than the max', () => {
-        const max10 = max(10, 'This field must be less than 10')
-        expect(max10(5)).toBe(true)
-    })
-});
-
+  it('should return a function that returns a message if the value is greater than the max', () => {
+    const max10 = max(10, 'This field must be less than 10')
+    expect(max10(15)).toBe('This field must be less than 10')
+  })
+  it('should return a function that returns true if the value is less than the max', () => {
+    const max10 = max(10, 'This field must be less than 10')
+    expect(max10(5)).toBe(true)
+  })
+})
diff --git a/src/utils/test/maxLength.test.ts b/src/utils/test/maxLength.test.ts
index e5b80a5..493df68 100644
--- a/src/utils/test/maxLength.test.ts
+++ b/src/utils/test/maxLength.test.ts
@@ -2,12 +2,20 @@ import { describe, expect, it } from 'vitest'
 import maxLength from '../maxLength'
 
 describe('maxLength', () => {
-    it('should return a function that returns a message if the value is greater than the max length', () => {
-        const maxLength10 = maxLength(10, 'This field must be less than 10 characters')
-        expect(maxLength10('12345678901')).toBe('This field must be less than 10 characters')
-    })
-    it('should return a function that returns true if the value is less than or equal to the max length', () => {
-        const maxLength10 = maxLength(10, 'This field must be less than 10 characters')
-        expect(maxLength10('1234567890')).toBe(true)
-    })
-})
\ No newline at end of file
+  it('should return a function that returns a message if the value is greater than the max length', () => {
+    const maxLength10 = maxLength(
+      10,
+      'This field must be less than 10 characters'
+    )
+    expect(maxLength10('12345678901')).toBe(
+      'This field must be less than 10 characters'
+    )
+  })
+  it('should return a function that returns true if the value is less than or equal to the max length', () => {
+    const maxLength10 = maxLength(
+      10,
+      'This field must be less than 10 characters'
+    )
+    expect(maxLength10('1234567890')).toBe(true)
+  })
+})
diff --git a/src/utils/test/min.test.ts b/src/utils/test/min.test.ts
index 44a0306..d6beba5 100644
--- a/src/utils/test/min.test.ts
+++ b/src/utils/test/min.test.ts
@@ -2,12 +2,12 @@ import { describe, expect, it } from 'vitest'
 import min from '../min'
 
 describe('min', () => {
-    it('should return a function that returns a message if the value is less than the min', () => {
-        const min10 = min(10, 'This field must be greater than 10')
-        expect(min10(5)).toBe('This field must be greater than 10')
-    })
-    it('should return a function that returns true if the value is greater than the min', () => {
-        const min10 = min(10, 'This field must be greater than 10')
-        expect(min10(15)).toBe(true)
-    })
-})
\ No newline at end of file
+  it('should return a function that returns a message if the value is less than the min', () => {
+    const min10 = min(10, 'This field must be greater than 10')
+    expect(min10(5)).toBe('This field must be greater than 10')
+  })
+  it('should return a function that returns true if the value is greater than the min', () => {
+    const min10 = min(10, 'This field must be greater than 10')
+    expect(min10(15)).toBe(true)
+  })
+})
diff --git a/src/utils/test/minLength.test.ts b/src/utils/test/minLength.test.ts
index 1cdf0ac..6332466 100644
--- a/src/utils/test/minLength.test.ts
+++ b/src/utils/test/minLength.test.ts
@@ -2,12 +2,20 @@ import { describe, expect, it } from 'vitest'
 import minLength from '../minLength'
 
 describe('minLength', () => {
-    it('should return a function that returns a message if the value is less than the min length', () => {
-        const minLength10 = minLength(10, 'This field must be greater than 10 characters')
-        expect(minLength10('123456789')).toBe('This field must be greater than 10 characters')
-    })
-    it('should return a function that returns true if the value is greater than or equal to the min length', () => {
-        const minLength10 = minLength(10, 'This field must be greater than 10 characters')
-        expect(minLength10('1234567890')).toBe(true)
-    })
+  it('should return a function that returns a message if the value is less than the min length', () => {
+    const minLength10 = minLength(
+      10,
+      'This field must be greater than 10 characters'
+    )
+    expect(minLength10('123456789')).toBe(
+      'This field must be greater than 10 characters'
+    )
+  })
+  it('should return a function that returns true if the value is greater than or equal to the min length', () => {
+    const minLength10 = minLength(
+      10,
+      'This field must be greater than 10 characters'
+    )
+    expect(minLength10('1234567890')).toBe(true)
+  })
 })
diff --git a/src/utils/test/pattern.test.ts b/src/utils/test/pattern.test.ts
index e055fc1..6e24d63 100644
--- a/src/utils/test/pattern.test.ts
+++ b/src/utils/test/pattern.test.ts
@@ -2,12 +2,12 @@ import { describe, expect, it } from 'vitest'
 import pattern from '../pattern'
 
 describe('pattern', () => {
-    it('should return a function that returns a message if the value does not match the pattern', () => {
-        const patternABC = pattern(/abc/, 'This field must match the pattern abc')
-        expect(patternABC('123')).toBe('This field must match the pattern abc')
-    })
-    it('should return a function that returns true if the value matches the pattern', () => {
-        const patternABC = pattern(/abc/, 'This field must match the pattern abc')
-        expect(patternABC('abc')).toBe(true)
-    })
-})
\ No newline at end of file
+  it('should return a function that returns a message if the value does not match the pattern', () => {
+    const patternABC = pattern(/abc/, 'This field must match the pattern abc')
+    expect(patternABC('123')).toBe('This field must match the pattern abc')
+  })
+  it('should return a function that returns true if the value matches the pattern', () => {
+    const patternABC = pattern(/abc/, 'This field must match the pattern abc')
+    expect(patternABC('abc')).toBe(true)
+  })
+})
diff --git a/src/utils/test/required.test.ts b/src/utils/test/required.test.ts
index f7b0e52..77069d5 100644
--- a/src/utils/test/required.test.ts
+++ b/src/utils/test/required.test.ts
@@ -2,13 +2,13 @@ import { describe, expect, it } from 'vitest'
 import required from '../required'
 
 describe('required', () => {
-    it('should return a function that returns a message if the value is empty', () => {
-        const requiredMessage = required('This field is required')
-        expect(requiredMessage('')).toBe('This field is required')
-    })
+  it('should return a function that returns a message if the value is empty', () => {
+    const requiredMessage = required('This field is required')
+    expect(requiredMessage('')).toBe('This field is required')
+  })
 
-    it('should return a function that returns true if the value is not empty', () => {
-        const requiredMessage = required('This field is required')
-        expect(requiredMessage('test')).toBe(true)
-    })
-})
\ No newline at end of file
+  it('should return a function that returns true if the value is not empty', () => {
+    const requiredMessage = required('This field is required')
+    expect(requiredMessage('test')).toBe(true)
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
index 31b871c..0a05be0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,10 +11,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "noEmit": true,
@@ -23,17 +20,12 @@
     "noUnusedLocals": true,
     "sourceMap": true,
     "noImplicitAny": true,
-    "types": [
-      "vitest/importMeta"
-    ]
+    "types": ["vitest/importMeta"]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-  ],
+  "include": ["src/**/*.ts", "src/**/*.d.ts"],
   "references": [
     {
       "path": "./tsconfig.node.json"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 86350b4..32c5b6d 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -6,7 +6,5 @@
     "allowSyntheticDefaultImports": true,
     "declaration": true
   },
-  "include": [
-    "vite.config.ts",
-  ]
-}
\ No newline at end of file
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
index 4b369a9..7023347 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -28,16 +28,16 @@ export default defineConfig(({ mode }) => ({
       external: ['@vue/runtime-core'],
       output: {
         globals: {
-          '@vue/runtime-core': 'VueRuntimeCore'
+          '@vue/runtime-core': 'VueRuntimeCore',
         },
         sourcemapExcludeSources: true,
-      }
-    }
+      },
+    },
   },
   plugins: [
     vue(),
     dts({
       insertTypesEntry: true,
     }),
-  ]
+  ],
 }))