|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<script> |
|
|
|
import SettingsPanel from "components/design/settings/SettingsPanel.svelte" |
|
|
|
import { store, selectedComponent, currentAsset } from "builderStore" |
|
|
|
import { store, selectedComponent, selectedScreen } from "builderStore" |
|
|
|
import ComponentSettingsSection from "./ComponentSettingsSection.svelte" |
|
|
|
import DesignSection from "./DesignSection.svelte" |
|
|
|
import CustomStylesSection from "./CustomStylesSection.svelte" |
|
|
|
@ -14,23 +14,26 @@ |
|
|
|
$: componentDefinition = store.actions.components.getDefinition( |
|
|
|
$selectedComponent?._component |
|
|
|
) |
|
|
|
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId) |
|
|
|
$: bindings = getBindableProperties( |
|
|
|
$selectedScreen, |
|
|
|
$store.selectedComponentId |
|
|
|
) |
|
|
|
$: componentBindings = getComponentBindableProperties( |
|
|
|
$currentAsset, |
|
|
|
$selectedScreen, |
|
|
|
$store.selectedComponentId |
|
|
|
) |
|
|
|
$: isScreen = $selectedComponent?._id === $selectedScreen?.props._id |
|
|
|
$: title = isScreen ? "Screen" : $selectedComponent?._instanceName |
|
|
|
</script> |
|
|
|
|
|
|
|
{#if $selectedComponent} |
|
|
|
<SettingsPanel |
|
|
|
title={$selectedComponent._instanceName} |
|
|
|
icon={componentDefinition.icon} |
|
|
|
> |
|
|
|
<SettingsPanel {title} icon={componentDefinition.icon}> |
|
|
|
<ComponentSettingsSection |
|
|
|
{componentInstance} |
|
|
|
{componentDefinition} |
|
|
|
{bindings} |
|
|
|
{componentBindings} |
|
|
|
{isScreen} |
|
|
|
/> |
|
|
|
<DesignSection {componentInstance} {componentDefinition} {bindings} /> |
|
|
|
<CustomStylesSection {componentInstance} {componentDefinition} {bindings} /> |
|
|
|
|