diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index 1a64a8958f..7d40995925 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -131,6 +131,7 @@ const fieldTypeToComponentMap = { string: "stringfield", number: "numberfield", options: "optionsfield", + array: "multifieldselect", boolean: "booleanfield", longform: "longformfield", datetime: "datetimefield", diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte index 66879b83cf..f2f7a6c687 100644 --- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte +++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte @@ -36,6 +36,7 @@ {:else if type === "array"} p.concat(n), [])} /> {:else if type === "link"} diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index c83686158f..881b6baa72 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -20,7 +20,8 @@ "datetimefield", "attachmentfield", "relationshipfield", - "daterangepicker" + "daterangepicker", + "multifieldselect" ] }, { diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js index 64668d05c8..3ca3f7f5c9 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js @@ -43,6 +43,7 @@ const componentMap = { "field/datetime": FormFieldSelect, "field/attachment": FormFieldSelect, "field/link": FormFieldSelect, + "field/array": FormFieldSelect, // Some validation types are the same as others, so not all types are // explicitly listed here. e.g. options uses string validation "validation/string": ValidationEditor, diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 95f41a85ef..8b2bb863a5 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -2005,6 +2005,112 @@ } ] }, + "multifieldselect": { + "name": "MultiField Picker", + "icon": "ViewList", + "styles": ["size"], + "illegalChildren": ["section"], + "settings": [ + { + "type": "field/array", + "label": "Field", + "key": "field" + }, + { + "type": "text", + "label": "Label", + "key": "label" + }, + { + "type": "text", + "label": "Placeholder", + "key": "placeholder", + "placeholder": "Choose an option" + }, + { + "type": "text", + "label": "Default value", + "key": "defaultValue" + }, + { + "type": "boolean", + "label": "Autocomplete", + "key": "autocomplete", + "defaultValue": false, + "dependsOn": { + "setting": "optionsType", + "value": "select" + } + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false + }, + { + "type": "select", + "label": "Options source", + "key": "optionsSource", + "defaultValue": "schema", + "placeholder": "Pick an options source", + "options": [ + { + "label": "Schema", + "value": "schema" + }, + { + "label": "Data provider", + "value": "provider" + }, + { + "label": "Custom", + "value": "custom" + } + ] + }, + { + "type": "dataProvider", + "label": "Options Provider", + "key": "dataProvider", + "dependsOn": { + "setting": "optionsSource", + "value": "provider" + } + }, + { + "type": "field", + "label": "Label Column", + "key": "labelColumn", + "dependsOn": { + "setting": "optionsSource", + "value": "provider" + } + }, + { + "type": "field", + "label": "Value Column", + "key": "valueColumn", + "dependsOn": { + "setting": "optionsSource", + "value": "provider" + } + }, + { + "type": "options", + "key": "customOptions", + "dependsOn": { + "setting": "optionsSource", + "value": "custom" + } + }, + { + "type": "validation/string", + "label": "Validation", + "key": "validation" + } + ] + }, "booleanfield": { "name": "Checkbox", "icon": "Checkmark", diff --git a/packages/standard-components/src/forms/MultiFieldSelect.svelte b/packages/standard-components/src/forms/MultiFieldSelect.svelte new file mode 100644 index 0000000000..d44f471304 --- /dev/null +++ b/packages/standard-components/src/forms/MultiFieldSelect.svelte @@ -0,0 +1,73 @@ + + + + + diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js index fed371278b..cbc278aa03 100644 --- a/packages/standard-components/src/forms/index.js +++ b/packages/standard-components/src/forms/index.js @@ -3,6 +3,7 @@ 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" +export { default as multifieldselect } from "./MultiFieldSelect.svelte" export { default as booleanfield } from "./BooleanField.svelte" export { default as longformfield } from "./LongFormField.svelte" export { default as datetimefield } from "./DateTimeField.svelte"