@scalar/api-client 2.38.3 → 2.39.0

package/dist/v2/features/global-cookies/components/CookiesTable.vue.script.js

@@ -0,0 +1,186 @@
+import CodeInput_default from "../../../components/code-input/CodeInput.vue.js";
+import DataTable_default from "../../../components/data-table/DataTable.vue.js";
+import DataTableCell_default from "../../../components/data-table/DataTableCell.vue.js";
+import DataTableCheckbox_default from "../../../components/data-table/DataTableCheckbox.vue.js";
+import DataTableHeader_default from "../../../components/data-table/DataTableHeader.vue.js";
+import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+import { ScalarButton } from "@scalar/components";
+import { ScalarIconTrash } from "@scalar/icons";
+//#region src/v2/features/global-cookies/components/CookiesTable.vue?vue&type=script&setup=true&lang.ts
+var CookiesTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CookiesTable",
+	props: {
+		cookies: {},
+		eventBus: {},
+		collectionType: {}
+	},
+	setup(__props) {
+		/** Column widths: Enabled checkbox, Name, Value, Domain, Actions (delete button) */
+		const COLUMNS = [
+			"32px",
+			"1fr",
+			"1fr",
+			"1fr",
+			"36px"
+		];
+		/** Adds an empty row at the end for creating new cookies */
+		const displayRows = computed(() => {
+			/** Normalize the cookies to have name, value, and domain */
+			const cookieRows = __props.cookies.map((cookie) => ({
+				name: cookie.name,
+				value: cookie.value,
+				domain: cookie.domain ?? "",
+				isDisabled: cookie.isDisabled ?? false
+			}));
+			const lastCookie = __props.cookies.at(-1);
+			const hasContentInLastRow = lastCookie && (lastCookie.name !== "" || lastCookie.value !== "" || lastCookie.domain !== "");
+			if (!lastCookie || hasContentInLastRow) return [...cookieRows, {
+				name: "",
+				value: "",
+				domain: "",
+				isDisabled: true
+			}];
+			return cookieRows;
+		});
+		/** Updates an existing cookie or creates a new one */
+		const handleCookieChange = (name, value, domain, isDisabled, index) => {
+			const isNewCookie = index >= __props.cookies.length;
+			/**
+			* Do not allow adding a new cookie with an empty name on the last row,
+			* we allow it on other rows as it will delete the row
+			*/
+			if (!name && isNewCookie) return;
+			if (index >= __props.cookies.length) {
+				__props.eventBus.emit("cookie:upsert:cookie", {
+					payload: {
+						name,
+						value,
+						domain,
+						isDisabled: false
+					},
+					collectionType: __props.collectionType
+				});
+				return;
+			}
+			__props.eventBus.emit("cookie:upsert:cookie", {
+				payload: {
+					name,
+					value,
+					domain,
+					isDisabled
+				},
+				collectionType: __props.collectionType,
+				index
+			});
+		};
+		/** Deletes a cookie by index */
+		const handleCookieDelete = (index) => __props.eventBus.emit("cookie:delete:cookie", {
+			cookieName: __props.cookies[index]?.name ?? "",
+			index,
+			collectionType: __props.collectionType
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DataTable_default), {
+				class: "group/table data-table h-min flex-1 rounded border border-t-0",
+				columns: COLUMNS
+			}, {
+				default: withCtx(() => [createVNode(unref(DataTableRow_default), { class: "sr-only !block" }, {
+					default: withCtx(() => [
+						createVNode(unref(DataTableHeader_default), null, {
+							default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Enabled", -1)])]),
+							_: 1
+						}),
+						createVNode(unref(DataTableHeader_default), null, {
+							default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Name", -1)])]),
+							_: 1
+						}),
+						createVNode(unref(DataTableHeader_default), null, {
+							default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Value", -1)])]),
+							_: 1
+						}),
+						createVNode(unref(DataTableHeader_default), null, {
+							default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Domain", -1)])]),
+							_: 1
+						}),
+						createVNode(unref(DataTableHeader_default), null, {
+							default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("Actions", -1)])]),
+							_: 1
+						})
+					]),
+					_: 1
+				}), (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
+					return openBlock(), createBlock(unref(DataTableRow_default), {
+						key: index,
+						class: "group/row"
+					}, {
+						default: withCtx(() => [
+							createVNode(unref(DataTableCheckbox_default), {
+								class: "!border-r",
+								modelValue: !row.isDisabled,
+								"onUpdate:modelValue": (value) => handleCookieChange(row.name, row.value, row.domain, !value, index)
+							}, null, 8, ["modelValue", "onUpdate:modelValue"]),
+							createVNode(unref(DataTableCell_default), null, {
+								default: withCtx(() => [createVNode(unref(CodeInput_default), {
+									"aria-label": "Cookie Name",
+									disableCloseBrackets: "",
+									disableTabIndent: "",
+									environment: void 0,
+									lineWrapping: "",
+									modelValue: row.name,
+									placeholder: "Name",
+									"onUpdate:modelValue": (name) => handleCookieChange(name, row.value, row.domain, row.isDisabled, index)
+								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
+								_: 2
+							}, 1024),
+							createVNode(unref(DataTableCell_default), null, {
+								default: withCtx(() => [createVNode(unref(CodeInput_default), {
+									"aria-label": "Cookie Value",
+									disableTabIndent: "",
+									environment: void 0,
+									lineWrapping: "",
+									modelValue: row.value,
+									placeholder: "Value",
+									"onUpdate:modelValue": (value) => handleCookieChange(row.name, value, row.domain, row.isDisabled, index)
+								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
+								_: 2
+							}, 1024),
+							createVNode(unref(DataTableCell_default), null, {
+								default: withCtx(() => [createVNode(unref(CodeInput_default), {
+									"aria-label": "Cookie Domain",
+									disableCloseBrackets: "",
+									disableTabIndent: "",
+									environment: void 0,
+									lineWrapping: "",
+									modelValue: row.domain,
+									placeholder: "Domain",
+									"onUpdate:modelValue": (domain) => handleCookieChange(row.name, row.value, domain, row.isDisabled, index)
+								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
+								_: 2
+							}, 1024),
+							createVNode(unref(DataTableCell_default), { class: "flex items-center justify-center" }, {
+								default: withCtx(() => [index < __props.cookies.length ? (openBlock(), createBlock(unref(ScalarButton), {
+									key: 0,
+									class: "text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex",
+									size: "sm",
+									variant: "ghost",
+									onClick: ($event) => handleCookieDelete(index)
+								}, {
+									default: withCtx(() => [createVNode(unref(ScalarIconTrash), { class: "size-3.5" })]),
+									_: 1
+								}, 8, ["onClick"])) : createCommentVNode("", true)]),
+								_: 2
+							}, 1024)
+						]),
+						_: 2
+					}, 1024);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { CookiesTable_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CookiesTable.vue.script.js.map

package/dist/v2/features/global-cookies/components/CookiesTable.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookiesTable.vue.script.js","names":[],"sources":["../../../../../src/v2/features/global-cookies/components/CookiesTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport { computed } from 'vue'\n\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableCheckbox,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst { cookies, eventBus, collectionType } = defineProps<\n  {\n    cookies: XScalarCookie[]\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Column widths: Enabled checkbox, Name, Value, Domain, Actions (delete button) */\nconst COLUMNS = ['32px', '1fr', '1fr', '1fr', '36px']\n\n/** Adds an empty row at the end for creating new cookies */\nconst displayRows = computed<\n  {\n    name: string\n    value: string\n    domain: string\n    isDisabled: boolean\n  }[]\n>(() => {\n  /** Normalize the cookies to have name, value, and domain */\n  const cookieRows = cookies.map((cookie) => ({\n    name: cookie.name,\n    value: cookie.value,\n    domain: cookie.domain ?? '',\n    isDisabled: cookie.isDisabled ?? false,\n  }))\n\n  const lastCookie = cookies.at(-1)\n  const hasContentInLastRow =\n    lastCookie &&\n    (lastCookie.name !== '' ||\n      lastCookie.value !== '' ||\n      lastCookie.domain !== '')\n\n  // Add the extra row at the end\n  if (!lastCookie || hasContentInLastRow) {\n    return [\n      ...cookieRows,\n      { name: '', value: '', domain: '', isDisabled: true },\n    ]\n  }\n\n  return cookieRows\n})\n\n/** Updates an existing cookie or creates a new one */\nconst handleCookieChange = (\n  name: string,\n  value: string,\n  domain: string,\n  isDisabled: boolean,\n  index: number,\n): void => {\n  const isNewCookie = index >= cookies.length\n\n  /**\n   * Do not allow adding a new cookie with an empty name on the last row,\n   * we allow it on other rows as it will delete the row\n   */\n  if (!name && isNewCookie) {\n    return\n  }\n\n  // Adding a new cookie\n  if (index >= cookies.length) {\n    eventBus.emit('cookie:upsert:cookie', {\n      payload: { name, value, domain, isDisabled: false },\n      collectionType,\n    })\n    return\n  }\n\n  // Updating existing cookie\n  eventBus.emit('cookie:upsert:cookie', {\n    payload: { name, value, domain, isDisabled },\n    collectionType,\n    index,\n  })\n}\n\n/** Deletes a cookie by index */\nconst handleCookieDelete = (index: number): void =>\n  eventBus.emit('cookie:delete:cookie', {\n    cookieName: cookies[index]?.name ?? '',\n    index,\n    collectionType,\n  })\n</script>\n<template>\n  <!-- Cookies table -->\n  <DataTable\n    class=\"group/table data-table h-min flex-1 rounded border border-t-0\"\n    :columns=\"COLUMNS\">\n    <!-- Accessibility header row -->\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>Enabled</DataTableHeader>\n      <DataTableHeader>Name</DataTableHeader>\n      <DataTableHeader>Value</DataTableHeader>\n      <DataTableHeader>Domain</DataTableHeader>\n      <DataTableHeader>Actions</DataTableHeader>\n    </DataTableRow>\n\n    <!-- Cookie rows -->\n    <DataTableRow\n      v-for=\"(row, index) in displayRows\"\n      :key=\"index\"\n      class=\"group/row\">\n      <!-- Enabled checkbox -->\n      <DataTableCheckbox\n        class=\"!border-r\"\n        :modelValue=\"!row.isDisabled\"\n        @update:modelValue=\"\n          (value) =>\n            handleCookieChange(row.name, row.value, row.domain, !value, index)\n        \" />\n\n      <!-- Name -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Cookie Name\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.name\"\n          placeholder=\"Name\"\n          @update:modelValue=\"\n            (name) =>\n              handleCookieChange(\n                name,\n                row.value,\n                row.domain,\n                row.isDisabled,\n                index,\n              )\n          \" />\n      </DataTableCell>\n\n      <!-- Value -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Cookie Value\"\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.value\"\n          placeholder=\"Value\"\n          @update:modelValue=\"\n            (value) =>\n              handleCookieChange(\n                row.name,\n                value,\n                row.domain,\n                row.isDisabled,\n                index,\n              )\n          \" />\n      </DataTableCell>\n\n      <!-- Domain -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Cookie Domain\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.domain\"\n          placeholder=\"Domain\"\n          @update:modelValue=\"\n            (domain) =>\n              handleCookieChange(\n                row.name,\n                row.value,\n                domain,\n                row.isDisabled,\n                index,\n              )\n          \" />\n      </DataTableCell>\n\n      <!-- Delete button -->\n      <DataTableCell class=\"flex items-center justify-center\">\n        <ScalarButton\n          v-if=\"index < cookies.length\"\n          class=\"text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"handleCookieDelete(index)\">\n          <ScalarIconTrash class=\"size-3.5\" />\n        </ScalarButton>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/features/global-cookies/index.d.ts

@@ -1,2 +1,2 @@
-export { default as CookiesTable } from './components/CookiesTable.vue';
+export { default as CookiesTable } from './components/CookiesTable.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/features/global-cookies/index.js

@@ -1,4 +1,2 @@
-import "../../../code-input-iq-moLxi.js";
-import "../../../data-table-PL7e8NRO.js";
-import { t as CookiesTable_default } from "../../../global-cookies-D3ZS9ON3.js";
+import CookiesTable_default from "./components/CookiesTable.vue.js";
 export { CookiesTable_default as CookiesTable };

package/dist/v2/features/modal/Modal.vue.d.ts

@@ -6,7 +6,7 @@ import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { WorkspaceDocument } from '@scalar/workspace-store/schemas';
 import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
-import { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar';
+import { type UseModalSidebarReturn } from '../../../v2/features/modal/hooks/use-modal-sidebar.js';
 export type ModalProps = {
     /** The workspace store must be initialized and passed in */
     workspaceStore: WorkspaceStore;

package/dist/v2/features/modal/Modal.vue.js

@@ -0,0 +1,7 @@
+import Modal_vue_vue_type_script_setup_true_lang_default from "./Modal.vue.script.js";
+//#region src/v2/features/modal/Modal.vue
+var Modal_default = Modal_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Modal_default as default };
+
+//# sourceMappingURL=Modal.vue.js.map

package/dist/v2/features/modal/Modal.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.vue.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in */\n  document: ComputedRef<WorkspaceDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<\n    Partial<\n      Pick<\n        ApiReferenceConfigurationRaw,\n        | 'authentication'\n        | 'baseServerURL'\n        | 'hideClientButton'\n        | 'hiddenClients'\n        | 'servers'\n      >\n    >\n  >\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { type ModalState, type ScalarListboxOption } from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { ApiReferenceConfigurationRaw } from '@scalar/types/api-reference'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  toValue,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n} from 'vue'\n\nimport { mergeSecurity } from '@/v2/blocks/scalar-auth-selector-block/helpers/merge-security'\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { getActiveEnvironment } from '@/v2/helpers/get-active-environment'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  sidebarState,\n  workspaceStore,\n} = defineProps<ModalProps>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(() =>\n  getActiveEnvironment(workspaceStore, document.value),\n)\n\n/** Merge authentication config with the document security schemes */\nconst securitySchemes = computed(() =>\n  mergeSecurity(\n    document.value?.components?.securitySchemes,\n    toValue(options)?.authentication?.securitySchemes,\n    workspaceStore.auth,\n    document.value?.['x-scalar-navigation']?.name ?? '',\n  ),\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-3 z-2\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :securitySchemes\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":""}

package/dist/v2/features/modal/Modal.vue.script.js

@@ -0,0 +1,147 @@
+import ModalClientContainer_default from "../../components/modals/ModalClientContainer.vue.js";
+import { mergeSecurity } from "../../blocks/scalar-auth-selector-block/helpers/merge-security.js";
+import Operation_default from "../operation/Operation.vue.js";
+import Sidebar_default from "../../components/sidebar/Sidebar.vue.js";
+import SidebarToggle_default from "../../components/sidebar/SidebarToggle.vue.js";
+import { getActiveEnvironment } from "../../helpers/get-active-environment.js";
+import { useGlobalHotKeys } from "../../hooks/use-global-hot-keys.js";
+import { initializeModalEvents } from "./modal-events.js";
+import { useScrollLock } from "../../hooks/use-scroll-lock.js";
+import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, onBeforeUnmount, openBlock, ref, toValue, unref, vShow, watch, withCtx, withDirectives } from "vue";
+import { ScalarToasts } from "@scalar/use-toasts";
+//#region src/v2/features/modal/Modal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "relative flex h-full min-h-0 w-full flex-1"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "flex h-full w-full items-center justify-center"
+};
+var Modal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Modal",
+	props: {
+		workspaceStore: {},
+		document: {},
+		path: {},
+		eventBus: {},
+		method: {},
+		exampleName: {},
+		modalState: {},
+		sidebarState: {},
+		plugins: {},
+		options: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const activeWorkspace = {
+			label: "default",
+			id: "default"
+		};
+		/** Controls the visibility of the sidebar. */
+		const isSidebarOpen = ref(false);
+		/** Initialize modal events */
+		initializeModalEvents({
+			eventBus: __props.eventBus,
+			isSidebarOpen,
+			sidebarState: __props.sidebarState,
+			modalState: __props.modalState,
+			store: __props.workspaceStore
+		});
+		/** Register global hotkeys for the app, passing the workspace event bus and layout state */
+		useGlobalHotKeys(__props.eventBus, "modal", () => !__props.modalState.open);
+		/** Clean up on close */
+		const cleanUp = () => {
+			__props.eventBus.emit("operation:cancel:request");
+		};
+		const isLocked = useScrollLock(() => {
+			if (typeof window !== "undefined") return window.document.body;
+			return null;
+		});
+		watch(() => __props.modalState.open, (open) => {
+			isLocked.value = open;
+			if (!open) cleanUp();
+		});
+		onBeforeUnmount(() => cleanUp());
+		/** Default sidebar width in pixels. */
+		const DEFAULT_SIDEBAR_WIDTH = 288;
+		/** Width of the sidebar, with fallback to default. */
+		const sidebarWidth = computed(() => __props.workspaceStore?.workspace?.["x-scalar-sidebar-width"] ?? DEFAULT_SIDEBAR_WIDTH);
+		/** Handler for sidebar width changes. */
+		const handleSidebarWidthUpdate = (width) => __props.workspaceStore?.update("x-scalar-sidebar-width", width);
+		/**
+		* Merged environment variables from workspace and document levels.
+		* Variables from both sources are combined, with document variables
+		* taking precedence in case of naming conflicts.
+		*/
+		const environment = computed(() => getActiveEnvironment(__props.workspaceStore, __props.document.value));
+		/** Merge authentication config with the document security schemes */
+		const securitySchemes = computed(() => mergeSecurity(__props.document.value?.components?.securitySchemes, toValue(__props.options)?.authentication?.securitySchemes, __props.workspaceStore.auth, __props.document.value?.["x-scalar-navigation"]?.name ?? ""));
+		__expose({
+			sidebarWidth,
+			environment
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ModalClientContainer_default, { modalState: __props.modalState }, {
+				default: withCtx(() => [createVNode(unref(ScalarToasts)), __props.document.value && __props.path?.value && __props.method?.value ? (openBlock(), createElementBlock("main", _hoisted_1, [
+					createVNode(unref(SidebarToggle_default), {
+						modelValue: isSidebarOpen.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isSidebarOpen.value = $event),
+						class: "absolute top-2 left-3 z-2"
+					}, null, 8, ["modelValue"]),
+					withDirectives(createVNode(unref(Sidebar_default), {
+						sidebarWidth: sidebarWidth.value,
+						"onUpdate:sidebarWidth": [_cache[1] || (_cache[1] = ($event) => sidebarWidth.value = $event), handleSidebarWidthUpdate],
+						activeWorkspace,
+						class: "h-full max-md:absolute! max-md:w-full!",
+						documents: [__props.document.value],
+						eventBus: __props.eventBus,
+						isDroppable: () => false,
+						layout: "modal",
+						sidebarState: __props.sidebarState.state,
+						workspaces: [],
+						onSelectItem: __props.sidebarState.handleSelectItem
+					}, null, 8, [
+						"sidebarWidth",
+						"documents",
+						"eventBus",
+						"sidebarState",
+						"onSelectItem"
+					]), [[vShow, isSidebarOpen.value]]),
+					createVNode(Operation_default, {
+						activeWorkspace,
+						class: "flex-1",
+						document: __props.document.value,
+						documentSlug: __props.document.value["x-scalar-navigation"]?.id ?? "",
+						environment: environment.value,
+						eventBus: __props.eventBus,
+						exampleName: __props.exampleName?.value,
+						layout: "modal",
+						method: __props.method?.value,
+						options: __props.options,
+						path: __props.path?.value,
+						plugins: __props.plugins,
+						securitySchemes: securitySchemes.value,
+						workspaceStore: __props.workspaceStore
+					}, null, 8, [
+						"document",
+						"documentSlug",
+						"environment",
+						"eventBus",
+						"exampleName",
+						"method",
+						"options",
+						"path",
+						"plugins",
+						"securitySchemes",
+						"workspaceStore"
+					])
+				])) : (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "text-c-3" }, "No document selected", -1)])]))]),
+				_: 1
+			}, 8, ["modalState"]);
+		};
+	}
+});
+//#endregion
+export { Modal_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Modal.vue.script.js.map

package/dist/v2/features/modal/Modal.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in */\n  document: ComputedRef<WorkspaceDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<\n    Partial<\n      Pick<\n        ApiReferenceConfigurationRaw,\n        | 'authentication'\n        | 'baseServerURL'\n        | 'hideClientButton'\n        | 'hiddenClients'\n        | 'servers'\n      >\n    >\n  >\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { type ModalState, type ScalarListboxOption } from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { ApiReferenceConfigurationRaw } from '@scalar/types/api-reference'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  toValue,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n} from 'vue'\n\nimport { mergeSecurity } from '@/v2/blocks/scalar-auth-selector-block/helpers/merge-security'\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { getActiveEnvironment } from '@/v2/helpers/get-active-environment'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  sidebarState,\n  workspaceStore,\n} = defineProps<ModalProps>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(() =>\n  getActiveEnvironment(workspaceStore, document.value),\n)\n\n/** Merge authentication config with the document security schemes */\nconst securitySchemes = computed(() =>\n  mergeSecurity(\n    document.value?.components?.securitySchemes,\n    toValue(options)?.authentication?.securitySchemes,\n    workspaceStore.auth,\n    document.value?.['x-scalar-navigation']?.name ?? '',\n  ),\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-3 z-2\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :securitySchemes\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;GACN;;EAGA,MAAM,gBAAgB,IAAI,MAAK;;AAG/B,wBAAsB;GACpB,UAAO,QAAA;GACP;GACA,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;GACR,CAAA;;AAGD,mBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,KAAI;;EAG1D,MAAM,gBAAgB;AACpB,WAAA,SAAS,KAAK,2BAA0B;;EAG1C,MAAM,WAAW,oBAAoB;AACnC,OAAI,OAAO,WAAW,YACpB,QAAO,OAAO,SAAS;AAEzB,UAAO;IACR;AAED,cACQ,QAAA,WAAW,OAChB,SAAS;AAER,YAAS,QAAQ;AAEjB,OAAI,CAAC,KACH,UAAQ;IAGd;AAGA,wBAAsB,SAAS,CAAA;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,sBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,MAAK;;;;;;EAOxD,MAAM,cAAc,eAClB,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,MAAM,CACtD;;EAGA,MAAM,kBAAkB,eACtB,cACE,QAAA,SAAS,OAAO,YAAY,iBAC5B,QAAQ,QAAA,QAAQ,EAAE,gBAAgB,iBAClC,QAAA,eAAe,MACf,QAAA,SAAS,QAAQ,wBAAwB,QAAQ,GAClD,CACH;AAEA,WAAa;GACX;GACA;GACD,CAAA;;uBAIC,YA8CuB,8BAAA,EA9CA,YAAA,QAAA,YAAU,EAAA;2BAEf,CAAhB,YAAgB,MAAA,aAAA,CAAA,EAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,WAAA,EADjD,mBAkCO,QAlCP,YAkCO;KA/BL,YAEsC,MAAA,sBAAA,EAAA;kBAD3B,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,gBAAA,EAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,yBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,MAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,EAAE;MACd,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,MAAa,CAAA,CAAA;KAYvB,YAcoB,mBAAA;MAbA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,wBAAyB,MAAE;MACvD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC3B,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iBAAA,gBAAA;MACA,gBAAA,QAAA;;;;;;;;;;;;;;wBAGL,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAkD,QAAA,EAA5C,OAAM,YAAU,EAAC,wBAAoB,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA"}

package/dist/v2/features/modal/helpers/create-api-client-modal.d.ts

@@ -3,8 +3,8 @@ import type { ClientPlugin } from '@scalar/oas-utils/helpers';
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 import { type App } from 'vue';
-import { type RoutePayload } from '@/v2/features/modal/helpers/resolve-route-parameters';
-import { type ModalProps } from '@/v2/features/modal/Modal.vue';
+import { type RoutePayload } from '../../../../v2/features/modal/helpers/resolve-route-parameters.js';
+import { type ModalProps } from '../../../../v2/features/modal/Modal.vue.js';
 type CreateApiClientModalOptions = {
     /** Element to mount the client modal to. */
     el: HTMLElement | null;

package/dist/v2/features/modal/helpers/create-api-client-modal.js

@@ -0,0 +1,100 @@
+import { resolveRouteParameters } from "./resolve-route-parameters.js";
+import { restoreWorkspaceState } from "./restore-workspace-state.js";
+import { useModalSidebar } from "../hooks/use-modal-sidebar.js";
+import Modal_default from "../Modal.vue.js";
+import { computed, createApp, reactive, ref, watch } from "vue";
+import { useModal } from "@scalar/components";
+import { createWorkspaceEventBus } from "@scalar/workspace-store/events";
+//#region src/v2/features/modal/helpers/create-api-client-modal.ts
+/**
+* Creates the API Client Modal.
+*
+* The modal does not require a router. Instead, navigation is handled by setting
+* active entities directly through the returned `route` function.
+*/
+var createApiClientModal = ({ el, eventBus = createWorkspaceEventBus({ debug: false }), mountOnInitialize = true, plugins = [], workspaceStore, options = {} }) => {
+	const defaultEntities = {
+		path: "default",
+		method: "default",
+		example: "default",
+		documentSlug: workspaceStore.workspace["x-scalar-active-document"] || "default"
+	};
+	const workspaceStoreSnapshot = ref(null);
+	const parameters = reactive({ ...defaultEntities });
+	/** Navigate to the specified path, method, and example. */
+	const route = (payload) => {
+		Object.assign(parameters, defaultEntities, payload);
+	};
+	/** Resolved parameters from the workspace store. */
+	const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters));
+	const documentSlug = computed(() => resolvedParameters.value.documentSlug);
+	const path = computed(() => resolvedParameters.value.path);
+	const method = computed(() => resolvedParameters.value.method);
+	const exampleName = computed(() => resolvedParameters.value.example);
+	/** The document from the workspace store. */
+	const document = computed(() => workspaceStore.workspace.documents[documentSlug.value ?? ""] ?? null);
+	/** Sidebar state and selection handling. */
+	const sidebarState = useModalSidebar({
+		workspaceStore,
+		documentSlug,
+		path,
+		method,
+		exampleName,
+		route
+	});
+	const modalState = useModal();
+	const app = createApp(Modal_default, {
+		document,
+		eventBus,
+		exampleName,
+		method,
+		modalState,
+		path,
+		plugins,
+		sidebarState,
+		workspaceStore,
+		options
+	});
+	/** Snapshot the workspace store when the modal is opened. */
+	const handleModalOpen = () => {
+		workspaceStoreSnapshot.value = window.structuredClone(workspaceStore.exportWorkspace());
+	};
+	/** Restore the workspace store when the modal is closed. */
+	const handleModalClose = () => {
+		if (!workspaceStoreSnapshot.value) {
+			console.warn("No workspace store snapshot to restore");
+			return;
+		}
+		const result = restoreWorkspaceState({
+			workspaceStore,
+			workspaceState: workspaceStoreSnapshot.value,
+			name: documentSlug.value ?? ""
+		});
+		if (!result.ok) console.error("Failed to restore workspace state", result.error);
+	};
+	watch(() => modalState.open, (open) => open ? handleModalOpen() : handleModalClose());
+	app.config.idPrefix = "scalar-client";
+	/** Mount the modal to a given element. */
+	const mount = (mountingEl = el) => {
+		if (!mountingEl) {
+			console.error("[@scalar/api-client] Could not create the API client Modal.", "Invalid HTML element provided.", "Read more: https://github.com/scalar/scalar/tree/main/packages/api-client");
+			return;
+		}
+		app.mount(mountingEl);
+	};
+	if (mountOnInitialize) mount();
+	return {
+		app,
+		open: (payload) => {
+			modalState.open = true;
+			if (payload) route(payload);
+		},
+		mount,
+		route,
+		modalState
+	};
+};
+//#endregion
+export { createApiClientModal };
+
+//# sourceMappingURL=create-api-client-modal.js.map

package/dist/v2/features/modal/helpers/create-api-client-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-api-client-modal.js","names":[],"sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"sourcesContent":["import { type ModalState, useModal } from '@scalar/components'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus, createWorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { InMemoryWorkspace } from '@scalar/workspace-store/schemas/inmemory-workspace'\nimport { type App, computed, createApp, reactive, ref, watch } from 'vue'\n\nimport {\n  type DefaultEntities,\n  type RoutePayload,\n  resolveRouteParameters,\n} from '@/v2/features/modal/helpers/resolve-route-parameters'\nimport { restoreWorkspaceState } from '@/v2/features/modal/helpers/restore-workspace-state'\nimport { useModalSidebar } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport Modal, { type ModalProps } from '@/v2/features/modal/Modal.vue'\n\ntype CreateApiClientModalOptions = {\n  /** Element to mount the client modal to. */\n  el: HTMLElement | null\n  /**\n   * Will attempt to mount the references immediately.\n   * For SSR this may need to be disabled and handled manually on the client side.\n   */\n  mountOnInitialize?: boolean\n  /** You can pass in an event bus if you have one already, or we will create one */\n  eventBus?: WorkspaceEventBus\n  /** The workspace store must be initialized and passed in. */\n  workspaceStore: WorkspaceStore\n  /** Api client plugins to include in the modal */\n  plugins?: ClientPlugin[]\n  /** Subset of the configuration options for the modal, if you want it to be reactive ensure its a ref */\n  options?: ModalProps['options']\n}\n\nexport type ApiClientModal = {\n  app: App\n  open: (payload?: RoutePayload) => void\n  mount: (mountingEl: HTMLElement | null) => void\n  route: (payload: RoutePayload) => void\n  modalState: ModalState\n}\n\n/**\n * Creates the API Client Modal.\n *\n * The modal does not require a router. Instead, navigation is handled by setting\n * active entities directly through the returned `route` function.\n */\nexport const createApiClientModal = ({\n  el,\n  eventBus = createWorkspaceEventBus({\n    debug: import.meta.env.DEV,\n  }),\n  mountOnInitialize = true,\n  plugins = [],\n  workspaceStore,\n  options = {},\n}: CreateApiClientModalOptions): ApiClientModal => {\n  const defaultEntities: DefaultEntities = {\n    path: 'default',\n    method: 'default',\n    example: 'default',\n    documentSlug: workspaceStore.workspace['x-scalar-active-document'] || 'default',\n  }\n\n  const workspaceStoreSnapshot = ref<InMemoryWorkspace | null>(null)\n\n  const parameters = reactive<DefaultEntities>({ ...defaultEntities })\n\n  /** Navigate to the specified path, method, and example. */\n  const route = (payload: RoutePayload): void => {\n    Object.assign(parameters, defaultEntities, payload)\n  }\n\n  /** Resolved parameters from the workspace store. */\n  const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters))\n  const documentSlug = computed(() => resolvedParameters.value.documentSlug)\n  const path = computed(() => resolvedParameters.value.path)\n  const method = computed(() => resolvedParameters.value.method)\n  const exampleName = computed(() => resolvedParameters.value.example)\n  /** The document from the workspace store. */\n  const document = computed(() => workspaceStore.workspace.documents[documentSlug.value ?? ''] ?? null)\n\n  /** Sidebar state and selection handling. */\n  const sidebarState = useModalSidebar({\n    workspaceStore,\n    documentSlug: documentSlug,\n    path: path,\n    method: method,\n    exampleName: exampleName,\n    route,\n  })\n\n  const modalState = useModal()\n\n  const app = createApp(Modal, {\n    document,\n    eventBus,\n    exampleName,\n    method,\n    modalState,\n    path,\n    plugins,\n    sidebarState,\n    workspaceStore,\n    options,\n  } satisfies ModalProps)\n\n  /** Snapshot the workspace store when the modal is opened. */\n  const handleModalOpen = () => {\n    workspaceStoreSnapshot.value = window.structuredClone(workspaceStore.exportWorkspace())\n  }\n\n  /** Restore the workspace store when the modal is closed. */\n  const handleModalClose = () => {\n    if (!workspaceStoreSnapshot.value) {\n      console.warn('No workspace store snapshot to restore')\n      return\n    }\n\n    const result = restoreWorkspaceState({\n      workspaceStore,\n      workspaceState: workspaceStoreSnapshot.value,\n      name: documentSlug.value ?? '',\n    })\n\n    if (!result.ok) {\n      console.error('Failed to restore workspace state', result.error)\n    }\n    return\n  }\n\n  watch(\n    () => modalState.open,\n    (open) => (open ? handleModalOpen() : handleModalClose()),\n  )\n\n  // Use a unique id prefix to prevent collisions with other Vue apps on the page\n  app.config.idPrefix = 'scalar-client'\n\n  /** Mount the modal to a given element. */\n  const mount = (mountingEl: HTMLElement | null = el): void => {\n    if (!mountingEl) {\n      console.error(\n        '[@scalar/api-client] Could not create the API client Modal.',\n        'Invalid HTML element provided.',\n        'Read more: https://github.com/scalar/scalar/tree/main/packages/api-client',\n      )\n      return\n    }\n    app.mount(mountingEl)\n  }\n\n  if (mountOnInitialize) {\n    mount()\n  }\n\n  return {\n    /** The Vue app instance for the modal. Use with caution. */\n    app,\n    /** Open the modal and optionally navigate to a specific route. */\n    open: (payload?: RoutePayload): void => {\n      modalState.open = true\n      if (payload) {\n        route(payload)\n      }\n    },\n    /** Mount the modal to a given element. */\n    mount,\n    /** Navigate to the specified path, method, and example. */\n    route,\n    /** Controls the visibility of the modal. */\n    modalState,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAgDA,IAAa,wBAAwB,EACnC,IACA,WAAW,wBAAwB,EACjC,OAAA,OACD,CAAC,EACF,oBAAoB,MACpB,UAAU,EAAE,EACZ,gBACA,UAAU,EAAE,OACqC;CACjD,MAAM,kBAAmC;EACvC,MAAM;EACN,QAAQ;EACR,SAAS;EACT,cAAc,eAAe,UAAU,+BAA+B;EACvE;CAED,MAAM,yBAAyB,IAA8B,KAAK;CAElE,MAAM,aAAa,SAA0B,EAAE,GAAG,iBAAiB,CAAC;;CAGpE,MAAM,SAAS,YAAgC;AAC7C,SAAO,OAAO,YAAY,iBAAiB,QAAQ;;;CAIrD,MAAM,qBAAqB,eAAe,uBAAuB,gBAAgB,WAAW,CAAC;CAC7F,MAAM,eAAe,eAAe,mBAAmB,MAAM,aAAa;CAC1E,MAAM,OAAO,eAAe,mBAAmB,MAAM,KAAK;CAC1D,MAAM,SAAS,eAAe,mBAAmB,MAAM,OAAO;CAC9D,MAAM,cAAc,eAAe,mBAAmB,MAAM,QAAQ;;CAEpE,MAAM,WAAW,eAAe,eAAe,UAAU,UAAU,aAAa,SAAS,OAAO,KAAK;;CAGrG,MAAM,eAAe,gBAAgB;EACnC;EACc;EACR;EACE;EACK;EACb;EACD,CAAC;CAEF,MAAM,aAAa,UAAU;CAE7B,MAAM,MAAM,UAAU,eAAO;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAsB;;CAGvB,MAAM,wBAAwB;AAC5B,yBAAuB,QAAQ,OAAO,gBAAgB,eAAe,iBAAiB,CAAC;;;CAIzF,MAAM,yBAAyB;AAC7B,MAAI,CAAC,uBAAuB,OAAO;AACjC,WAAQ,KAAK,yCAAyC;AACtD;;EAGF,MAAM,SAAS,sBAAsB;GACnC;GACA,gBAAgB,uBAAuB;GACvC,MAAM,aAAa,SAAS;GAC7B,CAAC;AAEF,MAAI,CAAC,OAAO,GACV,SAAQ,MAAM,qCAAqC,OAAO,MAAM;;AAKpE,aACQ,WAAW,OAChB,SAAU,OAAO,iBAAiB,GAAG,kBAAkB,CACzD;AAGD,KAAI,OAAO,WAAW;;CAGtB,MAAM,SAAS,aAAiC,OAAa;AAC3D,MAAI,CAAC,YAAY;AACf,WAAQ,MACN,+DACA,kCACA,4EACD;AACD;;AAEF,MAAI,MAAM,WAAW;;AAGvB,KAAI,kBACF,QAAO;AAGT,QAAO;EAEL;EAEA,OAAO,YAAiC;AACtC,cAAW,OAAO;AAClB,OAAI,QACF,OAAM,QAAQ;;EAIlB;EAEA;EAEA;EACD"}

package/dist/v2/features/modal/helpers/map-hidden-clients-config.js

@@ -0,0 +1,32 @@
+import { objectKeys } from "@scalar/helpers/object/object-keys";
+import { AVAILABLE_CLIENTS, GROUPED_CLIENTS } from "@scalar/types/snippetz";
+//#region src/v2/features/modal/helpers/map-hidden-clients-config.ts
+/**
+* Map the old hiddenClients config to the new httpClients config.
+* Filters out clients based on the configuration and returns the remaining clients.
+*/
+var mapHiddenClientsConfig = (hiddenClients) => {
+	if (hiddenClients === true) return [];
+	if (!hiddenClients || Array.isArray(hiddenClients) && hiddenClients.length === 0) return AVAILABLE_CLIENTS;
+	const visibleClientsSet = new Set(AVAILABLE_CLIENTS);
+	if (Array.isArray(hiddenClients)) for (const item of hiddenClients) {
+		const group = GROUPED_CLIENTS[item];
+		if (group) for (const client of group) visibleClientsSet.delete(`${item}/${client}`);
+		else if (item.includes("/")) visibleClientsSet.delete(item);
+		else for (const language of objectKeys(GROUPED_CLIENTS)) visibleClientsSet.delete(`${language}/${item}`);
+	}
+	else if (typeof hiddenClients === "object") {
+		for (const [targetId, clients] of Object.entries(hiddenClients)) if (clients === true) {
+			const group = GROUPED_CLIENTS[targetId];
+			if (group) for (const client of group) visibleClientsSet.delete(`${targetId}/${client}`);
+		} else if (Array.isArray(clients)) for (const client of clients) {
+			visibleClientsSet.delete(client);
+			visibleClientsSet.delete(`${targetId}/${client}`);
+		}
+	}
+	return Array.from(visibleClientsSet);
+};
+//#endregion
+export { mapHiddenClientsConfig };
+
+//# sourceMappingURL=map-hidden-clients-config.js.map

package/dist/v2/features/modal/helpers/map-hidden-clients-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-hidden-clients-config.js","names":[],"sources":["../../../../../src/v2/features/modal/helpers/map-hidden-clients-config.ts"],"sourcesContent":["import { objectKeys } from '@scalar/helpers/object/object-keys'\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport type { AvailableClient, TargetId } from '@scalar/types/snippetz'\nimport { AVAILABLE_CLIENTS, type AvailableClients, GROUPED_CLIENTS } from '@scalar/types/snippetz'\n\n/**\n * Map the old hiddenClients config to the new httpClients config.\n * Filters out clients based on the configuration and returns the remaining clients.\n */\nexport const mapHiddenClientsConfig = (hiddenClients: ApiReferenceConfiguration['hiddenClients']): AvailableClients => {\n  // Early return for boolean true - hide all clients\n  if (hiddenClients === true) {\n    return []\n  }\n\n  // Early return for falsy values or empty arrays - show all clients\n  if (!hiddenClients || (Array.isArray(hiddenClients) && hiddenClients.length === 0)) {\n    return AVAILABLE_CLIENTS\n  }\n\n  // Start with all clients visible and remove hidden ones\n  const visibleClientsSet = new Set<AvailableClient>(AVAILABLE_CLIENTS)\n\n  // Handle array config: ['js/fetch', 'js/axios', 'java', 'fetch', 'axios']\n  if (Array.isArray(hiddenClients)) {\n    for (const item of hiddenClients) {\n      // Check if item is a target group first\n      const group = GROUPED_CLIENTS[item as TargetId]\n\n      // Item is a target group (e.g., 'java', 'ruby') - hide all clients in the group\n      if (group) {\n        for (const client of group) {\n          visibleClientsSet.delete(`${item}/${client}` as AvailableClient)\n        }\n      }\n\n      // Item is a full client ID (e.g., 'js/fetch') - hide this specific client\n      else if (item.includes('/')) {\n        visibleClientsSet.delete(item as AvailableClient)\n      }\n\n      // Item is a client name suffix (e.g., 'fetch', 'axios') - hide all matching clients\n      else {\n        for (const language of objectKeys(GROUPED_CLIENTS)) {\n          visibleClientsSet.delete(`${language}/${item}` as AvailableClient)\n        }\n      }\n    }\n  }\n\n  // Handle object config: { node: true, python: ['requests'] }\n  else if (typeof hiddenClients === 'object') {\n    for (const [targetId, clients] of Object.entries(hiddenClients)) {\n      if (clients === true) {\n        // Hide all clients for this target\n        const group = GROUPED_CLIENTS[targetId as TargetId]\n        if (group) {\n          for (const client of group) {\n            visibleClientsSet.delete(`${targetId}/${client}` as AvailableClient)\n          }\n        }\n      } else if (Array.isArray(clients)) {\n        // Hide specific clients for this target\n        for (const client of clients) {\n          // Try both formats: 'fetch' and 'js/fetch'\n          visibleClientsSet.delete(client as AvailableClient)\n          visibleClientsSet.delete(`${targetId}/${client}` as AvailableClient)\n        }\n      }\n    }\n  }\n\n  return Array.from(visibleClientsSet)\n}\n"],"mappings":";;;;;;;AASA,IAAa,0BAA0B,kBAAgF;AAErH,KAAI,kBAAkB,KACpB,QAAO,EAAE;AAIX,KAAI,CAAC,iBAAkB,MAAM,QAAQ,cAAc,IAAI,cAAc,WAAW,EAC9E,QAAO;CAIT,MAAM,oBAAoB,IAAI,IAAqB,kBAAkB;AAGrE,KAAI,MAAM,QAAQ,cAAc,CAC9B,MAAK,MAAM,QAAQ,eAAe;EAEhC,MAAM,QAAQ,gBAAgB;AAG9B,MAAI,MACF,MAAK,MAAM,UAAU,MACnB,mBAAkB,OAAO,GAAG,KAAK,GAAG,SAA4B;WAK3D,KAAK,SAAS,IAAI,CACzB,mBAAkB,OAAO,KAAwB;MAKjD,MAAK,MAAM,YAAY,WAAW,gBAAgB,CAChD,mBAAkB,OAAO,GAAG,SAAS,GAAG,OAA0B;;UAOjE,OAAO,kBAAkB;OAC3B,MAAM,CAAC,UAAU,YAAY,OAAO,QAAQ,cAAc,CAC7D,KAAI,YAAY,MAAM;GAEpB,MAAM,QAAQ,gBAAgB;AAC9B,OAAI,MACF,MAAK,MAAM,UAAU,MACnB,mBAAkB,OAAO,GAAG,SAAS,GAAG,SAA4B;aAG/D,MAAM,QAAQ,QAAQ,CAE/B,MAAK,MAAM,UAAU,SAAS;AAE5B,qBAAkB,OAAO,OAA0B;AACnD,qBAAkB,OAAO,GAAG,SAAS,GAAG,SAA4B;;;AAM5E,QAAO,MAAM,KAAK,kBAAkB"}