Md Afiq Iskandar
7fca97912f
- Created comprehensive documentation files for backend services, detailing API endpoints, database access, authentication, and middleware. - Added documentation for Rose UI components and custom FormKit components, including descriptions and usage. - Documented database models defined in Prisma, outlining core and supporting models with their fields and relationships. - Established development guidelines for component and form development, state management, API development, and styling. - Included details on FormKit integration for form handling, plugins, and the form builder feature. - Provided an overview of the project structure, key configuration files, and routing system with main routes and middleware usage. - Enhanced state management documentation with key stores and usage guidelines for Pinia.
32 lines
1.3 KiB
Plaintext
32 lines
1.3 KiB
Plaintext
---
|
|
description:
|
|
globs:
|
|
alwaysApply: false
|
|
---
|
|
# Form Handling
|
|
|
|
## FormKit Integration
|
|
The project uses FormKit for form handling with configuration in [formkit.config.js](mdc:formkit.config.js).
|
|
|
|
### FormKit Plugins
|
|
- **Floating Labels**: Creates floating labels for form inputs
|
|
- **Multi-Step**: Supports multi-step form workflows
|
|
- **Auto Animate**: Adds animations to form elements
|
|
- **Auto Height Textarea**: Automatically adjusts textarea height
|
|
- **Local Storage**: Persists form state in localStorage
|
|
|
|
### Custom FormKit Components
|
|
- **[OneTimePassword.vue](mdc:components/formkit/OneTimePassword.vue)**: For OTP verification
|
|
- **[TextMask.vue](mdc:components/formkit/TextMask.vue)**: For input masking
|
|
- **[DateTimePicker.vue](mdc:components/formkit/DateTimePicker.vue)**: Date and time selection
|
|
- **[FileDropzone.vue](mdc:components/formkit/FileDropzone.vue)**: File uploads
|
|
|
|
## Form Builder
|
|
The project includes a form builder feature for creating dynamic forms:
|
|
|
|
- **[FormBuilderCanvas.vue](mdc:components/FormBuilderCanvas.vue)**: The canvas for form building
|
|
- **[FormBuilderComponents.vue](mdc:components/FormBuilderComponents.vue)**: Component palette
|
|
- **[FormBuilderConfiguration.vue](mdc:components/FormBuilderConfiguration.vue)**: Form properties
|
|
- **[formBuilder.js](mdc:stores/formBuilder.js)**: Form builder state management
|
|
|