@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
132 lines (131 loc) • 5.53 kB
JavaScript
import { defineComponent as O, ref as y, watch as N, onMounted as L, onUnmounted as F, createElementBlock as r, openBlock as i, renderSlot as T, createElementVNode as C, createVNode as G, withCtx as f, Fragment as d, renderList as m, unref as l, createBlock as u, toDisplayString as V, createCommentVNode as A } from "vue";
import { sleep as $ } from "@scalar/helpers/testing/sleep";
import { useNavState as M } from "../../../../hooks/useNavState.js";
import { useSidebar as D } from "../hooks/useSidebar.js";
import h from "./SidebarElement.vue.js";
import g from "./SidebarGroup.vue.js";
const H = { class: "sidebar" }, R = ["aria-label"], U = { class: "sidebar-group-title" }, j = -160, X = /* @__PURE__ */ O({
__name: "SidebarBlock",
props: {
title: {},
options: {}
},
setup(q) {
const { hash: a, isIntersectionEnabled: w } = M(), { items: B, toggleCollapsedSidebarItem: _, collapsedSidebarItems: E } = D(), c = y(null), n = y(!0);
N(a, (e) => {
!w.value || n.value || typeof window > "u" || S(e);
});
const S = (e) => {
const s = document.getElementById(`sidebar-${e}`);
if (!s || !c.value)
return;
let t = j;
s.getAttribute("data-sidebar-type") === "heading" ? t += s.offsetTop + (s.getElementsByClassName("sidebar-heading")?.[0]).offsetHeight : t += s.offsetTop + (s.parentElement?.offsetTop ?? 0) + (s.parentElement?.parentElement?.offsetTop ?? 0), c.value.scrollTo({ top: t, behavior: "smooth" });
}, I = (e) => {
if (!c.value)
return;
const s = new MutationObserver((t, o) => {
document.getElementById(`sidebar-${e}`) && (S(e), n.value = !1, o.disconnect());
});
return s.observe(c.value, {
childList: !0,
subtree: !0
}), s;
}, v = (e) => a.value === e ? !0 : a.value.includes("/description/") ? a.value.split("/description/")[0] === e : !1, k = y(void 0);
L(() => {
k.value = I(a.value), a.value || setTimeout(() => n.value = !1, 300);
}), F(() => {
k.value?.disconnect();
});
const b = (e) => (e.type === "tag" || e.type === "text") && (e.children?.length ?? 0) > 0;
return (e, s) => (i(), r("div", H, [
T(e.$slots, "sidebar-start", {}, void 0, !0),
C("nav", {
ref_key: "scrollerEl",
ref: c,
"aria-label": `Table of contents for ${e.title}`,
class: "sidebar-pages custom-scroll custom-scroll-self-contain-overflow"
}, [
G(g, { level: 0 }, {
default: f(() => [
(i(!0), r(d, null, m(l(B).entries, (t) => (i(), r(d, {
key: t.id
}, [
"isGroup" in t && t.isGroup ? (i(), r(d, { key: 0 }, [
C("li", U, V(t.title), 1),
(i(!0), r(d, null, m(t.children, (o) => (i(), u(h, {
key: o.id,
id: `sidebar-${o.id}`,
"data-sidebar-type": "heading",
hasChildren: b(o),
isActive: v(o.id),
item: o,
open: l(E)[o.id] ?? !1,
options: e.options,
onToggleOpen: async () => {
n.value = !0, l(_)(o.id), await l($)(100), n.value = !1;
}
}, {
default: f(() => [
b(o) ? (i(), u(g, {
key: 0,
level: 1
}, {
default: f(() => [
(i(!0), r(d, null, m(o.children, (p) => (i(), u(h, {
key: p.id,
id: `sidebar-${p.id}`,
isActive: v(p.id),
item: p,
options: e.options
}, null, 8, ["id", "isActive", "item", "options"]))), 128))
]),
_: 2
}, 1024)) : A("", !0)
]),
_: 2
}, 1032, ["id", "hasChildren", "isActive", "item", "open", "options", "onToggleOpen"]))), 128))
], 64)) : (i(), u(h, {
key: 1,
id: `sidebar-${t.id}`,
"data-sidebar-type": "heading",
hasChildren: b(t),
isActive: v(t.id),
item: t,
open: l(E)[t.id] ?? !1,
options: e.options,
onToggleOpen: async () => {
n.value = !0, l(_)(t.id), await l($)(100), n.value = !1;
}
}, {
default: f(() => [
b(t) ? (i(), u(g, {
key: 0,
level: 1
}, {
default: f(() => [
(i(!0), r(d, null, m(t.children, (o) => (i(), u(h, {
key: o.id,
id: `sidebar-${o.id}`,
isActive: v(o.id),
item: o,
options: e.options
}, null, 8, ["id", "isActive", "item", "options"]))), 128))
]),
_: 2
}, 1024)) : A("", !0)
]),
_: 2
}, 1032, ["id", "hasChildren", "isActive", "item", "open", "options", "onToggleOpen"]))
], 64))), 128))
]),
_: 1
})
], 8, R),
T(e.$slots, "sidebar-end", {}, void 0, !0)
]));
}
});
export {
X as default
};