90 lines
2.8 KiB
Svelte
90 lines
2.8 KiB
Svelte
<script>
|
|
import { isEmpty } from "lodash/fp"
|
|
import { Input, DetailSummary } from "@budibase/bbui"
|
|
import { store } from "builderStore"
|
|
import PropertyControl from "./PropertyControls/PropertyControl.svelte"
|
|
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
|
|
import RoleSelect from "./PropertyControls/RoleSelect.svelte"
|
|
import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
|
|
import { getComponentForSettingType } from "./PropertyControls/componentSettings"
|
|
|
|
export let componentDefinition
|
|
export let componentInstance
|
|
export let assetInstance
|
|
export let bindings
|
|
|
|
const layoutDefinition = []
|
|
const screenDefinition = [
|
|
{ key: "description", label: "Description", control: Input },
|
|
{ key: "routing.route", label: "Route", control: Input },
|
|
{ key: "routing.roleId", label: "Access", control: RoleSelect },
|
|
{ key: "layoutId", label: "Layout", control: LayoutSelect },
|
|
]
|
|
|
|
$: settings = componentDefinition?.settings ?? []
|
|
$: isLayout = assetInstance && assetInstance.favicon
|
|
$: assetDefinition = isLayout ? layoutDefinition : screenDefinition
|
|
|
|
const updateProp = store.actions.components.updateProp
|
|
|
|
const canRenderControl = setting => {
|
|
const control = getComponentForSettingType(setting?.type)
|
|
if (!control) {
|
|
return false
|
|
}
|
|
if (setting.dependsOn && isEmpty(componentInstance[setting.dependsOn])) {
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
</script>
|
|
|
|
<DetailSummary name="General" collapsible={false}>
|
|
{#if !componentInstance._component.endsWith("/layout")}
|
|
<PropertyControl
|
|
bindable={false}
|
|
control={Input}
|
|
label="Name"
|
|
key="_instanceName"
|
|
value={componentInstance._instanceName}
|
|
onChange={val => updateProp("_instanceName", val)}
|
|
/>
|
|
{/if}
|
|
{#if settings && settings.length > 0}
|
|
{#each settings as setting}
|
|
{#if canRenderControl(setting)}
|
|
<PropertyControl
|
|
type={setting.type}
|
|
control={getComponentForSettingType(setting.type)}
|
|
label={setting.label}
|
|
key={setting.key}
|
|
value={componentInstance[setting.key] ??
|
|
componentInstance[setting.key]?.defaultValue}
|
|
{componentInstance}
|
|
onChange={val => updateProp(setting.key, val)}
|
|
props={{
|
|
options: setting.options,
|
|
placeholder: setting.placeholder,
|
|
}}
|
|
{bindings}
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
{/if}
|
|
{#if componentDefinition?.component?.endsWith("/fieldgroup")}
|
|
<ResetFieldsButton {componentInstance} />
|
|
{/if}
|
|
{#if componentDefinition?.info}
|
|
<div class="text">
|
|
{@html componentDefinition?.info}
|
|
</div>
|
|
{/if}
|
|
</DetailSummary>
|
|
|
|
<style>
|
|
.text {
|
|
font-size: var(--spectrum-global-dimension-font-size-75);
|
|
color: var(--grey-6);
|
|
}
|
|
</style>
|