@scalar/api-client
Version:
the open source API testing client
188 lines (187 loc) • 7.27 kB
JavaScript
import { defineComponent as h, computed as d, createBlock as p, openBlock as u, unref as t, withCtx as a, createVNode as i, createElementVNode as f, toDisplayString as v, createElementBlock as y, Fragment as E, createTextVNode as T } from "vue";
import { ScalarListbox as F, ScalarButton as x, ScalarIcon as w } from "@scalar/components";
import { CONTENT_TYPES as k } from "@scalar/helpers/consts/content-types";
import { objectEntries as q } from "@scalar/helpers/object/object-entries";
import { unpackProxyObject as C } from "@scalar/workspace-store/helpers/unpack-proxy";
import { getSelectedBodyContentType as D } from "../../operation-block/helpers/get-selected-body-content-type.js";
import U from "./RequestBodyForm.vue.js";
import { getFileName as V } from "../helpers/files.js";
import { getExampleFromBody as $ } from "../helpers/get-request-body-example.js";
import z from "../../../components/layout/CollapsibleSection.vue.js";
import O from "../../../components/data-table/DataTable.vue.js";
import K from "../../../components/data-table/DataTableHeader.vue.js";
import I from "../../../components/data-table/DataTableRow.vue.js";
import L from "../../../components/code-input/CodeInput.vue.js";
import { useFileDialog as M } from "../../../../hooks/useFileDialog.js";
const P = {
key: 0,
class: "text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm"
}, R = {
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" }, re = /* @__PURE__ */ h({
__name: "RequestBody",
props: {
requestBody: {},
exampleKey: {},
title: {},
environment: {}
},
emits: ["update:contentType", "update:value", "update:formValue"],
setup(r, { emit: B }) {
const m = B, N = {
"application/json": "json",
"application/xml": "xml",
"application/yaml": "yaml"
}, o = d(
() => D(r.requestBody, r.exampleKey) ?? "none"
), c = q(k).map(([n, e]) => ({
id: n,
label: e
})), b = d({
get: () => c.find(
(e) => e.id === o.value
) ?? c.at(-1),
set: (n) => {
m("update:contentType", { value: n.id });
}
});
function S(n) {
const { open: e } = M({
onChange: (l) => {
const g = l?.[0];
g && n(g);
},
multiple: !1,
accept: "*/*"
});
e();
}
const s = d(
() => r.requestBody && $(r.requestBody, o.value, r.exampleKey)
), j = d(() => {
if (!s.value)
return "";
const n = s.value.value;
return typeof n == "string" ? n : JSON.stringify(n, null, 2);
});
return (n, e) => (u(), p(t(z), null, {
title: a(() => [
T(v(r.title), 1)
]),
default: a(() => [
i(t(O), {
columns: [""],
presentational: ""
}, {
default: a(() => [
i(t(K), { class: "relative col-span-full flex h-8 cursor-pointer items-center justify-between border-r-0 !p-0" }, {
default: a(() => [
i(t(F), {
modelValue: b.value,
"onUpdate:modelValue": e[0] || (e[0] = (l) => b.value = l),
options: t(c),
teleport: ""
}, {
default: a(() => [
i(t(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: a(() => [
f("span", null, v(t(k)[o.value] ?? o.value), 1),
i(t(w), {
icon: "ChevronDown",
size: "md"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"])
]),
_: 1
}),
i(t(I), null, {
default: a(() => [
o.value === "none" ? (u(), y("div", P, [...e[5] || (e[5] = [
f("span", null, "No Body", -1)
])])) : o.value === "application/octet-stream" ? (u(), y("div", R, [
t(V)(t(C)(s.value?.value)) !== void 0 ? (u(), y(E, { key: 0 }, [
f("span", J, v(t(V)(t(C)(s.value?.value))), 1),
i(t(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] = (l) => m("update:value", {
payload: void 0,
contentType: o.value
}))
}, {
default: a(() => [...e[6] || (e[6] = [
T(" Delete ", -1)
])]),
_: 1
})
], 64)) : (u(), p(t(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] = () => S(
(l) => m("update:value", {
payload: l,
contentType: o.value
})
))
}, {
default: a(() => [
e[7] || (e[7] = f("span", null, "Select File", -1)),
i(t(w), {
class: "ml-1",
icon: "Upload",
size: "xs",
thickness: "2.5"
})
]),
_: 1
}))
])) : o.value === "multipart/form-data" || o.value === "application/x-www-form-urlencoded" ? (u(), p(U, {
key: 2,
environment: r.environment,
example: s.value,
selectedContentType: o.value,
"onUpdate:formValue": e[3] || (e[3] = (l) => m("update:formValue", {
payload: l,
contentType: o.value
}))
}, null, 8, ["environment", "example", "selectedContentType"])) : (u(), p(t(L), {
key: 3,
class: "border-t px-3",
content: "",
environment: r.environment,
language: N[o.value] ?? "plaintext",
lineNumbers: "",
lint: "",
modelValue: j.value,
"onUpdate:modelValue": e[4] || (e[4] = (l) => m("update:value", {
payload: l,
contentType: o.value
}))
}, null, 8, ["environment", "language", "modelValue"]))
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}));
}
});
export {
re as default
};