@scalar/api-client 2.38.4 → 2.39.0

package/dist/v2/features/collection/components/Overview.vue.script.js

@@ -0,0 +1,203 @@
+import CodeInput_default from "../../../components/code-input/CodeInput.vue.js";
+import DeleteSidebarListElement_default from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
+import Section_default from "../../settings/components/Section.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, unref, useTemplateRef, withCtx } from "vue";
+import { ScalarButton, ScalarMarkdown, ScalarModal, ScalarToggle, useModal } from "@scalar/components";
+import { ScalarIconPencil } from "@scalar/icons";
+import { isHttpMethod } from "@scalar/helpers/http/is-http-method";
+//#region src/v2/features/collection/components/Overview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col gap-8" };
+var _hoisted_2 = { class: "has-focus-visible:bg-b-1 group rounded-lg" };
+var _hoisted_3 = {
+	key: 1,
+	class: "text-c-3 flex items-center justify-center rounded-lg border p-4"
+};
+var _hoisted_4 = { class: "flex items-center justify-between gap-4 rounded-lg p-4" };
+var _hoisted_5 = { class: "min-w-0 flex-1" };
+var _hoisted_6 = { class: "bg-b-2 flex items-center justify-between gap-4 rounded-lg border border-(--scalar-background-3) p-4 text-sm" };
+var Overview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Overview",
+	props: {
+		documentSlug: {},
+		document: {},
+		eventBus: {},
+		layout: {},
+		path: {},
+		method: {},
+		exampleName: {},
+		environment: {},
+		securitySchemes: {},
+		workspaceStore: {},
+		activeWorkspace: {},
+		plugins: {},
+		customThemes: {},
+		currentTheme: {},
+		isDarkMode: { type: Boolean },
+		fetchRegistryDocument: { type: Function },
+		telemetry: { type: Boolean },
+		onUpdateTelemetry: { type: Function },
+		collectionType: {}
+	},
+	setup(__props) {
+		const operationLabel = computed(() => {
+			if (!__props.method || !__props.path) return "this operation";
+			return `${typeof __props.method === "string" ? __props.method.toUpperCase() : __props.method} ${__props.path}`;
+		});
+		const description = computed(() => {
+			if (__props.collectionType === "operation") {
+				if (!__props.path || !__props.method || !isHttpMethod(__props.method)) return "";
+				return __props.document?.paths?.[__props.path]?.[__props.method]?.description ?? "";
+			}
+			return __props.document?.info?.description ?? "";
+		});
+		const deprecated = computed(() => {
+			if (__props.collectionType !== "operation" || !__props.path || !isHttpMethod(__props.method)) return false;
+			return (__props.document?.paths?.[__props.path]?.[__props.method])?.deprecated ?? false;
+		});
+		const mode = ref("preview");
+		const codeInputRef = useTemplateRef("codeInputRef");
+		/**
+		* Switch between edit and preview modes.
+		* When switching to edit mode, focus the input after the DOM updates.
+		*/
+		const switchMode = async (newMode) => {
+			mode.value = newMode;
+			if (newMode === "edit") {
+				await nextTick();
+				codeInputRef.value?.focus();
+			}
+		};
+		/**
+		* Updates the description of the collection
+		* @param payload - The new description
+		* @returns void
+		*/
+		const handleDescriptionUpdate = async (payload) => {
+			await switchMode("preview");
+			/** If the collection type is a document, update the description of the document */
+			if (__props.collectionType === "document") return __props.eventBus.emit("document:update:info", { description: payload });
+			/** If the collection type is an operation, update the description of the operation */
+			if (__props.collectionType === "operation") {
+				if (!__props.path || !__props.method) {
+					console.error("Invalid path or method", {
+						path: __props.path,
+						method: __props.method
+					});
+					return;
+				}
+				return __props.eventBus.emit("operation:update:meta", {
+					meta: {
+						path: __props.path,
+						method: __props.method
+					},
+					payload: { description: payload }
+				});
+			}
+			console.error("Invalid collection type", { collectionType: __props.collectionType });
+		};
+		const handleDeprecatedChange = (value) => {
+			if (__props.collectionType !== "operation" || !__props.path || !__props.method) return;
+			__props.eventBus.emit("operation:update:meta", {
+				meta: {
+					path: __props.path,
+					method: __props.method
+				},
+				payload: { deprecated: value }
+			});
+		};
+		const deleteOperationModal = useModal();
+		const handleDeleteOperation = () => {
+			if (__props.collectionType !== "operation" || !__props.path || !__props.method || !__props.documentSlug) return;
+			__props.eventBus.emit("operation:delete:operation", {
+				documentName: __props.documentSlug,
+				meta: {
+					path: __props.path,
+					method: __props.method
+				}
+			});
+			deleteOperationModal.hide();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [createVNode(Section_default, null, {
+				title: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Description", -1)])]),
+				actions: withCtx(() => [mode.value === "preview" ? (openBlock(), createBlock(unref(ScalarButton), {
+					key: 0,
+					class: "text-c-2 hover:text-c-1 flex items-center gap-2",
+					size: "sm",
+					type: "button",
+					variant: "outlined",
+					onClick: _cache[0] || (_cache[0] = ($event) => switchMode("edit"))
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarIconPencil), {
+						size: "sm",
+						thickness: "1.5"
+					}), _cache[6] || (_cache[6] = createElementVNode("span", null, "Edit", -1))]),
+					_: 1
+				})) : createCommentVNode("", true)]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_2, [mode.value === "preview" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [description.value.trim().length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(ScalarMarkdown), {
+					class: "flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)",
+					value: description.value,
+					withImages: "",
+					onDblclick: _cache[1] || (_cache[1] = ($event) => switchMode("edit"))
+				}, null, 8, ["value"]), _cache[7] || (_cache[7] = createElementVNode("div", { class: "brightness-lifted bg-b-1 absolute inset-0 -z-1 hidden rounded group-hover:block group-has-focus-visible:hidden" }, null, -1))], 64)) : (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ScalarButton), {
+					class: "hover:bg-b-2 hover:text-c-1 text-c-2 flex items-center gap-2",
+					size: "sm",
+					variant: "ghost",
+					onClick: _cache[2] || (_cache[2] = ($event) => switchMode("edit"))
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarIconPencil), {
+						size: "sm",
+						thickness: "1.5"
+					}), _cache[8] || (_cache[8] = createElementVNode("span", null, "Write a description", -1))]),
+					_: 1
+				})]))], 64)) : (openBlock(), createBlock(unref(CodeInput_default), {
+					key: 1,
+					ref_key: "codeInputRef",
+					ref: codeInputRef,
+					class: "border px-0.5 py-0",
+					environment: void 0,
+					layout: __props.layout,
+					modelValue: description.value,
+					onBlur: handleDescriptionUpdate
+				}, null, 8, ["layout", "modelValue"]))])]),
+				_: 1
+			}), __props.collectionType === "operation" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(Section_default, null, {
+				title: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode("Status", -1)])]),
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["rounded-lg border text-sm transition-colors", deprecated.value ? "border-(--scalar-color-alert) bg-(--scalar-background-alert)" : "bg-b-2 border-(--scalar-background-3)"]) }, [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createElementVNode("h4", { class: normalizeClass(["font-medium", deprecated.value ? "text-(--scalar-color-alert)" : "text-c-1"]) }, " Deprecated ", 2), _cache[10] || (_cache[10] = createElementVNode("p", { class: "text-c-2 mt-1.5" }, " Mark this operation as deprecated. Consumers SHOULD refrain from using it. ", -1))]), createVNode(unref(ScalarToggle), {
+					class: "shrink-0",
+					modelValue: deprecated.value,
+					"onUpdate:modelValue": handleDeprecatedChange
+				}, null, 8, ["modelValue"])])], 2)]),
+				_: 1
+			}), createVNode(Section_default, null, {
+				title: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode("Danger Zone", -1)])]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_6, [_cache[13] || (_cache[13] = createElementVNode("div", { class: "min-w-0 flex-1" }, [createElementVNode("h4", { class: "text-c-1 font-medium" }, "Delete Operation"), createElementVNode("p", { class: "text-c-2 mt-1.5" }, " Be careful, my friend. Once deleted, there is no way to recover the operation. ")], -1)), createVNode(unref(ScalarButton), {
+					class: "shrink-0",
+					size: "sm",
+					variant: "danger",
+					onClick: _cache[3] || (_cache[3] = ($event) => unref(deleteOperationModal).show())
+				}, {
+					default: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode(" Delete Operation ", -1)])]),
+					_: 1
+				})])]),
+				_: 1
+			})], 64)) : createCommentVNode("", true)]), createVNode(unref(ScalarModal), {
+				size: "xxs",
+				state: unref(deleteOperationModal),
+				title: `Delete ${operationLabel.value}`
+			}, {
+				default: withCtx(() => [createVNode(DeleteSidebarListElement_default, {
+					variableName: operationLabel.value,
+					warningMessage: "This action cannot be undone.",
+					onClose: _cache[4] || (_cache[4] = ($event) => unref(deleteOperationModal).hide()),
+					onDelete: handleDeleteOperation
+				}, null, 8, ["variableName"])]),
+				_: 1
+			}, 8, ["state", "title"])], 64);
+		};
+	}
+});
+//#endregion
+export { Overview_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Overview.vue.script.js.map

package/dist/v2/features/collection/components/Overview.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overview.vue.script.js","names":[],"sources":["../../../../../src/v2/features/collection/components/Overview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarMarkdown,\n  ScalarModal,\n  ScalarToggle,\n  useModal,\n} from '@scalar/components'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { ScalarIconPencil } from '@scalar/icons'\nimport {\n  computed,\n  nextTick,\n  ref,\n  useTemplateRef,\n  type ComputedRef,\n  type Ref,\n} from 'vue'\n\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\nimport { CodeInput } from '@/v2/components/code-input'\nimport type { CollectionProps } from '@/v2/features/app/helpers/routes'\nimport Section from '@/v2/features/settings/components/Section.vue'\n\nconst {\n  document,\n  eventBus,\n  layout,\n  collectionType,\n  path,\n  method,\n  documentSlug,\n} = defineProps<CollectionProps>()\n\nconst operationLabel = computed(() => {\n  if (!method || !path) {\n    return 'this operation'\n  }\n  const upperMethod = typeof method === 'string' ? method.toUpperCase() : method\n  return `${upperMethod} ${path}`\n})\n\nconst description: ComputedRef<string> = computed(() => {\n  if (collectionType === 'operation') {\n    if (!path || !method || !isHttpMethod(method)) {\n      return ''\n    }\n\n    return document?.paths?.[path]?.[method]?.description ?? ''\n  }\n\n  return document?.info?.description ?? ''\n})\n\nconst deprecated: ComputedRef<boolean> = computed(() => {\n  if (collectionType !== 'operation' || !path || !isHttpMethod(method)) {\n    return false\n  }\n\n  const operation = document?.paths?.[path]?.[method] as\n    | { deprecated?: boolean }\n    | undefined\n  return operation?.deprecated ?? false\n})\n\nconst mode: Ref<'edit' | 'preview'> = ref('preview')\n\nconst codeInputRef = useTemplateRef('codeInputRef')\n\n/**\n * Switch between edit and preview modes.\n * When switching to edit mode, focus the input after the DOM updates.\n */\nconst switchMode = async (newMode: 'edit' | 'preview'): Promise<void> => {\n  mode.value = newMode\n\n  if (newMode === 'edit') {\n    await nextTick()\n    codeInputRef.value?.focus()\n  }\n}\n\n/**\n * Updates the description of the collection\n * @param payload - The new description\n * @returns void\n */\nconst handleDescriptionUpdate = async (payload: string) => {\n  await switchMode('preview')\n\n  /** If the collection type is a document, update the description of the document */\n  if (collectionType === 'document') {\n    return eventBus.emit('document:update:info', { description: payload })\n  }\n\n  /** If the collection type is an operation, update the description of the operation */\n  if (collectionType === 'operation') {\n    if (!path || !method) {\n      console.error('Invalid path or method', { path, method })\n      return\n    }\n\n    return eventBus.emit('operation:update:meta', {\n      meta: { path, method },\n      payload: {\n        description: payload,\n      },\n    })\n  }\n\n  console.error('Invalid collection type', { collectionType })\n}\n\nconst handleDeprecatedChange = (value: boolean) => {\n  if (collectionType !== 'operation' || !path || !method) {\n    return\n  }\n\n  eventBus.emit('operation:update:meta', {\n    meta: { path, method },\n    payload: { deprecated: value },\n  })\n}\n\nconst deleteOperationModal = useModal()\n\nconst handleDeleteOperation = () => {\n  if (collectionType !== 'operation' || !path || !method || !documentSlug) {\n    return\n  }\n\n  eventBus.emit('operation:delete:operation', {\n    documentName: documentSlug,\n    meta: { path, method },\n  })\n  deleteOperationModal.hide()\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-8\">\n    <Section>\n      <template #title>Description</template>\n      <template #actions>\n        <ScalarButton\n          v-if=\"mode === 'preview'\"\n          class=\"text-c-2 hover:text-c-1 flex items-center gap-2\"\n          size=\"sm\"\n          type=\"button\"\n          variant=\"outlined\"\n          @click=\"switchMode('edit')\">\n          <ScalarIconPencil\n            size=\"sm\"\n            thickness=\"1.5\" />\n          <span>Edit</span>\n        </ScalarButton>\n      </template>\n      <div class=\"has-focus-visible:bg-b-1 group rounded-lg\">\n        <!-- Preview -->\n        <template v-if=\"mode === 'preview'\">\n          <template v-if=\"description.trim().length\">\n            <ScalarMarkdown\n              class=\"flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)\"\n              :value=\"description\"\n              withImages\n              @dblclick=\"switchMode('edit')\" />\n            <div\n              class=\"brightness-lifted bg-b-1 absolute inset-0 -z-1 hidden rounded group-hover:block group-has-focus-visible:hidden\" />\n          </template>\n\n          <div\n            v-else\n            class=\"text-c-3 flex items-center justify-center rounded-lg border p-4\">\n            <ScalarButton\n              class=\"hover:bg-b-2 hover:text-c-1 text-c-2 flex items-center gap-2\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click=\"switchMode('edit')\">\n              <ScalarIconPencil\n                size=\"sm\"\n                thickness=\"1.5\" />\n              <span>Write a description</span>\n            </ScalarButton>\n          </div>\n        </template>\n\n        <!-- Edit -->\n        <template v-else>\n          <CodeInput\n            ref=\"codeInputRef\"\n            class=\"border px-0.5 py-0\"\n            :environment=\"undefined\"\n            :layout=\"layout\"\n            :modelValue=\"description\"\n            @blur=\"handleDescriptionUpdate\" />\n        </template>\n      </div>\n    </Section>\n\n    <!-- Operation-only: Status and Danger Zone -->\n    <template v-if=\"collectionType === 'operation'\">\n      <Section>\n        <template #title>Status</template>\n        <div\n          class=\"rounded-lg border text-sm transition-colors\"\n          :class=\"\n            deprecated\n              ? 'border-(--scalar-color-alert) bg-(--scalar-background-alert)'\n              : 'bg-b-2 border-(--scalar-background-3)'\n          \">\n          <div class=\"flex items-center justify-between gap-4 rounded-lg p-4\">\n            <div class=\"min-w-0 flex-1\">\n              <h4\n                class=\"font-medium\"\n                :class=\"\n                  deprecated ? 'text-(--scalar-color-alert)' : 'text-c-1'\n                \">\n                Deprecated\n              </h4>\n              <p class=\"text-c-2 mt-1.5\">\n                Mark this operation as deprecated. Consumers SHOULD refrain from\n                using it.\n              </p>\n            </div>\n            <ScalarToggle\n              class=\"shrink-0\"\n              :modelValue=\"deprecated\"\n              @update:modelValue=\"handleDeprecatedChange\" />\n          </div>\n        </div>\n      </Section>\n\n      <Section>\n        <template #title>Danger Zone</template>\n        <div\n          class=\"bg-b-2 flex items-center justify-between gap-4 rounded-lg border border-(--scalar-background-3) p-4 text-sm\">\n          <div class=\"min-w-0 flex-1\">\n            <h4 class=\"text-c-1 font-medium\">Delete Operation</h4>\n            <p class=\"text-c-2 mt-1.5\">\n              Be careful, my friend. Once deleted, there is no way to recover\n              the operation.\n            </p>\n          </div>\n          <ScalarButton\n            class=\"shrink-0\"\n            size=\"sm\"\n            variant=\"danger\"\n            @click=\"deleteOperationModal.show()\">\n            Delete Operation\n          </ScalarButton>\n        </div>\n      </Section>\n    </template>\n  </div>\n\n  <!-- Delete Operation Modal -->\n  <ScalarModal\n    :size=\"'xxs'\"\n    :state=\"deleteOperationModal\"\n    :title=\"`Delete ${operationLabel}`\">\n    <DeleteSidebarListElement\n      :variableName=\"operationLabel\"\n      warningMessage=\"This action cannot be undone.\"\n      @close=\"deleteOperationModal.hide()\"\n      @delete=\"handleDeleteOperation\" />\n  </ScalarModal>\n</template>\n\n<style scoped>\n:deep(.cm-content) {\n  min-height: fit-content;\n}\n:deep(.cm-scroller) {\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/features/collection/components/Servers.vue.d.ts

@@ -1,13 +1,13 @@
-declare const __VLS_export: import("vue").DefineComponent<(import("../../../../v2/features/app/helpers/routes").RouteProps & {
+declare const __VLS_export: import("vue").DefineComponent<(import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "document" | "operation";
     document: import("@scalar/workspace-store/schemas").WorkspaceDocument;
-}) | (import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}) | (import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "workspace";
     document: null;
-}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "document" | "operation";
     document: import("@scalar/workspace-store/schemas").WorkspaceDocument;
-}) | (import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}) | (import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "workspace";
     document: null;
 })> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/v2/features/collection/components/Servers.vue.js

