1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
<script lang="ts">
/*** IMPORT ------------------------------------------- ***/
import type { Snippet } from "svelte";
/*** UTILITY ------------------------------------------ ***/
import type { OperationInfo } from "../graphql/operations.ts";
type Props = {
disabled: boolean;
docsAvailable?: boolean;
docsOpen?: boolean;
extras?: Snippet;
historyOpen?: boolean;
onFormat?: () => void;
onRun: () => void;
onSelectOperation?: (name: string | null) => void;
onToggleDocs?: () => void;
onToggleHistory?: () => void;
operationName?: string | null;
operations?: OperationInfo[];
running: boolean;
schemaLoading: boolean;
};
let {
disabled,
docsAvailable = false,
docsOpen = false,
extras,
historyOpen = false,
onFormat,
onRun,
onSelectOperation,
onToggleDocs,
onToggleHistory,
operationName = null,
operations = [],
running,
schemaLoading
}: Props = $props();
const namedOperations = $derived(operations.filter((o) => o.name !== null));
/*** HELPER ------------------------------------------- ***/
function onPick(event: Event) {
const value = (event.currentTarget as HTMLSelectElement).value;
onSelectOperation?.(value || null);
}
</script>
<style lang="scss">
.toolbar {
align-items: center;
background-color: var(--uchu-yang);
display: flex;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
}
.run,
.toggle {
align-items: center;
border: none;
display: flex;
flex-direction: row;
font-size: 0.8rem;
padding: 0.2rem 0.75rem 0.2rem 0.5rem;
&:not(:disabled) {
cursor: pointer;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
svg {
width: 1rem; height: 1rem;
fill: currentColor;
margin-right: 0.25rem;
}
}
.run {
background-color: var(--uchu-orange-5);
color: var(--uchu-yang);
&:hover:not(:disabled) {
color: var(--uchu-orange-1);
}
}
.hint {
color: var(--uchu-yin-5);
font-size: 0.75rem;
}
.picker {
border: none;
border-radius: 0;
font-size: 0.8rem;
padding: 0.2rem 0.75rem 0.2rem 0.5rem;
&:not(:focus-visible) {
background-color: var(--uchu-gray-1);
color: var(--uchu-yin-5);
}
&:focus-visible {
background-color: var(--uchu-orange-5);
color: var(--uchu-yang);
outline-color: var(--uchu-orange-5);
outline-offset: -1px;
outline-style: solid;
}
}
.spacer {
flex: 1;
}
.toggle {
background-color: var(--uchu-gray-1);
color: var(--uchu-yin-5);
&.active {
background-color: var(--uchu-yin);
color: var(--uchu-yang);
}
&:not(.active):hover:not(:disabled) {
color: var(--uchu-yin-8);
}
}
</style>
<div class="toolbar">
<button class="run" {disabled} onclick={onRun}>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 3.53711V20.4642L20.927 12.0006L4 3.53711Z"/>
</svg>
{running ? "Running…" : "Run"}
</button>
{#if namedOperations.length > 1}
<select
aria-label="Operation"
class="picker"
onchange={onPick}
value={operationName ?? ""}>
<option value="">Select operation…</option>
{#each namedOperations as op}
<option value={op.name}>{op.type} {op.name}</option>
{/each}
</select>
{/if}
{#if onFormat}
<button class="toggle" {disabled} onclick={onFormat} type="button">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.646 3.36267C20.0461 2.75178 19.7917 1.83922 19.7917 1H19.2083C19.2083 1.83575 18.9563 2.74893 18.3526 3.35264C17.7489 3.95635 16.8358 4.20833 16 4.20833V4.79167C16.8392 4.79167 17.7518 5.04611 18.3627 5.64596C18.9822 6.25433 19.2083 7.15499 19.2083 8H19.7917C19.7917 7.15156 20.0203 6.25159 20.6359 5.63594C21.2516 5.02029 22.1516 4.79167 23 4.79167V4.20833C22.155 4.20833 21.2543 3.98225 20.646 3.36267Z"/>
<path d="M2 13.75C5.03345 13.75 7.04641 14.4196 8.31342 15.6866C9.58043 16.9536 10.25 18.9666 10.25 22H11.75C11.75 18.9666 12.4196 16.9536 13.6866 15.6866C14.9536 14.4196 16.9666 13.75 20 13.75V12.25C16.9666 12.25 14.9536 11.5804 13.6866 10.3134C12.4196 9.04641 11.75 7.03345 11.75 4H10.25C10.25 7.03345 9.58043 9.04641 8.31342 10.3134C7.04641 11.5804 5.03345 12.25 2 12.25V13.75Z"/>
</svg>
Format
</button>
{/if}
{#if extras}{@render extras()}{/if}
{#if schemaLoading}
<span class="hint">Loading schema…</span>
{/if}
<span class="spacer"></span>
{#if onToggleHistory}
<button
aria-pressed={historyOpen}
class="toggle"
class:active={historyOpen}
onclick={onToggleHistory}
type="button">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 8C7 8.55228 6.55228 9 6 9C5.44772 9 5 8.55228 5 8C5 7.44772 5.44772 7 6 7C6.55228 7 7 7.44772 7 8Z"/>
<path d="M10 8C10 8.55228 9.55228 9 9 9C8.44772 9 8 8.55228 8 8C8 7.44772 8.44772 7 9 7C9.55228 7 10 7.44772 10 8Z"/>
<path d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z"/>
<path d="M2 4V20H11V18.5H3.5V5.5H20.5V9H22V4H2Z"/>
<path d="M13 16.75C14.6446 16.75 15.6575 17.114 16.2718 17.7282C16.886 18.3425 17.25 19.3554 17.25 21H18.75C18.75 19.3554 19.114 18.3425 19.7282 17.7282C20.3425 17.114 21.3554 16.75 23 16.75V15.25C21.3554 15.25 20.3425 14.886 19.7282 14.2718C19.114 13.6575 18.75 12.6446 18.75 11H17.25C17.25 12.6446 16.886 13.6575 16.2718 14.2718C15.6575 14.886 14.6446 15.25 13 15.25V16.75Z"/>
</svg>
History
</button>
{/if}
{#if onToggleDocs}
<button
aria-pressed={docsOpen}
class="toggle"
class:active={docsOpen}
disabled={!docsAvailable}
onclick={onToggleDocs}
type="button">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 4V5L16.5 6.5L18 9.5H19L20.5 6.5L21 6.25V21H3V3H15.5L13.5 4ZM7 16.5H14V15H7V16.5ZM7 12.75H10.5V11.25H7V12.75ZM12 12.75H17V11.25H12V12.75ZM7 9H13V7.5H7V9Z"/>
<path d="M18.5 1L19.4453 3.55468L22 4.5L19.4453 5.44532L18.5 8L17.5547 5.44532L15 4.5L17.5547 3.55468L18.5 1Z"/>
</svg>
Docs
</button>
{/if}
</div>
|