@scalar/api-client
Version:
the open source API testing client
307 lines (306 loc) • 10.9 kB
JavaScript
import { defineComponent as ee, ref as f, computed as z, watch as te, onMounted as oe, onBeforeUnmount as ne, createBlock as N, openBlock as l, unref as i, withCtx as R, createElementVNode as v, createVNode as k, createElementBlock as c, createTextVNode as U, createCommentVNode as ae, withKeys as A, withModifiers as S, Fragment as T, renderList as V, withDirectives as le, toDisplayString as O, vShow as re, normalizeClass as se, resolveDynamicComponent as me, mergeProps as ie, nextTick as _ } from "vue";
import { Dialog as ce, DialogPanel as ue, DialogTitle as de } from "@headlessui/vue";
import { useModal as pe, ScalarIcon as D } from "@scalar/components";
import { useRouter as fe } from "vue-router";
import { ROUTES as ve } from "../../constants.js";
import { importCurlCommand as Ce } from "../../libs/importers/curl.js";
import { PathId as L } from "../../routes.js";
import { useActiveEntities as he } from "../../store/active-entities.js";
import ke from "./CommandPaletteCollection.vue.js";
import xe from "./CommandPaletteExample.vue.js";
import ye from "./CommandPaletteImport.vue.js";
import ge from "./CommandPaletteImportCurl.vue.js";
import _e from "./CommandPaletteServer.vue.js";
import be from "./CommandPaletteTag.vue.js";
import we from "./CommandPaletteWorkspace.vue.js";
import { useWorkspace as Pe } from "../../store/store.js";
const Ie = {
key: 0,
class: "custom-scroll max-h-[50dvh] min-h-0 flex-1 rounded-lg p-1.5"
}, Re = { class: "bg-b-2 focus-within:bg-b-1 sticky top-0 flex items-center rounded-md border border-transparent pl-2 shadow-[0_-8px_0_8px_var(--scalar-background-1),0_0_8px_8px_var(--scalar-background-1)] focus-within:border-(--scalar-background-3)" }, Ae = { for: "commandmenu" }, Se = ["value", "onKeydown"], Te = ["onClick"], De = {
key: 0,
class: "text-c-3 p-2 pt-3 text-center text-sm"
}, Le = {
key: 1,
class: "flex-1 p-1.5"
}, Ee = {
name: "TheCommandPalette"
}, We = {
"Import from OpenAPI/Swagger/Postman/cURL": ye,
"Create Request": "",
"Create Workspace": we,
"Add Tag": be,
"Add Server": _e,
"Create Collection": ke,
"Add Example": xe,
"Import from cURL": ge
}, Ye = /* @__PURE__ */ ee({
...Ee,
setup(qe) {
const C = pe(), b = fe(), { activeWorkspace: x, activeWorkspaceCollections: F, activeCollection: G } = he(), { events: u, requestMutators: Q } = Pe(), E = [
{
label: "",
commands: [
{
name: "Import from OpenAPI/Swagger/Postman/cURL",
icon: "Import"
},
{
name: "Create Request",
icon: "ExternalLink"
},
{
name: "Create Collection",
icon: "Collection"
},
{
name: "Add Tag",
icon: "Folder"
},
{
name: "Add Example",
icon: "Example"
},
{
name: "Add Server",
icon: "Server"
}
]
},
{
label: "More Actions",
commands: [
{
name: "Create Workspace",
icon: "Workspace"
},
{
name: "Add Environment",
icon: "Brackets",
path: {
name: "environment.default",
params: {
[L.Workspace]: x?.value?.uid ?? "default"
},
query: { openEnvironmentModal: "true" }
}
},
{
name: "Add Cookie",
icon: "Cookie",
path: {
name: "cookies.default",
params: {
[L.Workspace]: x?.value?.uid ?? "default"
},
query: { openCookieModal: "true" }
}
}
]
},
{
label: "Pages",
commands: ve.map((e) => ({
name: e.displayName,
icon: e.icon,
path: b.resolve({
...e.to,
params: {
[L.Workspace]: x?.value?.uid ?? "default"
}
}).href
}))
}
], w = f(), r = f(""), s = f(null), m = f(-1), W = f([]), h = z(
() => E.reduce((e, t) => {
const o = t.commands.filter(
(n) => n.name.toLowerCase().includes(r.value.toLowerCase())
);
return [...e, ...o];
}, [])
), d = () => {
C.hide(), r.value = "", s.value = null, m.value = -1;
}, j = (e) => {
r.value !== "" && e?.preventDefault(), s.value = null, _(() => y.value?.focus());
}, q = (e) => {
if ("path" in e)
b.push(e.path), d();
else if (e.name === "Create Request") {
const t = F.value.find(
(o) => o.info?.title === "Drafts"
);
if (t) {
const o = Q.add({}, t.uid);
o && (b.push({
name: "request",
params: {
workspace: x.value?.uid,
request: o.uid
}
}), d(), _(() => {
u.hotKeys.emit({
focusAddressBar: new KeyboardEvent("keydown", { key: "l" })
});
}));
} else
d();
} else
s.value = e.name;
}, y = f(), M = ({
commandName: e,
metaData: t
} = {}) => {
s.value = e ?? null, w.value = t, C.show(), _(() => y.value?.focus());
};
te(r, (e) => {
e && h.value.length > 0 && (m.value = 0);
});
const B = (e, t) => {
if (!C.open) return;
t.preventDefault();
const o = e === "up" ? -1 : 1, n = h.value.length;
m.value = (m.value + o + n) % n, _(() => {
const a = y.value?.closest(".custom-scroll");
if (!a) return;
if (m.value === 0) {
a.scrollTop = 0;
return;
}
const p = W.value[m.value];
if (!p) return;
const g = (a.querySelector(".sticky")?.clientHeight || 0) + 16, K = 6, I = p.offsetTop, $ = I + p.clientHeight, Y = a.scrollTop + g, Z = a.scrollTop + a.clientHeight - K;
I < Y ? a.scrollTop = I - g : $ > Z && (a.scrollTop = $ - a.clientHeight + K);
});
}, P = z(
() => h.value[m.value]
), J = (e) => {
!P.value || s.value || (e.preventDefault(), e.stopPropagation(), q(P.value));
}, H = (e) => {
C.open && e?.closeModal && d();
}, X = (e) => {
if (e.trim().toLowerCase().startsWith("curl")) {
u.commandPalette.emit({
commandName: "Import from cURL",
metaData: {
parsedCurl: Ce(e),
collectionUid: G.value?.uid
}
});
return;
}
r.value = e;
};
return oe(() => {
u.commandPalette.on(M), u.hotKeys.on(H);
}), ne(() => {
u.commandPalette.off(M), u.hotKeys.off(H);
}), (e, t) => (l(), N(i(ce), {
open: i(C).open,
onClose: t[5] || (t[5] = (o) => d())
}, {
default: R(() => [
t[7] || (t[7] = v("div", { class: "commandmenu-overlay z-overlay" }, null, -1)),
k(i(ue), { class: "commandmenu z-overlay flex flex-col" }, {
default: R(() => [
k(i(de), { class: "sr-only" }, {
default: R(() => [...t[6] || (t[6] = [
U("API Client Command Menu", -1)
])]),
_: 1
}),
s.value ? (l(), c("div", Le, [
v("button", {
class: "hover:bg-b-3 text-c-3 active:text-c-1 absolute z-1 mt-[0.5px] rounded p-1.5",
type: "button",
onClick: t[3] || (t[3] = (o) => s.value = null)
}, [
k(i(D), {
icon: "ChevronLeft",
size: "md",
thickness: "1.5"
})
]),
(l(), N(me(We[s.value]), ie(w.value ? { metaData: w.value } : {}, {
onBack: t[4] || (t[4] = (o) => j(o)),
onClose: d
}), null, 16))
])) : (l(), c("div", Ie, [
v("div", Re, [
v("label", Ae, [
k(i(D), {
class: "text-c-2 mr-2.5",
icon: "Search",
size: "md",
thickness: "1.5"
})
]),
v("input", {
id: "commandmenu",
ref_key: "commandInputRef",
ref: y,
autocomplete: "off",
autofocus: "",
class: "w-full rounded border-none bg-none py-1.5 text-sm focus:outline-none",
placeholder: "Search commands...",
type: "text",
value: r.value,
onInput: t[0] || (t[0] = (o) => X(o.target.value)),
onKeydown: [
t[1] || (t[1] = A(S((o) => B("down", o), ["stop"]), ["down"])),
A(S(J, ["stop"]), ["enter"]),
t[2] || (t[2] = A(S((o) => B("up", o), ["stop"]), ["up"]))
]
}, null, 40, Se)
]),
(l(), c(T, null, V(E, (o) => (l(), c(T, {
key: o.label
}, [
le(v("div", { class: "text-c-3 mt-2 mb-1 px-2 text-xs font-medium" }, O(o.label), 513), [
[
re,
o.commands.filter(
(n) => n.name.toLowerCase().includes(r.value.toLowerCase())
).length > 0
]
]),
(l(!0), c(T, null, V(o.commands.filter(
(n) => n.name.toLowerCase().includes(r.value.toLowerCase())
), (n) => (l(), c("div", {
key: n.name,
ref_for: !0,
ref: (a) => {
if (a) {
const p = h.value.findIndex(
(g) => g.name === n.name
);
p !== -1 && (W.value[p] = a);
}
},
class: se(["commandmenu-item hover:bg-b-2 flex cursor-pointer items-center rounded px-2 py-1.5 text-sm", {
"bg-b-2": n.name === P.value?.name
}]),
onClick: (a) => q(n)
}, [
k(i(D), {
class: "text-c-2 mr-2.5",
icon: n.icon,
size: "md",
thickness: "1.5"
}, null, 8, ["icon"]),
U(" " + O(n.name), 1)
], 10, Te))), 128))
], 64))), 64)),
h.value.length ? ae("", !0) : (l(), c("div", De, " No commands found "))
]))
]),
_: 1
})
]),
_: 1
}, 8, ["open"]));
}
});
export {
We as PaletteComponents,
Ye as default
};