@scalar/api-reference/dist/features/multiple-documents/DocumentSelector.vue.js

Generate beautiful API references from OpenAPI documents

import { defineComponent as p, computed as n, createElementBlock as b, createCommentVNode as f, openBlock as x, createVNode as a, unref as r, withCtx as V, createElementVNode as i, toDisplayString as v } from "vue";
import { ScalarListbox as g } from "@scalar/components";
import { ScalarIconCaretUpDown as h } from "@scalar/icons";
const S = {
  key: 0,
  class: "document-selector -mb-1 p-3 pb-0"
}, w = {
  class: "group/dropdown-label hover:bg-b-2 text-c-2 flex h-8 w-full cursor-pointer items-center rounded border px-2 py-1.75",
  type: "button"
}, _ = { class: "text-c-1 overflow-hidden text-base text-ellipsis" }, k = /* @__PURE__ */ p({
  __name: "DocumentSelector",
  props: {
    options: {},
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(o, { emit: c }) {
    const u = c, d = n(() => o.options && o.options?.length > 1), s = n(
      () => o.options?.map((e, t) => ({
        id: String(t),
        // Get the display text for the selected option
        label: e.title || e.slug || `API #${t + 1}`
      })) || []
    ), l = n({
      get: () => s.value.find(({ id: e }) => e === String(o.modelValue)),
      set: (e) => u("update:modelValue", Number(e.id))
    });
    return (e, t) => d.value ? (x(), b("div", S, [
      a(r(g), {
        modelValue: l.value,
        "onUpdate:modelValue": t[0] || (t[0] = (m) => l.value = m),
        options: s.value,
        resize: ""
      }, {
        default: V(() => [
          i("button", w, [
            a(r(h), { class: "mr-1 size-4 text-current" }),
            i("span", _, v(l.value?.label || "Select API"), 1)
          ])
        ]),
        _: 1
      }, 8, ["modelValue", "options"])
    ])) : f("", !0);
  }
});
export {
  k as default
};