@scalar/api-client 3.19.3 → 3.21.0

package/dist/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarIcon } from "@scalar/components/icon";
@@ -6,15 +7,18 @@ import { ScalarDropdown, ScalarDropdownDivider, ScalarDropdownItem } from "@scal
 var _hoisted_1 = { class: "relative flex items-center" };
 var _hoisted_2 = { class: "flex max-w-[220px] min-w-0 items-center gap-1.5" };
 var _hoisted_3 = { class: "text-xxs block max-w-[160px] min-w-0 truncate text-left font-medium" };
-var _hoisted_4 = { class: "min-w-0 flex-1 truncate" };
-var _hoisted_5 = { class: "bg-c-accent text-b-1 mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full p-[3px]" };
-var _hoisted_6 = { class: "min-w-0 flex-1 text-left" };
-var _hoisted_7 = { class: "block truncate" };
-var _hoisted_8 = { class: "flex h-4 w-4 items-center justify-center" };
-var _hoisted_9 = {
+var _hoisted_4 = { class: "text-c-2" };
+var _hoisted_5 = { class: "min-w-0 flex-1 truncate" };
+var _hoisted_6 = { class: "bg-c-accent text-b-1 mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full p-[3px]" };
+var _hoisted_7 = { class: "min-w-0 flex-1 text-left" };
+var _hoisted_8 = { class: "block truncate" };
+var _hoisted_9 = { class: "text-c-3 block truncate text-xs" };
+var _hoisted_10 = { class: "flex h-4 w-4 items-center justify-center" };
+var _hoisted_11 = {
 	key: 5,
 	class: "text-c-3 px-2 py-1.5 text-xs"
 };
+var _hoisted_12 = { class: "mb-1" };
 var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "EnvironmentSelector",
 	props: {
@@ -24,6 +28,7 @@ var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 	emits: ["select:environment", "add:environment"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		/** Whether an environment is currently active */
 		const hasActiveEnvironment = computed(() => !!__props.activeEnvironment);
 		/** Whether environments exist */
@@ -37,10 +42,10 @@ var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		const hasMissingActiveEnvironment = computed(() => hasActiveEnvironment.value && !hasSelectedEnvironmentInOptions.value);
 		/** Display text for the button */
 		const displayText = computed(() => {
-			if (hasMissingActiveEnvironment.value) return `${__props.activeEnvironment} (Unavailable)`;
+			if (hasMissingActiveEnvironment.value) return translate("apiClient.environmentSelector.unavailable", { name: __props.activeEnvironment ?? "" });
 			if (hasActiveEnvironment.value) return __props.activeEnvironment;
-			if (!hasEnvironments.value) return "Add Environment";
-			return "Select Environment";
+			if (!hasEnvironments.value) return translate("apiClient.environmentSelector.add");
+			return translate("apiClient.environmentSelector.select");
 		});
 		/** Button styling based on state */
 		const buttonClass = computed(() => {
@@ -67,7 +72,7 @@ var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 							class: "size-2.5",
 							icon: "Checkmark",
 							thickness: "3"
-						})], 2), _cache[1] || (_cache[1] = createElementVNode("span", { class: "text-c-2" }, "No Environment", -1))]),
+						})], 2), createElementVNode("span", _hoisted_4, toDisplayString(unref(translate)("apiClient.environmentSelector.noEnvironment")), 1)]),
 						_: 1
 					})) : createCommentVNode("", true),
 					hasActiveEnvironment.value && hasEnvironments.value ? (openBlock(), createBlock(unref(ScalarDropdownDivider), { key: 1 })) : createCommentVNode("", true),
@@ -81,7 +86,7 @@ var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 								class: "size-2.5",
 								icon: "Checkmark",
 								thickness: "3"
-							})], 2), createElementVNode("span", _hoisted_4, toDisplayString(environmentName), 1)]),
+							})], 2), createElementVNode("span", _hoisted_5, toDisplayString(environmentName), 1)]),
 							_: 2
 						}, 1032, ["onClick"]);
 					}), 128)),
@@ -91,11 +96,11 @@ var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 						class: "group/item flex h-auto w-full min-w-0 items-start gap-1.5 overflow-hidden",
 						disabled: ""
 					}, {
-						default: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarIcon), {
+						default: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(unref(ScalarIcon), {
 							class: "size-2.5",
 							icon: "Checkmark",
 							thickness: "3"
-						})]), createElementVNode("div", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString(__props.activeEnvironment), 1), _cache[2] || (_cache[2] = createElementVNode("span", { class: "text-c-3 block truncate text-xs" }, " Not available in this context ", -1))])]),
+						})]), createElementVNode("div", _hoisted_7, [createElementVNode("span", _hoisted_8, toDisplayString(__props.activeEnvironment), 1), createElementVNode("span", _hoisted_9, toDisplayString(unref(translate)("apiClient.environmentSelector.notAvailableInThisContext")), 1)])]),
 						_: 1
 					})) : createCommentVNode("", true),
 					hasEnvironments.value ? (openBlock(), createBlock(unref(ScalarDropdownDivider), { key: 4 })) : createCommentVNode("", true),
