diff options
| author | netop://ウィビ <paul@webb.page> | 2026-04-24 11:33:25 -0700 |
|---|---|---|
| committer | netop://ウィビ <paul@webb.page> | 2026-04-24 11:33:25 -0700 |
| commit | 8a59f92d031963e23ecc84b75feecf43eb4dd146 (patch) | |
| tree | 75de5768885583897061a3b1795e4c987ce90039 /source/library/components/HeadersEditor.svelte | |
| download | graphiql-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.svelte | 34 |
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> |