147 lines
3.2 KiB
Svelte
147 lines
3.2 KiB
Svelte
<script>
|
|
import { ArrowDownIcon } from "../common/Icons/"
|
|
import { store } from "../builderStore"
|
|
import { buildStateOrigins } from "../builderStore/buildStateOrigins"
|
|
import { isBinding, getBinding, setBinding } from "../common/binding"
|
|
|
|
export let onChanged = () => {}
|
|
export let value = ""
|
|
|
|
let isOpen = false
|
|
let stateBindings = []
|
|
|
|
let bindingPath = ""
|
|
let bindingFallbackValue = ""
|
|
let bindingSource = "store"
|
|
let bindingValue = ""
|
|
|
|
const bind = (path, fallback, source) => {
|
|
if (!path) {
|
|
onChanged(fallback)
|
|
return
|
|
}
|
|
const binding = setBinding({ path, fallback, source })
|
|
onChanged(binding)
|
|
}
|
|
|
|
const setBindingPath = value =>
|
|
bind(value, bindingFallbackValue, bindingSource)
|
|
|
|
const setBindingFallback = value => bind(bindingPath, value, bindingSource)
|
|
|
|
const setBindingSource = value =>
|
|
bind(bindingPath, bindingFallbackValue, value)
|
|
|
|
$: {
|
|
const binding = getBinding(value)
|
|
if (bindingPath !== binding.path) isOpen = false
|
|
bindingPath = binding.path
|
|
bindingValue = typeof value === "object" ? "" : value
|
|
bindingFallbackValue = binding.fallback || bindingValue
|
|
|
|
const currentScreen = $store.screens.find(
|
|
({ name }) => name === $store.currentPreviewItem.name
|
|
)
|
|
stateBindings = currentScreen
|
|
? Object.keys(buildStateOrigins(currentScreen))
|
|
: []
|
|
}
|
|
</script>
|
|
|
|
<div class="cascader">
|
|
<div class="input-box">
|
|
<input
|
|
class:bold={!bindingFallbackValue && bindingPath}
|
|
class="uk-input uk-form-small"
|
|
value={bindingFallbackValue || bindingPath}
|
|
on:change={e => {
|
|
setBindingFallback(e.target.value)
|
|
onChanged(e.target.value)
|
|
}} />
|
|
{#if stateBindings.length}
|
|
<button on:click={() => (isOpen = !isOpen)}>
|
|
<div
|
|
class="icon"
|
|
class:highlighted={bindingPath}
|
|
style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
|
|
<ArrowDownIcon size={36} />
|
|
</div>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{#if isOpen}
|
|
<ul class="options">
|
|
{#each stateBindings as stateBinding}
|
|
<li
|
|
class:bold={stateBinding === bindingPath}
|
|
on:click={() => {
|
|
setBindingPath(stateBinding === bindingPath ? null : stateBinding)
|
|
}}>
|
|
{stateBinding}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.highlighted {
|
|
color: rgba(0, 85, 255, 0.8);
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
outline: none;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: rgba(249, 249, 249, 1);
|
|
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
color: rgba(22, 48, 87, 1);
|
|
}
|
|
|
|
.cascader {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-box {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.options {
|
|
width: 172px;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 35px;
|
|
padding: 10px;
|
|
z-index: 1;
|
|
background: rgba(249, 249, 249, 1);
|
|
min-height: 50px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
li:hover {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input {
|
|
margin-right: 5px;
|
|
border: 1px solid #dbdbdb;
|
|
border-radius: 2px;
|
|
opacity: 0.5;
|
|
height: 40px;
|
|
}
|
|
</style>
|