Add wrap setting to containers and force repeaters to always wrap

packages/standard-components/manifest.json

@@ -123,7 +123,7 @@
         "type": "select",
         "label": "Vert. Align",
         "key": "vAlign",
-        "showInBar": "true",
+        "showInBar": true,
         "barStyle": "buttons",
         "options": [
           {
@@ -200,6 +200,14 @@
           }
         ],
         "defaultValue": "M"
+      },
+      {
+        "type": "boolean",
+        "label": "Wrap",
+        "key": "wrap",
+        "showInBar": true,
+        "barIcon": "ModernGridView",
+        "barTitle": "Wrap"
       }
     ]
   },
@@ -290,6 +298,7 @@
         "label": "Direction",
         "key": "direction",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Column",
@@ -311,6 +320,7 @@
         "label": "Horiz. Align",
         "key": "hAlign",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Left",
@@ -343,7 +353,8 @@
         "type": "select",
         "label": "Vert. Align",
         "key": "vAlign",
-        "showInBar": "true",
+        "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Top",
@@ -371,6 +382,32 @@
           }
         ],
         "defaultValue": "top"
+      },
+      {
+        "type": "select",
+        "label": "Gap",
+        "key": "gap",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [
+          {
+            "label": "None",
+            "value": "N"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ],
+        "defaultValue": "M"
       }
     ],
     "context": {

packages/standard-components/src/Container.svelte

@@ -9,6 +9,7 @@
   export let vAlign
   export let size
   export let gap
+  export let wrap
 
   $: directionClass = direction ? `valid-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
@@ -24,7 +25,7 @@
   ].join(" ")
 </script>
 
-<div class={classNames} use:styleable={$component.styles}>
+<div class={classNames} use:styleable={$component.styles} class:wrap>
   <slot />
 </div>
 
@@ -99,4 +100,8 @@
   .gap-L {
     gap: 32px;
   }
+
+  .wrap {
+    flex-wrap: wrap;
+  }
 </style>

packages/standard-components/src/Repeater.svelte

@@ -8,6 +8,7 @@
   export let direction
   export let hAlign
   export let vAlign
+  export let gap
 
   const { Provider } = getContext("sdk")
   const component = getContext("component")
@@ -16,7 +17,7 @@
   $: loaded = dataProvider?.loaded ?? true
 </script>
 
-<Container {direction} {hAlign} {vAlign}>
+<Container {direction} {hAlign} {vAlign} {gap} wrap>
   {#if $component.empty}
     <Placeholder />
   {:else if rows.length > 0}