CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-27 18:40:42 +12:00
Code Issues Projects Releases Wiki Activity

Formatting.

Browse source
This commit is contained in:
mike12345567 2021-03-10 17:56:16 +00:00
parent d9217b1148
commit 3947044014
10 changed files with 263 additions and 223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

356
packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
View file

@ -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
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View file

@ -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>

4
packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
View file

@ -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} />

28
packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
View file

@ -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>

30
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View file

@ -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}

2
packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
View file

@ -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>

2
packages/builder/src/components/settings/ThemeEditorDropdown.svelte
View file

@ -43,7 +43,7 @@
.topnavitemright:hover i {
color: var(--ink);
}
.content {
padding: var(--spacing-xl);
}

2
packages/client/src/components/Component.svelte
View file

@ -41,7 +41,7 @@
id,
children: children.length,
styles: { ...styles, id },
transition
transition,
})
// Gets the component constructor for the specified component

52
packages/standard-components/src/Container.svelte
View file

@ -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}

4
packages/standard-components/src/grid/Component.svelte
View file

@ -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>