@dmitryvim/form-builder 0.2.8 → 0.2.9

package/dist/esm/index.js

@@ -410,7 +410,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         font-size: var(--fb-font-size);
         transition: all var(--fb-transition-duration);
       `;
-      addBtn.textContent = `+ Add ${element.label || "Text"}`;
+      addBtn.textContent = "+";
       addBtn.addEventListener("mouseenter", () => {
         addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
       });
@@ -659,7 +659,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
         removeBtn = document.createElement("button");
         removeBtn.type = "button";
         removeBtn.className = "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
-        removeBtn.innerHTML = "\u2715 Remove";
+        removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(
             item
@@ -687,7 +687,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Textarea"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         values.push(element.default || "");
         addTextareaItem(element.default || "");
@@ -829,7 +829,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Number"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         values.push(element.default || "");
         addNumberItem(element.default || "");
@@ -1111,7 +1111,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Selection"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         const defaultValue = element.default || element.options?.[0]?.value || "";
         values.push(defaultValue);
@@ -2621,7 +2621,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
         font-size: var(--fb-font-size);
         transition: all var(--fb-transition-duration);
       `;
-      addBtn.textContent = `+ Add ${element.label || "Colour"}`;
+      addBtn.textContent = "+";
       addBtn.addEventListener("mouseenter", () => {
         addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
       });
@@ -3080,7 +3080,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
         font-size: var(--fb-font-size);
         transition: all var(--fb-transition-duration);
       `;
-      addBtn.textContent = `+ Add ${element.label || "Slider"}`;
+      addBtn.textContent = "+";
       addBtn.addEventListener("mouseenter", () => {
         addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
       });
@@ -3392,15 +3392,10 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   header.className = "flex justify-between items-center mb-4";
   const left = document.createElement("div");
   left.className = "flex-1";
-  const right = document.createElement("div");
-  right.className = "flex gap-2";
   const itemsWrap = document.createElement("div");
   itemsWrap.className = "space-y-4";
   containerWrap.appendChild(header);
   header.appendChild(left);
-  if (!state.config.readonly) {
-    header.appendChild(right);
-  }
   if (!ctx.state.config.readonly) {
     const hintsElement = createPrefillHints(element, element.key);
     if (hintsElement) {
@@ -3414,8 +3409,21 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const createAddButton = () => {
     const add = document.createElement("button");
     add.type = "button";
-    add.className = "px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors";
-    add.textContent = t("addElement", state);
+    add.className = "add-container-btn mt-2 px-3 py-1 rounded";
+    add.style.cssText = `
+      color: var(--fb-primary-color);
+      border: var(--fb-border-width) solid var(--fb-primary-color);
+      background-color: transparent;
+      font-size: var(--fb-font-size);
+      transition: all var(--fb-transition-duration);
+    `;
+    add.textContent = "+";
+    add.addEventListener("mouseenter", () => {
+      add.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    add.addEventListener("mouseleave", () => {
+      add.style.backgroundColor = "transparent";
+    });
     add.onclick = () => {
       if (countItems() < max) {
         const idx = countItems();
@@ -3445,8 +3453,19 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         if (!state.config.readonly) {
           const rem = document.createElement("button");
           rem.type = "button";
-          rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-          rem.textContent = "\xD7";
+          rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+          rem.style.cssText = `
+            color: var(--fb-error-color);
+            background-color: transparent;
+            transition: background-color var(--fb-transition-duration);
+          `;
+          rem.textContent = "\u2715";
+          rem.addEventListener("mouseenter", () => {
+            rem.style.backgroundColor = "var(--fb-background-hover-color)";
+          });
+          rem.addEventListener("mouseleave", () => {
+            rem.style.backgroundColor = "transparent";
+          });
           rem.onclick = () => {
             item.remove();
             updateAddButton();
@@ -3462,16 +3481,14 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   };
   const updateAddButton = () => {
     const currentCount = countItems();
-    const addBtn = right.querySelector("button");
-    if (addBtn) {
-      addBtn.disabled = currentCount >= max;
-      addBtn.style.opacity = currentCount >= max ? "0.5" : "1";
+    const existingAddBtn = containerWrap.querySelector(".add-container-btn");
+    if (existingAddBtn) {
+      existingAddBtn.disabled = currentCount >= max;
+      existingAddBtn.style.opacity = currentCount >= max ? "0.5" : "1";
+      existingAddBtn.style.pointerEvents = currentCount >= max ? "none" : "auto";
     }
     left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-sm text-gray-500">(${currentCount}/${max === Infinity ? "\u221E" : max})</span>`;
   };
-  if (!state.config.readonly) {
-    right.appendChild(createAddButton());
-  }
   if (pre && Array.isArray(pre)) {
     pre.forEach((prefillObj, idx) => {
       const subCtx = {
@@ -3500,8 +3517,19 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       if (!state.config.readonly) {
         const rem = document.createElement("button");
         rem.type = "button";
-        rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-        rem.textContent = "\xD7";
+        rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+        rem.style.cssText = `
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+        `;
+        rem.textContent = "\u2715";
+        rem.addEventListener("mouseenter", () => {
+          rem.style.backgroundColor = "var(--fb-background-hover-color)";
+        });
+        rem.addEventListener("mouseleave", () => {
+          rem.style.backgroundColor = "transparent";
+        });
         rem.onclick = () => {
           item.remove();
           updateAddButton();
@@ -3540,8 +3568,19 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       item.appendChild(childWrapper);
       const rem = document.createElement("button");
       rem.type = "button";
-      rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-      rem.textContent = "\xD7";
+      rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+      rem.style.cssText = `
+        color: var(--fb-error-color);
+        background-color: transparent;
+        transition: background-color var(--fb-transition-duration);
+      `;
+      rem.textContent = "\u2715";
+      rem.addEventListener("mouseenter", () => {
+        rem.style.backgroundColor = "var(--fb-background-hover-color)";
+      });
+      rem.addEventListener("mouseleave", () => {
+        rem.style.backgroundColor = "transparent";
+      });
       rem.onclick = () => {
         if (countItems() > min) {
           item.remove();
@@ -3554,6 +3593,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     }
   }
   containerWrap.appendChild(itemsWrap);
+  if (!state.config.readonly) {
+    containerWrap.appendChild(createAddButton());
+  }
   updateAddButton();
   wrapper.appendChild(containerWrap);
 }