@teamnovu/kit-vue-forms 0.0.4 → 0.0.5

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

@@ -0,0 +1,36 @@
+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 { ValidationErrors, ErrorMessage } from '../index.js';
+export interface FieldProps<TPath extends string, TData extends object> extends UseFieldOptions<PickProps<TData, TPath>, TPath> {
+    form: Form<TData>;
+}
+declare const _default: <TPath extends Paths<TData>, TData extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & FieldProps<TPath, TData> & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<{}>): void;
+    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>;
+            setData: (newData: PickProps<TData, TPath>) => void;
+            onBlur: () => void;
+            onFocus: () => void;
+            reset: () => void;
+            setErrors: (newErrors: ErrorMessage[]) => void;
+            clearErrors: () => void;
+        }): any;
+    };
+    emit: {};
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/index.d.ts

@@ -6,3 +6,4 @@ export type { ValidationStrategy, ValidationErrorMessage as ErrorMessage, Valida
 export type { DeepPartial } from './utils/type-helpers';
 export type { Form, FormField } from './types/form';
 export type { SplitPath, Paths, PickProps } from './types/util';
+export { default as Field } from './components/Field.vue';

package/dist/index.mjs

@@ -1,69 +1,69 @@
-var W = Object.defineProperty;
-var $ = (t, r, e) => r in t ? W(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
-var R = (t, r, e) => $(t, typeof r != "symbol" ? r + "" : r, e);
-import { toValue as I, toRaw as J, computed as d, unref as c, reactive as j, watch as E, toRefs as P, toRef as D, ref as A, isRef as N, getCurrentScope as T, onBeforeUnmount as B } from "vue";
+var q = Object.defineProperty;
+var x = (e, r, t) => r in e ? q(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
+var R = (e, r, t) => x(e, typeof r != "symbol" ? r + "" : r, t);
+import { toValue as K, toRaw as W, computed as d, unref as c, reactive as b, watch as F, toRefs as O, toRef as S, ref as A, isRef as _, getCurrentScope as I, onBeforeUnmount as J, defineComponent as T, renderSlot as B, normalizeProps as G, guardReactiveProps as L } from "vue";
 import "zod";
-function y(t) {
-  const r = I(t), e = J(r);
-  return structuredClone(e);
+function y(e) {
+  const r = K(e), t = W(r);
+  return structuredClone(t);
 }
-function M(t) {
-  return t === "" ? [] : t.split(/\s*\.\s*/).filter(Boolean);
+function N(e) {
+  return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
 }
-function m(t, r) {
-  return (Array.isArray(r) ? r : M(r)).reduce(
+function m(e, r) {
+  return (Array.isArray(r) ? r : N(r)).reduce(
     (a, s) => a == null ? void 0 : a[s],
-    t
+    e
   );
 }
-function G(t, r, e) {
-  const a = Array.isArray(r) ? r : M(r);
+function U(e, r, t) {
+  const a = Array.isArray(r) ? r : N(r);
   if (a.length === 0)
     throw new Error("Path cannot be empty");
   const s = a.at(-1), n = a.slice(0, -1).reduce(
     (u, v) => u[v],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    t
+    e
   );
-  n[s] = e;
+  n[s] = t;
 }
-const x = (t, r) => d({
+const z = (e, r) => d({
   get() {
-    return m(c(t), c(r));
+    return m(c(e), c(r));
   },
-  set(e) {
-    G(c(t), c(r), e);
+  set(t) {
+    U(c(e), c(r), t);
   }
 });
-function F(t, r) {
-  return !t && !r ? "" : !t && r ? r : !r && t ? t : `${t}.${r}`;
+function E(e, r) {
+  return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
-function L(t, r) {
+function Z(e, r) {
   if (!r)
-    return t;
-  const e = `${r}.`, a = Object.fromEntries(
-    Object.entries(t.propertyErrors).filter(([s]) => s.startsWith(e)).map(
-      ([s, n]) => [s.slice(e.length), n]
+    return e;
+  const t = `${r}.`, a = Object.fromEntries(
+    Object.entries(e.propertyErrors).filter(([s]) => s.startsWith(t)).map(
+      ([s, n]) => [s.slice(t.length), n]
     )
   );
   return {
-    general: t.general,
+    general: e.general,
     // Keep general errors
     propertyErrors: a
   };
 }
-function U(t) {
-  const r = j({
-    value: t.value,
-    path: t.path,
-    initialValue: d(() => Object.freeze(y(t.initialValue))),
-    errors: c(t.errors) || [],
+function k(e) {
+  const r = b({
+    value: e.value,
+    path: e.path,
+    initialValue: d(() => Object.freeze(y(e.initialValue))),
+    errors: c(e.errors) || [],
     touched: !1
   });
-  E(() => c(t.errors), (f) => {
+  F(() => c(e.errors), (f) => {
     r.errors = f || [];
   });
-  const e = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
+  const t = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
     r.value = f;
   }, s = () => {
     r.touched = !0;
@@ -74,14 +74,14 @@ function U(t) {
     r.errors = f;
   }, o = () => {
     r.errors = [];
-  }, l = P(r);
+  }, l = O(r);
   return {
     data: l.value,
     path: l.path,
     initialValue: l.initialValue,
     errors: l.errors,
     touched: l.touched,
-    dirty: e,
+    dirty: t,
     setData: a,
     onBlur: s,
     onFocus: n,
@@ -90,8 +90,8 @@ function U(t) {
     clearErrors: o
   };
 }
-function Z(t) {
-  const r = {}, e = (u) => {
+function H(e) {
+  const r = {}, t = (u) => {
     const v = c(u.path);
     r[v] = u;
   };
@@ -99,73 +99,73 @@ function Z(t) {
     fields: r,
     getField: (u) => r[u],
     getFields: () => Object.values(r),
-    registerField: e,
+    registerField: t,
     defineField: (u) => {
-      const v = U({
+      const v = k({
         ...u,
-        value: x(D(t, "data"), u.path),
-        initialValue: d(() => m(t.initialData, c(u.path)))
+        value: z(S(e, "data"), u.path),
+        initialValue: d(() => m(e.initialData, c(u.path)))
       });
-      return e(v), v;
+      return t(v), v;
     }
   };
 }
-function _(t) {
-  const r = d(() => t.getFields().some((a) => c(a.dirty))), e = d(() => t.getFields().some((a) => c(a.touched)));
+function Q(e) {
+  const r = d(() => e.getFields().some((a) => c(a.dirty))), t = d(() => e.getFields().some((a) => c(a.touched)));
   return {
     isDirty: r,
-    isTouched: e
+    isTouched: t
   };
 }
-function k(t) {
-  return t.filter(
-    (r, e, a) => a.indexOf(r) === e
+function X(e) {
+  return e.filter(
+    (r, t, a) => a.indexOf(r) === t
   );
 }
-function z(...t) {
-  return t.slice(1).reduce((r, e) => {
-    if (!r && !e)
+function C(...e) {
+  return e.slice(1).reduce((r, t) => {
+    if (!r && !t)
       return;
-    const a = ((e == null ? void 0 : e.length) ?? 0) > 0;
-    if (!r && ((e == null ? void 0 : e.length) ?? 0) > 0)
-      return e;
+    const a = ((t == null ? void 0 : t.length) ?? 0) > 0;
+    if (!r && ((t == null ? void 0 : t.length) ?? 0) > 0)
+      return t;
     if (!a)
       return r;
-    const s = (r ?? []).concat(e);
-    return k(s);
-  }, t[0]);
+    const s = (r ?? []).concat(t);
+    return X(s);
+  }, e[0]);
 }
-function q(...t) {
-  return t.map((e) => Object.keys(e)).flat().reduce((e, a) => {
-    const s = t.map((n) => n[a]).filter(Boolean);
+function Y(...e) {
+  return e.map((t) => Object.keys(t)).flat().reduce((t, a) => {
+    const s = e.map((n) => n[a]).filter(Boolean);
     return {
-      ...e,
-      [a]: z(...s)
+      ...t,
+      [a]: C(...s)
     };
   }, {});
 }
-function S(...t) {
-  if (!t.length)
+function D(...e) {
+  if (!e.length)
     return {
       general: [],
       propertyErrors: {}
     };
-  const r = t[0];
-  return t.length === 1 ? r : t.slice(1).reduce(
-    (e, a) => ({
-      general: z(e.general, a.general),
-      propertyErrors: q(e.propertyErrors ?? {}, a.propertyErrors ?? {})
+  const r = e[0];
+  return e.length === 1 ? r : e.slice(1).reduce(
+    (t, a) => ({
+      general: C(t.general, a.general),
+      propertyErrors: Y(t.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     r
   );
 }
-function O(t) {
+function j(e) {
   var a;
-  const r = (((a = t.general) == null ? void 0 : a.length) ?? 0) > 0, e = Object.entries(t.propertyErrors).filter(([, s]) => s == null ? void 0 : s.length).length > 0;
-  return r || e;
+  const r = (((a = e.general) == null ? void 0 : a.length) ?? 0) > 0, t = Object.entries(e.propertyErrors).filter(([, s]) => s == null ? void 0 : s.length).length > 0;
+  return r || t;
 }
-function H(t) {
-  const r = t.issues.filter((a) => a.path.length === 0).map((a) => a.message), e = t.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
+function rr(e) {
+  const r = e.issues.filter((a) => a.path.length === 0).map((a) => a.message), t = e.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
     const n = s.path.join(".");
     return {
       ...a,
@@ -174,27 +174,27 @@ function H(t) {
   }, {});
   return {
     general: r,
-    propertyErrors: e
+    propertyErrors: t
   };
 }
-const p = {
+const V = {
   isValid: !0,
   errors: {
     general: [],
     propertyErrors: {}
   }
 };
-class Q {
+class er {
   constructor(r) {
     this.schema = r;
   }
   async validate(r) {
     if (!this.schema)
-      return p;
-    const e = await this.schema.safeParseAsync(r);
-    if (e.success)
-      return p;
-    const a = H(e.error);
+      return V;
+    const t = await this.schema.safeParseAsync(r);
+    if (t.success)
+      return V;
+    const a = rr(t.error);
     return {
       isValid: !1,
       errors: {
@@ -204,89 +204,89 @@ class Q {
     };
   }
 }
-class X {
+class tr {
   constructor(r) {
     this.validateFn = r;
   }
   async validate(r) {
     if (!this.validateFn)
-      return p;
+      return V;
     try {
-      const e = await this.validateFn(r);
-      return e.isValid ? p : e;
-    } catch (e) {
+      const t = await this.validateFn(r);
+      return t.isValid ? V : t;
+    } catch (t) {
       return {
         isValid: !1,
         errors: {
-          general: [e.message || "Validation error"],
+          general: [t.message || "Validation error"],
           propertyErrors: {}
         }
       };
     }
   }
 }
-class Y {
-  constructor(r, e) {
+class ar {
+  constructor(r, t) {
     R(this, "schemaValidator");
     R(this, "functionValidator");
-    this.schema = r, this.validateFn = e, this.schemaValidator = new Q(this.schema), this.functionValidator = new X(this.validateFn);
+    this.schema = r, this.validateFn = t, this.schemaValidator = new er(this.schema), this.functionValidator = new tr(this.validateFn);
   }
   async validate(r) {
-    const [e, a] = await Promise.all([
+    const [t, a] = await Promise.all([
       this.schemaValidator.validate(r),
       this.functionValidator.validate(r)
     ]);
     return {
-      isValid: e.isValid && a.isValid,
-      errors: S(e.errors, a.errors)
+      isValid: t.isValid && a.isValid,
+      errors: D(t.errors, a.errors)
     };
   }
 }
-function b(t) {
-  return d(() => new Y(
-    c(t.schema),
-    c(t.validateFn)
+function P(e) {
+  return d(() => new ar(
+    c(e.schema),
+    c(e.validateFn)
   ));
 }
-function rr(t, r) {
-  const e = j({
-    validators: A([b(r)]),
+function sr(e, r) {
+  const t = b({
+    validators: A([P(r)]),
     isValidated: !1,
-    errors: c(r.errors) ?? p.errors
+    errors: c(r.errors) ?? V.errors
   });
-  E(() => c(r.errors), async () => {
+  F(() => c(r.errors), async () => {
     const o = await s();
     n(o.errors);
-  }, { immediate: !0 }), E(
-    [() => e.validators],
+  }, { immediate: !0 }), F(
+    [() => t.validators],
     async (o) => {
-      if (e.isValidated)
+      if (t.isValidated)
         if (o) {
           const l = await s();
-          e.errors = l.errors;
+          t.errors = l.errors;
         } else
-          e.errors = p.errors;
+          t.errors = V.errors;
     },
     { immediate: !0 }
-  ), E(() => t.data, () => {
-    e.isValidated && u();
+  ), F(() => e.data, () => {
+    t.isValidated && u();
   });
   const a = (o) => {
-    const l = N(o) ? o : b(o);
-    return e.validators.push(l), T() && B(() => {
-      e.validators = e.validators.filter(
+    const l = _(o) ? o : P(o);
+    return t.validators.push(l), I() && J(() => {
+      t.validators = t.validators.filter(
         (f) => f !== l
       );
     }), l;
   };
   async function s() {
     const o = await Promise.all(
-      e.validators.filter((V) => c(V) !== void 0).map((V) => c(V).validate(t.data))
-    ), l = o.every((V) => V.isValid);
-    let { errors: f } = p;
+      t.validators.filter((p) => c(p) !== void 0).map((p) => c(p).validate(e.data))
+    ), l = o.every((p) => p.isValid);
+    let { errors: f } = V;
     if (!l) {
-      const V = o.map((w) => w.errors);
-      f = S(...V);
+      const p = o.map((w) => w.errors);
+      f = D(...p);
     }
     return {
       errors: f,
@@ -294,37 +294,37 @@ function rr(t, r) {
     };
   }
   const n = (o) => {
-    e.errors = S(c(r.errors) ?? p.errors, o);
+    t.errors = D(c(r.errors) ?? V.errors, o);
   }, u = async () => {
     const o = await s();
-    return n(o.errors), e.isValidated = !0, {
-      isValid: !O(o.errors),
-      errors: e.errors
+    return n(o.errors), t.isValidated = !0, {
+      isValid: !j(o.errors),
+      errors: t.errors
     };
-  }, v = d(() => !O(e.errors));
+  }, v = d(() => !j(t.errors));
   return {
-    ...P(e),
+    ...O(t),
     validateForm: u,
     defineValidator: a,
     isValid: v
   };
 }
-class tr {
-  constructor(r, e) {
-    this.path = r, this.validator = e;
+class ir {
+  constructor(r, t) {
+    this.path = r, this.validator = t;
   }
   async validate(r) {
-    const e = m(r, this.path);
+    const t = m(r, this.path);
     if (!this.validator)
-      return p;
-    const a = await this.validator.validate(e);
+      return V;
+    const a = await this.validator.validate(t);
     return {
       isValid: a.isValid,
       errors: {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(([s, n]) => [
-            F(this.path, s),
+            E(this.path, s),
             n
           ])
         ) : {}
@@ -332,30 +332,30 @@ class tr {
     };
   }
 }
-function er(t, r, e) {
-  const a = x(t.data, r), s = d(() => m(t.initialData.value, r)), n = (i) => ({
+function nr(e, r, t) {
+  const a = z(e.data, r), s = d(() => m(e.initialData.value, r)), n = (i) => ({
     ...i,
     path: d(() => c(i.path).replace(r + ".", "")),
     setData: (h) => {
       i.setData(h);
     }
   }), u = (i) => {
-    const h = F(r, i), g = t.getField(h);
+    const h = E(r, i), g = e.getField(h);
     if (g)
       return n(g);
   }, v = (i) => {
-    const h = F(r, i.path), g = t.defineField({
+    const h = E(r, i.path), g = e.defineField({
       ...i,
       path: h
     });
     return n(g);
-  }, o = () => t.getFields().filter((i) => {
+  }, o = () => e.getFields().filter((i) => {
     const h = i.path.value;
     return h.startsWith(r + ".") || h === r;
-  }).map((i) => n(i)), l = () => t.getFields().filter((i) => {
+  }).map((i) => n(i)), l = () => e.getFields().filter((i) => {
     const h = i.path.value;
     return h.startsWith(r + ".") || h === r;
-  }), f = d(() => l().some((i) => i.dirty.value)), V = d(() => l().some((i) => i.touched.value)), w = d(() => t.isValid.value), C = d(() => t.isValidated.value), K = d(() => L(c(t.errors), r));
+  }), f = d(() => l().some((i) => i.dirty.value)), p = d(() => l().some((i) => i.touched.value)), w = d(() => e.isValid.value), M = d(() => e.isValidated.value), $ = d(() => Z(c(e.errors), r));
   return {
     data: a,
     initialData: s,
@@ -363,36 +363,36 @@ function er(t, r, e) {
     getField: u,
     getFields: o,
     isDirty: f,
-    isTouched: V,
+    isTouched: p,
     isValid: w,
-    isValidated: C,
-    errors: K,
+    isValidated: M,
+    errors: $,
     defineValidator: (i) => {
-      const h = N(i) ? i : b(i), g = d(
-        () => new tr(r, c(h))
+      const h = _(i) ? i : P(i), g = d(
+        () => new ir(r, c(h))
       );
-      return t.defineValidator(g), h;
+      return e.defineValidator(g), h;
     },
     reset: () => l().forEach((i) => i.reset()),
-    validateForm: () => t.validateForm(),
+    validateForm: () => e.validateForm(),
     getSubForm: (i, h) => {
-      const g = F(r, i);
-      return t.getSubForm(
+      const g = E(r, i);
+      return e.getSubForm(
         g,
         h
       );
     }
   };
 }
-function ur(t) {
-  const r = d(() => Object.freeze(y(t.initialData))), e = A(y(r)), a = j({
+function vr(e) {
+  const r = d(() => Object.freeze(y(e.initialData))), t = A(y(r)), a = b({
     initialData: r,
-    data: e
-  }), s = Z(a), n = rr(a, t), u = _(s), v = () => {
-    e.value = y(r), s.getFields().forEach((f) => f.reset());
+    data: t
+  }), s = H(a), n = sr(a, e), u = Q(s), v = () => {
+    t.value = y(r), s.getFields().forEach((f) => f.reset());
   };
-  function o(f, V) {
-    return er(l, f);
+  function o(f, p) {
+    return nr(l, f);
   }
   const l = {
     ...s,
@@ -400,12 +400,32 @@ function ur(t) {
     ...u,
     reset: v,
     getSubForm: o,
-    initialData: D(a, "initialData"),
-    data: D(a, "data")
+    initialData: S(a, "initialData"),
+    data: S(a, "data")
   };
   return l;
 }
+const pr = /* @__PURE__ */ T({
+  __name: "Field",
+  props: {
+    form: {},
+    value: {},
+    initialValue: {},
+    type: {},
+    required: {},
+    path: {},
+    errors: {}
+  },
+  setup(e) {
+    const r = e, t = r.form.defineField({
+      path: r.path,
+      required: r.required
+    });
+    return (a, s) => B(a.$slots, "default", G(L(c(t))));
+  }
+});
 export {
-  U as useField,
-  ur as useForm
+  pr as Field,
+  k as useField,
+  vr as useForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "",
   "main": "index.js",
   "exports": {

package/src/index.ts

@@ -12,3 +12,5 @@ export type { DeepPartial } from './utils/type-helpers'
 
 export type { Form, FormField } from './types/form'
 export type { SplitPath, Paths, PickProps } from './types/util'
+
+export { default as Field } from './components/Field.vue'