diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte index 726f3cdbea..85b3455172 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte @@ -43,7 +43,6 @@ import { Icon, Popover, Layout } from "@budibase/bbui" - import { componentStore } from "@/stores/builder" + import { componentStore, selectedScreen } from "@/stores/builder" import { cloneDeep } from "lodash/fp" import { createEventDispatcher, getContext } from "svelte" import ComponentSettingsSection from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte" + import { getComponentBindableProperties } from "@/dataBinding" export let anchor export let componentInstance - export let componentBindings export let bindings export let parseSettings @@ -28,6 +28,10 @@ } $: componentDef = componentStore.getDefinition(componentInstance._component) $: parsedComponentDef = processComponentDefinitionSettings(componentDef) + $: componentBindings = getComponentBindableProperties( + $selectedScreen, + $componentStore.selectedComponentId + ) const open = () => { isOpen = true diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte index d39af94ce1..d54fdfccbd 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte @@ -45,7 +45,6 @@ readableToRuntimeBinding(allBindings, val) - $: isHighlighted = highlightedProp?.key === key - $: highlightType = isHighlighted ? `highlighted-${highlightedProp?.type}` : "" + $: highlightedProp && isHighlighted && scrollToElement(domElement) - const getAllBindings = (bindings, componentBindings, nested) => { - if (!nested) { + const getAllBindings = ( + bindings, + componentBindings, + nested, + contextAccess + ) => { + // contextAccess is a bit of an escape hatch to get around how we render + // certain settings types by using a pseudo component definition, leading + // to problems with the nested flag + if (contextAccess != null) { + // Optionally include global bindings + let allBindings = contextAccess.global ? bindings : [] + + // Optionally include or exclude self (component) bindings. + // If this is a nested setting then we will already have our own context + // bindings mixed in, so if we don't want self context we need to filter + // them out. + if (contextAccess.self) { + return [...allBindings, ...componentBindings] + } else { + return allBindings.filter(binding => { + return !componentBindings.some(componentBinding => { + return componentBinding.runtimeBinding === binding.runtimeBinding + }) + }) + } + } + + // Otherwise just honour the normal nested flag + if (nested) { + return [...bindings, ...componentBindings] + } else { return bindings } - return [...(componentBindings || []), ...(bindings || [])] } // Handle a value change of any type @@ -81,8 +115,6 @@ block: "center", }) } - - $: highlightedProp && isHighlighted && scrollToElement(domElement)
{/if} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte index 0b147e867c..1d31554df9 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte @@ -151,6 +151,7 @@ propertyFocus={$builderStore.propertyFocus === setting.key} info={setting.info} disableBindings={setting.disableBindings} + contextAccess={setting.contextAccess} props={{ // Generic settings placeholder: setting.placeholder || null, diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte index 863333e91d..a33d60a644 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte @@ -19,6 +19,7 @@ export let conditions = [] export let bindings = [] + export let componentBindings = [] const flipDurationMs = 150 const actionOptions = [ @@ -55,6 +56,7 @@ ] let dragDisabled = true + $: settings = componentStore .getComponentSettings($selectedComponent?._component) ?.concat({ @@ -213,7 +215,10 @@ options: definition.options, placeholder: definition.placeholder, }} + nested={definition.nested} + contextAccess={definition.contextAccess} {bindings} + {componentBindings} /> {:else}