refactor: all fields to TypeScript

Author: kevinkosterr

package.json

@@ -79,4 +79,4 @@
     "@vueuse/core": "^13.1.0",
     "maska": "^3.1.1"
   }
-}
+}

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"

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
 ) {
 

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,

src/composables/useFormModel.ts

@@ -1,13 +1,14 @@
 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
  * @param model - form schema model
  * @param field - form field
  */
 export function useFormModel(
-  model: Record<string, any>,
+  model: FormModel,
   field: Field
 ) {
 

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))) {

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>

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',

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)

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)) {

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('')