@scalar/api-client/dist/components/Server/ServerVariablesSelect.vue.js

the open source API testing client

import { defineComponent as f, computed as r, createBlock as v, openBlock as s, unref as t, withCtx as c, createVNode as i, createElementVNode as g, normalizeClass as S, createElementBlock as V, createCommentVNode as b, createTextVNode as h, toDisplayString as C } from "vue";
import { ScalarListbox as k, ScalarButton as x } from "@scalar/components";
import { ScalarIconCaretDown as B } from "@scalar/icons";
const N = {
  key: 0,
  class: "sr-only"
}, z = /* @__PURE__ */ f({
  __name: "ServerVariablesSelect",
  props: {
    enum: {},
    value: {},
    controls: {}
  },
  emits: ["change"],
  setup(u, { emit: m }) {
    const o = u, p = m, a = r(
      () => o.enum.map((e) => ({ id: e, label: e }))
    ), n = r({
      get: () => a.value.find((e) => e.id === o.value),
      set: (e) => p("change", e?.id ?? "")
    });
    return (e, l) => (s(), v(t(k), {
      modelValue: n.value,
      "onUpdate:modelValue": l[0] || (l[0] = (d) => n.value = d),
      options: a.value
    }, {
      default: c(() => [
        i(t(x), {
          "aria-controls": e.controls,
          class: "group/button h-8 gap-1.5 p-1.5 text-base font-normal",
          variant: "ghost"
        }, {
          default: c(() => [
            g("span", {
              class: S({ "text-c-1": e.value })
            }, [
              e.value ? (s(), V("span", N, " Selected: ")) : b("", !0),
              h(" " + C(e.value || "Select value"), 1)
            ], 2),
            i(t(B), {
              weight: "bold",
              class: "mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180"
            })
          ]),
          _: 1
        }, 8, ["aria-controls"])
      ]),
      _: 1
    }, 8, ["modelValue", "options"]));
  }
});
export {
  z as default
};