forked from tsai/budibase
Andrew Kingston
6 years ago
3 changed files with 214 additions and 2 deletions
@ -0,0 +1,51 @@ |
|||||
|
<script> |
||||
|
import GenericBindingPopover from "./GenericBindingPopover.svelte" |
||||
|
import { Input, Icon } from "@budibase/bbui" |
||||
|
|
||||
|
export let bindings = [] |
||||
|
export let value |
||||
|
let anchor |
||||
|
let popover |
||||
|
let enrichedValue |
||||
|
</script> |
||||
|
|
||||
|
<div class="container" bind:this={anchor}> |
||||
|
<Input {...$$props} bind:value /> |
||||
|
<button on:click={popover.show}> |
||||
|
<Icon name="edit" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
<GenericBindingPopover |
||||
|
{anchor} |
||||
|
{bindings} |
||||
|
bind:value |
||||
|
bind:popover |
||||
|
align="right" /> |
||||
|
|
||||
|
<style> |
||||
|
.container { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
position: absolute; |
||||
|
background: none; |
||||
|
border: none; |
||||
|
border-radius: 50%; |
||||
|
height: 24px; |
||||
|
width: 24px; |
||||
|
background: var(--grey-4); |
||||
|
right: 7px; |
||||
|
bottom: 7px; |
||||
|
} |
||||
|
button:hover { |
||||
|
background: var(--grey-5); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
button :global(svg) { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%) translateY(-50%) !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,129 @@ |
|||||
|
<script> |
||||
|
import groupBy from "lodash/fp/groupBy" |
||||
|
import { TextArea, Label, Body, Button, Popover } from "@budibase/bbui" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
const dispatch = createEventDispatcher() |
||||
|
|
||||
|
export let value |
||||
|
export let bindings = [] |
||||
|
export let anchor |
||||
|
export let align |
||||
|
export let popover |
||||
|
|
||||
|
$: categories = Object.entries(groupBy("category", bindings)) |
||||
|
|
||||
|
function onClickBinding(binding) { |
||||
|
value += `{{ ${binding.path} }}` |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<Popover {anchor} {align} bind:this={popover}> |
||||
|
<div class="container"> |
||||
|
<div class="bindings"> |
||||
|
<Label large>Available bindings</Label> |
||||
|
<div class="bindings__wrapper"> |
||||
|
<div class="bindings__list"> |
||||
|
{#each categories as [categoryName, bindings]} |
||||
|
<Label small>{categoryName}</Label> |
||||
|
{#each bindings as binding} |
||||
|
<div class="binding" on:click={() => onClickBinding(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> |
||||
|
</div> |
||||
|
<div class="editor"> |
||||
|
<Label large>Data binding</Label> |
||||
|
<Body small> |
||||
|
Binding connects one piece of data to another and makes it dynamic. |
||||
|
Click the objects on the left to add them to the textbox. |
||||
|
</Body> |
||||
|
<TextArea thin bind:value placeholder="..." /> |
||||
|
<div class="controls"> |
||||
|
<a href="#"> |
||||
|
<Body small color="light">Learn more about binding</Body> |
||||
|
</a> |
||||
|
<Button on:click={popover.hide} primary>Done</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Popover> |
||||
|
|
||||
|
<style> |
||||
|
.container { |
||||
|
display: grid; |
||||
|
grid-template-columns: 280px 1fr; |
||||
|
width: 800px; |
||||
|
} |
||||
|
|
||||
|
.bindings { |
||||
|
border-right: 1px solid var(--grey-4); |
||||
|
flex: 0 0 240px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
align-items: stretch; |
||||
|
padding-right: var(--spacing-l); |
||||
|
} |
||||
|
.bindings :global(label) { |
||||
|
margin: var(--spacing-m) 0; |
||||
|
} |
||||
|
.bindings :global(label:first-child) { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.bindings__wrapper { |
||||
|
overflow-y: auto; |
||||
|
position: relative; |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
.bindings__list { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
.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); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue