Support multiple component context exports and export additional context from forms

packages/builder/src/builderStore/dataBinding.js

@@ -120,23 +120,30 @@ const getContextBindings = (asset, componentId) => {
   // Create bindings for each data provider
   dataProviders.forEach(component => {
     const def = store.actions.components.getDefinition(component._component)
-    const contextDefinition = def.context
+    const contexts = Array.isArray(def.context) ? def.context : [def.context]
+
+    // Create bindings for each context block provided by this data provider
+    contexts.forEach(context => {
+      if (!context?.type) {
+        return
+      }
+
       let schema
       let readablePrefix
 
-    if (contextDefinition.type === "form") {
+      if (context.type === "form") {
         // Forms do not need table schemas
         // Their schemas are built from their component field names
         schema = buildFormSchema(component)
         readablePrefix = "Fields"
-    } else if (contextDefinition.type === "static") {
+      } else if (context.type === "static") {
         // Static contexts are fully defined by the components
         schema = {}
-      const values = contextDefinition.values || []
+        const values = context.values || []
         values.forEach(value => {
           schema[value.key] = { name: value.label, type: "string" }
         })
-    } else if (contextDefinition.type === "schema") {
+      } else if (context.type === "schema") {
         // Schema contexts are generated dynamically depending on their data
         const datasource = getDatasourceForProvider(asset, component)
         if (!datasource) {
@@ -188,6 +195,7 @@ const getContextBindings = (asset, componentId) => {
         })
       })
     })
+  })
 
   return bindings
 }

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -10,6 +10,7 @@
     "icon": "Form",
     "children": [
       "form",
+      "formstep",
       "fieldgroup",
       "stringfield",
       "numberfield",

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -85,6 +85,8 @@
           props={{
             options: setting.options || [],
             placeholder: setting.placeholder || null,
+            min: setting.min || null,
+            max: setting.max || null,
           }}
           {bindings}
           {componentDefinition}

packages/client/src/constants.js

@@ -7,6 +7,8 @@ export const ActionTypes = {
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
   ClearForm: "ClearForm",
+  NextFormStep: "NextFormStep",
+  PrevFormStep: "PrevFormStep",
 }
 
 export const ApiVersion = "1"

packages/standard-components/manifest.json

@@ -1705,7 +1705,9 @@
     "illegalChildren": ["section"],
     "actions": [
       "ValidateForm",
-      "ClearForm"
+      "ClearForm",
+      "NextFormStep",
+      "PrevFormStep"
     ],
     "styles": ["size"],
     "settings": [
@@ -1727,7 +1729,7 @@
       },
       {
         "type": "number",
-        "label": "Number of steps",
+        "label": "Steps",
         "key": "steps",
         "defaultValue": 1
       },
@@ -1738,9 +1740,52 @@
         "defaultValue": false
       }
     ],
-    "context": {
+    "context": [
+      {
+        "type": "static",
+        "values":  [
+          {
+            "label": "Valid",
+            "key": "valid"
+          },
+          {
+            "label": "Step",
+            "key": "step"
+          }
+        ]
+      },
+      {
         "type": "form"
       }
+    ]
+  },
+  "formstep": {
+    "name": "Form Step",
+    "icon": "Form",
+    "hasChildren": true,
+    "illegalChildren": ["section"],
+    "actions": [
+      "ValidateFormStep"
+    ],
+    "styles": ["size"],
+    "settings": [
+      {
+        "type": "number",
+        "label": "Step",
+        "key": "step",
+        "defaultValue": 1,
+        "min": 1
+      }
+    ],
+    "context": {
+      "type": "static",
+      "values":  [
+        {
+          "label": "Valid",
+          "key": "valid"
+        }
+      ]
+    }
   },
   "fieldgroup": {
     "name": "Field Group",

packages/standard-components/src/forms/FormStep.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { getContext } from "svelte"
+  import Placeholder from "../Placeholder.svelte"
+
+  export let step
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+  const formContext = getContext("form")
+</script>
+
+{#if !formContext}
+  <Placeholder text="Form steps need to be wrapped in a form" />
+{:else}
+  <div use:styleable={$component.styles}>
+    <slot />
+  </div>
+{/if}

packages/standard-components/src/forms/InnerForm.svelte

@@ -17,7 +17,12 @@
   let fieldMap = {}
 
   // Form state contains observable data about the form
-  const formState = writable({ values: initialValues, errors: {}, valid: true })
+  const formState = writable({
+    values: initialValues,
+    errors: {},
+    valid: true,
+    step: 1,
+  })
 
   // Form API contains functions to control the form
   const formApi = {
@@ -82,6 +87,18 @@
         fieldApi.clearValue()
       })
     },
+    nextStep: () => {
+      formState.update(state => ({
+        ...state,
+        step: state.step + 1,
+      }))
+    },
+    prevStep: () => {
+      formState.update(state => ({
+        ...state,
+        step: Math.max(1, state.step - 1),
+      }))
+    },
   }
 
   // Provide both form API and state to children
@@ -91,6 +108,8 @@
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
     { type: ActionTypes.ClearForm, callback: formApi.clear },
+    { type: ActionTypes.NextFormStep, callback: formApi.nextStep },
+    { type: ActionTypes.PrevFormStep, callback: formApi.prevStep },
   ]
 
   // Creates an API for a specific field
@@ -229,7 +248,12 @@
 
 <Provider
   {actions}
-  data={{ ...$formState.values, tableId: dataSource?.tableId }}
+  data={{
+    ...$formState.values,
+    tableId: dataSource?.tableId,
+    valid: $formState.valid,
+    step: $formState.step,
+  }}
 >
   <div use:styleable={$component.styles}>
     {#if loaded}

packages/standard-components/src/forms/index.js

@@ -9,3 +9,4 @@ export { default as datetimefield } from "./DateTimeField.svelte"
 export { default as attachmentfield } from "./AttachmentField.svelte"
 export { default as relationshipfield } from "./RelationshipField.svelte"
 export { default as passwordfield } from "./PasswordField.svelte"
+export { default as formstep } from "./FormStep.svelte"