@teamnovu/kit-vue-forms 0.1.20 → 0.1.22

package/dist/types/form.d.ts

@@ -6,6 +6,21 @@ 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 FieldArray<Item> {
+    fields: Ref<{
+        id: string;
+        item: Item;
+    }[]>;
+    push: (item: Item) => void;
+    remove: (item: Item) => void;
+    removeByIndex: (index: number) => void;
+    errors: Ref<ValidationErrors>;
+    dirty: Ref<boolean>;
+}
 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.20",
+  "version": "0.1.22",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

package/src/composables/useField.ts

@@ -37,7 +37,9 @@ export function useField<T, K extends string>(fieldOptions: UseFieldOptions<T, K
     shallowRef(options.initialValue),
     () => {
       initialValue.value = Object.freeze(cloneRefValue(options.initialValue))
-      state.value = cloneRefValue(options.initialValue)
+      if (state.value !== unref(options.initialValue)) {
+        state.value = cloneRefValue(options.initialValue)
+      }
     },
     { flush: 'sync' },
   )

package/src/composables/useFieldArray.ts

@@ -0,0 +1,144 @@
+import { shallowRef, unref, watch } from 'vue'
+import type {
+  FieldArray,
+  FieldArrayOptions,
+  Form,
+  FormDataDefault,
+  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>(
+  hashStore: HashStore<string[], Item>,
+  items: Item[],
+) {
+  const mappedIds = new Set<string>()
+
+  return items.map((item) => {
+    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,
+      }
+    }
+
+    // Otherwise create a new id
+    const newId = crypto.randomUUID()
+    hashStore.set(item, storeIds.concat([newId]))
+
+    mappedIds.add(newId)
+
+    return {
+      id: newId,
+      item,
+    }
+  })
+}
+
+export function useFieldArray<T extends FormDataDefault, K extends Paths<T>>(
+  form: Form<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> {
+  type Items = PickProps<T, K>
+  type Item = Items extends (infer U)[] ? U : never
+  type Id = string
+  type Field = {
+    id: Id
+    item: Item
+  }
+
+  const hashStore = new HashStore<string[], Item>(options?.hashFn)
+
+  const arrayField = form.getField(path)
+
+  const fields = shallowRef<Field[]>([])
+
+  watch(
+    arrayField.data,
+    (newItems) => {
+      fields.value = mapIds(hashStore, newItems) as Field[]
+    },
+    {
+      immediate: true,
+      flush: 'sync',
+    },
+  )
+
+  const push = (item: Item) => {
+    const current = (arrayField.data.value ?? []) as Item[]
+    arrayField.setData([...current, item] as Items)
+  }
+
+  const remove = (value: Item) => {
+    const current = (arrayField.data.value ?? []) as Item[]
+    arrayField.setData(
+      (current?.filter(item => item !== unref(value)) ?? []) as Items,
+    )
+  }
+
+  const removeByIndex = (index: number) => {
+    const current = (arrayField.data.value ?? []) as Item[]
+    arrayField.setData((current?.filter((_, i) => i !== index) ?? []) as Items)
+  }
+
+  return {
+    fields,
+    push,
+    remove,
+    removeByIndex,
+    errors: arrayField.errors,
+    dirty: arrayField.dirty,
+  }
+}

package/src/composables/useFieldRegistry.ts

@@ -1,4 +1,4 @@
-import type { Awaitable } from "@vueuse/core";
+import type { Awaitable } from '@vueuse/core'
 import {
   computed,
   onScopeDispose,
@@ -9,47 +9,47 @@ import {
   unref,
   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";
+} 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)
@@ -57,19 +57,19 @@ function initialDataSync<T extends FormDataDefault>(
   formState: FormState<T>,
   path: Paths<T>,
 ) {
-  const getNewValue = () => getNestedValue(formState.initialData, path);
-  const initialValueRef = shallowRef(getNewValue());
+  const getNewValue = () => getNestedValue(formState.initialData, path)
+  const initialValueRef = shallowRef(getNewValue())
 
   watch(
     () => formState.initialData,
     () => {
-      initialValueRef.value = getNewValue();
-      triggerRef(initialValueRef);
+      initialValueRef.value = getNewValue()
+      triggerRef(initialValueRef)
     },
-    { flush: "sync" },
-  );
+    { flush: 'sync' },
+  )
 
-  return initialValueRef;
+  return initialValueRef
 }
 
 export function useFieldRegistry<T extends FormDataDefault>(
@@ -77,99 +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),
+        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?.(),
-          ]);
+          ])
         },
         onFocus: async () => {
           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

@@ -8,88 +8,82 @@ import {
   type MaybeRef,
   type MaybeRefOrGetter,
   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 { useFieldRegistry } from "./useFieldRegistry";
-import { useFormState } from "./useFormState";
-import { createSubformInterface, type SubformOptions } from "./useSubform";
-import { useSubmitHandler } from "./useSubmitHandler";
-import { useValidation, type ValidationOptions } from "./useValidation";
+} from 'vue'
+import type { Form, FormDataDefault } from '../types/form'
+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 } from './useSubform'
+import { useValidation, type ValidationOptions } from './useValidation'
 
 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>,
 ): Form<T> {
-  const initialData = computed(() => cloneRefValue(options.initialData));
+  const initialData = computed(() => 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 (path: string) => {
-      if (unref(options.validationStrategy) === "onTouch") {
-        validationState.validateField(path);
+      if (unref(options.validationStrategy) === 'onTouch') {
+        validationState.validateField(path)
       }
     },
-  });
-  const formState = useFormState(fieldRegistry);
+  })
+  const formState = useFormState(fieldRegistry)
 
   const reset = () => {
-    data.value = cloneRefValue(initialData);
-    validationState.reset();
+    data.value = cloneRefValue(initialData)
+    validationState.reset()
     for (const field of fieldRegistry.fields.value) {
-      field.reset();
+      field.reset()
     }
-  };
+  }
 
-  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"],
-  };
-
-  const submitHandler = useSubmitHandler(formInterface, options);
-
-  if (unref(options.validationStrategy) === "onFormOpen") {
-    validationState.validateForm();
+    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)
+    },
   }
 
-  return {
-    ...formInterface,
-    submitHandler,
-  };
+  return form
 }