@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
190 lines (189 loc) • 8.69 kB
JavaScript
import { defineComponent, useId, computed, ref, watch, toValue, createBlock, createCommentVNode, openBlock, unref, withCtx, createVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, withDirectives, createElementVNode, vModelCheckbox } from "vue";
import { getResolvedRefDeep, ExamplePicker } from "@scalar/api-client/v2/blocks/operation-code-sample";
import { ScalarCard, ScalarIcon, ScalarCardSection, ScalarCodeBlock, ScalarCardFooter, ScalarMarkdown } from "@scalar/components";
import { normalizeMimeTypeObject, getObjectKeys } from "@scalar/oas-utils/helpers";
import { useClipboard } from "@scalar/use-hooks/useClipboard";
import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
import ScreenReader from "../../components/ScreenReader.vue.js";
import ExampleResponse from "./ExampleResponse.vue.js";
import ExampleResponseTab from "./ExampleResponseTab.vue.js";
import ExampleResponseTabList from "./ExampleResponseTabList.vue.js";
import { hasResponseContent } from "./has-response-content.js";
const _hoisted_1 = {
key: 1,
class: "scalar-card-checkbox"
};
const _hoisted_2 = ["aria-controls"];
const _hoisted_3 = {
key: 0,
class: "response-description"
};
const _sfc_main = /* @__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]))
)
);
const selectedResponseIndex = ref(0);
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
);
const keys = getObjectKeys(normalizedContent ?? {});
return (
// OpenAPI 3.x
normalizedContent?.["application/json"] ?? normalizedContent?.["application/xml"] ?? normalizedContent?.["text/plain"] ?? normalizedContent?.["text/html"] ?? normalizedContent?.["*/*"] ?? // Take the first key - in the future we may want to use the selected content type
normalizedContent?.[keys[0] ?? ""] ?? void 0
);
});
const hasMultipleExamples = computed(
() => !!currentResponseContent.value?.examples && Object.keys(currentResponseContent.value?.examples ?? {}).length > 1
);
const selectedExampleKey = ref(
Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? ""
);
const getFirstResponseExample = () => {
const response = toValue(currentResponseContent);
if (!response) {
return void 0;
}
if (Array.isArray(response.examples)) {
return response.examples[0];
}
const firstExampleKey = Object.keys(response.examples ?? {})[0] ?? "";
const firstExample = response.examples?.[firstExampleKey];
return firstExample;
};
const currentExample = computed(
() => hasMultipleExamples.value && selectedExampleKey.value ? currentResponseContent.value?.examples?.[selectedExampleKey.value] : getFirstResponseExample()
);
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, { 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, {
key: statusCode,
"aria-controls": unref(id)
}, {
default: withCtx(() => [
createVNode(ScreenReader, 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(() => [
showSchema.value && currentResponseContent.value?.schema ? (openBlock(), createBlock(unref(ScalarCodeBlock), {
key: 0,
id: unref(id),
class: "-outline-offset-2",
content: unref(getResolvedRefDeep)(currentResponseContent.value?.schema),
lang: "json"
}, null, 8, ["id", "content"])) : (openBlock(), createBlock(ExampleResponse, {
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(() => [
currentResponse.value?.description ? (openBlock(), createElementBlock("div", _hoisted_3, [
createVNode(unref(ScalarMarkdown), {
class: "markdown",
value: currentResponse.value.description
}, null, 8, ["value"])
])) : createCommentVNode("", true),
hasMultipleExamples.value ? (openBlock(), createBlock(unref(ExamplePicker), {
key: 1,
modelValue: selectedExampleKey.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedExampleKey.value = $event),
class: "response-example-selector",
examples: currentResponseContent.value?.examples
}, null, 8, ["modelValue", "examples"])) : createCommentVNode("", true)
]),
_: 1
})) : createCommentVNode("", true)
]),
_: 1
})) : createCommentVNode("", true);
};
}
});
export {
_sfc_main as default
};