aboutsummaryrefslogtreecommitdiff
path: root/source/library/components/HeadersEditor.svelte
diff options
context:
space:
mode:
authornetop://ウィビ <paul@webb.page>2026-04-24 11:33:25 -0700
committernetop://ウィビ <paul@webb.page>2026-04-24 11:33:25 -0700
commit8a59f92d031963e23ecc84b75feecf43eb4dd146 (patch)
tree75de5768885583897061a3b1795e4c987ce90039 /source/library/components/HeadersEditor.svelte
downloadgraphiql-8a59f92d031963e23ecc84b75feecf43eb4dd146.tar.gz
graphiql-8a59f92d031963e23ecc84b75feecf43eb4dd146.zip
Initial commit: @eol/graphiql v0.3
Svelte 5 GraphiQL alternative for JSR. Covers: - HTTP fetcher with injectable fetch; SSE/WS stubs - Session store with tabs, auto-titling, persistence, rename - Operation detection via graphql parse(); Toolbar picker - CodeMirror 6 editor via cm6-graphql with theme prop - Light theme preset (hand-rolled EditorView.theme) - Doc explorer with breadcrumb nav and type guards - History panel with 100-entry cap, favorite pinning - Deno tests for operations, storage, and history eviction
Diffstat (limited to 'source/library/components/HeadersEditor.svelte')
-rw-r--r--source/library/components/HeadersEditor.svelte34
1 files changed, 34 insertions, 0 deletions
diff --git a/source/library/components/HeadersEditor.svelte b/source/library/components/HeadersEditor.svelte
new file mode 100644
index 0000000..fc3a193
--- /dev/null
+++ b/source/library/components/HeadersEditor.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+ import Editor from "./Editor.svelte";
+ import type { Extension } from "@codemirror/state";
+
+ type Props = {
+ onChange: (value: string) => void;
+ theme?: Extension;
+ value: string;
+ };
+
+ let { onChange, theme, value }: Props = $props();
+</script>
+
+<style lang="scss">
+ .headers {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ height: 100%;
+ min-height: 0;
+ }
+
+ .label {
+ background-color: var(--graphiql-panel, #252526);
+ font-size: 0.75rem;
+ letter-spacing: 0.05em;
+ padding: 0.25rem 0.75rem;
+ text-transform: uppercase;
+ }
+</style>
+
+<div class="headers">
+ <div class="label">Headers</div>
+ <Editor language="json" {onChange} {theme} {value}/>
+</div>