diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 47c79df6bb..8a7af407a5 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1844,6 +1844,7 @@ "icon": "Text", "illegalChildren": ["section"], "styles": ["size"], + "editable": true, "settings": [ { "type": "field/string", @@ -1882,6 +1883,7 @@ "name": "Number Field", "icon": "123", "styles": ["size"], + "editable": true, "illegalChildren": ["section"], "settings": [ { @@ -1921,6 +1923,7 @@ "name": "Password Field", "icon": "LockClosed", "styles": ["size"], + "editable": true, "illegalChildren": ["section"], "settings": [ { @@ -1960,6 +1963,7 @@ "name": "Options Picker", "icon": "ViewList", "styles": ["size"], + "editable": true, "illegalChildren": ["section"], "settings": [ { @@ -2083,6 +2087,7 @@ "name": "Multi-select Picker", "icon": "ViewList", "styles": ["size"], + "editable": true, "illegalChildren": ["section"], "settings": [ { @@ -2184,6 +2189,7 @@ "booleanfield": { "name": "Checkbox", "icon": "Checkmark", + "editable": true, "illegalChildren": ["section"], "settings": [ { @@ -2247,6 +2253,7 @@ "name": "Rich Text", "icon": "TextParagraph", "styles": ["size"], + "editable": true, "illegalChildren": ["section"], "settings": [ { @@ -2287,6 +2294,7 @@ "name": "Date Picker", "icon": "DateInput", "styles": ["size"], + "editable": true, "illegalChildren": ["section"], "settings": [ { @@ -2332,6 +2340,7 @@ "name": "Attachment", "icon": "Attach", "styles": ["size"], + "editable": true, "illegalChildren": ["section"], "settings": [ { @@ -2361,6 +2370,7 @@ "name": "Relationship Picker", "icon": "TaskList", "styles": ["size"], + "editable": true, "illegalChildren": ["section"], "settings": [ { diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index 823e520764..d0bfce9738 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/packages/client/src/components/app/forms/Field.svelte @@ -17,7 +17,7 @@ const formContext = getContext("form") const formStepContext = getContext("form-step") const fieldGroupContext = getContext("field-group") - const { styleable } = getContext("sdk") + const { styleable, builderStore } = getContext("sdk") const component = getContext("component") // Register field with form @@ -32,6 +32,10 @@ formStepContext || 1 ) + // Focus label when editing + let labelNode + $: $component.editing && labelNode?.focus() + // Update form properties in parent component on every store change const unsubscribe = formField?.subscribe(value => { fieldState = value?.fieldState @@ -55,16 +59,23 @@ const updateDisabled = disabled => { fieldApi?.setDisabled(disabled) } + + const updateLabel = e => { + builderStore.actions.updateProp("label", e.target.textContent) + }
{#if !formContext}