forked from tsai/budibase
mike12345567
6 years ago
10 changed files with 264 additions and 224 deletions
@ -1,190 +1,186 @@ |
|||||
<script> |
<script> |
||||
import groupBy from "lodash/fp/groupBy" |
import groupBy from "lodash/fp/groupBy" |
||||
import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui" |
import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui" |
||||
import { createEventDispatcher } from "svelte" |
import { createEventDispatcher } from "svelte" |
||||
import { isValid } from "@budibase/string-templates" |
import { isValid } from "@budibase/string-templates" |
||||
import { handlebarsCompletions } from "constants/completions" |
import { handlebarsCompletions } from "constants/completions" |
||||
|
|
||||
const dispatch = createEventDispatcher() |
const dispatch = createEventDispatcher() |
||||
|
|
||||
export let value = "" |
export let value = "" |
||||
export let bindingDrawer |
export let bindingDrawer |
||||
export let bindableProperties = [] |
export let bindableProperties = [] |
||||
|
|
||||
let originalValue = value |
let originalValue = value |
||||
let helpers = handlebarsCompletions() |
let helpers = handlebarsCompletions() |
||||
let getCaretPosition |
let getCaretPosition |
||||
let search = "" |
let search = "" |
||||
let validity = true |
let validity = true |
||||
|
|
||||
$: categories = Object.entries(groupBy("category", bindableProperties)) |
$: categories = Object.entries(groupBy("category", bindableProperties)) |
||||
$: value && checkValid() |
$: value && checkValid() |
||||
$: dispatch("update", value) |
$: dispatch("update", value) |
||||
$: searchRgx = new RegExp(search, "ig") |
$: searchRgx = new RegExp(search, "ig") |
||||
|
|
||||
function checkValid() { |
function checkValid() { |
||||
validity = isValid(value) |
validity = isValid(value) |
||||
} |
} |
||||
|
|
||||
function addToText(binding) { |
function addToText(binding) { |
||||
const position = getCaretPosition() |
const position = getCaretPosition() |
||||
const toAdd = `{{ ${binding.path} }}` |
const toAdd = `{{ ${binding.path} }}` |
||||
if (position.start) { |
if (position.start) { |
||||
value = |
value = |
||||
value.substring(0, position.start) + |
value.substring(0, position.start) + |
||||
toAdd + |
toAdd + |
||||
value.substring(position.end, value.length) |
value.substring(position.end, value.length) |
||||
} else { |
} else { |
||||
value += toAdd |
value += toAdd |
||||
} |
} |
||||
} |
} |
||||
export function cancel() { |
export function cancel() { |
||||
dispatch("update", originalValue) |
dispatch("update", originalValue) |
||||
bindingDrawer.close() |
bindingDrawer.close() |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<div class="container"> |
<div class="container"> |
||||
<div class="list"> |
<div class="list"> |
||||
<Heading small>Available bindings</Heading> |
<Heading small>Available bindings</Heading> |
||||
<Spacer medium /> |
<Spacer medium /> |
||||
<Input extraThin placeholder="Search" bind:value={search} /> |
<Input extraThin placeholder="Search" bind:value={search} /> |
||||
<Spacer medium /> |
<Spacer medium /> |
||||
{#each categories as [categoryName, bindings]} |
{#each categories as [categoryName, bindings]} |
||||
<Heading extraSmall>{categoryName}</Heading> |
<Heading extraSmall>{categoryName}</Heading> |
||||
<Spacer extraSmall /> |
<Spacer extraSmall /> |
||||
{#each bindableProperties.filter(binding => |
{#each bindableProperties.filter(binding => |
||||
binding.label.match(searchRgx) |
binding.label.match(searchRgx) |
||||
) as binding} |
) as binding} |
||||
<div class="binding" on:click={() => addToText(binding)}> |
<div class="binding" on:click={() => addToText(binding)}> |
||||
<span class="binding__label">{binding.label}</span> |
<span class="binding__label">{binding.label}</span> |
||||
<span class="binding__type">{binding.type}</span> |
<span class="binding__type">{binding.type}</span> |
||||
<br /> |
<br /> |
||||
<div class="binding__description"> |
<div class="binding__description">{binding.description || ''}</div> |
||||
{binding.description || ''} |
</div> |
||||
</div> |
{/each} |
||||
</div> |
{/each} |
||||
{/each} |
<Heading extraSmall>Helpers</Heading> |
||||
{/each} |
<Spacer extraSmall /> |
||||
<Heading extraSmall>Helpers</Heading> |
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper} |
||||
<Spacer extraSmall /> |
<div class="binding" on:click={() => addToText(helper)}> |
||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper} |
<span class="binding__label">{helper.label}</span> |
||||
<div class="binding" on:click={() => addToText(helper)}> |
<br /> |
||||
<span class="binding__label">{helper.label}</span> |
<div class="binding__description"> |
||||
<br /> |
{@html helper.description || ''} |
||||
<div class="binding__description"> |
</div> |
||||
{@html helper.description || ''} |
<pre>{helper.example || ''}</pre> |
||||
</div> |
</div> |
||||
<pre>{helper.example || ''}</pre> |
{/each} |
||||
</div> |
</div> |
||||
{/each} |
<div class="text"> |
||||
</div> |
<TextArea |
||||
<div class="text"> |
bind:getCaretPosition |
||||
<TextArea |
thin |
||||
bind:getCaretPosition |
bind:value |
||||
thin |
placeholder="Add text, or click the objects on the left to add them to the textbox." /> |
||||
bind:value |
{#if !validity} |
||||
placeholder="Add text, or click the objects on the left to add them to the textbox." /> |
<p class="syntax-error"> |
||||
{#if !validity} |
Current Handlebars syntax is invalid, please check the guide |
||||
<p class="syntax-error"> |
<a href="https://handlebarsjs.com/guide/">here</a> |
||||
Current Handlebars syntax is invalid, please check the guide |
for more details. |
||||
<a href="https://handlebarsjs.com/guide/">here</a> |
</p> |
||||
for more details. |
{/if} |
||||
</p> |
</div> |
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
|
|
||||
|
|
||||
<style> |
<style> |
||||
.container { |
.container { |
||||
height: 40vh; |
height: 40vh; |
||||
overflow-y: auto; |
overflow-y: auto; |
||||
display: grid; |
display: grid; |
||||
grid-template-columns: 280px 1fr; |
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 { |
.list { |
||||
display: none; |
border-right: var(--border-light); |
||||
} |
padding: var(--spacing-l); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.list { |
||||
|
border-right: var(--border-light); |
||||
|
padding: var(--spacing-l); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
.text { |
.list::-webkit-scrollbar { |
||||
padding: var(--spacing-l); |
display: none; |
||||
font-family: var(--font-sans); |
} |
||||
} |
|
||||
.text :global(textarea) { |
.text { |
||||
min-height: 100px; |
padding: var(--spacing-l); |
||||
} |
font-family: var(--font-sans); |
||||
.text :global(p) { |
} |
||||
margin: 0; |
.text :global(textarea) { |
||||
} |
min-height: 100px; |
||||
|
} |
||||
.binding { |
.text :global(p) { |
||||
font-size: 12px; |
margin: 0; |
||||
padding: var(--spacing-s); |
} |
||||
border-radius: var(--border-radius-m); |
|
||||
} |
.binding { |
||||
.binding:hover { |
font-size: 12px; |
||||
background-color: var(--grey-2); |
padding: var(--spacing-s); |
||||
cursor: pointer; |
border-radius: var(--border-radius-m); |
||||
} |
} |
||||
.binding__label { |
.binding:hover { |
||||
font-weight: 500; |
background-color: var(--grey-2); |
||||
text-transform: capitalize; |
cursor: pointer; |
||||
} |
} |
||||
.binding__description { |
.binding__label { |
||||
color: var(--grey-8); |
font-weight: 500; |
||||
margin-top: 2px; |
text-transform: capitalize; |
||||
white-space: normal; |
} |
||||
} |
.binding__description { |
||||
|
color: var(--grey-8); |
||||
pre { |
margin-top: 2px; |
||||
white-space: normal; |
white-space: normal; |
||||
} |
} |
||||
|
|
||||
.binding__type { |
pre { |
||||
font-family: monospace; |
white-space: normal; |
||||
background-color: var(--grey-2); |
} |
||||
border-radius: var(--border-radius-m); |
|
||||
padding: 2px; |
.binding__type { |
||||
margin-left: 2px; |
font-family: monospace; |
||||
font-weight: 500; |
background-color: var(--grey-2); |
||||
} |
border-radius: var(--border-radius-m); |
||||
|
padding: 2px; |
||||
.editor { |
margin-left: 2px; |
||||
padding-left: var(--spacing-l); |
font-weight: 500; |
||||
} |
} |
||||
.editor :global(textarea) { |
|
||||
min-height: 60px; |
.editor { |
||||
} |
padding-left: var(--spacing-l); |
||||
|
} |
||||
.controls { |
.editor :global(textarea) { |
||||
display: grid; |
min-height: 60px; |
||||
grid-template-columns: 1fr auto; |
} |
||||
grid-gap: var(--spacing-l); |
|
||||
align-items: center; |
.controls { |
||||
margin-top: var(--spacing-m); |
display: grid; |
||||
} |
grid-template-columns: 1fr auto; |
||||
|
grid-gap: var(--spacing-l); |
||||
.syntax-error { |
align-items: center; |
||||
color: var(--red); |
margin-top: var(--spacing-m); |
||||
font-size: 12px; |
} |
||||
} |
|
||||
|
.syntax-error { |
||||
.syntax-error a { |
color: var(--red); |
||||
color: var(--red); |
font-size: 12px; |
||||
text-decoration: underline; |
} |
||||
} |
|
||||
</style> |
.syntax-error a { |
||||
|
color: var(--red); |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
</style> |
||||
|
|||||
Loading…
Reference in new issue