@teamnovu/kit-vue-forms 0.1.21 → 0.1.23

package/dist/types/form.d.ts

@@ -1,11 +1,26 @@
 import { Awaitable } from '@vueuse/core';
-import { Ref } from 'vue';
+import { Ref, ShallowRef } from 'vue';
 import { DefineFieldOptions } from '../composables/useFieldRegistry';
 import { SubformOptions } from '../composables/useSubform';
 import { ValidatorOptions } from '../composables/useValidation';
 import { EntityPaths, Paths, PickEntity, PickProps } from './util';
 import { ErrorBag, ValidationErrorMessage, ValidationErrors, ValidationResult, Validator } from './validation';
 export type FormDataDefault = object;
+export type HashFn<H, I> = (item: I) => H;
+export interface FieldArrayOptions<Item> {
+    hashFn?: HashFn<unknown, Item>;
+}
+export interface FieldItem<Item, Path extends string> {
+    id: string;
+    item: Item;
+    path: `${Path}.${number}`;
+}
+export interface FieldArray<Item, Path extends string> {
+    items: ShallowRef<FieldItem<Item, Path>[]>;
+    push: (item: Item) => FieldItem<Item, Path>;
+    remove: (id: string) => void;
+    field: FormField<Item[], Path>;
+}
 export interface FormField<T, P extends string> {
     data: Ref<T>;
     path: Ref<P>;
@@ -45,4 +60,5 @@ export interface Form<T extends FormDataDefault> {
     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>>;
+    useFieldArray: <K extends Paths<T>>(path: PickProps<T, K> extends unknown[] ? K : never, options?: FieldArrayOptions<PickProps<T, K> extends (infer U)[] ? U : never>) => FieldArray<PickProps<T, K> extends (infer U)[] ? U : never>;
 }

package/dist/{composables/useSubmitHandler.d.ts → utils/submitHandler.d.ts}

@@ -4,5 +4,5 @@ import { ValidationStrategy } from '../types/validation';
 interface SubmitHandlerOptions {
     validationStrategy?: MaybeRef<ValidationStrategy>;
 }
-export declare function useSubmitHandler<T extends FormDataDefault>(form: Omit<Form<T>, 'submitHandler'>, options: SubmitHandlerOptions): (onSubmit: (data: T) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>;
+export declare function makeSubmitHandler<T extends FormDataDefault>(form: Form<T>, options: SubmitHandlerOptions): (onSubmit: (data: T) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>;
 export {};

package/package.json

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

package/src/composables/useFieldArray.ts

@@ -1,15 +1,158 @@
-import type { Form, FormDataDefault, FormField } from "../types/form";
-import type { Paths, PickProps } from "../types/util";
+import { shallowRef, watch } from 'vue'
+import type {
+  FieldArray,
+  FieldArrayOptions,
+  FieldItem,
+  Form,
+  FormDataDefault,
+  FormField,
+  HashFn,
+} from '../types/form'
+import type { Paths, PickProps } from '../types/util'
+
+export class HashStore<T, Item = unknown> {
+  private weakMap = new WeakMap<WeakKey, T>()
+  private map = new Map<unknown, T>()
+  private hashFn: HashFn<unknown, Item>
+
+  constructor(hashFn: HashFn<unknown, Item> = item => item) {
+    this.hashFn = hashFn
+  }
+
+  private isReferenceType(value: unknown): value is WeakKey {
+    return typeof value === 'object' && value !== null
+  }
+
+  has(item: Item) {
+    const hash = this.hashFn(item)
+    if (this.isReferenceType(hash)) {
+      return this.weakMap.has(hash)
+    } else {
+      return this.map.has(hash)
+    }
+  }
+
+  get(item: Item) {
+    const hash = this.hashFn(item)
+    if (this.isReferenceType(hash)) {
+      return this.weakMap.get(hash)
+    } else {
+      return this.map.get(hash)
+    }
+  }
+
+  set(item: Item, value: T) {
+    const hash = this.hashFn(item)
+    if (this.isReferenceType(hash)) {
+      this.weakMap.set(hash, value)
+    } else {
+      this.map.set(hash, value)
+    }
+  }
+}
+
+function mapIds<Item, Path extends string>(
+  hashStore: HashStore<string[],
+    Item>,
+  items: Item[],
+  basePath: Path,
+): FieldItem<Item, Path>[] {
+  const mappedIds = new Set<string>()
+
+  return items.map((item, i) => {
+    const storeIds = [...(hashStore.get(item) ?? [])]
+
+    // Remove all used ids
+    const firstNotUsedId = storeIds.findIndex(id => !mappedIds.has(id))
+    const ids = firstNotUsedId === -1 ? [] : storeIds.slice(firstNotUsedId)
+
+    const matchingId = ids[0]
+
+    // If we have an id that is not used yet, use it
+    if (matchingId) {
+      mappedIds.add(matchingId)
+      return {
+        id: matchingId,
+        item,
+        path: `${basePath}.${i}`,
+      }
+    }
+
+    // Otherwise create a new id
+    const newId = crypto.randomUUID()
+    hashStore.set(item, storeIds.concat([newId]))
+
+    mappedIds.add(newId)
+
+    return {
+      id: newId,
+      item,
+      path: `${basePath}.${i}`,
+    }
+  })
+}
 
 export function useFieldArray<T extends FormDataDefault, K extends Paths<T>>(
   form: Form<T>,
   path: PickProps<T, K> extends unknown[] ? K : never,
-) {
-  type Items = PickProps<T, K> & unknown[];
-  type Item = Items[number];
-  const arrayField = form.getField(path) as FormField<Items, K>;
+  options?: FieldArrayOptions<PickProps<T, K> extends (infer U)[] ? U : never>,
+): FieldArray<PickProps<T, K> extends (infer U)[] ? U : never, typeof path> {
+  type Items = PickProps<T, K>
+  type Item = Items extends (infer U)[] ? U : never
+  type Id = string
+  type Path = typeof path
+  type Field = {
+    id: Id
+    item: Item
+    path: `${Path}.${number}`
+  }
+
+  const hashStore = new HashStore<string[], Item>(options?.hashFn)
+
+  // We only cast to unknown because we know that the constriant holds true
+  const arrayField = form.getField(path) as unknown as FormField<Item[], Path>
+
+  const items = shallowRef<Field[]>([])
+
+  watch(
+    arrayField.data,
+    (newItems) => {
+      items.value = mapIds(hashStore, newItems, path) as Field[]
+    },
+    {
+      immediate: true,
+      flush: 'sync',
+    },
+  )
 
   const push = (item: Item) => {
-    arrayField.setData([...arrayField.data.value, item] as Items);
-  };
+    const current = (arrayField.data.value ?? []) as Item[]
+    arrayField.setData([...current, item] as Items)
+
+    return items.value.at(-1)!
+  }
+
+  const remove = (id: Id) => {
+    const currentData = (arrayField.data.value ?? []) as Item[]
+    const currentItem = items.value.findIndex(
+      ({ id: itemId }) => itemId === id,
+    )
+
+    if (currentItem === -1) {
+      return
+    }
+
+    arrayField.setData(
+      currentData
+        .slice(0, currentItem)
+        .concat(currentData.slice(currentItem + 1)) as Items,
+    )
+  }
+
+  return {
+    items,
+    push,
+    remove,
+    field: arrayField,
+  }
 }

package/src/composables/useForm.ts

@@ -10,13 +10,13 @@ import {
   type Ref,
 } 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 { makeSubmitHandler } from '../utils/submitHandler'
+import { useFieldArray } from './useFieldArray'
 import { useFieldRegistry } from './useFieldRegistry'
 import { useFormState } from './useFormState'
-import { createSubformInterface, type SubformOptions } from './useSubform'
-import { useSubmitHandler } from './useSubmitHandler'
+import { createSubformInterface } from './useSubform'
 import { useValidation, type ValidationOptions } from './useValidation'
 
 export interface UseFormOptions<T extends FormDataDefault>
@@ -65,31 +65,25 @@ export function useForm<T extends FormDataDefault>(
     }
   }
 
-  function getSubForm<K extends EntityPaths<T>>(
-    path: K,
-    subformOptions?: SubformOptions<PickEntity<T, K>>,
-  ): Form<PickEntity<T, K>> {
-    return createSubformInterface(formInterface, path, options, subformOptions)
+  if (unref(options.validationStrategy) === 'onFormOpen') {
+    validationState.validateForm()
   }
 
-  const formInterface: Omit<Form<T>, 'submitHandler'> = {
+  const form: Form<T> = {
     ...fieldRegistry,
     ...validationState,
     ...formState,
     reset,
-    getSubForm,
     initialData: toRef(state, 'initialData') as Form<T>['initialData'],
     data: toRef(state, 'data') as Form<T>['data'],
+    submitHandler: onSubmit => makeSubmitHandler(form, options)(onSubmit),
+    getSubForm: (path, subformOptions) => {
+      return createSubformInterface(form, path, options, subformOptions)
+    },
+    useFieldArray: (path, fieldArrayOptions) => {
+      return useFieldArray(form, path, fieldArrayOptions)
+    },
   }
 
-  const submitHandler = useSubmitHandler(formInterface, options)
-
-  if (unref(options.validationStrategy) === 'onFormOpen') {
-    validationState.validateForm()
-  }
-
-  return {
-    ...formInterface,
-    submitHandler,
-  }
+  return form
 }

package/src/composables/useSubform.ts

@@ -1,47 +1,47 @@
-import { computed, isRef, unref, type Ref } from "vue";
+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";
+} 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";
+} from '../utils/path'
+import { makeSubmitHandler } from '../utils/submitHandler'
+import { useFieldArray } from './useFieldArray'
+import type { DefineFieldOptions } from './useFieldRegistry'
+import type { UseFormOptions } from './useForm'
 import {
   createValidator,
   SuccessValidationResult,
   type ValidatorOptions,
-} from "./useValidation";
+} 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>
-{
+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,
@@ -55,7 +55,7 @@ class NestedValidator<T extends FormDataDefault, P extends Paths<T>>
             )
           : {},
       },
