Allow using fields without forms and enable standalone mode for text and options fields

packages/client/manifest.json

@@ -3096,7 +3096,6 @@
     "name": "Text Field",
     "icon": "Text",
     "styles": ["size"],
-    "requiredAncestors": ["form"],
     "editable": true,
     "size": {
       "width": 400,
@@ -3226,7 +3225,17 @@
           }
         ]
       }
-    ]
+    ],
+    "context": {
+      "type": "static",
+      "values": [
+        {
+          "label": "Value",
+          "key": "value",
+          "type": "string"
+        }
+      ]
+    }
   },
   "numberfield": {
     "name": "Number Field",
@@ -3506,7 +3515,6 @@
     "name": "Options Picker",
     "icon": "Menu",
     "styles": ["size"],
-    "requiredAncestors": ["form"],
     "editable": true,
     "size": {
       "width": 400,
@@ -3714,7 +3722,17 @@
           }
         ]
       }
-    ]
+    ],
+    "context": {
+      "type": "static",
+      "values": [
+        {
+          "label": "Value",
+          "key": "value",
+          "type": "string"
+        }
+      ]
+    }
   },
   "multifieldselect": {
     "name": "Multi-select Picker",

packages/client/src/components/app/forms/Field.svelte

@@ -2,6 +2,9 @@
   import Placeholder from "../Placeholder.svelte"
   import { getContext, onDestroy } from "svelte"
   import { Icon } from "@budibase/bbui"
+  import InnerForm from "./InnerForm.svelte"
+  import { writable } from "svelte/store"
+  import Provider from "components/context/Provider.svelte"
 
   export let label
   export let field
@@ -71,52 +74,66 @@
   })
 </script>
 
-<div
+{#if !formContext}
-  class="spectrum-Form-item"
+  <!-- Cant support attachments -->
-  class:span-2={span === 2}
+  <Provider data={{ value: fieldState?.value }}>
-  class:span-3={span === 3}
+    <InnerForm
-  class:span-6={span === 6 || !span}
+      {disabled}
-  use:styleable={$component.styles}
+      {readonly}
-  class:above={labelPos === "above"}
+      currentStep={writable(1)}
->
+      provideContext={false}
-  {#key $component.editing}
-    <label
-      bind:this={labelNode}
-      contenteditable={$component.editing}
-      on:blur={$component.editing ? updateLabel : null}
-      on:input={() => (touched = true)}
-      class:hidden={!label}
-      class:readonly
-      for={fieldState?.fieldId}
-      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
     >
-      {label || " "}
+      <svelte:self {...$$props} bind:fieldState bind:fieldApi bind:fieldSchema>
-    </label>
+        <slot />
-  {/key}
+      </svelte:self>
-  <div class="spectrum-Form-itemField">
+    </InnerForm>
-    {#if !formContext}
+  </Provider>
-      <Placeholder text="Form components need to be wrapped in a form" />
+{:else}
-    {:else if !fieldState}
+  <div
-      <Placeholder />
+    class="spectrum-Form-item"
-    {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}
+    class:span-2={span === 2}
-      <Placeholder
+    class:span-3={span === 3}
-        text="This Field setting is the wrong data type for this component"
+    class:span-6={span === 6 || !span}
-      />
+    use:styleable={$component.styles}
-    {:else}
+    class:above={labelPos === "above"}
-      <slot />
+  >
-      {#if fieldState.error}
+    {#key $component.editing}
-        <div class="error">
+      <label
-          <Icon name="Alert" />
+        bind:this={labelNode}
-          <span>{fieldState.error}</span>
+        contenteditable={$component.editing}
-        </div>
+        on:blur={$component.editing ? updateLabel : null}
-      {:else if helpText}
+        on:input={() => (touched = true)}
-        <div class="helpText">
+        class:hidden={!label}
-          <Icon name="HelpOutline" /> <span>{helpText}</span>
+        class:readonly
-        </div>
+        for={fieldState?.fieldId}
+        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
+      >
+        {label || " "}
+      </label>
+    {/key}
+    <div class="spectrum-Form-itemField">
+      {#if !fieldState}
+        <Placeholder />
+      {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}
+        <Placeholder
+          text="This Field setting is the wrong data type for this component"
+        />
+      {:else}
+        <slot />
+        {#if fieldState.error}
+          <div class="error">
+            <Icon name="Alert" />
+            <span>{fieldState.error}</span>
+          </div>
+        {:else if helpText}
+          <div class="helpText">
+            <Icon name="HelpOutline" /> <span>{helpText}</span>
+          </div>
+        {/if}
       {/if}
-    {/if}
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   :global(.form-block .spectrum-Form-item.span-2) {

packages/client/src/components/app/forms/Form.svelte

@@ -5,7 +5,6 @@
   import { writable } from "svelte/store"
 
   export let dataSource
-  export let theme
   export let size
   export let disabled = false
   export let readonly = false
@@ -113,11 +112,9 @@
   {#key resetKey}
     <InnerForm
       {dataSource}
-      {theme}
       {size}
       {disabled}
       {readonly}
-      {actionType}
       {schema}
       {definition}
       {initialValues}

packages/client/src/components/app/forms/InnerForm.svelte

@@ -14,6 +14,10 @@
   export let disableSchemaValidation = false
   export let editAutoColumns = false
 
+  // For internal use only, to disable context when being used with standalone
+  // fields
+  export let provideContext = true
+
   // We export this store so that when we remount the inner form we can still
   // persist what step we're on
   export let currentStep
@@ -442,8 +446,14 @@
   ]
 </script>
 
-<Provider {actions} data={dataContext}>
+{#if provideContext}
+  <Provider {actions} data={dataContext}>
+    <div use:styleable={$component.styles} class={size}>
+      <slot />
+    </div>
+  </Provider>
+{:else}
   <div use:styleable={$component.styles} class={size}>
     <slot />
   </div>
-</Provider>
+{/if}