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