@teamnovu/kit-vue-forms 0.0.1

package/tests/useField.test.ts

@@ -0,0 +1,147 @@
+import { describe, it, expect } from 'vitest'
+import { ref, nextTick } from 'vue'
+import { useField } from '../src/composables/useField'
+
+describe('useField', () => {
+  it('should initialize field with path', () => {
+    const field = useField({ path: 'name' })
+
+    expect(field.path.value).toBe('name')
+    expect(field.touched.value).toBe(false)
+    expect(field.dirty.value).toBe(false)
+  })
+
+  it('should initialize field with value and initial value', () => {
+    const field = useField({
+      path: 'name',
+      value: 'John',
+      initialValue: 'John',
+    })
+
+    expect(field.value.value).toBe('John')
+    expect(field.initialValue.value).toBe('John')
+    expect(field.dirty.value).toBe(false)
+  })
+
+  it('should detect dirty state when value changes', () => {
+    const field = useField({
+      path: 'name',
+      value: 'John',
+      initialValue: 'John',
+    })
+
+    expect(field.dirty.value).toBe(false)
+
+    field.setValue('Jane')
+    expect(field.value.value).toBe('Jane')
+    expect(field.dirty.value).toBe(true)
+  })
+
+  it('should handle reactive initial value', async () => {
+    const initialValue = ref('John')
+    const field = useField({
+      path: 'name',
+      initialValue,
+    })
+
+    expect(field.initialValue.value).toBe('John')
+
+    initialValue.value = 'Jane'
+    await nextTick()
+
+    expect(field.initialValue.value).toBe('Jane')
+  })
+
+  it('should handle touched state', () => {
+    const field = useField({ path: 'name' })
+
+    expect(field.touched.value).toBe(false)
+
+    field.onBlur()
+    expect(field.touched.value).toBe(true)
+  })
+
+  it('should handle errors', () => {
+    const field = useField({
+      path: 'name',
+      errors: ['Required field'],
+    })
+
+    expect(field.errors.value).toEqual(['Required field'])
+
+    field.setErrors(['New error'])
+    expect(field.errors.value).toEqual(['New error'])
+
+    field.clearErrors()
+    expect(field.errors.value).toEqual([])
+  })
+
+  it('should handle reactive errors', async () => {
+    const errors = ref(['Initial error'])
+    const field = useField({
+      path: 'name',
+      errors,
+    })
+
+    expect(field.errors.value).toEqual(['Initial error'])
+
+    errors.value = ['Updated error']
+    await nextTick()
+
+    expect(field.errors.value).toEqual(['Updated error'])
+  })
+
+  it('should reset field to initial state', () => {
+    const field = useField({
+      path: 'name',
+      value: 'John',
+      initialValue: 'Initial',
+    })
+
+    field.setValue('Modified')
+    field.onBlur()
+    field.setErrors(['Error'])
+
+    expect(field.value.value).toBe('Modified')
+    expect(field.touched.value).toBe(true)
+    expect(field.errors.value).toEqual(['Error'])
+    expect(field.dirty.value).toBe(true)
+
+    field.reset()
+
+    expect(field.value.value).toBe('Initial')
+    expect(field.touched.value).toBe(false)
+    expect(field.errors.value).toEqual([])
+    expect(field.dirty.value).toBe(false)
+  })
+
+  it('should handle complex object values', () => {
+    const initialValue = { nested: { value: 'test' } }
+    const field = useField({
+      path: 'complex',
+      value: initialValue,
+      initialValue,
+    })
+
+    expect(field.value.value).toEqual(initialValue)
+    expect(field.dirty.value).toBe(false)
+
+    field.setValue({ nested: { value: 'changed' } })
+    expect(field.dirty.value).toBe(true)
+  })
+
+  it('should handle array values', () => {
+    const initialValue = ['a', 'b', 'c']
+    const field = useField({
+      path: 'array',
+      value: initialValue,
+      initialValue,
+    })
+
+    expect(field.value.value).toEqual(initialValue)
+    expect(field.dirty.value).toBe(false)
+
+    field.setValue(['a', 'b', 'c', 'd'])
+    expect(field.dirty.value).toBe(true)
+  })
+})

package/tests/useForm.test.ts

