@teamnovu/kit-vue-forms 0.1.16 → 0.1.18

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

@@ -8,7 +8,7 @@ export declare function existsFieldPath<T, K extends Paths<T>>(field: FormField<
 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.16",
+  "version": "0.1.18",
   "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/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 { existsPath, 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,104 +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>),
@@ -177,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

@@ -18,8 +18,7 @@ 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
+import { useSubmitHandler } from "./useSubmitHandler";
 
 export interface UseFormOptions<T extends FormDataDefault>
   extends ValidationOptions<T> {
@@ -29,9 +28,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>;
 
@@ -53,29 +50,12 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
     keepValuesOnUnmount: options.keepValuesOnUnmount,
     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 submitHandler = (onSubmit: (data: T) => Awaitable<void>) => {
-    return async (event: SubmitEvent) => {
-      event.preventDefault();
-
-      if (unref(options.validationStrategy) !== "none") {
-        await validationState.validateForm();
-      }
-
-      if (!validationState.isValid.value) {
-        return;
-      }
-
-      await onSubmit(state.data);
-    };
-  };
-
   const reset = () => {
     data.value = cloneRefValue(initialData);
     validationState.reset();
@@ -86,25 +66,29 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
 
   function getSubForm<K extends EntityPaths<T>>(
     path: K,
-    options?: SubformOptions<PickEntity<T, K>>,
-  ): Form<PickEntity<T, K>> {
-    return createSubformInterface(formInterface, path, options);
+    subformOptions?: SubformOptions<PickEntity<T, K>>,
+  ): Omit<Form<PickEntity<T, K>>, "submitHandler"> {
+    return createSubformInterface(formInterface, path, options, subformOptions);
   }
 
-  const formInterface: Form<T> = {
+  const formInterface: Omit<Form<T>, "submitHandler"> = {
     ...fieldRegistry,
     ...validationState,
     ...formState,
     reset,
     getSubForm,
-    submitHandler,
     initialData: toRef(state, "initialData") as Form<T>["initialData"],
     data: toRef(state, "data") as Form<T>["data"],
   };
 
+  const submitHandler = useSubmitHandler(formInterface, options);
+
   if (unref(options.validationStrategy) === "onFormOpen") {
     validationState.validateForm();
   }
 
-  return formInterface;
+  return {
+    ...formInterface,
+    submitHandler,
+  };
 }

package/src/composables/useSubform.ts

@@ -1,30 +1,47 @@
-import { computed, isRef, unref, type Ref } from 'vue'
-import type { FieldsTuple, Form, FormDataDefault, FormField } from '../types/form'
-import type { EntityPaths, Paths, PickEntity, PickProps } from '../types/util'
-import type { ValidationResult, Validator } from '../types/validation'
-import { filterErrorsForPath, getLens, getNestedValue, joinPath } from '../utils/path'
-import type { DefineFieldOptions } from './useFieldRegistry'
-import { createValidator, SuccessValidationResult, type ValidatorOptions } from './useValidation'
+import { computed, isRef, unref, type Ref } from "vue";
+import type {
+  FieldsTuple,
+  Form,
+  FormDataDefault,
+  FormField,
+} from "../types/form";
+import type { EntityPaths, Paths, PickEntity, PickProps } from "../types/util";
+import type { ValidationResult, Validator } from "../types/validation";
+import {
+  filterErrorsForPath,
+  getLens,
+  getNestedValue,
+  joinPath,
+} from "../utils/path";
+import type { DefineFieldOptions } from "./useFieldRegistry";
+import type { UseFormOptions } from "./useForm";
+import { useSubmitHandler } from "./useSubmitHandler";
+import {
+  createValidator,
+  SuccessValidationResult,
+  type ValidatorOptions,
+} from "./useValidation";
 
 export interface SubformOptions<_T extends FormDataDefault> {
   // Additional subform-specific options can be added here
 }
 
-class NestedValidator<T extends FormDataDefault, P extends Paths<T>> implements Validator<T> {
+class NestedValidator<T extends FormDataDefault, P extends Paths<T>>
+  implements Validator<T>
+{
   constructor(
     private path: P,
     private validator: Validator<PickEntity<T, P>> | undefined,
-  ) {
-  }
+  ) {}
 
   async validate(data: T): Promise<ValidationResult> {
-    const subFormData = getNestedValue(data, this.path) as PickEntity<T, P>
+    const subFormData = getNestedValue(data, this.path) as PickEntity<T, P>;
 
     if (!this.validator) {
-      return SuccessValidationResult
+      return SuccessValidationResult;
     }
 
-    const validationResult = await this.validator.validate(subFormData)
+    const validationResult = await this.validator.validate(subFormData);
 
     return {
       isValid: validationResult.isValid,
@@ -32,14 +49,13 @@ class NestedValidator<T extends FormDataDefault, P extends Paths<T>> implements
         general: validationResult.errors.general || [],
         propertyErrors: validationResult.errors.propertyErrors
           ? Object.fromEntries(
-              Object.entries(validationResult.errors.propertyErrors).map(([key, errors]) => [
-                joinPath(this.path, key),
-                errors,
-              ]),
+              Object.entries(validationResult.errors.propertyErrors).map(
+                ([key, errors]) => [joinPath(this.path, key), errors],
+              ),
             )
           : {},
       },
-    }
+    };
   }
 }
 
@@ -47,21 +63,22 @@ export function createSubformInterface<
   T extends FormDataDefault,
   K extends EntityPaths<T>,
 >(
-  mainForm: Form<T>,
+  mainForm: Omit<Form<T>, "submitHandler">,
   path: K,
+  formOptions?: UseFormOptions<T>,
   _options?: SubformOptions<PickEntity<T, K>>,
 ): Form<PickEntity<T, K>> {
-  type ST = PickEntity<T, K>
-  type SP = Paths<ST>
-  type MP<P extends SP> = `${K}.${P}`
-  type ScopedMainPaths = Paths<T> & MP<SP>
+  type ST = PickEntity<T, K>;
+  type SP = Paths<ST>;
+  type MP<P extends SP> = `${K}.${P}`;
+  type ScopedMainPaths = Paths<T> & MP<SP>;
 
   // Create reactive data scoped to subform path
-  const data = getLens(mainForm.data, path) as Ref<ST>
+  const data = getLens(mainForm.data, path) as Ref<ST>;
 
   const initialData = computed(() => {
-    return getNestedValue(mainForm.initialData.value, path) as ST
-  })
+    return getNestedValue(mainForm.initialData.value, path) as ST;
+  });
 
   const adaptMainFormField = <S extends SP>(
     field: FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>,
@@ -69,92 +86,111 @@ export function createSubformInterface<
     // Where P ist the full path in the main form, we need to adapt it to the subform's path
     return {
       ...field,
-      path: computed(() => unref(field.path).replace(path + '.', '')),
+      path: computed(() => unref(field.path).replace(path + ".", "")),
       setData: (newData: PickProps<ST, S>) => {
-        field.setData(newData as PickProps<T, ScopedMainPaths>)
+        field.setData(newData as PickProps<T, ScopedMainPaths>);
       },
-    } as unknown as FormField<PickProps<ST, S>, S>
-  }
+    } as unknown as FormField<PickProps<ST, S>, S>;
+  };
 
   const getField = <P extends SP>(fieldPath: P) => {
-    const fullPath = joinPath(path, fieldPath)
-    const mainFormField = mainForm.getField(fullPath as ScopedMainPaths)
+    const fullPath = joinPath(path, fieldPath);
+    const mainFormField = mainForm.getField(fullPath as ScopedMainPaths);
 
     if (!mainFormField) {
-      return {} as FormField<PickProps<ST, P>, P>
+      return {} as FormField<PickProps<ST, P>, P>;
     }
 
-    return adaptMainFormField<P>(mainFormField)
-  }
+    return adaptMainFormField<P>(mainFormField);
+  };
 
   // Field operations with path transformation
