feat: dalet renderer

This commit is contained in:
Artemy Egorov 2024-07-28 22:39:55 +03:00
parent 42762f591c
commit 48f4a63b6b
10 changed files with 102 additions and 18 deletions

View file

@ -0,0 +1,18 @@
<script lang="ts">
import type { Root } from "@txtdot/dalet";
import Block from "./Block.svelte";
import Renderer from "./DaletlRenderer/Renderer.svelte";
export let data: Root;
export let isLoading = false;
</script>
<Block className="browser-window">
{#if isLoading && data.length === 0}
<div>Loading...</div>
{:else if !isLoading && data.length === 0}
<div>No data</div>
{:else}
<Renderer {data} />
{/if}
</Block>

View file

@ -0,0 +1,15 @@
<script lang="ts">
import type { Body } from "@txtdot/dalet";
import TagRenderer from "./TagRenderer.svelte";
import Element from "./tags/Element.svelte";
export let body: Body;
</script>
{#if typeof body === "string"}
<Element {body} />
{:else if body !== null}
{#each body as tag}
<TagRenderer {tag} />
{/each}
{/if}

View file

@ -0,0 +1,10 @@
<script lang="ts">
import type { Root } from "@txtdot/dalet";
import TagRenderer from "./TagRenderer.svelte";
export let data: Root = [];
</script>
{#each data as tag}
<TagRenderer {tag} />
{/each}

View file

@ -0,0 +1,10 @@
<script lang="ts">
import type { Tag } from "@txtdot/dalet";
import Element from "./tags/Element.svelte";
export let tag: Tag;
</script>
{#if tag.id === 0}
<Element body={tag.body} />
{/if}

View file

@ -0,0 +1,8 @@
<script lang="ts">
import type { Body, Tag } from "@txtdot/dalet";
import BodyRenderer from "../BodyRenderer.svelte";
export let body: Body;
</script>
<section class="el"><BodyRenderer {body} /></section>

View file

@ -0,0 +1,16 @@
<script>
import { slide } from "svelte/transition";
import Block from "./Block.svelte";
import WindowControls from "./WindowControls.svelte";
export let sidebarOpen = true;
</script>
<Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`} draggable>
{#if sidebarOpen}
<div transition:slide={{ axis: "x", duration: 100 }}>
<WindowControls />
</div>
{/if}
</Block>

View file

@ -7,7 +7,6 @@
import Block from "./Block.svelte";
import Button from "./Button.svelte";
export let onSidebarToggle = () => {};
export let onBack = () => {};
export let onForward = () => {};
export let onInput = () => {};
@ -20,7 +19,7 @@
<div class="top-bar">
<Block className="flex">
<Button onClick={onSidebarToggle}>
<Button onClick={() => (sidebarOpen = !sidebarOpen)}>
{#if sidebarOpen}
<SidebarLeft />
{:else}

View file

@ -1,12 +1,13 @@
<script lang="ts">
import "../app.css";
import Block from "$lib/components/Block.svelte";
import TopBar from "$lib/components/TopBar.svelte";
import WindowControls from "$lib/components/WindowControls.svelte";
import { slide } from "svelte/transition";
import Sidebar from "$lib/components/Sidebar.svelte";
import BrowserWindow from "$lib/components/BrowserWindow.svelte";
import type { Root } from "@txtdot/dalet";
let sidebarOpen = true;
let data: Root = [];
document.addEventListener("keypress", (e: KeyboardEvent) => {
const formElements = ["INPUT", "TEXTAREA", "SELECT", "OPTION"];
@ -18,19 +19,10 @@
</script>
<div class="common-window" data-tauri-drag-region>
<Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`} draggable>
{#if sidebarOpen}
<div transition:slide={{ axis: "x", duration: 100 }}>
<WindowControls />
</div>
{/if}
</Block>
<Sidebar bind:sidebarOpen />
<div class="main-window">
<TopBar
bind:sidebarOpen
onSidebarToggle={() => (sidebarOpen = !sidebarOpen)}
/>
<Block className="browser-window">Browser window</Block>
<TopBar bind:sidebarOpen />
<BrowserWindow {data} />
</div>
</div>