@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 u, createCommentVNode as Z, unref as c, createElementVNode as h, 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 te from "../../../components/CodeInput/CodeInput.vue.js";
import ae 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(a) {
const { requestExampleMutators: i } = le(), $ = {
json: "json",
xml: "xml",
yaml: "yaml",
edn: "edn",
other: "html"
}, x = 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, t]) => ({
id: e,
label: t
})), B = y(() => {
const { activeBody: e, formData: t, raw: n } = a.example.body;
return e === "formData" ? t?.encoding === "urlencoded" ? "formUrlEncoded" : "multipartForm" : e === "binary" ? "binaryFile" : e === "raw" && n?.encoding ? n.encoding === "html" || n.encoding === "text" ? "other" : n.encoding : Object.keys(a.operation.requestBody?.content || {})[0] || "none";
}), s = y({
get: () => x.find(
(e) => e.id === B.value
) ?? x[x.length - 1] ?? x[0],
set: (e) => {
e?.id && N(e.id);
}
}), g = Q(null), H = y(() => {
const e = s.value?.id;
return $[e] ?? "plaintext";
}), C = (e) => {
const t = m.value;
if (t.length > e) {
const n = [...t];
n.splice(e, 1), i.edit(
a.example.uid,
"body.formData.value",
n
);
}
}, U = (e, t, n) => {
const l = m.value;
if (l.length > e) {
const o = [...l];
o[e] = {
...o[e],
value: o[e]?.value || "",
key: o[e]?.key || "",
enabled: o[e]?.enabled ?? !1,
[t]: n || ""
}, (o[e]?.key !== "" || o[e]?.value !== "") && (o[e].enabled = !0), o[e]?.key === "" && o[e]?.value === "" && o.splice(e, 1), i.edit(
a.example.uid,
"body.formData.value",
o
);
} else {
const o = [z.parse({ [t]: n })];
i.edit(a.example.uid, "body.formData.value", o), _(() => {
if (!g.value)
return;
g.value.querySelectorAll("input")[t === "key" ? 0 : 1]?.focus();
});
}
e === l.length - 1 && j();
}, m = y(() => a.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
}), t = [...m.value, e];
a.example.body.formData ? i.edit(a.example.uid, "body.formData.value", t) : i.edit(a.example.uid, "body.formData", {
value: t,
encoding: "form-data"
});
}, E = (e, t) => {
const n = m.value;
if (n.length > e) {
const l = [...n];
l[e] && (l[e].enabled = t), i.edit(
a.example.uid,
"body.formData.value",
l
);
}
}, P = (e) => i.edit(a.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(a.operation.requestBody?.content ?? {}).find((l) => l.includes("json") || l.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 n = Object.keys(a.operation.requestBody?.content ?? {}).find((l) => l.startsWith("text/"));
return {
activeBody: "raw",
encoding: n ? "text" : "html",
header: n ?? "application/html"
};
}
return { activeBody: "raw", encoding: void 0, header: void 0 };
}, N = (e) => {
const { activeBody: t, encoding: n, header: l } = O(e);
if (i.edit(a.example.uid, "body.activeBody", t), n && t === "raw")
i.edit(a.example.uid, "body.raw", {
encoding: n,
value: a.example.body.raw?.value ?? ""
});
else if (n && t === "formData")
i.edit(a.example.uid, "body.formData", {
encoding: n,
value: a.example.body.formData?.value ?? []
});
else if (!n && t !== "binary") {
const { raw: v, ...G } = a.example.body;
i.edit(a.example.uid, "body", G);
}
const o = [...a.example.parameters.headers], r = o.findIndex(
(v) => v.key.toLowerCase() === "content-type"
);
if (r >= 0)
l && o[r] ? o[r].value = l : o[r] && (t !== "raw" || e === "none") && o.splice(r, 1);
else if (l) {
const v = o[o.length - 1];
v && v.key === "" && v.value === "" ? o.splice(o.length - 1, 0, {
key: "Content-Type",
value: l,
enabled: !0
}) : o.push({
key: "Content-Type",
value: l,
enabled: !0
});
}
i.edit(a.example.uid, "parameters.headers", o);
}, S = (e) => {
const { open: t } = A({
onChange: (n) => {
const l = n?.[0];
if (l) {
const r = [...m.value];
r[e] = {
...r[e],
file: l,
value: r[e]?.value || l.name,
key: r[e]?.key || l.name,
enabled: !0
}, i.edit(
a.example.uid,
"body.formData.value",
r
), D();
}
},
multiple: !1,
accept: "*/*"
});
t();
}, X = () => i.edit(a.example.uid, "body.binary", void 0);
function q(e) {
const t = m.value, n = [...t], l = t[e], o = l?.file;
t.length > 1 && (!l?.key && !l?.value || o && l?.key === o.name && l?.value === o.name) ? n.splice(e, 1) : n[e] && (n[e].file = void 0), i.edit(a.example.uid, "body.formData.value", n);
}
function Y() {
const { open: e } = A({
onChange: (t) => {
const n = t?.[0];
n && i.edit(a.example.uid, "body.binary", n);
},
multiple: !1,
accept: "*/*"
});
e();
}
L(
s,
(e) => {
["multipartForm", "formUrlEncoded"].includes(e?.id || "") && D();
},
{ immediate: !0 }
), L(
() => a.example.uid,
() => {
a.operation.method && ee(a.operation.method) && N(B.value), ["multipartForm", "formUrlEncoded"].includes(
B.value
) && D();
},
{ immediate: !0 }
);
const p = y(() => {
const e = s.value?.id, { header: t } = O(e), n = a.operation.requestBody?.content || {}, l = t ? n[t]?.examples || {} : {};
return Object.entries(l).map(([o, r]) => ({
id: o,
label: o,
value: r
}));
}), T = y({
get: () => {
const e = a.example.body.raw?.value ?? "{}";
try {
const t = JSON.parse(e);
return p.value.find((l) => {
const o = l.value;
return JSON.stringify(o.value) === JSON.stringify(t);
}) ?? p.value[0];
} catch {
return p.value[0];
}
},
set: (e) => {
if (e?.id) {
const t = p.value.find((n) => n.id === e.id);
if (t) {
const n = t.value;
P(JSON.stringify(n.value, null, 2));
}
}
}
});
return (e, t) => (f(), b(oe, null, {
title: d(() => [
M(k(a.title), 1)
]),
default: d(() => [
u(ae, {
columns: [""],
presentational: ""
}, {
default: d(() => [
u(R, null, {
default: d(() => [
u(ne, { class: "relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0" }, {
default: d(() => [
u(c(W), {
modelValue: s.value,
"onUpdate:modelValue": t[0] || (t[0] = (n) => s.value = n),
options: c(x),
teleport: ""
}, {
default: d(() => [
u(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(() => [
h("span", null, k(s.value?.label), 1),
u(c(F), {
icon: "ChevronDown",
size: "md"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"]),
p.value.length > 0 ? (f(), b(c(W), {
key: 0,
modelValue: T.value,
"onUpdate:modelValue": t[1] || (t[1] = (n) => T.value = n),
options: p.value,
side: "left",
teleport: ""
}, {
default: d(() => [
u(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(() => [
h("span", null, k(T.value?.label), 1),
u(c(F), {
icon: "ChevronDown",
size: "md"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"])) : Z("", !0)
]),
_: 1
})
]),
_: 1
}),
u(R, null, {
default: d(() => [
s.value?.id === "none" ? (f(), V("div", ie, [...t[2] || (t[2] = [
h("span", null, "No Body", -1)
])])) : s.value?.id === "binaryFile" ? (f(), V("div", re, [
a.example.body.binary ? (f(), V(I, { key: 0 }, [
h("span", de, k(a.example.body.binary.name), 1),
u(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(() => [...t[3] || (t[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(() => [
t[4] || (t[4] = h("span", null, "Upload File", -1)),
u(c(F), {
class: "ml-1",
icon: "Upload",
size: "xs",
thickness: "2.5"
})
]),
_: 1
}))
])) : s.value?.id == "multipartForm" ? (f(), b(J, {
key: 2,
ref_key: "tableWrapperRef",
ref: g,
class: "!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none",
columns: ["32px", "", "", "104px"],
envVariables: a.envVariables,
environment: a.environment,
items: m.value,
showUploadButton: "",
workspace: a.workspace,
onDeleteRow: C,
onRemoveFile: q,
onToggleRow: E,
onUpdateRow: U,
onUploadFile: S
}, null, 8, ["envVariables", "environment", "items", "workspace"])) : s.value?.id == "formUrlEncoded" ? (f(), b(J, {
key: 3,
ref_key: "tableWrapperRef",
ref: g,
class: "!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none",
columns: ["32px", "", "", "104px"],
envVariables: a.envVariables,
environment: a.environment,
items: m.value,
showUploadButton: "",
workspace: a.workspace,
onDeleteRow: C,
onRemoveFile: q,
onToggleRow: E,
onUpdateRow: U,
onUploadFile: S
}, null, 8, ["envVariables", "environment", "items", "workspace"])) : (f(), b(te, {
key: 4,
class: "border-t px-3",
content: "",
envVariables: a.envVariables,
environment: a.environment,
language: H.value,
lineNumbers: "",
lint: "",
modelValue: a.example.body?.raw?.value ?? "",
workspace: a.workspace,
"onUpdate:modelValue": P
}, null, 8, ["envVariables", "environment", "language", "modelValue", "workspace"]))
]),
_: 1
}),
u(R)
]),
_: 1
})
]),
_: 1
}));
}
});
export {
we as default
};