@teamnovu/kit-vue-forms 0.1.19 → 0.1.21

package/dist/composables/useFieldArray.d.ts

@@ -0,0 +1,3 @@
+import { Form, FormDataDefault } from '../types/form';
+import { Paths, PickProps } from '../types/util';
+export declare function useFieldArray<T extends FormDataDefault, K extends Paths<T>>(form: Form<T>, path: PickProps<T, K> extends unknown[] ? K : never): void;

package/dist/composables/useFieldRegistry.d.ts

@@ -5,7 +5,7 @@ import { Paths, PickProps } from '../types/util';
 import { UseFieldOptions } from './useField';
 import { ValidationState } from './useValidation';
 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"> & {
+export type DefineFieldOptions<F, K extends string> = Pick<UseFieldOptions<F, K>, 'path'> & {
     onBlur?: () => void;
     onFocus?: () => void;
 };

package/dist/composables/useForm.d.ts

@@ -1,31 +1,10 @@
-import { Awaitable } from '@vueuse/core';
-import { MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
-import { Form, FormDataDefault, FieldsTuple } from '../types/form';
-import { EntityPaths, PickEntity } from '../types/util';
+import { MaybeRef, MaybeRefOrGetter } from 'vue';
+import { Form, FormDataDefault } from '../types/form';
 import { ValidationStrategy } from '../types/validation';
-import { SubformOptions } from './useSubform';
-import { ValidationOptions, ValidatorOptions } from './useValidation';
-import { ErrorBag, Paths, PickProps, FormField, Validator, ValidationResult } from '..';
-import { DefineFieldOptions } from './useFieldRegistry';
+import { ValidationOptions } from './useValidation';
 export interface UseFormOptions<T extends FormDataDefault> extends ValidationOptions<T> {
     initialData: MaybeRefOrGetter<T>;
     validationStrategy?: MaybeRef<ValidationStrategy>;
     keepValuesOnUnmount?: MaybeRef<boolean>;
 }
-export declare function useForm<T extends FormDataDefault>(options: UseFormOptions<T>): {
-    submitHandler: (onSubmit: (data: T) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>;
-    errors: Ref< ErrorBag>;
-    data: Ref<T, T>;
-    isValid: Ref<boolean>;
-    isValidated: Ref<boolean>;
-    initialData: Readonly<Ref<T, T>>;
-    fields: Ref< FieldsTuple<T, Paths<T>>, FieldsTuple<T, Paths<T>>>;
-    defineField: <P extends Paths<T>>(options: DefineFieldOptions<PickProps<T, P>, P>) => FormField<PickProps<T, P>, P>;
-    getField: <P extends Paths<T>>(path: P) => FormField<PickProps<T, P>, P>;
-    isDirty: Ref<boolean>;
-    isTouched: Ref<boolean>;
-    defineValidator: <TData extends T>(options: ValidatorOptions<TData> | Ref< Validator<TData>, Validator<TData>>) => Ref< Validator<TData> | undefined, Validator<TData> | undefined>;
-    reset: () => void;
-    validateForm: () => Promise< ValidationResult>;
-    getSubForm: <P extends EntityPaths<T>>(path: P, options?: SubformOptions<PickEntity<T, P>> | undefined) => Form<PickEntity<T, P>>;
-};
+export declare function useForm<T extends FormDataDefault>(options: UseFormOptions<T>): Form<T>;

package/dist/index.js

@@ -1,7 +1,7 @@
 var Q = Object.defineProperty;
 var X = (t, e, r) => e in t ? Q(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var S = (t, e, r) => X(t, typeof e != "symbol" ? e + "" : e, r);
-import { toValue as Y, toRaw as ee, computed as v, unref as d, isRef as k, shallowRef as j, reactive as _, watch as P, toRefs as T, shallowReactive as re, toRef as I, onScopeDispose as te, triggerRef as ae, ref as J, getCurrentScope as se, onBeforeUnmount as ne, defineComponent as x, renderSlot as $, normalizeProps as M, guardReactiveProps as N, resolveComponent as ie, createBlock as H, openBlock as K, withCtx as B, resolveDynamicComponent as oe, mergeProps as le, createSlots as ce, renderList as ue } from "vue";
+import { toValue as Y, toRaw as ee, computed as v, unref as u, isRef as k, shallowRef as j, reactive as _, watch as P, toRefs as T, shallowReactive as re, toRef as I, onScopeDispose as te, triggerRef as ae, ref as J, getCurrentScope as se, onBeforeUnmount as ne, defineComponent as x, renderSlot as $, normalizeProps as M, guardReactiveProps as N, resolveComponent as ie, createBlock as H, openBlock as K, withCtx as B, resolveDynamicComponent as oe, mergeProps as le, createSlots as ue, renderList as ce } from "vue";
 import { cloneDeep as de } from "lodash-es";
 import "zod";
 function g(t) {
@@ -27,7 +27,7 @@ function he(t, e, r) {
     const n = a.slice(0, -1).reduce(
       (f, p) => ((f == null ? void 0 : f[p]) === void 0 && (f[p] = {}), f == null ? void 0 : f[p]),
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      d(t)
+      u(t)
     );
     n[s] = r;
   } else {
@@ -38,10 +38,10 @@ function he(t, e, r) {
 }
 const L = (t, e) => v({
   get() {
-    return D(d(t), d(e));
+    return D(u(t), u(e));
   },
   set(r) {
-    he(t, d(e), r);
+    he(t, u(e), r);
   }
 });
 function b(t, e) {
@@ -90,7 +90,7 @@ function pe(t) {
   P(
     j(r.initialValue),
     () => {
-      a.value = Object.freeze(g(r.initialValue)), s.value = g(r.initialValue);
+      a.value = Object.freeze(g(r.initialValue)), s.value !== u(r.initialValue) && (s.value = g(r.initialValue));
     },
     { flush: "sync" }
   );
@@ -104,7 +104,7 @@ function pe(t) {
     (h = r.onFocus) == null || h.call(r);
   }, V = () => {
     const h = s.path.split(".").at(-1) || "";
-    d(r.existsInForm) && !/^\d+$/.test(h) && (s.value = g(s.initialValue)), s.touched = !1, s.errors = [];
+    u(r.existsInForm) && !/^\d+$/.test(h) && (s.value = g(s.initialValue)), s.touched = !1, s.errors = [];
   }, l = (h) => {
     n.value || f(g(h)), s.initialValue = h;
   }, c = (h) => {
@@ -146,7 +146,7 @@ function ye(t, e, r) {
     ...Ve,
     ...r
   }, f = (o) => {
-    const i = d(o.path);
+    const i = u(o.path);
     s.set(i, o);
   }, p = (o) => {
     var i;
@@ -164,7 +164,7 @@ function ye(t, e, r) {
         path: i,
         value: L(I(t, "data"), i),
         initialValue: Fe(t, i),
-        existsInForm: v(() => fe(t.data, d(i))),
+        existsInForm: v(() => fe(t.data, u(i))),
         errors: v({
           get() {
             return e.errors.value.propertyErrors[i] || [];
@@ -176,14 +176,14 @@ function ye(t, e, r) {
         onBlur: async () => {
           var E, R;
           await Promise.all([
-            (E = n == null ? void 0 : n.onBlur) == null ? void 0 : E.call(n, d(i)),
+            (E = n == null ? void 0 : n.onBlur) == null ? void 0 : E.call(n, u(i)),
             (R = o.onBlur) == null ? void 0 : R.call(o)
           ]);
         },
         onFocus: async () => {
           var E, R;
           await Promise.all([
-            (E = n == null ? void 0 : n.onFocus) == null ? void 0 : E.call(n, d(i)),
+            (E = n == null ? void 0 : n.onFocus) == null ? void 0 : E.call(n, u(i)),
             (R = o.onFocus) == null ? void 0 : R.call(o)
           ]);
         }
@@ -204,7 +204,7 @@ function ye(t, e, r) {
   };
 }
 function ge(t) {
-  const e = v(() => t.fields.value.some((a) => d(a.dirty))), r = v(() => t.fields.value.some((a) => d(a.touched)));
+  const e = v(() => t.fields.value.some((a) => u(a.dirty))), r = v(() => t.fields.value.some((a) => u(a.touched)));
   return {
     isDirty: e,
     isTouched: r
@@ -212,7 +212,7 @@ function ge(t) {
 }
 function G(t, e) {
   return (r) => async (a) => {
-    a.preventDefault(), d(e.validationStrategy) !== "none" && await t.validateForm(), t.isValid.value && await r(t.data.value);
+    a.preventDefault(), u(e.validationStrategy) !== "none" && await t.validateForm(), t.isValid.value && await r(t.data.value);
   };
 }
 function Ee(t) {
@@ -342,19 +342,19 @@ class Se {
 }
 function U(t) {
   return v(() => new Se(
-    d(t.schema),
-    d(t.validateFn)
+    u(t.schema),
+    u(t.validateFn)
   ));
 }
 function be(t, e) {
   const r = _({
     validators: J([U(e)]),
     isValidated: !1,
-    errors: d(e.errors) ?? y.errors
+    errors: u(e.errors) ?? y.errors
   }), a = (l = y.errors) => {
-    r.errors = C(d(e.errors) ?? y.errors, l);
+    r.errors = C(u(e.errors) ?? y.errors, l);
   };
-  P(() => d(e.errors), async () => {
+  P(() => u(e.errors), async () => {
     if (r.isValidated) {
       const l = await n();
       a(l.errors);
@@ -371,7 +371,7 @@ function be(t, e) {
           r.errors = y.errors;
     },
     { immediate: !0 }
-  ), P([() => t.data, () => d(e.schema)], () => {
+  ), P([() => t.data, () => u(e.schema)], () => {
     r.isValidated && f();
   });
   const s = (l) => {
@@ -384,7 +384,7 @@ function be(t, e) {
   };
   async function n() {
     const l = await Promise.all(
-      r.validators.filter((i) => d(i) !== void 0).map((i) => d(i).validate(t.data))
+      r.validators.filter((i) => u(i) !== void 0).map((i) => u(i).validate(t.data))
     ), c = l.every((i) => i.isValid);
     let { errors: o } = y;
     if (!c) {
@@ -414,7 +414,7 @@ function be(t, e) {
       errors: r.errors
     };
   }, F = v(() => !O(r.errors)), V = () => {
-    r.isValidated = !1, r.errors = d(e.errors) ?? y.errors;
+    r.isValidated = !1, r.errors = u(e.errors) ?? y.errors;
   };
   return {
     ...T(r),
@@ -448,33 +448,33 @@ class $e {
   }
 }
 function _e(t, e, r, a) {
-  const s = L(t.data, e), n = v(() => D(t.initialData.value, e)), f = (u) => ({
-    ...u,
-    path: v(() => d(u.path).replace(e + ".", "")),
+  const s = L(t.data, e), n = v(() => D(t.initialData.value, e)), f = (d) => ({
+    ...d,
+    path: v(() => u(d.path).replace(e + ".", "")),
     setData: (m) => {
-      u.setData(m);
+      d.setData(m);
     }
-  }), p = (u) => {
-    const m = b(e, u), w = t.getField(m);
+  }), p = (d) => {
+    const m = b(e, d), w = t.getField(m);
     return w ? f(w) : {};
-  }, F = (u) => {
-    const m = b(e, u.path), w = t.defineField({
-      ...u,
+  }, F = (d) => {
+    const m = b(e, d.path), w = t.defineField({
+      ...d,
       path: m
     });
     return f(w);
-  }, V = v(() => t.fields.value.filter((u) => {
-    const m = u.path.value;
+  }, V = v(() => t.fields.value.filter((d) => {
+    const m = d.path.value;
     return m.startsWith(e + ".") || m === e;
-  }).map((u) => f(u))), l = () => t.fields.value.filter((u) => {
-    const m = u.path.value;
+  }).map((d) => f(d))), l = () => t.fields.value.filter((d) => {
+    const m = d.path.value;
     return m.startsWith(e + ".") || m === e;
   }), c = v(
-    () => l().some((u) => u.dirty.value)
+    () => l().some((d) => d.dirty.value)
   ), o = v(
-    () => l().some((u) => u.touched.value)
+    () => l().some((d) => d.touched.value)
   ), i = v(() => t.isValid.value), h = v(() => t.isValidated.value), A = v(
-    () => ve(d(t.errors), e)
+    () => ve(u(t.errors), e)
   ), z = {
     data: s,
     fields: V,
@@ -486,16 +486,16 @@ function _e(t, e, r, a) {
     isValid: i,
     isValidated: h,
     errors: A,
-    defineValidator: (u) => {
-      const m = k(u) ? u : U(u), w = v(
-        () => new $e(e, d(m))
+    defineValidator: (d) => {
+      const m = k(d) ? d : U(d), w = v(
+        () => new $e(e, u(m))
       );
       return t.defineValidator(w), m;
     },
-    reset: () => l().forEach((u) => u.reset()),
+    reset: () => l().forEach((d) => d.reset()),
     validateForm: () => t.validateForm(),
-    getSubForm: (u, m) => {
-      const w = b(e, u);
+    getSubForm: (d, m) => {
+      const w = b(e, d);
       return t.getSubForm(
         w,
         m
@@ -522,7 +522,7 @@ function Ue(t) {
   const s = be(a, t), n = ye(a, s, {
     keepValuesOnUnmount: t.keepValuesOnUnmount,
     onBlur: async (c) => {
-      d(t.validationStrategy) === "onTouch" && s.validateField(c);
+      u(t.validationStrategy) === "onTouch" && s.validateField(c);
     }
   }), f = ge(n), p = () => {
     r.value = g(e), s.reset();
@@ -541,7 +541,7 @@ function Ue(t) {
     initialData: I(a, "initialData"),
     data: I(a, "data")
   }, l = G(V, t);
-  return d(t.validationStrategy) === "onFormOpen" && s.validateForm(), {
+  return u(t.validationStrategy) === "onFormOpen" && s.validateForm(), {
     ...V,
     submitHandler: l
   };
@@ -586,13 +586,13 @@ const ke = /* @__PURE__ */ x({
             errors: s,
             name: t.path,
             "onUpdate:modelValue": f
-          }), ce({
+          }), ue({
             default: B(() => [
               $(e.$slots, "default")
             ]),
             _: 2
           }, [
-            ue(e.$slots, (p, F) => ({
+            ce(e.$slots, (p, F) => ({
               name: F,
               fn: B((V) => [
                 $(e.$slots, F, M(N(V ?? {})))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "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,15 @@
+import type { Form, FormDataDefault, FormField } from "../types/form";
+import type { Paths, PickProps } from "../types/util";
+
+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>;
+
+  const push = (item: Item) => {
+    arrayField.setData([...arrayField.data.value, item] as Items);
+  };
+}

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>
->;
+>