8a80d8801a
* refactoring server for screens & page layout restructure * Disable API calls, UI placeholders. * buildPropsHierarchy is gone & screen has url * Recent changes. * router * router * updated git-ignore to reinclude server/utilities/builder * modified cli - budi new create new file structure * Fix uuid import. * prettier fixes * prettier fixes * prettier fixes * page/screen restructure.. broken tests * all tests passing at last * screen routing tests * Working screen editor and preview. * Render page previews to the screen. * Key input lists to ensure new array references when updating styles. * Ensure the iframe html and body fills the container. * Save screens via the API. * Get all save APIs almost working. * Write pages.json to disk. * Use correct API endpoint for saving styles. * Differentiate between saving properties of screens and pages. * Add required fields to default pages layouts. * Add _css default property to newly created screens. * Add default code property. * page layout / screens - app output Co-authored-by: pngwn <pnda007@gmail.com>
60 lines
1.3 KiB
Svelte
60 lines
1.3 KiB
Svelte
<script>
|
|
import { last } from "lodash/fp"
|
|
import { pipe } from "../common/core"
|
|
|
|
export let components = []
|
|
export let currentComponent
|
|
export let onSelect = () => {}
|
|
export let level = 0
|
|
|
|
const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
|
|
const get_name = s => last(s.split("/"))
|
|
|
|
const get_capitalised_name = name =>
|
|
pipe(
|
|
name,
|
|
[get_name, capitalise]
|
|
)
|
|
</script>
|
|
|
|
<ul>
|
|
{#each components as component}
|
|
<li on:click|stopPropagation={() => onSelect(component)}>
|
|
<span
|
|
class="item"
|
|
class:selected={currentComponent === component}
|
|
style="padding-left: {level * 20 + 67}px">
|
|
{get_capitalised_name(component._component)}
|
|
</span>
|
|
|
|
{#if component._children}
|
|
<svelte:self
|
|
components={component._children}
|
|
{currentComponent}
|
|
{onSelect}
|
|
level={level + 1} />
|
|
{/if}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<style>
|
|
ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin: 0;
|
|
}
|
|
.item {
|
|
display: block;
|
|
padding: 11px 67px;
|
|
border-radius: 3px;
|
|
}
|
|
.item:hover {
|
|
background: #fafafa;
|
|
cursor: pointer;
|
|
}
|
|
.selected {
|
|
color: var(--button-text);
|
|
background: var(--background-button) !important;
|
|
}
|
|
</style>
|