@scalar/api-client 2.38.4 → 2.39.0

package/dist/views/Request/RequestSection/RequestAuth/RequestAuthTab.vue.script.js

@@ -0,0 +1,205 @@
+import { useWorkspace } from "../../../../store/store.js";
+import DataTableCell_default from "../../../../components/DataTable/DataTableCell.vue.js";
+import DataTableRow_default from "../../../../components/DataTable/DataTableRow.vue.js";
+import { updateScheme } from "../helpers/update-scheme.js";
+import { restoreAuthFromLocalStorage } from "./helpers/restore-auth-from-local-storage.js";
+import RequestAuthDataTableInput_default from "./RequestAuthDataTableInput.vue.js";
+import OAuth2_default from "./OAuth2.vue.js";
+import { Fragment, capitalize, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { ScalarMarkdownSummary } from "@scalar/components";
+//#region src/views/Request/RequestSection/RequestAuth/RequestAuthTab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "bg-b-1 text-c-2 outline-b-3 top-0 z-1 h-full w-full overflow-hidden px-3 py-1.25 text-ellipsis group-hover/auth:absolute group-hover/auth:h-auto group-hover/auth:border-b *:first:line-clamp-1 *:first:text-ellipsis group-hover/auth:*:first:line-clamp-none" };
+var _hoisted_2 = {
+	key: 0,
+	class: "flex min-h-8 border-t text-base"
+};
+var _hoisted_3 = { class: "flex h-8 max-w-full gap-2.5 overflow-x-auto px-3" };
+var _hoisted_4 = ["onClick"];
+var _hoisted_5 = { class: "relative z-10" };
+var RequestAuthTab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestAuthTab",
+	props: {
+		collection: {},
+		environment: {},
+		envVariables: {},
+		layout: {},
+		persistAuth: {
+			type: Boolean,
+			default: false
+		},
+		securitySchemeUids: {},
+		server: {},
+		workspace: {}
+	},
+	emits: ["authorized"],
+	setup(__props, { emit: __emit }) {
+		const emits = __emit;
+		const storeContext = useWorkspace();
+		const { securitySchemes } = storeContext;
+		const security = computed(() => __props.securitySchemeUids.map((uid) => ({ scheme: securitySchemes[uid] })));
+		const activeFlow = ref("");
+		const generateLabel = (scheme) => {
+			const description = scheme.description ? `: ${scheme.description}` : "";
+			const baseLabel = `${capitalize(scheme.nameKey)}${description || `: ${scheme.type}`}`;
+			if (scheme.type === "apiKey") return `${capitalize(scheme.nameKey)}${description || `: ${scheme.in}`}`;
+			if (scheme.type === "oauth2") {
+				const firstFlow = Object.values(scheme.flows ?? {})[0];
+				return `${capitalize(scheme.nameKey)}: ${activeFlow.value ? activeFlow.value : firstFlow?.type ?? ""}${description}`;
+			}
+			if (scheme.type === "http") return `${capitalize(scheme.nameKey)}: ${scheme.scheme}${description}`;
+			return `${baseLabel}${description}`;
+		};
+		/** Wrapper for the updateScheme function */
+		const updateScheme$1 = (uid, path, value) => {
+			updateScheme(uid, path, value, storeContext, __props.persistAuth);
+		};
+		onMounted(() => {
+			if (!__props.persistAuth) return;
+			restoreAuthFromLocalStorage(storeContext, __props.collection.uid);
+		});
+		/** To make prop drilling a little easier */
+		const dataTableInputProps = {
+			environment: __props.environment,
+			envVariables: __props.envVariables,
+			workspace: __props.workspace
+		};
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(security.value, ({ scheme }) => {
+				return openBlock(), createElementBlock(Fragment, { key: scheme?.uid }, [
+					security.value.length > 1 && scheme ? (openBlock(), createBlock(unref(DataTableRow_default), { key: 0 }, {
+						default: withCtx(() => [createVNode(unref(DataTableCell_default), {
+							"aria-label": generateLabel(scheme),
+							class: "text-c-2 group/auth flex items-center leading-[22px] whitespace-nowrap outline-none hover:whitespace-normal"
+						}, {
+							default: withCtx(() => [createElementVNode("p", _hoisted_1, toDisplayString(generateLabel(scheme)), 1)]),
+							_: 2
+						}, 1032, ["aria-label"])]),
+						_: 2
+					}, 1024)) : createCommentVNode("", true),
+					scheme?.description && security.value.length <= 1 ? (openBlock(), createBlock(unref(DataTableRow_default), { key: 1 }, {
+						default: withCtx(() => [createVNode(unref(DataTableCell_default), {
+							"aria-label": scheme.description,
+							class: "max-h-[auto]"
+						}, {
+							default: withCtx(() => [createVNode(unref(ScalarMarkdownSummary), {
+								class: "auth-description bg-b-1 text-c-2 min-w-0 flex-1 px-3 py-1.25",
+								value: scheme.description
+							}, null, 8, ["value"])]),
+							_: 2
+						}, 1032, ["aria-label"])]),
+						_: 2
+					}, 1024)) : createCommentVNode("", true),
+					scheme?.type === "http" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [scheme.scheme === "bearer" ? (openBlock(), createBlock(unref(DataTableRow_default), { key: 0 }, {
+						default: withCtx(() => [createVNode(RequestAuthDataTableInput_default, mergeProps({ ref_for: true }, dataTableInputProps, {
+							containerClass: __props.layout === "reference" && "border-t",
+							modelValue: scheme.token,
+							placeholder: "Token",
+							type: "password",
+							"onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "token", v)
+						}), {
+							default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Bearer Token ", -1)])]),
+							_: 1
+						}, 16, [
+							"containerClass",
+							"modelValue",
+							"onUpdate:modelValue"
+						])]),
+						_: 2
+					}, 1024)) : scheme?.scheme === "basic" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(DataTableRow_default), null, {
+						default: withCtx(() => [createVNode(RequestAuthDataTableInput_default, mergeProps({ ref_for: true }, dataTableInputProps, {
+							class: "text-c-2",
+							modelValue: scheme.username,
+							placeholder: "janedoe",
+							required: "",
+							"onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "username", v)
+						}), {
+							default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Username ", -1)])]),
+							_: 1
+						}, 16, ["modelValue", "onUpdate:modelValue"])]),
+						_: 2
+					}, 1024), createVNode(unref(DataTableRow_default), null, {
+						default: withCtx(() => [createVNode(RequestAuthDataTableInput_default, mergeProps({ ref_for: true }, dataTableInputProps, {
+							modelValue: scheme.password,
+							placeholder: "********",
+							type: "password",
+							"onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "password", v)
+						}), {
+							default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Password ", -1)])]),
+							_: 1
+						}, 16, ["modelValue", "onUpdate:modelValue"])]),
+						_: 2
+					}, 1024)], 64)) : createCommentVNode("", true)], 64)) : scheme?.type === "apiKey" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createVNode(unref(DataTableRow_default), null, {
+						default: withCtx(() => [createVNode(RequestAuthDataTableInput_default, mergeProps({ ref_for: true }, dataTableInputProps, {
+							containerClass: __props.layout === "reference" && "border-t",
+							modelValue: scheme.name,
+							placeholder: "api-key",
+							"onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "name", v)
+						}), {
+							default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Name ", -1)])]),
+							_: 1
+						}, 16, [
+							"containerClass",
+							"modelValue",
+							"onUpdate:modelValue"
+						])]),
+						_: 2
+					}, 1024), createVNode(unref(DataTableRow_default), null, {
+						default: withCtx(() => [createVNode(RequestAuthDataTableInput_default, mergeProps({ ref_for: true }, dataTableInputProps, {
+							modelValue: scheme.value,
+							placeholder: "QUxMIFlPVVIgQkFTRSBBUkUgQkVMT05HIFRPIFVT",
+							type: "password",
+							"onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "value", v)
+						}), {
+							default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" Value ", -1)])]),
+							_: 1
+						}, 16, ["modelValue", "onUpdate:modelValue"])]),
+						_: 2
+					}, 1024)], 64)) : scheme?.type === "oauth2" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [createVNode(unref(DataTableRow_default), null, {
+						default: withCtx(() => [Object.keys(scheme.flows).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(scheme?.flows, (_, key, ind) => {
+							return openBlock(), createElementBlock("button", {
+								key,
+								class: normalizeClass(["floating-bg text-c-3 relative cursor-pointer border-b-[1px] border-transparent py-1 text-base font-medium", {
+									"!text-c-1 !rounded-none border-b-[1px] !border-current": __props.layout !== "reference" && (activeFlow.value === key || ind === 0 && !activeFlow.value),
+									"!text-c-1 !rounded-none border-b-[1px] !border-current opacity-100": __props.layout === "reference" && (activeFlow.value === key || ind === 0 && !activeFlow.value)
+								}]),
+								type: "button",
+								onClick: ($event) => activeFlow.value = key
+							}, [createElementVNode("span", _hoisted_5, toDisplayString(key), 1)], 10, _hoisted_4);
+						}), 128))])])) : createCommentVNode("", true)]),
+						_: 2
+					}, 1024), (openBlock(true), createElementBlock(Fragment, null, renderList(scheme?.flows, (flow, key, ind) => {
+						return openBlock(), createElementBlock(Fragment, { key }, [activeFlow.value === key || ind === 0 && !activeFlow.value ? (openBlock(), createBlock(OAuth2_default, mergeProps({
+							key: 0,
+							ref_for: true
+						}, dataTableInputProps, {
+							collection: __props.collection,
+							flow,
+							persistAuth: __props.persistAuth,
+							scheme,
+							server: __props.server,
+							workspace: __props.workspace,
+							onAuthorized: _cache[0] || (_cache[0] = ($event) => emits("authorized"))
+						}), {
+							"oauth-actions": withCtx(() => [renderSlot(_ctx.$slots, "oauth-actions")]),
+							_: 3
+						}, 16, [
+							"collection",
+							"flow",
+							"persistAuth",
+							"scheme",
+							"server",
+							"workspace"
+						])) : createCommentVNode("", true)], 64);
+					}), 128))], 64)) : scheme?.type === "openIdConnect" ? (openBlock(), createElementBlock("div", {
+						key: 5,
+						class: normalizeClass(["text-c-3 bg-b-1 flex min-h-[calc(4rem+1px)] items-center justify-center border-t border-b-0 px-4 text-base", { "rounded-b-lg": __props.layout === "reference" }])
+					}, " Coming soon ", 2)) : createCommentVNode("", true)
+				], 64);
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { RequestAuthTab_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RequestAuthTab.vue.script.js.map

package/dist/views/Request/RequestSection/RequestAuth/RequestAuthTab.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestAuthTab.vue.script.js","names":[],"sources":["../../../../../src/views/Request/RequestSection/RequestAuth/RequestAuthTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdownSummary } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type {\n  Collection,\n  SecurityScheme,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport type { Path, PathValue } from '@scalar/object-utils/nested'\nimport { capitalize, computed, onMounted, ref } from 'vue'\n\nimport { DataTableCell, DataTableRow } from '@/components/DataTable'\nimport type { EnvVariable } from '@/store/active-entities'\nimport { useWorkspace } from '@/store/store'\nimport { updateScheme as _updateScheme } from '@/views/Request/RequestSection/helpers/update-scheme'\nimport { restoreAuthFromLocalStorage } from '@/views/Request/RequestSection/RequestAuth/helpers/restore-auth-from-local-storage'\n\nimport OAuth2 from './OAuth2.vue'\nimport RequestAuthDataTableInput from './RequestAuthDataTableInput.vue'\n\nconst {\n  collection,\n  environment,\n  envVariables,\n  layout,\n  persistAuth = false,\n  securitySchemeUids,\n  server,\n  workspace,\n} = defineProps<{\n  collection: Collection\n  environment: Environment\n  envVariables: EnvVariable[]\n  layout: 'client' | 'reference'\n  persistAuth: boolean\n  securitySchemeUids: string[]\n  server: Server | undefined\n  workspace: Workspace\n}>()\n\nconst emits = defineEmits<{\n  authorized: []\n}>()\n\ndefineSlots<{\n  'oauth-actions'?: () => unknown\n}>()\n\nconst storeContext = useWorkspace()\nconst { securitySchemes } = storeContext\nconst security = computed(() =>\n  securitySchemeUids.map((uid) => ({\n    scheme: securitySchemes[uid],\n  })),\n)\n\nconst activeFlow = ref('')\n\nconst generateLabel = (scheme: SecurityScheme) => {\n  // ApiKeyHeader: header\n  const description = scheme.description ? `: ${scheme.description}` : ''\n  const baseLabel = `${capitalize(scheme.nameKey)}${description || `: ${scheme.type}`}`\n\n  if (scheme.type === 'apiKey') {\n    return `${capitalize(scheme.nameKey)}${description || `: ${scheme.in}`}`\n  }\n\n  // OAuth2: Authorization Code\n  if (scheme.type === 'oauth2') {\n    const firstFlow = Object.values(scheme.flows ?? {})[0]\n\n    return `${capitalize(scheme.nameKey)}: ${\n      activeFlow.value ? activeFlow.value : (firstFlow?.type ?? '')\n    }${description}`\n  }\n\n  // HTTP: Bearer\n  if (scheme.type === 'http') {\n    return `${capitalize(scheme.nameKey)}: ${scheme.scheme}${description}`\n  }\n\n  // Default\n  return `${baseLabel}${description}`\n}\n\n/** Wrapper for the updateScheme function */\nconst updateScheme = <\n  U extends SecurityScheme['uid'],\n  P extends Path<SecurityScheme>,\n>(\n  uid: U,\n  path: P,\n  value: NonNullable<PathValue<SecurityScheme, P>>,\n) => {\n  _updateScheme(uid, path, value, storeContext, persistAuth)\n}\n\n// Restore auth from local storage on mount\nonMounted(() => {\n  if (!persistAuth) {\n    return\n  }\n\n  restoreAuthFromLocalStorage(storeContext, collection.uid)\n})\n\n/** To make prop drilling a little easier */\nconst dataTableInputProps = {\n  environment,\n  envVariables,\n  workspace,\n}\n</script>\n<template>\n  <!-- Loop over for multiple auth selection -->\n  <template\n    v-for=\"{ scheme } in security\"\n    :key=\"scheme?.uid\">\n    <!-- Header -->\n    <DataTableRow v-if=\"security.length > 1 && scheme\">\n      <DataTableCell\n        :aria-label=\"generateLabel(scheme)\"\n        class=\"text-c-2 group/auth flex items-center leading-[22px] whitespace-nowrap outline-none hover:whitespace-normal\">\n        <p\n          class=\"bg-b-1 text-c-2 outline-b-3 top-0 z-1 h-full w-full overflow-hidden px-3 py-1.25 text-ellipsis group-hover/auth:absolute group-hover/auth:h-auto group-hover/auth:border-b *:first:line-clamp-1 *:first:text-ellipsis group-hover/auth:*:first:line-clamp-none\">\n          {{ generateLabel(scheme) }}\n        </p>\n      </DataTableCell>\n    </DataTableRow>\n\n    <!-- Description -->\n    <DataTableRow v-if=\"scheme?.description && security.length <= 1\">\n      <DataTableCell\n        :aria-label=\"scheme.description\"\n        class=\"max-h-[auto]\">\n        <ScalarMarkdownSummary\n          class=\"auth-description bg-b-1 text-c-2 min-w-0 flex-1 px-3 py-1.25\"\n          :value=\"scheme.description\" />\n      </DataTableCell>\n    </DataTableRow>\n\n    <!-- HTTP -->\n    <template v-if=\"scheme?.type === 'http'\">\n      <!-- Bearer -->\n      <DataTableRow v-if=\"scheme.scheme === 'bearer'\">\n        <RequestAuthDataTableInput\n          v-bind=\"dataTableInputProps\"\n          :containerClass=\"layout === 'reference' && 'border-t'\"\n          :modelValue=\"scheme.token\"\n          placeholder=\"Token\"\n          type=\"password\"\n          @update:modelValue=\"(v) => updateScheme(scheme.uid, 'token', v)\">\n          Bearer Token\n        </RequestAuthDataTableInput>\n      </DataTableRow>\n\n      <!-- HTTP Basic -->\n      <template v-else-if=\"scheme?.scheme === 'basic'\">\n        <DataTableRow>\n          <RequestAuthDataTableInput\n            v-bind=\"dataTableInputProps\"\n            class=\"text-c-2\"\n            :modelValue=\"scheme.username\"\n            placeholder=\"janedoe\"\n            required\n            @update:modelValue=\"(v) => updateScheme(scheme.uid, 'username', v)\">\n            Username\n          </RequestAuthDataTableInput>\n        </DataTableRow>\n        <DataTableRow>\n          <RequestAuthDataTableInput\n            v-bind=\"dataTableInputProps\"\n            :modelValue=\"scheme.password\"\n            placeholder=\"********\"\n            type=\"password\"\n            @update:modelValue=\"(v) => updateScheme(scheme.uid, 'password', v)\">\n            Password\n          </RequestAuthDataTableInput>\n        </DataTableRow>\n      </template>\n    </template>\n\n    <!-- API Key -->\n    <template v-else-if=\"scheme?.type === 'apiKey'\">\n      <DataTableRow>\n        <RequestAuthDataTableInput\n          v-bind=\"dataTableInputProps\"\n          :containerClass=\"layout === 'reference' && 'border-t'\"\n          :modelValue=\"scheme.name\"\n          placeholder=\"api-key\"\n          @update:modelValue=\"(v) => updateScheme(scheme.uid, 'name', v)\">\n          Name\n        </RequestAuthDataTableInput>\n      </DataTableRow>\n      <DataTableRow>\n        <RequestAuthDataTableInput\n          v-bind=\"dataTableInputProps\"\n          :modelValue=\"scheme.value\"\n          placeholder=\"QUxMIFlPVVIgQkFTRSBBUkUgQkVMT05HIFRPIFVT\"\n          type=\"password\"\n          @update:modelValue=\"(v) => updateScheme(scheme.uid, 'value', v)\">\n          Value\n        </RequestAuthDataTableInput>\n      </DataTableRow>\n    </template>\n\n    <!-- OAuth 2 -->\n    <template v-else-if=\"scheme?.type === 'oauth2'\">\n      <DataTableRow>\n        <div\n          v-if=\"Object.keys(scheme.flows).length > 1\"\n          class=\"flex min-h-8 border-t text-base\">\n          <div class=\"flex h-8 max-w-full gap-2.5 overflow-x-auto px-3\">\n            <button\n              v-for=\"(_, key, ind) in scheme?.flows\"\n              :key=\"key\"\n              class=\"floating-bg text-c-3 relative cursor-pointer border-b-[1px] border-transparent py-1 text-base font-medium\"\n              :class=\"{\n                '!text-c-1 !rounded-none border-b-[1px] !border-current':\n                  layout !== 'reference' &&\n                  (activeFlow === key || (ind === 0 && !activeFlow)),\n                '!text-c-1 !rounded-none border-b-[1px] !border-current opacity-100':\n                  layout === 'reference' &&\n                  (activeFlow === key || (ind === 0 && !activeFlow)),\n              }\"\n              type=\"button\"\n              @click=\"activeFlow = key\">\n              <span class=\"relative z-10\">{{ key }}</span>\n            </button>\n          </div>\n        </div>\n      </DataTableRow>\n      <template\n        v-for=\"(flow, key, ind) in scheme?.flows\"\n        :key=\"key\">\n        <OAuth2\n          v-if=\"activeFlow === key || (ind === 0 && !activeFlow)\"\n          v-bind=\"dataTableInputProps\"\n          :collection=\"collection\"\n          :flow=\"flow!\"\n          :persistAuth=\"persistAuth\"\n          :scheme=\"scheme\"\n          :server=\"server\"\n          :workspace=\"workspace\"\n          @authorized=\"emits('authorized')\">\n          <template #oauth-actions>\n            <slot name=\"oauth-actions\" />\n          </template>\n        </OAuth2>\n      </template>\n    </template>\n\n    <!-- Open ID Connect -->\n    <template v-else-if=\"scheme?.type === 'openIdConnect'\">\n      <div\n        class=\"text-c-3 bg-b-1 flex min-h-[calc(4rem+1px)] items-center justify-center border-t border-b-0 px-4 text-base\"\n        :class=\"{ 'rounded-b-lg': layout === 'reference' }\">\n        Coming soon\n      </div>\n    </template>\n  </template>\n</template>\n"],"mappings":"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"}

package/dist/views/Request/RequestSection/RequestAuth/helpers/restore-auth-from-local-storage.d.ts

@@ -1,4 +1,4 @@
-import type { WorkspaceStore } from '../../../../../store/store';
+import type { WorkspaceStore } from '../../../../../store/store.js';
 /**
  * Manually restore the auth from local storage
  *

package/dist/views/Request/RequestSection/RequestAuth/helpers/restore-auth-from-local-storage.js

@@ -0,0 +1,39 @@
+import { CLIENT_LS_KEYS, safeLocalStorage } from "@scalar/helpers/object/local-storage";
+import { isDefined } from "@scalar/helpers/array/is-defined";
+//#region src/views/Request/RequestSection/RequestAuth/helpers/restore-auth-from-local-storage.ts
+/**
+* Manually restore the auth from local storage
+*
+* Only use this if you need to restore auth manually, in the client web + app we load the whole store from
+* local storage so it isn't needed there.
+*/
+var restoreAuthFromLocalStorage = (store, collectionUid) => {
+	try {
+		const { collectionMutators, securitySchemes, securitySchemeMutators } = store;
+		const auth = JSON.parse(safeLocalStorage().getItem(CLIENT_LS_KEYS.AUTH) ?? "{}");
+		/** Map the security scheme name key to the uid */
+		const dict = Object.keys(securitySchemes).reduce((acc, key) => {
+			const scheme = securitySchemes[key];
+			if (scheme) acc[scheme.nameKey] = scheme.uid;
+			return acc;
+		}, {});
+		/** Now we can use the dict to restore the auth from local storage */
+		Object.entries(auth).forEach(([key, entry]) => {
+			const uid = dict[key];
+			if (uid) Object.entries(entry).forEach(([path, value]) => {
+				securitySchemeMutators.edit(uid, path, value);
+			});
+		});
+		const uids = JSON.parse(safeLocalStorage().getItem(CLIENT_LS_KEYS.SELECTED_SECURITY_SCHEMES) ?? "[]").map((nameKeys) => {
+			if (Array.isArray(nameKeys)) return nameKeys.map((key) => dict[key]).filter(isDefined);
+			return dict[nameKeys];
+		}).filter(isDefined);
+		collectionMutators.edit(collectionUid, "selectedSecuritySchemeUids", uids);
+	} catch (e) {
+		console.error(e);
+	}
+};
+//#endregion
+export { restoreAuthFromLocalStorage };
+
+//# sourceMappingURL=restore-auth-from-local-storage.js.map

package/dist/views/Request/RequestSection/RequestAuth/helpers/restore-auth-from-local-storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restore-auth-from-local-storage.js","names":[],"sources":["../../../../../../src/views/Request/RequestSection/RequestAuth/helpers/restore-auth-from-local-storage.ts"],"sourcesContent":["import { isDefined } from '@scalar/helpers/array/is-defined'\nimport { CLIENT_LS_KEYS, safeLocalStorage } from '@scalar/helpers/object/local-storage'\nimport type { Collection, SecurityScheme } from '@scalar/oas-utils/entities/spec'\nimport type { Path } from '@scalar/object-utils/nested'\nimport type { Entries } from 'type-fest'\n\nimport type { WorkspaceStore } from '@/store/store'\nimport type { Auth } from '@/views/Request/RequestSection/helpers/update-scheme'\n\n/**\n * Manually restore the auth from local storage\n *\n * Only use this if you need to restore auth manually, in the client web + app we load the whole store from\n * local storage so it isn't needed there.\n */\nexport const restoreAuthFromLocalStorage = (store: WorkspaceStore, collectionUid: string) => {\n  try {\n    const { collectionMutators, securitySchemes, securitySchemeMutators } = store\n    const auth: Auth<Path<SecurityScheme>> = JSON.parse(safeLocalStorage().getItem(CLIENT_LS_KEYS.AUTH) ?? '{}')\n\n    /** Map the security scheme name key to the uid */\n    const dict = Object.keys(securitySchemes).reduce(\n      (acc, key) => {\n        const scheme = securitySchemes[key]\n        if (scheme) {\n          acc[scheme.nameKey] = scheme.uid\n        }\n        return acc\n      },\n      {} as Record<string, SecurityScheme['uid']>,\n    )\n\n    /** Now we can use the dict to restore the auth from local storage */\n    Object.entries(auth).forEach(([key, entry]) => {\n      const uid = dict[key]\n      if (uid) {\n        const entries = Object.entries(entry) as Entries<typeof entry>\n        entries.forEach(([path, value]) => {\n          securitySchemeMutators.edit(uid, path, value)\n        })\n      }\n    })\n\n    /** Restore the selected security scheme uids */\n    const selectedSchemeUids: (string | string[])[] = JSON.parse(\n      safeLocalStorage().getItem(CLIENT_LS_KEYS.SELECTED_SECURITY_SCHEMES) ?? '[]',\n    )\n\n    // Convert back to uids\n    const uids = selectedSchemeUids\n      .map((nameKeys) => {\n        if (Array.isArray(nameKeys)) {\n          return nameKeys.map((key) => dict[key]).filter(isDefined)\n        }\n        return dict[nameKeys]\n      })\n      .filter(isDefined)\n\n    collectionMutators.edit(collectionUid as Collection['uid'], 'selectedSecuritySchemeUids', uids)\n  } catch (e) {\n    // Nothing to restore\n    console.error(e)\n  }\n}\n"],"mappings":";;;;;;;;;AAeA,IAAa,+BAA+B,OAAuB,kBAA0B;AAC3F,KAAI;EACF,MAAM,EAAE,oBAAoB,iBAAiB,2BAA2B;EACxE,MAAM,OAAmC,KAAK,MAAM,kBAAkB,CAAC,QAAQ,eAAe,KAAK,IAAI,KAAK;;EAG5G,MAAM,OAAO,OAAO,KAAK,gBAAgB,CAAC,QACvC,KAAK,QAAQ;GACZ,MAAM,SAAS,gBAAgB;AAC/B,OAAI,OACF,KAAI,OAAO,WAAW,OAAO;AAE/B,UAAO;KAET,EAAE,CACH;;AAGD,SAAO,QAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,WAAW;GAC7C,MAAM,MAAM,KAAK;AACjB,OAAI,IACc,QAAO,QAAQ,MAAM,CAC7B,SAAS,CAAC,MAAM,WAAW;AACjC,2BAAuB,KAAK,KAAK,MAAM,MAAM;KAC7C;IAEJ;EAQF,MAAM,OAL4C,KAAK,MACrD,kBAAkB,CAAC,QAAQ,eAAe,0BAA0B,IAAI,KACzE,CAIE,KAAK,aAAa;AACjB,OAAI,MAAM,QAAQ,SAAS,CACzB,QAAO,SAAS,KAAK,QAAQ,KAAK,KAAK,CAAC,OAAO,UAAU;AAE3D,UAAO,KAAK;IACZ,CACD,OAAO,UAAU;AAEpB,qBAAmB,KAAK,eAAoC,8BAA8B,KAAK;UACxF,GAAG;AAEV,UAAQ,MAAM,EAAE"}

package/dist/views/Request/RequestSection/RequestAuth/index.d.ts

@@ -1,4 +1,4 @@
-export { restoreAuthFromLocalStorage } from './helpers/restore-auth-from-local-storage';
-export { default as RequestAuth } from './RequestAuth.vue';
-export { default as RequestAuthDataTable } from './RequestAuthDataTable.vue';
+export { restoreAuthFromLocalStorage } from './helpers/restore-auth-from-local-storage.js';
+export { default as RequestAuth } from './RequestAuth.vue.js';
+export { default as RequestAuthDataTable } from './RequestAuthDataTable.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/views/Request/RequestSection/RequestAuth/index.js

@@ -1,4 +1,4 @@
-import "../../../../CodeInput-BTN8cC5h.js";
-import "../../../../DataTableInput-RydMDjn2.js";
-import { n as RequestAuthDataTable_default, r as restoreAuthFromLocalStorage, t as RequestAuth_default } from "../../../../RequestAuth-1cRH3DDn.js";
+import { restoreAuthFromLocalStorage } from "./helpers/restore-auth-from-local-storage.js";
+import RequestAuthDataTable_default from "./RequestAuthDataTable.vue.js";
+import RequestAuth_default from "./RequestAuth.vue.js";
 export { RequestAuth_default as RequestAuth, RequestAuthDataTable_default as RequestAuthDataTable, restoreAuthFromLocalStorage };

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

@@ -1,7 +1,7 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
 import { type Operation, type RequestExample } from '@scalar/oas-utils/entities/spec';
 import type { Workspace } from '@scalar/oas-utils/entities/workspace';
-import type { EnvVariable } from '../../../store/active-entities';
+import type { EnvVariable } from '../../../store/active-entities.js';
 type __VLS_Props = {
     example: RequestExample;
     operation: Operation;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestBody.vue.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":""}