@teamnovu/kit-vue-forms 0.1.15 → 0.1.17

package/dist/types/form.d.ts

@@ -44,5 +44,5 @@ export interface Form<T extends FormDataDefault> {
     reset: () => void;
     validateForm: () => Promise<ValidationResult>;
     submitHandler: (onSubmit: (data: T) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>;
-    getSubForm: <P extends EntityPaths<T>>(path: P, options?: SubformOptions<PickEntity<T, P>>) => Form<PickEntity<T, P>>;
+    getSubForm: <P extends EntityPaths<T>>(path: P, options?: SubformOptions<PickEntity<T, P>>) => Omit<Form<PickEntity<T, P>>, 'submitHandler'>;
 }

package/dist/utils/path.d.ts

@@ -1,7 +1,10 @@
 import { MaybeRef, WritableComputedRef } from 'vue';
 import { Paths, PickProps, SplitPath } from '../types/util';
 import { ErrorBag } from '../types/validation';
+import { FormField } from '../types/form';
 export declare function splitPath(path: string): string[];
+export declare function existsPath<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>): boolean;
+export declare function existsFieldPath<T, K extends Paths<T>>(field: FormField<T, K>): boolean;
 export declare function getNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>): PickProps<T, K>;
 export declare function setNestedValue<T, K extends Paths<T>>(obj: MaybeRef<T>, path: K | SplitPath<K>, value: PickProps<T, K>): void;
 export declare const getLens: <T, K extends Paths<T>>(data: MaybeRef<T>, key: MaybeRef<K | SplitPath<K>>) => WritableComputedRef<PickProps<T, K>, PickProps<T, K>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "",
   "main": "dist/index.js",
   "type": "module",
@@ -26,7 +26,7 @@
     "@vitest/ui": "^2.0.0",
     "happy-dom": "^12.0.0",
     "vitest": "^2.0.0",
