kevmodrome
5 years ago
No known key found for this signature in database
GPG Key ID: 828D8FE4D235B551
3 changed files with
27 additions and
36 deletions
-
packages/builder/package.json
-
packages/builder/src/components/userInterface/BindingDropdown.svelte
-
packages/builder/src/components/userInterface/PropertyControl.svelte
|
|
|
@ -63,7 +63,7 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
"dependencies": { |
|
|
|
"@budibase/bbui": "^1.53.0", |
|
|
|
"@budibase/bbui": "^1.53.1", |
|
|
|
"@budibase/client": "^0.5.3", |
|
|
|
"@budibase/colorpicker": "^1.0.1", |
|
|
|
"@budibase/svelte-ag-grid": "^0.0.16", |
|
|
|
|
|
|
|
@ -52,52 +52,26 @@ |
|
|
|
{/if} |
|
|
|
</div> |
|
|
|
<div class="text"> |
|
|
|
<Heading extraSmall>Data binding</Heading> |
|
|
|
<Spacer small /> |
|
|
|
<Body extraSmall lh> |
|
|
|
Binding connects one piece of data to another and makes it dynamic. Click |
|
|
|
the objects on the left, to add them to the textbox. |
|
|
|
</Body> |
|
|
|
<Spacer large /> |
|
|
|
<TextArea |
|
|
|
thin |
|
|
|
bind:value |
|
|
|
placeholder="Add text, or click the objects on the left to add them to the |
|
|
|
textbox." /> |
|
|
|
<div class="controls"> |
|
|
|
<a href="https://docs.budibase.com/design/binding"> |
|
|
|
<Body small grey>Learn more about binding</Body> |
|
|
|
</a> |
|
|
|
<Button on:click={cancel} secondary>Cancel</Button> |
|
|
|
<Button on:click={close} primary>Done</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<style> |
|
|
|
.container { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: auto auto; |
|
|
|
} |
|
|
|
.list, |
|
|
|
.text { |
|
|
|
padding: var(--spacing-m); |
|
|
|
} |
|
|
|
.controls { |
|
|
|
margin-top: var(--spacing-m); |
|
|
|
display: grid; |
|
|
|
align-items: center; |
|
|
|
grid-gap: var(--spacing-l); |
|
|
|
grid-template-columns: 1fr auto auto; |
|
|
|
grid-template-columns: auto 1fr; |
|
|
|
} |
|
|
|
.list { |
|
|
|
width: 150px; |
|
|
|
border-right: 1.5px solid var(--grey-4); |
|
|
|
padding: var(--spacing-xl); |
|
|
|
padding: var(--spacing-s); |
|
|
|
} |
|
|
|
.text { |
|
|
|
width: 600px; |
|
|
|
padding: var(--spacing-xl); |
|
|
|
padding: var(--spacing-s); |
|
|
|
font-family: var(--font-sans); |
|
|
|
} |
|
|
|
.text :global(p) { |
|
|
|
|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<script> |
|
|
|
import { Icon, Drawer } from "@budibase/bbui" |
|
|
|
import { Button, Icon, Drawer } from "@budibase/bbui" |
|
|
|
import Input from "./PropertyPanelControls/Input.svelte" |
|
|
|
import { store, backendUiStore, currentAsset } from "builderStore" |
|
|
|
import fetchBindableProperties from "builderStore/fetchBindableProperties" |
|
|
|
@ -106,11 +106,24 @@ |
|
|
|
handleClose() |
|
|
|
showDrawer = false |
|
|
|
}}> |
|
|
|
<BindingDropdown |
|
|
|
{...handlevalueKey(value)} |
|
|
|
close={() => showDrawer = false} |
|
|
|
on:update={e => (temporaryBindableValue = e.detail)} |
|
|
|
{bindableProperties} /> |
|
|
|
<div slot="buttons"> |
|
|
|
<Button |
|
|
|
blue |
|
|
|
thin |
|
|
|
on:click={() => { |
|
|
|
notifier.success('Query parameters saved.') |
|
|
|
handleSelected(value) |
|
|
|
}}> |
|
|
|
Save |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
<div class="drawer-contents" slot="body"> |
|
|
|
<BindingDropdown |
|
|
|
{...handlevalueKey(value)} |
|
|
|
close={() => showDrawer = false} |
|
|
|
on:update={e => (temporaryBindableValue = e.detail)} |
|
|
|
{bindableProperties} /> |
|
|
|
</div> |
|
|
|
</Drawer> |
|
|
|
{/if} |
|
|
|
|
|
|
|
@ -161,4 +174,8 @@ |
|
|
|
color: var(--ink); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.drawer-contents { |
|
|
|
height: 40vh; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
