@dmitryvim/form-builder 0.4.0 → 0.5.0

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);
@@ -6790,10 +6804,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 +6849,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 +6884,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 +6952,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 +6992,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 +7023,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
       });