-  const defineField = <P extends SP>(fieldOptions: DefineFieldOptions<ST, P>) => {
-    const fullPath = joinPath(path, fieldOptions.path)
+  const defineField = <P extends SP>(
+    fieldOptions: DefineFieldOptions<ST, P>,
+  ) => {
+    const fullPath = joinPath(path, fieldOptions.path);
 
     const mainField = mainForm.defineField({
       ...fieldOptions,
       path: fullPath as ScopedMainPaths,
-    })
+    });
 
-    return adaptMainFormField<P>(mainField)
-  }
+    return adaptMainFormField<P>(mainField);
+  };
 
   const fields = computed(<P extends SP>() => {
-    return (mainForm.fields.value as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
+    return (
+      mainForm.fields.value as FormField<
+        PickProps<T, ScopedMainPaths>,
+        ScopedMainPaths
+      >[]
+    )
       .filter((field) => {
-        const fieldPath = field.path.value
-        return fieldPath.startsWith(path + '.') || fieldPath === path
+        const fieldPath = field.path.value;
+        return fieldPath.startsWith(path + ".") || fieldPath === path;
       })
-      .map(field => adaptMainFormField(field)) as FieldsTuple<ST, P>
-  })
+      .map((field) => adaptMainFormField(field)) as FieldsTuple<ST, P>;
+  });
 
   // Helper function to get all fields without type parameter
   const getAllSubformFields = () => {
-    return (mainForm.fields.value as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
-      .filter((field) => {
-        const fieldPath = field.path.value
-        return fieldPath.startsWith(path + '.') || fieldPath === path
-      })
-  }
+    return (
+      mainForm.fields.value as FormField<
+        PickProps<T, ScopedMainPaths>,
+        ScopedMainPaths
+      >[]
+    ).filter((field) => {
+      const fieldPath = field.path.value;
+      return fieldPath.startsWith(path + ".") || fieldPath === path;
+    });
+  };
 
   // State computed from main form with path filtering
