@scalar/api-client
Version:
the open source API testing client
248 lines (247 loc) • 10.2 kB
JavaScript
import { defineComponent as D, computed as v, useId as g, ref as M, watch as S, createBlock as d, openBlock as r, withCtx as c, createElementVNode as y, withDirectives as s, createCommentVNode as k, createElementBlock as f, createVNode as i, unref as l, vShow as m, 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 R } 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 w 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"], oe = {
key: 2,
class: "text-c-1 flex h-8 items-center"
}, le = ["id", "role"], be = /* @__PURE__ */ D({
__name: "RequestSection",
props: {
collection: {},
environment: {},
envVariables: {},
example: {},
invalidParams: {},
operation: {},
selectedSecuritySchemeUids: {},
server: {},
workspace: {}
},
setup(o) {
const O = [
"Auth",
"Path Parameters",
"Cookies",
"Headers",
"Query",
"Body"
// 'Scripts',
], { requestMutators: P, cookies: B, securitySchemes: V } = Z(), { layout: u } = x(), A = v(() => {
const e = /* @__PURE__ */ new Set(["All", ...O]);
return o.example.parameters.path.length || e.delete("Path Parameters"), b(o.operation.method ?? "get") || e.delete("Body"), h.value && e.delete("Auth"), [...e];
}), n = v(
() => Object.fromEntries(
A.value.map((e) => [e, g()])
)
), h = v(
() => u === "modal" && !o.operation.security && !Object.keys(V ?? {}).length
), a = M("All");
S(
() => o.operation,
(e) => {
a.value === "Body" && e && !b(e.method) && (a.value = "All");
}
);
const E = (e) => {
const t = e.target;
P.edit(o.operation.uid, "summary", t.value);
}, H = v(
() => (o.workspace.cookies ?? []).map((e) => B[e]).filter(j).filter((e) => e.name).filter(
(e) => W(o.server?.url || o.operation.path, e.domain)
).map((e) => ({
key: e.name,
value: e.value,
route: {
name: "cookies",
params: {
cookies: e.uid
}
},
enabled: !0
}))
), N = () => o.operation.summary ? o.operation.summary : o.operation.path.replace(R.PROTOCOL, "") ? o.operation.path.replace(R.PROTOCOL, "") : "Request Name", q = g(), I = Y().getViewComponents("request.section"), U = (e, t) => P.edit(o.operation.uid, e, t);
return S(
() => h.value,
(e) => {
e && a.value === "Auth" && (a.value = "All");
}
), (e, t) => (r(), d(T, {
"aria-label": `Request: ${e.operation.summary}`
}, {
title: c(() => [
y("div", _, [
l(u) !== "modal" ? (r(), f("label", {
key: 0,
class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
for: l(q)
}, null, 8, ee)) : k("", !0),
l(u) !== "modal" ? (r(), f("input", {
key: 1,
id: l(q),
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", oe, $(e.operation.summary), 1))
]),
i(F, {
modelValue: a.value,
"onUpdate:modelValue": t[0] || (t[0] = (p) => a.value = p),
filterIds: n.value,
filters: A.value
}, null, 8, ["modelValue", "filterIds", "filters"])
]),
default: c(() => [
y("div", {
id: n.value.All,
class: "request-section-content custom-scroll relative flex flex-1 flex-col",
role: a.value === "All" ? "tabpanel" : "none"
}, [
e.collection && e.workspace && (l(u) !== "modal" || Object.keys(l(V) ?? {}).length) ? s((r(), d(X, {
key: 0,
id: n.value.Auth,
class: "request-section-content-auth",
collection: e.collection,
envVariables: e.envVariables,
environment: e.environment,
isReadOnly: l(u) === "modal",
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", "isReadOnly", "operation", "role", "selectedSecuritySchemeUids", "server", "workspace"])), [
[
m,
!h.value && (a.value === "All" || a.value === "Auth")
]
]) : k("", !0),
s(i(G, {
id: n.value["Path Parameters"],
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: "Path Parameters",
workspace: e.workspace
}, null, 8, ["id", "envVariables", "environment", "example", "invalidParams", "operation", "role", "workspace"]), [
[
m,
(a.value === "All" || a.value === "Path Parameters") && e.example.parameters.path.length
]
]),
s(i(w, {
id: n.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"]), [
[m, a.value === "All" || a.value === "Cookies"]
]),
s(i(w, {
id: n.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"]), [
[m, a.value === "All" || a.value === "Headers"]
]),
s(i(w, {
id: n.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"]), [
[m, a.value === "All" || a.value === "Query"]
]),
e.operation.method && (a.value === "All" || a.value === "Body") && l(b)(e.operation.method) ? (r(), d(z, {
key: 1,
id: n.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(l(I), (p) => (r(), d(l(C), {
key: p.component
}, {
default: c(() => [
s((r(), d(Q(p.component), {
operation: e.operation,
"onUpdate:operation": U
}, null, 40, ["operation"])), [
[m, a.value === "All" || a.value === p.title]
])
]),
_: 2
}, 1024))), 128)),
t[1] || (t[1] = y("div", { class: "flex flex-grow" }, null, -1)),
i(l(C), null, {
default: c(() => [
i(J, {
class: "request-section-content-code-example -mt-1/2 border-t",
collection: e.collection,
environment: e.envVariables,
example: e.example,
operation: e.operation,
server: e.server,
workspace: e.workspace
}, null, 8, ["collection", "environment", "example", "operation", "server", "workspace"])
]),
_: 1
})
], 8, le)
]),
_: 1
}, 8, ["aria-label"]));
}
});
export {
be as default
};