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