@teamnovu/kit-vue-forms 0.2.0 → 0.2.2

package/dist/composables/useForm.d.ts

@@ -9,10 +9,10 @@ export interface UseFormOptions<T extends FormDataDefault, TOut = T> extends Val
     validationStrategy?: MaybeRef<ValidationStrategy>;
     keepValuesOnUnmount?: MaybeRef<boolean>;
 }
-export declare function useForm<TSchema extends z.ZodType<FormDataDefault, FormDataDefault>>(options: Omit<UseFormOptions<z.input<TSchema>, z.output<TSchema>>, 'initialData'> & {
+export declare function useForm<TSchema extends z.ZodType<FormDataDefault, FormDataDefault>, InitialData extends DeepPartial<z.input<TSchema>>>(options: Omit<UseFormOptions<z.input<TSchema>, z.output<TSchema>>, 'initialData'> & {
     schema: MaybeRef<TSchema>;
-    initialData: MaybeRefOrGetter<DeepPartial<z.input<TSchema>>>;
-}): Form<z.input<TSchema>, z.output<TSchema>>;
+    initialData: MaybeRef<InitialData>;
+}): Form<z.input<TSchema> & InitialData, z.output<TSchema> & InitialData>;
 export declare function useForm<T extends FormDataDefault>(options: Omit<UseFormOptions<T, T>, 'schema'> & {
     schema?: undefined;
 }): Form<T, T>;

package/dist/index.js

@@ -1,7 +1,7 @@
 var X = Object.defineProperty;
 var Y = (r, t, e) => t in r ? X(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
 var R = (r, t, e) => Y(r, typeof t != "symbol" ? t + "" : t, e);
-import { toValue as ee, toRaw as te, unref as h, shallowRef as b, watch as D, computed as p, isRef as O, reactive as A, toRefs as K, shallowReactive as re, toRef as _, onScopeDispose as ae, triggerRef as se, ref as L, getCurrentScope as ne, onBeforeUnmount as oe, defineComponent as C, renderSlot as k, normalizeProps as T, guardReactiveProps as x, resolveComponent as ie, createBlock as z, openBlock as H, withCtx as U, resolveDynamicComponent as le, mergeProps as ce, createSlots as ue, renderList as de } from "vue";
+import { toValue as ee, toRaw as te, unref as h, shallowRef as b, watch as D, computed as v, isRef as O, reactive as A, toRefs as K, shallowReactive as re, toRef as _, onScopeDispose as ae, triggerRef as se, ref as L, getCurrentScope as ne, onBeforeUnmount as oe, defineComponent as C, renderSlot as k, normalizeProps as T, guardReactiveProps as x, resolveComponent as ie, createBlock as z, openBlock as H, withCtx as U, resolveDynamicComponent as le, mergeProps as ce, createSlots as ue, renderList as de } from "vue";
 import { cloneDeep as fe } from "lodash-es";
 import "zod";
 function g(r) {
@@ -26,7 +26,7 @@ function J(...r) {
     return he(s);
   }, r[0]);
 }
