form-builder-pro 1.3.9 → 1.4.0

package/dist/index.mjs

@@ -7439,6 +7439,18 @@ var FormRenderer = class {
         grid.appendChild(fieldWrapper);
       });
       sectionEl.appendChild(grid);
+      if (section.repeatable === true) {
+        const addLabel = section.addButtonLabel && section.addButtonLabel.trim() || "+ Add";
+        const addRow = createElement("div", { className: "mt-3 flex justify-start" });
+        addRow.appendChild(
+          createElement("button", {
+            type: "button",
+            className: "px-4 py-2 text-sm font-medium rounded-md border border-[#019FA2] text-[#019FA2] dark:text-[#4dd4d6] dark:border-[#019FA2] bg-transparent hover:bg-[#019FA2]/10 transition-colors",
+            text: addLabel
+          })
+        );
+        sectionEl.appendChild(addRow);
+      }
       form.appendChild(sectionEl);
     });
     const submitBtn = createElement("button", {
@@ -9914,6 +9926,21 @@ var Section = class _Section {
       nestedWrap.appendChild(nestedList);
       sectionEl.appendChild(nestedWrap);
     }
+    if (this.section.repeatable === true) {
+      const addLabel = this.section.addButtonLabel && this.section.addButtonLabel.trim() || "+ Add";
+      const footer = createElement("div", {
+        className: "px-4 pb-4 pt-2 flex justify-start border-t border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/30"
+      });
+      footer.appendChild(
+        createElement("button", {
+          type: "button",
+          className: "px-4 py-2 text-sm font-medium rounded-md border border-[#019FA2] text-[#019FA2] dark:text-[#4dd4d6] dark:border-[#019FA2] bg-white dark:bg-gray-900 hover:bg-[#019FA2]/10 transition-colors",
+          text: addLabel,
+          onclick: (e) => e.preventDefault()
+        })
+      );
+      sectionEl.appendChild(footer);
+    }
     this.initFieldSortable(fieldsGrid);
     return sectionEl;
   }
@@ -10272,6 +10299,7 @@ var FormBuilder = class {
           collapsible: s.collapsible,
           parentGroupId: s.parentGroupId,
           repeatable: s.repeatable,
+          addButtonLabel: s.addButtonLabel,
           minInstances: s.minInstances,
           maxInstances: s.maxInstances,
           css: s.css,
@@ -11162,11 +11190,37 @@ var FormBuilder = class {
       this.createCheckboxField(
         "Allow multiple instances",
         section.repeatable === true,
-        (checked) => formStore.getState().updateSection(sectionId, { repeatable: checked }),
+        (checked) => formStore.getState().updateSection(sectionId, {
+          repeatable: checked,
+          ...checked ? {} : { addButtonLabel: null }
+        }),
         `group-repeatable-${sectionId}`
       )
     );
     if (section.repeatable === true) {
+      const addLabelWrap = createElement("div", { className: "mb-2" });
+      addLabelWrap.appendChild(
+        createElement("label", {
+          className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+          text: "Add Button Label"
+        })
+      );
+      addLabelWrap.appendChild(
+        createElement("input", {
+          type: "text",
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+          value: section.addButtonLabel ?? "",
+          placeholder: "e.g. + Billing Address",
+          "data-focus-id": `group-add-btn-label-${sectionId}`,
+          oninput: (e) => {
+            const raw = e.target.value;
+            formStore.getState().updateSection(sectionId, {
+              addButtonLabel: raw === "" ? null : raw
+            });
+          }
+        })
+      );
+      body.appendChild(addLabelWrap);
       const minG = createElement("div", { className: "mb-2" });
       minG.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Min Instances" }));
       minG.appendChild(createElement("input", {