-    };
+    }
   }
 }
 
@@ -63,22 +63,22 @@ export function createSubformInterface<
   T extends FormDataDefault,
   K extends EntityPaths<T>,
 >(
-  mainForm: Omit<Form<T>, "submitHandler">,
+  mainForm: Form<T>,
   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>,
@@ -86,37 +86,37 @@ 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 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 (
@@ -126,11 +126,11 @@ export function createSubformInterface<
       >[]
     )
       .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 = () => {
@@ -140,57 +140,54 @@ export function createSubformInterface<
         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
+    })
+  }
 
   // State computed from main form with path filtering
   const isDirty = computed(() =>
-    getAllSubformFields().some((field) => field.dirty.value),
-  );
+    getAllSubformFields().some(field => field.dirty.value))
   const isTouched = computed(() =>
-    getAllSubformFields().some((field) => field.touched.value),
-  );
+    getAllSubformFields().some(field => field.touched.value))
 
   // Validation delegates to main form
-  const isValid = computed(() => mainForm.isValid.value);
-  const isValidated = computed(() => mainForm.isValidated.value);
+  const isValid = computed(() => mainForm.isValid.value)
+  const isValidated = computed(() => mainForm.isValidated.value)
   const errors = computed(() =>
-    filterErrorsForPath(unref(mainForm.errors), path),
-  );
+    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 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
+  }
 
