forked from tsai/budibase
Martin McKeaveney
7 years ago
12 changed files with 238 additions and 528 deletions
@ -0,0 +1,30 @@ |
|||||
|
<script> |
||||
|
export let disabled = false; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.action-button { |
||||
|
color: #0055ff; |
||||
|
background: rgb(54, 133, 249, 0.1); |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
border-radius: 5px; |
||||
|
border: none; |
||||
|
width: 167px; |
||||
|
height: 64px; |
||||
|
} |
||||
|
|
||||
|
.action-button:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.action-button:disabled { |
||||
|
color:#163057; |
||||
|
cursor: default; |
||||
|
background: transparent; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<button on:click class="action-button" {disabled}> |
||||
|
<slot /> |
||||
|
</button> |
||||
@ -0,0 +1,27 @@ |
|||||
|
<script> |
||||
|
export let value = ""; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
input { |
||||
|
display: block; |
||||
|
font-size: 14px; |
||||
|
font-family: sans-serif; |
||||
|
font-weight: 500; |
||||
|
color: #163057; |
||||
|
line-height: 1.3; |
||||
|
padding: 1em 2.6em 0.9em 1.4em; |
||||
|
width: 100%; |
||||
|
max-width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
margin: 0; |
||||
|
-moz-appearance: none; |
||||
|
-webkit-appearance: none; |
||||
|
appearance: none; |
||||
|
background: #fff; |
||||
|
border: 1px solid #ccc; |
||||
|
height: 50px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<input type="text" on:change bind:value /> |
||||
@ -1,88 +0,0 @@ |
|||||
<script> |
|
||||
import IconButton from "../common/IconButton.svelte"; |
|
||||
import EventSelector from "./EventSelector.svelte"; |
|
||||
import { |
|
||||
filter |
|
||||
} from "lodash/fp"; |
|
||||
import {EVENT_TYPE_MEMBER_NAME} from "../common/eventHandlers"; |
|
||||
|
|
||||
export let parentProps; |
|
||||
export let propDef; |
|
||||
export let onValueChanged; |
|
||||
|
|
||||
$: events = parentProps[propDef.____name]; |
|
||||
|
|
||||
const addHandler = () => { |
|
||||
const newHandler = {parameters:{}}; |
|
||||
newHandler[EVENT_TYPE_MEMBER_NAME] = ""; |
|
||||
events = [...events, newHandler]; |
|
||||
onValueChanged(events); |
|
||||
} |
|
||||
|
|
||||
const onEventHandlerChanged = (oldEvent) => (newEvent) => { |
|
||||
const indexOfOldEvent = events.indexOf(oldEvent); |
|
||||
const newEvents = [...events]; |
|
||||
newEvents.splice( |
|
||||
events.indexOf(oldEvent), |
|
||||
1, |
|
||||
newEvent); |
|
||||
events = newEvents; |
|
||||
onValueChanged(events); |
|
||||
} |
|
||||
|
|
||||
const removeHandler = (index) => () => { |
|
||||
events = filter(e => e !== events[index])(events); |
|
||||
onValueChanged(events); |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<div class="control-container"> |
|
||||
{#each events as ev, index} |
|
||||
|
|
||||
<div class="handler-container"> |
|
||||
<EventSelector onChanged={onEventHandlerChanged(ev)} |
|
||||
onRemoved={removeHandler(index)} |
|
||||
event={ev} /> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<div class="separator"></div> |
|
||||
{/each} |
|
||||
|
|
||||
<div class="addelement-container" |
|
||||
on:click={addHandler}> |
|
||||
<IconButton icon="plus" |
|
||||
size="12"/> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
<style> |
|
||||
.addelement-container { |
|
||||
cursor: pointer; |
|
||||
padding: 3px 0px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.addelement-container:hover { |
|
||||
background-color: var(--primary25); |
|
||||
margin-top: 5px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.control-container { |
|
||||
padding-left: 3px; |
|
||||
background: var(--secondary10); |
|
||||
} |
|
||||
|
|
||||
.separator { |
|
||||
width: 60%; |
|
||||
margin: 10px auto; |
|
||||
border-style:solid; |
|
||||
border-width: 1px 0 0 0; |
|
||||
border-color: var(--primary25); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,105 +0,0 @@ |
|||||
<script> |
|
||||
import IconButton from "../common/IconButton.svelte"; |
|
||||
import StateBindingControl from "./StateBindingControl.svelte"; |
|
||||
import { |
|
||||
find, map, keys, reduce, keyBy |
|
||||
} from "lodash/fp"; |
|
||||
import { pipe, userWithFullAccess } from "../common/core"; |
|
||||
import { EVENT_TYPE_MEMBER_NAME, allHandlers } from "../common/eventHandlers"; |
|
||||
import { store } from "../builderStore"; |
|
||||
|
|
||||
export let event; |
|
||||
export let onChanged; |
|
||||
export let onRemoved; |
|
||||
|
|
||||
let eventType; |
|
||||
let parameters = []; |
|
||||
|
|
||||
|
|
||||
$: events = allHandlers( |
|
||||
{hierarchy: $store.hierarchy}, |
|
||||
userWithFullAccess({ |
|
||||
hierarchy: s.hierarchy, |
|
||||
actions: keyBy("name")($store.actions) |
|
||||
}) |
|
||||
); |
|
||||
|
|
||||
$: if(event) { |
|
||||
eventType = event[EVENT_TYPE_MEMBER_NAME]; |
|
||||
parameters = pipe(event.parameters, [ |
|
||||
keys, |
|
||||
map(k => ({name:k, value:event.parameters[k]})) |
|
||||
]); |
|
||||
} else { |
|
||||
eventType = ""; |
|
||||
parameters = []; |
|
||||
} |
|
||||
|
|
||||
const eventChanged = (type, parameters) => { |
|
||||
const paramsAsObject = reduce( |
|
||||
(obj, p) => { |
|
||||
obj[p.name] = p.value; |
|
||||
return obj; |
|
||||
} |
|
||||
, {} |
|
||||
)(parameters) |
|
||||
|
|
||||
const ev = {}; |
|
||||
ev[EVENT_TYPE_MEMBER_NAME]=type; |
|
||||
ev.parameters = paramsAsObject; |
|
||||
|
|
||||
onChanged(ev); |
|
||||
} |
|
||||
|
|
||||
const eventTypeChanged = (ev) => { |
|
||||
const eType = find(e => e.name === ev.target.value)(events); |
|
||||
const emptyParameters = map(p => ({name:p, value:""}))(eType.parameters); |
|
||||
eventChanged(eType.name, emptyParameters); |
|
||||
} |
|
||||
|
|
||||
const onParameterChanged = index => val => { |
|
||||
const newparameters = [...parameters]; |
|
||||
newparameters[index].value = val; |
|
||||
eventChanged(eventType, newparameters); |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div class="type-selector-container"> |
|
||||
<select class="type-selector uk-select uk-form-small " value={eventType} on:change={eventTypeChanged}> |
|
||||
<option></option> |
|
||||
{#each events as ev} |
|
||||
<option value={ev.name}>{ev.name}</option> |
|
||||
{/each} |
|
||||
</select> |
|
||||
|
|
||||
<IconButton icon="trash" |
|
||||
size="12" |
|
||||
on:click={onRemoved}/> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
{#if parameters} |
|
||||
{#each parameters as p, index} |
|
||||
|
|
||||
<div> |
|
||||
{p.name} |
|
||||
</div> |
|
||||
<StateBindingControl onChanged={onParameterChanged(index)} |
|
||||
value={p.value} /> |
|
||||
|
|
||||
{/each} |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.type-selector-container { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.type-selector { |
|
||||
border-color: var(--primary50); |
|
||||
border-radius: 2px; |
|
||||
width: 50px; |
|
||||
flex: 1 0 auto; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,177 +0,0 @@ |
|||||
<script> |
|
||||
import { |
|
||||
isString |
|
||||
} from "lodash/fp"; |
|
||||
import IconButton from "../../common/IconButton.svelte"; |
|
||||
import { |
|
||||
isBinding, getBinding, setBinding |
|
||||
} from "../../common/binding"; |
|
||||
|
|
||||
export let value=""; |
|
||||
export let onChanged= () => {}; |
|
||||
export let type=""; |
|
||||
export let options=[]; |
|
||||
|
|
||||
let isBound=false; |
|
||||
let bindingPath=""; |
|
||||
let bindingFallbackValue=""; |
|
||||
let bindingSource="store"; |
|
||||
let isExpanded = false; |
|
||||
let forceIsBound = false; |
|
||||
let canOnlyBind = false; |
|
||||
|
|
||||
$: { |
|
||||
canOnlyBind = type === "state"; |
|
||||
if(!forceIsBound && canOnlyBind) |
|
||||
forceIsBound = true; |
|
||||
|
|
||||
isBound= forceIsBound || isBinding(value); |
|
||||
|
|
||||
if(isBound) { |
|
||||
const binding = getBinding(value); |
|
||||
bindingPath= binding.path; |
|
||||
bindingFallbackValue= binding.fallback; |
|
||||
bindingSource = binding.source || "store"; |
|
||||
} else { |
|
||||
bindingPath=""; |
|
||||
bindingFallbackValue=""; |
|
||||
bindingSource="store"; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const clearBinding = () => { |
|
||||
forceIsBound = false; |
|
||||
onChanged(""); |
|
||||
} |
|
||||
|
|
||||
const bind = (path, fallback, source) => { |
|
||||
if(!path) { |
|
||||
clearBinding(""); |
|
||||
return; |
|
||||
} |
|
||||
const binding = setBinding({path, fallback, source}); |
|
||||
onChanged(binding); |
|
||||
} |
|
||||
|
|
||||
const setBindingPath = ev => { |
|
||||
forceIsBound = canOnlyBind; |
|
||||
bind(ev.target.value, bindingFallbackValue, bindingSource) |
|
||||
} |
|
||||
|
|
||||
const setBindingFallback = ev => { |
|
||||
bind(bindingPath, ev.target.value, bindingSource); |
|
||||
} |
|
||||
|
|
||||
const setBindingSource = ev => { |
|
||||
bind(bindingPath, bindingFallbackValue, ev.target.value); |
|
||||
} |
|
||||
|
|
||||
// const makeBinding = () => { |
|
||||
// forceIsBound=true; |
|
||||
// isExpanded=true; |
|
||||
// } |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
{#if isBound} |
|
||||
<div> |
|
||||
<div class="bound-header"> |
|
||||
<div>{isExpanded ? "" : bindingPath}</div> |
|
||||
<IconButton icon={isExpanded ? "chevron-up" : "chevron-down"} |
|
||||
size="12" |
|
||||
on:click={() => isExpanded=!isExpanded}/> |
|
||||
{#if !canOnlyBind} |
|
||||
<IconButton icon="trash" |
|
||||
size="12" |
|
||||
on:click={clearBinding}/> |
|
||||
{/if} |
|
||||
</div> |
|
||||
{#if isExpanded} |
|
||||
<div> |
|
||||
<div class="binding-prop-label">Binding Path</div> |
|
||||
<input class="uk-input uk-form-small" |
|
||||
value={bindingPath} |
|
||||
on:change={setBindingPath} > |
|
||||
<div class="binding-prop-label">Fallback Value</div> |
|
||||
<input class="uk-input uk-form-small" |
|
||||
value={bindingFallbackValue} |
|
||||
on:change={setBindingFallback} > |
|
||||
<div class="binding-prop-label">Binding Source</div> |
|
||||
<select class="uk-select uk-form-small" |
|
||||
value={bindingSource} |
|
||||
on:change={setBindingSource}> |
|
||||
|
|
||||
<option>store</option> |
|
||||
<option>context</option> |
|
||||
|
|
||||
</select> |
|
||||
</div> |
|
||||
{/if} |
|
||||
|
|
||||
</div> |
|
||||
{:else} |
|
||||
<div class="unbound-container"> |
|
||||
|
|
||||
{#if type === "bool"} |
|
||||
|
|
||||
<div> |
|
||||
<IconButton icon={value == true ? "check-square" : "square"} |
|
||||
size="19" |
|
||||
on:click={() => onChanged(!value)} /> |
|
||||
</div> |
|
||||
|
|
||||
{:else if type === "options"} |
|
||||
|
|
||||
<select class="uk-select uk-form-small" |
|
||||
value={value} |
|
||||
on:change={ev => onChanged(ev.target.value)}> |
|
||||
{#each options as option} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/each} |
|
||||
</select> |
|
||||
|
|
||||
{:else} |
|
||||
|
|
||||
<input on:change={ev => onChanged(ev.target.value)} |
|
||||
bind:value={value} |
|
||||
style="flex: 1 0 auto;" /> |
|
||||
|
|
||||
|
|
||||
{/if} |
|
||||
|
|
||||
</div> |
|
||||
{/if} |
|
||||
|
|
||||
|
|
||||
<style> |
|
||||
.unbound-container { |
|
||||
display:flex; |
|
||||
} |
|
||||
|
|
||||
.bound-header { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.bound-header > div:nth-child(1) { |
|
||||
flex: 1 0 auto; |
|
||||
width: 30px; |
|
||||
color: var(--secondary50); |
|
||||
padding-left: 5px; |
|
||||
} |
|
||||
|
|
||||
.binding-prop-label { |
|
||||
color: var(--secondary50); |
|
||||
} |
|
||||
|
|
||||
input { |
|
||||
font-size: 12px; |
|
||||
font-weight: 700; |
|
||||
color: #163057; |
|
||||
opacity: 0.7; |
|
||||
padding: 5px 10px; |
|
||||
box-sizing: border-box; |
|
||||
border: 1px solid #DBDBDB; |
|
||||
border-radius: 2px; |
|
||||
outline: none; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue