@scalar/api-client/dist/views/Request/RequestSection/RequestCodeExample.vue2.js

the open source API testing client

import { defineComponent as $, computed as a, ref as E, createElementBlock as B, openBlock as y, createVNode as i, withCtx as c, createElementVNode as x, createBlock as K, unref as u, toDisplayString as V, createTextVNode as H } from "vue";
import { ScalarCodeBlock as U, ScalarCombobox as j, ScalarButton as D, ScalarIcon as N } from "@scalar/components";
import { snippetz as T } from "@scalar/snippetz";
import z from "../../../components/DataTable/DataTable.vue.js";
import I from "../../../components/DataTable/DataTableRow.vue.js";
import O from "../../../components/ViewLayout/ViewLayoutCollapse.vue.js";
import R from "../../Components/CodeSnippet/CodeSnippet.vue.js";
import { useWorkspace as W } from "../../../store/store.js";
const q = { class: "w-full" }, M = { class: "flex flex-1" }, P = { class: "bg-b-1 flex items-center justify-center overflow-hidden border-t" }, Z = /* @__PURE__ */ $({
  __name: "RequestCodeExample",
  props: {
    collection: {},
    example: {},
    operation: {},
    server: {},
    workspace: {},
    environment: {}
  },
  setup(n) {
    const { securitySchemes: b, workspaceMutators: S } = W(), f = a(() => m.value.targetKey === "custom" && d.value?.some(
      (t) => t.lang === m.value.clientKey
    ) ? m.value : {
      targetKey: n.workspace.selectedHttpClient?.targetKey ?? "js",
      clientKey: n.workspace.selectedHttpClient?.clientKey ?? "fetch"
    }), d = a(
      () => n.operation["x-codeSamples"] || n.operation["x-code-samples"] || n.operation["x-custom-examples"]
    ), m = E(
      d.value?.length ? {
        targetKey: "custom",
        clientKey: d.value[0]?.lang
      } : {
        targetKey: n.workspace.selectedHttpClient?.targetKey ?? "js",
        clientKey: n.workspace.selectedHttpClient?.clientKey ?? "fetch"
      }
    ), h = a(() => (n.operation.selectedSecuritySchemeUids || n.collection.selectedSecuritySchemeUids || []).flat().map((t) => b[t]).filter((t) => !!t)), v = a(() => {
      const e = {}, t = T().clients().map((l) => ({
        label: l.title,
        options: l.clients.map((p) => (e[`${l.key},${p.client}`] = p.title, {
          id: `${l.key},${p.client}`,
          label: p.title
        }))
      })), o = (n.operation["x-codeSamples"] || n.operation["x-code-samples"] || n.operation["x-custom-examples"] || []).map((l) => ({
        id: `custom,${l.lang}`,
        label: l.label || l.lang
      })), r = o.length > 0 ? [
        {
          id: "customExamples",
          label: "Code Examples",
          options: o.map((l) => ({
            id: l.id,
            label: l.label ?? l.id
          }))
        },
        ...t
      ] : t;
      return o.forEach((l) => {
        e[l.id] = l.label ?? l.id;
      }), {
        options: r,
        dict: e
      };
    }), s = a(() => {
      const e = f.value;
      if (e.targetKey === "custom") {
        const o = `custom,${e.clientKey}`;
        return {
          id: o,
          label: v.value.dict[o] ?? "Unknown"
        };
      }
      const t = `${e.targetKey},${e.clientKey}`;
      return {
        id: t,
        label: v.value.dict[t] ?? "Unknown"
      };
    }), C = a(
      () => f.value.targetKey
    ), k = a(
      () => f.value.clientKey
    ), w = (e) => {
      if (!e)
        return;
      const { id: t } = e, [o, r] = t.split(",");
      !o || !r || (m.value = {
        targetKey: o,
        clientKey: r
      }, o !== "custom" && S.edit(n.workspace.uid, "selectedHttpClient", {
        targetKey: o,
        clientKey: r
      }));
    }, g = a(() => {
      if (!s.value.id.startsWith("custom,"))
        return;
      const e = s.value.id.split(",")[1];
      return d.value?.find((o) => o.lang === e)?.source;
    });
    return (e, t) => (y(), B("div", q, [
      i(O, {
        class: "group/preview w-full border-b-0",
        defaultOpen: !1
      }, {
        title: c(() => [...t[0] || (t[0] = [
          H("Code Snippet", -1)
        ])]),
        actions: c(() => [
          x("div", M, [
            i(u(j), {
              modelValue: s.value,
              options: v.value.options,
              placement: "bottom-end",
              "onUpdate:modelValue": w
            }, {
              default: c(() => [
                i(u(D), {
                  class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-1.25 py-0.75 font-normal",
                  variant: "ghost"
                }, {
                  default: c(() => [
                    x("span", null, V(s.value?.label), 1),
                    i(u(N), {
                      icon: "ChevronDown",
                      size: "md"
                    })
                  ]),
                  _: 1
                })
              ]),
              _: 1
            }, 8, ["modelValue", "options"])
          ])
        ]),
        default: c(() => [
          i(z, {
            columns: [""],
            presentational: ""
          }, {
            default: c(() => [
              i(I, null, {
                default: c(() => [
                  x("div", P, [
                    g.value ? (y(), K(u(U), {
                      key: 0,
                      content: g.value,
                      lang: s.value.id.split(",")[1] ?? "plaintext"
                    }, null, 8, ["content", "lang"])) : (y(), K(u(R), {
                      key: 1,
                      client: k.value,
                      example: e.example,
                      operation: e.operation,
                      securitySchemes: h.value,
                      server: e.server,
                      target: C.value,
                      environment: e.environment
                    }, null, 8, ["client", "example", "operation", "securitySchemes", "server", "target", "environment"]))
                  ])
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ]),
        _: 1
      })
    ]));
  }
});
export {
  Z as default
};