-    "vue": "^3.5.13"
+    "vue": "^3.5.25"
   },
   "dependencies": {
     "@vueuse/core": "^13.5.0",

package/src/composables/useField.ts

@@ -1,19 +1,28 @@
-import { computed, reactive, shallowRef, toRefs, watch, type MaybeRef, type MaybeRefOrGetter, type Ref } from 'vue'
+import type { Awaitable } from '@vueuse/core'
+import { computed, reactive, shallowRef, toRefs, unref, watch, type MaybeRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import type { FormField } from '../types/form'
 import type { ValidationErrorMessage, ValidationErrors } from '../types/validation'
 import { cloneRefValue } from '../utils/general'
-import type { Awaitable } from '@vueuse/core'
 
 export interface UseFieldOptions<T, K extends string> {
   value?: MaybeRef<T>
   initialValue?: MaybeRefOrGetter<Readonly<T>>
   path: K
   errors?: Ref<ValidationErrors>
+  existsInForm?: MaybeRef<boolean>
   onBlur?: () => Awaitable<void>
   onFocus?: () => Awaitable<void>
 }
 
-export function useField<T, K extends string>(options: UseFieldOptions<T, K>): FormField<T, K> {
+export function useField<T, K extends string>(fieldOptions: UseFieldOptions<T, K>): FormField<T, K> {
+  const defaultOptions = {
+    existsInForm: true,
+  }
+
+  const options = {
+    ...defaultOptions,
+    ...fieldOptions,
+  }
   const initialValue = shallowRef(Object.freeze(cloneRefValue(options.initialValue))) as Ref<Readonly<T | undefined>>
 
   const state = reactive({
@@ -53,7 +62,10 @@ export function useField<T, K extends string>(options: UseFieldOptions<T, K>): F
   }
 
   const reset = (): void => {
-    state.value = cloneRefValue(state.initialValue)
+    const lastPathPart = state.path.split('.').at(-1) || ''
+    if (unref(options.existsInForm) && !/^\d+$/.test(lastPathPart)) {
+      state.value = cloneRefValue(state.initialValue)
+    }
     state.touched = false
     state.errors = []
   }

package/src/composables/useFieldRegistry.ts

@@ -1,3 +1,4 @@
+import type { Awaitable } from "@vueuse/core";
 import {
   computed,
   onScopeDispose,
@@ -6,65 +7,69 @@ import {
   toRef,
   triggerRef,
   unref,
-  watchEffect,
+  watch,
   type MaybeRef,
-} from 'vue'
-import type { FieldsTuple, FormDataDefault, FormField } from '../types/form'
-import type { Paths, PickProps } from '../types/util'
-import { getLens, getNestedValue } from '../utils/path'
-import { Rc } from '../utils/rc'
-import { useField, type UseFieldOptions } from './useField'
-import type { ValidationState } from './useValidation'
-import type { Awaitable } from '@vueuse/core'
+} from "vue";
+import type { FieldsTuple, FormDataDefault, FormField } from "../types/form";
+import type { Paths, PickProps } from "../types/util";
+import { existsPath, getLens, getNestedValue } from "../utils/path";
+import { Rc } from "../utils/rc";
+import { useField, type UseFieldOptions } from "./useField";
+import type { ValidationState } from "./useValidation";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type FieldRegistryCache<T> = Map<Paths<T>, FormField<any, string>>
+type FieldRegistryCache<T> = Map<Paths<T>, FormField<any, string>>;
 
 export type ResolvedFormField<T, K extends Paths<T>> = FormField<
   PickProps<T, K>,
   K
->
+>;
 
 export type DefineFieldOptions<F, K extends string> = Pick<
   UseFieldOptions<F, K>,
-  'path'
+  "path"
 > & {
-  onBlur?: () => void
-  onFocus?: () => void
-}
+  onBlur?: () => void;
+  onFocus?: () => void;
+};
 
 interface FormState<
   T extends FormDataDefault,
   TIn extends FormDataDefault = T,
 > {
-  data: T
-  initialData: TIn
+  data: T;
+  initialData: TIn;
 }
 
 interface FieldRegistryOptions {
-  keepValuesOnUnmount?: MaybeRef<boolean>
-  onBlur?: (path: string) => Awaitable<void>
-  onFocus?: (path: string) => Awaitable<void>
+  keepValuesOnUnmount?: MaybeRef<boolean>;
+  onBlur?: (path: string) => Awaitable<void>;
+  onFocus?: (path: string) => Awaitable<void>;
 }
 
 const optionDefaults = {
   keepValuesOnUnmount: true,
-}
+};
 
 // A computed that always reflects the latest value from the getter
 // This computed forces updates even if the value is the same (to trigger watchers)
-function alwaysComputed<T>(getter: () => T) {
-  const initialValueRef = shallowRef(getter())
+function initialDataSync<T extends FormDataDefault>(
+  formState: FormState<T>,
+  path: Paths<T>,
+) {
+  const getNewValue = () => getNestedValue(formState.initialData, path);
+  const initialValueRef = shallowRef(getNewValue());
 
-  watchEffect(
+  watch(
+    () => formState.initialData,
     () => {
-      initialValueRef.value = getter()
-      triggerRef(initialValueRef)
+      initialValueRef.value = getNewValue();
+      triggerRef(initialValueRef);
     },
-    { flush: 'sync' },
-  )
+    { flush: "sync" },
+  );
 
-  return initialValueRef
+  return initialValueRef;
 }
 
 export function useFieldRegistry<T extends FormDataDefault>(
@@ -72,103 +77,99 @@ export function useFieldRegistry<T extends FormDataDefault>(
   validationState: ValidationState<T>,
   fieldRegistryOptions?: FieldRegistryOptions,
 ) {
-  const fieldReferenceCounter = new Map<Paths<T>, Rc>()
-  const fields = shallowReactive(new Map()) as FieldRegistryCache<T>
+  const fieldReferenceCounter = new Map<Paths<T>, Rc>();
+  const fields = shallowReactive(new Map()) as FieldRegistryCache<T>;
   const registryOptions = {
     ...optionDefaults,
     ...fieldRegistryOptions,
-  }
+  };
 
   const registerField = <K extends Paths<T>>(
     field: ResolvedFormField<T, K>,
   ) => {
-    const path = unref(field.path) as Paths<T>
-    fields.set(path, field)
-  }
+    const path = unref(field.path) as Paths<T>;
+    fields.set(path, field);
+  };
 
   const deregisterField = (path: Paths<T>) => {
     if (!registryOptions?.keepValuesOnUnmount) {
-      fields.get(path)?.reset()
+      fields.get(path)?.reset();
     }
-    fields.delete(path)
-  }
+    fields.delete(path);
+  };
 
   const track = (path: Paths<T>) => {
     if (!fieldReferenceCounter.has(path)) {
-      fieldReferenceCounter.set(path, new Rc(() => deregisterField(path)))
+      fieldReferenceCounter.set(path, new Rc(() => deregisterField(path)));
     } else {
-      fieldReferenceCounter.get(path)?.inc()
+      fieldReferenceCounter.get(path)?.inc();
     }
-  }
+  };
 
   const untrack = (path: Paths<T>) => {
     if (fieldReferenceCounter.has(path)) {
-      fieldReferenceCounter.get(path)?.dec()
+      fieldReferenceCounter.get(path)?.dec();
     }
-  }
+  };
 
   const getField = <K extends Paths<T>>(
     options: DefineFieldOptions<PickProps<T, K>, K>,
   ): ResolvedFormField<T, K> => {
-    const { path } = options
+    const { path } = options;
 
     if (!fields.has(path)) {
       const field = useField({
         path,
-        value: getLens(toRef(formState, 'data'), path),
-        initialValue: alwaysComputed(() =>
-          getNestedValue(formState.initialData, path)),
+        value: getLens(toRef(formState, "data"), path),
+        initialValue: initialDataSync(formState, path),
+        existsInForm: computed(() => existsPath(formState.data, unref(path))),
         errors: computed({
           get() {
-            return validationState.errors.value.propertyErrors[path] || []
+            return validationState.errors.value.propertyErrors[path] || [];
           },
           set(newErrors) {
-            validationState.errors.value.propertyErrors[path] = newErrors
+            validationState.errors.value.propertyErrors[path] = newErrors;
           },
         }),
         onBlur: async () => {
-          await Promise.all(
-            [
-              registryOptions?.onBlur?.(unref(path)),
-              options.onBlur?.(),
-            ],
-          )
+          await Promise.all([
+            registryOptions?.onBlur?.(unref(path)),
+            options.onBlur?.(),
+          ]);
         },
         onFocus: async () => {
-          await Promise.all(
-            [
-              registryOptions?.onFocus?.(unref(path)),
-              options.onFocus?.(),
-            ],
-          )
+          await Promise.all([
+            registryOptions?.onFocus?.(unref(path)),
+            options.onFocus?.(),
+          ]);
         },
-      })
+      });
 
-      registerField(field)
+      registerField(field);
     }
 
