forked from
pds.ls/pdsls
atmosphere explorer
redesign lexicon schema tab
+99
-76
+99
-76
src/components/lexicon-schema.tsx
+99
-76
src/components/lexicon-schema.tsx
···
124
124
};
125
125
126
126
return (
127
-
<>
128
-
<Show when={props.refType}>
129
-
<button
130
-
type="button"
131
-
onClick={handleClick}
132
-
class="inline-block cursor-pointer truncate rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 hover:bg-blue-200 hover:underline active:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 dark:active:bg-blue-900/50"
133
-
>
134
-
{displayType}
135
-
</button>
136
-
</Show>
137
-
<Show when={!props.refType}>
138
-
<span class="inline-block rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
139
-
{displayType}
140
-
</span>
141
-
</Show>
142
-
</>
127
+
<Show
128
+
when={props.refType}
129
+
fallback={
130
+
<span class="font-mono text-xs text-neutral-600 dark:text-neutral-400">{displayType}</span>
131
+
}
132
+
>
133
+
<button
134
+
type="button"
135
+
onClick={handleClick}
136
+
class="inline-block cursor-pointer truncate font-mono text-xs text-blue-500 hover:underline dark:text-blue-400"
137
+
>
138
+
{displayType}
139
+
</button>
140
+
</Show>
143
141
);
144
142
};
145
143
146
144
const UnionBadges = (props: { refs: string[] }) => (
147
-
<div class="flex flex-wrap gap-2">
145
+
<div class="flex flex-col items-start gap-1">
148
146
<For each={props.refs}>{(refType) => <TypeBadge type="union" refType={refType} />}</For>
149
147
</div>
150
148
);
151
149
152
-
const ConstraintsList = (props: { property: LexiconProperty }) => (
153
-
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
154
-
<Show when={props.property.minLength !== undefined}>
155
-
<span>minLength: {props.property.minLength}</span>
156
-
</Show>
157
-
<Show when={props.property.maxLength !== undefined}>
158
-
<span>maxLength: {props.property.maxLength}</span>
159
-
</Show>
160
-
<Show when={props.property.maxGraphemes !== undefined}>
161
-
<span>maxGraphemes: {props.property.maxGraphemes}</span>
162
-
</Show>
163
-
<Show when={props.property.minGraphemes !== undefined}>
164
-
<span>minGraphemes: {props.property.minGraphemes}</span>
165
-
</Show>
166
-
<Show when={props.property.minimum !== undefined}>
167
-
<span>min: {props.property.minimum}</span>
168
-
</Show>
169
-
<Show when={props.property.maximum !== undefined}>
170
-
<span>max: {props.property.maximum}</span>
171
-
</Show>
172
-
<Show when={props.property.maxSize !== undefined}>
173
-
<span>maxSize: {props.property.maxSize}</span>
174
-
</Show>
175
-
<Show when={props.property.accept}>
176
-
<span>accept: [{props.property.accept!.join(", ")}]</span>
177
-
</Show>
178
-
<Show when={props.property.enum}>
179
-
<span>enum: [{props.property.enum!.join(", ")}]</span>
180
-
</Show>
181
-
<Show when={props.property.const}>
182
-
<span>const: {props.property.const?.toString()}</span>
183
-
</Show>
184
-
<Show when={props.property.default !== undefined}>
185
-
<span>default: {JSON.stringify(props.property.default)}</span>
186
-
</Show>
187
-
<Show when={props.property.knownValues}>
188
-
<span>knownValues: [{props.property.knownValues!.join(", ")}]</span>
189
-
</Show>
190
-
<Show when={props.property.closed}>
191
-
<span>closed: true</span>
192
-
</Show>
193
-
</div>
194
-
);
150
+
const ConstraintsList = (props: { property: LexiconProperty }) => {
151
+
const valueClass = "text-neutral-600 dark:text-neutral-400";
152
+
return (
153
+
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs">
154
+
<Show when={props.property.minLength !== undefined}>
155
+
<span>
156
+
minLength: <span class={valueClass}>{props.property.minLength}</span>
157
+
</span>
158
+
</Show>
159
+
<Show when={props.property.maxLength !== undefined}>
160
+
<span>
161
+
maxLength: <span class={valueClass}>{props.property.maxLength}</span>
162
+
</span>
163
+
</Show>
164
+
<Show when={props.property.maxGraphemes !== undefined}>
165
+
<span>
166
+
maxGraphemes: <span class={valueClass}>{props.property.maxGraphemes}</span>
167
+
</span>
168
+
</Show>
169
+
<Show when={props.property.minGraphemes !== undefined}>
170
+
<span>
171
+
minGraphemes: <span class={valueClass}>{props.property.minGraphemes}</span>
172
+
</span>
173
+
</Show>
174
+
<Show when={props.property.minimum !== undefined}>
175
+
<span>
176
+
min: <span class={valueClass}>{props.property.minimum}</span>
177
+
</span>
178
+
</Show>
179
+
<Show when={props.property.maximum !== undefined}>
180
+
<span>
181
+
max: <span class={valueClass}>{props.property.maximum}</span>
182
+
</span>
183
+
</Show>
184
+
<Show when={props.property.maxSize !== undefined}>
185
+
<span>
186
+
maxSize: <span class={valueClass}>{props.property.maxSize}</span>
187
+
</span>
188
+
</Show>
189
+
<Show when={props.property.accept}>
190
+
<span>
191
+
accept: <span class={valueClass}>[{props.property.accept!.join(", ")}]</span>
192
+
</span>
193
+
</Show>
194
+
<Show when={props.property.enum}>
195
+
<span>
196
+
enum: <span class={valueClass}>[{props.property.enum!.join(", ")}]</span>
197
+
</span>
198
+
</Show>
199
+
<Show when={props.property.const}>
200
+
<span>
201
+
const: <span class={valueClass}>{props.property.const?.toString()}</span>
202
+
</span>
203
+
</Show>
204
+
<Show when={props.property.default !== undefined}>
205
+
<span>
206
+
default: <span class={valueClass}>{JSON.stringify(props.property.default)}</span>
207
+
</span>
208
+
</Show>
209
+
<Show when={props.property.knownValues}>
210
+
<span>
211
+
knownValues: <span class={valueClass}>[{props.property.knownValues!.join(", ")}]</span>
212
+
</span>
213
+
</Show>
214
+
<Show when={props.property.closed}>
215
+
<span>
216
+
closed: <span class={valueClass}>true</span>
217
+
</span>
218
+
</Show>
219
+
</div>
220
+
);
221
+
};
195
222
196
223
const PropertyRow = (props: {
197
224
name: string;
···
217
244
return (
218
245
<div class="flex flex-col gap-2 py-3">
219
246
<Show when={!props.hideNameType}>
220
-
<div class="flex flex-wrap items-center gap-2">
221
-
<span class="font-mono text-sm font-semibold">{props.name}</span>
247
+
<div class="flex flex-wrap items-baseline gap-2">
248
+
<span class="font-semibold">{props.name}</span>
222
249
<Show when={!props.property.refs}>
223
250
<TypeBadge
224
251
type={props.property.type}
···
227
254
/>
228
255
</Show>
229
256
<Show when={props.property.refs}>
230
-
<span class="inline-block rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
231
-
union
232
-
</span>
257
+
<span class="font-mono text-xs text-neutral-600 dark:text-neutral-400">union</span>
233
258
</Show>
234
259
<Show when={props.required}>
235
260
<span class="text-xs font-semibold text-red-500 dark:text-red-400">required</span>
···
244
269
</Show>
245
270
<Show when={props.property.items}>
246
271
<div class="flex flex-col gap-2">
247
-
<div class="flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400">
248
-
<span class="font-semibold">items:</span>
272
+
<div class="flex items-baseline gap-2 text-xs">
273
+
<span class="font-medium">items:</span>
249
274
<Show when={!props.property.items!.refs}>
250
275
<TypeBadge
251
276
type={props.property.items!.type}
···
254
279
/>
255
280
</Show>
256
281
<Show when={props.property.items!.refs}>
257
-
<span class="inline-block rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
258
-
union
259
-
</span>
282
+
<span class="font-mono text-xs text-neutral-600 dark:text-neutral-400">union</span>
260
283
</Show>
261
284
</div>
262
285
<Show when={props.property.items!.refs}>
···
292
315
<button
293
316
type="button"
294
317
onClick={handleClick}
295
-
class="cursor-pointer rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 hover:bg-blue-200 hover:underline active:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 dark:active:bg-blue-900/50"
318
+
class="cursor-pointer font-mono text-xs text-blue-500 hover:underline dark:text-blue-400"
296
319
>
297
320
{props.nsid}
298
321
</button>
···
314
337
return (
315
338
<div class="flex flex-col gap-2 py-3">
316
339
<div class="flex flex-wrap items-center gap-2">
317
-
<span class="font-mono text-sm font-semibold">#{props.index + 1}</span>
340
+
<span class="font-semibold">#{props.index + 1}</span>
318
341
<span
319
342
class={`rounded px-1.5 py-0.5 font-mono text-xs font-semibold ${resourceColor(props.permission.resource)}`}
320
343
>
···
328
351
<span class="text-xs font-semibold text-neutral-500 dark:text-neutral-400">
329
352
Collections:
330
353
</span>
331
-
<div class="flex flex-wrap gap-1">
354
+
<div class="flex flex-col items-start gap-1">
332
355
<For each={props.permission.collection}>{(col) => <NsidLink nsid={col} />}</For>
333
356
</div>
334
357
</div>
···
356
379
<span class="text-xs font-semibold text-neutral-500 dark:text-neutral-400">
357
380
Lexicon Methods:
358
381
</span>
359
-
<div class="flex flex-wrap gap-1">
382
+
<div class="flex flex-col items-start gap-1">
360
383
<For each={props.permission.lxm}>{(method) => <NsidLink nsid={method} />}</For>
361
384
</div>
362
385
</div>
···
681
704
<For each={props.def.errors}>
682
705
{(error) => (
683
706
<div class="flex flex-col gap-1 py-2">
684
-
<div class="font-mono text-sm font-semibold">{error.name}</div>
707
+
<div class="font-semibold">{error.name}</div>
685
708
<Show when={error.description}>
686
709
<p class="text-sm text-neutral-700 dark:text-neutral-300">
687
710
{error.description}
···
738
761
<div class="flex gap-4 text-sm text-neutral-600 dark:text-neutral-400">
739
762
<span>
740
763
<span class="font-semibold">Lexicon version: </span>
741
-
<span class="font-mono">{props.schema.lexicon}</span>
764
+
<span>{props.schema.lexicon}</span>
742
765
</span>
743
766
</div>
744
767
<Show when={props.schema.description}>