-function ve(...r) {
+function pe(...r) {
   return r.map((e) => Object.keys(e)).flat().reduce((e, a) => {
     const s = r.map((n) => n[a]).filter(Boolean);
     return {
@@ -45,7 +45,7 @@ function j(...r) {
   return r.length === 1 ? t : r.slice(1).reduce(
     (e, a) => ({
       general: J(e.general, a.general),
-      propertyErrors: ve(e.propertyErrors ?? {}, a.propertyErrors ?? {})
+      propertyErrors: pe(e.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     t
   );
@@ -60,7 +60,7 @@ function N(r) {
 }
 function Z(r, t) {
   return (e) => async (a) => {
-    if (a.preventDefault(), h(t.validationStrategy) === "none") {
+    if (a == null || a.preventDefault(), h(t.validationStrategy) === "none") {
       await e(r.data.value);
       return;
     }
@@ -71,7 +71,7 @@ function Z(r, t) {
     await e(u);
   };
 }
-class pe {
+class ve {
   constructor(t = (e) => e) {
     R(this, "weakMap", /* @__PURE__ */ new WeakMap());
     R(this, "map", /* @__PURE__ */ new Map());
@@ -97,7 +97,7 @@ class pe {
 function me(r, t, e) {
   const a = /* @__PURE__ */ new Set();
   return t.map((s, n) => {
-    const u = [...r.get(s) ?? []], m = u.findIndex((v) => !a.has(v)), c = (m === -1 ? [] : u.slice(m))[0];
+    const u = [...r.get(s) ?? []], m = u.findIndex((p) => !a.has(p)), c = (m === -1 ? [] : u.slice(m))[0];
     if (c)
       return a.add(c), {
         id: c,
@@ -113,7 +113,7 @@ function me(r, t, e) {
   });
 }
 function q(r, t, e) {
-  const a = new pe(e == null ? void 0 : e.hashFn), s = r.getField(t), n = b([]);
+  const a = new ve(e == null ? void 0 : e.hashFn), s = r.getField(t), n = b([]);
   return D(
     s.data,
     (c) => {
@@ -130,17 +130,17 @@ function q(r, t, e) {
       return s.setData([...o, c]), n.value.at(-1);
     },
     remove: (c) => {
-      const o = s.data.value ?? [], v = n.value.findIndex(
+      const o = s.data.value ?? [], p = n.value.findIndex(
         ({ id: i }) => i === c
       );
-      v !== -1 && s.setData(
-        o.slice(0, v).concat(o.slice(v + 1))
+      p !== -1 && s.setData(
+        o.slice(0, p).concat(o.slice(p + 1))
       );
     },
     insert: (c, o) => {
-      const v = s.data.value ?? [];
+      const p = s.data.value ?? [];
       return s.setData(
-        v.slice(0, o).concat([c]).concat(v.slice(o))
+        p.slice(0, o).concat([c]).concat(p.slice(o))
       ), n.value[o];
     },
     field: s
@@ -174,7 +174,7 @@ function ye(r, t, e) {
     r.value = e;
   }
 }
-const Q = (r, t) => p({
+const Q = (r, t) => v({
   get() {
     return I(h(r), h(t));
   },
@@ -232,7 +232,7 @@ function we(r) {
     },
     { flush: "sync" }
   );
-  const n = p(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), u = (f) => {
+  const n = v(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), u = (f) => {
     s.value = f;
   }, m = () => {
     var f;
@@ -245,7 +245,7 @@ function we(r) {
     h(e.existsInForm) && !/^\d+$/.test(f) && (s.value = g(s.initialValue)), s.touched = !1, s.errors = [];
   }, o = (f) => {
     n.value || u(g(f)), s.initialValue = f;
-  }, v = (f) => {
+  }, p = (f) => {
     s.errors = f;
   }, i = () => {
     s.errors = [];
@@ -262,7 +262,7 @@ function we(r) {
     onBlur: m,
     onFocus: y,
     reset: c,
-    setErrors: v,
+    setErrors: p,
     clearErrors: i
   };
 }
@@ -302,8 +302,8 @@ function De(r, t, e) {
         path: l,
         value: Q(_(r, "data"), l),
         initialValue: Re(r, l),
-        existsInForm: p(() => Fe(r.data, h(l))),
-        errors: p({
+        existsInForm: v(() => Fe(r.data, h(l))),
+        errors: v({
           get() {
             return t.errors.value.propertyErrors[l] || [];
           },
@@ -332,17 +332,17 @@ function De(r, t, e) {
     return y(l), ae(() => {
       c(l);
     }), f;
-  }, v = (i) => o(i);
+  }, p = (i) => o(i);
   return {
-    fields: p(() => [...s.values()]),
+    fields: v(() => [...s.values()]),
     getField: (i) => o({ path: i }),
     registerField: u,
     deregisterField: m,
-    defineField: v
+    defineField: p
   };
 }
 function Pe(r) {
-  const t = p(() => r.fields.value.some((a) => h(a.dirty))), e = p(() => r.fields.value.some((a) => h(a.touched)));
+  const t = v(() => r.fields.value.some((a) => h(a.dirty))), e = v(() => r.fields.value.some((a) => h(a.touched)));
   return {
     isDirty: t,
     isTouched: e
@@ -425,7 +425,7 @@ class be {
   }
 }
 function B(r) {
-  return p(() => new be(
+  return v(() => new be(
     h(r.schema),
     h(r.validateFn)
   ));
@@ -449,8 +449,8 @@ function ke(r, t) {
     async (o) => {
       if (e.isValidated)
         if (o) {
-          const v = await n();
-          e.errors = v.errors;
+          const p = await n();
+          e.errors = p.errors;
         } else
           e.errors = V.errors;
     },
@@ -459,20 +459,20 @@ function ke(r, t) {
     e.isValidated && u();
   });
   const s = (o) => {
-    const v = O(o) ? o : B(o);
-    return e.validators.push(v), ne() && oe(() => {
+    const p = O(o) ? o : B(o);
+    return e.validators.push(p), ne() && oe(() => {
       e.validators = e.validators.filter(
-        (i) => i !== v
+        (i) => i !== p
       );
-    }), v;
+    }), p;
   };
   async function n() {
     var l;
     const o = await Promise.all(
       e.validators.filter((f) => h(f) !== void 0).map((f) => h(f).validate(r.data))
-    ), v = o.every((f) => N(f));
+    ), p = o.every((f) => N(f));
     let { errors: i } = V;
-    if (!v) {
+    if (!p) {
       const f = o.map((S) => S.errors);
       i = j(...f);
     }
@@ -488,17 +488,17 @@ function ke(r, t) {
       errors: e.errors
     };
   }, m = async (o) => {
-    const v = await n();
+    const p = await n();
     return a({
-      general: v.errors.general,
+      general: p.errors.general,
       propertyErrors: {
-        [o]: v.errors.propertyErrors[o]
+        [o]: p.errors.propertyErrors[o]
       }
     }), {
-      data: v.data,
+      data: p.data,
       errors: e.errors
     };
-  }, y = p(() => !G(e.errors)), c = () => {
+  }, y = v(() => !G(e.errors)), c = () => {
     e.isValidated = !1, e.errors = h(t.errors) ?? V.errors;
   };
   return {
@@ -532,9 +532,9 @@ class Ae {
   }
 }
 function Me(r, t, e, a) {
-  const s = Q(r.data, t), n = p(() => I(r.initialData.value, t)), u = (d) => ({
+  const s = Q(r.data, t), n = v(() => I(r.initialData.value, t)), u = (d) => ({
     ...d,
-    path: p(() => h(d.path).replace(t + ".", "")),
+    path: v(() => h(d.path).replace(t + ".", "")),
     setData: (F) => {
       d.setData(F);
     }
@@ -547,25 +547,25 @@ function Me(r, t, e, a) {
       path: F
     });
     return u(E);
-  }, c = p(() => r.fields.value.filter((d) => {
+  }, c = v(() => r.fields.value.filter((d) => {
     const F = d.path.value;
     return F.startsWith(t + ".") || F === t;
   }).map((d) => u(d))), o = () => r.fields.value.filter((d) => {
     const F = d.path.value;
     return F.startsWith(t + ".") || F === t;
-  }), v = p(() => o().some((d) => d.dirty.value)), i = p(() => o().some((d) => d.touched.value)), l = p(() => r.isValid.value), f = p(() => r.isValidated.value), S = p(() => Ve(h(r.errors), t)), M = {
+  }), p = v(() => o().some((d) => d.dirty.value)), i = v(() => o().some((d) => d.touched.value)), l = v(() => r.isValid.value), f = v(() => r.isValidated.value), S = v(() => Ve(h(r.errors), t)), M = {
     data: s,
     fields: c,
     initialData: n,
     defineField: y,
     getField: m,
-    isDirty: v,
+    isDirty: p,
     isTouched: i,
     isValid: l,
     isValidated: f,
     errors: S,
     defineValidator: (d) => {
-      const F = O(d) ? d : B(d), E = p(
+      const F = O(d) ? d : B(d), E = v(
         () => new Ae(t, h(F))
       );
       return r.defineValidator(E), F;
@@ -585,7 +585,7 @@ function Me(r, t, e, a) {
   return M;
 }
 function Te(r) {
-  const t = p(() => g(r.initialData)), e = L(g(t)), a = A({
+  const t = v(() => g(r.initialData)), e = L(g(t)), a = A({
     initialData: t,
     data: e
   });
@@ -686,7 +686,7 @@ const xe = /* @__PURE__ */ C({
     path: {}
   },
   setup(r) {
-    const t = r, e = p(() => t.form.getSubForm(t.path));
+    const t = r, e = v(() => t.form.getSubForm(t.path));
     return (a, s) => k(a.$slots, "default", T(x({ subform: e.value })));
   }
 });

package/dist/utils/submitHandler.d.ts

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

package/package.json

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

package/src/composables/useForm.ts

@@ -31,12 +31,15 @@ export interface UseFormOptions<T extends FormDataDefault, TOut = T>
 /* eslint-disable no-redeclare */
 // Overload: with schema - infer types from schema
 // initialData can be partial, but provided fields must match schema types
-export function useForm<TSchema extends z.ZodType<FormDataDefault, FormDataDefault>>(
+export function useForm<
+  TSchema extends z.ZodType<FormDataDefault, FormDataDefault>,
+  InitialData extends DeepPartial<z.input<TSchema>>,
+>(
   options: Omit<UseFormOptions<z.input<TSchema>, z.output<TSchema>>, 'initialData'> & {
     schema: MaybeRef<TSchema>
-    initialData: MaybeRefOrGetter<DeepPartial<z.input<TSchema>>>
+    initialData: MaybeRef<InitialData>
   },
-): Form<z.input<TSchema>, z.output<TSchema>>
+): Form<z.input<TSchema> & InitialData, z.output<TSchema> & InitialData>
 
 // Overload: without schema - infer types from initialData
 export function useForm<T extends FormDataDefault>(

package/src/utils/submitHandler.ts

@@ -13,8 +13,8 @@ export function makeSubmitHandler<T extends FormDataDefault, TOut = T>(
   options: SubmitHandlerOptions,
 ) {
   return (onSubmit: (data: TOut) => Awaitable<void>) => {
-    return async (event: SubmitEvent) => {
-      event.preventDefault()
+    return async (event?: SubmitEvent) => {
+      event?.preventDefault()
       const strategy = unref(options.validationStrategy)
 
       if (strategy === 'none') {

package/tests/nestedPath.test.ts

@@ -3,6 +3,7 @@ import { nextTick } from 'vue'
 import { z } from 'zod'
 import { useForm } from '../src/composables/useForm'
 import { isValidResult } from '../src/utils/validation'
+import { FormField } from '../src'
 
 describe('Nested Path Handling', () => {
   interface TestFormData {
@@ -556,7 +557,7 @@ describe('Nested Path Handling', () => {
     it('should handle large numbers of nested fields', () => {
       const form = useForm({ initialData })
 
-      const fields = []
+      const fields: FormField<string, string>[] = []
 
       // Create many nested fields
       for (let i = 0; i < 100; i++) {

package/tests/useField.test.ts

@@ -65,7 +65,7 @@ describe('useField', () => {
   it('should handle errors', () => {
     const field = useField({
       path: 'name',
-      errors: ['Required field'],
+      errors: ref(['Required field']),
     })
 
     expect(field.errors.value).toEqual(['Required field'])

package/tests/useForm.test.ts

@@ -4,8 +4,6 @@ import { z } from 'zod'
 import { useForm } from '../src/composables/useForm'
 import { isValidResult } from '../src/utils/validation'
 
-const scope = effectScope()
-
 describe('useForm', () => {
   it('should initialize form with initial data', () => {
     const initialData = {
@@ -481,7 +479,7 @@ describe('useForm', () => {
       { timeout: 500 },
       async () => {
         const initialData = ref({
-          name: null as null | number,
+          name: undefined as undefined | number,
         })
 
         const schema = z.object({

package/tests/useValidation.test.ts

@@ -307,10 +307,14 @@ describe('useValidation', () => {
   it('should not validate other fields than the blurred one', async () => {
     const schema = z.object({
       name: z.string().min(2),
-      email: z.string().email(),
+      email: z.email(),
     })
 
-    const initialData = { name: 'A', email: 'invalid-email' }
+    const initialData = {
+      name: 'A',
+      email: 'invalid-email',
+    }
+
     const form = useForm({
       initialData,
       schema,