Merge pull request #1211 from Budibase/feat/automation-drawer-conversion
Convert the Automate popover to the Drawer component
This commit is contained in:
Kevin Åberg Kultalahti
GitHub
commit
2038e991c5
|
|
@ -0,0 +1,190 @@
|
||||||
|
<script>
|
||||||
|
import groupBy from "lodash/fp/groupBy"
|
||||||
|
import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
|
||||||
|
import { createEventDispatcher } from "svelte"
|
||||||
|
import { isValid } from "@budibase/string-templates"
|
||||||
|
import { handlebarsCompletions } from "constants/completions"
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
export let value = ""
|
||||||
|
export let bindingDrawer
|
||||||
|
export let bindableProperties = []
|
||||||
|
|
||||||
|
let originalValue = value
|
||||||
|
let helpers = handlebarsCompletions()
|
||||||
|
let getCaretPosition
|
||||||
|
let search = ""
|
||||||
|
let validity = true
|
||||||
|
|
||||||
|
$: categories = Object.entries(groupBy("category", bindableProperties))
|
||||||
|
$: value && checkValid()
|
||||||
|
$: dispatch("update", value)
|
||||||
|
$: searchRgx = new RegExp(search, "ig")
|
||||||
|
|
||||||
|
function checkValid() {
|
||||||
|
validity = isValid(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function addToText(binding) {
|
||||||
|
const position = getCaretPosition()
|
||||||
|
const toAdd = `{{ ${binding.path} }}`
|
||||||
|
if (position.start) {
|
||||||
|
value =
|
||||||
|
value.substring(0, position.start) +
|
||||||
|
toAdd +
|
||||||
|
value.substring(position.end, value.length)
|
||||||
|
} else {
|
||||||
|
value += toAdd
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export function cancel() {
|
||||||
|
dispatch("update", originalValue)
|
||||||
|
bindingDrawer.close()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="list">
|
||||||
|
<Heading small>Available bindings</Heading>
|
||||||
|
<Spacer medium />
|
||||||
|
<Input extraThin placeholder="Search" bind:value={search} />
|
||||||
|
<Spacer medium />
|
||||||
|
{#each categories as [categoryName, bindings]}
|
||||||
|
<Heading extraSmall>{categoryName}</Heading>
|
||||||
|
<Spacer extraSmall />
|
||||||
|
{#each bindableProperties.filter(binding =>
|
||||||
|
binding.label.match(searchRgx)
|
||||||
|
) as binding}
|
||||||
|
<div class="binding" on:click={() => addToText(binding)}>
|
||||||
|
<span class="binding__label">{binding.label}</span>
|
||||||
|
<span class="binding__type">{binding.type}</span>
|
||||||
|
<br />
|
||||||
|
<div class="binding__description">
|
||||||
|
{binding.description || ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{/each}
|
||||||
|
<Heading extraSmall>Helpers</Heading>
|
||||||
|
<Spacer extraSmall />
|
||||||
|
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||||
|
<div class="binding" on:click={() => addToText(helper)}>
|
||||||
|
<span class="binding__label">{helper.label}</span>
|
||||||
|
<br />
|
||||||
|
<div class="binding__description">
|
||||||
|
{@html helper.description || ''}
|
||||||
|
</div>
|
||||||
|
<pre>{helper.example || ''}</pre>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<TextArea
|
||||||
|
bind:getCaretPosition
|
||||||
|
thin
|
||||||
|
bind:value
|
||||||
|
placeholder="Add text, or click the objects on the left to add them to the textbox." />
|
||||||
|
{#if !validity}
|
||||||
|
<p class="syntax-error">
|
||||||
|
Current Handlebars syntax is invalid, please check the guide
|
||||||
|
<a href="https://handlebarsjs.com/guide/">here</a>
|
||||||
|
for more details.
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
height: 40vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 280px 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
border-right: var(--border-light);
|
||||||
|
padding: var(--spacing-l);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
border-right: var(--border-light);
|
||||||
|
padding: var(--spacing-l);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
padding: var(--spacing-l);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
}
|
||||||
|
.text :global(textarea) {
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
.text :global(p) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.binding {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: var(--spacing-s);
|
||||||
|
border-radius: var(--border-radius-m);
|
||||||
|
}
|
||||||
|
.binding:hover {
|
||||||
|
background-color: var(--grey-2);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.binding__label {
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
.binding__description {
|
||||||
|
color: var(--grey-8);
|
||||||
|
margin-top: 2px;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.binding__type {
|
||||||
|
font-family: monospace;
|
||||||
|
background-color: var(--grey-2);
|
||||||
|
border-radius: var(--border-radius-m);
|
||||||
|
padding: 2px;
|
||||||
|
margin-left: 2px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
padding-left: var(--spacing-l);
|
||||||
|
}
|
||||||
|
.editor :global(textarea) {
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
grid-gap: var(--spacing-l);
|
||||||
|
align-items: center;
|
||||||
|
margin-top: var(--spacing-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
.syntax-error {
|
||||||
|
color: var(--red);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.syntax-error a {
|
||||||
|
color: var(--red);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -5,7 +5,8 @@
|
||||||
import { Button, Input, Select, Label } from "@budibase/bbui"
|
import { Button, Input, Select, Label } from "@budibase/bbui"
|
||||||
import { automationStore } from "builderStore"
|
import { automationStore } from "builderStore"
|
||||||
import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
|
import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
|
||||||
import BindableInput from "../../common/BindableInput.svelte"
|
import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
|
||||||
|
import AutomationBindingPanel from './AutomationBindingPanel.svelte'
|
||||||
|
|
||||||
export let block
|
export let block
|
||||||
export let webhookModal
|
export let webhookModal
|
||||||
|
|
@ -64,10 +65,12 @@
|
||||||
{:else if value.customType === 'password'}
|
{:else if value.customType === 'password'}
|
||||||
<Input type="password" extraThin bind:value={block.inputs[key]} />
|
<Input type="password" extraThin bind:value={block.inputs[key]} />
|
||||||
{:else if value.customType === 'email'}
|
{:else if value.customType === 'email'}
|
||||||
<BindableInput
|
<DrawerBindableInput
|
||||||
|
panel={AutomationBindingPanel}
|
||||||
type={'email'}
|
type={'email'}
|
||||||
extraThin
|
extraThin
|
||||||
bind:value={block.inputs[key]}
|
value={block.inputs[key]}
|
||||||
|
on:change={e => block.inputs[key] = e.detail}
|
||||||
{bindings} />
|
{bindings} />
|
||||||
{:else if value.customType === 'table'}
|
{:else if value.customType === 'table'}
|
||||||
<TableSelector bind:value={block.inputs[key]} />
|
<TableSelector bind:value={block.inputs[key]} />
|
||||||
|
|
@ -78,10 +81,12 @@
|
||||||
{:else if value.customType === 'triggerSchema'}
|
{:else if value.customType === 'triggerSchema'}
|
||||||
<SchemaSetup bind:value={block.inputs[key]} />
|
<SchemaSetup bind:value={block.inputs[key]} />
|
||||||
{:else if value.type === 'string' || value.type === 'number'}
|
{:else if value.type === 'string' || value.type === 'number'}
|
||||||
<BindableInput
|
<DrawerBindableInput
|
||||||
|
panel={AutomationBindingPanel}
|
||||||
type={value.customType}
|
type={value.customType}
|
||||||
extraThin
|
extraThin
|
||||||
bind:value={block.inputs[key]}
|
value={block.inputs[key]}
|
||||||
|
on:change={e => block.inputs[key] = e.detail}
|
||||||
{bindings} />
|
{bindings} />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -102,11 +107,4 @@
|
||||||
font-size: var(--font-size-xs);
|
font-size: var(--font-size-xs);
|
||||||
color: var(--grey-7);
|
color: var(--grey-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
|
||||||
min-height: 150px;
|
|
||||||
font-family: inherit;
|
|
||||||
padding: 12px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,219 +0,0 @@
|
||||||
<script>
|
|
||||||
import groupBy from "lodash/fp/groupBy"
|
|
||||||
import {
|
|
||||||
TextArea,
|
|
||||||
Input,
|
|
||||||
Heading,
|
|
||||||
Body,
|
|
||||||
Spacer,
|
|
||||||
Button,
|
|
||||||
Popover,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import { createEventDispatcher } from "svelte"
|
|
||||||
import { isValid } from "@budibase/string-templates"
|
|
||||||
import { handlebarsCompletions } from "constants/completions"
|
|
||||||
import { readableToRuntimeBinding } from "builderStore/dataBinding"
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
|
||||||
|
|
||||||
export let value = ""
|
|
||||||
export let bindings = []
|
|
||||||
export let anchor
|
|
||||||
export let align
|
|
||||||
export let popover = null
|
|
||||||
|
|
||||||
let helpers = handlebarsCompletions()
|
|
||||||
let getCaretPosition
|
|
||||||
let validity = true
|
|
||||||
let search = ""
|
|
||||||
|
|
||||||
$: categories = Object.entries(groupBy("category", bindings))
|
|
||||||
$: value && checkValid()
|
|
||||||
$: searchRgx = new RegExp(search, "ig")
|
|
||||||
|
|
||||||
function onClickBinding(binding) {
|
|
||||||
const position = getCaretPosition()
|
|
||||||
const toAdd = `{{ ${binding.path} }}`
|
|
||||||
if (position.start) {
|
|
||||||
value =
|
|
||||||
value.substring(0, position.start) +
|
|
||||||
toAdd +
|
|
||||||
value.substring(position.end, value.length)
|
|
||||||
} else {
|
|
||||||
value += toAdd
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkValid() {
|
|
||||||
const runtimeValue = readableToRuntimeBinding(bindings, value)
|
|
||||||
validity = isValid(runtimeValue)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Popover {anchor} {align} bind:this={popover}>
|
|
||||||
<div class="container">
|
|
||||||
<div class="bindings">
|
|
||||||
<Heading small>Available bindings</Heading>
|
|
||||||
<Spacer medium />
|
|
||||||
<Input extraThin placeholder="Search" bind:value={search} />
|
|
||||||
<Spacer medium />
|
|
||||||
<div class="bindings__wrapper">
|
|
||||||
<div class="bindings__list">
|
|
||||||
{#each categories as [categoryName, bindings]}
|
|
||||||
<Heading extraSmall>{categoryName}</Heading>
|
|
||||||
<Spacer extraSmall />
|
|
||||||
{#each bindings.filter(binding =>
|
|
||||||
binding.label.match(searchRgx)
|
|
||||||
) as binding}
|
|
||||||
<div class="binding" on:click={() => onClickBinding(binding)}>
|
|
||||||
<span class="binding__label">{binding.label}</span>
|
|
||||||
<span class="binding__type">{binding.type}</span>
|
|
||||||
<br />
|
|
||||||
<div class="binding__description">
|
|
||||||
{binding.description || ''}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{/each}
|
|
||||||
<Heading extraSmall>Helpers</Heading>
|
|
||||||
<Spacer extraSmall />
|
|
||||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
|
||||||
<div class="binding" on:click={() => onClickBinding(helper)}>
|
|
||||||
<span class="binding__label">{helper.label}</span>
|
|
||||||
<br />
|
|
||||||
<div class="binding__description">
|
|
||||||
{@html helper.description || ''}
|
|
||||||
</div>
|
|
||||||
<pre>{helper.example || ''}</pre>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="editor">
|
|
||||||
<Heading small>Data binding</Heading>
|
|
||||||
<Body small lh black>
|
|
||||||
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
|
|
||||||
thin
|
|
||||||
bind:getCaretPosition
|
|
||||||
bind:value
|
|
||||||
placeholder="Add options from the left, type text, or do both" />
|
|
||||||
{#if !validity}
|
|
||||||
<p class="syntax-error">
|
|
||||||
Current Handlebars syntax is invalid, please check the guide
|
|
||||||
<a href="https://handlebarsjs.com/guide/">here</a>
|
|
||||||
for more details.
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
<div class="controls">
|
|
||||||
<a href="https://docs.budibase.com/design/binding">
|
|
||||||
<Body small>Learn more about binding</Body>
|
|
||||||
</a>
|
|
||||||
<Button on:click={popover.hide} disabled={!validity} primary>
|
|
||||||
Done
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Popover>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 280px 1fr;
|
|
||||||
width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bindings {
|
|
||||||
border-right: 1px solid var(--grey-4);
|
|
||||||
flex: 0 0 240px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
padding-right: var(--spacing-l);
|
|
||||||
}
|
|
||||||
.bindings :global(label) {
|
|
||||||
margin: var(--spacing-m) 0;
|
|
||||||
}
|
|
||||||
.bindings :global(label:first-child) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.bindings__wrapper {
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
position: relative;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bindings__wrapper::-webkit-scrollbar {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bindings__list {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.binding {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: var(--spacing-s);
|
|
||||||
border-radius: var(--border-radius-m);
|
|
||||||
}
|
|
||||||
.binding:hover {
|
|
||||||
background-color: var(--grey-2);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.binding__label {
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
.binding__description {
|
|
||||||
color: var(--grey-8);
|
|
||||||
margin-top: 2px;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.binding__type {
|
|
||||||
font-family: monospace;
|
|
||||||
background-color: var(--grey-2);
|
|
||||||
border-radius: var(--border-radius-m);
|
|
||||||
padding: 2px;
|
|
||||||
margin-left: 2px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor {
|
|
||||||
padding-left: var(--spacing-l);
|
|
||||||
}
|
|
||||||
.editor :global(textarea) {
|
|
||||||
min-height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
grid-gap: var(--spacing-l);
|
|
||||||
align-items: center;
|
|
||||||
margin-top: var(--spacing-m);
|
|
||||||
}
|
|
||||||
|
|
||||||
.syntax-error {
|
|
||||||
color: var(--red);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.syntax-error a {
|
|
||||||
color: var(--red);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { backendUiStore } from "builderStore"
|
import { backendUiStore } from "builderStore"
|
||||||
import { Select } from "@budibase/bbui"
|
import { Select } from "@budibase/bbui"
|
||||||
import BindableInput from "../../common/BindableInput.svelte"
|
import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
|
||||||
|
import AutomationBindingPanel from './AutomationBindingPanel.svelte'
|
||||||
|
|
||||||
export let value
|
export let value
|
||||||
export let bindings
|
export let bindings
|
||||||
|
|
@ -39,9 +40,11 @@
|
||||||
{/each}
|
{/each}
|
||||||
</Select>
|
</Select>
|
||||||
{:else if schema.type === 'string' || schema.type === 'number'}
|
{:else if schema.type === 'string' || schema.type === 'number'}
|
||||||
<BindableInput
|
<DrawerBindableInput
|
||||||
|
panel={AutomationBindingPanel}
|
||||||
extraThin
|
extraThin
|
||||||
bind:value={value[field]}
|
value={value[field]}
|
||||||
|
on:change={e => value[field] = e.detail}
|
||||||
label={field}
|
label={field}
|
||||||
type="string"
|
type="string"
|
||||||
{bindings} />
|
{bindings} />
|
||||||
|
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<script>
|
|
||||||
import { createEventDispatcher } from "svelte"
|
|
||||||
import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
|
|
||||||
import { Input, Icon } from "@budibase/bbui"
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
|
||||||
|
|
||||||
export let bindings = []
|
|
||||||
export let value
|
|
||||||
|
|
||||||
let anchor
|
|
||||||
let popover = undefined
|
|
||||||
let enrichedValue
|
|
||||||
let inputProps
|
|
||||||
|
|
||||||
// Extract all other props to pass to input component
|
|
||||||
$: {
|
|
||||||
let { bindings, ...otherProps } = $$props
|
|
||||||
inputProps = otherProps
|
|
||||||
}
|
|
||||||
$: value && dispatch("change", value)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="container" bind:this={anchor}>
|
|
||||||
<Input {...inputProps} bind:value />
|
|
||||||
<div class="icon" on:click={popover.show}>
|
|
||||||
<Icon name="lightning" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<GenericBindingPopover
|
|
||||||
{anchor}
|
|
||||||
{bindings}
|
|
||||||
bind:value
|
|
||||||
bind:popover
|
|
||||||
align="right" />
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
right: 2px;
|
|
||||||
top: 5px;
|
|
||||||
bottom: 2px;
|
|
||||||
position: absolute;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: var(--spacing-xs);
|
|
||||||
border-left: 1px solid var(--grey-4);
|
|
||||||
background-color: var(--grey-2);
|
|
||||||
border-top-right-radius: var(--border-radius-m);
|
|
||||||
border-bottom-right-radius: var(--border-radius-m);
|
|
||||||
color: var(--grey-7);
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.icon:hover {
|
|
||||||
color: var(--ink);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
export let panel = BindingPanel
|
||||||
export let value = ""
|
export let value = ""
|
||||||
export let bindings = []
|
export let bindings = []
|
||||||
export let thin = true
|
export let thin = true
|
||||||
|
|
@ -49,7 +50,8 @@
|
||||||
<Button thin blue on:click={handleClose}>Save</Button>
|
<Button thin blue on:click={handleClose}>Save</Button>
|
||||||
</heading>
|
</heading>
|
||||||
<div slot="body">
|
<div slot="body">
|
||||||
<BindingPanel
|
<svelte:component
|
||||||
|
this={panel}
|
||||||
value={readableValue}
|
value={readableValue}
|
||||||
close={handleClose}
|
close={handleClose}
|
||||||
on:update={event => (tempValue = event.detail)}
|
on:update={event => (tempValue = event.detail)}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue