@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
56 lines (55 loc) • 1.8 kB
JavaScript
import { defineComponent as u, mergeModels as c, useModel as p, computed as n, createBlock as f, openBlock as x, unref as l, withCtx as r, createVNode as i, createElementVNode as v, toDisplayString as w } from "vue";
import { ScalarListbox as V, ScalarButton as b } from "@scalar/components";
import { ScalarIconCaretDown as g } from "@scalar/icons";
const h = { class: "min-w-0 flex-1 truncate" }, k = /* @__PURE__ */ u({
__name: "ExamplePicker",
props: /* @__PURE__ */ c({
examples: { default: () => ({}) }
}, {
modelValue: {
required: !0
},
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(o) {
const s = p(o, "modelValue"), m = n(
() => Object.entries(o.examples).map(([e, t]) => ({
id: e,
label: t?.summary ?? e
}))
), a = n({
get: () => m.value.find(({ id: e }) => e === s.value),
set: (e) => s.value = e?.id ?? ""
});
return (e, t) => (x(), f(l(V), {
modelValue: a.value,
"onUpdate:modelValue": t[0] || (t[0] = (d) => a.value = d),
class: "w-fit min-w-32",
options: m.value,
placement: "bottom-start"
}, {
default: r(() => [
i(l(b), {
class: "text-c-2 hover:text-c-1 flex h-full w-fit min-w-0 gap-1.5 px-1.5 py-0.75 text-base font-normal",
"data-testid": "example-picker",
fullWidth: "",
variant: "ghost"
}, {
default: r(() => [
v("div", h, w(a.value?.label ?? "Select an example"), 1),
i(l(g), {
class: "ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100",
weight: "bold"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"]));
}
});
export {
k as default
};