@scalar/api-client 2.38.4 → 2.39.1

package/dist/views/Request/RequestSection/RequestBody.vue.script.js

@@ -0,0 +1,477 @@
+import { useWorkspace } from "../../../store/store.js";
+import { useFileDialog } from "../../../hooks/useFileDialog.js";
+import CodeInput_default from "../../../components/CodeInput/CodeInput.vue.js";
+import DataTable_default from "../../../components/DataTable/DataTable.vue.js";
+import DataTableHeader_default from "../../../components/DataTable/DataTableHeader.vue.js";
+import DataTableRow_default from "../../../components/DataTable/DataTableRow.vue.js";
+import ViewLayoutCollapse_default from "../../../components/ViewLayout/ViewLayoutCollapse.vue.js";
+import RequestTable_default from "./RequestTable.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { ScalarButton, ScalarIcon, ScalarListbox } from "@scalar/components";
+import { canMethodHaveBody } from "@scalar/oas-utils/helpers";
+import { requestExampleParametersSchema } from "@scalar/oas-utils/entities/spec";
+//#region src/views/Request/RequestSection/RequestBody.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	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 = {
+	key: 1,
+	class: "flex items-center justify-center overflow-hidden border-t p-1.5"
+};
+var _hoisted_3 = { class: "text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap" };
+/** Convert content types to options for the dropdown */
+var RequestBody_vue_vue_type_script_setup_true_lang_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, [..._cache[2] || (_cache[2] = [createElementVNode("span", null, "No Body", -1)])])) : selectedContentType.value?.id === "binaryFile" ? (openBlock(), createElementBlock("div", _hoisted_2, [__props.example.body.binary ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_3, 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
+			});
+		};
+	}
+});
+//#endregion
+export { RequestBody_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RequestBody.vue.script.js.map

package/dist/views/Request/RequestSection/RequestBody.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestBody.vue.script.js","names":[],"sources":["../../../../src/views/Request/RequestSection/RequestBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarListbox } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type Operation,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport type { Entries } from 'type-fest'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useFileDialog } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport RequestTable from './RequestTable.vue'\n\nconst { example, operation, environment, envVariables, workspace, title } =\n  defineProps<{\n    example: RequestExample\n    operation: Operation\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    title: string\n  }>()\n\nconst { requestExampleMutators } = useWorkspace()\n\n/** use-codemirror package to be updated accordingly */\nconst contentTypeToLanguageMap = {\n  json: 'json',\n  xml: 'xml',\n  yaml: 'yaml',\n  edn: 'edn',\n  other: 'html',\n} as const\n\nconst contentTypes = {\n  multipartForm: 'Multipart Form',\n  formUrlEncoded: 'Form URL Encoded',\n  binaryFile: 'Binary File',\n  json: 'JSON',\n  xml: 'XML',\n  yaml: 'YAML',\n  edn: 'EDN',\n  other: 'Other',\n  none: 'None',\n} as const\ntype ContentType = keyof typeof contentTypes\n\n/** Convert content types to options for the dropdown */\nconst contentTypeOptions = (\n  Object.entries(contentTypes) as Entries<typeof contentTypes>\n).map(([id, label]) => ({\n  id,\n  label,\n}))\n\n/** Match the activeBody to the contentTypeOptions */\nconst activeExampleContentType = computed(() => {\n  const { activeBody, formData, raw } = example.body\n\n  // Form\n  if (activeBody === 'formData') {\n    return formData?.encoding === 'urlencoded'\n      ? 'formUrlEncoded'\n      : 'multipartForm'\n  }\n  // Binary\n  if (activeBody === 'binary') {\n    return 'binaryFile'\n  }\n  // Raw\n  if (activeBody === 'raw' && raw?.encoding) {\n    if (raw.encoding === 'html' || raw.encoding === 'text') {\n      return 'other'\n    }\n    return raw.encoding\n  }\n\n  // Set content type from request if present\n  const contentType = Object.keys(operation.requestBody?.content || {})[0]\n\n  return contentType || 'none'\n})\n/** Selected ref from options above */\nconst selectedContentType = computed({\n  get: () =>\n    contentTypeOptions.find(\n      (opt) => opt.id === activeExampleContentType.value,\n    ) ??\n    contentTypeOptions[contentTypeOptions.length - 1] ??\n    contentTypeOptions[0],\n  set: (opt) => {\n    if (opt?.id) {\n      updateActiveBody(opt.id)\n    }\n  },\n})\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\nconst codeInputLanguage = computed(() => {\n  const type = selectedContentType.value\n    ?.id as keyof typeof contentTypeToLanguageMap\n  return contentTypeToLanguageMap[type] ?? 'plaintext'\n})\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = formParams.value\n\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams[rowIdx] = {\n      ...updatedParams[rowIdx],\n      value: updatedParams[rowIdx]?.value || '',\n      key: updatedParams[rowIdx]?.key || '',\n      enabled: updatedParams[rowIdx]?.enabled ?? false,\n      [field]: value || '',\n    }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx]?.key !== '' ||\n      updatedParams[rowIdx]?.value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx]?.key === '' &&\n      updatedParams[rowIdx]?.value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n\n    requestExampleMutators.edit(example.uid, 'body.formData.value', payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\nconst formParams = computed(() => example.body.formData?.value ?? [])\n\n/** ensure one empty row by default */\nconst defaultRow = () => {\n  const lastParam = formParams.value[formParams.value.length - 1]\n  if (!lastParam || lastParam.key !== '' || lastParam.value !== '') {\n    addRow()\n  }\n}\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({\n    enabled: false,\n  })\n  const newParams = [...formParams.value, newParam]\n\n  // Ensure we have formData\n  if (example.body.formData) {\n    requestExampleMutators.edit(example.uid, 'body.formData.value', newParams)\n  } else {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      value: newParams,\n      encoding: 'form-data',\n    })\n  }\n}\n\n/** Enable and disables the row */\nconst toggleRow = (rowIdx: number, enabled: boolean) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].enabled = enabled\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\nconst updateRequestBody = (value: string) =>\n  requestExampleMutators.edit(example.uid, 'body.raw.value', value)\n\n/** Take the select option and return bodyType with encoding and header */\nconst getBodyType = (type: ContentType) => {\n  if (type === 'multipartForm') {\n    return {\n      activeBody: 'formData',\n      encoding: 'form-data',\n      header: 'multipart/form-data',\n    } as const\n  }\n  if (type === 'formUrlEncoded') {\n    return {\n      activeBody: 'formData',\n      encoding: 'urlencoded',\n      header: 'application/x-www-form-urlencoded',\n    } as const\n  }\n  if (type === 'binaryFile') {\n    return {\n      activeBody: 'binary',\n      encoding: undefined,\n      header: 'application/octet-stream',\n    } as const\n  }\n  if (type === 'json') {\n    const contentTypes = Object.keys(operation.requestBody?.content ?? {})\n\n    // Gets json content types including vendor specific ones\n    const jsonContentType =\n      contentTypes.find((t) => t.includes('json') || t.endsWith('+json')) ||\n      'application/json'\n\n    return {\n      activeBody: 'raw',\n      encoding: 'json',\n      header: jsonContentType,\n    } as const\n  }\n  if (type === 'xml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'xml',\n      header: 'application/xml',\n    } as const\n  }\n  if (type === 'yaml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'yaml',\n      header: 'application/yaml',\n    } as const\n  }\n  if (type === 'edn') {\n    return {\n      activeBody: 'raw',\n      encoding: 'edn',\n      header: 'application/edn',\n    } as const\n  }\n  if (type === 'other') {\n    const opContentTypes = Object.keys(operation.requestBody?.content ?? {})\n    const textContentType = opContentTypes.find((t) => t.startsWith('text/'))\n\n    return {\n      activeBody: 'raw',\n      encoding: textContentType ? 'text' : 'html',\n      header: textContentType ?? 'application/html',\n    } as const\n  }\n\n  return { activeBody: 'raw', encoding: undefined, header: undefined } as const\n}\n\n/** Set active body AND encoding */\nconst updateActiveBody = (type: ContentType) => {\n  const { activeBody, encoding, header } = getBodyType(type)\n  requestExampleMutators.edit(example.uid, 'body.activeBody', activeBody)\n\n  // Set encoding safely\n  if (encoding && activeBody === 'raw') {\n    requestExampleMutators.edit(example.uid, 'body.raw', {\n      encoding,\n      value: example.body.raw?.value ?? '',\n    })\n  } else if (encoding && activeBody === 'formData') {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      encoding,\n      value: example.body.formData?.value ?? [],\n    })\n  }\n  // Remove raw if no encoding and not binary\n  else if (!encoding && activeBody !== 'binary') {\n    const { raw: deleteMe, ...body } = example.body\n    requestExampleMutators.edit(example.uid, 'body', body)\n  }\n\n  // Handle headers\n  const headers = [...example.parameters.headers]\n  const contentTypeIdx = headers.findIndex(\n    (h) => h.key.toLowerCase() === 'content-type',\n  )\n\n  if (contentTypeIdx >= 0) {\n    // Update header if exists\n    if (header && headers[contentTypeIdx]) {\n      headers[contentTypeIdx].value = header\n    }\n    // Remove header if we don't want one\n    else if (\n      headers[contentTypeIdx] &&\n      (activeBody !== 'raw' || type === 'none')\n    ) {\n      headers.splice(contentTypeIdx, 1)\n    }\n  }\n  // Add header if doesn't have one\n  else if (header) {\n    const lastHeader = headers[headers.length - 1]\n    // Add header before last if empty to prevent empty row duplication\n    if (lastHeader && lastHeader.key === '' && lastHeader.value === '') {\n      headers.splice(headers.length - 1, 0, {\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    } else {\n      headers.push({\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    }\n  }\n\n  requestExampleMutators.edit(example.uid, 'parameters.headers', headers)\n}\n\nconst handleFileUploadFormData = (rowIdx: number) => {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        const currentParams = formParams.value\n        const updatedParams = [...currentParams]\n        updatedParams[rowIdx] = {\n          ...updatedParams[rowIdx],\n          file,\n          value: updatedParams[rowIdx]?.value || file.name,\n          key: updatedParams[rowIdx]?.key || file.name,\n          enabled: true,\n        }\n        requestExampleMutators.edit(\n          example.uid,\n          'body.formData.value',\n          updatedParams,\n        )\n\n        defaultRow()\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\nconst removeBinaryFile = () =>\n  requestExampleMutators.edit(example.uid, 'body.binary', undefined)\n\nfunction handleRemoveFileFormData(rowIdx: number) {\n  const currentParams = formParams.value\n  const updatedParams = [...currentParams]\n  const param = currentParams[rowIdx]\n  const file = param?.file as File | undefined\n\n  // Empty key value or non updated file name then remove the row\n  if (\n    currentParams.length > 1 &&\n    ((!param?.key && !param?.value) ||\n      (file && param?.key === file.name && param?.value === file.name))\n  ) {\n    updatedParams.splice(rowIdx, 1)\n  } else {\n    // File name updated then remove file only\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].file = undefined\n    }\n  }\n  requestExampleMutators.edit(example.uid, 'body.formData.value', updatedParams)\n}\n\nfunction handleFileUpload() {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        requestExampleMutators.edit(example.uid, 'body.binary', file)\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\n// we always add an empty row if its empty :)\nwatch(\n  selectedContentType,\n  (val) => {\n    if (['multipartForm', 'formUrlEncoded'].includes(val?.id || '')) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => example.uid,\n  () => {\n    operation.method &&\n      canMethodHaveBody(operation.method) &&\n      updateActiveBody(activeExampleContentType.value as ContentType)\n\n    // Add extra row on page route change as well\n    if (\n      ['multipartForm', 'formUrlEncoded'].includes(\n        activeExampleContentType.value as ContentType,\n      )\n    ) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst exampleOptions = computed(() => {\n  const contentType = selectedContentType.value?.id\n  const { header } = getBodyType(contentType as ContentType)\n  const content = operation.requestBody?.content || {}\n  const examples = header ? content[header]?.examples || {} : {}\n  return Object.entries(examples).map(([key, value]) => ({\n    id: key,\n    label: key,\n    value,\n  }))\n})\n\nconst selectedExample = computed({\n  get: () => {\n    const rawValue = example.body.raw?.value ?? '{}'\n    try {\n      const parsedValue = JSON.parse(rawValue)\n      const getExample = exampleOptions.value.find((e) => {\n        const exampleValue = e.value as {\n          value: Record<string, string>\n        }\n        return (\n          JSON.stringify(exampleValue.value) === JSON.stringify(parsedValue)\n        )\n      })\n      return getExample ?? exampleOptions.value[0]\n    } catch {\n      return exampleOptions.value[0]\n    }\n  },\n  set: (opt) => {\n    if (opt?.id) {\n      const exampleOption = exampleOptions.value.find((e) => e.id === opt.id)\n      if (exampleOption) {\n        const exampleValue = exampleOption.value as {\n          value: Record<string, string>\n        }\n        updateRequestBody(JSON.stringify(exampleValue.value, null, 2))\n      }\n    }\n  },\n})\n</script>\n<template>\n  <ViewLayoutCollapse>\n    <template #title>{{ title }}</template>\n    <DataTable\n      :columns=\"['']\"\n      presentational>\n      <DataTableRow>\n        <DataTableHeader\n          class=\"relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0\">\n          <ScalarListbox\n            v-model=\"selectedContentType\"\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              variant=\"ghost\">\n              <span>{{ selectedContentType?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n          <ScalarListbox\n            v-if=\"exampleOptions.length > 0\"\n            v-model=\"selectedExample\"\n            :options=\"exampleOptions\"\n            side=\"left\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-2 font-normal\"\n              fullWidth\n              variant=\"ghost\">\n              <span>{{ selectedExample?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n        </DataTableHeader>\n      </DataTableRow>\n      <DataTableRow>\n        <template v-if=\"selectedContentType?.id === '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        <template v-else-if=\"selectedContentType?.id === 'binaryFile'\">\n          <div\n            class=\"flex items-center justify-center overflow-hidden border-t p-1.5\">\n            <template v-if=\"example.body.binary\">\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                {{ (example.body.binary as File).name }}\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=\"removeBinaryFile\">\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=\"handleFileUpload\">\n                <span>Upload 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        <template v-else-if=\"selectedContentType?.id == 'multipartForm'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'formUrlEncoded'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else>\n          <!-- TODO: remove this as type hack when we add syntax highlighting -->\n          <CodeInput\n            class=\"border-t px-3\"\n            content=\"\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :language=\"codeInputLanguage as CodeMirrorLanguage\"\n            lineNumbers\n            lint\n            :modelValue=\"example.body?.raw?.value ?? ''\"\n            :workspace=\"workspace\"\n            @update:modelValue=\"updateRequestBody\" />\n        </template>\n      </DataTableRow>\n      <!-- Hacky... but effective, extra table row to trick the last group -->\n      <DataTableRow />\n    </DataTable>\n  </ViewLayoutCollapse>\n</template>\n<style scoped>\n:deep(.cm-content) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":"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"}

package/dist/views/Request/RequestSection/RequestCodeExample.vue.d.ts

@@ -1,6 +1,6 @@
 import type { Collection, Operation, RequestExample, Server } from '@scalar/oas-utils/entities/spec';
 import type { Workspace } from '@scalar/oas-utils/entities/workspace';
-import type { EnvVariables } from '../../../libs/env-helpers';
+import type { EnvVariables } from '../../../libs/env-helpers.js';
 type __VLS_Props = {
     collection: Collection;
     example: RequestExample;

package/dist/views/Request/RequestSection/RequestCodeExample.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RequestCodeExample_vue_vue_type_script_setup_true_lang_default from "./RequestCodeExample.vue.script.js";
+/* empty css                                 */
+//#region src/views/Request/RequestSection/RequestCodeExample.vue
+var RequestCodeExample_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestCodeExample_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2891f052"]]);
+//#endregion
+export { RequestCodeExample_default as default };
+
+//# sourceMappingURL=RequestCodeExample.vue.js.map

package/dist/views/Request/RequestSection/RequestCodeExample.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestCodeExample.vue.js","names":[],"sources":["../../../../src/views/Request/RequestSection/RequestCodeExample.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarIcon,\n  type ScalarComboboxOption,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  SecurityScheme,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { snippetz, type ClientId, type TargetId } from '@scalar/snippetz'\nimport { computed, ref } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport type { EnvVariables } from '@/libs/env-helpers'\nimport { useWorkspace } from '@/store'\nimport { CodeSnippet } from '@/views/Components/CodeSnippet'\n\nconst { collection, example, operation, server, workspace } = defineProps<{\n  collection: Collection\n  example: RequestExample\n  operation: Operation\n  server: Server | undefined\n  workspace: Workspace\n  environment: EnvVariables\n}>()\n\nconst { securitySchemes, workspaceMutators } = useWorkspace()\n\nconst localSelectedClient = computed(() => {\n  // If the current selection is a custom example\n  if (localSelectedClientState.value.targetKey === 'custom') {\n    // Check if this custom example still exists in the new operation\n    const customExampleExists = codeSamples.value?.some(\n      (sample) => sample.lang === localSelectedClientState.value.clientKey,\n    )\n\n    // If it exists, keep using it\n    if (customExampleExists) {\n      return localSelectedClientState.value\n    }\n  }\n\n  // Otherwise fall back to workspace selection\n  return {\n    targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n    clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n  }\n})\n\nconst codeSamples = computed(\n  () =>\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'],\n)\n\n// Store the actual selected state\nconst localSelectedClientState = ref(\n  codeSamples.value?.length\n    ? {\n        targetKey: 'custom',\n        clientKey: codeSamples.value[0]?.lang,\n      }\n    : {\n        targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n        clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n      },\n)\n\n/**\n * Returns selected security schemes for the request\n */\nconst selectedSecuritySchemes = computed(() => {\n  const uids =\n    operation.selectedSecuritySchemeUids ||\n    collection.selectedSecuritySchemeUids ||\n    []\n  return uids\n    .flat()\n    .map((uid) => securitySchemes[uid])\n    .filter((scheme): scheme is SecurityScheme => Boolean(scheme))\n})\n\n/**\n * Group plugins by target/language to show in a dropdown, also build a dictionary in the same loop\n **/\nconst snippets = computed(() => {\n  const dict: Record<string, string> = {}\n\n  // Get the built-in snippets\n  const builtInOptions = snippetz()\n    .clients()\n    .map((group) => ({\n      label: group.title,\n      options: group.clients.map((plugin) => {\n        dict[`${group.key},${plugin.client}`] = plugin.title\n        return {\n          id: `${group.key},${plugin.client}`,\n          label: plugin.title,\n        }\n      }),\n    }))\n\n  // Get any custom code samples from x-codeSamples\n  const customExamples = (\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'] ||\n    []\n  ).map((sample) => ({\n    id: `custom,${sample.lang}`,\n    label: sample.label || sample.lang,\n  }))\n\n  // If we have custom samples, add them as a new group\n  const options =\n    customExamples.length > 0\n      ? [\n          {\n            id: 'customExamples',\n            label: 'Code Examples',\n            options: customExamples.map((customExample) => ({\n              id: customExample.id,\n              label: customExample.label ?? customExample.id,\n            })),\n          },\n          ...builtInOptions,\n        ]\n      : builtInOptions\n\n  // Add custom samples to the dictionary\n  customExamples.forEach((sample) => {\n    dict[sample.id] = sample.label ?? sample.id\n  })\n\n  return {\n    options,\n    dict,\n  }\n})\n\n/** The currently selected plugin */\nconst selectedPlugin = computed(() => {\n  const client = localSelectedClient.value\n\n  // Handle custom examples\n  if (client.targetKey === 'custom') {\n    const id = `custom,${client.clientKey}`\n    return {\n      id,\n      label: snippets.value.dict[id] ?? 'Unknown',\n    }\n  }\n\n  // Handle regular snippetz plugins\n  const id = `${client.targetKey},${client.clientKey}`\n  return {\n    id,\n    label: snippets.value.dict[id] ?? 'Unknown',\n  }\n})\n\n/** The currently selected target */\nconst selectedTarget = computed(\n  () => localSelectedClient.value.targetKey as TargetId,\n)\n\n/** The currently selected client */\nconst selectedClient = computed(\n  () => localSelectedClient.value.clientKey as ClientId<TargetId>,\n)\n\n/** Update the selection when a new client is picked */\nconst selectClient = (value: ScalarComboboxOption | undefined) => {\n  if (!value) {\n    return\n  }\n  const { id } = value\n  const [target, client] = id.split(',')\n\n  if (!target || !client) {\n    return\n  }\n\n  // Update the state ref\n  localSelectedClientState.value = {\n    targetKey: target,\n    clientKey: client,\n  }\n\n  // Only update workspace for non-custom selections\n  if (target !== 'custom') {\n    workspaceMutators.edit(workspace.uid, 'selectedHttpClient', {\n      targetKey: target,\n      clientKey: client,\n    })\n  }\n}\n\n/** Get the code sample content for a custom example */\nconst customCodeContent = computed(() => {\n  if (!selectedPlugin.value.id.startsWith('custom,')) {\n    return undefined\n  }\n\n  const lang = selectedPlugin.value.id.split(',')[1]\n  const sample = codeSamples.value?.find((s) => s.lang === lang)\n  return sample?.source\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <ViewLayoutCollapse\n      class=\"group/preview w-full border-b-0\"\n      :defaultOpen=\"false\">\n      <template #title>Code Snippet</template>\n      <template #actions>\n        <div class=\"flex flex-1\">\n          <ScalarCombobox\n            :modelValue=\"selectedPlugin\"\n            :options=\"snippets.options\"\n            placement=\"bottom-end\"\n            @update:modelValue=\"selectClient\">\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-1.25 py-0.75 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedPlugin?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarCombobox>\n        </div>\n      </template>\n      <DataTable\n        :columns=\"['']\"\n        presentational>\n        <DataTableRow>\n          <div\n            class=\"bg-b-1 flex items-center justify-center overflow-hidden border-t\">\n            <!-- Use the given code example -->\n            <template v-if=\"customCodeContent\">\n              <ScalarCodeBlock\n                :content=\"customCodeContent\"\n                :lang=\"selectedPlugin.id.split(',')[1] ?? 'plaintext'\" />\n            </template>\n            <!-- Generate a code snippet -->\n            <template v-else>\n              <CodeSnippet\n                :client=\"selectedClient\"\n                :example=\"example\"\n                :operation=\"operation\"\n                :securitySchemes=\"selectedSecuritySchemes\"\n                :server=\"server\"\n                :target=\"selectedTarget\"\n                :environment=\"environment\" />\n            </template>\n          </div>\n        </DataTableRow>\n      </DataTable>\n    </ViewLayoutCollapse>\n  </div>\n</template>\n<style scoped>\n:deep(code.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":""}