@scalar/api-client
Version:
the open source API testing client
334 lines (333 loc) • 11 kB
JavaScript
import { defineComponent as se, ref as U, computed as M, onMounted as ie, onBeforeUnmount as ne, watch as x, createElementBlock as J, unref as e, openBlock as E, normalizeClass as D, createElementVNode as a, createVNode as r, withCtx as d, createTextVNode as W, toDisplayString as G, createBlock as H } from "vue";
import { useLoadingState as re, ScalarButton as m, ScalarHotkey as A } from "@scalar/components";
import { debounce as le } from "@scalar/helpers/general/debounce";
import { isObject as z } from "@scalar/helpers/object/is-object";
import { ScalarIconArrowsIn as ce, ScalarIconArrowsOut as ue } from "@scalar/icons";
import * as u from "monaco-editor/esm/vs/editor/editor.api.js";
import { useEditorMarkers as de } from "./hooks/use-editor-markers.js";
import me from "./components/EditorDiagnosticsPanel.vue.js";
import fe from "./components/EditorSavePanel.vue.js";
import { getDiagnosticCounts as ve } from "./helpers/get-diagnostic-counts.js";
import { getOperationContext as T } from "./helpers/get-operation-context.js";
import { getVisibleDiagnostics as pe } from "./helpers/get-visible-diagnostics.js";
import { parseEditorObject as I } from "./helpers/parse-editor-object.js";
import { stringifyDocument as B } from "./helpers/stringify-document.js";
import { useEditor as ge } from "./hooks/use-editor.js";
import { useEditorState as he } from "./hooks/use-editor-state.js";
const ye = { class: "grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3" }, xe = { class: "flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap" }, we = { class: "text-c-3 ml-2 text-[11px]" }, Se = { class: "text-c-3 ml-2 text-[11px]" }, be = {
"aria-label": "Editor language",
class: "bg-b-1 shadow-border flex items-center justify-self-center overflow-hidden rounded-lg p-0.5",
role: "tablist"
}, ke = { class: "flex min-w-0 shrink-0 items-center gap-2 justify-self-end" }, Ee = { class: "text-c-3 ml-2 text-[11px]" }, De = { class: "text-c-3 ml-2 text-[11px]" }, Ce = { class: "flex min-h-0 w-full min-w-0 flex-1 rounded-lg border" }, Oe = { class: "pointer-events-none absolute top-2 right-2 z-10" }, Me = { key: 1 }, Ae = 6, X = "editor:replace-document", Je = /* @__PURE__ */ se({
__name: "Editor",
props: {
documentSlug: {},
document: {},
eventBus: {},
layout: {},
path: {},
method: {},
exampleName: {},
environment: {},
securitySchemes: {},
workspaceStore: {},
activeWorkspace: {},
plugins: {},
customThemes: {},
currentTheme: {},
isDarkMode: { type: Boolean },
collectionType: {}
},
setup(s) {
const K = U(), n = U(), w = re(), {
isAutoSaveEnabled: f,
isDirty: l,
editorLanguage: c,
isDiagnosticsPaneExpanded: S,
isEditorMaximized: b,
isYamlMode: v,
editorBottomPadding: q,
editorRootClass: Q,
getLanguageToggleClass: N,
toggleEditorMaximized: Z
} = he(), _ = M(() => n.value?.editor), { markers: C } = de(_), V = () => {
n.value?.editor.updateOptions({
padding: {
top: 0,
bottom: q.value
}
});
}, ee = M(() => ve(C.value)), te = M(
() => pe(C.value, Ae)
), L = (o) => {
n.value?.setCursorToMarker(o);
}, k = () => n.value?.getValue?.() ?? null, oe = async () => {
const o = await s.workspaceStore.getEditableDocument(s.documentSlug);
return B(o, c.value);
}, p = le({ delay: 1500 }), P = (o) => {
p.cleanup(), n.value?.setValue(o, !0);
}, j = async () => {
P(await oe()), l.value = !1, await g();
}, F = async () => {
await n.value?.formatDocument();
}, g = async () => {
const o = T(s.path, s.method);
o && await n.value?.focusPath([
"paths",
o.path,
o.method
]);
}, O = async (o) => {
const t = I(o, c.value);
if (!t) {
const i = C.value.find(
(h) => h.severity === u.MarkerSeverity.Error
);
i && L(i), await w.invalidate();
return;
}
w.start(), await s.workspaceStore.replaceDocument(s.documentSlug, t), l.value = !1, await w.validate({ duration: 900 });
}, R = async () => {
const o = k();
o && await O(o);
}, ae = (o) => {
l.value = !0, f.value && p.execute(
X,
() => O(o)
);
}, $ = async () => {
const o = T(s.path, s.method);
if (!o)
return;
const t = k();
if (!t)
return;
const i = I(t, c.value);
if (!i || !z(i.paths))
return;
const y = i.paths[o.path];
if (!z(y))
return;
const Y = y[o.method];
z(Y) && (Y.servers ??= [], n.value?.setValue(B(i, c.value)), await n.value?.focusPath([
"paths",
o.path,
o.method,
"servers"
]));
};
return ie(() => {
n.value = ge({
element: K.value ?? document.createElement("div"),
onChange: ae,
isDarkMode: s.isDarkMode,
theme: s.currentTheme,
language: c.value,
actions: [
{
id: "scalar.editor.focusOperation",
label: "Focus Operation",
keybindings: [u.KeyMod.Alt | u.KeyCode.KeyO],
run: async () => {
await g();
}
},
{
id: "scalar.editor.focusOperationServers",
label: "Focus Operation Servers",
keybindings: [u.KeyMod.Alt | u.KeyCode.KeyS],
run: async () => {
await $();
}
},
{
id: "scalar.editor.formatDocument",
label: "Format Document",
keybindings: [
u.KeyMod.Alt | u.KeyMod.Shift | u.KeyCode.KeyF
],
run: async () => {
await F();
}
}
]
}), V(), j();
}), ne(() => {
p.cleanup(), l.value && f.value && R(), n.value?.dispose?.();
}), x(() => s.documentSlug, j), x(
() => [s.path, s.method],
async () => {
await g();
}
), x(S, () => {
V();
}), x(c, async (o, t) => {
const i = l.value;
n.value?.setLanguage(o);
const h = k();
if (!h)
return;
const y = I(h, t);
y && (P(B(y, o)), l.value = i), await g();
}), x(
f,
(o) => {
if (!o) {
p.cleanup();
return;
}
if (l.value) {
const t = k();
if (!t)
return;
p.execute(
X,
() => O(t)
);
}
},
{ flush: "post" }
), (o, t) => s.collectionType === "operation" && e(T)(s.path, s.method) !== null ? (E(), J("div", {
key: 0,
class: D(["flex w-full min-w-0 flex-1 flex-col gap-2", e(Q)])
}, [
a("div", ye, [
a("div", xe, [
t[6] || (t[6] = a("span", { class: "text-c-2 text-xs font-medium whitespace-nowrap" }, " Shortcuts ", -1)),
r(e(m), {
class: "whitespace-nowrap",
size: "xs",
variant: "ghost",
onClick: g
}, {
default: d(() => [
t[4] || (t[4] = a("span", null, "Operation", -1)),
a("span", we, [
r(e(A), {
hotkey: "O",
modifier: ["Alt"]
})
])
]),
_: 1
}),
r(e(m), {
class: "whitespace-nowrap",
size: "xs",
variant: "ghost",
onClick: $
}, {
default: d(() => [
t[5] || (t[5] = a("span", null, "Servers", -1)),
a("span", Se, [
r(e(A), {
hotkey: "S",
modifier: ["Alt"]
})
])
]),
_: 1
})
]),
a("div", be, [
r(e(m), {
"aria-selected": !e(v),
class: D(e(N)(!e(v))),
role: "tab",
size: "xs",
type: "button",
variant: "ghost",
onClick: t[0] || (t[0] = (i) => c.value = "json")
}, {
default: d(() => [...t[7] || (t[7] = [
W(" JSON ", -1)
])]),
_: 1
}, 8, ["aria-selected", "class"]),
r(e(m), {
"aria-selected": e(v),
class: D(e(N)(e(v))),
role: "tab",
size: "xs",
type: "button",
variant: "ghost",
onClick: t[1] || (t[1] = (i) => c.value = "yaml")
}, {
default: d(() => [...t[8] || (t[8] = [
W(" YAML ", -1)
])]),
_: 1
}, 8, ["aria-selected", "class"])
]),
a("div", ke, [
r(e(m), {
size: "xs",
variant: "ghost",
onClick: F
}, {
default: d(() => [
a("span", null, "Format " + G(e(v) ? "YAML" : "JSON"), 1),
a("span", Ee, [
r(e(A), {
hotkey: "F",
modifier: ["Alt", "Shift"]
})
])
]),
_: 1
}),
r(e(m), {
"aria-label": e(b) ? "Restore editor size" : "Maximize editor",
size: "xs",
variant: "ghost",
onClick: e(Z)
}, {
default: d(() => [
a("span", null, G(e(b) ? "Restore" : "Maximize"), 1),
a("span", De, [
e(b) ? (E(), H(e(ce), {
key: 0,
class: "size-3.5"
})) : (E(), H(e(ue), {
key: 1,
class: "size-3.5"
}))
])
]),
_: 1
}, 8, ["aria-label", "onClick"])
])
]),
a("div", Ce, [
a("div", {
class: D(["relative w-full min-w-0 flex-1", e(b) ? "h-full min-h-0" : "h-[500px]"])
}, [
a("div", Oe, [
r(fe, {
isAutoSaveEnabled: e(f),
isDirty: e(l),
saveLoader: e(w),
onSaveNow: R,
"onUpdate:isAutoSaveEnabled": t[2] || (t[2] = (i) => f.value = i)
}, null, 8, ["isAutoSaveEnabled", "isDirty", "saveLoader"])
]),
r(me, {
diagnosticCounts: ee.value,
expanded: e(S),
visibleDiagnostics: te.value,
onFocusDiagnostic: L,
onToggle: t[3] || (t[3] = (i) => S.value = !e(S))
}, null, 8, ["diagnosticCounts", "expanded", "visibleDiagnostics"]),
a("div", {
ref_key: "monacoEditorRef",
ref: K,
class: "h-full w-full min-w-0 flex-1"
}, null, 512)
], 2)
])
], 2)) : (E(), J("div", Me, "No operation context found"));
}
});
export {
Je as default
};