@vectoriox/iox-builder 4.7.0 → 4.8.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -218,7 +218,7 @@ class ComponentConfig {
     }
 }
 class TraitConfig {
-    constructor(name, label, type, options, defaultValue, inline, showWhen) {
+    constructor(name, label, type, options, defaultValue, inline, showWhen, responsive) {
         this.name = name;
         this.label = label;
         this.type = type;
@@ -226,6 +226,7 @@ class TraitConfig {
         this.default = defaultValue;
         this.inline = inline;
         this.showWhen = showWhen;
+        this.responsive = responsive;
     }
 }
 class GroupStyleConfig {
@@ -4273,6 +4274,12 @@ class RenderDirective {
                 return;
             safeSetInput(componentRef, trait.name, trait.default);
         });
+        // Per-breakpoint TRAIT overrides — the same hand-off the SSR engine makes. A component that
+        // declares a `responsive` input (SliderContainer) converts it to its own width config, so the
+        // canvas and the live site agree without the canvas needing a resize listener. Dropped by
+        // safeSetInput for every component that does not declare it.
+        if (node.responsive)
+            safeSetInput(componentRef, 'responsive', node.responsive);
         // Build initial style map from styleTraits defaults.
         const initialStyle = {};
         if (node.styleTraits?.length) {
@@ -9462,6 +9469,14 @@ class RepeaterComponentConfig extends ComponentConfig {
                 label: 'Limit',
                 type: TraitInputType.Number,
                 default: 10,
+                // NOT marked `responsive` yet, deliberately. Row COUNT cannot be varied per width the
+                // way the slider's can: Swiper reads its own breakpoints map at runtime, but a
+                // repeater's count is decided when the markup is produced — and SSR has no viewport,
+                // so rendering N on the server and M in the browser is a hydration mismatch. The fix
+                // is to keep rendering every item and HIDE the surplus per width with a generated
+                // `:nth-child(n+X) { display: none }` rule (CSS-expressible, hydration-safe), which is
+                // a separate change. Marking it responsive now would ship a control that silently
+                // does nothing on the live site — exactly the `slidesPerGroup` bug this pass fixed.
             },
         ];
         this.styleTraits = buildFullStyleTraits();
@@ -9562,15 +9577,15 @@ class SliderContainerConfig extends ComponentConfig {
                 { label: '4', value: 4 },
                 { label: '5', value: 5 },
                 { label: '6', value: 6 },
-            ], 'auto'),
-            new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1),
+            ], 'auto', undefined, undefined, /* responsive */ true),
+            new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1, undefined, undefined, /* responsive */ true),
             new TraitConfig('loop', 'Loop', TraitInputType.SelectButton, [
                 { label: 'Off', value: 'off' },
                 { label: 'Loop', value: 'loop' },
                 { label: 'Rewind', value: 'rewind' },
             ], 'off'),
             new TraitConfig('centeredSlides', 'Centered slides', TraitInputType.Checkbox, undefined, false),
-            new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Scrub, undefined, 0),
+            new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Scrub, undefined, 0, undefined, undefined, /* responsive */ true),
             new TraitConfig('initialSlide', 'Initial slide', TraitInputType.Scrub, undefined, 0),
             new TraitConfig('autoHeight', 'Auto height', TraitInputType.Checkbox, undefined, false),
             new TraitConfig('grabCursor', 'Grab cursor', TraitInputType.Checkbox, undefined, true),