@@ -16,12 +16,11 @@ A powerful, declarative form validation library for Vue 3 that abstracts away Zo
1616- [ Quick Start] ( #-quick-start )
1717- [ Field Types Guide] ( #-complete-field-type-guide )
1818- [ API Reference] ( #️-api-reference )
19+ - [ TypeScript Support] ( #-typescript-support )
1920- [ Best Practices] ( #-best-practices )
2021- [ Testing] ( #-testing )
2122- [ Contributing] ( #-contributing )
22- - [ License] ( #-license )
23-
24- ## ✨ Features
23+ - [ License] ( #-license ) ## ✨ Features
2524
2625- ** 🎯 Declarative Schema Definition** : Define validation rules using simple configuration objects
2726- ** 🔷 TypeScript Support** : Full type safety with excellent IntelliSense
@@ -86,7 +85,14 @@ const { schema, initialValues } = createSchema({
8685 },
8786})
8887
89- const { form, formHasErrors, handleInput, handleBlur, validateForm } = useForm({
88+ const {
89+ form,
90+ formHasErrors,
91+ handleInput,
92+ handleBlur,
93+ validateForm,
94+ getFormData,
95+ } = useForm({
9096 schema,
9197 initialValues,
9298})
@@ -230,31 +236,40 @@ const { schema, initialValues } = createSchema({
230236
231237Creates validation schema and initial values.
232238
239+ ** Parameters:**
240+
241+ - ` config: Record<string, FieldConfig> ` - Field configuration object
242+
243+ ** Returns:**
244+
245+ - ` { schema: ZodObject, initialValues: Record<string, any> } `
246+
233247### ` useForm({ schema, initialValues }) `
234248
235249Returns form state and management functions:
236250
237251``` typescript
238252{
239253 // State
240- form : FormState // Reactive form fields
241- formError : Ref < string > // General form error
242- isSubmitting : Ref < boolean > // Loading state
254+ form : FormState // Reactive form fields
255+ formError : Ref < string > // General form error
256+ isSubmitting : Ref < boolean > // Loading state
243257 formHasErrors : ComputedRef < boolean > // Has validation errors
244258 formHasChanges : ComputedRef < boolean > // Form modified
245259
246260 // Methods
247261 setFieldValue : (field , value ) => void
248262 setFieldError : (field , error ) => void
249- handleInput : (field ) => void // Mark touched, clear errors
250- handleBlur : (field ) => void // Validate on blur
251- validateForm : () => boolean // Validate entire form
252- validateField : (field ) => boolean // Validate single field
253- getFormData : () => object // Get clean values
254- getFormErrors : () => object // Get all errors
255- hasErrors : () => boolean // Check validation state
256- hasChanges : () => boolean // Check if modified
257- resetForm : () => void // Reset to initial
263+ handleInput : (field ) => void // Mark touched, clear errors
264+ handleBlur : (field ) => void // Validate on blur
265+ validateForm : () => boolean // Validate entire form
266+ validateField : (field ) => boolean // Validate single field
267+ getFormData : () => object // Get clean values
268+ getFormErrors : () => object // Get all current errors
269+ getFormErrorsWithValidation : () => object // Get errors after validation
270+ hasErrors : () => boolean // Check validation state
271+ hasChanges : () => boolean // Check if modified
272+ resetForm : () => void // Reset to initial
258273}
259274```
260275
@@ -279,12 +294,39 @@ interface FieldConfig {
279294 maxError? : string // Max error message
280295 emailError? : string // Email error message
281296 urlError? : string // URL error message
282- values? : string [] // Enum values
297+ values? : string [] // Enum values (required for enum type)
283298 initialValue? : any // Default value
284- schema? : FieldConfig // Nested validation
299+ schema? : FieldConfig | { [ key : string ] : FieldConfig } // Nested validation
285300}
286301```
287302
303+ ## 🔷 TypeScript Support
304+
305+ The library is fully typed with TypeScript. Import types for better development experience:
306+
307+ ``` typescript
308+ import {
309+ useForm ,
310+ createSchema ,
311+ type FieldConfig ,
312+ type UseFormReturn ,
313+ } from ' vue-form-manager'
314+
315+ // Type your schema configuration
316+ const schemaConfig: Record <string , FieldConfig > = {
317+ username: {
318+ type: ' string' ,
319+ required: ' Username is required' ,
320+ min: 3 ,
321+ minError: ' Too short' ,
322+ },
323+ }
324+
325+ // Get full type inference
326+ const { schema, initialValues } = createSchema (schemaConfig )
327+ const formControls: UseFormReturn = useForm ({ schema , initialValues })
328+ ```
329+
288330## 🎯 Best Practices
289331
2903321 . ** Consistent Error Messages** : Use clear, user-friendly validation messages
@@ -294,7 +336,7 @@ interface FieldConfig {
294336
295337## 🧪 Testing
296338
297- This library comes with comprehensive test coverage:
339+ This library comes with comprehensive test coverage (51 passing tests) :
298340
299341``` bash
300342# Run tests
@@ -307,6 +349,14 @@ npm run test:ui
307349npm run test:run
308350```
309351
352+ ** Test Coverage:**
353+
354+ - ✅ All field types (string, email, number, boolean, date, url, enum, array, object)
355+ - ✅ Validation rules (required, min/max, custom messages)
356+ - ✅ Form state management (touched, errors, changes)
357+ - ✅ Real-world integration scenarios
358+ - ✅ Edge cases and error handling
359+
310360## 🤝 Contributing
311361
3123621 . Fork the repository
0 commit comments