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