Merge pull request #2034 from Budibase/drawer-improvements
Drawer improvements
This commit is contained in:
Andrew Kingston
GitHub
commit
f685d1cd09
|
|
@ -3,4 +3,5 @@ public
|
|||
dist
|
||||
packages/server/builder
|
||||
packages/server/coverage
|
||||
packages/server/client
|
||||
packages/builder/.routify
|
||||
|
|
@ -5,4 +5,5 @@ dist
|
|||
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
|
||||
packages/server/builder
|
||||
packages/server/coverage
|
||||
packages/server/client
|
||||
packages/builder/.routify
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import { slide } from "svelte/transition"
|
||||
import Portal from "svelte-portal"
|
||||
import ActionButton from "../ActionButton/ActionButton.svelte"
|
||||
import Button from "../Button/Button.svelte"
|
||||
import Body from "../Typography/Body.svelte"
|
||||
import Heading from "../Typography/Heading.svelte"
|
||||
|
||||
|
|
@ -38,13 +38,13 @@
|
|||
<header>
|
||||
<div class="text">
|
||||
<Heading size="XS">{title}</Heading>
|
||||
<Body size="XXS">
|
||||
<Body size="S">
|
||||
<slot name="description" />
|
||||
</Body>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<Button secondary quiet on:click={hide}>Cancel</Button>
|
||||
<slot name="buttons" />
|
||||
<ActionButton quiet icon="Close" on:click={hide} />
|
||||
</div>
|
||||
</header>
|
||||
<slot name="body" />
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
left: 260px;
|
||||
width: calc(100% - 520px);
|
||||
background: var(--background);
|
||||
border: var(--border-light);
|
||||
border-top: var(--border-light);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
|
@ -68,17 +68,15 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: var(--border-light);
|
||||
padding: var(--spectrum-alias-item-padding-s) 0;
|
||||
}
|
||||
header :global(*) + :global(*) {
|
||||
margin: 0 var(--spectrum-alias-grid-baseline);
|
||||
padding: var(--spacing-l) var(--spacing-xl);
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-left: var(--spectrum-alias-item-padding-s);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
.container {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 290px 1fr;
|
||||
grid-template-columns: 320px 1fr;
|
||||
}
|
||||
.no-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -27,12 +27,15 @@
|
|||
.sidebar {
|
||||
border-right: var(--border-light);
|
||||
overflow: auto;
|
||||
padding: var(--spacing-xl);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.main {
|
||||
font-family: var(--font-sans);
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
.main :global(textarea) {
|
||||
min-height: 200px;
|
||||
|
|
|
|||
|
|
@ -69,8 +69,9 @@
|
|||
<Input type="password" bind:value={block.inputs[key]} />
|
||||
{:else if value.customType === "email"}
|
||||
<DrawerBindableInput
|
||||
title={value.title}
|
||||
panel={AutomationBindingPanel}
|
||||
type={"email"}
|
||||
type="email"
|
||||
value={block.inputs[key]}
|
||||
on:change={e => (block.inputs[key] = e.detail)}
|
||||
{bindings}
|
||||
|
|
@ -102,6 +103,7 @@
|
|||
</CodeEditorModal>
|
||||
{:else if value.type === "string" || value.type === "number"}
|
||||
<DrawerBindableInput
|
||||
title={value.title}
|
||||
panel={AutomationBindingPanel}
|
||||
type={value.customType}
|
||||
value={block.inputs[key]}
|
||||
|
|
@ -127,6 +129,7 @@
|
|||
|
||||
.block-field {
|
||||
display: grid;
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.block-label {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,9 @@
|
|||
<script>
|
||||
import groupBy from "lodash/fp/groupBy"
|
||||
import {
|
||||
Search,
|
||||
TextArea,
|
||||
Heading,
|
||||
Label,
|
||||
DrawerContent,
|
||||
Layout,
|
||||
} from "@budibase/bbui"
|
||||
import { Search, TextArea, DrawerContent } from "@budibase/bbui"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { isValid } from "@budibase/string-templates"
|
||||
import {
|
||||
getBindableProperties,
|
||||
readableToRuntimeBinding,
|
||||
} from "builderStore/dataBinding"
|
||||
import { currentAsset, store } from "builderStore"
|
||||
import { readableToRuntimeBinding } from "builderStore/dataBinding"
|
||||
import { handlebarsCompletions } from "constants/completions"
|
||||
import { addToText } from "./utils"
|
||||
|
||||
|
|
@ -22,44 +11,36 @@
|
|||
|
||||
export let bindableProperties
|
||||
export let value = ""
|
||||
export let bindingDrawer
|
||||
export let valid = true
|
||||
export let valid
|
||||
|
||||
let originalValue = value
|
||||
let helpers = handlebarsCompletions()
|
||||
let getCaretPosition
|
||||
let search = ""
|
||||
|
||||
$: value && checkValid()
|
||||
$: bindableProperties = getBindableProperties(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId
|
||||
)
|
||||
$: dispatch("update", value)
|
||||
$: ({ instance, context } = groupBy("type", bindableProperties))
|
||||
$: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
|
||||
$: dispatch("change", value)
|
||||
$: ({ context } = groupBy("type", bindableProperties))
|
||||
$: searchRgx = new RegExp(search, "ig")
|
||||
|
||||
function checkValid() {
|
||||
// TODO: need to convert the value to the runtime binding
|
||||
const runtimeBinding = readableToRuntimeBinding(bindableProperties, value)
|
||||
valid = isValid(runtimeBinding)
|
||||
}
|
||||
|
||||
export function cancel() {
|
||||
dispatch("update", originalValue)
|
||||
bindingDrawer.close()
|
||||
}
|
||||
$: filteredColumns = context?.filter(context => {
|
||||
return context.readableBinding.match(searchRgx)
|
||||
})
|
||||
$: filteredHelpers = helpers?.filter(helper => {
|
||||
return helper.label.match(searchRgx) || helper.description.match(searchRgx)
|
||||
})
|
||||
</script>
|
||||
|
||||
<DrawerContent>
|
||||
<svelte:fragment slot="sidebar">
|
||||
<Layout>
|
||||
<Search placeholder="Search" bind:value={search} />
|
||||
{#if context}
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="heading">Search</div>
|
||||
<Search placeholder="Search" bind:value={search} />
|
||||
</section>
|
||||
{#if filteredColumns?.length}
|
||||
<section>
|
||||
<Heading size="XS">Columns</Heading>
|
||||
<div class="heading">Columns</div>
|
||||
<ul>
|
||||
{#each context.filter( context => context.readableBinding.match(searchRgx) ) as { readableBinding }}
|
||||
{#each filteredColumns as { readableBinding }}
|
||||
<li
|
||||
on:click={() => {
|
||||
value = addToText(value, getCaretPosition(), readableBinding)
|
||||
|
|
@ -71,39 +52,29 @@
|
|||
</ul>
|
||||
</section>
|
||||
{/if}
|
||||
{#if instance}
|
||||
{#if filteredHelpers?.length}
|
||||
<section>
|
||||
<Heading size="XS">Components</Heading>
|
||||
<div class="heading">Helpers</div>
|
||||
<ul>
|
||||
{#each instance.filter( instance => instance.readableBinding.match(searchRgx) ) as { readableBinding }}
|
||||
<li on:click={() => addToText(readableBinding)}>
|
||||
{readableBinding}
|
||||
{#each filteredHelpers as helper}
|
||||
<li
|
||||
on:click={() => {
|
||||
value = addToText(value, getCaretPosition(), helper.text)
|
||||
}}
|
||||
>
|
||||
<div class="helper">
|
||||
<div class="helper__name">{helper.displayText}</div>
|
||||
<div class="helper__description">
|
||||
{@html helper.description}
|
||||
</div>
|
||||
<pre class="helper__example">{helper.example || ''}</pre>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/if}
|
||||
<section>
|
||||
<Heading size="XS">Helpers</Heading>
|
||||
<ul>
|
||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||
<li
|
||||
on:click={() => {
|
||||
value = addToText(value, getCaretPosition(), helper.text)
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Label extraSmall>{helper.displayText}</Label>
|
||||
<div class="description">
|
||||
{@html helper.description}
|
||||
</div>
|
||||
<pre>{helper.example || ''}</pre>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
</Layout>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<div class="main">
|
||||
<TextArea
|
||||
|
|
@ -122,50 +93,78 @@
|
|||
</DrawerContent>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
padding: var(--spacing-m);
|
||||
}
|
||||
|
||||
.main :global(textarea) {
|
||||
min-height: 150px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: calc(-1 * var(--spacing-xl));
|
||||
}
|
||||
.heading {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
padding: var(--spacing-xl) 0 var(--spacing-m) 0;
|
||||
}
|
||||
|
||||
section {
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-s);
|
||||
padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
|
||||
}
|
||||
section:not(:first-child) {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--grey-7);
|
||||
padding: var(--spacing-m);
|
||||
margin: auto 0px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-top: var(--border-light);
|
||||
border-width: 1px 0 1px 0;
|
||||
border-radius: 4px;
|
||||
border: var(--border-light);
|
||||
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
||||
border-color 130ms ease-in-out;
|
||||
}
|
||||
|
||||
pre,
|
||||
.description {
|
||||
white-space: normal;
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
li :global(*) {
|
||||
transition: color 130ms ease-in-out;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--grey-2);
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
border-color: var(--spectrum-global-color-gray-500);
|
||||
cursor: pointer;
|
||||
}
|
||||
li:hover :global(*) {
|
||||
color: var(--spectrum-global-color-gray-900) !important;
|
||||
}
|
||||
|
||||
li:active {
|
||||
color: var(--blue);
|
||||
.helper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
.helper__name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.helper__description,
|
||||
.helper__description :global(*) {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
}
|
||||
.helper__example {
|
||||
white-space: normal;
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.helper__description :global(p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.syntax-error {
|
||||
|
|
@ -173,21 +172,8 @@
|
|||
color: var(--red);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.syntax-error a {
|
||||
color: var(--red);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.description :global(p) {
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
.description :global(p:hover) {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.description :global(p a) {
|
||||
color: var(--grey-7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,11 @@
|
|||
|
||||
const dispatch = createEventDispatcher()
|
||||
let bindingDrawer
|
||||
$: tempValue = Array.isArray(value) ? value : []
|
||||
let valid = true
|
||||
$: readableValue = runtimeToReadableBinding(bindings, value)
|
||||
$: tempValue = readableValue
|
||||
|
||||
const handleClose = () => {
|
||||
const saveBinding = () => {
|
||||
onChange(tempValue)
|
||||
bindingDrawer.hide()
|
||||
}
|
||||
|
|
@ -48,13 +49,15 @@
|
|||
<svelte:fragment slot="description">
|
||||
Add the objects on the left to enrich your text.
|
||||
</svelte:fragment>
|
||||
<Button cta slot="buttons" on:click={handleClose}>Save</Button>
|
||||
<Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
|
||||
Save
|
||||
</Button>
|
||||
<svelte:component
|
||||
this={panel}
|
||||
slot="body"
|
||||
bind:valid
|
||||
value={readableValue}
|
||||
close={handleClose}
|
||||
on:update={event => (tempValue = event.detail)}
|
||||
on:change={event => (tempValue = event.detail)}
|
||||
bindableProperties={bindings}
|
||||
/>
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
} from "builderStore/dataBinding"
|
||||
import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let panel = ServerBindingPanel
|
||||
export let value = ""
|
||||
|
|
@ -16,12 +15,11 @@
|
|||
export let placeholder
|
||||
export let label
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
let bindingModal
|
||||
let validity = true
|
||||
|
||||
let valid = true
|
||||
$: readableValue = runtimeToReadableBinding(bindings, value)
|
||||
$: tempValue = readableValue
|
||||
$: invalid = !validity
|
||||
|
||||
const saveBinding = () => {
|
||||
onChange(tempValue)
|
||||
|
|
@ -38,7 +36,7 @@
|
|||
{label}
|
||||
{thin}
|
||||
value={readableValue}
|
||||
on:change={event => onChange(event.target.value)}
|
||||
on:change={event => onChange(event.detail)}
|
||||
{placeholder}
|
||||
/>
|
||||
<div class="icon" on:click={bindingModal.show}>
|
||||
|
|
@ -46,23 +44,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<Modal bind:this={bindingModal}>
|
||||
<ModalContent
|
||||
{title}
|
||||
onConfirm={saveBinding}
|
||||
bind:disabled={invalid}
|
||||
size="XL"
|
||||
>
|
||||
<ModalContent {title} onConfirm={saveBinding} disabled={!valid} size="XL">
|
||||
<Body extraSmall grey>
|
||||
Add the objects on the left to enrich your text.
|
||||
</Body>
|
||||
<svelte:component
|
||||
this={panel}
|
||||
serverSide
|
||||
value={readableValue}
|
||||
bind:validity
|
||||
on:update={event => (tempValue = event.detail)}
|
||||
bindableProperties={bindings}
|
||||
/>
|
||||
<div class="panel-wrapper">
|
||||
<svelte:component
|
||||
this={panel}
|
||||
serverSide
|
||||
value={readableValue}
|
||||
bind:valid
|
||||
on:change={e => (tempValue = e.detail)}
|
||||
bindableProperties={bindings}
|
||||
/>
|
||||
</div>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
|
|
@ -100,4 +95,9 @@
|
|||
background-color: var(--spectrum-global-color-gray-50);
|
||||
border-color: var(--spectrum-alias-border-color-hover);
|
||||
}
|
||||
|
||||
.panel-wrapper {
|
||||
border: var(--border-light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
<script>
|
||||
import groupBy from "lodash/fp/groupBy"
|
||||
import {
|
||||
Input,
|
||||
TextArea,
|
||||
Heading,
|
||||
Layout,
|
||||
DrawerContent,
|
||||
} from "@budibase/bbui"
|
||||
import { Search, TextArea, DrawerContent } from "@budibase/bbui"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { isValid } from "@budibase/string-templates"
|
||||
import { handlebarsCompletions } from "constants/completions"
|
||||
|
|
@ -16,83 +10,91 @@
|
|||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let bindableProperties = []
|
||||
export let validity = true
|
||||
export let valid = true
|
||||
export let value = ""
|
||||
|
||||
let hasReadable = bindableProperties[0].readableBinding != null
|
||||
let helpers = handlebarsCompletions()
|
||||
let getCaretPosition
|
||||
let search = ""
|
||||
|
||||
$: categories = Object.entries(groupBy("category", bindableProperties))
|
||||
$: value && checkValid()
|
||||
$: dispatch("update", value)
|
||||
$: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
|
||||
$: dispatch("change", value)
|
||||
$: searchRgx = new RegExp(search, "ig")
|
||||
|
||||
function checkValid() {
|
||||
if (hasReadable) {
|
||||
const runtime = readableToRuntimeBinding(bindableProperties, value)
|
||||
validity = isValid(runtime)
|
||||
} else {
|
||||
validity = isValid(value)
|
||||
}
|
||||
}
|
||||
$: filteredCategories = categories.map(([categoryName, bindings]) => {
|
||||
const filteredBindings = bindings.filter(binding => {
|
||||
return binding.label.match(searchRgx)
|
||||
})
|
||||
return [categoryName, filteredBindings]
|
||||
})
|
||||
$: filteredHelpers = helpers?.filter(helper => {
|
||||
return helper.label.match(searchRgx) || helper.description.match(searchRgx)
|
||||
})
|
||||
</script>
|
||||
|
||||
<DrawerContent>
|
||||
<div slot="sidebar" class="list">
|
||||
<Layout>
|
||||
<div class="section">
|
||||
<Heading size="S">Available bindings</Heading>
|
||||
<Input extraThin placeholder="Search" bind:value={search} />
|
||||
</div>
|
||||
<div class="section">
|
||||
{#each categories as [categoryName, bindings]}
|
||||
<Heading size="XS">{categoryName}</Heading>
|
||||
{#each bindings.filter( binding => binding.label.match(searchRgx) ) as binding}
|
||||
<div
|
||||
class="binding"
|
||||
on:click={() => {
|
||||
value = addToText(value, getCaretPosition(), 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}
|
||||
</div>
|
||||
<div class="section">
|
||||
<Heading size="XS">Helpers</Heading>
|
||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||
<div
|
||||
class="binding"
|
||||
on:click={() => {
|
||||
value = addToText(value, getCaretPosition(), helper.text)
|
||||
}}
|
||||
>
|
||||
<span class="binding__label">{helper.label}</span>
|
||||
<br />
|
||||
<div class="binding__description">
|
||||
{@html helper.description || ""}
|
||||
</div>
|
||||
<pre>{helper.example || ""}</pre>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
<div class="text">
|
||||
<svelte:fragment slot="sidebar">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="heading">Search</div>
|
||||
<Search placeholder="Search" bind:value={search} />
|
||||
</section>
|
||||
{#each filteredCategories as [categoryName, bindings]}
|
||||
{#if bindings.length}
|
||||
<section>
|
||||
<div class="heading">{categoryName}</div>
|
||||
<ul>
|
||||
{#each bindings as binding}
|
||||
<li
|
||||
on:click={() => {
|
||||
value = addToText(value, getCaretPosition(), binding)
|
||||
}}
|
||||
>
|
||||
<span class="binding__label">{binding.label}</span>
|
||||
<span class="binding__type">{binding.type}</span>
|
||||
{#if binding.description}
|
||||
<br />
|
||||
<div class="binding__description">
|
||||
{binding.description || ""}
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if filteredHelpers?.length}
|
||||
<section>
|
||||
<div class="heading">Helpers</div>
|
||||
<ul>
|
||||
{#each filteredHelpers as helper}
|
||||
<li
|
||||
on:click={() => {
|
||||
value = addToText(value, getCaretPosition(), helper.text)
|
||||
}}
|
||||
>
|
||||
<div class="helper">
|
||||
<div class="helper__name">{helper.displayText}</div>
|
||||
<div class="helper__description">
|
||||
{@html helper.description}
|
||||
</div>
|
||||
<pre class="helper__example">{helper.example || ''}</pre>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<div class="main">
|
||||
<TextArea
|
||||
bind:getCaretPosition
|
||||
bind:value
|
||||
placeholder="Add text, or click the objects on the left to add them to the textbox."
|
||||
/>
|
||||
{#if !validity}
|
||||
{#if !valid}
|
||||
<p class="syntax-error">
|
||||
Current Handlebars syntax is invalid, please check the guide
|
||||
<a href="https://handlebarsjs.com/guide/">here</a>
|
||||
|
|
@ -103,70 +105,105 @@
|
|||
</DrawerContent>
|
||||
|
||||
<style>
|
||||
.list {
|
||||
grid-gap: var(--spacing-s);
|
||||
border-right: var(--border-light);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.section {
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-s);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: var(--spacing-l);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.text :global(textarea) {
|
||||
.main :global(textarea) {
|
||||
min-height: 150px !important;
|
||||
}
|
||||
.text :global(p) {
|
||||
|
||||
.container {
|
||||
margin: calc(-1 * var(--spacing-xl));
|
||||
}
|
||||
.heading {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
padding: var(--spacing-xl) 0 var(--spacing-m) 0;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
|
||||
}
|
||||
section:not(:first-child) {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.binding {
|
||||
font-size: 12px;
|
||||
li {
|
||||
font-size: var(--font-size-s);
|
||||
padding: var(--spacing-m);
|
||||
border-radius: 4px;
|
||||
border: var(--border-light);
|
||||
border-width: 1px 0 0 0;
|
||||
padding: var(--spacing-m) 0;
|
||||
margin: auto 0;
|
||||
align-items: center;
|
||||
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
||||
border-color 130ms ease-in-out;
|
||||
}
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
li :global(*) {
|
||||
transition: color 130ms ease-in-out;
|
||||
}
|
||||
li:hover {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
border-color: var(--spectrum-global-color-gray-500);
|
||||
cursor: pointer;
|
||||
}
|
||||
.binding:hover {
|
||||
background-color: var(--grey-2);
|
||||
cursor: pointer;
|
||||
li:hover :global(*) {
|
||||
color: var(--spectrum-global-color-gray-900) !important;
|
||||
}
|
||||
|
||||
.helper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
.helper__name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.helper__description,
|
||||
.helper__description :global(*) {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
}
|
||||
.helper__example {
|
||||
white-space: normal;
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.helper__description :global(p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.syntax-error {
|
||||
padding-top: var(--spacing-m);
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
}
|
||||
.syntax-error a {
|
||||
color: var(--red);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.binding__label {
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.binding__description {
|
||||
color: var(--grey-8);
|
||||
margin-top: 2px;
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
margin: 0.5rem 0 0 0;
|
||||
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;
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
border-radius: var(--border-radius-s);
|
||||
padding: 2px 4px;
|
||||
margin-left: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.syntax-error {
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.syntax-error a {
|
||||
color: var(--red);
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<Button cta slot="buttons" on:click={save}>Save</Button>
|
||||
<DrawerContent slot="body">
|
||||
<div class="content">
|
||||
<Layout gap="S">
|
||||
<Layout gap="S" noPadding>
|
||||
<Body size="S">Custom CSS overrides all other component styles.</Body>
|
||||
<TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
Save
|
||||
</Button>
|
||||
<DrawerContent slot="body">
|
||||
<Layout>
|
||||
<Layout noPadding>
|
||||
{#if value.parameters.length > 0}
|
||||
<ParameterBuilder
|
||||
bind:customParams={value.queryParams}
|
||||
|
|
|
|||
|
|
@ -73,54 +73,49 @@
|
|||
</script>
|
||||
|
||||
<DrawerContent>
|
||||
<div class="actions-list" slot="sidebar">
|
||||
<Layout>
|
||||
<ActionMenu>
|
||||
<Button slot="control" secondary>Add Action</Button>
|
||||
{#each actionTypes as actionType}
|
||||
<MenuItem on:click={addAction(actionType)}>
|
||||
{actionType.name}
|
||||
</MenuItem>
|
||||
{/each}
|
||||
</ActionMenu>
|
||||
|
||||
{#if actions && actions.length > 0}
|
||||
<div
|
||||
class="action-dnd-container"
|
||||
use:dndzone={{
|
||||
items: actions,
|
||||
flipDurationMs,
|
||||
dropTargetStyle: { outline: "none" },
|
||||
}}
|
||||
on:consider={handleDndConsider}
|
||||
on:finalize={handleDndFinalize}
|
||||
>
|
||||
{#each actions as action, index (action.id)}
|
||||
<div
|
||||
class="action-container"
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
>
|
||||
<div
|
||||
class="action-header"
|
||||
class:selected={action === selectedAction}
|
||||
on:click={selectAction(action)}
|
||||
>
|
||||
{index + 1}.
|
||||
{action[EVENT_TYPE_KEY]}
|
||||
</div>
|
||||
<div
|
||||
on:click={() => deleteAction(index)}
|
||||
style="margin-left: auto;"
|
||||
>
|
||||
<Icon size="S" hoverable name="Close" />
|
||||
</div>
|
||||
<Layout noPadding gap="S" slot="sidebar">
|
||||
{#if actions && actions.length > 0}
|
||||
<div
|
||||
class="actions"
|
||||
use:dndzone={{
|
||||
items: actions,
|
||||
flipDurationMs,
|
||||
dropTargetStyle: { outline: "none" },
|
||||
}}
|
||||
on:consider={handleDndConsider}
|
||||
on:finalize={handleDndFinalize}
|
||||
>
|
||||
{#each actions as action, index (action.id)}
|
||||
<div
|
||||
class="action-container"
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
class:selected={action === selectedAction}
|
||||
on:click={selectAction(action)}
|
||||
>
|
||||
<Icon name="DragHandle" size="XL" />
|
||||
<div class="action-header">
|
||||
{index + 1}. {action[EVENT_TYPE_KEY]}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</div>
|
||||
<Layout>
|
||||
<Icon
|
||||
name="Close"
|
||||
hoverable
|
||||
size="S"
|
||||
on:click={() => deleteAction(index)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<ActionMenu>
|
||||
<Button slot="control" secondary>Add Action</Button>
|
||||
{#each actionTypes as actionType}
|
||||
<MenuItem on:click={addAction(actionType)}>
|
||||
{actionType.name}
|
||||
</MenuItem>
|
||||
{/each}
|
||||
</ActionMenu>
|
||||
</Layout>
|
||||
<Layout noPadding>
|
||||
{#if selectedAction}
|
||||
<div class="selected-action-container">
|
||||
<svelte:component
|
||||
|
|
@ -133,32 +128,41 @@
|
|||
</DrawerContent>
|
||||
|
||||
<style>
|
||||
.action-header {
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-s);
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
|
||||
.action-header {
|
||||
margin-bottom: var(--spacing-m);
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--grey-7);
|
||||
font-weight: 600;
|
||||
}
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
|
||||
.action-header:hover,
|
||||
.action-header.selected {
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
border-bottom: 1px solid var(--grey-1);
|
||||
background-color: var(--background);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
border-radius: 4px;
|
||||
border: var(--border-light);
|
||||
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
||||
border-color 130ms ease-in-out;
|
||||
gap: var(--spacing-m);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.action-container:last-child {
|
||||
border-bottom: none;
|
||||
.action-container:hover,
|
||||
.action-container.selected {
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
border-color: var(--spectrum-global-color-gray-500);
|
||||
cursor: pointer;
|
||||
}
|
||||
.action-container:hover .action-header,
|
||||
.action-container.selected .action-header {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Layout gap="XS">
|
||||
<Layout gap="XS" noPadding>
|
||||
<Select
|
||||
label="Datasource"
|
||||
bind:value={parameters.datasourceId}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<Drawer bind:this={drawer} title="Filtering">
|
||||
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
|
||||
<DrawerContent slot="body">
|
||||
<Layout>
|
||||
<Layout noPadding>
|
||||
<Body size="S">
|
||||
{#if !numFilters}
|
||||
Add your first filter column.
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<DrawerContent>
|
||||
<div class="container">
|
||||
<Layout>
|
||||
<Layout noPadding gap="S">
|
||||
{#if links?.length}
|
||||
<div
|
||||
class="links"
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="button-container">
|
||||
<div>
|
||||
<Button secondary icon="Add" on:click={addLink}>Add Link</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -83,16 +83,16 @@
|
|||
.container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: var(--spacing-m) auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
.link {
|
||||
padding: 4px 8px;
|
||||
gap: var(--spacing-l);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -108,7 +108,4 @@
|
|||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
}
|
||||
.button-container {
|
||||
margin-left: var(--spacing-l);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
export let onChange = () => {}
|
||||
|
||||
let bindingDrawer
|
||||
let temporaryBindableValue = value
|
||||
let anchor
|
||||
let valid
|
||||
|
||||
|
|
@ -29,10 +28,11 @@
|
|||
$store.selectedComponentId
|
||||
)
|
||||
$: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
|
||||
$: tempValue = safeValue
|
||||
$: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
|
||||
|
||||
const handleClose = () => {
|
||||
handleChange(temporaryBindableValue)
|
||||
handleChange(tempValue)
|
||||
bindingDrawer.hide()
|
||||
}
|
||||
|
||||
|
|
@ -107,8 +107,7 @@
|
|||
slot="body"
|
||||
bind:valid
|
||||
value={safeValue}
|
||||
close={handleClose}
|
||||
on:update={e => (temporaryBindableValue = e.detail)}
|
||||
on:change={e => (tempValue = e.detail)}
|
||||
{bindableProperties}
|
||||
/>
|
||||
</Drawer>
|
||||
|
|
|
|||
Loading…
Reference in a new issue