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