@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
106 lines (105 loc) • 5.15 kB
JavaScript
import { isFeaturedClient } from "../helpers/featured-clients.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
import { Tab } from "@headlessui/vue";
import { ScalarCombobox, ScalarIcon } from "@scalar/components";
import { filterClientsByQuery, findClient } from "@scalar/api-client/blocks/operation-code-sample";
import { freezeElement } from "@scalar/helpers/dom/freeze-element";
//#region src/blocks/scalar-client-selector-block/components/ClientDropdown.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "client-libraries-text" };
var _hoisted_2 = {
"aria-hidden": "true",
class: "client-libraries-icon__more"
};
var _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"
};
var _hoisted_4 = {
key: 0,
class: "client-libraries-text client-libraries-text-more"
};
var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "ClientDropdown",
props: {
clientOptions: {},
selectedClient: {},
featuredClients: {},
eventBus: {}
},
setup(__props) {
const containerRef = ref();
/**
* Icons have longer names to appear in icon searches, e.g. "javascript-js" instead of just "javascript". This function
* maps the language key to the icon name.
*/
const getIconByLanguageKey = (targetKey) => `programming-language-${targetKey === "js" ? "javascript" : targetKey}`;
/** Set custom example, or update the selected HTTP client globally */
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);
};
/** Calculates the targetKey from the selected client 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), {
filterFn: unref(filterClientsByQuery),
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, [
"filterFn",
"modelValue",
"options"
])], 512);
};
}
});
//#endregion
export { ClientDropdown_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=ClientDropdown.vue.script.js.map