npm - @scalar/api-client - Versions diffs - 3.0.0 → 3.2.0 - Mend

@scalar/api-client 3.0.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (218) hide show

package/dist/v2/features/command-palette/helpers/load-document-from-source.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"load-document-from-source.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/command-palette/helpers/load-document-from-source.ts"],"names":[],"mappings":"~~AAGA~~,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;~~AAKpE~~,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;CAC7B,CAAA;AAiCD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB,GACjC,gBAAgB,cAAc,EAC9B,iBAAiB,eAAe,EAChC,MAAM,MAAM,EACZ,WAAW,OAAO,KACjB,OAAO,CAAC,OAAO,CAsDjB,CAAA"}
1	+ {"version":3,"file":"load-document-from-source.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/command-palette/helpers/load-document-from-source.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAIpE,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;CAC7B,CAAA;AAiCD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB,GACjC,gBAAgB,cAAc,EAC9B,iBAAiB,eAAe,EAChC,MAAM,MAAM,EACZ,WAAW,OAAO,KACjB,OAAO,CAAC,OAAO,CAsDjB,CAAA"}

package/dist/v2/features/command-palette/helpers/load-document-from-source.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { isPostmanCollection } from "./is-postman-collection.js";
 import { getOpenApiFromPostman } from "./get-openapi-from-postman.js";
 import { isObject } from "@scalar/helpers/object/is-object";
