@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
121 lines (120 loc) • 5.62 kB
JavaScript
import { getFeaturedClients, isFeaturedClient } from "../helpers/featured-clients.js";
import ClientDropdown_default from "./ClientDropdown.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
import { TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue";
import { ScalarCodeBlock, ScalarMarkdown } from "@scalar/components";
import { DEFAULT_CLIENT } from "@scalar/api-client/blocks/operation-code-sample";
//#region src/blocks/scalar-client-selector-block/components/ClientSelector.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
key: 0,
ref: "wrapper-ref"
};
var _hoisted_2 = ["id"];
var _hoisted_3 = {
key: 1,
class: "selected-client card-footer border-t-0 p-0",
role: "tabpanel",
tabindex: "1"
};
var _hoisted_4 = ["id"];
var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "ClientSelector",
props: {
xScalarSdkInstallation: {},
clientOptions: {},
selectedClient: { default: () => DEFAULT_CLIENT },
eventBus: {}
},
setup(__props, { expose: __expose }) {
const headingId = useId();
const morePanel = useId();
/** Grab the option for the currently selected Http Client */
const selectedClientOption = computed(() => __props.clientOptions.flatMap((optionGroup) => optionGroup.options.find((option) => option.id === __props.selectedClient) ?? [])[0]);
/** List of featured clients */
const featuredClients = computed(() => getFeaturedClients(__props.clientOptions));
/** Currently selected tab index */
const tabIndex = computed(() => featuredClients.value.findIndex((featuredClient) => __props.selectedClient === featuredClient.id));
const wrapper = useTemplateRef("wrapper-ref");
/** Emit the selected client event on tab */
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;
const instruction = __props.xScalarSdkInstallation.find((instruction) => {
const targetKey = __props.selectedClient?.split("/")[0]?.toLowerCase();
return instruction.lang.toLowerCase() === targetKey;
});
if (!instruction) return;
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_default, {
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-b-lg *:first:p-3",
content: installationInstructions.value.source,
copy: "always",
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);
};
}
});
//#endregion
export { ClientSelector_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=ClientSelector.vue.script.js.map