|
|
|
@ -1,11 +1,9 @@ |
|
|
|
<script> |
|
|
|
import { Button, Icon, Drawer, Label } from "@budibase/bbui" |
|
|
|
import { Label } from "@budibase/bbui" |
|
|
|
import { |
|
|
|
readableToRuntimeBinding, |
|
|
|
runtimeToReadableBinding, |
|
|
|
} from "builderStore/dataBinding" |
|
|
|
import BindingPanel from "components/common/bindings/BindingPanel.svelte" |
|
|
|
import { capitalise } from "helpers" |
|
|
|
|
|
|
|
export let label = "" |
|
|
|
export let bindable = true |
|
|
|
@ -20,10 +18,6 @@ |
|
|
|
export let componentBindings = [] |
|
|
|
export let nested = false |
|
|
|
|
|
|
|
let bindingDrawer |
|
|
|
let anchor |
|
|
|
let valid |
|
|
|
|
|
|
|
$: allBindings = getAllBindings(bindings, componentBindings, nested) |
|
|
|
$: safeValue = getSafeValue(value, props.defaultValue, allBindings) |
|
|
|
$: tempValue = safeValue |
|
|
|
@ -33,12 +27,7 @@ |
|
|
|
if (!nested) { |
|
|
|
return bindings |
|
|
|
} |
|
|
|
return [...(bindings || []), ...(componentBindings || [])] |
|
|
|
} |
|
|
|
|
|
|
|
const handleClose = () => { |
|
|
|
handleChange(tempValue) |
|
|
|
bindingDrawer.hide() |
|
|
|
return [...(componentBindings || []), ...(bindings || [])] |
|
|
|
} |
|
|
|
|
|
|
|
// Handle a value change of any type |
|
|
|
@ -74,7 +63,7 @@ |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<div class="property-control" bind:this={anchor} data-cy={`setting-${key}`}> |
|
|
|
<div class="property-control" data-cy={`setting-${key}`}> |
|
|
|
{#if type !== "boolean" && label} |
|
|
|
<div class="label"> |
|
|
|
<Label>{label}</Label> |
|
|
|
@ -94,31 +83,6 @@ |
|
|
|
{type} |
|
|
|
{...props} |
|
|
|
/> |
|
|
|
{#if bindable && !key.startsWith("_") && type === "text"} |
|
|
|
<div |
|
|
|
class="icon" |
|
|
|
data-cy={`${key}-binding-button`} |
|
|
|
on:click={bindingDrawer.show} |
|
|
|
> |
|
|
|
<Icon size="S" name="FlashOn" /> |
|
|
|
</div> |
|
|
|
<Drawer bind:this={bindingDrawer} title={capitalise(key)}> |
|
|
|
<svelte:fragment slot="description"> |
|
|
|
Add the objects on the left to enrich your text. |
|
|
|
</svelte:fragment> |
|
|
|
<Button cta slot="buttons" disabled={!valid} on:click={handleClose}> |
|
|
|
Save |
|
|
|
</Button> |
|
|
|
<BindingPanel |
|
|
|
slot="body" |
|
|
|
bind:valid |
|
|
|
value={safeValue} |
|
|
|
on:change={e => (tempValue = e.detail)} |
|
|
|
bindableProperties={allBindings} |
|
|
|
allowJS |
|
|
|
/> |
|
|
|
</Drawer> |
|
|
|
{/if} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -130,40 +94,10 @@ |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: stretch; |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
padding-bottom: var(--spectrum-global-dimension-size-65); |
|
|
|
} |
|
|
|
|
|
|
|
.control { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.icon { |
|
|
|
right: 1px; |
|
|
|
top: 1px; |
|
|
|
bottom: 1px; |
|
|
|
position: absolute; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
box-sizing: border-box; |
|
|
|
border-left: 1px solid var(--spectrum-alias-border-color); |
|
|
|
border-top-right-radius: var(--spectrum-alias-border-radius-regular); |
|
|
|
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular); |
|
|
|
width: 31px; |
|
|
|
color: var(--spectrum-alias-text-color); |
|
|
|
background-color: var(--spectrum-global-color-gray-75); |
|
|
|
transition: background-color |
|
|
|
var(--spectrum-global-animation-duration-100, 130ms), |
|
|
|
box-shadow var(--spectrum-global-animation-duration-100, 130ms), |
|
|
|
border-color var(--spectrum-global-animation-duration-100, 130ms); |
|
|
|
} |
|
|
|
.icon:hover { |
|
|
|
cursor: pointer; |
|
|
|
color: var(--spectrum-alias-text-color-hover); |
|
|
|
background-color: var(--spectrum-global-color-gray-50); |
|
|
|
border-color: var(--spectrum-alias-border-color-hover); |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
mike12345567
5 years ago