From f1bfd0db31192ba8eccfde807207b1ec90b42194 Mon Sep 17 00:00:00 2001
From: kevinkosterr <koster.k2001@gmail.com>
Date: Mon, 19 May 2025 21:32:07 +0200
Subject: [PATCH 1/7] feat(FormGenerator): emit field-validated when field is
 validated

---
 src/FormGenerator.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/FormGenerator.vue b/src/FormGenerator.vue
index 4b99637..333c5f3 100644
--- a/src/FormGenerator.vue
+++ b/src/FormGenerator.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 import { resetObjectProperties, toUniqueArray } from '@/helpers'
 import FormGroup from './FormGroup.vue'
 
-const emits = defineEmits([ 'submit' ])
+const emits = defineEmits([ 'submit', 'field-validated' ])
 
 const props = defineProps({
   id: {
@@ -55,6 +55,7 @@ const updateGeneratorModel = ({ model, value }) => {
  * @param field field schema object that has been validated.
  */
 const onFieldValidated = ({ fieldErrors, field }) => {
+  emits('field-validated', { fieldErrors, field })
   if (!fieldErrors.length) {
     if (!(field.model in formErrors.value)) return
     else {
@@ -82,7 +83,7 @@ const onReset = () => {
   props.model = resetObjectProperties(props.model)
 }
 
-defineExpose({ hasErrors })
+defineExpose({ hasErrors, formErrors })
 </script>
 
 <template>

From 47062d057047613e555b0a249463cc8e719ced54 Mon Sep 17 00:00:00 2001
From: kevinkosterr <koster.k2001@gmail.com>
Date: Mon, 19 May 2025 21:33:07 +0200
Subject: [PATCH 2/7] feat(FieldObject): add new field

---
 src/fields/core/FieldObject.vue             |  43 +++++++
 src/fields/index.ts                         |   3 +-
 tests/components/fields/FieldObject.spec.js | 119 ++++++++++++++++++++
 3 files changed, 164 insertions(+), 1 deletion(-)
 create mode 100644 src/fields/core/FieldObject.vue
 create mode 100644 tests/components/fields/FieldObject.spec.js

diff --git a/src/fields/core/FieldObject.vue b/src/fields/core/FieldObject.vue
new file mode 100644
index 0000000..473718b
--- /dev/null
+++ b/src/fields/core/FieldObject.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="field-object">
+    <FormGenerator
+      ref="formGenerator"
+      :schema="field.schema"
+      :model="currentModelValue"
+      :options="props.formOptions"
+      @field-validated="onFieldValidated"
+    />
+  </div>
+</template>
+
+<script setup>
+import FormGenerator from '@/FormGenerator.vue'
+import { useFieldProps, useFieldEmits, useFormModel } from '@/composables'
+import { toRefs, useTemplateRef, computed } from 'vue'
+
+const emits = defineEmits(useFieldEmits())
+const props = defineProps(useFieldProps())
+
+const formGenerator = useTemplateRef('formGenerator')
+const hasErrors = computed(() => formGenerator.value?.hasErrors ?? false)
+
+const { field, model } = toRefs(props)
+
+const { currentModelValue } = useFormModel(model.value, field.value)
+
+/**
+ * Emits the validated event
+ * @param validation
+ */
+const onFieldValidated = (validation) => {
+  const key = `${field.value.model}.${validation.field.model}`
+  emits(
+    'validated',
+    validation.fieldErrors.length === 0,
+    validation.fieldErrors,
+    { ...field.value, model: key }
+  )
+}
+
+defineExpose({ hasErrors })
+</script>
\ No newline at end of file
diff --git a/src/fields/index.ts b/src/fields/index.ts
index c6122dc..96f018a 100644
--- a/src/fields/index.ts
+++ b/src/fields/index.ts
@@ -13,6 +13,7 @@ import FieldTextarea from '@/fields/core/FieldTextarea.vue'
 import FieldMask from '@/fields/core/FieldMask.vue'
 import FieldChecklist from '@/fields/core/FieldChecklist.vue'
 import FieldCheckbox from '@/fields/core/FieldCheckbox.vue'
+import FieldObject from '@/fields/core/FieldObject.vue'
 
 import FieldSubmit from '@/fields/core/FieldSubmit.vue'
 import FieldReset from '@/fields/core/FieldReset.vue'
@@ -22,7 +23,7 @@ import FieldButton from '@/fields/core/FieldButton.vue'
 const fieldComponents = {
   FieldColor, FieldText, FieldCheckBox, FieldPassword, FieldSelect, FieldSelectNative, FieldRadio,
   FieldNumber, FieldSubmit, FieldReset, FieldButton, FieldSwitch, FieldTextarea, FieldMask, FieldChecklist,
-  FieldCheckbox
+  FieldCheckbox, FieldObject
 } as const
 
 type FieldComponentNames = keyof typeof fieldComponents
diff --git a/tests/components/fields/FieldObject.spec.js b/tests/components/fields/FieldObject.spec.js
new file mode 100644
index 0000000..a28e0c2
--- /dev/null
+++ b/tests/components/fields/FieldObject.spec.js
@@ -0,0 +1,119 @@
+import { generatePropsSingleField, mountFormGenerator } from '@test/_resources/utils.js'
+import { expect, it, describe, beforeAll } from 'vitest'
+import { config, mount } from '@vue/test-utils'
+
+import FieldObject from '@/fields/core/FieldObject.vue'
+import FieldNumber from '@/fields/core/FieldNumber.vue'
+import FieldText from '@/fields/core/FieldText.vue'
+import FormGenerator from '@/FormGenerator.vue'
+
+beforeAll(() => {
+  config.global.components = { FieldObject, FieldNumber, FieldText }
+})
+
+const shouldBeOverEighteen = (value) => value && value >= 18
+
+const form = {
+  model: {
+    person: {
+      name: '',
+      age: null
+    }
+  },
+  schema: {
+    fields: [
+      {
+        type: 'object',
+        model: 'person',
+        schema: {
+          fields: [
+            {
+              type: 'text',
+              name: 'name',
+              model: 'name',
+              label: 'Full name'
+            },
+            {
+              type: 'number',
+              name: 'age',
+              model: 'age',
+              label: 'Age',
+              validator: [ shouldBeOverEighteen ]
+            }
+          ]
+        }
+      }
+    ]
+  }
+}
+
+const props = generatePropsSingleField(form)
+
+describe('FieldObject', () => {
+
+  // For rendering, we'll only need to test if the components are actually present within the Field or FormGenerator.
+  // This is because each Field will have their own individual tests for checking if it renders correctly.
+  it('Should render properly', async () => {
+    const wrapper = mount(FieldObject, { props })
+    // Since the FieldObject basically renders a form inside the form, this component should be there
+    expect(wrapper.findComponent(FormGenerator)).toBeTruthy()
+    expect(wrapper.findComponent(FieldNumber)).toBeTruthy()
+    expect(wrapper.findComponent(FieldText)).toBeTruthy()
+  })
+
+  it('Should render properly inside form generator', async () => {
+    const wrapper = mountFormGenerator(form.schema, form.model)
+    // Since the FieldObject basically renders a form inside the form, this component should be there
+    expect(wrapper.findComponent(FormGenerator)).toBeTruthy()
+    expect(wrapper.findComponent(FieldNumber)).toBeTruthy()
+    expect(wrapper.findComponent(FieldText)).toBeTruthy()
+  })
+
+  it('Should properly update model value', async () => {
+    const wrapper = mountFormGenerator(form.schema, form.model)
+    expect(typeof wrapper.vm.model.person).toBe('object')
+
+    const fieldWrapper = wrapper.findComponent(FieldObject)
+    fieldWrapper.find('input[type=number]').setValue(21)
+    // Both values should match.
+    expect(fieldWrapper.vm.model.person.age).toBe(21)
+    expect(wrapper.vm.model.person.age).toBe(21)
+
+    fieldWrapper.find('input[type=text]').setValue('Test subject')
+    // Both values should match.
+    expect(fieldWrapper.vm.model.person.name).toBe('Test subject')
+    expect(wrapper.vm.model.person.name).toBe('Test subject')
+  })
+
+  it('Should properly pass errors to parent form', async () => {
+    const wrapper = mountFormGenerator(form.schema, form.model)
+    const fieldWrapper = wrapper.findComponent(FieldObject)
+
+    const ageInput = fieldWrapper.find('input[type=number]')
+    ageInput.setValue(15)
+    await ageInput.trigger('blur')
+    expect(fieldWrapper.emitted()).toHaveProperty('validated')
+    // Default models shouldn't show up in the main form, as the model is an object.
+    expect(wrapper.vm.formErrors).not.toHaveProperty('age')
+    expect(wrapper.vm.formErrors).not.toHaveProperty('person')
+    // The only correct way
+    expect(wrapper.vm.formErrors).toHaveProperty('person.age')
+    expect(wrapper.vm.formErrors['person.age']).toHaveLength(1)
+    expect(wrapper.vm.formErrors['person.age'][0]).toBe('Field is invalid')
+  })
+
+  it('Should remove old errors', async () => {
+    const wrapper = mountFormGenerator(form.schema, form.model)
+    const fieldWrapper = wrapper.findComponent(FieldObject)
+
+    const ageInput = fieldWrapper.find('input[type=number]')
+    await ageInput.setValue(15)
+    await ageInput.trigger('blur')
+    expect(wrapper.vm.formErrors).toHaveProperty('person.age')
+
+    await ageInput.setValue(18)
+    await ageInput.trigger('blur')
+    expect(wrapper.vm.formErrors).not.toHaveProperty('person.age')
+  })
+
+})

From 30e4f710bbd612eb80aa4e6e7ba5d94f5eba69cd Mon Sep 17 00:00:00 2001
From: kevinkosterr <koster.k2001@gmail.com>
Date: Mon, 19 May 2025 21:33:51 +0200
Subject: [PATCH 3/7] test: fix props util & sass:dev

---
 package.json              | 2 +-
 tests/_resources/utils.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index de122c7..718c3eb 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "main": "./dist/vue3-form-generator.js",
   "scripts": {
     "dev": "vite",
-    "dev:sass": "sass --watch src/scss/themes:playground/css/",
+    "dev:sass": "sass --watch src/scss/themes:apps/playground/css/",
     "test": "vitest",
     "build": "vite build && sass src/scss/themes/:dist/themes/",
     "preview": "vite preview",
diff --git a/tests/_resources/utils.js b/tests/_resources/utils.js
index 2eafe42..d20fdcc 100644
--- a/tests/_resources/utils.js
+++ b/tests/_resources/utils.js
@@ -49,12 +49,12 @@ export function generateSchemaSingleField (
 /**
  * Generate props for a single field component
  * @param {Object} formSchema - entire form schema object
- * @returns {{field: *, model, id: string, formGenerator: {}}}
+ * @returns {{field: *, model, id: string, formOptions: {}}}
  */
 export function generatePropsSingleField (formSchema) {
   return {
     id: formSchema.name + '_test_id',
-    formGenerator: {},
+    formOptions: {},
     field: { ...formSchema.schema.fields[0] },
     model: { ...formSchema.model }
   }

From df036f81ff0fb5570056c9bda86ee16f73ef79f0 Mon Sep 17 00:00:00 2001
From: kevinkosterr <koster.k2001@gmail.com>
Date: Mon, 19 May 2025 22:07:41 +0200
Subject: [PATCH 4/7] docs(FormGenerator): update events.md

---
 apps/docs/guide/form-generator/events.md | 25 +++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/apps/docs/guide/form-generator/events.md b/apps/docs/guide/form-generator/events.md
index 7971642..239031d 100644
--- a/apps/docs/guide/form-generator/events.md
+++ b/apps/docs/guide/form-generator/events.md
@@ -1,4 +1,27 @@
 These are events emitted by the `vue-form-generator` component.
 
+## `field-validated`
+Emitted when a field inside the form has been validated.
+
+### Event arguments
+- `validations` - an object with the field's errors and the field schema
+  - `fieldErrors` - an array of error messages that have been thrown during validations;
+  - `field` - the field as defined in the schema
+
+An example from the [`FieldObject`](/guide/fields/FieldObject) component:
+```vue [FieldObject.vue]
+<script setup>
+  const onFieldValidated = (validation) => {
+    const key = `${field.value.model}.${validation.field.model}`
+    emits(
+        'validated',
+        validation.fieldErrors.length === 0,
+        validation.fieldErrors,
+        { ...field.value, model: key }
+    )
+  }
+</script>
+```
+
 ## `submit`
-Emitted when all fields have been validated and no errors occurred during said validations.
\ No newline at end of file
+Emitted when all fields have been validated and no errors occurred during said validations.

From a9bba2266c8bf972caad3096b8f25871cf7d12e1 Mon Sep 17 00:00:00 2001
From: kevinkosterr <koster.k2001@gmail.com>
Date: Mon, 19 May 2025 22:08:13 +0200
Subject: [PATCH 5/7] docs(FieldObject): docs for new field

---
 apps/docs/.vitepress/config.js                |   1 +
 .../examples/fields/FieldObjectExample.vue    |  63 ++++++++++
 apps/docs/guide/fields/FieldObject.md         | 112 ++++++++++++++++++
 3 files changed, 176 insertions(+)
 create mode 100644 apps/docs/components/examples/fields/FieldObjectExample.vue
 create mode 100644 apps/docs/guide/fields/FieldObject.md

diff --git a/apps/docs/.vitepress/config.js b/apps/docs/.vitepress/config.js
index e7152b2..3ce522b 100644
--- a/apps/docs/.vitepress/config.js
+++ b/apps/docs/.vitepress/config.js
@@ -58,6 +58,7 @@ export default defineConfig({
           { text: 'FieldColor', link: '/guide/fields/FieldColor' },
           { text: 'FieldMask', link: '/guide/fields/FieldMask' },
           { text: 'FieldNumber', link: '/guide/fields/FieldNumber' },
+          { text: 'FieldObject', link: '/guide/fields/FieldObject' },
           { text: 'FieldPassword', link: '/guide/fields/FieldPassword' },
           { text: 'FieldRadio', link: '/guide/fields/FieldRadio' },
           { text: 'FieldReset', link: '/guide/fields/FieldReset' },
diff --git a/apps/docs/components/examples/fields/FieldObjectExample.vue b/apps/docs/components/examples/fields/FieldObjectExample.vue
new file mode 100644
index 0000000..d59116e
--- /dev/null
+++ b/apps/docs/components/examples/fields/FieldObjectExample.vue
@@ -0,0 +1,63 @@
+<template>
+  Person: <code>{{ form.model.person }}</code>
+  <vue-form-generator :schema="form.schema" :model="form.model" />
+</template>
+
+<script setup>
+import { onBeforeMount, ref } from 'vue'
+
+const props = defineProps({
+  addValidators: Boolean
+})
+
+const form = ref({
+  model: {
+    person: {
+      name: '',
+      surname: '',
+      age: null
+    }
+  },
+  schema: {
+    fields: [
+      {
+        type: 'object',
+        model: 'person',
+        schema: {
+          fields: [
+            {
+              type: 'input',
+              inputType: 'text',
+              model: 'name',
+              label: 'Name'
+            },
+            {
+              type: 'input',
+              inputType: 'text',
+              model: 'surname',
+              label: 'Surname'
+            },
+            {
+              type: 'input',
+              inputType: 'number',
+              model: 'age',
+              label: 'Age'
+            }
+          ]
+        }
+      }
+    ]
+  }
+})
+
+onBeforeMount(() => {
+  if (props.addValidators) {
+    const fields = form.value.schema.fields[0].schema.fields
+
+    const minLengthThree = (value) => value && value.length >= 3
+    fields[0].validator = minLengthThree
+    fields[1].validator = minLengthThree
+    fields[2].validator = (value) => value && value >= 18
+  }
+})
+</script>
\ No newline at end of file
diff --git a/apps/docs/guide/fields/FieldObject.md b/apps/docs/guide/fields/FieldObject.md
new file mode 100644
index 0000000..d3c1c24
--- /dev/null
+++ b/apps/docs/guide/fields/FieldObject.md
@@ -0,0 +1,112 @@
+# FieldObject
+`FieldObject` is a field that has its own `schema`, meaning the field itself
+renders other fields. These fields will return their values to the object inside
+the model that is assigned to the `FieldObject` component.
+
+### type `object`
+
+<script setup>
+import FieldObjectExample from '/components/examples/fields/FieldObjectExample.vue'
+</script>
+
+## Basic example
+::: details Code 
+```js
+const form = ref({
+  model: {
+    person: {
+      name: '',
+      surname: '',
+      age: null
+    }
+  },
+  schema: {
+    fields: [
+      {
+        type: 'object',
+        model: 'person',
+        schema: {
+          fields: [
+            {
+              type: 'input',
+              inputType: 'text',
+              model: 'name',
+              label: 'Name'
+            },
+            {
+              type: 'input',
+              inputType: 'text',
+              model: 'surname',
+              label: 'Surname'
+            },
+            {
+              type: 'input',
+              inputType: 'number',
+              model: 'age',
+              label: 'Age'
+            }
+          ]
+        }
+      }
+    ]
+  }
+})
+```
+:::
+<FieldObjectExample/>
+
+## With validators
+::: details Code
+```js
+function minLengthThree (value) {
+  return value && value.length >= 3
+}
+
+function overEighteen (value) {
+  return value && value >= 18
+}
+
+// ......
+fields: [
+      {
+        type: 'object',
+        model: 'person',
+        schema: {
+          fields: [
+            {
+              type: 'input',
+              inputType: 'text',
+              model: 'name',
+              label: 'Name',
+              validator: minLengthThree
+            },
+            {
+              type: 'input',
+              inputType: 'text',
+              model: 'surname',
+              label: 'Surname',
+              validator: minLengthThree
+            },
+            {
+              type: 'input',
+              inputType: 'number',
+              model: 'age',
+              label: 'Age',
+              validator: overEighteen
+            }
+          ]
+        }
+      }
+  ]
+```
+:::
+::: info
+In this example, `name` and `surname` must have a length of three letters or more, `age` must be at least 18.
+:::
+<FieldObjectExample add-validators/>
+
+
+## Properties
+| Property | Default | Type     | Description                                 |
+|----------|---------|----------|---------------------------------------------|
+| schema   | `{}`    | `Object` | A form schema, as seen in `FormGenerator.vue` |
\ No newline at end of file

From 2a4c5d761f21bcf1d6a5f217da963a622ec25eda Mon Sep 17 00:00:00 2001
From: kevinkosterr <koster.k2001@gmail.com>
Date: Mon, 19 May 2025 22:08:37 +0200
Subject: [PATCH 6/7] test(FormGenerator): add basic tests

---
 tests/components/FormGenerator.spec.js | 55 ++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 tests/components/FormGenerator.spec.js

diff --git a/tests/components/FormGenerator.spec.js b/tests/components/FormGenerator.spec.js
new file mode 100644
index 0000000..ff378d2
--- /dev/null
+++ b/tests/components/FormGenerator.spec.js
@@ -0,0 +1,55 @@
+import { expect, it, describe, beforeAll } from 'vitest'
+import { config, mount } from '@vue/test-utils'
+
+import FormGenerator from '@/FormGenerator.vue'
+import FieldText from '@/fields/core/FieldText.vue'
+import FieldTextarea from '@/fields/core/FieldTextarea.vue'
+import FieldSubmit from '@/fields/core/FieldSubmit.vue'
+import { generateSchemaSingleField } from '@test/_resources/utils.js'
+
+beforeAll(() => {
+  config.global.components = { FieldText, FieldTextarea, FieldSubmit }
+})
+
+const textSchema = generateSchemaSingleField(
+  'text',
+  'textModel',
+  'input',
+  'text',
+  'Text input label',
+  '',
+  {
+    required: true
+  }
+)
+
+const textAreaSchema = generateSchemaSingleField(
+  'textArea',
+  'textAreaModel',
+  'textarea',
+  null,
+  'Text area label',
+  '',
+  {}
+)
+
+const schema = {
+  schema: { fields: [ ...textSchema.schema.fields, ...textAreaSchema.schema.fields ] },
+  model: { ...textSchema.model, ...textAreaSchema.model }
+}
+
+describe('FormGenerator', () => {
+
+  it('Shouldn\'t render without a schema', async () => {
+    const wrapper = mount(FormGenerator)
+    expect(wrapper.find('form').exists()).toBeFalsy()
+  })
+
+  it('Should render with a schema', async () => {
+    const wrapper = mount(FormGenerator, { props: { model: schema.model, schema: schema.schema } })
+    expect(wrapper.find('form').exists()).toBeTruthy()
+    expect(wrapper.findComponent(FieldText).exists()).toBeTruthy()
+    expect(wrapper.findComponent(FieldTextarea).exists()).toBeTruthy()
+  })
+
+})
\ No newline at end of file

From ec8bb81e84128ac4c167e79eb19704b2a4a0c8df Mon Sep 17 00:00:00 2001
From: kevinkosterr <koster.k2001@gmail.com>
Date: Tue, 3 Jun 2025 22:50:38 +0200
Subject: [PATCH 7/7] refactor: all fields to TypeScript

---
 package.json                           |   2 +-
 src/FormGenerator.vue                  |  64 +++++---------
 src/composables/useFieldAttributes.ts  |   5 +-
 src/composables/useFieldValidate.ts    |   5 +-
 src/composables/useFormModel.ts        |   5 +-
 src/directives/onClickOutside.ts       |   2 +-
 src/fields/core/FieldButton.vue        |  14 +--
 src/fields/core/FieldCheckbox.vue      |  13 +--
 src/fields/core/FieldChecklist.vue     |  18 ++--
 src/fields/core/FieldColor.vue         |  22 ++---
 src/fields/core/FieldMask.vue          |   6 +-
 src/fields/core/FieldNumber.vue        |  15 ++--
 src/fields/core/FieldObject.vue        |  16 ++--
 src/fields/core/FieldPassword.vue      |  22 ++---
 src/fields/core/FieldRadio.vue         |  16 ++--
 src/fields/core/FieldReset.vue         |  10 +--
 src/fields/core/FieldSelect.vue        |  40 +++++----
 src/fields/core/FieldSelectNative.vue  |  17 ++--
 src/fields/core/FieldSubmit.vue        |   9 +-
 src/fields/core/FieldSwitch.vue        |  15 ++--
 src/fields/core/FieldText.vue          |  21 +++--
 src/fields/core/FieldTextarea.vue      |  17 ++--
 src/helpers/index.ts                   |   2 +-
 src/resources/types/field/base.ts      |  55 ++++++++++++
 src/resources/types/field/fields.ts    | 116 +++++++++++++++++++++++++
 src/resources/types/fieldAttributes.ts |   4 +-
 src/resources/types/fields.ts          |  71 ---------------
 src/resources/types/functions.ts       |  11 +--
 src/resources/types/generic.ts         |  41 +++++++--
 src/validators/index.ts                |  21 ++---
 30 files changed, 406 insertions(+), 269 deletions(-)
 create mode 100644 src/resources/types/field/base.ts
 create mode 100644 src/resources/types/field/fields.ts
 delete mode 100644 src/resources/types/fields.ts

diff --git a/package.json b/package.json
index 718c3eb..dbc5e92 100644
--- a/package.json
+++ b/package.json
@@ -79,4 +79,4 @@
     "@vueuse/core": "^13.1.0",
     "maska": "^3.1.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/FormGenerator.vue b/src/FormGenerator.vue
index 333c5f3..0bab1af 100644
--- a/src/FormGenerator.vue
+++ b/src/FormGenerator.vue
@@ -1,50 +1,31 @@
-<script setup>
+<script setup lang="ts">
+import type { FieldValidation, FormGeneratorProps, FormOptions } from '@/resources/types/generic'
+import type { Field } from '@/resources/types/field/fields'
+import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue'
 import { computed, ref } from 'vue'
 import { resetObjectProperties, toUniqueArray } from '@/helpers'
 import FormGroup from './FormGroup.vue'
 
 const emits = defineEmits([ 'submit', 'field-validated' ])
 
-const props = defineProps({
-  id: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  idPrefix: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  options: {
-    type: Object,
-    default: () => ({})
-  },
-  schema: {
-    type: Object,
-    required: true
-  },
-  model: {
-    type: Object,
-    required: true
-  },
-  enctype: {
-    type: String,
-    default: 'application/x-www-form-urlencoded'
-  }
+const props = withDefaults(defineProps<FormGeneratorProps>(), {
+  enctype: 'application/x-www-form-urlencoded',
+  id: '',
+  idPrefix: ''
 })
 
+type FormGroupInstance = ComponentPublicInstance<InstanceType<typeof FormGroup>>
 /** Data / Refs */
-const fieldElements = ref([])
-const formErrors = ref({})
-const formOptions = computed(() => ({ ...props.options, idPrefix: props.idPrefix }))
+const fieldElements: Ref<FormGroupInstance[]> = ref([])
+const formErrors: Ref<Record<string, any>> = ref({})
+const formOptions: ComputedRef<FormOptions> = computed(() => ({ ...props.options, idPrefix: props.idPrefix }))
 
 /**
  * Update form model key with its new value.
  * @param {String} model model key to update.
  * @param {any} value value to set.
  */
-const updateGeneratorModel = ({ model, value }) => {
+const updateGeneratorModel = ({ model, value }: { model: string, value: any }) => {
   // eslint-disable-next-line vue/no-mutating-props
   props.model[model] = value
 }
@@ -54,7 +35,7 @@ const updateGeneratorModel = ({ model, value }) => {
  * @param fieldErrors errors discovered during validation of the field.
  * @param field field schema object that has been validated.
  */
-const onFieldValidated = ({ fieldErrors, field }) => {
+const onFieldValidated = ({ fieldErrors, field }: FieldValidation) => {
   emits('field-validated', { fieldErrors, field })
   if (!fieldErrors.length) {
     if (!(field.model in formErrors.value)) return
@@ -68,19 +49,20 @@ const onFieldValidated = ({ fieldErrors, field }) => {
 
 /** Compute if the form has errors */
 const hasErrors = computed(() => {
-  return Boolean(Object.values(formErrors.value).map(e => Boolean(e.length)).filter(e => e === true).length)
+  return Boolean(Object.values(formErrors.value).map(e => Boolean(e.length)).filter(e => e).length)
 })
 
 /**
  * Handle the submit event from the form element.
  */
 const onSubmit = () => {
-  if (hasErrors.value === false) emits('submit')
+  if (!hasErrors.value) emits('submit')
 }
 
 const onReset = () => {
-  // eslint-disable-next-line vue/no-mutating-props
-  props.model = resetObjectProperties(props.model)
+  // Hideous hack to update the model, without TypeScript crying about mutation of props. And yes, I know it isn't
+  // recommended to update the props.
+  (props as any).model = resetObjectProperties(props.model)
 }
 
 defineExpose({ hasErrors, formErrors })
@@ -96,8 +78,8 @@ defineExpose({ hasErrors, formErrors })
   >
     <fieldset v-if="props.schema.fields">
       <template v-for="field in props.schema.fields" :key="field">
-        <form-group
-          :ref="el => fieldElements.push(el)"
+        <FormGroup
+          :ref="el => (el && '$el' in el) ? fieldElements.push((el as FormGroupInstance)) : null"
           :form-options="formOptions"
           :field="field"
           :model="props.model"
@@ -111,8 +93,8 @@ defineExpose({ hasErrors, formErrors })
             {{ group.legend }}
           </legend>
           <template v-for="field in group.fields" :key="field">
-            <form-group
-              :ref="el => fieldElements.push(el)"
+            <FormGroup
+              :ref="el => (el && '$el' in el) ? fieldElements.push((el as FormGroupInstance)) : null"
               :form-options="formOptions"
               :field="field"
               :model="props.model"
diff --git a/src/composables/useFieldAttributes.ts b/src/composables/useFieldAttributes.ts
index b811442..4c17be6 100644
--- a/src/composables/useFieldAttributes.ts
+++ b/src/composables/useFieldAttributes.ts
@@ -1,9 +1,10 @@
 import { computed, ComputedRef } from 'vue'
-import { type Field } from '@/resources/types/fields'
+import type { Field } from '@/resources/types/field/fields'
 import { TDynamicAttributeBooleanFunction, TDynamicAttributeStringFunction } from '@/resources/types/functions'
+import type { FormModel } from '@/resources/types/fieldAttributes'
 
 export function useFieldAttributes (
-  model: Record<string, any>,
+  model: FormModel,
   field: Field
 ) {
 
diff --git a/src/composables/useFieldValidate.ts b/src/composables/useFieldValidate.ts
index d512bc0..a169fc8 100644
--- a/src/composables/useFieldValidate.ts
+++ b/src/composables/useFieldValidate.ts
@@ -3,7 +3,8 @@ import { getMessage } from '@/validators/messages'
 import { isFunction, isString, toUniqueArray } from '@/helpers'
 import { TValidatorFunction } from '@/resources/types/functions'
 import { ValidatorMap } from '@/resources/types/generic'
-import { Field } from '@/resources/types/fields'
+import type { FormModel } from '@/resources/types/fieldAttributes'
+import type { Field } from '@/resources/types/field/fields'
 import validators from '@/validators'
 
 /**
@@ -27,7 +28,7 @@ function getValidator (validator: string | TValidatorFunction | undefined): TVal
 }
 
 export function useFieldValidate (
-  model: Record<string, any>,
+  model: FormModel,
   field: Field,
   isDisabled: boolean = false,
   isRequired: boolean = false,
diff --git a/src/composables/useFormModel.ts b/src/composables/useFormModel.ts
index fbe5a80..39f6ccf 100644
--- a/src/composables/useFormModel.ts
+++ b/src/composables/useFormModel.ts
@@ -1,5 +1,6 @@
 import { computed, ComputedRef } from 'vue'
-import { Field } from '@/resources/types/fields'
+import type { Field } from '@/resources/types/field/fields'
+import type { FormModel } from '@/resources/types/fieldAttributes'
 
 /**
  * Composable for current model state of current field
@@ -7,7 +8,7 @@ import { Field } from '@/resources/types/fields'
  * @param field - form field
  */
 export function useFormModel(
-  model: Record<string, any>,
+  model: FormModel,
   field: Field
 ) {
 
diff --git a/src/directives/onClickOutside.ts b/src/directives/onClickOutside.ts
index 155813d..eb4f072 100644
--- a/src/directives/onClickOutside.ts
+++ b/src/directives/onClickOutside.ts
@@ -1,6 +1,6 @@
 import { Directive, DirectiveBinding } from 'vue'
 
-const onClickOutside: Directive<HTMLElement, string> = {
+const onClickOutside: Directive<HTMLElement, never> = {
   beforeMount(el: HTMLElement, binding: DirectiveBinding): void {
     el.clickOutsideEvent = (event: Event) => {
       if (!(el === event.target || el.contains(<Node>event.target))) {
diff --git a/src/fields/core/FieldButton.vue b/src/fields/core/FieldButton.vue
index 3f5068b..c181003 100644
--- a/src/fields/core/FieldButton.vue
+++ b/src/fields/core/FieldButton.vue
@@ -1,16 +1,20 @@
 <template>
-  <button type="button" :class="field.buttonClasses" @click.prevent="field.onClick(model, field)">
+  <button type="button" :class="field.buttonClasses" @click.prevent="onClick">
     {{ field.buttonText }}
   </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from 'vue'
-import { useFieldProps } from '@/composables/index.ts'
+import type { ButtonField, FieldPropRefs, FieldProps } from '@/resources/types/field/fields'
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<ButtonField>>()
 
-const { model, field } = toRefs(props)
+const { model, field }: FieldPropRefs<ButtonField> = toRefs(props)
+
+const onClick = () => {
+  return field.value.onClick !== undefined ? field.value.onClick(model.value, field.value) : undefined
+}
 
 defineExpose({ noLabel: true })
 </script>
\ No newline at end of file
diff --git a/src/fields/core/FieldCheckbox.vue b/src/fields/core/FieldCheckbox.vue
index ea87f66..e603ea7 100644
--- a/src/fields/core/FieldCheckbox.vue
+++ b/src/fields/core/FieldCheckbox.vue
@@ -12,20 +12,20 @@
   <label v-if="field.label" style="margin-left: .4em" :for="props.id"> {{ field.label }}</label>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from 'vue'
+import type { CheckboxField, FieldPropRefs, FieldProps } from '@/resources/types/field/fields'
 import {
   useFormModel,
   useFieldAttributes,
   useFieldValidate,
-  useFieldProps,
   useFieldEmits
-} from '@/composables/index.ts'
+} from '@/composables'
 
 const emits = defineEmits(useFieldEmits())
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<CheckboxField>>()
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<CheckboxField> = toRefs(props)
 
 const { currentModelValue } = useFormModel(model.value, field.value)
 const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
@@ -37,7 +37,8 @@ const { errors, validate } = useFieldValidate(
   false
 )
 
-const onFieldValueChanged = ({ target }) => {
+const onFieldValueChanged = (event: Event) => {
+  const target = event.target as HTMLInputElement
   errors.value = []
   validate(currentModelValue.value).then((validationErrors) => {
     emits('validated',
diff --git a/src/fields/core/FieldChecklist.vue b/src/fields/core/FieldChecklist.vue
index 527f010..03377f7 100644
--- a/src/fields/core/FieldChecklist.vue
+++ b/src/fields/core/FieldChecklist.vue
@@ -19,25 +19,27 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 // This component is heavily inspired by https://github.com/shwld/vfg-field-checkboxlist/
 import {
-  useFieldProps,
   useFieldEmits,
   useFieldValidate,
-  useFormModel, useFieldAttributes
+  useFormModel,
+  useFieldAttributes
 } from '@/composables'
-import { toRefs } from 'vue'
+import type { FieldProps, FieldPropRefs, ChecklistField } from '@/resources/types/field/fields'
+import { type Ref, toRefs } from 'vue'
 
 const emits = defineEmits(useFieldEmits())
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<ChecklistField>>()
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<ChecklistField> = toRefs(props)
 const { hint } = useFieldAttributes(model.value, field.value)
-const { currentModelValue } = useFormModel(model.value, field.value)
+const { currentModelValue }: { currentModelValue: Ref<any[]> } = useFormModel(model.value, field.value)
 const { validate, errors } = useFieldValidate(model.value, field.value)
 
-const onFieldValueChanged = ({ target }) => {
+const onFieldValueChanged = (event: Event) => {
+  const target = event.target as HTMLInputElement
   errors.value = []
   let newValue
   const valueAlreadyChecked = currentModelValue.value.includes(target.value)
diff --git a/src/fields/core/FieldColor.vue b/src/fields/core/FieldColor.vue
index 4074f6c..8a7570a 100644
--- a/src/fields/core/FieldColor.vue
+++ b/src/fields/core/FieldColor.vue
@@ -23,22 +23,23 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import validators from '@/validators'
 import { toRefs, onBeforeMount } from 'vue'
 import {
   useFormModel,
   useFieldAttributes,
   useFieldValidate,
-  useFieldProps,
   useFieldEmits
-} from '@/composables/index.ts'
+} from '@/composables'
 import { vMaska } from 'maska/vue'
+import type { ColorField, FieldPropRefs, FieldProps } from '@/resources/types/field/fields'
+import type { MaskOptions } from 'maska'
 
 const emits = defineEmits(useFieldEmits())
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<ColorField>>()
 
-const maskOptions = {
+const maskOptions: Readonly<MaskOptions> = {
   mask: '!#HHHHHH',
   tokens: {
     H: {
@@ -47,7 +48,7 @@ const maskOptions = {
   }
 }
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<ColorField> = toRefs(props)
 
 const { currentModelValue } = useFormModel(model.value, field.value)
 const { isRequired, isVisible, hint } = useFieldAttributes(model.value, field.value)
@@ -56,8 +57,7 @@ const { errors, validate } = useFieldValidate(
   field.value,
   false,
   isRequired.value,
-  false,
-  currentModelValue.value
+  false
 )
 
 const onBlur = () => {
@@ -70,15 +70,17 @@ const onBlur = () => {
   })
 }
 
-const onFieldValueChanged = ({ target }) => {
+const onFieldValueChanged = (event: Event) => {
+  const target = event.target as HTMLInputElement
   errors.value = []
-  // Ensure a change doesn't emit twice, we need this because both inputs might trigger this function at once.
+  // Ensure a change doesn't emit twice; we need this because both inputs might trigger this function at once.
   if (target.value !== currentModelValue.value) {
     emits('onInput', target.value)
   }
 }
 
 onBeforeMount(() => {
+  // Only add validators when the extra text input is enabled.
   if (field.value.withInput) {
     const fieldValidators = []
     if (Array.isArray(field.value.validator)) {
diff --git a/src/fields/core/FieldMask.vue b/src/fields/core/FieldMask.vue
index a99b997..b1861a1 100644
--- a/src/fields/core/FieldMask.vue
+++ b/src/fields/core/FieldMask.vue
@@ -13,15 +13,15 @@
 
 <script setup lang="ts">
 import { toRefs, computed, ComputedRef, ref, onBeforeMount } from 'vue'
-import { FieldProps, IMaskField } from '@/resources/types/fields'
+import type { FieldPropRefs, FieldProps, MaskField } from '@/resources/types/field/fields'
 import type { MaskInputOptions } from 'maska'
 import { Mask } from 'maska'
 import { vMaska } from 'maska/vue'
 import { useFormModel, useFieldAttributes, useFieldEmits, useFieldValidate } from '@/composables'
 
 const emits = defineEmits(useFieldEmits())
-const props = defineProps<FieldProps<IMaskField>>()
-const { field, model } = toRefs(props)
+const props = defineProps<FieldProps<MaskField>>()
+const { field, model }: FieldPropRefs<MaskField> = toRefs(props)
 
 const unmaskedValue = ref('')
 const inputDefaultValue = ref('')
diff --git a/src/fields/core/FieldNumber.vue b/src/fields/core/FieldNumber.vue
index b94d46f..2ae7a3b 100644
--- a/src/fields/core/FieldNumber.vue
+++ b/src/fields/core/FieldNumber.vue
@@ -16,20 +16,20 @@
   >
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from 'vue'
+import type { NumberField, FieldProps, FieldPropRefs } from '@/resources/types/field/fields'
 import {
   useFormModel,
   useFieldAttributes,
   useFieldValidate,
-  useFieldEmits,
-  useFieldProps
-} from '@/composables/index.ts'
+  useFieldEmits
+} from '@/composables'
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<NumberField>>()
 const emits = defineEmits(useFieldEmits())
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<NumberField> = toRefs(props)
 
 const { isDisabled, isRequired, hint } = useFieldAttributes(model.value, field.value)
 const { currentModelValue } = useFormModel(model.value, field.value)
@@ -51,7 +51,8 @@ const onBlur = () => {
   })
 }
 
-const onFieldValueChanged = ({ target }) => {
+const onFieldValueChanged = (event: Event) => {
+  const target = event.target as HTMLInputElement
   errors.value = []
   const step = field.value.step ?? 1
   const isDecimalStep = step.toString().split('.')[1]
diff --git a/src/fields/core/FieldObject.vue b/src/fields/core/FieldObject.vue
index 473718b..d69e773 100644
--- a/src/fields/core/FieldObject.vue
+++ b/src/fields/core/FieldObject.vue
@@ -10,18 +10,20 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import FormGenerator from '@/FormGenerator.vue'
-import { useFieldProps, useFieldEmits, useFormModel } from '@/composables'
-import { toRefs, useTemplateRef, computed } from 'vue'
+import type { FieldProps, FieldPropRefs, ObjectField } from '@/resources/types/field/fields'
+import { useFieldEmits, useFormModel } from '@/composables'
+import { toRefs, useTemplateRef, computed, type ComputedRef } from 'vue'
+import { FieldValidation } from '@/resources/types/generic'
 
 const emits = defineEmits(useFieldEmits())
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<ObjectField>>()
 
 const formGenerator = useTemplateRef('formGenerator')
-const hasErrors = computed(() => formGenerator.value?.hasErrors ?? false)
+const hasErrors: ComputedRef<boolean> = computed(() => formGenerator.value?.hasErrors ?? false)
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<ObjectField> = toRefs(props)
 
 const { currentModelValue } = useFormModel(model.value, field.value)
 
@@ -29,7 +31,7 @@ const { currentModelValue } = useFormModel(model.value, field.value)
  * Emits the validated event
  * @param validation
  */
-const onFieldValidated = (validation) => {
+const onFieldValidated = (validation: FieldValidation) => {
   const key = `${field.value.model}.${validation.field.model}`
   emits(
     'validated',
diff --git a/src/fields/core/FieldPassword.vue b/src/fields/core/FieldPassword.vue
index 5b33e3f..c9bc1c3 100644
--- a/src/fields/core/FieldPassword.vue
+++ b/src/fields/core/FieldPassword.vue
@@ -15,23 +15,23 @@
   </div>
 </template>
 
-<script setup>
-import { computed, toRefs } from 'vue'
+<script setup lang="ts">
+import { computed, type ComputedRef, toRefs } from 'vue'
 import {
   useFormModel,
   useFieldValidate,
   useFieldAttributes,
-  useFieldProps,
   useFieldEmits
-} from '@/composables/index.ts'
+} from '@/composables'
+import type { PasswordField, FieldProps, FieldPropRefs } from '@/resources/types/field/fields'
 
 const mediumRegex = new RegExp('^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})')
 const strongRegex = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})')
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<PasswordField>>()
 const emits = defineEmits(useFieldEmits())
 
-const { model, field } = toRefs(props)
+const { model, field }: FieldPropRefs<PasswordField> = toRefs(props)
 const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
 const { currentModelValue } = useFormModel(model.value, field.value)
 
@@ -44,7 +44,7 @@ const { errors, validate } = useFieldValidate(
 )
 
 /** Roughly determine the strength level of the password */
-const passwordStrength = computed(() => {
+const passwordStrength: ComputedRef<number> = computed(() => {
   if (strongRegex.test(currentModelValue.value)) {
     return 3
   } else if (mediumRegex.test(currentModelValue.value)) {
@@ -55,18 +55,18 @@ const passwordStrength = computed(() => {
   return 0
 })
 
-const meterStyle = computed(() => {
+const meterStyle: ComputedRef<string> = computed(() => {
   return {
     0: '',
     1: 'width:15%;background:red;',
     2: 'width:50%;background:orange;',
     3: 'width:100%;background:green;'
-  }[passwordStrength.value]
+  }[passwordStrength.value] ?? ''
 })
 
-const onFieldValueChanged = ({ target }) => {
+const onFieldValueChanged = (event: Event) => {
   errors.value = []
-  emits('onInput', target.value)
+  emits('onInput', (event.target as HTMLInputElement).value)
 }
 
 const onBlur = () => {
diff --git a/src/fields/core/FieldRadio.vue b/src/fields/core/FieldRadio.vue
index 075b578..d5937a0 100644
--- a/src/fields/core/FieldRadio.vue
+++ b/src/fields/core/FieldRadio.vue
@@ -15,26 +15,26 @@
   </template>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from 'vue'
 import {
   useFieldEmits,
-  useFieldProps,
   useFormModel,
   useFieldAttributes
-} from '@/composables/index.ts'
+} from '@/composables'
+import type { RadioField, FieldProps, FieldPropRefs } from '@/resources/types/field/fields'
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<RadioField>>()
 const emits = defineEmits(useFieldEmits())
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<RadioField> = toRefs(props)
 const { isRequired, hint } = useFieldAttributes(model.value, field.value)
 const { currentModelValue } = useFormModel(model.value, field.value)
 
-const getFieldId = (optionName) => `${field.value.name}_${optionName}`
+const getFieldId = (optionName: string) => `${field.value.name}_${optionName}`
 
-const onFieldValueChanged = ({ target }) => {
-  emits('onInput', target.value)
+const onFieldValueChanged = (event: Event) => {
+  emits('onInput', (event.target as HTMLInputElement).value)
 }
 
 defineExpose({ hint })
diff --git a/src/fields/core/FieldReset.vue b/src/fields/core/FieldReset.vue
index 22e1f22..3df89a1 100644
--- a/src/fields/core/FieldReset.vue
+++ b/src/fields/core/FieldReset.vue
@@ -2,13 +2,13 @@
   <input type="reset" class="field-reset" :value="field.buttonText" :class="field.buttonClasses">
 </template>
 
-<script setup>
-import { toRefs } from 'vue'
-import { useFieldProps } from '@/composables/index.ts'
+<script setup lang="ts">
+import { type Ref, toRefs } from 'vue'
+import type { FieldProps, ResetField } from '@/resources/types/field/fields'
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<ResetField>>()
 
-const { field } = toRefs(props)
+const { field }: { field: Ref<ResetField> } = toRefs(props)
 
 defineExpose({ noLabel: true })
 </script>
\ No newline at end of file
diff --git a/src/fields/core/FieldSelect.vue b/src/fields/core/FieldSelect.vue
index dcc662a..06453b3 100644
--- a/src/fields/core/FieldSelect.vue
+++ b/src/fields/core/FieldSelect.vue
@@ -64,39 +64,43 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useMagicKeys } from '@vueuse/core'
-import { onClickOutside as vOnClickOutside } from '@/directives/onClickOutside.ts'
-import { ref, toRefs, computed } from 'vue'
+import { onClickOutside as vOnClickOutside } from '@/directives/onClickOutside'
+import { ref, toRefs, computed, type ComputedRef, type Ref } from 'vue'
+import type { FieldProps, FieldPropRefs, SelectField } from '@/resources/types/field/fields'
 import {
   useFieldAttributes,
   useFieldEmits,
-  useFieldProps,
   useFormModel
-} from '@/composables/index.ts'
+} from '@/composables'
+import { FieldOption } from '@/resources/types/fieldAttributes'
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<SelectField>>()
 const emits = defineEmits(useFieldEmits())
 const { controlLeft, metaLeft } = useMagicKeys()
 
-const isOpened = ref(false)
-const { field, model } = toRefs(props)
+const isOpened: Ref<boolean> = ref(false)
+const { field, model }: FieldPropRefs<SelectField> = toRefs(props)
 const { hint } = useFieldAttributes(model.value, field.value)
 
 /** Names of the selected values */
-const selectedNames = computed(() => {
+const selectedNames: ComputedRef<string[]> = computed(() => {
   if (!currentModelValue.value) return []
+
+  const findOptionName = (option: FieldOption) => field.value.options.find(o => o.value === option.value)?.name ?? ''
+
   if (Array.isArray(currentModelValue.value) && field.value.multiple) {
-    return currentModelValue.value.map(val => field.value.options.find(o => o.value === val)?.name)
+    return currentModelValue.value.map(o => findOptionName(o))
   } else {
-    return [ field.value.options.find(o => o.value === currentModelValue.value).name ]
+    return [ field.value.options.find(o => o.value === currentModelValue.value)?.name ?? '' ]
   }
 })
 
 /** Whether the field has a value */
-const hasValue = computed(() => field.value.multiple ? currentModelValue.value.length : currentModelValue.value)
+const hasValue: ComputedRef<boolean> = computed(() => field.value.multiple ? currentModelValue.value.length : currentModelValue.value)
 /** Whether the user is pressing a modifier key (CMD or left CTRL) */
-const isPressingModifierKey = computed(() => metaLeft.value || controlLeft.value)
+const isPressingModifierKey: ComputedRef<boolean> = computed(() => metaLeft.value || controlLeft.value)
 
 const { currentModelValue } = useFormModel(model.value, field.value)
 
@@ -105,22 +109,22 @@ const onClickInput = () => isOpened.value = !isOpened.value
 /** Unselect all items. */
 const resetSelection = () => emits('onInput', field.value.multiple ? [] : '')
 
-/** Determine whether an option is currently selected by the user */
-function isSelected (option) {
+/** Determine whether the user currently selects an option */
+function isSelected (option: FieldOption) {
   if (!field.value.multiple) return currentModelValue.value === option.value
   return currentModelValue.value?.includes(option.value) ?? false
 }
 
-function handleClickOutside (event) {
+function handleClickOutside (event: Event) {
   if (
     (!field.value.multiple && !isPressingModifierKey.value) ||
-      !event.target.id.startsWith(props.id + 'vfg-select')
+      !(event.target as HTMLElement).id.startsWith(props.id + 'vfg-select')
   ) {
     isOpened.value = false
   }
 }
 
-function selectOption (option) {
+function selectOption (option: FieldOption) {
   const optionSelected = isSelected(option)
 
   if (!field.value.multiple) {
diff --git a/src/fields/core/FieldSelectNative.vue b/src/fields/core/FieldSelectNative.vue
index 52e2f30..954d3f7 100644
--- a/src/fields/core/FieldSelectNative.vue
+++ b/src/fields/core/FieldSelectNative.vue
@@ -17,28 +17,27 @@
   </select>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from 'vue'
-
+import type { FieldPropRefs, FieldProps, SelectNativeField } from '@/resources/types/field/fields'
 import {
   useFieldEmits,
   useFieldValidate,
   useFieldAttributes,
-  useFieldProps,
   useFormModel
-} from '@/composables/index.ts'
+} from '@/composables'
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<SelectNativeField>>()
 const emits = defineEmits(useFieldEmits())
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<SelectNativeField> = toRefs(props)
 
 const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
 const { currentModelValue } = useFormModel(model.value, field.value)
 const { validate } = useFieldValidate(model.value, field.value)
 
 const onBlur = () => {
-  validate().then((validationErrors) => {
+  validate(currentModelValue.value).then((validationErrors) => {
     emits('validated',
       validationErrors.length === 0,
       validationErrors,
@@ -47,8 +46,8 @@ const onBlur = () => {
   })
 }
 
-const onFieldValueChanged = (event) => {
-  emits('onInput', event.target.value)
+const onFieldValueChanged = (event: Event) => {
+  emits('onInput', (event.target as HTMLSelectElement).value)
 }
 
 defineExpose({ hint })
diff --git a/src/fields/core/FieldSubmit.vue b/src/fields/core/FieldSubmit.vue
index f1bfe3b..be487d1 100644
--- a/src/fields/core/FieldSubmit.vue
+++ b/src/fields/core/FieldSubmit.vue
@@ -8,13 +8,14 @@
   >
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from 'vue'
-import { useFieldProps, useFieldAttributes } from '@/composables/index.ts'
+import type { FieldProps, FieldPropRefs, SubmitField } from '@/resources/types/field/fields'
+import { useFieldAttributes } from '@/composables'
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<SubmitField>>()
 
-const { model, field } = toRefs(props)
+const { model, field }: FieldPropRefs<SubmitField> = toRefs(props)
 
 const { isDisabled } = useFieldAttributes(model.value, field.value)
 
diff --git a/src/fields/core/FieldSwitch.vue b/src/fields/core/FieldSwitch.vue
index 055385d..7fcbc01 100644
--- a/src/fields/core/FieldSwitch.vue
+++ b/src/fields/core/FieldSwitch.vue
@@ -11,26 +11,25 @@
   </label>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from 'vue'
-
+import type { SwitchField, FieldPropRefs, FieldProps } from '@/resources/types/field/fields.js'
 import {
   useFieldEmits,
   useFieldAttributes,
-  useFieldProps,
   useFormModel
-} from '@/composables/index.ts'
+} from '@/composables'
 
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<SwitchField>>()
 const emits = defineEmits(useFieldEmits())
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<SwitchField> = toRefs(props)
 
 const { isDisabled } = useFieldAttributes(model.value, field.value)
 const { currentModelValue } = useFormModel(model.value, field.value)
 
-const onFieldValueChanged = ({ target }) => {
-  emits('onInput', target.checked)
+const onFieldValueChanged = (event: Event) => {
+  emits('onInput', (event.target as HTMLInputElement).checked)
 }
 </script>
\ No newline at end of file
diff --git a/src/fields/core/FieldText.vue b/src/fields/core/FieldText.vue
index 01cb397..714fe04 100644
--- a/src/fields/core/FieldText.vue
+++ b/src/fields/core/FieldText.vue
@@ -1,27 +1,30 @@
 <template>
   <input
-    :id="id"
+    :id="props.id"
     class="field-input"
     type="text"
     :name="field.name"
     :required="isRequired"
     :disabled="isDisabled"
     :placeholder="field.placeholder"
-    :autocomplete="field.autocomplete || 'off'"
+    :autocomplete="autoCompleteState"
     :value="currentModelValue"
     @input="onFieldValueChanged"
     @blur="onBlur"
   >
 </template>
 
-<script setup>
-import { toRefs } from 'vue'
-import { useFormModel, useFieldAttributes, useFieldValidate, useFieldProps, useFieldEmits } from '@/composables/index.ts'
+<script setup lang="ts">
+import { toRefs, computed, type ComputedRef } from 'vue'
+import type { FieldPropRefs, FieldProps, TextField } from '@/resources/types/field/fields'
+import { useFormModel, useFieldAttributes, useFieldValidate, useFieldEmits } from '@/composables'
 
 const emits = defineEmits(useFieldEmits())
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<TextField>>()
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<TextField> = toRefs(props)
+
+const autoCompleteState: ComputedRef<string> = computed(() => field.value.autocomplete ? 'on' : 'off')
 
 const { currentModelValue } = useFormModel(model.value, field.value)
 const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
@@ -43,9 +46,9 @@ const onBlur = () => {
   })
 }
 
-const onFieldValueChanged = ({ target }) => {
+const onFieldValueChanged = (event: Event) => {
   errors.value = []
-  emits('onInput', target.value)
+  emits('onInput', (event.target as HTMLInputElement).value)
 }
 
 defineExpose({ errors, hint })
diff --git a/src/fields/core/FieldTextarea.vue b/src/fields/core/FieldTextarea.vue
index e31db9f..ff0f92b 100644
--- a/src/fields/core/FieldTextarea.vue
+++ b/src/fields/core/FieldTextarea.vue
@@ -1,6 +1,6 @@
 <template>
   <textarea
-    :id="id"
+    :id="props.id"
     :style="field.resizable ? '' : 'resize: none;'"
     class="field-textarea"
     :name="field.name"
@@ -15,22 +15,21 @@
   />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from 'vue'
-
+import type { FieldProps, FieldPropRefs, TextAreaField } from '@/resources/types/field/fields'
 import {
   useFieldEmits,
   useFieldValidate,
   useFieldAttributes,
-  useFieldProps,
   useFormModel
-} from '@/composables/index.ts'
+} from '@/composables'
 
 
-const props = defineProps(useFieldProps())
+const props = defineProps<FieldProps<TextAreaField>>()
 const emits = defineEmits(useFieldEmits())
 
-const { field, model } = toRefs(props)
+const { field, model }: FieldPropRefs<TextAreaField> = toRefs(props)
 
 const { isRequired, isDisabled, isReadonly, hint } = useFieldAttributes(model.value, field.value)
 const { currentModelValue } = useFormModel(model.value, field.value)
@@ -46,9 +45,9 @@ const onBlur = () => {
   })
 }
 
-const onFieldValueChanged = (event) => {
+const onFieldValueChanged = (event: Event) => {
   errors.value = []
-  emits('onInput', event.target.value)
+  emits('onInput', (event.target as HTMLTextAreaElement).value)
 }
 
 defineExpose({ hint, errors })
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 1b124f0..2463afa 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,4 +1,4 @@
-import { Field } from '@/resources/types/fields'
+import type { Field } from '@/resources/types/field/fields'
 
 /**
  * Determine if value is of type Function.
diff --git a/src/resources/types/field/base.ts b/src/resources/types/field/base.ts
new file mode 100644
index 0000000..16f6968
--- /dev/null
+++ b/src/resources/types/field/base.ts
@@ -0,0 +1,55 @@
+import type {
+  TDynamicAttributeBooleanFunction,
+  TDynamicAttributeStringFunction,
+  TOnValidatedFunction,
+  TValidatorFunction
+} from '@/resources/types/functions'
+import type { FieldOption } from '@/resources/types/fieldAttributes'
+
+/**
+ * The base of every field type.
+ */
+export type FieldBase = {
+  id?: string;
+  name: string;
+  model: string;
+  label?: string;
+  type: string;
+  visible?: boolean | TDynamicAttributeBooleanFunction;
+  required?: boolean | TDynamicAttributeBooleanFunction;
+  readonly?: boolean | TDynamicAttributeBooleanFunction;
+  disabled?: boolean | TDynamicAttributeBooleanFunction;
+  hint?: string | TDynamicAttributeStringFunction;
+  validator?: TValidatorFunction | TValidatorFunction[],
+  onValidated?: TOnValidatedFunction
+}
+
+/**
+ * A type based on FieldMinMax uses the `min` and `max` properties.
+ */
+export type FieldMinMax = {
+  min?: number;
+  max?: number;
+}
+
+/**
+ * A type based on OptionField has the `options` property.
+ */
+export type OptionField = {
+  options: FieldOption[]
+}
+
+/**
+ * A type based on InputField has the `type: 'input'` and an `inputType` property.
+ */
+export type InputField = {
+  type: 'input';
+  inputType: string;
+}
+
+/**
+ * A type based on PlaceholderField has the `placeholder` property.
+ */
+export type PlaceholderField = {
+  placeholder?: string;
+}
\ No newline at end of file
diff --git a/src/resources/types/field/fields.ts b/src/resources/types/field/fields.ts
new file mode 100644
index 0000000..8464057
--- /dev/null
+++ b/src/resources/types/field/fields.ts
@@ -0,0 +1,116 @@
+import type { FieldOption, FormModel } from '@/resources/types/fieldAttributes'
+import type { FieldMinMax, FieldBase, InputField, OptionField, PlaceholderField } from '@/resources/types/field/base'
+import type { Ref } from 'vue'
+import { FormGeneratorSchema, FormOptions } from '@/resources/types/generic'
+
+export type NumberField = FieldBase & InputField & FieldMinMax & {
+  inputType: 'number';
+  placeholder: string;
+  step?: number;
+}
+
+export type TextField = FieldBase & InputField & FieldMinMax & {
+  inputType: 'text';
+  placeholder?: string;
+  autocomplete?: boolean;
+}
+
+export type CheckboxField = FieldBase & InputField & {
+  inputType: 'checkbox';
+}
+
+export type ColorField = FieldBase & InputField & {
+  inputType: 'color';
+  withInput?: boolean;
+}
+
+export type RadioField = FieldBase & InputField & {
+  inputType: 'radio';
+  options: FieldOption[];
+}
+
+export type ChecklistField = FieldBase & OptionField & {
+  type: 'checklist';
+  inputType: undefined;
+}
+
+export type SelectField = FieldBase & OptionField & PlaceholderField & {
+  type: 'select';
+  inputType: undefined;
+  multiple?: boolean;
+}
+
+export type SelectNativeField = FieldBase & OptionField & {
+  type: 'select-native';
+  inputType: undefined;
+  multiple?: boolean;
+  placeholder?: string;
+}
+
+export type MaskField = FieldBase & PlaceholderField & {
+  type: 'mask',
+  inputType: undefined;
+  mask: string;
+  maskOptions?: {
+    eager?: boolean;
+    tokens?: Record<string, { pattern: RegExp, uppercase: boolean }>;
+    unmasked?: boolean;
+  };
+}
+
+export type ObjectField = FieldBase & {
+  type: 'object';
+  inputType: undefined;
+  model: string;
+  schema: FormGeneratorSchema['schema'];
+}
+
+export type PasswordField = FieldBase & InputField & FieldMinMax & {
+  inputType: 'password';
+  placeholder?: string;
+  indicator?: boolean;
+}
+
+export type ButtonFieldBase = FieldBase & {
+  inputType: undefined;
+  buttonText: string;
+  buttonClasses?: string;
+}
+
+export type SubmitField = ButtonFieldBase & {
+  type: 'submit';
+}
+
+export type ButtonField = ButtonFieldBase & {
+  type: 'button';
+  onClick?: (model: FormModel, field: Field) => void;
+}
+
+export type SwitchField = FieldBase
+
+export type ResetField = ButtonFieldBase & {
+  type: 'reset';
+}
+
+export type TextAreaField = FieldBase & PlaceholderField & {
+  maxLength?: string;
+  resizable?: boolean;
+}
+
+export type Field = TextField | RadioField | ChecklistField | SelectField | MaskField | PasswordField | ButtonField |
+  NumberField | ColorField | CheckboxField | ObjectField | ResetField | SelectNativeField | SubmitField | SwitchField |
+  TextAreaField
+export type FieldValue = number | string | number[] | string[]
+
+export interface FieldPropRefs<T extends Field=Field> {
+  field: Ref<T>,
+  model: Ref<FormModel>
+}
+
+export interface FieldProps<T extends Field=Field> {
+  id: string;
+  formGenerator: object;
+  formOptions: FormOptions;
+  field: T;
+  model: Record<string, unknown>;
+}
diff --git a/src/resources/types/fieldAttributes.ts b/src/resources/types/fieldAttributes.ts
index a6c1ef2..59f6f31 100644
--- a/src/resources/types/fieldAttributes.ts
+++ b/src/resources/types/fieldAttributes.ts
@@ -1,4 +1,6 @@
-export interface IOption {
+export type FieldOption = {
   value: string;
   name: string;
 }
+
+export type FormModel = Record<string, any>
diff --git a/src/resources/types/fields.ts b/src/resources/types/fields.ts
deleted file mode 100644
index 058cb23..0000000
--- a/src/resources/types/fields.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  TDynamicAttributeBooleanFunction,
-  TDynamicAttributeStringFunction, TOnValidatedFunction,
-  TValidatorFunction
-} from '@/resources/types/functions'
-
-import { IOption } from '@/resources/types/fieldAttributes'
-
-export interface IField {
-  id?: string;
-  name: string;
-  model: string;
-  label?: string;
-  type: string;
-  inputType?: string;
-  visible?: boolean | TDynamicAttributeBooleanFunction;
-  required?: boolean | TDynamicAttributeBooleanFunction;
-  readonly?: boolean | TDynamicAttributeBooleanFunction;
-  disabled?: boolean | TDynamicAttributeBooleanFunction;
-  hint?: string | TDynamicAttributeStringFunction;
-  validator?: TValidatorFunction | TValidatorFunction[],
-  onValidated?: TOnValidatedFunction
-  min?: number;
-  max?: number;
-}
-
-export interface IRadioField extends IField {
-  options: IOption[]
-}
-
-export interface ITextField extends IField {
-  placeholder: string;
-}
-
-export interface ISelectField extends ITextField {
-  emptyText: string;
-  multiple: boolean;
-  options: IOption[]
-}
-
-export interface IMaskField extends ITextField {
-  mask: string;
-  maskOptions?: {
-    eager?: boolean;
-    tokens?: Record<string, { pattern: RegExp, uppercase: boolean }>;
-    unmasked?: boolean;
-  };
-}
-
-export interface IPasswordField extends ITextField {
-  indicator: boolean;
-}
-
-export interface IButtonFieldBase {
-  buttonText: string;
-  type: string;
-}
-
-export interface IButtonField extends IButtonFieldBase {
-  onClick?: () => void;
-}
-
-export type Field = IField | IRadioField | ISelectField | IPasswordField | IButtonField | ITextField | IMaskField
-export type FieldValue = number | string | number[] | string[]
-
-export interface FieldProps<T extends Field=Field> {
-  id: string;
-  formGenerator: object;
-  field: T;
-  model: Record<string, unknown>;
-}
\ No newline at end of file
diff --git a/src/resources/types/functions.ts b/src/resources/types/functions.ts
index 686a624..4a49b0b 100644
--- a/src/resources/types/functions.ts
+++ b/src/resources/types/functions.ts
@@ -1,7 +1,8 @@
-import { Field, FieldValue } from '@/resources/types/fields'
+import type { Field, FieldValue } from '@/resources/types/field/fields'
+import { FormModel } from '@/resources/types/fieldAttributes'
 
-export type TDynamicAttributeBooleanFunction = (model: Record<string, any>, field: Field) => boolean
-export type TDynamicAttributeStringFunction = (model: Record<string, any>, field: Field) => string
+export type TDynamicAttributeBooleanFunction = (model: FormModel, field: Field) => boolean
+export type TDynamicAttributeStringFunction = (model: FormModel, field: Field) => string
 
-export type TValidatorFunction = (value: FieldValue, field: Field, model: Record<string, any>) => boolean
-export type TOnValidatedFunction = (model: Record<string, any>, errors: string[], field: Field) => void
+export type TValidatorFunction = (value: FieldValue, field: Field, model: FormModel) => boolean
+export type TOnValidatedFunction = (model: FormModel, errors: string[], field: Field) => void
diff --git a/src/resources/types/generic.ts b/src/resources/types/generic.ts
index 1672dee..18832a2 100644
--- a/src/resources/types/generic.ts
+++ b/src/resources/types/generic.ts
@@ -1,17 +1,48 @@
 import { TValidatorFunction } from '@/resources/types/functions'
 import { Component } from 'vue'
+import type { Field } from '@/resources/types/field/fields'
+import { FormModel } from '@/resources/types/fieldAttributes'
 
 export type ValidatorMap = Record<string, TValidatorFunction>
 
-export interface PluginComponentOption {
+export type PluginComponentOption = {
   name: string;
   component: Component
 }
 
-export interface PluginOptions {
-  aliases?: Record<string, string>,
-  messages?: Record<string, string>,
-  components?: PluginComponentOption[]
+export type PluginOptions = {
+  aliases?: Record<string, string>;
+  messages?: Record<string, string>;
+  components?: PluginComponentOption[];
+}
+
+export type FormGeneratorSchema = {
+  model: FormModel;
+  schema: {
+    fields?: Field[];
+    groups?: {
+      legend: string;
+      fields: Field[];
+    }[]
+  },
+}
+
+export type FormGeneratorProps = {
+  id?: string;
+  idPrefix?: string;
+  options?: FormOptions;
+  schema: FormGeneratorSchema['schema'];
+  model: FormGeneratorSchema['model'];
+  enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
+}
+
+export type FormOptions = {
+  idPrefix?: string;
+}
+
+export type FieldValidation = {
+  fieldErrors: string[],
+  field: Field
 }
 
 /** We're extending the HTMLElement interface to avoid TypeScript errors in directives  */
diff --git a/src/validators/index.ts b/src/validators/index.ts
index b7bb991..5e4ecb2 100644
--- a/src/validators/index.ts
+++ b/src/validators/index.ts
@@ -1,5 +1,6 @@
 import { isNotEmpty, isString } from '@/helpers'
-import { Field, FieldValue } from '@/resources/types/fields'
+import type { Field, FieldValue } from '@/resources/types/field/fields'
+import type { FormModel } from '@/resources/types/fieldAttributes'
 
 export default {
 
@@ -8,7 +9,7 @@ export default {
    * @returns {boolean} - Returns 'true' if the field is required and the value is not empty, otherwise false.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  required (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  required (value: FieldValue, field: Field, model: FormModel): boolean {
     return isNotEmpty(value)
   },
 
@@ -17,7 +18,7 @@ export default {
    * @returns {boolean} - Returns 'true' if the field is required and the value is not empty, otherwise false.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  min (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  min (value: FieldValue, field: Field, model: FormModel): boolean {
     if (!('min' in field) || !field.min || !value) return true
 
     if (typeof value === 'number'){
@@ -36,7 +37,7 @@ export default {
    * @returns {boolean} - Returns 'true' if the field is required and the value is not empty, otherwise false.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  max (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  max (value: FieldValue, field: Field, model: FormModel): boolean {
     if (!('max' in field) || !value || !field.max) return true
 
     if (typeof value === 'number'){
@@ -55,7 +56,7 @@ export default {
    * @returns {boolean} - Returns 'true' if the field is required and the value is not empty, otherwise false.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  string (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  string (value: FieldValue, field: Field, model: FormModel): boolean {
     return isString(value)
   },
 
@@ -64,7 +65,7 @@ export default {
    * @returns {boolean} - Returns 'true' if the field is a number.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  number (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  number (value: FieldValue, field: Field, model: FormModel): boolean {
     return Number.isNaN(value)
   },
 
@@ -73,7 +74,7 @@ export default {
    * @returns {boolean} - Returns 'true' if the field's format is a valid email format, otherwise false.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  email (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  email (value: FieldValue, field: Field, model: FormModel): boolean {
     if (typeof value !== 'string') return false
     const regex = new RegExp('^([^<>()\\[\\]\\\\.,;:\\s@"]+(?:\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*|".+")@(\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}]|(?:[a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,})$', 'i')
     return Boolean(value.match(regex))
@@ -84,7 +85,7 @@ export default {
    * @returns {boolean} - Returns 'true' if value matches the format, otherwise false.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  phoneNumberE164andE123 (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  phoneNumberE164andE123 (value: FieldValue, field: Field, model: FormModel): boolean {
     if (typeof value !== 'string') return false
 
     const regex = new RegExp(
@@ -99,7 +100,7 @@ export default {
    * @returns {boolean} - Returns 'true' if value matches the format, otherwise false.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  mobilePhoneNL (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  mobilePhoneNL (value: FieldValue, field: Field, model: FormModel): boolean {
     if (typeof value !== 'string') return false
 
     const regex = new RegExp('(\\+316[0-9]{8})|(06[0-9]{8})', 'i')
@@ -111,7 +112,7 @@ export default {
    * @returns {boolean} - Returns `true` if value matches the format, otherwise false.
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  hexColorValue (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+  hexColorValue (value: FieldValue, field: Field, model: FormModel): boolean {
     if (typeof value !== 'string') return false
 
     const regex = new RegExp('^\#([a-f0-9]{3}|[a-f0-9]{6})$', 'i')