@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
113 lines (112 loc) • 4.03 kB
JavaScript
import { defineComponent as y, ref as _, computed as S, createElementBlock as o, openBlock as i, createVNode as m, Fragment as k, renderList as w, createBlock as p, unref as n, normalizeClass as a, withCtx as u, createElementVNode as r, toDisplayString as h, createCommentVNode as f } from "vue";
import { Tab as x } from "@headlessui/vue";
import { findClient as V } from "@scalar/api-client/v2/blocks/operation-code-sample";
import { ScalarIcon as b, ScalarCombobox as B } from "@scalar/components";
import { freezeElement as z } from "@scalar/helpers/dom/freeze-element";
import { emitCustomEvent as E } from "@scalar/workspace-store/events";
import { isFeaturedClient as g } from "../helpers/featured-clients.js";
const K = { class: "client-libraries-text" }, M = {
"aria-hidden": "true",
class: "client-libraries-icon__more"
}, O = {
key: 1,
class: "client-libraries-icon",
height: "50",
role: "presentation",
viewBox: "0 0 50 50",
width: "50",
xmlns: "http://www.w3.org/2000/svg"
}, T = {
key: 0,
class: "client-libraries-text client-libraries-text-more"
}, R = /* @__PURE__ */ y({
__name: "ClientDropdown",
props: {
clientOptions: {},
xSelectedClient: {},
featuredClients: {},
morePanel: {}
},
setup(v) {
const s = _(), d = (e) => `programming-language-${e === "js" ? "javascript" : e}`, C = (e) => {
if (!s.value)
return;
const t = z(s.value);
setTimeout(() => {
t();
}, 300), E(
s.value,
"scalar-update-selected-client",
e.id
);
}, c = S(
() => v.xSelectedClient?.split("/")[0]
);
return (e, t) => (i(), o("div", {
ref_key: "containerRef",
ref: s,
class: "client-libraries-content"
}, [
(i(!0), o(k, null, w(e.featuredClients, (l) => (i(), p(n(x), {
key: l.clientKey,
class: a(["client-libraries rendered-code-sdks", {
"client-libraries__active": l.id === e.xSelectedClient
}])
}, {
default: u(() => [
r("div", {
class: a(`client-libraries-icon__${l.targetKey}`)
}, [
m(n(b), {
class: "client-libraries-icon",
icon: d(l.targetKey)
}, null, 8, ["icon"])
], 2),
r("span", K, h(l.targetTitle), 1)
]),
_: 2
}, 1032, ["class"]))), 128)),
m(n(B), {
modelValue: n(V)(e.clientOptions, e.xSelectedClient),
options: e.clientOptions,
placement: "bottom-end",
teleport: "",
"onUpdate:modelValue": t[0] || (t[0] = (l) => C(l))
}, {
default: u(() => [
r("button", {
class: a(["client-libraries client-libraries__select", {
"client-libraries__active": e.xSelectedClient && !n(g)(e.xSelectedClient)
}])
}, [
r("div", M, [
e.xSelectedClient && !n(g)(e.xSelectedClient) ? (i(), o("div", {
key: 0,
class: a(`client-libraries-icon__${c.value}`)
}, [
c.value ? (i(), p(n(b), {
key: 0,
class: "client-libraries-icon",
icon: d(c.value)
}, null, 8, ["icon"])) : f("", !0)
], 2)) : (i(), o("svg", O, t[1] || (t[1] = [
r("g", {
fill: "currentColor",
"fill-rule": "nonzero"
}, [
r("path", { d: "M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" })
], -1)
])))
]),
e.clientOptions.length ? (i(), o("span", T, " More ")) : f("", !0),
t[2] || (t[2] = r("span", { class: "sr-only" }, "Select from all clients", -1))
], 2)
]),
_: 1
}, 8, ["modelValue", "options"])
], 512));
}
});
export {
R as default
};