-  const isDirty = computed(() => getAllSubformFields().some(field => field.dirty.value))
-  const isTouched = computed(() => getAllSubformFields().some(field => field.touched.value))
+  const isDirty = computed(() =>
+    getAllSubformFields().some((field) => field.dirty.value),
+  );
+  const isTouched = computed(() =>
+    getAllSubformFields().some((field) => field.touched.value),
+  );
 
   // Validation delegates to main form
-  const isValid = computed(() => mainForm.isValid.value)
-  const isValidated = computed(() => mainForm.isValidated.value)
-  const errors = computed(() => filterErrorsForPath(unref(mainForm.errors), path))
+  const isValid = computed(() => mainForm.isValid.value);
+  const isValidated = computed(() => mainForm.isValidated.value);
+  const errors = computed(() =>
+    filterErrorsForPath(unref(mainForm.errors), path),
+  );
 
-  const validateForm = () => mainForm.validateForm()
+  const validateForm = () => mainForm.validateForm();
 
   // Nested subforms
   const getSubForm = <P extends EntityPaths<ST>>(
     subPath: P,
     subOptions?: SubformOptions<PickEntity<ST, P>>,
   ) => {
-    const fullPath = joinPath(path, subPath) as EntityPaths<T>
+    const fullPath = joinPath(path, subPath) as EntityPaths<T>;
     return mainForm.getSubForm(
       fullPath,
       subOptions as SubformOptions<PickEntity<T, typeof fullPath>>,
-    ) as Form<PickEntity<ST, P>>
-  }
+    ) as Form<PickEntity<ST, P>>;
+  };
 
   // Reset scoped to this subform
-  const reset = () => getAllSubformFields().forEach(field => field.reset())
+  const reset = () => getAllSubformFields().forEach((field) => field.reset());
 
-  const defineValidator = (options: ValidatorOptions<ST> | Ref<Validator<ST>>) => {
-    const subValidator = isRef(options) ? options : createValidator(options)
+  const defineValidator = (
+    options: ValidatorOptions<ST> | Ref<Validator<ST>>,
+  ) => {
+    const subValidator = isRef(options) ? options : createValidator(options);
     const validator = computed(
       () => new NestedValidator<T, K>(path, unref(subValidator)),
-    )
+    );
 
-    mainForm.defineValidator(validator)
+    mainForm.defineValidator(validator);
 
-    return subValidator
-  }
+    return subValidator;
+  };
 
-  return {
+  const subFormInterface: Omit<Form<ST>, "submitHandler"> = {
     data: data,
     fields,
     initialData,
@@ -169,5 +205,12 @@ export function createSubformInterface<
     reset,
     validateForm,
     getSubForm,
-  }
+  };
+
+  const submitHandler = useSubmitHandler(subFormInterface, formOptions ?? {});
+
+  return {
+    ...subFormInterface,
+    submitHandler,
+  };
 }