@enerjisaformlibrary/formbuilder-react 1.0.7 → 1.0.8

package/README.md

@@ -47,6 +47,8 @@ function App() {
 - JSON export/import
 - Responsive grid system (12-column)
 - Dark/Light theme support
+- **Container support**: Drop fields into containers with multiple columns
+- **Column support**: Drop fields into existing columns
 
 ## License
 

package/index.cjs

@@ -28521,7 +28521,7 @@ function JsonViewerModal({ isOpen, onClose, schema }) {
 }
 
 function FormBuilder({ initialForm, onSave, onChange, className = '', theme = 'light', showToolbar = true, showComponentLibrary = true, showPropertiesPanel = true, }) {
-    const { form, loadForm, addRowWithField } = useFormStore();
+    const { form, loadForm, addRowWithField, addField, addFieldToContainer, addFieldToContainerDirect } = useFormStore();
     const [activeId, setActiveId] = React.useState(null);
     const [activeType, setActiveType] = React.useState(null);
     const [jsonViewerOpen, setJsonViewerOpen] = React.useState(false);
@@ -28585,36 +28585,58 @@ function FormBuilder({ initialForm, onSave, onChange, className = '', theme = 'l
         // Check for library item (using actual data structure from ComponentLibrary)
         const isLibraryItem = activeData?.isLibraryItem;
         const fieldType = activeData?.componentType || activeData?.type;
-        const isCanvas = overData?.type === 'canvas';
-        const isColumn = overData?.type === 'column' || overData?.columnId;
+        // Determine drop target type
+        const dropType = overData?.type;
+        const isCanvas = dropType === 'canvas';
+        const isColumn = dropType === 'column';
+        const isContainerDrop = dropType === 'container-drop';
+        const isContainerColumn = dropType === 'container-column';
         console.log('[FormBuilder] Checking conditions:', {
             isLibraryItem,
             fieldType,
+            dropType,
             isCanvas,
             isColumn,
-            activeData,
+            isContainerDrop,
+            isContainerColumn,
             overData
         });
-        if (isLibraryItem && fieldType) {
-            if (isCanvas || isColumn) {
-                console.log('[FormBuilder] Adding field:', fieldType);
-                addRowWithField({
-                    type: fieldType,
-                    props: {
-                        key: `field_${Date.now()}`,
-                        label: getDefaultLabel(fieldType),
-                        placeholder: '',
-                    },
-                    validation: {},
-                    customStyle: {},
-                });
-            }
-            else {
-                console.log('[FormBuilder] Drop target not canvas or column');
-            }
+        if (!isLibraryItem || !fieldType) {
+            console.log('[FormBuilder] Not a library item drag');
+            return;
+        }
+        const newField = {
+            type: fieldType,
+            props: {
+                key: `field_${Date.now()}`,
+                label: getDefaultLabel(fieldType),
+                placeholder: '',
+            },
+            validation: {},
+            customStyle: {},
+        };
+        if (isContainerColumn && overData?.rowId && overData?.columnId && overData?.containerFieldId && overData?.containerRowId && overData?.containerColumnId) {
+            // Drop into a specific container column
+            console.log('[FormBuilder] Adding field to container column:', fieldType);
+            addFieldToContainer(overData.rowId, overData.columnId, overData.containerFieldId, overData.containerRowId, overData.containerColumnId, newField);
+        }
+        else if (isContainerDrop && overData?.rowId && overData?.columnId && overData?.containerFieldId) {
+            // Drop into container directly (adds to first row)
+            console.log('[FormBuilder] Adding field to container direct:', fieldType);
+            addFieldToContainerDirect(overData.rowId, overData.columnId, overData.containerFieldId, newField);
+        }
+        else if (isColumn && overData?.rowId && overData?.columnId) {
+            // Drop into an existing column
+            console.log('[FormBuilder] Adding field to existing column:', fieldType);
+            addField(overData.rowId, overData.columnId, newField);
+        }
+        else if (isCanvas) {
+            // Drop into canvas - create new row
+            console.log('[FormBuilder] Adding field as new row:', fieldType);
+            addRowWithField(newField);
         }
         else {
-            console.log('[FormBuilder] Not a library item drag');
+            console.log('[FormBuilder] Unknown drop target');
         }
     };
     return (jsxRuntime.jsx(TooltipProvider, { children: jsxRuntime.jsxs("div", { className: `formbuilder-container ${theme} ${className}`, children: [jsxRuntime.jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: [jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [showToolbar && (jsxRuntime.jsx(Toolbar, { onOpenJsonViewer: () => setJsonViewerOpen(true) })), jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [showComponentLibrary && (jsxRuntime.jsx(ComponentLibrary, {})), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntime.jsx(FormCanvas, {}) }), showPropertiesPanel && (jsxRuntime.jsx(PropertiesPanel, {}))] })] }), jsxRuntime.jsx(DragOverlay, { children: activeId && activeType && (jsxRuntime.jsx(DragOverlayContent, { type: activeType })) })] }), jsxRuntime.jsx(JsonViewerModal, { isOpen: jsonViewerOpen, onClose: () => setJsonViewerOpen(false), schema: form })] }) }));