@teamnovu/kit-vue-forms 0.1.15 → 0.1.16

package/dist/utils/path.d.ts

@@ -1,11 +1,14 @@
 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>>;
-type JoinPath<Base extends string, Sub extends string> = `${Base}${Base extends '' ? '' : Sub extends '' ? '' : '.'}${Sub}`;
+type JoinPath<Base extends string, Sub extends string> = `${Base}${Base extends "" ? "" : Sub extends "" ? "" : "."}${Sub}`;
 export declare function joinPath<Base extends string, Sub extends string>(basePath: Base, subPath: Sub): JoinPath<Base, Sub>;
 export declare function filterErrorsForPath(errors: ErrorBag, path: string): ErrorBag;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

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

@@ -11,7 +11,7 @@ import {
 } from 'vue'
 import type { FieldsTuple, FormDataDefault, FormField } from '../types/form'
 import type { Paths, PickProps } from '../types/util'
-import { getLens, getNestedValue } from '../utils/path'
+import { existsPath, getLens, getNestedValue } from '../utils/path'
 import { Rc } from '../utils/rc'
 import { useField, type UseFieldOptions } from './useField'
 import type { ValidationState } from './useValidation'
@@ -118,6 +118,7 @@ export function useFieldRegistry<T extends FormDataDefault>(
         value: getLens(toRef(formState, 'data'), path),
         initialValue: alwaysComputed(() =>
           getNestedValue(formState.initialData, path)),
+        existsInForm: computed(() => existsPath(formState.data, unref(path))),
         errors: computed({
           get() {
             return validationState.errors.value.propertyErrors[path] || []

package/src/composables/useForm.ts

@@ -1,4 +1,4 @@
-import type { Awaitable } from '@vueuse/core'
+import type { Awaitable } from "@vueuse/core";
 import {
   computed,
   reactive,
@@ -9,82 +9,86 @@ import {
   type MaybeRef,
   type MaybeRefOrGetter,
   type Ref,
-} from 'vue'
-import type { AnyField, Form, FormDataDefault } from '../types/form'
-import type { EntityPaths, PickEntity } from '../types/util'
-import type { ValidationStrategy } from '../types/validation'
-import { cloneRefValue } from '../utils/general'
-import { useFieldRegistry } from './useFieldRegistry'
-import { useFormState } from './useFormState'
-import { createSubformInterface, type SubformOptions } from './useSubform'
-import { useValidation, type ValidationOptions } from './useValidation'
+} from "vue";
+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";
+import { useFieldRegistry } from "./useFieldRegistry";
+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>
-  validationStrategy?: MaybeRef<ValidationStrategy>
-  keepValuesOnUnmount?: MaybeRef<boolean>
+  initialData: MaybeRefOrGetter<T>;
+  validationStrategy?: MaybeRef<ValidationStrategy>;
+  keepValuesOnUnmount?: MaybeRef<boolean>;
 }
 
 export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
   const initialData = computed(() =>
-    Object.freeze(cloneRefValue(options.initialData)))
+    Object.freeze(cloneRefValue(options.initialData)),
+  );
 
-  const data = ref<T>(cloneRefValue(initialData)) as Ref<T>
+  const data = ref<T>(cloneRefValue(initialData)) as Ref<T>;
 
   const state = reactive({
     initialData,
     data,
-  })
+  });
 
   watch(
     initialData,
     (newValue) => {
-      state.data = cloneRefValue(newValue)
+      state.data = cloneRefValue(newValue);
     },
-    { flush: 'sync' },
-  )
+    { flush: "sync" },
+  );
 
