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

the open source API testing client

import { defineComponent as V, computed as u, watch as z, useTemplateRef as E, createBlock as p, openBlock as o, unref as n, withCtx as v, createVNode as c, createElementBlock as a, Fragment as d, createElementVNode as s, createTextVNode as L, toDisplayString as T, createCommentVNode as g, renderList as h } from "vue";
import { ScalarPopover as W, ScalarButton as q, ScalarIcon as k, ScalarFloatingBackdrop as F, ScalarDropdownDivider as I } from "@scalar/components";
import { emitCustomEvent as M } from "@scalar/workspace-store/events";
import { useLayout as O } from "../../hooks/useLayout.js";
import { useWorkspace as P } from "../../store/store.js";
import w from "./ServerDropdownItem.vue.js";
const $ = ["onClick"], j = { class: "flex h-4 w-4 items-center justify-center" }, X = /* @__PURE__ */ V({
  __name: "ServerDropdown",
  props: {
    collection: {},
    operation: {},
    server: {},
    target: {}
  },
  setup(r) {
    const { layout: x } = O(), { servers: m, collectionMutators: y, events: U, serverMutators: C } = P(), f = u(
      () => r.operation?.servers?.map((e) => ({
        id: e,
        label: m[e]?.url ?? "Unknown server"
      }))
    ), b = u(
      () => (
        // Filters out servers already present in the request
        r.collection?.servers?.filter((e) => !r.operation?.servers?.includes(e)).map((e) => ({
          id: e,
          label: m[e]?.url ?? "Unknown server"
        }))
      )
    ), A = u(
      () => f.value?.length && b.value?.length
    );
    z([() => r.collection, () => r.operation], ([e, t]) => {
      if (!e || e.selectedServerUid || t?.selectedServerUid)
        return;
      const l = r.collection.servers?.[0];
      l && y.edit(r.collection.uid, "selectedServerUid", l);
    });
    const D = () => U.commandPalette.emit({
      commandName: "Add Server"
    }), B = u(() => r.server?.url?.endsWith("/") ? r.server.url.slice(0, -1) : r.server?.url || ""), S = (e, t) => {
      if (!r.server)
        return;
      const l = r.server.variables || {};
      l[e] = { ...l[e], default: t }, C.edit(r.server.uid, "variables", l), M(
        N.value?.$el,
        "scalar-update-selected-server-variables",
        { key: e, value: t }
      );
    }, N = E("wrapper-ref");
    return (e, t) => (o(), p(n(W), {
      ref: "wrapper-ref",
      class: "max-h-[inherit] p-0 text-base",
      focus: "",
      offset: 0,
      placement: "bottom-start",
      resize: "",
      target: e.target,
      teleport: `#${e.target}`
    }, {
      popover: v(({ close: l }) => [
        s("div", {
          class: "custom-scroll flex max-h-[inherit] flex-col gap-1 border-t p-1",
          onClick: l
        }, [
          (o(!0), a(d, null, h(f.value, (i) => (o(), p(w, {
            key: i.id,
            collection: e.collection,
            operation: e.operation,
            server: e.server,
            serverOption: i,
            type: "request",
            "onUpdate:variable": S
          }, null, 8, ["collection", "operation", "server", "serverOption"]))), 128)),
          A.value ? (o(), a(d, { key: 0 }, [
            c(n(I)),
            t[2] || (t[2] = s("div", { class: "text-xxs text-c-2 px-2.5 py-1" }, "Collection", -1))
          ], 64)) : g("", !0),
          (o(!0), a(d, null, h(b.value, (i) => (o(), p(w, {
            key: i.id,
            collection: e.collection,
            operation: e.operation,
            server: e.server,
            serverOption: i,
            type: "collection",
            "onUpdate:variable": S
          }, null, 8, ["collection", "operation", "server", "serverOption"]))), 128)),
          n(x) !== "modal" ? (o(), a("button", {
            key: 1,
            class: "text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75",
            type: "button",
            onClick: D
          }, [
            s("div", j, [
              c(n(k), {
                icon: "Add",
                size: "sm"
              })
            ]),
            t[3] || (t[3] = s("span", null, "Add Server", -1))
          ])) : g("", !0)
        ], 8, $)
      ]),
      backdrop: v(() => [
        c(n(F), { class: "-top-(--scalar-address-bar-height) rounded-lg" })
      ]),
      default: v(() => [
        c(n(q), {
          class: "z-context-plus hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap",
          variant: "ghost"
        }, {
          default: v(() => [
            e.operation?.selectedServerUid || e.collection.selectedServerUid ? (o(), a(d, { key: 0 }, [
              t[0] || (t[0] = s("span", { class: "sr-only" }, "Server:", -1)),
              L(" " + T(B.value), 1)
            ], 64)) : (o(), a(d, { key: 1 }, [
              t[1] || (t[1] = s("span", { class: "sr-only" }, "Add Server", -1)),
              c(n(k), {
                icon: "Add",
                size: "xs"
              })
            ], 64))
          ]),
          _: 1
        })
      ]),
      _: 1
    }, 8, ["target", "teleport"]));
  }
});
export {
  X as default
};