From 96fafd33d7fa5cf75ba21b0598c8b1b354b54ac8 Mon Sep 17 00:00:00 2001 From: Afiq Date: Tue, 27 May 2025 00:00:09 +0800 Subject: [PATCH] Add Switch Component and Enhance Form Builder Functionality - Introduced a new Switch component for toggling options within forms, enhancing user interactivity. - Updated formkit-custom.js to include the Switch component with appropriate props. - Enhanced formkit-theme.js to define styles for the Switch component, ensuring consistent theming. - Added CSS styles for the Switch component to improve visual presentation and user experience. - Updated FormBuilderCanvas and FormBuilderComponents to support the new Switch component in the form builder interface. - Enhanced documentation to include details about the new Switch component and its usage within forms. --- assets/js/formkit-custom.js | 4 + assets/js/formkit-theme.js | 8 + assets/style/css/form/switch.css | 15 + components/ComponentPreview.vue | 478 +++- components/FormBuilderCanvas.vue | 34 +- components/FormBuilderComponents.vue | 326 ++- components/FormBuilderConfiguration.vue | 360 ++- components/FormBuilderFieldSettingsModal.vue | 1319 ++++++++++ components/FormTemplatesModal.vue | 2326 ++++++++++++++++++ components/RsModal.vue | 100 +- components/formkit/Switch.vue | 41 + doc/form-builder/TECHNICAL_GUIDE.md | 1380 +++++++---- doc/form-builder/USER_GUIDE.md | 502 ++-- doc/form-builder/grid-system.md | 587 +++++ pages/form-builder/index.vue | 2077 +++++++++++++++- public/images/form-template-placeholder.svg | 7 + stores/formBuilder.js | 231 +- 17 files changed, 8996 insertions(+), 799 deletions(-) create mode 100644 assets/style/css/form/switch.css create mode 100644 components/FormBuilderFieldSettingsModal.vue create mode 100644 components/FormTemplatesModal.vue create mode 100644 components/formkit/Switch.vue create mode 100644 doc/form-builder/grid-system.md create mode 100644 public/images/form-template-placeholder.svg diff --git a/assets/js/formkit-custom.js b/assets/js/formkit-custom.js index 93cdfb7..18c06fd 100644 --- a/assets/js/formkit-custom.js +++ b/assets/js/formkit-custom.js @@ -2,6 +2,7 @@ import { createInput } from "@formkit/vue"; import OneTimePassword from "~/components/formkit/OneTimePassword.vue"; import MaskText from "~/components/formkit/TextMask.vue"; import FileDropzone from "~/components/formkit/FileDropzone.vue"; +import Switch from "~/components/formkit/Switch.vue"; export default { otp: createInput(OneTimePassword, { @@ -13,4 +14,7 @@ export default { dropzone: createInput(FileDropzone, { props: ["accept", "multiple", "maxSize", "minSize", "maxFiles", "disabled"], }), + switch: createInput(Switch, { + props: ["value"], + }), }; diff --git a/assets/js/formkit-theme.js b/assets/js/formkit-theme.js index dd57e22..f664a52 100644 --- a/assets/js/formkit-theme.js +++ b/assets/js/formkit-theme.js @@ -29,6 +29,13 @@ const OtpClassification = { message: "formkit-message-otp", }; +const switchClassification = { + label: "formkit-label-switch", + inner: "formkit-inner-switch", + input: "formkit-input-switch", + message: "formkit-message-switch", +}; + const colorClassification = { label: "formkit-label-color", input: "formkit-input-color", @@ -86,6 +93,7 @@ export default { week: textClassification, otp: OtpClassification, mask: textClassification, + switch: switchClassification, dropzone: { ...textClassification, inner: "formkit-inner-dropzone", diff --git a/assets/style/css/form/switch.css b/assets/style/css/form/switch.css new file mode 100644 index 0000000..69b5eb8 --- /dev/null +++ b/assets/style/css/form/switch.css @@ -0,0 +1,15 @@ +.formkit-label-switch { + @apply block mb-2 font-semibold text-sm formkit-invalid:text-red-500 dark:formkit-invalid:text-danger; +} + +.formkit-inner-switch { + @apply flex items-center justify-between w-full; +} + +.formkit-input-switch { + @apply sr-only; +} + +.formkit-message-switch { + @apply formkit-invalid:text-red-500 dark:formkit-invalid:text-danger; +} \ No newline at end of file diff --git a/components/ComponentPreview.vue b/components/ComponentPreview.vue index 1252adf..8503ff0 100644 --- a/components/ComponentPreview.vue +++ b/components/ComponentPreview.vue @@ -5,9 +5,30 @@ :data-name="component.props.name" :data-type="component.type" > + +
+
+
+ + Hidden Field +
+
+
+ Name: {{ component.props.name || 'unnamed' }} +
+
+ Value: {{ component.props.value || '(empty)' }} +
+
+
+ {{ component.props.help }} +
+
+
+ + +
+
+ + +
+ +
+ +
+
+ +
+ {{ component.props.caption }} +
+ +
+ {{ component.props.help }} +
+
+
+ + +
+
+ {{ component.props.label || 'Group' }} + +
+ {{ component.props.help }} +
+ + +
+
+
+

Item 1

+ +
+ +
+ +
+
+ + +
+ + +
+
+
+

Item {{ groupIndex + 1 }}

+ +
+ +
+ +
+
+ + +
+
+
+ + +
+
+ + +
+ {{ component.props.help }} +
+ +
+
+
+ + +
+ + + +
+ +
+
+ + +
+ + +
+
+
+
+ + +
+ + + + {{ component.props.label || 'Button' }} + + +
+ {{ component.props.help }} +
+
+ + +
Unknown component type: {{ component.type }}
@@ -112,6 +358,9 @@ \ No newline at end of file diff --git a/components/FormBuilderConfiguration.vue b/components/FormBuilderConfiguration.vue index 918880d..7085561 100644 --- a/components/FormBuilderConfiguration.vue +++ b/components/FormBuilderConfiguration.vue @@ -116,6 +116,237 @@ help="Size of the heading" /> + + + + + + + + +
@@ -174,6 +405,61 @@ help="File types, e.g. '.jpg,.png,image/*'" /> + + + + + + + + + @@ -592,7 +878,7 @@ const showField = (fieldName) => { case 'name': return !['heading', 'paragraph', 'divider'].includes(componentType); case 'placeholder': - return ['text', 'textarea', 'email', 'password', 'number', 'select'].includes(componentType); + return ['text', 'textarea', 'email', 'password', 'number', 'select', 'dynamic-list'].includes(componentType); case 'help': return !['heading', 'paragraph', 'divider'].includes(componentType); case 'value': @@ -602,17 +888,54 @@ const showField = (fieldName) => { case 'options': return ['select', 'radio', 'checkbox'].includes(componentType); case 'accept': - return componentType === 'file'; + return componentType === 'file' || componentType === 'dropzone'; + case 'mask': + return componentType === 'mask'; + case 'digits': + return componentType === 'otp'; + case 'maxSize': + case 'maxFiles': + case 'multiple': + return componentType === 'dropzone'; case 'id': return true; // Always show component ID in advanced tab case 'width': return true; // Always show width in basic tab case 'title': return componentType === 'info-display'; + case 'imageUrl': + case 'altText': + case 'caption': + case 'showZoom': + case 'showCaption': + case 'maxWidth': + case 'height': + return componentType === 'image-preview'; + case 'minItems': + case 'maxItems': + return ['repeating-group', 'dynamic-list'].includes(componentType); + case 'buttonText': + case 'removeText': + return componentType === 'repeating-group' || componentType === 'dynamic-list'; + case 'defaultItems': + return componentType === 'dynamic-list'; + case 'fields': + return componentType === 'info-display' || componentType === 'repeating-group'; case 'layout': case 'showBorder': - case 'fields': return componentType === 'info-display'; + case 'min': + case 'max': + case 'step': + return componentType === 'range' || componentType === 'number'; + case 'buttonType': + case 'variant': + case 'size': + case 'disabled': + case 'onClick': + return componentType === 'button'; + case 'value': + return ['color', 'range', 'switch', 'hidden'].includes(componentType); default: return false; } @@ -653,28 +976,55 @@ const removeInfoField = (index) => { configModel.value.fields.splice(index, 1); }; +// Add a new field to repeating group component +const addGroupField = () => { + if (!configModel.value.fields) { + configModel.value.fields = []; + } + + configModel.value.fields.push({ + type: 'text', + name: `field_${configModel.value.fields.length + 1}`, + label: `Field ${configModel.value.fields.length + 1}`, + placeholder: 'Enter value' + }); +}; + // Inside the + + \ No newline at end of file diff --git a/components/FormTemplatesModal.vue b/components/FormTemplatesModal.vue new file mode 100644 index 0000000..ee8bda2 --- /dev/null +++ b/components/FormTemplatesModal.vue @@ -0,0 +1,2326 @@ + + + + + \ No newline at end of file diff --git a/components/RsModal.vue b/components/RsModal.vue index c3d8471..231be34 100644 --- a/components/RsModal.vue +++ b/components/RsModal.vue @@ -117,14 +117,8 @@ watch( >
- - - - + +
@@ -147,3 +141,93 @@ watch( + + diff --git a/components/formkit/Switch.vue b/components/formkit/Switch.vue new file mode 100644 index 0000000..18d21fc --- /dev/null +++ b/components/formkit/Switch.vue @@ -0,0 +1,41 @@ + + + + + \ No newline at end of file diff --git a/doc/form-builder/TECHNICAL_GUIDE.md b/doc/form-builder/TECHNICAL_GUIDE.md index e4de4ad..2e12146 100644 --- a/doc/form-builder/TECHNICAL_GUIDE.md +++ b/doc/form-builder/TECHNICAL_GUIDE.md @@ -1,8 +1,8 @@ -# Form Builder Technical Appendix +# Form Builder Technical Guide -This document provides technical implementation details for developers working with the Form Builder system. +This document provides comprehensive technical implementation details for developers working with the Form Builder system, including the new smart collapsible panel, enhanced grid system, and advanced UX features. -> For user documentation and usage guidelines, please refer to [Form Builder Documentation](FORM_BUILDER_DOCUMENTATION.md) +> For user documentation and usage guidelines, see the [User Guide](USER_GUIDE.md) ## Architecture Overview @@ -10,9 +10,10 @@ This document provides technical implementation details for developers working w - **Frontend Framework**: Nuxt 3 / Vue 3 - **State Management**: Pinia - **Form Library**: FormKit -- **UI Framework**: Tailwind CSS -- **Icons**: Material Design Icons +- **UI Framework**: Tailwind CSS + Custom Components +- **Icons**: Heroicons - **Drag & Drop**: vuedraggable +- **Grid System**: CSS Grid (12-column) ### Key Dependencies ```json @@ -21,7 +22,8 @@ This document provides technical implementation details for developers working w "@pinia/nuxt": "^0.4.11", "vuedraggable": "^4.1.0", "@vueuse/core": "^10.1.2", - "tailwindcss": "^3.3.2" + "tailwindcss": "^3.3.2", + "@heroicons/vue": "^2.0.18" } ``` @@ -30,114 +32,390 @@ This document provides technical implementation details for developers working w ``` pages/ ├── form-builder/ -│ ├── index.vue # Main builder interface -│ └── manage.vue # Form management +│ ├── index.vue # Main builder interface with collapsible panel +│ └── manage.vue # Form management components/ -├── FormBuilderComponents.vue # Component library -├── FormBuilderCanvas.vue # Form canvas -├── FormBuilderConfiguration.vue # Component config -└── ComponentPreview.vue # Preview renderer +├── FormBuilderComponents.vue # Enhanced component library +├── FormBuilderCanvas.vue # Grid-based canvas with resize handles +├── FormBuilderFieldSettingsModal.vue # Full settings modal with visual grid +├── ComponentPreview.vue # Improved component rendering +└── RsCollapseItem.vue # Collapsible components stores/ -└── formBuilder.js # State management +├── formBuilder.js # Enhanced state management with grid logic +└── toast.js # Toast notifications composables/ -└── useToast.js # Toast notifications +└── useToast.js # Toast composition types/ -└── form-builder.d.ts # TypeScript definitions +└── form-builder.d.ts # TypeScript definitions server/ └── api/ └── forms/ - ├── index.js # Form API endpoints - └── [id].js # Form by ID endpoints + ├── index.js # Form API endpoints + └── [id].js # Form by ID endpoints +docs/ +└── grid-system.md # Grid system documentation +``` + +## Enhanced UI Architecture + +### Smart Collapsible Panel System + +The right panel system provides two interaction modes: + +#### Panel States +```vue + + + +``` + +#### Quick Settings Implementation +```vue + +``` + +### Enhanced Grid System + +#### CSS Grid Implementation +```css +.grid-container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-auto-flow: row dense; /* Enables automatic gap filling */ + column-gap: 16px; + row-gap: 16px; + width: 100%; +} + +.form-component { + grid-column: span 12; /* Default to full width */ + width: 100% !important; /* Force width within grid cell */ + transition: all 0.2s ease; +} +``` + +#### Grid Column Mapping +```javascript +// Precise percentage to grid column mapping +const widthToGridColumns = { + 25: 3, // 3/12 = 25% + 33: 4, // 4/12 = 33.33% + 50: 6, // 6/12 = 50% + 66: 8, // 8/12 = 66.67% + 75: 9, // 9/12 = 75% + 100: 12 // 12/12 = 100% +} + +const setComponentWidth = (percentage, gridColumns) => { + configModel.value.width = `${percentage}%` + configModel.value.gridColumn = `span ${gridColumns}` +} +``` + +#### Smart Grid Placement Algorithm +```javascript +// Optimal grid placement for new components +findOptimalGridPlacement() { + if (this.formComponents.length === 0) { + return { + gridColumn: 'span 12', + rowIndex: 0, + width: '100%' + } + } + + // Group components by rows and find available space + const rows = [] + let currentRowSpace = 12 + + this.formComponents.forEach(component => { + const spanMatch = component.props.gridColumn?.match(/span\s+(\d+)/) || [] + const columnSpan = parseInt(spanMatch[1]) || 12 + + if (columnSpan <= currentRowSpace) { + // Add to current row + currentRowSpace -= columnSpan + } else { + // Start new row + currentRowSpace = 12 - columnSpan + } + }) + + // Return optimal placement + return { + gridColumn: `span ${Math.min(currentRowSpace, 12)}`, + width: `${Math.round((currentRowSpace / 12) * 100)}%` + } +} ``` ## Component Architecture -### Core Components +### Enhanced FormBuilderFieldSettingsModal + +The modal now includes visual grid selection: -1. **FormBuilderComponents.vue** ```vue + + -``` - -2. **FormBuilderCanvas.vue** -```vue - ``` -## State Management +### Enhanced Canvas with Resize Handles + +```vue + + + +``` + +## State Management Enhancements + +### Enhanced Pinia Store -### Pinia Store Structure ```typescript interface FormState { - formComponents: FormComponent[]; - selectedComponentId: string | null; - formName: string; - formDescription: string; - formId: string | null; - formUUID: string | null; - isDraggingOver: boolean; - savedForms: SavedForm[]; + formComponents: FormComponent[] + selectedComponentId: string | null + formName: string + formDescription: string + formId: string | null + formUUID: string | null + isDraggingOver: boolean + savedForms: SavedForm[] + showFieldSettingsPanel: boolean // New panel state } export const useFormBuilderStore = defineStore('formBuilder', { @@ -149,384 +427,632 @@ export const useFormBuilderStore = defineStore('formBuilder', { formId: null, formUUID: null, isDraggingOver: false, - savedForms: [] + savedForms: [], + showFieldSettingsPanel: true }), getters: { selectedComponent: (state) => { - if (!state.selectedComponentId) return null; - return state.formComponents.find(c => c.id === state.selectedComponentId); + if (!state.selectedComponentId) return null + return state.formComponents.find(c => c.id === state.selectedComponentId) }, - formConfig: (state) => { - return { - id: state.formId, - uuid: state.formUUID, - name: state.formName, - description: state.formDescription, - components: state.formComponents - }; - } + formConfig: (state) => ({ + id: state.formId, + uuid: state.formUUID, + name: state.formName, + description: state.formDescription, + components: state.formComponents + }) }, actions: { + // Enhanced component addition with smart grid placement addComponent(component: FormComponent) { - this.formComponents.push({ + const { gridColumn, rowIndex, width } = this.findOptimalGridPlacement() + + const newComponent = { ...component, - id: component.id || uuidv4() - }); - }, - - updateComponent(id: string, updates: Partial) { - const index = this.formComponents.findIndex(c => c.id === id); - if (index !== -1) { - this.formComponents[index] = { - ...this.formComponents[index], - ...updates - }; - } - }, - - deleteComponent(id: string) { - const index = this.formComponents.findIndex(c => c.id === id); - if (index !== -1) { - this.formComponents.splice(index, 1); - if (this.selectedComponentId === id) { - this.selectedComponentId = null; + id: component.id || uuidv4(), + props: { + ...component.defaultProps, + width: width, + gridColumn: gridColumn, + name: component.defaultProps?.name || `${component.type}_${this.formComponents.length + 1}`, + label: component.defaultProps?.label || `${component.name} ${this.formComponents.length + 1}` } } + + this.formComponents.push(newComponent) + this.selectComponent(newComponent.id) }, - moveComponent(oldIndex: number, newIndex: number) { - if (oldIndex === newIndex) return; - const component = this.formComponents.splice(oldIndex, 1)[0]; - this.formComponents.splice(newIndex, 0, component); - }, - - saveForm() { - return fetch('/api/forms', { - method: this.formId ? 'PUT' : 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(this.formConfig) + // Grid layout optimization + optimizeGridLayout() { + const rows = this.groupComponentsByRows() + + rows.forEach(row => { + if (row.remainingSpace > 0) { + this.distributeRemainingSpace(row) + } }) - .then(response => response.json()) - .then(data => { - this.formId = data.formID; - this.formUUID = data.formUUID; - return data; - }); }, - loadForm(id: string) { - return fetch(`/api/forms/${id}`) - .then(response => response.json()) - .then(data => { - this.formId = data.formID; - this.formUUID = data.formUUID; - this.formName = data.formName; - this.formDescription = data.formDescription; - this.formComponents = data.components; - return data; - }); + // Helper methods for grid management + groupComponentsByRows() { + const rows = [] + let currentRowSpace = 12 + + this.formComponents.forEach(component => { + const spanMatch = component.props.gridColumn?.match(/span\s+(\d+)/) || [] + const columnSpan = parseInt(spanMatch[1]) || 12 + + if (columnSpan <= currentRowSpace) { + currentRowSpace -= columnSpan + if (!rows[rows.length - 1]) { + rows.push({ components: [], remainingSpace: 0 }) + } + rows[rows.length - 1].components.push(component) + rows[rows.length - 1].remainingSpace = currentRowSpace + } else { + rows.push({ + components: [component], + remainingSpace: 12 - columnSpan + }) + currentRowSpace = 12 - columnSpan + } + }) + + return rows } } -}); +}) ``` -## Form Component Types +## Component Type System -### Type Definitions -```typescript -interface BaseComponent { - id: string; - type: string; - name: string; - category: ComponentCategory; - icon: string; - props: BaseComponentProps; -} +### Enhanced Component Definitions -interface BaseComponentProps { - name: string; - label: string; - help?: string; - validation?: string; - width?: number; -} - -interface InputComponent extends BaseComponent { - props: InputComponentProps; -} - -interface SelectComponent extends BaseComponent { - props: SelectComponentProps; -} - -// Additional type definitions... -``` - -## Validation System - -### Implementation -```typescript -const validationRules = { - required: 'Value is required', - email: 'Invalid email format', - min: (min: number) => `Minimum value is ${min}`, - max: (max: number) => `Maximum value is ${max}`, - between: (min: number, max: number) => - `Value must be between ${min} and ${max}`, - pattern: (pattern: string) => - `Value must match pattern: ${pattern}` -}; - -const validateField = (value: any, rules: string) => { - // Validation implementation -}; -``` - -## Grid System - -### Implementation -```typescript -const gridSystem = { - columns: 12, - breakpoints: { - sm: 640, - md: 768, - lg: 1024, - xl: 1280 - }, - calculateSpan: (width: number) => - Math.min(Math.max(1, Math.round(width * 12)), 12) -}; -``` - -## Process Builder Integration - -### API Endpoints for Form Selection ```javascript -// server/api/forms/index.js -export default defineEventHandler(async (event) => { +const availableComponents = [ + { + type: 'text', + name: 'Text Field', + category: 'Basic Inputs', + icon: 'heroicons:document-text', + recommendedWidth: 'small', // New recommendation system + defaultProps: { + type: 'text', + label: 'Text Field', + name: '', + placeholder: '', + help: '', + validation: '', + width: '33%', // Smart default + gridColumn: 'span 4' + } + }, + { + type: 'textarea', + name: 'Text Area', + category: 'Basic Inputs', + icon: 'heroicons:document-text', + recommendedWidth: 'full', + defaultProps: { + type: 'textarea', + label: 'Text Area', + name: '', + placeholder: '', + help: '', + rows: 4, + validation: '', + width: '100%', + gridColumn: 'span 12' + } + }, + // ... additional components with smart defaults +] +``` + +### Component Icon and Name Helpers + +```javascript +const getComponentIcon = (type) => { + const iconMap = { + text: 'heroicons:document-text', + textarea: 'heroicons:document-text', + number: 'heroicons:hashtag', + email: 'heroicons:envelope', + password: 'heroicons:key', + url: 'heroicons:link', + tel: 'heroicons:device-phone-mobile', + mask: 'heroicons:pencil-square', + hidden: 'heroicons:eye-slash', + select: 'heroicons:chevron-down', + checkbox: 'heroicons:check-badge', + radio: 'heroicons:radio', + switch: 'material-symbols:toggle-on', + date: 'heroicons:calendar-days', + time: 'heroicons:clock', + 'datetime-local': 'heroicons:calendar', + range: 'heroicons:adjustments-horizontal', + color: 'heroicons:swatch', + file: 'heroicons:document-arrow-up', + otp: 'heroicons:key', + dropzone: 'heroicons:cloud-arrow-up', + button: 'heroicons:cursor-arrow-rays', + heading: 'heroicons:h1', + paragraph: 'heroicons:document-text', + divider: 'heroicons:minus', + 'info-display': 'heroicons:information-circle' + } + return iconMap[type] || 'heroicons:square-3-stack-3d' +} + +// Short names for collapsed panel +const getComponentTypeShort = (type) => { + const shortNames = { + text: 'TXT', + textarea: 'TXT', + number: 'NUM', + email: 'EML', + password: 'PWD', + url: 'URL', + tel: 'TEL', + mask: 'MSK', + hidden: 'HID', + select: 'SEL', + checkbox: 'CHK', + radio: 'RAD', + switch: 'SWT', + date: 'DTE', + time: 'TME', + 'datetime-local': 'DTM', + range: 'RNG', + color: 'CLR', + file: 'FIL', + otp: 'OTP', + dropzone: 'DRP', + button: 'BTN', + heading: 'H' + (component?.props?.level || '2'), + paragraph: 'TXT', + divider: 'DIV', + 'info-display': 'INF' + } + return shortNames[type] || 'FLD' +} +``` + +## CSS Architecture + +### Panel System Styles + +```css +/* Field Settings Panel */ +.field-settings-panel { + @apply relative bg-white border-l border-gray-200 flex flex-col overflow-hidden transition-all duration-300 ease-in-out; +} + +.panel-expanded { + @apply w-80; /* 320px expanded */ +} + +.panel-collapsed { + @apply w-12; /* 48px collapsed */ +} + +/* Panel content areas */ +.panel-content { + @apply flex-1 flex flex-col overflow-hidden; +} + +.panel-header { + @apply px-4 py-3 border-b border-gray-200 bg-gray-50; +} + +.panel-body { + @apply flex-1 overflow-y-auto; +} + +/* Collapsed state */ +.collapsed-info { + @apply h-full flex flex-col px-2 py-3; +} + +.collapsed-header { + @apply mb-4 flex justify-center; +} + +.collapsed-content { + @apply text-center w-full flex-1 flex flex-col justify-center items-center; +} +``` + +### Grid System Styles + +```css +/* Grid container */ +.grid-container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-auto-flow: row dense; + column-gap: 16px; + row-gap: 16px; + width: 100%; + padding: 0; + box-sizing: border-box; +} + +/* Grid preview in modal */ +.grid-container-mini { + @apply grid grid-cols-12 gap-1 w-32; +} + +.grid-cell { + @apply h-2 rounded-sm transition-colors duration-200; +} + +.grid-cell.active { + @apply bg-blue-500; +} + +.grid-cell.inactive { + @apply bg-gray-200; +} + +/* Width selection */ +.width-option { + @apply border border-gray-200 rounded-lg p-4 transition-all duration-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer flex items-center space-x-4; +} + +.width-option.selected { + @apply border-blue-500 bg-blue-50 ring-2 ring-blue-200; +} + +.width-option.recommended { + @apply ring-2 ring-green-200 border-green-300; +} + +.width-option.selected.recommended { + @apply border-green-500 bg-green-50 ring-2 ring-green-200; +} +``` + +### Quick Settings Styles + +```css +/* Compact width buttons */ +.width-selector-compact { + @apply flex space-x-1; +} + +.width-btn { + @apply flex-1 px-2 py-1.5 text-xs font-medium text-center rounded-md border border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50 transition-colors duration-200; +} + +.width-btn.active { + @apply border-blue-500 bg-blue-50 text-blue-700 ring-1 ring-blue-200; +} + +/* Toggle switches */ +.setting-toggle { + @apply flex items-center cursor-pointer; +} + +.toggle-slider { + @apply relative inline-block w-8 h-4 mr-2 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out; +} + +.setting-toggle input:checked + .toggle-slider { + @apply bg-blue-600; +} + +.toggle-slider::before { + @apply absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full transition-transform duration-200 ease-in-out; + content: ''; +} + +.setting-toggle input:checked + .toggle-slider::before { + @apply transform translate-x-4; +} +``` + +## API Integration + +### Form Data Structure + +```typescript +interface FormComponent { + id: string + type: string + name: string + category: string + icon: string + defaultProps: Record + props: { + label?: string + name?: string + placeholder?: string + help?: string + validation?: string + width: string // e.g., "50%" + gridColumn: string // e.g., "span 6" + [key: string]: any + } +} + +interface FormConfig { + id: string | null + uuid: string | null + name: string + description: string + components: FormComponent[] + settings: { + submitUrl?: string + successMessage?: string + errorMessage?: string + redirectUrl?: string + } +} +``` + +### Save/Load Operations + +```javascript +// Enhanced save with grid validation +const saveForm = async (formConfig) => { + // Validate grid layout + const validatedComponents = formConfig.components.map(component => ({ + ...component, + props: { + ...component.props, + // Ensure grid properties are valid + width: component.props.width || '100%', + gridColumn: component.props.gridColumn || 'span 12' + } + })) + + const validatedForm = { + ...formConfig, + components: validatedComponents + } + try { - // Get all forms for selection in Process Builder - const forms = await prisma.form.findMany({ - select: { - formID: true, - formUUID: true, - formName: true, - formDescription: true, - createdAt: true, - updatedAt: true - }, - orderBy: { - updatedAt: 'desc' - } - }); - - return { forms }; + const response = await $fetch('/api/forms', { + method: 'POST', + body: validatedForm + }) + return response } catch (error) { - console.error('Error fetching forms:', error); - throw createError({ - statusCode: 500, - statusMessage: 'Failed to fetch forms' - }); + throw new Error(`Save failed: ${error.message}`) } -}); -``` +} -### Form Loading by URL Parameter -```javascript -// pages/form-builder/index.vue -const route = useRoute(); -const formStore = useFormBuilderStore(); - -// Check for formId parameter to load a specific form -onMounted(async () => { - const formId = route.query.formId; - if (formId) { - try { - await formStore.loadForm(formId); - } catch (error) { - console.error('Error loading form:', error); - useToast().error('Failed to load form'); +// Load with grid property migration +const loadForm = async (formId) => { + try { + const form = await $fetch(`/api/forms/${formId}`) + + // Migrate old forms without grid properties + const migratedComponents = form.components.map(component => ({ + ...component, + props: { + ...component.props, + width: component.props.width || '100%', + gridColumn: component.props.gridColumn || 'span 12' + } + })) + + return { + ...form, + components: migratedComponents } + } catch (error) { + throw new Error(`Load failed: ${error.message}`) } -}); +} ``` -### Form Selection Component +## Performance Optimizations + +### Component Rendering + ```vue - - -``` - -## Event Handling - -### Component Events -```typescript -const componentEvents = { - onAdd: (event: DragEvent) => void; - onUpdate: (event: UpdateEvent) => void; - onSelect: (id: string) => void; - onDelete: (id: string) => void; - onDuplicate: (id: string) => void; - onValidate: (component: FormComponent) => ValidationResult; -}; -``` - -## Performance Optimization - -### Implementation Details -1. **Component Lazy Loading** -```typescript -const ComponentPreview = defineAsyncComponent(() => - import('./ComponentPreview.vue') -); -``` - -2. **Virtual Scrolling** -```typescript -const virtualScroller = { - itemSize: 50, - minItemsPerPage: 10, - maxBufferPx: 200 -}; -``` - -3. **Debounced Updates** -```typescript -const debouncedSave = useDebounceFn(() => { - saveFormToStorage(); -}, 500); -``` - -## Development Guidelines - -### Component Development -1. Follow Vue 3 Composition API patterns -2. Implement proper TypeScript types -3. Use props validation -4. Emit typed events -5. Document component API - -### State Management -1. Use Pinia for global state -2. Implement proper actions and getters -3. Use computed properties for derived state -4. Handle side effects in actions - -### Styling -1. Use Tailwind utility classes -2. Follow BEM for custom CSS -3. Implement responsive design -4. Use CSS variables for theming - -### Testing -1. Write unit tests for components -2. Test store actions and mutations -3. Implement E2E tests for critical paths -4. Test responsive behavior - -## Error Handling - -### Implementation -```typescript -const errorHandler = { - handleValidationError: (error: ValidationError) => { - // Handle validation errors - }, - handleDragError: (error: DragError) => { - // Handle drag and drop errors - }, - handleStateError: (error: StateError) => { - // Handle state management errors + +``` + +### Grid Layout Optimization + +```javascript +// Efficient grid layout calculation +const optimizeGridLayout = () => { + // Use requestAnimationFrame for smooth updates + requestAnimationFrame(() => { + const rows = groupComponentsByRows() + + rows.forEach(row => { + if (row.remainingSpace > 3) { // Only optimize significant gaps + distributeSpace(row) + } + }) + }) +} + +// Virtual scrolling for large forms +const useVirtualScrolling = (components, containerHeight) => { + const itemHeight = 120 // Average component height + const visibleCount = Math.ceil(containerHeight / itemHeight) + 2 + + return computed(() => { + const startIndex = Math.max(0, scrollTop.value / itemHeight - 1) + const endIndex = Math.min(components.length, startIndex + visibleCount) + + return components.slice(startIndex, endIndex) + }) +} +``` + +## Testing Strategy + +### Unit Tests + +```javascript +// Grid system tests +describe('Grid System', () => { + test('should calculate optimal placement', () => { + const store = useFormBuilderStore() + store.formComponents = [ + { id: '1', props: { gridColumn: 'span 6' } }, + { id: '2', props: { gridColumn: 'span 4' } } + ] + + const placement = store.findOptimalGridPlacement() + expect(placement.gridColumn).toBe('span 2') + expect(placement.width).toBe('17%') // Approximately 2/12 + }) + + test('should optimize layout correctly', () => { + const store = useFormBuilderStore() + store.formComponents = [ + { id: '1', props: { gridColumn: 'span 6' } }, + { id: '2', props: { gridColumn: 'span 3' } } + ] + + store.optimizeGridLayout() + + expect(store.formComponents[1].props.gridColumn).toBe('span 6') + }) +}) + +// Panel system tests +describe('Collapsible Panel', () => { + test('should auto-open when component selected', async () => { + const wrapper = mount(FormBuilder) + const store = useFormBuilderStore() + + store.selectComponent('test-id') + await nextTick() + + expect(wrapper.find('.panel-expanded').exists()).toBe(true) + }) +}) +``` + +### Integration Tests + +```javascript +// Full workflow tests +describe('Form Builder Workflow', () => { + test('should complete full component lifecycle', async () => { + const wrapper = mount(FormBuilder) + + // Add component + await wrapper.find('[data-component="text"]').trigger('click') + + // Should auto-select and open panel + expect(wrapper.find('.panel-expanded').exists()).toBe(true) + + // Update quick settings + await wrapper.find('.width-btn[data-width="50"]').trigger('click') + + // Verify component updated + const component = wrapper.vm.formStore.selectedComponent + expect(component.props.width).toBe('50%') + expect(component.props.gridColumn).toBe('span 6') + }) +}) +``` + +## Browser Compatibility + +### Supported Features +- **CSS Grid**: Supported in all modern browsers (IE11+ with autoprefixer) +- **Vue 3**: Modern browser requirements +- **Drag & Drop**: HTML5 drag/drop with fallbacks + +### Polyfills Required +```javascript +// For older browsers +import 'core-js/stable' +import 'regenerator-runtime/runtime' + +// CSS Grid polyfill for IE11 +import 'css-grid-polyfill' ``` ## Security Considerations -1. **Input Sanitization** -```typescript -const sanitizeInput = (input: string): string => { - // Sanitization implementation -}; -``` - -2. **Form Validation** -```typescript -const validateForm = async (form: FormData): Promise => { - // Validation implementation -}; -``` - -## Build and Deployment - -### Build Configuration +### Input Validation ```javascript -// nuxt.config.ts -export default defineNuxtConfig({ - // Configuration details -}); +// Sanitize component props +const sanitizeProps = (props) => { + const sanitized = {} + + Object.keys(props).forEach(key => { + if (allowedProps.includes(key)) { + sanitized[key] = sanitizeHtml(props[key]) + } + }) + + return sanitized +} + +// Validate grid values +const validateGridColumn = (gridColumn) => { + const spanMatch = gridColumn?.match(/^span\s+([1-9]|1[0-2])$/) + return spanMatch ? gridColumn : 'span 12' +} ``` -### Development Setup -```bash -# Installation -npm install - -# Development -npm run dev - -# Build -npm run build - -# Preview -npm run preview +### XSS Prevention +```javascript +// Escape user input in labels and help text +const escapeHtml = (text) => { + const div = document.createElement('div') + div.textContent = text + return div.innerHTML +} ``` +## Future Enhancements + +### Planned Features +1. **Advanced Grid Controls**: Custom grid templates, responsive breakpoints +2. **Component Templates**: Reusable component groups +3. **Theme System**: Multiple visual themes for forms +4. **Advanced Validation**: Cross-field validation, async validation +5. **Collaboration**: Real-time multi-user editing +6. **Version Control**: Form versioning and rollback +7. **Analytics**: Form usage and completion analytics + +### Technical Debt Items +1. **TypeScript Migration**: Complete TypeScript coverage +2. **Test Coverage**: Increase to 90%+ coverage +3. **Performance**: Virtual scrolling for large forms +4. **Accessibility**: Full WCAG 2.1 AA compliance + --- -For user documentation and usage guidelines, please refer to [Form Builder Documentation](FORM_BUILDER_DOCUMENTATION.md). +*This documentation reflects the current implementation including all enhanced features: smart collapsible panel system, visual grid selection, intelligent width recommendations, and comprehensive UX improvements.* -Last updated: June 10, 2024 \ No newline at end of file +Last updated: December 2024 \ No newline at end of file diff --git a/doc/form-builder/USER_GUIDE.md b/doc/form-builder/USER_GUIDE.md index e01be80..1e4b246 100644 --- a/doc/form-builder/USER_GUIDE.md +++ b/doc/form-builder/USER_GUIDE.md @@ -1,239 +1,397 @@ -# Form Builder Documentation +# Form Builder User Guide ## Overview -The Form Builder is a powerful drag-and-drop interface for creating dynamic forms. It provides an intuitive, visual way to build forms by selecting components, configuring their properties, and arranging them in your desired layout. Perfect for creating everything from simple contact forms to complex multi-step surveys. Forms can be used independently or integrated with the Process Builder for workflow automation. +The Form Builder is a modern, intuitive drag-and-drop interface for creating dynamic forms. Featuring a smart collapsible settings panel, visual grid system, and intelligent component recommendations, it makes form creation accessible to both developers and non-technical users. -> For technical implementation details, please refer to [Form Builder Technical Appendix](FORM_BUILDER_TECHNICAL_APPENDIX.md) +> For technical implementation details, see the [Technical Guide](TECHNICAL_GUIDE.md) + +## Interface Overview + +### Three-Panel Layout +- **Left Panel**: Component Library with categorized components +- **Center Panel**: Form Canvas with 12-column grid system +- **Right Panel**: Smart Collapsible Settings Panel + +### Key Features +- **Smart Settings Panel**: Auto-opens when components are selected, collapses to save space +- **Visual Grid System**: Intuitive width selection with grid previews +- **Quick Settings**: Inline editing for common properties +- **Smart Recommendations**: Automatic width suggestions based on field type +- **Real-time Preview**: See changes instantly as you build ## Getting Started -### Accessing the Form Builder -1. Navigate to `/form-builder` in your browser -2. You'll see a three-panel interface: - - Left: Component Library - - Middle: Form Canvas - - Right: Configuration Panel +### Creating Your First Form -### Quick Start Guide -1. **Create a New Form** - - Click "New Form" in the header - - Enter a form name and description - - Start adding components +1. **Start Building** + - Navigate to the Form Builder + - Click "New Form" or start with a template + - The interface loads with an empty canvas 2. **Add Components** - - Drag components from the left panel - - Or click components to add them to the end - - Components are organized by category for easy finding + - **Drag & Drop**: Drag any component from the left panel to the canvas + - **Click to Add**: Click a component to add it at the end of the form + - **Smart Placement**: Components automatically find optimal grid positions 3. **Configure Components** - - Click any component in the canvas to select it - - Use the right panel to configure its properties - - Changes are previewed in real-time + - **Auto-Selection**: Click any component to select it + - **Quick Settings**: The right panel automatically opens with common settings + - **Inline Editing**: Edit labels, names, widths, and validation directly + - **Full Settings**: Click "Full Settings" for advanced configuration -4. **Save and Preview** - - Click "Save" to store your form - - Use "Preview" to test the form - - Access saved forms via "Manage Forms" +4. **Save & Preview** + - **Auto-Save**: Changes are saved automatically + - **Preview Mode**: Toggle to test your form as users will see it + - **Form Management**: Access all saved forms from the header -## Available Components +## Smart Settings Panel System + +### Panel Behavior +- **Auto-Open**: Automatically expands when you select a component +- **Collapsible**: Toggle between expanded (320px) and collapsed (48px) states +- **Quick Access**: Common settings available without opening full modal +- **Context-Aware**: Shows only relevant settings for each component type + +### Quick Settings Available +- **Label**: Component display name +- **Field Name**: Internal identifier +- **Width**: S/M/L/XL quick sizing buttons +- **Required**: Toggle validation +- **Placeholder**: Hint text (where applicable) + +### Collapsed State Features +- **Component Icon**: Visual indicator of selected component type +- **Type Badge**: Short identifier (TXT, BTN, SEL, etc.) +- **Toggle Button**: One-click expansion +- **Space-Efficient**: Only 48px wide when collapsed + +## Enhanced Grid System + +### Visual Width Selection +The new grid system replaces technical percentages with intuitive options: + +#### Width Options +- **Narrow (25%)**: Small inputs like age, zip codes, short codes +- **Small (33%)**: Short text fields, city names, grouped inputs +- **Medium (50%)**: Names, phone numbers, paired inputs +- **Wide (75%)**: Addresses, URLs, prominent fields +- **Full (100%)**: Text areas, headings, single-column layouts + +#### Visual Grid Preview +- **12-Column Grid**: Mini preview shows exactly which columns your component will occupy +- **Active Columns**: Highlighted squares show component width +- **Current Selection**: Visual feedback shows your current choice +- **Grid Math**: Displays "6 of 12 columns" instead of technical details + +### Smart Recommendations +The system automatically suggests optimal widths based on component type: + +- **Narrow Recommended**: Number, Date, Time, Color, OTP fields +- **Small Recommended**: Text inputs +- **Medium Recommended**: Email, Phone, Password, Select, Masked inputs +- **Wide Recommended**: URL, File uploads +- **Full Recommended**: Text areas, Headings, Choice groups, Buttons + +#### Visual Indicators +- **Green Ring**: Recommended options have green highlighting +- **Selection State**: Current choice highlighted in blue +- **Combined State**: Selected + recommended shows green background + +## Component Library ### Basic Inputs -Perfect for collecting simple text and numeric data: -- **Text Field**: Single line text input - - Use for: Names, titles, short answers - - Features: Placeholder text, help text, validation +Perfect for collecting simple data: -- **Text Area**: Multi-line text input - - Use for: Comments, descriptions, long answers - - Features: Resizable, character count option +**Text Field** +- Single-line text input +- Smart width: Small (33%) +- Use for: Names, titles, short answers +- Quick settings: Label, name, placeholder, required -- **Number**: Numeric input field - - Use for: Age, quantity, numeric values - - Features: Min/max limits, step values +**Text Area** +- Multi-line text input +- Smart width: Full (100%) +- Use for: Comments, descriptions, long text +- Features: Resizable, character limits -- **Email**: Email address input - - Use for: Contact forms, user registration - - Features: Built-in email validation +**Number Field** +- Numeric input with validation +- Smart width: Narrow (25%) +- Use for: Age, quantity, prices +- Features: Min/max limits, step values -- **Password**: Secure password input - - Use for: Login forms, security inputs - - Features: Password masking, strength indicators +**Email Field** +- Email input with validation +- Smart width: Medium (50%) +- Use for: Contact forms, registration +- Features: Built-in email format validation -### Selection Inputs -For choosing from predefined options: -- **Select Dropdown**: Single selection menu - - Use for: Country selection, categories - - Features: Search, option groups, custom values +**Password Field** +- Secure password input +- Smart width: Medium (50%) +- Use for: Authentication forms +- Features: Password masking, strength indicators -- **Checkbox Group**: Multiple choice selection - - Use for: Multiple selections, preferences - - Features: Select all, option layout control +### Selection Components +For choosing from options: -- **Radio Group**: Single choice selection - - Use for: Exclusive choices, yes/no questions - - Features: Button or traditional style +**Select Dropdown** +- Single selection from options +- Smart width: Medium (50%) +- Use for: Countries, categories, status +- Features: Search, custom values, option groups -### Date and Time -Temporal input components: -- **Date Picker**: Date selection - - Use for: Birthdays, scheduling - - Features: Date range limits, format options +**Checkbox Group** +- Multiple selection options +- Smart width: Full (100%) +- Use for: Preferences, multiple choices +- Features: Select all option, layout control -- **Time Picker**: Time selection - - Use for: Scheduling, time slots - - Features: 12/24 hour format, minute steps +**Radio Group** +- Single choice from group +- Smart width: Full (100%) +- Use for: Exclusive choices, yes/no questions +- Features: Button or traditional styles -- **Date & Time**: Combined selection - - Use for: Event scheduling, appointments - - Features: Single field for date and time +**Switch Toggle** +- Boolean on/off control +- Smart width: Full (100%) +- Use for: Settings, feature toggles +- Features: Custom labels, default states + +### Date & Time Components +For temporal inputs: + +**Date Picker** +- Date selection interface +- Smart width: Narrow (25%) +- Use for: Birthdays, deadlines, scheduling +- Features: Date ranges, format options, validation + +**Time Picker** +- Time selection interface +- Smart width: Narrow (25%) +- Use for: Appointments, schedules +- Features: 12/24 hour format, minute intervals + +**Date & Time** +- Combined date and time picker +- Smart width: Medium (50%) +- Use for: Event scheduling, timestamps +- Features: Single field for both values ### Advanced Components -Specialized input types: -- **File Upload**: File input field - - Use for: Document upload, image submission - - Features: File type restrictions, size limits +Specialized functionality: -- **Repeater**: Repeatable field groups - - Use for: Multiple entries, dynamic lists - - Features: Add/remove controls, ordering +**File Upload** +- Standard file input +- Smart width: Wide (75%) +- Use for: Document uploads, attachments +- Features: File type restrictions, size limits -- **Group**: Field organization - - Use for: Related fields, form sections - - Features: Collapsible, conditional display +**File Drop Zone** +- Drag & drop upload area +- Smart width: Wide (75%) +- Use for: Multiple files, intuitive uploads +- Features: Visual feedback, progress indicators + +**OTP Input** +- One-time password entry +- Smart width: Narrow (25%) +- Use for: Two-factor authentication +- Features: Auto-focus, numeric only + +**Masked Input** +- Formatted text input +- Smart width: Medium (50%) +- Use for: Phone numbers, SSN, custom formats +- Features: Real-time formatting, validation ### Layout Components Form structure and organization: -- **Heading**: Section titles - - Use for: Form sections, categories - - Features: Multiple heading levels -- **Paragraph**: Descriptive text - - Use for: Instructions, help text - - Features: Rich text formatting +**Heading** +- Section titles and organization +- Smart width: Full (100%) +- Use for: Form sections, categories +- Features: Multiple heading levels (H1-H6) -- **Divider**: Visual separator - - Use for: Section breaks - - Features: Various styles +**Paragraph** +- Descriptive text content +- Smart width: Full (100%) +- Use for: Instructions, explanations +- Features: Rich text formatting options -## Form Configuration +**Divider** +- Visual section separator +- Smart width: Full (100%) +- Use for: Content organization +- Features: Various visual styles -### Basic Settings -- Form name and description -- Success/error messages -- Submit button text -- Form layout options +**Button** +- Action triggers +- Smart width: Full (100%) +- Use for: Form submission, navigation +- Features: Custom styling, click handlers -### Validation Options -- Required fields -- Input patterns -- Custom error messages -- Cross-field validation +## Form Configuration Workflows -### Advanced Settings -- Form submission behavior -- Success/failure redirects -- Custom CSS classes -- Event handlers +### Quick Settings Workflow (80% of edits) +1. Click any component to select it +2. Settings panel auto-opens on the right +3. Edit common properties inline: + - Change label text + - Adjust field width with S/M/L/XL buttons + - Toggle required validation + - Set placeholder text +4. Changes apply immediately + +### Full Settings Workflow (20% of edits) +1. Select component in quick settings panel +2. Click "Full Settings" button +3. Access comprehensive modal with: + - All component properties + - Advanced validation rules + - Visual width selector with grid preview + - Component-specific options + - Reset to defaults option + +### Bulk Operations +- **Duplicate**: Copy component with "Duplicate" button +- **Delete**: Remove component with "Delete" button +- **Reorder**: Drag components to reposition +- **Multi-select**: Select multiple components for batch operations + +## Form Templates & Management + +### Template System +- **Blank Form**: Start from scratch +- **Contact Form**: Pre-built contact form +- **Survey Form**: Multi-question survey template +- **Registration Form**: User registration template +- **Custom Templates**: Save your own templates + +### Form Management +- **Auto-Save**: Changes saved automatically every 30 seconds +- **Version History**: Track form changes over time +- **Duplicate Forms**: Copy existing forms as starting points +- **Export/Import**: JSON format for form portability +- **Form Library**: Organize forms by category or project ## Process Builder Integration -The Form Builder integrates with the Process Builder to create workflow-driven forms: +### Workflow Integration +Forms integrate seamlessly with the Process Builder for automated workflows: -### Connecting Forms to Processes -1. **Create and Save Your Form** - - Design your form in the Form Builder - - Save the form with a clear name and description - - Forms must be saved before they can be used in processes +1. **Create Form**: Design your form in Form Builder +2. **Save Form**: Forms must be saved before use in processes +3. **Add to Process**: Select saved form in Process Builder Form Task +4. **Data Flow**: Form submissions become process variables +5. **Decision Logic**: Use form data in process gateways and conditions -2. **Using Forms in Process Builder** - - In Process Builder, add a Form Task to your process - - Select your form from the Form Selector dropdown - - The form will be presented to users when they reach this task in the workflow - -3. **Form Data in Processes** - - Data submitted through forms becomes available as process variables - - Use form data to drive process decisions in gateways - - Reference form fields in scripts and conditions - -### Form URL Parameters -- Forms can accept URL parameters to pre-populate fields -- Process variables can be passed to forms as parameters -- Use the `formId` parameter to load a specific form +### Advanced Integration Features +- **URL Parameters**: Pre-populate form fields from process variables +- **Conditional Logic**: Show/hide fields based on process state +- **Multi-Step Forms**: Split complex forms across multiple process steps +- **Data Validation**: Cross-reference form data with process requirements ## Best Practices ### Form Design -1. Group related fields together -2. Use clear, concise labels -3. Provide help text for complex fields -4. Maintain consistent styling -5. Consider mobile users +1. **Start Simple**: Begin with essential fields only +2. **Use Smart Widths**: Trust the width recommendations +3. **Group Related Fields**: Use consistent widths for grouped fields +4. **Logical Flow**: Order fields in a natural sequence +5. **Mobile-First**: Test forms on mobile devices -### Validation -1. Validate on the appropriate event -2. Provide clear error messages -3. Show validation status clearly -4. Use appropriate validation rules +### Grid Layout Optimization +1. **Mix Widths**: Combine narrow and wide fields effectively +2. **Visual Balance**: Avoid too many full-width fields in sequence +3. **Logical Grouping**: Use similar widths for related fields +4. **Space Efficiency**: Let the system auto-optimize grid placement -### User Experience -1. Keep forms as short as possible -2. Use appropriate field types -3. Provide clear instructions -4. Show progress in multi-step forms -5. Ensure keyboard navigation +### User Experience +1. **Clear Labels**: Use descriptive, action-oriented labels +2. **Helpful Placeholders**: Provide examples in placeholder text +3. **Progressive Disclosure**: Use sections for complex forms +4. **Validation Feedback**: Set appropriate validation rules +5. **Success States**: Configure clear success messages -## Managing Forms +### Performance Optimization +1. **Component Limits**: Keep forms under 50 components when possible +2. **Conditional Logic**: Use sparingly to maintain performance +3. **File Uploads**: Set reasonable file size limits +4. **Auto-Save**: Leverage automatic saving features -### Saved Forms -- View all forms in the management interface -- Search and filter forms -- Duplicate existing forms -- Archive unused forms +## Accessibility Features -### Form Actions -- Preview: Test the form -- Edit: Modify form structure -- Delete: Remove unused forms -- Export: Save form configuration +### Built-in Accessibility +- **Keyboard Navigation**: Full keyboard support +- **Screen Reader Support**: Proper ARIA labels and descriptions +- **Focus Management**: Clear focus indicators +- **High Contrast**: Accessible color combinations +- **Touch Targets**: Mobile-friendly touch targets -### Form Analytics -- View submission statistics -- Track completion rates -- Identify problem fields -- Monitor usage patterns +### Accessibility Best Practices +1. **Descriptive Labels**: Always provide clear field labels +2. **Help Text**: Use help text for complex fields +3. **Error Messages**: Provide clear, actionable error messages +4. **Logical Order**: Ensure tab order follows visual layout +5. **Alternative Text**: Provide alt text for any images ## Troubleshooting ### Common Issues -1. **Form Not Saving** - - Check your connection - - Ensure form has a name - - Verify all components are valid -2. **Components Not Dragging** - - Clear browser cache - - Check for JavaScript errors - - Ensure proper mouse/touch interaction +**Panel Not Opening** +- Ensure component is properly selected +- Check browser console for JavaScript errors +- Refresh page if panel state becomes stuck -3. **Validation Not Working** - - Verify validation rules syntax - - Check field names are unique - - Ensure validation is enabled +**Grid Layout Issues** +- Use the optimize layout feature +- Check for invalid width values +- Reset component to default width -4. **Form Not Appearing in Process Builder** - - Verify the form was saved successfully - - Check user permissions - - Refresh the Process Builder page +**Components Not Saving** +- Verify internet connection +- Check browser local storage limits +- Try manual save if auto-save fails + +**Performance Issues** +- Reduce number of components +- Simplify conditional logic +- Clear browser cache ### Getting Help -- Check the technical documentation -- Contact support team -- Submit bug reports -- Request features +- **Documentation**: Complete technical guides available +- **Examples**: Sample forms and templates provided +- **Support**: Contact support team for assistance +- **Community**: Join user community forums + +## Advanced Features + +### Custom Components +- **Component Extensions**: Add custom component types +- **Styling Overrides**: Custom CSS for branded forms +- **Validation Rules**: Create custom validation logic +- **Integration Hooks**: Connect to external services + +### API Integration +- **Form Data API**: Programmatic access to form submissions +- **Component API**: Dynamically modify form components +- **Validation API**: Custom server-side validation +- **Webhook Support**: Real-time form submission notifications + +### Enterprise Features +- **Team Collaboration**: Multi-user form editing +- **Permission Management**: Role-based access control +- **Audit Logging**: Track all form changes +- **White Labeling**: Custom branding options --- -For technical details about implementation, component structure, and development guidelines, please refer to the [Technical Appendix](FORM_BUILDER_TECHNICAL_APPENDIX.md). +*This documentation reflects all current features including the smart collapsible settings panel, enhanced grid system with visual previews, intelligent width recommendations, and comprehensive UX improvements implemented in the latest version.* -Last updated: June 10, 2024 \ No newline at end of file +Last updated: December 2024 \ No newline at end of file diff --git a/doc/form-builder/grid-system.md b/doc/form-builder/grid-system.md new file mode 100644 index 0000000..4a85bab --- /dev/null +++ b/doc/form-builder/grid-system.md @@ -0,0 +1,587 @@ +# Form Builder Grid System - Complete Reference + +## Overview + +The form builder uses an intelligent 12-column CSS Grid system that automatically manages component placement and provides intuitive width selection through visual previews and smart recommendations. This system replaces technical percentages with user-friendly names and includes automatic gap-filling optimization. + +## Grid Architecture + +### CSS Grid Foundation +```css +.grid-container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-auto-flow: row dense; /* Enables automatic gap filling */ + column-gap: 16px; + row-gap: 16px; + width: 100%; +} +``` + +### Component Grid Placement +```css +.form-component { + grid-column: span 12; /* Default to full width */ + width: 100% !important; /* Force width within grid cell */ + transition: all 0.2s ease; +} +``` + +## Width Options System + +### Available Width Options + +| Name | Percentage | Grid Columns | Grid Span | Use Cases | +|--------|------------|--------------|--------------|-----------| +| Narrow | 25% | 3 of 12 | `span 3` | Small inputs like age, zip codes, short codes | +| Small | 33% | 4 of 12 | `span 4` | Short text fields, city names, grouped inputs | +| Medium | 50% | 6 of 12 | `span 6` | Names, phone numbers, paired inputs | +| Wide | 75% | 9 of 12 | `span 9` | Addresses, URLs, prominent fields | +| Full | 100% | 12 of 12 | `span 12` | Text areas, headings, single-column layouts | + +### Width Selection Interface + +#### Visual Grid Preview +Each width option displays a mini 12-column grid preview: +```vue +
+
+
+``` + +#### Current Selection Feedback +The interface shows: +- Current width name (e.g., "Medium") +- Grid columns used (e.g., "6 of 12 columns") +- Visual representation of current selection +- Percentage equivalent for technical reference + +## Smart Recommendation System + +### Field Type Recommendations + +The system automatically suggests optimal widths based on component type: + +#### Narrow Fields (25% - 3 columns) +**Recommended for**: Small, precise inputs +- `number`: Age, quantity, counts +- `date`: Birth dates, deadlines +- `time`: Appointment times +- `color`: Color picker inputs +- `otp`: Verification codes + +```javascript +const narrowRecommended = ['number', 'date', 'time', 'color', 'otp'] +``` + +#### Small Fields (33% - 4 columns) +**Recommended for**: Short text inputs +- `text`: Names, titles, short answers + +```javascript +const smallRecommended = ['text'] +``` + +#### Medium Fields (50% - 6 columns) +**Recommended for**: Standard form inputs +- `email`: Email addresses +- `tel`: Phone numbers +- `password`: Password fields +- `mask`: Formatted inputs (SSN, phone) +- `select`: Dropdown selections +- `datetime-local`: Combined date/time + +```javascript +const mediumRecommended = ['email', 'tel', 'password', 'mask', 'select', 'datetime-local'] +``` + +#### Wide Fields (75% - 9 columns) +**Recommended for**: Longer inputs requiring more space +- `url`: Website addresses +- `file`: File upload fields +- `dropzone`: Drag & drop upload areas + +```javascript +const wideRecommended = ['url', 'file', 'dropzone'] +``` + +#### Full Width Fields (100% - 12 columns) +**Recommended for**: Content and multi-option components +- `textarea`: Multi-line text areas +- `heading`: Section headings +- `paragraph`: Descriptive text +- `checkbox`: Checkbox groups +- `radio`: Radio button groups +- `range`: Range sliders +- `switch`: Toggle switches +- `button`: Action buttons +- `info-display`: Information displays + +```javascript +const fullRecommended = [ + 'textarea', 'heading', 'paragraph', 'checkbox', + 'radio', 'range', 'switch', 'button', 'info-display' +] +``` + +### Visual Recommendation Indicators + +- **Green Ring**: Recommended options have green highlighting +- **Selection State**: Current choice highlighted in blue +- **Combined State**: Selected + recommended shows green background with checkmark +- **Recommendation Badge**: "Recommended" text appears next to optimal choices + +## Smart Grid Placement Algorithm + +### Optimal Placement Logic + +The system automatically finds the best position for new components: + +```javascript +findOptimalGridPlacement() { + if (this.formComponents.length === 0) { + // First component - full width + return { + gridColumn: 'span 12', + rowIndex: 0, + width: '100%' + } + } + + // Group components by their implicit rows + const rows = this.analyzeGridRows() + + // Find row with remaining space + const rowWithSpace = rows.find(row => row.remainingSpace > 0) + + if (rowWithSpace) { + // Use remaining space in existing row + const remainingColumns = rowWithSpace.remainingSpace + const widthPercent = this.columnsToPercentage(remainingColumns) + + return { + gridColumn: `span ${remainingColumns}`, + rowIndex: rows.indexOf(rowWithSpace), + width: `${widthPercent}%` + } + } else { + // Create new row + return { + gridColumn: 'span 12', + rowIndex: rows.length, + width: '100%' + } + } +} +``` + +### Row Analysis +```javascript +analyzeGridRows() { + const rows = [] + let currentRowSpace = 12 + + this.formComponents.forEach(component => { + const spanMatch = component.props.gridColumn?.match(/span\s+(\d+)/) || [] + const columnSpan = parseInt(spanMatch[1]) || 12 + + if (columnSpan <= currentRowSpace) { + // Add to current row + currentRowSpace -= columnSpan + } else { + // Start new row + rows.push({ remainingSpace: currentRowSpace }) + currentRowSpace = 12 - columnSpan + } + }) + + return rows +} +``` + +## Grid Layout Optimization + +### Automatic Gap Filling + +The `grid-auto-flow: row dense` CSS property enables automatic gap filling: +- Components automatically fill available spaces +- No manual positioning required +- Optimal use of screen real estate + +### Layout Optimization Algorithm + +```javascript +optimizeGridLayout() { + const rows = this.groupComponentsByRows() + + rows.forEach(row => { + if (row.remainingSpace > 0) { + this.distributeRemainingSpace(row) + } + }) +} + +distributeRemainingSpace(row) { + if (row.components.length === 1 && row.remainingSpace > 0) { + // Expand single component to fill row + const comp = row.components[0] + this.updateComponentSize(comp.component, 12) + } else if (row.components.length > 1) { + // Distribute space proportionally + const extraSpanPerComponent = Math.floor(row.remainingSpace / row.components.length) + let remainingExtraSpan = row.remainingSpace % row.components.length + + row.components.forEach(comp => { + let extraSpan = extraSpanPerComponent + if (remainingExtraSpan > 0) { + extraSpan += 1 + remainingExtraSpan-- + } + + const newSpan = comp.span + extraSpan + this.updateComponentSize(comp.component, newSpan) + }) + } +} +``` + +## Collapsible Panel Integration + +### Quick Width Selector + +The collapsible panel includes a compact width selector: + +```vue +
+ +
+``` + +### Compact Options +```javascript +const compactWidthOptions = [ + { name: 'S', value: 25, gridColumns: 3, description: 'Small (25%)' }, + { name: 'M', value: 50, gridColumns: 6, description: 'Medium (50%)' }, + { name: 'L', value: 75, gridColumns: 9, description: 'Large (75%)' }, + { name: 'XL', value: 100, gridColumns: 12, description: 'Extra Large (100%)' } +] +``` + +## Grid Component Implementation + +### Component Props Structure +```typescript +interface ComponentProps { + width: string // e.g., "50%" + gridColumn: string // e.g., "span 6" + label?: string + name?: string + // ... other props +} +``` + +### Width Calculation Functions + +```javascript +// Convert percentage to grid columns +const percentageToGridColumns = (percentage) => { + const mapping = { + 25: 3, // 3/12 = 25% + 33: 4, // 4/12 = 33.33% + 50: 6, // 6/12 = 50% + 66: 8, // 8/12 = 66.67% + 75: 9, // 9/12 = 75% + 100: 12 // 12/12 = 100% + } + return mapping[percentage] || Math.round((percentage / 100) * 12) +} + +// Convert grid columns to percentage +const gridColumnsToPercentage = (columns) => { + const mapping = { + 3: 25, // 3/12 = 25% + 4: 33, // 4/12 = 33.33% + 6: 50, // 6/12 = 50% + 8: 66, // 8/12 = 66.67% + 9: 75, // 9/12 = 75% + 12: 100 // 12/12 = 100% + } + return mapping[columns] || Math.round((columns / 12) * 100) +} + +// Set component width with grid sync +const setComponentWidth = (percentage, gridColumns) => { + component.props.width = `${percentage}%` + component.props.gridColumn = `span ${gridColumns}` +} +``` + +## Responsive Behavior + +### Mobile Optimization +```css +@media (max-width: 768px) { + .grid-container { + grid-template-columns: 1fr; /* Single column on mobile */ + column-gap: 0; + } + + .form-component { + grid-column: span 1 !important; /* Force single column */ + } +} +``` + +### Tablet Optimization +```css +@media (min-width: 769px) and (max-width: 1024px) { + .grid-container { + grid-template-columns: repeat(8, 1fr); /* 8 columns on tablet */ + } + + .form-component[style*="span 12"] { + grid-column: span 8 !important; /* Adjust full-width components */ + } +} +``` + +## Resize Handle System + +### Interactive Resizing +```vue +
+
+
+``` + +### Resize Logic with Snap-to-Grid +```javascript +const handleResize = (event) => { + const deltaX = event.clientX - initialX.value + const container = document.querySelector('.grid-container') + const containerWidth = container.offsetWidth + const deltaPercentage = (deltaX / containerWidth) * 100 + + let newWidth = initialWidth.value + deltaPercentage + newWidth = Math.max(25, Math.min(100, newWidth)) + + // Snap to standard widths + const standardWidths = [25, 33, 50, 66, 75, 100] + for (const std of standardWidths) { + if (Math.abs(newWidth - std) < 5) { + newWidth = std + break + } + } + + // Convert to grid columns and update + const gridColumns = percentageToGridColumns(newWidth) + updateComponentSize(component, newWidth, gridColumns) +} +``` + +## CSS Styling Reference + +### Grid Container Styles +```css +.grid-container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-auto-flow: row dense; + column-gap: 16px; + row-gap: 16px; + width: 100%; + padding: 0; + box-sizing: border-box; +} +``` + +### Width Selector Modal Styles +```css +.width-option { + @apply border border-gray-200 rounded-lg p-4 transition-all duration-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer flex items-center space-x-4; +} + +.width-option.selected { + @apply border-blue-500 bg-blue-50 ring-2 ring-blue-200; +} + +.width-option.recommended { + @apply ring-2 ring-green-200 border-green-300; +} + +.width-option.selected.recommended { + @apply border-green-500 bg-green-50 ring-2 ring-green-200; +} +``` + +### Grid Preview Styles +```css +.grid-container-mini { + @apply grid grid-cols-12 gap-1 w-32; +} + +.grid-cell { + @apply h-2 rounded-sm transition-colors duration-200; +} + +.grid-cell.active { + @apply bg-blue-500; +} + +.grid-cell.inactive { + @apply bg-gray-200; +} +``` + +### Quick Selector Styles +```css +.width-selector-compact { + @apply flex space-x-1; +} + +.width-btn { + @apply flex-1 px-2 py-1.5 text-xs font-medium text-center rounded-md border border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50 transition-colors duration-200; +} + +.width-btn.active { + @apply border-blue-500 bg-blue-50 text-blue-700 ring-1 ring-blue-200; +} +``` + +## Best Practices + +### Grid Layout Design +1. **Start Simple**: Begin with recommended widths +2. **Mix Widths**: Combine different widths for visual interest +3. **Logical Grouping**: Use consistent widths for related fields +4. **Visual Balance**: Avoid too many full-width fields in sequence +5. **Mobile-First**: Consider how layouts adapt on smaller screens + +### Performance Considerations +1. **Grid Optimization**: Use the automatic optimization feature +2. **Component Limits**: Keep forms under 50 components for best performance +3. **Responsive Testing**: Test across different screen sizes +4. **Browser Support**: Ensure CSS Grid polyfills for older browsers + +### User Experience Guidelines +1. **Intuitive Widths**: Trust the recommendation system +2. **Visual Feedback**: Use the grid preview for precision +3. **Consistent Patterns**: Establish width patterns across forms +4. **Progressive Enhancement**: Start with basics, add complexity gradually + +## Troubleshooting + +### Common Issues + +**Grid Layout Not Working** +- Check CSS Grid browser support +- Verify `grid-template-columns` is applied +- Ensure components have valid `gridColumn` values + +**Components Overlapping** +- Check for invalid span values (must be 1-12) +- Verify total spans in row don't exceed 12 +- Use grid optimization to fix layouts + +**Responsive Issues** +- Test media query breakpoints +- Verify mobile-specific grid rules +- Check component width calculations + +**Performance Problems** +- Reduce number of components +- Use virtual scrolling for large forms +- Optimize grid calculations + +### Debugging Tools + +```javascript +// Debug grid layout +const debugGridLayout = () => { + const rows = groupComponentsByRows() + console.table(rows.map(row => ({ + components: row.components.length, + remainingSpace: row.remainingSpace, + totalSpan: 12 - row.remainingSpace + }))) +} + +// Validate component grid properties +const validateGridProps = (component) => { + const span = component.props.gridColumn?.match(/span\s+(\d+)/)?.[1] + const width = parseInt(component.props.width) + + console.log({ + id: component.id, + span: parseInt(span), + width: width, + valid: span >= 1 && span <= 12 && width > 0 && width <= 100 + }) +} +``` + +## Migration Guide + +### Upgrading from Percentage-Only System + +1. **Update Component Props**: +```javascript +// Old system +component.props.width = "50%" + +// New system +component.props.width = "50%" +component.props.gridColumn = "span 6" +``` + +2. **Migrate Existing Forms**: +```javascript +const migrateFormToGrid = (form) => { + return { + ...form, + components: form.components.map(component => ({ + ...component, + props: { + ...component.props, + gridColumn: component.props.gridColumn || + `span ${percentageToGridColumns(parseInt(component.props.width) || 100)}` + } + })) + } +} +``` + +3. **Update CSS**: +```css +/* Remove old percentage-based widths */ +.form-component { + /* width: var(--component-width); // Remove this */ + grid-column: var(--grid-column); /* Add this */ +} +``` + +--- + +*This grid system documentation reflects the complete implementation including visual selection, smart recommendations, automatic optimization, and responsive behavior.* + +**Last updated**: December 2024 \ No newline at end of file diff --git a/pages/form-builder/index.vue b/pages/form-builder/index.vue index eb657dc..33294cb 100644 --- a/pages/form-builder/index.vue +++ b/pages/form-builder/index.vue @@ -4,6 +4,7 @@
+
+
+ Preview Mode +
-
+ +
+
{{ formName }}
+
- + +
+ +
+ - Save Form + Save - - - Preview + + + {{ isPreview ? 'Edit' : 'Preview' }} - - - - Form Settings - - - - - Manage Forms +
+ + +
+ + + Templates +
+ + +
+
+ + + + +
+ + +
+
+
@@ -58,6 +89,7 @@
@@ -140,99 +172,301 @@
-

Form Canvas

+

{{ isPreview ? 'Form Preview' : 'Form Canvas' }}

- Drag components to build your form + + {{ isPreview ? 'Preview mode - Form is interactive' : 'Drag components to build your form' }} +
- + +
+ + + +
+ +
+ + + + +
+ + +
+ + + +
+
+
+ + Click any field to configure its settings + +
+
+
+
+
- +
-
+
-

Configuration

+ +
+
+
+ +

Field Settings

+
+ +
+
+ + +
+
+
+ +

No Field Selected

+

+ Click on any form field in the canvas to configure its settings here. +

+
+
+ +
+ +
+
+
+ +
+
+

+ {{ getComponentTypeName(formStore.selectedComponent.type) }} +

+

+ {{ formStore.selectedComponent.props.label || formStore.selectedComponent.props.name || 'Untitled' }} +

+
+
+
+ + +
+ + + +
+ + +
+
Quick Settings
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ +
+
+ + +
+ +
+ + +
+ + +
+
+
+
-
- -
-
- -

No component selected

-

Select a component to configure

+ + +
+ +
+ +
+ + +
+ +
+
+ +
+
+ {{ getComponentTypeShort(formStore.selectedComponent.type) }} +
+
+ + +
+ +
+ Select field +
- - -
-
- - - - -
- -
- - -
-
- - + - -
+ +
+
-
- + + + + + + + +
+ diff --git a/public/images/form-template-placeholder.svg b/public/images/form-template-placeholder.svg new file mode 100644 index 0000000..cb8161e --- /dev/null +++ b/public/images/form-template-placeholder.svg @@ -0,0 +1,7 @@ + + + + + + Form Template + \ No newline at end of file diff --git a/stores/formBuilder.js b/stores/formBuilder.js index 2d44aac..187a1b4 100644 --- a/stores/formBuilder.js +++ b/stores/formBuilder.js @@ -24,14 +24,16 @@ export const useFormBuilderStore = defineStore('formBuilder', { onSubmit: false, onValidation: false }, - scriptMode: 'safe' // 'safe' or 'advanced' + scriptMode: 'safe', // 'safe' or 'advanced' + + // Form preview data + previewFormData: {}, }), getters: { selectedComponent: (state) => { - return state.selectedComponentId - ? state.formComponents.find(c => c.id === state.selectedComponentId) - : null; + if (!state.selectedComponentId) return null; + return state.formComponents.find(c => c.id === state.selectedComponentId); }, formConfig: (state) => { @@ -56,6 +58,10 @@ export const useFormBuilderStore = defineStore('formBuilder', { ...entry, isCurrent: index === state.currentHistoryIndex })); + }, + + getPreviewFormData: (state) => { + return state.previewFormData; } }, @@ -163,6 +169,9 @@ export const useFormBuilderStore = defineStore('formBuilder', { }, addComponent(component) { + // Add debugging + console.log('FormStore: Adding component', component.type); + // Store the state before the change for history const beforeComponents = [...this.formComponents]; @@ -170,34 +179,189 @@ export const useFormBuilderStore = defineStore('formBuilder', { const { gridColumn, rowIndex, width } = this.findOptimalGridPlacement(); const newComponentId = uuidv4(); - const newComponent = { - ...component, - id: newComponentId, - props: { - ...component.defaultProps, - name: `${component.type}_${this.formComponents.length + 1}`, - label: `${component.name} ${this.formComponents.length + 1}`, - width: width, - gridColumn: gridColumn + + // Log the incoming component structure + console.log('Component before processing:', JSON.stringify({ + type: component.type, + name: component.name, + hasDefaultProps: !!component.defaultProps, + defaultPropsKeys: component.defaultProps ? Object.keys(component.defaultProps) : [] + })); + + try { + // Create a deep copy of the default props to avoid reference issues + const defaultProps = component.defaultProps ? JSON.parse(JSON.stringify(component.defaultProps)) : {}; + + // Ensure the component has necessary grid properties + defaultProps.width = defaultProps.width || width; + defaultProps.gridColumn = defaultProps.gridColumn || gridColumn; + + // Generate a default name based on component type if not provided + if (!defaultProps.name) { + defaultProps.name = `${component.type}_${this.formComponents.length + 1}`; } - }; - - this.formComponents.push(newComponent); - // Explicitly select the new component - this.selectedComponentId = newComponentId; - this.hasUnsavedChanges = true; - - // Record the action in history - this.recordHistory('add_component', { - componentType: component.type, - componentId: newComponentId, - componentName: newComponent.props.label, - beforeState: { - components: beforeComponents, - selectedComponentId: null // Was null before adding - }, - newComponent: newComponent - }); + + // Generate a default label based on component name if not provided + if (!defaultProps.label && !['heading', 'paragraph', 'divider'].includes(component.type)) { + defaultProps.label = `${component.name} ${this.formComponents.length + 1}`; + } + + // Handle special component types + switch (component.type) { + case 'image-preview': + // Ensure all required image preview properties + defaultProps.imageUrl = defaultProps.imageUrl || 'https://placehold.co/600x400'; + defaultProps.altText = defaultProps.altText || 'Preview image'; + defaultProps.caption = defaultProps.caption || ''; + defaultProps.showZoom = defaultProps.showZoom !== undefined ? defaultProps.showZoom : true; + defaultProps.showCaption = defaultProps.showCaption !== undefined ? defaultProps.showCaption : true; + defaultProps.maxWidth = defaultProps.maxWidth || '100%'; + defaultProps.height = defaultProps.height || 'auto'; + break; + + case 'repeating-group': + // Ensure all required repeating group properties + defaultProps.minItems = defaultProps.minItems !== undefined ? defaultProps.minItems : 1; + defaultProps.maxItems = defaultProps.maxItems !== undefined ? defaultProps.maxItems : 10; + defaultProps.buttonText = defaultProps.buttonText || 'Add Item'; + defaultProps.removeText = defaultProps.removeText || 'Remove'; + defaultProps.fields = defaultProps.fields || [ + { type: 'text', name: 'field_1', label: 'Field 1', placeholder: 'Enter value' } + ]; + break; + + case 'dynamic-list': + // Ensure all required dynamic list properties + defaultProps.placeholder = defaultProps.placeholder || 'Enter item'; + defaultProps.buttonText = defaultProps.buttonText || 'Add Item'; + defaultProps.minItems = defaultProps.minItems !== undefined ? defaultProps.minItems : 0; + defaultProps.maxItems = defaultProps.maxItems !== undefined ? defaultProps.maxItems : 20; + defaultProps.defaultItems = Array.isArray(defaultProps.defaultItems) ? defaultProps.defaultItems : ['Item 1', 'Item 2']; + break; + + case 'info-display': + // Ensure all required info display properties + defaultProps.title = defaultProps.title || 'Information'; + defaultProps.layout = defaultProps.layout || 'vertical'; + defaultProps.showBorder = defaultProps.showBorder !== undefined ? defaultProps.showBorder : true; + defaultProps.backgroundColor = defaultProps.backgroundColor || '#f8fafc'; + defaultProps.fields = Array.isArray(defaultProps.fields) ? defaultProps.fields : [ + { label: 'Info Item', value: 'Value', key: 'item_1' } + ]; + break; + + case 'file': + // Ensure all required file upload properties + defaultProps.accept = defaultProps.accept || '.pdf,.doc,.docx,.jpg,.jpeg,.png'; + break; + + case 'heading': + // Ensure all required heading properties + defaultProps.value = defaultProps.value || 'Heading'; + defaultProps.level = defaultProps.level || 2; + break; + + case 'paragraph': + // Ensure all required paragraph properties + defaultProps.value = defaultProps.value || 'Paragraph text'; + break; + + case 'select': + case 'radio': + case 'checkbox': + // Ensure options array exists + if (!Array.isArray(defaultProps.options) || defaultProps.options.length === 0) { + defaultProps.options = [ + { label: 'Option 1', value: 'option_1' }, + { label: 'Option 2', value: 'option_2' } + ]; + } + break; + + case 'range': + // Ensure all required range properties + defaultProps.min = defaultProps.min !== undefined ? defaultProps.min : 0; + defaultProps.max = defaultProps.max !== undefined ? defaultProps.max : 100; + defaultProps.step = defaultProps.step !== undefined ? defaultProps.step : 1; + defaultProps.value = defaultProps.value !== undefined ? defaultProps.value : 50; + break; + + case 'color': + // Ensure color has a default value + defaultProps.value = defaultProps.value || '#3b82f6'; + break; + + case 'switch': + // Ensure switch has a default value + defaultProps.value = defaultProps.value !== undefined ? defaultProps.value : false; + break; + + case 'hidden': + // Ensure hidden field has a value + defaultProps.value = defaultProps.value || ''; + break; + + case 'button': + // Ensure all required button properties + defaultProps.buttonType = defaultProps.buttonType || 'button'; + defaultProps.variant = defaultProps.variant || 'primary'; + defaultProps.size = defaultProps.size || 'md'; + defaultProps.disabled = defaultProps.disabled !== undefined ? defaultProps.disabled : false; + defaultProps.onClick = defaultProps.onClick || ''; + break; + + case 'mask': + // Ensure all required mask properties + defaultProps.mask = defaultProps.mask || '###-###-####'; + break; + + case 'otp': + // Ensure all required OTP properties + defaultProps.digits = defaultProps.digits !== undefined ? defaultProps.digits : 6; + break; + + case 'dropzone': + // Ensure all required dropzone properties + defaultProps.accept = defaultProps.accept || 'image/*,.pdf,.doc,.docx'; + defaultProps.multiple = defaultProps.multiple !== undefined ? defaultProps.multiple : true; + defaultProps.maxSize = defaultProps.maxSize !== undefined ? defaultProps.maxSize : 5242880; // 5MB + defaultProps.maxFiles = defaultProps.maxFiles !== undefined ? defaultProps.maxFiles : 5; + break; + + case 'switch': + // Ensure switch has a default value + defaultProps.value = defaultProps.value !== undefined ? defaultProps.value : false; + break; + } + + const newComponent = { + ...component, + id: newComponentId, + props: defaultProps + }; + + this.formComponents.push(newComponent); + // Explicitly select the new component + this.selectedComponentId = newComponentId; + this.hasUnsavedChanges = true; + + // Record the action in history + this.recordHistory('add_component', { + componentType: component.type, + componentId: newComponentId, + componentName: newComponent.props.label || newComponent.type, + beforeState: { + components: beforeComponents, + selectedComponentId: null // Was null before adding + }, + newComponent: newComponent + }); + + console.log('Component successfully added:', newComponent.type, newComponent.id); + } catch (error) { + console.error('Error adding component:', error); + console.error('Problematic component:', component); + } }, // Find optimal placement for a new component in the grid @@ -426,6 +590,11 @@ export const useFormBuilderStore = defineStore('formBuilder', { this.hasUnsavedChanges = false; }, + // Update preview form data + updatePreviewFormData(data) { + this.previewFormData = { ...data }; + }, + // Get forms from the backend async getForms() { try {