@dmitryvim/form-builder 0.4.0 → 0.5.1

package/dist/esm/index.js

@@ -419,6 +419,20 @@ function ensureThemingHooks(doc) {
   min-height: var(--fb-slide-card-min-height);
   padding: var(--fb-slide-card-padding);
 }
+/* Slides-mode outer grid. Responsive by design \u2014 column count derives from
+   container width and --fb-slide-min-width, not from a schema "columns" prop.
+   min(100%, ...) prevents the card from overflowing a narrow container.
+   Override per-form: set --fb-slide-min-width / --fb-slides-gap on any
+   ancestor (theme, host CSS, or the form root). */
+.fb-container-slides {
+  display: grid;
+  gap: var(--fb-slides-gap, 14px);
+  align-items: stretch;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--fb-slide-min-width, 280px)), 1fr)
+  );
+}
 [data-fb-label-row] > label {
   font-size: var(--fb-label-section-font-size);
   letter-spacing: var(--fb-label-section-letter-spacing);
@@ -3029,34 +3043,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;
@@ -4846,58 +4838,22 @@ 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();
 function disposePlaceholdersForUpload(container) {
@@ -4917,7 +4873,6 @@ function renderResourcePills(opts) {
     maxCount,
     isReadonly = false,
     onLibraryPick,
-    element,
     onClearAll,
     openPicker: openPickerProp
   } = opts;
@@ -5061,17 +5016,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) {
@@ -5295,7 +5242,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);
@@ -6790,10 +6736,7 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   containerWrap.appendChild(itemsWrap);
   wrapper.appendChild(containerWrap);
 }
-function getChildWrapperClass(isSlides, columns) {
-  if (isSlides) {
-    return "fb-row";
-  }
+function getChildWrapperClass(columns) {
   const cols = columns || 1;
   return cols === 1 ? "fb-row" : `grid grid-cols-${cols} gap-2`;
 }
@@ -6838,9 +6781,6 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const isSlides = element.displayMode === "slides";
   if (isSlides) {
     itemsWrap.className = "fb-container-slides";
-    const slideCols = element.columns;
-    const gridTemplateColumns = typeof slideCols === "number" && slideCols > 0 ? `repeat(${slideCols}, 1fr)` : "repeat(auto-fit, minmax(280px, 1fr))";
-    itemsWrap.style.cssText = `display:grid;grid-template-columns:${gridTemplateColumns};gap:var(--fb-slides-gap, 14px);align-items:start;`;
   } else {
     itemsWrap.className = "fb-row";
   }
@@ -6876,7 +6816,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       item.setAttribute("data-fb-slide-card", "");
     }
     const childWrapper = document.createElement("div");
-    childWrapper.className = getChildWrapperClass(isSlides, element.columns);
+    childWrapper.className = getChildWrapperClass(
+      isSlides ? void 0 : element.columns
+    );
     element.elements.forEach((child) => {
       if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
         childWrapper.appendChild(
@@ -6942,16 +6884,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         item.setAttribute("data-fb-slide-card", "");
       }
       const childWrapper = document.createElement("div");
-      if (isSlides) {
-        childWrapper.className = "fb-row";
-      } else {
-        const columns = element.columns || 1;
-        if (columns === 1) {
-          childWrapper.className = "fb-row";
-        } else {
-          childWrapper.className = `grid grid-cols-${columns} gap-2`;
-        }
-      }
+      childWrapper.className = getChildWrapperClass(
+        isSlides ? void 0 : element.columns
+      );
       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;
@@ -6989,16 +6924,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         item.setAttribute("data-fb-slide-card", "");
       }
       const childWrapper = document.createElement("div");
-      if (isSlides) {
-        childWrapper.className = "fb-row";
-      } else {
-        const columns = element.columns || 1;
-        if (columns === 1) {
-          childWrapper.className = "fb-row";
-        } else {
-          childWrapper.className = `grid grid-cols-${columns} gap-2`;
-        }
-      }
+      childWrapper.className = getChildWrapperClass(
+        isSlides ? void 0 : element.columns
+      );
       element.elements.forEach((child) => {
         if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
           childWrapper.appendChild(
@@ -7027,7 +6955,6 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   containerWrap.appendChild(itemsWrap);
   if (!containerIsReadonly) {
     if (isSlides) {
-      itemsWrap.style.alignItems = "stretch";
       const handle = createSlideAddTile(handleAddItem, {
         label: element.addLabel
       });
@@ -10742,9 +10669,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}",
@@ -10818,9 +10742,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}",