From 8df4de0ddbaacf7af8518541f96293e72e4a0bbe Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 27 Jan 2021 18:25:57 +0000 Subject: [PATCH] Add FieldGroup component to allow easy mixing of fields and other content in forms --- .../design/AppPreview/componentStructure.json | 1 + packages/standard-components/manifest.json | 13 +++++-- .../src/forms/FieldGroup.svelte | 17 +++++++++ .../src/forms/FieldGroupFallback.svelte | 14 ++++++++ .../standard-components/src/forms/Form.svelte | 13 +++---- .../src/forms/OptionsField.svelte | 2 +- .../src/forms/SpectrumField.svelte | 35 +++++++++++-------- .../src/forms/StringField.svelte | 34 +++++++++--------- .../standard-components/src/forms/index.js | 1 + 9 files changed, 85 insertions(+), 45 deletions(-) create mode 100644 packages/standard-components/src/forms/FieldGroup.svelte create mode 100644 packages/standard-components/src/forms/FieldGroupFallback.svelte diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index dcf29b2534..98f2ca1aa0 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -8,6 +8,7 @@ "icon": "ri-file-edit-line", "children": [ "form", + "fieldgroup", "stringfield", "numberfield", "optionsfield", diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 1cf887bbf2..ce628ee775 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -1118,12 +1118,21 @@ "value": "spectrum--large" } ] - }, + } + ] + }, + "fieldgroup": { + "name": "Field Group", + "description": "A group of fields in a form.", + "icon": "ri-edit-box-line", + "styleable": true, + "hasChildren": true, + "settings": [ { "type": "select", "label": "Labels", "key": "labelPosition", - "defaultValue": "left", + "defaultValue": "above", "options": [ { "label": "Left", diff --git a/packages/standard-components/src/forms/FieldGroup.svelte b/packages/standard-components/src/forms/FieldGroup.svelte new file mode 100644 index 0000000000..ec5979ed30 --- /dev/null +++ b/packages/standard-components/src/forms/FieldGroup.svelte @@ -0,0 +1,17 @@ + + +
+
+ + +
diff --git a/packages/standard-components/src/forms/FieldGroupFallback.svelte b/packages/standard-components/src/forms/FieldGroupFallback.svelte new file mode 100644 index 0000000000..8fc22c9cc4 --- /dev/null +++ b/packages/standard-components/src/forms/FieldGroupFallback.svelte @@ -0,0 +1,14 @@ + + +{#if fieldGroupContext} + +{:else} +
+ +
+{/if} diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte index 86568f18d5..21e2ece4df 100644 --- a/packages/standard-components/src/forms/Form.svelte +++ b/packages/standard-components/src/forms/Form.svelte @@ -7,7 +7,6 @@ export let datasource export let theme export let size - export let labelPosition = "left" const { styleable, API } = getContext("sdk") const component = getContext("component") @@ -51,7 +50,7 @@ } // Provide both form API and state to children - setContext("form", { formApi, formState, labelPosition }) + setContext("form", { formApi, formState }) // Creates an API for a specific field const makeFieldApi = (field, validate) => { @@ -122,11 +121,7 @@ dir="ltr" use:styleable={$component.styles} class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}> -
- {#if loaded} - - {/if} - + {#if loaded} + + {/if} diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte index 77d48867f6..4c7f29f046 100644 --- a/packages/standard-components/src/forms/OptionsField.svelte +++ b/packages/standard-components/src/forms/OptionsField.svelte @@ -18,7 +18,7 @@ let open = false $: options = fieldSchema?.constraints?.inclusion ?? [] $: placeholderText = placeholder || "Choose an option" - $: isNull = $fieldState.value == null || $fieldState.value === "" + $: isNull = $fieldState?.value == null || $fieldState?.value === "" // Update value on blur only const selectOption = value => { diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte index 4acda6e921..418b04371c 100644 --- a/packages/standard-components/src/forms/SpectrumField.svelte +++ b/packages/standard-components/src/forms/SpectrumField.svelte @@ -1,19 +1,22 @@ {#if !fieldId} @@ -21,21 +24,23 @@ {:else if !formContext} Form components need to be wrapped in a Form {:else} -
- {#if label} - - {/if} -
- - {#if $fieldState.error} -
{$fieldState.error}
+ +
+ {#if label} + {/if} +
+ + {#if $fieldState.error} +
{$fieldState.error}
+ {/if} +
-
+ {/if}