@scalar/api-client 2.38.1 → 2.38.3

package/dist/RequestSection-Bx8UHW-k.js

@@ -0,0 +1,1582 @@
+import { r as useWorkspace } from "./store-DaPoVtIS.js";
+import { a as useLayout } from "./useSidebar-DLTwHDI-.js";
+import { n as usePluginManager } from "./plugins-B52hCIyZ.js";
+import { n as matchesDomain } from "./set-request-cookies-BJJhsU4A.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
+import { n as useFileDialog } from "./hooks-BvZxH4XB.js";
+import { t as CodeInput_default } from "./CodeInput-BN7uw3Bh.js";
+import { n as DataTableCell_default, r as DataTable_default, t as DataTableRow_default } from "./DataTableRow-c3XveEUO.js";
+import { n as DataTableCheckbox_default } from "./DataTable-BqbZKW3K.js";
+import { t as DataTableHeader_default } from "./DataTableHeader-DJVB0jCZ.js";
+import { t as ViewLayoutCollapse_default } from "./ViewLayoutCollapse-CiTb-Uml.js";
+import { t as SectionFilter_default } from "./SectionFilter-hrtoRLwj.js";
+import { t as ViewLayoutSection_default } from "./ViewLayoutSection-mUqKbQry.js";
+import { r as CodeSnippet_default } from "./CodeSnippet-D7Heh1nd.js";
+import { t as RequestAuth_default } from "./RequestAuth-BU6ubH-c.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { ScalarButton, ScalarCodeBlock, ScalarCombobox, ScalarErrorBoundary, ScalarIcon, ScalarListbox, ScalarPopover, ScalarTooltip } from "@scalar/components";
+import { RouterLink } from "vue-router";
+import { REGEX, canMethodHaveBody, isDefined } from "@scalar/oas-utils/helpers";
+import { requestExampleParametersSchema } from "@scalar/oas-utils/entities/spec";
+import { ScalarIconInfo, ScalarIconTrash, ScalarIconWarning } from "@scalar/icons";
+import { snippetz } from "@scalar/snippetz";
+//#region src/views/Request/libs/request.ts
+/**
+* Check if a RequestExampleParameter has any of the following properties:
+* - description
+* - type
+* - default
+* - format
+* - minimum
+* - maximum
+*/
+var hasItemProperties = (item) => Boolean(item.description || item.type || item.default || item.format || item.minimum || item.maximum);
+/**
+* Checks if the value of a RequestExampleParameter is the expected type or format
+* Returns an alert message if the value is not in the correct type or format, otherwise false
+*/
+var parameterIsInvalid = (item) => {
+	return computed(() => {
+		if (item.value === void 0 || item.value === "") return false;
+		if (item.type) {
+			if (item.type === "integer") {
+				const value = Number(item.value);
+				if (isNaN(value) || !Number.isInteger(value)) return "Value must be a whole number (e.g., 42)";
+				if (item.minimum !== void 0 && value < item.minimum) return `Value must be ${item.minimum} or greater`;
+				if (item.maximum !== void 0 && value > item.maximum) return `Value must be ${item.maximum} or less`;
+			}
+			if (item.type === "number") {
+				const value = Number(item.value);
+				if (isNaN(value)) return "Value must be a number (e.g., 42.5)";
+				if (item.minimum !== void 0 && value < item.minimum) return `Value must be ${item.minimum} or greater`;
+				if (item.maximum !== void 0 && value > item.maximum) return `Value must be ${item.maximum} or less`;
+			}
+			if (item.type === "string" && item.format) {
+				if (item.format === "date" && !/^\d{4}-\d{2}-\d{2}$/.test(item.value)) return "Please enter a valid date in YYYY-MM-DD format (e.g., 2024-03-20)";
+				if (item.format === "date-time" && !/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/.test(item.value)) return "Please enter a valid date and time in RFC 3339 format (e.g., 2024-03-20T13:45:30Z)";
+				if (item.format === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(item.value)) return "Please enter a valid email address (e.g., user@example.com)";
+				if (item.format === "uri" && !/^[a-zA-Z][a-zA-Z0-9+.-]*:.+$/.test(item.value)) return "Please enter a valid URI (e.g., https://example.com)";
+			}
+		}
+		return false;
+	});
+};
+//#endregion
+//#region src/views/Request/RequestSection/RequestTableTooltip.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = ["aria-label", "role"];
+var _hoisted_2$5 = { class: "w-content text-xxs text-c-1 grid min-w-48 gap-1.5 rounded px-1.5 pt-2 pb-1.5 leading-none" };
+var _hoisted_3$4 = {
+	key: 0,
+	class: "text-error-1"
+};
+var _hoisted_4$1 = {
+	key: 1,
+	class: "schema text-c-2 flex items-center"
+};
+var _hoisted_5$1 = { key: 0 };
+var _hoisted_6 = { key: 1 };
+var _hoisted_7 = { key: 2 };
+var _hoisted_8 = { key: 3 };
+var _hoisted_9 = { key: 4 };
+var _hoisted_10 = {
+	key: 2,
+	class: "text-sm leading-snug text-pretty",
+	style: { maxWidth: "16rem" }
+};
+//#endregion
+//#region src/views/Request/RequestSection/RequestTableTooltip.vue
+var RequestTableTooltip_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "RequestTableTooltip",
+	props: { item: {} },
+	setup(__props) {
+		const isInvalid = computed(() => !!parameterIsInvalid(__props.item).value);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarPopover), {
+				teleport: "",
+				offset: 4,
+				placement: "left"
+			}, {
+				popover: withCtx(() => [createElementVNode("div", _hoisted_2$5, [isInvalid.value ? (openBlock(), createElementBlock("div", _hoisted_3$4, toDisplayString(unref(parameterIsInvalid)(__props.item).value), 1)) : __props.item.type || __props.item.format || __props.item.minimum || __props.item.maximum || __props.item.default ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+					__props.item.type ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(__props.item.type), 1)) : createCommentVNode("", true),
+					__props.item.format ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.item.format), 1)) : createCommentVNode("", true),
+					__props.item.minimum ? (openBlock(), createElementBlock("span", _hoisted_7, "min: " + toDisplayString(__props.item.minimum), 1)) : createCommentVNode("", true),
+					__props.item.maximum ? (openBlock(), createElementBlock("span", _hoisted_8, "max: " + toDisplayString(__props.item.maximum), 1)) : createCommentVNode("", true),
+					__props.item.default ? (openBlock(), createElementBlock("span", _hoisted_9, "default: " + toDisplayString(__props.item.default), 1)) : createCommentVNode("", true)
+				])) : createCommentVNode("", true), __props.item.description && !isInvalid.value ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(__props.item.description), 1)) : createCommentVNode("", true)])]),
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					"aria-label": isInvalid.value ? "Input is invalid" : "More Information",
+					class: "text-c-2 hover:text-c-1 hover:bg-b-2 rounded p-1",
+					role: isInvalid.value ? "alert" : "none"
+				}, [isInvalid.value ? (openBlock(), createBlock(unref(ScalarIconWarning), {
+					key: 0,
+					class: "text-orange size-3.5 brightness-90 hover:brightness-75"
+				})) : (openBlock(), createBlock(unref(ScalarIconInfo), {
+					key: 1,
+					class: "text-c-2 hover:text-c-1 size-3.5"
+				}))], 8, _hoisted_1$5)]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-4df72868"]]);
+//#endregion
+//#region src/views/Request/RequestSection/RequestTable.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = { class: "text-c-2 filemask flex w-full max-w-[100%] items-end justify-end overflow-hidden p-1" };
+var _hoisted_2$4 = ["onClick"];
+var _hoisted_3$3 = {
+	key: 1,
+	class: "p-0.5"
+};
+//#endregion
+//#region src/views/Request/RequestSection/RequestTable.vue
+var RequestTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "RequestTable",
+	props: {
+		items: {},
+		hasCheckboxDisabled: {
+			type: Boolean,
+			default: false
+		},
+		showUploadButton: {
+			type: Boolean,
+			default: false
+		},
+		isGlobal: {
+			type: Boolean,
+			default: false
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		environment: {},
+		envVariables: {},
+		workspace: {},
+		invalidParams: {},
+		label: {}
+	},
+	emits: [
+		"updateRow",
+		"toggleRow",
+		"addRow",
+		"deleteRow",
+		"inputFocus",
+		"inputBlur",
+		"uploadFile",
+		"removeFile"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const columns = [
+			"",
+			"",
+			"36px"
+		];
+		const handleSelectVariable = (idx, field, value) => {
+			emit("updateRow", idx, field, value);
+		};
+		const handleFileUpload = (idx) => {
+			emit("uploadFile", idx);
+		};
+		const flattenValue = (item) => {
+			return Array.isArray(item.default) && item.default.length === 1 ? item.default[0] : item.default;
+		};
+		const showDeleteButton = (item) => {
+			return Boolean(item.key || item.value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(DataTable_default, {
+				class: "group/table flex-1",
+				columns
+			}, {
+				default: withCtx(() => [createVNode(DataTableRow_default, { class: "sr-only !block" }, {
+					default: withCtx(() => [
+						createVNode(DataTableHeader_default, null, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.label) + " Enabled", 1)]),
+							_: 1
+						}),
+						createVNode(DataTableHeader_default, null, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.label) + " Key", 1)]),
+							_: 1
+						}),
+						createVNode(DataTableHeader_default, null, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.label) + " Value", 1)]),
+							_: 1
+						})
+					]),
+					_: 1
+				}), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, idx) => {
+					return openBlock(), createBlock(DataTableRow_default, {
+						id: item.key,
+						key: idx,
+						class: normalizeClass({
+							alert: unref(parameterIsInvalid)(item).value,
+							error: __props.invalidParams && __props.invalidParams.has(item.key)
+						})
+					}, {
+						default: withCtx(() => [
+							__props.isGlobal ? (openBlock(), createBlock(unref(RouterLink), {
+								key: 0,
+								class: "text-c-2 flex items-center justify-center border-t !border-r",
+								to: item.route ?? {}
+							}, {
+								default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("span", { class: "sr-only" }, "Global", -1)), createVNode(unref(ScalarTooltip), {
+									content: "Global cookies are shared across the whole workspace.",
+									placement: "top"
+								}, {
+									default: withCtx(() => [createVNode(unref(ScalarIcon), {
+										tabindex: "0",
+										class: "text-c-1",
+										icon: "Globe",
+										size: "xs"
+									})]),
+									_: 1
+								})]),
+								_: 1
+							}, 8, ["to"])) : (openBlock(), createBlock(DataTableCheckbox_default, {
+								key: 1,
+								class: "!border-r",
+								disabled: props.hasCheckboxDisabled,
+								modelValue: item.enabled,
+								"onUpdate:modelValue": (v) => emit("toggleRow", idx, v)
+							}, null, 8, [
+								"disabled",
+								"modelValue",
+								"onUpdate:modelValue"
+							])),
+							createVNode(DataTableCell_default, null, {
+								default: withCtx(() => [createVNode(CodeInput_default, {
+									"aria-label": `${__props.label} Key`,
+									disableCloseBrackets: "",
+									disabled: props.isReadOnly,
+									disableEnter: "",
+									disableTabIndent: "",
+									lineWrapping: "",
+									envVariables: __props.envVariables,
+									environment: __props.environment,
+									modelValue: item.key,
+									placeholder: "Key",
+									required: Boolean(item.required),
+									workspace: __props.workspace,
+									onBlur: _cache[0] || (_cache[0] = ($event) => emit("inputBlur")),
+									onFocus: _cache[1] || (_cache[1] = ($event) => emit("inputFocus")),
+									onSelectVariable: (v) => handleSelectVariable(idx, "key", v),
+									"onUpdate:modelValue": (v) => emit("updateRow", idx, "key", v)
+								}, null, 8, [
+									"aria-label",
+									"disabled",
+									"envVariables",
+									"environment",
+									"modelValue",
+									"required",
+									"workspace",
+									"onSelectVariable",
+									"onUpdate:modelValue"
+								])]),
+								_: 2
+							}, 1024),
+							createVNode(DataTableCell_default, null, {
+								default: withCtx(() => [createVNode(CodeInput_default, {
+									"aria-label": `${__props.label} Value`,
+									class: normalizeClass(unref(hasItemProperties)(item) ? "pr-6 group-hover:pr-10 group-has-[.cm-focused]:pr-10" : "group-hover:pr-6 group-has-[.cm-focused]:pr-6"),
+									default: item.default,
+									disableCloseBrackets: "",
+									disabled: props.isReadOnly,
+									disableEnter: "",
+									disableTabIndent: "",
+									lineWrapping: "",
+									enum: item.enum ?? [],
+									envVariables: __props.envVariables,
+									environment: __props.environment,
+									examples: item.examples ?? [],
+									max: item.maximum,
+									min: item.minimum,
+									modelValue: item.value,
+									nullable: Boolean(item.nullable),
+									placeholder: "Value",
+									type: item.type,
+									workspace: __props.workspace,
+									onBlur: _cache[2] || (_cache[2] = ($event) => emit("inputBlur")),
+									onFocus: _cache[3] || (_cache[3] = ($event) => emit("inputFocus")),
+									onSelectVariable: (v) => handleSelectVariable(idx, "value", v),
+									"onUpdate:modelValue": (v) => emit("updateRow", idx, "value", v)
+								}, {
+									icon: withCtx(() => [showDeleteButton(item) && !item.required ? (openBlock(), createBlock(unref(ScalarButton), {
+										key: 0,
+										class: normalizeClass([{ "-mr-0.5": unref(hasItemProperties)(item) }, "text-c-2 hover:text-c-1 hover:bg-b-2 z-context hidden h-fit rounded p-1 group-hover:flex group-has-[.cm-focused]:flex"]),
+										size: "sm",
+										variant: "ghost",
+										onClick: ($event) => emit("deleteRow", idx)
+									}, {
+										default: withCtx(() => [createVNode(unref(ScalarIconTrash), { class: "size-3.5" })]),
+										_: 1
+									}, 8, ["class", "onClick"])) : createCommentVNode("", true), unref(hasItemProperties)(item) ? (openBlock(), createBlock(RequestTableTooltip_default, {
+										key: 1,
+										item: {
+											...item,
+											default: flattenValue(item)
+										}
+									}, null, 8, ["item"])) : createCommentVNode("", true)]),
+									_: 2
+								}, 1032, [
+									"aria-label",
+									"class",
+									"default",
+									"disabled",
+									"enum",
+									"envVariables",
+									"environment",
+									"examples",
+									"max",
+									"min",
+									"modelValue",
+									"nullable",
+									"type",
+									"workspace",
+									"onSelectVariable",
+									"onUpdate:modelValue"
+								])]),
+								_: 2
+							}, 1024),
+							__props.showUploadButton ? (openBlock(), createBlock(DataTableCell_default, {
+								key: 2,
+								class: "group/upload flex items-center justify-center whitespace-nowrap"
+							}, {
+								default: withCtx(() => [item.file ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", _hoisted_1$4, [createElementVNode("span", null, toDisplayString(item.file?.name), 1)]), createElementVNode("button", {
+									class: "bg-b-2 centered-x centered-y absolute hidden w-[calc(100%_-_8px)] rounded p-0.5 text-center text-xs font-medium group-hover/upload:block",
+									type: "button",
+									onClick: ($event) => emit("removeFile", idx)
+								}, " Delete ", 8, _hoisted_2$4)], 64)) : (openBlock(), createElementBlock("div", _hoisted_3$3, [createVNode(unref(ScalarButton), {
+									class: "bg-b-2 hover:bg-b-3 text-c-2 h-fit border-0 py-px shadow-none",
+									size: "sm",
+									variant: "outlined",
+									onClick: ($event) => handleFileUpload(idx)
+								}, {
+									default: withCtx(() => [_cache[5] || (_cache[5] = createElementVNode("span", null, "Upload File", -1)), createVNode(unref(ScalarIcon), {
+										class: "ml-1",
+										icon: "Upload",
+										size: "xs",
+										thickness: "2.5"
+									})]),
+									_: 1
+								}, 8, ["onClick"])]))]),
+								_: 2
+							}, 1024)) : createCommentVNode("", true)
+						]),
+						_: 2
+					}, 1032, ["id", "class"]);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-04661eb4"]]);
+//#endregion
+//#region src/views/Request/RequestSection/RequestBody.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = {
+	key: 0,
+	class: "text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm"
+};
+var _hoisted_2$3 = {
+	key: 1,
+	class: "flex items-center justify-center overflow-hidden border-t p-1.5"
+};
+var _hoisted_3$2 = { class: "text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap" };
+//#endregion
+//#region src/views/Request/RequestSection/RequestBody.vue
+var RequestBody_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "RequestBody",
+	props: {
+		example: {},
+		operation: {},
+		environment: {},
+		envVariables: {},
+		workspace: {},
+		title: {}
+	},
+	setup(__props) {
+		const { requestExampleMutators } = useWorkspace();
+		/** use-codemirror package to be updated accordingly */
+		const contentTypeToLanguageMap = {
+			json: "json",
+			xml: "xml",
+			yaml: "yaml",
+			edn: "edn",
+			other: "html"
+		};
+		const contentTypeOptions = Object.entries({
+			multipartForm: "Multipart Form",
+			formUrlEncoded: "Form URL Encoded",
+			binaryFile: "Binary File",
+			json: "JSON",
+			xml: "XML",
+			yaml: "YAML",
+			edn: "EDN",
+			other: "Other",
+			none: "None"
+		}).map(([id, label]) => ({
+			id,
+			label
+		}));
+		/** Match the activeBody to the contentTypeOptions */
+		const activeExampleContentType = computed(() => {
+			const { activeBody, formData, raw } = __props.example.body;
+			if (activeBody === "formData") return formData?.encoding === "urlencoded" ? "formUrlEncoded" : "multipartForm";
+			if (activeBody === "binary") return "binaryFile";
+			if (activeBody === "raw" && raw?.encoding) {
+				if (raw.encoding === "html" || raw.encoding === "text") return "other";
+				return raw.encoding;
+			}
+			return Object.keys(__props.operation.requestBody?.content || {})[0] || "none";
+		});
+		/** Selected ref from options above */
+		const selectedContentType = computed({
+			get: () => contentTypeOptions.find((opt) => opt.id === activeExampleContentType.value) ?? contentTypeOptions[contentTypeOptions.length - 1] ?? contentTypeOptions[0],
+			set: (opt) => {
+				if (opt?.id) updateActiveBody(opt.id);
+			}
+		});
+		const tableWrapperRef = ref(null);
+		const codeInputLanguage = computed(() => {
+			return contentTypeToLanguageMap[selectedContentType.value?.id] ?? "plaintext";
+		});
+		const deleteRow = (rowIdx) => {
+			const currentParams = formParams.value;
+			if (currentParams.length > rowIdx) {
+				const updatedParams = [...currentParams];
+				updatedParams.splice(rowIdx, 1);
+				requestExampleMutators.edit(__props.example.uid, "body.formData.value", updatedParams);
+			}
+		};
+		/** Update a field in a parameter row */
+		const updateRow = (rowIdx, field, value) => {
+			const currentParams = formParams.value;
+			if (currentParams.length > rowIdx) {
+				const updatedParams = [...currentParams];
+				updatedParams[rowIdx] = {
+					...updatedParams[rowIdx],
+					value: updatedParams[rowIdx]?.value || "",
+					key: updatedParams[rowIdx]?.key || "",
+					enabled: updatedParams[rowIdx]?.enabled ?? false,
+					[field]: value || ""
+				};
+				/** enable row key or value is filled */
+				if (updatedParams[rowIdx]?.key !== "" || updatedParams[rowIdx]?.value !== "") updatedParams[rowIdx].enabled = true;
+				/** check key and value input state */
+				if (updatedParams[rowIdx]?.key === "" && updatedParams[rowIdx]?.value === "")
+ /** remove if empty */
+				updatedParams.splice(rowIdx, 1);
+				requestExampleMutators.edit(__props.example.uid, "body.formData.value", updatedParams);
+			} else {
+				/** if there is no row at the index, add a new one */
+				const payload = [requestExampleParametersSchema.parse({ [field]: value })];
+				requestExampleMutators.edit(__props.example.uid, "body.formData.value", payload);
+				/** focus the new row */
+				nextTick(() => {
+					if (!tableWrapperRef.value) return;
+					tableWrapperRef.value.querySelectorAll("input")[field === "key" ? 0 : 1]?.focus();
+				});
+			}
+			if (rowIdx === currentParams.length - 1) addRow();
+		};
+		const formParams = computed(() => __props.example.body.formData?.value ?? []);
+		/** ensure one empty row by default */
+		const defaultRow = () => {
+			const lastParam = formParams.value[formParams.value.length - 1];
+			if (!lastParam || lastParam.key !== "" || lastParam.value !== "") addRow();
+		};
+		/** Add a new row to a given parameter list */
+		const addRow = () => {
+			/** Create a new parameter instance with 'enabled' set to false */
+			const newParam = requestExampleParametersSchema.parse({ enabled: false });
+			const newParams = [...formParams.value, newParam];
+			if (__props.example.body.formData) requestExampleMutators.edit(__props.example.uid, "body.formData.value", newParams);
+			else requestExampleMutators.edit(__props.example.uid, "body.formData", {
+				value: newParams,
+				encoding: "form-data"
+			});
+		};
+		/** Enable and disables the row */
+		const toggleRow = (rowIdx, enabled) => {
+			const currentParams = formParams.value;
+			if (currentParams.length > rowIdx) {
+				const updatedParams = [...currentParams];
+				if (updatedParams[rowIdx]) updatedParams[rowIdx].enabled = enabled;
+				requestExampleMutators.edit(__props.example.uid, "body.formData.value", updatedParams);
+			}
+		};
+		const updateRequestBody = (value) => requestExampleMutators.edit(__props.example.uid, "body.raw.value", value);
+		/** Take the select option and return bodyType with encoding and header */
+		const getBodyType = (type) => {
+			if (type === "multipartForm") return {
+				activeBody: "formData",
+				encoding: "form-data",
+				header: "multipart/form-data"
+			};
+			if (type === "formUrlEncoded") return {
+				activeBody: "formData",
+				encoding: "urlencoded",
+				header: "application/x-www-form-urlencoded"
+			};
+			if (type === "binaryFile") return {
+				activeBody: "binary",
+				encoding: void 0,
+				header: "application/octet-stream"
+			};
+			if (type === "json") return {
+				activeBody: "raw",
+				encoding: "json",
+				header: Object.keys(__props.operation.requestBody?.content ?? {}).find((t) => t.includes("json") || t.endsWith("+json")) || "application/json"
+			};
+			if (type === "xml") return {
+				activeBody: "raw",
+				encoding: "xml",
+				header: "application/xml"
+			};
+			if (type === "yaml") return {
+				activeBody: "raw",
+				encoding: "yaml",
+				header: "application/yaml"
+			};
+			if (type === "edn") return {
+				activeBody: "raw",
+				encoding: "edn",
+				header: "application/edn"
+			};
+			if (type === "other") {
+				const textContentType = Object.keys(__props.operation.requestBody?.content ?? {}).find((t) => t.startsWith("text/"));
+				return {
+					activeBody: "raw",
+					encoding: textContentType ? "text" : "html",
+					header: textContentType ?? "application/html"
+				};
+			}
+			return {
+				activeBody: "raw",
+				encoding: void 0,
+				header: void 0
+			};
+		};
+		/** Set active body AND encoding */
+		const updateActiveBody = (type) => {
+			const { activeBody, encoding, header } = getBodyType(type);
+			requestExampleMutators.edit(__props.example.uid, "body.activeBody", activeBody);
+			if (encoding && activeBody === "raw") requestExampleMutators.edit(__props.example.uid, "body.raw", {
+				encoding,
+				value: __props.example.body.raw?.value ?? ""
+			});
+			else if (encoding && activeBody === "formData") requestExampleMutators.edit(__props.example.uid, "body.formData", {
+				encoding,
+				value: __props.example.body.formData?.value ?? []
+			});
+			else if (!encoding && activeBody !== "binary") {
+				const { raw: deleteMe, ...body } = __props.example.body;
+				requestExampleMutators.edit(__props.example.uid, "body", body);
+			}
+			const headers = [...__props.example.parameters.headers];
+			const contentTypeIdx = headers.findIndex((h) => h.key.toLowerCase() === "content-type");
+			if (contentTypeIdx >= 0) {
+				if (header && headers[contentTypeIdx]) headers[contentTypeIdx].value = header;
+				else if (headers[contentTypeIdx] && (activeBody !== "raw" || type === "none")) headers.splice(contentTypeIdx, 1);
+			} else if (header) {
+				const lastHeader = headers[headers.length - 1];
+				if (lastHeader && lastHeader.key === "" && lastHeader.value === "") headers.splice(headers.length - 1, 0, {
+					key: "Content-Type",
+					value: header,
+					enabled: true
+				});
+				else headers.push({
+					key: "Content-Type",
+					value: header,
+					enabled: true
+				});
+			}
+			requestExampleMutators.edit(__props.example.uid, "parameters.headers", headers);
+		};
+		const handleFileUploadFormData = (rowIdx) => {
+			const { open } = useFileDialog({
+				onChange: (files) => {
+					const file = files?.[0];
+					if (file) {
+						const updatedParams = [...formParams.value];
+						updatedParams[rowIdx] = {
+							...updatedParams[rowIdx],
+							file,
+							value: updatedParams[rowIdx]?.value || file.name,
+							key: updatedParams[rowIdx]?.key || file.name,
+							enabled: true
+						};
+						requestExampleMutators.edit(__props.example.uid, "body.formData.value", updatedParams);
+						defaultRow();
+					}
+				},
+				multiple: false,
+				accept: "*/*"
+			});
+			open();
+		};
+		const removeBinaryFile = () => requestExampleMutators.edit(__props.example.uid, "body.binary", void 0);
+		function handleRemoveFileFormData(rowIdx) {
+			const currentParams = formParams.value;
+			const updatedParams = [...currentParams];
+			const param = currentParams[rowIdx];
+			const file = param?.file;
+			if (currentParams.length > 1 && (!param?.key && !param?.value || file && param?.key === file.name && param?.value === file.name)) updatedParams.splice(rowIdx, 1);
+			else if (updatedParams[rowIdx]) updatedParams[rowIdx].file = void 0;
+			requestExampleMutators.edit(__props.example.uid, "body.formData.value", updatedParams);
+		}
+		function handleFileUpload() {
+			const { open } = useFileDialog({
+				onChange: (files) => {
+					const file = files?.[0];
+					if (file) requestExampleMutators.edit(__props.example.uid, "body.binary", file);
+				},
+				multiple: false,
+				accept: "*/*"
+			});
+			open();
+		}
+		watch(selectedContentType, (val) => {
+			if (["multipartForm", "formUrlEncoded"].includes(val?.id || "")) defaultRow();
+		}, { immediate: true });
+		watch(() => __props.example.uid, () => {
+			__props.operation.method && canMethodHaveBody(__props.operation.method) && updateActiveBody(activeExampleContentType.value);
+			if (["multipartForm", "formUrlEncoded"].includes(activeExampleContentType.value)) defaultRow();
+		}, { immediate: true });
+		const exampleOptions = computed(() => {
+			const contentType = selectedContentType.value?.id;
+			const { header } = getBodyType(contentType);
+			const content = __props.operation.requestBody?.content || {};
+			const examples = header ? content[header]?.examples || {} : {};
+			return Object.entries(examples).map(([key, value]) => ({
+				id: key,
+				label: key,
+				value
+			}));
+		});
+		const selectedExample = computed({
+			get: () => {
+				const rawValue = __props.example.body.raw?.value ?? "{}";
+				try {
+					const parsedValue = JSON.parse(rawValue);
+					return exampleOptions.value.find((e) => {
+						const exampleValue = e.value;
+						return JSON.stringify(exampleValue.value) === JSON.stringify(parsedValue);
+					}) ?? exampleOptions.value[0];
+				} catch {
+					return exampleOptions.value[0];
+				}
+			},
+			set: (opt) => {
+				if (opt?.id) {
+					const exampleOption = exampleOptions.value.find((e) => e.id === opt.id);
+					if (exampleOption) {
+						const exampleValue = exampleOption.value;
+						updateRequestBody(JSON.stringify(exampleValue.value, null, 2));
+					}
+				}
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayoutCollapse_default, null, {
+				title: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
+				default: withCtx(() => [createVNode(DataTable_default, {
+					columns: [""],
+					presentational: ""
+				}, {
+					default: withCtx(() => [
+						createVNode(DataTableRow_default, null, {
+							default: withCtx(() => [createVNode(DataTableHeader_default, { class: "relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0" }, {
+								default: withCtx(() => [createVNode(unref(ScalarListbox), {
+									modelValue: selectedContentType.value,
+									"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedContentType.value = $event),
+									options: unref(contentTypeOptions),
+									teleport: ""
+								}, {
+									default: withCtx(() => [createVNode(unref(ScalarButton), {
+										class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal",
+										variant: "ghost"
+									}, {
+										default: withCtx(() => [createElementVNode("span", null, toDisplayString(selectedContentType.value?.label), 1), createVNode(unref(ScalarIcon), {
+											icon: "ChevronDown",
+											size: "md"
+										})]),
+										_: 1
+									})]),
+									_: 1
+								}, 8, ["modelValue", "options"]), exampleOptions.value.length > 0 ? (openBlock(), createBlock(unref(ScalarListbox), {
+									key: 0,
+									modelValue: selectedExample.value,
+									"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedExample.value = $event),
+									options: exampleOptions.value,
+									side: "left",
+									teleport: ""
+								}, {
+									default: withCtx(() => [createVNode(unref(ScalarButton), {
+										class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-2 font-normal",
+										fullWidth: "",
+										variant: "ghost"
+									}, {
+										default: withCtx(() => [createElementVNode("span", null, toDisplayString(selectedExample.value?.label), 1), createVNode(unref(ScalarIcon), {
+											icon: "ChevronDown",
+											size: "md"
+										})]),
+										_: 1
+									})]),
+									_: 1
+								}, 8, ["modelValue", "options"])) : createCommentVNode("", true)]),
+								_: 1
+							})]),
+							_: 1
+						}),
+						createVNode(DataTableRow_default, null, {
+							default: withCtx(() => [selectedContentType.value?.id === "none" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [..._cache[2] || (_cache[2] = [createElementVNode("span", null, "No Body", -1)])])) : selectedContentType.value?.id === "binaryFile" ? (openBlock(), createElementBlock("div", _hoisted_2$3, [__props.example.body.binary ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_3$2, toDisplayString(__props.example.body.binary.name), 1), createVNode(unref(ScalarButton), {
+								class: "bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none",
+								size: "sm",
+								variant: "outlined",
+								onClick: removeBinaryFile
+							}, {
+								default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Delete ", -1)])]),
+								_: 1
+							})], 64)) : (openBlock(), createBlock(unref(ScalarButton), {
+								key: 1,
+								class: "bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none",
+								size: "sm",
+								variant: "outlined",
+								onClick: handleFileUpload
+							}, {
+								default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("span", null, "Upload File", -1)), createVNode(unref(ScalarIcon), {
+									class: "ml-1",
+									icon: "Upload",
+									size: "xs",
+									thickness: "2.5"
+								})]),
+								_: 1
+							}))])) : selectedContentType.value?.id == "multipartForm" ? (openBlock(), createBlock(RequestTable_default, {
+								key: 2,
+								ref_key: "tableWrapperRef",
+								ref: tableWrapperRef,
+								class: "!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none",
+								columns: [
+									"32px",
+									"",
+									"",
+									"104px"
+								],
+								envVariables: __props.envVariables,
+								environment: __props.environment,
+								items: formParams.value,
+								showUploadButton: "",
+								workspace: __props.workspace,
+								onDeleteRow: deleteRow,
+								onRemoveFile: handleRemoveFileFormData,
+								onToggleRow: toggleRow,
+								onUpdateRow: updateRow,
+								onUploadFile: handleFileUploadFormData
+							}, null, 8, [
+								"envVariables",
+								"environment",
+								"items",
+								"workspace"
+							])) : selectedContentType.value?.id == "formUrlEncoded" ? (openBlock(), createBlock(RequestTable_default, {
+								key: 3,
+								ref_key: "tableWrapperRef",
+								ref: tableWrapperRef,
+								class: "!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none",
+								columns: [
+									"32px",
+									"",
+									"",
+									"104px"
+								],
+								envVariables: __props.envVariables,
+								environment: __props.environment,
+								items: formParams.value,
+								showUploadButton: "",
+								workspace: __props.workspace,
+								onDeleteRow: deleteRow,
+								onRemoveFile: handleRemoveFileFormData,
+								onToggleRow: toggleRow,
+								onUpdateRow: updateRow,
+								onUploadFile: handleFileUploadFormData
+							}, null, 8, [
+								"envVariables",
+								"environment",
+								"items",
+								"workspace"
+							])) : (openBlock(), createBlock(CodeInput_default, {
+								key: 4,
+								class: "border-t px-3",
+								content: "",
+								envVariables: __props.envVariables,
+								environment: __props.environment,
+								language: codeInputLanguage.value,
+								lineNumbers: "",
+								lint: "",
+								modelValue: __props.example.body?.raw?.value ?? "",
+								workspace: __props.workspace,
+								"onUpdate:modelValue": updateRequestBody
+							}, null, 8, [
+								"envVariables",
+								"environment",
+								"language",
+								"modelValue",
+								"workspace"
+							]))]),
+							_: 1
+						}),
+						createVNode(DataTableRow_default)
+					]),
+					_: 1
+				})]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-9aa4b63a"]]);
+//#endregion
+//#region src/views/Request/RequestSection/RequestParams.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100" };
+var _hoisted_2$2 = { class: "sr-only" };
+//#endregion
+//#region src/views/Request/RequestSection/RequestParams.vue
+var RequestParams_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestParams",
+	props: {
+		example: {},
+		environment: {},
+		envVariables: {},
+		workspace: {},
+		title: {},
+		label: {},
+		paramKey: {},
+		readOnlyEntries: { default: () => [] },
+		invalidParams: {}
+	},
+	setup(__props) {
+		const { requestExampleMutators } = useWorkspace();
+		const params = computed(() => __props.example.parameters[__props.paramKey] ?? []);
+		onMounted(() => {
+			nextTick(() => {
+				defaultRow();
+			});
+		});
+		/** Add a new row to a given parameter list */
+		const addRow = () => {
+			/** Create a new parameter instance with 'enabled' set to false */
+			const newParam = requestExampleParametersSchema.parse({ enabled: false });
+			const newParams = [...params.value, newParam];
+			requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}`, newParams);
+		};
+		const tableWrapperRef = ref(null);
+		/** Update a field in a parameter row */
+		const updateRow = (rowIdx, field, value) => {
+			const currentParams = params.value;
+			if (currentParams.length > rowIdx) {
+				const updatedParams = [...currentParams];
+				if (!updatedParams[rowIdx]) return;
+				updatedParams[rowIdx] = {
+					...updatedParams[rowIdx],
+					[field]: value
+				};
+				/** enable row key or value is filled */
+				if (updatedParams[rowIdx].key !== "" || updatedParams[rowIdx].value !== "") updatedParams[rowIdx].enabled = true;
+				/** check key and value input state */
+				if (updatedParams[rowIdx].key === "" && updatedParams[rowIdx].value === "")
+ /** remove if empty */
+				updatedParams.splice(rowIdx, 1);
+				requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}`, updatedParams);
+			} else {
+				/** if there is no row at the index, add a new one */
+				const payload = [requestExampleParametersSchema.parse({ [field]: value })];
+				requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}`, payload);
+				/** focus the new row */
+				nextTick(() => {
+					if (!tableWrapperRef.value) return;
+					tableWrapperRef.value.querySelectorAll("input")[field === "key" ? 0 : 1]?.focus();
+				});
+			}
+			if (rowIdx === currentParams.length - 1) addRow();
+		};
+		/** Toggle a parameter row on or off */
+		const toggleRow = (rowIdx, enabled) => requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}.${rowIdx}.enabled`, enabled);
+		const deleteAllRows = () => {
+			const exampleParams = params.value.filter((param) => param.required);
+			requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}`, exampleParams);
+			/** ensure one empty row after deleting all rows */
+			nextTick(() => addRow());
+		};
+		const deleteRow = (rowIdx) => {
+			const currentParams = params.value;
+			if (currentParams.length > rowIdx) {
+				const updatedParams = [...currentParams];
+				updatedParams.splice(rowIdx, 1);
+				requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}`, updatedParams);
+			}
+		};
+		function defaultRow() {
+			/** ensure one empty row by default */
+			if (params.value.length === 0) addRow();
+			else if (params.value.length >= 1) {
+				/** ensure we always have a trailing empty row */
+				const lastParam = params.value[params.value.length - 1];
+				if (lastParam && lastParam.key !== "" && lastParam.value !== "") addRow();
+			}
+		}
+		const itemCount = computed(() => params.value.filter((param) => param.key || param.value).length);
+		const showTooltip = computed(() => params.value.length > 1);
+		watch(() => __props.example, (newVal, oldVal) => {
+			if (newVal !== oldVal) defaultRow();
+		}, { immediate: true });
+		const hasReadOnlyEntries = computed(() => (__props.readOnlyEntries ?? []).length > 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayoutCollapse_default, {
+				class: "group/params",
+				itemCount: itemCount.value
+			}, {
+				title: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
+				actions: withCtx(() => [createElementVNode("div", _hoisted_1$2, [showTooltip.value ? (openBlock(), createBlock(unref(ScalarTooltip), {
+					key: 0,
+					content: "Clear optional parameters",
+					placement: "left"
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarButton), {
+						class: "pr-0.75 pl-1 transition-none",
+						size: "sm",
+						variant: "ghost",
+						onClick: withModifiers(deleteAllRows, ["stop"])
+					}, {
+						default: withCtx(() => [_cache[0] || (_cache[0] = createTextVNode(" Clear ", -1)), createElementVNode("span", _hoisted_2$2, "All " + toDisplayString(__props.title), 1)]),
+						_: 1
+					})]),
+					_: 1
+				})) : createCommentVNode("", true)])]),
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "tableWrapperRef",
+					ref: tableWrapperRef
+				}, [hasReadOnlyEntries.value ? (openBlock(), createBlock(RequestTable_default, {
+					key: 0,
+					class: normalizeClass(["flex-1", { "bg-c-3/5": hasReadOnlyEntries.value }]),
+					columns: [
+						"32px",
+						"",
+						""
+					],
+					envVariables: __props.envVariables,
+					environment: __props.environment,
+					invalidParams: __props.invalidParams,
+					isGlobal: "",
+					isReadOnly: "",
+					items: __props.readOnlyEntries,
+					label: __props.label,
+					workspace: __props.workspace
+				}, null, 8, [
+					"class",
+					"envVariables",
+					"environment",
+					"invalidParams",
+					"items",
+					"label",
+					"workspace"
+				])) : createCommentVNode("", true), createVNode(RequestTable_default, {
+					class: "flex-1",
+					columns: [
+						"32px",
+						"",
+						""
+					],
+					envVariables: __props.envVariables,
+					environment: __props.environment,
+					invalidParams: __props.invalidParams,
+					items: params.value,
+					label: __props.label,
+					workspace: __props.workspace,
+					onToggleRow: toggleRow,
+					onUpdateRow: updateRow,
+					onDeleteRow: deleteRow
+				}, null, 8, [
+					"envVariables",
+					"environment",
+					"invalidParams",
+					"items",
+					"label",
+					"workspace"
+				])], 512)]),
+				_: 1
+			}, 8, ["itemCount"]);
+		};
+	}
+});
+//#endregion
+//#region src/views/Request/RequestSection/RequestPathParams.vue
+var RequestPathParams_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestPathParams",
+	props: {
+		example: {},
+		operation: {},
+		paramKey: {},
+		title: {},
+		environment: {},
+		envVariables: {},
+		workspace: {},
+		invalidParams: {}
+	},
+	setup(__props) {
+		const { requestMutators, requestExampleMutators } = useWorkspace();
+		const params = computed(() => __props.example.parameters[__props.paramKey].map((param) => ({
+			...param,
+			enum: param.enum
+		})));
+		/** Update a field in a parameter row */
+		const updateRow = (rowIdx, field, value) => {
+			const parameters = __props.example.parameters[__props.paramKey];
+			const oldKey = parameters[rowIdx]?.key;
+			if (!oldKey) return;
+			/** Change variable in path as well */
+			if (field === "key") {
+				if (parameters[rowIdx]?.required)
+ /** Prevent updating the key of a required item */
+				return;
+				if (!value) {
+					/** Remove parameter if path params table key is empty */
+					parameters.splice(rowIdx, 1);
+					const regx = new RegExp(`/:${encodeURIComponent(oldKey)}(?=[/?#]|$)`, "g");
+					const newPath = __props.operation.path.replace(regx, "");
+					requestMutators.edit(__props.operation.uid, "path", newPath);
+				} else {
+					/** Update URL with path params table key */
+					const encodedOldKey = encodeURIComponent(oldKey);
+					const encodedNewKey = encodeURIComponent(value);
+					const regx = new RegExp(`(?<=/):${encodedOldKey}(?=[/?#]|$)`, "g");
+					const newPath = __props.operation.path.replace(regx, `:${encodedNewKey}`);
+					requestMutators.edit(__props.operation.uid, "path", newPath);
+				}
+			}
+			requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}.${rowIdx}.${field}`, value);
+		};
+		const deleteRow = (rowIdx) => {
+			const currentParams = params.value;
+			if (currentParams.length > rowIdx) {
+				const updatedParams = [...currentParams];
+				updatedParams.splice(rowIdx, 1);
+				requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}`, updatedParams);
+			}
+		};
+		const setPathVariable = (url) => {
+			const pathVariables = url.match(REGEX.PATH)?.map((v) => v.slice(1, -1)) || [];
+			const parameters = __props.example.parameters[__props.paramKey];
+			const paramMap = new Map(parameters.map((param) => [param.key, param]));
+			const updatedParameters = pathVariables.map((key) => paramMap.get(key) || {
+				key,
+				value: "",
+				enabled: true
+			});
+			parameters.forEach((param) => {
+				/** prevent removing required parameters or with a value */
+				if (!pathVariables.includes(param.key) && (param.value || param.required)) updatedParameters.push(param);
+			});
+			parameters.splice(0, parameters.length, ...updatedParameters);
+			requestExampleMutators.edit(__props.example.uid, `parameters.${__props.paramKey}`, parameters);
+		};
+		const handlePathVariableUpdate = (url) => {
+			if (url) setPathVariable(url);
+		};
+		watch(() => __props.operation.path, (newURL) => {
+			if (newURL) handlePathVariableUpdate(newURL);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayoutCollapse_default, { itemCount: params.value.length }, {
+				title: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
+				default: withCtx(() => [params.value.length ? (openBlock(), createBlock(RequestTable_default, {
+					key: 0,
+					class: "flex-1",
+					columns: [
+						"32px",
+						"",
+						""
+					],
+					envVariables: __props.envVariables,
+					environment: __props.environment,
+					invalidParams: __props.invalidParams,
+					items: params.value,
+					workspace: __props.workspace,
+					onUpdateRow: updateRow,
+					onDeleteRow: deleteRow
+				}, null, 8, [
+					"envVariables",
+					"environment",
+					"invalidParams",
+					"items",
+					"workspace"
+				])) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, ["itemCount"]);
+		};
+	}
+});
+//#endregion
+//#region src/views/Request/RequestSection/RequestCodeExample.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "w-full" };
+var _hoisted_2$1 = { class: "flex flex-1" };
+var _hoisted_3$1 = { class: "bg-b-1 flex items-center justify-center overflow-hidden border-t" };
+//#endregion
+//#region src/views/Request/RequestSection/RequestCodeExample.vue
+var RequestCodeExample_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "RequestCodeExample",
+	props: {
+		collection: {},
+		example: {},
+		operation: {},
+		server: {},
+		workspace: {},
+		environment: {}
+	},
+	setup(__props) {
+		const { securitySchemes, workspaceMutators } = useWorkspace();
+		const localSelectedClient = computed(() => {
+			if (localSelectedClientState.value.targetKey === "custom") {
+				if (codeSamples.value?.some((sample) => sample.lang === localSelectedClientState.value.clientKey)) return localSelectedClientState.value;
+			}
+			return {
+				targetKey: __props.workspace.selectedHttpClient?.targetKey ?? "js",
+				clientKey: __props.workspace.selectedHttpClient?.clientKey ?? "fetch"
+			};
+		});
+		const codeSamples = computed(() => __props.operation["x-codeSamples"] || __props.operation["x-code-samples"] || __props.operation["x-custom-examples"]);
+		const localSelectedClientState = ref(codeSamples.value?.length ? {
+			targetKey: "custom",
+			clientKey: codeSamples.value[0]?.lang
+		} : {
+			targetKey: __props.workspace.selectedHttpClient?.targetKey ?? "js",
+			clientKey: __props.workspace.selectedHttpClient?.clientKey ?? "fetch"
+		});
+		/**
+		* Returns selected security schemes for the request
+		*/
+		const selectedSecuritySchemes = computed(() => {
+			return (__props.operation.selectedSecuritySchemeUids || __props.collection.selectedSecuritySchemeUids || []).flat().map((uid) => securitySchemes[uid]).filter((scheme) => Boolean(scheme));
+		});
+		/**
+		* Group plugins by target/language to show in a dropdown, also build a dictionary in the same loop
+		**/
+		const snippets = computed(() => {
+			const dict = {};
+			const builtInOptions = snippetz().clients().map((group) => ({
+				label: group.title,
+				options: group.clients.map((plugin) => {
+					dict[`${group.key},${plugin.client}`] = plugin.title;
+					return {
+						id: `${group.key},${plugin.client}`,
+						label: plugin.title
+					};
+				})
+			}));
+			const customExamples = (__props.operation["x-codeSamples"] || __props.operation["x-code-samples"] || __props.operation["x-custom-examples"] || []).map((sample) => ({
+				id: `custom,${sample.lang}`,
+				label: sample.label || sample.lang
+			}));
+			const options = customExamples.length > 0 ? [{
+				id: "customExamples",
+				label: "Code Examples",
+				options: customExamples.map((customExample) => ({
+					id: customExample.id,
+					label: customExample.label ?? customExample.id
+				}))
+			}, ...builtInOptions] : builtInOptions;
+			customExamples.forEach((sample) => {
+				dict[sample.id] = sample.label ?? sample.id;
+			});
+			return {
+				options,
+				dict
+			};
+		});
+		/** The currently selected plugin */
+		const selectedPlugin = computed(() => {
+			const client = localSelectedClient.value;
+			if (client.targetKey === "custom") {
+				const id = `custom,${client.clientKey}`;
+				return {
+					id,
+					label: snippets.value.dict[id] ?? "Unknown"
+				};
+			}
+			const id = `${client.targetKey},${client.clientKey}`;
+			return {
+				id,
+				label: snippets.value.dict[id] ?? "Unknown"
+			};
+		});
+		/** The currently selected target */
+		const selectedTarget = computed(() => localSelectedClient.value.targetKey);
+		/** The currently selected client */
+		const selectedClient = computed(() => localSelectedClient.value.clientKey);
+		/** Update the selection when a new client is picked */
+		const selectClient = (value) => {
+			if (!value) return;
+			const { id } = value;
+			const [target, client] = id.split(",");
+			if (!target || !client) return;
+			localSelectedClientState.value = {
+				targetKey: target,
+				clientKey: client
+			};
+			if (target !== "custom") workspaceMutators.edit(__props.workspace.uid, "selectedHttpClient", {
+				targetKey: target,
+				clientKey: client
+			});
+		};
+		/** Get the code sample content for a custom example */
+		const customCodeContent = computed(() => {
+			if (!selectedPlugin.value.id.startsWith("custom,")) return;
+			const lang = selectedPlugin.value.id.split(",")[1];
+			return (codeSamples.value?.find((s) => s.lang === lang))?.source;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode(ViewLayoutCollapse_default, {
+				class: "group/preview w-full border-b-0",
+				defaultOpen: false
+			}, {
+				title: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Code Snippet", -1)])]),
+				actions: withCtx(() => [createElementVNode("div", _hoisted_2$1, [createVNode(unref(ScalarCombobox), {
+					modelValue: selectedPlugin.value,
+					options: snippets.value.options,
+					placement: "bottom-end",
+					"onUpdate:modelValue": selectClient
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarButton), {
+						class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-1.25 py-0.75 font-normal",
+						variant: "ghost"
+					}, {
+						default: withCtx(() => [createElementVNode("span", null, toDisplayString(selectedPlugin.value?.label), 1), createVNode(unref(ScalarIcon), {
+							icon: "ChevronDown",
+							size: "md"
+						})]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue", "options"])])]),
+				default: withCtx(() => [createVNode(DataTable_default, {
+					columns: [""],
+					presentational: ""
+				}, {
+					default: withCtx(() => [createVNode(DataTableRow_default, null, {
+						default: withCtx(() => [createElementVNode("div", _hoisted_3$1, [customCodeContent.value ? (openBlock(), createBlock(unref(ScalarCodeBlock), {
+							key: 0,
+							content: customCodeContent.value,
+							lang: selectedPlugin.value.id.split(",")[1] ?? "plaintext"
+						}, null, 8, ["content", "lang"])) : (openBlock(), createBlock(unref(CodeSnippet_default), {
+							key: 1,
+							client: selectedClient.value,
+							example: __props.example,
+							operation: __props.operation,
+							securitySchemes: selectedSecuritySchemes.value,
+							server: __props.server,
+							target: selectedTarget.value,
+							environment: __props.environment
+						}, null, 8, [
+							"client",
+							"example",
+							"operation",
+							"securitySchemes",
+							"server",
+							"target",
+							"environment"
+						]))])]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]);
+		};
+	}
+}), [["__scopeId", "data-v-2891f052"]]);
+//#endregion
+//#region src/views/Request/RequestSection/RequestSection.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"];
+//#endregion
+//#region src/views/Request/RequestSection/RequestSection.vue
+var RequestSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "RequestSection",
+	props: {
+		collection: {},
+		environment: {},
+		envVariables: {},
+		example: {},
+		invalidParams: {},
+		operation: {},
+		selectedSecuritySchemeUids: {},
+		server: {},
+		workspace: {}
+	},
+	setup(__props) {
+		const requestSections = [
+			"Auth",
+			"Path Parameters",
+			"Cookies",
+			"Headers",
+			"Query",
+			"Body"
+		];
+		const { requestMutators, cookies, securitySchemes } = useWorkspace();
+		const { layout } = useLayout();
+		const filters = computed(() => {
+			const allSections = new Set(["All", ...requestSections]);
+			if (!__props.example.parameters.path.length) allSections.delete("Path Parameters");
+			if (!canMethodHaveBody(__props.operation.method ?? "get")) allSections.delete("Body");
+			if (isAuthHidden.value) allSections.delete("Auth");
+			return [...allSections];
+		});
+		/** A list of section ids */
+		const filterIds = computed(() => Object.fromEntries(filters.value.map((section) => [section, useId()])));
+		const isAuthHidden = computed(() => layout === "modal" && !__props.operation.security && !Object.keys(securitySchemes ?? {}).length);
+		const selectedFilter = ref("All");
+		watch(() => __props.operation, (newOperation) => {
+			if (selectedFilter.value === "Body" && newOperation && !canMethodHaveBody(newOperation.method)) selectedFilter.value = "All";
+		});
+		const updateRequestNameHandler = (event) => {
+			const target = event.target;
+			requestMutators.edit(__props.operation.uid, "summary", target.value);
+		};
+		/**
+		* Add the global cookies as static entries to the cookies section
+		*/
+		const activeWorkspaceCookies = computed(() => (__props.workspace.cookies ?? []).map((uid) => cookies[uid]).filter(isDefined).filter((cookie) => cookie.name).filter((cookie) => matchesDomain(__props.server?.url || __props.operation.path, cookie.domain)).map((cookie) => ({
+			key: cookie.name,
+			value: cookie.value,
+			route: {
+				name: "cookies",
+				params: { cookies: cookie.uid }
+			},
+			enabled: true
+		})));
+		const handleRequestNamePlaceholder = () => {
+			return __props.operation.summary ? __props.operation.summary : __props.operation.path.replace(REGEX.PROTOCOL, "") ? __props.operation.path.replace(REGEX.PROTOCOL, "") : "Request Name";
+		};
+		const labelRequestNameId = useId();
+		const requestSectionViews = usePluginManager().getViewComponents("request.section");
+		const updateOperationHandler = (key, value) => requestMutators.edit(__props.operation.uid, key, value);
+		watch(() => isAuthHidden.value, (authHidden) => {
+			if (authHidden && selectedFilter.value === "Auth") selectedFilter.value = "All";
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayoutSection_default, { "aria-label": `Request: ${__props.operation.summary}` }, {
+				title: withCtx(() => [createElementVNode("div", _hoisted_1, [unref(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), unref(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: handleRequestNamePlaceholder(),
+					value: __props.operation.summary,
+					onInput: updateRequestNameHandler
+				}, 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"
+				}, [
+					__props.collection && __props.workspace && (unref(layout) !== "modal" || Object.keys(unref(securitySchemes) ?? {}).length) ? withDirectives((openBlock(), createBlock(RequestAuth_default, {
+						key: 0,
+						id: filterIds.value.Auth,
+						class: "request-section-content-auth",
+						collection: __props.collection,
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						isReadOnly: unref(layout) === "modal",
+						layout: "client",
+						operation: __props.operation,
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						selectedSecuritySchemeUids: __props.selectedSecuritySchemeUids,
+						server: __props.server,
+						title: "Authentication",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"collection",
+						"envVariables",
+						"environment",
+						"isReadOnly",
+						"operation",
+						"role",
+						"selectedSecuritySchemeUids",
+						"server",
+						"workspace"
+					])), [[vShow, !isAuthHidden.value && (selectedFilter.value === "All" || selectedFilter.value === "Auth")]]) : createCommentVNode("", true),
+					withDirectives(createVNode(RequestPathParams_default, {
+						id: filterIds.value["Path Parameters"],
+						class: "request-section-content-path-params",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						invalidParams: __props.invalidParams,
+						operation: __props.operation,
+						paramKey: "path",
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Path Parameters",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"invalidParams",
+						"operation",
+						"role",
+						"workspace"
+					]), [[vShow, (selectedFilter.value === "All" || selectedFilter.value === "Path Parameters") && __props.example.parameters.path.length]]),
+					withDirectives(createVNode(RequestParams_default, {
+						id: filterIds.value.Cookies,
+						class: "request-section-content-cookies",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						invalidParams: __props.invalidParams,
+						label: "Cookie",
+						operation: __props.operation,
+						paramKey: "cookies",
+						readOnlyEntries: activeWorkspaceCookies.value,
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Cookies",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"invalidParams",
+						"operation",
+						"readOnlyEntries",
+						"role",
+						"workspace"
+					]), [[vShow, selectedFilter.value === "All" || selectedFilter.value === "Cookies"]]),
+					withDirectives(createVNode(RequestParams_default, {
+						id: filterIds.value.Headers,
+						class: "request-section-content-headers",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						invalidParams: __props.invalidParams,
+						label: "Header",
+						operation: __props.operation,
+						paramKey: "headers",
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Headers",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"invalidParams",
+						"operation",
+						"role",
+						"workspace"
+					]), [[vShow, selectedFilter.value === "All" || selectedFilter.value === "Headers"]]),
+					withDirectives(createVNode(RequestParams_default, {
+						id: filterIds.value.Query,
+						class: "request-section-content-query",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						invalidParams: __props.invalidParams,
+						label: "Parameter",
+						operation: __props.operation,
+						paramKey: "query",
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Query Parameters",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"invalidParams",
+						"operation",
+						"role",
+						"workspace"
+					]), [[vShow, selectedFilter.value === "All" || selectedFilter.value === "Query"]]),
+					__props.operation.method && (selectedFilter.value === "All" || selectedFilter.value === "Body") && unref(canMethodHaveBody)(__props.operation.method) ? (openBlock(), createBlock(RequestBody_default, {
+						key: 1,
+						id: filterIds.value.Body,
+						class: "request-section-content-body",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						operation: __props.operation,
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Body",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"operation",
+						"role",
+						"workspace"
+					])) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(requestSectionViews), (view, index) => {
+						return openBlock(), createBlock(unref(ScalarErrorBoundary), { key: view.title ?? index }, {
+							default: withCtx(() => [withDirectives((openBlock(), createBlock(resolveDynamicComponent(view.component), {
+								operation: __props.operation,
+								"onUpdate:operation": updateOperationHandler
+							}, null, 40, ["operation"])), [[vShow, selectedFilter.value === "All" || selectedFilter.value === view.title]])]),
+							_: 2
+						}, 1024);
+					}), 128)),
+					_cache[1] || (_cache[1] = createElementVNode("div", { class: "flex flex-grow" }, null, -1)),
+					createVNode(unref(ScalarErrorBoundary), null, {
+						default: withCtx(() => [createVNode(RequestCodeExample_default, {
+							class: "request-section-content-code-example -mt-1/2 border-t",
+							collection: __props.collection,
+							environment: __props.envVariables,
+							example: __props.example,
+							operation: __props.operation,
+							server: __props.server,
+							workspace: __props.workspace
+						}, null, 8, [
+							"collection",
+							"environment",
+							"example",
+							"operation",
+							"server",
+							"workspace"
+						])]),
+						_: 1
+					})
+				], 8, _hoisted_5)]),
+				_: 1
+			}, 8, ["aria-label"]);
+		};
+	}
+}), [["__scopeId", "data-v-287f5ecf"]]);
+//#endregion
+export { RequestSection_default as t };
+
+//# sourceMappingURL=RequestSection-Bx8UHW-k.js.map