budibase/packages/builder/src/components/userInterface/PropertyGroup.svelte

39 lines
1013 B
Svelte
Raw Normal View History

2020-05-04 17:07:04 +02:00
<script>
import { excludeProps } from "./propertyCategories.js"
2020-05-07 15:30:04 +02:00
import PropertyControl from "./PropertyControl.svelte"
import { DetailSummary } from "@budibase/bbui"
2020-05-08 21:29:15 +02:00
2020-05-05 11:02:10 +02:00
export let name = ""
2020-05-22 16:30:29 +02:00
export let styleCategory = "normal"
2020-05-18 17:32:00 +02:00
export let properties = []
2020-05-04 17:07:04 +02:00
export let componentInstance = {}
2020-05-18 17:32:00 +02:00
export let onStyleChanged = () => {}
export let open = false
2020-05-04 17:07:04 +02:00
2020-05-25 16:23:56 +02:00
$: style = componentInstance["_styles"][styleCategory] || {}
2020-05-04 17:07:04 +02:00
</script>
<DetailSummary {name} on:open show={open} thin>
<div>
{#each properties as props}
<PropertyControl
label={props.label}
control={props.control}
key={props.key}
value={style[props.key]}
onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
props={{ ...excludeProps(props, ['control', 'label']) }} />
{/each}
</div>
</DetailSummary>
<style>
div {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-s);
}
</style>