@@ -103,16 +108,16 @@ var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 						class: "text-c-accent flex items-center gap-1.5",
 						onClick: handleAddEnvironment
 					}, {
-						default: withCtx(() => [createElementVNode("div", _hoisted_8, [createVNode(unref(ScalarIcon), {
+						default: withCtx(() => [createElementVNode("div", _hoisted_10, [createVNode(unref(ScalarIcon), {
 							icon: "Add",
 							size: "sm"
 						})]), createElementVNode("span", null, toDisplayString(hasEnvironments.value ? "New Environment" : "Create Environment"), 1)]),
 						_: 1
 					}),
-					!hasEnvironments.value && !hasActiveEnvironment.value ? (openBlock(), createElementBlock("div", _hoisted_9, [..._cache[3] || (_cache[3] = [createElementVNode("p", { class: "mb-1" }, " Environments let you manage variables like API keys and base URLs across different contexts. ", -1)])])) : createCommentVNode("", true)
+					!hasEnvironments.value && !hasActiveEnvironment.value ? (openBlock(), createElementBlock("div", _hoisted_11, [createElementVNode("p", _hoisted_12, toDisplayString(unref(translate)("apiClient.environmentSelector.environmentHint")), 1)])) : createCommentVNode("", true)
 				]),
 				default: withCtx(() => [createVNode(unref(ScalarButton), {
-					"aria-label": `Current environment: ${displayText.value}`,
+					"aria-label": unref(translate)("apiClient.environmentSelector.current", { name: displayText.value ?? "" }),
 					class: normalizeClass(["line-clamp-1 h-full w-fit justify-start border px-2 py-1 font-normal transition-colors", buttonClass.value]),
 					size: "sm",
 					variant: "ghost"

package/dist/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentSelector.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n} from '@scalar/components/dropdown'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed } from 'vue'\n\nconst { environments = [], activeEnvironment } = defineProps<{\n  /** List of available environments */\n  environments?: string[]\n  /** Currently selected environment */\n  activeEnvironment?: string\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when an environment is selected */\n  (e: 'select:environment', environmentName: string): void\n  /** Emitted when user wants to add a new environment */\n  (e: 'add:environment'): void\n}>()\n\n/** Whether an environment is currently active */\nconst hasActiveEnvironment = computed(() => !!activeEnvironment)\n\n/** Whether environments exist */\nconst hasEnvironments = computed(() => environments.length > 0)\n\n/** Whether the currently selected environment exists in the dropdown options */\nconst hasSelectedEnvironmentInOptions = computed(() => {\n  if (!activeEnvironment) {\n    return false\n  }\n\n  return environments.includes(activeEnvironment)\n})\n\n/** True when an environment is selected but unavailable in the current context */\nconst hasMissingActiveEnvironment = computed(\n  () => hasActiveEnvironment.value && !hasSelectedEnvironmentInOptions.value,\n)\n\n/** Display text for the button */\nconst displayText = computed(() => {\n  if (hasMissingActiveEnvironment.value) {\n    return `${activeEnvironment} (Unavailable)`\n  }\n\n  if (hasActiveEnvironment.value) {\n    return activeEnvironment\n  }\n  if (!hasEnvironments.value) {\n    return 'Add Environment'\n  }\n  return 'Select Environment'\n})\n\n/** Button styling based on state */\nconst buttonClass = computed(() => {\n  if (hasMissingActiveEnvironment.value) {\n    return 'hover:bg-b-2 text-c-2 border-transparent'\n  }\n\n  if (hasActiveEnvironment.value) {\n    return 'bg-c-accent/10 text-c-accent hover:bg-c-accent/20 border-c-accent/30'\n  }\n  if (!hasEnvironments.value) {\n    return 'hover:bg-b-2 text-c-3 border-transparent'\n  }\n  return 'hover:bg-b-2 text-c-2 border-transparent'\n})\n\nconst handleAddEnvironment = () => {\n  emit('add:environment')\n}\n\nconst handleSelectEnvironment = (environmentName: string) => {\n  emit('select:environment', environmentName)\n}\n</script>\n\n<template>\n  <div class=\"relative flex items-center\">\n    <!-- Environment indicator badge (only show when active) -->\n\n    <ScalarDropdown>\n      <ScalarButton\n        :aria-label=\"`Current environment: ${displayText}`\"\n        class=\"line-clamp-1 h-full w-fit justify-start border px-2 py-1 font-normal transition-colors\"\n        :class=\"buttonClass\"\n        size=\"sm\"\n        variant=\"ghost\">\n        <div class=\"flex max-w-[220px] min-w-0 items-center gap-1.5\">\n          <!-- Icon indicator -->\n          <ScalarIcon\n            class=\"shrink-0\"\n            :class=\"\n              hasActiveEnvironment && !hasMissingActiveEnvironment\n                ? 'text-c-accent'\n                : 'text-c-3'\n            \"\n            icon=\"Globe\"\n            size=\"sm\" />\n\n          <!-- Environment name -->\n          <span\n            class=\"text-xxs block max-w-[160px] min-w-0 truncate text-left font-medium\">\n            {{ displayText }}\n          </span>\n\n          <!-- Dropdown arrow -->\n          <ScalarIcon\n            class=\"shrink-0\"\n            icon=\"ChevronDown\"\n            size=\"xs\" />\n        </div>\n      </ScalarButton>\n\n      <template #items>\n        <!-- No environment option (clear selection) -->\n        <ScalarDropdownItem\n          v-if=\"hasActiveEnvironment\"\n          class=\"group/item flex w-full items-center gap-1.5\"\n          @click=\"handleSelectEnvironment('')\">\n          <div\n            class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n            :class=\"\n              !activeEnvironment\n                ? 'bg-c-accent text-b-1'\n                : 'shadow-border text-transparent'\n            \">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <span class=\"text-c-2\">No Environment</span>\n        </ScalarDropdownItem>\n\n        <ScalarDropdownDivider v-if=\"hasActiveEnvironment && hasEnvironments\" />\n\n        <!-- Environment list -->\n        <ScalarDropdownItem\n          v-for=\"environmentName in environments\"\n          :key=\"environmentName\"\n          class=\"group/item flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n          @click=\"handleSelectEnvironment(environmentName)\">\n          <div\n            class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n            :class=\"\n              activeEnvironment === environmentName\n                ? 'bg-c-accent text-b-1'\n                : 'shadow-border text-transparent'\n            \">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <span class=\"min-w-0 flex-1 truncate\">{{ environmentName }}</span>\n        </ScalarDropdownItem>\n        <ScalarDropdownDivider v-if=\"hasMissingActiveEnvironment\" />\n\n        <ScalarDropdownItem\n          v-if=\"hasMissingActiveEnvironment\"\n          class=\"group/item flex h-auto w-full min-w-0 items-start gap-1.5 overflow-hidden\"\n          disabled>\n          <div\n            class=\"bg-c-accent text-b-1 mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full p-[3px]\">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <div class=\"min-w-0 flex-1 text-left\">\n            <span class=\"block truncate\">\n              {{ activeEnvironment }}\n            </span>\n            <span class=\"text-c-3 block truncate text-xs\">\n              Not available in this context\n            </span>\n          </div>\n        </ScalarDropdownItem>\n\n        <ScalarDropdownDivider v-if=\"hasEnvironments\" />\n\n        <!-- Add new environment button -->\n        <ScalarDropdownItem\n          class=\"text-c-accent flex items-center gap-1.5\"\n          @click=\"handleAddEnvironment\">\n          <div class=\"flex h-4 w-4 items-center justify-center\">\n            <ScalarIcon\n              icon=\"Add\"\n              size=\"sm\" />\n          </div>\n          <span>{{\n            hasEnvironments ? 'New Environment' : 'Create Environment'\n          }}</span>\n        </ScalarDropdownItem>\n\n        <!-- Helper text for empty state -->\n        <div\n          v-if=\"!hasEnvironments && !hasActiveEnvironment\"\n          class=\"text-c-3 px-2 py-1.5 text-xs\">\n          <p class=\"mb-1\">\n            Environments let you manage variables like API keys and base URLs\n            across different contexts.\n          </p>\n        </div>\n      </template>\n    </ScalarDropdown>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"EnvironmentSelector.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n} from '@scalar/components/dropdown'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { environments = [], activeEnvironment } = defineProps<{\n  /** List of available environments */\n  environments?: string[]\n  /** Currently selected environment */\n  activeEnvironment?: string\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when an environment is selected */\n  (e: 'select:environment', environmentName: string): void\n  /** Emitted when user wants to add a new environment */\n  (e: 'add:environment'): void\n}>()\n\nconst { translate } = useLocalization()\n\n/** Whether an environment is currently active */\nconst hasActiveEnvironment = computed(() => !!activeEnvironment)\n\n/** Whether environments exist */\nconst hasEnvironments = computed(() => environments.length > 0)\n\n/** Whether the currently selected environment exists in the dropdown options */\nconst hasSelectedEnvironmentInOptions = computed(() => {\n  if (!activeEnvironment) {\n    return false\n  }\n\n  return environments.includes(activeEnvironment)\n})\n\n/** True when an environment is selected but unavailable in the current context */\nconst hasMissingActiveEnvironment = computed(\n  () => hasActiveEnvironment.value && !hasSelectedEnvironmentInOptions.value,\n)\n\n/** Display text for the button */\nconst displayText = computed(() => {\n  if (hasMissingActiveEnvironment.value) {\n    return translate('apiClient.environmentSelector.unavailable', {\n      name: activeEnvironment ?? '',\n    })\n  }\n\n  if (hasActiveEnvironment.value) {\n    return activeEnvironment\n  }\n  if (!hasEnvironments.value) {\n    return translate('apiClient.environmentSelector.add')\n  }\n  return translate('apiClient.environmentSelector.select')\n})\n\n/** Button styling based on state */\nconst buttonClass = computed(() => {\n  if (hasMissingActiveEnvironment.value) {\n    return 'hover:bg-b-2 text-c-2 border-transparent'\n  }\n\n  if (hasActiveEnvironment.value) {\n    return 'bg-c-accent/10 text-c-accent hover:bg-c-accent/20 border-c-accent/30'\n  }\n  if (!hasEnvironments.value) {\n    return 'hover:bg-b-2 text-c-3 border-transparent'\n  }\n  return 'hover:bg-b-2 text-c-2 border-transparent'\n})\n\nconst handleAddEnvironment = () => {\n  emit('add:environment')\n}\n\nconst handleSelectEnvironment = (environmentName: string) => {\n  emit('select:environment', environmentName)\n}\n</script>\n\n<template>\n  <div class=\"relative flex items-center\">\n    <!-- Environment indicator badge (only show when active) -->\n\n    <ScalarDropdown>\n      <ScalarButton\n        :aria-label=\"\n          translate('apiClient.environmentSelector.current', {\n            name: displayText ?? '',\n          })\n        \"\n        class=\"line-clamp-1 h-full w-fit justify-start border px-2 py-1 font-normal transition-colors\"\n        :class=\"buttonClass\"\n        size=\"sm\"\n        variant=\"ghost\">\n        <div class=\"flex max-w-[220px] min-w-0 items-center gap-1.5\">\n          <!-- Icon indicator -->\n          <ScalarIcon\n            class=\"shrink-0\"\n            :class=\"\n              hasActiveEnvironment && !hasMissingActiveEnvironment\n                ? 'text-c-accent'\n                : 'text-c-3'\n            \"\n            icon=\"Globe\"\n            size=\"sm\" />\n\n          <!-- Environment name -->\n          <span\n            class=\"text-xxs block max-w-[160px] min-w-0 truncate text-left font-medium\">\n            {{ displayText }}\n          </span>\n\n          <!-- Dropdown arrow -->\n          <ScalarIcon\n            class=\"shrink-0\"\n            icon=\"ChevronDown\"\n            size=\"xs\" />\n        </div>\n      </ScalarButton>\n\n      <template #items>\n        <!-- No environment option (clear selection) -->\n        <ScalarDropdownItem\n          v-if=\"hasActiveEnvironment\"\n          class=\"group/item flex w-full items-center gap-1.5\"\n          @click=\"handleSelectEnvironment('')\">\n          <div\n            class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n            :class=\"\n              !activeEnvironment\n                ? 'bg-c-accent text-b-1'\n                : 'shadow-border text-transparent'\n            \">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <span class=\"text-c-2\">{{\n            translate('apiClient.environmentSelector.noEnvironment')\n          }}</span>\n        </ScalarDropdownItem>\n\n        <ScalarDropdownDivider v-if=\"hasActiveEnvironment && hasEnvironments\" />\n\n        <!-- Environment list -->\n        <ScalarDropdownItem\n          v-for=\"environmentName in environments\"\n          :key=\"environmentName\"\n          class=\"group/item flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n          @click=\"handleSelectEnvironment(environmentName)\">\n          <div\n            class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n            :class=\"\n              activeEnvironment === environmentName\n                ? 'bg-c-accent text-b-1'\n                : 'shadow-border text-transparent'\n            \">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <span class=\"min-w-0 flex-1 truncate\">{{ environmentName }}</span>\n        </ScalarDropdownItem>\n        <ScalarDropdownDivider v-if=\"hasMissingActiveEnvironment\" />\n\n        <ScalarDropdownItem\n          v-if=\"hasMissingActiveEnvironment\"\n          class=\"group/item flex h-auto w-full min-w-0 items-start gap-1.5 overflow-hidden\"\n          disabled>\n          <div\n            class=\"bg-c-accent text-b-1 mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full p-[3px]\">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <div class=\"min-w-0 flex-1 text-left\">\n            <span class=\"block truncate\">\n              {{ activeEnvironment }}\n            </span>\n            <span class=\"text-c-3 block truncate text-xs\">{{\n              translate(\n                'apiClient.environmentSelector.notAvailableInThisContext',\n              )\n            }}</span>\n          </div>\n        </ScalarDropdownItem>\n\n        <ScalarDropdownDivider v-if=\"hasEnvironments\" />\n\n        <!-- Add new environment button -->\n        <ScalarDropdownItem\n          class=\"text-c-accent flex items-center gap-1.5\"\n          @click=\"handleAddEnvironment\">\n          <div class=\"flex h-4 w-4 items-center justify-center\">\n            <ScalarIcon\n              icon=\"Add\"\n              size=\"sm\" />\n          </div>\n          <span>{{\n            hasEnvironments ? 'New Environment' : 'Create Environment'\n          }}</span>\n        </ScalarDropdownItem>\n\n        <!-- Helper text for empty state -->\n        <div\n          v-if=\"!hasEnvironments && !hasActiveEnvironment\"\n          class=\"text-c-3 px-2 py-1.5 text-xs\">\n          <p class=\"mb-1\">\n            {{ translate('apiClient.environmentSelector.environmentHint') }}\n          </p>\n        </div>\n      </template>\n    </ScalarDropdown>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthSelector.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue"],"names":[],"mappings":"AAiVA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAKnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAA;AAC7E,OAAO,KAAK,EACV,QAAQ,EACR,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AAGvC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EACV,eAAe,EAEf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAIrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AACjG,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,gEAAgE,CAAA;AAKvE,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,kBAAkB,CAAA;IAC/B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,gEAAgE;IAChE,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,oBAAoB,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;IACjD,eAAe,EAAE,qBAAqB,CAAA;IACtC,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAA;IAC9C,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AA4fF,QAAA,MAAM,YAAY;;cAxdqB,IAAI;cAAQ,MAAM;;;;oPA2dvD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"AuthSelector.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue"],"names":[],"mappings":"AA4VA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAKnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAA;AAC7E,OAAO,KAAK,EACV,QAAQ,EACR,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AAGvC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EACV,eAAe,EAEf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAIrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AACjG,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,gEAAgE,CAAA;AAMvE,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,kBAAkB,CAAA;IAC/B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,gEAAgE;IAChE,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,oBAAoB,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;IACjD,eAAe,EAAE,qBAAqB,CAAA;IACtC,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAA;IAC9C,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AAogBF,QAAA,MAAM,YAAY;;cA9dqB,IAAI;cAAQ,MAAM;;;;oPAievD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthSelector.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  type ScalarButton as ScalarButtonType,\n} from '@scalar/components/button'\nimport { ScalarComboboxMultiselect } from '@scalar/components/combobox'\nimport type { Icon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarIconCaretDown, ScalarIconTrash } from '@scalar/icons'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  isAuthOptional,\n  type MergedSecuritySchemes,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  OpenApiDocument,\n  SecurityRequirementObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, ref, useId } from 'vue'\n\nimport DeleteRequestAuthModal from '@/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue'\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport {\n  formatComplexScheme,\n  formatScheme,\n  getSecuritySchemeOptions,\n  type SecuritySchemeOption,\n} from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport RequestAuthDataTable from './RequestAuthDataTable.vue'\n\nconst {\n  environment,\n  eventBus,\n  createAnySecurityScheme = false,\n  canDeleteSchemes = true,\n  defaultOpen = true,\n  isStatic = false,\n  meta,\n  proxyUrl,\n  securityRequirements,\n  securitySchemes,\n  selectedSecurity,\n  server,\n  title,\n  options,\n  documentType,\n} = defineProps<{\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  /** Allows adding authentication which is not in the document */\n  createAnySecurityScheme?: boolean\n  /**\n   * Whether schemes can be deleted from the selector. Enabled for the editable client, disabled in\n   * the read-only reference where the schemes come from the document and cannot be removed.\n   */\n  canDeleteSchemes?: boolean\n  /** Whether the authentication disclosure should start expanded */\n  defaultOpen?: boolean\n  /** Creates a static disclosure that cannot be collapsed */\n  isStatic?: boolean\n  meta: AuthMeta\n  proxyUrl: string\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  selectedSecurity: SelectedSecurity | undefined\n  server: ServerObject | null\n  title: string\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /** Type of the document the schemes belong to, used to label the missing-type warning */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\n\nconst titleId = useId()\nconst comboboxButtonRef = ref<typeof ScalarButtonType | null>(null)\nconst isDisclosureOpen = ref(false)\n\nconst deleteModal = useModal()\nconst schemeToDelete = ref<{\n  label: string\n  payload: SecurityRequirementObject\n} | null>(null)\n\n/**\n * Determines if authentication is required or optional\n *\n * Auth is optional when there is an empty security requirement and no complex requirements.\n * Complex requirements have multiple auth schemes combined (e.g., API key + OAuth).\n */\nconst authIndicator = computed<{ icon: Icon; text: string } | null>(() => {\n  if (!securityRequirements?.length) {\n    return null\n  }\n\n  const isOptional = isAuthOptional(securityRequirements)\n\n  return {\n    icon: isOptional ? 'Unlock' : 'Lock',\n    text: isOptional ? 'Optional' : 'Required',\n  }\n})\n\n/** All available auth scheme options for the dropdown */\nconst availableSchemeOptions = computed(() =>\n  getSecuritySchemeOptions(\n    securityRequirements ?? [],\n    securitySchemes ?? {},\n    selectedSecurity?.selectedSchemes ?? [],\n    createAnySecurityScheme,\n  ),\n)\n\n/** Currently active auth schemes selected for this operation or collection */\nconst activeSchemeOptions = computed<SecuritySchemeOption[]>(() => {\n  const schemes = selectedSecurity?.selectedSchemes\n  if (!schemes?.length) {\n    return []\n  }\n\n  return schemes.flatMap((requirement) => {\n    const schemeNames = Object.keys(requirement)\n\n    if (schemeNames.length === 0) {\n      return []\n    }\n\n    // Complex auth requirement with multiple schemes\n    if (schemeNames.length > 1) {\n      return formatComplexScheme(requirement)\n    }\n\n    // Simple auth requirement with single scheme\n    const schemeName = schemeNames[0]\n    if (!schemeName) {\n      return []\n    }\n\n    const scheme = getResolvedRef(securitySchemes?.[schemeName])\n    if (!scheme) {\n      return []\n    }\n\n    return formatScheme({\n      name: schemeName,\n      value: requirement,\n    })\n  })\n})\n\n/**\n * Opens the combobox dropdown when clicking the auth indicator badge.\n * Prevents the disclosure from toggling if it is already open.\n */\nconst handleAuthIndicatorClick = (event: Event): void => {\n  if (isDisclosureOpen.value) {\n    event.stopPropagation()\n  }\n  comboboxButtonRef.value?.$el.click()\n}\n\n/**\n * Updates the selected auth schemes.\n * Separates existing schemes from newly created ones for the event payload.\n */\nconst handleSchemeSelection = (selected: SecuritySchemeOption[]): void => {\n  const existingSchemes = selected\n    .filter((option) => option.payload === undefined)\n    .map((option) => unpackProxyObject(option.value, { depth: 2 }))\n\n  const newSchemes = selected\n    .filter((option) => option.payload !== undefined)\n    .map((option) => ({\n      name: option.label,\n      scheme: option.payload!,\n    }))\n\n  eventBus.emit('auth:update:selected-security-schemes', {\n    selectedRequirements: existingSchemes,\n    newSchemes,\n    meta,\n  })\n}\n\n/** Shows the delete confirmation modal for the selected scheme */\nconst handleDeleteRequest = (option: {\n  label: string\n  value: SecurityRequirementObject\n}): void => {\n  schemeToDelete.value = { label: option.label, payload: option.value }\n  deleteModal.show()\n}\n\n/** Deletes the selected auth scheme after confirmation */\nconst handleDeleteConfirm = (): void => {\n  if (!schemeToDelete.value) {\n    return\n  }\n\n  eventBus.emit('auth:delete:security-scheme', {\n    names: Object.keys(schemeToDelete.value.payload),\n  })\n\n  schemeToDelete.value = null\n  deleteModal.hide()\n}\n\ndefineExpose({\n  authIndicator,\n  selectedSchemeOptions: activeSchemeOptions,\n  schemeOptions: availableSchemeOptions,\n})\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params relative\"\n    :defaultOpen\n    :isStatic=\"isStatic\"\n    :itemCount=\"activeSchemeOptions.length\"\n    @update:modelValue=\"(open) => (isDisclosureOpen = open)\">\n    <template #title>\n      <div\n        :id=\"titleId\"\n        class=\"inline-flex items-center gap-0.5 leading-[20px]\">\n        <span>{{ title }}</span>\n\n        <span\n          v-if=\"authIndicator\"\n          class=\"text-c-3 hover:bg-b-3 hover:text-c-1 -my-0.5 -mr-1 cursor-pointer rounded px-1 py-0.5 leading-[normal] font-normal\"\n          :class=\"{ 'text-c-1': authIndicator.text === 'Required' }\"\n          data-testid=\"auth-indicator\"\n          @click=\"handleAuthIndicatorClick\">\n          {{ authIndicator.text }}\n        </span>\n      </div>\n    </template>\n\n    <!-- Auth Dropdown (hidden when only one scheme is available) -->\n    <template #actions>\n      <ScalarComboboxMultiselect\n        class=\"w-72 text-xs\"\n        :modelValue=\"activeSchemeOptions\"\n        multiple\n        :options=\"availableSchemeOptions\"\n        placement=\"bottom-end\"\n        teleport\n        @delete=\"handleDeleteRequest\"\n        @update:modelValue=\"handleSchemeSelection\">\n        <ScalarButton\n          ref=\"comboboxButtonRef\"\n          :aria-describedby=\"titleId\"\n          class=\"group/combobox-button hover:text-c-1 text-c-2 flex h-fit w-full items-center gap-1 px-0.75 py-0.25 text-base font-normal\"\n          variant=\"ghost\">\n          <!-- Single auth scheme selected -->\n          <template v-if=\"activeSchemeOptions.length === 1\">\n            <span class=\"sr-only\">Selected Auth Type:</span>\n            {{ activeSchemeOptions[0]?.label }}\n          </template>\n\n          <!-- Multiple auth schemes selected -->\n          <template v-else-if=\"activeSchemeOptions.length > 1\">\n            Multiple\n            <span class=\"sr-only\">Auth Types Selected</span>\n          </template>\n\n          <!-- No auth schemes selected -->\n          <template v-else>\n            <span class=\"sr-only\">Select</span>\n            Auth Type\n          </template>\n\n          <ScalarIconCaretDown\n            class=\"size-3 shrink-0 transition-transform duration-100 group-aria-expanded/combobox-button:rotate-180\"\n            weight=\"bold\" />\n        </ScalarButton>\n\n        <template #option=\"{ option, selected }\">\n          <ScalarListboxCheckbox\n            multiselect\n            :selected=\"selected\" />\n          <div class=\"min-w-0 flex-1 truncate\">\n            {{ option.label }}\n          </div>\n          <ScalarIconButton\n            v-if=\"option.isDeletable && canDeleteSchemes\"\n            class=\"-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100\"\n            :icon=\"ScalarIconTrash\"\n            :label=\"`Delete ${option.label}`\"\n            size=\"xs\"\n            @click.stop=\"handleDeleteRequest(option)\" />\n        </template>\n      </ScalarComboboxMultiselect>\n    </template>\n\n    <!-- Auth Table -->\n    <RequestAuthDataTable\n      :activeAuthIndex=\"selectedSecurity?.selectedIndex ?? 0\"\n      :documentType\n      :environment\n      :eventBus\n      :isStatic\n      :meta\n      :options\n      :proxyUrl\n      :securitySchemes\n      :selectedSchemeOptions=\"activeSchemeOptions\"\n      :server />\n\n    <!-- Delete Auth Modal -->\n    <DeleteRequestAuthModal\n      v-if=\"schemeToDelete\"\n      :label=\"schemeToDelete.label\"\n      :scheme=\"schemeToDelete\"\n      :state=\"deleteModal\"\n      @close=\"deleteModal.hide()\"\n      @delete=\"handleDeleteConfirm\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AuthSelector.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  type ScalarButton as ScalarButtonType,\n} from '@scalar/components/button'\nimport { ScalarComboboxMultiselect } from '@scalar/components/combobox'\nimport type { Icon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarIconCaretDown, ScalarIconTrash } from '@scalar/icons'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  isAuthOptional,\n  type MergedSecuritySchemes,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  OpenApiDocument,\n  SecurityRequirementObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, ref, useId } from 'vue'\n\nimport DeleteRequestAuthModal from '@/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue'\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport {\n  formatComplexScheme,\n  formatScheme,\n  getSecuritySchemeOptions,\n  type SecuritySchemeOption,\n} from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestAuthDataTable from './RequestAuthDataTable.vue'\n\nconst {\n  environment,\n  eventBus,\n  createAnySecurityScheme = false,\n  canDeleteSchemes = true,\n  defaultOpen = true,\n  isStatic = false,\n  meta,\n  proxyUrl,\n  securityRequirements,\n  securitySchemes,\n  selectedSecurity,\n  server,\n  title,\n  options,\n  documentType,\n} = defineProps<{\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  /** Allows adding authentication which is not in the document */\n  createAnySecurityScheme?: boolean\n  /**\n   * Whether schemes can be deleted from the selector. Enabled for the editable client, disabled in\n   * the read-only reference where the schemes come from the document and cannot be removed.\n   */\n  canDeleteSchemes?: boolean\n  /** Whether the authentication disclosure should start expanded */\n  defaultOpen?: boolean\n  /** Creates a static disclosure that cannot be collapsed */\n  isStatic?: boolean\n  meta: AuthMeta\n  proxyUrl: string\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  selectedSecurity: SelectedSecurity | undefined\n  server: ServerObject | null\n  title: string\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /** Type of the document the schemes belong to, used to label the missing-type warning */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\n\nconst { translate, translations } = useLocalization()\n\nconst titleId = useId()\nconst comboboxButtonRef = ref<typeof ScalarButtonType | null>(null)\nconst isDisclosureOpen = ref(false)\n\nconst deleteModal = useModal()\nconst schemeToDelete = ref<{\n  label: string\n  payload: SecurityRequirementObject\n} | null>(null)\n\n/**\n * Determines if authentication is required or optional\n *\n * Auth is optional when there is an empty security requirement and no complex requirements.\n * Complex requirements have multiple auth schemes combined (e.g., API key + OAuth).\n */\nconst authIndicator = computed<{ icon: Icon; text: string } | null>(() => {\n  if (!securityRequirements?.length) {\n    return null\n  }\n\n  const isOptional = isAuthOptional(securityRequirements)\n\n  return {\n    icon: isOptional ? 'Unlock' : 'Lock',\n    text: isOptional\n      ? translate('apiClient.authSelector.optional')\n      : translate('apiClient.authSelector.required'),\n  }\n})\n\n/** All available auth scheme options for the dropdown */\nconst availableSchemeOptions = computed(() =>\n  getSecuritySchemeOptions(\n    securityRequirements ?? [],\n    securitySchemes ?? {},\n    selectedSecurity?.selectedSchemes ?? [],\n    createAnySecurityScheme,\n    translations.value.apiClient,\n  ),\n)\n\n/** Currently active auth schemes selected for this operation or collection */\nconst activeSchemeOptions = computed<SecuritySchemeOption[]>(() => {\n  const schemes = selectedSecurity?.selectedSchemes\n  if (!schemes?.length) {\n    return []\n  }\n\n  return schemes.flatMap((requirement) => {\n    const schemeNames = Object.keys(requirement)\n\n    if (schemeNames.length === 0) {\n      return []\n    }\n\n    // Complex auth requirement with multiple schemes\n    if (schemeNames.length > 1) {\n      return formatComplexScheme(requirement)\n    }\n\n    // Simple auth requirement with single scheme\n    const schemeName = schemeNames[0]\n    if (!schemeName) {\n      return []\n    }\n\n    const scheme = getResolvedRef(securitySchemes?.[schemeName])\n    if (!scheme) {\n      return []\n    }\n\n    return formatScheme({\n      name: schemeName,\n      value: requirement,\n    })\n  })\n})\n\n/**\n * Opens the combobox dropdown when clicking the auth indicator badge.\n * Prevents the disclosure from toggling if it is already open.\n */\nconst handleAuthIndicatorClick = (event: Event): void => {\n  if (isDisclosureOpen.value) {\n    event.stopPropagation()\n  }\n  comboboxButtonRef.value?.$el.click()\n}\n\n/**\n * Updates the selected auth schemes.\n * Separates existing schemes from newly created ones for the event payload.\n */\nconst handleSchemeSelection = (selected: SecuritySchemeOption[]): void => {\n  const existingSchemes = selected\n    .filter((option) => option.payload === undefined)\n    .map((option) => unpackProxyObject(option.value, { depth: 2 }))\n\n  const newSchemes = selected\n    .filter((option) => option.payload !== undefined)\n    .map((option) => ({\n      name: option.label,\n      scheme: option.payload!,\n    }))\n\n  eventBus.emit('auth:update:selected-security-schemes', {\n    selectedRequirements: existingSchemes,\n    newSchemes,\n    meta,\n  })\n}\n\n/** Shows the delete confirmation modal for the selected scheme */\nconst handleDeleteRequest = (option: {\n  label: string\n  value: SecurityRequirementObject\n}): void => {\n  schemeToDelete.value = { label: option.label, payload: option.value }\n  deleteModal.show()\n}\n\n/** Deletes the selected auth scheme after confirmation */\nconst handleDeleteConfirm = (): void => {\n  if (!schemeToDelete.value) {\n    return\n  }\n\n  eventBus.emit('auth:delete:security-scheme', {\n    names: Object.keys(schemeToDelete.value.payload),\n  })\n\n  schemeToDelete.value = null\n  deleteModal.hide()\n}\n\ndefineExpose({\n  authIndicator,\n  selectedSchemeOptions: activeSchemeOptions,\n  schemeOptions: availableSchemeOptions,\n})\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params relative\"\n    :defaultOpen\n    :isStatic=\"isStatic\"\n    :itemCount=\"activeSchemeOptions.length\"\n    @update:modelValue=\"(open) => (isDisclosureOpen = open)\">\n    <template #title>\n      <div\n        :id=\"titleId\"\n        class=\"inline-flex items-center gap-0.5 leading-[20px]\">\n        <span>{{ title }}</span>\n\n        <span\n          v-if=\"authIndicator\"\n          class=\"text-c-3 hover:bg-b-3 hover:text-c-1 -my-0.5 -mr-1 cursor-pointer rounded px-1 py-0.5 leading-[normal] font-normal\"\n          :class=\"{ 'text-c-1': authIndicator.icon === 'Lock' }\"\n          data-testid=\"auth-indicator\"\n          @click=\"handleAuthIndicatorClick\">\n          {{ authIndicator.text }}\n        </span>\n      </div>\n    </template>\n\n    <!-- Auth Dropdown (hidden when only one scheme is available) -->\n    <template #actions>\n      <ScalarComboboxMultiselect\n        class=\"w-72 text-xs\"\n        :modelValue=\"activeSchemeOptions\"\n        multiple\n        :options=\"availableSchemeOptions\"\n        placement=\"bottom-end\"\n        teleport\n        @delete=\"handleDeleteRequest\"\n        @update:modelValue=\"handleSchemeSelection\">\n        <ScalarButton\n          ref=\"comboboxButtonRef\"\n          :aria-describedby=\"titleId\"\n          class=\"group/combobox-button hover:text-c-1 text-c-2 flex h-fit w-full items-center gap-1 px-0.75 py-0.25 text-base font-normal\"\n          variant=\"ghost\">\n          <!-- Single auth scheme selected -->\n          <template v-if=\"activeSchemeOptions.length === 1\">\n            {{\n              translate('apiClient.authSelector.selectedType', {\n                type: activeSchemeOptions[0]?.label ?? '',\n              })\n            }}\n          </template>\n\n          <!-- Multiple auth schemes selected -->\n          <template v-else-if=\"activeSchemeOptions.length > 1\">\n            {{ translate('apiClient.authSelector.multipleTypes') }}\n          </template>\n\n          <!-- No auth schemes selected -->\n          <template v-else>\n            {{ translate('apiClient.authSelector.selectType') }}\n          </template>\n\n          <ScalarIconCaretDown\n            class=\"size-3 shrink-0 transition-transform duration-100 group-aria-expanded/combobox-button:rotate-180\"\n            weight=\"bold\" />\n        </ScalarButton>\n\n        <template #option=\"{ option, selected }\">\n          <ScalarListboxCheckbox\n            multiselect\n            :selected=\"selected\" />\n          <div class=\"min-w-0 flex-1 truncate\">\n            {{ option.label }}\n          </div>\n          <ScalarIconButton\n            v-if=\"option.isDeletable && canDeleteSchemes\"\n            class=\"-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100\"\n            :icon=\"ScalarIconTrash\"\n            :label=\"\n              translate('apiClient.authSelector.deleteScheme', {\n                name: option.label,\n              })\n            \"\n            size=\"xs\"\n            @click.stop=\"handleDeleteRequest(option)\" />\n        </template>\n      </ScalarComboboxMultiselect>\n    </template>\n\n    <!-- Auth Table -->\n    <RequestAuthDataTable\n      :activeAuthIndex=\"selectedSecurity?.selectedIndex ?? 0\"\n      :documentType\n      :environment\n      :eventBus\n      :isStatic\n      :meta\n      :options\n      :proxyUrl\n      :securitySchemes\n      :selectedSchemeOptions=\"activeSchemeOptions\"\n      :server />\n\n    <!-- Delete Auth Modal -->\n    <DeleteRequestAuthModal\n      v-if=\"schemeToDelete\"\n      :label=\"schemeToDelete.label\"\n      :scheme=\"schemeToDelete\"\n      :state=\"deleteModal\"\n      @close=\"deleteModal.hide()\"\n      @delete=\"handleDeleteConfirm\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":""}

package/dist/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import CollapsibleSection_default from "../../../components/layout/CollapsibleSection.vue.js";
 import DeleteRequestAuthModal_default from "./DeleteRequestAuthModal.vue.js";
 import { formatComplexScheme, formatScheme, getSecuritySchemeOptions } from "../helpers/security-scheme.js";
@@ -47,6 +48,7 @@ var AuthSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		documentType: {}
 	},
 	setup(__props, { expose: __expose }) {
+		const { translate, translations } = useLocalization();
 		const titleId = useId();
 		const comboboxButtonRef = ref(null);
 		const isDisclosureOpen = ref(false);
@@ -63,11 +65,11 @@ var AuthSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			const isOptional = isAuthOptional(__props.securityRequirements);
 			return {
 				icon: isOptional ? "Unlock" : "Lock",
-				text: isOptional ? "Optional" : "Required"
+				text: isOptional ? translate("apiClient.authSelector.optional") : translate("apiClient.authSelector.required")
 			};
 		});
 		/** All available auth scheme options for the dropdown */
-		const availableSchemeOptions = computed(() => getSecuritySchemeOptions(__props.securityRequirements ?? [], __props.securitySchemes ?? {}, __props.selectedSecurity?.selectedSchemes ?? [], __props.createAnySecurityScheme));
+		const availableSchemeOptions = computed(() => getSecuritySchemeOptions(__props.securityRequirements ?? [], __props.securitySchemes ?? {}, __props.selectedSecurity?.selectedSchemes ?? [], __props.createAnySecurityScheme, translations.value.apiClient));
 		/** Currently active auth schemes selected for this operation or collection */
 		const activeSchemeOptions = computed(() => {
 			const schemes = __props.selectedSecurity?.selectedSchemes;
@@ -142,7 +144,7 @@ var AuthSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					class: "inline-flex items-center gap-0.5 leading-[20px]"
 				}, [createElementVNode("span", null, toDisplayString(__props.title), 1), authIndicator.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: normalizeClass(["text-c-3 hover:bg-b-3 hover:text-c-1 -my-0.5 -mr-1 cursor-pointer rounded px-1 py-0.5 leading-[normal] font-normal", { "text-c-1": authIndicator.value.text === "Required" }]),
+					class: normalizeClass(["text-c-3 hover:bg-b-3 hover:text-c-1 -my-0.5 -mr-1 cursor-pointer rounded px-1 py-0.5 leading-[normal] font-normal", { "text-c-1": authIndicator.value.icon === "Lock" }]),
 					"data-testid": "auth-indicator",
 					onClick: handleAuthIndicatorClick
 				}, toDisplayString(authIndicator.value.text), 3)) : createCommentVNode("", true)], 8, _hoisted_1)]),
