Studio: use accordions in SchemaBasedArray.svelte to make browsing more easy
This commit is contained in:
parent
f2e3888a56
commit
62944c3883
4 changed files with 39 additions and 26 deletions
|
@ -6,6 +6,7 @@
|
|||
import type { ConfigMeta } from "./configMeta"
|
||||
import EditLayerState from "./EditLayerState"
|
||||
import SchemaBasedInput from "./SchemaBasedInput.svelte"
|
||||
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
|
||||
|
||||
export let state: EditLayerState
|
||||
export let configs: ConfigMeta[]
|
||||
|
@ -25,15 +26,15 @@
|
|||
{:else if configs.length === 0}
|
||||
Bug: Region received empty list as configuration at {path.join(".")}
|
||||
{:else if title}
|
||||
<div class="flex w-full flex-col">
|
||||
<h3>{title}</h3>
|
||||
<AccordionSingle>
|
||||
<div slot="header">{title}</div>
|
||||
<div class="flex w-full flex-col gap-y-1 border border-black pl-2">
|
||||
<slot name="description" />
|
||||
{#each configsFiltered as config}
|
||||
<SchemaBasedInput {state} path={config.path} schema={config} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</AccordionSingle>
|
||||
{:else}
|
||||
<div class="flex w-full flex-col gap-y-1 pl-2">
|
||||
{#each configsFiltered as config}
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte"
|
||||
import ShowConversionMessage from "./ShowConversionMessage.svelte"
|
||||
import Markdown from "../Base/Markdown.svelte"
|
||||
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
|
||||
|
||||
export let state: EditLayerState
|
||||
export let schema: ConfigMeta
|
||||
|
@ -125,6 +126,8 @@
|
|||
{/each}
|
||||
{:else}
|
||||
{#each $currentValue as value, i}
|
||||
<AccordionSingle>
|
||||
<span slot="header">
|
||||
{#if !isTagRenderingBlock}
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="m-0">{singular} {i}</h3>
|
||||
|
@ -138,7 +141,9 @@
|
|||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="border border-black">
|
||||
</span>
|
||||
<div class="normal-background p-2">
|
||||
|
||||
{#if isTagRenderingBlock}
|
||||
<QuestionPreview {state} path={fusePath(i, [])} {schema}>
|
||||
<button
|
||||
|
@ -191,7 +196,10 @@
|
|||
<SchemaBasedInput {state} path={fusePath(i, [subpart.path.at(-1)])} schema={subpart} />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</AccordionSingle>
|
||||
|
||||
{/each}
|
||||
{/if}
|
||||
<div class="flex">
|
||||
|
|
|
@ -3,7 +3,11 @@ import StudioGUI from "./StudioGUI.svelte"
|
|||
|
||||
export default class StudioGui {
|
||||
public setup() {
|
||||
new SvelteUIElement(StudioGUI, {}).SetClass("h-full").AttachTo("main")
|
||||
new StudioGUI(
|
||||
{
|
||||
target: document.getElementById("main")
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<div id="main" class="h-full">Loading studio...</div>
|
||||
<div id="main" class="h-full"></div>
|
||||
<script src="./src/UI/StudioGui.ts" type="module"></script>
|
||||
<script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="https://gc.zgo.at/count.js" crossorigin="anonymous" integrity="sha384-QfJMxHNngbaF6IXH2kBwubsLYh7GVSFmJOX1O1YKJBq+zv1VVypB9BysTzyG1D1U"></script>
|
||||
|
||||
|
|
Loading…
Reference in a new issue