@scalar/api-client
Version:
the open source API testing client
266 lines (265 loc) • 9.94 kB
JavaScript
import { defineComponent as Q, computed as r, ref as j, useId as i, watch as M, createBlock as k, openBlock as s, withCtx as w, createElementVNode as K, withDirectives as m, createElementBlock as f, createVNode as u, unref as y, vShow as d, mergeProps as B, toHandlers as S, Fragment as z, renderList as L, createCommentVNode as T, resolveDynamicComponent as G, toDisplayString as X } from "vue";
import { ScalarErrorBoundary as J } from "@scalar/components";
import { canMethodHaveBody as b } from "@scalar/helpers/http/can-method-have-body";
import { REGEX as W } from "@scalar/helpers/regex/regex-helpers";
import { getResolvedRef as V } from "@scalar/workspace-store/helpers/get-resolved-ref";
import Y from "../../../components/SectionFilter.vue.js";
import Z from "../../../components/ViewLayout/ViewLayoutSection.vue.js";
import { getSelectedSecuritySchemes as _ } from "../operation-block/helpers/build-request-security.js";
import ee from "./components/RequestBody.vue.js";
import te from "./components/RequestCodeSnippet.vue.js";
import q from "./components/RequestParams.vue.js";
import { createParameterHandlers as R } from "./helpers/create-parameter-handlers.js";
import { groupBy as oe } from "./helpers/group-by.js";
import ae from "../scalar-auth-selector-block/components/AuthSelector.vue.js";
const ne = { class: "group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24" }, le = ["for"], re = ["id", "placeholder", "value"], ie = {
key: 2,
class: "text-c-1 flex h-8 items-center"
}, ue = ["id", "role"], we = /* @__PURE__ */ Q({
__name: "RequestBlock",
props: {
authMeta: { default: () => ({ type: "document" }) },
clientOptions: {},
environment: {},
eventBus: {},
exampleKey: {},
layout: {},
method: {},
operation: {},
path: {},
plugins: {},
proxyUrl: {},
securityRequirements: {},
securitySchemes: {},
selectedClient: {},
selectedSecurity: {},
server: {}
},
setup(t) {
const o = r(() => ({
method: t.method,
path: t.path,
exampleKey: t.exampleKey
})), c = r(
() => oe(
t.operation.parameters?.map((e) => V(e)) ?? [],
"in"
)
), a = j("All"), O = [
"Auth",
"Variables",
"Cookies",
"Headers",
"Query",
"Body"
], U = {
All: i(),
Auth: i(),
Variables: i(),
Cookies: i(),
Headers: i(),
Query: i(),
Body: i()
}, A = r(() => {
const e = /* @__PURE__ */ new Set(["All", ...O]);
return c.value.path?.length || e.delete("Variables"), b(t.method) || e.delete("Body"), g.value && e.delete("Auth"), [...e];
}), n = r(
() => Object.fromEntries(
A.value.map((e) => [e, U[e]])
)
), g = r(
() => t.layout === "modal" && !t.operation.security && !Object.keys(t.securitySchemes ?? {}).length
), E = r(() => t.operation.summary ? t.operation.summary : t.path.replace(W.PROTOCOL, "") || "Request Name"), v = (e) => a.value === "All" || a.value === e;
M(
() => t.method,
(e) => {
a.value === "Body" && !b(e) && (a.value = "All");
}
);
const H = (e) => {
const l = e.target.value;
t.eventBus.emit("operation:update:summary", {
meta: o.value,
payload: { summary: l }
});
}, p = r(() => ({
path: R("path", t.eventBus, o.value),
cookie: R("cookie", t.eventBus, o.value),
header: R("header", t.eventBus, o.value),
query: R("query", t.eventBus, o.value)
})), P = (e) => {
t.eventBus.emit("operation:add:requestBody:formRow", {
contentType: e.contentType,
meta: o.value,
payload: {
key: e.data.key ?? "",
value: e.data.value ?? ""
}
});
}, x = (e) => t.eventBus.emit("operation:delete:requestBody:formRow", {
contentType: e.contentType,
index: e.index,
meta: o.value
}), I = (e) => t.eventBus.emit("operation:update:requestBody:contentType", {
payload: { contentType: e.value },
meta: o.value
}), N = (e) => t.eventBus.emit(
"operation:update:requestBody:formRow",
{
contentType: e.contentType,
meta: o.value,
index: e.index,
payload: e.data
},
{
debounceKey: `update:requestBody:formRow-${e.index}-${Object.keys(e.data).join("-")}`
}
), $ = (e) => {
const l = typeof e.value == "string" ? `update:requestBody:value-${e.contentType}` : void 0;
t.eventBus.emit(
"operation:update:requestBody:value",
{
contentType: e.contentType,
payload: { value: e.value ?? "" },
meta: o.value
},
{
debounceKey: l
}
);
}, C = i(), F = r(
() => _(
t.securitySchemes,
t.selectedSecurity?.selectedSchemes ?? []
)
);
return (e, l) => (s(), k(Z, {
"aria-label": `Request: ${e.operation.summary}`
}, {
title: w(() => [
K("div", ne, [
e.layout !== "modal" ? (s(), f("label", {
key: 0,
class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
for: y(C)
}, null, 8, le)) : T("", !0),
e.layout !== "modal" ? (s(), f("input", {
key: 1,
id: y(C),
class: "text-c-1 group-hover-input pointer-events-auto relative z-10 -ml-0.5 h-8 w-full rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25",
placeholder: E.value,
value: e.operation.summary,
onInput: H
}, null, 40, re)) : (s(), f("span", ie, X(e.operation.summary), 1))
]),
u(Y, {
modelValue: a.value,
"onUpdate:modelValue": l[0] || (l[0] = (h) => a.value = h),
filterIds: n.value,
filters: A.value
}, null, 8, ["modelValue", "filterIds", "filters"])
]),
default: w(() => [
K("div", {
id: n.value.All,
class: "request-section-content custom-scroll relative flex flex-1 flex-col",
role: a.value === "All" ? "tabpanel" : "none"
}, [
m(u(y(ae), {
id: n.value.Auth,
environment: e.environment,
eventBus: e.eventBus,
meta: e.authMeta,
proxyUrl: e.proxyUrl,
securityRequirements: e.securityRequirements,
securitySchemes: e.securitySchemes,
selectedSecurity: e.selectedSecurity,
server: e.server,
title: "Authorization"
}, null, 8, ["id", "environment", "eventBus", "meta", "proxyUrl", "securityRequirements", "securitySchemes", "selectedSecurity", "server"]), [
[d, v("Auth") && !g.value]
]),
m(u(q, B({
id: n.value.Variables,
environment: e.environment,
exampleKey: e.exampleKey,
parameters: c.value.path ?? [],
showAddRowPlaceholder: !1,
title: "Variables"
}, S(p.value.path)), null, 16, ["id", "environment", "exampleKey", "parameters"]), [
[d, v("Variables") && c.value.path?.length]
]),
m(u(q, B({
id: n.value.Cookies,
environment: e.environment,
exampleKey: e.exampleKey,
parameters: c.value.cookie ?? [],
showAddRowPlaceholder: !0,
title: "Cookies"
}, S(p.value.cookie)), null, 16, ["id", "environment", "exampleKey", "parameters"]), [
[d, v("Cookies")]
]),
m(u(q, B({
id: n.value.Headers,
environment: e.environment,
exampleKey: e.exampleKey,
parameters: c.value.header ?? [],
title: "Headers"
}, S(p.value.header)), null, 16, ["id", "environment", "exampleKey", "parameters"]), [
[d, v("Headers")]
]),
m(u(q, B({
id: n.value.Query,
environment: e.environment,
exampleKey: e.exampleKey,
parameters: c.value.query ?? [],
title: "Query Parameters"
}, S(p.value.query)), null, 16, ["id", "environment", "exampleKey", "parameters"]), [
[d, v("Query")]
]),
m(u(ee, {
id: n.value.Body,
environment: e.environment,
exampleKey: e.exampleKey,
requestBody: y(V)(e.operation.requestBody),
title: "Request Body",
"onAdd:formRow": P,
"onDelete:fromRow": x,
"onUpdate:contentType": I,
"onUpdate:formRow": N,
"onUpdate:value": $
}, null, 8, ["id", "environment", "exampleKey", "requestBody"]), [
[d, v("Body") && y(b)(e.method)]
]),
(s(!0), f(z, null, L(e.plugins, (h, D) => (s(), k(y(J), { key: D }, {
default: w(() => [
h?.components?.request ? (s(), k(G(h.components.request), {
key: 0,
operation: e.operation,
selectedExample: e.exampleKey
}, null, 8, ["operation", "selectedExample"])) : T("", !0)
]),
_: 2
}, 1024))), 128)),
l[1] || (l[1] = K("div", { class: "flex flex-grow" }, null, -1)),
m(u(te, {
clientOptions: e.clientOptions,
eventBus: e.eventBus,
method: e.method,
operation: e.operation,
path: e.path,
securitySchemes: F.value,
selectedClient: e.selectedClient,
selectedServer: e.server ?? void 0
}, null, 8, ["clientOptions", "eventBus", "method", "operation", "path", "securitySchemes", "selectedClient", "selectedServer"]), [
[d, a.value === "All"]
])
], 8, ue)
]),
_: 1
}, 8, ["aria-label"]));
}
});
export {
we as default
};