Skip to content

Commit 0010b17

Browse files
committed
docs: update README to enhance TypeScript support section and improve form management details
1 parent e460e1c commit 0010b17

File tree

1 file changed

+69
-19
lines changed

1 file changed

+69
-19
lines changed

README.md

Lines changed: 69 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -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

231237
Creates 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

235249
Returns 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

290332
1. **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
307349
npm 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

312362
1. Fork the repository

0 commit comments

Comments
 (0)