@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
317 lines (316 loc) • 13.7 kB
JavaScript
import { defineComponent as Q, computed as g, provide as k, useId as W, ref as M, onBeforeMount as j, onMounted as J, onUnmounted as X, watch as $, createElementBlock as m, openBlock as n, Fragment as Z, createElementVNode as v, createVNode as c, normalizeStyle as _, normalizeClass as x, unref as a, createCommentVNode as i, withDirectives as ee, createBlock as S, renderSlot as d, normalizeProps as f, guardReactiveProps as h, withCtx as s, vShow as te, createSlots as oe } from "vue";
import { provideUseId as ae } from "@headlessui/vue";
import { OpenApiClientButton as re } from "@scalar/api-client/components";
import { LAYOUT_SYMBOL as ne } from "@scalar/api-client/hooks";
import { WORKSPACE_SYMBOL as le, ACTIVE_ENTITIES_SYMBOL as ie } from "@scalar/api-client/store";
import { addScalarClassesToHeadless as se, ScalarErrorBoundary as de, ScalarSidebarFooter as ue, ScalarColorModeToggleButton as ce, ScalarColorModeToggleIcon as me } from "@scalar/components";
import { sleep as ve } from "@scalar/helpers/testing/sleep";
import { hasObtrusiveScrollbars as fe, getThemeStyles as he } from "@scalar/themes";
import { useBreakpoints as pe } from "@scalar/use-hooks/useBreakpoints";
import { ScalarToasts as ge } from "@scalar/use-toasts";
import { useDebounceFn as Se, useResizeObserver as be } from "@vueuse/core";
import ye from "./ClassicHeader.vue.js";
import we from "./GettingStarted.vue.js";
import { hasLazyLoaded as ke } from "./Lazy/lazyBus.js";
import Te from "./MobileHeader.vue.js";
import { useNavState as Me } from "../hooks/useNavState.js";
import { useLegacyStoreEvents as $e } from "../v2/hooks/use-legacy-store-events.js";
import { useDocumentSource as De } from "../features/document-source/hooks/useDocumentSource.js";
import { PLUGIN_MANAGER_SYMBOL as Ce } from "../plugins/hooks/usePluginManager.js";
import { createPluginManager as Be } from "../plugins/plugin-manager.js";
import { useSidebar as Re } from "../v2/blocks/scalar-sidebar-block/hooks/useSidebar.js";
import Ae from "../v2/blocks/scalar-sidebar-block/components/SidebarBlock.vue.js";
import O from "../features/Search/components/SearchButton.vue.js";
import Le from "./Content/Content.vue.js";
/* empty css */
import Ee from "../features/api-client-modal/ApiClientModal.vue.js";
const Ie = ["innerHTML"], Oe = { class: "references-header" }, Pe = ["aria-label"], Fe = { class: "references-navigation-list" }, He = { key: 0 }, Ke = {
key: 1,
class: "scalar-api-references-standalone-search"
}, Ne = { key: 1 }, Ue = { class: "references-editor" }, Ve = { class: "references-editor-textarea" }, qe = ["aria-label"], Ye = {
key: 0,
class: "w-64 *:!p-0 empty:hidden"
}, ze = {
key: 1,
class: "references-footer"
}, gt = /* @__PURE__ */ Q({
inheritAttrs: !1,
__name: "ApiReferenceLayout",
props: {
configuration: {},
dereferencedDocument: {},
originalDocument: {},
isDark: { type: Boolean },
rawSpec: {},
store: {}
},
emits: ["changeTheme", "updateContent", "loadSwaggerFile", "linkSwaggerFile", "toggleDarkMode"],
setup(r) {
const e = g(() => ({
...r.configuration,
hideClientButton: r.configuration.hideClientButton ?? !1,
showSidebar: r.configuration.showSidebar ?? !0,
theme: r.configuration.theme ?? "none",
layout: r.configuration.layout ?? "modern",
persistAuth: r.configuration.persistAuth ?? !1,
documentDownloadType: r.configuration.documentDownloadType ?? "both",
onBeforeRequest: r.configuration.onBeforeRequest
})), { dereferencedDocument: b, workspaceStore: D, activeEntitiesStore: C } = De({
configuration: e,
dereferencedDocument: r.dereferencedDocument,
originalDocument: r.originalDocument
});
k(le, D), k(ie, C), ae(() => W()), k(ne, "modal"), k(
Ce,
Be({
plugins: e.value.plugins
})
);
const { isSidebarOpen: T, setCollapsedSidebarItem: B, scrollToOperation: P, items: y } = Re(r.store), F = g(() => y.value.entries[0]?.id ?? ""), {
getReferenceId: H,
getPathRoutingId: K,
hash: w,
isIntersectionEnabled: R,
updateHash: A,
replaceUrlState: N
} = Me(), U = g(
() => y.value.entities?.get(w.value)?.title ?? ""
), u = g(() => ({
breadcrumb: U.value
})), V = g(fe), L = M(0);
if (e.value.redirect && typeof window < "u") {
const t = e.value.redirect(
(e.value.pathRouting ? window.location.pathname : "") + window.location.hash
);
t && history.replaceState({}, "", t);
}
j(() => {
A(), se();
});
const E = async (t) => {
R.value = !1, A(), t ? P(t) : p.value?.scrollTo(0, 0), await ve(100), R.value = !0;
};
J(() => {
history.scrollRestoration = "manual";
const t = p.value?.parentElement?.getBoundingClientRect(), o = p.value?.getBoundingClientRect();
if (t && o) {
const l = o.top - t.top;
L.value = l < 2 ? 0 : l;
}
window.onhashchange = () => {
E(H());
}, window.onpopstate = () => e.value.pathRouting && E(K(window.location.pathname)), window.addEventListener("scroll", I, { passive: !0 });
});
const I = Se(() => {
window.scrollY < 50 && ke.value && N("");
});
X(() => {
window.removeEventListener("scroll", I);
}), $(
() => r.store.workspace.activeDocument,
() => {
if (w.value) {
const t = y.value.entities.get(w.value), o = t?.parent?.id ?? t?.id;
o && B(o, !0);
} else {
const t = y.value.entries.find((o) => o.type === "tag");
t && B(t.id, !0);
}
}
);
const q = M("100dvh"), p = M(null);
be(p, (t) => {
q.value = t[0] ? t[0].contentRect.height + "px" : "100dvh";
});
const Y = g(
() => `<style>
${he(e.value.theme, {
fonts: e.value.withDefaultFonts
})}</style>`
), { mediaQueries: z } = pe(), G = !1;
return $(z.lg, (t, o) => {
o && !t && (T.value = !1);
}), $(w, (t, o) => {
t && t !== o && (T.value = !1);
}), $e(r.store, D, C, p), (t, o) => (n(), m(Z, null, [
v("div", { innerHTML: Y.value }, null, 8, Ie),
v("div", {
ref_key: "documentEl",
ref: p,
class: x(["scalar-app scalar-api-reference references-layout", [
{
"scalar-api-references-standalone-mobile": e.value.showSidebar ?? !0,
"scalar-scrollbars-obtrusive": V.value,
"references-editable": e.value.isEditable,
"references-sidebar": e.value.showSidebar,
"references-sidebar-mobile-open": a(T),
"references-classic": e.value.layout === "classic"
},
t.$attrs.class
]]),
style: _({
"--scalar-y-offset": `var(--scalar-custom-header-height, ${L.value}px)`
})
}, [
v("div", Oe, [
e.value.layout === "modern" && (e.value.showSidebar ?? !0) ? (n(), S(Te, {
key: 0,
breadcrumb: u.value.breadcrumb
}, null, 8, ["breadcrumb"])) : i("", !0),
d(t.$slots, "header", f(h(u.value)), void 0, !0)
]),
e.value.showSidebar ? (n(), m("aside", {
key: 0,
"aria-label": `Sidebar for ${a(b)?.info?.title}`,
class: "references-navigation t-doc__sidebar"
}, [
v("div", Fe, [
c(a(de), null, {
default: s(() => [
c(a(Ae), {
options: {
pathRouting: e.value.pathRouting,
onSidebarClick: e.value.onSidebarClick,
operationTitleSource: e.value.operationTitleSource,
defaultOpenAllTags: e.value.defaultOpenAllTags
},
title: a(b)?.info?.title ?? "The OpenAPI Schema"
}, {
"sidebar-start": s(() => [
t.$slots["document-selector"] ? (n(), m("div", He, [
d(t.$slots, "document-selector", {}, void 0, !0)
])) : i("", !0),
e.value.hideSearch ? i("", !0) : (n(), m("div", Ke, [
c(a(O), {
document: t.store.workspace.activeDocument,
hideModels: e.value?.hideModels,
searchHotKey: e.value?.searchHotKey
}, null, 8, ["document", "hideModels", "searchHotKey"])
])),
d(t.$slots, "sidebar-start", f(h(u.value)), void 0, !0)
]),
"sidebar-end": s(() => [
d(t.$slots, "sidebar-end", f(h(u.value)), () => [
c(a(ue), { class: "darklight-reference" }, {
toggle: s(() => [
e.value.hideDarkModeToggle ? (n(), m("span", Ne)) : (n(), S(a(ce), {
key: 0,
modelValue: t.isDark,
"onUpdate:modelValue": o[0] || (o[0] = (l) => t.$emit("toggleDarkMode"))
}, null, 8, ["modelValue"]))
]),
default: s(() => [
e.value.hideClientButton ? i("", !0) : (n(), S(a(re), {
key: 0,
buttonSource: "sidebar",
integration: e.value._integration,
isDevelopment: G,
url: e.value.url
}, null, 8, ["integration", "url"]))
]),
_: 1
})
], !0)
]),
_: 3
}, 8, ["options", "title"])
]),
_: 3
})
])
], 8, Pe)) : i("", !0),
ee(v("div", Ue, [
v("div", Ve, [
d(t.$slots, "editor", f(h(u.value)), void 0, !0)
])
], 512), [
[te, e.value.isEditable]
]),
v("main", {
"aria-label": `Open API Documentation for ${a(b)?.info?.title}`,
class: "references-rendered"
}, [
c(a(Le), {
contentId: F.value,
options: {
isLoading: e.value.isLoading,
slug: e.value.slug,
hiddenClients: e.value.hiddenClients,
layout: e.value.layout,
onLoaded: e.value.onLoaded,
persistAuth: e.value.persistAuth,
showOperationId: e.value.showOperationId,
hideTestRequestButton: e.value.hideTestRequestButton,
expandAllResponses: e.value.expandAllResponses,
hideModels: e.value.hideModels,
expandAllModelSections: e.value.expandAllModelSections,
orderRequiredPropertiesFirst: e.value.orderRequiredPropertiesFirst,
orderSchemaPropertiesBy: e.value.orderSchemaPropertiesBy,
documentDownloadType: e.value.documentDownloadType,
url: e.value.url,
onShowMore: e.value.onShowMore
},
store: t.store
}, oe({
start: s(() => [
d(t.$slots, "content-start", f(h(u.value)), void 0, !0),
e.value.layout === "classic" ? (n(), S(ye, { key: 0 }, {
"dark-mode-toggle": s(() => [
e.value.hideDarkModeToggle ? i("", !0) : (n(), S(a(me), {
key: 0,
class: "text-c-2 hover:text-c-1",
mode: t.isDark ? "dark" : "light",
style: { transform: "scale(1.4)" },
variant: "icon",
onClick: o[1] || (o[1] = (l) => t.$emit("toggleDarkMode"))
}, null, 8, ["mode"]))
]),
default: s(() => [
t.$slots["document-selector"] ? (n(), m("div", Ye, [
d(t.$slots, "document-selector", {}, void 0, !0)
])) : i("", !0),
e.value.hideSearch ? i("", !0) : (n(), S(a(O), {
key: 1,
class: "t-doc__sidebar max-w-64",
hideModels: e.value?.hideModels,
searchHotKey: e.value.searchHotKey
}, null, 8, ["hideModels", "searchHotKey"]))
]),
_: 3
})) : i("", !0)
]),
end: s(() => [
d(t.$slots, "content-end", f(h(u.value)), void 0, !0)
]),
_: 2
}, [
e.value?.isEditable ? {
name: "empty-state",
fn: s(() => [
c(we, {
theme: e.value?.theme || "default",
onChangeTheme: o[2] || (o[2] = (l) => t.$emit("changeTheme", l)),
onLinkSwaggerFile: o[3] || (o[3] = (l) => t.$emit("linkSwaggerFile")),
onLoadSwaggerFile: o[4] || (o[4] = (l) => t.$emit("loadSwaggerFile")),
onUpdateContent: o[5] || (o[5] = (l) => t.$emit("updateContent", l))
}, null, 8, ["theme"])
]),
key: "0"
} : void 0
]), 1032, ["contentId", "options", "store"])
], 8, qe),
t.$slots.footer ? (n(), m("div", ze, [
d(t.$slots, "footer", f(h(u.value)), void 0, !0)
])) : i("", !0),
c(a(Ee), {
configuration: e.value,
dereferencedDocument: a(b)
}, null, 8, ["configuration", "dereferencedDocument"])
], 6),
c(a(ge))
], 64));
}
});
export {
gt as default
};