From 515161978287c63f61c357e0c418c8aa38888ef5 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 17 Aug 2021 10:32:01 +0100 Subject: [PATCH] Allow users to define custom picker options --- .../OptionsEditor/OptionsDrawer.svelte | 83 +++++++++++++++++++ .../OptionsEditor/OptionsEditor.svelte | 29 +++++++ .../PropertyControls/componentSettings.js | 3 + packages/standard-components/manifest.json | 8 ++ .../src/forms/OptionsField.svelte | 6 ++ 5 files changed, 129 insertions(+) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte new file mode 100644 index 0000000000..e3b3fa1ab9 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte @@ -0,0 +1,83 @@ + + + +
+ + + {#if !options.length} + Add a custom option. + {/if} + + +
+ {#each options as option (option.id)} + + + removeOption(option.id)} + /> + {/each} +
+
+ +
+ +
+ + + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte new file mode 100644 index 0000000000..78d2dc5302 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte @@ -0,0 +1,29 @@ + + +Define Options + + + Add custom picker otpions + + + + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js index 8435971714..641ae9edb3 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js @@ -20,6 +20,8 @@ import LongFormFieldSelect from "./LongFormFieldSelect.svelte" import DateTimeFieldSelect from "./DateTimeFieldSelect.svelte" import AttachmentFieldSelect from "./AttachmentFieldSelect.svelte" import RelationshipFieldSelect from "./RelationshipFieldSelect.svelte" +import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte" + const componentMap = { text: Input, @@ -34,6 +36,7 @@ const componentMap = { icon: IconSelect, field: FieldSelect, multifield: MultiFieldSelect, + options: OptionsEditor, schema: SchemaSelect, section: SectionSelect, navigation: NavigationEditor, diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index ede9bdd2b4..283ef1e056 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -1964,7 +1964,15 @@ "setting": "optionsSource", "value": "provider" } + }, + { + "type": "options", + "key": "customOptions", + "dependsOn": { + "setting": "optionsSource", + "value": "custom" } + } ] }, "booleanfield": { diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte index f745e07012..6078984990 100644 --- a/packages/standard-components/src/forms/OptionsField.svelte +++ b/packages/standard-components/src/forms/OptionsField.svelte @@ -12,6 +12,7 @@ export let dataProvider export let labelColumn export let valueColumn + export let customOptions let fieldState let fieldApi @@ -51,6 +52,11 @@ return Object.values(optionsSet) } + // Extract custom options + if (optionsSource === "custom" && customOptions) { + return customOptions + } + return [] }