-    const field = fields.get(path) as ResolvedFormField<T, K>
+    const field = fields.get(path) as ResolvedFormField<T, K>;
 
-    track(path)
+    track(path);
 
     // Clean up field on unmount
     onScopeDispose(() => {
-      untrack(path)
-    })
+      untrack(path);
+    });
 
-    return field
-  }
+    return field;
+  };
 
   const defineField = <K extends Paths<T>>(
     options: DefineFieldOptions<PickProps<T, K>, K>,
   ): ResolvedFormField<T, K> => {
-    const field = getField(options)
+    const field = getField(options);
 
     // TODO: If more options are ever needed than only the path we have to update the field
     // here with the new options
 
-    return field
-  }
+    return field;
+  };
 
   return {
     fields: computed(() => [...fields.values()] as FieldsTuple<T>),
@@ -176,9 +177,9 @@ export function useFieldRegistry<T extends FormDataDefault>(
     registerField,
     deregisterField,
     defineField,
-  }
+  };
 }
 
 export type FieldRegistry<T extends FormDataDefault> = ReturnType<
   typeof useFieldRegistry<T>
->
+>;

package/src/composables/useForm.ts

@@ -10,7 +10,7 @@ import {
   type MaybeRefOrGetter,
   type Ref,
 } from 'vue'
