@teamnovu/kit-vue-forms 0.0.1

package/src/utils/path.ts

@@ -0,0 +1,87 @@
+import { computed, unref, type MaybeRef } from 'vue'
+import type { Paths, PickProps, SplitPath } from '../types/util'
+import type { ErrorBag, ValidationErrors } from '../types/validation'
+
+export function splitPath(path: string): string[] {
+  if (path === '') {
+    return []
+  }
+  return path.split(/\s*\.\s*/).filter(Boolean)
+}
+
+export function getNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>) {
+  const splittedPath = Array.isArray(path) ? path : splitPath(path)
+  return splittedPath.reduce(
+    (current, key) => current?.[key],
+    obj as Record<string, never>,
+  ) as PickProps<T, K>
+}
+
+export function setNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>, value: PickProps<T, K>): void {
+  const keys = Array.isArray(path) ? path : splitPath(path)
+  if (keys.length === 0) {
+    throw new Error('Path cannot be empty')
+  }
+
+  const lastKey = keys.at(-1)!
+  const target = keys
+    .slice(0, -1)
+    .reduce(
+      (current, key) => current[key],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      obj as Record<string, any>,
+    )
+
+  target[lastKey] = value
+}
+
+export const getLens = <T, K extends Paths<T>>(formData: MaybeRef<T>, key: MaybeRef<K | SplitPath<K>>) => {
+  return computed({
+    get() {
+      return getNestedValue(unref(formData), unref(key))
+    },
+    set(value: PickProps<T, K>) {
+      setNestedValue(unref(formData), unref(key), value)
+    },
+  })
+}
+
+type JoinPath<Base extends string, Sub extends string> = `${Base}${Base extends '' ? '' : Sub extends '' ? '' : '.'}${Sub}`
+export function joinPath<Base extends string, Sub extends string>(basePath: Base, subPath: Sub): JoinPath<Base, Sub> {
+  if (!basePath && !subPath) {
+    return '' as JoinPath<Base, Sub>
+  }
+
+  if (!basePath && subPath) {
+    return subPath as JoinPath<Base, Sub>
+  }
+
+  if (!subPath && basePath) {
+    return basePath as JoinPath<Base, Sub>
+  }
+
+  return `${basePath}.${subPath}` as JoinPath<Base, Sub>
+}
+
+export function filterErrorsForPath(errors: ErrorBag, path: string): ErrorBag {
+  // Handle empty path - return all errors
+  if (!path) {
+    return errors
+  }
+
+  const pathPrefix = `${path}.`
+  const filteredPropertyErrors: Record<string, ValidationErrors> = Object.fromEntries(
+    Object.entries(errors.propertyErrors)
+      .filter(([errorPath]) => {
+        return errorPath.startsWith(pathPrefix)
+      })
+      .map(
+        ([errorPath, errorMessages]) => [errorPath.slice(pathPrefix.length), errorMessages],
+      ),
+  )
+
+  return {
+    general: errors.general, // Keep general errors
+    propertyErrors: filteredPropertyErrors,
+  }
+}

package/src/utils/type-helpers.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
+}

package/src/utils/validation.ts

@@ -0,0 +1,66 @@
+import type { ErrorBag, ValidationErrors } from '../types/validation'
+
+function deduplicate<T extends Array<unknown>>(arr: T): T {
+  return arr.filter(
+    (value, index, self) => self.indexOf(value) === index,
+  ) as T
+}
+
+function mergeErrorMessages(...msgs: ValidationErrors[]) {
+  return msgs.slice(1).reduce((acc, msg) => {
+    if (!acc && !msg) {
+      return undefined
+    }
+    const hasMsgErrors = (msg?.length ?? 0) > 0
+    if (!acc && (msg?.length ?? 0) > 0) {
+      return msg
+    }
+    if (!hasMsgErrors) {
+      return acc
+    }
+    const allMessages = (acc ?? []).concat(msg!)
+    return deduplicate(allMessages)
+  }, msgs[0] as ValidationErrors)
+}
+
+function mergePropertyErrors(...propertyErrors: Record<string, ValidationErrors>[]): Record<string, ValidationErrors> {
+  const allKeys = propertyErrors.map(errs => Object.keys(errs)).flat()
+
+  return allKeys.reduce((acc, key) => {
+    const values = propertyErrors.map(errs => errs[key]).filter(Boolean) as ValidationErrors[]
+
+    return {
+      ...acc,
+      [key]: mergeErrorMessages(...values),
+    }
+  }, {} as Record<string, ValidationErrors>)
+}
+
+export function mergeErrors(...errorBags: ErrorBag[]): ErrorBag {
+  if (!errorBags.length) {
+    return {
+      general: [],
+      propertyErrors: {},
+    }
+  }
+
+  const firstBag = errorBags[0]
+
+  if (errorBags.length === 1) {
+    return firstBag
+  }
+
+  return errorBags.slice(1).reduce(
+    (acc, current) => ({
+      general: mergeErrorMessages(acc.general, current.general),
+      propertyErrors: mergePropertyErrors(acc.propertyErrors ?? {}, current.propertyErrors ?? {}),
+    }),
+    firstBag,
+  )
+}
+
+export function hasErrors(errorBag: ErrorBag): boolean {
+  const hasGeneralErrors = (errorBag.general?.length ?? 0) > 0
+  const hasPropertyErrors = Object.entries(errorBag.propertyErrors).filter(([, errors]) => errors?.length).length > 0
+  return hasGeneralErrors || hasPropertyErrors
+}

