@scalar/api-client 2.38.4 → 2.39.1

package/dist/v2/blocks/request-block/RequestBlock.vue.script.js

@@ -0,0 +1,415 @@
+import { getExample } from "../operation-block/helpers/get-example.js";
+import { getResolvedUrl } from "../operation-block/helpers/get-resolved-url.js";
+import { getDefaultHeaders } from "./helpers/get-default-headers.js";
+import { filterGlobalCookie } from "../operation-block/helpers/filter-global-cookies.js";
+import { isParamDisabled } from "./helpers/is-param-disabled.js";
+import SectionFilter_default from "../../../components/SectionFilter.vue.js";
+import ViewLayoutSection_default from "../../../components/ViewLayout/ViewLayoutSection.vue.js";
+import RequestBody_default from "./components/RequestBody.vue.js";
+import RequestCodeSnippet_default from "./components/RequestCodeSnippet.vue.js";
+import RequestParams_default from "./components/RequestParams.vue.js";
+import { createParameterHandlers } from "./helpers/create-parameter-handlers.js";
+import { getParameterSchema } from "./helpers/get-parameter-schema.js";
+import { groupBy } from "./helpers/group-by.js";
+import AuthSelector_default from "../scalar-auth-selector-block/components/AuthSelector.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, toHandlers, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
+import { ScalarErrorBoundary } from "@scalar/components";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { unpackProxyObject } from "@scalar/workspace-store/helpers/unpack-proxy";
+import { canMethodHaveBody } from "@scalar/helpers/http/can-method-have-body";
+import { REGEX } from "@scalar/helpers/regex/regex-helpers";
+//#region src/v2/blocks/request-block/RequestBlock.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24" };
+var _hoisted_2 = ["for"];
+var _hoisted_3 = [
+	"id",
+	"placeholder",
+	"value"
+];
+var _hoisted_4 = {
+	key: 2,
+	class: "text-c-1 flex h-8 items-center"
+};
+var _hoisted_5 = ["id", "role"];
+var RequestBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestBlock",
+	props: {
+		authMeta: { default: () => ({ type: "document" }) },
+		clientOptions: {},
+		environment: {},
+		eventBus: {},
+		exampleKey: {},
+		globalCookies: {},
+		layout: {},
+		method: {},
+		operation: {},
+		path: {},
+		plugins: {},
+		proxyUrl: {},
+		requestBodyCompositionSelection: {},
+		securityRequirements: {},
+		securitySchemes: {},
+		selectedClient: {},
+		selectedSecurity: {},
+		selectedSecuritySchemes: {},
+		server: {}
+	},
+	setup(__props) {
+		/** Operation metadata used across event emissions */
+		const meta = computed(() => ({
+			method: __props.method,
+			path: __props.path,
+			exampleKey: __props.exampleKey
+		}));
+		/** Parameters grouped by type (path, query, header, cookie) */
+		const sections = computed(() => groupBy(__props.operation.parameters?.map((param) => getResolvedRef(param)) ?? [], "in", (param) => {
+			const example = getExample(param, __props.exampleKey, void 0);
+			return {
+				name: param.name,
+				value: example?.value ?? "",
+				description: param.description,
+				schema: getParameterSchema(param),
+				isRequired: param.required,
+				isDisabled: isParamDisabled(param, example),
+				originalParameter: param
+			};
+		}));
+		const headersMap = computed(() => groupBy(sections.value.header?.map((it) => ({
+			...it,
+			name: it.name.toLowerCase()
+		})) ?? [], "name"));
+		const autoGeneratedHeaders = computed(() => getDefaultHeaders({
+			method: __props.method,
+			operation: __props.operation,
+			exampleKey: __props.exampleKey
+		}));
+		const defaultHeaders = computed(() => {
+			const disableParameters = __props.operation["x-scalar-disable-parameters"]?.["default-headers"]?.[__props.exampleKey] ?? {};
+			return autoGeneratedHeaders.value.map((it) => {
+				const realHeader = headersMap.value[it.name.toLowerCase()]?.[0];
+				return {
+					name: it.name,
+					value: it.defaultValue,
+					schema: void 0,
+					isOverridden: realHeader && !realHeader?.isDisabled,
+					isReadonly: true,
+					isDisabled: disableParameters[it.name.toLowerCase()] ?? false
+				};
+			});
+		});
+		const headers = computed(() => [...defaultHeaders.value, ...sections.value.header ?? []]);
+		const defaultCookies = computed(() => {
+			const resolvedUrl = getResolvedUrl({
+				environment: __props.environment,
+				server: __props.server,
+				path: __props.path,
+				pathVariables: {}
+			});
+			const disabledGlobalCookies = __props.operation["x-scalar-disable-parameters"]?.["global-cookies"]?.[__props.exampleKey] ?? {};
+			return __props.globalCookies?.filter((cookie) => filterGlobalCookie({
+				cookie,
+				url: resolvedUrl,
+				disabledGlobalCookies: {}
+			})).map((it) => ({
+				name: it.name,
+				value: it.value,
+				globalRoute: it.location === "document" ? {
+					page: "document",
+					path: "cookies"
+				} : {
+					page: "workspace",
+					path: "cookies"
+				},
+				isReadonly: true,
+				isDisabled: disabledGlobalCookies[it.name.toLowerCase()] ?? false
+			})) ?? [];
+		});
+		const cookies = computed(() => [...defaultCookies.value ?? [], ...sections.value.cookie ?? []]);
+		/** Currently selected filter for the request sections */
+		const selectedFilter = ref("All");
+		/** Available operation sections */
+		const OPERATION_SECTIONS = [
+			"Auth",
+			"Variables",
+			"Cookies",
+			"Headers",
+			"Query",
+			"Body"
+		];
+		/**
+		* Pre-generated stable IDs for all possible filter sections.
+		* These are created once at setup time to avoid regenerating IDs on re-render.
+		*/
+		const sectionIds = {
+			All: useId(),
+			Auth: useId(),
+			Variables: useId(),
+			Cookies: useId(),
+			Headers: useId(),
+			Query: useId(),
+			Body: useId()
+		};
+		/** Filters available based on operation state */
+		const filters = computed(() => {
+			const availableFilters = new Set(["All", ...OPERATION_SECTIONS]);
+			if (!sections.value.path?.length) availableFilters.delete("Variables");
+			if (!canMethodHaveBody(__props.method)) availableFilters.delete("Body");
+			if (isAuthHidden.value) availableFilters.delete("Auth");
+			return [...availableFilters];
+		});
+		/**
+		* Map available filters to their pre-generated stable IDs.
+		* Only includes IDs for filters that are currently available.
+		*/
+		const filterIds = computed(() => Object.fromEntries(filters.value.map((section) => [section, sectionIds[section]])));
+		/**
+		* Hide auth selector in readonly mode when no security schemes are defined.
+		* This keeps the UI clean when there are no authentication options available.
+		*/
+		const isAuthHidden = computed(() => __props.layout === "modal" && !Object.keys(__props.securitySchemes ?? {}).length);
+		/**
+		* Keep auth available for unauthenticated operations, but collapse it by default
+		* in readonly modal layouts unless a requirement or manual selection exists.
+		*/
+		const isAuthDefaultOpen = computed(() => __props.layout !== "modal" || Boolean(__props.securityRequirements?.length || __props.selectedSecurity.selectedSchemes.length));
+		/** Get a sensible placeholder for the request name input */
+		const requestNamePlaceholder = computed(() => {
+			if (__props.operation.summary) return __props.operation.summary;
+			return __props.path.replace(REGEX.PROTOCOL, "") || "Request Name";
+		});
+		/** Check if the section should be shown based on the selected filter */
+		const isSectionVisible = (section) => {
+			return selectedFilter.value === "All" || selectedFilter.value === section;
+		};
+		/**
+		* Reset filter to 'All' if Body filter is selected but method changes to one that cannot have a body.
+		* This prevents showing an empty Body section when switching methods.
+		*/
+		watch(() => __props.method, (newMethod) => {
+			if (selectedFilter.value === "Body" && !canMethodHaveBody(newMethod)) selectedFilter.value = "All";
+		});
+		/** Handle operation summary updates */
+		const handleSummaryUpdate = (event) => {
+			const summary = event.target.value;
+			__props.eventBus.emit("operation:update:meta", {
+				meta: meta.value,
+				payload: { summary: summary.trim() }
+			});
+		};
+		/** Parameter handlers */
+		const parameterHandlers = computed(() => ({
+			path: createParameterHandlers("path", __props.eventBus, meta.value, { context: sections.value.path ?? [] }),
+			cookie: createParameterHandlers("cookie", __props.eventBus, meta.value, {
+				context: cookies.value ?? [],
+				globalParameters: defaultCookies.value.length
+			}),
+			header: createParameterHandlers("header", __props.eventBus, meta.value, {
+				context: headers.value,
+				defaultParameters: defaultHeaders.value.length
+			}),
+			query: createParameterHandlers("query", __props.eventBus, meta.value, { context: sections.value.query ?? [] })
+		}));
+		/** Handle request body content type update */
+		const handleUpdateContentType = (payload) => __props.eventBus.emit("operation:update:requestBody:contentType", {
+			payload: { contentType: payload.value },
+			meta: meta.value
+		});
+		/** Handle request body value update */
+		const handleUpdateBodyValue = ({ payload, contentType }) => {
+			const debounceKey = typeof payload === "string" ? `update:requestBody:value-${contentType}` : void 0;
+			__props.eventBus.emit("operation:update:requestBody:value", {
+				payload,
+				contentType,
+				meta: meta.value
+			}, { debounceKey });
+		};
+		/** Handle request body value update */
+		const handleUpdateBodyFormValue = ({ payload, contentType }) => {
+			const debounceKey = `update:requestBody:${contentType}-form-value`;
+			__props.eventBus.emit("operation:update:requestBody:formValue", {
+				payload: payload.map((row) => unpackProxyObject(row, { depth: 1 })),
+				contentType,
+				meta: meta.value
+			}, { debounceKey });
+		};
+		const labelRequestNameId = useId();
+		/** Allow updating the operation extensions for the plugins */
+		const updateOperationExtension = (payload) => __props.eventBus.emit("operation:update:extension", {
+			payload,
+			meta: meta.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayoutSection_default, { "aria-label": `Request: ${__props.operation.summary}` }, {
+				title: withCtx(() => [createElementVNode("div", _hoisted_1, [__props.layout !== "modal" ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
+					for: unref(labelRequestNameId)
+				}, null, 8, _hoisted_2)) : createCommentVNode("", true), __props.layout !== "modal" ? (openBlock(), createElementBlock("input", {
+					key: 1,
+					id: unref(labelRequestNameId),
+					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: requestNamePlaceholder.value,
+					value: __props.operation.summary,
+					onBlur: handleSummaryUpdate
+				}, null, 40, _hoisted_3)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.operation.summary), 1))]), createVNode(SectionFilter_default, {
+					modelValue: selectedFilter.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedFilter.value = $event),
+					filterIds: filterIds.value,
+					filters: filters.value
+				}, null, 8, [
+					"modelValue",
+					"filterIds",
+					"filters"
+				])]),
+				default: withCtx(() => [createElementVNode("div", {
+					id: filterIds.value.All,
+					class: "request-section-content custom-scroll relative flex flex-1 flex-col",
+					role: selectedFilter.value === "All" ? "tabpanel" : "none"
+				}, [
+					withDirectives(createVNode(unref(AuthSelector_default), {
+						id: filterIds.value.Auth,
+						createAnySecurityScheme: __props.layout !== "modal",
+						defaultOpen: isAuthDefaultOpen.value,
+						environment: __props.environment,
+						eventBus: __props.eventBus,
+						meta: __props.authMeta,
+						proxyUrl: __props.proxyUrl,
+						securityRequirements: __props.securityRequirements,
+						securitySchemes: __props.securitySchemes,
+						selectedSecurity: __props.selectedSecurity,
+						selectedSecuritySchemes: __props.selectedSecuritySchemes,
+						server: __props.server,
+						title: "Authentication"
+					}, null, 8, [
+						"id",
+						"createAnySecurityScheme",
+						"defaultOpen",
+						"environment",
+						"eventBus",
+						"meta",
+						"proxyUrl",
+						"securityRequirements",
+						"securitySchemes",
+						"selectedSecurity",
+						"selectedSecuritySchemes",
+						"server"
+					]), [[vShow, isSectionVisible("Auth") && !isAuthHidden.value]]),
+					withDirectives(createVNode(RequestParams_default, mergeProps({
+						id: filterIds.value.Variables,
+						environment: __props.environment,
+						eventBus: __props.eventBus,
+						exampleKey: __props.exampleKey,
+						rows: sections.value.path ?? [],
+						showAddRowPlaceholder: false,
+						title: "Variables"
+					}, toHandlers(parameterHandlers.value.path)), null, 16, [
+						"id",
+						"environment",
+						"eventBus",
+						"exampleKey",
+						"rows"
+					]), [[vShow, isSectionVisible("Variables") && sections.value.path?.length]]),
+					withDirectives(createVNode(RequestParams_default, mergeProps({
+						id: filterIds.value.Cookies,
+						environment: __props.environment,
+						eventBus: __props.eventBus,
+						exampleKey: __props.exampleKey,
+						rows: cookies.value ?? [],
+						showAddRowPlaceholder: true,
+						title: "Cookies"
+					}, toHandlers(parameterHandlers.value.cookie)), null, 16, [
+						"id",
+						"environment",
+						"eventBus",
+						"exampleKey",
+						"rows"
+					]), [[vShow, isSectionVisible("Cookies")]]),
+					withDirectives(createVNode(RequestParams_default, mergeProps({
+						id: filterIds.value.Headers,
+						environment: __props.environment,
+						eventBus: __props.eventBus,
+						exampleKey: __props.exampleKey,
+						rows: headers.value ?? [],
+						title: "Headers"
+					}, toHandlers(parameterHandlers.value.header)), null, 16, [
+						"id",
+						"environment",
+						"eventBus",
+						"exampleKey",
+						"rows"
+					]), [[vShow, isSectionVisible("Headers")]]),
+					withDirectives(createVNode(RequestParams_default, mergeProps({
+						id: filterIds.value.Query,
+						environment: __props.environment,
+						eventBus: __props.eventBus,
+						exampleKey: __props.exampleKey,
+						rows: sections.value.query ?? [],
+						title: "Query Parameters"
+					}, toHandlers(parameterHandlers.value.query)), null, 16, [
+						"id",
+						"environment",
+						"eventBus",
+						"exampleKey",
+						"rows"
+					]), [[vShow, isSectionVisible("Query")]]),
+					withDirectives(createVNode(RequestBody_default, {
+						id: filterIds.value.Body,
+						environment: __props.environment,
+						exampleKey: __props.exampleKey,
+						requestBody: unref(getResolvedRef)(__props.operation.requestBody),
+						requestBodyCompositionSelection: __props.requestBodyCompositionSelection,
+						title: "Request Body",
+						"onUpdate:contentType": handleUpdateContentType,
+						"onUpdate:formValue": handleUpdateBodyFormValue,
+						"onUpdate:value": handleUpdateBodyValue
+					}, null, 8, [
+						"id",
+						"environment",
+						"exampleKey",
+						"requestBody",
+						"requestBodyCompositionSelection"
+					]), [[vShow, isSectionVisible("Body") && unref(canMethodHaveBody)(__props.method)]]),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(__props.plugins, (plugin, index) => {
+						return openBlock(), createBlock(unref(ScalarErrorBoundary), { key: index }, {
+							default: withCtx(() => [plugin?.components?.request ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(plugin.components.request.component), mergeProps({
+								key: 0,
+								operation: __props.operation
+							}, { ref_for: true }, plugin.components.request.additionalProps, { "onOperation:update:extension": updateOperationExtension }), null, 16, ["operation"])), [[vShow, selectedFilter.value === "All"]]) : createCommentVNode("", true)]),
+							_: 2
+						}, 1024);
+					}), 128)),
+					_cache[1] || (_cache[1] = createElementVNode("div", { class: "flex grow" }, null, -1)),
+					withDirectives(createVNode(RequestCodeSnippet_default, {
+						clientOptions: __props.clientOptions,
+						eventBus: __props.eventBus,
+						globalCookies: __props.globalCookies,
+						integration: "client",
+						method: __props.method,
+						operation: __props.operation,
+						path: __props.path,
+						securitySchemes: __props.selectedSecuritySchemes,
+						selectedClient: __props.selectedClient,
+						selectedContentType: unref(getResolvedRef)(__props.operation.requestBody)?.["x-scalar-selected-content-type"]?.[__props.exampleKey],
+						selectedServer: __props.server ?? void 0
+					}, null, 8, [
+						"clientOptions",
+						"eventBus",
+						"globalCookies",
+						"method",
+						"operation",
+						"path",
+						"securitySchemes",
+						"selectedClient",
+						"selectedContentType",
+						"selectedServer"
+					]), [[vShow, selectedFilter.value === "All"]])
+				], 8, _hoisted_5)]),
+				_: 1
+			}, 8, ["aria-label"]);
+		};
+	}
+});
+//#endregion
+export { RequestBlock_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RequestBlock.vue.script.js.map

package/dist/v2/blocks/request-block/RequestBlock.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestBlock.vue.script.js","names":[],"sources":["../../../../src/v2/blocks/request-block/RequestBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport { canMethodHaveBody } from '@scalar/helpers/http/can-method-have-body'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { REGEX } from '@scalar/helpers/regex/regex-helpers'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  ApiReferenceEvents,\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OpenApiDocument,\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, useId, watch } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport type { ClientLayout } from '@/hooks'\nimport { filterGlobalCookie } from '@/v2/blocks/operation-block/helpers/filter-global-cookies'\nimport { getExample } from '@/v2/blocks/operation-block/helpers/get-example'\nimport { getResolvedUrl } from '@/v2/blocks/operation-block/helpers/get-resolved-url'\nimport type { ClientOptionGroup } from '@/v2/blocks/operation-code-sample'\nimport RequestBody from '@/v2/blocks/request-block/components/RequestBody.vue'\nimport RequestCodeSnippet from '@/v2/blocks/request-block/components/RequestCodeSnippet.vue'\nimport RequestParams from '@/v2/blocks/request-block/components/RequestParams.vue'\nimport type { TableRow } from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport { createParameterHandlers } from '@/v2/blocks/request-block/helpers/create-parameter-handlers'\nimport { getDefaultHeaders } from '@/v2/blocks/request-block/helpers/get-default-headers'\nimport { getParameterSchema } from '@/v2/blocks/request-block/helpers/get-parameter-schema'\nimport { groupBy } from '@/v2/blocks/request-block/helpers/group-by'\nimport { isParamDisabled } from '@/v2/blocks/request-block/helpers/is-param-disabled'\nimport {\n  AuthSelector,\n  type MergedSecuritySchemes,\n} from '@/v2/blocks/scalar-auth-selector-block'\nimport type { SecuritySchemeObjectSecret } from '@/v2/blocks/scalar-auth-selector-block/helpers/secret-types'\n\ntype Filter =\n  | 'All'\n  | 'Auth'\n  | 'Variables'\n  | 'Cookies'\n  | 'Headers'\n  | 'Query'\n  | 'Body'\n\nexport type ExtendedScalarCookie = XScalarCookie & {\n  location: 'document' | 'workspace'\n}\n\nconst {\n  authMeta = { type: 'document' },\n  clientOptions,\n  environment,\n  eventBus,\n  exampleKey,\n  globalCookies,\n  layout,\n  method,\n  operation,\n  path,\n  plugins,\n  proxyUrl,\n  requestBodyCompositionSelection,\n  securityRequirements,\n  securitySchemes,\n  selectedClient,\n  selectedSecurity,\n  selectedSecuritySchemes,\n  server,\n} = defineProps<{\n  authMeta: AuthMeta\n  clientOptions: ClientOptionGroup[]\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  exampleKey: string\n  globalCookies: ExtendedScalarCookie[]\n  layout: ClientLayout\n  method: HttpMethod\n  operation: OperationObject\n  path: string\n  plugins: ClientPlugin[]\n  proxyUrl: string\n  requestBodyCompositionSelection?: Record<string, number>\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  selectedClient: WorkspaceStore['workspace']['x-scalar-default-client']\n  selectedSecurity: SelectedSecurity\n  selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  server: ServerObject | null\n}>()\n\n/** Operation metadata used across event emissions */\nconst meta = computed(() => ({\n  method,\n  path,\n  exampleKey,\n}))\n\n/** Parameters grouped by type (path, query, header, cookie) */\nconst sections = computed(() =>\n  groupBy(\n    operation.parameters?.map((param) => getResolvedRef(param)) ?? [],\n    'in',\n    (param) => {\n      const example = getExample(param, exampleKey, undefined)\n\n      return {\n        name: param.name,\n        value: example?.value ?? '',\n        description: param.description,\n        schema: getParameterSchema(param),\n        isRequired: param.required,\n        isDisabled: isParamDisabled(param, example),\n        originalParameter: param,\n      } as TableRow\n    },\n  ),\n)\n\n// Generate a reverse map for fast lookup of headers by the name\nconst headersMap = computed(() =>\n  groupBy(\n    sections.value.header?.map((it) => ({\n      ...it,\n      name: it.name.toLowerCase(),\n    })) ?? [],\n    'name',\n  ),\n)\n\nconst autoGeneratedHeaders = computed(() =>\n  getDefaultHeaders({ method, operation, exampleKey }),\n)\n\nconst defaultHeaders = computed(() => {\n  const disableParameters =\n    operation['x-scalar-disable-parameters']?.['default-headers']?.[\n      exampleKey\n    ] ?? {}\n\n  return autoGeneratedHeaders.value.map((it) => {\n    const realHeader = headersMap.value[it.name.toLowerCase()]?.[0]\n\n    return {\n      name: it.name,\n      value: it.defaultValue,\n      schema: undefined,\n      isOverridden: realHeader && !realHeader?.isDisabled,\n      isReadonly: true,\n      isDisabled: disableParameters[it.name.toLowerCase()] ?? false,\n    } satisfies TableRow\n  })\n})\n\nconst headers = computed(() => [\n  ...defaultHeaders.value,\n  ...(sections.value.header ?? []),\n])\n\nconst defaultCookies = computed(() => {\n  const resolvedUrl = getResolvedUrl({\n    environment,\n    server,\n    path,\n    pathVariables: {},\n  })\n\n  const disabledGlobalCookies =\n    operation['x-scalar-disable-parameters']?.['global-cookies']?.[\n      exampleKey\n    ] ?? {}\n\n  return (\n    globalCookies\n      ?.filter((cookie) =>\n        filterGlobalCookie({\n          cookie,\n          url: resolvedUrl,\n          // Do not filter global cookies for the default cookies section (it's already filtered in the buildRequestCookieHeader function)\n          // This is because we still want to show them on the UI\n          disabledGlobalCookies: {},\n        }),\n      )\n      .map((it) => ({\n        name: it.name,\n        value: it.value,\n        globalRoute:\n          it.location === 'document'\n            ? ({ page: 'document', path: 'cookies' } as const)\n            : ({ page: 'workspace', path: 'cookies' } as const),\n        isReadonly: true,\n        isDisabled: disabledGlobalCookies[it.name.toLowerCase()] ?? false,\n      })) ?? ([] satisfies TableRow[])\n  )\n})\n\nconst cookies = computed(() => [\n  ...(defaultCookies.value ?? []),\n  ...(sections.value.cookie ?? []),\n])\n\n/** Currently selected filter for the request sections */\nconst selectedFilter = ref<Filter>('All')\n\n/** Available operation sections */\nconst OPERATION_SECTIONS: readonly Filter[] = [\n  'Auth',\n  'Variables',\n  'Cookies',\n  'Headers',\n  'Query',\n  'Body',\n] as const\n\n/**\n * Pre-generated stable IDs for all possible filter sections.\n * These are created once at setup time to avoid regenerating IDs on re-render.\n */\nconst sectionIds: Record<Filter, string> = {\n  All: useId(),\n  Auth: useId(),\n  Variables: useId(),\n  Cookies: useId(),\n  Headers: useId(),\n  Query: useId(),\n  Body: useId(),\n}\n\n/** Filters available based on operation state */\nconst filters = computed<Filter[]>(() => {\n  const availableFilters = new Set<Filter>(['All', ...OPERATION_SECTIONS])\n\n  if (!sections.value.path?.length) {\n    availableFilters.delete('Variables')\n  }\n  if (!canMethodHaveBody(method)) {\n    availableFilters.delete('Body')\n  }\n  if (isAuthHidden.value) {\n    availableFilters.delete('Auth')\n  }\n\n  return [...availableFilters]\n})\n\n/**\n * Map available filters to their pre-generated stable IDs.\n * Only includes IDs for filters that are currently available.\n */\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, sectionIds[section]]),\n    ) as Record<Filter, string>,\n)\n\n/**\n * Hide auth selector in readonly mode when no security schemes are defined.\n * This keeps the UI clean when there are no authentication options available.\n */\nconst isAuthHidden = computed(\n  () => layout === 'modal' && !Object.keys(securitySchemes ?? {}).length,\n)\n\n/**\n * Keep auth available for unauthenticated operations, but collapse it by default\n * in readonly modal layouts unless a requirement or manual selection exists.\n */\nconst isAuthDefaultOpen = computed(\n  () =>\n    layout !== 'modal' ||\n    Boolean(\n      securityRequirements?.length || selectedSecurity.selectedSchemes.length,\n    ),\n)\n\n/** Get a sensible placeholder for the request name input */\nconst requestNamePlaceholder = computed(() => {\n  if (operation.summary) {\n    return operation.summary\n  }\n  const cleanPath = path.replace(REGEX.PROTOCOL, '')\n  return cleanPath || 'Request Name'\n})\n\n/** Check if the section should be shown based on the selected filter */\nconst isSectionVisible = (section: Filter): boolean => {\n  return selectedFilter.value === 'All' || selectedFilter.value === section\n}\n\n/**\n * Reset filter to 'All' if Body filter is selected but method changes to one that cannot have a body.\n * This prevents showing an empty Body section when switching methods.\n */\nwatch(\n  () => method,\n  (newMethod) => {\n    if (selectedFilter.value === 'Body' && !canMethodHaveBody(newMethod)) {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n\n/** Handle operation summary updates */\nconst handleSummaryUpdate = (event: Event): void => {\n  const summary = (event.target as HTMLInputElement).value\n  eventBus.emit('operation:update:meta', {\n    meta: meta.value,\n    payload: { summary: summary.trim() },\n  })\n}\n\n/** Parameter handlers */\nconst parameterHandlers = computed(() => ({\n  path: createParameterHandlers('path', eventBus, meta.value, {\n    context: sections.value.path ?? [],\n  }),\n  cookie: createParameterHandlers('cookie', eventBus, meta.value, {\n    context: cookies.value ?? [],\n    globalParameters: defaultCookies.value.length,\n  }),\n  header: createParameterHandlers('header', eventBus, meta.value, {\n    context: headers.value,\n    defaultParameters: defaultHeaders.value.length,\n  }),\n  query: createParameterHandlers('query', eventBus, meta.value, {\n    context: sections.value.query ?? [],\n  }),\n}))\n\n/** Handle request body content type update */\nconst handleUpdateContentType = (payload: { value: string }): void =>\n  eventBus.emit('operation:update:requestBody:contentType', {\n    payload: { contentType: payload.value },\n    meta: meta.value,\n  })\n\n/** Handle request body value update */\nconst handleUpdateBodyValue = ({\n  payload,\n  contentType,\n}: Pick<\n  ApiReferenceEvents['operation:update:requestBody:value'],\n  'payload' | 'contentType'\n>): void => {\n  const debounceKey =\n    typeof payload === 'string'\n      ? `update:requestBody:value-${contentType}`\n      : undefined\n\n  eventBus.emit(\n    'operation:update:requestBody:value',\n    {\n      payload,\n      contentType,\n      meta: meta.value,\n    },\n    {\n      debounceKey,\n    },\n  )\n}\n\n/** Handle request body value update */\nconst handleUpdateBodyFormValue = ({\n  payload,\n  contentType,\n}: Pick<\n  ApiReferenceEvents['operation:update:requestBody:formValue'],\n  'payload' | 'contentType'\n>): void => {\n  const debounceKey = `update:requestBody:${contentType}-form-value`\n\n  eventBus.emit(\n    'operation:update:requestBody:formValue',\n    {\n      payload: payload.map((row) => unpackProxyObject(row, { depth: 1 })),\n      contentType,\n      meta: meta.value,\n    },\n    {\n      debounceKey,\n    },\n  )\n}\n\nconst labelRequestNameId = useId()\n\n/** Allow updating the operation extensions for the plugins */\nconst updateOperationExtension = (\n  payload: ApiReferenceEvents['operation:update:extension']['payload'],\n): void =>\n  eventBus.emit('operation:update:extension', { payload, meta: meta.value })\n</script>\n<template>\n  <ViewLayoutSection :aria-label=\"`Request: ${operation.summary}`\">\n    <template #title>\n      <div\n        class=\"group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24\">\n        <label\n          v-if=\"layout !== 'modal'\"\n          class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n          :for=\"labelRequestNameId\" />\n        <input\n          v-if=\"layout !== 'modal'\"\n          :id=\"labelRequestNameId\"\n          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\"\n          :placeholder=\"requestNamePlaceholder\"\n          :value=\"operation.summary\"\n          @blur=\"handleSummaryUpdate\" />\n        <span\n          v-else\n          class=\"text-c-1 flex h-8 items-center\">\n          {{ operation.summary }}\n        </span>\n      </div>\n      <SectionFilter\n        v-model=\"selectedFilter\"\n        :filterIds=\"filterIds\"\n        :filters=\"filters\" />\n    </template>\n\n    <div\n      :id=\"filterIds.All\"\n      class=\"request-section-content custom-scroll relative flex flex-1 flex-col\"\n      :role=\"selectedFilter === 'All' ? 'tabpanel' : 'none'\">\n      <!-- Auth Selector -->\n      <AuthSelector\n        v-show=\"isSectionVisible('Auth') && !isAuthHidden\"\n        :id=\"filterIds.Auth\"\n        :createAnySecurityScheme=\"layout !== 'modal'\"\n        :defaultOpen=\"isAuthDefaultOpen\"\n        :environment\n        :eventBus\n        :meta=\"authMeta\"\n        :proxyUrl\n        :securityRequirements\n        :securitySchemes\n        :selectedSecurity\n        :selectedSecuritySchemes\n        :server\n        title=\"Authentication\" />\n\n      <!-- Variables (Path Parameters) -->\n      <RequestParams\n        v-show=\"isSectionVisible('Variables') && sections.path?.length\"\n        :id=\"filterIds.Variables\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"sections.path ?? []\"\n        :showAddRowPlaceholder=\"false\"\n        title=\"Variables\"\n        v-on=\"parameterHandlers.path\" />\n\n      <!-- Cookies -->\n      <RequestParams\n        v-show=\"isSectionVisible('Cookies')\"\n        :id=\"filterIds.Cookies\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"cookies ?? []\"\n        :showAddRowPlaceholder=\"true\"\n        title=\"Cookies\"\n        v-on=\"parameterHandlers.cookie\" />\n\n      <!-- Headers -->\n      <RequestParams\n        v-show=\"isSectionVisible('Headers')\"\n        :id=\"filterIds.Headers\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"headers ?? []\"\n        title=\"Headers\"\n        v-on=\"parameterHandlers.header\" />\n\n      <!-- Query Parameters -->\n      <RequestParams\n        v-show=\"isSectionVisible('Query')\"\n        :id=\"filterIds.Query\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"sections.query ?? []\"\n        title=\"Query Parameters\"\n        v-on=\"parameterHandlers.query\" />\n\n      <!-- Request Body -->\n      <RequestBody\n        v-show=\"isSectionVisible('Body') && canMethodHaveBody(method)\"\n        :id=\"filterIds.Body\"\n        :environment\n        :exampleKey\n        :requestBody=\"getResolvedRef(operation.requestBody)\"\n        :requestBodyCompositionSelection\n        title=\"Request Body\"\n        @update:contentType=\"handleUpdateContentType\"\n        @update:formValue=\"handleUpdateBodyFormValue\"\n        @update:value=\"handleUpdateBodyValue\" />\n\n      <!-- Inject request section plugin components -->\n      <ScalarErrorBoundary\n        v-for=\"(plugin, index) in plugins\"\n        :key=\"index\">\n        <component\n          :is=\"plugin.components.request.component\"\n          v-if=\"plugin?.components?.request\"\n          v-show=\"selectedFilter === 'All'\"\n          :operation\n          v-bind=\"plugin.components.request.additionalProps\"\n          @operation:update:extension=\"updateOperationExtension\" />\n      </ScalarErrorBoundary>\n\n      <!-- Spacer -->\n      <div class=\"flex grow\" />\n      <!-- Code Snippet -->\n      <RequestCodeSnippet\n        v-show=\"selectedFilter === 'All'\"\n        :clientOptions\n        :eventBus\n        :globalCookies=\"globalCookies\"\n        integration=\"client\"\n        :method\n        :operation\n        :path\n        :securitySchemes=\"selectedSecuritySchemes\"\n        :selectedClient\n        :selectedContentType=\"\n          getResolvedRef(operation.requestBody)?.[\n            'x-scalar-selected-content-type'\n          ]?.[exampleKey]\n        \"\n        :selectedServer=\"server ?? undefined\" />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.request-section-content {\n  --scalar-border-width: 0.5px;\n}\n.request-section-content-filter {\n  box-shadow: 0 -10px 0 10px var(--scalar-background-1);\n}\n.request-item:focus-within .request-meta-buttons {\n  opacity: 1;\n}\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/blocks/request-block/components/RequestBody.vue.d.ts