-import type { AnyField, Form, FormDataDefault } from '../types/form'
+import type { Form, FormDataDefault } from '../types/form'
 import type { EntityPaths, PickEntity } from '../types/util'
 import type { ValidationStrategy } from '../types/validation'
 import { cloneRefValue } from '../utils/general'
@@ -19,8 +19,6 @@ import { useFormState } from './useFormState'
 import { createSubformInterface, type SubformOptions } from './useSubform'
 import { useValidation, type ValidationOptions } from './useValidation'
 
-// TODO @Elias implement validation strategy handling
-
 export interface UseFormOptions<T extends FormDataDefault>
   extends ValidationOptions<T> {
   initialData: MaybeRefOrGetter<T>
@@ -29,8 +27,7 @@ export interface UseFormOptions<T extends FormDataDefault>
 }
 
 export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
-  const initialData = computed(() =>
-    Object.freeze(cloneRefValue(options.initialData)))
+  const initialData = computed(() => cloneRefValue(options.initialData))
 
   const data = ref<T>(cloneRefValue(initialData)) as Ref<T>
 
@@ -50,9 +47,9 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
   const validationState = useValidation(state, options)
   const fieldRegistry = useFieldRegistry(state, validationState, {
     keepValuesOnUnmount: options.keepValuesOnUnmount,
-    onBlur: async () => {
+    onBlur: async (path: string) => {
       if (unref(options.validationStrategy) === 'onTouch') {
-        validationState.validateForm()
+        validationState.validateField(path)
       }
     },
   })
@@ -77,13 +74,15 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
   const reset = () => {
     data.value = cloneRefValue(initialData)
     validationState.reset()
-    fieldRegistry.fields.value.forEach((field: AnyField<T>) => field.reset())
+    for (const field of fieldRegistry.fields.value) {
+      field.reset()
+    }
   }
 
   function getSubForm<K extends EntityPaths<T>>(
     path: K,
     options?: SubformOptions<PickEntity<T, K>>,
-  ): Form<PickEntity<T, K>> {
+  ): Omit<Form<PickEntity<T, K>>, 'submitHandler'> {
     return createSubformInterface(formInterface, path, options)
   }
 

package/src/composables/useSubform.ts

@@ -50,7 +50,7 @@ export function createSubformInterface<
   mainForm: Form<T>,
   path: K,
   _options?: SubformOptions<PickEntity<T, K>>,
-): Form<PickEntity<T, K>> {
+): Omit<Form<PickEntity<T, K>>, 'submitHandler'> {
   type ST = PickEntity<T, K>
   type SP = Paths<ST>
   type MP<P extends SP> = `${K}.${P}`

package/src/composables/useValidation.ts

@@ -215,6 +215,22 @@ export function useValidation<T extends FormDataDefault>(
     }
   }
 
