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