You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.5 KiB
60 lines
1.5 KiB
<script lang="ts">
|
|
// One view of extension data (hexadecimal, text or informative CBOR) as a
|
|
// disclosure. Long data starts collapsed, and its text is only put in the
|
|
// DOM once the view is opened: a PUBLIC_HEADER may hold up to 1 MiB of
|
|
// extension data. The content is Svelte text interpolation, so it is always
|
|
// escaped.
|
|
import type { Snippet } from 'svelte';
|
|
|
|
let {
|
|
content,
|
|
openInitially,
|
|
summary,
|
|
kind,
|
|
}: {
|
|
content: string;
|
|
openInitially: boolean;
|
|
/** The text of the summary line. */
|
|
summary: Snippet;
|
|
/** hex breaks anywhere; text and cbor keep their lines. */
|
|
kind: 'hex' | 'text' | 'cbor';
|
|
} = $props();
|
|
|
|
// undefined until the reader toggles the view.
|
|
let toggled: boolean | undefined = $state();
|
|
const open = $derived(toggled ?? openInitially);
|
|
</script>
|
|
|
|
<details class="view" {open} ontoggle={(e) => (toggled = e.currentTarget.open)}>
|
|
<summary>{@render summary()}</summary>
|
|
{#if open}
|
|
<pre class={kind}>{content}</pre>
|
|
{/if}
|
|
</details>
|
|
|
|
<style>
|
|
.view {
|
|
margin-top: 0.9rem;
|
|
}
|
|
summary {
|
|
cursor: pointer;
|
|
width: fit-content;
|
|
padding-block: 0.2rem;
|
|
font-size: var(--t-small);
|
|
font-weight: 600;
|
|
}
|
|
pre {
|
|
margin-top: 0.35rem;
|
|
font-size: 0.82rem;
|
|
line-height: 1.55;
|
|
padding: 0.6rem 0.75rem;
|
|
background: var(--paper-2);
|
|
border-radius: var(--radius);
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.hex {
|
|
word-break: break-all;
|
|
}
|
|
</style>
|