@dmitryvim/form-builder 0.2.15 → 0.2.17

package/dist/cjs/index.cjs

@@ -3739,6 +3739,18 @@ function updateSliderField(element, fieldPath, value, context) {
 }
 
 // src/components/container.ts
+function extractChildDefaults(elements) {
+  const defaults = {};
+  for (const child of elements) {
+    if ("default" in child && child.default !== void 0) {
+      defaults[child.key] = child.default;
+    }
+  }
+  return defaults;
+}
+function mergeWithDefaults(prefill, defaults) {
+  return { ...defaults, ...prefill };
+}
 function extractRootFormData(formRoot) {
   const data = {};
   const inputs = formRoot.querySelectorAll(
@@ -3814,10 +3826,13 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
       containerWrap.appendChild(hintsElement);
     }
   }
+  const childDefaults = extractChildDefaults(element.elements);
+  const containerPrefill = ((_a = ctx.prefill) == null ? void 0 : _a[element.key]) || {};
+  const mergedPrefill = mergeWithDefaults(containerPrefill, childDefaults);
   const subCtx = {
     path: pathJoin(ctx.path, element.key),
-    prefill: ((_a = ctx.prefill) == null ? void 0 : _a[element.key]) || {},
-    // Sliced data for value population
+    prefill: mergedPrefill,
+    // Merged prefill with defaults for enableIf evaluation
     formData: (_b = ctx.formData) != null ? _b : ctx.prefill,
     // Complete root data for enableIf evaluation
     state: ctx.state
@@ -3848,6 +3863,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const min = (_a = element.minCount) != null ? _a : 0;
   const max = (_b = element.maxCount) != null ? _b : Infinity;
   const pre = Array.isArray((_c = ctx.prefill) == null ? void 0 : _c[element.key]) ? ctx.prefill[element.key] : null;
+  const childDefaults = extractChildDefaults(element.elements);
   const countItems = () => itemsWrap.querySelectorAll(":scope > .containerItem").length;
   const createAddButton = () => {
     const add = document.createElement("button");
@@ -3874,7 +3890,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         const subCtx = {
           state: ctx.state,
           path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-          prefill: {},
+          prefill: childDefaults,
+          // Defaults for enableIf evaluation
           formData: currentFormData
           // Current root data from DOM for enableIf
         };
@@ -3910,10 +3927,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           rem.addEventListener("mouseleave", () => {
             rem.style.backgroundColor = "transparent";
           });
-          rem.onclick = () => {
-            item.remove();
-            updateAddButton();
-          };
+          rem.onclick = () => handleRemoveItem(item);
           item.style.position = "relative";
           item.appendChild(rem);
         }
@@ -3935,13 +3949,19 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     }
     countDisplay.textContent = `${currentCount}/${max === Infinity ? "\u221E" : max}`;
   };
+  const handleRemoveItem = (item) => {
+    item.remove();
+    updateAddButton();
+  };
   if (pre && Array.isArray(pre)) {
     pre.forEach((prefillObj, idx) => {
       var _a2;
+      const mergedPrefill = mergeWithDefaults(prefillObj || {}, childDefaults);
       const subCtx = {
         state: ctx.state,
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: prefillObj || {},
+        prefill: mergedPrefill,
+        // Merged prefill with defaults for enableIf
         formData: (_a2 = ctx.formData) != null ? _a2 : ctx.prefill
         // Complete root data for enableIf
       };
@@ -3977,10 +3997,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         rem.addEventListener("mouseleave", () => {
           rem.style.backgroundColor = "transparent";
         });
-        rem.onclick = () => {
-          item.remove();
-          updateAddButton();
-        };
+        rem.onclick = () => handleRemoveItem(item);
         item.style.position = "relative";
         item.appendChild(rem);
       }
@@ -3993,7 +4010,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const subCtx = {
         state: ctx.state,
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: {},
+        prefill: childDefaults,
+        // Defaults for enableIf evaluation
         formData: (_d = ctx.formData) != null ? _d : ctx.prefill
         // Complete root data for enableIf
       };
@@ -4030,8 +4048,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       });
       rem.onclick = () => {
         if (countItems() > min) {
-          item.remove();
-          updateAddButton();
+          handleRemoveItem(item);
         }
       };
       item.style.position = "relative";
