updates correctly on close, cancel and done actions

This commit is contained in:
kevmodrome 2020-08-28 15:40:43 +02:00
parent 006ad9efbe
commit 4174475ba6
No known key found for this signature in database
GPG Key ID: E8F9CD141E63BF38
4 changed files with 31 additions and 9 deletions

View File

@ -60,7 +60,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@budibase/bbui": "^1.28.2", "@budibase/bbui": "^1.29.0",
"@budibase/client": "^0.1.19", "@budibase/client": "^0.1.19",
"@budibase/colorpicker": "^1.0.1", "@budibase/colorpicker": "^1.0.1",
"@sentry/browser": "5.19.1", "@sentry/browser": "5.19.1",

View File

@ -1,17 +1,25 @@
<script> <script>
import { Button, TextArea, Label } from "@budibase/bbui" import { Button, TextArea, Label, Body } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
export let bindableProperties export let bindableProperties
console.log("Bindable Props: ", bindableProperties) console.log("Bindable Props: ", bindableProperties)
export let value = "" export let value = ""
export let close
function addToText(readableBinding) { function addToText(readableBinding) {
value = value + `{{ ${readableBinding} }}` value = value + `{{ ${readableBinding} }}`
} }
let originalValue = value
$: dispatch("update", value) $: dispatch("update", value)
function cancel() {
dispatch("update", originalValue)
close()
console.log("test")
}
</script> </script>
<div class="container"> <div class="container">
@ -25,13 +33,17 @@
</div> </div>
<div class="text"> <div class="text">
<Label size="l" color="dark">Data binding</Label> <Label size="l" color="dark">Data binding</Label>
<Body size="s" color="dark">
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>
<TextArea bind:value placeholder="" /> <TextArea bind:value placeholder="" />
<div class="controls"> <div class="controls">
<a href="#"> <a href="#">
<Label size="s" color="light">Objects</Label> <Label size="s" color="light">Learn more about binding</Label>
</a> </a>
<Button>Test</Button> <Button on:click={cancel} secondary>Cancel</Button>
<Button>Test</Button> <Button on:click={close} primary>Done</Button>
</div> </div>
</div> </div>
</div> </div>
@ -45,6 +57,12 @@
.text { .text {
padding: var(--spacing-m); padding: var(--spacing-m);
} }
.controls {
margin-top: var(--spacing-m);
display: grid;
grid-gap: var(--spacing-l);
grid-template-columns: 1fr auto auto;
}
.list { .list {
width: 150px; width: 150px;
border-right: 1.5px solid blue; border-right: 1.5px solid blue;
@ -53,6 +71,9 @@
width: 600px; width: 600px;
display: grid; display: grid;
} }
.text :global(p) {
margin: 0;
}
ul { ul {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;

View File

@ -121,6 +121,7 @@
align="right"> align="right">
<BindingDropdown <BindingDropdown
{...handlevalueKey(value)} {...handlevalueKey(value)}
close={dropdown.hide}
on:update={e => (temporaryBindableValue = e.detail)} on:update={e => (temporaryBindableValue = e.detail)}
{bindableProperties} /> {bindableProperties} />
</DropdownMenu> </DropdownMenu>

View File

@ -688,10 +688,10 @@
lodash "^4.17.13" lodash "^4.17.13"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@budibase/bbui@^1.28.2": "@budibase/bbui@^1.29.0":
version "1.28.2" version "1.29.0"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.28.2.tgz#b86d10c2c4489e352a391ee55cc6fc5b24492e4c" resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.0.tgz#f10815d6c8cb6125e2688960cd71640e2ce53c9b"
integrity sha512-8Mrh1ZrkGEl7syqMbsalI3pAy/V6Xh4tx14h3SXKx/XKXlzqxS4vq/+3DaphLbLn+0WZmHrxI5MkdfkSIh7nvw== integrity sha512-pRnYxkymKE4DNWPJoutygIiUQFZ+sWSmL1aTVa//O6+GemieEwukT9JbMQ7+RdTHnWANJd0OxPGwAYvNEETOaw==
dependencies: dependencies:
sirv-cli "^0.4.6" sirv-cli "^0.4.6"