@@ -0,0 +1,7 @@
+import Servers_vue_vue_type_script_setup_true_lang_default from "./Servers.vue.script.js";
+//#region src/v2/features/collection/components/Servers.vue
+var Servers_default = Servers_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Servers_default as default };
+
+//# sourceMappingURL=Servers.vue.js.map

package/dist/v2/features/collection/components/Servers.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Servers.vue.js","names":[],"sources":["../../../../../src/v2/features/collection/components/Servers.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarMarkdown,\n  ScalarModal,\n  ScalarToggle,\n  useModal,\n} from '@scalar/components'\nimport { debounce } from '@scalar/helpers/general/debounce'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { ScalarIconPlus, ScalarIconTrash } from '@scalar/icons'\nimport type { ServerMeta } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, watchEffect } from 'vue'\n\nimport { ServerVariablesForm } from '@/components/Server'\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\nimport type { CollectionProps } from '@/v2/features/app/helpers/routes'\nimport Section from '@/v2/features/settings/components/Section.vue'\n\nimport Form from './Form.vue'\n\nconst { document, eventBus, collectionType, path, method } =\n  defineProps<CollectionProps>()\n\nconst deleteModal = useModal()\nconst selectedServerIndex = ref<number>(-1)\n\nconst isOperation = computed(() => collectionType === 'operation')\n\nconst operation = computed(() => {\n  if (!isOperation.value) {\n    return null\n  }\n  // Operation not found\n  if (!path || !isHttpMethod(method)) {\n    return null\n  }\n  // Operation found, return the servers\n  return getResolvedRef(document?.paths?.[path]?.[method])\n})\n\nconst useOperationServers = ref(false)\nwatchEffect(() => {\n  useOperationServers.value = operation.value?.servers !== undefined\n})\n\n/** Grab the servers for the collection */\nconst servers = computed(() => {\n  if (collectionType === 'operation' && operation.value) {\n    return operation.value.servers ?? []\n  }\n  return document?.servers ?? []\n})\n\n/** Grab whichever server we are working on */\nconst selectedServer = computed(() => servers.value[selectedServerIndex.value])\n\n/** Meta for server events: document-level or operation-level based on collection type */\nconst serverMeta = computed<ServerMeta>(() => {\n  if (collectionType === 'operation' && path && isHttpMethod(method)) {\n    return { type: 'operation', path, method }\n  }\n  return { type: 'document' }\n})\n\n// Form field configuration\nconst FORM_OPTIONS = [\n  {\n    label: 'URL',\n    key: 'url',\n    placeholder: 'https://void.scalar.com',\n  },\n  {\n    label: 'Description',\n    key: 'description',\n    placeholder: 'Production',\n    lineWrapping: true,\n  },\n]\n\n/** Opens the delete confirmation modal for a server */\nconst openDeleteModal = (index: number) => {\n  selectedServerIndex.value = index\n  deleteModal.show()\n}\n\n/** Closes the delete modal and resets the selected server */\nconst resetState = () => {\n  deleteModal.hide()\n  selectedServerIndex.value = -1\n}\n\n/** Handles server deletion */\nconst handleDeleteServer = () => {\n  if (selectedServerIndex.value < 0) {\n    return\n  }\n\n  eventBus.emit('server:delete:server', {\n    index: selectedServerIndex.value,\n    meta: serverMeta.value,\n  })\n  resetState()\n}\n\n/** Debounced execute function for server updates, keyed so we only debounce by server + key */\nconst { execute } = debounce({ delay: 328, maxWait: 1000 })\n\n/** Handles server property updates with debouncing */\nconst handleServerUpdate = (\n  index: number,\n  key: string,\n  value: string | number,\n) =>\n  execute(`${index}-${key}-${serverMeta.value.type}`, () =>\n    eventBus.emit('server:update:server', {\n      index,\n      server: { [key]: value },\n      meta: serverMeta.value,\n    }),\n  )\n\n/** Handles server variable updates with debouncing */\nconst handleVariableUpdate = (index: number, key: string, value: string) =>\n  execute(`${index}-${key}-${serverMeta.value.type}`, () =>\n    eventBus.emit('server:update:variables', {\n      index,\n      key,\n      value,\n      meta: serverMeta.value,\n    }),\n  )\n\n/** Handles adding a new server */\nconst handleAddServer = () =>\n  eventBus.emit('server:add:server', { meta: serverMeta.value })\n\n/**\n * Gets the display name for a server\n */\nconst getServerDisplayName = (server?: ServerObject, index = 0): string =>\n  server?.description || `Server ${index + 1}`\n\n/** Handles toggling the operation servers */\nconst handleToggleOperationServers = (value: boolean) => {\n  // Only toggle for operation collections\n  if (serverMeta.value.type !== 'operation') {\n    return\n  }\n\n  // update the operation servers\n  useOperationServers.value = value\n\n  if (value) {\n    // Initialize the servers with an empty array so we will infer the servers from the operation\n    return eventBus.emit('server:initialize:servers', {\n      meta: serverMeta.value,\n    })\n  }\n  return eventBus.emit('server:clear:servers', { meta: serverMeta.value })\n}\n</script>\n\n<template>\n  <Section>\n    <template #title>Servers</template>\n    <template #description>\n      <template v-if=\"isOperation\">\n        <span class=\"block\">\n          Override servers for this operation with the toggle.\n        </span>\n        <span class=\"mt-1 block\">\n          <strong>On</strong> — Servers below apply only to this operation.\n        </span>\n        <span class=\"mt-1 block\">\n          <strong>Off</strong> — Removes operation servers; this operation uses\n          document or path servers from the OpenAPI spec.\n        </span>\n        <span class=\"text-c-3 mt-1 block\">\n          Use <code class=\"font-code text-c-2\">{variables}</code> for dynamic\n          URL parts.\n        </span>\n      </template>\n      <template v-else>\n        Add different base URLs for your API. Use\n        <code class=\"font-code text-c-2\">{variables}</code> for dynamic parts.\n      </template>\n    </template>\n    <!-- Operation Servers Toggle to use the operation servers instead of the document servers -->\n    <template\n      v-if=\"isOperation\"\n      #actions>\n      <div class=\"flex h-8 items-center\">\n        <ScalarToggle\n          class=\"w-4\"\n          :modelValue=\"useOperationServers\"\n          @update:modelValue=\"handleToggleOperationServers\" />\n      </div>\n    </template>\n\n    <div :class=\"isOperation && !useOperationServers && 'cursor-not-allowed'\">\n      <div\n        class=\"flex flex-col gap-4\"\n        :class=\"\n          isOperation &&\n          !useOperationServers &&\n          'pointer-events-none cursor-not-allowed opacity-50 mix-blend-luminosity'\n        \">\n        <!-- Server List -->\n        <div class=\"flex flex-col gap-4\">\n          <div\n            v-for=\"(server, index) in servers\"\n            :key=\"index\"\n            class=\"rounded-lg border\">\n            <!-- Server Header -->\n            <div\n              class=\"bg-b-2 flex items-center justify-between rounded-t-lg px-3 py-1 text-sm\">\n              <ScalarMarkdown\n                v-if=\"server.description\"\n                class=\"self-center\"\n                :value=\"server.description\" />\n              <span\n                v-else\n                class=\"self-center\">\n                {{ getServerDisplayName(server, index) }}\n              </span>\n              <ScalarButton\n                class=\"hover:bg-b-3 hover:text-c-1 h-fit p-1.25\"\n                data-testid=\"delete-server-button\"\n                variant=\"ghost\"\n                @click=\"openDeleteModal(index)\">\n                <ScalarIconTrash class=\"size-3.5\" />\n              </ScalarButton>\n            </div>\n\n            <!-- Server Variables Form -->\n            <div\n              class=\"divide-0 flex w-full flex-col divide-y rounded-b-lg text-sm\">\n              <Form\n                :data=\"server\"\n                :environment=\"environment\"\n                :onUpdate=\"\n                  (key, value) => handleServerUpdate(index, key, value)\n                \"\n                :options=\"FORM_OPTIONS\" />\n              <ServerVariablesForm\n                v-if=\"server.variables\"\n                :variables=\"server.variables\"\n                @update:variable=\"\n                  (name, value) => handleVariableUpdate(index, name, value)\n                \" />\n            </div>\n          </div>\n        </div>\n\n        <!-- Add Server Button -->\n        <div\n          class=\"text-c-3 flex h-full items-center justify-center rounded-lg border p-4\">\n          <ScalarButton\n            class=\"hover:bg-b-2 hover:text-c-1 flex items-center gap-2\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click=\"handleAddServer\">\n            <ScalarIconPlus />\n            <span>Add Server</span>\n          </ScalarButton>\n        </div>\n      </div>\n    </div>\n  </Section>\n\n  <!-- Delete Confirmation Modal -->\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"deleteModal\"\n    :title=\"`Delete ${getServerDisplayName(selectedServer, selectedServerIndex)}`\">\n    <DeleteSidebarListElement\n      variableName=\"Server\"\n      warningMessage=\"Are you sure you want to delete this server? This action cannot be undone.\"\n      @close=\"resetState\"\n      @delete=\"handleDeleteServer\" />\n  </ScalarModal>\n</template>\n"],"mappings":""}

package/dist/v2/features/collection/components/Servers.vue.script.js

@@ -0,0 +1,217 @@
+import ServerVariablesForm_default from "../../../../components/Server/ServerVariablesForm.vue.js";
+import DeleteSidebarListElement_default from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
+import Section_default from "../../settings/components/Section.vue.js";
+import Form_default from "./Form.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, watchEffect, withCtx } from "vue";
+import { ScalarButton, ScalarMarkdown, ScalarModal, ScalarToggle, useModal } from "@scalar/components";
+import { ScalarIconPlus, ScalarIconTrash } from "@scalar/icons";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { isHttpMethod } from "@scalar/helpers/http/is-http-method";
+import { debounce } from "@scalar/helpers/general/debounce";
+//#region src/v2/features/collection/components/Servers.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex h-8 items-center" };
+var _hoisted_2 = { class: "flex flex-col gap-4" };
+var _hoisted_3 = { class: "bg-b-2 flex items-center justify-between rounded-t-lg px-3 py-1 text-sm" };
+var _hoisted_4 = {
+	key: 1,
+	class: "self-center"
+};
+var _hoisted_5 = { class: "divide-0 flex w-full flex-col divide-y rounded-b-lg text-sm" };
+var _hoisted_6 = { class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4" };
+var Servers_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Servers",
+	props: {
+		documentSlug: {},
+		document: {},
+		eventBus: {},
+		layout: {},
+		path: {},
+		method: {},
+		exampleName: {},
+		environment: {},
+		securitySchemes: {},
+		workspaceStore: {},
+		activeWorkspace: {},
+		plugins: {},
+		customThemes: {},
+		currentTheme: {},
+		isDarkMode: { type: Boolean },
+		fetchRegistryDocument: { type: Function },
+		telemetry: { type: Boolean },
+		onUpdateTelemetry: { type: Function },
+		collectionType: {}
+	},
+	setup(__props) {
+		const deleteModal = useModal();
+		const selectedServerIndex = ref(-1);
+		const isOperation = computed(() => __props.collectionType === "operation");
+		const operation = computed(() => {
+			if (!isOperation.value) return null;
+			if (!__props.path || !isHttpMethod(__props.method)) return null;
+			return getResolvedRef(__props.document?.paths?.[__props.path]?.[__props.method]);
+		});
+		const useOperationServers = ref(false);
+		watchEffect(() => {
+			useOperationServers.value = operation.value?.servers !== void 0;
+		});
+		/** Grab the servers for the collection */
+		const servers = computed(() => {
+			if (__props.collectionType === "operation" && operation.value) return operation.value.servers ?? [];
+			return __props.document?.servers ?? [];
+		});
+		/** Grab whichever server we are working on */
+		const selectedServer = computed(() => servers.value[selectedServerIndex.value]);
+		/** Meta for server events: document-level or operation-level based on collection type */
+		const serverMeta = computed(() => {
+			if (__props.collectionType === "operation" && __props.path && isHttpMethod(__props.method)) return {
+				type: "operation",
+				path: __props.path,
+				method: __props.method
+			};
+			return { type: "document" };
+		});
+		const FORM_OPTIONS = [{
+			label: "URL",
+			key: "url",
+			placeholder: "https://void.scalar.com"
+		}, {
+			label: "Description",
+			key: "description",
+			placeholder: "Production",
+			lineWrapping: true
+		}];
+		/** Opens the delete confirmation modal for a server */
+		const openDeleteModal = (index) => {
+			selectedServerIndex.value = index;
+			deleteModal.show();
+		};
+		/** Closes the delete modal and resets the selected server */
+		const resetState = () => {
+			deleteModal.hide();
+			selectedServerIndex.value = -1;
+		};
+		/** Handles server deletion */
+		const handleDeleteServer = () => {
+			if (selectedServerIndex.value < 0) return;
+			__props.eventBus.emit("server:delete:server", {
+				index: selectedServerIndex.value,
+				meta: serverMeta.value
+			});
+			resetState();
+		};
+		/** Debounced execute function for server updates, keyed so we only debounce by server + key */
+		const { execute } = debounce({
+			delay: 328,
+			maxWait: 1e3
+		});
+		/** Handles server property updates with debouncing */
+		const handleServerUpdate = (index, key, value) => execute(`${index}-${key}-${serverMeta.value.type}`, () => __props.eventBus.emit("server:update:server", {
+			index,
+			server: { [key]: value },
+			meta: serverMeta.value
+		}));
+		/** Handles server variable updates with debouncing */
+		const handleVariableUpdate = (index, key, value) => execute(`${index}-${key}-${serverMeta.value.type}`, () => __props.eventBus.emit("server:update:variables", {
+			index,
+			key,
+			value,
+			meta: serverMeta.value
+		}));
+		/** Handles adding a new server */
+		const handleAddServer = () => __props.eventBus.emit("server:add:server", { meta: serverMeta.value });
+		/**
+		* Gets the display name for a server
+		*/
+		const getServerDisplayName = (server, index = 0) => server?.description || `Server ${index + 1}`;
+		/** Handles toggling the operation servers */
+		const handleToggleOperationServers = (value) => {
+			if (serverMeta.value.type !== "operation") return;
+			useOperationServers.value = value;
+			if (value) return __props.eventBus.emit("server:initialize:servers", { meta: serverMeta.value });
+			return __props.eventBus.emit("server:clear:servers", { meta: serverMeta.value });
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(Section_default, null, createSlots({
+				title: withCtx(() => [_cache[0] || (_cache[0] = createTextVNode("Servers", -1))]),
+				description: withCtx(() => [isOperation.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					_cache[1] || (_cache[1] = createElementVNode("span", { class: "block" }, " Override servers for this operation with the toggle. ", -1)),
+					_cache[2] || (_cache[2] = createElementVNode("span", { class: "mt-1 block" }, [createElementVNode("strong", null, "On"), createTextVNode(" — Servers below apply only to this operation. ")], -1)),
+					_cache[3] || (_cache[3] = createElementVNode("span", { class: "mt-1 block" }, [createElementVNode("strong", null, "Off"), createTextVNode(" — Removes operation servers; this operation uses document or path servers from the OpenAPI spec. ")], -1)),
+					_cache[4] || (_cache[4] = createElementVNode("span", { class: "text-c-3 mt-1 block" }, [
+						createTextVNode(" Use "),
+						createElementVNode("code", { class: "font-code text-c-2" }, "{variables}"),
+						createTextVNode(" for dynamic URL parts. ")
+					], -1))
+				], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					_cache[5] || (_cache[5] = createTextVNode(" Add different base URLs for your API. Use ", -1)),
+					_cache[6] || (_cache[6] = createElementVNode("code", { class: "font-code text-c-2" }, "{variables}", -1)),
+					_cache[7] || (_cache[7] = createTextVNode(" for dynamic parts. ", -1))
+				], 64))]),
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(isOperation.value && !useOperationServers.value && "cursor-not-allowed") }, [createElementVNode("div", { class: normalizeClass(["flex flex-col gap-4", isOperation.value && !useOperationServers.value && "pointer-events-none cursor-not-allowed opacity-50 mix-blend-luminosity"]) }, [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(servers.value, (server, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: index,
+						class: "rounded-lg border"
+					}, [createElementVNode("div", _hoisted_3, [server.description ? (openBlock(), createBlock(unref(ScalarMarkdown), {
+						key: 0,
+						class: "self-center",
+						value: server.description
+					}, null, 8, ["value"])) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(getServerDisplayName(server, index)), 1)), createVNode(unref(ScalarButton), {
+						class: "hover:bg-b-3 hover:text-c-1 h-fit p-1.25",
+						"data-testid": "delete-server-button",
+						variant: "ghost",
+						onClick: ($event) => openDeleteModal(index)
+					}, {
+						default: withCtx(() => [createVNode(unref(ScalarIconTrash), { class: "size-3.5" })]),
+						_: 1
+					}, 8, ["onClick"])]), createElementVNode("div", _hoisted_5, [createVNode(Form_default, {
+						data: server,
+						environment: __props.environment,
+						onUpdate: (key, value) => handleServerUpdate(index, key, value),
+						options: FORM_OPTIONS
+					}, null, 8, [
+						"data",
+						"environment",
+						"onUpdate"
+					]), server.variables ? (openBlock(), createBlock(unref(ServerVariablesForm_default), {
+						key: 0,
+						variables: server.variables,
+						"onUpdate:variable": (name, value) => handleVariableUpdate(index, name, value)
+					}, null, 8, ["variables", "onUpdate:variable"])) : createCommentVNode("", true)])]);
+				}), 128))]), createElementVNode("div", _hoisted_6, [createVNode(unref(ScalarButton), {
+					class: "hover:bg-b-2 hover:text-c-1 flex items-center gap-2",
+					size: "sm",
+					variant: "ghost",
+					onClick: handleAddServer
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarIconPlus)), _cache[8] || (_cache[8] = createElementVNode("span", null, "Add Server", -1))]),
+					_: 1
+				})])], 2)], 2)]),
+				_: 2
+			}, [isOperation.value ? {
+				name: "actions",
+				fn: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarToggle), {
+					class: "w-4",
+					modelValue: useOperationServers.value,
+					"onUpdate:modelValue": handleToggleOperationServers
+				}, null, 8, ["modelValue"])])]),
+				key: "0"
+			} : void 0]), 1024), createVNode(unref(ScalarModal), {
+				size: "xxs",
+				state: unref(deleteModal),
+				title: `Delete ${getServerDisplayName(selectedServer.value, selectedServerIndex.value)}`
+			}, {
+				default: withCtx(() => [createVNode(DeleteSidebarListElement_default, {
+					variableName: "Server",
+					warningMessage: "Are you sure you want to delete this server? This action cannot be undone.",
+					onClose: resetState,
+					onDelete: handleDeleteServer
+				})]),
+				_: 1
+			}, 8, ["state", "title"])], 64);
+		};
+	}
+});
+//#endregion
+export { Servers_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Servers.vue.script.js.map

package/dist/v2/features/collection/components/Servers.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Servers.vue.script.js","names":[],"sources":["../../../../../src/v2/features/collection/components/Servers.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarMarkdown,\n  ScalarModal,\n  ScalarToggle,\n  useModal,\n} from '@scalar/components'\nimport { debounce } from '@scalar/helpers/general/debounce'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { ScalarIconPlus, ScalarIconTrash } from '@scalar/icons'\nimport type { ServerMeta } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, watchEffect } from 'vue'\n\nimport { ServerVariablesForm } from '@/components/Server'\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\nimport type { CollectionProps } from '@/v2/features/app/helpers/routes'\nimport Section from '@/v2/features/settings/components/Section.vue'\n\nimport Form from './Form.vue'\n\nconst { document, eventBus, collectionType, path, method } =\n  defineProps<CollectionProps>()\n\nconst deleteModal = useModal()\nconst selectedServerIndex = ref<number>(-1)\n\nconst isOperation = computed(() => collectionType === 'operation')\n\nconst operation = computed(() => {\n  if (!isOperation.value) {\n    return null\n  }\n  // Operation not found\n  if (!path || !isHttpMethod(method)) {\n    return null\n  }\n  // Operation found, return the servers\n  return getResolvedRef(document?.paths?.[path]?.[method])\n})\n\nconst useOperationServers = ref(false)\nwatchEffect(() => {\n  useOperationServers.value = operation.value?.servers !== undefined\n})\n\n/** Grab the servers for the collection */\nconst servers = computed(() => {\n  if (collectionType === 'operation' && operation.value) {\n    return operation.value.servers ?? []\n  }\n  return document?.servers ?? []\n})\n\n/** Grab whichever server we are working on */\nconst selectedServer = computed(() => servers.value[selectedServerIndex.value])\n\n/** Meta for server events: document-level or operation-level based on collection type */\nconst serverMeta = computed<ServerMeta>(() => {\n  if (collectionType === 'operation' && path && isHttpMethod(method)) {\n    return { type: 'operation', path, method }\n  }\n  return { type: 'document' }\n})\n\n// Form field configuration\nconst FORM_OPTIONS = [\n  {\n    label: 'URL',\n    key: 'url',\n    placeholder: 'https://void.scalar.com',\n  },\n  {\n    label: 'Description',\n    key: 'description',\n    placeholder: 'Production',\n    lineWrapping: true,\n  },\n]\n\n/** Opens the delete confirmation modal for a server */\nconst openDeleteModal = (index: number) => {\n  selectedServerIndex.value = index\n  deleteModal.show()\n}\n\n/** Closes the delete modal and resets the selected server */\nconst resetState = () => {\n  deleteModal.hide()\n  selectedServerIndex.value = -1\n}\n\n/** Handles server deletion */\nconst handleDeleteServer = () => {\n  if (selectedServerIndex.value < 0) {\n    return\n  }\n\n  eventBus.emit('server:delete:server', {\n    index: selectedServerIndex.value,\n    meta: serverMeta.value,\n  })\n  resetState()\n}\n\n/** Debounced execute function for server updates, keyed so we only debounce by server + key */\nconst { execute } = debounce({ delay: 328, maxWait: 1000 })\n\n/** Handles server property updates with debouncing */\nconst handleServerUpdate = (\n  index: number,\n  key: string,\n  value: string | number,\n) =>\n  execute(`${index}-${key}-${serverMeta.value.type}`, () =>\n    eventBus.emit('server:update:server', {\n      index,\n      server: { [key]: value },\n      meta: serverMeta.value,\n    }),\n  )\n\n/** Handles server variable updates with debouncing */\nconst handleVariableUpdate = (index: number, key: string, value: string) =>\n  execute(`${index}-${key}-${serverMeta.value.type}`, () =>\n    eventBus.emit('server:update:variables', {\n      index,\n      key,\n      value,\n      meta: serverMeta.value,\n    }),\n  )\n\n/** Handles adding a new server */\nconst handleAddServer = () =>\n  eventBus.emit('server:add:server', { meta: serverMeta.value })\n\n/**\n * Gets the display name for a server\n */\nconst getServerDisplayName = (server?: ServerObject, index = 0): string =>\n  server?.description || `Server ${index + 1}`\n\n/** Handles toggling the operation servers */\nconst handleToggleOperationServers = (value: boolean) => {\n  // Only toggle for operation collections\n  if (serverMeta.value.type !== 'operation') {\n    return\n  }\n\n  // update the operation servers\n  useOperationServers.value = value\n\n  if (value) {\n    // Initialize the servers with an empty array so we will infer the servers from the operation\n    return eventBus.emit('server:initialize:servers', {\n      meta: serverMeta.value,\n    })\n  }\n  return eventBus.emit('server:clear:servers', { meta: serverMeta.value })\n}\n</script>\n\n<template>\n  <Section>\n    <template #title>Servers</template>\n    <template #description>\n      <template v-if=\"isOperation\">\n        <span class=\"block\">\n          Override servers for this operation with the toggle.\n        </span>\n        <span class=\"mt-1 block\">\n          <strong>On</strong> — Servers below apply only to this operation.\n        </span>\n        <span class=\"mt-1 block\">\n          <strong>Off</strong> — Removes operation servers; this operation uses\n          document or path servers from the OpenAPI spec.\n        </span>\n        <span class=\"text-c-3 mt-1 block\">\n          Use <code class=\"font-code text-c-2\">{variables}</code> for dynamic\n          URL parts.\n        </span>\n      </template>\n      <template v-else>\n        Add different base URLs for your API. Use\n        <code class=\"font-code text-c-2\">{variables}</code> for dynamic parts.\n      </template>\n    </template>\n    <!-- Operation Servers Toggle to use the operation servers instead of the document servers -->\n    <template\n      v-if=\"isOperation\"\n      #actions>\n      <div class=\"flex h-8 items-center\">\n        <ScalarToggle\n          class=\"w-4\"\n          :modelValue=\"useOperationServers\"\n          @update:modelValue=\"handleToggleOperationServers\" />\n      </div>\n    </template>\n\n    <div :class=\"isOperation && !useOperationServers && 'cursor-not-allowed'\">\n      <div\n        class=\"flex flex-col gap-4\"\n        :class=\"\n          isOperation &&\n          !useOperationServers &&\n          'pointer-events-none cursor-not-allowed opacity-50 mix-blend-luminosity'\n        \">\n        <!-- Server List -->\n        <div class=\"flex flex-col gap-4\">\n          <div\n            v-for=\"(server, index) in servers\"\n            :key=\"index\"\n            class=\"rounded-lg border\">\n            <!-- Server Header -->\n            <div\n              class=\"bg-b-2 flex items-center justify-between rounded-t-lg px-3 py-1 text-sm\">\n              <ScalarMarkdown\n                v-if=\"server.description\"\n                class=\"self-center\"\n                :value=\"server.description\" />\n              <span\n                v-else\n                class=\"self-center\">\n                {{ getServerDisplayName(server, index) }}\n              </span>\n              <ScalarButton\n                class=\"hover:bg-b-3 hover:text-c-1 h-fit p-1.25\"\n                data-testid=\"delete-server-button\"\n                variant=\"ghost\"\n                @click=\"openDeleteModal(index)\">\n                <ScalarIconTrash class=\"size-3.5\" />\n              </ScalarButton>\n            </div>\n\n            <!-- Server Variables Form -->\n            <div\n              class=\"divide-0 flex w-full flex-col divide-y rounded-b-lg text-sm\">\n              <Form\n                :data=\"server\"\n                :environment=\"environment\"\n                :onUpdate=\"\n                  (key, value) => handleServerUpdate(index, key, value)\n                \"\n                :options=\"FORM_OPTIONS\" />\n              <ServerVariablesForm\n                v-if=\"server.variables\"\n                :variables=\"server.variables\"\n                @update:variable=\"\n                  (name, value) => handleVariableUpdate(index, name, value)\n                \" />\n            </div>\n          </div>\n        </div>\n\n        <!-- Add Server Button -->\n        <div\n          class=\"text-c-3 flex h-full items-center justify-center rounded-lg border p-4\">\n          <ScalarButton\n            class=\"hover:bg-b-2 hover:text-c-1 flex items-center gap-2\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click=\"handleAddServer\">\n            <ScalarIconPlus />\n            <span>Add Server</span>\n          </ScalarButton>\n        </div>\n      </div>\n    </div>\n  </Section>\n\n  <!-- Delete Confirmation Modal -->\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"deleteModal\"\n    :title=\"`Delete ${getServerDisplayName(selectedServer, selectedServerIndex)}`\">\n    <DeleteSidebarListElement\n      variableName=\"Server\"\n      warningMessage=\"Are you sure you want to delete this server? This action cannot be undone.\"\n      @close=\"resetState\"\n      @delete=\"handleDeleteServer\" />\n  </ScalarModal>\n</template>\n"],"mappings":"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"}

package/dist/v2/features/collection/components/Settings.vue.d.ts

@@ -1,13 +1,13 @@
-declare const __VLS_export: import("vue").DefineComponent<(import("../../../../v2/features/app/helpers/routes").RouteProps & {
+declare const __VLS_export: import("vue").DefineComponent<(import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "document" | "operation";
     document: import("@scalar/workspace-store/schemas").WorkspaceDocument;
-}) | (import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}) | (import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "workspace";
     document: null;
-}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "document" | "operation";
     document: import("@scalar/workspace-store/schemas").WorkspaceDocument;
-}) | (import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}) | (import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "workspace";
     document: null;
 })> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/v2/features/collection/components/Settings.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Settings.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/collection/components/Settings.vue"],"names":[],"mappings":"AA4MA,QAAA,MAAM,YAAY;;;;;;;;;;;;kGAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Settings.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/collection/components/Settings.vue"],"names":[],"mappings":"AAyNA,QAAA,MAAM,YAAY;;;;;;;;;;;;kGAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/collection/components/Settings.vue.js

