@teamnovu/kit-vue-forms 0.0.2 → 0.0.4

package/dist/composables/useFieldRegistry.d.ts

@@ -1,9 +1,13 @@
-import { FormDataDefault, FormField, FormState } from '../types/form';
+import { FormDataDefault, FormField } from '../types/form';
 import { Paths, PickProps } from '../types/util';
 import { UseFieldOptions } from './useField';
 type FieldRegistryCache<T> = Record<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' | 'type' | 'required'>;
+interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T> {
+    data: T;
+    initialData: TIn;
+}
 export declare function useFieldRegistry<T extends FormDataDefault>(formState: FormState<T>): {
     fields: FieldRegistryCache<T>;
     getField: <K extends Paths<T>>(path: K) => ResolvedFormField<T, K> | undefined;

package/dist/composables/useFormState.d.ts

@@ -1,7 +1,7 @@
-import { FormDataDefault, FormState } from '../types/form';
+import { FormDataDefault } from '../types/form';
 import { FieldRegistry } from './useFieldRegistry';
 import { ComputedRef } from 'vue';
-export declare function useFormState<T extends FormDataDefault>(formState: FormState<T>, formFieldRegistry: FieldRegistry<T>): {
+export declare function useFormState<T extends FormDataDefault>(formFieldRegistry: FieldRegistry<T>): {
     isDirty: ComputedRef<boolean>;
     isTouched: ComputedRef<boolean>;
 };

package/dist/composables/useValidation.d.ts

@@ -1,18 +1,19 @@
 import { MaybeRef, Ref, ComputedRef } from 'vue';
 import { default as z } from 'zod';
 import { FormDataDefault } from '../types/form';
-import { ErrorBag, ValidationFunction, ValidationResult, Validator, ValidationErrors } from '../types/validation';
+import { ErrorBag, ValidationFunction, ValidationResult, Validator } from '../types/validation';
+import { ValidationErrors } from '..';
 export interface ValidatorOptions<T> {
     schema?: MaybeRef<z.ZodType>;
     validateFn?: MaybeRef<ValidationFunction<T>>;
 }
 export interface ValidationOptions<T> extends ValidatorOptions<T> {
-    errors?: MaybeRef<ErrorBag>;
+    errors?: MaybeRef<ErrorBag | undefined>;
 }
 export declare const SuccessValidationResult: ValidationResult;
 export declare function createValidator<T extends FormDataDefault>(options: ValidatorOptions<T>): Ref<Validator<T> | undefined>;
 export declare function useValidation<T extends FormDataDefault>(formState: {
-    formData: T;
+    data: T;
 }, options: ValidationOptions<T>): {
     validateForm: () => Promise<ValidationResult>;
     defineValidator: (options: ValidatorOptions<T> | Ref<Validator<T>>) => Ref<Validator<T> | undefined, Validator<T> | undefined>;

package/dist/index.d.ts

@@ -2,5 +2,7 @@ export { useForm } from './composables/useForm';
 export type { UseFormOptions } from './composables/useForm';
 export { useField } from './composables/useField';
 export type { UseFieldOptions } from './composables/useField';
-export type { ValidationStrategy, ValidationErrorMessage as ErrorMessage, ValidationResult, ErrorBag } from './types/validation';
-export type { DeepPartial, FormData } from './utils/type-helpers';
+export type { ValidationStrategy, ValidationErrorMessage as ErrorMessage, ValidationResult, ErrorBag, Validator, ValidationFunction, ValidationErrors } from './types/validation';
+export type { DeepPartial } from './utils/type-helpers';
+export type { Form, FormField } from './types/form';
+export type { SplitPath, Paths, PickProps } from './types/util';

package/dist/index.mjs

@@ -1,38 +1,38 @@
-var K = Object.defineProperty;
-var W = (t, r, e) => r in t ? K(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
-var w = (t, r, e) => W(t, typeof r != "symbol" ? r + "" : r, e);
-import { toValue as $, toRaw as I, computed as d, unref as u, reactive as b, watch as E, toRefs as P, toRef as R, ref as N, isRef as A, getCurrentScope as T, onBeforeUnmount as B } from "vue";
+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";
 import "zod";
 function y(t) {
-  const r = $(t), e = I(r);
+  const r = I(t), e = J(r);
   return structuredClone(e);
 }
-function J(t) {
+function M(t) {
   return t === "" ? [] : t.split(/\s*\.\s*/).filter(Boolean);
 }
 function m(t, r) {
-  return (Array.isArray(r) ? r : J(r)).reduce(
+  return (Array.isArray(r) ? r : M(r)).reduce(
     (a, s) => a == null ? void 0 : a[s],
     t
   );
 }
 function G(t, r, e) {
-  const a = Array.isArray(r) ? r : J(r);
+  const a = Array.isArray(r) ? r : M(r);
   if (a.length === 0)
     throw new Error("Path cannot be empty");
   const s = a.at(-1), n = a.slice(0, -1).reduce(
-    (c, v) => c[v],
+    (u, v) => u[v],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     t
   );
   n[s] = e;
 }
-const M = (t, r) => d({
+const x = (t, r) => d({
   get() {
-    return m(u(t), u(r));
+    return m(c(t), c(r));
   },
   set(e) {
-    G(u(t), u(r), e);
+    G(c(t), c(r), e);
   }
 });
 function F(t, r) {
@@ -53,14 +53,14 @@ function L(t, r) {
   };
 }
 function U(t) {
-  const r = b({
+  const r = j({
     value: t.value,
     path: t.path,
     initialValue: d(() => Object.freeze(y(t.initialValue))),
-    errors: u(t.errors) || [],
+    errors: c(t.errors) || [],
     touched: !1
   });
-  E(() => u(t.errors), (f) => {
+  E(() => c(t.errors), (f) => {
     r.errors = f || [];
   });
   const e = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
@@ -68,7 +68,7 @@ function U(t) {
   }, s = () => {
     r.touched = !0;
   }, n = () => {
-  }, c = () => {
+  }, u = () => {
     r.value = y(r.initialValue), r.touched = !1, r.errors = [];
   }, v = (f) => {
     r.errors = f;
@@ -76,45 +76,45 @@ function U(t) {
     r.errors = [];
   }, l = P(r);
   return {
-    value: l.value,
+    data: l.value,
     path: l.path,
     initialValue: l.initialValue,
     errors: l.errors,
     touched: l.touched,
     dirty: e,
-    setValue: a,
+    setData: a,
     onBlur: s,
     onFocus: n,
-    reset: c,
+    reset: u,
     setErrors: v,
     clearErrors: o
   };
 }
 function Z(t) {
-  const r = {}, e = (c) => {
-    const v = u(c.path);
-    r[v] = c;
+  const r = {}, e = (u) => {
+    const v = c(u.path);
+    r[v] = u;
   };
   return {
     fields: r,
-    getField: (c) => r[c],
+    getField: (u) => r[u],
     getFields: () => Object.values(r),
     registerField: e,
-    defineField: (c) => {
+    defineField: (u) => {
       const v = U({
-        ...c,
-        value: M(R(t, "formData"), c.path),
-        initialValue: d(() => m(t.initialData, u(c.path)))
+        ...u,
+        value: x(D(t, "data"), u.path),
+        initialValue: d(() => m(t.initialData, c(u.path)))
       });
       return e(v), v;
     }
   };
 }
-function _(t, r) {
-  const e = d(() => JSON.stringify(t.formData) !== JSON.stringify(t.initialData)), a = d(() => r.getFields().some((s) => u(s.touched)));
+function _(t) {
+  const r = d(() => t.getFields().some((a) => c(a.dirty))), e = d(() => t.getFields().some((a) => c(a.touched)));
   return {
-    isDirty: e,
-    isTouched: a
+    isDirty: r,
+    isTouched: e
   };
 }
 function k(t) {
@@ -122,7 +122,7 @@ function k(t) {
     (r, e, a) => a.indexOf(r) === e
   );
 }
-function x(...t) {
+function z(...t) {
   return t.slice(1).reduce((r, e) => {
     if (!r && !e)
       return;
@@ -140,7 +140,7 @@ function q(...t) {
     const s = t.map((n) => n[a]).filter(Boolean);
     return {
       ...e,
-      [a]: x(...s)
+      [a]: z(...s)
     };
   }, {});
 }
@@ -153,13 +153,13 @@ function S(...t) {
   const r = t[0];
   return t.length === 1 ? r : t.slice(1).reduce(
     (e, a) => ({
-      general: x(e.general, a.general),
+      general: z(e.general, a.general),
       propertyErrors: q(e.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     r
   );
 }
-function j(t) {
+function O(t) {
   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;
@@ -227,8 +227,8 @@ class X {
 }
 class Y {
   constructor(r, e) {
-    w(this, "schemaValidator");
-    w(this, "functionValidator");
+    R(this, "schemaValidator");
+    R(this, "functionValidator");
     this.schema = r, this.validateFn = e, this.schemaValidator = new Q(this.schema), this.functionValidator = new X(this.validateFn);
   }
   async validate(r) {
@@ -242,22 +242,19 @@ class Y {
     };
   }
 }
-function O(t) {
+function b(t) {
   return d(() => new Y(
-    u(t.schema),
-    u(t.validateFn)
+    c(t.schema),
+    c(t.validateFn)
   ));
 }
 function rr(t, r) {
-  const e = b({
-    validators: N([O(r)]),
+  const e = j({
+    validators: A([b(r)]),
     isValidated: !1,
-    errors: u(r.errors) ?? {
-      general: [],
-      propertyErrors: {}
-    }
+    errors: c(r.errors) ?? p.errors
   });
-  E(() => u(r.errors), async () => {
+  E(() => c(r.errors), async () => {
     const o = await s();
     n(o.errors);
   }, { immediate: !0 }), E(
@@ -271,11 +268,11 @@ function rr(t, r) {
           e.errors = p.errors;
     },
     { immediate: !0 }
-  ), E(() => t.formData, () => {
-    e.isValidated && c();
+  ), E(() => t.data, () => {
+    e.isValidated && u();
   });
   const a = (o) => {
-    const l = A(o) ? o : O(o);
+    const l = N(o) ? o : b(o);
     return e.validators.push(l), T() && B(() => {
       e.validators = e.validators.filter(
         (f) => f !== l
@@ -284,11 +281,11 @@ function rr(t, r) {
   };
   async function s() {
     const o = await Promise.all(
-      e.validators.filter((V) => u(V) !== void 0).map((V) => u(V).validate(t.formData))
+      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;
     if (!l) {
-      const V = o.map((D) => D.errors);
+      const V = o.map((w) => w.errors);
       f = S(...V);
     }
     return {
@@ -297,17 +294,17 @@ function rr(t, r) {
     };
   }
   const n = (o) => {
-    e.errors = S(u(r.errors) ?? p.errors, o);
-  }, c = async () => {
+    e.errors = S(c(r.errors) ?? p.errors, o);
+  }, u = async () => {
     const o = await s();
     return n(o.errors), e.isValidated = !0, {
-      isValid: !j(o.errors),
+      isValid: !O(o.errors),
       errors: e.errors
     };
-  }, v = d(() => !j(e.errors));
+  }, v = d(() => !O(e.errors));
   return {
     ...P(e),
-    validateForm: c,
+    validateForm: u,
     defineValidator: a,
     isValid: v
   };
@@ -336,13 +333,13 @@ class tr {
   }
 }
 function er(t, r, e) {
-  const a = M(t.formData, r), s = d(() => m(t.initialData.value, r)), n = (i) => ({
+  const a = x(t.data, r), s = d(() => m(t.initialData.value, r)), n = (i) => ({
     ...i,
-    path: d(() => u(i.path).replace(r + ".", "")),
-    setValue: (h) => {
-      i.setValue(h);
+    path: d(() => c(i.path).replace(r + ".", "")),
+    setData: (h) => {
+      i.setData(h);
     }
-  }), c = (i) => {
+  }), u = (i) => {
     const h = F(r, i), g = t.getField(h);
     if (g)
       return n(g);
@@ -358,21 +355,21 @@ function er(t, r, e) {
   }).map((i) => n(i)), l = () => t.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)), D = d(() => t.isValid.value), z = d(() => t.isValidated.value), C = d(() => L(u(t.errors), 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));
   return {
-    formData: a,
+    data: a,
     initialData: s,
     defineField: v,
-    getField: c,
+    getField: u,
     getFields: o,
     isDirty: f,
     isTouched: V,
-    isValid: D,
-    isValidated: z,
-    errors: C,
+    isValid: w,
+    isValidated: C,
+    errors: K,
     defineValidator: (i) => {
-      const h = A(i) ? i : O(i), g = d(
-        () => new tr(r, u(h))
+      const h = N(i) ? i : b(i), g = d(
+        () => new tr(r, c(h))
       );
       return t.defineValidator(g), h;
     },
@@ -388,10 +385,10 @@ function er(t, r, e) {
   };
 }
 function ur(t) {
-  const r = d(() => Object.freeze(y(t.initialData))), e = N(y(r)), a = b({
+  const r = d(() => Object.freeze(y(t.initialData))), e = A(y(r)), a = j({
     initialData: r,
-    formData: e
-  }), s = Z(a), n = rr(a, t), c = _(a, s), v = () => {
+    data: e
+  }), s = Z(a), n = rr(a, t), u = _(s), v = () => {
     e.value = y(r), s.getFields().forEach((f) => f.reset());
   };
   function o(f, V) {
@@ -400,11 +397,11 @@ function ur(t) {
   const l = {
     ...s,
     ...n,
-    ...c,
+    ...u,
     reset: v,
     getSubForm: o,
-    initialData: R(a, "initialData"),
-    formData: R(a, "formData")
+    initialData: D(a, "initialData"),
+    data: D(a, "data")
   };
   return l;
 }

package/dist/types/form.d.ts

@@ -5,18 +5,14 @@ import { EntityPaths, Paths, PickEntity, PickProps } from './util';
 import { ErrorBag, ValidationErrorMessage, ValidationErrors, ValidationResult, Validator } from './validation';
 import { ValidatorOptions } from '../composables/useValidation';
 export type FormDataDefault = object;
-export interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T> {
-    formData: T;
-    initialData: TIn;
-}
 export interface FormField<T, P extends string> {
-    value: Ref<T>;
+    data: Ref<T>;
     path: Ref<P>;
     initialValue: Readonly<Ref<T>>;
     errors: Ref<ValidationErrors>;
     touched: Ref<boolean>;
     dirty: Ref<boolean>;
-    setValue: (newValue: T) => void;
+    setData: (newData: T) => void;
     onBlur: () => void;
     onFocus: () => void;
     reset: () => void;
@@ -24,7 +20,7 @@ export interface FormField<T, P extends string> {
     clearErrors: () => void;
 }
 export interface Form<T extends FormDataDefault> {
-    formData: Ref<T>;
+    data: Ref<T>;
     initialData: Readonly<Ref<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> | undefined;

package/dist/utils/path.d.ts

@@ -4,7 +4,7 @@ import { ErrorBag } from '../types/validation';
 export declare function splitPath(path: string): string[];
 export declare function getNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>): PickProps<T, K>;
 export declare function setNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>, value: PickProps<T, K>): void;
-export declare const getLens: <T, K extends Paths<T>>(formData: MaybeRef<T>, key: MaybeRef<K | SplitPath<K>>) => WritableComputedRef<PickProps<T, K>, PickProps<T, K>>;
+export declare const getLens: <T, K extends Paths<T>>(data: MaybeRef<T>, key: MaybeRef<K | SplitPath<K>>) => WritableComputedRef<PickProps<T, K>, PickProps<T, K>>;
 type JoinPath<Base extends string, Sub extends string> = `${Base}${Base extends '' ? '' : Sub extends '' ? '' : '.'}${Sub}`;
 export declare function joinPath<Base extends string, Sub extends string>(basePath: Base, subPath: Sub): JoinPath<Base, Sub>;
 export declare function filterErrorsForPath(errors: ErrorBag, path: string): ErrorBag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "",
   "main": "index.js",
   "exports": {
@@ -9,14 +9,6 @@
       "import": "./dist/index.mjs"
     }
   },
-  "scripts": {
-    "build": "vite build",
-    "watch": "NODE_ENV=development vite build --watch",
-    "lint": "eslint --fix --ignore-pattern 'dist/**' .",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:ui": "vitest --ui"
-  },
   "keywords": [
     "vue",
     "forms",
@@ -37,5 +29,13 @@
   "dependencies": {
     "@vueuse/core": "^13.5.0",
     "zod": "^4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "watch": "NODE_ENV=development vite build --watch",
+    "lint": "eslint --fix --ignore-pattern 'dist/**' .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
   }
-}
+}

package/src/components/Field.vue

@@ -0,0 +1,23 @@
+<template>
+  <slot v-bind="field" />
+</template>
+
+<script
+  setup lang="ts"
+  generic="TPath extends Paths<TData>, TData extends object"
+>
+import type { Form } from '../types/form.ts'
+import type { Paths, PickProps } from '../types/util.ts'
+import type { UseFieldOptions } from '../composables/useField.ts'
+
+export interface FieldProps<TPath extends string, TData extends object> extends UseFieldOptions<PickProps<TData, TPath>, TPath> {
+  form: Form<TData>
+}
+
+const props = defineProps<FieldProps<TPath, TData>>()
+
+const field = props.form.defineField({
+  path: props.path,
+  required: props.required,
+})
+</script>

package/src/composables/useFieldRegistry.ts

@@ -1,5 +1,5 @@
 import { computed, toRef, unref } from 'vue'
-import type { FormDataDefault, FormField, FormState } from '../types/form'
+import type { FormDataDefault, FormField } from '../types/form'
 import type { Paths, PickProps } from '../types/util'
 import { getLens, getNestedValue } from '../utils/path'
 import { useField, type UseFieldOptions } from './useField'
@@ -11,6 +11,11 @@ export type ResolvedFormField<T, K extends Paths<T>> = FormField<PickProps<T, K>
 
 export type DefineFieldOptions<F, K extends string> = Pick<UseFieldOptions<F, K>, 'path' | 'type' | 'required'>
 
+interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T> {
+  data: T
+  initialData: TIn
+}
+
 export function useFieldRegistry<T extends FormDataDefault>(
   formState: FormState<T>,
 ) {

package/src/composables/useForm.ts

@@ -8,6 +8,8 @@ import { useFormState } from './useFormState'
 import { createSubformInterface, type SubformOptions } from './useSubform'
 import { useValidation, type ValidationOptions } from './useValidation'
 
+// TODO @Elias implement validation strategy handling
+
 export interface UseFormOptions<T extends FormDataDefault> extends ValidationOptions<T> {
   initialData: MaybeRefOrGetter<T>
   validationStrategy?: MaybeRef<ValidationStrategy>

package/src/index.ts

@@ -7,5 +7,8 @@ export { useField } from './composables/useField'
 export type { UseFieldOptions } from './composables/useField'
 
 // Types
-export type { ValidationStrategy, ValidationErrorMessage as ErrorMessage, ValidationResult, ErrorBag } from './types/validation'
+export type { ValidationStrategy, ValidationErrorMessage as ErrorMessage, ValidationResult, ErrorBag, Validator, ValidationFunction, ValidationErrors } from './types/validation'
 export type { DeepPartial } from './utils/type-helpers'
+
+export type { Form, FormField } from './types/form'
+export type { SplitPath, Paths, PickProps } from './types/util'

package/src/types/form.ts

@@ -7,11 +7,6 @@ import type { ValidatorOptions } from '../composables/useValidation'
 
 export type FormDataDefault = object
 
-export interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T> {
-  data: T
-  initialData: TIn
-}
-
 export interface FormField<T, P extends string> {
   data: Ref<T>
   path: Ref<P>

package/src/types/validation.ts

@@ -11,6 +11,7 @@ export interface ErrorBag {
 }
 
 export interface ValidationResult {
+  // TODO @Elias remove isValid
   isValid: boolean
   errors: ErrorBag
 }