diff --git a/components/ComponentPreview.vue b/components/ComponentPreview.vue new file mode 100644 index 0000000..786df1b --- /dev/null +++ b/components/ComponentPreview.vue @@ -0,0 +1,85 @@ + + + + + \ No newline at end of file diff --git a/components/FormBuilderCanvas.vue b/components/FormBuilderCanvas.vue new file mode 100644 index 0000000..8364e9a --- /dev/null +++ b/components/FormBuilderCanvas.vue @@ -0,0 +1,141 @@ + + + + + \ No newline at end of file diff --git a/components/FormBuilderComponents.vue b/components/FormBuilderComponents.vue new file mode 100644 index 0000000..e78ff9a --- /dev/null +++ b/components/FormBuilderComponents.vue @@ -0,0 +1,329 @@ + + + + + \ No newline at end of file diff --git a/components/FormBuilderConfiguration.vue b/components/FormBuilderConfiguration.vue new file mode 100644 index 0000000..3084782 --- /dev/null +++ b/components/FormBuilderConfiguration.vue @@ -0,0 +1,437 @@ + + + + + \ No newline at end of file diff --git a/composables/useToast.js b/composables/useToast.js new file mode 100644 index 0000000..cd2ba14 --- /dev/null +++ b/composables/useToast.js @@ -0,0 +1,39 @@ +import { useToast as useVueToast } from 'vue-toastification'; + +export const useToast = () => { + const toast = useVueToast(); + + return { + success: (message, options = {}) => { + toast.success(message, { + timeout: 3000, + position: 'top-right', + ...options + }); + }, + + error: (message, options = {}) => { + toast.error(message, { + timeout: 5000, + position: 'top-right', + ...options + }); + }, + + warning: (message, options = {}) => { + toast.warning(message, { + timeout: 4000, + position: 'top-right', + ...options + }); + }, + + info: (message, options = {}) => { + toast.info(message, { + timeout: 3000, + position: 'top-right', + ...options + }); + } + }; +}; \ No newline at end of file diff --git a/doc/FORM_BUILDER_DOCUMENTATION.md b/doc/FORM_BUILDER_DOCUMENTATION.md new file mode 100644 index 0000000..fd0faeb --- /dev/null +++ b/doc/FORM_BUILDER_DOCUMENTATION.md @@ -0,0 +1,167 @@ +# Form Builder Documentation + +## Overview + +The Form Builder is a drag-and-drop interface for creating dynamic forms. It allows users to build forms by selecting input components, configuring them, and arranging them in the desired order. The form builder follows the design pattern of the code playground with a full-screen empty layout. + +## Files Structure + +### Pages + +1. **`pages/form-builder/index.vue`** + - Main form builder interface with three-panel layout + - Drag and drop interface for building forms + - Uses empty layout for fullscreen experience + - Contains form name input and save/preview actions + - [View File](pages/form-builder/index.vue) + +2. **`pages/form-builder/manage.vue`** + - Form management interface + - Lists saved forms with search functionality + - Provides edit and delete actions for each form + - Uses empty layout and matches design of main page + - [View File](pages/form-builder/manage.vue) + +### Components + +3. **`components/FormBuilderComponents.vue`** + - Left panel component that displays available form elements + - Categorizes components into groups (Basic Inputs, Selection Inputs, etc.) + - Provides search functionality for finding components + - Components can be dragged to the canvas + - Uses Material Design icons + - [View File](components/FormBuilderComponents.vue) + +4. **`components/FormBuilderCanvas.vue`** + - Middle panel component that displays the form being built + - Handles drag-and-drop reordering of components + - Renders form elements with preview mode + - Provides selection, deletion, and reordering capabilities + - Uses vuedraggable for drag-and-drop functionality + - [View File](components/FormBuilderCanvas.vue) + +5. **`components/FormBuilderConfiguration.vue`** + - Right panel component for configuring selected form elements + - Tabbed interface with Basic, Validation, and Advanced sections + - Dynamically shows/hides fields based on component type + - Provides rich validation options + - [View File](components/FormBuilderConfiguration.vue) + +6. **`components/ComponentPreview.vue`** + - Renders a preview of form components + - Handles different component types (inputs, headings, paragraphs, etc.) + - Uses FormKit for rendering form inputs + - Provides formatting for non-input elements (headings, paragraphs, dividers) + - [View File](components/ComponentPreview.vue) + +### State Management + +7. **`stores/formBuilder.js`** + - Pinia store for managing form builder state + - Handles form components, selected component, dragging state + - Provides actions for adding, updating, moving, and deleting components + - Handles form saving and loading with localStorage + - Persists saved forms + - [View File](stores/formBuilder.js) + +### Utilities + +8. **`composables/useToast.js`** + - Toast notification composable for consistent toast messages + - Wraps Vue Toastification with standardized configurations + - Provides success, error, warning, and info methods + - [View File](composables/useToast.js) + +## Key Features + +### Form Building +- Drag-and-drop interface for adding components to the form +- Reordering components via drag-and-drop +- Configuring component properties (labels, placeholders, validation, etc.) +- Real-time preview of the form being built + +### Component Types +- **Basic Inputs**: Text, Textarea, Number, Email, Password +- **Selection Inputs**: Select, Checkbox, Radio +- **Date and Time**: Date Picker, Time Picker, Date & Time +- **Advanced**: File Upload, Repeater, Group +- **Layout**: Heading, Paragraph, Divider + +### Form Management +- Save forms to localStorage +- List all saved forms +- Search for forms by name +- Edit existing forms +- Delete forms + +### Validation +- Built-in validation options (required, email, min, max, etc.) +- Quick validation buttons +- Validation rule syntax help +- Required field checkbox + +## UI/UX Design + +- Professional dark header with logo and main actions +- Three-panel layout for Components, Canvas, and Configuration +- Material Design icons throughout +- Empty layout for fullscreen experience +- Responsive design that works on mobile and desktop +- Consistent styling with the Code Playground + +## Implementation Details + +### Layout Structure +- Header with navigation and primary actions +- Form name input section +- Three-panel main content area +- Preview modal for testing the form + +### State Management +- Centralized Pinia store for form state +- Computed properties for derived state +- Watchers for reactivity +- Local storage for persistence + +### Component Communication +- Props for parent-to-child data flow +- Events for child-to-parent communication +- Store actions for cross-component communication + +### Styling +- Tailwind CSS for utility-first styling +- Custom transitions and animations +- Responsive breakpoints +- Consistent color scheme + +## Usage Instructions + +1. Navigate to `/form-builder` to access the form builder +2. Add components by dragging them from the left panel to the canvas +3. Select a component on the canvas to configure it in the right panel +4. Save the form using the Save button in the header +5. Preview the form by clicking the Preview button +6. Manage saved forms by clicking the Manage Forms button +7. Search, edit, or delete forms in the management interface + +## Development Notes + +- The form builder uses vuedraggable for drag-and-drop functionality +- FormKit is used for all form inputs +- Material Design icons are used throughout +- The form builder follows the design patterns established in the code playground +- All components are responsive and work on mobile devices + +## Future Enhancements + +- Backend integration for saving forms to a database +- Form publishing and sharing functionality +- Form versioning +- Form templates +- More advanced validation options +- Conditional display of form fields +- Multi-page forms + +--- + +This documentation was generated on April 9, 2025. \ No newline at end of file diff --git a/doc/FORM_BUILDER_TECHNICAL_APPENDIX.md b/doc/FORM_BUILDER_TECHNICAL_APPENDIX.md new file mode 100644 index 0000000..962eaa4 --- /dev/null +++ b/doc/FORM_BUILDER_TECHNICAL_APPENDIX.md @@ -0,0 +1,346 @@ +# 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" +} +``` \ No newline at end of file diff --git a/pages/form-builder/index.vue b/pages/form-builder/index.vue new file mode 100644 index 0000000..f7913be --- /dev/null +++ b/pages/form-builder/index.vue @@ -0,0 +1,272 @@ + + + + + diff --git a/pages/form-builder/manage.vue b/pages/form-builder/manage.vue new file mode 100644 index 0000000..c6a7359 --- /dev/null +++ b/pages/form-builder/manage.vue @@ -0,0 +1,146 @@ + + + \ No newline at end of file diff --git a/stores/formBuilder.js b/stores/formBuilder.js new file mode 100644 index 0000000..01d89da --- /dev/null +++ b/stores/formBuilder.js @@ -0,0 +1,138 @@ +import { defineStore } from 'pinia'; +import { v4 as uuidv4 } from 'uuid'; + +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); + }, + + selectComponent(id) { + this.selectedComponentId = id; + }, + + updateComponent(updatedComponent) { + const index = this.formComponents.findIndex(c => c.id === updatedComponent.id); + if (index !== -1) { + this.formComponents[index] = JSON.parse(JSON.stringify(updatedComponent)); + } + }, + + moveComponent({ oldIndex, newIndex }) { + if (oldIndex !== newIndex) { + const component = this.formComponents.splice(oldIndex, 1)[0]; + this.formComponents.splice(newIndex, 0, component); + } + }, + + deleteComponent(id) { + const index = this.formComponents.findIndex(c => c.id === id); + if (index !== -1) { + this.formComponents.splice(index, 1); + if (this.selectedComponentId === id) { + this.selectedComponentId = null; + + // If there are other components, select the first one after deletion + if (this.formComponents.length > 0) { + // Select the component at the same index, or the last component if we deleted the last one + const newIndex = Math.min(index, this.formComponents.length - 1); + this.selectedComponentId = this.formComponents[newIndex].id; + } + } + } + }, + + setDraggingOver(isDragging) { + this.isDraggingOver = isDragging; + }, + + saveForm() { + const formData = this.formConfig; + + // Add to saved forms array + const existingIndex = this.savedForms.findIndex(f => f.id === formData.id); + if (existingIndex !== -1) { + this.savedForms[existingIndex] = formData; + } else { + this.savedForms.push(formData); + } + + // Save to localStorage for persistence + localStorage.setItem('savedForms', JSON.stringify(this.savedForms)); + + return formData; + }, + + loadForm(formId) { + const savedForms = JSON.parse(localStorage.getItem('savedForms') || '[]'); + const form = savedForms.find(f => f.id === formId); + + if (form) { + this.formName = form.name; + this.formDescription = form.description; + this.formComponents = form.components.map(c => ({ + ...c, + id: uuidv4() + })); + this.selectedComponentId = null; + } + }, + + clearForm() { + this.formComponents = []; + this.selectedComponentId = null; + this.formName = 'New Form'; + this.formDescription = ''; + }, + + loadSavedForms() { + const savedForms = JSON.parse(localStorage.getItem('savedForms') || '[]'); + this.savedForms = savedForms; + } + }, + + persist: { + paths: ['savedForms'] + } +}); \ No newline at end of file