mirror of
https://github.com/TxtDot/vigi.git
synced 2025-02-22 20:23:15 +03:00
feat: dalet renderer
This commit is contained in:
parent
42762f591c
commit
48f4a63b6b
10 changed files with 102 additions and 18 deletions
18
src/lib/components/BrowserWindow.svelte
Normal file
18
src/lib/components/BrowserWindow.svelte
Normal 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>
|
15
src/lib/components/DaletlRenderer/BodyRenderer.svelte
Normal file
15
src/lib/components/DaletlRenderer/BodyRenderer.svelte
Normal 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}
|
10
src/lib/components/DaletlRenderer/Renderer.svelte
Normal file
10
src/lib/components/DaletlRenderer/Renderer.svelte
Normal 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}
|
10
src/lib/components/DaletlRenderer/TagRenderer.svelte
Normal file
10
src/lib/components/DaletlRenderer/TagRenderer.svelte
Normal 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}
|
8
src/lib/components/DaletlRenderer/tags/Element.svelte
Normal file
8
src/lib/components/DaletlRenderer/tags/Element.svelte
Normal 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>
|
16
src/lib/components/Sidebar.svelte
Normal file
16
src/lib/components/Sidebar.svelte
Normal 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>
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue