@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
124 lines (123 loc) • 5.28 kB
JavaScript
import { defineComponent, ref, computed, createElementBlock, openBlock, createVNode, Fragment, renderList, createBlock, unref, normalizeClass, withCtx, createElementVNode, toDisplayString, createCommentVNode } from "vue";
import { Tab } from "@headlessui/vue";
import { findClient } from "@scalar/api-client/v2/blocks/operation-code-sample";
import { ScalarIcon, ScalarCombobox } from "@scalar/components";
import { freezeElement } from "@scalar/helpers/dom/freeze-element";
import { isFeaturedClient } from "../helpers/featured-clients.js";
const _hoisted_1 = { class: "client-libraries-text" };
const _hoisted_2 = {
"aria-hidden": "true",
class: "client-libraries-icon__more"
};
const _hoisted_3 = {
key: 1,
class: "client-libraries-icon",
height: "50",
role: "presentation",
viewBox: "0 0 50 50",
width: "50",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_4 = {
key: 0,
class: "client-libraries-text client-libraries-text-more"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "ClientDropdown",
props: {
clientOptions: {},
selectedClient: {},
featuredClients: {},
eventBus: {}
},
setup(__props) {
const containerRef = ref();
const getIconByLanguageKey = (targetKey) => `programming-language-${targetKey === "js" ? "javascript" : targetKey}`;
const selectClient = (option) => {
if (!containerRef.value) {
return;
}
const unfreeze = freezeElement(containerRef.value);
setTimeout(() => {
unfreeze();
}, 300);
if (option.clientKey !== "custom") {
__props.eventBus.emit("workspace:update:selected-client", option.id);
}
};
const selectedTargetKey = computed(
() => __props.selectedClient?.split("/")[0]
);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "containerRef",
ref: containerRef,
class: "client-libraries-content"
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.featuredClients, (featuredClient) => {
return openBlock(), createBlock(unref(Tab), {
key: featuredClient.clientKey,
class: normalizeClass(["client-libraries rendered-code-sdks", {
"client-libraries__active": featuredClient.id === __props.selectedClient
}])
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(`client-libraries-icon__${featuredClient.targetKey}`)
}, [
createVNode(unref(ScalarIcon), {
class: "client-libraries-icon",
icon: getIconByLanguageKey(featuredClient.targetKey)
}, null, 8, ["icon"])
], 2),
createElementVNode("span", _hoisted_1, toDisplayString(featuredClient.targetTitle), 1)
]),
_: 2
}, 1032, ["class"]);
}), 128)),
createVNode(unref(ScalarCombobox), {
modelValue: unref(findClient)(__props.clientOptions, __props.selectedClient),
options: __props.clientOptions,
placement: "bottom-end",
teleport: "",
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectClient($event))
}, {
default: withCtx(() => [
createElementVNode("button", {
class: normalizeClass(["client-libraries client-libraries__select", {
"client-libraries__active": __props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient)
}]),
type: "button"
}, [
createElementVNode("div", _hoisted_2, [
__props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(`client-libraries-icon__${selectedTargetKey.value}`)
}, [
selectedTargetKey.value ? (openBlock(), createBlock(unref(ScalarIcon), {
key: 0,
class: "client-libraries-icon",
icon: getIconByLanguageKey(selectedTargetKey.value)
}, null, 8, ["icon"])) : createCommentVNode("", true)
], 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[1] || (_cache[1] = [
createElementVNode("g", {
fill: "currentColor",
"fill-rule": "nonzero"
}, [
createElementVNode("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)
])]))
]),
__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, " More ")) : createCommentVNode("", true),
_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Select from all clients", -1))
], 2)
]),
_: 1
}, 8, ["modelValue", "options"])
], 512);
};
}
});
export {
_sfc_main as default
};