@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
87 lines (86 loc) • 3.37 kB
JavaScript
import { defineComponent, mergeModels, useModel, computed, createBlock, createElementBlock, openBlock, unref, withModifiers, withCtx, createVNode, normalizeClass, createElementVNode, createTextVNode, toDisplayString } from "vue";
import { cva, ScalarListbox, ScalarButton } from "@scalar/components";
import { ScalarIconCaretDown } from "@scalar/icons";
import ScreenReader from "../../../components/ScreenReader.vue.js";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "ContentTypeSelect",
props: /* @__PURE__ */ mergeModels({
content: {}
}, {
"modelValue": { required: true },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props) {
const selectedContentType = useModel(__props, "modelValue");
const contentTypes = computed(() => Object.keys(__props.content ?? {}));
const selectedOption = computed({
get: () => options.value.find((option) => option.id === selectedContentType.value),
set: (option) => {
if (option) {
selectedContentType.value = option.id;
}
}
});
const options = computed(() => {
return contentTypes.value.map((type) => ({
id: type,
label: type
}));
});
const contentTypeSelect = cva({
base: "font-normal text-c-2 bg-b-2 py-0.75 flex cursor-pointer items-center gap-1 rounded-full text-xs",
variants: {
dropdown: {
true: "border hover:text-c-1 pl-2 pr-1.5",
false: "px-2"
}
}
});
return (_ctx, _cache) => {
return contentTypes.value.length > 1 ? (openBlock(), createBlock(unref(ScalarListbox), {
key: 0,
modelValue: selectedOption.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedOption.value = $event),
options: options.value,
placement: "bottom-end",
onClick: _cache[2] || (_cache[2] = withModifiers(() => {
}, ["stop"]))
}, {
default: withCtx(({ open }) => [
createVNode(unref(ScalarButton), {
class: normalizeClass(["h-fit", unref(contentTypeSelect)({ dropdown: true })]),
variant: "ghost",
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["stop"]))
}, {
default: withCtx(() => [
createVNode(ScreenReader, null, {
default: withCtx(() => [..._cache[3] || (_cache[3] = [
createTextVNode("Selected Content Type:", -1)
])]),
_: 1
}),
createElementVNode("span", null, toDisplayString(selectedContentType.value), 1),
createVNode(unref(ScalarIconCaretDown), {
class: normalizeClass(["size-2.75 transition-transform duration-100", { "rotate-180": open }]),
weight: "bold"
}, null, 8, ["class"])
]),
_: 2
}, 1032, ["class"])
]),
_: 1
}, 8, ["modelValue", "options"])) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["selected-content-type", unref(contentTypeSelect)({ dropdown: false })]),
tabindex: "0"
}, [
createElementVNode("span", null, toDisplayString(selectedContentType.value), 1)
], 2));
};
}
});
export {
_sfc_main as default
};