package/src/utils/zod.ts

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

package/tests/formState.test.ts

@@ -0,0 +1,138 @@
+import { describe, expect, it } from 'vitest'
+import { reactive } from 'vue'
+import { FieldRegistry, useFieldRegistry } from '../src/composables/useFieldRegistry'
+import { useFormState } from '../src/composables/useFormState'
+
+describe('useFormState', () => {
+  it('should detect dirty state when form data changes', () => {
+    const initialData = {
+      name: 'John',
+      age: 30,
+    }
+    const formData = reactive({ ...initialData })
+    const fields = {} as FieldRegistry<typeof initialData>
+
+    const formState = useFormState({
+      formData,
+      initialData,
+    }, fields)
+
+    expect(formState.isDirty.value).toBe(false)
+
+    formData.name = 'Jane'
+    expect(formState.isDirty.value).toBe(true)
+  })
+
+  it('should not be dirty when data equals initial data', () => {
+    const initialData = {
+      name: 'John',
+      age: 30,
+    }
+    const formData = reactive({ ...initialData })
+    const fields = {} as FieldRegistry<typeof initialData>
+
+    const formState = useFormState({
+      formData,
+      initialData,
+    }, fields)
+
+    expect(formState.isDirty.value).toBe(false)
+
+    formData.name = 'Jane'
+    expect(formState.isDirty.value).toBe(true)
+
+    formData.name = 'John' // Back to initial
+    expect(formState.isDirty.value).toBe(false)
+  })
+
+  it('should detect touched state when any field is touched', () => {
+    const data = {
+      name: 'John',
+      email: 'john@example.com',
+    }
+    const formData = reactive(data)
+    const fields = useFieldRegistry({
+      formData,
+      initialData: data,
+    })
+
+    const nameField = fields.defineField({ path: 'name' })
+    fields.defineField({ path: 'email' })
+
+    const formState = useFormState({
+      formData,
+      initialData: {
+        name: 'John',
+        email: 'john@example.com',
+      },
+    }, fields)
+
+    expect(formState.isTouched.value).toBe(false)
+
+    nameField.onBlur()
+    expect(formState.isTouched.value).toBe(true)
+  })
+
+  it('should handle empty fields map', () => {
+    const data = { name: 'John' }
+    const formData = reactive(data)
+    const fields = useFieldRegistry({
+      formData,
+      initialData: data,
+    })
+
+    const formState = useFormState({
+      formData,
+      initialData: { name: 'John' },
+    }, fields)
+
+    expect(formState.isDirty.value).toBe(false)
+    expect(formState.isTouched.value).toBe(false)
+  })
+
+  it('should handle complex nested object changes', () => {
+    const initialData = {
+      user: {
+        name: 'John',
+        address: {
+          street: '123 Main St',
+          city: 'New York',
+        },
+      },
+    }
+    const formData = reactive(JSON.parse(JSON.stringify(initialData)))
+    const fields = useFieldRegistry({
+      formData,
+      initialData,
+    })
+
+    const formState = useFormState({
+      formData,
+      initialData,
+    }, fields)
+
+    expect(formState.isDirty.value).toBe(false)
+
+    formData.user.address.city = 'Boston'
+    expect(formState.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)
+
+    expect(formState.isDirty.value).toBe(false)
+
+    formData.tags.push('forms')
+    expect(formState.isDirty.value).toBe(true)
+  })
+})

package/tests/integration.test.ts

