# Form Builder Technical Appendix
This document provides technical details and code snippets for the form builder implementation.
## Table of Contents
1. [Component Structure](#component-structure)
2. [State Management](#state-management)
3. [Drag and Drop Implementation](#drag-and-drop-implementation)
4. [FormKit Integration](#formkit-integration)
5. [Validation System](#validation-system)
6. [Icons and UI Elements](#icons-and-ui-elements)
7. [Responsive Design](#responsive-design)
## Component Structure
The form builder is built with a modular component structure:
```
pages/
├── form-builder/
│ ├── index.vue # Main form builder page
│ └── manage.vue # Form management page
components/
├── FormBuilderComponents.vue # Left panel components
├── FormBuilderCanvas.vue # Middle panel canvas
├── FormBuilderConfiguration.vue # Right panel configuration
└── ComponentPreview.vue # Component rendering
stores/
└── formBuilder.js # State management
composables/
└── useToast.js # Toast notifications
```
## State Management
### Pinia Store (stores/formBuilder.js)
The form builder uses Pinia for state management:
```javascript
export const useFormBuilderStore = defineStore('formBuilder', {
state: () => ({
formComponents: [],
selectedComponentId: null,
formName: 'New Form',
formDescription: '',
isDraggingOver: false,
savedForms: []
}),
getters: {
selectedComponent: (state) => {
return state.selectedComponentId
? state.formComponents.find(c => c.id === state.selectedComponentId)
: null;
},
formConfig: (state) => {
return {
id: uuidv4(),
name: state.formName,
description: state.formDescription,
components: state.formComponents.map(c => ({
type: c.type,
props: c.props
})),
createdAt: new Date().toISOString()
};
}
},
actions: {
addComponent(component) {
const newComponent = {
...component,
id: uuidv4(),
props: {
...component.defaultProps,
name: `${component.type}_${this.formComponents.length + 1}`,
label: `${component.name} ${this.formComponents.length + 1}`
}
};
this.formComponents.push(newComponent);
this.selectComponent(newComponent.id);
},
// ... other actions
},
persist: {
paths: ['savedForms']
}
});
```
## Drag and Drop Implementation
### Draggable Components
The form builder uses `vuedraggable` for drag-and-drop functionality:
```vue
```
### Drag Start Handler
```javascript
// FormBuilderComponents.vue
const onDragStart = (event, component) => {
event.dataTransfer.effectAllowed = 'copy';
event.dataTransfer.setData('component', JSON.stringify(component));
emit('add-component', component);
};
```
### Drop Handler
```javascript
// pages/form-builder/index.vue
const handleDrop = (event) => {
formStore.setDraggingOver(false);
const componentData = JSON.parse(event.dataTransfer.getData('component'));
formStore.addComponent(componentData);
};
```
## FormKit Integration
### Component Preview
The form builder uses FormKit to render form components:
```vue
```
## Validation System
### Validation Configuration
The configuration panel provides validation options:
```vue
Available Validations
{{ validator.label }}
```
### Available Validators
```javascript
const availableValidators = [
{ name: 'required', label: 'Required' },
{ name: 'email', label: 'Email' },
{ name: 'url', label: 'URL' },
{ name: 'number', label: 'Number' },
{ name: 'min:5', label: 'Min Length/Value' },
{ name: 'max:100', label: 'Max Length/Value' },
{ name: 'between:5,10', label: 'Between Range' },
{ name: 'date', label: 'Date' },
{ name: 'matches:/pattern/', label: 'Pattern Match' }
];
```
## Icons and UI Elements
### Material Design Icons
The form builder uses Material Design icons:
```vue
```
### Component Icons
```javascript
// FormBuilderComponents.vue
const availableComponents = [
{
type: 'text',
name: 'Text Field',
category: 'Basic Inputs',
icon: 'material-symbols:text-fields',
// ...
},
// ...
];
```
## Responsive Design
### Responsive Layout
The form builder uses a responsive layout that adapts to different screen sizes:
```vue
```
### Responsive Header
```vue
```
## Component Data Structure
### Form Component Structure
```javascript
// Example of a form component object
{
id: "550e8400-e29b-41d4-a716-446655440000", // UUID
type: "text",
name: "Text Field",
category: "Basic Inputs",
icon: "material-symbols:text-fields",
props: {
type: "text",
name: "text_1",
label: "Text Field 1",
placeholder: "Enter text...",
help: "",
validation: "required"
}
}
```
### Form Configuration Structure
```javascript
// Example of a saved form
{
id: "550e8400-e29b-41d4-a716-446655440000", // UUID
name: "Contact Form",
description: "",
components: [
{
type: "text",
props: {
type: "text",
name: "name",
label: "Name",
placeholder: "Enter your name",
validation: "required"
}
},
{
type: "email",
props: {
type: "email",
name: "email",
label: "Email",
placeholder: "Enter your email",
validation: "required,email"
}
}
],
createdAt: "2025-04-09T03:30:00.000Z"
}
```