75 lines
1.7 KiB
Svelte
75 lines
1.7 KiB
Svelte
<script>
|
|
import PropertyGroup from "./PropertyGroup.svelte"
|
|
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
|
|
|
export let panelDefinition = {}
|
|
export let componentInstance = {}
|
|
export let componentDefinition = {}
|
|
export let onStyleChanged = () => {}
|
|
|
|
let selectedCategory = "normal"
|
|
|
|
const getProperties = name => panelDefinition[name]
|
|
|
|
function onChange(category) {
|
|
selectedCategory = category
|
|
}
|
|
|
|
const buttonProps = [
|
|
{ value: "normal", text: "Normal" },
|
|
{ value: "hover", text: "Hover" },
|
|
{ value: "active", text: "Active" },
|
|
{ value: "selected", text: "Selected" },
|
|
]
|
|
|
|
$: propertyGroupNames = Object.keys(panelDefinition)
|
|
</script>
|
|
|
|
<div class="design-view-container">
|
|
|
|
<div class="design-view-state-categories">
|
|
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
|
|
</div>
|
|
|
|
<div class="design-view-property-groups">
|
|
{#if propertyGroupNames.length > 0}
|
|
{#each propertyGroupNames as groupName}
|
|
<PropertyGroup
|
|
name={groupName}
|
|
properties={getProperties(groupName)}
|
|
styleCategory={selectedCategory}
|
|
{onStyleChanged}
|
|
{componentDefinition}
|
|
{componentInstance} />
|
|
{/each}
|
|
{:else}
|
|
<div class="no-design">
|
|
<span>This component does not have any design properties</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.design-view-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.design-view-state-categories {
|
|
flex: 0 0 50px;
|
|
}
|
|
|
|
.design-view-property-groups {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
.no-design {
|
|
text-align: center;
|
|
}
|
|
</style>
|