@@ -166,7 +168,7 @@ var AuthSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 							key: 0,
 							class: "-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100",
 							icon: unref(ScalarIconTrash),
-							label: `Delete ${option.label}`,
+							label: unref(translate)("apiClient.authSelector.deleteScheme", { name: option.label }),
 							size: "xs",
 							onClick: withModifiers(($event) => handleDeleteRequest(option), ["stop"])
 						}, null, 8, [
@@ -182,7 +184,7 @@ var AuthSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						class: "group/combobox-button hover:text-c-1 text-c-2 flex h-fit w-full items-center gap-1 px-0.75 py-0.25 text-base font-normal",
 						variant: "ghost"
 					}, {
-						default: withCtx(() => [activeSchemeOptions.value.length === 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Selected Auth Type:", -1)), createTextVNode(" " + toDisplayString(activeSchemeOptions.value[0]?.label), 1)], 64)) : activeSchemeOptions.value.length > 1 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[3] || (_cache[3] = createTextVNode(" Multiple ", -1)), _cache[4] || (_cache[4] = createElementVNode("span", { class: "sr-only" }, "Auth Types Selected", -1))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [_cache[5] || (_cache[5] = createElementVNode("span", { class: "sr-only" }, "Select", -1)), _cache[6] || (_cache[6] = createTextVNode(" Auth Type ", -1))], 64)), createVNode(unref(ScalarIconCaretDown), {
+						default: withCtx(() => [activeSchemeOptions.value.length === 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(unref(translate)("apiClient.authSelector.selectedType", { type: activeSchemeOptions.value[0]?.label ?? "" })), 1)], 64)) : activeSchemeOptions.value.length > 1 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(translate)("apiClient.authSelector.multipleTypes")), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(translate)("apiClient.authSelector.selectType")), 1)], 64)), createVNode(unref(ScalarIconCaretDown), {
 							class: "size-3 shrink-0 transition-transform duration-100 group-aria-expanded/combobox-button:rotate-180",
 							weight: "bold"
 						})]),

