@scalar/api-client
Version:
the open source API testing client
173 lines (172 loc) • 6.98 kB
JavaScript
import { defineComponent as M, ref as N, computed as E, watch as $, createBlock as p, openBlock as l, unref as s, withCtx as f, createElementVNode as m, createVNode as u, createElementBlock as r, createTextVNode as I, createCommentVNode as v, withKeys as C, withModifiers as h, Fragment as S, renderList as O, withDirectives as K, toDisplayString as _, vShow as R, normalizeClass as V, resolveDynamicComponent as X, mergeProps as A, nextTick as Q } from "vue";
import { Dialog as F, DialogPanel as q, DialogTitle as H } from "@headlessui/vue";
import { ScalarIcon as y } from "@scalar/components";
import { useRouter as W } from "vue-router";
import j from "./CommandPaletteDocument.vue.js";
import G from "./CommandPaletteExample.vue.js";
import J from "./CommandPaletteImport.vue.js";
import U from "./CommandPaletteImportCurl.vue.js";
import Y from "./CommandPaletteRequest.vue.js";
import Z from "./CommandPaletteTag.vue.js";
const ee = {
key: 0,
class: "custom-scroll max-h-[50dvh] min-h-0 flex-1 rounded-lg p-1.5"
}, te = { 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)" }, oe = { for: "commandmenu" }, ae = ["value", "onKeydown"], ne = ["id", "onClick"], le = {
key: 0,
class: "text-c-3 p-2 pt-3 text-center text-sm"
}, re = {
key: 1,
class: "flex-1 p-1.5"
}, se = {}, ke = /* @__PURE__ */ M({
...se,
__name: "TheCommandPalette",
props: {
paletteState: {},
workspaceStore: {},
eventBus: {}
},
setup(a) {
const D = {
"import-from-openapi-swagger-postman-curl": J,
"create-document": j,
"create-request": Y,
"add-tag": Z,
"add-example": G,
"import-curl-command": U
}, T = W(), i = N(-1), k = N(null), c = E(
() => a.paletteState.filteredCommands.value.flatMap((e) => e.commands)
), d = E(
() => c.value[i.value]
);
$(
() => a.paletteState.filterQuery.value,
(e) => {
i.value = e && c.value.length > 0 ? 0 : -1;
}
);
const B = (e) => {
a.paletteState.setFilterQuery(e), e.trim().toLowerCase().startsWith("curl") && a.paletteState.open("import-curl-command", { curl: e });
}, b = (e, t) => {
if (!a.paletteState.isOpen.value)
return;
t.preventDefault();
const o = e === "up" ? -1 : 1, n = c.value.length;
i.value = (i.value + o + n) % n;
}, P = (e) => {
!d.value || a.paletteState.activeCommand.value || (e.preventDefault(), e.stopPropagation(), x(d.value));
}, x = (e) => {
if (e.type === "route") {
T.push(e.to), w();
return;
}
e.type === "folder" && a.paletteState.open(e.id, void 0);
}, g = () => {
a.paletteState.reset(), Q(() => k.value?.focus());
}, z = () => {
a.paletteState.close();
}, L = (...e) => {
a.paletteState.open(...e);
}, w = () => {
a.paletteState.close(), i.value = -1;
};
return (e, t) => (l(), p(s(F), {
open: e.paletteState.isOpen.value,
onClose: w
}, {
default: f(() => [
t[4] || (t[4] = m("div", { class: "commandmenu-overlay z-overlay" }, null, -1)),
u(s(q), { class: "commandmenu z-overlay flex flex-col" }, {
default: f(() => [
u(s(H), { class: "sr-only" }, {
default: f(() => [...t[3] || (t[3] = [
I("API Client Command Menu", -1)
])]),
_: 1
}),
e.paletteState.activeCommand.value ? (l(), r("div", re, [
m("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: g
}, [
u(s(y), {
icon: "ChevronLeft",
size: "md",
thickness: "1.5"
})
]),
e.paletteState.activeCommand.value ? (l(), p(X(D[e.paletteState.activeCommand.value]), A({ key: 0 }, {
workspaceStore: e.workspaceStore,
eventBus: e.eventBus,
...e.paletteState.activeCommandProps.value
}, {
onBack: g,
onClose: z,
onOpenCommand: L
}), null, 16)) : v("", !0)
])) : (l(), r("div", ee, [
m("div", te, [
m("label", oe, [
u(s(y), {
class: "text-c-2 mr-2.5",
icon: "Search",
size: "md",
thickness: "1.5"
})
]),
m("input", {
id: "commandmenu",
ref_key: "commandInputRef",
ref: k,
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: e.paletteState.filterQuery.value,
onInput: t[0] || (t[0] = (o) => B(o.target.value)),
onKeydown: [
t[1] || (t[1] = C(h((o) => b("down", o), ["stop"]), ["down"])),
C(h(P, ["stop"]), ["enter"]),
t[2] || (t[2] = C(h((o) => b("up", o), ["stop"]), ["up"]))
]
}, null, 40, ae)
]),
(l(!0), r(S, null, O(e.paletteState.filteredCommands.value, (o) => (l(), r(S, {
key: o.label
}, [
K(m("div", { class: "text-c-3 mt-2 mb-1 px-2 text-xs font-medium" }, _(o.label), 513), [
[R, o.commands.length > 0]
]),
(l(!0), r(S, null, O(o.commands, (n) => (l(), r("button", {
id: n.id,
key: n.id,
class: V(["commandmenu-item hover:bg-b-2 flex w-full cursor-pointer items-center rounded px-2 py-1.5 text-left text-sm", {
"bg-b-2": n.id === d.value?.id
}]),
type: "button",
onClick: (ie) => x(n)
}, [
"icon" in n ? (l(), p(s(y), {
key: 0,
class: "text-c-2 mr-2.5",
icon: n.icon,
size: "md",
thickness: "1.5"
}, null, 8, ["icon"])) : v("", !0),
I(" " + _(n.name), 1)
], 10, ne))), 128))
], 64))), 128)),
e.paletteState.filteredCommands.value.length ? v("", !0) : (l(), r("div", le, " No commands found "))
]))
]),
_: 1
})
]),
_: 1
}, 8, ["open"]));
}
});
export {
ke as default
};