@teamnovu/kit-vue-forms 0.2.17 → 0.2.18

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.18] - 2025-03-03
+
+### Fixed
+
+- Correctly pass `validationState` to subForm creation instead of `formOptions`
+- Fix build error through type on `FormFieldWrapper`
+
+## [0.2.17] - 2025-01-22
+
+### Fixed
+
+- `keepValuesOnUnmount` was `false` instead of `true` by default
+
+## [0.1.27] - 2025-01-22
+
+### Fixed
+
+- `keepValuesOnUnmount` was `false` instead of `true` by default

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

@@ -12,9 +12,7 @@ declare const _default: <TData extends FormDataDefault, TPath extends Paths<TDat
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & FormFieldWrapperProps<TData, TPath, TComponent, TDataOut> & Partial<{}>> & PublicProps;
     expose(exposed: ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: Partial<Record<number, (_: any) => any>> & {
-        default?(_: {}): any;
-    };
+    slots: Readonly<Record<string, (props: any) => any>> & Record<string, (props: any) => any>;
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/composables/useSubform.d.ts

@@ -1,6 +1,6 @@
 import { Form, FormDataDefault } from '../types/form';
 import { EntityPaths, PickEntity } from '../types/util';
-import { UseFormOptions } from './useForm';
+import { ValidationState } from './useValidation';
 export interface SubformOptions<_T extends FormDataDefault> {
 }
-export declare function createSubformInterface<T extends FormDataDefault, K extends EntityPaths<T>, TOut = T>(mainForm: Form<T, TOut>, path: K, formOptions?: UseFormOptions<T, TOut>, _options?: SubformOptions<PickEntity<T, K>>): Form<PickEntity<T, K>, PickEntity<TOut, K>>;
+export declare function createSubformInterface<T extends FormDataDefault, K extends EntityPaths<T>, TOut = T>(mainForm: Form<T, TOut>, path: K, validationState: ValidationState<T, TOut>, _options?: SubformOptions<PickEntity<T, K>>): Form<PickEntity<T, K>, PickEntity<TOut, K>>;

package/dist/index.js

@@ -3,7 +3,6 @@ var re = (r, t, e) => t in r ? te(r, t, { enumerable: !0, configurable: !0, writ
 var P = (r, t, e) => re(r, typeof t != "symbol" ? t + "" : t, e);
 import { toValue as J, toRaw as ae, shallowRef as O, watch as b, computed as m, unref as h, isRef as x, reactive as A, toRefs as G, shallowReactive as se, toRef as U, onScopeDispose as ne, triggerRef as ie, ref as Z, getCurrentScope as oe, onBeforeUnmount as le, defineComponent as N, renderSlot as C, normalizeProps as T, guardReactiveProps as W, createBlock as K, openBlock as L, withCtx as M, resolveDynamicComponent as ue, mergeProps as ce, createSlots as de, renderList as fe } from "vue";
 import { cloneDeep as he, merge as ve, omit as me } from "lodash-es";
-import "zod";
 function D(r) {
   const t = J(r), e = ae(t);
   return he(e);
@@ -359,13 +358,16 @@ function $e(r) {
   };
 }
 function Ie(r) {
-  const t = r.issues.filter((a) => a.path.length === 0).map((a) => a.message), e = r.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
-    const n = s.path.join(".");
-    return {
-      ...a,
-      [n]: [...a[n] ?? [], s.message]
-    };
-  }, {});
+  const t = r.issues.filter((a) => a.path.length === 0).map((a) => a.message), e = r.issues.filter((a) => a.path.length > 0).reduce(
+    (a, s) => {
+      const n = s.path.join(".");
+      return {
+        ...a,
+        [n]: [...a[n] ?? [], s.message]
+      };
+    },
+    {}
+  );
   return {
     general: t,
     propertyErrors: e
@@ -450,10 +452,12 @@ class Be {
   }
 }
 function _(r) {
-  return m(() => new Be(
-    h(r.schema),
-    h(r.validateFn)
-  ));
+  return m(
+    () => new Be(
+      h(r.schema),
+      h(r.validateFn)
+    )
+  );
 }
 function ke(r, t) {
   const e = A({
@@ -461,15 +465,22 @@ function ke(r, t) {
     isValidated: !1,
     errors: h(t.errors) ?? w.errors
   }), a = (i = w.errors) => {
-    e.errors = j(h(t.errors) ?? w.errors, i);
+    e.errors = j(
+      h(t.errors) ?? w.errors,
+      i
+    );
   };
-  b(() => h(t.errors), async () => {
-    if (e.isValidated) {
-      const i = await n();
-      a(i.errors);
-    } else
-      a();
-  }, { immediate: !0 }), b(
+  b(
+    () => h(t.errors),
+    async () => {
+      if (e.isValidated) {
+        const i = await n();
+        a(i.errors);
+      } else
+        a();
+    },
+    { immediate: !0 }
+  ), b(
     [() => e.validators],
     async (i) => {
       if (e.isValidated)
@@ -485,7 +496,9 @@ function ke(r, t) {
   });
   const s = (i) => {
     const o = x(i) ? i : _(i);
-    return e.validators.push(o), oe() && le(() => {
+    return e.validators.push(
+      o
+    ), oe() && le(() => {
       e.validators = e.validators.filter(
         (f) => f !== o
       );
@@ -613,7 +626,7 @@ function Ue(r, t, e, a) {
         p
       );
     },
-    submitHandler: (u) => X(k, e ?? {})(u),
+    submitHandler: (u) => X(k, e)(u),
     getFieldArray: (u, p) => Y(k, u, p)
   };
   return k;
@@ -622,7 +635,7 @@ const je = {
   keepValuesOnUnmount: !0,
   ...Oe
 };
-function ze(r) {
+function We(r) {
   r = ve({}, je, r);
   const t = m(() => D(r.initialData)), e = Z(D(t)), a = A({
     initialData: t,
@@ -661,7 +674,7 @@ function ze(r) {
     data: U(a, "data"),
     validateForm: s.validateForm,
     submitHandler: (l) => X(y, s)(l),
-    getSubForm: (l, d) => Ue(y, l, r),
+    getSubForm: (l, d) => Ue(y, l, s),
     getFieldArray: (l, d) => Y(y, l, d)
   };
   return y;
@@ -685,7 +698,7 @@ const _e = /* @__PURE__ */ N({
     }), a = A(e);
     return (s, n) => C(s.$slots, "default", T(W(a)));
   }
-}), He = /* @__PURE__ */ N({
+}), ze = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -724,7 +737,7 @@ const _e = /* @__PURE__ */ N({
       _: 3
     }, 8, ["form", "path"]));
   }
-}), Ke = /* @__PURE__ */ N({
+}), He = /* @__PURE__ */ N({
   __name: "FormPart",
   props: {
     form: {},
@@ -737,7 +750,7 @@ const _e = /* @__PURE__ */ N({
 });
 export {
   _e as Field,
-  He as FormFieldWrapper,
-  Ke as FormPart,
-  ze as useForm
+  ze as FormFieldWrapper,
+  He as FormPart,
+  We as useForm
 };

package/dist/utils/submitHandler.d.ts

@@ -1,4 +1,4 @@
 import { Awaitable } from '@vueuse/core';
 import { ValidationState } from '../composables/useValidation';
 import { Form, FormDataDefault } from '../types/form';
-export declare function makeSubmitHandler<T extends FormDataDefault, TOut = T>(form: Form<T, TOut>, validationState: ValidationState<T, TOut>): (onSubmit: (data: TOut) => Awaitable<void>) => (event?: SubmitEvent) => Promise<void>;
+export declare function makeSubmitHandler<T extends FormDataDefault, TOut = T>(form: Form<T, TOut>, validationState: Pick<ValidationState<T, TOut>, 'canValidate'>): (onSubmit: (data: TOut) => Awaitable<void>) => (event?: SubmitEvent) => Promise<void>;

package/docs/reference.md

@@ -116,6 +116,53 @@ interface Form<T extends object, TOut = T> {
 }
 ```
 
+## Method `setInitialData`
+The `setInitialData` method is available on `FormField` objects (returned by `getField` or `defineField`). It updates what is considered the "initial" value of a field. If the field is not dirty, it also updates the current data.
+
+This is useful when loading data asynchronously after the form is initialized:
+
+```typescript
+const { setInitialData } = form.getField('person.firstName')
+
+// After fetching data from an API
+const fetchedData = await fetchUserData()
+setInitialData(fetchedData.firstName)
+// If the field wasn't dirty, the current data is also updated
+```
+
+## Method `defineValidator`
+The `defineValidator` method allows subcomponents to add validation rules to a form without needing access to the initial `useForm` call. The validator is automatically removed when the component unmounts.
+
+This is particularly useful on subforms, where a reusable component can define its own validation:
+
+```vue
+<!-- AddressFields.vue - a reusable address component -->
+<script setup lang="ts">
+import type { Form } from '@teamnovu/kit-vue-forms'
+import { z } from 'zod'
+
+const props = defineProps<{
+  form: Form<{ street: string; city: string; zip: string }>
+}>()
+
+// This validation only applies while AddressFields is mounted
+props.form.defineValidator({
+  schema: z.object({
+    street: z.string().min(1, 'Street is required'),
+    city: z.string().min(1, 'City is required'),
+    zip: z.string().regex(/^\d{4}$/, 'Invalid zip code'),
+  }),
+})
+</script>
+```
+
+```vue
+<!-- Parent component using FormPart -->
+<FormPart :form="form" path="person.address" #="{ subform }">
+  <AddressFields :form="subform" />
+</FormPart>
+```
+
 ## Type `ErrorBag`
 The errors in the form are structured in an `ErrorBag` object. Most errors are tied to properties in the form. However,
 there might be cases where there are errors, that cannot be tied to one property. To account for that the `ErrorBag` satisfies the following interface:

package/package.json

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

package/src/components/FormFieldWrapper.vue

@@ -60,4 +60,6 @@ defineOptions({
 })
 
 defineProps<FormFieldWrapperProps<TData, TPath, TComponent, TDataOut>>()
+
+defineSlots<Record<string, (props: any) => any>>()
 </script>

package/src/composables/useForm.ts

@@ -113,7 +113,7 @@ export function useForm<T extends FormDataDefault, TOut = T>(
     validateForm: validationState.validateForm as Form<T, TOut>['validateForm'],
     submitHandler: onSubmit => makeSubmitHandler(form, validationState)(onSubmit),
     getSubForm: (path, subformOptions) => {
-      return createSubformInterface(form, path, options, subformOptions)
+      return createSubformInterface(form, path, validationState, subformOptions)
     },
     getFieldArray: (path, fieldArrayOptions) => {
       return useFieldArray(form, path, fieldArrayOptions)

package/src/composables/useSubform.ts

@@ -16,10 +16,10 @@ import {
 import { makeSubmitHandler } from '../utils/submitHandler'
 import { useFieldArray } from './useFieldArray'
 import type { DefineFieldOptions } from './useFieldRegistry'
-import type { UseFormOptions } from './useForm'
 import {
   createValidator,
   SuccessValidationResult,
+  type ValidationState,
   type ValidatorOptions,
 } from './useValidation'
 
@@ -65,7 +65,7 @@ export function createSubformInterface<
 >(
   mainForm: Form<T, TOut>,
   path: K,
-  formOptions?: UseFormOptions<T, TOut>,
+  validationState: ValidationState<T, TOut>,
   _options?: SubformOptions<PickEntity<T, K>>,
 ): Form<PickEntity<T, K>, PickEntity<TOut, K>> {
   type ST = PickEntity<T, K>
@@ -158,7 +158,10 @@ export function createSubformInterface<
   const errors = computed(() =>
     filterErrorsForPath(unref(mainForm.errors), path))
 
-  const validateForm = (() => mainForm.validateForm()) as Form<ST, STOut>['validateForm']
+  const validateForm = (() => mainForm.validateForm()) as Form<
+    ST,
+    STOut
+  >['validateForm']
 
   // Nested subforms
   const getSubForm = <P extends EntityPaths<ST>>(
@@ -203,7 +206,8 @@ export function createSubformInterface<
     reset,
     validateForm,
     getSubForm,
-    submitHandler: onSubmit => makeSubmitHandler(subForm, formOptions ?? {})(onSubmit),
+    submitHandler: onSubmit =>
+      makeSubmitHandler(subForm, validationState)(onSubmit),
     getFieldArray: (fieldArrayPath, fieldArrayOptions) => {
       return useFieldArray(subForm, fieldArrayPath, fieldArrayOptions)
     },

package/src/composables/useValidation.ts

@@ -1,7 +1,26 @@
-import { computed, getCurrentScope, isRef, onBeforeUnmount, reactive, ref, toRefs, toValue, unref, watch, type MaybeRef, type MaybeRefOrGetter, type Ref } from 'vue'
-import z from 'zod'
+import {
+  computed,
+  getCurrentScope,
+  isRef,
+  onBeforeUnmount,
+  reactive,
+  ref,
+  toRefs,
+  toValue,
+  unref,
+  watch,
+  type MaybeRef,
+  type MaybeRefOrGetter,
+  type Ref,
+} from 'vue'
+import type z from 'zod'
 import type { FormDataDefault } from '../types/form'
-import type { ErrorBag, ValidationFunction, ValidationResult, Validator } from '../types/validation'
+import type {
+  ErrorBag,
+  ValidationFunction,
+  ValidationResult,
+  Validator,
+} from '../types/validation'
 import { hasErrors, isValidResult, mergeErrors } from '../utils/validation'
 import { flattenError } from '../utils/zod'
 
@@ -35,7 +54,8 @@ export interface ValidatorOptions<T, TOut = T> {
   validateFn?: MaybeRef<ValidationFunction<T, TOut> | undefined>
 }
 
-export interface ValidationOptions<T, TOut = T> extends ValidatorOptions<T, TOut> {
+export interface ValidationOptions<T, TOut = T>
+  extends ValidatorOptions<T, TOut> {
   errors?: MaybeRef<ErrorBag | undefined>
   validationBeforeSubmit?: ValidationFlags
   validationAfterSubmit?: ValidationFlags
@@ -48,7 +68,8 @@ export const SuccessValidationResult: ValidationResult<never> = {
   },
 }
 
-class ZodSchemaValidator<T extends FormDataDefault, TOut = T> implements Validator<T, TOut> {
+class ZodSchemaValidator<T extends FormDataDefault, TOut = T>
+implements Validator<T, TOut> {
   constructor(private schema?: z.ZodType<TOut, T>) {}
 
   async validate(data: T): Promise<ValidationResult<TOut>> {
@@ -74,7 +95,8 @@ class ZodSchemaValidator<T extends FormDataDefault, TOut = T> implements Validat
   }
 }
 
-class FunctionValidator<T extends FormDataDefault, TOut = T> implements Validator<T, TOut> {
+class FunctionValidator<T extends FormDataDefault, TOut = T>
+implements Validator<T, TOut> {
   constructor(private validateFn?: ValidationFunction<T, TOut>) {}
 
   async validate(data: T): Promise<ValidationResult<TOut>> {
@@ -101,7 +123,8 @@ class FunctionValidator<T extends FormDataDefault, TOut = T> implements Validato
   }
 }
 
-class CombinedValidator<T extends FormDataDefault, TOut = T> implements Validator<T, TOut> {
+class CombinedValidator<T extends FormDataDefault, TOut = T>
+implements Validator<T, TOut> {
   private schemaValidator: ZodSchemaValidator<T, TOut>
   private functionValidator: FunctionValidator<T, TOut>
 
@@ -129,10 +152,13 @@ class CombinedValidator<T extends FormDataDefault, TOut = T> implements Validato
 export function createValidator<T extends FormDataDefault, TOut = T>(
   options: ValidatorOptions<T, TOut>,
 ): Ref<Validator<T, TOut> | undefined> {
-  return computed(() => new CombinedValidator(
-    unref(options.schema) as z.ZodType<TOut, T>,
-    unref(options.validateFn) as ValidationFunction<T, TOut>,
-  ))
+  return computed(
+    () =>
+      new CombinedValidator(
+        unref(options.schema) as z.ZodType<TOut, T>,
+        unref(options.validateFn) as ValidationFunction<T, TOut>,
+      ),
+  )
 }
 
 export function useValidation<T extends FormDataDefault, TOut = T>(
@@ -145,20 +171,29 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
     errors: unref(options.errors) ?? SuccessValidationResult.errors,
   })
 
-  const updateErrors = (newErrors: ErrorBag = SuccessValidationResult.errors) => {
-    validationState.errors = mergeErrors(unref(options.errors) ?? SuccessValidationResult.errors, newErrors)
+  const updateErrors = (
+    newErrors: ErrorBag = SuccessValidationResult.errors,
+  ) => {
+    validationState.errors = mergeErrors(
+      unref(options.errors) ?? SuccessValidationResult.errors,
+      newErrors,
+    )
   }
 
   // Watch for changes in the error bag and update validation state
-  watch(() => unref(options.errors), async () => {
-    if (validationState.isValidated) {
-      const validationResults = await getValidationResults()
+  watch(
+    () => unref(options.errors),
+    async () => {
+      if (validationState.isValidated) {
+        const validationResults = await getValidationResults()
 
-      updateErrors(validationResults.errors)
-    } else {
-      updateErrors()
-    }
-  }, { immediate: true })
+        updateErrors(validationResults.errors)
+      } else {
+        updateErrors()
+      }
+    },
+    { immediate: true },
+  )
 
   // Watch for changes in validation function or schema
   // to trigger validation. Only run if validation is already validated.
@@ -187,11 +222,15 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
   })
 
   const defineValidator = <TData extends T, TDataOut extends TOut>(
-    options: ValidatorOptions<TData, TDataOut> | Ref<Validator<TData, TDataOut>>,
+    options:
+      | ValidatorOptions<TData, TDataOut>
+      | Ref<Validator<TData, TDataOut>>,
   ) => {
     const validator = isRef(options) ? options : createValidator(options)
 
-    validationState.validators.push(validator as Ref<Validator<T, TOut> | undefined>)
+    validationState.validators.push(
+      validator as Ref<Validator<T, TOut> | undefined>,
+    )
 
     if (getCurrentScope()) {
       onBeforeUnmount(() => {
@@ -240,7 +279,9 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
     }
   }
 
-  const validateField = async (path: string): Promise<ValidationResult<TOut>> => {
+  const validateField = async (
+    path: string,
+  ): Promise<ValidationResult<TOut>> => {
     const validationResults = await getValidationResults()
 
     updateErrors({
@@ -272,7 +313,10 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
     return toValue(flags?.[flag] ?? false)
   }
 
-  const validateStrategy = <K extends keyof ValidationFlags>(flag: K, path: string) => {
+  const validateStrategy = <K extends keyof ValidationFlags>(
+    flag: K,
+    path: string,
+  ) => {
     if (!canValidate(flag)) {
       return
     }
@@ -292,4 +336,6 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
   }
 }
 
-export type ValidationState<T extends FormDataDefault, TOut = T> = ReturnType<typeof useValidation<T, TOut>>
+export type ValidationState<T extends FormDataDefault, TOut = T> = ReturnType<
+  typeof useValidation<T, TOut>
+>

package/src/types/form.ts

@@ -5,11 +5,11 @@ import type { SubformOptions } from '../composables/useSubform'
 import type { ValidatorOptions } from '../composables/useValidation'
 import type { EntityPaths, Paths, PickEntity, PickProps } from './util'
 import type {
-    ErrorBag,
-    ValidationErrorMessage,
-    ValidationErrors,
-    ValidationResult,
-    Validator,
+  ErrorBag,
+  ValidationErrorMessage,
+  ValidationErrors,
+  ValidationResult,
+  Validator,
 } from './validation'
 
 export type FormDataDefault = object

package/src/types/util.ts

@@ -1,4 +1,3 @@
-import type { Prop } from 'vue'
 import type { FormDataDefault } from './form'
 
 /**

package/src/utils/submitHandler.ts

@@ -5,7 +5,7 @@ import { isValidResult } from './validation'
 
 export function makeSubmitHandler<T extends FormDataDefault, TOut = T>(
   form: Form<T, TOut>,
-  validationState: ValidationState<T, TOut>,
+  validationState: Pick<ValidationState<T, TOut>, 'canValidate'>,
 ) {
   return (onSubmit: (data: TOut) => Awaitable<void>) => {
     return async (event?: SubmitEvent) => {

package/src/utils/zod.ts

@@ -1,4 +1,4 @@
-import z from 'zod'
+import type z from 'zod'
 import type { ErrorBag } from '../types/validation'
 
 export function flattenError(error: z.ZodError): ErrorBag {
@@ -8,14 +8,17 @@ export function flattenError(error: z.ZodError): ErrorBag {
 
   const propertyErrors = error.issues
     .filter(issue => issue.path.length > 0)
-    .reduce((acc, issue) => {
-      const path = issue.path.join('.')
+    .reduce(
+      (acc, issue) => {
+        const path = issue.path.join('.')
 
-      return {
-        ...acc,
-        [path]: [...(acc[path] ?? []), issue.message],
-      }
-    }, {} as ErrorBag['propertyErrors'])
+        return {
+          ...acc,
+          [path]: [...(acc[path] ?? []), issue.message],
+        }
+      },
+      {} as ErrorBag['propertyErrors'],
+    )
 
   return {
     general,

package/tests/path-utils.test.ts

@@ -156,4 +156,3 @@ describe('Path Utilities', () => {
     })
   })
 })
-