@@ -0,0 +1,7 @@
+import Settings_vue_vue_type_script_setup_true_lang_default from "./Settings.vue.script.js";
+//#region src/v2/features/collection/components/Settings.vue
+var Settings_default = Settings_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Settings_default as default };
+
+//# sourceMappingURL=Settings.vue.js.map

package/dist/v2/features/collection/components/Settings.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.vue.js","names":[],"sources":["../../../../../src/v2/features/collection/components/Settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColorMode } from '@scalar/workspace-store/schemas/workspace'\n\nimport type { CollectionProps } from '@/v2/features/app/helpers/routes'\nimport { CollectionSettings, DocumentSettings } from '@/v2/features/settings'\nimport { getActiveProxyUrl } from '@/v2/helpers/get-active-proxy-url'\n\nconst {\n  eventBus,\n  documentSlug,\n  document,\n  workspaceStore,\n  collectionType,\n  layout,\n  telemetry,\n  onUpdateTelemetry,\n} = defineProps<CollectionProps>()\n\nconst handleUpdateWatchMode = (watchMode: boolean) => {\n  eventBus.emit('document:update:watch-mode', watchMode)\n}\n\nconst handleUpdateThemeSlug = (themeSlug?: string) => {\n  eventBus.emit('workspace:update:theme', themeSlug)\n}\nconst handleUpdateActiveProxy = (proxy: string | null) => {\n  eventBus.emit('workspace:update:active-proxy', proxy)\n}\n\nconst handleUpdateColorMode = (colorMode: ColorMode) => {\n  eventBus.emit('workspace:update:color-mode', colorMode)\n}\n</script>\n<template>\n  <DocumentSettings\n    v-if=\"collectionType === 'document'\"\n    :documentUrl=\"document?.['x-scalar-original-source-url']\"\n    :isDraftDocument=\"documentSlug === 'drafts'\"\n    :title=\"document?.info.title ?? ''\"\n    :watchMode=\"document?.['x-scalar-watch-mode']\"\n    @delete:document=\"\n      eventBus.emit('document:delete:document', { name: documentSlug })\n    \"\n    @update:watchMode=\"handleUpdateWatchMode\" />\n  <CollectionSettings\n    v-else\n    :activeProxyUrl=\"\n      getActiveProxyUrl(\n        workspaceStore.workspace['x-scalar-active-proxy'],\n        layout,\n      )\n    \"\n    :activeThemeSlug=\"workspaceStore.workspace['x-scalar-theme'] ?? 'none'\"\n    :colorMode=\"workspaceStore.workspace['x-scalar-color-mode'] ?? 'system'\"\n    :customThemes=\"customThemes\"\n    :telemetry=\"telemetry\"\n    @update:colorMode=\"handleUpdateColorMode\"\n    @update:proxyUrl=\"handleUpdateActiveProxy\"\n    @update:telemetry=\"(value) => onUpdateTelemetry?.(value)\"\n    @update:themeSlug=\"handleUpdateThemeSlug\" />\n</template>\n"],"mappings":""}