|
|
|
@ -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; |
|
|
|
.main :global(textarea) { |
|
|
|
min-height: 150px !important; |
|
|
|
} |
|
|
|
.section { |
|
|
|
display: grid; |
|
|
|
grid-gap: var(--spacing-s); |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
.text { |
|
|
|
padding: var(--spacing-l); |
|
|
|
font-family: var(--font-sans); |
|
|
|
section { |
|
|
|
padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl); |
|
|
|
} |
|
|
|
.text :global(textarea) { |
|
|
|
min-height: 150px !important; |
|
|
|
section:not(:first-child) { |
|
|
|
border-top: var(--border-light); |
|
|
|
} |
|
|
|
.text :global(p) { |
|
|
|
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; |
|
|
|
cursor: pointer; |
|
|
|
transition: background-color 130ms ease-in-out, color 130ms ease-in-out, |
|
|
|
border-color 130ms ease-in-out; |
|
|
|
} |
|
|
|
.binding:hover { |
|
|
|
background-color: var(--grey-2); |
|
|
|
cursor: pointer; |
|
|
|
li:not(:last-of-type) { |
|
|
|
margin-bottom: var(--spacing-s); |
|
|
|
} |
|
|
|
.binding__label { |
|
|
|
font-weight: 600; |
|
|
|
text-transform: capitalize; |
|
|
|
li :global(*) { |
|
|
|
transition: color 130ms ease-in-out; |
|
|
|
} |
|
|
|
.binding__description { |
|
|
|
color: var(--grey-8); |
|
|
|
margin-top: 2px; |
|
|
|
white-space: normal; |
|
|
|
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; |
|
|
|
} |
|
|
|
li:hover :global(*) { |
|
|
|
color: var(--spectrum-global-color-gray-900) !important; |
|
|
|
} |
|
|
|
|
|
|
|
pre { |
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
.binding__type { |
|
|
|
font-family: monospace; |
|
|
|
background-color: var(--grey-2); |
|
|
|
border-radius: var(--border-radius-m); |
|
|
|
padding: 2px; |
|
|
|
margin-left: 2px; |
|
|
|
font-weight: 600; |
|
|
|
.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(--spectrum-global-color-gray-700); |
|
|
|
margin: 0.5rem 0 0 0; |
|
|
|
white-space: normal; |
|
|
|
} |
|
|
|
.binding__type { |
|
|
|
font-family: monospace; |
|
|
|
background-color: var(--spectrum-global-color-gray-200); |
|
|
|
border-radius: var(--border-radius-s); |
|
|
|
padding: 2px 4px; |
|
|
|
margin-left: 2px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
Andrew Kingston
5 years ago
GitHub