@scalar/api-client
Version:
the open source API testing client
238 lines (237 loc) • 9.29 kB
JavaScript
import { defineComponent as D, computed as s, createBlock as v, openBlock as i, unref as n, withCtx as u, createVNode as d, createElementVNode as f, toDisplayString as c, createElementBlock as w, Fragment as q, createTextVNode as g } from "vue";
import { ScalarListbox as O, ScalarButton as x, ScalarIcon as k } from "@scalar/components";
import { unpackProxyObject as B } from "@scalar/workspace-store/helpers/unpack-proxy";
import F from "./RequestTable.vue.js";
import { getFileName as N } from "../helpers/files.js";
import { getExampleFromBody as S } from "../helpers/get-request-body-example.js";
import A from "../../../components/layout/CollapsibleSection.vue.js";
import E from "../../../components/data-table/DataTable.vue.js";
import L from "../../../components/data-table/DataTableHeader.vue.js";
import M from "../../../components/data-table/DataTableRow.vue.js";
import z from "../../../components/code-input/CodeInput.vue.js";
import { useFileDialog as $ } from "../../../../hooks/useFileDialog.js";
const K = {
key: 0,
class: "text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm"
}, I = {
key: 1,
class: "flex items-center justify-center overflow-hidden border-t p-1.5"
}, J = { class: "text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap" }, oe = /* @__PURE__ */ D({
__name: "RequestBody",
props: {
requestBody: {},
exampleKey: {},
title: {},
environment: {}
},
emits: ["update:contentType", "update:value", "add:formRow", "update:formRow", "delete:fromRow"],
setup(m, { emit: U }) {
const a = U, V = {
"application/json": "json",
"application/xml": "xml",
"application/yaml": "yaml"
}, j = {
"multipart/form-data": "Multipart Form",
"application/x-www-form-urlencoded": "Form URL Encoded",
"application/octet-stream": "Binary File",
"application/json": "JSON",
"application/xml": "XML",
"application/yaml": "YAML",
"application/edn": "EDN",
other: "Other",
none: "None"
}, o = s(() => m.requestBody?.["x-scalar-selected-content-type"]?.[m.exampleKey] ?? Object.keys(m.requestBody?.content ?? {})[0] ?? "other"), y = Object.entries(j).map(([l, e]) => ({
id: l,
label: e
})), b = s({
get: () => y.find(
(e) => e.id === o.value
) ?? y.at(-1),
set: (l) => {
a("update:contentType", { value: l.id });
}
});
function R(l) {
const { open: e } = $({
onChange: (t) => {
const r = t?.[0];
r && l(r);
},
multiple: !1,
accept: "*/*"
});
e();
}
const p = s(
() => m.requestBody && S(m.requestBody, o.value, m.exampleKey)
), C = s(() => {
if (!p.value)
return "";
const l = p.value.value;
return typeof l == "string" ? l : JSON.stringify(l, null, 2);
}), T = s(() => p.value ? Array.isArray(p.value.value) ? p.value.value : [] : []);
return (l, e) => (i(), v(n(A), null, {
title: u(() => [
g(c(l.title), 1)
]),
default: u(() => [
d(n(E), {
columns: [""],
presentational: ""
}, {
default: u(() => [
d(n(L), { class: "relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0" }, {
default: u(() => [
d(n(O), {
modelValue: b.value,
"onUpdate:modelValue": e[0] || (e[0] = (t) => b.value = t),
options: n(y),
teleport: ""
}, {
default: u(() => [
d(n(x), {
class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal",
fullWidth: "",
variant: "ghost"
}, {
default: u(() => [
f("span", null, c(o.value), 1),
d(n(k), {
icon: "ChevronDown",
size: "md"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"])
]),
_: 1
}),
d(n(M), null, {
default: u(() => [
o.value === "none" ? (i(), w("div", K, [...e[12] || (e[12] = [
f("span", null, "No Body", -1)
])])) : o.value === "application/octet-stream" ? (i(), w("div", I, [
n(N)(n(B)(p.value?.value)) !== void 0 ? (i(), w(q, { key: 0 }, [
f("span", J, c(n(N)(n(B)(p.value?.value))), 1),
d(n(x), {
class: "bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none",
size: "sm",
variant: "outlined",
onClick: e[1] || (e[1] = (t) => a("update:value", {
value: void 0,
contentType: o.value
}))
}, {
default: u(() => [...e[13] || (e[13] = [
g(" Delete ", -1)
])]),
_: 1
})
], 64)) : (i(), v(n(x), {
key: 1,
class: "bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none",
size: "sm",
variant: "outlined",
onClick: e[2] || (e[2] = () => R(
(t) => a("update:value", {
value: t,
contentType: o.value
})
))
}, {
default: u(() => [
e[14] || (e[14] = f("span", null, "Upload File", -1)),
d(n(k), {
class: "ml-1",
icon: "Upload",
size: "xs",
thickness: "2.5"
})
]),
_: 1
}))
])) : o.value === "multipart/form-data" ? (i(), v(F, {
key: 2,
data: T.value,
environment: l.environment,
showUploadButton: "",
onAddRow: e[3] || (e[3] = (t) => a("add:formRow", {
data: t,
contentType: o.value
})),
onDeleteRow: e[4] || (e[4] = (t) => a("delete:fromRow", {
contentType: o.value,
index: t
})),
onRemoveFile: e[5] || (e[5] = (t) => a("update:formRow", {
contentType: o.value,
index: t,
data: {
value: null
}
})),
onUpdateRow: e[6] || (e[6] = (t, r) => a("update:formRow", {
index: t,
data: r,
contentType: o.value
})),
onUploadFile: e[7] || (e[7] = (t) => R((r) => {
if (t !== void 0)
return a("update:formRow", {
index: t,
data: { value: r ?? void 0 },
contentType: o.value
});
a("add:formRow", {
data: { value: r ?? void 0 },
contentType: o.value
});
}))
}, null, 8, ["data", "environment"])) : o.value === "application/x-www-form-urlencoded" ? (i(), v(F, {
key: 3,
data: T.value,
environment: l.environment,
onAddRow: e[8] || (e[8] = (t) => a("add:formRow", {
data: t,
contentType: o.value
})),
onDeleteRow: e[9] || (e[9] = (t) => a("delete:fromRow", {
contentType: o.value,
index: t
})),
onUpdateRow: e[10] || (e[10] = (t, r) => a("update:formRow", {
index: t,
data: r,
contentType: o.value
}))
}, null, 8, ["data", "environment"])) : (i(), v(n(z), {
key: 4,
class: "border-t px-3",
content: "",
environment: l.environment,
language: V[o.value] ?? "plaintext",
lineNumbers: "",
lint: "",
modelValue: C.value,
"onUpdate:modelValue": e[11] || (e[11] = (t) => a("update:value", {
value: t,
contentType: o.value
}))
}, null, 8, ["environment", "language", "modelValue"]))
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}));
}
});
export {
oe as default
};