Merge pull request #2204 from Budibase/fix/url-select
Fix URL select component
This commit is contained in:
commit
ce38875ea5
|
@ -18,8 +18,8 @@
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
let bindingDrawer
|
let bindingDrawer
|
||||||
$: tempValue = Array.isArray(value) ? value : []
|
|
||||||
$: readableValue = runtimeToReadableBinding(bindings, value)
|
$: readableValue = runtimeToReadableBinding(bindings, value)
|
||||||
|
$: tempValue = readableValue
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
onChange(tempValue)
|
onChange(tempValue)
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
slot="body"
|
slot="body"
|
||||||
value={readableValue}
|
value={readableValue}
|
||||||
close={handleClose}
|
close={handleClose}
|
||||||
on:update={event => (tempValue = event.detail)}
|
on:change={event => (tempValue = event.detail)}
|
||||||
bindableProperties={bindings}
|
bindableProperties={bindings}
|
||||||
/>
|
/>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
export let componentDefinition
|
export let componentDefinition
|
||||||
export let componentInstance
|
export let componentInstance
|
||||||
export let assetInstance
|
export let assetInstance
|
||||||
|
export let bindings
|
||||||
|
|
||||||
const layoutDefinition = []
|
const layoutDefinition = []
|
||||||
const screenDefinition = [
|
const screenDefinition = [
|
||||||
|
@ -65,6 +66,7 @@
|
||||||
options: setting.options,
|
options: setting.options,
|
||||||
placeholder: setting.placeholder,
|
placeholder: setting.placeholder,
|
||||||
}}
|
}}
|
||||||
|
{bindings}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"
|
import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"
|
||||||
|
|
||||||
export let componentInstance
|
export let componentInstance
|
||||||
|
export let bindings
|
||||||
|
|
||||||
let tempValue
|
let tempValue
|
||||||
let drawer
|
let drawer
|
||||||
|
@ -32,5 +33,5 @@
|
||||||
Show, hide and update components in response to conditions being met.
|
Show, hide and update components in response to conditions being met.
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
<Button cta slot="buttons" on:click={() => save()}>Save</Button>
|
<Button cta slot="buttons" on:click={() => save()}>Save</Button>
|
||||||
<ConditionalUIDrawer slot="body" bind:conditions={tempValue} />
|
<ConditionalUIDrawer slot="body" bind:conditions={tempValue} {bindings} />
|
||||||
</Drawer>
|
</Drawer>
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
|
|
||||||
export let componentDefinition
|
export let componentDefinition
|
||||||
export let componentInstance
|
export let componentInstance
|
||||||
|
export let bindings
|
||||||
|
|
||||||
const getStyles = def => {
|
const getStyles = def => {
|
||||||
if (!def?.styles?.length) {
|
if (!def?.styles?.length) {
|
||||||
|
@ -29,6 +30,7 @@
|
||||||
columns={style.columns}
|
columns={style.columns}
|
||||||
properties={style.settings}
|
properties={style.settings}
|
||||||
{componentInstance}
|
{componentInstance}
|
||||||
|
{bindings}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -1,27 +1,45 @@
|
||||||
<script>
|
<script>
|
||||||
import { store, selectedComponent } from "builderStore"
|
import { store, selectedComponent, currentAsset } from "builderStore"
|
||||||
import { Tabs, Tab } from "@budibase/bbui"
|
import { Tabs, Tab } from "@budibase/bbui"
|
||||||
import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
|
import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
|
||||||
import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
|
import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
|
||||||
import DesignSection from "./DesignSection.svelte"
|
import DesignSection from "./DesignSection.svelte"
|
||||||
import CustomStylesSection from "./CustomStylesSection.svelte"
|
import CustomStylesSection from "./CustomStylesSection.svelte"
|
||||||
import ConditionalUISection from "./ConditionalUISection.svelte"
|
import ConditionalUISection from "./ConditionalUISection.svelte"
|
||||||
|
import { getBindableProperties } from "builderStore/dataBinding"
|
||||||
|
|
||||||
$: componentInstance = $selectedComponent
|
$: componentInstance = $selectedComponent
|
||||||
$: componentDefinition = store.actions.components.getDefinition(
|
$: componentDefinition = store.actions.components.getDefinition(
|
||||||
$selectedComponent?._component
|
$selectedComponent?._component
|
||||||
)
|
)
|
||||||
|
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Tabs selected="Settings" noPadding>
|
<Tabs selected="Settings" noPadding>
|
||||||
<Tab title="Settings">
|
<Tab title="Settings">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{#key componentInstance?._id}
|
{#key componentInstance?._id}
|
||||||
<ScreenSettingsSection {componentInstance} {componentDefinition} />
|
<ScreenSettingsSection
|
||||||
<ComponentSettingsSection {componentInstance} {componentDefinition} />
|
{componentInstance}
|
||||||
<DesignSection {componentInstance} {componentDefinition} />
|
{componentDefinition}
|
||||||
<CustomStylesSection {componentInstance} {componentDefinition} />
|
{bindings}
|
||||||
<ConditionalUISection {componentInstance} {componentDefinition} />
|
/>
|
||||||
|
<ComponentSettingsSection
|
||||||
|
{componentInstance}
|
||||||
|
{componentDefinition}
|
||||||
|
{bindings}
|
||||||
|
/>
|
||||||
|
<DesignSection {componentInstance} {componentDefinition} {bindings} />
|
||||||
|
<CustomStylesSection
|
||||||
|
{componentInstance}
|
||||||
|
{componentDefinition}
|
||||||
|
{bindings}
|
||||||
|
/>
|
||||||
|
<ConditionalUISection
|
||||||
|
{componentInstance}
|
||||||
|
{componentDefinition}
|
||||||
|
{bindings}
|
||||||
|
/>
|
||||||
{/key}
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
</Tab>
|
</Tab>
|
||||||
|
|
|
@ -13,12 +13,12 @@
|
||||||
import { generate } from "shortid"
|
import { generate } from "shortid"
|
||||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||||
import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
|
import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
|
||||||
import { getBindableProperties } from "builderStore/dataBinding"
|
import { selectedComponent, store } from "builderStore"
|
||||||
import { currentAsset, selectedComponent, store } from "builderStore"
|
|
||||||
import { getComponentForSettingType } from "./componentSettings"
|
import { getComponentForSettingType } from "./componentSettings"
|
||||||
import PropertyControl from "./PropertyControl.svelte"
|
import PropertyControl from "./PropertyControl.svelte"
|
||||||
|
|
||||||
export let conditions = []
|
export let conditions = []
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
const flipDurationMs = 150
|
const flipDurationMs = 150
|
||||||
const actionOptions = [
|
const actionOptions = [
|
||||||
|
@ -64,10 +64,6 @@
|
||||||
value: setting.key,
|
value: setting.key,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
$: bindableProperties = getBindableProperties(
|
|
||||||
$currentAsset,
|
|
||||||
$store.selectedComponentId
|
|
||||||
)
|
|
||||||
$: conditions.forEach(link => {
|
$: conditions.forEach(link => {
|
||||||
if (!link.id) {
|
if (!link.id) {
|
||||||
link.id = generate()
|
link.id = generate()
|
||||||
|
@ -194,6 +190,7 @@
|
||||||
placeholder: getSettingDefinition(condition.setting)
|
placeholder: getSettingDefinition(condition.setting)
|
||||||
.placeholder,
|
.placeholder,
|
||||||
}}
|
}}
|
||||||
|
{bindings}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<Select disabled placeholder=" " />
|
<Select disabled placeholder=" " />
|
||||||
|
@ -201,7 +198,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
<div>IF</div>
|
<div>IF</div>
|
||||||
<DrawerBindableInput
|
<DrawerBindableInput
|
||||||
bindings={bindableProperties}
|
{bindings}
|
||||||
placeholder="Value"
|
placeholder="Value"
|
||||||
value={condition.newValue}
|
value={condition.newValue}
|
||||||
on:change={e => (condition.newValue = e.detail)}
|
on:change={e => (condition.newValue = e.detail)}
|
||||||
|
@ -222,7 +219,7 @@
|
||||||
{#if ["string", "number"].includes(condition.valueType)}
|
{#if ["string", "number"].includes(condition.valueType)}
|
||||||
<DrawerBindableInput
|
<DrawerBindableInput
|
||||||
disabled={condition.noValue}
|
disabled={condition.noValue}
|
||||||
bindings={bindableProperties}
|
{bindings}
|
||||||
placeholder="Value"
|
placeholder="Value"
|
||||||
value={condition.referenceValue}
|
value={condition.referenceValue}
|
||||||
on:change={e => (condition.referenceValue = e.detail)}
|
on:change={e => (condition.referenceValue = e.detail)}
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { getDataProviderComponents } from "builderStore/dataBinding"
|
||||||
getBindableProperties,
|
|
||||||
getDataProviderComponents,
|
|
||||||
} from "builderStore/dataBinding"
|
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Popover,
|
Popover,
|
||||||
|
@ -31,6 +28,7 @@
|
||||||
export let value = {}
|
export let value = {}
|
||||||
export let otherSources
|
export let otherSources
|
||||||
export let showAllQueries
|
export let showAllQueries
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
$: text = value?.label ?? "Choose an option"
|
$: text = value?.label ?? "Choose an option"
|
||||||
$: tables = $tablesStore.list.map(m => ({
|
$: tables = $tablesStore.list.map(m => ({
|
||||||
|
@ -60,10 +58,6 @@
|
||||||
parameters: query.parameters,
|
parameters: query.parameters,
|
||||||
type: "query",
|
type: "query",
|
||||||
}))
|
}))
|
||||||
$: bindableProperties = getBindableProperties(
|
|
||||||
$currentAsset,
|
|
||||||
$store.selectedComponentId
|
|
||||||
)
|
|
||||||
$: dataProviders = getDataProviderComponents(
|
$: dataProviders = getDataProviderComponents(
|
||||||
$currentAsset,
|
$currentAsset,
|
||||||
$store.selectedComponentId
|
$store.selectedComponentId
|
||||||
|
@ -75,13 +69,13 @@
|
||||||
type: "provider",
|
type: "provider",
|
||||||
schema: provider.schema,
|
schema: provider.schema,
|
||||||
}))
|
}))
|
||||||
$: queryBindableProperties = bindableProperties.map(property => ({
|
$: queryBindableProperties = bindings.map(property => ({
|
||||||
...property,
|
...property,
|
||||||
category: property.type === "instance" ? "Component" : "Table",
|
category: property.type === "instance" ? "Component" : "Table",
|
||||||
label: property.readableBinding,
|
label: property.readableBinding,
|
||||||
path: property.readableBinding,
|
path: property.readableBinding,
|
||||||
}))
|
}))
|
||||||
$: links = bindableProperties
|
$: links = bindings
|
||||||
.filter(x => x.fieldSchema?.type === "link")
|
.filter(x => x.fieldSchema?.type === "link")
|
||||||
.map(property => {
|
.map(property => {
|
||||||
return {
|
return {
|
||||||
|
@ -138,7 +132,7 @@
|
||||||
bind:customParams={value.queryParams}
|
bind:customParams={value.queryParams}
|
||||||
parameters={queries.find(query => query._id === value._id)
|
parameters={queries.find(query => query._id === value._id)
|
||||||
.parameters}
|
.parameters}
|
||||||
bindings={queryBindableProperties}
|
{bindings}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
<IntegrationQueryEditor
|
<IntegrationQueryEditor
|
||||||
|
|
|
@ -13,10 +13,10 @@
|
||||||
import { generate } from "shortid"
|
import { generate } from "shortid"
|
||||||
|
|
||||||
const flipDurationMs = 150
|
const flipDurationMs = 150
|
||||||
|
|
||||||
const EVENT_TYPE_KEY = "##eventHandlerType"
|
const EVENT_TYPE_KEY = "##eventHandlerType"
|
||||||
|
|
||||||
export let actions
|
export let actions
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
// dndzone needs an id on the array items, so this adds some temporary ones.
|
// dndzone needs an id on the array items, so this adds some temporary ones.
|
||||||
$: {
|
$: {
|
||||||
|
@ -121,6 +121,7 @@
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={selectedActionComponent}
|
this={selectedActionComponent}
|
||||||
parameters={selectedAction.parameters}
|
parameters={selectedAction.parameters}
|
||||||
|
{bindings}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
import { Select, Label, Checkbox, Input } from "@budibase/bbui"
|
import { Select, Label, Checkbox, Input } from "@budibase/bbui"
|
||||||
import { store, currentAsset } from "builderStore"
|
|
||||||
import { tables } from "stores/backend"
|
import { tables } from "stores/backend"
|
||||||
import { getBindableProperties } from "builderStore/dataBinding"
|
|
||||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
$: tableOptions = $tables.list || []
|
$: tableOptions = $tables.list || []
|
||||||
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
|
|
|
@ -1,21 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
import { Select, Layout, Input, Checkbox } from "@budibase/bbui"
|
import { Select, Layout, Input, Checkbox } from "@budibase/bbui"
|
||||||
import { store, currentAsset } from "builderStore"
|
|
||||||
import { datasources, integrations, queries } from "stores/backend"
|
import { datasources, integrations, queries } from "stores/backend"
|
||||||
import { getBindableProperties } from "builderStore/dataBinding"
|
|
||||||
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
|
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
|
||||||
import IntegrationQueryEditor from "components/integration/index.svelte"
|
import IntegrationQueryEditor from "components/integration/index.svelte"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
$: query = $queries.list.find(q => q._id === parameters.queryId)
|
$: query = $queries.list.find(q => q._id === parameters.queryId)
|
||||||
$: datasource = $datasources.list.find(
|
$: datasource = $datasources.list.find(
|
||||||
ds => ds._id === parameters.datasourceId
|
ds => ds._id === parameters.datasourceId
|
||||||
)
|
)
|
||||||
$: bindableProperties = getBindableProperties(
|
|
||||||
$currentAsset,
|
|
||||||
$store.selectedComponentId
|
|
||||||
)
|
|
||||||
|
|
||||||
function fetchQueryDefinition(query) {
|
function fetchQueryDefinition(query) {
|
||||||
const source = $datasources.list.find(
|
const source = $datasources.list.find(
|
||||||
|
@ -61,7 +56,7 @@
|
||||||
<ParameterBuilder
|
<ParameterBuilder
|
||||||
bind:customParams={parameters.queryParams}
|
bind:customParams={parameters.queryParams}
|
||||||
parameters={query.parameters}
|
parameters={query.parameters}
|
||||||
bindings={bindableProperties}
|
{bindings}
|
||||||
/>
|
/>
|
||||||
<IntegrationQueryEditor
|
<IntegrationQueryEditor
|
||||||
height={200}
|
height={200}
|
||||||
|
|
|
@ -1,12 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import { Label } from "@budibase/bbui"
|
import { Label } from "@budibase/bbui"
|
||||||
import { getBindableProperties } from "builderStore/dataBinding"
|
|
||||||
import { currentAsset, store } from "builderStore"
|
|
||||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
|
export let bindings = []
|
||||||
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { Label, ActionButton, Button, Select, Input } from "@budibase/bbui"
|
import { Label, ActionButton, Button, Select, Input } from "@budibase/bbui"
|
||||||
import { store, currentAsset } from "builderStore"
|
|
||||||
import { getBindableProperties } from "builderStore/dataBinding"
|
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||||
|
|
||||||
|
@ -11,13 +9,10 @@
|
||||||
export let schemaFields
|
export let schemaFields
|
||||||
export let fieldLabel = "Column"
|
export let fieldLabel = "Column"
|
||||||
export let valueLabel = "Value"
|
export let valueLabel = "Value"
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
let fields = Object.entries(parameterFields || {})
|
let fields = Object.entries(parameterFields || {})
|
||||||
$: onChange(fields)
|
$: onChange(fields)
|
||||||
$: bindableProperties = getBindableProperties(
|
|
||||||
$currentAsset,
|
|
||||||
$store.selectedComponentId
|
|
||||||
)
|
|
||||||
|
|
||||||
const addField = () => {
|
const addField = () => {
|
||||||
fields = [...fields.filter(field => field[0]), ["", ""]]
|
fields = [...fields.filter(field => field[0]), ["", ""]]
|
||||||
|
@ -69,7 +64,7 @@
|
||||||
<DrawerBindableInput
|
<DrawerBindableInput
|
||||||
title={`Value for "${field[0]}"`}
|
title={`Value for "${field[0]}"`}
|
||||||
value={field[1]}
|
value={field[1]}
|
||||||
bindings={bindableProperties}
|
{bindings}
|
||||||
on:change={event => updateFieldValue(idx, event.detail)}
|
on:change={event => updateFieldValue(idx, event.detail)}
|
||||||
/>
|
/>
|
||||||
<ActionButton
|
<ActionButton
|
||||||
|
|
|
@ -20,6 +20,8 @@
|
||||||
|
|
||||||
export let value = []
|
export let value = []
|
||||||
export let componentInstance
|
export let componentInstance
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
let drawer
|
let drawer
|
||||||
let tempValue = value || []
|
let tempValue = value || []
|
||||||
|
|
||||||
|
@ -51,7 +53,7 @@
|
||||||
constraints.
|
constraints.
|
||||||
{/if}
|
{/if}
|
||||||
</Body>
|
</Body>
|
||||||
<LuceneFilterBuilder bind:value={tempValue} {schemaFields} />
|
<LuceneFilterBuilder bind:value={tempValue} {schemaFields} {bindings} />
|
||||||
</Layout>
|
</Layout>
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
|
|
|
@ -7,20 +7,15 @@
|
||||||
Combobox,
|
Combobox,
|
||||||
Input,
|
Input,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { store, currentAsset } from "builderStore"
|
|
||||||
import { getBindableProperties } from "builderStore/dataBinding"
|
|
||||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||||
import { generate } from "shortid"
|
import { generate } from "shortid"
|
||||||
import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
|
import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
|
||||||
|
|
||||||
export let schemaFields
|
export let schemaFields
|
||||||
export let value
|
export let value
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
const BannedTypes = ["link", "attachment"]
|
const BannedTypes = ["link", "attachment"]
|
||||||
$: bindableProperties = getBindableProperties(
|
|
||||||
$currentAsset,
|
|
||||||
$store.selectedComponentId
|
|
||||||
)
|
|
||||||
$: fieldOptions = (schemaFields ?? [])
|
$: fieldOptions = (schemaFields ?? [])
|
||||||
.filter(field => !BannedTypes.includes(field.type))
|
.filter(field => !BannedTypes.includes(field.type))
|
||||||
.map(field => field.name)
|
.map(field => field.name)
|
||||||
|
@ -101,7 +96,7 @@
|
||||||
title={`Value for "${expression.field}"`}
|
title={`Value for "${expression.field}"`}
|
||||||
value={expression.value}
|
value={expression.value}
|
||||||
placeholder="Value"
|
placeholder="Value"
|
||||||
bindings={bindableProperties}
|
{bindings}
|
||||||
on:change={event => (expression.value = event.detail)}
|
on:change={event => (expression.value = event.detail)}
|
||||||
/>
|
/>
|
||||||
{:else if ["string", "longform", "number"].includes(expression.type)}
|
{:else if ["string", "longform", "number"].includes(expression.type)}
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { Button, Icon, Drawer, Label } from "@budibase/bbui"
|
import { Button, Icon, Drawer, Label } from "@budibase/bbui"
|
||||||
import { store, currentAsset } from "builderStore"
|
|
||||||
import {
|
import {
|
||||||
getBindableProperties,
|
|
||||||
readableToRuntimeBinding,
|
readableToRuntimeBinding,
|
||||||
runtimeToReadableBinding,
|
runtimeToReadableBinding,
|
||||||
} from "builderStore/dataBinding"
|
} from "builderStore/dataBinding"
|
||||||
|
@ -18,18 +16,15 @@
|
||||||
export let value = null
|
export let value = null
|
||||||
export let props = {}
|
export let props = {}
|
||||||
export let onChange = () => {}
|
export let onChange = () => {}
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
let bindingDrawer
|
let bindingDrawer
|
||||||
let anchor
|
let anchor
|
||||||
let valid
|
let valid
|
||||||
|
|
||||||
$: bindableProperties = getBindableProperties(
|
$: safeValue = getSafeValue(value, props.defaultValue, bindings)
|
||||||
$currentAsset,
|
|
||||||
$store.selectedComponentId
|
|
||||||
)
|
|
||||||
$: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
|
|
||||||
$: tempValue = safeValue
|
$: tempValue = safeValue
|
||||||
$: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
|
$: replaceBindings = val => readableToRuntimeBinding(bindings, val)
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
handleChange(tempValue)
|
handleChange(tempValue)
|
||||||
|
@ -61,8 +56,8 @@
|
||||||
|
|
||||||
// The "safe" value is the value with any bindings made readable
|
// The "safe" value is the value with any bindings made readable
|
||||||
// If there is no value set, any default value is used
|
// If there is no value set, any default value is used
|
||||||
const getSafeValue = (value, defaultValue, bindableProperties) => {
|
const getSafeValue = (value, defaultValue, bindings) => {
|
||||||
const enriched = runtimeToReadableBinding(bindableProperties, value)
|
const enriched = runtimeToReadableBinding(bindings, value)
|
||||||
return enriched == null && defaultValue !== undefined
|
return enriched == null && defaultValue !== undefined
|
||||||
? defaultValue
|
? defaultValue
|
||||||
: enriched
|
: enriched
|
||||||
|
@ -83,6 +78,7 @@
|
||||||
updateOnChange={false}
|
updateOnChange={false}
|
||||||
on:change={handleChange}
|
on:change={handleChange}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
{bindings}
|
||||||
name={key}
|
name={key}
|
||||||
text={label}
|
text={label}
|
||||||
{type}
|
{type}
|
||||||
|
@ -108,7 +104,7 @@
|
||||||
bind:valid
|
bind:valid
|
||||||
value={safeValue}
|
value={safeValue}
|
||||||
on:change={e => (tempValue = e.detail)}
|
on:change={e => (tempValue = e.detail)}
|
||||||
{bindableProperties}
|
bindableProperties={bindings}
|
||||||
/>
|
/>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -3,10 +3,11 @@
|
||||||
import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
|
import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
|
||||||
|
|
||||||
export let value
|
export let value
|
||||||
|
export let bindings
|
||||||
|
|
||||||
$: urlOptions = $store.screens
|
$: urlOptions = $store.screens
|
||||||
.map(screen => screen.routing?.route)
|
.map(screen => screen.routing?.route)
|
||||||
.filter(x => x != null)
|
.filter(x => x != null)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerBindableCombobox {value} on:change options={urlOptions} />
|
<DrawerBindableCombobox {value} {bindings} on:change options={urlOptions} />
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
import { FrontendTypes } from "constants"
|
import { FrontendTypes } from "constants"
|
||||||
|
|
||||||
export let componentInstance
|
export let componentInstance
|
||||||
|
export let bindings
|
||||||
|
|
||||||
function setAssetProps(name, value) {
|
function setAssetProps(name, value) {
|
||||||
const selectedAsset = get(currentAsset)
|
const selectedAsset = get(currentAsset)
|
||||||
|
@ -44,6 +45,7 @@
|
||||||
key={def.key}
|
key={def.key}
|
||||||
value={deepGet($currentAsset, def.key)}
|
value={deepGet($currentAsset, def.key)}
|
||||||
onChange={val => setAssetProps(def.key, val)}
|
onChange={val => setAssetProps(def.key, val)}
|
||||||
|
{bindings}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</DetailSummary>
|
</DetailSummary>
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
export let columns
|
export let columns
|
||||||
export let properties
|
export let properties
|
||||||
export let componentInstance
|
export let componentInstance
|
||||||
|
export let bindings = []
|
||||||
|
|
||||||
$: style = componentInstance._styles.normal || {}
|
$: style = componentInstance._styles.normal || {}
|
||||||
$: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
|
$: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
|
||||||
|
@ -36,6 +37,7 @@
|
||||||
value={style[prop.key]}
|
value={style[prop.key]}
|
||||||
onChange={val => store.actions.components.updateStyle(prop.key, val)}
|
onChange={val => store.actions.components.updateStyle(prop.key, val)}
|
||||||
props={getControlProps(prop)}
|
props={getControlProps(prop)}
|
||||||
|
{bindings}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
export let underline
|
export let underline
|
||||||
export let size
|
export let size
|
||||||
|
|
||||||
$: external = url && !url.startsWith("/")
|
$: external = url && typeof url === "string" && !url.startsWith("/")
|
||||||
$: target = openInNewTab ? "_blank" : "_self"
|
$: target = openInNewTab ? "_blank" : "_self"
|
||||||
$: placeholder = $builderStore.inBuilder && !text
|
$: placeholder = $builderStore.inBuilder && !text
|
||||||
$: componentText = $builderStore.inBuilder
|
$: componentText = $builderStore.inBuilder
|
||||||
|
|
Loading…
Reference in New Issue