form-builder-pro 1.2.2 → 1.2.3

package/dist/index.js

@@ -8795,9 +8795,10 @@ var FormBuilder = class {
           fields: s.fields.map((f) => ({
             id: f.id,
             type: f.type,
-            label: f.label
-            // Exclude frequently changing text properties from hash
-            // to prevent re-renders on typing
+            label: f.label,
+            layout: f.layout,
+            width: f.width
+            // Exclude frequently changing text (placeholder, etc.) to prevent re-renders on typing
           }))
         })),
         selectedField: state.selectedFieldId,
@@ -9268,18 +9269,24 @@ var FormBuilder = class {
     layoutLabelRow.appendChild(spanValueDisplay);
     layoutGroup.appendChild(layoutLabelRow);
     const spanButtonsContainer = createElement("div", { className: "grid grid-cols-6 gap-2 mt-2" });
+    const fieldId = selectedField.id;
     for (let span = 1; span <= 12; span++) {
       const isActive = currentSpan === span;
       const spanBtn = createElement("button", {
         type: "button",
-        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors ${isActive ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
+        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors cursor-pointer ${isActive ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
         text: `${span}`,
-        title: `${span} column${span > 1 ? "s" : ""} (${Math.round(span / 12 * 100)}%)`,
-        onclick: () => {
-          const layout = selectedField.layout || { row: 0, column: 0 };
-          formStore.getState().updateField(selectedField.id, {
+        title: `${span} column${span > 1 ? "s" : ""} (${Math.round(span / 12 * 100)}%)`
+      });
+      spanBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const state2 = formStore.getState();
+        const field = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === fieldId);
+        if (field) {
+          const layout = field.layout || { row: 0, column: 0 };
+          state2.updateField(fieldId, {
             layout: { ...layout, span },
-            // Also update width for backward compatibility
             width: Math.round(span / 12 * 100)
           });
         }