@@ -9,6 +9,8 @@ type __VLS_Props = {
     title: string;
     /** Selected environment */
     environment: XScalarEnvironment;
+    /** Selected anyOf/oneOf request-body variants keyed by schema path */
+    requestBodyCompositionSelection?: Record<string, number>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:formValue": (payload: Pick<{

package/dist/v2/blocks/request-block/components/RequestBody.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestBody.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestBody.vue"],"names":[],"mappings":"AAqRA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,8DAA8D,CAAA;AAgBrE,KAAK,WAAW,GAAG;IACjB,mBAAmB;IACnB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,WAAW,EAAE,kBAAkB,CAAA;CAChC,CAAC;AAsfF,QAAA,MAAM,YAAY;;;;;;;;;;;eAjf4B,MAAM;;;;;;;;;;;;;;;;;;eAAN,MAAM;;;;;;;kFAoflD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"RequestBody.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestBody.vue"],"names":[],"mappings":"AAkSA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,8DAA8D,CAAA;AAgBrE,KAAK,WAAW,GAAG;IACjB,mBAAmB;IACnB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,sEAAsE;IACtE,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAC;AAigBF,QAAA,MAAM,YAAY;;;;;;;;;;;eAtf4B,MAAM;;;;;;;;;;;;;;;;;;eAAN,MAAM;;;;;;;kFAyflD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/request-block/components/RequestBody.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import RequestBody_vue_vue_type_script_setup_true_lang_default from "./RequestBody.vue.script.js";
+/* empty css                          */
+//#region src/v2/blocks/request-block/components/RequestBody.vue
+var RequestBody_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestBody_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2f50e5b7"]]);
+//#endregion
+export { RequestBody_default as default };
+
+//# sourceMappingURL=RequestBody.vue.js.map

