npm - @scalar/api-client - Versions diffs - 3.5.1 → 3.6.0 - Mend

@scalar/api-client 3.5.1 → 3.6.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 (113) hide show

package/dist/styles/tailwind.config.css ADDED Viewed

@@ -0,0 +1,20 @@
+/**
+ * API Client Tailwind Configuration
+ *
+ * This file can be imported into other projects using Tailwind to
+ * generate the appropriate Tailwind utilities for the API client.
+ */
+/* Dependency Tailwind Configurations */
+@import "@scalar/components/tailwind.config.css";
+@import "@scalar/sidebar/tailwind.config.css";
+/* Search for Tailwind classes in the API Client */
+@source "../";
+@source "../../node_modules/@scalar/oas-utils/src/";
+/* Client Specific Tailwind Utilities */
+@import "./utilities.css";
+/* Plugins */
+@plugin "@headlessui/tailwindcss";

package/dist/styles/utilities.css ADDED Viewed

@@ -0,0 +1,45 @@
+/**
+ * Client Specific Tailwind Utilities
+ */
+/**
+ * App Drag Region Utility Classes
+ * @see https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
+ */
+@utility app-drag-region {
+  /** Enable dragging for a region (e.g. for the window title bar) */
+  -webkit-app-region: drag;
+}
+@utility app-no-drag-region {
+  /** Disable dragging for a region (e.g. for clickable elements) */
+  -webkit-app-region: no-drag;
+}
+/**
+ * Floating background (e.g. for hoverable auth flows)
+ */
+@utility floating-bg {
+  &::before {
+    background-color: var(--scalar-background-2);
+    border-radius: var(--scalar-radius);
+    content: "";
+    height: calc(100% - 4px);
+    left: -4px;
+    opacity: 0;
+    position: absolute;
+    top: 2.5px;
+    transition: opacity 0.2s ease-in-out;
+    width: calc(100% + 8px);
+    z-index: 1;
+  }
+  &:hover::before {
+    opacity: 1;
+  }
+}
+/** Desktop Variants */
+@custom-variant desktop (.app-platform-desktop &);
+@custom-variant mac (.app-platform-mac &);
+@custom-variant windows (.app-platform-windows &);
+@custom-variant linux (.app-platform-linux &);

package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationCodeSample.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"names":[],"mappings":"~~AAifA~~,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAiBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,yCAAyC,CAAA;AAMhD,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;OAEG;IACH,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C;;OAEG;IACH,MAAM,EAAE,cAAc,CAAA;IACtB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,EAAE,eAAe,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,MAAM,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B;;;OAGG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IA4LlB,8DAA8D;sBAC1C,MAAM;;;;IAD1B,8DAA8D;sBAC1C,MAAM;;;;YAxKhB,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EA4hB3D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"OperationCodeSample.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"names":[],"mappings":"AAkfA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAiBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,yCAAyC,CAAA;AAMhD,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;OAEG;IACH,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C;;OAEG;IACH,MAAM,EAAE,cAAc,CAAA;IACtB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,EAAE,eAAe,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,MAAM,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B;;;OAGG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IA4LlB,8DAA8D;sBAC1C,MAAM;;;;IAD1B,8DAA8D;sBAC1C,MAAM;;;;YAxKhB,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EA4hB3D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import OperationCodeSample_vue_vue_type_script_setup_true_lang_default from "./OperationCodeSample.vue.script.js";
 /* empty css                                  */
 //#region src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue
-var OperationCodeSample_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationCodeSample_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-59da314d"]]);
+var OperationCodeSample_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationCodeSample_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8d155354"]]);
 //#endregion
 export { OperationCodeSample_default as default };