+  const validateField = async (path: string): Promise<ValidationResult> => {
+    const validationResults = await getValidationResults()
+
+    updateErrors({
+      general: validationResults.errors.general,
+      propertyErrors: {
+        [path]: validationResults.errors.propertyErrors[path],
+      },
+    })
+
+    return {
+      isValid: !hasErrors(validationResults.errors),
+      errors: validationState.errors,
+    }
+  }
+
   const isValid = computed(() => !hasErrors(validationState.errors))
 
   const reset = () => {
@@ -225,6 +241,7 @@ export function useValidation<T extends FormDataDefault>(
   return {
     ...toRefs(validationState),
     validateForm,
+    validateField,
     defineValidator,
     isValid,
     reset,

package/src/types/form.ts

@@ -80,5 +80,5 @@ export interface Form<T extends FormDataDefault> {
   getSubForm: <P extends EntityPaths<T>>(
     path: P,
     options?: SubformOptions<PickEntity<T, P>>,
-  ) => Form<PickEntity<T, P>>
+  ) => Omit<Form<PickEntity<T, P>>, 'submitHandler'>
 }

package/src/utils/path.ts

@@ -1,6 +1,7 @@
 import { computed, isRef, unref, type MaybeRef } from 'vue'
 import type { Paths, PickProps, SplitPath } from '../types/util'
 import type { ErrorBag, ValidationErrors } from '../types/validation'
+import type { FormField } from '../types/form'
 
 export function splitPath(path: string): string[] {
   if (path === '') {
@@ -9,7 +10,22 @@ export function splitPath(path: string): string[] {
   return path.split(/\s*\.\s*/).filter(Boolean)
 }
 
-export function getNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>) {
+export function existsPath<T, K extends Paths<T>>(
+  obj: T,
+  path: K | SplitPath<K>,
+): boolean {
+  const splittedPath = Array.isArray(path) ? path : splitPath(path) as SplitPath<K>
+  return !!getNestedValue(obj, splittedPath.slice(0, -1) as SplitPath<K>)
+}
+
+export function existsFieldPath<T, K extends Paths<T>>(field: FormField<T, K>) {
+  return existsPath(field.data.value, field.path.value)
+}
+
+export function getNestedValue<T, K extends Paths<T>>(
+  obj: T,
+  path: K | SplitPath<K>,
+) {
   const splittedPath = Array.isArray(path) ? path : splitPath(path)
   return splittedPath.reduce(
     (current, key) => current?.[key],
@@ -17,7 +33,11 @@ export function getNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPat
   ) as PickProps<T, K>
 }
 
-export function setNestedValue<T, K extends Paths<T>>(obj: MaybeRef<T>, path: K | SplitPath<K>, value: PickProps<T, K>): void {
+export function setNestedValue<T, K extends Paths<T>>(
+  obj: MaybeRef<T>,
+  path: K | SplitPath<K>,
+  value: PickProps<T, K>,
+): void {
   const keys = Array.isArray(path) ? path : splitPath(path)
 
   const lastKey = keys.at(-1)!
@@ -30,25 +50,26 @@ export function setNestedValue<T, K extends Paths<T>>(obj: MaybeRef<T>, path: K
 
     obj.value = value
   } else {
-    const target = keys
-      .slice(0, -1)
-      .reduce(
-        (current, key) => {
-          if (current?.[key] === undefined) {
-            // Create the nested object if it doesn't exist
-            current[key] = {}
-          }
-          return current?.[key]
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        unref(obj) as Record<string, any>,
-      )
+    const target = keys.slice(0, -1).reduce(
+      (current, key) => {
+        if (current?.[key] === undefined) {
+          // Create the nested object if it doesn't exist
+          current[key] = {}
+        }
+        return current?.[key]
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      unref(obj) as Record<string, any>,
+    )
 
     target[lastKey] = value
   }
 }
 
-export const getLens = <T, K extends Paths<T>>(data: MaybeRef<T>, key: MaybeRef<K | SplitPath<K>>) => {
+export const getLens = <T, K extends Paths<T>>(
+  data: MaybeRef<T>,
+  key: MaybeRef<K | SplitPath<K>>,
+) => {
   return computed({
     get() {
       return getNestedValue(unref(data), unref(key))
@@ -59,8 +80,14 @@ export const getLens = <T, K extends Paths<T>>(data: MaybeRef<T>, key: MaybeRef<
   })
 }
 
-type JoinPath<Base extends string, Sub extends string> = `${Base}${Base extends '' ? '' : Sub extends '' ? '' : '.'}${Sub}`
-export function joinPath<Base extends string, Sub extends string>(basePath: Base, subPath: Sub): JoinPath<Base, Sub> {
+type JoinPath<
+  Base extends string,
+  Sub extends string,
+> = `${Base}${Base extends '' ? '' : Sub extends '' ? '' : '.'}${Sub}`
+export function joinPath<Base extends string, Sub extends string>(
+  basePath: Base,
+  subPath: Sub,
+): JoinPath<Base, Sub> {
   if (!basePath && !subPath) {
     return '' as JoinPath<Base, Sub>
   }
@@ -88,9 +115,10 @@ export function filterErrorsForPath(errors: ErrorBag, path: string): ErrorBag {
       .filter(([errorPath]) => {
         return errorPath.startsWith(pathPrefix)
       })
-      .map(
-        ([errorPath, errorMessages]) => [errorPath.slice(pathPrefix.length), errorMessages],
-      ),
+      .map(([errorPath, errorMessages]) => [
+        errorPath.slice(pathPrefix.length),
+        errorMessages,
+      ]),
   )
 
   return {

package/tests/useForm.test.ts

@@ -405,6 +405,46 @@ describe("useForm", () => {
     expect(form.data.value.name).toBe("A");
   });
 
+  it("it not create empty objects if the field is going to be destroyed", async () => {
+    const form = useForm({
+      initialData: {
+        data: { names: [] as string[] },
+      },
+    });
+
+    const scope = effectScope();
+
+    scope.run(() => {
+      const nameField = form.defineField({ path: "data.names.0" });
+      nameField.setData("Modified");
+      form.reset();
+    });
+
+    scope.stop();
+
+    expect(form.data.value.data.names).toHaveLength(0);
+  });
+
+  it("it not create empty objects if the nested array field is going to be destroyed", async () => {
+    const form = useForm({
+      initialData: {
+        data: [] as Array<{ name: string }>,
+      },
+    });
+
+    const scope = effectScope();
+
+    scope.run(() => {
+      const nameField = form.defineField({ path: "data.0.name" });
+      nameField.setData("Modified");
+      form.reset();
+    });
+
+    scope.stop();
+
+    expect(form.data.value.data).toHaveLength(0);
+  });
+
   describe("useForm - submit handler", () => {
     it(
       "it should not call the handler when validation errors exist",

package/tests/useValidation.test.ts

@@ -294,7 +294,31 @@ describe('useValidation', () => {
 
     const nameField = form.getField('name')
 
-    expect(form.isValidated.value).toBe(false)
+    // Simulate blur event
+    nameField.onBlur()
+
+    // onBlur is not async but the validation runs async
+    await delay()
+
+    expect(form.isValid.value).toBe(false)
+    expect(form.errors.value.propertyErrors.name).toHaveLength(1)
+  })
+
+  it('should not validate other fields than the blurred one', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+      email: z.string().email(),
+    })
+
+    const initialData = { name: 'A', email: 'invalid-email' }
+    const form = useForm({
+      initialData,
+      schema,
+      validationStrategy: 'onTouch',
+    })
+
+    const nameField = form.getField('name')
+    form.getField('email')
 
     // Simulate blur event
     nameField.onBlur()
@@ -302,9 +326,9 @@ describe('useValidation', () => {
     // onBlur is not async but the validation runs async
     await delay()
 
-    expect(form.isValidated.value).toBe(true)
     expect(form.isValid.value).toBe(false)
     expect(form.errors.value.propertyErrors.name).toHaveLength(1)
+    expect(form.errors.value.propertyErrors.email ?? []).toHaveLength(0)
   })
 
   it('should validate the form on form open if configured', async () => {