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