2021-11-26 14:25:02 +01:00
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
Body,
|
|
|
|
|
Layout,
|
|
|
|
|
Heading,
|
|
|
|
|
Button,
|
|
|
|
|
TextArea,
|
2022-02-24 16:36:21 +01:00
|
|
|
Tabs,
|
|
|
|
|
Tab,
|
|
|
|
|
Toggle,
|
2021-11-26 14:25:02 +01:00
|
|
|
} from "@budibase/bbui"
|
|
|
|
|
import { builderStore, devToolsStore, componentStore } from "stores"
|
|
|
|
|
import DevToolsStat from "./DevToolsStat.svelte"
|
2022-02-24 16:36:21 +01:00
|
|
|
import { getSettingsDefinition } from "utils/componentProps.js"
|
|
|
|
|
|
|
|
|
|
let showEnrichedSettings = true
|
2021-11-26 14:25:02 +01:00
|
|
|
|
|
|
|
|
$: selectedInstance = $componentStore.selectedComponentInstance
|
2022-02-24 16:36:21 +01:00
|
|
|
$: settingsDefinition = getSettingsDefinition(
|
|
|
|
|
$componentStore.selectedComponentDefinition
|
|
|
|
|
)
|
|
|
|
|
$: rawSettings = selectedInstance?.getRawSettings()
|
|
|
|
|
$: settings = selectedInstance?.getSettings()
|
2021-11-26 14:25:02 +01:00
|
|
|
|
|
|
|
|
$: {
|
|
|
|
|
if (!selectedInstance) {
|
|
|
|
|
builderStore.actions.selectComponent(null)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
{#if !$builderStore.selectedComponentId}
|
|
|
|
|
<Layout noPadding gap="S">
|
|
|
|
|
<Heading size="XS">Please choose a component</Heading>
|
|
|
|
|
<Body size="S">
|
|
|
|
|
Press the button below to enable component selection, then click a
|
|
|
|
|
component in your app to view what context values are available.
|
|
|
|
|
</Body>
|
|
|
|
|
<div>
|
|
|
|
|
<Button
|
|
|
|
|
cta
|
|
|
|
|
on:click={() => devToolsStore.actions.setAllowSelection(true)}
|
|
|
|
|
>
|
|
|
|
|
Choose component
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</Layout>
|
|
|
|
|
{:else}
|
|
|
|
|
<Layout noPadding>
|
|
|
|
|
<Layout noPadding gap="XS">
|
|
|
|
|
<DevToolsStat
|
|
|
|
|
label="Component"
|
|
|
|
|
value={$componentStore.selectedComponent?._instanceName}
|
|
|
|
|
/>
|
|
|
|
|
<DevToolsStat
|
|
|
|
|
label="Type"
|
|
|
|
|
value={$componentStore.selectedComponentDefinition?.name}
|
|
|
|
|
/>
|
|
|
|
|
<DevToolsStat label="ID" value={$componentStore.selectedComponent?._id} />
|
|
|
|
|
</Layout>
|
2022-02-24 16:36:21 +01:00
|
|
|
<div class="buttons">
|
2021-11-26 14:25:02 +01:00
|
|
|
<Button
|
|
|
|
|
cta
|
|
|
|
|
on:click={() => devToolsStore.actions.setAllowSelection(true)}
|
|
|
|
|
>
|
|
|
|
|
Change component
|
|
|
|
|
</Button>
|
2022-02-24 16:36:21 +01:00
|
|
|
<Button
|
|
|
|
|
quiet
|
|
|
|
|
secondary
|
|
|
|
|
on:click={() => builderStore.actions.selectComponent(null)}
|
|
|
|
|
>
|
|
|
|
|
Reset
|
|
|
|
|
</Button>
|
2021-11-26 14:25:02 +01:00
|
|
|
</div>
|
2022-02-24 16:36:21 +01:00
|
|
|
|
2021-11-26 14:25:02 +01:00
|
|
|
<div class="data">
|
|
|
|
|
<Layout noPadding gap="XS">
|
2022-02-24 16:36:21 +01:00
|
|
|
<Tabs selected="Settings">
|
|
|
|
|
<Tab title="Settings">
|
|
|
|
|
<div class="tab-content">
|
|
|
|
|
<Layout noPadding gap="S">
|
|
|
|
|
<Toggle
|
|
|
|
|
text="Show enriched settings"
|
|
|
|
|
bind:value={showEnrichedSettings}
|
|
|
|
|
/>
|
|
|
|
|
<Layout noPadding gap="XS">
|
|
|
|
|
{#each settingsDefinition as setting}
|
|
|
|
|
<DevToolsStat
|
|
|
|
|
label={setting.label}
|
|
|
|
|
value={JSON.stringify(
|
|
|
|
|
(showEnrichedSettings ? settings : rawSettings)?.[
|
|
|
|
|
setting.key
|
|
|
|
|
]
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
{/each}
|
|
|
|
|
</Layout>
|
|
|
|
|
</Layout>
|
|
|
|
|
</div>
|
|
|
|
|
</Tab>
|
|
|
|
|
<Tab title="Context">
|
|
|
|
|
<div class="tab-content">
|
|
|
|
|
<TextArea
|
|
|
|
|
readonly
|
|
|
|
|
label="Data context"
|
|
|
|
|
value={JSON.stringify(
|
|
|
|
|
selectedInstance?.getDataContext(),
|
|
|
|
|
null,
|
|
|
|
|
2
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</Tab>
|
|
|
|
|
</Tabs>
|
2021-11-26 14:25:02 +01:00
|
|
|
</Layout>
|
|
|
|
|
</div>
|
|
|
|
|
</Layout>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<style>
|
2022-02-24 16:36:21 +01:00
|
|
|
.buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
.data {
|
|
|
|
|
margin: 0 calc(-1 * var(--spacing-xl));
|
|
|
|
|
}
|
2021-11-26 14:25:02 +01:00
|
|
|
.data :global(.spectrum-Textfield-input) {
|
|
|
|
|
min-height: 200px !important;
|
|
|
|
|
white-space: pre;
|
|
|
|
|
font-size: var(--font-size-s);
|
|
|
|
|
}
|
2022-02-24 16:36:21 +01:00
|
|
|
.tab-content {
|
|
|
|
|
padding: 0 var(--spacing-xl);
|
|
|
|
|
}
|
2021-11-26 14:25:02 +01:00
|
|
|
</style>
|
