@scalar/api-client
Version:
the open source API testing client
371 lines (370 loc) • 13.9 kB
JavaScript
import { defineComponent as ge, useId as Se, reactive as ke, ref as K, watch as C, onMounted as Re, onBeforeUnmount as ye, computed as $, createElementBlock as h, openBlock as r, Fragment as D, withDirectives as xe, createBlock as u, createCommentVNode as m, createVNode as b, unref as t, normalizeClass as g, createSlots as we, withCtx as d, createElementVNode as i, createTextVNode as q, toDisplayString as U, withKeys as M, withModifiers as S, isRef as Ie, renderList as G, vShow as Ce } from "vue";
import { ScalarButton as $e, ScalarIcon as T, ScalarSidebarSearchInput as De, ScalarSearchResultList as qe, ScalarSearchResultItem as Me } from "@scalar/components";
import { LibraryIcon as Te } from "@scalar/icons/library";
import { useToasts as Pe } from "@scalar/use-toasts";
import { useRouter as _e } from "vue-router";
import Ve from "../../assets/rabbit.ascii.js";
import Ee from "../../assets/rabbitjump.ascii.js";
import Le from "../../components/EnvironmentSelector/EnvironmentSelector.vue.js";
import Ne from "../../components/HttpMethod/HttpMethod.vue.js";
import j from "../../components/ScalarAsciiArt.vue.js";
import { useSearch as Oe } from "../../components/Search/useSearch.js";
import ze from "../../components/Sidebar/SidebarButton.vue.js";
import { useLayout as Be } from "../../hooks/useLayout.js";
import { useSidebar as Fe } from "../../hooks/useSidebar.js";
import { PathId as J } from "../../routes.js";
import { useActiveEntities as We } from "../../store/active-entities.js";
import { createInitialRequest as Ae } from "../../store/requests.js";
import { dragHandlerFactory as He } from "./handle-drag.js";
import Ke from "./RequestSidebarItemMenu.vue.js";
import { isGettingStarted as Ue } from "./RequestSection/helpers/getting-started.js";
import Ge from "./RequestSidebarItem.vue.js";
import je from "../../components/Sidebar/Sidebar.vue.js";
import Je from "./components/WorkspaceDropdown.vue.js";
import { useWorkspace as Qe } from "../../store/store.js";
const Xe = { class: "bg-b-1 sticky top-0 z-20 flex h-12 items-center px-3" }, Ye = {
key: 1,
class: "text-c-3"
}, Ze = ["aria-pressed"], et = { class: "sr-only" }, tt = {
key: 0,
class: "search-button-fade sticky top-12 z-10 px-3 py-2.5 pt-0 focus-within:z-20",
role: "search"
}, ot = {
key: 1,
class: "contents"
}, st = {
key: 0,
class: "empty-sidebar-item-content px-2.5 py-2.5"
}, at = { class: "rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]" }, Mt = /* @__PURE__ */ ge({
__name: "RequestSidebar",
emits: ["newTab", "clearDrafts"],
setup(rt, { emit: Q }) {
const X = Q, {
collapsedSidebarFolders: Y,
isSidebarOpen: P,
setCollapsedSidebarFolder: Z,
toggleSidebarOpen: ee
} = Fe(), { layout: n } = Be(), _ = Qe(), {
activeCollection: V,
activeWorkspaceCollections: c,
activeRequest: te,
activeWorkspaceRequests: E,
activeWorkspace: oe
} = We(), { findRequestParents: se, events: R, requestMutators: L, requests: x } = _, { handleDragEnd: ae, isDroppable: re } = He(
oe,
_
), { replace: N } = _e(), le = () => {
R.commandPalette.emit({
commandName: "Import from OpenAPI/Swagger/Postman/cURL"
});
}, O = Se(), { toast: ne } = Pe(), k = ke({ open: !1 }), f = K(!1);
C(
te,
(s) => {
s && se(s).forEach(
(e) => Z(e, !0)
);
},
{ immediate: !0 }
);
const {
searchText: p,
searchResultsWithPlaceholderResults: w,
selectedSearchResult: I,
onSearchResultClick: ie,
fuseSearch: ue,
searchInputRef: z,
searchResultRefs: ce,
navigateSearchResults: B,
selectSearchResult: de
} = Oe(), F = K(), W = (s) => {
var e;
s && (s.toggleSidebar && ee(), s.focusRequestSearch && ((e = z.value) == null || e.focus()));
};
Re(() => R.hotKeys.on(W)), ye(() => {
R.hotKeys.off(W);
});
const me = (s) => {
if (s != null && s.documentUrl) {
s.watchMode = !s.watchMode;
const e = c.value.find(
(o) => o.uid === s.entity.uid
);
e && (e.watchMode = s.watchMode);
}
};
C(
() => c.value.map(
(s) => s.watchMode
),
(s, e) => {
s.forEach((o, a) => {
var l, v, A;
if (n !== "modal" && o !== e[a] && ((v = (l = c.value[a]) == null ? void 0 : l.info) == null ? void 0 : v.title) !== "Drafts" && c.value[a]) {
const H = c.value[a];
if (!H)
return;
const be = `${(A = H.info) == null ? void 0 : A.title}: Watch Mode ${o ? "enabled" : "disabled"}`;
ne(be, "info");
}
});
}
);
const fe = $(() => {
var v;
const s = w.value;
if (!s.length)
return "No results found";
const e = (v = s[I.value]) == null ? void 0 : v.item;
if (!e)
return "No result selected";
const o = p.value.length ? `${s.length} result${s.length === 1 ? "" : "s"} found, ` : "", a = `, HTTP Method ${e.httpVerb}, Path ${e.path}`, l = `${e.title} ${a}`;
return `${o}Selected: ${l}`;
}), pe = () => {
const s = c.value.find(
(o) => {
var a;
return ((a = o.info) == null ? void 0 : a.title) === "Drafts";
}
);
if (s && s.requests.forEach((o) => {
x[o] && L.delete(x[o], s.uid);
}), E.value.length) {
const o = c.value[0], a = o == null ? void 0 : o.requests[0];
a && N({
name: "request",
params: {
[J.Request]: a
}
});
} else {
const { request: o } = Ae();
s && (L.add(o, s.uid), N({
name: "request",
params: {
[J.Request]: o.uid
}
}));
}
};
C(f, (s) => {
s || (p.value = "");
});
const y = $(
() => Ue(
c.value,
E.value,
x
)
), ve = $(() => n === "modal" && V.value ? [V.value] : c.value);
function he(s) {
!p.value && s.relatedTarget !== F.value && (f.value = !1);
}
return (s, e) => (r(), h(D, null, [
xe(b(t(je), {
class: g([t(P) ? "sidebar-active-width" : ""])
}, we({
content: d(() => [
i("div", Xe, [
i("div", {
class: g(["size-8", { "xl:hidden": t(n) !== "modal" }])
}, null, 2),
t(n) !== "modal" ? (r(), u(t(Je), { key: 0 })) : m("", !0),
t(n) !== "modal" ? (r(), h("span", Ye, " / ")) : m("", !0),
t(n) !== "modal" ? (r(), u(Le, { key: 2 })) : m("", !0),
i("button", {
ref_key: "searchToggleRef",
ref: F,
"aria-pressed": f.value,
class: "ml-auto",
type: "button",
onClick: e[0] || (e[0] = (o) => f.value = !f.value)
}, [
i("span", et, U(f.value ? "Hide" : "Show") + " search ", 1),
b(t(T), {
class: "text-c-3 hover:bg-b-2 max-h-8 max-w-8 rounded-lg p-1.75 text-sm",
icon: "Search"
})
], 8, Ze)
]),
f.value ? (r(), h("div", tt, [
b(t(De), {
ref_key: "searchInputRef",
ref: z,
modelValue: t(p),
"onUpdate:modelValue": e[1] || (e[1] = (o) => Ie(p) ? p.value = o : null),
autofocus: "",
"aria-controls": t(O),
label: fe.value,
onInput: t(ue),
onKeydown: [
e[2] || (e[2] = M(S((o) => t(B)("down"), ["stop"]), ["down"])),
e[3] || (e[3] = M(S((o) => t(de)(), ["stop"]), ["enter"])),
e[4] || (e[4] = M(S((o) => t(B)("up"), ["stop"]), ["up"]))
],
onBlur: he
}, null, 8, ["modelValue", "aria-controls", "label", "onInput"])
])) : m("", !0),
i("div", {
class: g(["gap-1/2 flex flex-1 flex-col overflow-visible overflow-y-auto px-3 pt-0 pb-3", [
{
"pb-14": t(n) !== "modal"
},
{
"h-[calc(100%-273.5px)]": y.value
}
]]),
onDragenter: e[7] || (e[7] = S(() => {
}, ["prevent"])),
onDragover: e[8] || (e[8] = S(() => {
}, ["prevent"]))
}, [
t(p) ? (r(), u(t(qe), {
key: 0,
id: t(O),
"aria-label": "Search Results",
class: "gap-px",
noResults: !t(w).length
}, {
default: d(() => [
(r(!0), h(D, null, G(t(w), (o, a) => (r(), u(t(Me), {
id: `#search-input-${o.item.id}`,
key: o.refIndex,
ref_for: !0,
ref: (l) => t(ce)[a] = l,
selected: t(I) === a,
class: "px-2",
href: o.item.link,
onClick: S((l) => t(ie)(o), ["prevent"]),
onFocus: (l) => I.value = a
}, {
addon: d(() => [
e[10] || (e[10] = i("span", { class: "sr-only" }, "HTTP Method:", -1)),
b(Ne, {
class: "font-bold",
method: o.item.httpVerb ?? "get"
}, null, 8, ["method"])
]),
default: d(() => [
q(U(o.item.title) + " ", 1)
]),
_: 2
}, 1032, ["id", "selected", "href", "onClick", "onFocus"]))), 128))
]),
_: 1
}, 8, ["id", "noResults"])) : (r(), h("nav", ot, [
(r(!0), h(D, null, G(ve.value, (o) => {
var a;
return r(), u(Ge, {
key: o.uid,
isDraggable: t(n) !== "modal" && ((a = o.info) == null ? void 0 : a.title) !== "Drafts",
isDroppable: t(re),
menuItem: k,
parentUids: [],
uid: o.uid,
onNewTab: e[5] || (e[5] = (l, v) => X("newTab", { name: l, uid: v })),
onOnDragEnd: t(ae),
onOpenMenu: e[6] || (e[6] = (l) => Object.assign(k, l))
}, {
leftIcon: d(() => {
var l;
return [
((l = o.info) == null ? void 0 : l.title) === "Drafts" ? (r(), u(t(T), {
key: 0,
class: "text-sidebar-c-2 group-hover:hidden",
icon: "Scribble",
thickness: "2.25"
})) : (r(), u(t(Te), {
key: 1,
class: "text-sidebar-c-2 size-3.5 min-w-3.5 stroke-2 group-hover:hidden",
src: o["x-scalar-icon"] || "interface-content-folder"
}, null, 8, ["src"])),
i("div", {
class: g({
"rotate-90": t(Y)[o.uid]
})
}, [
b(t(T), {
class: "text-c-3 hover:text-c-1 hidden text-sm group-hover:block",
icon: "ChevronRight",
size: "md"
})
], 2)
];
}),
_: 2
}, 1032, ["isDraggable", "isDroppable", "menuItem", "uid", "onOnDragEnd"]);
}), 128))
]))
], 34)
]),
button: d(() => [
i("div", {
class: g({
"empty-sidebar-item": y.value
})
}, [
y.value ? (r(), h("div", st, [
i("div", at, [
b(j, {
art: t(Ve),
class: "rabbitsit font-bold"
}, null, 8, ["art"]),
b(j, {
art: t(Ee),
class: "rabbitjump absolute top-0 left-0 font-bold"
}, null, 8, ["art"])
]),
e[11] || (e[11] = i("div", { class: "mt-2 mb-2 text-center text-sm text-balance" }, [
i("b", { class: "font-medium" }, "Let's Get Started"),
i("p", { class: "mt-2" }, " Create request, folder, collection or import from OpenAPI/Postman ")
], -1))
])) : m("", !0),
t(n) !== "modal" ? (r(), u(t($e), {
key: 1,
class: g(["mb-1.5 hidden h-fit w-full p-1.5 opacity-0", {
"flex opacity-100": y.value
}]),
onClick: le
}, {
default: d(() => e[12] || (e[12] = [
q(" Import Collection ")
])),
_: 1,
__: [12]
}, 8, ["class"])) : m("", !0),
t(n) !== "modal" ? (r(), u(ze, {
key: 2,
click: t(R).commandPalette.emit,
hotkey: "K"
}, {
title: d(() => e[13] || (e[13] = [
q(" Add Item ")
])),
_: 1
}, 8, ["click"])) : m("", !0)
], 2)
]),
_: 2
}, [
t(n) !== "modal" ? {
name: "header",
fn: d(() => []),
key: "0"
} : void 0
]), 1032, ["class"]), [
[Ce, t(P)]
]),
t(n) !== "modal" && k ? (r(), u(Ke, {
key: 0,
menuItem: k,
onClearDrafts: pe,
onCloseMenu: e[9] || (e[9] = (o) => k.open = !1),
onToggleWatchMode: me
}, null, 8, ["menuItem"])) : m("", !0)
], 64));
}
});
export {
Mt as default
};