+import { isPostmanCollection } from "@scalar/postman-to-openapi";
 import { parseJson, parseYaml } from "@scalar/json-magic/bundle/plugins/browser";
 //#region src/v2/features/command-palette/helpers/load-document-from-source.ts
 /**

package/dist/v2/features/command-palette/helpers/load-document-from-source.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"load-document-from-source.js","names":[],"sources":["../../../../../src/v2/features/command-palette/helpers/load-document-from-source.ts"],"sourcesContent":["import { isObject } from '@scalar/helpers/object/is-object'\nimport type { LoaderPlugin } from '@scalar/json-magic/bundle'\nimport { parseJson, parseYaml } from '@scalar/json-magic/bundle/plugins/browser'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\n\nimport { getOpenApiFromPostman } from '@/v2/features/command-palette/helpers/get-openapi-from-postman'\~~nimport { isPostmanCollection } from '@/v2/features/command-palette/helpers/is-postman-collection'\~~n\nexport type ImportEventData = {\n source: string\n type: 'url' \| 'file' \| 'raw'\n}\n\n/*\n Loader plugin to detect and convert Postman collections into OpenAPI documents\n /\nconst readPostmanCollection = (): LoaderPlugin => {\n return {\n type: 'loader',\n validate: isPostmanCollection,\n exec: (source: string) => {\n try {\n const document = getOpenApiFromPostman(source)\n\n if (document) {\n return Promise.resolve({\n ok: true,\n data: document,\n raw: source,\n })\n }\n\n return Promise.resolve({\n ok: false,\n })\n } catch {\n return Promise.resolve({\n ok: false,\n })\n }\n },\n }\n}\n\n/\n Attempts to add a document to the workspace from a given source, which may be a URL or raw content.\n \n - If the source is a URL, adds the document by its URL and includes a watch mode flag as metadata.\n * - If the source is a Postman collection, transforms it to OpenAPI and adds it as a document.\n * - For other raw sources (such as pasted JSON or YAML), attempts to normalize and add them as a document.\n \n @param workspaceStore The workspace store where the document will be added.\n * @param source The document source (URL, Postman Collection, JSON, or YAML string).\n * @param name The display name for the new document.\n * @param watchMode Whether to enable watch mode (applies only to URL sources).\n * @returns Promise resolving to true if the document was successfully added, or false if the operation failed.\n */\nexport const loadDocumentFromSource = async (\n workspaceStore: WorkspaceStore,\n importEventData: ImportEventData,\n name: string,\n watchMode: boolean,\n): Promise<boolean> => {\n const { source, type } = importEventData\n if (!source) {\n // No source provided, do nothing.\n return false\n }\n\n // If the source is a URL, add it directly with watch mode metadata.\n if (type === 'url') {\n return await workspaceStore.addDocument({\n name,\n url: source,\n meta: {\n 'x-scalar-watch-mode': watchMode,\n },\n })\n }\n\n if (type === 'file') {\n return await workspaceStore.addDocument({\n name,\n path: source,\n })\n }\n\n const loaders = [readPostmanCollection(), parseJson(), parseYaml()]\n const loader = loaders.find((l) => l.validate(source))\n\n // If no loader is found, return false\n if (!loader) {\n return false\n }\n\n // Execute the loader\n const result = await loader.exec(source)\n // If the loader failed, return false\n if (!result.ok) {\n return false\n }\n\n if (!isObject(result.data)) {\n return false\n }\n\n const addDocumentResult = await workspaceStore.addDocument({\n name,\n document: result.data,\n })\n\n if (!addDocumentResult) {\n return false\n }\n\n return true\n}\n"],"mappings":";;;;;;;;AAgBA,IAAM,8BAA4C;AAChD,QAAO;EACL,MAAM;EACN,UAAU;EACV,OAAO,WAAmB;AACxB,OAAI;IACF,MAAM,WAAW,sBAAsB,OAAO;AAE9C,QAAI,SACF,QAAO,QAAQ,QAAQ;KACrB,IAAI;KACJ,MAAM;KACN,KAAK;KACN,CAAC;AAGJ,WAAO,QAAQ,QAAQ,EACrB,IAAI,OACL,CAAC;WACI;AACN,WAAO,QAAQ,QAAQ,EACrB,IAAI,OACL,CAAC;;;EAGP;;;;;;;;;;;;;;;AAgBH,IAAa,yBAAyB,OACpC,gBACA,iBACA,MACA,cACqB;CACrB,MAAM,EAAE,QAAQ,SAAS;AACzB,KAAI,CAAC,OAEH,QAAO;AAIT,KAAI,SAAS,MACX,QAAO,MAAM,eAAe,YAAY;EACtC;EACA,KAAK;EACL,MAAM,EACJ,uBAAuB,WACxB;EACF,CAAC;AAGJ,KAAI,SAAS,OACX,QAAO,MAAM,eAAe,YAAY;EACtC;EACA,MAAM;EACP,CAAC;CAIJ,MAAM,SADU;EAAC,uBAAuB;EAAE,WAAW;EAAE,WAAW;EAAC,CAC5C,MAAM,MAAM,EAAE,SAAS,OAAO,CAAC;AAGtD,KAAI,CAAC,OACH,QAAO;CAIT,MAAM,SAAS,MAAM,OAAO,KAAK,OAAO;AAExC,KAAI,CAAC,OAAO,GACV,QAAO;AAGT,KAAI,CAAC,SAAS,OAAO,KAAK,CACxB,QAAO;AAQT,KAAI,CALsB,MAAM,eAAe,YAAY;EACzD;EACA,UAAU,OAAO;EAClB,CAAC,CAGA,QAAO;AAGT,QAAO"}
1	+ {"version":3,"file":"load-document-from-source.js","names":[],"sources":["../../../../../src/v2/features/command-palette/helpers/load-document-from-source.ts"],"sourcesContent":["import { isObject } from '@scalar/helpers/object/is-object'\nimport type { LoaderPlugin } from '@scalar/json-magic/bundle'\nimport { parseJson, parseYaml } from '@scalar/json-magic/bundle/plugins/browser'\nimport { isPostmanCollection } from '@scalar/postman-to-openapi'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\n\nimport { getOpenApiFromPostman } from '@/v2/features/command-palette/helpers/get-openapi-from-postman'\n\nexport type ImportEventData = {\n source: string\n type: 'url' \| 'file' \| 'raw'\n}\n\n/*\n Loader plugin to detect and convert Postman collections into OpenAPI documents\n /\nconst readPostmanCollection = (): LoaderPlugin => {\n return {\n type: 'loader',\n validate: isPostmanCollection,\n exec: (source: string) => {\n try {\n const document = getOpenApiFromPostman(source)\n\n if (document) {\n return Promise.resolve({\n ok: true,\n data: document,\n raw: source,\n })\n }\n\n return Promise.resolve({\n ok: false,\n })\n } catch {\n return Promise.resolve({\n ok: false,\n })\n }\n },\n }\n}\n\n/\n Attempts to add a document to the workspace from a given source, which may be a URL or raw content.\n \n - If the source is a URL, adds the document by its URL and includes a watch mode flag as metadata.\n * - If the source is a Postman collection, transforms it to OpenAPI and adds it as a document.\n * - For other raw sources (such as pasted JSON or YAML), attempts to normalize and add them as a document.\n \n @param workspaceStore The workspace store where the document will be added.\n * @param source The document source (URL, Postman Collection, JSON, or YAML string).\n * @param name The display name for the new document.\n * @param watchMode Whether to enable watch mode (applies only to URL sources).\n * @returns Promise resolving to true if the document was successfully added, or false if the operation failed.\n */\nexport const loadDocumentFromSource = async (\n workspaceStore: WorkspaceStore,\n importEventData: ImportEventData,\n name: string,\n watchMode: boolean,\n): Promise<boolean> => {\n const { source, type } = importEventData\n if (!source) {\n // No source provided, do nothing.\n return false\n }\n\n // If the source is a URL, add it directly with watch mode metadata.\n if (type === 'url') {\n return await workspaceStore.addDocument({\n name,\n url: source,\n meta: {\n 'x-scalar-watch-mode': watchMode,\n },\n })\n }\n\n if (type === 'file') {\n return await workspaceStore.addDocument({\n name,\n path: source,\n })\n }\n\n const loaders = [readPostmanCollection(), parseJson(), parseYaml()]\n const loader = loaders.find((l) => l.validate(source))\n\n // If no loader is found, return false\n if (!loader) {\n return false\n }\n\n // Execute the loader\n const result = await loader.exec(source)\n // If the loader failed, return false\n if (!result.ok) {\n return false\n }\n\n if (!isObject(result.data)) {\n return false\n }\n\n const addDocumentResult = await workspaceStore.addDocument({\n name,\n document: result.data,\n })\n\n if (!addDocumentResult) {\n return false\n }\n\n return true\n}\n"],"mappings":";;;;;;;;AAgBA,IAAM,8BAA4C;AAChD,QAAO;EACL,MAAM;EACN,UAAU;EACV,OAAO,WAAmB;AACxB,OAAI;IACF,MAAM,WAAW,sBAAsB,OAAO;AAE9C,QAAI,SACF,QAAO,QAAQ,QAAQ;KACrB,IAAI;KACJ,MAAM;KACN,KAAK;KACN,CAAC;AAGJ,WAAO,QAAQ,QAAQ,EACrB,IAAI,OACL,CAAC;WACI;AACN,WAAO,QAAQ,QAAQ,EACrB,IAAI,OACL,CAAC;;;EAGP;;;;;;;;;;;;;;;AAgBH,IAAa,yBAAyB,OACpC,gBACA,iBACA,MACA,cACqB;CACrB,MAAM,EAAE,QAAQ,SAAS;AACzB,KAAI,CAAC,OAEH,QAAO;AAIT,KAAI,SAAS,MACX,QAAO,MAAM,eAAe,YAAY;EACtC;EACA,KAAK;EACL,MAAM,EACJ,uBAAuB,WACxB;EACF,CAAC;AAGJ,KAAI,SAAS,OACX,QAAO,MAAM,eAAe,YAAY;EACtC;EACA,MAAM;EACP,CAAC;CAIJ,MAAM,SADU;EAAC,uBAAuB;EAAE,WAAW;EAAE,WAAW;EAAC,CAC5C,MAAM,MAAM,EAAE,SAAS,OAAO,CAAC;AAGtD,KAAI,CAAC,OACH,QAAO;CAIT,MAAM,SAAS,MAAM,OAAO,KAAK,OAAO;AAExC,KAAI,CAAC,OAAO,GACV,QAAO;AAGT,KAAI,CAAC,SAAS,OAAO,KAAK,CACxB,QAAO;AAQT,KAAI,CALsB,MAAM,eAAe,YAAY;EACzD;EACA,UAAU,OAAO;EAClB,CAAC,CAGA,QAAO;AAGT,QAAO"}

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.d.ts CHANGED Viewed

@@ -4,11 +4,11 @@ type __VLS_Props = {
     name: string | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    submit: () => any;
     cancel: () => any;
+    submit: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSubmit?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments';
 type __VLS_Props = {
     query: string;
-    environment: XScalarEnvironment;
+    environment?: XScalarEnvironment;
     dropdownPosition?: {
         left: number;
         top: number;

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EnvironmentVariablesDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"names":[],"mappings":"AA6PA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AASnH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,kBAAkB,CAAA;~~IAC/B~~,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,iFAAiF;IACjF,oBAAoB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC9D,CAAC;AAqYF,QAAA,MAAM,YAAY;gCAnQiB,IAAI,GAAG,MAAM;;;;;;;;kFAuQ9C,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"EnvironmentVariablesDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"names":[],"mappings":"AA6PA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AASnH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,iFAAiF;IACjF,oBAAoB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC9D,CAAC;AAqYF,QAAA,MAAM,YAAY;gCAnQiB,IAAI,GAAG,MAAM;;;;;;;;kFAuQ9C,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EnvironmentVariablesDropdown.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n \| { kind: 'env'; key: string; secondary: string }\n \| { kind: 'context'; key: string; secondary: string }\n\nconst {\n query,\n environment,\n dropdownPosition,\n contextFunctionItems = [],\n} = defineProps<{\n query: string\n environment: XScalarEnvironment\n dropdownPosition?: { left: number; top: number }\n /** Runtime placeholders such as `{{$guid}}`, shown with environment variables /\n contextFunctionItems?: { key: string; description: string }[]\n}>()\n\nconst emit = defineEmits<{\n (e: 'select', variable: string): void\n (e: 'redirect'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n emit('redirect')\n isOpen.value = false\n}\n\n/* Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n environment.variables.map((v) => ({\n key: v.name,\n value: typeof v.value === 'string' ? v.value : v.value.default,\n })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n contextFunctionItems.map((item) => ({\n kind: 'context',\n key: item.key,\n secondary: item.description,\n })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n normalizedVariables.value\n .filter(({ key, value }) => key !== '' \|\| value !== '')\n .map(({ key, value }) => ({\n kind: 'env' as const,\n key,\n secondary: value,\n })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n envRows.value.map((row) => ({\n ...row,\n fuseText: `${row.key} ${row.secondary}`,\n })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n contextRows.value.map((row) => ({\n ...row,\n fuseText: `${row.key} ${row.secondary}`,\n })),\n)\n\nconst fuseEnv = computed(\n () =>\n new Fuse(envFuseSource.value, {\n keys: ['fuseText'],\n threshold: 0.35,\n }),\n)\n\nconst fuseContext = computed(\n () =>\n new Fuse(contextFuseSource.value, {\n keys: ['fuseText'],\n threshold: 0.35,\n }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n const item = byKey.get(key)\n return item\n ? [\n {\n kind: 'context' as const,\n key: item.key,\n secondary: item.description,\n },\n ]\n : []\n })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n if (!query.trim()) {\n const envSlice = envRows.value.slice(-4)\n return [...envSlice, ...popularContextRows.value]\n }\n\n const q = query.trim()\n const envMatches = fuseEnv.value\n .search(q, { limit: DROPDOWN_LIMIT })\n .map((res) => {\n const { kind, key, secondary } = res.item\n return { kind, key, secondary }\n })\n\n const remaining = DROPDOWN_LIMIT - envMatches.length\n const contextMatches =\n remaining > 0\n ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n const { kind, key, secondary } = res.item\n return { kind, key, secondary }\n })\n : []\n\n return [...envMatches, ...contextMatches]\n})\n\nconst selectVariable = (variableKey: string): void => {\n emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' \| 'down') => {\n const offset = direction === 'up' ? -1 : 1\n const length = filteredVariables.value.length\n\n if (length === 0) {\n return\n }\n\n selectedVariableIndex.value =\n (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n if (selectedVariableIndex.value >= 0) {\n const selectedVariable =\n filteredVariables.value[selectedVariableIndex.value]\n if (selectedVariable) {\n selectVariable(selectedVariable.key)\n }\n }\n}\n\ndefineExpose({\n handleArrowKey,\n handleSelect,\n})\n\nonMounted(() => {\n // Reset selected index to the first item when dropdown opens\n selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n return {\n left: (dropdownPosition?.left ?? 0) + 'px',\n // Add a 5px offset from the editor\n top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n }\n})\n\nonClickOutside(\n dropdownRef,\n () => {\n isOpen.value = false\n },\n { ignore: [dropdownRef] },\n)\n</script>\n<template>\n <ScalarTeleport\n v-if=\"isOpen\"\n class=\"scalar-client\">\n <div\n ref=\"dropdownRef\"\n class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n :style=\"dropdownStyle\">\n <ul\n v-if=\"filteredVariables.length\"\n class=\"gap-1/2 flex flex-col\">\n <template\n v-for=\"(item, index) in filteredVariables\"\n :key=\"`${item.kind}-${item.key}`\">\n <li\n class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n @click=\"selectVariable(item.key)\">\n <div class=\"flex items-center gap-2 whitespace-nowrap\">\n <span\n v-if=\"item.kind === 'env'\"\n class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n :style=\"{\n backgroundColor: environment.color,\n }\" />\n <span\n v-else\n class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n fn\n </span>\n {{ item.key }}\n </div>\n <span\n class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n {{ item.secondary }}\n </span>\n </li>\n </template>\n </ul>\n <ScalarButton\n v-else\n class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n variant=\"outlined\"\n @click=\"redirectToEnvironment\">\n <ScalarIconPlus class=\"size-3\" />\n Add Variable\n </ScalarButton>\n <!-- Backdrop for the dropdown -->\n <div\n class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n </div>\n </ScalarTeleport>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"EnvironmentVariablesDropdown.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n \| { kind: 'env'; key: string; secondary: string }\n \| { kind: 'context'; key: string; secondary: string }\n\nconst {\n query,\n environment,\n dropdownPosition,\n contextFunctionItems = [],\n} = defineProps<{\n query: string\n environment?: XScalarEnvironment\n dropdownPosition?: { left: number; top: number }\n /** Runtime placeholders such as `{{$guid}}`, shown with environment variables /\n contextFunctionItems?: { key: string; description: string }[]\n}>()\n\nconst emit = defineEmits<{\n (e: 'select', variable: string): void\n (e: 'redirect'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n emit('redirect')\n isOpen.value = false\n}\n\n/* Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n (environment?.variables ?? []).map((v) => ({\n key: v.name,\n value: typeof v.value === 'string' ? v.value : v.value.default,\n })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n contextFunctionItems.map((item) => ({\n kind: 'context',\n key: item.key,\n secondary: item.description,\n })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n normalizedVariables.value\n .filter(({ key, value }) => key !== '' \|\| value !== '')\n .map(({ key, value }) => ({\n kind: 'env' as const,\n key,\n secondary: value,\n })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n envRows.value.map((row) => ({\n ...row,\n fuseText: `${row.key} ${row.secondary}`,\n })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n contextRows.value.map((row) => ({\n ...row,\n fuseText: `${row.key} ${row.secondary}`,\n })),\n)\n\nconst fuseEnv = computed(\n () =>\n new Fuse(envFuseSource.value, {\n keys: ['fuseText'],\n threshold: 0.35,\n }),\n)\n\nconst fuseContext = computed(\n () =>\n new Fuse(contextFuseSource.value, {\n keys: ['fuseText'],\n threshold: 0.35,\n }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n const item = byKey.get(key)\n return item\n ? [\n {\n kind: 'context' as const,\n key: item.key,\n secondary: item.description,\n },\n ]\n : []\n })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n if (!query.trim()) {\n const envSlice = envRows.value.slice(-4)\n return [...envSlice, ...popularContextRows.value]\n }\n\n const q = query.trim()\n const envMatches = fuseEnv.value\n .search(q, { limit: DROPDOWN_LIMIT })\n .map((res) => {\n const { kind, key, secondary } = res.item\n return { kind, key, secondary }\n })\n\n const remaining = DROPDOWN_LIMIT - envMatches.length\n const contextMatches =\n remaining > 0\n ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n const { kind, key, secondary } = res.item\n return { kind, key, secondary }\n })\n : []\n\n return [...envMatches, ...contextMatches]\n})\n\nconst selectVariable = (variableKey: string): void => {\n emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' \| 'down') => {\n const offset = direction === 'up' ? -1 : 1\n const length = filteredVariables.value.length\n\n if (length === 0) {\n return\n }\n\n selectedVariableIndex.value =\n (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n if (selectedVariableIndex.value >= 0) {\n const selectedVariable =\n filteredVariables.value[selectedVariableIndex.value]\n if (selectedVariable) {\n selectVariable(selectedVariable.key)\n }\n }\n}\n\ndefineExpose({\n handleArrowKey,\n handleSelect,\n})\n\nonMounted(() => {\n // Reset selected index to the first item when dropdown opens\n selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n return {\n left: (dropdownPosition?.left ?? 0) + 'px',\n // Add a 5px offset from the editor\n top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n }\n})\n\nonClickOutside(\n dropdownRef,\n () => {\n isOpen.value = false\n },\n { ignore: [dropdownRef] },\n)\n</script>\n<template>\n <ScalarTeleport\n v-if=\"isOpen\"\n class=\"scalar-client\">\n <div\n ref=\"dropdownRef\"\n class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n :style=\"dropdownStyle\">\n <ul\n v-if=\"filteredVariables.length\"\n class=\"gap-1/2 flex flex-col\">\n <template\n v-for=\"(item, index) in filteredVariables\"\n :key=\"`${item.kind}-${item.key}`\">\n <li\n class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n @click=\"selectVariable(item.key)\">\n <div class=\"flex items-center gap-2 whitespace-nowrap\">\n <span\n v-if=\"item.kind === 'env'\"\n class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n :style=\"{\n backgroundColor: environment?.color,\n }\" />\n <span\n v-else\n class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n fn\n </span>\n {{ item.key }}\n </div>\n <span\n class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n {{ item.secondary }}\n </span>\n </li>\n </template>\n </ul>\n <ScalarButton\n v-else\n class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n variant=\"outlined\"\n @click=\"redirectToEnvironment\">\n <ScalarIconPlus class=\"size-3\" />\n Add Variable\n </ScalarButton>\n <!-- Backdrop for the dropdown -->\n <div\n class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n </div>\n </ScalarTeleport>\n</template>\n"],"mappings":""}

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.script.js CHANGED Viewed

@@ -36,7 +36,7 @@ var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /
 			isOpen.value = false;
 		};
 		/** Normalize the variables to have a name and value */
-		const normalizedVariables = computed(() => __props.environment.variables.map((v) => ({
+		const normalizedVariables = computed(() => (__props.environment?.variables ?? []).map((v) => ({
 			key: v.name,
 			value: typeof v.value === "string" ? v.value : v.value.default
 		})));
@@ -148,7 +148,7 @@ var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /
 					}, [createElementVNode("div", _hoisted_3, [item.kind === "env" ? (openBlock(), createElementBlock("span", {
 						key: 0,
 						class: "h-2.25 w-2.25 min-w-2.25 rounded-full",
-						style: normalizeStyle({ backgroundColor: __props.environment.color })
+						style: normalizeStyle({ backgroundColor: __props.environment?.color })
 					}, null, 4)) : (openBlock(), createElementBlock("span", _hoisted_4, " fn ")), createTextVNode(" " + toDisplayString(item.key), 1)]), createElementVNode("span", _hoisted_5, toDisplayString(item.secondary), 1)], 10, _hoisted_2);
 				}), 128))])) : (openBlock(), createBlock(unref(ScalarButton), {
 					key: 1,

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n \| { kind: 'env'; key: string; secondary: string }\n \| { kind: 'context'; key: string; secondary: string }\n\nconst {\n query,\n environment,\n dropdownPosition,\n contextFunctionItems = [],\n} = defineProps<{\n query: string\n environment: XScalarEnvironment\n dropdownPosition?: { left: number; top: number }\n /** Runtime placeholders such as `{{$guid}}`, shown with environment variables /\n contextFunctionItems?: { key: string; description: string }[]\n}>()\n\nconst emit = defineEmits<{\n (e: 'select', variable: string): void\n (e: 'redirect'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n emit('redirect')\n isOpen.value = false\n}\n\n/* Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n environment.variables.map((v) => ({\n key: v.name,\n value: typeof v.value === 'string' ? v.value : v.value.default,\n })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n contextFunctionItems.map((item) => ({\n kind: 'context',\n key: item.key,\n secondary: item.description,\n })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n normalizedVariables.value\n .filter(({ key, value }) => key !== '' \|\| value !== '')\n .map(({ key, value }) => ({\n kind: 'env' as const,\n key,\n secondary: value,\n })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n envRows.value.map((row) => ({\n ...row,\n fuseText: `${row.key} ${row.secondary}`,\n })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n contextRows.value.map((row) => ({\n ...row,\n fuseText: `${row.key} ${row.secondary}`,\n })),\n)\n\nconst fuseEnv = computed(\n () =>\n new Fuse(envFuseSource.value, {\n keys: ['fuseText'],\n threshold: 0.35,\n }),\n)\n\nconst fuseContext = computed(\n () =>\n new Fuse(contextFuseSource.value, {\n keys: ['fuseText'],\n threshold: 0.35,\n }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n const item = byKey.get(key)\n return item\n ? [\n {\n kind: 'context' as const,\n key: item.key,\n secondary: item.description,\n },\n ]\n : []\n })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n if (!query.trim()) {\n const envSlice = envRows.value.slice(-4)\n return [...envSlice, ...popularContextRows.value]\n }\n\n const q = query.trim()\n const envMatches = fuseEnv.value\n .search(q, { limit: DROPDOWN_LIMIT })\n .map((res) => {\n const { kind, key, secondary } = res.item\n return { kind, key, secondary }\n })\n\n const remaining = DROPDOWN_LIMIT - envMatches.length\n const contextMatches =\n remaining > 0\n ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n const { kind, key, secondary } = res.item\n return { kind, key, secondary }\n })\n : []\n\n return [...envMatches, ...contextMatches]\n})\n\nconst selectVariable = (variableKey: string): void => {\n emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' \| 'down') => {\n const offset = direction === 'up' ? -1 : 1\n const length = filteredVariables.value.length\n\n if (length === 0) {\n return\n }\n\n selectedVariableIndex.value =\n (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n if (selectedVariableIndex.value >= 0) {\n const selectedVariable =\n filteredVariables.value[selectedVariableIndex.value]\n if (selectedVariable) {\n selectVariable(selectedVariable.key)\n }\n }\n}\n\ndefineExpose({\n handleArrowKey,\n handleSelect,\n})\n\nonMounted(() => {\n // Reset selected index to the first item when dropdown opens\n selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n return {\n left: (dropdownPosition?.left ?? 0) + 'px',\n // Add a 5px offset from the editor\n top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n }\n})\n\nonClickOutside(\n dropdownRef,\n () => {\n isOpen.value = false\n },\n { ignore: [dropdownRef] },\n)\n</script>\n<template>\n <ScalarTeleport\n v-if=\"isOpen\"\n class=\"scalar-client\">\n <div\n ref=\"dropdownRef\"\n class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n :style=\"dropdownStyle\">\n <ul\n v-if=\"filteredVariables.length\"\n class=\"gap-1/2 flex flex-col\">\n <template\n v-for=\"(item, index) in filteredVariables\"\n :key=\"`${item.kind}-${item.key}`\">\n <li\n class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n @click=\"selectVariable(item.key)\">\n <div class=\"flex items-center gap-2 whitespace-nowrap\">\n <span\n v-if=\"item.kind === 'env'\"\n class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n :style=\"{\n backgroundColor: environment.color,\n }\" />\n <span\n v-else\n class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n fn\n </span>\n {{ item.key }}\n </div>\n <span\n class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n {{ item.secondary }}\n </span>\n </li>\n </template>\n </ul>\n <ScalarButton\n v-else\n class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n variant=\"outlined\"\n @click=\"redirectToEnvironment\">\n <ScalarIconPlus class=\"size-3\" />\n Add Variable\n </ScalarButton>\n <!-- Backdrop for the dropdown -->\n <div\n class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n </div>\n </ScalarTeleport>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n \| { kind: 'env'; key: string; secondary: string }\n \| { kind: 'context'; key: string; secondary: string }\n\nconst {\n query,\n environment,\n dropdownPosition,\n contextFunctionItems = [],\n} = defineProps<{\n query: string\n environment?: XScalarEnvironment\n dropdownPosition?: { left: number; top: number }\n /** Runtime placeholders such as `{{$guid}}`, shown with environment variables /\n contextFunctionItems?: { key: string; description: string }[]\n}>()\n\nconst emit = defineEmits<{\n (e: 'select', variable: string): void\n (e: 'redirect'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n emit('redirect')\n isOpen.value = false\n}\n\n/* Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n (environment?.variables ?? []).map((v) => ({\n key: v.name,\n value: typeof v.value === 'string' ? v.value : v.value.default,\n })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n contextFunctionItems.map((item) => ({\n kind: 'context',\n key: item.key,\n secondary: item.description,\n })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n normalizedVariables.value\n .filter(({ key, value }) => key !== '' \|\| value !== '')\n .map(({ key, value }) => ({\n kind: 'env' as const,\n key,\n secondary: value,\n })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n envRows.value.map((row) => ({\n ...row,\n fuseText: `${row.key} ${row.secondary}`,\n })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n contextRows.value.map((row) => ({\n ...row,\n fuseText: `${row.key} ${row.secondary}`,\n })),\n)\n\nconst fuseEnv = computed(\n () =>\n new Fuse(envFuseSource.value, {\n keys: ['fuseText'],\n threshold: 0.35,\n }),\n)\n\nconst fuseContext = computed(\n () =>\n new Fuse(contextFuseSource.value, {\n keys: ['fuseText'],\n threshold: 0.35,\n }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n const item = byKey.get(key)\n return item\n ? [\n {\n kind: 'context' as const,\n key: item.key,\n secondary: item.description,\n },\n ]\n : []\n })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n if (!query.trim()) {\n const envSlice = envRows.value.slice(-4)\n return [...envSlice, ...popularContextRows.value]\n }\n\n const q = query.trim()\n const envMatches = fuseEnv.value\n .search(q, { limit: DROPDOWN_LIMIT })\n .map((res) => {\n const { kind, key, secondary } = res.item\n return { kind, key, secondary }\n })\n\n const remaining = DROPDOWN_LIMIT - envMatches.length\n const contextMatches =\n remaining > 0\n ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n const { kind, key, secondary } = res.item\n return { kind, key, secondary }\n })\n : []\n\n return [...envMatches, ...contextMatches]\n})\n\nconst selectVariable = (variableKey: string): void => {\n emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' \| 'down') => {\n const offset = direction === 'up' ? -1 : 1\n const length = filteredVariables.value.length\n\n if (length === 0) {\n return\n }\n\n selectedVariableIndex.value =\n (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n if (selectedVariableIndex.value >= 0) {\n const selectedVariable =\n filteredVariables.value[selectedVariableIndex.value]\n if (selectedVariable) {\n selectVariable(selectedVariable.key)\n }\n }\n}\n\ndefineExpose({\n handleArrowKey,\n handleSelect,\n})\n\nonMounted(() => {\n // Reset selected index to the first item when dropdown opens\n selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n return {\n left: (dropdownPosition?.left ?? 0) + 'px',\n // Add a 5px offset from the editor\n top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n }\n})\n\nonClickOutside(\n dropdownRef,\n () => {\n isOpen.value = false\n },\n { ignore: [dropdownRef] },\n)\n</script>\n<template>\n <ScalarTeleport\n v-if=\"isOpen\"\n class=\"scalar-client\">\n <div\n ref=\"dropdownRef\"\n class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n :style=\"dropdownStyle\">\n <ul\n v-if=\"filteredVariables.length\"\n class=\"gap-1/2 flex flex-col\">\n <template\n v-for=\"(item, index) in filteredVariables\"\n :key=\"`${item.kind}-${item.key}`\">\n <li\n class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n @click=\"selectVariable(item.key)\">\n <div class=\"flex items-center gap-2 whitespace-nowrap\">\n <span\n v-if=\"item.kind === 'env'\"\n class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n :style=\"{\n backgroundColor: environment?.color,\n }\" />\n <span\n v-else\n class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n fn\n </span>\n {{ item.key }}\n </div>\n <span\n class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n {{ item.secondary }}\n </span>\n </li>\n </template>\n </ul>\n <ScalarButton\n v-else\n class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n variant=\"outlined\"\n @click=\"redirectToEnvironment\">\n <ScalarIconPlus class=\"size-3\" />\n Add Variable\n </ScalarButton>\n <!-- Backdrop for the dropdown -->\n <div\n class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n </div>\n </ScalarTeleport>\n</template>\n"],"mappings":"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"}

package/dist/v2/features/global-cookies/components/CookiesTable.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CookiesTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/global-cookies/components/CookiesTable.vue"],"names":[],"mappings":"~~AAuPA~~,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AAYxG,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;~~AA8erB~~,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"CookiesTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/global-cookies/components/CookiesTable.vue"],"names":[],"mappings":"AAyPA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AAYxG,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAkfrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import CookiesTable_vue_vue_type_script_setup_true_lang_default from "./CookiesTable.vue.script.js";
 /* empty css                           */
 //#region src/v2/features/global-cookies/components/CookiesTable.vue
-var CookiesTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CookiesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ddfccc08"]]);
+var CookiesTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CookiesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2f13118d"]]);
 //#endregion
 export { CookiesTable_default as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CookiesTable.vue.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":""}
1	+ {"version":3,"file":"CookiesTable.vue.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 disableCloseBrackets\n disableTabIndent\n :environment=\"undefined\"\n lineWrapping\n :modelValue=\"row.value\"\n placeholder=\"Value\"\n withFakeData\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":""}

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

@@ -136,11 +136,13 @@ var CookiesTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 							createVNode(unref(DataTableCell_default), null, {
 								default: withCtx(() => [createVNode(unref(CodeInput_default), {
 									"aria-label": "Cookie Value",
+									disableCloseBrackets: "",
 									disableTabIndent: "",
 									environment: void 0,
 									lineWrapping: "",
 									modelValue: row.value,
 									placeholder: "Value",
+									withFakeData: "",
 									"onUpdate:modelValue": (value) => handleCookieChange(row.name, value, row.domain, row.isDisabled, index)
 								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
 								_: 2

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

	@@ -1 +1 @@
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":";;;;;;;;;;;;;;;;;;;EA2BA,MAAM,UAAU;GAAC;GAAQ;GAAO;GAAO;GAAO;GAAM;;EAGpD,MAAM,cAAc,eAOZ;;GAEN,MAAM,aAAa,QAAA,QAAQ,KAAK,YAAY;IAC1C,MAAM,OAAO;IACb,OAAO,OAAO;IACd,QAAQ,OAAO,UAAU;IACzB,YAAY,OAAO,cAAc;IAClC,EAAC;GAEF,MAAM,aAAa,QAAA,QAAQ,GAAG,GAAE;GAChC,MAAM,sBACJ,eACC,WAAW,SAAS,MACnB,WAAW,UAAU,MACrB,WAAW,WAAW;AAG1B,OAAI,CAAC,cAAc,oBACjB,QAAO,CACL,GAAG,YACH;IAAE,MAAM;IAAI,OAAO;IAAI,QAAQ;IAAI,YAAY;IAAM,CACvD;AAGF,UAAO;IACR;;EAGD,MAAM,sBACJ,MACA,OACA,QACA,YACA,UACS;GACT,MAAM,cAAc,SAAS,QAAA,QAAQ;;;;;AAMrC,OAAI,CAAC,QAAQ,YACX;AAIF,OAAI,SAAS,QAAA,QAAQ,QAAQ;AAC3B,YAAA,SAAS,KAAK,wBAAwB;KACpC,SAAS;MAAE;MAAM;MAAO;MAAQ,YAAY;MAAO;KACnD,gBAAa,QAAA;KACd,CAAA;AACD;;AAIF,WAAA,SAAS,KAAK,wBAAwB;IACpC,SAAS;KAAE;KAAM;KAAO;KAAQ;KAAY;IAC5C,gBAAa,QAAA;IACb;IACD,CAAA;;;EAIH,MAAM,sBAAsB,UAC1B,QAAA,SAAS,KAAK,wBAAwB;GACpC,YAAY,QAAA,QAAQ,QAAQ,QAAQ;GACpC;GACA,gBAAa,QAAA;GACd,CAAA;;uBAID,~~YAuGY~~,MAAA,kBAAA,EAAA;~~IAtGV~~,OAAM;IACL,SAAS;;2BAQK,CANf,YAMe,MAAA,qBAAA,EAAA,EAND,OAAM,kBAAgB,EAAA;4BACQ;MAA1C,YAA0C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAP,WAAO,GAAA,CAAA,EAAA,CAAA;;;MACxB,YAAuC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA;;;MACrB,YAAwC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAL,SAAK,GAAA,CAAA,EAAA,CAAA;;;MACtB,YAAyC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAN,UAAM,GAAA,CAAA,EAAA,CAAA;;;MACvB,YAA0C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAP,WAAO,GAAA,CAAA,EAAA,CAAA;;;;;0BAI1B,~~mBAyFe~~,UAAA,MAAA,~~WAxFU~~,YAAA,QAAf,KAAK,UAAK;yBADpB,~~YAyFe~~,MAAA,qBAAA,EAAA;~~MAvFZ~~,KAAK;MACN,OAAM;;6BAQA;OANN,YAMM,MAAA,0BAAA,EAAA;QALJ,OAAM;QACL,YAAU,CAAG,IAAI;QACjB,wBAA+B,UAAsB,mBAAmB,IAAI,MAAM,IAAI,OAAO,IAAI,QAAM,CAAG,OAAO,MAAK;;OAMzH,YAmBgB,MAAA,sBAAA,EAAA,MAAA;+BADR,CAjBN,YAiBM,MAAA,kBAAA,EAAA;SAhBJ,cAAW;SACX,sBAAA;SACA,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;SACX,wBAAiC,SAAuB,mBAAoC,MAAsB,IAAI,OAAuB,IAAI,QAAwB,IAAI,YAA4B,MAAA;;;;OAa9M,~~YAkBgB~~,MAAA,sBAAA,EAAA,MAAA;+BADR,~~CAhBN~~,~~YAgBM~~,MAAA,kBAAA,EAAA;~~SAfJ~~,cAAW;SACX,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;~~SACX~~,wBAAiC,UAAwB,mBAAoC,IAAI,MAAsB,OAAuB,IAAI,QAAwB,IAAI,YAA4B,MAAA;;;;OAa/M,YAmBgB,MAAA,sBAAA,EAAA,MAAA;+BADR,CAjBN,YAiBM,MAAA,kBAAA,EAAA;SAhBJ,cAAW;SACX,sBAAA;SACA,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;SACX,wBAAiC,WAAyB,mBAAoC,IAAI,MAAsB,IAAI,OAAuB,QAAwB,IAAI,YAA4B,MAAA;;;;OAahN,YASgB,MAAA,sBAAA,EAAA,EATD,OAAM,oCAAkC,EAAA;+BAQtC,CANP,QAAQ,QAAA,QAAQ,UAAA,WAAA,EADxB,YAOe,MAAA,aAAA,EAAA;;SALb,OAAM;SACN,MAAK;SACL,SAAQ;SACP,UAAK,WAAE,mBAAmB,MAAK;;gCACI,CAApC,YAAoC,MAAA,gBAAA,EAAA,EAAnB,OAAM,YAAU,CAAA,CAAA,CAAA"}
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 disableCloseBrackets\n disableTabIndent\n :environment=\"undefined\"\n lineWrapping\n :modelValue=\"row.value\"\n placeholder=\"Value\"\n withFakeData\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/modal/Modal.vue.d.ts CHANGED Viewed

@@ -1,13 +1,14 @@
 import { type ModalState } from '@scalar/components';
 import type { HttpMethod } from '@scalar/helpers/http/http-methods';
 import type { ClientPlugin } from '@scalar/oas-utils/helpers';
-import type { ApiReferenceConfigurationRaw } from '@scalar/types/api-reference';
 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, type Ref } from 'vue';
-import type { ApiClientModalOptionsRef } from '../../../v2/features/modal/helpers/types';
+import { type ComputedRef, type Ref } from 'vue';
 import { type UseModalSidebarReturn } from '../../../v2/features/modal/hooks/use-modal-sidebar.js';
+import type { ApiClientOptionsRef } from '../../../v2/types/options';
+import type { MaybeRefOrGetter } from 'vue';
+import type { ApiClientOptions } from '../../../v2/types/options';
 export type ModalProps = {
     /** The workspace store must be initialized and passed in */
     workspaceStore: WorkspaceStore;
@@ -30,7 +31,7 @@ export type ModalProps = {
     /** Api client plugins to include in the modal */
     plugins: ClientPlugin[];
     /** Subset of the configuration options for the modal */
-    options: MaybeRefOrGetter<Partial<Pick<ApiReferenceConfigurationRaw, 'authentication' | 'baseServerURL' | 'hideClientButton' | 'hiddenClients' | 'oauth2RedirectUri' | 'servers'>>>;
+    options: MaybeRefOrGetter<ApiClientOptions>;
 };
 /**
  * Scalar Api Client Modal
@@ -40,11 +41,11 @@ export type ModalProps = {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<Omit<ModalProps, "options"> & {
-    options: ApiClientModalOptionsRef;
+    options: ApiClientOptionsRef;
 }, {
     sidebarWidth: ComputedRef<number>;
     environment: ComputedRef<import("@scalar/workspace-store/schemas/extensions/document/x-scalar-environments").XScalarEnvironment>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Omit<ModalProps, "options"> & {
-    options: ApiClientModalOptionsRef;
+    options: ApiClientOptionsRef;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=Modal.vue.d.ts.map

package/dist/v2/features/modal/Modal.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/Modal.vue"],"names":[],"mappings":"~~AAyNA~~,OAAO,EAAE,KAAK,UAAU,EAA4B,MAAM,oBAAoB,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;~~AAC7D~~,OAAO,KAAK,EAAE,~~4BAA4B,EAAE,MAAM,6BAA6B,CAAA;AAE/E,OAAO,KAAK,EAAE,~~cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,~~gBAAgB,EACrB,KAAK,~~GAAG,EACT,MAAM,KAAK,CAAA;AAIZ,OAAO,KAAK,EAAE,~~wBAAwB~~,EAAE,MAAM,~~mCAAmC~~,CAAA;~~AACjF~~,OAAO,EAAE,KAAK,~~qBAAqB~~,EAAE,MAAM,~~6CAA6C~~,CAAA;~~AAOxF~~,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;IAC9B,qDAAqD;IACrD,QAAQ,EAAE,WAAW,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IAC/C,iDAAiD;IACjD,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,4CAA4C;IAC5C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,mDAAmD;IACnD,MAAM,EAAE,WAAW,CAAC,UAAU,GAAG,SAAS,CAAC,CAAA;IAC3C,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,sEAAsE;IACtE,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,2CAA2C;IAC3C,UAAU,EAAE,UAAU,CAAA;IACtB,0DAA0D;IAC1D,YAAY,EAAE,qBAAqB,CAAA;IACnC,iDAAiD;IACjD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wDAAwD;IACxD,OAAO,EAAE,gBAAgB,~~CACvB~~,~~OAAO,CACL,IAAI,CACF,4BAA4B,EAC1B,~~gBAAgB,~~GAChB~~,~~eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,SAAS,CACZ,CACF,CACF,~~CAAA;~~CACF~~,CAAA;AAED;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAC0C,~~wBAAwB~~;;;;;~~aAAxB~~,~~wBAAwB~~;~~iGAwQhF~~,CAAC"}
1	+ {"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/Modal.vue"],"names":[],"mappings":"AA+MA,OAAO,EAAE,KAAK,UAAU,EAA4B,MAAM,oBAAoB,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,GAAG,EACT,MAAM,KAAK,CAAA;AAIZ,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAKxF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAG7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;IAC9B,qDAAqD;IACrD,QAAQ,EAAE,WAAW,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IAC/C,iDAAiD;IACjD,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,4CAA4C;IAC5C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,mDAAmD;IACnD,MAAM,EAAE,WAAW,CAAC,UAAU,GAAG,SAAS,CAAC,CAAA;IAC3C,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,sEAAsE;IACtE,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,2CAA2C;IAC3C,UAAU,EAAE,UAAU,CAAA;IACtB,0DAA0D;IAC1D,YAAY,EAAE,qBAAqB,CAAA;IACnC,iDAAiD;IACjD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wDAAwD;IACxD,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC5C,CAAA;AAED;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAC0C,mBAAmB;;;;;aAAnB,mBAAmB;iGAwQ3E,CAAC"}

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

	@@ -1 +1 @@
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 /* Selected anyOf/oneOf request-body variants keyed by schema path /\n requestBodyCompositionSelection: Ref<Record<string, number>>\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 \| 'oauth2RedirectUri'\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 { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n computed,\n onBeforeUnmount,\n ref,\n watch,\n type ComputedRef,\n type ~~MaybeRefOrGetter,\n type~~ Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport ~~type~~ { ~~ApiClientModalOptionsRef } from '@/v2/features/modal/helpers/types'\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 { 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 requestBodyCompositionSelection,\n sidebarState,\n workspaceStore,\n} = defineProps<\n Omit<ModalProps, 'options'> & { options: ~~ApiClientModalOptionsRef~~ }\n>()\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 requestBodyCompositionSelection,\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).environment,\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 :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\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":""}
1	+ {"version":3,"file":"Modal.vue.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport type { ApiClientOptions } from '@/v2/types/options'\n\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 /* Selected anyOf/oneOf request-body variants keyed by schema path /\n requestBodyCompositionSelection: Ref<Record<string, number>>\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<ApiClientOptions>\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 { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n computed,\n onBeforeUnmount,\n ref,\n watch,\n type ComputedRef,\n type Ref,\n} from 'vue'\n\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 { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n document,\n eventBus,\n modalState,\n options,\n plugins,\n requestBodyCompositionSelection,\n sidebarState,\n workspaceStore,\n} = defineProps<\n Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\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 requestBodyCompositionSelection,\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).environment,\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 :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\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.map CHANGED Viewed

	@@ -1 +1 @@
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 /* Selected anyOf/oneOf request-body variants keyed by schema path /\n requestBodyCompositionSelection: Ref<Record<string, number>>\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 \| 'oauth2RedirectUri'\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 { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n computed,\n onBeforeUnmount,\n ref,\n watch,\n type ComputedRef,\n type ~~MaybeRefOrGetter,\n type~~ Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport ~~type~~ { ~~ApiClientModalOptionsRef } from '@/v2/features/modal/helpers/types'\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 { 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 requestBodyCompositionSelection,\n sidebarState,\n workspaceStore,\n} = defineProps<\n Omit<ModalProps, 'options'> & { options: ~~ApiClientModalOptionsRef~~ }\n>()\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 requestBodyCompositionSelection,\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).environment,\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 :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAwFA~~,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;GACN;;EAGA,MAAM,gBAAgB,IAAI,MAAK;;AAG/B,wBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,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,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,MAAM,CAAC,YAC7D;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,iCAAiC,QAAA,gCAAgC;MACjE,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"}
1	+ {"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport type { ApiClientOptions } from '@/v2/types/options'\n\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 /* Selected anyOf/oneOf request-body variants keyed by schema path /\n requestBodyCompositionSelection: Ref<Record<string, number>>\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<ApiClientOptions>\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 { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n computed,\n onBeforeUnmount,\n ref,\n watch,\n type ComputedRef,\n type Ref,\n} from 'vue'\n\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 { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n document,\n eventBus,\n modalState,\n options,\n plugins,\n requestBodyCompositionSelection,\n sidebarState,\n workspaceStore,\n} = defineProps<\n Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\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 requestBodyCompositionSelection,\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).environment,\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 :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;GACN;;EAGA,MAAM,gBAAgB,IAAI,MAAK;;AAG/B,wBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,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,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,MAAM,CAAC,YAC7D;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,iCAAiC,QAAA,gCAAgC;MACjE,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 CHANGED Viewed

@@ -4,8 +4,8 @@ import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 import { type App, type MaybeRefOrGetter } from 'vue';
 import { type RoutePayload } from '../../../../v2/features/modal/helpers/resolve-route-parameters.js';
-import type { ApiClientModalOptions } from '../../../../v2/features/modal/helpers/types';
-type CreateApiClientModalOptions = {
+import type { ApiClientOptions } from '../../../../v2/types/options';
+type CreateApiClientOptions = {
     /** Element to mount the client modal to. */
     el: HTMLElement | null;
     /**
@@ -20,14 +20,14 @@ type CreateApiClientModalOptions = {
     /** Api client plugins to include in the modal */
     plugins?: ClientPlugin[];
     /** Subset of the configuration options for the modal, if you want it to be reactive ensure its a ref */
-    options?: MaybeRefOrGetter<ApiClientModalOptions>;
+    options?: MaybeRefOrGetter<ApiClientOptions>;
 };
 export type ApiClientModal = {
     app: App;
     open: (payload?: RoutePayload) => void;
     mount: (mountingEl: HTMLElement | null) => void;
     route: (payload: RoutePayload) => void;
-    updateOptions: (nextOptions: ApiClientModalOptions, overwrite?: boolean) => void;
+    updateOptions: (nextOptions: ApiClientOptions, overwrite?: boolean) => void;
     modalState: ModalState;
 };
 /**
@@ -36,6 +36,6 @@ export type ApiClientModal = {
  * The modal does not require a router. Instead, navigation is handled by setting
  * active entities directly through the returned `route` function.
  */
-export declare const createApiClientModal: ({ el, eventBus, mountOnInitialize, plugins, workspaceStore, options, }: CreateApiClientModalOptions) => ApiClientModal;
+export declare const createApiClientModal: ({ el, eventBus, mountOnInitialize, plugins, workspaceStore, options, }: CreateApiClientOptions) => ApiClientModal;
 export {};
 //# sourceMappingURL=create-api-client-modal.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"create-api-client-modal.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAY,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,gCAAgC,CAAA;AAChG,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,gBAAgB,EAA6D,MAAM,KAAK,CAAA;AAEhH,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,sDAAsD,CAAA;AAC7D,OAAO,KAAK,EAAE,~~qBAAqB~~,~~EAA4B~~,MAAM,~~mCAAmC~~,CAAA;~~AAIxG~~,KAAK,~~2BAA2B~~,GAAG;~~IACjC~~,4CAA4C;IAC5C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAA;IAC9B,iDAAiD;IACjD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,wGAAwG;IACxG,OAAO,CAAC,EAAE,gBAAgB,CAAC,~~qBAAqB~~,CAAC,CAAA;~~CAClD~~,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,aAAa,EAAE,CAAC,WAAW,EAAE,~~qBAAqB~~,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;~~IAChF~~,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,wEASlC,~~2BAA2B~~,KAAG,~~cA2HhC~~,CAAA"}
1	+ {"version":3,"file":"create-api-client-modal.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAY,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,gCAAgC,CAAA;AAChG,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,gBAAgB,EAA6D,MAAM,KAAK,CAAA;AAEhH,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,sDAAsD,CAAA;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAuB,MAAM,oBAAoB,CAAA;AAI/E,KAAK,sBAAsB,GAAG;IAC5B,4CAA4C;IAC5C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAA;IAC9B,iDAAiD;IACjD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,wGAAwG;IACxG,OAAO,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC7C,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,aAAa,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3E,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,wEASlC,sBAAsB,KAAG,cAiJ3B,CAAA"}

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

@@ -61,6 +61,17 @@ var createApiClientModal = ({ el, eventBus = createWorkspaceEventBus({ debug: fa
 	const handleModalClose = () => {
 		requestBodyCompositionSelection.value = {};
 	};
+	/** Initialize plugins and subscribe to event bus events */
+	const pluginUnsubscribes = [];
+	for (const plugin of plugins) {
+		plugin.lifecycle?.onInit?.();
+		if (plugin.on) for (const [event, handler] of Object.entries(plugin.on)) pluginUnsubscribes.push(eventBus.on(event, handler));
+	}
+	/** Clean up plugin lifecycle and event bus subscriptions when the app is unmounted */
+	app.onUnmount(() => {
+		for (const unsub of pluginUnsubscribes) unsub();
+		for (const plugin of plugins) plugin.lifecycle?.onDestroy?.();
+	});
 	watch(() => modalState.open, (open) => open ? null : handleModalClose());
 	watch(() => toValue(optionsRef).proxyUrl, (newProxyUrl) => workspaceStore.update("x-scalar-active-proxy", newProxyUrl), { immediate: true });
 	app.config.idPrefix = "scalar-client";

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

	@@ -1 +1 @@
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 App, type MaybeRefOrGetter, computed, createApp, isRef, reactive, ref, toValue, watch } from 'vue'\n\nimport {\n type DefaultEntities,\n type RoutePayload,\n resolveRouteParameters,\n} from '@/v2/features/modal/helpers/resolve-route-parameters'\nimport type { ~~ApiClientModalOptions~~, ~~ApiClientModalOptionsRef~~ } from '@/v2/~~features~~/~~modal/helpers/types~~'\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?: MaybeRefOrGetter<~~ApiClientModalOptions~~>\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 updateOptions: (nextOptions: ~~ApiClientModalOptions~~, overwrite?: boolean) => 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 requestBodyCompositionSelection = ref<Record<string, number>>({})\n\n /* This is to ensure that the options are a ref if they are not already, useful for react /\n const optionsRef = (isRef(options) ? options : ref(toValue(options))) as ~~ApiClientModalOptionsRef~~\n\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 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 requestBodyCompositionSelection,\n sidebarState,\n workspaceStore,\n options: optionsRef,\n } satisfies ModalProps)\n\n /* Restore the workspace store when the modal is closed. /\n const handleModalClose = () => {\n requestBodyCompositionSelection.value = {}\n }\n\n watch(\n () => modalState.open,\n (open) => (open ? null : handleModalClose()),\n )\n\n // Update the active proxy when the proxyUrl changes\n watch(\n () => toValue(optionsRef).proxyUrl,\n (newProxyUrl) => workspaceStore.update('x-scalar-active-proxy', newProxyUrl),\n { immediate: true },\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 Merge new options into the current modal options.\n \n @param newOptions - The new options to merge into the current modal options.\n * @param overwrite - Whether to overwrite the current modal options with the new options. If false, the new options will be merged with the current options.\n */\n updateOptions: (newOptions: ~~ApiClientModalOptions~~, overwrite = false): void => {\n optionsRef.value = overwrite\n ? newOptions\n : {\n ...optionsRef.value,\n ...newOptions,\n }\n },\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,kCAAkC,IAA4B,EAAE,CAAC;;CAGvE,MAAM,aAAc,MAAM,QAAQ,GAAG,UAAU,IAAI,QAAQ,QAAQ,CAAC;CAEpE,MAAM,kBAAmC;EACvC,MAAM;EACN,QAAQ;EACR,SAAS;EACT,cAAc,eAAe,UAAU,+BAA+B;EACvE;CAED,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;EACA,SAAS;EACV,CAAsB;;CAGvB,MAAM,yBAAyB;AAC7B,kCAAgC,QAAQ,EAAE~~;;AAG5C~~,aACQ,WAAW,OAChB,SAAU,OAAO,OAAO,kBAAkB,CAC5C;AAGD,aACQ,QAAQ,WAAW,CAAC,WACzB,gBAAgB,eAAe,OAAO,yBAAyB,YAAY,EAC5E,EAAE,WAAW,MAAM,CACpB;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;EAOA,gBAAgB,~~YAAmC~~,YAAY,UAAgB;~~AAC7E~~,cAAW,QAAQ,YACf,aACA;IACE,GAAG,WAAW;IACd,GAAG;IACJ;;EAER"}
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 App, type MaybeRefOrGetter, computed, createApp, isRef, reactive, ref, toValue, watch } from 'vue'\n\nimport {\n type DefaultEntities,\n type RoutePayload,\n resolveRouteParameters,\n} from '@/v2/features/modal/helpers/resolve-route-parameters'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\nimport { useModalSidebar } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport Modal, { type ModalProps } from '@/v2/features/modal/Modal.vue'\n\ntype CreateApiClientOptions = {\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?: MaybeRefOrGetter<ApiClientOptions>\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 updateOptions: (nextOptions: ApiClientOptions, overwrite?: boolean) => 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}: CreateApiClientOptions): ApiClientModal => {\n const requestBodyCompositionSelection = ref<Record<string, number>>({})\n\n /* This is to ensure that the options are a ref if they are not already, useful for react /\n const optionsRef = (isRef(options) ? options : ref(toValue(options))) as ApiClientOptionsRef\n\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 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 requestBodyCompositionSelection,\n sidebarState,\n workspaceStore,\n options: optionsRef,\n } satisfies ModalProps)\n\n /* Restore the workspace store when the modal is closed. /\n const handleModalClose = () => {\n requestBodyCompositionSelection.value = {}\n }\n\n /* Initialize plugins and subscribe to event bus events /\n const pluginUnsubscribes: (() => void)[] = []\n for (const plugin of plugins) {\n plugin.lifecycle?.onInit?.()\n\n if (plugin.on) {\n for (const [event, handler] of Object.entries(plugin.on)) {\n pluginUnsubscribes.push(eventBus.on(event as any, handler as any))\n }\n }\n }\n\n /* Clean up plugin lifecycle and event bus subscriptions when the app is unmounted /\n app.onUnmount(() => {\n for (const unsub of pluginUnsubscribes) {\n unsub()\n }\n for (const plugin of plugins) {\n plugin.lifecycle?.onDestroy?.()\n }\n })\n\n watch(\n () => modalState.open,\n (open) => (open ? null : handleModalClose()),\n )\n\n // Update the active proxy when the proxyUrl changes\n watch(\n () => toValue(optionsRef).proxyUrl,\n (newProxyUrl) => workspaceStore.update('x-scalar-active-proxy', newProxyUrl),\n { immediate: true },\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 Merge new options into the current modal options.\n \n @param newOptions - The new options to merge into the current modal options.\n * @param overwrite - Whether to overwrite the current modal options with the new options. If false, the new options will be merged with the current options.\n */\n updateOptions: (newOptions: ApiClientOptions, overwrite = false): void => {\n optionsRef.value = overwrite\n ? newOptions\n : {\n ...optionsRef.value,\n ...newOptions,\n }\n },\n }\n}\n"],"mappings":";;;;;;;;;;;;;AAgDA,IAAa,wBAAwB,EACnC,IACA,WAAW,wBAAwB,EACjC,OAAA,OACD,CAAC,EACF,oBAAoB,MACpB,UAAU,EAAE,EACZ,gBACA,UAAU,EAAE,OACgC;CAC5C,MAAM,kCAAkC,IAA4B,EAAE,CAAC;;CAGvE,MAAM,aAAc,MAAM,QAAQ,GAAG,UAAU,IAAI,QAAQ,QAAQ,CAAC;CAEpE,MAAM,kBAAmC;EACvC,MAAM;EACN,QAAQ;EACR,SAAS;EACT,cAAc,eAAe,UAAU,+BAA+B;EACvE;CAED,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;EACA,SAAS;EACV,CAAsB;;CAGvB,MAAM,yBAAyB;AAC7B,kCAAgC,QAAQ,EAAE;;;CAI5C,MAAM,qBAAqC,EAAE;AAC7C,MAAK,MAAM,UAAU,SAAS;AAC5B,SAAO,WAAW,UAAU;AAE5B,MAAI,OAAO,GACT,MAAK,MAAM,CAAC,OAAO,YAAY,OAAO,QAAQ,OAAO,GAAG,CACtD,oBAAmB,KAAK,SAAS,GAAG,OAAc,QAAe,CAAC;;;AAMxE,KAAI,gBAAgB;AAClB,OAAK,MAAM,SAAS,mBAClB,QAAO;AAET,OAAK,MAAM,UAAU,QACnB,QAAO,WAAW,aAAa;GAEjC;AAEF,aACQ,WAAW,OAChB,SAAU,OAAO,OAAO,kBAAkB,CAC5C;AAGD,aACQ,QAAQ,WAAW,CAAC,WACzB,gBAAgB,eAAe,OAAO,yBAAyB,YAAY,EAC5E,EAAE,WAAW,MAAM,CACpB;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;EAOA,gBAAgB,YAA8B,YAAY,UAAgB;AACxE,cAAW,QAAQ,YACf,aACA;IACE,GAAG,WAAW;IACd,GAAG;IACJ;;EAER"}

package/dist/v2/features/modal/helpers/types.d.ts CHANGED Viewed

@@ -1,8 +1,2 @@
-import type { ApiReferenceConfigurationRaw } from '@scalar/types/api-reference';
-import type { Ref } from 'vue';
-/**
- * Configuration options supported by the API Client modal constructor.
- */
-export type ApiClientModalOptions = Partial<Pick<ApiReferenceConfigurationRaw, 'authentication' | 'baseServerURL' | 'hideClientButton' | 'hiddenClients' | 'oauth2RedirectUri' | 'proxyUrl' | 'servers'>>;
-export type ApiClientModalOptionsRef = Ref<ApiClientModalOptions>;
+export type { ApiClientOptions, ApiClientOptionsRef } from '../../../../v2/types/options';
 //# sourceMappingURL=types.d.ts.map

package/dist/v2/features/modal/helpers/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/types.ts"],"names":[],"mappings":"AAAA,~~OAAO~~,~~KAAK,~~EAAE,~~4BAA4B~~,EAAE,~~MAAM~~,~~6BAA6B,CAAA;AAC/E,OAAO,KAAK,~~EAAE,~~GAAG,EAAE,~~MAAM,~~KAAK~~,CAAA;AAE9B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,IAAI,CACF,4BAA4B,EAC1B,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,UAAU,GACV,SAAS,CACZ,CACF,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,GAAG,CAAC,qBAAqB,CAAC,CAAA"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA"}