@@ -0,0 +1,178 @@
+import { describe, it, expect } from 'vitest'
+import { ref, nextTick } from 'vue'
+import { useForm } from '../src/composables/useForm'
+import { z } from 'zod'
+
+describe('useForm', () => {
+  it('should initialize form with initial data', () => {
+    const initialData = {
+      name: 'John',
+      age: 30,
+    }
+    const form = useForm({ initialData })
+
+    expect(form.formData.value).toEqual(initialData)
+    expect(form.initialData.value).toEqual(initialData)
+  })
+
+  it('should initialize form with reactive initial data', async () => {
+    const initialData = ref({
+      name: 'John',
+      age: 30,
+    })
+    const form = useForm({ initialData })
+
+    expect(form.formData.value).toEqual({
+      name: 'John',
+      age: 30,
+    })
+
+    // Update reactive initial data
+    initialData.value = {
+      name: 'Jane',
+      age: 25,
+    }
+    await nextTick()
+
+    expect(form.initialData.value).toEqual({
+      name: 'Jane',
+      age: 25,
+    })
+  })
+
+  it('should have initial state values', () => {
+    const form = useForm({ initialData: { name: 'John' } })
+
+    expect(form.isDirty.value).toBe(false)
+    expect(form.isTouched.value).toBe(false)
+    expect(form.isValid.value).toBe(true)
+    expect(form.isValidated.value).toBe(false)
+  })
+
+  it('should define fields and auto-register them', () => {
+    const form = useForm({
+      initialData: {
+        name: 'John',
+        email: 'john@example.com',
+      },
+    })
+
+    const nameField = form.defineField({ path: 'name' })
+    const emailField = form.defineField({ path: 'email' })
+
+    expect(nameField.path.value).toBe('name')
+    expect(emailField.path.value).toBe('email')
+    expect(form.getFields().length).toBe(2)
+  })
+
+  it('should get registered fields', () => {
+    const form = useForm({
+      initialData: {
+        name: 'John',
+        email: 'john@example.com',
+      },
+    })
+
+    const nameField = form.defineField({ path: 'name' })
+    form.defineField({ path: 'email' })
+
+    const retrievedField = form.getField('name')
+    expect(retrievedField?.path.value).toBe('name')
+    expect(retrievedField).toBe(nameField)
+  })
+
+  it('should return undefined for non-existent fields', () => {
+    const form = useForm({ initialData: { name: 'John' } })
+
+    const field = form.getField('nonexistent')
+    expect(field).toBeUndefined()
+  })
+
+  it('should handle nested object initial data', () => {
+    const initialData = {
+      user: {
+        name: 'John',
+        address: {
+          street: '123 Main St',
+          city: 'New York',
+        },
+      },
+    }
+    const form = useForm({ initialData })
+
+    expect(form.formData.value).toEqual(initialData)
+    expect(form.initialData.value).toEqual(initialData)
+  })
+
+  it('should validate with schema', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+      age: z.number().min(18),
+    })
+
+    const form = useForm({
+      initialData: {
+        name: 'A',
+        age: 16,
+      },
+      schema,
+    })
+
+    const result = await form.validateForm()
+
+    expect(result.isValid).toBe(false)
+    expect(form.isValidated.value).toBe(true)
+    expect(form.errors.value.propertyErrors.name).toBeDefined()
+    expect(form.errors.value.propertyErrors.age).toBeDefined()
+  })
+
+  it('should validate with custom function', async () => {
+    const validateFn = async (data: { name: string }) => {
+      const errors = {
+        general: [],
+        propertyErrors: {} as Record<string, string[]>,
+      }
+
+      if (data.name.length < 2) {
+        errors.propertyErrors.name = ['Name too short']
+      }
+
+      return {
+        isValid: Object.keys(errors.propertyErrors).length === 0,
+        errors,
+      }
+    }
+
+    const form = useForm({
+      initialData: { name: 'A' },
+      validateFn,
+    })
+
+    const result = await form.validateForm()
+
+    expect(result.isValid).toBe(false)
+    expect(result.errors.propertyErrors.name).toEqual(['Name too short'])
+  })
+
+  it('should pass validation with valid data', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+      age: z.number().min(18),
+    })
+
+    const form = useForm({
+      initialData: {
+        name: 'John',
+        age: 30,
+      },
+      schema,
+    })
+
+    const result = await form.validateForm()
+
+    expect(result.isValid).toBe(true)
+    expect(form.isValidated.value).toBe(true)
+    expect(form.errors.value.general).toEqual([])
+    expect(form.errors.value.propertyErrors).toEqual({})
+  })
+})

package/tests/useValidation.test.ts

