@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 q, ref as M, watch as g, createBlock as d, openBlock as n, withCtx as f, createElementVNode as k, withDirectives as s, createCommentVNode as b, createElementBlock as h, 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 S } from "@scalar/components";
import { canMethodHaveBody as p, isDefined as j, REGEX as C } 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 x from "./RequestParams.vue.js";
import G from "./RequestPathParams.vue.js";
import X from "./RequestAuth/RequestAuth.vue.js";
import J from "./RequestCodeExample.vue.js";
import { useWorkspace as Y } from "../../../store/store.js";
import { useLayout as Z } from "../../../hooks/useLayout.js";
import { usePluginManager as _ } from "../../../plugins/hooks/usePluginManager.js";
const ee = { class: "group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24" }, ae = ["for"], te = ["id", "placeholder", "value"], le = {
key: 2,
class: "text-c-1 flex h-8 items-center"
}, ne = ["id", "role"], xe = /* @__PURE__ */ D({
__name: "RequestSection",
props: {
collection: {},
environment: {},
envVariables: {},
example: {},
invalidParams: {},
operation: {},
selectedSecuritySchemeUids: {},
server: {},
workspace: {}
},
setup(e) {
const R = [
"Auth",
"Path Parameters",
"Cookies",
"Headers",
"Query",
"Body"
// 'Scripts',
], { requestMutators: w, cookies: O, securitySchemes: P } = Y(), { layout: u } = Z(), V = v(() => {
const t = /* @__PURE__ */ new Set(["All", ...R]);
return e.example.parameters.path.length || t.delete("Path Parameters"), p(e.operation.method ?? "get") || t.delete("Body"), y.value && t.delete("Auth"), [...t];
}), o = v(
() => Object.fromEntries(
V.value.map((t) => [t, q()])
)
), y = v(
() => u === "modal" && !e.operation.security && !Object.keys(P ?? {}).length
), a = M("All");
g(
() => e.operation,
(t) => {
a.value === "Body" && t && !p(t.method) && (a.value = "All");
}
);
const B = (t) => {
const r = t.target;
w.edit(e.operation.uid, "summary", r.value);
}, E = v(
() => (e.workspace.cookies ?? []).map((t) => O[t]).filter(j).filter((t) => t.name).filter(
(t) => W(e.server?.url || e.operation.path, t.domain)
).map((t) => ({
key: t.name,
value: t.value,
route: {
name: "cookies",
params: {
cookies: t.uid
}
},
enabled: !0
}))
), H = () => e.operation.summary ? e.operation.summary : e.operation.path.replace(C.PROTOCOL, "") ? e.operation.path.replace(C.PROTOCOL, "") : "Request Name", A = q(), N = _().getViewComponents("request.section"), I = (t, r) => w.edit(e.operation.uid, t, r);
return g(
() => y.value,
(t) => {
t && a.value === "Auth" && (a.value = "All");
}
), (t, r) => (n(), d(T, {
"aria-label": `Request: ${e.operation.summary}`
}, {
title: f(() => [
k("div", ee, [
l(u) !== "modal" ? (n(), h("label", {
key: 0,
class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
for: l(A)
}, null, 8, ae)) : b("", !0),
l(u) !== "modal" ? (n(), h("input", {
key: 1,
id: l(A),
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: H(),
value: e.operation.summary,
onInput: B
}, null, 40, te)) : (n(), h("span", le, $(e.operation.summary), 1))
]),
i(F, {
modelValue: a.value,
"onUpdate:modelValue": r[0] || (r[0] = (c) => a.value = c),
filterIds: o.value,
filters: V.value
}, null, 8, ["modelValue", "filterIds", "filters"])
]),
default: f(() => [
k("div", {
id: o.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(P) ?? {}).length) ? s((n(), d(X, {
key: 0,
id: o.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,
!y.value && (a.value === "All" || a.value === "Auth")
]
]) : b("", !0),
s(i(G, {
id: o.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(x, {
id: o.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: E.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(x, {
id: o.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(x, {
id: o.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(p)(e.operation.method) ? (n(), d(z, {
key: 1,
id: o.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"])) : b("", !0),
(n(!0), h(K, null, L(l(N), (c, U) => (n(), d(l(S), {
key: c.title ?? U
}, {
default: f(() => [
s((n(), d(Q(c.component), {
operation: e.operation,
"onUpdate:operation": I
}, null, 40, ["operation"])), [
[m, a.value === "All" || a.value === c.title]
])
]),
_: 2
}, 1024))), 128)),
r[1] || (r[1] = k("div", { class: "flex flex-grow" }, null, -1)),
i(l(S), null, {
default: f(() => [
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, ne)
]),
_: 1
}, 8, ["aria-label"]));
}
});
export {
xe as default
};