@teamnovu/kit-vue-forms 0.0.1 → 0.0.2

package/PLAN.md

@@ -1,3 +1,5 @@
+# DEPRECATED
+
 # Vue Forms Library - MVP Plan
 
 ## Overview
@@ -206,4 +208,4 @@ src/
 - Direct form instance passing maintains type safety
 - Subform extraction enables component reusability
 - Validation strategies can be overridden per field
-- Backend validation seamlessly integrates with Zod
+- Backend validation seamlessly integrates with Zod

package/package.json

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

package/src/composables/useField.ts

@@ -29,8 +29,8 @@ export function useField<T, K extends string>(options: UseFieldOptions<T, K>): F
     return JSON.stringify(state.value) !== JSON.stringify(state.initialValue)
   })
 
-  const setValue = (newValue: T): void => {
-    state.value = newValue
+  const setData = (newData: T): void => {
+    state.value = newData
   }
 
   const onBlur = (): void => {
@@ -58,13 +58,13 @@ export function useField<T, K extends string>(options: UseFieldOptions<T, K>): F
   const refs = toRefs(state)
 
   return {
-    value: refs.value as FormField<T, K>['value'],
+    data: refs.value as FormField<T, K>['data'],
     path: refs.path as FormField<T, K>['path'],
     initialValue: refs.initialValue as FormField<T, K>['initialValue'],
     errors: refs.errors as FormField<T, K>['errors'],
     touched: refs.touched as FormField<T, K>['touched'],
     dirty,
-    setValue,
+    setData,
     onBlur,
     onFocus,
     reset,

package/src/composables/useFieldRegistry.ts

@@ -32,7 +32,7 @@ export function useFieldRegistry<T extends FormDataDefault>(
   const defineField = <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => {
     const field = useField({
       ...options,
-      value: getLens(toRef(formState, 'formData'), options.path),
+      value: getLens(toRef(formState, 'data'), options.path),
       initialValue: computed(() => getNestedValue(formState.initialData, unref(options.path))),
     })
 

package/src/composables/useForm.ts

@@ -17,19 +17,19 @@ export interface UseFormOptions<T extends FormDataDefault> extends ValidationOpt
 export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
   const initialData = computed(() => Object.freeze(cloneRefValue(options.initialData)))
 
-  const formData = ref<T>(cloneRefValue(initialData)) as Ref<T>
+  const data = ref<T>(cloneRefValue(initialData)) as Ref<T>
 
   const state = reactive({
     initialData: initialData,
-    formData,
+    data,
   })
 
   const fields = useFieldRegistry(state)
   const validationState = useValidation(state, options)
-  const formState = useFormState(state, fields)
+  const formState = useFormState(fields)
 
   const reset = () => {
-    formData.value = cloneRefValue(initialData)
+    data.value = cloneRefValue(initialData)
     fields.getFields().forEach(field => field.reset())
   }
 
@@ -47,7 +47,7 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
     reset,
     getSubForm,
     initialData: toRef(state, 'initialData') as Form<T>['initialData'],
-    formData: toRef(state, 'formData') as Form<T>['formData'],
+    data: toRef(state, 'data') as Form<T>['data'],
   }
 
   return formInterface

package/src/composables/useFormData.ts

@@ -4,13 +4,13 @@ import type { FormDataDefault } from '../types/form'
 export function useFormData<T extends FormDataDefault>(
   initialData: Ref<T>,
 ) {
-  const formData = ref(unref(initialData))
+  const data = ref(unref(initialData))
 
   watch(initialData, (newData) => {
-    if (newData !== formData.value) {
-      formData.value = newData
+    if (newData !== data.value) {
+      data.value = newData
     }
   })
 
-  return { formData }
+  return { data }
 }

package/src/composables/useFormState.ts

@@ -1,13 +1,12 @@
 import { computed, unref } from 'vue'
-import type { FormDataDefault, FormState } from '../types/form'
+import type { FormDataDefault } from '../types/form'
 import type { FieldRegistry } from './useFieldRegistry'
 
 export function useFormState<T extends FormDataDefault>(
-  formState: FormState<T>,
   formFieldRegistry: FieldRegistry<T>,
 ) {
   const isDirty = computed(() => {
-    return JSON.stringify(formState.formData) !== JSON.stringify(formState.initialData)
+    return formFieldRegistry.getFields().some(field => unref(field.dirty))
   })
 
   const isTouched = computed(() => {

package/src/composables/useSubform.ts

@@ -57,7 +57,7 @@ export function createSubformInterface<
   type ScopedMainPaths = Paths<T> & MP<SP>
 
   // Create reactive data scoped to subform path
-  const formData = getLens(mainForm.formData, path) as Ref<ST>
+  const data = getLens(mainForm.data, path) as Ref<ST>
 
   const initialData = computed(() => {
     return getNestedValue(mainForm.initialData.value, path) as ST
@@ -70,8 +70,8 @@ export function createSubformInterface<
     return {
       ...field,
       path: computed(() => unref(field.path).replace(path + '.', '')),
-      setValue: (newValue: PickProps<ST, S>) => {
-        field.setValue(newValue as PickProps<T, ScopedMainPaths>)
+      setData: (newData: PickProps<ST, S>) => {
+        field.setData(newData as PickProps<T, ScopedMainPaths>)
       },
     } as unknown as FormField<PickProps<ST, S>, S>
   }
@@ -155,7 +155,7 @@ export function createSubformInterface<
   }
 
   return {
-    formData,
+    data: data,
     initialData,
     defineField,
     getField,

package/src/composables/useValidation.ts

@@ -11,7 +11,7 @@ export interface ValidatorOptions<T> {
 }
 
 export interface ValidationOptions<T> extends ValidatorOptions<T> {
-  errors?: MaybeRef<ErrorBag>
+  errors?: MaybeRef<ErrorBag | undefined>
 }
 
 export const SuccessValidationResult: ValidationResult = {
@@ -113,16 +113,13 @@ export function createValidator<T extends FormDataDefault>(
 }
 
 export function useValidation<T extends FormDataDefault>(
-  formState: { formData: T },
+  formState: { data: T },
   options: ValidationOptions<T>,
 ) {
   const validationState = reactive({
     validators: ref<Ref<Validator<T> | undefined>[]>([createValidator(options)]),
     isValidated: false,
-    errors: unref(options.errors) ?? {
-      general: [],
-      propertyErrors: {},
-    },
+    errors: unref(options.errors) ?? SuccessValidationResult.errors,
   })
 
   // Watch for changes in the error bag and update validation state
@@ -152,7 +149,7 @@ export function useValidation<T extends FormDataDefault>(
   )
 
   // Watch for changes in form data to trigger validation
-  watch(() => formState.formData, () => {
+  watch(() => formState.data, () => {
     if (validationState.isValidated) {
       validateForm()
     }
@@ -178,7 +175,7 @@ export function useValidation<T extends FormDataDefault>(
     const validationResults = await Promise.all(
       validationState.validators
         .filter(validator => unref(validator) !== undefined)
-        .map(validator => unref(validator)!.validate(formState.formData)),
+        .map(validator => unref(validator)!.validate(formState.data)),
     )
 
     const isValid = validationResults.every(result => result.isValid)

package/src/index.ts

@@ -8,4 +8,4 @@ export type { UseFieldOptions } from './composables/useField'
 
 // Types
 export type { ValidationStrategy, ValidationErrorMessage as ErrorMessage, ValidationResult, ErrorBag } from './types/validation'
-export type { DeepPartial, FormData } from './utils/type-helpers'
+export type { DeepPartial } from './utils/type-helpers'

package/src/types/form.ts

@@ -8,18 +8,18 @@ import type { ValidatorOptions } from '../composables/useValidation'
 export type FormDataDefault = object
 
 export interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T> {
-  formData: T
+  data: 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
@@ -29,7 +29,7 @@ export interface FormField<T, P extends string> {
 
 export interface Form<T extends FormDataDefault> {
   // Data properties
-  formData: Ref<T>
+  data: Ref<T>
   initialData: Readonly<Ref<T>>
 
   // Field operations

package/src/utils/path.ts

@@ -35,13 +35,13 @@ export function setNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPat
   target[lastKey] = value
 }
 
-export const getLens = <T, K extends Paths<T>>(formData: MaybeRef<T>, key: MaybeRef<K | SplitPath<K>>) => {
+export const getLens = <T, K extends Paths<T>>(data: MaybeRef<T>, key: MaybeRef<K | SplitPath<K>>) => {
   return computed({
     get() {
-      return getNestedValue(unref(formData), unref(key))
+      return getNestedValue(unref(data), unref(key))
     },
     set(value: PickProps<T, K>) {
-      setNestedValue(unref(formData), unref(key), value)
+      setNestedValue(unref(data), unref(key), value)
     },
   })
 }

package/tests/formState.test.ts

@@ -1,7 +1,8 @@
 import { describe, expect, it } from 'vitest'
 import { reactive } from 'vue'
-import { FieldRegistry, useFieldRegistry } from '../src/composables/useFieldRegistry'
+import { useFieldRegistry } from '../src/composables/useFieldRegistry'
 import { useFormState } from '../src/composables/useFormState'
+import { useForm } from '../src'
 
 describe('useFormState', () => {
   it('should detect dirty state when form data changes', () => {
@@ -9,18 +10,15 @@ describe('useFormState', () => {
       name: 'John',
       age: 30,
     }
-    const formData = reactive({ ...initialData })
-    const fields = {} as FieldRegistry<typeof initialData>
 
-    const formState = useFormState({
-      formData,
-      initialData,
-    }, fields)
+    const form = useForm({ initialData: initialData })
+    form.defineField({ path: 'name' })
+    form.defineField({ path: 'age' })
 
-    expect(formState.isDirty.value).toBe(false)
+    expect(form.isDirty.value).toBe(false)
 
-    formData.name = 'Jane'
-    expect(formState.isDirty.value).toBe(true)
+    form.data.value.name = 'Jane'
+    expect(form.isDirty.value).toBe(true)
   })
 
   it('should not be dirty when data equals initial data', () => {
@@ -28,44 +26,34 @@ describe('useFormState', () => {
       name: 'John',
       age: 30,
     }
-    const formData = reactive({ ...initialData })
-    const fields = {} as FieldRegistry<typeof initialData>
-
-    const formState = useFormState({
-      formData,
-      initialData,
-    }, fields)
+    const form = useForm({ initialData: initialData })
+    form.defineField({ path: 'name' })
+    form.defineField({ path: 'age' })
 
-    expect(formState.isDirty.value).toBe(false)
+    expect(form.isDirty.value).toBe(false)
 
-    formData.name = 'Jane'
-    expect(formState.isDirty.value).toBe(true)
+    form.data.value.name = 'Jane'
+    expect(form.isDirty.value).toBe(true)
 
-    formData.name = 'John' // Back to initial
-    expect(formState.isDirty.value).toBe(false)
+    form.data.value.name = 'John' // Back to initial
+    expect(form.isDirty.value).toBe(false)
   })
 
   it('should detect touched state when any field is touched', () => {
-    const data = {
+    const initialData = {
       name: 'John',
       email: 'john@example.com',
     }
-    const formData = reactive(data)
+    const data = reactive(initialData)
     const fields = useFieldRegistry({
-      formData,
-      initialData: data,
+      data,
+      initialData,
     })
 
     const nameField = fields.defineField({ path: 'name' })
     fields.defineField({ path: 'email' })
 
-    const formState = useFormState({
-      formData,
-      initialData: {
-        name: 'John',
-        email: 'john@example.com',
-      },
-    }, fields)
+    const formState = useFormState(fields)
 
     expect(formState.isTouched.value).toBe(false)
 
@@ -74,17 +62,14 @@ describe('useFormState', () => {
   })
 
   it('should handle empty fields map', () => {
-    const data = { name: 'John' }
-    const formData = reactive(data)
+    const initialData = { name: 'John' }
+    const data = reactive(initialData)
     const fields = useFieldRegistry({
-      formData,
-      initialData: data,
+      data,
+      initialData,
     })
 
-    const formState = useFormState({
-      formData,
-      initialData: { name: 'John' },
-    }, fields)
+    const formState = useFormState(fields)
 
     expect(formState.isDirty.value).toBe(false)
     expect(formState.isTouched.value).toBe(false)
@@ -100,39 +85,25 @@ describe('useFormState', () => {
         },
       },
     }
-    const formData = reactive(JSON.parse(JSON.stringify(initialData)))
-    const fields = useFieldRegistry({
-      formData,
-      initialData,
-    })
 
-    const formState = useFormState({
-      formData,
-      initialData,
-    }, fields)
+    const form = useForm({ initialData: initialData })
+    form.defineField({ path: 'user' })
 
-    expect(formState.isDirty.value).toBe(false)
+    expect(form.isDirty.value).toBe(false)
 
-    formData.user.address.city = 'Boston'
-    expect(formState.isDirty.value).toBe(true)
+    form.data.value.user.address.city = 'Boston'
+    expect(form.isDirty.value).toBe(true)
   })
 
   it('should handle array changes', () => {
     const initialData = { tags: ['vue', 'typescript'] }
-    const formData = reactive({ tags: [...initialData.tags] })
-    const fields = useFieldRegistry({
-      formData,
-      initialData,
-    })
 
-    const formState = useFormState({
-      formData,
-      initialData,
-    }, fields)
+    const form = useForm({ initialData: initialData })
+    form.defineField({ path: 'tags' })
 
-    expect(formState.isDirty.value).toBe(false)
+    expect(form.isDirty.value).toBe(false)
 
-    formData.tags.push('forms')
-    expect(formState.isDirty.value).toBe(true)
+    form.data.value.tags.push('forms')
+    expect(form.isDirty.value).toBe(true)
   })
 })

package/tests/integration.test.ts

@@ -32,9 +32,9 @@ describe('Integration Tests', () => {
     expect(form.isValidated.value).toBe(false)
 
     // Fill out form
-    nameField.setValue('John')
-    emailField.setValue('john@example.com')
-    ageField.setValue(25)
+    nameField.setData('John')
+    emailField.setData('john@example.com')
+    ageField.setData(25)
 
     // Form should be dirty now
     expect(form.isDirty.value).toBe(true)
@@ -76,8 +76,8 @@ describe('Integration Tests', () => {
     expect(result.errors.propertyErrors.email).toBeDefined()
 
     // Fix the data
-    nameField.setValue('John')
-    emailField.setValue('john@example.com')
+    nameField.setData('John')
+    emailField.setData('john@example.com')
 
     // Re-validate
     const result2 = await form.validateForm()
@@ -93,8 +93,8 @@ describe('Integration Tests', () => {
 
     const nameField = form.defineField({ path: 'name' })
 
-    expect(nameField.value.value).toEqual('John')
-    expect(form.formData.value).toEqual({
+    expect(nameField.data.value).toEqual('John')
+    expect(form.data.value).toEqual({
       name: 'John',
       age: 30,
     })