@@ -4090,15 +4107,16 @@ function validateContainerElement(element, key, context) {
       "[data-container-item]"
     );
     const containerWrappers = Array.from(allContainerWrappers).filter((el) => {
-      const attr = el.getAttribute("data-container-item");
-      return attr == null ? void 0 : attr.startsWith(`${key}[`);
+      const attr = el.getAttribute("data-container-item") || "";
+      if (!attr.startsWith(`${key}[`)) return false;
+      const suffix = attr.slice(key.length);
+      return /^\[\d+\]$/.test(suffix);
     });
-    const itemCount = containerWrappers.length;
-    for (let i = 0; i < itemCount; i++) {
+    containerWrappers.forEach((itemContainer) => {
       const itemData = {};
-      const itemContainer = scopeRoot.querySelector(
-        `[data-container-item="${key}[${i}]"]`
-      ) || scopeRoot;
+      const containerAttr = itemContainer.getAttribute("data-container-item") || "";
+      const indexMatch = containerAttr.match(/\[(\d+)\]$/);
+      const domIndex = indexMatch ? parseInt(indexMatch[1], 10) : 0;
       element.elements.forEach((child) => {
         var _a;
         if (child.enableIf) {
@@ -4116,7 +4134,7 @@ function validateContainerElement(element, key, context) {
             }
           } catch (error) {
             console.error(
-              `Error evaluating enableIf for field "${child.key}" in container "${key}[${i}]":`,
+              `Error evaluating enableIf for field "${child.key}" in container "${key}[${domIndex}]":`,
               error
             );
           }
@@ -4124,7 +4142,7 @@ function validateContainerElement(element, key, context) {
         if (child.hidden || child.type === "hidden") {
           itemData[child.key] = child.default !== void 0 ? child.default : null;
         } else {
-          const childKey = `${key}[${i}].${child.key}`;
+          const childKey = `${key}[${domIndex}].${child.key}`;
           itemData[child.key] = validateElement(
             { ...child, key: childKey },
             { path },
@@ -4133,7 +4151,7 @@ function validateContainerElement(element, key, context) {
         }
       });
       items.push(itemData);
-    }
+    });
     validateContainerCount(key, items, element);
     return { value: items, errors };
   } else {
@@ -4348,13 +4366,14 @@ if (typeof document !== "undefined") {
   });
 }
 function shouldDisableElement(element, ctx) {
-  var _a, _b;
+  var _a, _b, _c;
   if (!element.enableIf) {
     return false;
   }
   try {
     const rootFormData = (_b = (_a = ctx.formData) != null ? _a : ctx.prefill) != null ? _b : {};
-    const containerData = ctx.path ? getValueByPath(rootFormData, ctx.path) : void 0;
+    const scope = (_c = element.enableIf.scope) != null ? _c : "relative";
+    const containerData = scope === "relative" && ctx.path ? ctx.prefill : void 0;
     const shouldEnable = evaluateEnableCondition(
       element.enableIf,
       rootFormData,
@@ -5790,8 +5809,18 @@ var FormBuilderInstance = class {
         if ((element.type === "container" || element.type === "group") && "elements" in element && element.elements) {
           const containerData = formData == null ? void 0 : formData[element.key];
           if (Array.isArray(containerData)) {
-            containerData.forEach((_, index) => {
-              checkElements(element.elements, `${fullPath}[${index}]`);
+            const containerItems = this.state.formRoot.querySelectorAll(
+              `[data-container-item]`
+            );
+            const directItems = Array.from(containerItems).filter((el) => {
+              const attr = el.getAttribute("data-container-item") || "";
+              if (!attr.startsWith(`${fullPath}[`)) return false;
+              const suffix = attr.slice(fullPath.length);
+              return /^\[\d+\]$/.test(suffix);
+            });
+            directItems.forEach((el) => {
+              const attr = el.getAttribute("data-container-item") || "";
+              checkElements(element.elements, attr);
             });
           } else {
             checkElements(element.elements, fullPath);