diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte index 972a2bb7fe..6944163f26 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte @@ -32,9 +32,29 @@ if (!control) { return false } - if (setting.dependsOn && isEmpty(componentInstance[setting.dependsOn])) { - return false + + // Parse dependant settings + if (setting.dependsOn) { + let dependantSetting = setting.dependsOn + let dependantValue = null + if (typeof setting.dependsOn === "object") { + dependantSetting = setting.dependsOn.setting + dependantValue = setting.dependsOn.value + } + if (!dependantSetting) { + return false + } + + // If no specific value is depended upon, check if a value exists at all + // for the dependent setting + if (dependantValue == null) { + return !isEmpty(componentInstance[dependantSetting]) + } + + // Otherwise check the value matches + return componentInstance[dependantSetting] === dependantValue } + return true } diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index a45283d63a..ede9bdd2b4 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -1893,6 +1893,7 @@ "type": "select", "label": "Type", "key": "optionsType", + "defaultValue": "select", "placeholder": "Pick an options type", "options": [ { @@ -1915,6 +1916,54 @@ "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" + } } ] }, diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte index 18debfb23d..f745e07012 100644 --- a/packages/standard-components/src/forms/OptionsField.svelte +++ b/packages/standard-components/src/forms/OptionsField.svelte @@ -8,10 +8,51 @@ export let disabled = false export let optionsType = "select" export let defaultValue + export let optionsSource = "schema" + export let dataProvider + export let labelColumn + export let valueColumn let fieldState let fieldApi let fieldSchema + + $: flatOptions = optionsSource == null || optionsSource === "schema" + $: options = getOptions( + optionsSource, + fieldSchema, + dataProvider, + labelColumn, + valueColumn + ) + + const getOptions = ( + optionsSource, + fieldSchema, + dataProvider, + labelColumn, + valueColumn + ) => { + // Take options from schema + if (optionsSource == null || optionsSource === "schema") { + return fieldSchema?.constraints?.inclusion ?? [] + } + + // Extract options from data provider + if (optionsSource === "provider" && valueColumn) { + let optionsSet = {} + dataProvider?.rows?.forEach(row => { + const value = row?.[valueColumn] + if (value) { + const label = row[labelColumn] || value + optionsSet[value] = { value, label } + } + }) + return Object.values(optionsSet) + } + + return [] + } fieldApi.setValue(e.detail)} + getOptionLabel={flatOptions ? x => x : x => x.label} + getOptionValue={flatOptions ? x => x : x => x.value} /> {:else if optionsType === "radio"}