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