Add some container settings to repeaters to allow control of layout of children, and enable settings bar

packages/standard-components/manifest.json

@@ -242,6 +242,7 @@
     "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
+    "showSettingsBar": true,
     "settings": [
       {
         "type": "dataProvider",
@@ -258,6 +259,93 @@
         "type": "filter",
         "label": "Filtering",
         "key": "filter"
+      },
+      {
+        "type": "select",
+        "label": "Direction",
+        "key": "direction",
+        "showInBar": true,
+        "options": [
+          {
+            "label": "Column",
+            "value": "column",
+            "barIcon": "ViewRow",
+            "barTitle": "Column layout"
+          },
+          {
+            "label": "Row",
+            "value": "row",
+            "barIcon": "ViewColumn",
+            "barTitle": "Row layout"
+          }
+        ],
+        "defaultValue": "column"
+      },
+      {
+        "type": "select",
+        "label": "Horiz. Align",
+        "key": "hAlign",
+        "showInBar": true,
+        "options": [
+          {
+            "label": "Left",
+            "value": "left",
+            "barIcon": "AlignLeft",
+            "barTitle": "Align left"
+          },
+          {
+            "label": "Center",
+            "value": "center",
+            "barIcon": "AlignCenter",
+            "barTitle": "Align center"
+          },
+          {
+            "label": "Right",
+            "value": "right",
+            "barIcon": "AlignRight",
+            "barTitle": "Align right"
+          },
+          {
+            "label": "Stretch",
+            "value": "stretch",
+            "barIcon": "MoveLeftRight",
+            "barTitle": "Align stretched horizontally"
+          }
+        ],
+        "defaultValue": "stretch"
+      },
+      {
+        "type": "select",
+        "label": "Vert. Align",
+        "key": "vAlign",
+        "showInBar": "true",
+        "options": [
+          {
+            "label": "Top",
+            "value": "top",
+            "barIcon": "AlignTop",
+            "barTitle": "Align top"
+          },
+          {
+            "label": "Middle",
+            "value": "middle",
+            "barIcon": "AlignMiddle",
+            "barTitle": "Align middle"
+          },
+          {
+            "label": "Bottom",
+            "value": "bottom",
+            "barIcon": "AlignBottom",
+            "barTitle": "Align bottom"
+          },
+          {
+            "label": "Stretch",
+            "value": "stretch",
+            "barIcon": "MoveUpDown",
+            "barTitle": "Align stretched vertically"
+          }
+        ],
+        "defaultValue": "top"
       }
     ],
     "context": {

packages/standard-components/src/Repeater.svelte

@@ -1,18 +1,22 @@
 <script>
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
+  import Container from "./Container.svelte"
 
   export let dataProvider
   export let noRowsMessage
+  export let direction
+  export let hAlign
+  export let vAlign
 
-  const { styleable, Provider } = getContext("sdk")
+  const { Provider } = getContext("sdk")
   const component = getContext("component")
 
   $: rows = dataProvider?.rows ?? []
   $: loaded = dataProvider?.loaded ?? true
 </script>
 
-<div use:styleable={$component.styles}>
+<Container {direction} {hAlign} {vAlign}>
   {#if $component.empty}
     <Placeholder />
   {:else if rows.length > 0}
@@ -24,7 +28,7 @@
   {:else if loaded && noRowsMessage}
     <div class="noRows"><i class="ri-list-check-2" />{noRowsMessage}</div>
   {/if}
-</div>
+</Container>
 
 <style>
   .noRows {