Formatting.
This commit is contained in:
parent
163d24a767
commit
68735f1b4f
|
@ -1,190 +1,186 @@
|
|||
<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()
|
||||
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 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;
|
||||
}
|
||||
.container {
|
||||
height: 40vh;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
}
|
||||
|
||||
.list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.list {
|
||||
border-right: var(--border-light);
|
||||
padding: var(--spacing-l);
|
||||
overflow: auto;
|
||||
}
|
||||
.list {
|
||||
border-right: var(--border-light);
|
||||
padding: var(--spacing-l);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
.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>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
import { automationStore } from "builderStore"
|
||||
import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
|
||||
import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
|
||||
import AutomationBindingPanel from './AutomationBindingPanel.svelte'
|
||||
import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
|
||||
|
||||
export let block
|
||||
export let webhookModal
|
||||
|
@ -70,7 +70,7 @@
|
|||
type={'email'}
|
||||
extraThin
|
||||
value={block.inputs[key]}
|
||||
on:change={e => block.inputs[key] = e.detail}
|
||||
on:change={e => (block.inputs[key] = e.detail)}
|
||||
{bindings} />
|
||||
{:else if value.customType === 'table'}
|
||||
<TableSelector bind:value={block.inputs[key]} />
|
||||
|
@ -86,7 +86,7 @@
|
|||
type={value.customType}
|
||||
extraThin
|
||||
value={block.inputs[key]}
|
||||
on:change={e => block.inputs[key] = e.detail}
|
||||
on:change={e => (block.inputs[key] = e.detail)}
|
||||
{bindings} />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import { backendUiStore } from "builderStore"
|
||||
import { Select } from "@budibase/bbui"
|
||||
import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
|
||||
import AutomationBindingPanel from './AutomationBindingPanel.svelte'
|
||||
import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
|
||||
|
||||
export let value
|
||||
export let bindings
|
||||
|
@ -44,7 +44,7 @@
|
|||
panel={AutomationBindingPanel}
|
||||
extraThin
|
||||
value={value[field]}
|
||||
on:change={e => value[field] = e.detail}
|
||||
on:change={e => (value[field] = e.detail)}
|
||||
label={field}
|
||||
type="string"
|
||||
{bindings} />
|
||||
|
|
|
@ -25,10 +25,14 @@
|
|||
]
|
||||
|
||||
const transitions = [
|
||||
'none', 'fade', 'blur', 'fly', 'scale' // slide is hidden because it does not seem to result in any effect
|
||||
"none",
|
||||
"fade",
|
||||
"blur",
|
||||
"fly",
|
||||
"scale", // slide is hidden because it does not seem to result in any effect
|
||||
]
|
||||
|
||||
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('');
|
||||
const capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join("")
|
||||
|
||||
$: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
|
||||
</script>
|
||||
|
@ -72,13 +76,19 @@
|
|||
</div>
|
||||
</div>
|
||||
{#if componentDefinition?.transitionable}
|
||||
<div class="transitions">
|
||||
<Select value={componentInstance._transition} on:change={event => onUpdateTransition(event.target.value)} name="transition" label="Transition" secondary thin>
|
||||
{#each transitions as transition}
|
||||
<option value={transition}>{capitalize(transition)}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</div>
|
||||
<div class="transitions">
|
||||
<Select
|
||||
value={componentInstance._transition}
|
||||
on:change={event => onUpdateTransition(event.target.value)}
|
||||
name="transition"
|
||||
label="Transition"
|
||||
secondary
|
||||
thin>
|
||||
{#each transitions as transition}
|
||||
<option value={transition}>{capitalize(transition)}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<script>
|
||||
import {flip} from "svelte/animate";
|
||||
import {dndzone} from "svelte-dnd-action";
|
||||
import { flip } from "svelte/animate"
|
||||
import { dndzone } from "svelte-dnd-action"
|
||||
import { Button, DropdownMenu, Spacer } from "@budibase/bbui"
|
||||
import actionTypes from "./actions"
|
||||
|
||||
const flipDurationMs = 150;
|
||||
const flipDurationMs = 150
|
||||
|
||||
const EVENT_TYPE_KEY = "##eventHandlerType"
|
||||
|
||||
|
@ -13,7 +13,7 @@
|
|||
// dndzone needs an id on the array items, so this adds some temporary ones.
|
||||
if (actions) {
|
||||
actions = actions.map((action, i) => {
|
||||
return {...action, id: i}
|
||||
return { ...action, id: i }
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -41,7 +41,7 @@
|
|||
const newAction = {
|
||||
parameters: {},
|
||||
[EVENT_TYPE_KEY]: actionType.name,
|
||||
id: actions ? actions.length + 1 : 0
|
||||
id: actions ? actions.length + 1 : 0,
|
||||
}
|
||||
if (!actions) {
|
||||
actions = []
|
||||
|
@ -56,11 +56,11 @@
|
|||
}
|
||||
|
||||
function handleDndConsider(e) {
|
||||
actions = e.detail.items;
|
||||
}
|
||||
function handleDndFinalize(e) {
|
||||
actions = e.detail.items;
|
||||
}
|
||||
actions = e.detail.items
|
||||
}
|
||||
function handleDndFinalize(e) {
|
||||
actions = e.detail.items
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="actions-container">
|
||||
|
@ -87,9 +87,15 @@
|
|||
</div>
|
||||
|
||||
{#if actions && actions.length > 0}
|
||||
<div class="action-dnd-container" use:dndzone={{items: actions, flipDurationMs, dropTargetStyle: { outline: 'none'}}} on:consider={handleDndConsider} on:finalize={handleDndFinalize}>
|
||||
<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-container"
|
||||
animate:flip={{ duration: flipDurationMs }}>
|
||||
<div
|
||||
class="action-header"
|
||||
class:selected={action === selectedAction}
|
||||
|
|
|
@ -162,7 +162,7 @@
|
|||
|
||||
{#if componentDefinition?.component?.endsWith('/fieldgroup')}
|
||||
<Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
|
||||
Update Form Fields
|
||||
Update Form Fields
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
.topnavitemright:hover i {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
id,
|
||||
children: children.length,
|
||||
styles: { ...styles, id },
|
||||
transition
|
||||
transition,
|
||||
})
|
||||
|
||||
// Gets the component constructor for the specified component
|
||||
|
|
|
@ -8,55 +8,81 @@
|
|||
</script>
|
||||
|
||||
{#if type === 'div'}
|
||||
<div in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<div
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</div>
|
||||
{:else if type === 'header'}
|
||||
<header in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<header
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</header>
|
||||
{:else if type === 'main'}
|
||||
<main in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<main
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</main>
|
||||
{:else if type === 'footer'}
|
||||
<footer in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<footer
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</footer>
|
||||
{:else if type === 'aside'}
|
||||
<aside in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<aside
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</aside>
|
||||
{:else if type === 'summary'}
|
||||
<summary in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<summary
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</summary>
|
||||
{:else if type === 'details'}
|
||||
<details in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<details
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</details>
|
||||
{:else if type === 'article'}
|
||||
<article in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<article
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</article>
|
||||
{:else if type === 'nav'}
|
||||
<nav in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<nav
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</nav>
|
||||
{:else if type === 'mark'}
|
||||
<mark in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<mark
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</mark>
|
||||
{:else if type === 'figure'}
|
||||
<figure in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<figure
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</figure>
|
||||
{:else if type === 'figcaption'}
|
||||
<figcaption in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<figcaption
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</figcaption>
|
||||
{:else if type === 'paragraph'}
|
||||
<p in:transition={{type: $component.transition}} use:styleable={$component.styles}>
|
||||
<p
|
||||
in:transition={{ type: $component.transition }}
|
||||
use:styleable={$component.styles}>
|
||||
<slot />
|
||||
</p>
|
||||
{/if}
|
||||
|
|
|
@ -152,7 +152,9 @@
|
|||
{#if selectedRows.length > 0}
|
||||
<DeleteButton text small on:click={modal.show()}>
|
||||
<Icon name="addrow" />
|
||||
Delete {selectedRows.length} row(s)
|
||||
Delete
|
||||
{selectedRows.length}
|
||||
row(s)
|
||||
</DeleteButton>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue