@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
143 lines (142 loc) • 6.2 kB
JavaScript
import { defineComponent, useId, computed, useTemplateRef, createElementBlock, createCommentVNode, openBlock, createVNode, unref, withCtx, createElementVNode, Fragment, normalizeClass, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
import { TabGroup, TabList, TabPanels, TabPanel } from "@headlessui/vue";
import { DEFAULT_CLIENT } from "@scalar/api-client/v2/blocks/operation-code-sample";
import { ScalarMarkdown, ScalarCodeBlock } from "@scalar/components";
import { getFeaturedClients, isFeaturedClient } from "../helpers/featured-clients.js";
import ClientDropdown from "./ClientDropdown.vue.js";
const _hoisted_1 = {
key: 0,
ref: "wrapper-ref"
};
const _hoisted_2 = ["id"];
const _hoisted_3 = {
key: 1,
class: "selected-client card-footer border-t-0 p-0",
role: "tabpanel",
tabindex: "1"
};
const _hoisted_4 = ["id"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "ClientSelector",
props: {
xScalarSdkInstallation: {},
clientOptions: {},
selectedClient: { default: () => DEFAULT_CLIENT },
eventBus: {}
},
setup(__props, { expose: __expose }) {
const headingId = useId();
const morePanel = useId();
const selectedClientOption = computed(
() => __props.clientOptions.flatMap(
(optionGroup) => optionGroup.options.find((option) => option.id === __props.selectedClient) ?? []
)[0]
);
const featuredClients = computed(() => getFeaturedClients(__props.clientOptions));
const tabIndex = computed(
() => featuredClients.value.findIndex(
(featuredClient) => __props.selectedClient === featuredClient.id
)
);
const wrapper = useTemplateRef("wrapper-ref");
const onTabSelect = (i) => {
const client = featuredClients.value[i];
if (!client || !wrapper.value) {
return;
}
__props.eventBus.emit("workspace:update:selected-client", client.id);
};
const installationInstructions = computed(() => {
if (!Array.isArray(__props.xScalarSdkInstallation) || !__props.xScalarSdkInstallation?.length) {
return void 0;
}
const instruction = __props.xScalarSdkInstallation.find((instruction2) => {
const targetKey = __props.selectedClient?.split("/")[0]?.toLowerCase();
return instruction2.lang.toLowerCase() === targetKey;
});
if (!instruction) {
return void 0;
}
return instruction;
});
__expose({
selectedClientOption
});
return (_ctx, _cache) => {
return __props.clientOptions.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(TabGroup), {
manual: "",
selectedIndex: tabIndex.value,
onChange: onTabSelect
}, {
default: withCtx(() => [
createElementVNode("div", {
id: unref(headingId),
class: "client-libraries-heading"
}, " Client Libraries ", 8, _hoisted_2),
createVNode(unref(TabList), {
"aria-labelledby": unref(headingId),
class: "client-libraries-list"
}, {
default: withCtx(() => [
createVNode(ClientDropdown, {
clientOptions: __props.clientOptions,
eventBus: __props.eventBus,
featuredClients: featuredClients.value,
morePanel: unref(morePanel),
selectedClient: __props.selectedClient
}, null, 8, ["clientOptions", "eventBus", "featuredClients", "morePanel", "selectedClient"])
]),
_: 1
}, 8, ["aria-labelledby"]),
createVNode(unref(TabPanels), null, {
default: withCtx(() => [
installationInstructions.value?.source || installationInstructions.value?.description ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
installationInstructions.value.description ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["selected-client card-footer -outline-offset-2", installationInstructions.value.source && "rounded-b-none"]),
role: "tabpanel",
tabindex: "0"
}, [
createVNode(unref(ScalarMarkdown), {
value: installationInstructions.value.description
}, null, 8, ["value"])
], 2)) : createCommentVNode("", true),
installationInstructions.value.source ? (openBlock(), createElementBlock("div", _hoisted_3, [
createVNode(unref(ScalarCodeBlock), {
class: "rounded-t-none rounded-b-lg px-3 py-2 -outline-offset-1 has-focus:outline",
content: installationInstructions.value.source,
copy: true,
lang: "shell"
}, null, 8, ["content"])
])) : createCommentVNode("", true)
], 64)) : unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(featuredClients.value, (client) => {
return openBlock(), createBlock(unref(TabPanel), {
key: client.id,
class: "selected-client card-footer -outline-offset-2"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(client.title), 1)
]),
_: 2
}, 1024);
}), 128)) : (openBlock(), createElementBlock("div", {
key: 2,
id: unref(morePanel),
class: "selected-client card-footer -outline-offset-2",
role: "tabpanel",
tabindex: "0"
}, toDisplayString(selectedClientOption.value?.title), 9, _hoisted_4))
]),
_: 1
})
]),
_: 1
}, 8, ["selectedIndex"])
], 512)) : createCommentVNode("", true);
};
}
});
export {
_sfc_main as default
};