diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte index 38f8693f51..a48a91a44f 100644 --- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte +++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte @@ -18,8 +18,8 @@ const dispatch = createEventDispatcher() let bindingDrawer - $: tempValue = Array.isArray(value) ? value : [] $: readableValue = runtimeToReadableBinding(bindings, value) + $: tempValue = readableValue const handleClose = () => { onChange(tempValue) @@ -56,7 +56,7 @@ slot="body" value={readableValue} close={handleClose} - on:update={event => (tempValue = event.detail)} + on:change={event => (tempValue = event.detail)} bindableProperties={bindings} /> diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte index 0900bae1a7..972a2bb7fe 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte @@ -11,6 +11,7 @@ export let componentDefinition export let componentInstance export let assetInstance + export let bindings const layoutDefinition = [] const screenDefinition = [ @@ -65,6 +66,7 @@ options: setting.options, placeholder: setting.placeholder, }} + {bindings} /> {/if} {/each} diff --git a/packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte b/packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte index b1f65f3593..2802f38c2b 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte @@ -4,6 +4,7 @@ import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte" export let componentInstance + export let bindings let tempValue let drawer @@ -32,5 +33,5 @@ Show, hide and update components in response to conditions being met. - + diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte index 639ac90586..fa1a357f38 100644 --- a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte @@ -4,6 +4,7 @@ export let componentDefinition export let componentInstance + export let bindings const getStyles = def => { if (!def?.styles?.length) { @@ -29,6 +30,7 @@ columns={style.columns} properties={style.settings} {componentInstance} + {bindings} /> {/each} {/if} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte index e85c30a171..27f6650cde 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte @@ -1,27 +1,45 @@
{#key componentInstance?._id} - - - - - + + + + + {/key}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte index 8b9cad1b7c..006039edda 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte @@ -13,12 +13,12 @@ import { generate } from "shortid" import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene" - import { getBindableProperties } from "builderStore/dataBinding" - import { currentAsset, selectedComponent, store } from "builderStore" + import { selectedComponent, store } from "builderStore" import { getComponentForSettingType } from "./componentSettings" import PropertyControl from "./PropertyControl.svelte" export let conditions = [] + export let bindings = [] const flipDurationMs = 150 const actionOptions = [ @@ -64,10 +64,6 @@ value: setting.key, } }) - $: bindableProperties = getBindableProperties( - $currentAsset, - $store.selectedComponentId - ) $: conditions.forEach(link => { if (!link.id) { link.id = generate() @@ -194,6 +190,7 @@ placeholder: getSettingDefinition(condition.setting) .placeholder, }} + {bindings} /> {:else}