@@ -0,0 +1,216 @@
+import { describe, expect, it } from 'vitest'
+import { nextTick, ref } from 'vue'
+import { z } from 'zod'
+import { SuccessValidationResult, useValidation } from '../src/composables/useValidation'
+import { ErrorBag } from '../src/types/validation'
+import { hasErrors } from '../src/utils/validation'
+
+describe('useValidation', () => {
+  it('should initialize with no errors', () => {
+    const formState = { formData: { name: 'John' } }
+    const validation = useValidation(formState, {})
+
+    expect(validation.isValidated.value).toBe(false)
+    expect(validation.errors.value.general).toEqual([])
+    expect(validation.errors.value.propertyErrors).toEqual({})
+  })
+
+  it('should validate with Zod schema successfully', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+      age: z.number().min(18),
+    })
+
+    const formState = {
+      formData: {
+        name: 'John',
+        age: 30,
+      },
+    }
+    const validation = useValidation(formState, { schema })
+
+    const result = await validation.validateForm()
+
+    expect(result.isValid).toBe(true)
+    expect(validation.isValidated.value).toBe(true)
+    expect(result.errors.general).toEqual([])
+    expect(result.errors.propertyErrors).toEqual({})
+  })
+
+  it('should validate with Zod schema and return errors', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+      age: z.number().min(18),
+    })
+
+    const formState = {
+      formData: {
+        name: 'A',
+        age: 16,
+      },
+    }
+    const validation = useValidation(formState, { schema })
+
+    const result = await validation.validateForm()
+
+    expect(result.isValid).toBe(false)
+    expect(validation.isValidated.value).toBe(true)
+    expect(result.errors.propertyErrors.name).toBeDefined()
+    expect(result.errors.propertyErrors.age).toBeDefined()
+  })
+
+  it('should validate with custom validation function', async () => {
+    const validateFn = async (data: { name: string }) => {
+      const errors: ErrorBag = {
+        general: [],
+        propertyErrors: {} as Record<string, string[]>,
+      }
+
+      if (data.name.length < 2) {
+        errors.propertyErrors.name = ['Name too short']
+      }
+
+      if (data.name === 'admin') {
+        errors.general = ['Admin name not allowed']
+      }
+
+      return {
+        isValid: !hasErrors(errors),
+        errors,
+      }
+    }
+
+    const formState = { formData: { name: 'A' } }
+    const validation = useValidation(formState, { validateFn })
+
+    const result = await validation.validateForm()
+
+    expect(result.isValid).toBe(false)
+    expect(result.errors.propertyErrors.name).toEqual(['Name too short'])
+  })
+
+  it('should validate with both schema and function', 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 formState = { formData: { name: 'forbidden' } }
+    const validation = useValidation(formState, {
+      schema,
+      validateFn,
+    })
+
+    const result = await validation.validateForm()
+
+    expect(result.isValid).toBe(false)
+    expect(result.errors.general).toEqual(['Forbidden name'])
+  })
+
+  it('should handle reactive schema changes', async () => {
+    const schema = ref(z.object({
+      name: z.string().min(2),
+    }))
+
+    const formState = {
+      formData: {
+        name: 'A',
+        age: 25,
+      },
+    }
+    const validation = useValidation(formState, { schema })
+
+    // Initial validation
+    let result = await validation.validateForm()
+    expect(result.isValid).toBe(false)
+
+    // Change schema to be more permissive
+    schema.value = z.object({
+      name: z.string().min(1),
+    })
+
+    await nextTick()
+    result = await validation.validateForm()
+    expect(result.isValid).toBe(true)
+  })
+
+  it('should handle reactive validation function changes', async () => {
+    const strictValidation = async (data: { name: string }) => ({
+      isValid: data.name.length >= 5,
+      errors: {
+        general: [],
+        propertyErrors: data.name.length < 5 ? { name: ['Too short'] } : {},
+      },
+    })
+
+    const lenientValidation = async () => ({
+      isValid: true,
+      errors: {
+        general: [],
+        propertyErrors: {},
+      },
+    })
+
+    const validateFn = ref(strictValidation)
+    const formState = { formData: { name: 'John' } }
+    const validation = useValidation(formState, { validateFn })
+
+    // Initial validation with strict rules
+    let result = await validation.validateForm()
+    expect(result.isValid).toBe(false)
+
+    // Change to lenient validation
+    validateFn.value = lenientValidation
+    await nextTick()
+    result = await validation.validateForm()
+    expect(result.isValid).toBe(true)
+  })
+
+  it('should handle external error injection', async () => {
+    const errors = ref({
+      general: ['External error'],
+      propertyErrors: { name: ['External field error'] },
+    })
+
+    const formState = { formData: { name: 'John' } }
+    const validation = useValidation(formState, { errors })
+
+    await nextTick()
+
+    expect(validation.errors.value.general).toEqual(['External error'])
+    expect(validation.errors.value.propertyErrors.name).toEqual(['External field error'])
+  })
+
+  it('should merge validation errors with external errors', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+    })
+
+    const errors = ref<ErrorBag>(SuccessValidationResult.errors)
+
+    const formState = { formData: { name: 'A' } }
+    const validation = useValidation(formState, {
+      schema,
+      errors,
+    })
+
+    errors.value = {
+      general: ['External error'],
+      propertyErrors: { email: ['External email error'] },
+    }
+
+    const result = await validation.validateForm()
+
+    expect(result.isValid).toBe(false)
+    expect(result.errors.general).toEqual(['External error'])
+    expect(result.errors.propertyErrors.name).toEqual(['Too small: expected string to have >=2 characters']) // From schema validation
+    expect(result.errors.propertyErrors.email).toEqual(['External email error'])
+  })
+})

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "verbatimModuleSyntax": true,
+    "types": [
+      "vue",
+      "vite/client",
+    ],
+  },
+  "include": [
+    "src/**/*",
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

package/vite.config.js

@@ -0,0 +1,39 @@
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import pkg from './package.json'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      staticImport: true,
+    }),
+  ],
+  build: {
+    emptyOutDir: false,
+    lib: {
+      formats: ['es'],
+      // Could also be a dictionary or array of multiple entry points
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+      },
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: [
+        ...Object.keys(pkg.dependencies ?? {}),
+        ...Object.keys(pkg.peerDependencies ?? {}),
+      ],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+})

package/vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'path'
+
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+})