@scalar/api-client
Version:
the open source API testing client
344 lines (343 loc) • 12.9 kB
JavaScript
import { defineComponent as z, computed as n, ref as X, useId as s, watch as J, createBlock as q, openBlock as v, withCtx as C, createElementVNode as K, withDirectives as m, createElementBlock as x, createVNode as d, unref as y, vShow as c, mergeProps as f, toHandlers as b, Fragment as W, renderList as Y, createCommentVNode as E, resolveDynamicComponent as Z, toDisplayString as _ } from "vue";
import { ScalarErrorBoundary as ee } from "@scalar/components";
import { canMethodHaveBody as w } from "@scalar/helpers/http/can-method-have-body";
import { REGEX as te } from "@scalar/helpers/regex/regex-helpers";
import { getResolvedRef as R } from "@scalar/workspace-store/helpers/get-resolved-ref";
import { unpackProxyObject as ae } from "@scalar/workspace-store/helpers/unpack-proxy";
import le from "../../../components/SectionFilter.vue.js";
import ne from "../../../components/ViewLayout/ViewLayoutSection.vue.js";
import { filterGlobalCookie as oe } from "../operation-block/helpers/filter-global-cookies.js";
import { getExample as re } from "../operation-block/helpers/get-example.js";
import { getResolvedUrl as ie } from "../operation-block/helpers/get-resolved-url.js";
import ue from "./components/RequestBody.vue.js";
import se from "./components/RequestCodeSnippet.vue.js";
import k from "./components/RequestParams.vue.js";
import { createParameterHandlers as g } from "./helpers/create-parameter-handlers.js";
import { getDefaultHeaders as me } from "./helpers/get-default-headers.js";
import { getParameterSchema as de } from "./helpers/get-parameter-schema.js";
import { groupBy as D } from "./helpers/group-by.js";
import { isParamDisabled as ce } from "./helpers/is-param-disabled.js";
import ve from "../scalar-auth-selector-block/components/AuthSelector.vue.js";
const ye = { class: "group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24" }, he = ["for"], fe = ["id", "placeholder", "value"], Be = {
key: 2,
class: "text-c-1 flex h-8 items-center"
}, xe = ["id", "role"], Te = /* @__PURE__ */ z({
__name: "RequestBlock",
props: {
authMeta: { default: () => ({ type: "document" }) },
clientOptions: {},
environment: {},
eventBus: {},
exampleKey: {},
globalCookies: {},
layout: {},
method: {},
operation: {},
path: {},
plugins: {},
proxyUrl: {},
securityRequirements: {},
securitySchemes: {},
selectedClient: {},
selectedSecurity: {},
selectedSecuritySchemes: {},
server: {}
},
setup(e) {
const o = n(() => ({
method: e.method,
path: e.path,
exampleKey: e.exampleKey
})), r = n(
() => D(
e.operation.parameters?.map((t) => R(t)) ?? [],
"in",
(t) => {
const a = re(t, e.exampleKey, void 0);
return {
name: t.name,
value: a?.value ?? "",
description: t.description,
schema: de(t),
isRequired: t.required,
isDisabled: ce(t, a),
originalParameter: t
};
}
)
), I = n(
() => D(
r.value.header?.map((t) => ({
...t,
name: t.name.toLowerCase()
})) ?? [],
"name"
)
), N = n(
() => me({ method: e.method, operation: e.operation, exampleKey: e.exampleKey })
), p = n(() => {
const t = e.operation["x-scalar-disable-parameters"]?.["default-headers"]?.[e.exampleKey] ?? {};
return N.value.map((a) => {
const l = I.value[a.name.toLowerCase()]?.[0];
return {
name: a.name,
value: a.defaultValue,
schema: void 0,
isOverridden: l && !l?.isDisabled,
isReadonly: !0,
isDisabled: t[a.name.toLowerCase()] ?? !1
};
});
}), A = n(() => [
...p.value,
...r.value.header ?? []
]), V = n(() => {
const t = ie({
environment: e.environment,
server: e.server,
path: e.path,
pathVariables: {}
}), a = e.operation["x-scalar-disable-parameters"]?.["global-cookies"]?.[e.exampleKey] ?? {};
return e.globalCookies?.filter(
(l) => oe({
cookie: l,
url: t,
// Do not filter global cookies for the default cookies section (it's already filtered in the buildRequestCookieHeader function)
// This is because we still want to show them on the UI
disabledGlobalCookies: {}
})
).map((l) => ({
name: l.name,
value: l.value,
globalRoute: l.location === "document" ? { page: "document", path: "cookies" } : { page: "workspace", path: "cookies" },
isReadonly: !0,
isDisabled: a[l.name.toLowerCase()] ?? !1
})) ?? [];
}), P = n(() => [
...V.value ?? [],
...r.value.cookie ?? []
]), i = X("All"), T = [
"Auth",
"Variables",
"Cookies",
"Headers",
"Query",
"Body"
], $ = {
All: s(),
Auth: s(),
Variables: s(),
Cookies: s(),
Headers: s(),
Query: s(),
Body: s()
}, O = n(() => {
const t = /* @__PURE__ */ new Set(["All", ...T]);
return r.value.path?.length || t.delete("Variables"), w(e.method) || t.delete("Body"), H.value && t.delete("Auth"), [...t];
}), u = n(
() => Object.fromEntries(
O.value.map((t) => [t, $[t]])
)
), H = n(
() => e.layout === "modal" && !e.operation.security && !Object.keys(e.securitySchemes ?? {}).length
), L = n(() => e.operation.summary ? e.operation.summary : e.path.replace(te.PROTOCOL, "") || "Request Name"), h = (t) => i.value === "All" || i.value === t;
J(
() => e.method,
(t) => {
i.value === "Body" && !w(t) && (i.value = "All");
}
);
const F = (t) => {
const a = t.target.value;
e.eventBus.emit("operation:update:summary", {
meta: o.value,
payload: { summary: a }
});
}, B = n(() => ({
path: g("path", e.eventBus, o.value, {
context: r.value.path ?? []
}),
cookie: g("cookie", e.eventBus, o.value, {
context: P.value ?? [],
globalParameters: V.value.length
}),
header: g("header", e.eventBus, o.value, {
context: A.value,
defaultParameters: p.value.length
}),
query: g("query", e.eventBus, o.value, {
context: r.value.query ?? []
})
})), G = (t) => e.eventBus.emit("operation:update:requestBody:contentType", {
payload: { contentType: t.value },
meta: o.value
}), Q = ({
payload: t,
contentType: a
}) => {
const l = typeof t == "string" ? `update:requestBody:value-${a}` : void 0;
e.eventBus.emit(
"operation:update:requestBody:value",
{
payload: t,
contentType: a,
meta: o.value
},
{
debounceKey: l
}
);
}, M = ({
payload: t,
contentType: a
}) => {
const l = `update:requestBody:${a}-form-value`;
e.eventBus.emit(
"operation:update:requestBody:formValue",
{
payload: t.map((S) => ae(S, { depth: 1 })),
contentType: a,
meta: o.value
},
{
debounceKey: l
}
);
}, U = s(), j = (t) => e.eventBus.emit("operation:update:extension", { payload: t, meta: o.value });
return (t, a) => (v(), q(ne, {
"aria-label": `Request: ${e.operation.summary}`
}, {
title: C(() => [
K("div", ye, [
e.layout !== "modal" ? (v(), x("label", {
key: 0,
class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
for: y(U)
}, null, 8, he)) : E("", !0),
e.layout !== "modal" ? (v(), x("input", {
key: 1,
id: y(U),
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: L.value,
value: e.operation.summary,
onBlur: F
}, null, 40, fe)) : (v(), x("span", Be, _(e.operation.summary), 1))
]),
d(le, {
modelValue: i.value,
"onUpdate:modelValue": a[0] || (a[0] = (l) => i.value = l),
filterIds: u.value,
filters: O.value
}, null, 8, ["modelValue", "filterIds", "filters"])
]),
default: C(() => [
K("div", {
id: u.value.All,
class: "request-section-content custom-scroll relative flex flex-1 flex-col",
role: i.value === "All" ? "tabpanel" : "none"
}, [
m(d(y(ve), {
id: u.value.Auth,
environment: e.environment,
eventBus: e.eventBus,
meta: e.authMeta,
proxyUrl: e.proxyUrl,
securityRequirements: e.securityRequirements,
securitySchemes: e.securitySchemes,
selectedSecurity: e.selectedSecurity,
selectedSecuritySchemes: e.selectedSecuritySchemes,
server: e.server,
title: "Authentication"
}, null, 8, ["id", "environment", "eventBus", "meta", "proxyUrl", "securityRequirements", "securitySchemes", "selectedSecurity", "selectedSecuritySchemes", "server"]), [
[c, h("Auth") && !H.value]
]),
m(d(k, f({
id: u.value.Variables,
environment: e.environment,
eventBus: e.eventBus,
exampleKey: e.exampleKey,
rows: r.value.path ?? [],
showAddRowPlaceholder: !1,
title: "Variables"
}, b(B.value.path)), null, 16, ["id", "environment", "eventBus", "exampleKey", "rows"]), [
[c, h("Variables") && r.value.path?.length]
]),
m(d(k, f({
id: u.value.Cookies,
environment: e.environment,
eventBus: e.eventBus,
exampleKey: e.exampleKey,
rows: P.value ?? [],
showAddRowPlaceholder: !0,
title: "Cookies"
}, b(B.value.cookie)), null, 16, ["id", "environment", "eventBus", "exampleKey", "rows"]), [
[c, h("Cookies")]
]),
m(d(k, f({
id: u.value.Headers,
environment: e.environment,
eventBus: e.eventBus,
exampleKey: e.exampleKey,
rows: A.value ?? [],
title: "Headers"
}, b(B.value.header)), null, 16, ["id", "environment", "eventBus", "exampleKey", "rows"]), [
[c, h("Headers")]
]),
m(d(k, f({
id: u.value.Query,
environment: e.environment,
eventBus: e.eventBus,
exampleKey: e.exampleKey,
rows: r.value.query ?? [],
title: "Query Parameters"
}, b(B.value.query)), null, 16, ["id", "environment", "eventBus", "exampleKey", "rows"]), [
[c, h("Query")]
]),
m(d(ue, {
id: u.value.Body,
environment: e.environment,
exampleKey: e.exampleKey,
requestBody: y(R)(e.operation.requestBody),
title: "Request Body",
"onUpdate:contentType": G,
"onUpdate:formValue": M,
"onUpdate:value": Q
}, null, 8, ["id", "environment", "exampleKey", "requestBody"]), [
[c, h("Body") && y(w)(e.method)]
]),
(v(!0), x(W, null, Y(e.plugins, (l, S) => (v(), q(y(ee), { key: S }, {
default: C(() => [
l?.components?.request ? m((v(), q(Z(l.components.request.component), f({
key: 0,
operation: e.operation
}, { ref_for: !0 }, l.components.request.additionalProps, { "onOperation:update:extension": j }), null, 16, ["operation"])), [
[c, i.value === "All"]
]) : E("", !0)
]),
_: 2
}, 1024))), 128)),
a[1] || (a[1] = K("div", { class: "flex grow" }, null, -1)),
m(d(se, {
clientOptions: e.clientOptions,
eventBus: e.eventBus,
globalCookies: e.globalCookies,
integration: "client",
method: e.method,
operation: e.operation,
path: e.path,
securitySchemes: e.selectedSecuritySchemes,
selectedClient: e.selectedClient,
selectedContentType: y(R)(e.operation.requestBody)?.["x-scalar-selected-content-type"]?.[e.exampleKey],
selectedServer: e.server ?? void 0
}, null, 8, ["clientOptions", "eventBus", "globalCookies", "method", "operation", "path", "securitySchemes", "selectedClient", "selectedContentType", "selectedServer"]), [
[c, i.value === "All"]
])
], 8, xe)
]),
_: 1
}, 8, ["aria-label"]));
}
});
export {
Te as default
};