@scalar/api-client
Version:
the open source API testing client
452 lines (451 loc) • 16.1 kB
JavaScript
import { defineComponent as K, computed as y, ref as Q, watch as L, createBlock as b, openBlock as f, withCtx as d, createVNode as s, createCommentVNode as Z, unref as c, createElementVNode as g, toDisplayString as k, createElementBlock as V, Fragment as I, createTextVNode as M, nextTick as _ } from "vue";
import { ScalarListbox as W, ScalarButton as w, ScalarIcon as F } from "@scalar/components";
import { requestExampleParametersSchema as z } from "@scalar/oas-utils/entities/spec";
import { canMethodHaveBody as ee } from "@scalar/oas-utils/helpers";
import ae from "../../../components/CodeInput/CodeInput.vue.js";
import te from "../../../components/DataTable/DataTable.vue.js";
import ne from "../../../components/DataTable/DataTableHeader.vue.js";
import R from "../../../components/DataTable/DataTableRow.vue.js";
import oe from "../../../components/ViewLayout/ViewLayoutCollapse.vue.js";
import J from "./RequestTable.vue.js";
import { useWorkspace as le } from "../../../store/store.js";
import { useFileDialog as A } from "../../../hooks/useFileDialog.js";
const ie = {
key: 0,
class: "text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm"
}, re = {
key: 1,
class: "flex items-center justify-center overflow-hidden border-t p-1.5"
}, de = { class: "text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap" }, we = /* @__PURE__ */ K({
__name: "RequestBody",
props: {
example: {},
operation: {},
environment: {},
envVariables: {},
workspace: {},
title: {}
},
setup(l) {
const { requestExampleMutators: i } = le(), $ = {
json: "json",
xml: "xml",
yaml: "yaml",
edn: "edn",
other: "html"
}, h = Object.entries({
multipartForm: "Multipart Form",
formUrlEncoded: "Form URL Encoded",
binaryFile: "Binary File",
json: "JSON",
xml: "XML",
yaml: "YAML",
edn: "EDN",
other: "Other",
none: "None"
}).map(([e, a]) => ({
id: e,
label: a
})), B = y(() => {
const { activeBody: e, formData: a, raw: t } = l.example.body;
return e === "formData" ? a?.encoding === "urlencoded" ? "formUrlEncoded" : "multipartForm" : e === "binary" ? "binaryFile" : e === "raw" && t?.encoding ? t.encoding === "html" || t.encoding === "text" ? "other" : t.encoding : Object.keys(l.operation.requestBody?.content || {})[0] || "none";
}), u = y({
get: () => h.find(
(e) => e.id === B.value
) ?? h[h.length - 1] ?? h[0],
set: (e) => {
e?.id && N(e.id);
}
}), x = Q(null), H = y(() => {
const e = u.value?.id;
return $[e] ?? "plaintext";
}), C = (e) => {
const a = m.value;
if (a.length > e) {
const t = [...a];
t.splice(e, 1), i.edit(
l.example.uid,
"body.formData.value",
t
);
}
}, U = (e, a, t) => {
const o = m.value;
if (o.length > e) {
const n = [...o];
n[e] = {
...n[e],
value: n[e]?.value || "",
key: n[e]?.key || "",
enabled: n[e]?.enabled ?? !1,
[a]: t || ""
}, (n[e]?.key !== "" || n[e]?.value !== "") && (n[e].enabled = !0), n[e]?.key === "" && n[e]?.value === "" && n.splice(e, 1), i.edit(
l.example.uid,
"body.formData.value",
n
);
} else {
const n = [z.parse({ [a]: t })];
i.edit(l.example.uid, "body.formData.value", n), _(() => {
if (!x.value)
return;
x.value.querySelectorAll("input")[a === "key" ? 0 : 1]?.focus();
});
}
e === o.length - 1 && j();
}, m = y(() => l.example.body.formData?.value ?? []), D = () => {
const e = m.value[m.value.length - 1];
(!e || e.key !== "" || e.value !== "") && j();
}, j = () => {
const e = z.parse({
enabled: !1
}), a = [...m.value, e];
l.example.body.formData ? i.edit(l.example.uid, "body.formData.value", a) : i.edit(l.example.uid, "body.formData", {
value: a,
encoding: "form-data"
});
}, E = (e, a) => {
const t = m.value;
if (t.length > e) {
const o = [...t];
o[e] && (o[e].enabled = a), i.edit(
l.example.uid,
"body.formData.value",
o
);
}
}, P = (e) => i.edit(l.example.uid, "body.raw.value", e), O = (e) => {
if (e === "multipartForm")
return {
activeBody: "formData",
encoding: "form-data",
header: "multipart/form-data"
};
if (e === "formUrlEncoded")
return {
activeBody: "formData",
encoding: "urlencoded",
header: "application/x-www-form-urlencoded"
};
if (e === "binaryFile")
return {
activeBody: "binary",
encoding: void 0,
header: "application/octet-stream"
};
if (e === "json")
return {
activeBody: "raw",
encoding: "json",
header: Object.keys(l.operation.requestBody?.content ?? {}).find((o) => o.includes("json") || o.endsWith("+json")) || "application/json"
};
if (e === "xml")
return {
activeBody: "raw",
encoding: "xml",
header: "application/xml"
};
if (e === "yaml")
return {
activeBody: "raw",
encoding: "yaml",
header: "application/yaml"
};
if (e === "edn")
return {
activeBody: "raw",
encoding: "edn",
header: "application/edn"
};
if (e === "other") {
const t = Object.keys(l.operation.requestBody?.content ?? {}).find((o) => o.startsWith("text/"));
return {
activeBody: "raw",
encoding: t ? "text" : "html",
header: t ?? "application/html"
};
}
return { activeBody: "raw", encoding: void 0, header: void 0 };
}, N = (e) => {
const { activeBody: a, encoding: t, header: o } = O(e);
if (i.edit(l.example.uid, "body.activeBody", a), t && a === "raw")
i.edit(l.example.uid, "body.raw", {
encoding: t,
value: l.example.body.raw?.value ?? ""
});
else if (t && a === "formData")
i.edit(l.example.uid, "body.formData", {
encoding: t,
value: l.example.body.formData?.value ?? []
});
else if (!t && a !== "binary") {
const { raw: p, ...G } = l.example.body;
i.edit(l.example.uid, "body", G);
}
const n = [...l.example.parameters.headers], r = n.findIndex(
(p) => p.key.toLowerCase() === "content-type"
);
if (r >= 0)
o && n[r] ? n[r].value = o : n[r] && (a !== "raw" || e === "none") && n.splice(r, 1);
else if (o) {
const p = n[n.length - 1];
p && p.key === "" && p.value === "" ? n.splice(n.length - 1, 0, {
key: "Content-Type",
value: o,
enabled: !0
}) : n.push({
key: "Content-Type",
value: o,
enabled: !0
});
}
i.edit(l.example.uid, "parameters.headers", n);
}, S = (e) => {
const { open: a } = A({
onChange: (t) => {
const o = t?.[0];
if (o) {
const r = [...m.value];
r[e] = {
...r[e],
file: o,
value: r[e]?.value || o.name,
key: r[e]?.key || o.name,
enabled: !0
}, i.edit(
l.example.uid,
"body.formData.value",
r
), D();
}
},
multiple: !1,
accept: "*/*"
});
a();
}, X = () => i.edit(l.example.uid, "body.binary", void 0);
function q(e) {
const a = m.value, t = [...a], o = a[e], n = o?.file;
a.length > 1 && (!o?.key && !o?.value || n && o?.key === n.name && o?.value === n.name) ? t.splice(e, 1) : t[e] && (t[e].file = void 0), i.edit(l.example.uid, "body.formData.value", t);
}
function Y() {
const { open: e } = A({
onChange: (a) => {
const t = a?.[0];
t && i.edit(l.example.uid, "body.binary", t);
},
multiple: !1,
accept: "*/*"
});
e();
}
L(
u,
(e) => {
["multipartForm", "formUrlEncoded"].includes(e?.id || "") && D();
},
{ immediate: !0 }
), L(
() => l.example.uid,
() => {
l.operation.method && ee(l.operation.method) && N(B.value), ["multipartForm", "formUrlEncoded"].includes(
B.value
) && D();
},
{ immediate: !0 }
);
const v = y(() => {
const e = u.value?.id, { header: a } = O(e), t = l.operation.requestBody?.content || {}, o = a ? t[a]?.examples || {} : {};
return Object.entries(o).map(([n, r]) => ({
id: n,
label: n,
value: r
}));
}), T = y({
get: () => {
const e = l.example.body.raw?.value ?? "{}";
try {
const a = JSON.parse(e);
return v.value.find((o) => {
const n = o.value;
return JSON.stringify(n.value) === JSON.stringify(a);
}) ?? v.value[0];
} catch {
return v.value[0];
}
},
set: (e) => {
if (e?.id) {
const a = v.value.find((t) => t.id === e.id);
if (a) {
const t = a.value;
P(JSON.stringify(t.value, null, 2));
}
}
}
});
return (e, a) => (f(), b(oe, null, {
title: d(() => [
M(k(e.title), 1)
]),
default: d(() => [
s(te, {
columns: [""],
presentational: ""
}, {
default: d(() => [
s(R, null, {
default: d(() => [
s(ne, { class: "relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0" }, {
default: d(() => [
s(c(W), {
modelValue: u.value,
"onUpdate:modelValue": a[0] || (a[0] = (t) => u.value = t),
options: c(h),
teleport: ""
}, {
default: d(() => [
s(c(w), {
class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal",
variant: "ghost"
}, {
default: d(() => [
g("span", null, k(u.value?.label), 1),
s(c(F), {
icon: "ChevronDown",
size: "md"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"]),
v.value.length > 0 ? (f(), b(c(W), {
key: 0,
modelValue: T.value,
"onUpdate:modelValue": a[1] || (a[1] = (t) => T.value = t),
options: v.value,
side: "left",
teleport: ""
}, {
default: d(() => [
s(c(w), {
class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-2 font-normal",
fullWidth: "",
variant: "ghost"
}, {
default: d(() => [
g("span", null, k(T.value?.label), 1),
s(c(F), {
icon: "ChevronDown",
size: "md"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"])) : Z("", !0)
]),
_: 1
})
]),
_: 1
}),
s(R, null, {
default: d(() => [
u.value?.id === "none" ? (f(), V("div", ie, [...a[2] || (a[2] = [
g("span", null, "No Body", -1)
])])) : u.value?.id === "binaryFile" ? (f(), V("div", re, [
e.example.body.binary ? (f(), V(I, { key: 0 }, [
g("span", de, k(e.example.body.binary.name), 1),
s(c(w), {
class: "bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none",
size: "sm",
variant: "outlined",
onClick: X
}, {
default: d(() => [...a[3] || (a[3] = [
M(" Delete ", -1)
])]),
_: 1
})
], 64)) : (f(), b(c(w), {
key: 1,
class: "bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none",
size: "sm",
variant: "outlined",
onClick: Y
}, {
default: d(() => [
a[4] || (a[4] = g("span", null, "Upload File", -1)),
s(c(F), {
class: "ml-1",
icon: "Upload",
size: "xs",
thickness: "2.5"
})
]),
_: 1
}))
])) : u.value?.id == "multipartForm" ? (f(), b(J, {
key: 2,
ref_key: "tableWrapperRef",
ref: x,
class: "!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none",
columns: ["32px", "", "", "104px"],
envVariables: e.envVariables,
environment: e.environment,
items: m.value,
showUploadButton: "",
workspace: e.workspace,
onDeleteRow: C,
onRemoveFile: q,
onToggleRow: E,
onUpdateRow: U,
onUploadFile: S
}, null, 8, ["envVariables", "environment", "items", "workspace"])) : u.value?.id == "formUrlEncoded" ? (f(), b(J, {
key: 3,
ref_key: "tableWrapperRef",
ref: x,
class: "!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none",
columns: ["32px", "", "", "104px"],
envVariables: e.envVariables,
environment: e.environment,
items: m.value,
showUploadButton: "",
workspace: e.workspace,
onDeleteRow: C,
onRemoveFile: q,
onToggleRow: E,
onUpdateRow: U,
onUploadFile: S
}, null, 8, ["envVariables", "environment", "items", "workspace"])) : (f(), b(ae, {
key: 4,
class: "border-t px-3",
content: "",
envVariables: e.envVariables,
environment: e.environment,
language: H.value,
lineNumbers: "",
lint: "",
modelValue: e.example.body?.raw?.value ?? "",
workspace: e.workspace,
"onUpdate:modelValue": P
}, null, 8, ["envVariables", "environment", "language", "modelValue", "workspace"]))
]),
_: 1
}),
s(R)
]),
_: 1
})
]),
_: 1
}));
}
});
export {
we as default
};