-  const validationState = useValidation(state, options)
+  const validationState = useValidation(state, options);
   const fieldRegistry = useFieldRegistry(state, validationState, {
     keepValuesOnUnmount: options.keepValuesOnUnmount,
-    onBlur: async () => {
-      if (unref(options.validationStrategy) === 'onTouch') {
-        validationState.validateForm()
+    onBlur: async (path: string) => {
+      if (unref(options.validationStrategy) === "onTouch") {
+        // TODO: Only validate the specific field that was touched
+        validationState.validateField(path);
       }
     },
-  })
-  const formState = useFormState(fieldRegistry)
+  });
+  const formState = useFormState(fieldRegistry);
 
   const submitHandler = (onSubmit: (data: T) => Awaitable<void>) => {
     return async (event: SubmitEvent) => {
-      event.preventDefault()
+      event.preventDefault();
 
-      if (unref(options.validationStrategy) !== 'none') {
-        await validationState.validateForm()
+      if (unref(options.validationStrategy) !== "none") {
+        await validationState.validateForm();
       }
 
       if (!validationState.isValid.value) {
-        return
+        return;
       }
 
-      await onSubmit(state.data)
-    }
-  }
+      await onSubmit(state.data);
+    };
+  };
 
   const reset = () => {
-    data.value = cloneRefValue(initialData)
-    validationState.reset()
-    fieldRegistry.fields.value.forEach((field: AnyField<T>) => field.reset())
-  }
+    data.value = cloneRefValue(initialData);
+    validationState.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>> {
-    return createSubformInterface(formInterface, path, options)
+    return createSubformInterface(formInterface, path, options);
   }
 
   const formInterface: Form<T> = {
@@ -94,13 +98,13 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
     reset,
     getSubForm,
     submitHandler,
-    initialData: toRef(state, 'initialData') as Form<T>['initialData'],
-    data: toRef(state, 'data') as Form<T>['data'],
-  }
+    initialData: toRef(state, "initialData") as Form<T>["initialData"],
+    data: toRef(state, "data") as Form<T>["data"],
+  };
 
-  if (unref(options.validationStrategy) === 'onFormOpen') {
-    validationState.validateForm()
+  if (unref(options.validationStrategy) === "onFormOpen") {
+    validationState.validateForm();
   }
 
-  return formInterface
+  return formInterface;
 }

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/utils/path.ts

@@ -1,100 +1,129 @@
-import { computed, isRef, unref, type MaybeRef } from 'vue'
-import type { Paths, PickProps, SplitPath } from '../types/util'
-import type { ErrorBag, ValidationErrors } from '../types/validation'
+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 === '') {
-    return []
+  if (path === "") {
+    return [];
   }
-  return path.split(/\s*\.\s*/).filter(Boolean)
+  return path.split(/\s*\.\s*/).filter(Boolean);
 }
 
-export function getNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>) {
-  const splittedPath = Array.isArray(path) ? path : splitPath(path)
+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],
     obj as Record<string, never>,
-  ) as PickProps<T, K>
+  ) as PickProps<T, K>;
 }
 
-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)
+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)!
+  const lastKey = keys.at(-1)!;
 
   if (!lastKey) {
     if (!isRef(obj)) {
       // We cannot do anything here as we have nothing we can assign to
-      return
+      return;
     }
 
-    obj.value = value
+    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>,
-      )
-
-    target[lastKey] = value
+    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))
+      return getNestedValue(unref(data), unref(key));
     },
     set(value: PickProps<T, K>) {
-      setNestedValue(data, unref(key), value)
+      setNestedValue(data, unref(key), value);
     },
-  })
-}
+  });
+};
 
-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>
+    return "" as JoinPath<Base, Sub>;
   }
 
   if (!basePath && subPath) {
-    return subPath as JoinPath<Base, Sub>
+    return subPath as JoinPath<Base, Sub>;
   }
 
   if (!subPath && basePath) {
-    return basePath as JoinPath<Base, Sub>
+    return basePath as JoinPath<Base, Sub>;
   }
 
-  return `${basePath}.${subPath}` as JoinPath<Base, Sub>
+  return `${basePath}.${subPath}` as JoinPath<Base, Sub>;
 }
 
 export function filterErrorsForPath(errors: ErrorBag, path: string): ErrorBag {
   // Handle empty path - return all errors
   if (!path) {
-    return errors
+    return errors;
   }
 
-  const pathPrefix = `${path}.`
-  const filteredPropertyErrors: Record<string, ValidationErrors> = Object.fromEntries(
-    Object.entries(errors.propertyErrors)
-      .filter(([errorPath]) => {
-        return errorPath.startsWith(pathPrefix)
-      })
-      .map(
-        ([errorPath, errorMessages]) => [errorPath.slice(pathPrefix.length), errorMessages],
-      ),
-  )
+  const pathPrefix = `${path}.`;
+  const filteredPropertyErrors: Record<string, ValidationErrors> =
+    Object.fromEntries(
+      Object.entries(errors.propertyErrors)
+        .filter(([errorPath]) => {
+          return errorPath.startsWith(pathPrefix);
+        })
+        .map(([errorPath, errorMessages]) => [
+          errorPath.slice(pathPrefix.length),
+          errorMessages,
+        ]),
+    );
 
   return {
     general: errors.general, // Keep general errors
     propertyErrors: filteredPropertyErrors,
-  }
+  };
 }

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