Update form block to be ejectable

packages/client/manifest.json

@@ -4402,6 +4402,7 @@
         "type": "text",
         "label": "Row ID",
         "key": "rowId",
+        "nested": true,
         "dependsOn": {
           "setting": "actionType",
           "value": "Create",

packages/client/src/components/app/blocks/FormBlock.svelte

@@ -83,7 +83,7 @@
       operator: "equal",
       type: "string",
       value: rowId,
-      valueType: "binding",
+      valueType: "Binding",
     },
   ]
   // If we're using an "update" form, use the real data provider. If we're
@@ -93,6 +93,10 @@
     actionType !== "Create"
       ? `{{ literal ${safe(providerId)} }}`
       : { rows: [{}] }
+  $: renderDeleteButton = showDeleteButton && actionType === "Update"
+  $: renderSaveButton = showSaveButton && actionType !== "View"
+  $: renderButtons = renderDeleteButton || renderSaveButton
+  $: renderHeader = renderButtons || title
 
   const fetchSchema = async () => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
@@ -108,7 +112,6 @@
 </script>
 
 <Block>
-  <div use:styleable={$component.styles}>
   {#if fields?.length}
     <BlockComponent
       type="dataprovider"
@@ -141,11 +144,47 @@
           context="form"
           bind:id={formId}
         >
-            <Layout noPadding gap="M">
+          <BlockComponent
-              <div class="title" class:with-text={!!title}>
+            type="container"
-                <BlockComponent type="heading" props={{ text: title || "" }} />
+            props={{
-                <div class="buttons">
+              direction: "column",
-                  {#if showDeleteButton && actionType === "Update"}
+              hAlign: "stretch",
+              vAlign: "top",
+              gap: "M",
+            }}
+          >
+            {#if renderHeader}
+              <BlockComponent
+                type="container"
+                props={{
+                  direction: "row",
+                  hAlign: title ? "stretch" : "right",
+                  vAlign: "center",
+                  gap: "M",
+                  wrap: true,
+                }}
+                order={0}
+              >
+                {#if title}
+                  <BlockComponent
+                    type="heading"
+                    props={{ text: title }}
+                    order={0}
+                  />
+                {/if}
+                {#if renderButtons}
+                  <BlockComponent
+                    type="container"
+                    props={{
+                      direction: "row",
+                      hAlign: "stretch",
+                      vAlign: "center",
+                      gap: "M",
+                      wrap: true,
+                    }}
+                    order={1}
+                  >
+                    {#if renderDeleteButton}
                       <BlockComponent
                         type="button"
                         props={{
@@ -154,9 +193,10 @@
                           quiet: true,
                           type: "secondary",
                         }}
+                        order={0}
                       />
                     {/if}
-                  {#if showSaveButton && actionType !== "View"}
+                    {#if renderSaveButton}
                       <BlockComponent
                         type="button"
                         props={{
@@ -164,12 +204,19 @@
                           onClick: onSave,
                           type: "cta",
                         }}
+                        order={1}
                       />
                     {/if}
-                </div>
+                  </BlockComponent>
-              </div>
+                {/if}
-              <BlockComponent type="fieldgroup" props={{ labelPosition }}>
+              </BlockComponent>
-                {#each fields as field}
+            {/if}
+            <BlockComponent
+              type="fieldgroup"
+              props={{ labelPosition }}
+              order={1}
+            >
+              {#each fields as field, idx}
                 {#if getComponentForField(field)}
                   <BlockComponent
                     type={getComponentForField(field)}
@@ -179,11 +226,12 @@
                       placeholder: field,
                       disabled,
                     }}
+                    order={idx}
                   />
                 {/if}
               {/each}
             </BlockComponent>
-            </Layout>
+          </BlockComponent>
         </BlockComponent>
       </BlockComponent>
     </BlockComponent>
@@ -192,26 +240,4 @@
       text="Choose your table and add some fields to your form to get started"
     />
   {/if}
-  </div>
 </Block>
-
-<style>
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--spacing-m);
-    order: 2;
-  }
-  .title.with-text {
-    order: 0;
-  }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-</style>