@@ -0,0 +1,200 @@
+import { describe, expect, it } from 'vitest'
+import { nextTick, ref } from 'vue'
+import { z } from 'zod'
+import { useForm } from '../src/composables/useForm'
+
+describe('Integration Tests', () => {
+  it('should handle complete form workflow', async () => {
+    const schema = z.object({
+      name: z.string().min(2, 'Name must be at least 2 characters'),
+      email: z.email('Invalid email'),
+      age: z.number().min(18, 'Must be 18 or older'),
+    })
+
+    const form = useForm({
+      initialData: {
+        name: '',
+        email: '',
+        age: 0,
+      },
+      schema,
+    })
+
+    // Create fields
+    const nameField = form.defineField({ path: 'name' })
+    const emailField = form.defineField({ path: 'email' })
+    const ageField = form.defineField({ path: 'age' })
+
+    // Initial state
+    expect(form.isDirty.value).toBe(false)
+    expect(form.isTouched.value).toBe(false)
+    expect(form.isValid.value).toBe(true) // No validation run yet
+    expect(form.isValidated.value).toBe(false)
+
+    // Fill out form
+    nameField.setValue('John')
+    emailField.setValue('john@example.com')
+    ageField.setValue(25)
+
+    // Form should be dirty now
+    expect(form.isDirty.value).toBe(true)
+
+    // Touch fields
+    nameField.onBlur()
+    emailField.onBlur()
+
+    // Form should be touched
+    expect(form.isTouched.value).toBe(true)
+
+    // Validate form
+    const result = await form.validateForm()
+    expect(result.isValid).toBe(true)
+    expect(form.isValidated.value).toBe(true)
+  })
+
+  it('should handle form with validation errors', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+      email: z.string().email(),
+    })
+
+    const form = useForm({
+      initialData: {
+        name: 'A',
+        email: 'invalid',
+      },
+      schema,
+    })
+
+    const nameField = form.defineField({ path: 'name' })
+    const emailField = form.defineField({ path: 'email' })
+
+    // Validate with invalid data
+    const result = await form.validateForm()
+    expect(result.isValid).toBe(false)
+    expect(result.errors.propertyErrors.name).toBeDefined()
+    expect(result.errors.propertyErrors.email).toBeDefined()
+
+    // Fix the data
+    nameField.setValue('John')
+    emailField.setValue('john@example.com')
+
+    // Re-validate
+    const result2 = await form.validateForm()
+    expect(result2.isValid).toBe(true)
+  })
+
+  it('should handle reactive initial data changes', async () => {
+    const initialData = ref({
+      name: 'John',
+      age: 30,
+    })
+    const form = useForm({ initialData })
+
+    const nameField = form.defineField({ path: 'name' })
+
+    expect(nameField.value.value).toEqual('John')
+    expect(form.formData.value).toEqual({
+      name: 'John',
+      age: 30,
+    })
+
+    // Change initial data
+    initialData.value = {
+      name: 'Jane',
+      age: 25,
+    }
+    await nextTick()
+
+    expect(form.initialData.value).toEqual({
+      name: 'Jane',
+      age: 25,
+    })
+  })
+
+  it('should handle nested object validation', async () => {
+    const schema = z.object({
+      user: z.object({
+        name: z.string().min(2),
+        contact: z.object({
+          email: z.string().email(),
+        }),
+      }),
+    })
+
+    const form = useForm({
+      initialData: {
+        user: {
+          name: 'A',
+          contact: {
+            email: 'invalid',
+          },
+        },
+      },
+      schema,
+    })
+
+    const result = await form.validateForm()
+    expect(result.isValid).toBe(false)
+    expect(result.errors.propertyErrors['user.name']).toBeDefined()
+    expect(result.errors.propertyErrors['user.contact.email']).toBeDefined()
+  })
+
+  it('should merge multiple validation sources', async () => {
+    const schema = z.object({
+      name: z.string().min(1),
+    })
+
+    const validateFn = async (data: { name: string }) => ({
+      isValid: data.name !== 'forbidden',
+      errors: {
+        general: data.name === 'forbidden' ? ['Forbidden name'] : [],
+        propertyErrors: {},
+      },
+    })
+
+    const externalErrors = ref({
+      general: ['External error'],
+      propertyErrors: { name: ['External field error'] },
+    })
+
+    const form = useForm({
+      initialData: { name: 'forbidden' },
+      schema,
+      validateFn,
+      errors: externalErrors,
+    })
+
+    const result = await form.validateForm()
+    expect(result.isValid).toBe(false)
+
+    // Should have errors from all sources
+    expect(result.errors.general).toContain('Forbidden name')
+    expect(result.errors.general).toContain('External error')
+    expect(result.errors.propertyErrors.name).toContain('External field error')
+  })
+
+  it('should handle field registry operations', () => {
+    const form = useForm({
+      initialData: {
+        name: 'John',
+        email: 'john@test.com',
+      },
+    })
+
+    // Define fields
+    const nameField = form.defineField({ path: 'name' })
+    form.defineField({ path: 'email' })
+
+    // Check registry
+    expect(form.getFields().length).toBe(2)
+
+    // Get specific field
+    const retrievedNameField = form.getField('name')
+    expect(retrievedNameField).toBe(nameField)
+
+    // Try to get non-existent field
+    const nonExistentField = form.getField('nonexistent')
+    expect(nonExistentField).toBeUndefined()
+  })
+})