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