Highlight setting feedback
This commit is contained in:
parent
be05985882
commit
717729cd02
|
@ -20,16 +20,23 @@
|
||||||
export let bindings = []
|
export let bindings = []
|
||||||
export let componentBindings = []
|
export let componentBindings = []
|
||||||
export let nested = false
|
export let nested = false
|
||||||
export let highlighted
|
|
||||||
export let propertyFocus = false
|
export let propertyFocus = false
|
||||||
export let info = null
|
export let info = null
|
||||||
export let disableBindings = false
|
export let disableBindings = false
|
||||||
export let wide
|
export let wide
|
||||||
|
|
||||||
|
let highlightType
|
||||||
|
|
||||||
|
$: highlightedProp = $builderStore.highlightedSetting
|
||||||
$: allBindings = getAllBindings(bindings, componentBindings, nested)
|
$: allBindings = getAllBindings(bindings, componentBindings, nested)
|
||||||
$: safeValue = getSafeValue(value, defaultValue, allBindings)
|
$: safeValue = getSafeValue(value, defaultValue, allBindings)
|
||||||
$: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
|
$: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
|
||||||
|
|
||||||
|
$: if (!Array.isArray(value)) {
|
||||||
|
highlightType =
|
||||||
|
highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
|
||||||
|
}
|
||||||
|
|
||||||
const getAllBindings = (bindings, componentBindings, nested) => {
|
const getAllBindings = (bindings, componentBindings, nested) => {
|
||||||
if (!nested) {
|
if (!nested) {
|
||||||
return bindings
|
return bindings
|
||||||
|
@ -70,21 +77,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
if (highlighted) {
|
if (highlightedProp) {
|
||||||
builderStore.highlightSetting(null)
|
builderStore.highlightSetting(null)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
let highlight
|
|
||||||
$: if (!Array.isArray(value)) {
|
|
||||||
highlight = highlighted?.type ? `highlighted-${highlighted?.type}` : ""
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id={`${key}-prop-control-wrap`}
|
id={`${key}-prop-control-wrap`}
|
||||||
class={`property-control ${highlight}`}
|
class={`property-control ${highlightType}`}
|
||||||
class:wide={!label || labelHidden || wide === true}
|
class:wide={!label || labelHidden || wide === true}
|
||||||
class:highlighted={highlighted && !Array.isArray(value)}
|
class:highlighted={highlightType}
|
||||||
class:property-focus={propertyFocus}
|
class:property-focus={propertyFocus}
|
||||||
>
|
>
|
||||||
{#if label && !labelHidden}
|
{#if label && !labelHidden}
|
||||||
|
|
|
@ -177,9 +177,6 @@
|
||||||
defaultValue={setting.defaultValue}
|
defaultValue={setting.defaultValue}
|
||||||
nested={setting.nested}
|
nested={setting.nested}
|
||||||
onChange={val => updateSetting(setting, val)}
|
onChange={val => updateSetting(setting, val)}
|
||||||
highlighted={$builderStore.highlightedSetting?.key === setting.key
|
|
||||||
? $builderStore.highlightedSetting
|
|
||||||
: null}
|
|
||||||
propertyFocus={$builderStore.propertyFocus === setting.key}
|
propertyFocus={$builderStore.propertyFocus === setting.key}
|
||||||
info={setting.info}
|
info={setting.info}
|
||||||
disableBindings={setting.disableBindings}
|
disableBindings={setting.disableBindings}
|
||||||
|
|
Loading…
Reference in New Issue