@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
158 lines (157 loc) • 7.92 kB
JavaScript
import ScreenReader_default from "../../components/ScreenReader.vue.js";
import ExampleSchema_default from "./ExampleSchema.vue.js";
import ExampleResponse_default from "./ExampleResponse.vue.js";
import ExampleResponseTab_default from "./ExampleResponseTab.vue.js";
import ExampleResponseTabList_default from "./ExampleResponseTabList.vue.js";
import { normalizeMimeTypeObject } from "./helpers/normalize-mime-type-object.js";
import { hasResponseContent } from "./helpers/has-response-content.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, toValue, unref, useId, vModelCheckbox, watch, withCtx, withDirectives } from "vue";
import { ScalarCard, ScalarCardFooter, ScalarCardSection, ScalarIcon, ScalarMarkdown } from "@scalar/components";
import { useClipboard } from "@scalar/use-hooks/useClipboard";
import { getExample } from "@scalar/workspace-store/request-example";
import { ExamplePicker } from "@scalar/api-client/blocks/operation-code-sample";
import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
import { objectKeys } from "@scalar/helpers/object/object-keys";
//#region src/features/example-responses/ExampleResponses.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
key: 1,
class: "scalar-card-checkbox"
};
var _hoisted_2 = ["aria-controls"];
var _hoisted_3 = { class: "response-description" };
/**
* TODO: copyToClipboard isn't using the right content if there are multiple examples
*/
var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "ExampleResponses",
props: { responses: {} },
setup(__props) {
const id = useId();
const { copyToClipboard } = useClipboard();
const orderedStatusCodes = computed(() => Object.keys(__props.responses ?? {}).sort());
const statusCodesWithContent = computed(() => orderedStatusCodes.value.filter((statusCode) => hasResponseContent(getResolvedRef(__props.responses?.[statusCode]), statusCode)));
const selectedResponseIndex = ref(0);
/**
* Clamp the selected index when the filtered list shrinks.
* Without this, the index can become out of bounds and cause a mismatch
* between the visible tabs and the displayed content.
*
* We also reset `selectedExampleKey` to match the behavior of `changeTab`,
* since the new response may not have the same example keys.
*/
watch(statusCodesWithContent, (codes) => {
if (codes.length === 0) {
selectedResponseIndex.value = 0;
selectedExampleKey.value = "";
} else if (selectedResponseIndex.value >= codes.length) {
selectedResponseIndex.value = codes.length - 1;
selectedExampleKey.value = "";
}
});
const currentResponse = computed(() => {
const currentStatusCode = toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? "";
return getResolvedRef(__props.responses?.[currentStatusCode]);
});
const currentResponseContent = computed(() => {
const normalizedContent = normalizeMimeTypeObject(currentResponse.value?.content);
/** All the keys of the normalized content */
const keys = objectKeys(normalizedContent ?? {});
return normalizedContent?.[keys[0] ?? ""];
});
const hasMultipleExamples = computed(() => !!currentResponseContent.value?.examples && Object.keys(currentResponseContent.value?.examples ?? {}).length > 1);
const selectedExampleKey = ref(Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? "");
/** Get the current example to display */
const currentExample = computed(() => {
if (!currentResponseContent.value) return;
if (hasMultipleExamples.value && selectedExampleKey.value) return currentResponseContent.value.examples?.[selectedExampleKey.value];
return getExample(currentResponseContent.value, void 0, void 0);
});
const changeTab = (index) => {
selectedResponseIndex.value = index;
selectedExampleKey.value = "";
};
const showSchema = ref(false);
return (_ctx, _cache) => {
return statusCodesWithContent.value.length ? (openBlock(), createBlock(unref(ScalarCard), {
key: 0,
"aria-label": "Example Responses",
class: "response-card",
role: "region"
}, {
default: withCtx(() => [
createVNode(ExampleResponseTabList_default, { onChange: changeTab }, {
actions: withCtx(() => [currentResponseContent.value?.example ? (openBlock(), createElementBlock("button", {
key: 0,
class: "code-copy",
type: "button",
onClick: _cache[0] || (_cache[0] = () => unref(copyToClipboard)(currentResponseContent.value?.example))
}, [createVNode(unref(ScalarIcon), {
icon: "Clipboard",
width: "12px"
})])) : createCommentVNode("", true), currentResponseContent.value?.schema ? (openBlock(), createElementBlock("label", _hoisted_1, [
_cache[4] || (_cache[4] = createTextVNode(" Show Schema ", -1)),
withDirectives(createElementVNode("input", {
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showSchema.value = $event),
"aria-controls": unref(id),
class: "scalar-card-checkbox-input",
type: "checkbox"
}, null, 8, _hoisted_2), [[vModelCheckbox, showSchema.value]]),
_cache[5] || (_cache[5] = createElementVNode("span", { class: "scalar-card-checkbox-checkmark" }, null, -1))
])) : createCommentVNode("", true)]),
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(statusCodesWithContent.value, (statusCode) => {
return openBlock(), createBlock(ExampleResponseTab_default, {
key: statusCode,
"aria-controls": unref(id)
}, {
default: withCtx(() => [createVNode(ScreenReader_default, null, {
default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Status:", -1)])]),
_: 1
}), createTextVNode(" " + toDisplayString(statusCode), 1)]),
_: 2
}, 1032, ["aria-controls"]);
}), 128))]),
_: 1
}),
createVNode(unref(ScalarCardSection), { class: "grid flex-1" }, {
default: withCtx(() => [currentResponseContent.value?.schema && showSchema.value ? (openBlock(), createBlock(ExampleSchema_default, {
key: 0,
id: unref(id),
schema: currentResponseContent.value?.schema
}, null, 8, ["id", "schema"])) : (openBlock(), createBlock(ExampleResponse_default, {
key: 1,
id: unref(id),
example: currentExample.value,
response: currentResponseContent.value
}, null, 8, [
"id",
"example",
"response"
]))]),
_: 1
}),
currentResponse.value?.description || hasMultipleExamples.value ? (openBlock(), createBlock(unref(ScalarCardFooter), {
key: 0,
class: "response-card-footer"
}, {
default: withCtx(() => [hasMultipleExamples.value ? (openBlock(), createBlock(unref(ExamplePicker), {
key: 0,
modelValue: selectedExampleKey.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedExampleKey.value = $event),
class: "response-example-selector px-0",
examples: currentResponseContent.value?.examples
}, null, 8, ["modelValue", "examples"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [currentResponse.value?.description ? (openBlock(), createBlock(unref(ScalarMarkdown), {
key: 0,
class: "response-description-markdown",
value: currentResponse.value.description
}, null, 8, ["value"])) : createCommentVNode("", true)])]),
_: 1
})) : createCommentVNode("", true)
]),
_: 1
})) : createCommentVNode("", true);
};
}
});
//#endregion
export { ExampleResponses_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=ExampleResponses.vue.script.js.map