-  const subFormInterface: Omit<Form<ST>, "submitHandler"> = {
+  const subForm: Form<ST> = {
     data: data,
     fields,
     initialData,
@@ -205,12 +202,11 @@ export function createSubformInterface<
     reset,
     validateForm,
     getSubForm,
-  };
-
-  const submitHandler = useSubmitHandler(subFormInterface, formOptions ?? {});
+    submitHandler: onSubmit => makeSubmitHandler(subForm, formOptions ?? {})(onSubmit),
+    useFieldArray: (fieldArrayPath, fieldArrayOptions) => {
+      return useFieldArray(subForm, fieldArrayPath, fieldArrayOptions)
+    },
+  }
 
-  return {
-    ...subFormInterface,
-    submitHandler,
-  };
+  return subForm
 }

package/src/types/form.ts

@@ -1,5 +1,5 @@
 import type { Awaitable } from '@vueuse/core'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 import type { DefineFieldOptions } from '../composables/useFieldRegistry'
 import type { SubformOptions } from '../composables/useSubform'
 import type { ValidatorOptions } from '../composables/useValidation'
@@ -14,6 +14,25 @@ import type {
 
 export type FormDataDefault = object
 
+export type HashFn<H, I> = (item: I) => H
+
+export interface FieldArrayOptions<Item> {
+  hashFn?: HashFn<unknown, Item>
+}
+
+export interface FieldItem<Item, Path extends string> {
+  id: string
+  item: Item
+  path: `${Path}.${number}`
+}
+
+export interface FieldArray<Item, Path extends string> {
+  items: ShallowRef<FieldItem<Item, Path>[]>
+  push: (item: Item) => FieldItem<Item, Path>
+  remove: (id: string) => void
+  field: FormField<Item[], Path>
+}
+
 export interface FormField<T, P extends string> {
   data: Ref<T>
   path: Ref<P>
@@ -81,4 +100,12 @@ export interface Form<T extends FormDataDefault> {
     path: P,
     options?: SubformOptions<PickEntity<T, P>>,
   ) => Form<PickEntity<T, P>>
+
+  // Field arrays
+  useFieldArray: <K extends Paths<T>>(
+    path: PickProps<T, K> extends unknown[] ? K : never,
+    options?: FieldArrayOptions<
+      PickProps<T, K> extends (infer U)[] ? U : never
+    >,
+  ) => FieldArray<PickProps<T, K> extends (infer U)[] ? U : never>
 }

package/src/{composables/useSubmitHandler.ts → utils/submitHandler.ts}

@@ -7,8 +7,8 @@ interface SubmitHandlerOptions {
   validationStrategy?: MaybeRef<ValidationStrategy>
 }
 
-export function useSubmitHandler<T extends FormDataDefault>(
-  form: Omit<Form<T>, 'submitHandler'>,
+export function makeSubmitHandler<T extends FormDataDefault>(
+  form: Form<T>,
   options: SubmitHandlerOptions,
 ) {
   return (onSubmit: (data: T) => Awaitable<void>) => {