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