Update drawer styles, drawer bindable inputs and settings bindable inputs
This commit is contained in:
Andrew Kingston
parent
0cf5f4dc3d
commit
deb0b2998f
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,10 @@
|
|||
|
||||
const dispatch = createEventDispatcher()
|
||||
let bindingDrawer
|
||||
$: tempValue = Array.isArray(value) ? value : []
|
||||
$: readableValue = runtimeToReadableBinding(bindings, value)
|
||||
$: tempValue = readableValue
|
||||
|
||||
const handleClose = () => {
|
||||
const saveBinding = () => {
|
||||
onChange(tempValue)
|
||||
bindingDrawer.hide()
|
||||
}
|
||||
|
|
@ -48,13 +48,12 @@
|
|||
<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" on:click={saveBinding}>Save</Button>
|
||||
<svelte:component
|
||||
this={panel}
|
||||
slot="body"
|
||||
value={readableValue}
|
||||
close={handleClose}
|
||||
on:update={event => (tempValue = event.detail)}
|
||||
on:change={event => (tempValue = event.detail)}
|
||||
bindableProperties={bindings}
|
||||
/>
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -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 New Issue