@dmitryvim/form-builder 0.5.0 → 0.5.2

package/dist/esm/index.js

@@ -300,6 +300,15 @@ function getElementLookupKey(element, state) {
 function pathJoin(base, key) {
   return base ? `${base}.${key}` : key;
 }
+function findDirectContainerRows(scopeRoot, containerPath) {
+  if (!containerPath) return [];
+  const all = scopeRoot.querySelectorAll("[data-container-item]");
+  return Array.from(all).filter((el) => {
+    const attr = el.getAttribute("data-container-item") || "";
+    if (!attr.startsWith(`${containerPath}[`)) return false;
+    return /^\[\d+\]$/.test(attr.slice(containerPath.length));
+  });
+}
 function clear(node) {
   while (node.firstChild) node.removeChild(node.firstChild);
 }
@@ -449,6 +458,19 @@ function ensureThemingHooks(doc) {
   color: var(--fb-error-color);
   background-color: var(--fb-background-hover-color);
 }
+.fb-item-remove:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+/* Cards carrying a row-level remove button reserve a right-hand lane for it
+   (24px button + inset + gap) so it never sits on top of the first field's
+   control. A class rather than an inline style, so host CSS can override the
+   gutter without !important; the compound selector keeps it ahead of the
+   card's own p-2 utility regardless of stylesheet order. Its own token, not
+   --fb-slide-card-padding, which is slides-only and always resolves. */
+.containerItem.fb-row-removable {
+  padding-right: var(--fb-row-remove-gutter, 40px);
+}
 /* Prefill-suggestion pills rendered by createPrefillHints. Outline pill at rest,
    soft-fill on hover, solid-fill when selected. All colors flow from the active
    theme \u2014 consumers don't need to ship their own CSS. */
@@ -3043,34 +3065,12 @@ function ensureFileStyles() {
   padding: 6px;
 }
 
-/* \u2500\u2500\u2500 Meta line below multi grid \u2500\u2500\u2500 */
-.fb-meta-line {
+/* \u2500\u2500\u2500 Clear-all row below multi grid \u2500\u2500\u2500 */
+.fb-clear-all-row {
   margin-top: 10px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.fb-meta-text {
-  font-size: 12px;
-  color: #94a3b8;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.fb-meta-dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: #cbd5e1;
-  flex-shrink: 0;
-}
-.fb-meta-mono {
-  font-family: ui-monospace, 'JetBrains Mono', monospace;
-  font-size: 11px;
-  letter-spacing: -0.02em;
+  justify-content: flex-end;
 }
 .fb-clear-all-btn {
   font-size: 12px;
@@ -4860,66 +4860,39 @@ function buildPlaceholderTile(isDragOver = false) {
   div.className = `fb-multi-placeholder fb-checker${isDragOver ? " fb-drag-over" : ""}`;
   return div;
 }
-function buildMetaLine(state, element, ridCount, maxCount, canClearAll, onClearAll) {
-  const line = document.createElement("div");
-  line.className = "fb-meta-line";
-  const metaText = document.createElement("div");
-  metaText.className = "fb-meta-text";
-  if (element.maxSize && element.maxSize !== Infinity) {
-    const sizeSpan = document.createElement("span");
-    sizeSpan.textContent = t("hintMaxSize", state, { size: element.maxSize });
-    metaText.appendChild(sizeSpan);
-    metaText.appendChild(buildMetaDot());
-  }
-  const exts = getAllowedExtensions(
-    element.accept
-  );
-  if (exts.length > 0) {
-    const fmtSpan = document.createElement("span");
-    fmtSpan.className = "fb-meta-mono";
-    fmtSpan.textContent = exts.map((e) => e.toUpperCase()).join(", ");
-    metaText.appendChild(fmtSpan);
-    metaText.appendChild(buildMetaDot());
-  }
-  const countSpan = document.createElement("span");
-  if (maxCount < Infinity) {
-    countSpan.textContent = t("fileCountWithMax", state, {
-      count: ridCount,
-      max: maxCount
-    });
-  } else {
-    const countKey = ridCount === 1 ? "fileCountSingle" : "fileCountPlural";
-    countSpan.textContent = t(countKey, state, { count: ridCount });
-  }
-  metaText.appendChild(countSpan);
-  line.appendChild(metaText);
-  if (canClearAll && ridCount > 1) {
-    const clearBtn = document.createElement("button");
-    clearBtn.type = "button";
-    clearBtn.className = "fb-clear-all-btn";
-    clearBtn.textContent = t("clearAll", state);
-    clearBtn.onclick = (e) => {
-      e.stopPropagation();
-      if (window.confirm(t("clearAll", state) + "?")) {
-        onClearAll();
-      }
-    };
-    line.appendChild(clearBtn);
-  }
-  return line;
-}
-function buildMetaDot() {
-  const dot = document.createElement("span");
-  dot.className = "fb-meta-dot";
-  return dot;
+function buildClearAllRow(state, ridCount, onClearAll) {
+  if (ridCount <= 1) return null;
+  const row = document.createElement("div");
+  row.className = "fb-clear-all-row";
+  const clearBtn = document.createElement("button");
+  clearBtn.type = "button";
+  clearBtn.className = "fb-clear-all-btn";
+  clearBtn.textContent = t("clearAll", state);
+  clearBtn.onclick = (e) => {
+    e.stopPropagation();
+    if (window.confirm(t("clearAll", state) + "?")) {
+      onClearAll();
+    }
+  };
+  row.appendChild(clearBtn);
+  return row;
 }
 var gridResizeObservers = /* @__PURE__ */ new WeakMap();
+var gridMeasureFrames = /* @__PURE__ */ new WeakMap();
+function cancelPendingMeasure(container) {
+  const frame = gridMeasureFrames.get(container);
+  if (frame !== void 0) {
+    cancelAnimationFrame(frame);
+    gridMeasureFrames.delete(container);
+  }
+}
 function disposePlaceholdersForUpload(container) {
   const observer = gridResizeObservers.get(container);
   if (observer) {
     observer.disconnect();
     gridResizeObservers.delete(container);
   }
+  cancelPendingMeasure(container);
   container.querySelectorAll(".fb-multi-placeholder").forEach((p) => p.remove());
 }
 function renderResourcePills(opts) {
@@ -4931,7 +4904,6 @@ function renderResourcePills(opts) {
     maxCount,
     isReadonly = false,
     onLibraryPick,
-    element,
     onClearAll,
     openPicker: openPickerProp
   } = opts;
@@ -4945,6 +4917,7 @@ function renderResourcePills(opts) {
     previousObserver.disconnect();
     gridResizeObservers.delete(container);
   }
+  cancelPendingMeasure(container);
   while (container.firstChild) container.removeChild(container.firstChild);
   const ridList = rids ?? [];
   const effectiveMax = maxCount ?? Infinity;
@@ -5044,7 +5017,7 @@ function renderResourcePills(opts) {
   if (effectiveMax === Infinity || effectiveMax > occupied) {
     grid.appendChild(buildPlaceholderTile());
   }
-  requestAnimationFrame(adjustPlaceholders);
+  gridMeasureFrames.set(container, requestAnimationFrame(adjustPlaceholders));
   if (typeof ResizeObserver !== "undefined") {
     const ro = new ResizeObserver(() => adjustPlaceholders());
     ro.observe(grid);
@@ -5075,17 +5048,9 @@ function renderResourcePills(opts) {
       }
     }
   });
-  if (element) {
-    const metaLine = buildMetaLine(
-      state,
-      element,
-      ridList.length,
-      effectiveMax,
-      Boolean(onClearAll),
-      onClearAll ?? (() => {
-      })
-    );
-    container.appendChild(metaLine);
+  if (onClearAll) {
+    const row = buildClearAllRow(state, ridList.length, onClearAll);
+    if (row) container.appendChild(row);
   }
 }
 function renderFileElementEdit(element, ctx, wrapper, pathKey) {
@@ -5309,7 +5274,6 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
       maxCount: maxFiles < Infinity ? maxFiles : void 0,
       isReadonly: currentlyReadonly,
       onLibraryPick: currentlyReadonly ? null : onLibraryPick,
-      element,
       onClearAll: currentlyReadonly ? void 0 : () => {
         for (const rid of initialFiles) {
           releaseLocalFileUrl(state.resourceIndex.get(rid)?.file);
@@ -6827,17 +6791,13 @@ function mountRemoveButton(item, onRemove, state) {
   `;
   rem.innerHTML = BIN_ICON_SVG;
   rem.onclick = onRemove;
-  const labelRow = item.querySelector("[data-fb-label-row]");
-  if (labelRow) {
-    rem.style.marginLeft = "auto";
-    labelRow.appendChild(rem);
-    return;
-  }
   rem.style.position = "absolute";
-  rem.style.top = "8px";
-  rem.style.right = "8px";
+  rem.style.top = "var(--fb-row-remove-inset, 8px)";
+  rem.style.right = "var(--fb-row-remove-inset, 8px)";
+  rem.style.zIndex = "1";
   item.style.position = "relative";
-  item.appendChild(rem);
+  item.classList.add("fb-row-removable");
+  item.insertBefore(rem, item.firstChild);
 }
 function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const state = ctx.state;
@@ -6862,24 +6822,29 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const max = element.maxCount ?? Infinity;
   const pre = Array.isArray(ctx.prefill?.[element.key]) ? ctx.prefill[element.key] : null;
   const childDefaults = extractChildDefaults(element.elements);
-  const countItems = () => itemsWrap.querySelectorAll(":scope > .containerItem").length;
-  const handleAddItem = () => {
-    if (countItems() >= max) return;
-    const idx = countItems();
-    const currentFormData = state.formRoot ? extractRootFormData(state.formRoot) : {};
+  let nextRowIndex = 0;
+  const takeRowIndex = () => nextRowIndex++;
+  const directRows = () => Array.from(itemsWrap.children).filter(
+    (el) => el.classList.contains("containerItem")
+  );
+  const countItems = () => directRows().length;
+  const handleRemoveItem = (item) => {
+    if (countItems() <= min) return;
+    item.remove();
+    updateAddButton();
+  };
+  const createContainerItem = (idx, rowPrefill, formData) => {
     const subCtx = {
-      state: ctx.state,
+      state,
       instance: ctx.instance,
       path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-      prefill: childDefaults,
-      // Defaults for enableIf evaluation
-      formData: currentFormData,
-      // Current root data from DOM for enableIf
+      prefill: mergeWithDefaults(rowPrefill ?? {}, childDefaults),
+      formData,
       inheritedReadonly: childInheritedReadonly
     };
     const item = document.createElement("div");
     item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
-    item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+    item.setAttribute("data-container-item", subCtx.path);
     if (isSlides) {
       item.setAttribute("data-fb-slide-card", "");
     }
@@ -6889,11 +6854,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     );
     element.elements.forEach((child) => {
       if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
+        const hiddenValue = rowPrefill?.[child.key] ?? ("default" in child ? child.default : null) ?? null;
         childWrapper.appendChild(
-          createHiddenInput(
-            pathJoin(subCtx.path, child.key),
-            ("default" in child ? child.default : null) ?? null
-          )
+          createHiddenInput(pathJoin(subCtx.path, child.key), hiddenValue)
         );
       } else {
         childWrapper.appendChild(renderElement(child, subCtx));
@@ -6903,6 +6866,17 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     if (!containerIsReadonly) {
       mountRemoveButton(item, () => handleRemoveItem(item), state);
     }
+    return item;
+  };
+  const handleAddItem = () => {
+    if (countItems() >= max) return;
+    const item = createContainerItem(
+      takeRowIndex(),
+      null,
+      // Current root data read back from the DOM, so enableIf sees what the
+      // user has actually typed rather than the original prefill.
+      state.formRoot ? extractRootFormData(state.formRoot) : {}
+    );
     if (slideAddTile && slideAddTile.parentElement === itemsWrap) {
       itemsWrap.insertBefore(item, slideAddTile);
     } else {
@@ -6915,109 +6889,43 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   let pillAddUpdate = null;
   const syncSlideTileSize = () => {
     if (!slideAddTile) return;
-    const firstSlide = itemsWrap.querySelector(
-      ":scope > .containerItem"
-    );
+    const firstSlide = directRows()[0];
     if (firstSlide && firstSlide.offsetHeight > 0) {
       slideAddTile.style.minHeight = `${firstSlide.offsetHeight}px`;
     }
   };
+  const syncRemoveButtons = () => {
+    const atFloor = countItems() <= min;
+    directRows().forEach((row) => {
+      const btn = Array.from(row.children).find(
+        (el) => el.classList.contains("fb-item-remove")
+      );
+      if (btn) btn.disabled = atFloor;
+    });
+  };
   const updateAddButton = () => {
     const currentCount = countItems();
     if (slideAddUpdate) slideAddUpdate(currentCount, max);
     if (pillAddUpdate) pillAddUpdate(currentCount, max);
     if (slideAddTile) syncSlideTileSize();
+    syncRemoveButtons();
   };
-  const handleRemoveItem = (item) => {
-    item.remove();
-    updateAddButton();
-  };
-  if (pre && Array.isArray(pre)) {
-    pre.forEach((prefillObj, idx) => {
-      const mergedPrefill = mergeWithDefaults(prefillObj || {}, childDefaults);
-      const subCtx = {
-        state: ctx.state,
-        instance: ctx.instance,
-        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: mergedPrefill,
-        // Merged prefill with defaults for enableIf
-        formData: ctx.formData ?? ctx.prefill,
-        // Complete root data for enableIf
-        inheritedReadonly: childInheritedReadonly
-      };
-      const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
-      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-      if (isSlides) {
-        item.setAttribute("data-fb-slide-card", "");
-      }
-      const childWrapper = document.createElement("div");
-      childWrapper.className = getChildWrapperClass(
-        isSlides ? void 0 : element.columns
+  if (pre) {
+    pre.forEach((prefillObj) => {
+      itemsWrap.appendChild(
+        createContainerItem(
+          takeRowIndex(),
+          prefillObj ?? {},
+          ctx.formData ?? ctx.prefill
+        )
       );
-      element.elements.forEach((child) => {
-        if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-          const prefillVal = prefillObj?.[child.key] ?? ("default" in child ? child.default : null) ?? null;
-          childWrapper.appendChild(
-            createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
-          );
-        } else {
-          childWrapper.appendChild(renderElement(child, subCtx));
-        }
-      });
-      item.appendChild(childWrapper);
-      if (!containerIsReadonly) {
-        mountRemoveButton(item, () => handleRemoveItem(item), ctx.state);
-      }
-      itemsWrap.appendChild(item);
     });
   }
   if (!containerIsReadonly) {
     while (countItems() < min) {
-      const idx = countItems();
-      const subCtx = {
-        state: ctx.state,
-        instance: ctx.instance,
-        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: childDefaults,
-        // Defaults for enableIf evaluation
-        formData: ctx.formData ?? ctx.prefill,
-        // Complete root data for enableIf
-        inheritedReadonly: childInheritedReadonly
-      };
-      const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
-      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-      if (isSlides) {
-        item.setAttribute("data-fb-slide-card", "");
-      }
-      const childWrapper = document.createElement("div");
-      childWrapper.className = getChildWrapperClass(
-        isSlides ? void 0 : element.columns
-      );
-      element.elements.forEach((child) => {
-        if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-          childWrapper.appendChild(
-            createHiddenInput(
-              pathJoin(subCtx.path, child.key),
-              ("default" in child ? child.default : null) ?? null
-            )
-          );
-        } else {
-          childWrapper.appendChild(renderElement(child, subCtx));
-        }
-      });
-      item.appendChild(childWrapper);
-      mountRemoveButton(
-        item,
-        () => {
-          if (countItems() > min) {
-            handleRemoveItem(item);
-          }
-        },
-        ctx.state
+      itemsWrap.appendChild(
+        createContainerItem(takeRowIndex(), null, ctx.formData ?? ctx.prefill)
       );
-      itemsWrap.appendChild(item);
     }
   }
   containerWrap.appendChild(itemsWrap);
@@ -7084,15 +6992,7 @@ function validateContainerElement(element, key, context) {
   };
   if ("multiple" in element && element.multiple) {
     const items = [];
-    const allContainerWrappers = scopeRoot.querySelectorAll(
-      "[data-container-item]"
-    );
-    const containerWrappers = Array.from(allContainerWrappers).filter((el) => {
-      const attr = el.getAttribute("data-container-item") || "";
-      if (!attr.startsWith(`${key}[`)) return false;
-      const suffix = attr.slice(key.length);
-      return /^\[\d+\]$/.test(suffix);
-    });
+    const containerWrappers = findDirectContainerRows(scopeRoot, key);
     containerWrappers.forEach((itemContainer) => {
       const itemData = {};
       const containerAttr = itemContainer.getAttribute("data-container-item") || "";
@@ -7215,9 +7115,7 @@ function updateContainerField(element, fieldPath, value, context) {
         });
       }
     });
-    const existingContainers = scopeRoot.querySelectorAll(
-      `[data-container-item^="${fieldPath}["]`
-    );
+    const existingContainers = findDirectContainerRows(scopeRoot, fieldPath);
     if (value.length !== existingContainers.length) {
       console.warn(
         `updateContainerField: Multiple container field "${fieldPath}" item count mismatch. Consider re-rendering for add/remove.`
@@ -10737,9 +10635,6 @@ var defaultConfig = {
       hintRequired: "Required",
       hintOptional: "Optional",
       hintPattern: "Format: {pattern}",
-      fileCountSingle: "{count} file",
-      fileCountPlural: "{count} files",
-      fileCountWithMax: "{count} / {max} files",
       fileCountRange: "({min}-{max})",
       uploadingFile: "Uploading\u2026",
       filesCounter: "{count}/{max}",
@@ -10813,9 +10708,6 @@ var defaultConfig = {
       hintRequired: "\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435",
       hintOptional: "\u041D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435",
       hintPattern: "\u0424\u043E\u0440\u043C\u0430\u0442: {pattern}",
-      fileCountSingle: "{count} \u0444\u0430\u0439\u043B",
-      fileCountPlural: "{count} \u0444\u0430\u0439\u043B\u043E\u0432",
-      fileCountWithMax: "{count} / {max} \u0444\u0430\u0439\u043B\u043E\u0432",
       fileCountRange: "({min}-{max})",
       uploadingFile: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
       filesCounter: "{count}/{max}",
@@ -11982,17 +11874,12 @@ var FormBuilderInstance = class {
           }
         }
         if ((element.type === "container" || element.type === "group") && "elements" in element && element.elements) {
-          const containerData = element.key ? formData?.[element.key] : void 0;
+          const containerData = element.key ? getValueByPath(formData, fullPath) : void 0;
           if (Array.isArray(containerData)) {
-            const containerItems = this.state.formRoot.querySelectorAll(
-              `[data-container-item]`
+            const directItems = findDirectContainerRows(
+              this.state.formRoot,
+              fullPath
             );
-            const directItems = fullPath ? 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);