From 77cd7ea3382156ae3b67fabfafd1f63ccc69a2e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 24 Jun 2021 12:15:04 +0100
Subject: [PATCH] Add wrap setting to containers and force repeaters to always
 wrap

---
 packages/standard-components/manifest.json    | 41 ++++++++++++++++++-
 .../standard-components/src/Container.svelte  |  7 +++-
 .../standard-components/src/Repeater.svelte   |  3 +-
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 47744394ce..2e7e52fc32 100644
--- a/packages/standard-components/manifest.json
+++ b/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": {
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 7e8ae43e2e..5b2f951c8d 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/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>
diff --git a/packages/standard-components/src/Repeater.svelte b/packages/standard-components/src/Repeater.svelte
index 97694303f5..b7db019c06 100644
--- a/packages/standard-components/src/Repeater.svelte
+++ b/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}