@scalar/api-client
Version:
the open source API testing client
250 lines (249 loc) • 10.2 kB
JavaScript
import { defineComponent as D, computed as v, useId as P, ref as M, watch as S, createBlock as p, openBlock as r, withCtx as c, createElementVNode as h, withDirectives as s, createCommentVNode as k, createElementBlock as f, createVNode as i, unref as n, vShow as u, Fragment as K, renderList as L, resolveDynamicComponent as Q, toDisplayString as $ } from "vue";
import { ScalarErrorBoundary as C } from "@scalar/components";
import { canMethodHaveBody as b, isDefined as j, REGEX as B } from "@scalar/oas-utils/helpers";
import F from "../../../components/SectionFilter.vue.js";
import T from "../../../components/ViewLayout/ViewLayoutSection.vue.js";
import { matchesDomain as W } from "../../../libs/send-request/set-request-cookies.js";
import z from "./RequestBody.vue.js";
import V from "./RequestParams.vue.js";
import G from "./RequestPathParams.vue.js";
import X from "./RequestAuth/RequestAuth.vue.js";
import J from "./RequestCodeExample.vue.js";
import { usePluginManager as Y } from "../../../plugins/hooks/usePluginManager.js";
import { useWorkspace as Z } from "../../../store/store.js";
import { useLayout as x } from "../../../hooks/useLayout.js";
const _ = { class: "group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24" }, ee = ["for"], ae = ["id", "placeholder", "value"], le = {
key: 2,
class: "text-c-1 flex h-8 items-center"
}, oe = ["id", "role"], be = /* @__PURE__ */ D({
__name: "RequestSection",
props: {
collection: {},
environment: {},
envVariables: {},
example: {},
invalidParams: {},
operation: {},
selectedSecuritySchemeUids: {},
server: {},
workspace: {}
},
setup(l) {
const R = [
"Auth",
"Variables",
"Cookies",
"Headers",
"Query",
"Body"
// 'Scripts',
], { requestMutators: w, cookies: O, securitySchemes: A } = Z(), { layout: d } = x(), q = v(() => {
const e = /* @__PURE__ */ new Set(["All", ...R]);
return l.example.parameters.path.length || e.delete("Variables"), b(l.operation.method ?? "get") || e.delete("Body"), y.value && e.delete("Auth"), [...e];
}), t = v(
() => Object.fromEntries(
q.value.map((e) => [e, P()])
)
), y = v(
() => d === "modal" && !l.operation.security && !Object.keys(A ?? {}).length
), a = M("All");
S(
() => l.operation,
(e) => {
a.value === "Body" && e && !b(e.method) && (a.value = "All");
}
);
const E = (e) => {
const o = e.target;
w.edit(l.operation.uid, "summary", o.value);
}, H = v(
() => (l.workspace.cookies ?? []).map((e) => O[e]).filter(j).filter((e) => e.name).filter(
(e) => {
var o;
return W(((o = l.server) == null ? void 0 : o.url) || l.operation.path, e.domain);
}
).map((e) => ({
key: e.name,
value: e.value,
route: {
name: "cookies",
params: {
cookies: e.uid
}
},
enabled: !0
}))
), N = () => l.operation.summary ? l.operation.summary : l.operation.path.replace(B.PROTOCOL, "") ? l.operation.path.replace(B.PROTOCOL, "") : "Request Name", g = P(), I = Y().getViewComponents("request.section"), U = (e, o) => w.edit(l.operation.uid, e, o);
return S(
() => y.value,
(e) => {
e && a.value === "Auth" && (a.value = "All");
}
), (e, o) => (r(), p(T, {
"aria-label": `Request: ${e.operation.summary}`
}, {
title: c(() => [
h("div", _, [
n(d) !== "modal" ? (r(), f("label", {
key: 0,
class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
for: n(g)
}, null, 8, ee)) : k("", !0),
n(d) !== "modal" ? (r(), f("input", {
key: 1,
id: n(g),
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: N(),
value: e.operation.summary,
onInput: E
}, null, 40, ae)) : (r(), f("span", le, $(e.operation.summary), 1))
]),
i(F, {
modelValue: a.value,
"onUpdate:modelValue": o[0] || (o[0] = (m) => a.value = m),
filterIds: t.value,
filters: q.value
}, null, 8, ["modelValue", "filterIds", "filters"])
]),
default: c(() => [
h("div", {
id: t.value.All,
class: "request-section-content custom-scroll relative flex flex-1 flex-col",
role: a.value === "All" ? "tabpanel" : "none"
}, [
e.collection && e.workspace && (n(d) !== "modal" || Object.keys(n(A) ?? {}).length) ? s((r(), p(X, {
key: 0,
id: t.value.Auth,
class: "request-section-content-auth",
collection: e.collection,
envVariables: e.envVariables,
environment: e.environment,
layout: "client",
operation: e.operation,
role: a.value === "All" ? "none" : "tabpanel",
selectedSecuritySchemeUids: e.selectedSecuritySchemeUids,
server: e.server,
title: "Authentication",
workspace: e.workspace
}, null, 8, ["id", "collection", "envVariables", "environment", "operation", "role", "selectedSecuritySchemeUids", "server", "workspace"])), [
[
u,
!y.value && (a.value === "All" || a.value === "Auth")
]
]) : k("", !0),
s(i(G, {
id: t.value.Variables,
class: "request-section-content-path-params",
envVariables: e.envVariables,
environment: e.environment,
example: e.example,
invalidParams: e.invalidParams,
operation: e.operation,
paramKey: "path",
role: a.value === "All" ? "none" : "tabpanel",
title: "Variables",
workspace: e.workspace
}, null, 8, ["id", "envVariables", "environment", "example", "invalidParams", "operation", "role", "workspace"]), [
[
u,
(a.value === "All" || a.value === "Variables") && e.example.parameters.path.length
]
]),
s(i(V, {
id: t.value.Cookies,
class: "request-section-content-cookies",
envVariables: e.envVariables,
environment: e.environment,
example: e.example,
invalidParams: e.invalidParams,
label: "Cookie",
operation: e.operation,
paramKey: "cookies",
readOnlyEntries: H.value,
role: a.value === "All" ? "none" : "tabpanel",
title: "Cookies",
workspace: e.workspace
}, null, 8, ["id", "envVariables", "environment", "example", "invalidParams", "operation", "readOnlyEntries", "role", "workspace"]), [
[u, a.value === "All" || a.value === "Cookies"]
]),
s(i(V, {
id: t.value.Headers,
class: "request-section-content-headers",
envVariables: e.envVariables,
environment: e.environment,
example: e.example,
invalidParams: e.invalidParams,
label: "Header",
operation: e.operation,
paramKey: "headers",
role: a.value === "All" ? "none" : "tabpanel",
title: "Headers",
workspace: e.workspace
}, null, 8, ["id", "envVariables", "environment", "example", "invalidParams", "operation", "role", "workspace"]), [
[u, a.value === "All" || a.value === "Headers"]
]),
s(i(V, {
id: t.value.Query,
class: "request-section-content-query",
envVariables: e.envVariables,
environment: e.environment,
example: e.example,
invalidParams: e.invalidParams,
label: "Parameter",
operation: e.operation,
paramKey: "query",
role: a.value === "All" ? "none" : "tabpanel",
title: "Query Parameters",
workspace: e.workspace
}, null, 8, ["id", "envVariables", "environment", "example", "invalidParams", "operation", "role", "workspace"]), [
[u, a.value === "All" || a.value === "Query"]
]),
e.operation.method && (a.value === "All" || a.value === "Body") && n(b)(e.operation.method) ? (r(), p(z, {
key: 1,
id: t.value.Body,
class: "request-section-content-body",
envVariables: e.envVariables,
environment: e.environment,
example: e.example,
operation: e.operation,
role: a.value === "All" ? "none" : "tabpanel",
title: "Body",
workspace: e.workspace
}, null, 8, ["id", "envVariables", "environment", "example", "operation", "role", "workspace"])) : k("", !0),
(r(!0), f(K, null, L(n(I), (m) => (r(), p(n(C), {
key: m.component
}, {
default: c(() => [
s((r(), p(Q(m.component), {
"onUpdate:operation": U,
operation: e.operation
}, null, 40, ["operation"])), [
[u, a.value === "All" || a.value === m.title]
])
]),
_: 2
}, 1024))), 128)),
o[1] || (o[1] = h("div", { class: "flex flex-grow" }, null, -1)),
i(n(C), null, {
default: c(() => [
i(J, {
class: "request-section-content-code-example -mt-1/2 border-t",
collection: e.collection,
example: e.example,
operation: e.operation,
server: e.server,
workspace: e.workspace,
environment: e.envVariables
}, null, 8, ["collection", "example", "operation", "server", "workspace", "environment"])
]),
_: 1
})
], 8, oe)
]),
_: 1
}, 8, ["aria-label"]));
}
});
export {
be as default
};