package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationCodeSample.vue.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type OperationCodeSampleProps = {\n /*\n Integration type: determines if the code sample is displayed in a client environment\n * or in an API reference environment.\n /\n integration?: 'client' \| 'reference'\n /\n List of all http clients formatted into option groups for the client selector\n /\n clientOptions: ClientOptionGroup[]\n /\n Pre-selected client, this will determine which client is initially selected in the dropdown\n \n @defaults to shell/curl or a custom sample if one is available\n /\n selectedClient?: AvailableClients[number]\n /\n Which server from the spec to use for the code example\n /\n selectedServer?: ServerObject \| null\n /\n The selected content type from the requestBody.content, this will determine which examples are available\n * as well as the content type of the code example\n \n @defaults to the first content type if not provided\n /\n selectedContentType?: string\n /\n Example name to use for resolving example values for parameters AND requestBody\n \n @example \"limited\"\n * ```ts\n * parameters: {\n * name: 'foobar',\n * in: 'query',\n * examples: {\n * limited: {\n * dataValue: 10,\n * }\n * }\n * },\n * body: {\n * content: {\n * 'application/json': {\n * examples: {\n * limited: {\n * dataValue: { foo: 'bar' },\n * }\n * }\n * }\n * }\n * }\n \n ```\n /\n selectedExample?: string\n /\n Event bus\n /\n eventBus: WorkspaceEventBus\n /\n The security schemes which are applicable to this operation\n /\n securitySchemes: SecuritySchemeObjectSecret[]\n /\n HTTP method of the operation\n /\n method: HttpMethodType\n /\n Path of the operation\n /\n path: string\n /\n De-referenced OpenAPI Operation object\n /\n operation: OperationObject\n /\n If true and there's no example, we will display a small card with the method and path only\n /\n fallback?: boolean\n /\n A method to generate the label of the block, should return an html string\n /\n generateLabel?: () => string\n /\n If true, render this as a webhook request example\n /\n isWebhook?: boolean\n /\n Workspace + document cookies\n /\n globalCookies?: XScalarCookie[]\n /\n When the request body schema uses oneOf/anyOf, use these selected variants\n * for the example snippet (e.g. from the schema dropdowns in the API reference).\n /\n requestBodyCompositionSelection?: Record<string, number>\n}\n\n/\n Request Example\n \n The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n \n @event workspace:update:selected-client - Emitted when the selected client changes\n * @event scalar-update-selected-example - removed for now, we can bring it back when we need it\n /\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n ScalarButton,\n ScalarCard,\n ScalarCardFooter,\n ScalarCardHeader,\n ScalarCardSection,\n ScalarCodeBlock,\n ScalarCombobox,\n ScalarVirtualText,\n} from '@scalar/components'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type AvailableClients } from '@scalar/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { operationToHar } from '@v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har'\nimport {\n computed,\n onBeforeMount,\n ref,\n useId,\n watch,\n type ComponentPublicInstance,\n} from 'vue'\n\nimport HttpMethod from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\nimport { filterClientsByQuery } from '@/v2/blocks/operation-code-sample/helpers/filter-clients-by-query'\nimport { findClient } from '@/v2/blocks/operation-code-sample/helpers/find-client'\nimport { getClients } from '@/v2/blocks/operation-code-sample/helpers/get-clients'\nimport { getCustomCodeSamples } from '@/v2/blocks/operation-code-sample/helpers/get-custom-code-samples'\nimport { getSecrets } from '@/v2/blocks/operation-code-sample/helpers/get-secrets'\nimport type {\n ClientOption,\n ClientOptionGroup,\n CustomClientOption,\n} from '@/v2/blocks/operation-code-sample/types'\n\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport ExamplePicker from './ExamplePicker.vue'\n\nconst {\n integration,\n clientOptions,\n selectedClient,\n selectedServer = null,\n selectedContentType,\n securitySchemes = [],\n method,\n eventBus,\n path,\n operation,\n isWebhook,\n generateLabel,\n globalCookies,\n requestBodyCompositionSelection,\n} = defineProps<OperationCodeSampleProps>()\n\ndefineSlots<{\n header: () => unknown\n footer: ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/* Grab the examples for the given content type /\nconst requestBodyExamples = computed(() => {\n const content = getResolvedRef(operation.requestBody)?.content ?? {}\n const contentType = selectedContentType \|\| Object.keys(content)[0]\n if (!contentType) return {}\n\n const examples = content[contentType]?.examples ?? {}\n\n return examples\n})\n\n/* The currently selected example key with v-model support /\nconst selectedExampleKey = defineModel<string>('selectedExample', {\n default: '',\n})\n\n// Set default value to the first example\nonBeforeMount(() => {\n selectedExampleKey.value \|\|= Object.keys(requestBodyExamples.value)[0] ?? ''\n})\n\n/* Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example /\nwatch(\n () => selectedContentType,\n () => {\n if (\n !Object.keys(requestBodyExamples.value).includes(selectedExampleKey.value)\n ) {\n selectedExampleKey.value = Object.keys(requestBodyExamples.value)[0] ?? ''\n }\n },\n)\n\n/* Grab any custom code samples from the operation /\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/* Merge custom code samples with the client options /\nconst clients = computed(() =>\n getClients(customCodeSamples.value, clientOptions),\n)\n\n/* The locally selected client which would include code samples from this operation only /\nconst localSelectedClient = ref<ClientOption \| CustomClientOption \| undefined>(\n findClient(clients.value, selectedClient),\n)\n\n/* If the globally selected client changes we can update the local one /\nwatch(\n () => selectedClient,\n (newClient) => {\n const client = findClient(clients.value, newClient)\n if (client) {\n localSelectedClient.value = client\n }\n },\n)\n\n/* Generate HAR data for webhook requests /\nconst webhookHar = computed(() => {\n if (!isWebhook) return null\n\n try {\n return operationToHar({\n operation,\n method,\n path,\n example: selectedExampleKey.value,\n requestBodyCompositionSelection,\n defaultDisabledParameters: false,\n })\n } catch (error) {\n console.error('[webhookHar]', error)\n return null\n }\n})\n\n/* Generate the code snippet for the selected example /\nconst generatedCode = computed<string>(() => {\n if (isWebhook) {\n return webhookHar.value?.postData?.text ?? ''\n }\n\n return generateCodeSnippet({\n defaultDisabledParameters: false,\n includeDefaultHeaders: integration === 'client',\n clientId: localSelectedClient.value?.id,\n customCodeSamples: customCodeSamples.value,\n operation,\n method,\n path,\n contentType: selectedContentType,\n server: selectedServer,\n securitySchemes,\n example: selectedExampleKey.value,\n globalCookies,\n requestBodyCompositionSelection,\n })\n})\n\n/* The language for the code block, used for syntax highlighting /\nconst codeBlockLanguage = computed(() => {\n if (isWebhook) {\n return webhookLanguage.value\n }\n\n return localSelectedClient.value?.lang\n})\n\n/* Determine the language for webhook content based on MIME type /\nconst webhookLanguage = computed<string>(() => {\n if (!webhookHar.value?.postData) return 'json'\n\n const contentType = webhookHar.value.postData.mimeType\n if (contentType?.includes('json')) return 'json'\n if (contentType?.includes('xml')) return 'xml'\n if (contentType?.includes('yaml') \|\| contentType?.includes('yml'))\n return 'yaml'\n if (contentType?.includes('text/plain')) return 'text'\n\n return 'json'\n})\n\n/* Block secrets from being shown in the code block /\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/* Grab the ref to freeze the ui as the clients change so there's no jump as the size of the dom changes /\nconst elem = ref<ComponentPublicInstance \| null>(null)\n\n/* Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n // We need to freeze the ui to prevent scrolling as the clients change\n if (elem.value) {\n const unfreeze = freezeElement(elem.value.$el)\n setTimeout(() => {\n unfreeze()\n }, 300)\n }\n // Update to the local example\n localSelectedClient.value = option\n\n // Emit the change if it's not a custom example\n if (option && !option.id.startsWith('custom')) {\n eventBus.emit('workspace:update:selected-client', option.id)\n }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n () => (generatedCode.value.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n <ScalarCard\n v-if=\"generatedCode\"\n ref=\"elem\"\n class=\"request-card dark-mode\">\n <!-- Header -->\n <ScalarCardHeader class=\"pr-2.5\">\n <span class=\"sr-only\">Request Example for</span>\n <HttpMethod\n as=\"span\"\n class=\"request-method\"\n :method=\"method\" />\n <span\n v-if=\"generateLabel\"\n v-html=\"generateLabel()\" />\n <slot name=\"header\" />\n <!-- Client picker -->\n <template\n v-if=\"!isWebhook && clients.length\"\n #actions>\n <ScalarCombobox\n class=\"max-h-80\"\n :filterFn=\"filterClientsByQuery\"\n :modelValue=\"localSelectedClient\"\n :options=\"clients\"\n placement=\"bottom-end\"\n teleport\n @update:modelValue=\"selectClient($event as ClientOption)\">\n <ScalarButton\n class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n data-testid=\"client-picker\"\n variant=\"ghost\">\n {{ localSelectedClient?.title }}\n <ScalarIconCaretDown\n class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n weight=\"bold\" />\n </ScalarButton>\n </ScalarCombobox>\n </template>\n </ScalarCardHeader>\n\n <!-- Code snippet -->\n <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n <div\n :id=\"`${id}-example`\"\n class=\"code-snippet\">\n <ScalarCodeBlock\n v-if=\"!shouldVirtualize\"\n class=\"bg-b-2 h-full\"\n :content=\"generatedCode\"\n :hideCredentials=\"secretCredentials\"\n :lang=\"codeBlockLanguage\"\n lineNumbers />\n <ScalarVirtualText\n v-else\n containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n :lineHeight=\"20\"\n :text=\"generatedCode\" />\n </div>\n </ScalarCardSection>\n\n <!-- Footer -->\n <ScalarCardFooter\n v-if=\"Object.keys(requestBodyExamples).length > 1 \|\| $slots.footer\"\n class=\"request-card-footer bg-b-3\">\n <!-- Example picker -->\n <div\n v-if=\"Object.keys(requestBodyExamples).length > 1\"\n class=\"request-card-footer-addon\">\n <template v-if=\"Object.keys(requestBodyExamples).length\">\n <ExamplePicker\n v-model=\"selectedExampleKey\"\n :examples=\"requestBodyExamples\" />\n </template>\n </div>\n\n <!-- Footer -->\n <slot\n :exampleName=\"selectedExampleKey\"\n name=\"footer\" />\n </ScalarCardFooter>\n </ScalarCard>\n\n <!-- Fallback card with just method and path in the case of no examples -->\n <ScalarCard\n v-else-if=\"fallback\"\n class=\"request-card dark-mode\">\n <ScalarCardSection class=\"request-card-simple\">\n <div class=\"request-header\">\n <HttpMethod\n as=\"span\"\n class=\"request-method\"\n :method=\"method\" />\n <slot name=\"header\" />\n </div>\n <slot\n :exampleName=\"selectedExampleKey\"\n name=\"footer\" />\n </ScalarCardSection>\n </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n font-size: var(--scalar-font-size-3);\n}\n.request-method {\n font-family: var(--scalar-font-code);\n text-transform: uppercase;\n margin-right: 6px;\n}\n.request-card-footer {\n display: flex;\n justify-content: flex-end;\n padding: 6px;\n flex-shrink: 0;\n position: relative;\n}\n.request-card-footer-addon {\n display: flex;\n align-items: center;\n\n flex: 1;\n min-width: 0;\n}\n.request-editor-section {\n display: flex;\n flex: 1;\n}\n.request-card-simple {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: 8px 8px 8px 12px;\n\n font-size: var(--scalar-small);\n}\n.code-snippet {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"OperationCodeSample.vue.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type OperationCodeSampleProps = {\n /*\n Integration type: determines if the code sample is displayed in a client environment\n * or in an API reference environment.\n /\n integration?: 'client' \| 'reference'\n /\n List of all http clients formatted into option groups for the client selector\n /\n clientOptions: ClientOptionGroup[]\n /\n Pre-selected client, this will determine which client is initially selected in the dropdown\n \n @defaults to shell/curl or a custom sample if one is available\n /\n selectedClient?: AvailableClients[number]\n /\n Which server from the spec to use for the code example\n /\n selectedServer?: ServerObject \| null\n /\n The selected content type from the requestBody.content, this will determine which examples are available\n * as well as the content type of the code example\n \n @defaults to the first content type if not provided\n /\n selectedContentType?: string\n /\n Example name to use for resolving example values for parameters AND requestBody\n \n @example \"limited\"\n * ```ts\n * parameters: {\n * name: 'foobar',\n * in: 'query',\n * examples: {\n * limited: {\n * dataValue: 10,\n * }\n * }\n * },\n * body: {\n * content: {\n * 'application/json': {\n * examples: {\n * limited: {\n * dataValue: { foo: 'bar' },\n * }\n * }\n * }\n * }\n * }\n \n ```\n /\n selectedExample?: string\n /\n Event bus\n /\n eventBus: WorkspaceEventBus\n /\n The security schemes which are applicable to this operation\n /\n securitySchemes: SecuritySchemeObjectSecret[]\n /\n HTTP method of the operation\n /\n method: HttpMethodType\n /\n Path of the operation\n /\n path: string\n /\n De-referenced OpenAPI Operation object\n /\n operation: OperationObject\n /\n If true and there's no example, we will display a small card with the method and path only\n /\n fallback?: boolean\n /\n A method to generate the label of the block, should return an html string\n /\n generateLabel?: () => string\n /\n If true, render this as a webhook request example\n /\n isWebhook?: boolean\n /\n Workspace + document cookies\n /\n globalCookies?: XScalarCookie[]\n /\n When the request body schema uses oneOf/anyOf, use these selected variants\n * for the example snippet (e.g. from the schema dropdowns in the API reference).\n /\n requestBodyCompositionSelection?: Record<string, number>\n}\n\n/\n Request Example\n \n The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n \n @event workspace:update:selected-client - Emitted when the selected client changes\n * @event scalar-update-selected-example - removed for now, we can bring it back when we need it\n /\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n ScalarButton,\n ScalarCard,\n ScalarCardFooter,\n ScalarCardHeader,\n ScalarCardSection,\n ScalarCodeBlock,\n ScalarCombobox,\n ScalarVirtualText,\n} from '@scalar/components'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type AvailableClients } from '@scalar/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { operationToHar } from '@v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har'\nimport {\n computed,\n onBeforeMount,\n ref,\n useId,\n watch,\n type ComponentPublicInstance,\n} from 'vue'\n\nimport HttpMethod from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\nimport { filterClientsByQuery } from '@/v2/blocks/operation-code-sample/helpers/filter-clients-by-query'\nimport { findClient } from '@/v2/blocks/operation-code-sample/helpers/find-client'\nimport { getClients } from '@/v2/blocks/operation-code-sample/helpers/get-clients'\nimport { getCustomCodeSamples } from '@/v2/blocks/operation-code-sample/helpers/get-custom-code-samples'\nimport { getSecrets } from '@/v2/blocks/operation-code-sample/helpers/get-secrets'\nimport type {\n ClientOption,\n ClientOptionGroup,\n CustomClientOption,\n} from '@/v2/blocks/operation-code-sample/types'\n\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport ExamplePicker from './ExamplePicker.vue'\n\nconst {\n integration,\n clientOptions,\n selectedClient,\n selectedServer = null,\n selectedContentType,\n securitySchemes = [],\n method,\n eventBus,\n path,\n operation,\n isWebhook,\n generateLabel,\n globalCookies,\n requestBodyCompositionSelection,\n} = defineProps<OperationCodeSampleProps>()\n\ndefineSlots<{\n header: () => unknown\n footer: ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/* Grab the examples for the given content type /\nconst requestBodyExamples = computed(() => {\n const content = getResolvedRef(operation.requestBody)?.content ?? {}\n const contentType = selectedContentType \|\| Object.keys(content)[0]\n if (!contentType) return {}\n\n const examples = content[contentType]?.examples ?? {}\n\n return examples\n})\n\n/* The currently selected example key with v-model support /\nconst selectedExampleKey = defineModel<string>('selectedExample', {\n default: '',\n})\n\n// Set default value to the first example\nonBeforeMount(() => {\n selectedExampleKey.value \|\|= Object.keys(requestBodyExamples.value)[0] ?? ''\n})\n\n/* Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example /\nwatch(\n () => selectedContentType,\n () => {\n if (\n !Object.keys(requestBodyExamples.value).includes(selectedExampleKey.value)\n ) {\n selectedExampleKey.value = Object.keys(requestBodyExamples.value)[0] ?? ''\n }\n },\n)\n\n/* Grab any custom code samples from the operation /\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/* Merge custom code samples with the client options /\nconst clients = computed(() =>\n getClients(customCodeSamples.value, clientOptions),\n)\n\n/* The locally selected client which would include code samples from this operation only /\nconst localSelectedClient = ref<ClientOption \| CustomClientOption \| undefined>(\n findClient(clients.value, selectedClient),\n)\n\n/* If the globally selected client changes we can update the local one /\nwatch(\n () => selectedClient,\n (newClient) => {\n const client = findClient(clients.value, newClient)\n if (client) {\n localSelectedClient.value = client\n }\n },\n)\n\n/* Generate HAR data for webhook requests /\nconst webhookHar = computed(() => {\n if (!isWebhook) return null\n\n try {\n return operationToHar({\n operation,\n method,\n path,\n example: selectedExampleKey.value,\n requestBodyCompositionSelection,\n defaultDisabledParameters: false,\n })\n } catch (error) {\n console.error('[webhookHar]', error)\n return null\n }\n})\n\n/* Generate the code snippet for the selected example /\nconst generatedCode = computed<string>(() => {\n if (isWebhook) {\n return webhookHar.value?.postData?.text ?? ''\n }\n\n return generateCodeSnippet({\n defaultDisabledParameters: false,\n includeDefaultHeaders: integration === 'client',\n clientId: localSelectedClient.value?.id,\n customCodeSamples: customCodeSamples.value,\n operation,\n method,\n path,\n contentType: selectedContentType,\n server: selectedServer,\n securitySchemes,\n example: selectedExampleKey.value,\n globalCookies,\n requestBodyCompositionSelection,\n })\n})\n\n/* The language for the code block, used for syntax highlighting /\nconst codeBlockLanguage = computed(() => {\n if (isWebhook) {\n return webhookLanguage.value\n }\n\n return localSelectedClient.value?.lang\n})\n\n/* Determine the language for webhook content based on MIME type /\nconst webhookLanguage = computed<string>(() => {\n if (!webhookHar.value?.postData) return 'json'\n\n const contentType = webhookHar.value.postData.mimeType\n if (contentType?.includes('json')) return 'json'\n if (contentType?.includes('xml')) return 'xml'\n if (contentType?.includes('yaml') \|\| contentType?.includes('yml'))\n return 'yaml'\n if (contentType?.includes('text/plain')) return 'text'\n\n return 'json'\n})\n\n/* Block secrets from being shown in the code block /\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/* Grab the ref to freeze the ui as the clients change so there's no jump as the size of the dom changes /\nconst elem = ref<ComponentPublicInstance \| null>(null)\n\n/* Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n // We need to freeze the ui to prevent scrolling as the clients change\n if (elem.value) {\n const unfreeze = freezeElement(elem.value.$el)\n setTimeout(() => {\n unfreeze()\n }, 300)\n }\n // Update to the local example\n localSelectedClient.value = option\n\n // Emit the change if it's not a custom example\n if (option && !option.id.startsWith('custom')) {\n eventBus.emit('workspace:update:selected-client', option.id)\n }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n () => (generatedCode.value.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n <ScalarCard\n v-if=\"generatedCode\"\n ref=\"elem\"\n class=\"request-card dark-mode\">\n <!-- Header -->\n <ScalarCardHeader class=\"pr-2.5\">\n <span class=\"sr-only\">Request Example for</span>\n <HttpMethod\n as=\"span\"\n class=\"request-method\"\n :method=\"method\" />\n <span\n v-if=\"generateLabel\"\n v-html=\"generateLabel()\" />\n <slot name=\"header\" />\n <!-- Client picker -->\n <template\n v-if=\"!isWebhook && clients.length\"\n #actions>\n <ScalarCombobox\n class=\"max-h-80\"\n :filterFn=\"filterClientsByQuery\"\n :modelValue=\"localSelectedClient\"\n :options=\"clients\"\n placement=\"bottom-end\"\n teleport\n @update:modelValue=\"selectClient($event as ClientOption)\">\n <ScalarButton\n class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n data-testid=\"client-picker\"\n variant=\"ghost\">\n {{ localSelectedClient?.title }}\n <ScalarIconCaretDown\n class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n weight=\"bold\" />\n </ScalarButton>\n </ScalarCombobox>\n </template>\n </ScalarCardHeader>\n\n <!-- Code snippet -->\n <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n <div\n :id=\"`${id}-example`\"\n class=\"code-snippet\">\n <ScalarCodeBlock\n v-if=\"!shouldVirtualize\"\n class=\"bg-b-2 h-full\"\n :content=\"generatedCode\"\n :hideCredentials=\"secretCredentials\"\n :lang=\"codeBlockLanguage\"\n lineNumbers />\n <ScalarVirtualText\n v-else\n containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n :lineHeight=\"20\"\n :text=\"generatedCode\" />\n </div>\n </ScalarCardSection>\n\n <!-- Footer -->\n <ScalarCardFooter\n v-if=\"Object.keys(requestBodyExamples).length > 1 \|\| $slots.footer\"\n class=\"request-card-footer bg-b-3\">\n <!-- Example picker -->\n <div\n v-if=\"Object.keys(requestBodyExamples).length > 1\"\n class=\"request-card-footer-addon\">\n <template v-if=\"Object.keys(requestBodyExamples).length\">\n <ExamplePicker\n v-model=\"selectedExampleKey\"\n :examples=\"requestBodyExamples\" />\n </template>\n </div>\n\n <!-- Footer -->\n <slot\n :exampleName=\"selectedExampleKey\"\n name=\"footer\" />\n </ScalarCardFooter>\n </ScalarCard>\n\n <!-- Fallback card with just method and path in the case of no examples -->\n <ScalarCard\n v-else-if=\"fallback\"\n class=\"request-card dark-mode\">\n <ScalarCardSection class=\"request-card-simple\">\n <div class=\"request-header\">\n <HttpMethod\n as=\"span\"\n class=\"request-method\"\n :method=\"method\" />\n <slot name=\"header\" />\n </div>\n <slot\n :exampleName=\"selectedExampleKey\"\n name=\"footer\" />\n </ScalarCardSection>\n </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n color: var(--scalar-color-1);\n font-size: var(--scalar-font-size-3);\n}\n.request-method {\n font-family: var(--scalar-font-code);\n text-transform: uppercase;\n margin-right: 6px;\n}\n.request-card-footer {\n display: flex;\n justify-content: flex-end;\n padding: 6px;\n flex-shrink: 0;\n position: relative;\n}\n.request-card-footer-addon {\n display: flex;\n align-items: center;\n\n flex: 1;\n min-width: 0;\n}\n.request-editor-section {\n display: flex;\n flex: 1;\n}\n.request-card-simple {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: 8px 8px 8px 12px;\n\n font-size: var(--scalar-small);\n}\n.code-snippet {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.script.js CHANGED Viewed

@@ -212,7 +212,7 @@ var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 						])) : (openBlock(), createBlock(unref(ScalarVirtualText), {
 							key: 1,
 							containerClass: "custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen",
-							contentClass: "language-plaintext whitespace-pre font-code text-base",
+							contentClass: "language-plaintext whitespace-pre font-code text-base p-2",
 							lineHeight: 20,
 							text: generatedCode.value
 						}, null, 8, ["text"]))], 8, _hoisted_2)]),

package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationCodeSample.vue.script.js","names":["$slots"],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type OperationCodeSampleProps = {\n /*\n Integration type: determines if the code sample is displayed in a client environment\n * or in an API reference environment.\n /\n integration?: 'client' \| 'reference'\n /\n List of all http clients formatted into option groups for the client selector\n /\n clientOptions: ClientOptionGroup[]\n /\n Pre-selected client, this will determine which client is initially selected in the dropdown\n \n @defaults to shell/curl or a custom sample if one is available\n /\n selectedClient?: AvailableClients[number]\n /\n Which server from the spec to use for the code example\n /\n selectedServer?: ServerObject \| null\n /\n The selected content type from the requestBody.content, this will determine which examples are available\n * as well as the content type of the code example\n \n @defaults to the first content type if not provided\n /\n selectedContentType?: string\n /\n Example name to use for resolving example values for parameters AND requestBody\n \n @example \"limited\"\n * ```ts\n * parameters: {\n * name: 'foobar',\n * in: 'query',\n * examples: {\n * limited: {\n * dataValue: 10,\n * }\n * }\n * },\n * body: {\n * content: {\n * 'application/json': {\n * examples: {\n * limited: {\n * dataValue: { foo: 'bar' },\n * }\n * }\n * }\n * }\n * }\n \n ```\n /\n selectedExample?: string\n /\n Event bus\n /\n eventBus: WorkspaceEventBus\n /\n The security schemes which are applicable to this operation\n /\n securitySchemes: SecuritySchemeObjectSecret[]\n /\n HTTP method of the operation\n /\n method: HttpMethodType\n /\n Path of the operation\n /\n path: string\n /\n De-referenced OpenAPI Operation object\n /\n operation: OperationObject\n /\n If true and there's no example, we will display a small card with the method and path only\n /\n fallback?: boolean\n /\n A method to generate the label of the block, should return an html string\n /\n generateLabel?: () => string\n /\n If true, render this as a webhook request example\n /\n isWebhook?: boolean\n /\n Workspace + document cookies\n /\n globalCookies?: XScalarCookie[]\n /\n When the request body schema uses oneOf/anyOf, use these selected variants\n * for the example snippet (e.g. from the schema dropdowns in the API reference).\n /\n requestBodyCompositionSelection?: Record<string, number>\n}\n\n/\n Request Example\n \n The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n \n @event workspace:update:selected-client - Emitted when the selected client changes\n * @event scalar-update-selected-example - removed for now, we can bring it back when we need it\n /\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n ScalarButton,\n ScalarCard,\n ScalarCardFooter,\n ScalarCardHeader,\n ScalarCardSection,\n ScalarCodeBlock,\n ScalarCombobox,\n ScalarVirtualText,\n} from '@scalar/components'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type AvailableClients } from '@scalar/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { operationToHar } from '@v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har'\nimport {\n computed,\n onBeforeMount,\n ref,\n useId,\n watch,\n type ComponentPublicInstance,\n} from 'vue'\n\nimport HttpMethod from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\nimport { filterClientsByQuery } from '@/v2/blocks/operation-code-sample/helpers/filter-clients-by-query'\nimport { findClient } from '@/v2/blocks/operation-code-sample/helpers/find-client'\nimport { getClients } from '@/v2/blocks/operation-code-sample/helpers/get-clients'\nimport { getCustomCodeSamples } from '@/v2/blocks/operation-code-sample/helpers/get-custom-code-samples'\nimport { getSecrets } from '@/v2/blocks/operation-code-sample/helpers/get-secrets'\nimport type {\n ClientOption,\n ClientOptionGroup,\n CustomClientOption,\n} from '@/v2/blocks/operation-code-sample/types'\n\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport ExamplePicker from './ExamplePicker.vue'\n\nconst {\n integration,\n clientOptions,\n selectedClient,\n selectedServer = null,\n selectedContentType,\n securitySchemes = [],\n method,\n eventBus,\n path,\n operation,\n isWebhook,\n generateLabel,\n globalCookies,\n requestBodyCompositionSelection,\n} = defineProps<OperationCodeSampleProps>()\n\ndefineSlots<{\n header: () => unknown\n footer: ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/* Grab the examples for the given content type /\nconst requestBodyExamples = computed(() => {\n const content = getResolvedRef(operation.requestBody)?.content ?? {}\n const contentType = selectedContentType \|\| Object.keys(content)[0]\n if (!contentType) return {}\n\n const examples = content[contentType]?.examples ?? {}\n\n return examples\n})\n\n/* The currently selected example key with v-model support /\nconst selectedExampleKey = defineModel<string>('selectedExample', {\n default: '',\n})\n\n// Set default value to the first example\nonBeforeMount(() => {\n selectedExampleKey.value \|\|= Object.keys(requestBodyExamples.value)[0] ?? ''\n})\n\n/* Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example /\nwatch(\n () => selectedContentType,\n () => {\n if (\n !Object.keys(requestBodyExamples.value).includes(selectedExampleKey.value)\n ) {\n selectedExampleKey.value = Object.keys(requestBodyExamples.value)[0] ?? ''\n }\n },\n)\n\n/* Grab any custom code samples from the operation /\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/* Merge custom code samples with the client options /\nconst clients = computed(() =>\n getClients(customCodeSamples.value, clientOptions),\n)\n\n/* The locally selected client which would include code samples from this operation only /\nconst localSelectedClient = ref<ClientOption \| CustomClientOption \| undefined>(\n findClient(clients.value, selectedClient),\n)\n\n/* If the globally selected client changes we can update the local one /\nwatch(\n () => selectedClient,\n (newClient) => {\n const client = findClient(clients.value, newClient)\n if (client) {\n localSelectedClient.value = client\n }\n },\n)\n\n/* Generate HAR data for webhook requests /\nconst webhookHar = computed(() => {\n if (!isWebhook) return null\n\n try {\n return operationToHar({\n operation,\n method,\n path,\n example: selectedExampleKey.value,\n requestBodyCompositionSelection,\n defaultDisabledParameters: false,\n })\n } catch (error) {\n console.error('[webhookHar]', error)\n return null\n }\n})\n\n/* Generate the code snippet for the selected example /\nconst generatedCode = computed<string>(() => {\n if (isWebhook) {\n return webhookHar.value?.postData?.text ?? ''\n }\n\n return generateCodeSnippet({\n defaultDisabledParameters: false,\n includeDefaultHeaders: integration === 'client',\n clientId: localSelectedClient.value?.id,\n customCodeSamples: customCodeSamples.value,\n operation,\n method,\n path,\n contentType: selectedContentType,\n server: selectedServer,\n securitySchemes,\n example: selectedExampleKey.value,\n globalCookies,\n requestBodyCompositionSelection,\n })\n})\n\n/* The language for the code block, used for syntax highlighting /\nconst codeBlockLanguage = computed(() => {\n if (isWebhook) {\n return webhookLanguage.value\n }\n\n return localSelectedClient.value?.lang\n})\n\n/* Determine the language for webhook content based on MIME type /\nconst webhookLanguage = computed<string>(() => {\n if (!webhookHar.value?.postData) return 'json'\n\n const contentType = webhookHar.value.postData.mimeType\n if (contentType?.includes('json')) return 'json'\n if (contentType?.includes('xml')) return 'xml'\n if (contentType?.includes('yaml') \|\| contentType?.includes('yml'))\n return 'yaml'\n if (contentType?.includes('text/plain')) return 'text'\n\n return 'json'\n})\n\n/* Block secrets from being shown in the code block /\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/* Grab the ref to freeze the ui as the clients change so there's no jump as the size of the dom changes /\nconst elem = ref<ComponentPublicInstance \| null>(null)\n\n/* Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n // We need to freeze the ui to prevent scrolling as the clients change\n if (elem.value) {\n const unfreeze = freezeElement(elem.value.$el)\n setTimeout(() => {\n unfreeze()\n }, 300)\n }\n // Update to the local example\n localSelectedClient.value = option\n\n // Emit the change if it's not a custom example\n if (option && !option.id.startsWith('custom')) {\n eventBus.emit('workspace:update:selected-client', option.id)\n }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n () => (generatedCode.value.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n <ScalarCard\n v-if=\"generatedCode\"\n ref=\"elem\"\n class=\"request-card dark-mode\">\n <!-- Header -->\n <ScalarCardHeader class=\"pr-2.5\">\n <span class=\"sr-only\">Request Example for</span>\n <HttpMethod\n as=\"span\"\n class=\"request-method\"\n :method=\"method\" />\n <span\n v-if=\"generateLabel\"\n v-html=\"generateLabel()\" />\n <slot name=\"header\" />\n <!-- Client picker -->\n <template\n v-if=\"!isWebhook && clients.length\"\n #actions>\n <ScalarCombobox\n class=\"max-h-80\"\n :filterFn=\"filterClientsByQuery\"\n :modelValue=\"localSelectedClient\"\n :options=\"clients\"\n placement=\"bottom-end\"\n teleport\n @update:modelValue=\"selectClient($event as ClientOption)\">\n <ScalarButton\n class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n data-testid=\"client-picker\"\n variant=\"ghost\">\n {{ localSelectedClient?.title }}\n <ScalarIconCaretDown\n class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n weight=\"bold\" />\n </ScalarButton>\n </ScalarCombobox>\n </template>\n </ScalarCardHeader>\n\n <!-- Code snippet -->\n <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n <div\n :id=\"`${id}-example`\"\n class=\"code-snippet\">\n <ScalarCodeBlock\n v-if=\"!shouldVirtualize\"\n class=\"bg-b-2 h-full\"\n :content=\"generatedCode\"\n :hideCredentials=\"secretCredentials\"\n :lang=\"codeBlockLanguage\"\n lineNumbers />\n <ScalarVirtualText\n v-else\n containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n :lineHeight=\"20\"\n :text=\"generatedCode\" />\n </div>\n </ScalarCardSection>\n\n <!-- Footer -->\n <ScalarCardFooter\n v-if=\"Object.keys(requestBodyExamples).length > 1 \|\| $slots.footer\"\n class=\"request-card-footer bg-b-3\">\n <!-- Example picker -->\n <div\n v-if=\"Object.keys(requestBodyExamples).length > 1\"\n class=\"request-card-footer-addon\">\n <template v-if=\"Object.keys(requestBodyExamples).length\">\n <ExamplePicker\n v-model=\"selectedExampleKey\"\n :examples=\"requestBodyExamples\" />\n </template>\n </div>\n\n <!-- Footer -->\n <slot\n :exampleName=\"selectedExampleKey\"\n name=\"footer\" />\n </ScalarCardFooter>\n </ScalarCard>\n\n <!-- Fallback card with just method and path in the case of no examples -->\n <ScalarCard\n v-else-if=\"fallback\"\n class=\"request-card dark-mode\">\n <ScalarCardSection class=\"request-card-simple\">\n <div class=\"request-header\">\n <HttpMethod\n as=\"span\"\n class=\"request-method\"\n :method=\"method\" />\n <slot name=\"header\" />\n </div>\n <slot\n :exampleName=\"selectedExampleKey\"\n name=\"footer\" />\n </ScalarCardSection>\n </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n font-size: var(--scalar-font-size-3);\n}\n.request-method {\n font-family: var(--scalar-font-code);\n text-transform: uppercase;\n margin-right: 6px;\n}\n.request-card-footer {\n display: flex;\n justify-content: flex-end;\n padding: 6px;\n flex-shrink: 0;\n position: relative;\n}\n.request-card-footer-addon {\n display: flex;\n align-items: center;\n\n flex: 1;\n min-width: 0;\n}\n.request-editor-section {\n display: flex;\n flex: 1;\n}\n.request-card-simple {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: 8px 8px 8px 12px;\n\n font-size: var(--scalar-small);\n}\n.code-snippet {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"OperationCodeSample.vue.script.js","names":["$slots"],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type OperationCodeSampleProps = {\n /*\n Integration type: determines if the code sample is displayed in a client environment\n * or in an API reference environment.\n /\n integration?: 'client' \| 'reference'\n /\n List of all http clients formatted into option groups for the client selector\n /\n clientOptions: ClientOptionGroup[]\n /\n Pre-selected client, this will determine which client is initially selected in the dropdown\n \n @defaults to shell/curl or a custom sample if one is available\n /\n selectedClient?: AvailableClients[number]\n /\n Which server from the spec to use for the code example\n /\n selectedServer?: ServerObject \| null\n /\n The selected content type from the requestBody.content, this will determine which examples are available\n * as well as the content type of the code example\n \n @defaults to the first content type if not provided\n /\n selectedContentType?: string\n /\n Example name to use for resolving example values for parameters AND requestBody\n \n @example \"limited\"\n * ```ts\n * parameters: {\n * name: 'foobar',\n * in: 'query',\n * examples: {\n * limited: {\n * dataValue: 10,\n * }\n * }\n * },\n * body: {\n * content: {\n * 'application/json': {\n * examples: {\n * limited: {\n * dataValue: { foo: 'bar' },\n * }\n * }\n * }\n * }\n * }\n \n ```\n /\n selectedExample?: string\n /\n Event bus\n /\n eventBus: WorkspaceEventBus\n /\n The security schemes which are applicable to this operation\n /\n securitySchemes: SecuritySchemeObjectSecret[]\n /\n HTTP method of the operation\n /\n method: HttpMethodType\n /\n Path of the operation\n /\n path: string\n /\n De-referenced OpenAPI Operation object\n /\n operation: OperationObject\n /\n If true and there's no example, we will display a small card with the method and path only\n /\n fallback?: boolean\n /\n A method to generate the label of the block, should return an html string\n /\n generateLabel?: () => string\n /\n If true, render this as a webhook request example\n /\n isWebhook?: boolean\n /\n Workspace + document cookies\n /\n globalCookies?: XScalarCookie[]\n /\n When the request body schema uses oneOf/anyOf, use these selected variants\n * for the example snippet (e.g. from the schema dropdowns in the API reference).\n /\n requestBodyCompositionSelection?: Record<string, number>\n}\n\n/\n Request Example\n \n The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n \n @event workspace:update:selected-client - Emitted when the selected client changes\n * @event scalar-update-selected-example - removed for now, we can bring it back when we need it\n /\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n ScalarButton,\n ScalarCard,\n ScalarCardFooter,\n ScalarCardHeader,\n ScalarCardSection,\n ScalarCodeBlock,\n ScalarCombobox,\n ScalarVirtualText,\n} from '@scalar/components'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type AvailableClients } from '@scalar/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { operationToHar } from '@v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har'\nimport {\n computed,\n onBeforeMount,\n ref,\n useId,\n watch,\n type ComponentPublicInstance,\n} from 'vue'\n\nimport HttpMethod from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\nimport { filterClientsByQuery } from '@/v2/blocks/operation-code-sample/helpers/filter-clients-by-query'\nimport { findClient } from '@/v2/blocks/operation-code-sample/helpers/find-client'\nimport { getClients } from '@/v2/blocks/operation-code-sample/helpers/get-clients'\nimport { getCustomCodeSamples } from '@/v2/blocks/operation-code-sample/helpers/get-custom-code-samples'\nimport { getSecrets } from '@/v2/blocks/operation-code-sample/helpers/get-secrets'\nimport type {\n ClientOption,\n ClientOptionGroup,\n CustomClientOption,\n} from '@/v2/blocks/operation-code-sample/types'\n\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport ExamplePicker from './ExamplePicker.vue'\n\nconst {\n integration,\n clientOptions,\n selectedClient,\n selectedServer = null,\n selectedContentType,\n securitySchemes = [],\n method,\n eventBus,\n path,\n operation,\n isWebhook,\n generateLabel,\n globalCookies,\n requestBodyCompositionSelection,\n} = defineProps<OperationCodeSampleProps>()\n\ndefineSlots<{\n header: () => unknown\n footer: ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/* Grab the examples for the given content type /\nconst requestBodyExamples = computed(() => {\n const content = getResolvedRef(operation.requestBody)?.content ?? {}\n const contentType = selectedContentType \|\| Object.keys(content)[0]\n if (!contentType) return {}\n\n const examples = content[contentType]?.examples ?? {}\n\n return examples\n})\n\n/* The currently selected example key with v-model support /\nconst selectedExampleKey = defineModel<string>('selectedExample', {\n default: '',\n})\n\n// Set default value to the first example\nonBeforeMount(() => {\n selectedExampleKey.value \|\|= Object.keys(requestBodyExamples.value)[0] ?? ''\n})\n\n/* Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example /\nwatch(\n () => selectedContentType,\n () => {\n if (\n !Object.keys(requestBodyExamples.value).includes(selectedExampleKey.value)\n ) {\n selectedExampleKey.value = Object.keys(requestBodyExamples.value)[0] ?? ''\n }\n },\n)\n\n/* Grab any custom code samples from the operation /\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/* Merge custom code samples with the client options /\nconst clients = computed(() =>\n getClients(customCodeSamples.value, clientOptions),\n)\n\n/* The locally selected client which would include code samples from this operation only /\nconst localSelectedClient = ref<ClientOption \| CustomClientOption \| undefined>(\n findClient(clients.value, selectedClient),\n)\n\n/* If the globally selected client changes we can update the local one /\nwatch(\n () => selectedClient,\n (newClient) => {\n const client = findClient(clients.value, newClient)\n if (client) {\n localSelectedClient.value = client\n }\n },\n)\n\n/* Generate HAR data for webhook requests /\nconst webhookHar = computed(() => {\n if (!isWebhook) return null\n\n try {\n return operationToHar({\n operation,\n method,\n path,\n example: selectedExampleKey.value,\n requestBodyCompositionSelection,\n defaultDisabledParameters: false,\n })\n } catch (error) {\n console.error('[webhookHar]', error)\n return null\n }\n})\n\n/* Generate the code snippet for the selected example /\nconst generatedCode = computed<string>(() => {\n if (isWebhook) {\n return webhookHar.value?.postData?.text ?? ''\n }\n\n return generateCodeSnippet({\n defaultDisabledParameters: false,\n includeDefaultHeaders: integration === 'client',\n clientId: localSelectedClient.value?.id,\n customCodeSamples: customCodeSamples.value,\n operation,\n method,\n path,\n contentType: selectedContentType,\n server: selectedServer,\n securitySchemes,\n example: selectedExampleKey.value,\n globalCookies,\n requestBodyCompositionSelection,\n })\n})\n\n/* The language for the code block, used for syntax highlighting /\nconst codeBlockLanguage = computed(() => {\n if (isWebhook) {\n return webhookLanguage.value\n }\n\n return localSelectedClient.value?.lang\n})\n\n/* Determine the language for webhook content based on MIME type /\nconst webhookLanguage = computed<string>(() => {\n if (!webhookHar.value?.postData) return 'json'\n\n const contentType = webhookHar.value.postData.mimeType\n if (contentType?.includes('json')) return 'json'\n if (contentType?.includes('xml')) return 'xml'\n if (contentType?.includes('yaml') \|\| contentType?.includes('yml'))\n return 'yaml'\n if (contentType?.includes('text/plain')) return 'text'\n\n return 'json'\n})\n\n/* Block secrets from being shown in the code block /\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/* Grab the ref to freeze the ui as the clients change so there's no jump as the size of the dom changes /\nconst elem = ref<ComponentPublicInstance \| null>(null)\n\n/* Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n // We need to freeze the ui to prevent scrolling as the clients change\n if (elem.value) {\n const unfreeze = freezeElement(elem.value.$el)\n setTimeout(() => {\n unfreeze()\n }, 300)\n }\n // Update to the local example\n localSelectedClient.value = option\n\n // Emit the change if it's not a custom example\n if (option && !option.id.startsWith('custom')) {\n eventBus.emit('workspace:update:selected-client', option.id)\n }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n () => (generatedCode.value.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n <ScalarCard\n v-if=\"generatedCode\"\n ref=\"elem\"\n class=\"request-card dark-mode\">\n <!-- Header -->\n <ScalarCardHeader class=\"pr-2.5\">\n <span class=\"sr-only\">Request Example for</span>\n <HttpMethod\n as=\"span\"\n class=\"request-method\"\n :method=\"method\" />\n <span\n v-if=\"generateLabel\"\n v-html=\"generateLabel()\" />\n <slot name=\"header\" />\n <!-- Client picker -->\n <template\n v-if=\"!isWebhook && clients.length\"\n #actions>\n <ScalarCombobox\n class=\"max-h-80\"\n :filterFn=\"filterClientsByQuery\"\n :modelValue=\"localSelectedClient\"\n :options=\"clients\"\n placement=\"bottom-end\"\n teleport\n @update:modelValue=\"selectClient($event as ClientOption)\">\n <ScalarButton\n class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n data-testid=\"client-picker\"\n variant=\"ghost\">\n {{ localSelectedClient?.title }}\n <ScalarIconCaretDown\n class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n weight=\"bold\" />\n </ScalarButton>\n </ScalarCombobox>\n </template>\n </ScalarCardHeader>\n\n <!-- Code snippet -->\n <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n <div\n :id=\"`${id}-example`\"\n class=\"code-snippet\">\n <ScalarCodeBlock\n v-if=\"!shouldVirtualize\"\n class=\"bg-b-2 h-full\"\n :content=\"generatedCode\"\n :hideCredentials=\"secretCredentials\"\n :lang=\"codeBlockLanguage\"\n lineNumbers />\n <ScalarVirtualText\n v-else\n containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n :lineHeight=\"20\"\n :text=\"generatedCode\" />\n </div>\n </ScalarCardSection>\n\n <!-- Footer -->\n <ScalarCardFooter\n v-if=\"Object.keys(requestBodyExamples).length > 1 \|\| $slots.footer\"\n class=\"request-card-footer bg-b-3\">\n <!-- Example picker -->\n <div\n v-if=\"Object.keys(requestBodyExamples).length > 1\"\n class=\"request-card-footer-addon\">\n <template v-if=\"Object.keys(requestBodyExamples).length\">\n <ExamplePicker\n v-model=\"selectedExampleKey\"\n :examples=\"requestBodyExamples\" />\n </template>\n </div>\n\n <!-- Footer -->\n <slot\n :exampleName=\"selectedExampleKey\"\n name=\"footer\" />\n </ScalarCardFooter>\n </ScalarCard>\n\n <!-- Fallback card with just method and path in the case of no examples -->\n <ScalarCard\n v-else-if=\"fallback\"\n class=\"request-card dark-mode\">\n <ScalarCardSection class=\"request-card-simple\">\n <div class=\"request-header\">\n <HttpMethod\n as=\"span\"\n class=\"request-method\"\n :method=\"method\" />\n <slot name=\"header\" />\n </div>\n <slot\n :exampleName=\"selectedExampleKey\"\n name=\"footer\" />\n </ScalarCardSection>\n </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n color: var(--scalar-color-1);\n font-size: var(--scalar-font-size-3);\n}\n.request-method {\n font-family: var(--scalar-font-code);\n text-transform: uppercase;\n margin-right: 6px;\n}\n.request-card-footer {\n display: flex;\n justify-content: flex-end;\n padding: 6px;\n flex-shrink: 0;\n position: relative;\n}\n.request-card-footer-addon {\n display: flex;\n align-items: center;\n\n flex: 1;\n min-width: 0;\n}\n.request-editor-section {\n display: flex;\n flex: 1;\n}\n.request-card-simple {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: 8px 8px 8px 12px;\n\n font-size: var(--scalar-small);\n}\n.code-snippet {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/components/data-table/DataTableInput.vue.d.ts CHANGED Viewed

@@ -39,10 +39,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onInputBlur?: (() => any) | undefined;
 }>, {
     required: boolean;
+    readOnly: boolean;
     lineWrapping: boolean;
     withFakeData: boolean;
     canAddCustomEnumValue: boolean;
-    readOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/v2/components/data-table/DataTableInput.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"names":[],"mappings":"AA4MA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAM/C,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,sEAAsE;IACtE,cAAc,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,kBAAkB,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,4FAA4F;IAC5F,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC;AAuWJ,QAAA,IAAI,OAAO,IAAU,EAAuB,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACvF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO7C,QAAA,MAAM,UAAU;;;;;;;;;;;cA/XD,OAAO;~~kBAUH~~,OAAO;~~kBAEP~~,OAAO;~~2BATE~~,OAAO;~~cACpB~~,OAAO;~~6EA+XpB~~,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"DataTableInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"names":[],"mappings":"AA4MA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAM/C,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,sEAAsE;IACtE,cAAc,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,kBAAkB,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,4FAA4F;IAC5F,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC;AAuWJ,QAAA,IAAI,OAAO,IAAU,EAAuB,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACvF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO7C,QAAA,MAAM,UAAU;;;;;;;;;;;cA/XD,OAAO;cAIP,OAAO;kBAMH,OAAO;kBAEP,OAAO;2BATE,OAAO;6EAgYjC,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/constants.js CHANGED Viewed

@@ -1,6 +1,6 @@
 //#region src/v2/constants.ts
 /** The version number taken from the package.json. Consumers can override at build time via define (e.g. OVERRIDE_PACKAGE_VERSION: JSON.stringify('1.2.3')). */
-var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.5.1";
+var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.6.0";
 //#endregion
 export { APP_VERSION };

package/dist/v2/features/app/App.vue.d.ts CHANGED Viewed

@@ -1,8 +1,6 @@
-import { type ModalState } from '@scalar/components';
 import type { ClientPlugin } from '@scalar/oas-utils/helpers';
-import type { RegistryDocumentsState } from '../../../v2/features/app/hooks/use-sidebar-documents.js';
 import type { CommandPaletteState } from '../../../v2/features/command-palette/hooks/use-command-palette-state.js';
-import type { ImportDocumentFromRegistry } from '../../../v2/types/configuration';
+import type { RegistryAdapter } from '../../../v2/types/configuration';
 import type { ClientLayout } from '../../../v2/types/layout';
 import type { AppState } from './app-state.js';
 /**
@@ -17,13 +15,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     plugins?: ClientPlugin[];
     getAppState: () => AppState;
     getCommandPaletteState: () => CommandPaletteState;
-    /** Fetches the full document from registry by meta. Passed through to route props for sync. */
-    fetchRegistryDocument?: ImportDocumentFromRegistry;
     /**
-     * The list of all available registry documents, with a loading status so the
-     * sidebar can render skeleton placeholders until the real list is ready.
+     * Adapter wiring the API client up to an external registry (Scalar
+     * Cloud or a custom self-hosted setup). The adapter itself is optional
+     * - omit it to opt out of registry features entirely - but every
+     * field on it (`documents`, `namespaces`, `fetchDocument`,
+     * `publishDocument`, `publishVersion`) is required when provided so
+     * the client can rely on the full surface.
      */
-    registryDocuments?: RegistryDocumentsState;
+    registry?: RegistryAdapter;
 }, {
     openCreateWorkspace: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
@@ -31,21 +31,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     plugins?: ClientPlugin[];
     getAppState: () => AppState;
     getCommandPaletteState: () => CommandPaletteState;
-    /** Fetches the full document from registry by meta. Passed through to route props for sync. */
-    fetchRegistryDocument?: ImportDocumentFromRegistry;
     /**
-     * The list of all available registry documents, with a loading status so the
-     * sidebar can render skeleton placeholders until the real list is ready.
+     * Adapter wiring the API client up to an external registry (Scalar
+     * Cloud or a custom self-hosted setup). The adapter itself is optional
+     * - omit it to opt out of registry features entirely - but every
+     * field on it (`documents`, `namespaces`, `fetchDocument`,
+     * `publishDocument`, `publishVersion`) is required when provided so
+     * the client can rely on the full surface.
      */
-    registryDocuments?: RegistryDocumentsState;
+    registry?: RegistryAdapter;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    /**
-     * Slot for customizing the create workspace modal.
-     * This slot is used to render custom actions or components within the create workspace modal.
-     */
-    'create-workspace'?: (payload: {
-        state: ModalState;
-    }) => unknown;
     /**
      * Replaces the Scalar logo inside the header menu button. Typically used by
      * team-aware consumers (e.g. Scalar Cloud) to render a team avatar so the
@@ -66,17 +61,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * any workspace switcher (or other menu content) they need.
      */
     'header-menu-items'?: () => unknown;
-    /**
-     * Slot rendered at the trailing edge of the header, immediately before the
-     * `header-end` slot. Use this for context-specific action buttons (for
-     * example a "Save" button) so they sit next to the document chrome rather
-     * than getting mixed in with the user / account controls in `header-end`.
-     *
-     * When both this slot and `header-end` are provided, a vertical divider is
-     * inserted between them so the two groups read as visually distinct
-     * clusters.
-     */
-    'header-actions'?: () => unknown;
     /**
      * Slot for customizing the end section of the app header.
      * Typically used for user menus, action buttons, or other trailing controls.

package/dist/v2/features/app/App.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"App.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/app/App.vue"],"names":[],"mappings":"~~AAmWA~~,OAAO,~~EAGL,~~KAAK,~~UAAU,EAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,KAAK,~~EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;~~AAe7D~~,OAAO,KAAK,EAAE,~~sBAAsB,EAAE,MAAM,+CAA+C,CAAA;AAC3F,OAAO,KAAK,EAAE,~~mBAAmB,EAAE,MAAM,+DAA+D,CAAA;AAKxG,OAAO,KAAK,~~EAAE~~,~~0BAA0B~~,~~EAAE~~,MAAM,0BAA0B,CAAA;~~AAC1E~~,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAI3C;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;YAER,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC;cAC5B,YAAY,EAAE;iBACX,MAAM,QAAQ;4BACH,MAAM,mBAAmB;IACjD~~,+FAA+F~~;~~4BACvE~~,~~0BAA0B;IAClD;;;OAGG;wBACiB,sBAAsB~~;;;;~~YAVlC~~,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC;cAC5B,YAAY,EAAE;iBACX,MAAM,QAAQ;4BACH,MAAM,mBAAmB;IACjD~~,+FAA+F~~;~~4BACvE~~,~~0BAA0B;IAClD;;;OAGG;wBACiB,sBAAsB~~;;~~IAa1C;;;OAGG;yBACkB,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,OAAO;IAChE~~;;;;;;;;;OASG;oBACa,CAAC,OAAO,EAAE;QAAE,eAAe,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO;IAClE;;;;;OAKG;0BACmB,MAAM,OAAO;IACnC~~;;;;;;;;;OASG;uBACgB,MAAM,OAAO;IAChC~~;;;OAGG;mBACY,MAAM,OAAO;~~EA0a1B~~,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"App.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/app/App.vue"],"names":[],"mappings":"AA4bA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAkB7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+DAA+D,CAAA;AAKxG,OAAO,KAAK,EACV,eAAe,EAEhB,MAAM,0BAA0B,CAAA;AACjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAI3C;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;YAER,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC;cAC5B,YAAY,EAAE;iBACX,MAAM,QAAQ;4BACH,MAAM,mBAAmB;IACjD;;;;;;;OAOG;eACQ,eAAe;;;;YAZlB,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC;cAC5B,YAAY,EAAE;iBACX,MAAM,QAAQ;4BACH,MAAM,mBAAmB;IACjD;;;;;;;OAOG;eACQ,eAAe;;IAsB1B;;;;;;;;;OASG;oBACa,CAAC,OAAO,EAAE;QAAE,eAAe,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO;IAClE;;;;;OAKG;0BACmB,MAAM,OAAO;IACnC;;;OAGG;mBACY,MAAM,OAAO;EAylB1B,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/features/app/App.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"App.vue.js","names":[],"sources":["../../../../src/v2/features/app/App.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Main entry point for the API client for electron and web.\n \n This component handles all events and store business logic for the application.\n /\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n ScalarTeleportRoot,\n useModal,\n type ModalState,\n} from '@scalar/components'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport { extensions } from '@scalar/workspace-store/schemas/extensions'\nimport { computed, onBeforeUnmount, toValue, watch } from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport { SidebarToggle } from '@/v2/components/sidebar'\nimport AppHeader from '@/v2/features/app/components/AppHeader.vue'\nimport AppSidebar from '@/v2/features/app/components/AppSidebar.vue'\nimport CreateWorkspaceModal from '@/v2/features/app/components/CreateWorkspaceModal.vue'\nimport DocumentBreadcrumb from '@/v2/features/app/components/DocumentBreadcrumb.vue'\nimport DocumentSyncIndicator from '@/v2/features/app/components/DocumentSyncIndicator.vue'\nimport SplashScreen from '@/v2/features/app/components/SplashScreen.vue'\nimport type { RouteProps } from '@/v2/features/app/helpers/routes'\nimport { useDocumentWatcher } from '@/v2/features/app/hooks/use-document-watcher'\nimport type { RegistryDocumentsState } from '@/v2/features/app/hooks/use-sidebar-documents'\nimport type { CommandPaletteState } from '@/v2/features/command-palette/hooks/use-command-palette-state'\nimport TheCommandPalette from '@/v2/features/command-palette/TheCommandPalette.vue'\nimport { useMonacoEditorConfiguration } from '@/v2/features/editor'\nimport { useColorMode } from '@/v2/hooks/use-color-mode'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport type { ImportDocumentFromRegistry } from '@/v2/types/configuration'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport type { AppState } from './app-state'\nimport DesktopTabs from './components/DesktopTabs.vue'\n\nconst {\n layout,\n plugins = [],\n getAppState,\n getCommandPaletteState,\n fetchRegistryDocument,\n registryDocuments = { status: 'success', documents: [] },\n} = defineProps<{\n layout: Exclude<ClientLayout, 'modal'>\n plugins?: ClientPlugin[]\n getAppState: () => AppState\n getCommandPaletteState: () => CommandPaletteState\n /* Fetches the full document from registry by meta. Passed through to route props for sync. /\n fetchRegistryDocument?: ImportDocumentFromRegistry\n /\n The list of all available registry documents, with a loading status so the\n * sidebar can render skeleton placeholders until the real list is ready.\n /\n registryDocuments?: RegistryDocumentsState\n}>()\n\ndefineSlots<{\n /\n Slot for customizing the create workspace modal.\n * This slot is used to render custom actions or components within the create workspace modal.\n /\n 'create-workspace'?: (payload: { state: ModalState }) => unknown\n /\n Replaces the Scalar logo inside the header menu button. Typically used by\n * team-aware consumers (e.g. Scalar Cloud) to render a team avatar so the\n * left-most chrome reads as \"this team's workspace\" rather than the\n * generic Scalar wordmark.\n \n Receives `isTeamWorkspace` so consumers can opt into rendering a team\n * image only when the active workspace actually belongs to a team, while\n * keeping the default Scalar logo for local workspaces.\n /\n 'header-logo'?: (payload: { isTeamWorkspace: boolean }) => unknown\n /\n Slot for customizing the menu items section of the app header.\n * Defaults to a workspace picker bound to the current app state. Overriding this slot\n * replaces the default picker entirely, so the consumer is responsible for rendering\n * any workspace switcher (or other menu content) they need.\n /\n 'header-menu-items'?: () => unknown\n /\n Slot rendered at the trailing edge of the header, immediately before the\n * `header-end` slot. Use this for context-specific action buttons (for\n * example a \"Save\" button) so they sit next to the document chrome rather\n * than getting mixed in with the user / account controls in `header-end`.\n \n When both this slot and `header-end` are provided, a vertical divider is\n * inserted between them so the two groups read as visually distinct\n * clusters.\n /\n 'header-actions'?: () => unknown\n /\n Slot for customizing the end section of the app header.\n * Typically used for user menus, action buttons, or other trailing controls.\n /\n 'header-end'?: () => unknown\n}>()\n\ndefineExpose({\n openCreateWorkspace: () => createWorkspaceModalState.show(),\n})\n\nconst app = getAppState()\nconst paletteState = getCommandPaletteState()\n\n/* Expose workspace store to window for debugging purposes. /\nif (typeof window !== 'undefined') {\n window.dataDumpWorkspace = () => app.store.value\n window.dumpAppState = () => app\n}\n\n/* Call lifecycle hooks on plugins and subscribe to event bus events /\nconst pluginUnsubscribes: (() => void)[] = []\n\nfor (const plugin of plugins) {\n plugin.lifecycle?.onInit?.({ config: { telemetry: app.telemetry.value } })\n\n if (plugin.on) {\n for (const [event, handler] of Object.entries(plugin.on)) {\n pluginUnsubscribes.push(app.eventBus.on(event as any, handler as any))\n }\n }\n}\n\n/* Notify plugins when telemetry config changes /\nwatch(app.telemetry, () => {\n for (const plugin of plugins) {\n plugin.lifecycle?.onConfigChange?.({\n config: { telemetry: app.telemetry.value },\n })\n }\n})\n\nonBeforeUnmount(() => {\n for (const unsub of pluginUnsubscribes) {\n unsub()\n }\n for (const plugin of plugins) {\n plugin.lifecycle?.onDestroy?.()\n }\n})\n\n/* Register global hotkeys for the app, passing the workspace event bus and layout state /\nuseGlobalHotKeys(app.eventBus, layout)\n\nconst DEFAULT_DOCUMENT_WATCH_TIMEOUT = 5000\n\n/* Watch the active document for changes and rebase it with its remote source /\nuseDocumentWatcher({\n documentName: () =>\n app.store.value?.workspace[extensions.workspace.activeDocument],\n store: app.store,\n initialTimeout: DEFAULT_DOCUMENT_WATCH_TIMEOUT,\n})\n\n/* Color mode /\nuseColorMode({ workspaceStore: app.store })\n\nconst currentTheme = computed(() => app.theme.styles.value.themeStyles)\nconst isDarkMode = computed(() => app.isDarkMode.value)\n\n/* Setup monaco editor configuration /\nuseMonacoEditorConfiguration({\n theme: currentTheme,\n darkMode: isDarkMode,\n})\n\nconst createWorkspaceModalState = useModal()\n\n/* Props to pass to the RouterView component. */\nconst routerViewProps = computed<RouteProps>(() => {\n return {\n documentSlug: app.activeEntities.documentSlug.value ?? '',\n document: app.store.value?.workspace.activeDocument ?? null,\n environment: app.environment.value,\n eventBus: app.eventBus,\n exampleName: app.activeEntities.exampleName.value,\n fetchRegistryDocument,\n layout,\n method: app.activeEntities.method.value,\n path: app.activeEntities.path.value,\n workspaceStore: app.store.value!,\n activeWorkspace: app.workspace.activeWorkspace.value!,\n isTeamWorkspace: app.workspace.isTeamWorkspace.value,\n plugins,\n isDarkMode: app.isDarkMode.value,\n currentTheme: app.theme.styles.value.themeStyles,\n customThemes: toValue(app.theme.customThemes),\n telemetry: app.telemetry.value,\n onUpdateTelemetry: (value: boolean) => {\n app.telemetry.value = value\n },\n options: app.options,\n }\n})\n</script>\n\n<template>\n <ScalarTeleportRoot>\n <!-- Theme style tag -->\n <div v-html=\"app.theme.themeStyleTag.value\" />\n\n <!-- Toasts -->\n <ScalarToasts />\n\n <!-- Main content -->\n <main\n v-if=\"\n app.store.value !== null &&\n app.workspace.activeWorkspace.value !== null &&\n !app.loading.value\n \">\n <div class=\"relative flex h-dvh w-dvw flex-col\">\n <SidebarToggle\n v-model=\"app.sidebar.isOpen.value\"\n class=\"absolute z-60 md:hidden\"\n :class=\"layout === 'desktop' ? 'top-14 left-4' : 'top-4 left-4'\" />\n <AppHeader\n :menuTitle=\"app.workspace.isTeamWorkspace.value ? 'Team' : 'Local'\"\n @navigate:to:settings=\"\n app.eventBus.emit('ui:navigate', {\n page: 'workspace',\n path: 'settings',\n })\n \">\n <!--\n Only forward the consumer-provided logo (typically a team\n avatar from Scalar Cloud) while the user is actually inside a\n team workspace. Outside of a team context the avatar would be\n misleading, so we omit the `#logo` template entirely and let\n `ScalarMenuButton` fall back to its default Scalar wordmark.\n -->\n <template\n v-if=\"$slots['header-logo'] && app.workspace.isTeamWorkspace.value\"\n #logo>\n <slot\n :isTeamWorkspace=\"app.workspace.isTeamWorkspace.value\"\n name=\"header-logo\" />\n </template>\n <template #menuItems>\n <!--\n The workspace picker used to live here as a submenu. It is now\n surfaced inline in the breadcrumb so the user reaches it in a\n single click. Consumers that want extra menu rows can still\n inject them through the `header-menu-items` slot.\n -->\n <slot name=\"header-menu-items\" />\n </template>\n <template #breadcrumb>\n <DocumentBreadcrumb\n :app=\"app\"\n :fetchRegistryDocument=\"fetchRegistryDocument\"\n :registryDocuments=\"registryDocuments\"\n @createWorkspace=\"createWorkspaceModalState.show()\" />\n </template>\n <template #end>\n <div class=\"flex items-center gap-2\">\n <!--\n Sync status mirrors the icon in the version picker so the\n user can see at a glance whether the active registry-backed\n document is synced / pending push / pending pull / in\n conflict, even when the picker dropdown is closed. We only\n mount it while a document is actually active on the route -\n on workspace-level pages (settings, get-started, etc.)\n there is nothing to sync, and an indicator there would just\n be noise.\n -->\n <DocumentSyncIndicator\n v-if=\"app.activeEntities.documentSlug.value\"\n :app=\"app\"\n :registryDocuments=\"registryDocuments\" />\n <slot\n v-if=\"$slots['header-actions']\"\n name=\"header-actions\" />\n <!--\n Vertical divider between the two trailing slot clusters.\n Only rendered when both `header-actions` and `header-end`\n are provided, so consumers using just one of the slots do\n not get an orphaned separator.\n -->\n <span\n v-if=\"$slots['header-actions'] && $slots['header-end']\"\n aria-hidden=\"true\"\n class=\"bg-border h-4 w-px shrink-0\" />\n <slot\n v-if=\"$slots['header-end']\"\n name=\"header-end\" />\n </div>\n </template>\n </AppHeader>\n <div class=\"flex min-h-0 flex-1 flex-row\">\n <!-- App sidebar -->\n <AppSidebar\n :app=\"app\"\n :fetchRegistryDocument=\"fetchRegistryDocument\"\n :registryDocuments=\"registryDocuments\"\n :sidebarWidth=\"app.sidebar.width.value\"\n @update:sidebarWidth=\"app.sidebar.handleSidebarWidthUpdate\" />\n\n <div class=\"flex min-h-0 flex-1 flex-col\">\n <!-- App Tabs -->\n <DesktopTabs\n v-if=\"layout === 'desktop'\"\n :activeTabIndex=\"app.tabs.activeTabIndex.value\"\n :eventBus=\"app.eventBus\"\n :tabs=\"app.tabs.state.value\" />\n\n <!-- Router view min-h-0 is required for scrolling, do not remove it -->\n <div class=\"bg-b-1 relative min-h-0 flex-1\">\n <RouterView v-bind=\"routerViewProps\" />\n </div>\n </div>\n </div>\n </div>\n\n <slot\n name=\"create-workspace\"\n :state=\"createWorkspaceModalState\">\n <!-- Create workspace modal -->\n <CreateWorkspaceModal\n :state=\"createWorkspaceModalState\"\n @create:workspace=\"(payload) => app.workspace.create(payload)\" />\n </slot>\n <!-- Popup command palette to add resources from anywhere -->\n <TheCommandPalette\n :eventBus=\"app.eventBus\"\n :paletteState=\"paletteState\"\n :workspaceStore=\"app.store.value!\" />\n </main>\n <!-- Splash screen -->\n <main v-else>\n <SplashScreen />\n </main>\n </ScalarTeleportRoot>\n</template>\n\n<style>\n#scalar-client {\n position: relative;\n background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"App.vue.js","names":[],"sources":["../../../../src/v2/features/app/App.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Main entry point for the API client for electron and web.\n \n This component handles all events and store business logic for the application.\n /\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarModal, ScalarTeleportRoot, useModal } from '@scalar/components'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport { extensions } from '@scalar/workspace-store/schemas/extensions'\nimport { computed, onBeforeUnmount, toValue, watch } from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport { SidebarToggle } from '@/v2/components/sidebar'\nimport AppHeader from '@/v2/features/app/components/AppHeader.vue'\nimport AppHeaderActions from '@/v2/features/app/components/AppHeaderActions.vue'\nimport AppSidebar from '@/v2/features/app/components/AppSidebar.vue'\nimport CreateWorkspaceModal from '@/v2/features/app/components/CreateWorkspaceModal.vue'\nimport DocumentBreadcrumb from '@/v2/features/app/components/DocumentBreadcrumb.vue'\nimport PublishDocumentModal from '@/v2/features/app/components/PublishDocumentModal.vue'\nimport SplashScreen from '@/v2/features/app/components/SplashScreen.vue'\nimport SyncConflictResolutionEditor from '@/v2/features/app/components/SyncConflictResolutionEditor.vue'\nimport type { RouteProps } from '@/v2/features/app/helpers/routes'\nimport { useDocumentSync } from '@/v2/features/app/hooks/use-document-sync'\nimport { useDocumentWatcher } from '@/v2/features/app/hooks/use-document-watcher'\nimport type { CommandPaletteState } from '@/v2/features/command-palette/hooks/use-command-palette-state'\nimport TheCommandPalette from '@/v2/features/command-palette/TheCommandPalette.vue'\nimport { useMonacoEditorConfiguration } from '@/v2/features/editor'\nimport { useColorMode } from '@/v2/hooks/use-color-mode'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport type {\n RegistryAdapter,\n RegistryDocumentsState,\n} from '@/v2/types/configuration'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport type { AppState } from './app-state'\nimport DesktopTabs from './components/DesktopTabs.vue'\n\nconst {\n layout,\n plugins = [],\n getAppState,\n getCommandPaletteState,\n registry,\n} = defineProps<{\n layout: Exclude<ClientLayout, 'modal'>\n plugins?: ClientPlugin[]\n getAppState: () => AppState\n getCommandPaletteState: () => CommandPaletteState\n /\n Adapter wiring the API client up to an external registry (Scalar\n * Cloud or a custom self-hosted setup). The adapter itself is optional\n * - omit it to opt out of registry features entirely - but every\n * field on it (`documents`, `namespaces`, `fetchDocument`,\n * `publishDocument`, `publishVersion`) is required when provided so\n * the client can rely on the full surface.\n /\n registry?: RegistryAdapter\n}>()\n\n/\n Reactive view of the registry documents list with a sane default for\n * setups that did not wire an adapter up. The sidebar and breadcrumb\n * read this getter so they keep rendering skeletons / empty states even\n * when the host application has not provided a `registry` prop.\n /\nconst registryDocuments = computed<RegistryDocumentsState>(\n () => registry?.documents ?? { status: 'success', documents: [] },\n)\n\ndefineSlots<{\n /\n Replaces the Scalar logo inside the header menu button. Typically used by\n * team-aware consumers (e.g. Scalar Cloud) to render a team avatar so the\n * left-most chrome reads as \"this team's workspace\" rather than the\n * generic Scalar wordmark.\n \n Receives `isTeamWorkspace` so consumers can opt into rendering a team\n * image only when the active workspace actually belongs to a team, while\n * keeping the default Scalar logo for local workspaces.\n /\n 'header-logo'?: (payload: { isTeamWorkspace: boolean }) => unknown\n /\n Slot for customizing the menu items section of the app header.\n * Defaults to a workspace picker bound to the current app state. Overriding this slot\n * replaces the default picker entirely, so the consumer is responsible for rendering\n * any workspace switcher (or other menu content) they need.\n /\n 'header-menu-items'?: () => unknown\n /\n Slot for customizing the end section of the app header.\n * Typically used for user menus, action buttons, or other trailing controls.\n /\n 'header-end'?: () => unknown\n}>()\n\ndefineExpose({\n openCreateWorkspace: () => createWorkspaceModalState.show(),\n})\n\nconst app = getAppState()\nconst paletteState = getCommandPaletteState()\n\n/* Expose workspace store to window for debugging purposes. /\nif (typeof window !== 'undefined') {\n window.dataDumpWorkspace = () => app.store.value\n window.dumpAppState = () => app\n}\n\n/* Call lifecycle hooks on plugins and subscribe to event bus events /\nconst pluginUnsubscribes: (() => void)[] = []\n\nfor (const plugin of plugins) {\n plugin.lifecycle?.onInit?.({ config: { telemetry: app.telemetry.value } })\n\n if (plugin.on) {\n for (const [event, handler] of Object.entries(plugin.on)) {\n pluginUnsubscribes.push(app.eventBus.on(event as any, handler as any))\n }\n }\n}\n\n/* Notify plugins when telemetry config changes /\nwatch(app.telemetry, () => {\n for (const plugin of plugins) {\n plugin.lifecycle?.onConfigChange?.({\n config: { telemetry: app.telemetry.value },\n })\n }\n})\n\nonBeforeUnmount(() => {\n for (const unsub of pluginUnsubscribes) {\n unsub()\n }\n for (const plugin of plugins) {\n plugin.lifecycle?.onDestroy?.()\n }\n})\n\n/* Register global hotkeys for the app, passing the workspace event bus and layout state /\nuseGlobalHotKeys(app.eventBus, layout)\n\nconst DEFAULT_DOCUMENT_WATCH_TIMEOUT = 5000\n\n/* Watch the active document for changes and rebase it with its remote source /\nuseDocumentWatcher({\n documentName: () =>\n app.store.value?.workspace[extensions.workspace.activeDocument],\n store: app.store,\n initialTimeout: DEFAULT_DOCUMENT_WATCH_TIMEOUT,\n})\n\n/* Color mode /\nuseColorMode({ workspaceStore: app.store })\n\nconst currentTheme = computed(() => app.theme.styles.value.themeStyles)\nconst isDarkMode = computed(() => app.isDarkMode.value)\n\n/* Setup monaco editor configuration /\nuseMonacoEditorConfiguration({\n theme: currentTheme,\n darkMode: isDarkMode,\n})\n\nconst createWorkspaceModalState = useModal()\n\n/\n Owns the document-level Save / Revert / Pull / Push / Publish flow.\n * Keeping it in a dedicated hook leaves this component focused on\n * routing, layout, and slot composition.\n /\nconst {\n showLocalSaveActions,\n showTeamSyncActions,\n showTeamPublishAction,\n hasHeaderActionCluster,\n isActiveDocumentDirty,\n isOffline,\n canPullActiveDocument,\n canPushActiveDocument,\n publishDocumentModalState,\n syncConflictModalState,\n pendingPullState,\n publishDefaultSlug,\n publishDefaultVersion,\n registryNamespaces,\n handleSaveDocument,\n handleRevertDocument,\n handlePullDocument,\n handlePushDocument,\n handlePublishDocument,\n handlePublishDocumentSubmit,\n handleSyncConflictApplyChanges,\n handleSyncConflictModalClose,\n} = useDocumentSync({\n app,\n registry,\n registryDocuments: () => registryDocuments.value,\n})\n\n/* Props to pass to the RouterView component. /\nconst routerViewProps = computed<RouteProps>(() => {\n return {\n documentSlug: app.activeEntities.documentSlug.value ?? '',\n document: app.store.value?.workspace.activeDocument ?? null,\n environment: app.environment.value,\n eventBus: app.eventBus,\n exampleName: app.activeEntities.exampleName.value,\n fetchRegistryDocument: registry?.fetchDocument,\n layout,\n method: app.activeEntities.method.value,\n path: app.activeEntities.path.value,\n workspaceStore: app.store.value!,\n activeWorkspace: app.workspace.activeWorkspace.value!,\n isTeamWorkspace: app.workspace.isTeamWorkspace.value,\n plugins,\n isDarkMode: app.isDarkMode.value,\n currentTheme: app.theme.styles.value.themeStyles,\n customThemes: toValue(app.theme.customThemes),\n telemetry: app.telemetry.value,\n onUpdateTelemetry: (value: boolean) => {\n app.telemetry.value = value\n },\n options: app.options,\n }\n})\n</script>\n\n<template>\n <ScalarTeleportRoot>\n <!-- Theme style tag -->\n <div v-html=\"app.theme.themeStyleTag.value\" />\n\n <!-- Toasts -->\n <ScalarToasts />\n\n <!-- Main content -->\n <main\n v-if=\"\n app.store.value !== null &&\n app.workspace.activeWorkspace.value !== null &&\n !app.loading.value\n \">\n <div class=\"relative flex h-dvh w-dvw flex-col\">\n <SidebarToggle\n v-model=\"app.sidebar.isOpen.value\"\n class=\"absolute z-60 md:hidden\"\n :class=\"layout === 'desktop' ? 'top-14 left-4' : 'top-4 left-4'\" />\n <AppHeader\n :menuTitle=\"app.workspace.isTeamWorkspace.value ? 'Team' : 'Local'\"\n @navigate:to:settings=\"\n app.eventBus.emit('ui:navigate', {\n page: 'workspace',\n path: 'settings',\n })\n \">\n <!--\n Only forward the consumer-provided logo (typically a team\n avatar from Scalar Cloud) while the user is actually inside a\n team workspace. Outside of a team context the avatar would be\n misleading, so we omit the `#logo` template entirely and let\n `ScalarMenuButton` fall back to its default Scalar wordmark.\n -->\n <template\n v-if=\"$slots['header-logo'] && app.workspace.isTeamWorkspace.value\"\n #logo>\n <slot\n :isTeamWorkspace=\"app.workspace.isTeamWorkspace.value\"\n name=\"header-logo\" />\n </template>\n <template #menuItems>\n <!--\n The workspace picker used to live here as a submenu. It is now\n surfaced inline in the breadcrumb so the user reaches it in a\n single click. Consumers that want extra menu rows can still\n inject them through the `header-menu-items` slot.\n -->\n <slot name=\"header-menu-items\" />\n </template>\n <template #breadcrumb>\n <DocumentBreadcrumb\n :app=\"app\"\n :fetchRegistryDocument=\"registry?.fetchDocument\"\n :registryDocuments=\"registryDocuments\"\n @createWorkspace=\"createWorkspaceModalState.show()\" />\n </template>\n <!--\n Only forward the trailing `#end` cluster when it has actual\n content. The action clusters and the consumer slots all gate\n independently, so we mirror those conditions on the wrapper to\n avoid mounting an empty cluster that would otherwise leak a\n stray divider.\n -->\n <template\n v-if=\"\n hasHeaderActionCluster \|\|\n $slots['header-actions'] \|\|\n $slots['header-end']\n \"\n #end>\n <div class=\"flex items-center gap-2\">\n <AppHeaderActions\n :canPullActiveDocument=\"canPullActiveDocument\"\n :canPushActiveDocument=\"canPushActiveDocument\"\n :isActiveDocumentDirty=\"isActiveDocumentDirty\"\n :isOffline=\"isOffline\"\n :showLocalSaveActions=\"showLocalSaveActions\"\n :showTeamPublishAction=\"showTeamPublishAction\"\n :showTeamSyncActions=\"showTeamSyncActions\"\n @publish=\"handlePublishDocument\"\n @pull=\"handlePullDocument\"\n @push=\"handlePushDocument\"\n @revert=\"handleRevertDocument\"\n @save=\"handleSaveDocument\" />\n <!--\n Vertical divider between the document-scoped action cluster\n (workspace-mode buttons + `header-actions`) and the trailing\n `header-end` cluster. Only rendered when both sides have\n content so single-cluster headers do not get an orphaned\n separator.\n -->\n <span\n v-if=\"$slots['header-end']\"\n aria-hidden=\"true\"\n class=\"bg-border h-4 w-px shrink-0\" />\n <slot\n v-if=\"$slots['header-end']\"\n name=\"header-end\" />\n </div>\n </template>\n </AppHeader>\n <div class=\"flex min-h-0 flex-1 flex-row\">\n <!-- App sidebar -->\n <AppSidebar\n :app=\"app\"\n :fetchRegistryDocument=\"registry?.fetchDocument\"\n :registryDocuments=\"registryDocuments\"\n :sidebarWidth=\"app.sidebar.width.value\"\n @update:sidebarWidth=\"app.sidebar.handleSidebarWidthUpdate\" />\n\n <div class=\"flex min-h-0 flex-1 flex-col\">\n <!-- App Tabs -->\n <DesktopTabs\n v-if=\"layout === 'desktop'\"\n :activeTabIndex=\"app.tabs.activeTabIndex.value\"\n :eventBus=\"app.eventBus\"\n :tabs=\"app.tabs.state.value\" />\n\n <!-- Router view min-h-0 is required for scrolling, do not remove it -->\n <div class=\"bg-b-1 relative min-h-0 flex-1\">\n <RouterView v-bind=\"routerViewProps\" />\n </div>\n </div>\n </div>\n </div>\n <!-- Create workspace modal -->\n <CreateWorkspaceModal\n :state=\"createWorkspaceModalState\"\n @create:workspace=\"(payload) => app.workspace.create(payload)\" />\n\n <!--\n First-time publish modal. Only mounted when a registry adapter\n is wired up - without one there is nothing meaningful to send,\n and the modal would never be opened anyway.\n -->\n <PublishDocumentModal\n v-if=\"registry\"\n :defaultSlug=\"publishDefaultSlug\"\n :defaultVersion=\"publishDefaultVersion\"\n :namespaces=\"registryNamespaces\"\n :state=\"publishDocumentModalState\"\n @submit=\"handlePublishDocumentSubmit\" />\n <!--\n Three-way merge editor for the Pull flow. We mount it lazily on\n `pendingPullState` so the heavy Monaco editors only spin up when\n a pull actually has conflicts to walk through. The full-size\n layout mirrors `DocumentCollection.vue`'s sync modal so the\n editor has enough room to render the local / remote / result\n panes side-by-side.\n -->\n <ScalarModal\n v-if=\"pendingPullState\"\n bodyClass=\"sync-conflict-modal-root flex h-dvh flex-col p-4\"\n maxWidth=\"calc(100dvw - 32px)\"\n size=\"full\"\n :state=\"syncConflictModalState\"\n @close=\"handleSyncConflictModalClose\">\n <div class=\"flex h-full w-full flex-col gap-4 overflow-hidden\">\n <SyncConflictResolutionEditor\n :baseDocument=\"pendingPullState.rebaseResult.originalDocument\"\n :conflicts=\"pendingPullState.rebaseResult.conflicts\"\n :resolvedDocument=\"pendingPullState.rebaseResult.resolvedDocument\"\n @applyChanges=\"handleSyncConflictApplyChanges\" />\n </div>\n </ScalarModal>\n <!-- Popup command palette to add resources from anywhere -->\n <TheCommandPalette\n :eventBus=\"app.eventBus\"\n :paletteState=\"paletteState\"\n :workspaceStore=\"app.store.value!\" />\n </main>\n <!-- Splash screen -->\n <main v-else>\n <SplashScreen />\n </main>\n </ScalarTeleportRoot>\n</template>\n\n<style>\n#scalar-client {\n position: relative;\n background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n\n/\n * The three-way merge editor needs the full viewport to fit its three\n * Monaco panes. `DocumentCollection.vue` ships the same override for\n * its in-page Sync modal, but the pull flow can run without that view\n * being mounted, so we duplicate the rule here to keep the modal\n * full-bleed.\n */\n.full-size-styles:has(.sync-conflict-modal-root) {\n width: 100dvw !important;\n max-width: 100dvw !important;\n border-right: none !important;\n}\n\n.full-size-styles:has(.sync-conflict-modal-root)::after {\n display: none;\n}\n</style>\n"],"mappings":""}