@ -1,145 +1,130 @@
< script > < script >
import { import IconButton from "../common/IconButton.svelte";
isString import {
} from "lodash/fp"; isBinding, getBinding, setBinding
import IconButton from "../common/IconButton.svelte"; } from "../common/binding";
import {
isBinding, getBinding, setBinding export let value="";
} from "../common/binding"; export let onChanged= () => {} ;
export let type="";
export let value=""; export let options=[];
export let onChanged= () => {} ;
export let type=""; let isBound=false;
export let options=[]; let bindingPath="";
let bindingFallbackValue="";
let isBound=false; let bindingSource="store";
let bindingPath=""; let isExpanded = false;
let bindingFallbackValue=""; let forceIsBound = false;
let bindingSource="store"; let canOnlyBind = false;
let isExpanded = false;
let forceIsBound = false; $: {
let canOnlyBind = false; canOnlyBind = type === "state";
if(!forceIsBound & & canOnlyBind)
$: { forceIsBound = true;
canOnlyBind = type === "state";
if(!forceIsBound & & canOnlyBind) isBound= forceIsBound || isBinding(value);
forceIsBound = true;
if(isBound) {
isBound= forceIsBound || isBinding(value); const binding = getBinding(value);
bindingPath= binding.path;
if(isBound) { bindingFallbackValue= binding.fallback;
const binding = getBinding(value); bindingSource = binding.source || "store";
bindingPath= binding.path; } else {
bindingFallbackValue= binding.fallback; bindingPath="";
bindingSource = binding.source || "store"; bindingFallbackValue="";
} else { bindingSource="store";
bindingPath=""; }
bindingFallbackValue="";
bindingSource="store";
} }
}
const clearBinding = () => { const clearBinding = () => {
forceIsBound = false; forceIsBound = false;
onChanged(""); onChanged("");
}
const bind = (path, fallback, source) => {
if(!path) {
clearBinding("");
return;
} }
const binding = setBinding({ path , fallback , source } );
onChanged(binding);
}
const setBindingPath = ev => { const bind = (path, fallback, source) => {
forceIsBound = canOnlyBind; if(!path) {
bind(ev.target.value, bindingFallbackValue, bindingSource) clearBinding("");
} return;
}
const binding = setBinding({ path , fallback , source } );
onChanged(binding);
}
const setBindingFallback = ev => { const setBindingPath = ev => {
bind(bindingPath, ev.target.value, bindingSource); forceIsBound = canOnlyBind;
} bind(ev.target.value, bindingFallbackValue, bindingSource)
}
const setBindingSource = ev => { const setBindingFallback = ev => {
bind(bindingPath, bindingFallbackValue, ev.target.value); bind(bindingPath, ev.target.value, bindingSourc e);
} }
// const makeBinding = () => { const setBindingSource = ev => {
// forceIsBound=true; bind(bindingPath, bindingFallbackValue, ev.target.value);
// isExpanded=true; }
// }
< / script > < / script >
{ #if isBound } { #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 >
< div class = "binding-prop-label" > Binding Path< / div > < div class = "bound-header" >
< input class = "uk-input uk-form-small" < div > { isExpanded ? "" : bindingPath } </ div >
value={ bindingPath } < IconButton icon = { isExpanded ? "chevron-up" : "chevron-down" }
on:change={ setBindingPath } > size="12"
< div class = "binding-prop-label" > Fallback Value< / div > on:click={() => isExpanded =! isExpanded } />
< input class = "uk-input uk-form-small" { #if ! canOnlyBind }
value={ bindingFallbackValue } < IconButton icon = "trash"
on:change={ setBindingFallback } > size="12"
< div class = "binding-prop-label" > Binding Source< / div > on:click={ clearBinding } />
< select class = "uk-select uk-form-small" { /if }
value={ bindingSource } < / div >
on:change={ setBindingSource } > { #if isExpanded }
< div >
< option > store< / option > < div class = "binding-prop-label" > Binding Path< / div >
< option > context< / option > < input class = "uk-input uk-form-small"
value={ bindingPath }
< / select > on:change={ setBindingPath } >
< / div > < div class = "binding-prop-label" > Fallback Value< / div >
{ /if } < 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 > < / div >
{ : else } { : else }
< div class = "unbound-container" > < div class = "unbound-container" >
{ #if type === "bool" } { #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 >
< IconButton icon = { value == true ? "check-square" : "square" }
size="19"
on:click={() => onChanged ( ! value )} />
< / div > < / 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 } { /if }
pngwn
7 years ago
Michael Shanks