@scalar/api-client 2.38.4 → 2.39.0

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

@@ -0,0 +1,188 @@
+import { useFileDialog } from "../../../../hooks/useFileDialog.js";
+import { getSelectedBodyContentType } from "../../operation-block/helpers/get-selected-body-content-type.js";
+import { getExampleFromBody } from "../helpers/get-request-body-example.js";
+import { getFileName } from "../helpers/files.js";
+import CodeInput_default from "../../../components/code-input/CodeInput.vue.js";
+import DataTable_default from "../../../components/data-table/DataTable.vue.js";
+import DataTableHeader_default from "../../../components/data-table/DataTableHeader.vue.js";
+import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
+import RequestBodyForm_default from "./RequestBodyForm.vue.js";
+import CollapsibleSection_default from "../../../components/layout/CollapsibleSection.vue.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ScalarButton, ScalarIcon, ScalarListbox } from "@scalar/components";
+import { unpackProxyObject } from "@scalar/workspace-store/helpers/unpack-proxy";
+import { resolve } from "@scalar/workspace-store/resolve";
+import { CONTENT_TYPES } from "@scalar/helpers/consts/content-types";
+import { objectEntries } from "@scalar/helpers/object/object-entries";
+//#region src/v2/blocks/request-block/components/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" };
+var RequestBody_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestBody",
+	props: {
+		requestBody: {},
+		exampleKey: {},
+		title: {},
+		environment: {}
+	},
+	emits: [
+		"update:contentType",
+		"update:value",
+		"update:formValue"
+	],
+	setup(__props, { emit: __emit }) {
+		const emits = __emit;
+		const contentTypeToLanguageMap = {
+			"application/json": "json",
+			"application/xml": "xml",
+			"application/yaml": "yaml"
+		};
+		/** Selected content type with default */
+		const selectedContentType = computed(() => getSelectedBodyContentType(__props.requestBody, __props.exampleKey) ?? "none");
+		/** Convert content types to options for the dropdown */
+		const contentTypeOptions = objectEntries(CONTENT_TYPES).map(([id, label]) => ({
+			id,
+			label
+		}));
+		const selectedContentTypeModel = computed({
+			get: () => {
+				return contentTypeOptions.find((it) => it.id === selectedContentType.value) ?? contentTypeOptions.at(-1);
+			},
+			set: (v) => {
+				emits("update:contentType", { value: v.id });
+			}
+		});
+		function handleFileUpload(callback) {
+			const { open } = useFileDialog({
+				onChange: (files) => {
+					const file = files?.[0];
+					if (file) callback(file);
+				},
+				multiple: false,
+				accept: "*/*"
+			});
+			open();
+		}
+		/** Dereferenced example */
+		const example = computed(() => __props.requestBody && getExampleFromBody(__props.requestBody, selectedContentType.value, __props.exampleKey));
+		/** Convert the example value to a string for the code editor */
+		const bodyValue = computed(() => {
+			if (!example.value) return "";
+			const value = example.value.value;
+			if (typeof value === "string") return value;
+			return JSON.stringify(value, null, 2);
+		});
+		/** Resolved schema for the request body */
+		const bodySchema = computed(() => {
+			return resolve.schema(__props.requestBody?.content?.[selectedContentType.value]?.schema);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CollapsibleSection_default), null, {
+				title: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
+				default: withCtx(() => [createVNode(unref(DataTable_default), {
+					columns: [""],
+					presentational: ""
+				}, {
+					default: withCtx(() => [createVNode(unref(DataTableHeader_default), { class: "relative col-span-full flex h-8 cursor-pointer items-center justify-between border-r-0 !p-0" }, {
+						default: withCtx(() => [createVNode(unref(ScalarListbox), {
+							modelValue: selectedContentTypeModel.value,
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedContentTypeModel.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",
+								fullWidth: "",
+								variant: "ghost"
+							}, {
+								default: withCtx(() => [createElementVNode("span", null, toDisplayString(unref(CONTENT_TYPES)[selectedContentType.value] ?? selectedContentType.value), 1), createVNode(unref(ScalarIcon), {
+									icon: "ChevronDown",
+									size: "md"
+								})]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["modelValue", "options"])]),
+						_: 1
+					}), createVNode(unref(DataTableRow_default), null, {
+						default: withCtx(() => [selectedContentType.value === "none" ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[5] || (_cache[5] = [createElementVNode("span", null, "No Body", -1)])])) : selectedContentType.value === "application/octet-stream" ? (openBlock(), createElementBlock("div", _hoisted_2, [unref(getFileName)(unref(unpackProxyObject)(example.value?.value)) !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_3, toDisplayString(unref(getFileName)(unref(unpackProxyObject)(example.value?.value))), 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: _cache[1] || (_cache[1] = ($event) => emits("update:value", {
+								payload: void 0,
+								contentType: selectedContentType.value
+							}))
+						}, {
+							default: withCtx(() => [..._cache[6] || (_cache[6] = [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: _cache[2] || (_cache[2] = () => handleFileUpload((file) => emits("update:value", {
+								payload: file,
+								contentType: selectedContentType.value
+							})))
+						}, {
+							default: withCtx(() => [_cache[7] || (_cache[7] = createElementVNode("span", null, "Select File", -1)), createVNode(unref(ScalarIcon), {
+								class: "ml-1",
+								icon: "Upload",
+								size: "xs",
+								thickness: "2.5"
+							})]),
+							_: 1
+						}))])) : selectedContentType.value === "multipart/form-data" || selectedContentType.value === "application/x-www-form-urlencoded" ? (openBlock(), createBlock(RequestBodyForm_default, {
+							key: 2,
+							bodySchema: bodySchema.value,
+							environment: __props.environment,
+							example: example.value,
+							selectedContentType: selectedContentType.value,
+							"onUpdate:formValue": _cache[3] || (_cache[3] = (payload) => emits("update:formValue", {
+								payload,
+								contentType: selectedContentType.value
+							}))
+						}, null, 8, [
+							"bodySchema",
+							"environment",
+							"example",
+							"selectedContentType"
+						])) : (openBlock(), createBlock(unref(CodeInput_default), {
+							key: 3,
+							class: "border-t px-3",
+							content: "",
+							environment: __props.environment,
+							language: contentTypeToLanguageMap[selectedContentType.value] ?? "plaintext",
+							lineNumbers: "",
+							lint: "",
+							modelValue: bodyValue.value,
+							"onUpdate:modelValue": _cache[4] || (_cache[4] = (value) => emits("update:value", {
+								payload: value,
+								contentType: selectedContentType.value
+							}))
+						}, null, 8, [
+							"environment",
+							"language",
+							"modelValue"
+						]))]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { RequestBody_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RequestBody.vue.script.js.map

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

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

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

@@ -0,0 +1,7 @@
+import RequestBodyForm_vue_vue_type_script_setup_true_lang_default from "./RequestBodyForm.vue.script.js";
+//#region src/v2/blocks/request-block/components/RequestBodyForm.vue
+var RequestBodyForm_default = RequestBodyForm_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RequestBodyForm_default as default };
+
+//# sourceMappingURL=RequestBodyForm.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestBodyForm.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestBodyForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  ExampleObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { ref, watch } from 'vue'\n\nimport { useFileDialog } from '@/hooks'\nimport RequestTable from '@/v2/blocks/request-block/components/RequestTable.vue'\nimport type { TableRow } from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport { getFormBodyRows } from '@/v2/blocks/request-block/helpers/get-form-body-rows'\n\nconst { example, bodySchema, selectedContentType, environment } = defineProps<{\n  example: ExampleObject | undefined | null\n  /** Resolved schema for the form body so the table can show enums and validation per field */\n  bodySchema?: SchemaObject\n  selectedContentType: string\n  environment: XScalarEnvironment\n}>()\n\nconst emit = defineEmits<{\n  (\n    e: 'update:formValue',\n    payload: ApiReferenceEvents['operation:update:requestBody:formValue']['payload'],\n  ): void\n}>()\n\n/** Local state for form body rows */\nconst localFormBodyRows = ref<TableRow[]>([])\n\n/** Sync the local form body rows with the example and schema */\nwatch(\n  () => [example, bodySchema, selectedContentType] as const,\n  ([newExample, schema, contentType]) => {\n    localFormBodyRows.value = getFormBodyRows(newExample, contentType, schema)\n  },\n  { immediate: true },\n)\n\nconst handleUpdateFormValue = (rows: TableRow[]) => {\n  emit(\n    'update:formValue',\n    rows.map((row) => ({\n      name: row.name,\n      value: row.value as string | File,\n      isDisabled: row.isDisabled ?? false,\n    })),\n  )\n}\n\n/** Update a row in the table, combines with the previous data so we emit a whole row */\nconst handleUpsertRow = (\n  index: number,\n  payload: Partial<{\n    name: string\n    value: string | File | undefined\n    isDisabled: boolean\n  }>,\n) => {\n  // Add new row\n  if (index >= localFormBodyRows.value.length) {\n    localFormBodyRows.value = [\n      ...localFormBodyRows.value,\n      { name: '', value: '', ...payload, isDisabled: false },\n    ]\n    handleUpdateFormValue(localFormBodyRows.value)\n    return\n  }\n\n  localFormBodyRows.value = localFormBodyRows.value.map((row, i) =>\n    i === index ? { ...row, ...payload } : row,\n  )\n  handleUpdateFormValue(localFormBodyRows.value)\n}\n\n/** Delete a row from the table */\nconst handleDeleteRow = (index: number) => {\n  localFormBodyRows.value = localFormBodyRows.value.filter(\n    (_, i) => i !== index,\n  )\n  handleUpdateFormValue(localFormBodyRows.value)\n}\n\n/** Handle file upload for a specific row index */\nconst handleFileUpload = (index: number) => {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n\n      if (file) {\n        const currentRow = localFormBodyRows.value[index]\n        handleUpsertRow(index, {\n          name: currentRow?.name || file.name,\n          value: file,\n        })\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n</script>\n\n<template>\n  <!-- Form Data -->\n  <template v-if=\"selectedContentType === 'multipart/form-data'\">\n    <RequestTable\n      :data=\"localFormBodyRows\"\n      :environment=\"environment\"\n      showUploadButton\n      @deleteRow=\"handleDeleteRow\"\n      @removeFile=\"(index) => handleUpsertRow(index, { value: undefined })\"\n      @uploadFile=\"handleFileUpload\"\n      @upsertRow=\"handleUpsertRow\" />\n  </template>\n\n  <!-- Form URL Encoded -->\n  <template v-else>\n    <RequestTable\n      :data=\"localFormBodyRows\"\n      :environment=\"environment\"\n      @deleteRow=\"handleDeleteRow\"\n      @upsertRow=\"handleUpsertRow\" />\n  </template>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,98 @@
+import { useFileDialog } from "../../../../hooks/useFileDialog.js";
+import RequestTable_default from "./RequestTable.vue.js";
+import { getFormBodyRows } from "../helpers/get-form-body-rows.js";
+import { createBlock, defineComponent, openBlock, ref, watch } from "vue";
+//#region src/v2/blocks/request-block/components/RequestBodyForm.vue?vue&type=script&setup=true&lang.ts
+var RequestBodyForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestBodyForm",
+	props: {
+		example: {},
+		bodySchema: {},
+		selectedContentType: {},
+		environment: {}
+	},
+	emits: ["update:formValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		/** Local state for form body rows */
+		const localFormBodyRows = ref([]);
+		/** Sync the local form body rows with the example and schema */
+		watch(() => [
+			__props.example,
+			__props.bodySchema,
+			__props.selectedContentType
+		], ([newExample, schema, contentType]) => {
+			localFormBodyRows.value = getFormBodyRows(newExample, contentType, schema);
+		}, { immediate: true });
+		const handleUpdateFormValue = (rows) => {
+			emit("update:formValue", rows.map((row) => ({
+				name: row.name,
+				value: row.value,
+				isDisabled: row.isDisabled ?? false
+			})));
+		};
+		/** Update a row in the table, combines with the previous data so we emit a whole row */
+		const handleUpsertRow = (index, payload) => {
+			if (index >= localFormBodyRows.value.length) {
+				localFormBodyRows.value = [...localFormBodyRows.value, {
+					name: "",
+					value: "",
+					...payload,
+					isDisabled: false
+				}];
+				handleUpdateFormValue(localFormBodyRows.value);
+				return;
+			}
+			localFormBodyRows.value = localFormBodyRows.value.map((row, i) => i === index ? {
+				...row,
+				...payload
+			} : row);
+			handleUpdateFormValue(localFormBodyRows.value);
+		};
+		/** Delete a row from the table */
+		const handleDeleteRow = (index) => {
+			localFormBodyRows.value = localFormBodyRows.value.filter((_, i) => i !== index);
+			handleUpdateFormValue(localFormBodyRows.value);
+		};
+		/** Handle file upload for a specific row index */
+		const handleFileUpload = (index) => {
+			const { open } = useFileDialog({
+				onChange: (files) => {
+					const file = files?.[0];
+					if (file) {
+						const currentRow = localFormBodyRows.value[index];
+						handleUpsertRow(index, {
+							name: currentRow?.name || file.name,
+							value: file
+						});
+					}
+				},
+				multiple: false,
+				accept: "*/*"
+			});
+			open();
+		};
+		return (_ctx, _cache) => {
+			return __props.selectedContentType === "multipart/form-data" ? (openBlock(), createBlock(RequestTable_default, {
+				key: 0,
+				data: localFormBodyRows.value,
+				environment: __props.environment,
+				showUploadButton: "",
+				onDeleteRow: handleDeleteRow,
+				onRemoveFile: _cache[0] || (_cache[0] = (index) => handleUpsertRow(index, { value: void 0 })),
+				onUploadFile: handleFileUpload,
+				onUpsertRow: handleUpsertRow
+			}, null, 8, ["data", "environment"])) : (openBlock(), createBlock(RequestTable_default, {
+				key: 1,
+				data: localFormBodyRows.value,
+				environment: __props.environment,
+				onDeleteRow: handleDeleteRow,
+				onUpsertRow: handleUpsertRow
+			}, null, 8, ["data", "environment"]));
+		};
+	}
+});
+//#endregion
+export { RequestBodyForm_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RequestBodyForm.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestBodyForm.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestBodyForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  ExampleObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { ref, watch } from 'vue'\n\nimport { useFileDialog } from '@/hooks'\nimport RequestTable from '@/v2/blocks/request-block/components/RequestTable.vue'\nimport type { TableRow } from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport { getFormBodyRows } from '@/v2/blocks/request-block/helpers/get-form-body-rows'\n\nconst { example, bodySchema, selectedContentType, environment } = defineProps<{\n  example: ExampleObject | undefined | null\n  /** Resolved schema for the form body so the table can show enums and validation per field */\n  bodySchema?: SchemaObject\n  selectedContentType: string\n  environment: XScalarEnvironment\n}>()\n\nconst emit = defineEmits<{\n  (\n    e: 'update:formValue',\n    payload: ApiReferenceEvents['operation:update:requestBody:formValue']['payload'],\n  ): void\n}>()\n\n/** Local state for form body rows */\nconst localFormBodyRows = ref<TableRow[]>([])\n\n/** Sync the local form body rows with the example and schema */\nwatch(\n  () => [example, bodySchema, selectedContentType] as const,\n  ([newExample, schema, contentType]) => {\n    localFormBodyRows.value = getFormBodyRows(newExample, contentType, schema)\n  },\n  { immediate: true },\n)\n\nconst handleUpdateFormValue = (rows: TableRow[]) => {\n  emit(\n    'update:formValue',\n    rows.map((row) => ({\n      name: row.name,\n      value: row.value as string | File,\n      isDisabled: row.isDisabled ?? false,\n    })),\n  )\n}\n\n/** Update a row in the table, combines with the previous data so we emit a whole row */\nconst handleUpsertRow = (\n  index: number,\n  payload: Partial<{\n    name: string\n    value: string | File | undefined\n    isDisabled: boolean\n  }>,\n) => {\n  // Add new row\n  if (index >= localFormBodyRows.value.length) {\n    localFormBodyRows.value = [\n      ...localFormBodyRows.value,\n      { name: '', value: '', ...payload, isDisabled: false },\n    ]\n    handleUpdateFormValue(localFormBodyRows.value)\n    return\n  }\n\n  localFormBodyRows.value = localFormBodyRows.value.map((row, i) =>\n    i === index ? { ...row, ...payload } : row,\n  )\n  handleUpdateFormValue(localFormBodyRows.value)\n}\n\n/** Delete a row from the table */\nconst handleDeleteRow = (index: number) => {\n  localFormBodyRows.value = localFormBodyRows.value.filter(\n    (_, i) => i !== index,\n  )\n  handleUpdateFormValue(localFormBodyRows.value)\n}\n\n/** Handle file upload for a specific row index */\nconst handleFileUpload = (index: number) => {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n\n      if (file) {\n        const currentRow = localFormBodyRows.value[index]\n        handleUpsertRow(index, {\n          name: currentRow?.name || file.name,\n          value: file,\n        })\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n</script>\n\n<template>\n  <!-- Form Data -->\n  <template v-if=\"selectedContentType === 'multipart/form-data'\">\n    <RequestTable\n      :data=\"localFormBodyRows\"\n      :environment=\"environment\"\n      showUploadButton\n      @deleteRow=\"handleDeleteRow\"\n      @removeFile=\"(index) => handleUpsertRow(index, { value: undefined })\"\n      @uploadFile=\"handleFileUpload\"\n      @upsertRow=\"handleUpsertRow\" />\n  </template>\n\n  <!-- Form URL Encoded -->\n  <template v-else>\n    <RequestTable\n      :data=\"localFormBodyRows\"\n      :environment=\"environment\"\n      @deleteRow=\"handleDeleteRow\"\n      @upsertRow=\"handleUpsertRow\" />\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAsBA,MAAM,OAAO;;EAQb,MAAM,oBAAoB,IAAgB,EAAE,CAAA;;AAG5C,cACQ;GAAC,QAAA;GAAS,QAAA;GAAY,QAAA;GAAoB,GAC/C,CAAC,YAAY,QAAQ,iBAAiB;AACrC,qBAAkB,QAAQ,gBAAgB,YAAY,aAAa,OAAM;KAE3E,EAAE,WAAW,MAAM,CACrB;EAEA,MAAM,yBAAyB,SAAqB;AAClD,QACE,oBACA,KAAK,KAAK,SAAS;IACjB,MAAM,IAAI;IACV,OAAO,IAAI;IACX,YAAY,IAAI,cAAc;IAC/B,EAAE,CACL;;;EAIF,MAAM,mBACJ,OACA,YAKG;AAEH,OAAI,SAAS,kBAAkB,MAAM,QAAQ;AAC3C,sBAAkB,QAAQ,CACxB,GAAG,kBAAkB,OACrB;KAAE,MAAM;KAAI,OAAO;KAAI,GAAG;KAAS,YAAY;KAAO,CACxD;AACA,0BAAsB,kBAAkB,MAAK;AAC7C;;AAGF,qBAAkB,QAAQ,kBAAkB,MAAM,KAAK,KAAK,MAC1D,MAAM,QAAQ;IAAE,GAAG;IAAK,GAAG;IAAS,GAAG,IACzC;AACA,yBAAsB,kBAAkB,MAAK;;;EAI/C,MAAM,mBAAmB,UAAkB;AACzC,qBAAkB,QAAQ,kBAAkB,MAAM,QAC/C,GAAG,MAAM,MAAM,MAClB;AACA,yBAAsB,kBAAkB,MAAK;;;EAI/C,MAAM,oBAAoB,UAAkB;GAC1C,MAAM,EAAE,SAAS,cAAc;IAC7B,WAAW,UAAU;KACnB,MAAM,OAAO,QAAQ;AAErB,SAAI,MAAM;MACR,MAAM,aAAa,kBAAkB,MAAM;AAC3C,sBAAgB,OAAO;OACrB,MAAM,YAAY,QAAQ,KAAK;OAC/B,OAAO;OACR,CAAA;;;IAGL,UAAU;IACV,QAAQ;IACT,CAAA;AACD,SAAK;;;UAMW,QAAA,wBAAmB,yBAAA,WAAA,EACjC,YAOiC,sBAAA;;IAN9B,MAAM,kBAAA;IACN,aAAa,QAAA;IACd,kBAAA;IACC,aAAW;IACX,cAAU,OAAA,OAAA,OAAA,MAAG,UAAU,gBAAgB,OAAK,EAAA,OAAW,KAAA,GAAS,CAAA;IAChE,cAAY;IACZ,aAAW;yDAKd,YAIiC,sBAAA;;IAH9B,MAAM,kBAAA;IACN,aAAa,QAAA;IACb,aAAW;IACX,aAAW"}

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

@@ -1,5 +1,5 @@
 import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
-import type { OperationCodeSampleProps } from '../../../../v2/blocks/operation-code-sample/components/OperationCodeSample.vue';
+import type { OperationCodeSampleProps } from '../../../../v2/blocks/operation-code-sample/components/OperationCodeSample.vue.js';
 type __VLS_Props = OperationCodeSampleProps & {
     eventBus: WorkspaceEventBus;
 };

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

@@ -0,0 +1,7 @@
+import RequestCodeSnippet_vue_vue_type_script_setup_true_lang_default from "./RequestCodeSnippet.vue.script.js";
+//#region src/v2/blocks/request-block/components/RequestCodeSnippet.vue
+var RequestCodeSnippet_default = RequestCodeSnippet_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RequestCodeSnippet_default as default };
+
+//# sourceMappingURL=RequestCodeSnippet.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestCodeSnippet.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestCodeSnippet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarErrorBoundary,\n} from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  findClient,\n  type ClientOption,\n  type CustomClientOption,\n} from '@/v2/blocks/operation-code-sample'\nimport type { OperationCodeSampleProps } from '@/v2/blocks/operation-code-sample/components/OperationCodeSample.vue'\nimport { generateCodeSnippet } from '@/v2/blocks/operation-code-sample/helpers/generate-code-snippet'\nimport { getClients } from '@/v2/blocks/operation-code-sample/helpers/get-clients'\nimport { getCustomCodeSamples } from '@/v2/blocks/operation-code-sample/helpers/get-custom-code-samples'\nimport { getSecrets } from '@/v2/blocks/operation-code-sample/helpers/get-secrets'\nimport { DataTable, DataTableRow } from '@/v2/components/data-table'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nconst {\n  clientOptions,\n  eventBus,\n  operation,\n  method,\n  path,\n  selectedContentType,\n  selectedServer = null,\n  selectedExample,\n  securitySchemes,\n  selectedClient,\n  globalCookies,\n  integration,\n} = defineProps<OperationCodeSampleProps & { eventBus: WorkspaceEventBus }>()\n\n/** Grab any custom code samples from the operation */\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/** Merge custom code samples with the client options */\nconst clients = computed(() =>\n  getClients(customCodeSamples.value, clientOptions),\n)\n\n/**\n * The locally selected client which would include code samples from this operation only\n * Must be local state because it contains custom code samples from this operation only\n */\nconst localSelectedClient = ref<ClientOption | CustomClientOption | undefined>(\n  findClient(clients.value, selectedClient),\n)\n\n/** If the globally selected client changes we can update the local one */\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    const client = findClient(clients.value, newClient)\n    if (client) {\n      localSelectedClient.value = client\n    }\n  },\n)\n\n/** Block secrets from being shown in the code block */\nconst secretCredentials = computed(() => getSecrets(securitySchemes ?? []))\n\n/** Handle client change */\nconst handleClientChange = (option: ClientOption | undefined) => {\n  localSelectedClient.value = option\n\n  // Emit the change if it's not a custom example\n  if (option && !option.id.startsWith('custom')) {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n/** Generate the code snippet for the selected example */\nconst generatedCode = computed<string>(() =>\n  generateCodeSnippet({\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value,\n    operation,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: selectedExample,\n    globalCookies,\n    includeDefaultHeaders: integration === 'client',\n  }),\n)\n\n/** Check if there are any clients available (built-in or custom code samples) */\nconst hasClients = computed(() =>\n  clients.value.some((group) => group.options.length > 0),\n)\n</script>\n\n<template>\n  <CollapsibleSection\n    v-show=\"hasClients\"\n    class=\"group/preview w-full border-t\"\n    :defaultOpen=\"false\">\n    <template #title>Code Snippet</template>\n\n    <!-- Client selector -->\n    <template #actions>\n      <div class=\"flex flex-1\">\n        <ScalarCombobox\n          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          @update:modelValue=\"\n            (ev) => handleClientChange(ev as ClientOption | undefined)\n          \">\n          <template #default=\"{ open }\">\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n              data-testid=\"client-picker\"\n              variant=\"ghost\">\n              {{ localSelectedClient?.title }}\n              <ScalarIconCaretDown\n                class=\"mt-0.25 size-3 transition-transform duration-100\"\n                :class=\"open && 'rotate-180'\"\n                weight=\"bold\" />\n            </ScalarButton>\n          </template>\n        </ScalarCombobox>\n      </div>\n    </template>\n\n    <!-- Code snippet -->\n    <ScalarErrorBoundary>\n      <DataTable\n        :columns=\"['']\"\n        presentational>\n        <DataTableRow>\n          <div class=\"overflow-hidden\">\n            <ScalarCodeBlock\n              class=\"text-base\"\n              :content=\"generatedCode\"\n              :hideCredentials=\"secretCredentials\"\n              :lang=\"localSelectedClient?.lang ?? 'plaintext'\"\n              lineNumbers />\n          </div>\n        </DataTableRow>\n      </DataTable>\n    </ScalarErrorBoundary>\n  </CollapsibleSection>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,128 @@
+import { findClient } from "../../operation-code-sample/helpers/find-client.js";
+import { getClients } from "../../operation-code-sample/helpers/get-clients.js";
+import { getCustomCodeSamples } from "../../operation-code-sample/helpers/get-custom-code-samples.js";
+import { getSecrets } from "../../operation-code-sample/helpers/get-secrets.js";
+import { generateCodeSnippet } from "../../operation-code-sample/helpers/generate-code-snippet.js";
+import DataTable_default from "../../../components/data-table/DataTable.vue.js";
+import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
+import CollapsibleSection_default from "../../../components/layout/CollapsibleSection.vue.js";
+import { computed, createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, vShow, watch, withCtx, withDirectives } from "vue";
+import { ScalarButton, ScalarCodeBlock, ScalarCombobox, ScalarErrorBoundary } from "@scalar/components";
+import { ScalarIconCaretDown } from "@scalar/icons";
+//#region src/v2/blocks/request-block/components/RequestCodeSnippet.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-1" };
+var _hoisted_2 = { class: "overflow-hidden" };
+var RequestCodeSnippet_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestCodeSnippet",
+	props: {
+		integration: {},
+		clientOptions: {},
+		selectedClient: {},
+		selectedServer: { default: null },
+		selectedContentType: {},
+		selectedExample: {},
+		eventBus: {},
+		securitySchemes: {},
+		method: {},
+		path: {},
+		operation: {},
+		fallback: { type: Boolean },
+		generateLabel: { type: Function },
+		isWebhook: { type: Boolean },
+		globalCookies: {}
+	},
+	setup(__props) {
+		/** Grab any custom code samples from the operation */
+		const customCodeSamples = computed(() => getCustomCodeSamples(__props.operation));
+		/** Merge custom code samples with the client options */
+		const clients = computed(() => getClients(customCodeSamples.value, __props.clientOptions));
+		/**
+		* The locally selected client which would include code samples from this operation only
+		* Must be local state because it contains custom code samples from this operation only
+		*/
+		const localSelectedClient = ref(findClient(clients.value, __props.selectedClient));
+		/** If the globally selected client changes we can update the local one */
+		watch(() => __props.selectedClient, (newClient) => {
+			const client = findClient(clients.value, newClient);
+			if (client) localSelectedClient.value = client;
+		});
+		/** Block secrets from being shown in the code block */
+		const secretCredentials = computed(() => getSecrets(__props.securitySchemes ?? []));
+		/** Handle client change */
+		const handleClientChange = (option) => {
+			localSelectedClient.value = option;
+			if (option && !option.id.startsWith("custom")) __props.eventBus.emit("workspace:update:selected-client", option.id);
+		};
+		/** Generate the code snippet for the selected example */
+		const generatedCode = computed(() => generateCodeSnippet({
+			clientId: localSelectedClient.value?.id,
+			customCodeSamples: customCodeSamples.value,
+			operation: __props.operation,
+			method: __props.method,
+			path: __props.path,
+			contentType: __props.selectedContentType,
+			server: __props.selectedServer,
+			securitySchemes: __props.securitySchemes,
+			example: __props.selectedExample,
+			globalCookies: __props.globalCookies,
+			includeDefaultHeaders: __props.integration === "client"
+		}));
+		/** Check if there are any clients available (built-in or custom code samples) */
+		const hasClients = computed(() => clients.value.some((group) => group.options.length > 0));
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createBlock(unref(CollapsibleSection_default), {
+				class: "group/preview w-full border-t",
+				defaultOpen: false
+			}, {
+				title: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Code Snippet", -1)])]),
+				actions: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarCombobox), {
+					modelValue: localSelectedClient.value,
+					options: clients.value,
+					placement: "bottom-end",
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = (ev) => handleClientChange(ev))
+				}, {
+					default: withCtx(({ open }) => [createVNode(unref(ScalarButton), {
+						class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal",
+						"data-testid": "client-picker",
+						variant: "ghost"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(localSelectedClient.value?.title) + " ", 1), createVNode(unref(ScalarIconCaretDown), {
+							class: normalizeClass(["mt-0.25 size-3 transition-transform duration-100", open && "rotate-180"]),
+							weight: "bold"
+						}, null, 8, ["class"])]),
+						_: 2
+					}, 1024)]),
+					_: 1
+				}, 8, ["modelValue", "options"])])]),
+				default: withCtx(() => [createVNode(unref(ScalarErrorBoundary), null, {
+					default: withCtx(() => [createVNode(unref(DataTable_default), {
+						columns: [""],
+						presentational: ""
+					}, {
+						default: withCtx(() => [createVNode(unref(DataTableRow_default), null, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarCodeBlock), {
+								class: "text-base",
+								content: generatedCode.value,
+								hideCredentials: secretCredentials.value,
+								lang: localSelectedClient.value?.lang ?? "plaintext",
+								lineNumbers: ""
+							}, null, 8, [
+								"content",
+								"hideCredentials",
+								"lang"
+							])])]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			}, 512)), [[vShow, hasClients.value]]);
+		};
+	}
+});
+//#endregion
+export { RequestCodeSnippet_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RequestCodeSnippet.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestCodeSnippet.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestCodeSnippet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarErrorBoundary,\n} from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  findClient,\n  type ClientOption,\n  type CustomClientOption,\n} from '@/v2/blocks/operation-code-sample'\nimport type { OperationCodeSampleProps } from '@/v2/blocks/operation-code-sample/components/OperationCodeSample.vue'\nimport { generateCodeSnippet } from '@/v2/blocks/operation-code-sample/helpers/generate-code-snippet'\nimport { getClients } from '@/v2/blocks/operation-code-sample/helpers/get-clients'\nimport { getCustomCodeSamples } from '@/v2/blocks/operation-code-sample/helpers/get-custom-code-samples'\nimport { getSecrets } from '@/v2/blocks/operation-code-sample/helpers/get-secrets'\nimport { DataTable, DataTableRow } from '@/v2/components/data-table'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nconst {\n  clientOptions,\n  eventBus,\n  operation,\n  method,\n  path,\n  selectedContentType,\n  selectedServer = null,\n  selectedExample,\n  securitySchemes,\n  selectedClient,\n  globalCookies,\n  integration,\n} = defineProps<OperationCodeSampleProps & { eventBus: WorkspaceEventBus }>()\n\n/** Grab any custom code samples from the operation */\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/** Merge custom code samples with the client options */\nconst clients = computed(() =>\n  getClients(customCodeSamples.value, clientOptions),\n)\n\n/**\n * The locally selected client which would include code samples from this operation only\n * Must be local state because it contains custom code samples from this operation only\n */\nconst localSelectedClient = ref<ClientOption | CustomClientOption | undefined>(\n  findClient(clients.value, selectedClient),\n)\n\n/** If the globally selected client changes we can update the local one */\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    const client = findClient(clients.value, newClient)\n    if (client) {\n      localSelectedClient.value = client\n    }\n  },\n)\n\n/** Block secrets from being shown in the code block */\nconst secretCredentials = computed(() => getSecrets(securitySchemes ?? []))\n\n/** Handle client change */\nconst handleClientChange = (option: ClientOption | undefined) => {\n  localSelectedClient.value = option\n\n  // Emit the change if it's not a custom example\n  if (option && !option.id.startsWith('custom')) {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n/** Generate the code snippet for the selected example */\nconst generatedCode = computed<string>(() =>\n  generateCodeSnippet({\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value,\n    operation,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: selectedExample,\n    globalCookies,\n    includeDefaultHeaders: integration === 'client',\n  }),\n)\n\n/** Check if there are any clients available (built-in or custom code samples) */\nconst hasClients = computed(() =>\n  clients.value.some((group) => group.options.length > 0),\n)\n</script>\n\n<template>\n  <CollapsibleSection\n    v-show=\"hasClients\"\n    class=\"group/preview w-full border-t\"\n    :defaultOpen=\"false\">\n    <template #title>Code Snippet</template>\n\n    <!-- Client selector -->\n    <template #actions>\n      <div class=\"flex flex-1\">\n        <ScalarCombobox\n          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          @update:modelValue=\"\n            (ev) => handleClientChange(ev as ClientOption | undefined)\n          \">\n          <template #default=\"{ open }\">\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n              data-testid=\"client-picker\"\n              variant=\"ghost\">\n              {{ localSelectedClient?.title }}\n              <ScalarIconCaretDown\n                class=\"mt-0.25 size-3 transition-transform duration-100\"\n                :class=\"open && 'rotate-180'\"\n                weight=\"bold\" />\n            </ScalarButton>\n          </template>\n        </ScalarCombobox>\n      </div>\n    </template>\n\n    <!-- Code snippet -->\n    <ScalarErrorBoundary>\n      <DataTable\n        :columns=\"['']\"\n        presentational>\n        <DataTableRow>\n          <div class=\"overflow-hidden\">\n            <ScalarCodeBlock\n              class=\"text-base\"\n              :content=\"generatedCode\"\n              :hideCredentials=\"secretCredentials\"\n              :lang=\"localSelectedClient?.lang ?? 'plaintext'\"\n              lineNumbers />\n          </div>\n        </DataTableRow>\n      </DataTable>\n    </ScalarErrorBoundary>\n  </CollapsibleSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,MAAM,oBAAoB,eAAe,qBAAqB,QAAA,UAAU,CAAA;;EAGxE,MAAM,UAAU,eACd,WAAW,kBAAkB,OAAO,QAAA,cAAc,CACpD;;;;;EAMA,MAAM,sBAAsB,IAC1B,WAAW,QAAQ,OAAO,QAAA,eAAe,CAC3C;;AAGA,cACQ,QAAA,iBACL,cAAc;GACb,MAAM,SAAS,WAAW,QAAQ,OAAO,UAAS;AAClD,OAAI,OACF,qBAAoB,QAAQ;IAGlC;;EAGA,MAAM,oBAAoB,eAAe,WAAW,QAAA,mBAAmB,EAAE,CAAC,CAAA;;EAG1E,MAAM,sBAAsB,WAAqC;AAC/D,uBAAoB,QAAQ;AAG5B,OAAI,UAAU,CAAC,OAAO,GAAG,WAAW,SAAS,CAC3C,SAAA,SAAS,KAAK,oCAAoC,OAAO,GAAE;;;EAK/D,MAAM,gBAAgB,eACpB,oBAAoB;GAClB,UAAU,oBAAoB,OAAO;GACrC,mBAAmB,kBAAkB;GACrC,WAAQ,QAAA;GACR,QAAK,QAAA;GACL,MAAG,QAAA;GACH,aAAa,QAAA;GACb,QAAQ,QAAA;GACR,iBAAc,QAAA;GACd,SAAS,QAAA;GACT,eAAY,QAAA;GACZ,uBAAuB,QAAA,gBAAgB;GACxC,CAAC,CACJ;;EAGA,MAAM,aAAa,eACjB,QAAQ,MAAM,MAAM,UAAU,MAAM,QAAQ,SAAS,EAAE,CACzD;;uCAIE,YAiDqB,MAAA,2BAAA,EAAA;IA/CnB,OAAM;IACL,aAAa;;IACH,OAAK,cAAa,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAZ,gBAAY,GAAA,CAAA,EAAA,CAAA;IAGlB,SAAO,cAsBV,CArBN,mBAqBM,OArBN,YAqBM,CApBJ,YAmBiB,MAAA,eAAA,EAAA;KAlBd,YAAY,oBAAA;KACZ,SAAS,QAAA;KACV,WAAU;KACT,uBAAiB,OAAA,OAAA,OAAA,MAAgB,OAAO,mBAAmB,GAAE;;KAGnD,SAAO,SAUD,EAVK,WAAI,CACxB,YASe,MAAA,aAAA,EAAA;MARb,OAAM;MACN,eAAY;MACZ,SAAQ;;6BACwB,CAAA,gBAAA,gBAA7B,oBAAA,OAAqB,MAAK,GAAG,KAChC,EAAA,EAAA,YAGkB,MAAA,oBAAA,EAAA;OAFhB,OAAK,eAAA,CAAC,oDACE,QAAI,aAAA,CAAA;OACZ,QAAO;;;;;;2BAuBG,CAftB,YAesB,MAAA,oBAAA,EAAA,MAAA;4BADR,CAbZ,YAaY,MAAA,kBAAA,EAAA;MAZT,SAAS,CAAA,GAAI;MACd,gBAAA;;6BAUe,CATf,YASe,MAAA,qBAAA,EAAA,MAAA;8BADP,CAPN,mBAOM,OAPN,YAOM,CANJ,YAKgB,MAAA,gBAAA,EAAA;QAJd,OAAM;QACL,SAAS,cAAA;QACT,iBAAiB,kBAAA;QACjB,MAAM,oBAAA,OAAqB,QAAI;QAChC,aAAA;;;;;;;;;;;;;sBA3CF,WAAA,MAAU,CAAA,CAAA"}

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

@@ -1,6 +1,6 @@
 import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments';
-import type { TableRow } from './RequestTableRow.vue';
+import type { TableRow } from './RequestTableRow.vue.js';
 type __VLS_Props = {
     rows: TableRow[];
     exampleKey: string;

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

@@ -0,0 +1,7 @@
+import RequestParams_vue_vue_type_script_setup_true_lang_default from "./RequestParams.vue.script.js";
+//#region src/v2/blocks/request-block/components/RequestParams.vue
+var RequestParams_default = RequestParams_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RequestParams_default as default };
+
+//# sourceMappingURL=RequestParams.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestParams.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestParams.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTooltip } from '@scalar/components'\nimport type {\n  ApiReferenceEvents,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport RequestTable from './RequestTable.vue'\nimport type { TableRow } from './RequestTableRow.vue'\n\nconst {\n  rows,\n  exampleKey,\n  environment,\n  title,\n  globalRoute,\n  showAddRowPlaceholder = true,\n  eventBus,\n} = defineProps<{\n  rows: TableRow[]\n  exampleKey: string\n  title: string\n  label?: string\n  invalidParams?: Set<string>\n  globalRoute?: string\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n}>()\n\nconst emit = defineEmits<{\n  (\n    e: 'upsert',\n    index: number,\n    payload: ApiReferenceEvents['operation:upsert:parameter']['payload'],\n  ): void\n  (e: 'delete', payload: { index: number }): void\n  (e: 'deleteAll'): void\n}>()\n\nconst showTooltip = computed(() => rows.length > 1)\n\n/** Needed for type guard */\nconst handleUpserRow = (\n  index: number,\n  payload: {\n    name: string\n    value: string | File | undefined\n    isDisabled: boolean\n  },\n) => {\n  const { value, ...rest } = payload\n\n  // Type guard here as we cannot add files to params\n  if (value instanceof File) {\n    return\n  }\n\n  emit('upsert', index, { ...rest, value: value ?? '' })\n}\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params\"\n    :itemCount=\"rows.length\">\n    <template #title>{{ title }}</template>\n    <template #actions>\n      <div\n        class=\"text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100\">\n        <ScalarTooltip\n          v-if=\"showTooltip\"\n          content=\"Clear optional parameters\"\n          placement=\"left\">\n          <ScalarButton\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"emit('deleteAll')\">\n            Clear\n            <span class=\"sr-only\">All {{ title }}</span>\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <RequestTable\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :data=\"rows\"\n      :environment=\"environment\"\n      :exampleKey=\"exampleKey\"\n      :globalRoute=\"globalRoute\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showAddRowPlaceholder=\"showAddRowPlaceholder\"\n      @deleteRow=\"(index) => emit('delete', { index })\"\n      @navigate=\"(route) => eventBus.emit('ui:navigate', route)\"\n      @upsertRow=\"handleUpserRow\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":""}