package/dist/v2/blocks/request-block/components/RequestBody.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestBody.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarListbox } from '@scalar/components'\nimport { CONTENT_TYPES } from '@scalar/helpers/consts/content-types'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport { resolve } from '@scalar/workspace-store/resolve'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  RequestBodyObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { useFileDialog } from '@/hooks'\nimport { getSelectedBodyContentType } from '@/v2/blocks/operation-block/helpers/get-selected-body-content-type'\nimport RequestBodyForm from '@/v2/blocks/request-block/components/RequestBodyForm.vue'\nimport { getFileName } from '@/v2/blocks/request-block/helpers/files'\nimport { getExampleFromBody } from '@/v2/blocks/request-block/helpers/get-request-body-example'\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nconst {\n  requestBody,\n  exampleKey,\n  environment,\n  requestBodyCompositionSelection,\n  title,\n} = defineProps<{\n  /** Request body */\n  requestBody?: RequestBodyObject\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Display title */\n  title: string\n  /** Selected environment */\n  environment: XScalarEnvironment\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection?: Record<string, number>\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:contentType', payload: { value: string }): void\n  /** We use this event to update raw values */\n  (\n    e: 'update:value',\n    payload: Pick<\n      ApiReferenceEvents['operation:update:requestBody:value'],\n      'payload' | 'contentType'\n    >,\n  ): void\n  /** We use this event when updating form data only */\n  (\n    e: 'update:formValue',\n    payload: Pick<\n      ApiReferenceEvents['operation:update:requestBody:formValue'],\n      'payload' | 'contentType'\n    >,\n  ): void\n}>()\n\n// Map a content type to a language for the code editor\nconst contentTypeToLanguageMap = {\n  'application/json': 'json',\n  'application/xml': 'xml',\n  'application/yaml': 'yaml',\n} as const\n\n/** Selected content type with default */\nconst selectedContentType = computed(\n  () => getSelectedBodyContentType(requestBody, exampleKey) ?? 'none',\n)\n\n/** Convert content types to options for the dropdown */\nconst contentTypeOptions = objectEntries(CONTENT_TYPES).map(([id, label]) => ({\n  id,\n  label,\n}))\n\nconst selectedContentTypeModel = computed<{ id: string; label: string }>({\n  get: () => {\n    const found = contentTypeOptions.find(\n      (it) => it.id === selectedContentType.value,\n    )\n    return found ?? contentTypeOptions.at(-1)!\n  },\n  set: (v) => {\n    emits('update:contentType', { value: v.id })\n  },\n})\n\nfunction handleFileUpload(callback: (file: File) => void) {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        callback(file)\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\n/** Dereferenced example */\nconst example = computed(\n  () =>\n    requestBody &&\n    getExampleFromBody(\n      requestBody,\n      selectedContentType.value,\n      exampleKey,\n      requestBodyCompositionSelection,\n    ),\n)\n\n/** Convert the example value to a string for the code editor */\nconst bodyValue = computed(() => {\n  if (!example.value) {\n    return ''\n  }\n\n  const value = example.value.value\n  if (typeof value === 'string') {\n    return value\n  }\n\n  return JSON.stringify(value, null, 2)\n})\n\n/** Resolved schema for the request body */\nconst bodySchema = computed<SchemaObject | undefined>(() => {\n  return resolve.schema(\n    requestBody?.content?.[selectedContentType.value]?.schema,\n  )\n})\n</script>\n<template>\n  <CollapsibleSection>\n    <template #title>{{ title }}</template>\n    <DataTable\n      :columns=\"['']\"\n      presentational>\n      <DataTableHeader\n        class=\"relative col-span-full flex h-8 cursor-pointer items-center justify-between border-r-0 !p-0\">\n        <ScalarListbox\n          v-model=\"selectedContentTypeModel\"\n          :options=\"contentTypeOptions\"\n          teleport>\n          <ScalarButton\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal\"\n            fullWidth\n            variant=\"ghost\">\n            <span>{{\n              CONTENT_TYPES[\n                selectedContentType as keyof typeof CONTENT_TYPES\n              ] ?? selectedContentType\n            }}</span>\n            <ScalarIcon\n              icon=\"ChevronDown\"\n              size=\"md\" />\n          </ScalarButton>\n        </ScalarListbox>\n      </DataTableHeader>\n      <DataTableRow>\n        <!-- No Body -->\n        <template v-if=\"selectedContentType === 'none'\">\n          <div\n            class=\"text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm\">\n            <span>No Body</span>\n          </div>\n        </template>\n\n        <!-- Binary File -->\n        <template\n          v-else-if=\"selectedContentType === 'application/octet-stream'\">\n          <div\n            class=\"flex items-center justify-center overflow-hidden border-t p-1.5\">\n            <template\n              v-if=\"\n                getFileName(unpackProxyObject(example?.value)) !== undefined\n              \">\n              <span\n                class=\"text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap\">\n                {{ getFileName(unpackProxyObject(example?.value)) }}\n              </span>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"\n                  emits('update:value', {\n                    payload: undefined,\n                    contentType: selectedContentType,\n                  })\n                \">\n                Delete\n              </ScalarButton>\n            </template>\n            <template v-else>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"\n                  () =>\n                    handleFileUpload((file) =>\n                      emits('update:value', {\n                        payload: file,\n                        contentType: selectedContentType,\n                      }),\n                    )\n                \">\n                <span>Select File</span>\n                <ScalarIcon\n                  class=\"ml-1\"\n                  icon=\"Upload\"\n                  size=\"xs\"\n                  thickness=\"2.5\" />\n              </ScalarButton>\n            </template>\n          </div>\n        </template>\n\n        <!-- Form Data / URL Encoded -->\n        <template\n          v-else-if=\"\n            selectedContentType === 'multipart/form-data' ||\n            selectedContentType === 'application/x-www-form-urlencoded'\n          \">\n          <RequestBodyForm\n            :bodySchema\n            :environment\n            :example\n            :selectedContentType\n            @update:formValue=\"\n              (payload) =>\n                emits('update:formValue', {\n                  payload,\n                  contentType: selectedContentType,\n                })\n            \" />\n        </template>\n\n        <!-- Code/Other -->\n        <template v-else>\n          <CodeInput\n            class=\"border-t px-3\"\n            content=\"\"\n            :environment=\"environment\"\n            :language=\"\n              contentTypeToLanguageMap[\n                selectedContentType as keyof typeof contentTypeToLanguageMap\n              ] ?? 'plaintext'\n            \"\n            lineNumbers\n            lint\n            :modelValue=\"bodyValue\"\n            @update:modelValue=\"\n              (value) =>\n                emits('update:value', {\n                  payload: value,\n                  contentType: selectedContentType,\n                })\n            \" />\n        </template>\n      </DataTableRow>\n    </DataTable>\n  </CollapsibleSection>\n</template>\n<style scoped>\n:deep(.cm-content) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":""}