@scalar/api-client
Version:
the open source API testing client
480 lines (479 loc) • 23 kB
JavaScript
import { defineComponent as me, useCssVars as ve, computed as b, ref as ge, resolveComponent as be, createElementBlock as M, createCommentVNode as f, openBlock as d, normalizeClass as y, unref as n, createVNode as m, withCtx as v, createBlock as c, withModifiers as w, createElementVNode as s, toDisplayString as A, createTextVNode as N, renderSlot as Z, Fragment as ye, renderList as he, nextTick as xe } from "vue";
import { ScalarButton as q, ScalarIcon as h, ScalarSidebarGroupToggle as _, ScalarTooltip as ee } from "@scalar/components";
import { Draggable as ke } from "@scalar/draggable";
import { shouldIgnoreEntity as te } from "@scalar/oas-utils/helpers";
import { useRouter as we, RouterLink as ie } from "vue-router";
import { useLayout as Ue } from "../../hooks/useLayout.js";
import { useSidebar as qe } from "../../hooks/useSidebar.js";
import { useActiveEntities as De } from "../../store/active-entities.js";
import { PathId as $ } from "../../routes.js";
import Ce from "../../components/HttpMethod/HttpMethod.vue.js";
import { getModifiers as Re } from "../../libs/hot-keys.js";
import { useWorkspace as Ie } from "../../store/store.js";
const Te = { class: "line-clamp-1 w-full pl-2 break-all" }, Me = { class: "flex flex-row items-center gap-1" }, $e = { class: "relative" }, ze = { class: "flex items-start" }, Ee = { class: "flex flex-1 flex-row justify-between font-medium" }, Se = { class: "line-clamp-1 w-full text-left break-all" }, je = { class: "relative flex h-fit justify-end" }, Be = {
class: "flex items-center justify-center",
type: "button"
}, We = ["aria-expanded"], Ae = { class: "flex h-5 max-w-[14px] items-center justify-center" }, Ne = { class: "flex flex-1 flex-row justify-between" }, Oe = { class: "line-clamp-1 w-full text-left font-medium break-all" }, Pe = { class: "relative flex h-fit justify-end" }, Ve = {
class: "flex items-center justify-center",
type: "button"
}, Fe = { key: 3 }, O = "hover:bg-sidebar-b-active indent-padding-left", it = /* @__PURE__ */ me({
__name: "RequestSidebarItem",
props: {
isDraggable: { type: Boolean, default: !1 },
isDroppable: { type: [Boolean, Function], default: !1 },
parentUids: {},
uid: {},
menuItem: {}
},
emits: ["onDragEnd", "newTab", "openMenu"],
setup(l, { emit: ne }) {
ve((e) => ({
eae2c57a: ae.value,
"7c91ad9b": re.value
}));
const oe = ne, { activeCollection: le, activeRequest: P, activeRouterParams: se, activeWorkspace: U } = De(), {
collections: C,
tags: R,
requests: z,
requestExamples: E,
collectionMutators: S,
tagMutators: V,
requestMutators: j,
requestExampleMutators: F,
events: Y
} = Ie(), x = we(), { collapsedSidebarFolders: D, toggleSidebarFolder: H } = qe(), { layout: p } = Ue(), i = b(() => {
var o, u, g, T, J, Q;
const e = C[l.uid], t = R[l.uid], r = z[l.uid], a = E[l.uid];
return e ? {
title: ((o = e.info) == null ? void 0 : o.title) || "Untitled Collection",
entity: e,
resourceTitle: "Collection",
children: e.children,
icon: e["x-scalar-icon"],
documentUrl: e.documentUrl,
watchMode: e.watchMode,
to: e.uid && ((u = e == null ? void 0 : e.info) == null ? void 0 : u.title) !== "Drafts" ? {
name: "collection",
params: {
[$.Workspace]: (g = U.value) == null ? void 0 : g.uid,
[$.Collection]: e.uid
}
} : void 0,
warning: "This cannot be undone. You're about to delete the collection and all folders and requests inside it.",
edit: (k, X) => {
S.edit(e.uid, "info.title", k), X && S.edit(e.uid, "x-scalar-icon", X);
},
delete: () => {
U.value && S.delete(e, U.value);
}
} : t ? {
title: t.name,
entity: t,
resourceTitle: "Tag",
children: t.children,
warning: "This cannot be undone. You're about to delete the tag and all requests inside it",
edit: (k) => V.edit(t.uid, "name", k),
delete: () => l.parentUids[0] && V.delete(t, l.parentUids[0])
} : r ? {
title: r.summary ?? r.path,
to: {
name: "request",
params: {
workspace: (T = U.value) == null ? void 0 : T.uid,
request: r.uid
}
},
method: r.method,
entity: r,
resourceTitle: "Request",
warning: "This cannot be undone. You're about to delete the request.",
children: r.examples.slice(1),
edit: (k) => j.edit(r.uid, "summary", k),
delete: () => l.parentUids[0] && j.delete(r, l.parentUids[0])
} : a != null && a.requestUid ? {
title: a.name,
to: {
name: "request.examples",
params: {
workspace: (J = U.value) == null ? void 0 : J.uid,
request: a.requestUid,
examples: a.uid
}
},
method: (Q = z[a.requestUid]) == null ? void 0 : Q.method,
entity: a,
resourceTitle: "Example",
warning: "This cannot be undone. You're about to delete the example from the request.",
children: [],
edit: (k) => F.edit(a.uid, "name", k),
delete: () => F.delete(a)
} : {
title: "Unknown",
entity: {
uid: "",
type: "unknown"
},
resourceTitle: "Unknown",
children: [],
edit: () => null,
delete: () => null
};
}), I = b(
() => i.value.entity.type === "collection" && i.value.title === "Drafts"
), ae = b(() => l.parentUids.length ? p === "modal" ? `${(l.parentUids.length - 1) * 12}px` : `${l.parentUids.length * 12}px` : "12px"), re = b(() => l.parentUids.length ? p === "modal" ? `${(l.parentUids.length - 1) * 12}px` : `${l.parentUids.length * 12}px` : "0px"), ue = b(
() => {
var e;
return D[l.uid] || ((e = P.value) == null ? void 0 : e.uid) === l.uid && i.value.entity.examples.length > 1;
}
), de = b(
() => {
var e;
return typeof x.currentRoute.value.name == "string" && x.currentRoute.value.name.startsWith("request") && se.value[$.Request] === "default" && ((e = P.value) == null ? void 0 : e.uid) === l.uid;
}
), B = ge(null), L = b(() => {
let e = 0.5, t = 0.5;
if (!B.value)
return { ceiling: e, floor: t };
const { draggingItem: r } = B.value;
return !C[r == null ? void 0 : r.id] && i.value.entity.type === "collection" ? (e = 1, t = 0) : i.value.entity.type === "tag" && (e = 0.8, t = 0.2), { ceiling: e, floor: t };
}), pe = (e, t) => !(p === "modal" || E[t.id] || C[e.id]), fe = (e, t) => {
e && (Re(["default"]).some((o) => e[o]) ? oe("newTab", t.title || "", t.entity.uid) : t.to && x.push(t.to), xe(() => Y.focusAddressBar.emit()));
};
function W(e) {
var o, u, g;
const t = l.parentUids[0] ? ((o = C[l.parentUids[0]]) == null ? void 0 : o.uid) || "" : e, r = l.parentUids[0] && ((u = R[e]) != null && u.name) ? { tags: [R[e].name] } : {}, a = j.add(
r,
t
);
a && (x.push({
name: "request",
params: {
workspace: (g = U.value) == null ? void 0 : g.uid,
request: a.uid
}
}), Y.hotKeys.emit({
focusAddressBar: new KeyboardEvent("keydown", { key: "l" })
}));
}
const G = b(() => {
const { uid: e, watchModeStatus: t } = le.value || {};
return e !== i.value.entity.uid ? "text-c-3" : t === "WATCHING" ? "text-c-1" : t === "ERROR" ? "text-red" : "text-c-3";
}), K = b(() => i.value.title === "Drafts" && p !== "modal" && i.value.children.length > 0), ce = b(() => {
const e = z[l.uid];
if (e)
return !te(e);
const t = R[l.uid];
return t ? !te(t) : !0;
});
return (e, t) => {
const r = be("RequestSidebarItem", !0);
return ce.value ? (d(), M("li", {
key: 0,
class: y(["relative flex flex-row", [
n(p) === "modal" && e.parentUids.length > 1 || n(p) !== "modal" && e.parentUids.length ? "before:bg-border indent-border-line-offset mb-[.5px] before:pointer-events-none before:absolute before:top-0 before:left-[calc(.75rem_+_.5px)] before:z-1 before:h-[calc(100%_+_.5px)] before:w-[.5px] last:mb-0 last:before:h-full" : ""
]])
}, [
m(n(ke), {
id: i.value.entity.uid,
ref_key: "draggableRef",
ref: B,
ceiling: L.value.ceiling,
class: "gap-1/2 flex flex-1 flex-col text-base",
floor: L.value.floor,
isDraggable: e.isDraggable,
isDroppable: e.isDroppable,
parentIds: e.parentUids,
onOnDragEnd: t[12] || (t[12] = (...a) => e.$emit("onDragEnd", ...a))
}, {
default: v(() => {
var a;
return [
(i.value.entity.type === "request" || i.value.entity.type === "requestExample") && i.value.to ? (d(), c(n(ie), {
key: 0,
class: "group no-underline",
to: i.value.to,
onClick: t[1] || (t[1] = w(
(o) => fe(o, i.value),
["prevent"]
))
}, {
default: v(({ isExactActive: o }) => {
var u, g;
return [
s("div", {
class: y(["relative flex min-h-8 w-full cursor-pointer flex-row items-start justify-between gap-0.5 rounded py-1.5 pr-2", [
O,
o || de.value ? "bg-sidebar-b-active text-sidebar-c-active font-medium transition-none" : "text-sidebar-c-2"
]])
}, [
s("span", Te, A(i.value.title || "Untitled"), 1),
s("div", Me, [
s("div", $e, [
n(p) !== "modal" ? (d(), c(n(q), {
key: 0,
class: y(["hover:bg-b-3 hidden aspect-square h-fit px-0.5 py-0 opacity-0 group-hover:flex group-hover:opacity-100 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100", {
flex: ((g = (u = e.menuItem) == null ? void 0 : u.item) == null ? void 0 : g.entity.uid) === i.value.entity.uid && e.menuItem.open
}]),
size: "sm",
type: "button",
variant: "ghost",
onClick: t[0] || (t[0] = w(
(T) => e.$emit("openMenu", {
item: i.value,
parentUids: e.parentUids,
targetRef: T.currentTarget,
open: !e.menuItem.open
}),
["stop", "prevent"]
))
}, {
default: v(() => [
m(n(h), {
icon: "Ellipses",
size: "md"
})
]),
_: 1
}, 8, ["class"])) : f("", !0)
]),
s("span", ze, [
t[13] || (t[13] = N(" ")),
t[14] || (t[14] = s("span", { class: "sr-only" }, "HTTP Method:", -1)),
i.value.method ? (d(), c(n(Ce), {
key: 0,
class: "font-bold",
method: i.value.method
}, null, 8, ["method"])) : f("", !0)
])
])
], 2)
];
}),
_: 1
}, 8, ["to"])) : (n(p) !== "modal" || e.parentUids.length) && i.value.entity.type === "collection" && i.value.to ? (d(), c(n(ie), {
key: 1,
"aria-expanded": !!n(D)[i.value.entity.uid],
class: y(["hover:bg-b-2 group relative flex w-full flex-row justify-start gap-1.5 rounded p-1.5 no-underline focus-visible:z-10", [
O,
{
"bg-sidebar-b-active text-sidebar-c-active transition-none": typeof n(x).currentRoute.value.name == "string" && n(x).currentRoute.value.name.startsWith("collection") && n(x).currentRoute.value.params[n($).Collection] === i.value.entity.uid,
"text-c-2": i.value.title === "Untitled Collection"
}
]]),
to: i.value.to
}, {
default: v(() => {
var o;
return [
s("span", {
class: "flex h-5 max-w-[14px] cursor-pointer items-center justify-center",
onClick: t[2] || (t[2] = w((u) => n(H)(i.value.entity.uid), ["stop", "prevent"]))
}, [
Z(e.$slots, "leftIcon", {}, () => [
m(n(_), {
class: "text-c-3 shrink-0",
open: !!n(D)[i.value.entity.uid]
}, null, 8, ["open"])
], !0),
t[15] || (t[15] = N(" "))
]),
s("div", Ee, [
s("span", Se, A(i.value.title), 1),
s("div", je, [
s("div", {
class: y(["items-center gap-px opacity-0 group-hover:flex group-hover:opacity-100 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100", {
flex: e.menuItem.open,
hidden: !e.menuItem.open || ((o = e.menuItem.item) == null ? void 0 : o.entity.uid) !== i.value.entity.uid
}])
}, [
n(p) !== "modal" && !I.value || I.value && K.value ? (d(), c(n(q), {
key: 0,
class: "hover:bg-b-3 hover:text-c-1 aspect-square h-fit px-0.5 py-0 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100",
size: "sm",
variant: "ghost",
onClick: t[3] || (t[3] = w(
(u) => e.$emit("openMenu", {
item: i.value,
parentUids: e.parentUids,
targetRef: u.currentTarget.parentNode,
open: !0
}),
["stop", "prevent"]
))
}, {
default: v(() => [
m(n(h), {
icon: "Ellipses",
size: "md"
})
]),
_: 1
})) : f("", !0),
n(p) !== "modal" ? (d(), c(n(q), {
key: 1,
class: "hover:bg-b-3 hover:text-c-1 aspect-square h-fit px-0.5 py-0 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100",
size: "sm",
variant: "ghost",
onClick: t[4] || (t[4] = w((u) => W(i.value.entity.uid), ["stop", "prevent"]))
}, {
default: v(() => [
m(n(h), {
icon: "Add",
size: "md",
thickness: "2"
})
]),
_: 1
})) : f("", !0)
], 2),
i.value.watchMode ? (d(), c(n(ee), {
key: 0,
placement: "right",
offset: 12,
content: `Watching: ${i.value.documentUrl}`
}, {
default: v(() => [
s("button", Be, [
m(n(h), {
class: y(["ml-0.5 text-sm", G.value]),
icon: "Watch",
size: "md",
thickness: "2"
}, null, 8, ["class"])
])
]),
_: 1
}, 8, ["content"])) : f("", !0),
t[16] || (t[16] = s("span", null, " ", -1))
])
])
];
}),
_: 3
}, 8, ["aria-expanded", "class", "to"])) : n(p) !== "modal" || e.parentUids.length ? (d(), M("button", {
key: 2,
"aria-expanded": !!n(D)[i.value.entity.uid],
class: y(["hover:bg-b-2 group relative flex w-full flex-row justify-start gap-1.5 rounded p-1.5 focus-visible:z-10", [O]]),
type: "button",
onClick: t[7] || (t[7] = (o) => n(H)(i.value.entity.uid))
}, [
s("span", Ae, [
Z(e.$slots, "leftIcon", {}, () => [
m(n(_), {
class: "text-c-3 hover:text-c-1 shrink-0",
open: !!n(D)[i.value.entity.uid]
}, null, 8, ["open"])
], !0),
t[17] || (t[17] = N(" "))
]),
s("div", Ne, [
s("span", Oe, A(i.value.title), 1),
s("div", Pe, [
s("div", {
class: y(["items-center gap-px opacity-0 group-hover:flex group-hover:opacity-100 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100", {
flex: e.menuItem.open,
hidden: !e.menuItem.open || ((a = e.menuItem.item) == null ? void 0 : a.entity.uid) !== i.value.entity.uid
}])
}, [
n(p) !== "modal" && !I.value || I.value && K.value ? (d(), c(n(q), {
key: 0,
class: "hover:bg-b-3 hover:text-c-1 aspect-square h-fit px-0.5 py-0 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100",
size: "sm",
variant: "ghost",
onClick: t[5] || (t[5] = w(
(o) => e.$emit("openMenu", {
item: i.value,
parentUids: e.parentUids,
targetRef: o.currentTarget.parentNode,
open: !0
}),
["stop", "prevent"]
))
}, {
default: v(() => [
m(n(h), {
icon: "Ellipses",
size: "md"
})
]),
_: 1
})) : f("", !0),
n(p) !== "modal" ? (d(), c(n(q), {
key: 1,
class: "hover:bg-b-3 hover:text-c-1 aspect-square h-fit px-0.5 py-0 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100",
size: "sm",
variant: "ghost",
onClick: t[6] || (t[6] = w((o) => W(i.value.entity.uid), ["stop", "prevent"]))
}, {
default: v(() => [
m(n(h), {
icon: "Add",
size: "md",
thickness: "2"
})
]),
_: 1
})) : f("", !0)
], 2),
i.value.watchMode ? (d(), c(n(ee), {
key: 0,
content: "Watching: {{ item.documentUrl }}",
placement: "right",
offset: 12
}, {
default: v(() => [
s("button", Ve, [
m(n(h), {
class: y(["ml-0.5 text-sm", G.value]),
icon: "Watch",
size: "md",
thickness: "2"
}, null, 8, ["class"])
])
]),
_: 1
})) : f("", !0),
t[18] || (t[18] = s("span", null, " ", -1))
])
])
], 10, We)) : f("", !0),
ue.value ? (d(), M("ul", Fe, [
(d(!0), M(ye, null, he(i.value.children, (o) => (d(), c(r, {
key: o,
isDraggable: !n(E)[o],
isDroppable: pe,
menuItem: e.menuItem,
parentUids: [...e.parentUids, e.uid],
uid: o,
onNewTab: t[8] || (t[8] = (u, g) => e.$emit("newTab", u, g)),
onOnDragEnd: t[9] || (t[9] = (...u) => e.$emit("onDragEnd", ...u)),
onOpenMenu: t[10] || (t[10] = (u) => e.$emit("openMenu", u))
}, null, 8, ["isDraggable", "menuItem", "parentUids", "uid"]))), 128)),
i.value.children.length === 0 ? (d(), c(n(q), {
key: 0,
class: y(["text-c-1 hover:bg-b-2 flex h-8 w-full justify-start gap-1.5 py-0 text-xs", e.parentUids.length ? "pl-9" : ""]),
variant: "ghost",
onClick: t[11] || (t[11] = (o) => W(i.value.entity.uid))
}, {
default: v(() => [
m(n(h), {
icon: "Add",
size: "sm"
}),
t[19] || (t[19] = s("span", null, "Add Request", -1))
]),
_: 1,
__: [19]
}, 8, ["class"])) : f("", !0)
])) : f("", !0)
];
}),
_: 3
}, 8, ["id", "ceiling", "floor", "isDraggable", "isDroppable", "parentIds"])
], 2)) : f("", !0);
};
}
});
export {
it as default
};