@teamnovu/kit-vue-forms 0.1.0 → 0.1.1

package/dist/components/Field.vue.d.ts

@@ -1,7 +1,7 @@
 import { Form } from '../types/form.ts';
 import { Paths, PickProps } from '../types/util.ts';
 import { UseFieldOptions } from '../composables/useField.ts';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, Ref, VNode } from 'vue';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
 import { ValidationErrors, ErrorMessage } from '../index.js';
 export interface FieldProps<TData extends object, TPath extends string> extends UseFieldOptions<PickProps<TData, TPath>, TPath> {
     form: Form<TData>;
@@ -12,12 +12,12 @@ declare const _default: <TData extends object, TPath extends Paths<TData>>(__VLS
     attrs: any;
     slots: {
         default?(_: {
-            data: Ref<PickProps<TData, TPath>, PickProps<TData, TPath>>;
-            path: Ref<TPath, TPath>;
-            initialValue: Readonly< Ref<PickProps<TData, TPath>, PickProps<TData, TPath>>>;
-            errors: Ref<ValidationErrors>;
-            touched: Ref<boolean>;
-            dirty: Ref<boolean>;
+            data: PickProps<TData, TPath>;
+            path: TPath;
+            initialValue: PickProps<TData, TPath>;
+            errors: ValidationErrors;
+            touched: boolean;
+            dirty: boolean;
             setData: (newData: PickProps<TData, TPath>) => void;
             onBlur: () => void;
             onFocus: () => void;

package/dist/index.js

@@ -1,7 +1,7 @@
 var T = Object.defineProperty;
 var G = (e, r, t) => r in e ? T(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
 var R = (e, r, t) => G(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as L, toRaw as Z, computed as c, unref as d, reactive as F, toRefs as N, markRaw as q, toRef as _, ref as W, watch as g, isRef as z, getCurrentScope as H, onBeforeUnmount as Q, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as k, resolveComponent as X, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as Y, mergeProps as x } from "vue";
+import { toValue as L, toRaw as Z, computed as u, unref as d, reactive as g, toRefs as N, markRaw as q, toRef as D, ref as W, watch as E, isRef as z, getCurrentScope as H, onBeforeUnmount as Q, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as k, resolveComponent as X, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as Y, mergeProps as x } from "vue";
 import { cloneDeep as rr } from "lodash-es";
 import "zod";
 function y(e) {
@@ -28,7 +28,7 @@ function er(e, r, t) {
   );
   o[s] = t;
 }
-const K = (e, r) => c({
+const K = (e, r) => u({
   get() {
     return w(d(e), d(r));
   },
@@ -36,7 +36,7 @@ const K = (e, r) => c({
     er(d(e), d(r), t);
   }
 });
-function E(e, r) {
+function F(e, r) {
   return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
 function tr(e, r) {
@@ -54,13 +54,13 @@ function tr(e, r) {
   };
 }
 function ar(e) {
-  const r = F({
+  const r = g({
     value: e.value,
     path: e.path,
-    initialValue: c(() => Object.freeze(y(e.initialValue))),
+    initialValue: u(() => Object.freeze(y(e.initialValue))),
     errors: e.errors,
     touched: !1
-  }), t = c(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
+  }), t = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
     r.value = f;
   }, s = () => {
     r.touched = !0;
@@ -71,13 +71,13 @@ function ar(e) {
     r.errors = f;
   }, l = () => {
     r.errors = [];
-  }, u = N(r);
+  }, c = N(r);
   return {
-    data: u.value,
-    path: u.path,
-    initialValue: u.initialValue,
-    errors: u.errors,
-    touched: u.touched,
+    data: c.value,
+    path: c.path,
+    initialValue: c.initialValue,
+    errors: c.errors,
+    touched: c.touched,
     dirty: t,
     setData: a,
     onBlur: s,
@@ -88,16 +88,16 @@ function ar(e) {
   };
 }
 function sr(e, r) {
-  const t = F({}), a = (i) => {
+  const t = g({}), a = (i) => {
     const h = d(i.path);
     t[h] = q(i);
   }, s = (i) => {
     if (!t[i]) {
       const h = ar({
         path: i,
-        value: K(_(e, "data"), i),
-        initialValue: c(() => w(e.initialData, i)),
-        errors: c({
+        value: K(D(e, "data"), i),
+        initialValue: u(() => w(e.initialData, i)),
+        errors: u({
           get() {
             return r.errors.value.propertyErrors[i] || [];
           },
@@ -111,14 +111,14 @@ function sr(e, r) {
     return t[i];
   }, o = (i) => s(i.path);
   return {
-    fields: c(() => Object.values(t)),
+    fields: u(() => Object.values(t)),
     getField: s,
     registerField: a,
     defineField: o
   };
 }
 function or(e) {
-  const r = c(() => e.fields.value.some((a) => d(a.dirty))), t = c(() => e.fields.value.some((a) => d(a.touched)));
+  const r = u(() => e.fields.value.some((a) => d(a.dirty))), t = u(() => e.fields.value.some((a) => d(a.touched)));
   return {
     isDirty: r,
     isTouched: t
@@ -151,7 +151,7 @@ function ir(...e) {
     };
   }, {});
 }
-function D(...e) {
+function _(...e) {
   if (!e.length)
     return {
       general: [],
@@ -191,7 +191,7 @@ const m = {
     propertyErrors: {}
   }
 };
-class ur {
+class cr {
   constructor(r) {
     this.schema = r;
   }
@@ -211,7 +211,7 @@ class ur {
     };
   }
 }
-class cr {
+class ur {
   constructor(r) {
     this.validateFn = r;
   }
@@ -236,7 +236,7 @@ class dr {
   constructor(r, t) {
     R(this, "schemaValidator");
     R(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new ur(this.schema), this.functionValidator = new cr(this.validateFn);
+    this.schema = r, this.validateFn = t, this.schemaValidator = new cr(this.schema), this.functionValidator = new ur(this.validateFn);
   }
   async validate(r) {
     const [t, a] = await Promise.all([
@@ -245,70 +245,70 @@ class dr {
     ]);
     return {
       isValid: t.isValid && a.isValid,
-      errors: D(t.errors, a.errors)
+      errors: _(t.errors, a.errors)
     };
   }
 }
 function b(e) {
-  return c(() => new dr(
+  return u(() => new dr(
     d(e.schema),
     d(e.validateFn)
   ));
 }
 function fr(e, r) {
-  const t = F({
+  const t = g({
     validators: W([b(r)]),
     isValidated: !1,
     errors: d(r.errors) ?? m.errors
   });
-  g(() => d(r.errors), async () => {
+  E(() => d(r.errors), async () => {
     const l = await s();
     o(l.errors);
-  }, { immediate: !0 }), g(
+  }, { immediate: !0 }), E(
     [() => t.validators],
     async (l) => {
       if (t.isValidated)
         if (l) {
-          const u = await s();
-          t.errors = u.errors;
+          const c = await s();
+          t.errors = c.errors;
         } else
           t.errors = m.errors;
     },
     { immediate: !0 }
-  ), g(() => e.data, () => {
+  ), E(() => e.data, () => {
     t.isValidated && i();
   });
   const a = (l) => {
-    const u = z(l) ? l : b(l);
-    return t.validators.push(u), H() && Q(() => {
+    const c = z(l) ? l : b(l);
+    return t.validators.push(c), H() && Q(() => {
       t.validators = t.validators.filter(
-        (f) => f !== u
+        (f) => f !== c
       );
-    }), u;
+    }), c;
   };
   async function s() {
     const l = await Promise.all(
       t.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(e.data))
-    ), u = l.every((v) => v.isValid);
+    ), c = l.every((v) => v.isValid);
     let { errors: f } = m;
-    if (!u) {
+    if (!c) {
       const v = l.map((P) => P.errors);
-      f = D(...v);
+      f = _(...v);
     }
     return {
       errors: f,
-      isValid: u
+      isValid: c
     };
   }
   const o = (l) => {
-    t.errors = D(d(r.errors) ?? m.errors, l);
+    t.errors = _(d(r.errors) ?? m.errors, l);
   }, i = async () => {
     const l = await s();
     return o(l.errors), t.isValidated = !0, {
       isValid: !C(l.errors),
       errors: t.errors
     };
-  }, h = c(() => !C(t.errors));
+  }, h = u(() => !C(t.errors));
   return {
     ...N(t),
     validateForm: i,
@@ -331,7 +331,7 @@ class pr {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(([s, o]) => [
-            E(this.path, s),
+            F(this.path, s),
             o
           ])
         ) : {}
@@ -340,28 +340,28 @@ class pr {
   }
 }
 function hr(e, r, t) {
-  const a = K(e.data, r), s = c(() => w(e.initialData.value, r)), o = (n) => ({
+  const a = K(e.data, r), s = u(() => w(e.initialData.value, r)), o = (n) => ({
     ...n,
-    path: c(() => d(n.path).replace(r + ".", "")),
+    path: u(() => d(n.path).replace(r + ".", "")),
     setData: (p) => {
       n.setData(p);
     }
   }), i = (n) => {
-    const p = E(r, n), V = e.getField(p);
+    const p = F(r, n), V = e.getField(p);
     return V ? o(V) : {};
   }, h = (n) => {
-    const p = E(r, n.path), V = e.defineField({
+    const p = F(r, n.path), V = e.defineField({
       ...n,
       path: p
     });
     return o(V);
-  }, l = c(() => e.fields.value.filter((n) => {
+  }, l = u(() => e.fields.value.filter((n) => {
     const p = n.path.value;
     return p.startsWith(r + ".") || p === r;
-  }).map((n) => o(n))), u = () => e.fields.value.filter((n) => {
+  }).map((n) => o(n))), c = () => e.fields.value.filter((n) => {
     const p = n.path.value;
     return p.startsWith(r + ".") || p === r;
-  }), f = c(() => u().some((n) => n.dirty.value)), v = c(() => u().some((n) => n.touched.value)), P = c(() => e.isValid.value), I = c(() => e.isValidated.value), J = c(() => tr(d(e.errors), r));
+  }), f = u(() => c().some((n) => n.dirty.value)), v = u(() => c().some((n) => n.touched.value)), P = u(() => e.isValid.value), I = u(() => e.isValidated.value), J = u(() => tr(d(e.errors), r));
   return {
     data: a,
     fields: l,
@@ -374,15 +374,15 @@ function hr(e, r, t) {
     isValidated: I,
     errors: J,
     defineValidator: (n) => {
-      const p = z(n) ? n : b(n), V = c(
+      const p = z(n) ? n : b(n), V = u(
         () => new pr(r, d(p))
       );
       return e.defineValidator(V), p;
     },
-    reset: () => u().forEach((n) => n.reset()),
+    reset: () => c().forEach((n) => n.reset()),
     validateForm: () => e.validateForm(),
     getSubForm: (n, p) => {
-      const V = E(r, n);
+      const V = F(r, n);
       return e.getSubForm(
         V,
         p
@@ -391,11 +391,11 @@ function hr(e, r, t) {
   };
 }
 function Pr(e) {
-  const r = c(() => Object.freeze(y(e.initialData))), t = W(y(r)), a = F({
+  const r = u(() => Object.freeze(y(e.initialData))), t = W(y(r)), a = g({
     initialData: r,
     data: t
   });
-  g(r, (f) => {
+  E(r, (f) => {
     a.data = y(f);
   });
   const s = fr(a, e), o = sr(a, s), i = or(o), h = () => {
@@ -404,18 +404,18 @@ function Pr(e) {
     );
   };
   function l(f, v) {
-    return hr(u, f);
+    return hr(c, f);
   }
-  const u = {
+  const c = {
     ...o,
     ...s,
     ...i,
     reset: h,
     getSubForm: l,
-    initialData: _(a, "initialData"),
-    data: _(a, "data")
+    initialData: D(a, "initialData"),
+    data: D(a, "data")
   };
-  return u;
+  return c;
 }
 const Rr = /* @__PURE__ */ S({
   __name: "Field",
@@ -429,10 +429,10 @@ const Rr = /* @__PURE__ */ S({
   setup(e) {
     const r = e, t = r.form.defineField({
       path: r.path
-    });
-    return (a, s) => j(a.$slots, "default", M(k(d(t))));
+    }), a = g(t);
+    return (s, o) => j(s.$slots, "default", M(k(a)));
   }
-}), _r = /* @__PURE__ */ S({
+}), Dr = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -465,20 +465,20 @@ const Rr = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), Dr = /* @__PURE__ */ S({
+}), _r = /* @__PURE__ */ S({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
   setup(e) {
-    const r = e, t = c(() => r.form.getSubForm(r.path));
+    const r = e, t = u(() => r.form.getSubForm(r.path));
     return (a, s) => j(a.$slots, "default", M(k({ subform: t.value })));
   }
 });
 export {
   Rr as Field,
-  _r as FormFieldWrapper,
-  Dr as FormPart,
+  Dr as FormFieldWrapper,
+  _r as FormPart,
   Pr as useForm
 };

package/package.json

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

package/src/components/Field.vue

@@ -1,11 +1,12 @@
 <template>
-  <slot v-bind="field" />
+  <slot v-bind="slotData" />
 </template>
 
 <script
   setup lang="ts"
   generic="TData extends object, TPath extends Paths<TData>"
 >
+import { reactive } from 'vue'
 import type { Form } from '../types/form.ts'
 import type { Paths, PickProps } from '../types/util.ts'
 import type { UseFieldOptions } from '../composables/useField.ts'
@@ -19,4 +20,6 @@ const props = defineProps<FieldProps<TData, TPath>>()
 const field = props.form.defineField({
   path: props.path,
 })
+
+const slotData = reactive(field)
 </script>

package/tests/useForm.test.ts

@@ -215,4 +215,27 @@ describe('useForm', () => {
     expect(rootField.data.value).toEqual(['item1', 'item2'])
     expect(itemField.data.value).toBe('item2')
   })
+
+  it('can handle late initialized fields', async () => {
+    const form = useForm({
+      initialData: {
+        name: 'John',
+        age: 30,
+      },
+    })
+
+    // No fields defined yet
+    expect(form.fields.value).toEqual([])
+    expect(form.isDirty.value).toBe(false)
+
+    const nameField = form.defineField({ path: 'name' })
+
+
+    expect(form.fields.value.length).toBe(1)
+    expect(form.isDirty.value).toBe(false)
+
+    nameField.setData('Bob')
+
+    expect(form.isDirty.value).toBe(true)
+  })
 })