@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
198 lines (197 loc) • 7.42 kB
JavaScript
import { defineComponent as z, ref as A, watch as C, createBlock as T, openBlock as m, unref as a, withCtx as i, createElementVNode as n, createVNode as S, withKeys as g, withModifiers as v, isRef as Y, createElementBlock as w, Fragment as I, renderList as _, createSlots as j, normalizeClass as G, createTextVNode as l, createCommentVNode as $, toDisplayString as c } from "vue";
import { ScalarModal as J, ScalarSearchInput as Q, ScalarSearchResultList as X, ScalarSearchResultItem as Z } from "@scalar/components";
import { isDefined as ee } from "@scalar/helpers/array/is-defined";
import { scrollToId as E } from "@scalar/helpers/dom/scroll-to-id";
import { ScalarIconTerminalWindow as M, ScalarIconTag as te, ScalarIconBracketsCurly as oe, ScalarIconTextAlignLeft as ne } from "@scalar/icons";
import { nanoid as ae } from "nanoid";
import { useSearchIndex as re } from "../hooks/useSearchIndex.js";
import { useSidebar as N } from "../../../v2/blocks/scalar-sidebar-block/hooks/useSidebar.js";
import se from "../../../v2/blocks/scalar-sidebar-block/components/SidebarHttpBadge.vue.js";
import { lazyBus as ie } from "../../../components/Lazy/lazyBus.js";
const le = { class: "sr-only" }, ce = { class: "inline-flex items-center gap-1" }, de = { class: "sr-only" }, Ie = /* @__PURE__ */ z({
__name: "SearchModal",
props: {
modalState: {},
document: {}
},
setup(V) {
const p = V, f = ae(), R = `${f}-search-result`, b = `${f}-search-instructions`, h = (o) => `${f}${o}`, { items: D } = N(), {
resetSearch: L,
selectedIndex: r,
selectedSearchResult: k,
searchResultsWithPlaceholderResults: d,
query: u
} = re(D, p.document), F = {
heading: ne,
model: oe,
operation: M,
tag: te,
webhook: M
}, H = {
heading: "Heading",
operation: "Operation",
tag: "Tag",
model: "Model",
webhook: "Webhook"
}, P = A(null);
C(
() => p.modalState.open,
(o) => {
o && L();
}
);
const { setCollapsedSidebarItem: U } = N(), K = /#(tag\/[^/]*)/;
function x(o) {
let t = "models";
const e = o.item.href.match(K);
e?.length && e.length > 1 && (t = e[1]), U(t, !0);
const s = o.item.href.replace("#", "");
if (document.getElementById(s))
E(s), p.modalState.hide();
else {
const y = ie.on((q) => {
q.loaded === s && (E(s), y(), p.modalState.hide());
});
}
}
C(r, (o) => {
if (typeof o != "number")
return;
const t = d.value[o], e = h(t?.item.href);
document.getElementById(e)?.scrollIntoView({
behavior: "smooth",
block: "nearest"
});
});
const B = (o) => {
const t = o === "up" ? -1 : 1, e = d.value.length;
if (typeof r.value == "number") {
const s = (r.value + t + e) % e;
r.value = s;
} else
r.value = t === -1 ? e - 1 : 0;
};
function O(o) {
const t = new URL(window.location.href);
return t.hash = o, t.toString();
}
function W() {
if (!ee(r.value))
return;
const o = d.value;
o.length !== 0 && x(o[r.value]);
}
return (o, t) => (m(), T(a(J), {
"aria-label": "Reference Search",
state: o.modalState,
variant: "search"
}, {
default: i(() => [
n("div", {
ref_key: "searchModalRef",
ref: P,
class: "ref-search-container",
role: "search"
}, [
S(a(Q), {
modelValue: a(u),
"onUpdate:modelValue": t[0] || (t[0] = (e) => Y(u) ? u.value = e : null),
"aria-activedescendant": a(k) ? h(a(k).item.href) : void 0,
"aria-autocomplete": "list",
"aria-controls": R,
"aria-describedby": b,
role: "combobox",
onBlur: t[1] || (t[1] = (e) => r.value = void 0),
onKeydown: [
t[2] || (t[2] = g(v((e) => B("down"), ["stop", "prevent"]), ["down"])),
g(v(W, ["stop", "prevent"]), ["enter"]),
t[3] || (t[3] = g(v((e) => B("up"), ["stop", "prevent"]), ["up"]))
]
}, null, 8, ["modelValue", "aria-activedescendant", "onKeydown"])
], 512),
S(a(X), {
id: R,
"aria-label": "Reference Search Results",
class: "ref-search-results custom-scroll",
noResults: !a(d).length
}, {
query: i(() => [
l(c(a(u)), 1)
]),
default: i(() => [
(m(!0), w(I, null, _(a(d), (e, s) => (m(), T(a(Z), {
id: h(e.item.href),
key: e.refIndex,
href: O(e.item.href),
icon: F[e.item.type],
selected: a(r) === s,
onClick: (y) => x(e),
onFocus: (y) => r.value = s
}, j({
default: i(() => [
n("span", {
class: G({
deprecated: e.item.entry.type === "operation" && e.item.entry.isDeprecated
})
}, [
n("span", le, [
l(c(H[e.item.type]) + ": ", 1),
e.item.entry.type === "operation" && e.item.entry.isDeprecated ? (m(), w(I, { key: 0 }, [
l(" (Deprecated) ")
], 64)) : $("", !0)
]),
l(" " + c(e.item.title) + " ", 1),
t[4] || (t[4] = n("span", { class: "sr-only" }, ",", -1))
], 2)
]),
_: 2
}, [
e.item.type !== "webhook" && (e.item.method || e.item.path) && e.item.path !== e.item.title ? {
name: "description",
fn: i(() => [
n("span", ce, [
e.item.type === "operation" ? (m(), w(I, { key: 0 }, [
S(a(se), {
"aria-hidden": "true",
method: e.item.method ?? "get"
}, null, 8, ["method"]),
n("span", de, " HTTP Method: " + c(e.item.method ?? "get"), 1)
], 64)) : $("", !0),
t[5] || (t[5] = n("span", { class: "sr-only" }, "Path: ", -1)),
l(" " + c(e.item.path), 1)
])
]),
key: "0"
} : e.item.description ? {
name: "description",
fn: i(() => [
t[6] || (t[6] = n("span", { class: "sr-only" }, "Description: ", -1)),
l(" " + c(e.item.description), 1)
]),
key: "1"
} : void 0
]), 1032, ["id", "href", "icon", "selected", "onClick", "onFocus"]))), 128))
]),
_: 1
}, 8, ["noResults"]),
n("div", {
id: b,
class: "ref-search-meta"
}, t[7] || (t[7] = [
n("span", {
"aria-hidden": "true",
class: "contents"
}, [
n("span", null, "↑↓ Navigate"),
n("span", null, "⏎ Select")
], -1),
n("span", { class: "sr-only" }, " Press up arrow / down arrow to navigate, enter to select, type to filter results ", -1)
]))
]),
_: 1
}, 8, ["state"]));
}
});
export {
Ie as default
};