@scalar/api-client
Version:
the open source API testing client
244 lines (243 loc) • 8.85 kB
JavaScript
import { defineComponent as D, computed as n, ref as C, watch as N, useId as R, createBlock as i, createCommentVNode as f, openBlock as s, unref as o, withCtx as r, createVNode as u, createSlots as z, createElementVNode as g, createElementBlock as S, renderSlot as y, createTextVNode as K, toDisplayString as M } from "vue";
import { ScalarCard as T, ScalarCardHeader as U, ScalarCombobox as A, ScalarButton as F, ScalarCardSection as q, ScalarCodeBlock as Z, ScalarVirtualText as G, ScalarCardFooter as J } from "@scalar/components";
import { freezeElement as P } from "@scalar/helpers/dom/freeze-element";
import { ScalarIconCaretDown as Q } from "@scalar/icons";
import { emitCustomEvent as V } from "@scalar/workspace-store/events";
import { getResolvedRef as X } from "@scalar/workspace-store/helpers/get-resolved-ref";
import { operationToHar as Y } from "../helpers/operation-to-har/operation-to-har.js";
import E from "./HttpMethod.vue.js";
import { findClient as O } from "../helpers/find-client.js";
import { generateCustomId as $ } from "../helpers/generate-client-options.js";
import { generateCodeSnippet as _ } from "../helpers/generate-code-snippet.js";
import { getSecrets as ee } from "../helpers/get-secrets.js";
import te from "./ExamplePicker.vue.js";
const le = ["innerHTML"], oe = ["id"], ae = {
key: 0,
class: "request-card-footer-addon"
}, ne = { class: "request-header" }, re = {}, Ce = /* @__PURE__ */ D({
...re,
__name: "OperationCodeSample",
props: {
clientOptions: {},
selectedClient: {},
selectedServer: { default: () => ({ url: "/" }) },
selectedContentType: {},
selectedExample: {},
securitySchemes: { default: () => [] },
method: {},
path: {},
operation: {},
fallback: { type: Boolean },
generateLabel: { type: Function },
isWebhook: { type: Boolean }
},
setup(l) {
const d = n(() => {
const e = X(l.operation.requestBody)?.content ?? {}, t = l.selectedContentType || Object.keys(e)[0];
return t ? e[t]?.examples ?? {} : {};
}), p = C(
l.selectedExample ?? Object.keys(d.value)[0] ?? ""
), b = n(() => [
"x-custom-examples",
"x-codeSamples",
"x-code-samples"
].flatMap((t) => l.operation[t] ?? [])), h = n(() => b.value.length ? [
{
label: "Code Examples",
options: b.value.map((t) => {
const a = $(t), k = t.label || t.lang || a;
return {
id: a,
lang: t.lang || "plaintext",
title: k,
label: k
};
})
},
...l.clientOptions
] : l.clientOptions), c = C(
O(h.value, l.selectedClient)
);
N(
() => l.selectedClient,
(e) => {
const t = O(h.value, e);
t && (c.value = t);
}
);
const x = n(() => {
if (!l.isWebhook) return null;
try {
return Y({
operation: l.operation,
method: l.method,
path: l.path,
example: p.value
});
} catch (e) {
return console.error("[webhookHar]", e), null;
}
}), v = n(() => {
try {
const e = c.value?.id;
return e ? e.startsWith("custom") ? b.value.find(
(t) => $(t) === c.value?.id
)?.source ?? "Custom example not found" : l.isWebhook ? x.value?.postData?.text ?? "" : _({
clientId: e,
operation: l.operation,
method: l.method,
server: l.selectedServer,
securitySchemes: l.securitySchemes,
contentType: l.selectedContentType,
path: l.path,
example: p.value
}) : "";
} catch (e) {
return console.error("[generateSnippet]", e), "";
}
}), B = n(() => l.isWebhook ? j.value : c.value?.lang), j = n(() => {
if (!x.value?.postData) return "json";
const e = x.value.postData.mimeType;
return e?.includes("json") ? "json" : e?.includes("xml") ? "xml" : e?.includes("yaml") || e?.includes("yml") ? "yaml" : e?.includes("text/plain") ? "text" : "json";
}), w = n(() => ee(l.securitySchemes)), m = C(null), H = (e) => {
if (m.value) {
const t = P(m.value.$el);
setTimeout(() => {
t();
}, 300);
}
c.value = e, e.id.startsWith("custom") || V(m.value?.$el, "scalar-update-selected-client", e.id);
}, L = 2e4, I = n(() => (v.value.length ?? 0) > L), W = R();
return (e, t) => v.value ? (s(), i(o(T), {
key: 0,
ref_key: "elem",
ref: m,
class: "request-card dark-mode"
}, {
default: r(() => [
u(o(U), { class: "pr-2.5" }, z({
default: r(() => [
t[3] || (t[3] = g("span", { class: "sr-only" }, "Request Example for", -1)),
u(E, {
as: "span",
class: "request-method",
method: e.method
}, null, 8, ["method"]),
e.generateLabel ? (s(), S("span", {
key: 0,
innerHTML: e.generateLabel()
}, null, 8, le)) : f("", !0),
y(e.$slots, "header", {}, void 0, !0)
]),
_: 2
}, [
!e.isWebhook && h.value.length ? {
name: "actions",
fn: r(() => [
u(o(A), {
class: "max-h-80",
modelValue: c.value,
options: h.value,
placement: "bottom-end",
teleport: "",
"onUpdate:modelValue": t[0] || (t[0] = (a) => H(a))
}, {
default: r(() => [
u(o(F), {
class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal",
"data-testid": "client-picker",
variant: "ghost"
}, {
default: r(() => [
K(M(c.value?.title) + " ", 1),
u(o(Q), {
class: "ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100",
weight: "bold"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"])
]),
key: "0"
} : void 0
]), 1024),
u(o(q), { class: "request-editor-section custom-scroll p-0" }, {
default: r(() => [
g("div", {
id: `${o(W)}-example`,
class: "code-snippet"
}, [
I.value ? (s(), i(o(G), {
key: 1,
containerClass: "custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen",
contentClass: "language-plaintext whitespace-pre font-code text-base",
lineHeight: 20,
text: v.value
}, null, 8, ["text"])) : (s(), i(o(Z), {
key: 0,
class: "bg-b-2 !min-h-full -outline-offset-2",
content: v.value,
hideCredentials: w.value,
lang: B.value,
lineNumbers: ""
}, null, 8, ["content", "hideCredentials", "lang"]))
], 8, oe)
]),
_: 1
}),
Object.keys(d.value).length > 1 || e.$slots.footer ? (s(), i(o(J), {
key: 0,
class: "request-card-footer bg-b-3"
}, {
default: r(() => [
Object.keys(d.value).length > 1 ? (s(), S("div", ae, [
Object.keys(d.value).length ? (s(), i(te, {
key: 0,
modelValue: p.value,
"onUpdate:modelValue": [
t[1] || (t[1] = (a) => p.value = a),
t[2] || (t[2] = (a) => o(V)(
m.value?.$el,
"scalar-update-selected-example",
a
))
],
examples: d.value
}, null, 8, ["modelValue", "examples"])) : f("", !0)
])) : f("", !0),
y(e.$slots, "footer", {}, void 0, !0)
]),
_: 3
})) : f("", !0)
]),
_: 3
}, 512)) : e.fallback ? (s(), i(o(T), {
key: 1,
class: "request-card dark-mode"
}, {
default: r(() => [
u(o(q), { class: "request-card-simple" }, {
default: r(() => [
g("div", ne, [
u(E, {
as: "span",
class: "request-method",
method: e.method
}, null, 8, ["method"]),
y(e.$slots, "header", {}, void 0, !0)
]),
y(e.$slots, "footer", {}, void 0, !0)
]),
_: 3
})
]),
_: 3
})) : f("", !0);
}
});
export {
Ce as default
};