1
0
Fork 0
mirror of synced 2024-06-17 01:44:53 +12:00

Add FieldGroup component to allow easy mixing of fields and other content in forms

This commit is contained in:
Andrew Kingston 2021-01-27 18:25:57 +00:00
parent bfebf0226a
commit 8df4de0ddb
9 changed files with 85 additions and 45 deletions

View file

@ -8,6 +8,7 @@
"icon": "ri-file-edit-line",
"children": [
"form",
"fieldgroup",
"stringfield",
"numberfield",
"optionsfield",

View file

@ -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",

View file

@ -0,0 +1,17 @@
<script>
import { getContext, setContext } from "svelte"
export let labelPosition = "above"
const { styleable } = getContext("sdk")
const component = getContext("component")
setContext("fieldGroup", { labelPosition })
</script>
<div use:styleable={$component.styles}>
<form
class="spectrum-Form"
class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
<slot />
</form>
</div>

View file

@ -0,0 +1,14 @@
<script>
import { getContext } from "svelte"
const fieldGroupContext = getContext("fieldGroup")
const labelPosition = fieldGroupContext?.labelPosition || "above"
</script>
{#if fieldGroupContext}
<slot />
{:else}
<div class="spectrum-Form--labelsAbove">
<slot />
</div>
{/if}

View file

@ -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'}`}>
<form
class="spectrum-Form"
class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
{#if loaded}
<slot />
{/if}
</form>
{#if loaded}
<slot />
{/if}
</div>

View file

@ -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 => {

View file

@ -1,19 +1,22 @@
<script>
import Placeholder from "./Placeholder.svelte"
import FieldGroupFallback from "./FieldGroupFallback.svelte"
import { getContext } from "svelte"
export let label
export let field
const formContext = getContext("form")
const fieldGroupContext = getContext("fieldGroup")
const { styleable } = getContext("sdk")
const component = getContext("component")
const { labelPosition, formApi } = formContext || {}
const { formApi } = formContext || {}
const labelPosition = fieldGroupContext?.labelPosition || "above"
const formField = formApi?.registerField(field) ?? {}
const { fieldId, fieldState } = formField
$: labelPositionClass =
labelPosition === "top" ? "" : `spectrum-FieldLabel--${labelPosition}`
labelPosition === "above" ? "" : `spectrum-FieldLabel--${labelPosition}`
</script>
{#if !fieldId}
@ -21,21 +24,23 @@
{:else if !formContext}
<Placeholder>Form components need to be wrapped in a Form</Placeholder>
{:else}
<div class="spectrum-Form-item" use:styleable={$component.styles}>
{#if label}
<label
for={fieldId}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
{label}
</label>
{/if}
<div class="spectrum-Form-itemField">
<slot />
{#if $fieldState.error}
<div class="error">{$fieldState.error}</div>
<FieldGroupFallback>
<div class="spectrum-Form-item" use:styleable={$component.styles}>
{#if label}
<label
for={fieldId}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
{label}
</label>
{/if}
<div class="spectrum-Form-itemField">
<slot />
{#if $fieldState.error}
<div class="error">{$fieldState.error}</div>
{/if}
</div>
</div>
</div>
</FieldGroupFallback>
{/if}
<style>

View file

@ -20,23 +20,21 @@
</script>
<SpectrumField {label} {field}>
<div>
<div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
{#if !$fieldState.valid}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<input
id={$fieldState.fieldId}
value={$fieldState.value || ''}
placeholder={placeholder || ''}
on:blur={onBlur}
{type}
class="spectrum-Textfield-input" />
</div>
<div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
{#if !$fieldState.valid}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<input
id={$fieldState.fieldId}
value={$fieldState.value || ''}
placeholder={placeholder || ''}
on:blur={onBlur}
{type}
class="spectrum-Textfield-input" />
</div>
</SpectrumField>

View file

@ -1,4 +1,5 @@
export { default as form } from "./Form.svelte"
export { default as fieldgroup } from "./FieldGroup.svelte"
export { default as stringfield } from "./StringField.svelte"
export { default as numberfield } from "./NumberField.svelte"
export { default as optionsfield } from "./OptionsField.svelte"