package/dist/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthSelector.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  type ScalarButton as ScalarButtonType,\n} from '@scalar/components/button'\nimport { ScalarComboboxMultiselect } from '@scalar/components/combobox'\nimport type { Icon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarIconCaretDown, ScalarIconTrash } from '@scalar/icons'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  isAuthOptional,\n  type MergedSecuritySchemes,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  OpenApiDocument,\n  SecurityRequirementObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, ref, useId } from 'vue'\n\nimport DeleteRequestAuthModal from '@/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue'\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport {\n  formatComplexScheme,\n  formatScheme,\n  getSecuritySchemeOptions,\n  type SecuritySchemeOption,\n} from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport RequestAuthDataTable from './RequestAuthDataTable.vue'\n\nconst {\n  environment,\n  eventBus,\n  createAnySecurityScheme = false,\n  canDeleteSchemes = true,\n  defaultOpen = true,\n  isStatic = false,\n  meta,\n  proxyUrl,\n  securityRequirements,\n  securitySchemes,\n  selectedSecurity,\n  server,\n  title,\n  options,\n  documentType,\n} = defineProps<{\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  /** Allows adding authentication which is not in the document */\n  createAnySecurityScheme?: boolean\n  /**\n   * Whether schemes can be deleted from the selector. Enabled for the editable client, disabled in\n   * the read-only reference where the schemes come from the document and cannot be removed.\n   */\n  canDeleteSchemes?: boolean\n  /** Whether the authentication disclosure should start expanded */\n  defaultOpen?: boolean\n  /** Creates a static disclosure that cannot be collapsed */\n  isStatic?: boolean\n  meta: AuthMeta\n  proxyUrl: string\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  selectedSecurity: SelectedSecurity | undefined\n  server: ServerObject | null\n  title: string\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /** Type of the document the schemes belong to, used to label the missing-type warning */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\n\nconst titleId = useId()\nconst comboboxButtonRef = ref<typeof ScalarButtonType | null>(null)\nconst isDisclosureOpen = ref(false)\n\nconst deleteModal = useModal()\nconst schemeToDelete = ref<{\n  label: string\n  payload: SecurityRequirementObject\n} | null>(null)\n\n/**\n * Determines if authentication is required or optional\n *\n * Auth is optional when there is an empty security requirement and no complex requirements.\n * Complex requirements have multiple auth schemes combined (e.g., API key + OAuth).\n */\nconst authIndicator = computed<{ icon: Icon; text: string } | null>(() => {\n  if (!securityRequirements?.length) {\n    return null\n  }\n\n  const isOptional = isAuthOptional(securityRequirements)\n\n  return {\n    icon: isOptional ? 'Unlock' : 'Lock',\n    text: isOptional ? 'Optional' : 'Required',\n  }\n})\n\n/** All available auth scheme options for the dropdown */\nconst availableSchemeOptions = computed(() =>\n  getSecuritySchemeOptions(\n    securityRequirements ?? [],\n    securitySchemes ?? {},\n    selectedSecurity?.selectedSchemes ?? [],\n    createAnySecurityScheme,\n  ),\n)\n\n/** Currently active auth schemes selected for this operation or collection */\nconst activeSchemeOptions = computed<SecuritySchemeOption[]>(() => {\n  const schemes = selectedSecurity?.selectedSchemes\n  if (!schemes?.length) {\n    return []\n  }\n\n  return schemes.flatMap((requirement) => {\n    const schemeNames = Object.keys(requirement)\n\n    if (schemeNames.length === 0) {\n      return []\n    }\n\n    // Complex auth requirement with multiple schemes\n    if (schemeNames.length > 1) {\n      return formatComplexScheme(requirement)\n    }\n\n    // Simple auth requirement with single scheme\n    const schemeName = schemeNames[0]\n    if (!schemeName) {\n      return []\n    }\n\n    const scheme = getResolvedRef(securitySchemes?.[schemeName])\n    if (!scheme) {\n      return []\n    }\n\n    return formatScheme({\n      name: schemeName,\n      value: requirement,\n    })\n  })\n})\n\n/**\n * Opens the combobox dropdown when clicking the auth indicator badge.\n * Prevents the disclosure from toggling if it is already open.\n */\nconst handleAuthIndicatorClick = (event: Event): void => {\n  if (isDisclosureOpen.value) {\n    event.stopPropagation()\n  }\n  comboboxButtonRef.value?.$el.click()\n}\n\n/**\n * Updates the selected auth schemes.\n * Separates existing schemes from newly created ones for the event payload.\n */\nconst handleSchemeSelection = (selected: SecuritySchemeOption[]): void => {\n  const existingSchemes = selected\n    .filter((option) => option.payload === undefined)\n    .map((option) => unpackProxyObject(option.value, { depth: 2 }))\n\n  const newSchemes = selected\n    .filter((option) => option.payload !== undefined)\n    .map((option) => ({\n      name: option.label,\n      scheme: option.payload!,\n    }))\n\n  eventBus.emit('auth:update:selected-security-schemes', {\n    selectedRequirements: existingSchemes,\n    newSchemes,\n    meta,\n  })\n}\n\n/** Shows the delete confirmation modal for the selected scheme */\nconst handleDeleteRequest = (option: {\n  label: string\n  value: SecurityRequirementObject\n}): void => {\n  schemeToDelete.value = { label: option.label, payload: option.value }\n  deleteModal.show()\n}\n\n/** Deletes the selected auth scheme after confirmation */\nconst handleDeleteConfirm = (): void => {\n  if (!schemeToDelete.value) {\n    return\n  }\n\n  eventBus.emit('auth:delete:security-scheme', {\n    names: Object.keys(schemeToDelete.value.payload),\n  })\n\n  schemeToDelete.value = null\n  deleteModal.hide()\n}\n\ndefineExpose({\n  authIndicator,\n  selectedSchemeOptions: activeSchemeOptions,\n  schemeOptions: availableSchemeOptions,\n})\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params relative\"\n    :defaultOpen\n    :isStatic=\"isStatic\"\n    :itemCount=\"activeSchemeOptions.length\"\n    @update:modelValue=\"(open) => (isDisclosureOpen = open)\">\n    <template #title>\n      <div\n        :id=\"titleId\"\n        class=\"inline-flex items-center gap-0.5 leading-[20px]\">\n        <span>{{ title }}</span>\n\n        <span\n          v-if=\"authIndicator\"\n          class=\"text-c-3 hover:bg-b-3 hover:text-c-1 -my-0.5 -mr-1 cursor-pointer rounded px-1 py-0.5 leading-[normal] font-normal\"\n          :class=\"{ 'text-c-1': authIndicator.text === 'Required' }\"\n          data-testid=\"auth-indicator\"\n          @click=\"handleAuthIndicatorClick\">\n          {{ authIndicator.text }}\n        </span>\n      </div>\n    </template>\n\n    <!-- Auth Dropdown (hidden when only one scheme is available) -->\n    <template #actions>\n      <ScalarComboboxMultiselect\n        class=\"w-72 text-xs\"\n        :modelValue=\"activeSchemeOptions\"\n        multiple\n        :options=\"availableSchemeOptions\"\n        placement=\"bottom-end\"\n        teleport\n        @delete=\"handleDeleteRequest\"\n        @update:modelValue=\"handleSchemeSelection\">\n        <ScalarButton\n          ref=\"comboboxButtonRef\"\n          :aria-describedby=\"titleId\"\n          class=\"group/combobox-button hover:text-c-1 text-c-2 flex h-fit w-full items-center gap-1 px-0.75 py-0.25 text-base font-normal\"\n          variant=\"ghost\">\n          <!-- Single auth scheme selected -->\n          <template v-if=\"activeSchemeOptions.length === 1\">\n            <span class=\"sr-only\">Selected Auth Type:</span>\n            {{ activeSchemeOptions[0]?.label }}\n          </template>\n\n          <!-- Multiple auth schemes selected -->\n          <template v-else-if=\"activeSchemeOptions.length > 1\">\n            Multiple\n            <span class=\"sr-only\">Auth Types Selected</span>\n          </template>\n\n          <!-- No auth schemes selected -->\n          <template v-else>\n            <span class=\"sr-only\">Select</span>\n            Auth Type\n          </template>\n\n          <ScalarIconCaretDown\n            class=\"size-3 shrink-0 transition-transform duration-100 group-aria-expanded/combobox-button:rotate-180\"\n            weight=\"bold\" />\n        </ScalarButton>\n\n        <template #option=\"{ option, selected }\">\n          <ScalarListboxCheckbox\n            multiselect\n            :selected=\"selected\" />\n          <div class=\"min-w-0 flex-1 truncate\">\n            {{ option.label }}\n          </div>\n          <ScalarIconButton\n            v-if=\"option.isDeletable && canDeleteSchemes\"\n            class=\"-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100\"\n            :icon=\"ScalarIconTrash\"\n            :label=\"`Delete ${option.label}`\"\n            size=\"xs\"\n            @click.stop=\"handleDeleteRequest(option)\" />\n        </template>\n      </ScalarComboboxMultiselect>\n    </template>\n\n    <!-- Auth Table -->\n    <RequestAuthDataTable\n      :activeAuthIndex=\"selectedSecurity?.selectedIndex ?? 0\"\n      :documentType\n      :environment\n      :eventBus\n      :isStatic\n      :meta\n      :options\n      :proxyUrl\n      :securitySchemes\n      :selectedSchemeOptions=\"activeSchemeOptions\"\n      :server />\n\n    <!-- Delete Auth Modal -->\n    <DeleteRequestAuthModal\n      v-if=\"schemeToDelete\"\n      :label=\"schemeToDelete.label\"\n      :scheme=\"schemeToDelete\"\n      :state=\"deleteModal\"\n      @close=\"deleteModal.hide()\"\n      @delete=\"handleDeleteConfirm\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"AuthSelector.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  type ScalarButton as ScalarButtonType,\n} from '@scalar/components/button'\nimport { ScalarComboboxMultiselect } from '@scalar/components/combobox'\nimport type { Icon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarIconCaretDown, ScalarIconTrash } from '@scalar/icons'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  isAuthOptional,\n  type MergedSecuritySchemes,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  OpenApiDocument,\n  SecurityRequirementObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, ref, useId } from 'vue'\n\nimport DeleteRequestAuthModal from '@/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue'\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport {\n  formatComplexScheme,\n  formatScheme,\n  getSecuritySchemeOptions,\n  type SecuritySchemeOption,\n} from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestAuthDataTable from './RequestAuthDataTable.vue'\n\nconst {\n  environment,\n  eventBus,\n  createAnySecurityScheme = false,\n  canDeleteSchemes = true,\n  defaultOpen = true,\n  isStatic = false,\n  meta,\n  proxyUrl,\n  securityRequirements,\n  securitySchemes,\n  selectedSecurity,\n  server,\n  title,\n  options,\n  documentType,\n} = defineProps<{\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  /** Allows adding authentication which is not in the document */\n  createAnySecurityScheme?: boolean\n  /**\n   * Whether schemes can be deleted from the selector. Enabled for the editable client, disabled in\n   * the read-only reference where the schemes come from the document and cannot be removed.\n   */\n  canDeleteSchemes?: boolean\n  /** Whether the authentication disclosure should start expanded */\n  defaultOpen?: boolean\n  /** Creates a static disclosure that cannot be collapsed */\n  isStatic?: boolean\n  meta: AuthMeta\n  proxyUrl: string\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  selectedSecurity: SelectedSecurity | undefined\n  server: ServerObject | null\n  title: string\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /** Type of the document the schemes belong to, used to label the missing-type warning */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\n\nconst { translate, translations } = useLocalization()\n\nconst titleId = useId()\nconst comboboxButtonRef = ref<typeof ScalarButtonType | null>(null)\nconst isDisclosureOpen = ref(false)\n\nconst deleteModal = useModal()\nconst schemeToDelete = ref<{\n  label: string\n  payload: SecurityRequirementObject\n} | null>(null)\n\n/**\n * Determines if authentication is required or optional\n *\n * Auth is optional when there is an empty security requirement and no complex requirements.\n * Complex requirements have multiple auth schemes combined (e.g., API key + OAuth).\n */\nconst authIndicator = computed<{ icon: Icon; text: string } | null>(() => {\n  if (!securityRequirements?.length) {\n    return null\n  }\n\n  const isOptional = isAuthOptional(securityRequirements)\n\n  return {\n    icon: isOptional ? 'Unlock' : 'Lock',\n    text: isOptional\n      ? translate('apiClient.authSelector.optional')\n      : translate('apiClient.authSelector.required'),\n  }\n})\n\n/** All available auth scheme options for the dropdown */\nconst availableSchemeOptions = computed(() =>\n  getSecuritySchemeOptions(\n    securityRequirements ?? [],\n    securitySchemes ?? {},\n    selectedSecurity?.selectedSchemes ?? [],\n    createAnySecurityScheme,\n    translations.value.apiClient,\n  ),\n)\n\n/** Currently active auth schemes selected for this operation or collection */\nconst activeSchemeOptions = computed<SecuritySchemeOption[]>(() => {\n  const schemes = selectedSecurity?.selectedSchemes\n  if (!schemes?.length) {\n    return []\n  }\n\n  return schemes.flatMap((requirement) => {\n    const schemeNames = Object.keys(requirement)\n\n    if (schemeNames.length === 0) {\n      return []\n    }\n\n    // Complex auth requirement with multiple schemes\n    if (schemeNames.length > 1) {\n      return formatComplexScheme(requirement)\n    }\n\n    // Simple auth requirement with single scheme\n    const schemeName = schemeNames[0]\n    if (!schemeName) {\n      return []\n    }\n\n    const scheme = getResolvedRef(securitySchemes?.[schemeName])\n    if (!scheme) {\n      return []\n    }\n\n    return formatScheme({\n      name: schemeName,\n      value: requirement,\n    })\n  })\n})\n\n/**\n * Opens the combobox dropdown when clicking the auth indicator badge.\n * Prevents the disclosure from toggling if it is already open.\n */\nconst handleAuthIndicatorClick = (event: Event): void => {\n  if (isDisclosureOpen.value) {\n    event.stopPropagation()\n  }\n  comboboxButtonRef.value?.$el.click()\n}\n\n/**\n * Updates the selected auth schemes.\n * Separates existing schemes from newly created ones for the event payload.\n */\nconst handleSchemeSelection = (selected: SecuritySchemeOption[]): void => {\n  const existingSchemes = selected\n    .filter((option) => option.payload === undefined)\n    .map((option) => unpackProxyObject(option.value, { depth: 2 }))\n\n  const newSchemes = selected\n    .filter((option) => option.payload !== undefined)\n    .map((option) => ({\n      name: option.label,\n      scheme: option.payload!,\n    }))\n\n  eventBus.emit('auth:update:selected-security-schemes', {\n    selectedRequirements: existingSchemes,\n    newSchemes,\n    meta,\n  })\n}\n\n/** Shows the delete confirmation modal for the selected scheme */\nconst handleDeleteRequest = (option: {\n  label: string\n  value: SecurityRequirementObject\n}): void => {\n  schemeToDelete.value = { label: option.label, payload: option.value }\n  deleteModal.show()\n}\n\n/** Deletes the selected auth scheme after confirmation */\nconst handleDeleteConfirm = (): void => {\n  if (!schemeToDelete.value) {\n    return\n  }\n\n  eventBus.emit('auth:delete:security-scheme', {\n    names: Object.keys(schemeToDelete.value.payload),\n  })\n\n  schemeToDelete.value = null\n  deleteModal.hide()\n}\n\ndefineExpose({\n  authIndicator,\n  selectedSchemeOptions: activeSchemeOptions,\n  schemeOptions: availableSchemeOptions,\n})\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params relative\"\n    :defaultOpen\n    :isStatic=\"isStatic\"\n    :itemCount=\"activeSchemeOptions.length\"\n    @update:modelValue=\"(open) => (isDisclosureOpen = open)\">\n    <template #title>\n      <div\n        :id=\"titleId\"\n        class=\"inline-flex items-center gap-0.5 leading-[20px]\">\n        <span>{{ title }}</span>\n\n        <span\n          v-if=\"authIndicator\"\n          class=\"text-c-3 hover:bg-b-3 hover:text-c-1 -my-0.5 -mr-1 cursor-pointer rounded px-1 py-0.5 leading-[normal] font-normal\"\n          :class=\"{ 'text-c-1': authIndicator.icon === 'Lock' }\"\n          data-testid=\"auth-indicator\"\n          @click=\"handleAuthIndicatorClick\">\n          {{ authIndicator.text }}\n        </span>\n      </div>\n    </template>\n\n    <!-- Auth Dropdown (hidden when only one scheme is available) -->\n    <template #actions>\n      <ScalarComboboxMultiselect\n        class=\"w-72 text-xs\"\n        :modelValue=\"activeSchemeOptions\"\n        multiple\n        :options=\"availableSchemeOptions\"\n        placement=\"bottom-end\"\n        teleport\n        @delete=\"handleDeleteRequest\"\n        @update:modelValue=\"handleSchemeSelection\">\n        <ScalarButton\n          ref=\"comboboxButtonRef\"\n          :aria-describedby=\"titleId\"\n          class=\"group/combobox-button hover:text-c-1 text-c-2 flex h-fit w-full items-center gap-1 px-0.75 py-0.25 text-base font-normal\"\n          variant=\"ghost\">\n          <!-- Single auth scheme selected -->\n          <template v-if=\"activeSchemeOptions.length === 1\">\n            {{\n              translate('apiClient.authSelector.selectedType', {\n                type: activeSchemeOptions[0]?.label ?? '',\n              })\n            }}\n          </template>\n\n          <!-- Multiple auth schemes selected -->\n          <template v-else-if=\"activeSchemeOptions.length > 1\">\n            {{ translate('apiClient.authSelector.multipleTypes') }}\n          </template>\n\n          <!-- No auth schemes selected -->\n          <template v-else>\n            {{ translate('apiClient.authSelector.selectType') }}\n          </template>\n\n          <ScalarIconCaretDown\n            class=\"size-3 shrink-0 transition-transform duration-100 group-aria-expanded/combobox-button:rotate-180\"\n            weight=\"bold\" />\n        </ScalarButton>\n\n        <template #option=\"{ option, selected }\">\n          <ScalarListboxCheckbox\n            multiselect\n            :selected=\"selected\" />\n          <div class=\"min-w-0 flex-1 truncate\">\n            {{ option.label }}\n          </div>\n          <ScalarIconButton\n            v-if=\"option.isDeletable && canDeleteSchemes\"\n            class=\"-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100\"\n            :icon=\"ScalarIconTrash\"\n            :label=\"\n              translate('apiClient.authSelector.deleteScheme', {\n                name: option.label,\n              })\n            \"\n            size=\"xs\"\n            @click.stop=\"handleDeleteRequest(option)\" />\n        </template>\n      </ScalarComboboxMultiselect>\n    </template>\n\n    <!-- Auth Table -->\n    <RequestAuthDataTable\n      :activeAuthIndex=\"selectedSecurity?.selectedIndex ?? 0\"\n      :documentType\n      :environment\n      :eventBus\n      :isStatic\n      :meta\n      :options\n      :proxyUrl\n      :securitySchemes\n      :selectedSchemeOptions=\"activeSchemeOptions\"\n      :server />\n\n    <!-- Delete Auth Modal -->\n    <DeleteRequestAuthModal\n      v-if=\"schemeToDelete\"\n      :label=\"schemeToDelete.label\"\n      :scheme=\"schemeToDelete\"\n      :state=\"deleteModal\"\n      @close=\"deleteModal.hide()\"\n      @delete=\"handleDeleteConfirm\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":"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"}

package/dist/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteRequestAuthModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue"],"names":[],"mappings":"AAkDA,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IAC5D,KAAK,EAAE,MAAM,CAAA;CACd,CAAC;AA+IF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"DeleteRequestAuthModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue"],"names":[],"mappings":"AA2DA,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IAC5D,KAAK,EAAE,MAAM,CAAA;CACd,CAAC;AAwJF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteRequestAuthModal.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal } from '@scalar/components/modal'\n\ndefineProps<{\n  state: { open: boolean; show: () => void; hide: () => void }\n  label: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\nconst deleteScheme = () => {\n  emit('delete')\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    title=\"Delete Security Scheme\">\n    <p class=\"text-c-2 mb-4 text-sm leading-normal\">\n      This cannot be undone. You're about to delete the\n      {{ label }} security scheme from the collection.\n    </p>\n    <div class=\"flex justify-between gap-2\">\n      <ScalarButton\n        class=\"flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('close')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        class=\"flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none\"\n        type=\"submit\"\n        @click=\"deleteScheme\">\n        Delete {{ label }}\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DeleteRequestAuthModal.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal } from '@scalar/components/modal'\n\nimport { useLocalization } from '@/v2/features/localization'\n\ndefineProps<{\n  state: { open: boolean; show: () => void; hide: () => void }\n  label: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst deleteScheme = () => {\n  emit('delete')\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"translate('apiClient.deleteRequestAuthModal.deleteSecurityScheme')\">\n    <p class=\"text-c-2 mb-4 text-sm leading-normal\">\n      {{\n        translate('apiClient.deleteRequestAuthModal.confirmation', {\n          name: label,\n        })\n      }}\n    </p>\n    <div class=\"flex justify-between gap-2\">\n      <ScalarButton\n        class=\"flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('close')\">\n        {{ translate('apiClient.deleteRequestAuthModal.cancel') }}\n      </ScalarButton>\n      <ScalarButton\n        class=\"flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none\"\n        type=\"submit\"\n        @click=\"deleteScheme\">\n        {{ translate('apiClient.deleteRequestAuthModal.delete') }} {{ label }}\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":""}

package/dist/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarModal } from "@scalar/components/modal";
@@ -13,6 +14,7 @@ var DeleteRequestAuthModal_vue_vue_type_script_setup_true_lang_default = /*@__PU
 	emits: ["close", "delete"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const deleteScheme = () => {
 			emit("delete");
 		};
@@ -20,26 +22,26 @@ var DeleteRequestAuthModal_vue_vue_type_script_setup_true_lang_default = /*@__PU
 			return openBlock(), createBlock(unref(ScalarModal), {
 				size: "xxs",
 				state: __props.state,
-				title: "Delete Security Scheme"
+				title: unref(translate)("apiClient.deleteRequestAuthModal.deleteSecurityScheme")
 			}, {
-				default: withCtx(() => [createElementVNode("p", _hoisted_1, " This cannot be undone. You're about to delete the " + toDisplayString(__props.label) + " security scheme from the collection. ", 1), createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarButton), {
+				default: withCtx(() => [createElementVNode("p", _hoisted_1, toDisplayString(unref(translate)("apiClient.deleteRequestAuthModal.confirmation", { name: __props.label })), 1), createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarButton), {
 					class: "flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none",
 					type: "button",
 					variant: "outlined",
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
 				}, {
-					default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Cancel ", -1)])]),
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.deleteRequestAuthModal.cancel")), 1)]),
 					_: 1
 				}), createVNode(unref(ScalarButton), {
 					class: "flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none",
 					type: "submit",
 					onClick: deleteScheme
 				}, {
-					default: withCtx(() => [createTextVNode(" Delete " + toDisplayString(__props.label), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.deleteRequestAuthModal.delete")) + " " + toDisplayString(__props.label), 1)]),
 					_: 1
 				})])]),
 				_: 1
-			}, 8, ["state"]);
+			}, 8, ["state", "title"]);
 		};
 	}
 });

package/dist/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteRequestAuthModal.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal } from '@scalar/components/modal'\n\ndefineProps<{\n  state: { open: boolean; show: () => void; hide: () => void }\n  label: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\nconst deleteScheme = () => {\n  emit('delete')\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    title=\"Delete Security Scheme\">\n    <p class=\"text-c-2 mb-4 text-sm leading-normal\">\n      This cannot be undone. You're about to delete the\n      {{ label }} security scheme from the collection.\n    </p>\n    <div class=\"flex justify-between gap-2\">\n      <ScalarButton\n        class=\"flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('close')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        class=\"flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none\"\n        type=\"submit\"\n        @click=\"deleteScheme\">\n        Delete {{ label }}\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EASA,MAAM,OAAO;EAKb,MAAM,qBAAqB;GACzB,KAAK,QAAQ;EACf;;uBAGE,YAuBc,MAAA,WAAA,GAAA;IAtBZ,MAAK;IACJ,OAAO,QAAA;IACR,OAAM;;2BAIF,CAHJ,mBAGI,KAHJ,YAAgD,wDAE9C,gBAAG,QAAA,KAAK,IAAG,0CACb,CAAA,GACA,mBAcM,OAdN,YAcM,CAbJ,YAMe,MAAA,YAAA,GAAA;KALb,OAAM;KACN,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;4BAEd,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFyB,YAEzB,EAAA,CAAA,EAAA,CAAA;;QACA,YAKe,MAAA,YAAA,GAAA;KAJb,OAAM;KACN,MAAK;KACJ,SAAO;;4BACD,CAAA,gBADe,aACf,gBAAG,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"DeleteRequestAuthModal.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal } from '@scalar/components/modal'\n\nimport { useLocalization } from '@/v2/features/localization'\n\ndefineProps<{\n  state: { open: boolean; show: () => void; hide: () => void }\n  label: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst deleteScheme = () => {\n  emit('delete')\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"translate('apiClient.deleteRequestAuthModal.deleteSecurityScheme')\">\n    <p class=\"text-c-2 mb-4 text-sm leading-normal\">\n      {{\n        translate('apiClient.deleteRequestAuthModal.confirmation', {\n          name: label,\n        })\n      }}\n    </p>\n    <div class=\"flex justify-between gap-2\">\n      <ScalarButton\n        class=\"flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('close')\">\n        {{ translate('apiClient.deleteRequestAuthModal.cancel') }}\n      </ScalarButton>\n      <ScalarButton\n        class=\"flex h-8 cursor-pointer items-center gap-1.5 px-3 shadow-none focus:outline-none\"\n        type=\"submit\"\n        @click=\"deleteScheme\">\n        {{ translate('apiClient.deleteRequestAuthModal.delete') }} {{ label }}\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAWA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,qBAAqB;GACzB,KAAK,QAAQ;EACf;;uBAGE,YA0Bc,MAAA,WAAA,GAAA;IAzBZ,MAAK;IACJ,OAAO,QAAA;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,uDAAA;;2BAOb,CANJ,mBAMI,KANJ,YAMI,gBAJA,MAAA,SAAA,CAAS,CAAA,iDAAA,EAAA,MAAoE,QAAA,MAAA,CAAA,CAAA,GAAA,CAAA,GAKjF,mBAcM,OAdN,YAcM,CAbJ,YAMe,MAAA,YAAA,GAAA;KALb,OAAM;KACN,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;4BAC8C,CAAA,gBAAA,gBAAvD,MAAA,SAAA,CAAS,CAAA,yCAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;QAEd,YAKe,MAAA,YAAA,GAAA;KAJb,OAAM;KACN,MAAK;KACJ,SAAO;;4BACkD,CAAA,gBAAA,gBAAvD,MAAA,SAAA,CAAS,CAAA,yCAAA,CAAA,IAA8C,MAAC,gBAAG,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OAuth2.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue"],"names":[],"mappings":"AAgmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAIzE,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAChC,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAO,KAAK,EAEV,YAAY,EACb,MAAM,8DAA8D,CAAA;AAIrE,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sDAAsD,CAAA;AAO7D,uDAAuD;AACvD,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,sBAAsB,EACtB,mBAAmB,CACpB,GAAG;IACF,2GAA2G;IAC3G,WAAW,CAAC,EAAE,OAAO,KAAK,CAAA;IAC1B,0FAA0F;IAC1F,qBAAqB,CAAC,EAAE,qBAAqB,CAAA;CAC9C,CAAA;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB,wCAAwC;iBAC3B,kBAAkB;IAC/B,kBAAkB;WACX,sBAAsB;IAC7B,6BAA6B;UACvB,MAAM,sBAAsB;IAClC,sBAAsB;oBACN,MAAM,EAAE;IACxB,sBAAsB;YACd,0BAA0B;IAClC,mCAAmC;YAC3B,YAAY,GAAG,IAAI;IAC3B,gBAAgB;cACN,MAAM;IAChB,kCAAkC;UAC5B,MAAM;IACZ,2CAA2C;cACjC,iBAAiB;IAC3B,uDAAuD;cAC7C,aAAa;IACvB;;;;OAIG;kBACW,OAAO;;;iBAmBC,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;;IA5ClE,wCAAwC;iBAC3B,kBAAkB;IAC/B,kBAAkB;WACX,sBAAsB;IAC7B,6BAA6B;UACvB,MAAM,sBAAsB;IAClC,sBAAsB;oBACN,MAAM,EAAE;IACxB,sBAAsB;YACd,0BAA0B;IAClC,mCAAmC;YAC3B,YAAY,GAAG,IAAI;IAC3B,gBAAgB;cACN,MAAM;IAChB,kCAAkC;UAC5B,MAAM;IACZ,2CAA2C;cACjC,iBAAiB;IAC3B,uDAAuD;cAC7C,aAAa;IACvB;;;;OAIG;kBACW,OAAO;;;iBAmBC,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;kFA6/BhE,CAAC"}
+{"version":3,"file":"OAuth2.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue"],"names":[],"mappings":"AA+qBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAIzE,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAChC,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAO,KAAK,EAEV,YAAY,EACb,MAAM,8DAA8D,CAAA;AAIrE,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sDAAsD,CAAA;AAS7D,uDAAuD;AACvD,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,sBAAsB,EACtB,mBAAmB,CACpB,GAAG;IACF,2GAA2G;IAC3G,WAAW,CAAC,EAAE,OAAO,KAAK,CAAA;IAC1B,0FAA0F;IAC1F,qBAAqB,CAAC,EAAE,qBAAqB,CAAA;CAC9C,CAAA;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB,wCAAwC;iBAC3B,kBAAkB;IAC/B,kBAAkB;WACX,sBAAsB;IAC7B,6BAA6B;UACvB,MAAM,sBAAsB;IAClC,sBAAsB;oBACN,MAAM,EAAE;IACxB,sBAAsB;YACd,0BAA0B;IAClC,mCAAmC;YAC3B,YAAY,GAAG,IAAI;IAC3B,gBAAgB;cACN,MAAM;IAChB,kCAAkC;UAC5B,MAAM;IACZ,2CAA2C;cACjC,iBAAiB;IAC3B,uDAAuD;cAC7C,aAAa;IACvB;;;;OAIG;kBACW,OAAO;;;iBAmBC,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;;IA5ClE,wCAAwC;iBAC3B,kBAAkB;IAC/B,kBAAkB;WACX,sBAAsB;IAC7B,6BAA6B;UACvB,MAAM,sBAAsB;IAClC,sBAAsB;oBACN,MAAM,EAAE;IACxB,sBAAsB;YACd,0BAA0B;IAClC,mCAAmC;YAC3B,YAAY,GAAG,IAAI;IAC3B,gBAAgB;cACN,MAAM;IAChB,kCAAkC;UAC5B,MAAM;IACZ,2CAA2C;cACjC,iBAAiB;IAC3B,uDAAuD;cAC7C,aAAa;IACvB;;;;OAIG;kBACW,OAAO;;;iBAmBC,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;kFAmsChE,CAAC"}

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuth2.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue"],"sourcesContent":["<script lang=\"ts\">\n/**  Any config options required for the OAuth2 flow */\nexport type OAuth2Options = Pick<\n  ApiClientConfiguration,\n  'oauth2RedirectUri'\n> & {\n  /** Optional fetch override (IPC-backed on desktop) used for token exchange, refresh, and OIDC discovery */\n  customFetch?: typeof fetch\n  /** Optional redirect capture (loopback-backed on desktop) for interactive OAuth2 flows */\n  captureOAuth2Callback?: CaptureOAuth2Callback\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useLoadingState } from '@scalar/components/loading'\nimport type { ApiClientConfiguration } from '@scalar/types/api-reference'\nimport { pkceOptions } from '@scalar/types/entities'\nimport { useToasts } from '@scalar/use-toasts'\nimport type { SecretsOAuthFlows } from '@scalar/workspace-store/entities/auth'\nimport type {\n  ApiReferenceEvents,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport {\n  getEnvironmentVariables,\n  type OAuthFlowAuthorizationCodeSecret,\n  type OAuthFlowClientCredentialsSecret,\n  type OAuthFlowPasswordSecret,\n  type OAuthFlowsObjectSecret,\n  type SecuritySchemeObjectSecret,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { XScalarCredentialsLocation } from '@scalar/workspace-store/schemas/extensions/security/x-scalar-credentials-location'\nimport { type XusePkce } from '@scalar/workspace-store/schemas/extensions/security/x-use-pkce'\nimport type {\n  OAuthFlow,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, ref, watch } from 'vue'\n\nimport OAuthScopesInput from '@/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue'\nimport {\n  authorizeOauth2,\n  refreshOauth2Token,\n  type CaptureOAuth2Callback,\n} from '@/v2/blocks/scalar-auth-selector-block/helpers/oauth'\nimport { resolveDefaultOAuth2RedirectUri } from '@/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url'\nimport { DataTableRow } from '@/v2/components/data-table'\n\nimport RequestAuthDataTableInput from './RequestAuthDataTableInput.vue'\n\nconst {\n  environment,\n  flows,\n  type,\n  scheme,\n  selectedScopes: selectedScopesProp,\n  server,\n  proxyUrl,\n  eventBus,\n  name,\n  options = {},\n} = defineProps<{\n  /** Current environment configuration */\n  environment: XScalarEnvironment\n  /** OAuth flows */\n  flows: OAuthFlowsObjectSecret\n  /** Type of the OAuth flow */\n  type: keyof OAuthFlowsObjectSecret\n  /** Selected scopes */\n  selectedScopes: string[]\n  /** Security scheme */\n  scheme: SecuritySchemeObjectSecret\n  /** Current server configuration */\n  server: ServerObject | null\n  /** Proxy URL */\n  proxyUrl: string\n  /** Name of the security scheme */\n  name: string\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /**\n   * Hides the Authorize / Refresh / Clear actions. Used when the form is embedded as a\n   * configuration-only view (e.g. behind a gear icon), so the host component owns the\n   * authorize action and the tokens are routed to the scheme it chooses.\n   */\n  hideActions?: boolean\n}>()\n\nconst emits = defineEmits<{\n  (\n    e: 'update:selectedScopes',\n    payload: { scopes?: string[]; scope?: string; selected?: boolean },\n  ): void\n  (\n    e: 'upsert:scope',\n    payload: Omit<ApiReferenceEvents['auth:upsert:scopes'], 'name'>,\n  ): void\n  (\n    e: 'delete:scope',\n    payload: Omit<ApiReferenceEvents['auth:delete:scopes'], 'name'>,\n  ): void\n}>()\n\nconst loader = useLoadingState()\nconst { toast } = useToasts()\n\n/** The current OAuth flow based on the selected type */\nconst flow = computed(() => flows[type]!)\ntype NonImplicitFlow =\n  | OAuthFlowPasswordSecret\n  | OAuthFlowClientCredentialsSecret\n  | OAuthFlowAuthorizationCodeSecret\n\n/** We filter selected scopes to only include scopes that are defined on this flow (own keys only). */\nconst selectedScopes = computed(() => {\n  const definedScopes = flow.value.scopes\n  if (!definedScopes) {\n    return []\n  }\n  return selectedScopesProp.filter((scope) =>\n    Object.hasOwn(definedScopes, scope),\n  )\n})\n\n/**\n * Show the client secret whenever the flow supports one. PKCE and a client\n * secret are independent, so confidential clients can use both together\n * (see RFC 9700 Section 2.1.1).\n */\nconst showClientSecret = computed(\n  () => 'x-scalar-secret-client-secret' in flow.value,\n)\n\nconst clientSecretValue = computed((): string => {\n  const f = flow.value as { 'x-scalar-secret-client-secret'?: string }\n  return f['x-scalar-secret-client-secret'] ?? ''\n})\n\n/** Updates the security scheme base */\nconst handleOauth2Update = (\n  payload: Partial<OAuthFlow & XScalarCredentialsLocation>,\n): void => {\n  // OpenIdConnect uses the secrets update for all\n  if (scheme.type === 'openIdConnect') {\n    return handleOauth2SecretsUpdate(payload)\n  }\n\n  // Only OAuth2 schemes carry flows on the document; this component is never\n  // rendered for the other scheme types.\n  if (scheme.type !== 'oauth2') {\n    return\n  }\n\n  eventBus.emit('auth:update:security-scheme', {\n    payload: {\n      type: scheme.type,\n      flows: {\n        [type]: payload,\n      },\n    },\n    name,\n  })\n}\n\n/** Updates the flow secrets */\nconst handleOauth2SecretsUpdate = (\n  payload: Omit<Partial<SecretsOAuthFlows[keyof SecretsOAuthFlows]>, 'type'>,\n): void => {\n  // This component only renders for oauth2/openIdConnect. Other scheme types (e.g. mutualTLS)\n  // carry no flow secrets, so there is nothing to persist and no matching secrets payload type.\n  if (scheme.type !== 'oauth2' && scheme.type !== 'openIdConnect') {\n    return\n  }\n\n  eventBus.emit('auth:update:security-scheme-secrets', {\n    payload: {\n      type: scheme.type,\n      [type]: payload,\n    },\n    name,\n  })\n}\n\n/** Clears the flow secrets */\nconst clearOauth2Secrets = (): void => {\n  if (loader.isLoading) {\n    return\n  }\n  eventBus.emit('auth:clear:security-scheme-secrets', {\n    name,\n  })\n}\n\n/** Clears stored access and refresh tokens (authorized state) */\nconst handleClearAccessTokens = (): void => {\n  if (loader.isLoading) {\n    return\n  }\n  handleOauth2SecretsUpdate({\n    'x-scalar-secret-token': '',\n    'x-scalar-secret-refresh-token': '',\n  })\n}\n\n/** Track redirect URI prefill per flow instance to support document switching */\nconst prefilledFlowIdentity = ref<string | null>(null)\nconst hasHandledRedirectPrefill = ref(false)\n\nconst resolveFlowIdentity = (\n  currentFlow: OAuthFlowsObjectSecret[keyof OAuthFlowsObjectSecret] | undefined,\n): string =>\n  JSON.stringify({\n    type,\n    authorizationUrl:\n      currentFlow && 'authorizationUrl' in currentFlow\n        ? currentFlow.authorizationUrl\n        : '',\n    tokenUrl:\n      currentFlow && 'tokenUrl' in currentFlow ? currentFlow.tokenUrl : '',\n    refreshUrl: currentFlow?.refreshUrl ?? '',\n    scopes: Object.keys(currentFlow?.scopes ?? {}),\n  })\n\n/** Default the redirect-uri to the current origin if we have access to window */\nwatch(\n  () => flow.value,\n  (currentFlow) => {\n    if (!currentFlow || !('x-scalar-secret-redirect-uri' in currentFlow)) {\n      return\n    }\n\n    const flowIdentity = resolveFlowIdentity(currentFlow)\n    if (prefilledFlowIdentity.value !== flowIdentity) {\n      prefilledFlowIdentity.value = flowIdentity\n      hasHandledRedirectPrefill.value = false\n    }\n\n    if (hasHandledRedirectPrefill.value) {\n      return\n    }\n\n    const newRedirectUri = (currentFlow as OAuthFlowAuthorizationCodeSecret)[\n      'x-scalar-secret-redirect-uri'\n    ]\n    const defaultRedirectUri = resolveDefaultOAuth2RedirectUri(options)\n\n    hasHandledRedirectPrefill.value = true\n\n    // The desktop loopback path computes the redirect URI at authorize time (an\n    // ephemeral 127.0.0.1 port), so persisting a default into the document would\n    // only bake in a stale, unused value. Leave it empty and show a hint instead.\n    if (\n      newRedirectUri ||\n      !defaultRedirectUri ||\n      options.captureOAuth2Callback\n    ) {\n      return\n    }\n\n    handleOauth2SecretsUpdate({\n      'x-scalar-secret-redirect-uri': defaultRedirectUri,\n    })\n  },\n  { immediate: true },\n)\n\n/**\n * Authorizes the user using the specified OAuth flow.\n * Opens the appropriate OAuth dialog and/or performs the token exchange.\n */\nconst handleAuthorize = async (): Promise<void> => {\n  if (loader.isLoading) {\n    return\n  }\n\n  loader.start()\n\n  const [error, tokens] = await authorizeOauth2(\n    flows,\n    type,\n    selectedScopes.value,\n    server,\n    proxyUrl,\n    getEnvironmentVariables(environment),\n    options.customFetch,\n    options.captureOAuth2Callback,\n  )\n\n  await loader.clear()\n\n  if (tokens?.accessToken) {\n    handleOauth2SecretsUpdate({\n      'x-scalar-secret-token': tokens.accessToken,\n      ...(tokens.refreshToken\n        ? { 'x-scalar-secret-refresh-token': tokens.refreshToken }\n        : {}),\n    })\n  } else {\n    console.error(error)\n    toast(error?.message ?? 'Failed to authorize', 'error')\n  }\n}\n\n/** Whether the current flow supports refreshing the access token */\nconst supportsRefreshToken = computed(() => type !== 'implicit')\n\n/**\n * Refresh URL placeholder, shows tokenUrl as hint if refreshUrl is not specified.\n * This helps users understand that tokenUrl will be used as fallback.\n */\nconst refreshUrlPlaceholder = computed(() => {\n  if ('tokenUrl' in flow.value && flow.value.tokenUrl) {\n    return flow.value.tokenUrl\n  }\n  return 'https://galaxy.scalar.com/oauth/refresh'\n})\n\n/**\n * Uses the stored refresh token to obtain a new access token\n * via grant_type=refresh_token.\n */\nconst handleRefresh = async (): Promise<void> => {\n  if (loader.isLoading || type === 'implicit') {\n    return\n  }\n\n  loader.start()\n\n  const [error, tokens] = await refreshOauth2Token(\n    flows,\n    type,\n    proxyUrl,\n    server,\n    getEnvironmentVariables(environment),\n    options.customFetch,\n  )\n\n  await loader.clear()\n\n  if (tokens?.accessToken) {\n    handleOauth2SecretsUpdate({\n      'x-scalar-secret-token': tokens.accessToken,\n      ...(tokens.refreshToken\n        ? { 'x-scalar-secret-refresh-token': tokens.refreshToken }\n        : {}),\n    })\n  } else {\n    console.error(error)\n    toast(error?.message ?? 'Failed to refresh token', 'error')\n  }\n}\n\n/** Updates the secret location */\nconst handleSecretLocationUpdate = (value: string): void => {\n  const credentialsLocation = value === 'body' ? 'body' : 'header'\n\n  if (scheme.type !== 'openIdConnect') {\n    handleOauth2Update({\n      'x-scalar-credentials-location': credentialsLocation,\n    })\n  }\n\n  handleOauth2SecretsUpdate({\n    'x-scalar-credentials-location': credentialsLocation,\n  })\n}\n</script>\n\n<template>\n  <!-- Access Token Display: Shows when user is already authorized -->\n  <template v-if=\"Boolean(flow['x-scalar-secret-token'])\">\n    <DataTableRow>\n      <RequestAuthDataTableInput\n        class=\"border-r-transparent\"\n        :environment\n        :modelValue=\"flow['x-scalar-secret-token']\"\n        placeholder=\"QUxMIFlPVVIgQkFTRSBBUkUgQkVMT05HIFRPIFVT\"\n        type=\"password\"\n        @update:modelValue=\"\n          (v) => handleOauth2SecretsUpdate({ 'x-scalar-secret-token': v })\n        \">\n        Access Token\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow v-if=\"supportsRefreshToken\">\n      <RequestAuthDataTableInput\n        class=\"border-r-transparent\"\n        :environment\n        :modelValue=\"flow.refreshUrl ?? ''\"\n        :placeholder=\"refreshUrlPlaceholder\"\n        @update:modelValue=\"(v) => handleOauth2Update({ refreshUrl: v })\">\n        Refresh URL\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow\n      v-if=\"!hideActions\"\n      class=\"min-w-full\">\n      <div class=\"flex h-8 items-center justify-end gap-2 border-t\">\n        <ScalarButton\n          v-if=\"supportsRefreshToken\"\n          class=\"p-0 px-2 py-0.5\"\n          :loader\n          size=\"sm\"\n          variant=\"outlined\"\n          @click=\"handleRefresh\">\n          Refresh\n        </ScalarButton>\n        <ScalarButton\n          class=\"mr-1 p-0 px-2 py-0.5\"\n          :disabled=\"loader.isLoading\"\n          size=\"sm\"\n          variant=\"outlined\"\n          @click=\"handleClearAccessTokens\">\n          Clear\n        </ScalarButton>\n      </div>\n    </DataTableRow>\n  </template>\n\n  <!-- Authorization Form: Shows when user needs to authorize -->\n  <template v-else>\n    <DataTableRow>\n      <RequestAuthDataTableInput\n        v-if=\"'authorizationUrl' in flow\"\n        containerClass=\"border-r-0\"\n        :environment\n        :modelValue=\"flow['x-scalar-secret-auth-url'] ?? ''\"\n        placeholder=\"https://galaxy.scalar.com/authorize\"\n        @update:modelValue=\"\n          (v) => {\n            handleOauth2SecretsUpdate({ 'x-scalar-secret-auth-url': v })\n            handleOauth2Update({ authorizationUrl: v })\n          }\n        \">\n        Auth URL\n      </RequestAuthDataTableInput>\n\n      <RequestAuthDataTableInput\n        v-if=\"'tokenUrl' in flow\"\n        :environment\n        :modelValue=\"flow['x-scalar-secret-token-url'] ?? ''\"\n        placeholder=\"https://galaxy.scalar.com/token\"\n        @update:modelValue=\"\n          (v) => {\n            handleOauth2SecretsUpdate({ 'x-scalar-secret-token-url': v })\n            handleOauth2Update({ tokenUrl: v })\n          }\n        \">\n        Token URL\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow v-if=\"'x-scalar-secret-redirect-uri' in flow\">\n      <RequestAuthDataTableInput\n        :environment\n        :modelValue=\"flow['x-scalar-secret-redirect-uri']\"\n        :placeholder=\"\n          options.captureOAuth2Callback\n            ? `${resolveDefaultOAuth2RedirectUri(options) || 'http://127.0.0.1'} (handled automatically)`\n            : 'Optional redirect URL'\n        \"\n        @update:modelValue=\"\n          (v) => {\n            hasHandledRedirectPrefill = true\n            handleOauth2SecretsUpdate({ 'x-scalar-secret-redirect-uri': v })\n          }\n        \">\n        Redirect URL\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <template\n      v-if=\"\n        'x-scalar-secret-username' in flow && 'x-scalar-secret-password' in flow\n      \">\n      <DataTableRow>\n        <RequestAuthDataTableInput\n          class=\"text-c-2\"\n          :environment\n          :modelValue=\"flow['x-scalar-secret-username']\"\n          placeholder=\"janedoe\"\n          @update:modelValue=\"\n            (v) => handleOauth2SecretsUpdate({ 'x-scalar-secret-username': v })\n          \">\n          Username\n        </RequestAuthDataTableInput>\n      </DataTableRow>\n\n      <DataTableRow>\n        <RequestAuthDataTableInput\n          :environment\n          :modelValue=\"flow['x-scalar-secret-password']\"\n          placeholder=\"********\"\n          type=\"password\"\n          @update:modelValue=\"\n            (v) => handleOauth2SecretsUpdate({ 'x-scalar-secret-password': v })\n          \">\n          Password\n        </RequestAuthDataTableInput>\n      </DataTableRow>\n    </template>\n\n    <DataTableRow>\n      <RequestAuthDataTableInput\n        :environment\n        :modelValue=\"flow['x-scalar-secret-client-id']\"\n        placeholder=\"12345\"\n        @update:modelValue=\"\n          (v) => handleOauth2SecretsUpdate({ 'x-scalar-secret-client-id': v })\n        \">\n        Client ID\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow v-if=\"showClientSecret\">\n      <RequestAuthDataTableInput\n        :environment\n        :modelValue=\"clientSecretValue\"\n        placeholder=\"XYZ123\"\n        type=\"password\"\n        @update:modelValue=\"\n          (v) =>\n            handleOauth2SecretsUpdate({ 'x-scalar-secret-client-secret': v })\n        \">\n        Client Secret\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow v-if=\"'x-usePkce' in flow\">\n      <RequestAuthDataTableInput\n        :enum=\"pkceOptions\"\n        :environment\n        :modelValue=\"flow['x-usePkce']\"\n        readOnly\n        @update:modelValue=\"\n          (v) =>\n            handleOauth2Update({\n              'x-usePkce': v as XusePkce['x-usePkce'],\n            })\n        \">\n        Use PKCE\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <!-- Credentials Location -->\n    <DataTableRow v-if=\"type !== 'implicit'\">\n      <RequestAuthDataTableInput\n        :enum=\"['header', 'body']\"\n        :environment\n        :modelValue=\"\n          (flow as NonImplicitFlow)['x-scalar-credentials-location'] || 'header'\n        \"\n        placeholder=\"header\"\n        readOnly\n        @update:modelValue=\"(v) => handleSecretLocationUpdate(v)\">\n        Credentials Location\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <!-- Scopes -->\n    <DataTableRow>\n      <OAuthScopesInput\n        :flow\n        :flowType=\"type\"\n        :selectedScopes\n        @update:selectedScopes=\"(v) => emits('update:selectedScopes', v)\"\n        @upsert:scope=\"(v) => emits('upsert:scope', v)\"\n        @delete:scope=\"(v) => emits('delete:scope', v)\" />\n    </DataTableRow>\n\n    <DataTableRow\n      v-if=\"!hideActions\"\n      class=\"min-w-full\">\n      <div class=\"flex h-8 w-full items-center justify-end border-t\">\n        <!-- Allow clearing the oauth section and going back to discovery -->\n        <ScalarButton\n          v-if=\"scheme.type === 'openIdConnect'\"\n          class=\"mr-1 p-0 px-2 py-0.5\"\n          :disabled=\"loader.isLoading\"\n          size=\"sm\"\n          variant=\"outlined\"\n          @click=\"clearOauth2Secrets\">\n          Clear\n        </ScalarButton>\n\n        <ScalarButton\n          class=\"mr-0.75 p-0 px-2 py-0.5\"\n          :loader\n          size=\"sm\"\n          variant=\"outlined\"\n          @click=\"handleAuthorize\">\n          Authorize\n        </ScalarButton>\n      </div>\n    </DataTableRow>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"OAuth2.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue"],"sourcesContent":["<script lang=\"ts\">\n/**  Any config options required for the OAuth2 flow */\nexport type OAuth2Options = Pick<\n  ApiClientConfiguration,\n  'oauth2RedirectUri'\n> & {\n  /** Optional fetch override (IPC-backed on desktop) used for token exchange, refresh, and OIDC discovery */\n  customFetch?: typeof fetch\n  /** Optional redirect capture (loopback-backed on desktop) for interactive OAuth2 flows */\n  captureOAuth2Callback?: CaptureOAuth2Callback\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useLoadingState } from '@scalar/components/loading'\nimport type { ApiClientConfiguration } from '@scalar/types/api-reference'\nimport { pkceOptions } from '@scalar/types/entities'\nimport { useToasts } from '@scalar/use-toasts'\nimport type { SecretsOAuthFlows } from '@scalar/workspace-store/entities/auth'\nimport type {\n  ApiReferenceEvents,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport {\n  getEnvironmentVariables,\n  type OAuthFlowAuthorizationCodeSecret,\n  type OAuthFlowClientCredentialsSecret,\n  type OAuthFlowPasswordSecret,\n  type OAuthFlowsObjectSecret,\n  type SecuritySchemeObjectSecret,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { XScalarCredentialsLocation } from '@scalar/workspace-store/schemas/extensions/security/x-scalar-credentials-location'\nimport { type XusePkce } from '@scalar/workspace-store/schemas/extensions/security/x-use-pkce'\nimport type {\n  OAuthFlow,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\n\nimport OAuthScopesInput from '@/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue'\nimport {\n  authorizeOauth2,\n  refreshOauth2Token,\n  type CaptureOAuth2Callback,\n} from '@/v2/blocks/scalar-auth-selector-block/helpers/oauth'\nimport { resolveDefaultOAuth2RedirectUri } from '@/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url'\nimport { DataTableRow } from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport type { DeviceAuthorizationPrompt } from '../helpers/oauth-device-authorization'\nimport RequestAuthDataTableInput from './RequestAuthDataTableInput.vue'\n\nconst {\n  environment,\n  flows,\n  type,\n  scheme,\n  selectedScopes: selectedScopesProp,\n  server,\n  proxyUrl,\n  eventBus,\n  name,\n  options = {},\n} = defineProps<{\n  /** Current environment configuration */\n  environment: XScalarEnvironment\n  /** OAuth flows */\n  flows: OAuthFlowsObjectSecret\n  /** Type of the OAuth flow */\n  type: keyof OAuthFlowsObjectSecret\n  /** Selected scopes */\n  selectedScopes: string[]\n  /** Security scheme */\n  scheme: SecuritySchemeObjectSecret\n  /** Current server configuration */\n  server: ServerObject | null\n  /** Proxy URL */\n  proxyUrl: string\n  /** Name of the security scheme */\n  name: string\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /**\n   * Hides the Authorize / Refresh / Clear actions. Used when the form is embedded as a\n   * configuration-only view (e.g. behind a gear icon), so the host component owns the\n   * authorize action and the tokens are routed to the scheme it chooses.\n   */\n  hideActions?: boolean\n}>()\n\nconst emits = defineEmits<{\n  (\n    e: 'update:selectedScopes',\n    payload: { scopes?: string[]; scope?: string; selected?: boolean },\n  ): void\n  (\n    e: 'upsert:scope',\n    payload: Omit<ApiReferenceEvents['auth:upsert:scopes'], 'name'>,\n  ): void\n  (\n    e: 'delete:scope',\n    payload: Omit<ApiReferenceEvents['auth:delete:scopes'], 'name'>,\n  ): void\n}>()\n\nconst devicePrompt = ref<DeviceAuthorizationPrompt | null>(null)\nlet deviceController: AbortController | undefined\nconst cancelDeviceAuthorization = (): void => {\n  deviceController?.abort()\n  devicePrompt.value = null\n}\nonBeforeUnmount(cancelDeviceAuthorization)\nwatch(() => [type, name, flows], cancelDeviceAuthorization)\n\nconst { translate } = useLocalization()\n\nconst loader = useLoadingState()\nconst { toast } = useToasts()\n\n/** The current OAuth flow based on the selected type */\nconst flow = computed(() => flows[type]!)\ntype NonImplicitFlow =\n  | OAuthFlowPasswordSecret\n  | OAuthFlowClientCredentialsSecret\n  | OAuthFlowAuthorizationCodeSecret\n\n/** We filter selected scopes to only include scopes that are defined on this flow (own keys only). */\nconst selectedScopes = computed(() => {\n  const definedScopes = flow.value.scopes\n  if (!definedScopes) {\n    return []\n  }\n  return selectedScopesProp.filter((scope) =>\n    Object.hasOwn(definedScopes, scope),\n  )\n})\n\n/**\n * Show the client secret whenever the flow supports one. PKCE and a client\n * secret are independent, so confidential clients can use both together\n * (see RFC 9700 Section 2.1.1).\n */\nconst showClientSecret = computed(\n  () => 'x-scalar-secret-client-secret' in flow.value,\n)\n\nconst clientSecretValue = computed((): string => {\n  const f = flow.value as { 'x-scalar-secret-client-secret'?: string }\n  return f['x-scalar-secret-client-secret'] ?? ''\n})\n\n/** Updates the security scheme base */\nconst handleOauth2Update = (\n  payload: Partial<OAuthFlow & XScalarCredentialsLocation> & {\n    deviceAuthorizationUrl?: string\n  },\n): void => {\n  // OpenIdConnect uses the secrets update for all\n  if (scheme.type === 'openIdConnect') {\n    return handleOauth2SecretsUpdate(payload)\n  }\n\n  // Only OAuth2 schemes carry flows on the document; this component is never\n  // rendered for the other scheme types.\n  if (scheme.type !== 'oauth2') {\n    return\n  }\n\n  eventBus.emit('auth:update:security-scheme', {\n    payload: {\n      type: scheme.type,\n      flows: {\n        [type]: payload,\n      },\n    },\n    name,\n  })\n}\n\n/** Updates the flow secrets */\nconst handleOauth2SecretsUpdate = (\n  payload: Omit<Partial<SecretsOAuthFlows[keyof SecretsOAuthFlows]>, 'type'>,\n): void => {\n  // This component only renders for oauth2/openIdConnect. Other scheme types (e.g. mutualTLS)\n  // carry no flow secrets, so there is nothing to persist and no matching secrets payload type.\n  if (scheme.type !== 'oauth2' && scheme.type !== 'openIdConnect') {\n    return\n  }\n\n  eventBus.emit('auth:update:security-scheme-secrets', {\n    payload: {\n      type: scheme.type,\n      [type]: payload,\n    },\n    name,\n  })\n}\n\n/** Clears the flow secrets */\nconst clearOauth2Secrets = (): void => {\n  if (loader.isLoading) {\n    return\n  }\n  eventBus.emit('auth:clear:security-scheme-secrets', {\n    name,\n  })\n}\n\n/** Clears stored access and refresh tokens (authorized state) */\nconst handleClearAccessTokens = (): void => {\n  if (loader.isLoading) {\n    return\n  }\n  handleOauth2SecretsUpdate({\n    'x-scalar-secret-token': '',\n    'x-scalar-secret-refresh-token': '',\n  })\n}\n\n/** Track redirect URI prefill per flow instance to support document switching */\nconst prefilledFlowIdentity = ref<string | null>(null)\nconst hasHandledRedirectPrefill = ref(false)\n\nconst resolveFlowIdentity = (\n  currentFlow: OAuthFlowsObjectSecret[keyof OAuthFlowsObjectSecret] | undefined,\n): string =>\n  JSON.stringify({\n    type,\n    authorizationUrl:\n      currentFlow && 'authorizationUrl' in currentFlow\n        ? currentFlow.authorizationUrl\n        : '',\n    tokenUrl:\n      currentFlow && 'tokenUrl' in currentFlow ? currentFlow.tokenUrl : '',\n    refreshUrl: currentFlow?.refreshUrl ?? '',\n    scopes: Object.keys(currentFlow?.scopes ?? {}),\n  })\n\n/** Default the redirect-uri to the current origin if we have access to window */\nwatch(\n  () => flow.value,\n  (currentFlow) => {\n    if (!currentFlow || !('x-scalar-secret-redirect-uri' in currentFlow)) {\n      return\n    }\n\n    const flowIdentity = resolveFlowIdentity(currentFlow)\n    if (prefilledFlowIdentity.value !== flowIdentity) {\n      prefilledFlowIdentity.value = flowIdentity\n      hasHandledRedirectPrefill.value = false\n    }\n\n    if (hasHandledRedirectPrefill.value) {\n      return\n    }\n\n    const newRedirectUri = (currentFlow as OAuthFlowAuthorizationCodeSecret)[\n      'x-scalar-secret-redirect-uri'\n    ]\n    const defaultRedirectUri = resolveDefaultOAuth2RedirectUri(options)\n\n    hasHandledRedirectPrefill.value = true\n\n    // The desktop loopback path computes the redirect URI at authorize time (an\n    // ephemeral 127.0.0.1 port), so persisting a default into the document would\n    // only bake in a stale, unused value. Leave it empty and show a hint instead.\n    if (\n      newRedirectUri ||\n      !defaultRedirectUri ||\n      options.captureOAuth2Callback\n    ) {\n      return\n    }\n\n    handleOauth2SecretsUpdate({\n      'x-scalar-secret-redirect-uri': defaultRedirectUri,\n    })\n  },\n  { immediate: true },\n)\n\n/**\n * Authorizes the user using the specified OAuth flow.\n * Opens the appropriate OAuth dialog and/or performs the token exchange.\n */\nconst handleAuthorize = async (): Promise<void> => {\n  if (loader.isLoading) {\n    return\n  }\n\n  loader.start()\n  const controller = new AbortController()\n  deviceController = controller\n\n  const [error, tokens] = await authorizeOauth2(\n    flows,\n    type,\n    selectedScopes.value,\n    server,\n    proxyUrl,\n    getEnvironmentVariables(environment),\n    options.customFetch,\n    options.captureOAuth2Callback,\n    {\n      signal: controller.signal,\n      onPrompt: (prompt) => {\n        devicePrompt.value = prompt\n      },\n    },\n  )\n  devicePrompt.value = null\n\n  await loader.clear()\n  if (controller.signal.aborted) {\n    return\n  }\n\n  if (tokens?.accessToken) {\n    handleOauth2SecretsUpdate({\n      'x-scalar-secret-token': tokens.accessToken,\n      ...(tokens.refreshToken\n        ? { 'x-scalar-secret-refresh-token': tokens.refreshToken }\n        : {}),\n    })\n  } else {\n    console.error(error)\n    toast(\n      error?.message ?? translate('apiClient.oauth2.failedToauthorize'),\n      'error',\n    )\n  }\n}\n\n/** Whether the current flow supports refreshing the access token */\nconst supportsRefreshToken = computed(() => type !== 'implicit')\n\n/**\n * Refresh URL placeholder, shows tokenUrl as hint if refreshUrl is not specified.\n * This helps users understand that tokenUrl will be used as fallback.\n */\nconst refreshUrlPlaceholder = computed(() => {\n  if ('tokenUrl' in flow.value && flow.value.tokenUrl) {\n    return flow.value.tokenUrl\n  }\n  return 'https://galaxy.scalar.com/oauth/refresh'\n})\n\n/**\n * Uses the stored refresh token to obtain a new access token\n * via grant_type=refresh_token.\n */\nconst handleRefresh = async (): Promise<void> => {\n  if (loader.isLoading || type === 'implicit') {\n    return\n  }\n\n  loader.start()\n\n  const [error, tokens] = await refreshOauth2Token(\n    flows,\n    type,\n    proxyUrl,\n    server,\n    getEnvironmentVariables(environment),\n    options.customFetch,\n  )\n\n  await loader.clear()\n\n  if (tokens?.accessToken) {\n    handleOauth2SecretsUpdate({\n      'x-scalar-secret-token': tokens.accessToken,\n      ...(tokens.refreshToken\n        ? { 'x-scalar-secret-refresh-token': tokens.refreshToken }\n        : {}),\n    })\n  } else {\n    console.error(error)\n    toast(\n      error?.message ?? translate('apiClient.oauth2.failedToRefreshToken'),\n      'error',\n    )\n  }\n}\n\n/** Updates the secret location */\nconst handleSecretLocationUpdate = (value: string): void => {\n  const credentialsLocation = value === 'body' ? 'body' : 'header'\n\n  if (scheme.type !== 'openIdConnect') {\n    handleOauth2Update({\n      'x-scalar-credentials-location': credentialsLocation,\n    })\n  }\n\n  handleOauth2SecretsUpdate({\n    'x-scalar-credentials-location': credentialsLocation,\n  })\n}\n</script>\n\n<template>\n  <!-- Access Token Display: Shows when user is already authorized -->\n  <template v-if=\"Boolean(flow['x-scalar-secret-token'])\">\n    <DataTableRow>\n      <RequestAuthDataTableInput\n        class=\"border-r-transparent\"\n        :environment\n        :modelValue=\"flow['x-scalar-secret-token']\"\n        placeholder=\"QUxMIFlPVVIgQkFTRSBBUkUgQkVMT05HIFRPIFVT\"\n        type=\"password\"\n        @update:modelValue=\"\n          (v) => handleOauth2SecretsUpdate({ 'x-scalar-secret-token': v })\n        \">\n        {{ translate('apiClient.oauth2.accessToken') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow v-if=\"supportsRefreshToken\">\n      <RequestAuthDataTableInput\n        class=\"border-r-transparent\"\n        :environment\n        :modelValue=\"flow.refreshUrl ?? ''\"\n        :placeholder=\"refreshUrlPlaceholder\"\n        @update:modelValue=\"(v) => handleOauth2Update({ refreshUrl: v })\">\n        {{ translate('apiClient.oauth2.refreshUrl') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow\n      v-if=\"!hideActions\"\n      class=\"min-w-full\">\n      <div class=\"flex h-8 items-center justify-end gap-2 border-t\">\n        <ScalarButton\n          v-if=\"supportsRefreshToken\"\n          class=\"p-0 px-2 py-0.5\"\n          :loader\n          size=\"sm\"\n          variant=\"outlined\"\n          @click=\"handleRefresh\">\n          {{ translate('apiClient.oauth2.refresh') }}\n        </ScalarButton>\n        <ScalarButton\n          class=\"mr-1 p-0 px-2 py-0.5\"\n          :disabled=\"loader.isLoading\"\n          size=\"sm\"\n          variant=\"outlined\"\n          @click=\"handleClearAccessTokens\">\n          {{ translate('apiClient.oauth2.clear') }}\n        </ScalarButton>\n      </div>\n    </DataTableRow>\n  </template>\n\n  <!-- Authorization Form: Shows when user needs to authorize -->\n  <template v-else>\n    <DataTableRow v-if=\"'deviceAuthorizationUrl' in flow\">\n      <RequestAuthDataTableInput\n        :environment\n        :modelValue=\"flow.deviceAuthorizationUrl\"\n        @update:modelValue=\"\n          (v) => handleOauth2Update({ deviceAuthorizationUrl: v })\n        \">\n        {{ translate('apiClient.oauth2.deviceAuthorizationUrl') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n    <DataTableRow v-if=\"devicePrompt\">\n      <div class=\"w-full p-2\">\n        <div\n          class=\"bg-b-2 flex flex-col gap-3 rounded-lg border p-3 text-sm\"\n          role=\"status\">\n          <p class=\"text-c-2 text-xs leading-normal\">\n            {{ translate('apiClient.oauth2.deviceVerificationPrompt') }}\n          </p>\n          <strong\n            class=\"bg-b-1 font-code w-fit max-w-full rounded border px-3 py-2 text-base font-medium tracking-widest break-all select-all\">\n            {{ devicePrompt.userCode }}\n          </strong>\n          <a\n            class=\"text-c-accent w-fit max-w-full text-xs break-all underline underline-offset-2\"\n            :href=\"\n              devicePrompt.verificationUriComplete ||\n              devicePrompt.verificationUri\n            \"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\">\n            {{ devicePrompt.verificationUri }}\n          </a>\n          <div class=\"flex items-center justify-between gap-3\">\n            <p class=\"text-c-2 text-xs\">\n              {{ translate('apiClient.oauth2.waitingForAuthorization') }}\n            </p>\n            <ScalarButton\n              size=\"xs\"\n              variant=\"outlined\"\n              @click=\"cancelDeviceAuthorization\">\n              {{ translate('apiClient.oauth2.cancelDeviceAuthorization') }}\n            </ScalarButton>\n          </div>\n        </div>\n      </div>\n    </DataTableRow>\n    <DataTableRow>\n      <RequestAuthDataTableInput\n        v-if=\"'authorizationUrl' in flow\"\n        containerClass=\"border-r-0\"\n        :environment\n        :modelValue=\"flow['x-scalar-secret-auth-url'] ?? ''\"\n        placeholder=\"https://galaxy.scalar.com/authorize\"\n        @update:modelValue=\"\n          (v) => {\n            handleOauth2SecretsUpdate({ 'x-scalar-secret-auth-url': v })\n            handleOauth2Update({ authorizationUrl: v })\n          }\n        \">\n        {{ translate('apiClient.oauth2.authUrl') }}\n      </RequestAuthDataTableInput>\n\n      <RequestAuthDataTableInput\n        v-if=\"'tokenUrl' in flow\"\n        :environment\n        :modelValue=\"flow['x-scalar-secret-token-url'] ?? ''\"\n        placeholder=\"https://galaxy.scalar.com/token\"\n        @update:modelValue=\"\n          (v) => {\n            handleOauth2SecretsUpdate({ 'x-scalar-secret-token-url': v })\n            handleOauth2Update({ tokenUrl: v })\n          }\n        \">\n        {{ translate('apiClient.oauth2.tokenUrl') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow v-if=\"'x-scalar-secret-redirect-uri' in flow\">\n      <RequestAuthDataTableInput\n        :environment\n        :modelValue=\"flow['x-scalar-secret-redirect-uri']\"\n        :placeholder=\"\n          options.captureOAuth2Callback\n            ? `${resolveDefaultOAuth2RedirectUri(options) || 'http://127.0.0.1'} (handled automatically)`\n            : translate('apiClient.oauth2.optionalRedirectUrl')\n        \"\n        @update:modelValue=\"\n          (v) => {\n            hasHandledRedirectPrefill = true\n            handleOauth2SecretsUpdate({ 'x-scalar-secret-redirect-uri': v })\n          }\n        \">\n        {{ translate('apiClient.oauth2.redirectUrl') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <template\n      v-if=\"\n        'x-scalar-secret-username' in flow && 'x-scalar-secret-password' in flow\n      \">\n      <DataTableRow>\n        <RequestAuthDataTableInput\n          class=\"text-c-2\"\n          :environment\n          :modelValue=\"flow['x-scalar-secret-username']\"\n          placeholder=\"janedoe\"\n          @update:modelValue=\"\n            (v) => handleOauth2SecretsUpdate({ 'x-scalar-secret-username': v })\n          \">\n          {{ translate('apiClient.oauth2.username') }}\n        </RequestAuthDataTableInput>\n      </DataTableRow>\n\n      <DataTableRow>\n        <RequestAuthDataTableInput\n          :environment\n          :modelValue=\"flow['x-scalar-secret-password']\"\n          placeholder=\"********\"\n          type=\"password\"\n          @update:modelValue=\"\n            (v) => handleOauth2SecretsUpdate({ 'x-scalar-secret-password': v })\n          \">\n          {{ translate('apiClient.oauth2.password') }}\n        </RequestAuthDataTableInput>\n      </DataTableRow>\n    </template>\n\n    <DataTableRow>\n      <RequestAuthDataTableInput\n        :environment\n        :modelValue=\"flow['x-scalar-secret-client-id']\"\n        placeholder=\"12345\"\n        @update:modelValue=\"\n          (v) => handleOauth2SecretsUpdate({ 'x-scalar-secret-client-id': v })\n        \">\n        {{ translate('apiClient.oauth2.clientID') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow v-if=\"showClientSecret\">\n      <RequestAuthDataTableInput\n        :environment\n        :modelValue=\"clientSecretValue\"\n        placeholder=\"XYZ123\"\n        type=\"password\"\n        @update:modelValue=\"\n          (v) =>\n            handleOauth2SecretsUpdate({ 'x-scalar-secret-client-secret': v })\n        \">\n        {{ translate('apiClient.oauth2.clientSecret') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <DataTableRow v-if=\"'x-usePkce' in flow\">\n      <RequestAuthDataTableInput\n        :enum=\"pkceOptions\"\n        :environment\n        :modelValue=\"flow['x-usePkce']\"\n        readOnly\n        @update:modelValue=\"\n          (v) =>\n            handleOauth2Update({\n              'x-usePkce': v as XusePkce['x-usePkce'],\n            })\n        \">\n        {{ translate('apiClient.oauth2.usePKCE') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <!-- Credentials Location -->\n    <DataTableRow v-if=\"type !== 'implicit'\">\n      <RequestAuthDataTableInput\n        :enum=\"['header', 'body']\"\n        :environment\n        :modelValue=\"\n          (flow as NonImplicitFlow)['x-scalar-credentials-location'] || 'header'\n        \"\n        placeholder=\"header\"\n        readOnly\n        @update:modelValue=\"(v) => handleSecretLocationUpdate(v)\">\n        {{ translate('apiClient.oauth2.credentialsLocation') }}\n      </RequestAuthDataTableInput>\n    </DataTableRow>\n\n    <!-- Scopes -->\n    <DataTableRow>\n      <OAuthScopesInput\n        :flow\n        :flowType=\"type\"\n        :selectedScopes\n        @delete:scope=\"(v) => emits('delete:scope', v)\"\n        @update:selectedScopes=\"(v) => emits('update:selectedScopes', v)\"\n        @upsert:scope=\"(v) => emits('upsert:scope', v)\" />\n    </DataTableRow>\n\n    <DataTableRow\n      v-if=\"!hideActions\"\n      class=\"min-w-full\">\n      <div class=\"flex h-8 w-full items-center justify-end border-t\">\n        <!-- Allow clearing the oauth section and going back to discovery -->\n        <ScalarButton\n          v-if=\"scheme.type === 'openIdConnect'\"\n          class=\"mr-1 p-0 px-2 py-0.5\"\n          :disabled=\"loader.isLoading\"\n          size=\"sm\"\n          variant=\"outlined\"\n          @click=\"clearOauth2Secrets\">\n          {{ translate('apiClient.oauth2.clear') }}\n        </ScalarButton>\n\n        <ScalarButton\n          class=\"mr-0.75 p-0 px-2 py-0.5\"\n          :loader\n          size=\"sm\"\n          variant=\"outlined\"\n          @click=\"handleAuthorize\">\n          {{ translate('apiClient.oauth2.authorize') }}\n        </ScalarButton>\n      </div>\n    </DataTableRow>\n  </template>\n</template>\n"],"mappings":""}