use the named layouts

docks66-json-schema
Yanick Champoux 2023-05-08 16:07:16 -04:00
parent 11cb2be3bd
commit 5b2a102bfe
45 changed files with 54 additions and 54 deletions

View File

@ -7,7 +7,7 @@
<div class="tabs in left-align">
<a
class="spaced"
class:active={currentPath.startsWith("/editor")}
class:active={!currentPath.startsWith("/about")}
href="/editor">Editor</a
>
<!--
@ -17,11 +17,6 @@
href="/import">Import</a
>
-->
<a
class="spaced"
class:active={currentPath.startsWith("/export")}
href="/export/print">Export</a
>
<a
class="spaced"
class:active={currentPath.startsWith("/about")}

View File

@ -1,27 +1,21 @@
<nav class="m l left">
<!-- set them as active -->
<a href="/editor">
<i>edit</i>
<span>editor</span>
</a>
<a href="/export/print">
<i>print</i>
<span>print</span>
</a>
<a href="/export/json">
<i>output</i>
<span>json</span>
<span>export</span>
</a>
<a href="/export/yaml">
<i>output</i>
<span>yaml</span>
<a href="/import">
<i>input</i>
<span>import</span>
</a>
<!-- TODO
<a>
<i>Quiz</i>
<span>See also</span>
</a>
<a>
<i>Format_List_Bulleted</i>
<span>Changelog</span>
</a>
-->
</nav>
<slot />

View File

@ -0,0 +1,11 @@
<Serialized data={$shipData} />
<script>
import { getContext } from "svelte";
import Serialized from "./Serialized.svelte";
const api = getContext("api");
let shipData = api.svelteStore;
</script>

View File

@ -6,16 +6,25 @@
on:error={copyError}>{copyLabel} <i>content_paste</i></button
>
<button on:click={handleSave}>download <i>download</i></button>
<div class="field suffix border">
<select bind:value={format}>
<option>json</option>
<option>yaml</option>
</select>
<i>arrow_drop_down</i>
</div>
</nav>
<pre><code>{data}</code></pre>
<pre><code>{serialized}</code></pre>
<a hidden {href} {download} bind:this={fileDownload} />
</article>
<script>
import { clipboard } from "$lib/actions/clipboard.js";
import yaml from "yaml";
export let data = "Loading...";
export let format;
export let data = {};
export let serialized = "Loading...";
export let format = "json";
let copyLabel = "clipboard";
@ -37,6 +46,14 @@
function handleSave() {
fileDownload?.click();
}
const serialize = async (data, format) => {
if (format === "json") return JSON.stringify(data, null, 2);
return yaml.stringify(data);
};
$: serialize(data, format).then((s) => (serialized = s));
</script>
<style>
@ -50,4 +67,15 @@
position: absolute;
right: 5em;
}
.my-switch {
display: flex;
align-items: center;
}
.my-switch > span {
display: inline-block;
font-size: var(--font-scale-10);
}
label {
margin: 0px 0.5rem;
}
</style>

View File

@ -1,4 +1,4 @@
import { render } from "@testing-library/svelte";
import { render, waitFor } from "@testing-library/svelte";
import "@testing-library/jest-dom";
import Serialized from "./Serialized.svelte";
@ -6,9 +6,8 @@ import Serialized from "./Serialized.svelte";
test("basic", () => {
const { getByText } = render(Serialized, {
props: {
data: "hello world",
format: "json",
data: { greeting: "hello world" },
},
});
expect(getByText("hello world")).toBeInTheDocument();
waitFor(() => expect(getByText("hello world")).toBeInTheDocument());
});

View File

@ -1,6 +0,0 @@
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
return {
format: params.format,
};
}

View File

@ -1,21 +0,0 @@
<Serialized data={serializedShip} format={data.format} />
<script>
import { getContext } from "svelte";
import Serialized from "./Serialized.svelte";
const api = getContext("api");
let shipData = api.svelteStore;
export let data;
const serialize = async (data, format) => {
if (format === "json") return JSON.stringify(data, null, 2);
return import("yaml").then(({ stringify }) => stringify(data));
};
let serializedShip;
$: serialize($shipData, data.format).then((s) => (serializedShip = s));
</script>