@scalar/api-client 3.10.4 → 3.12.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 (151) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/plugins/posthog/sanitize-event-payload.d.ts.map +1 -1
  3. package/dist/plugins/posthog/sanitize-event-payload.js +1 -0
  4. package/dist/plugins/posthog/sanitize-event-payload.js.map +1 -1
  5. package/dist/style.css +25 -74
  6. package/dist/v2/blocks/operation-block/OperationBlock.vue.d.ts.map +1 -1
  7. package/dist/v2/blocks/operation-block/OperationBlock.vue.js.map +1 -1
  8. package/dist/v2/blocks/operation-block/OperationBlock.vue.script.js +10 -1
  9. package/dist/v2/blocks/operation-block/OperationBlock.vue.script.js.map +1 -1
  10. package/dist/v2/blocks/operation-block/helpers/send-request.d.ts +7 -1
  11. package/dist/v2/blocks/operation-block/helpers/send-request.d.ts.map +1 -1
  12. package/dist/v2/blocks/operation-block/helpers/send-request.js +2 -2
  13. package/dist/v2/blocks/operation-block/helpers/send-request.js.map +1 -1
  14. package/dist/v2/blocks/operation-block/helpers/validate-path-parameters.d.ts.map +1 -1
  15. package/dist/v2/blocks/operation-block/helpers/validate-path-parameters.js +1 -2
  16. package/dist/v2/blocks/operation-block/helpers/validate-path-parameters.js.map +1 -1
  17. package/dist/v2/blocks/request-block/RequestBlock.vue.d.ts +1 -1
  18. package/dist/v2/blocks/request-block/RequestBlock.vue.d.ts.map +1 -1
  19. package/dist/v2/blocks/request-block/RequestBlock.vue.js +1 -1
  20. package/dist/v2/blocks/request-block/RequestBlock.vue.js.map +1 -1
  21. package/dist/v2/blocks/request-block/RequestBlock.vue.script.js +48 -11
  22. package/dist/v2/blocks/request-block/RequestBlock.vue.script.js.map +1 -1
  23. package/dist/v2/blocks/request-block/components/RequestCodeSnippet.vue.d.ts +2 -2
  24. package/dist/v2/blocks/request-block/components/RequestCodeSnippet.vue.d.ts.map +1 -1
  25. package/dist/v2/blocks/request-block/components/RequestCodeSnippet.vue.js.map +1 -1
  26. package/dist/v2/blocks/request-block/components/RequestCodeSnippet.vue.script.js +2 -6
  27. package/dist/v2/blocks/request-block/components/RequestCodeSnippet.vue.script.js.map +1 -1
  28. package/dist/v2/blocks/request-block/components/RequestParams.vue.d.ts +4 -0
  29. package/dist/v2/blocks/request-block/components/RequestParams.vue.d.ts.map +1 -1
  30. package/dist/v2/blocks/request-block/components/RequestParams.vue.js.map +1 -1
  31. package/dist/v2/blocks/request-block/components/RequestParams.vue.script.js.map +1 -1
  32. package/dist/v2/blocks/request-block/components/RequestTable.vue.d.ts +3 -11
  33. package/dist/v2/blocks/request-block/components/RequestTable.vue.d.ts.map +1 -1
  34. package/dist/v2/blocks/request-block/components/RequestTable.vue.js +1 -1
  35. package/dist/v2/blocks/request-block/components/RequestTable.vue.js.map +1 -1
  36. package/dist/v2/blocks/request-block/components/RequestTable.vue.script.js.map +1 -1
  37. package/dist/v2/blocks/request-block/components/RequestTableRow.vue.d.ts +8 -10
  38. package/dist/v2/blocks/request-block/components/RequestTableRow.vue.d.ts.map +1 -1
  39. package/dist/v2/blocks/request-block/components/RequestTableRow.vue.js.map +1 -1
  40. package/dist/v2/blocks/request-block/components/RequestTableRow.vue.script.js +27 -11
  41. package/dist/v2/blocks/request-block/components/RequestTableRow.vue.script.js.map +1 -1
  42. package/dist/v2/blocks/request-block/helpers/create-parameter-handlers.d.ts +9 -6
  43. package/dist/v2/blocks/request-block/helpers/create-parameter-handlers.d.ts.map +1 -1
  44. package/dist/v2/blocks/request-block/helpers/create-parameter-handlers.js +45 -4
  45. package/dist/v2/blocks/request-block/helpers/create-parameter-handlers.js.map +1 -1
  46. package/dist/v2/blocks/request-block/helpers/create-parameter-rows.d.ts +4 -0
  47. package/dist/v2/blocks/request-block/helpers/create-parameter-rows.d.ts.map +1 -1
  48. package/dist/v2/blocks/request-block/helpers/create-parameter-rows.js +94 -10
  49. package/dist/v2/blocks/request-block/helpers/create-parameter-rows.js.map +1 -1
  50. package/dist/v2/blocks/request-block/helpers/get-form-body-rows.js +1 -1
  51. package/dist/v2/blocks/scalar-auth-selector-block/helpers/oauth.js +1 -1
  52. package/dist/v2/components/data-table/DataTableInput.vue.d.ts +1 -1
  53. package/dist/v2/components/data-table/DataTableInput.vue.d.ts.map +1 -1
  54. package/dist/v2/constants.js +1 -1
  55. package/dist/v2/features/modal/Modal.vue.js.map +1 -1
  56. package/dist/v2/features/modal/Modal.vue.script.js +1 -1
  57. package/dist/v2/features/modal/Modal.vue.script.js.map +1 -1
  58. package/dist/v2/features/modal/helpers/create-api-client-modal.js +1 -1
  59. package/dist/v2/features/operation/Operation.vue.script.js +1 -1
  60. package/dist/v2/workspace-events.d.ts.map +1 -1
  61. package/dist/v2/workspace-events.js +1 -0
  62. package/dist/v2/workspace-events.js.map +1 -1
  63. package/dist/vue-styles.css +10 -52
  64. package/package.json +13 -24
  65. package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.d.ts +0 -16
  66. package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.d.ts.map +0 -1
  67. package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.js +0 -7
  68. package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.js.map +0 -1
  69. package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.script.js +0 -53
  70. package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.script.js.map +0 -1
  71. package/dist/v2/blocks/operation-code-sample/components/HttpMethod.vue.d.ts +0 -26
  72. package/dist/v2/blocks/operation-code-sample/components/HttpMethod.vue.d.ts.map +0 -1
  73. package/dist/v2/blocks/operation-code-sample/components/HttpMethod.vue.js +0 -7
  74. package/dist/v2/blocks/operation-code-sample/components/HttpMethod.vue.js.map +0 -1
  75. package/dist/v2/blocks/operation-code-sample/components/HttpMethod.vue.script.js +0 -33
  76. package/dist/v2/blocks/operation-code-sample/components/HttpMethod.vue.script.js.map +0 -1
  77. package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.d.ts +0 -141
  78. package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.d.ts.map +0 -1
  79. package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.js +0 -9
  80. package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.js.map +0 -1
  81. package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.script.js +0 -272
  82. package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.script.js.map +0 -1
  83. package/dist/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.d.ts +0 -9
  84. package/dist/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.d.ts.map +0 -1
  85. package/dist/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.js +0 -37
  86. package/dist/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.js.map +0 -1
  87. package/dist/v2/blocks/operation-code-sample/helpers/find-client.d.ts +0 -41
  88. package/dist/v2/blocks/operation-code-sample/helpers/find-client.d.ts.map +0 -1
  89. package/dist/v2/blocks/operation-code-sample/helpers/find-client.js +0 -48
  90. package/dist/v2/blocks/operation-code-sample/helpers/find-client.js.map +0 -1
  91. package/dist/v2/blocks/operation-code-sample/helpers/format-language.d.ts +0 -8
  92. package/dist/v2/blocks/operation-code-sample/helpers/format-language.d.ts.map +0 -1
  93. package/dist/v2/blocks/operation-code-sample/helpers/format-language.js +0 -70
  94. package/dist/v2/blocks/operation-code-sample/helpers/format-language.js.map +0 -1
  95. package/dist/v2/blocks/operation-code-sample/helpers/generate-client-options.d.ts +0 -30
  96. package/dist/v2/blocks/operation-code-sample/helpers/generate-client-options.d.ts.map +0 -1
  97. package/dist/v2/blocks/operation-code-sample/helpers/generate-client-options.js +0 -63
  98. package/dist/v2/blocks/operation-code-sample/helpers/generate-client-options.js.map +0 -1
  99. package/dist/v2/blocks/operation-code-sample/helpers/generate-code-snippet.d.ts +0 -39
  100. package/dist/v2/blocks/operation-code-sample/helpers/generate-code-snippet.d.ts.map +0 -1
  101. package/dist/v2/blocks/operation-code-sample/helpers/generate-code-snippet.js +0 -38
  102. package/dist/v2/blocks/operation-code-sample/helpers/generate-code-snippet.js.map +0 -1
  103. package/dist/v2/blocks/operation-code-sample/helpers/get-clients.d.ts +0 -13
  104. package/dist/v2/blocks/operation-code-sample/helpers/get-clients.d.ts.map +0 -1
  105. package/dist/v2/blocks/operation-code-sample/helpers/get-clients.js +0 -37
  106. package/dist/v2/blocks/operation-code-sample/helpers/get-clients.js.map +0 -1
  107. package/dist/v2/blocks/operation-code-sample/helpers/get-custom-code-samples.d.ts +0 -45
  108. package/dist/v2/blocks/operation-code-sample/helpers/get-custom-code-samples.d.ts.map +0 -1
  109. package/dist/v2/blocks/operation-code-sample/helpers/get-custom-code-samples.js +0 -84
  110. package/dist/v2/blocks/operation-code-sample/helpers/get-custom-code-samples.js.map +0 -1
  111. package/dist/v2/blocks/operation-code-sample/helpers/get-resolved-ref-deep.d.ts +0 -27
  112. package/dist/v2/blocks/operation-code-sample/helpers/get-resolved-ref-deep.d.ts.map +0 -1
  113. package/dist/v2/blocks/operation-code-sample/helpers/get-resolved-ref-deep.js +0 -41
  114. package/dist/v2/blocks/operation-code-sample/helpers/get-resolved-ref-deep.js.map +0 -1
  115. package/dist/v2/blocks/operation-code-sample/helpers/get-secrets.d.ts +0 -4
  116. package/dist/v2/blocks/operation-code-sample/helpers/get-secrets.d.ts.map +0 -1
  117. package/dist/v2/blocks/operation-code-sample/helpers/get-secrets.js +0 -18
  118. package/dist/v2/blocks/operation-code-sample/helpers/get-secrets.js.map +0 -1
  119. package/dist/v2/blocks/operation-code-sample/helpers/get-snippet.d.ts +0 -8
  120. package/dist/v2/blocks/operation-code-sample/helpers/get-snippet.d.ts.map +0 -1
  121. package/dist/v2/blocks/operation-code-sample/helpers/get-snippet.js +0 -38
  122. package/dist/v2/blocks/operation-code-sample/helpers/get-snippet.js.map +0 -1
  123. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har.d.ts +0 -72
  124. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har.d.ts.map +0 -1
  125. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har.js +0 -114
  126. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har.js.map +0 -1
  127. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-body.d.ts +0 -13
  128. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-body.d.ts.map +0 -1
  129. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-body.js +0 -196
  130. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-body.js.map +0 -1
  131. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-parameters.d.ts +0 -24
  132. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-parameters.d.ts.map +0 -1
  133. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-parameters.js +0 -237
  134. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-parameters.js.map +0 -1
  135. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.d.ts +0 -15
  136. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.d.ts.map +0 -1
  137. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.js +0 -65
  138. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.js.map +0 -1
  139. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-server-url.d.ts +0 -6
  140. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-server-url.d.ts.map +0 -1
  141. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-server-url.js +0 -19
  142. package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-server-url.js.map +0 -1
  143. package/dist/v2/blocks/operation-code-sample/index.d.ts +0 -9
  144. package/dist/v2/blocks/operation-code-sample/index.d.ts.map +0 -1
  145. package/dist/v2/blocks/operation-code-sample/index.js +0 -8
  146. package/dist/v2/blocks/operation-code-sample/types.d.ts +0 -46
  147. package/dist/v2/blocks/operation-code-sample/types.d.ts.map +0 -1
  148. package/dist/v2/blocks/request-block/helpers/is-param-disabled.d.ts +0 -13
  149. package/dist/v2/blocks/request-block/helpers/is-param-disabled.d.ts.map +0 -1
  150. package/dist/v2/blocks/request-block/helpers/is-param-disabled.js +0 -21
  151. package/dist/v2/blocks/request-block/helpers/is-param-disabled.js.map +0 -1
@@ -1,9 +0,0 @@
1
- import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
2
- import OperationCodeSample_vue_vue_type_script_setup_true_lang_default from "./OperationCodeSample.vue.script.js";
3
- /* empty css */
4
- //#region src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue
5
- var OperationCodeSample_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationCodeSample_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-70ede25b"]]);
6
- //#endregion
7
- export { OperationCodeSample_default as default };
8
-
9
- //# sourceMappingURL=OperationCodeSample.vue.js.map
@@ -1 +0,0 @@
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 * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n *\n * Typed as a plain string: unioning the (large) client-id union with the `custom/...`\n * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.\n *\n * @defaults to a custom sample if one is available, otherwise shell/curl\n */\n selectedClient?: string\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 { ScalarButton } from '@scalar/components/button'\nimport {\n ScalarCard,\n ScalarCardFooter,\n ScalarCardHeader,\n ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\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 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(\n customCodeSamples.value.samples,\n clientOptions,\n customCodeSamples.value.label,\n ),\n)\n\n/** Total number of available clients across all option groups */\nconst clientCount = computed(() =>\n clients.value.reduce((total, group) => total + group.options.length, 0),\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/**\n * Re-resolve the local client whenever the global selection or the available\n * clients change. Watching `clients` matters when navigating between operations:\n * the stored id stays the same, but the matching option (e.g. a custom sample)\n * differs per operation, so without this the snippet could go stale.\n */\nwatch([() => selectedClient, clients], ([newClient]) => {\n const client = findClient(clients.value, newClient)\n if (client) {\n localSelectedClient.value = client\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.samples,\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 // Sync the selection globally so other operations follow along. Custom samples\n // sync too (keyed by language), so picking e.g. the Python SDK example here\n // shows the Python example on every operation that ships one.\n if (option) {\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 && clientCount\"\n #actions>\n <!-- Multiple clients: render a dropdown to switch between them -->\n <ScalarCombobox\n v-if=\"clientCount > 1\"\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 <!-- Single client: just show its label, no need for a dropdown -->\n <span\n v-else\n class=\"text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal\"\n data-testid=\"client-picker\">\n {{ localSelectedClient?.title }}\n </span>\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":""}
@@ -1,272 +0,0 @@
1
- import ExamplePicker_default from "./ExamplePicker.vue.js";
2
- import HttpMethod_default from "./HttpMethod.vue.js";
3
- import { operationToHar } from "../helpers/operation-to-har/operation-to-har.js";
4
- import { filterClientsByQuery } from "../helpers/filter-clients-by-query.js";
5
- import { findClient } from "../helpers/find-client.js";
6
- import { getCustomCodeSamples } from "../helpers/get-custom-code-samples.js";
7
- import { getClients } from "../helpers/get-clients.js";
8
- import { getSecrets } from "../helpers/get-secrets.js";
9
- import { generateCodeSnippet } from "../helpers/generate-code-snippet.js";
10
- import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, onBeforeMount, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, watch, withCtx } from "vue";
11
- import { ScalarButton } from "@scalar/components/button";
12
- import { ScalarIconCaretDown } from "@scalar/icons";
13
- import { ScalarCombobox } from "@scalar/components/combobox";
14
- import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
15
- import { ScalarCard, ScalarCardFooter, ScalarCardHeader, ScalarCardSection } from "@scalar/components/card";
16
- import { ScalarCodeBlock } from "@scalar/components/code-block";
17
- import { ScalarVirtualText } from "@scalar/components/virtual-text";
18
- import { freezeElement } from "@scalar/helpers/dom/freeze-element";
19
- //#region src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue?vue&type=script&setup=true&lang.ts
20
- var _hoisted_1 = ["innerHTML"];
21
- var _hoisted_2 = {
22
- key: 1,
23
- class: "text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal",
24
- "data-testid": "client-picker"
25
- };
26
- var _hoisted_3 = ["id"];
27
- var _hoisted_4 = {
28
- key: 0,
29
- class: "request-card-footer-addon"
30
- };
31
- var _hoisted_5 = { class: "request-header" };
32
- var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
33
- __name: "OperationCodeSample",
34
- props: /* @__PURE__ */ mergeModels({
35
- integration: {},
36
- clientOptions: {},
37
- selectedClient: {},
38
- selectedServer: { default: null },
39
- selectedContentType: {},
40
- selectedExample: {},
41
- eventBus: {},
42
- securitySchemes: { default: () => [] },
43
- method: {},
44
- path: {},
45
- operation: {},
46
- fallback: { type: Boolean },
47
- generateLabel: { type: Function },
48
- isWebhook: { type: Boolean },
49
- globalCookies: {},
50
- requestBodyCompositionSelection: {}
51
- }, {
52
- "selectedExample": { default: "" },
53
- "selectedExampleModifiers": {}
54
- }),
55
- emits: ["update:selectedExample"],
56
- setup(__props) {
57
- /** Grab the examples for the given content type */
58
- const requestBodyExamples = computed(() => {
59
- const content = getResolvedRef(__props.operation.requestBody)?.content ?? {};
60
- const contentType = __props.selectedContentType || Object.keys(content)[0];
61
- if (!contentType) return {};
62
- return content[contentType]?.examples ?? {};
63
- });
64
- /** The currently selected example key with v-model support */
65
- const selectedExampleKey = useModel(__props, "selectedExample");
66
- onBeforeMount(() => {
67
- selectedExampleKey.value ||= Object.keys(requestBodyExamples.value)[0] ?? "";
68
- });
69
- /** Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example */
70
- watch(() => __props.selectedContentType, () => {
71
- if (!Object.keys(requestBodyExamples.value).includes(selectedExampleKey.value)) selectedExampleKey.value = Object.keys(requestBodyExamples.value)[0] ?? "";
72
- });
73
- /** Grab any custom code samples from the operation */
74
- const customCodeSamples = computed(() => getCustomCodeSamples(__props.operation));
75
- /** Merge custom code samples with the client options */
76
- const clients = computed(() => getClients(customCodeSamples.value.samples, __props.clientOptions, customCodeSamples.value.label));
77
- /** Total number of available clients across all option groups */
78
- const clientCount = computed(() => clients.value.reduce((total, group) => total + group.options.length, 0));
79
- /** The locally selected client which would include code samples from this operation only */
80
- const localSelectedClient = ref(findClient(clients.value, __props.selectedClient));
81
- /**
82
- * Re-resolve the local client whenever the global selection or the available
83
- * clients change. Watching `clients` matters when navigating between operations:
84
- * the stored id stays the same, but the matching option (e.g. a custom sample)
85
- * differs per operation, so without this the snippet could go stale.
86
- */
87
- watch([() => __props.selectedClient, clients], ([newClient]) => {
88
- const client = findClient(clients.value, newClient);
89
- if (client) localSelectedClient.value = client;
90
- });
91
- /** Generate HAR data for webhook requests */
92
- const webhookHar = computed(() => {
93
- if (!__props.isWebhook) return null;
94
- try {
95
- return operationToHar({
96
- operation: __props.operation,
97
- method: __props.method,
98
- path: __props.path,
99
- example: selectedExampleKey.value,
100
- requestBodyCompositionSelection: __props.requestBodyCompositionSelection,
101
- defaultDisabledParameters: false
102
- });
103
- } catch (error) {
104
- console.error("[webhookHar]", error);
105
- return null;
106
- }
107
- });
108
- /** Generate the code snippet for the selected example */
109
- const generatedCode = computed(() => {
110
- if (__props.isWebhook) return webhookHar.value?.postData?.text ?? "";
111
- return generateCodeSnippet({
112
- defaultDisabledParameters: false,
113
- includeDefaultHeaders: __props.integration === "client",
114
- clientId: localSelectedClient.value?.id,
115
- customCodeSamples: customCodeSamples.value.samples,
116
- operation: __props.operation,
117
- method: __props.method,
118
- path: __props.path,
119
- contentType: __props.selectedContentType,
120
- server: __props.selectedServer,
121
- securitySchemes: __props.securitySchemes,
122
- example: selectedExampleKey.value,
123
- globalCookies: __props.globalCookies,
124
- requestBodyCompositionSelection: __props.requestBodyCompositionSelection
125
- });
126
- });
127
- /** The language for the code block, used for syntax highlighting */
128
- const codeBlockLanguage = computed(() => {
129
- if (__props.isWebhook) return webhookLanguage.value;
130
- return localSelectedClient.value?.lang;
131
- });
132
- /** Determine the language for webhook content based on MIME type */
133
- const webhookLanguage = computed(() => {
134
- if (!webhookHar.value?.postData) return "json";
135
- const contentType = webhookHar.value.postData.mimeType;
136
- if (contentType?.includes("json")) return "json";
137
- if (contentType?.includes("xml")) return "xml";
138
- if (contentType?.includes("yaml") || contentType?.includes("yml")) return "yaml";
139
- if (contentType?.includes("text/plain")) return "text";
140
- return "json";
141
- });
142
- /** Block secrets from being shown in the code block */
143
- const secretCredentials = computed(() => getSecrets(__props.securitySchemes));
144
- /** Grab the ref to freeze the ui as the clients change so there's no jump as the size of the dom changes */
145
- const elem = ref(null);
146
- /** Set custom example, or update the selected HTTP client globally */
147
- const selectClient = (option) => {
148
- if (elem.value) {
149
- const unfreeze = freezeElement(elem.value.$el);
150
- setTimeout(() => {
151
- unfreeze();
152
- }, 300);
153
- }
154
- localSelectedClient.value = option;
155
- if (option) __props.eventBus.emit("workspace:update:selected-client", option.id);
156
- };
157
- const VIRTUALIZATION_THRESHOLD = 2e4;
158
- const shouldVirtualize = computed(() => (generatedCode.value.length ?? 0) > VIRTUALIZATION_THRESHOLD);
159
- const id = useId();
160
- return (_ctx, _cache) => {
161
- return generatedCode.value ? (openBlock(), createBlock(unref(ScalarCard), {
162
- key: 0,
163
- ref_key: "elem",
164
- ref: elem,
165
- class: "request-card dark-mode"
166
- }, {
167
- default: withCtx(() => [
168
- createVNode(unref(ScalarCardHeader), { class: "pr-2.5" }, createSlots({
169
- default: withCtx(() => [
170
- _cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Request Example for", -1)),
171
- createVNode(HttpMethod_default, {
172
- as: "span",
173
- class: "request-method",
174
- method: __props.method
175
- }, null, 8, ["method"]),
176
- __props.generateLabel ? (openBlock(), createElementBlock("span", {
177
- key: 0,
178
- innerHTML: __props.generateLabel()
179
- }, null, 8, _hoisted_1)) : createCommentVNode("", true),
180
- renderSlot(_ctx.$slots, "header", {}, void 0, true)
181
- ]),
182
- _: 2
183
- }, [!__props.isWebhook && clientCount.value ? {
184
- name: "actions",
185
- fn: withCtx(() => [clientCount.value > 1 ? (openBlock(), createBlock(unref(ScalarCombobox), {
186
- key: 0,
187
- class: "max-h-80",
188
- filterFn: unref(filterClientsByQuery),
189
- modelValue: localSelectedClient.value,
190
- options: clients.value,
191
- placement: "bottom-end",
192
- teleport: "",
193
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectClient($event))
194
- }, {
195
- default: withCtx(() => [createVNode(unref(ScalarButton), {
196
- 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",
197
- "data-testid": "client-picker",
198
- variant: "ghost"
199
- }, {
200
- default: withCtx(() => [createTextVNode(toDisplayString(localSelectedClient.value?.title) + " ", 1), createVNode(unref(ScalarIconCaretDown), {
201
- class: "ui-open:rotate-180 mt-px size-3 transition-transform duration-100",
202
- weight: "bold"
203
- })]),
204
- _: 1
205
- })]),
206
- _: 1
207
- }, 8, [
208
- "filterFn",
209
- "modelValue",
210
- "options"
211
- ])) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(localSelectedClient.value?.title), 1))]),
212
- key: "0"
213
- } : void 0]), 1024),
214
- createVNode(unref(ScalarCardSection), { class: "request-editor-section custom-scroll p-0" }, {
215
- default: withCtx(() => [createElementVNode("div", {
216
- id: `${unref(id)}-example`,
217
- class: "code-snippet"
218
- }, [!shouldVirtualize.value ? (openBlock(), createBlock(unref(ScalarCodeBlock), {
219
- key: 0,
220
- class: "bg-b-2 h-full",
221
- content: generatedCode.value,
222
- hideCredentials: secretCredentials.value,
223
- lang: codeBlockLanguage.value,
224
- lineNumbers: ""
225
- }, null, 8, [
226
- "content",
227
- "hideCredentials",
228
- "lang"
229
- ])) : (openBlock(), createBlock(unref(ScalarVirtualText), {
230
- key: 1,
231
- containerClass: "custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen",
232
- contentClass: "language-plaintext whitespace-pre font-code text-base p-2",
233
- lineHeight: 20,
234
- text: generatedCode.value
235
- }, null, 8, ["text"]))], 8, _hoisted_3)]),
236
- _: 1
237
- }),
238
- Object.keys(requestBodyExamples.value).length > 1 || _ctx.$slots.footer ? (openBlock(), createBlock(unref(ScalarCardFooter), {
239
- key: 0,
240
- class: "request-card-footer bg-b-3"
241
- }, {
242
- default: withCtx(() => [Object.keys(requestBodyExamples.value).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_4, [Object.keys(requestBodyExamples.value).length ? (openBlock(), createBlock(ExamplePicker_default, {
243
- key: 0,
244
- modelValue: selectedExampleKey.value,
245
- "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedExampleKey.value = $event),
246
- examples: requestBodyExamples.value
247
- }, null, 8, ["modelValue", "examples"])) : createCommentVNode("", true)])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", { exampleName: selectedExampleKey.value }, void 0, true)]),
248
- _: 3
249
- })) : createCommentVNode("", true)
250
- ]),
251
- _: 3
252
- }, 512)) : __props.fallback ? (openBlock(), createBlock(unref(ScalarCard), {
253
- key: 1,
254
- class: "request-card dark-mode"
255
- }, {
256
- default: withCtx(() => [createVNode(unref(ScalarCardSection), { class: "request-card-simple" }, {
257
- default: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(HttpMethod_default, {
258
- as: "span",
259
- class: "request-method",
260
- method: __props.method
261
- }, null, 8, ["method"]), renderSlot(_ctx.$slots, "header", {}, void 0, true)]), renderSlot(_ctx.$slots, "footer", { exampleName: selectedExampleKey.value }, void 0, true)]),
262
- _: 3
263
- })]),
264
- _: 3
265
- })) : createCommentVNode("", true);
266
- };
267
- }
268
- });
269
- //#endregion
270
- export { OperationCodeSample_vue_vue_type_script_setup_true_lang_default as default };
271
-
272
- //# sourceMappingURL=OperationCodeSample.vue.script.js.map
@@ -1 +0,0 @@
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 * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n *\n * Typed as a plain string: unioning the (large) client-id union with the `custom/...`\n * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.\n *\n * @defaults to a custom sample if one is available, otherwise shell/curl\n */\n selectedClient?: string\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 { ScalarButton } from '@scalar/components/button'\nimport {\n ScalarCard,\n ScalarCardFooter,\n ScalarCardHeader,\n ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\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 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(\n customCodeSamples.value.samples,\n clientOptions,\n customCodeSamples.value.label,\n ),\n)\n\n/** Total number of available clients across all option groups */\nconst clientCount = computed(() =>\n clients.value.reduce((total, group) => total + group.options.length, 0),\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/**\n * Re-resolve the local client whenever the global selection or the available\n * clients change. Watching `clients` matters when navigating between operations:\n * the stored id stays the same, but the matching option (e.g. a custom sample)\n * differs per operation, so without this the snippet could go stale.\n */\nwatch([() => selectedClient, clients], ([newClient]) => {\n const client = findClient(clients.value, newClient)\n if (client) {\n localSelectedClient.value = client\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.samples,\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 // Sync the selection globally so other operations follow along. Custom samples\n // sync too (keyed by language), so picking e.g. the Python SDK example here\n // shows the Python example on every operation that ships one.\n if (option) {\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 && clientCount\"\n #actions>\n <!-- Multiple clients: render a dropdown to switch between them -->\n <ScalarCombobox\n v-if=\"clientCount > 1\"\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 <!-- Single client: just show its label, no need for a dropdown -->\n <span\n v-else\n class=\"text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal\"\n data-testid=\"client-picker\">\n {{ localSelectedClient?.title }}\n </span>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0LA,MAAM,sBAAsB,eAAe;GACzC,MAAM,UAAU,eAAe,QAAA,UAAU,YAAY,EAAE,WAAW,EAAC;GACnE,MAAM,cAAc,QAAA,uBAAuB,OAAO,KAAK,QAAQ,CAAC;AAChE,OAAI,CAAC,YAAa,QAAO,EAAC;AAI1B,UAFiB,QAAQ,cAAc,YAAY,EAAC;IAGrD;;EAGD,MAAM,qBAAqB,SAAmB,SAAC,kBAE9C;AAGD,sBAAoB;AAClB,sBAAmB,UAAU,OAAO,KAAK,oBAAoB,MAAM,CAAC,MAAM;IAC3E;;AAGD,cACQ,QAAA,2BACA;AACJ,OACE,CAAC,OAAO,KAAK,oBAAoB,MAAM,CAAC,SAAS,mBAAmB,MAAK,CAEzE,oBAAmB,QAAQ,OAAO,KAAK,oBAAoB,MAAM,CAAC,MAAM;IAG9E;;EAGA,MAAM,oBAAoB,eAAe,qBAAqB,QAAA,UAAU,CAAA;;EAGxE,MAAM,UAAU,eACd,WACE,kBAAkB,MAAM,SACxB,QAAA,eACA,kBAAkB,MAAM,MACzB,CACH;;EAGA,MAAM,cAAc,eAClB,QAAQ,MAAM,QAAQ,OAAO,UAAU,QAAQ,MAAM,QAAQ,QAAQ,EAAE,CACzE;;EAGA,MAAM,sBAAsB,IAC1B,WAAW,QAAQ,OAAO,QAAA,eAAe,CAC3C;;;;;;;AAQA,QAAM,OAAO,QAAA,gBAAgB,QAAQ,GAAG,CAAC,eAAe;GACtD,MAAM,SAAS,WAAW,QAAQ,OAAO,UAAS;AAClD,OAAI,OACF,qBAAoB,QAAQ;IAE/B;;EAGD,MAAM,aAAa,eAAe;AAChC,OAAI,CAAC,QAAA,UAAW,QAAO;AAEvB,OAAI;AACF,WAAO,eAAe;KACpB,WAAQ,QAAA;KACR,QAAK,QAAA;KACL,MAAG,QAAA;KACH,SAAS,mBAAmB;KAC5B,iCAA8B,QAAA;KAC9B,2BAA2B;KAC5B,CAAA;YACM,OAAO;AACd,YAAQ,MAAM,gBAAgB,MAAK;AACnC,WAAO;;IAEV;;EAGD,MAAM,gBAAgB,eAAuB;AAC3C,OAAI,QAAA,UACF,QAAO,WAAW,OAAO,UAAU,QAAQ;AAG7C,UAAO,oBAAoB;IACzB,2BAA2B;IAC3B,uBAAuB,QAAA,gBAAgB;IACvC,UAAU,oBAAoB,OAAO;IACrC,mBAAmB,kBAAkB,MAAM;IAC3C,WAAQ,QAAA;IACR,QAAK,QAAA;IACL,MAAG,QAAA;IACH,aAAa,QAAA;IACb,QAAQ,QAAA;IACR,iBAAc,QAAA;IACd,SAAS,mBAAmB;IAC5B,eAAY,QAAA;IACZ,iCAA8B,QAAA;IAC/B,CAAA;IACF;;EAGD,MAAM,oBAAoB,eAAe;AACvC,OAAI,QAAA,UACF,QAAO,gBAAgB;AAGzB,UAAO,oBAAoB,OAAO;IACnC;;EAGD,MAAM,kBAAkB,eAAuB;AAC7C,OAAI,CAAC,WAAW,OAAO,SAAU,QAAO;GAExC,MAAM,cAAc,WAAW,MAAM,SAAS;AAC9C,OAAI,aAAa,SAAS,OAAO,CAAE,QAAO;AAC1C,OAAI,aAAa,SAAS,MAAM,CAAE,QAAO;AACzC,OAAI,aAAa,SAAS,OAAO,IAAI,aAAa,SAAS,MAAM,CAC/D,QAAO;AACT,OAAI,aAAa,SAAS,aAAa,CAAE,QAAO;AAEhD,UAAO;IACR;;EAGD,MAAM,oBAAoB,eAAe,WAAW,QAAA,gBAAgB,CAAA;;EAGpE,MAAM,OAAO,IAAoC,KAAI;;EAGrD,MAAM,gBAAgB,WAAyB;AAE7C,OAAI,KAAK,OAAO;IACd,MAAM,WAAW,cAAc,KAAK,MAAM,IAAG;AAC7C,qBAAiB;AACf,eAAS;OACR,IAAG;;AAGR,uBAAoB,QAAQ;AAK5B,OAAI,OACF,SAAA,SAAS,KAAK,oCAAoC,OAAO,GAAE;;EAO/D,MAAM,2BAA2B;EAEjC,MAAM,mBAAmB,gBAChB,cAAc,MAAM,UAAU,KAAK,yBAC5C;EAEA,MAAM,KAAK,OAAM;;UAIP,cAAA,SAAA,WAAA,EADR,YA0Fa,MAAA,WAAA,EAAA;;aAxFP;IAAJ,KAAI;IACJ,OAAM;;2BA4Ca;KA1CnB,YA0CmB,MAAA,iBAAA,EAAA,EA1CD,OAAM,UAAQ,EAAA,YAAA;6BACkB;iCAAhD,mBAAgD,QAAA,EAA1C,OAAM,WAAS,EAAC,uBAAmB,GAAA;OACzC,YAGqB,oBAAA;QAFnB,IAAG;QACH,OAAM;QACL,QAAQ,QAAA;;OAEH,QAAA,iBAAA,WAAA,EADR,mBAE6B,QAAA;;QAA3B,WAAQ,QAAA,eAAa;;OACvB,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA;;;UAGb,QAAA,aAAa,YAAA,QAAA;YACnB;wBAoBgB,CAjBT,YAAA,QAAW,KAAA,WAAA,EADnB,YAkBiB,MAAA,eAAA,EAAA;;OAhBf,OAAM;OACL,UAAU,MAAA,qBAAoB;OAC9B,YAAY,oBAAA;OACZ,SAAS,QAAA;OACV,WAAU;OACV,UAAA;OACC,uBAAiB,OAAA,OAAA,OAAA,MAAA,WAAE,aAAa,OAAM;;8BASxB,CARf,YAQe,MAAA,aAAA,EAAA;QAPb,OAAM;QACN,eAAY;QACZ,SAAQ;;+BACwB,CAAA,gBAAA,gBAA7B,oBAAA,OAAqB,MAAK,GAAG,KAChC,EAAA,EAAA,YAEkB,MAAA,oBAAA,EAAA;SADhB,OAAM;SACN,QAAO;;;;;;;;;0BAIb,mBAKO,QALP,YAKO,gBADF,oBAAA,OAAqB,MAAK,EAAA,EAAA,EAAA,CAAA;;;KAMnC,YAkBoB,MAAA,kBAAA,EAAA,EAlBD,OAAM,4CAA0C,EAAA;6BAiB3D,CAhBN,mBAgBM,OAAA;OAfH,IAAE,GAAK,MAAA,GAAE,CAAA;OACV,OAAM;WAEG,iBAAA,SAAA,WAAA,EADT,YAMgB,MAAA,gBAAA,EAAA;;OAJd,OAAM;OACL,SAAS,cAAA;OACT,iBAAiB,kBAAA;OACjB,MAAM,kBAAA;OACP,aAAA;;;;;0BACF,YAK0B,MAAA,kBAAA,EAAA;;OAHxB,gBAAe;OACf,cAAa;OACZ,YAAY;OACZ,MAAM,cAAA;;;;KAML,OAAO,KAAK,oBAAA,MAAmB,CAAE,SAAM,KAAQA,KAAAA,OAAO,UAAA,WAAA,EAD9D,YAkBmB,MAAA,iBAAA,EAAA;;MAhBjB,OAAM;;6BAUA,CAPE,OAAO,KAAK,oBAAA,MAAmB,CAAE,SAAM,KAAA,WAAA,EAD/C,mBAQM,OARN,YAQM,CALY,OAAO,KAAK,oBAAA,MAAmB,CAAE,UAAA,WAAA,EAC/C,YAEoC,uBAAA;;mBADzB,mBAAA;uFAAkB,QAAA;OAC1B,UAAU,oBAAA;iHAKjB,WAEkB,KAAA,QAAA,UAAA,EADf,aAAa,mBAAA,OAAkB,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA;;;;;cAOzB,QAAA,YAAA,WAAA,EADb,YAea,MAAA,WAAA,EAAA;;IAbX,OAAM;;2BAYc,CAXpB,YAWoB,MAAA,kBAAA,EAAA,EAXD,OAAM,uBAAqB,EAAA;4BAOtC,CANN,mBAMM,OANN,YAMM,CALJ,YAGqB,oBAAA;MAFnB,IAAG;MACH,OAAM;MACL,QAAQ,QAAA;8BACX,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,EAExB,WAEkB,KAAA,QAAA,UAAA,EADf,aAAa,mBAAA,OAAkB,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}
@@ -1,9 +0,0 @@
1
- import type { CustomClientOptionGroup, CustomOrDefaultClientOption } from '../../../../v2/blocks/operation-code-sample/types';
2
- /**
3
- * Filters the clients based on a query
4
- *
5
- * When dealing with multiple groups, include all options from a group if the
6
- * group label itself matches — so searching "JavaScript" shows all JS clients.
7
- */
8
- export declare const filterClientsByQuery: (query: string, options: CustomOrDefaultClientOption[], groups: CustomClientOptionGroup[]) => CustomOrDefaultClientOption[];
9
- //# sourceMappingURL=filter-clients-by-query.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"filter-clients-by-query.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,MAAM,yCAAyC,CAAA;AAsBnH;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,UACxB,MAAM,WACJ,2BAA2B,EAAE,UAC9B,uBAAuB,EAAE,KAChC,2BAA2B,EAuBiE,CAAA"}
@@ -1,37 +0,0 @@
1
- //#region src/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.ts
2
- /**
3
- * Checks if a client label, client key, or language matches a query
4
- */
5
- var matchesOption = (option, query) => {
6
- const q = query.toLowerCase();
7
- return option.label.toLowerCase().includes(q) || option.clientKey.toLowerCase().includes(q) || option.lang.toLowerCase().includes(q);
8
- };
9
- /**
10
- * Checks if a client label, client key, or language matches a query
11
- */
12
- var matchesGroup = (group, query) => {
13
- const q = query.toLowerCase();
14
- return group.label.toLowerCase().includes(q) || group.key.toLowerCase().includes(q);
15
- };
16
- /**
17
- * Filters the clients based on a query
18
- *
19
- * When dealing with multiple groups, include all options from a group if the
20
- * group label itself matches — so searching "JavaScript" shows all JS clients.
21
- */
22
- var filterClientsByQuery = ((query, options, groups) => {
23
- if (query === "") return options;
24
- const q = query.toLowerCase();
25
- const visibleGroupCount = groups ? groups.filter((g) => g.label && g.options.length > 0).length : 0;
26
- if (groups && visibleGroupCount > 1) {
27
- const result = [];
28
- for (const group of groups) if (matchesGroup(group, q)) result.push(...group.options);
29
- else result.push(...group.options.filter((o) => matchesOption(o, q)));
30
- return result;
31
- }
32
- return options.filter((o) => matchesOption(o, q));
33
- });
34
- //#endregion
35
- export { filterClientsByQuery };
36
-
37
- //# sourceMappingURL=filter-clients-by-query.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"filter-clients-by-query.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.ts"],"sourcesContent":["import type { ScalarComboboxFilterFunction } from '@scalar/components/combobox'\n\nimport type { CustomClientOptionGroup, CustomOrDefaultClientOption } from '@/v2/blocks/operation-code-sample/types'\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesOption = (option: CustomOrDefaultClientOption, query: string) => {\n const q = query.toLowerCase()\n return (\n option.label.toLowerCase().includes(q) ||\n option.clientKey.toLowerCase().includes(q) ||\n option.lang.toLowerCase().includes(q)\n )\n}\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesGroup = (group: CustomClientOptionGroup, query: string) => {\n const q = query.toLowerCase()\n return group.label.toLowerCase().includes(q) || group.key.toLowerCase().includes(q)\n}\n\n/**\n * Filters the clients based on a query\n *\n * When dealing with multiple groups, include all options from a group if the\n * group label itself matches — so searching \"JavaScript\" shows all JS clients.\n */\nexport const filterClientsByQuery = ((\n query: string,\n options: CustomOrDefaultClientOption[],\n groups: CustomClientOptionGroup[],\n): CustomOrDefaultClientOption[] => {\n if (query === '') {\n return options\n }\n\n const q = query.toLowerCase()\n\n // Only activate when more than one group is actually visible (has a label and options).\n const visibleGroupCount = groups ? groups.filter((g) => g.label && g.options.length > 0).length : 0\n\n if (groups && visibleGroupCount > 1) {\n const result: CustomOrDefaultClientOption[] = []\n for (const group of groups) {\n if (matchesGroup(group, q)) {\n result.push(...group.options)\n } else {\n result.push(...group.options.filter((o) => matchesOption(o, q)))\n }\n }\n return result\n }\n\n return options.filter((o) => matchesOption(o, q))\n}) satisfies ScalarComboboxFilterFunction<CustomOrDefaultClientOption, CustomClientOptionGroup>\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,QAAqC,UAAkB;CAC5E,MAAM,IAAI,MAAM,aAAa;AAC7B,QACE,OAAO,MAAM,aAAa,CAAC,SAAS,EAAE,IACtC,OAAO,UAAU,aAAa,CAAC,SAAS,EAAE,IAC1C,OAAO,KAAK,aAAa,CAAC,SAAS,EAAE;;;;;AAOzC,IAAM,gBAAgB,OAAgC,UAAkB;CACtE,MAAM,IAAI,MAAM,aAAa;AAC7B,QAAO,MAAM,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,MAAM,IAAI,aAAa,CAAC,SAAS,EAAE;;;;;;;;AASrF,IAAa,yBACX,OACA,SACA,WACkC;AAClC,KAAI,UAAU,GACZ,QAAO;CAGT,MAAM,IAAI,MAAM,aAAa;CAG7B,MAAM,oBAAoB,SAAS,OAAO,QAAQ,MAAM,EAAE,SAAS,EAAE,QAAQ,SAAS,EAAE,CAAC,SAAS;AAElG,KAAI,UAAU,oBAAoB,GAAG;EACnC,MAAM,SAAwC,EAAE;AAChD,OAAK,MAAM,SAAS,OAClB,KAAI,aAAa,OAAO,EAAE,CACxB,QAAO,KAAK,GAAG,MAAM,QAAQ;MAE7B,QAAO,KAAK,GAAG,MAAM,QAAQ,QAAQ,MAAM,cAAc,GAAG,EAAE,CAAC,CAAC;AAGpE,SAAO;;AAGT,QAAO,QAAQ,QAAQ,MAAM,cAAc,GAAG,EAAE,CAAC"}
@@ -1,41 +0,0 @@
1
- import { type AvailableClients } from '@scalar/snippetz';
2
- import type { ClientOption, CustomClientOption, CustomClientOptionGroup } from '../../../../v2/blocks/operation-code-sample/types';
3
- export declare const DEFAULT_CLIENT = "shell/curl";
4
- /**
5
- * A selection the code sample picker understands: either a built-in client id
6
- * (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).
7
- *
8
- * The custom part is typed as `string & {}` rather than the `custom/${string}`
9
- * template literal: unioning that template literal with the (very large) built-in
10
- * client-id union trips TypeScript's "union too complex" limit inside Vue's
11
- * `defineProps` macro. `string & {}` keeps editor hints for the known client ids
12
- * without expanding the union.
13
- */
14
- export type SelectedClientId = AvailableClients[number] | (string & {});
15
- /** Type guard to check if a string is a valid built-in client id */
16
- export declare const isClient: (id: any) => id is AvailableClients[number];
17
- /** Type guard for any selection the picker can restore (built-in client or custom sample id) */
18
- export declare const isSelectedClient: (id: any) => id is SelectedClientId;
19
- /**
20
- * Finds and returns the appropriate client option to select for an operation.
21
- *
22
- * Selection rules, given the globally selected client/sample id:
23
- *
24
- * 1. A custom sample is selected (`custom/<lang>`): show the matching sample on
25
- * this operation. If this operation has no sample for that exact language, we
26
- * keep showing a custom sample (its first one) so the selection stays "global".
27
- * 2. An explicit built-in client is selected: it wins, even when the operation
28
- * also has custom samples. This includes the default client (`shell/curl`):
29
- * a built-in id only reaches us through a real selection (config, persistence,
30
- * or the picker), never as an implicit default, so a deliberate cURL pick must
31
- * stick instead of snapping back to an SDK example.
32
- * 3. Otherwise (nothing selected yet): prefer a custom sample when the operation
33
- * has one, so custom examples are the default.
34
- * 4. Fall back to the default built-in client, then the first option.
35
- *
36
- * @param clientGroups - Array of client option groups, each containing a label and array of client options
37
- * @param clientId - Optional selection to restore (e.g. 'js/fetch' or 'custom/python')
38
- * @returns The selected client option, or undefined when there is nothing to select
39
- */
40
- export declare const findClient: (clientGroups: CustomClientOptionGroup[], clientId?: SelectedClientId | undefined) => ClientOption | CustomClientOption | undefined;
41
- //# sourceMappingURL=find-client.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"find-client.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/find-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAA;AAExH,eAAO,MAAM,cAAc,eAAe,CAAA;AAE1C;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEvE,oEAAoE;AACpE,eAAO,MAAM,QAAQ,GAAI,IAAI,GAAG,KAAG,EAAE,IAAI,gBAAgB,CAAC,MAAM,CAAmC,CAAA;AAEnG,gGAAgG;AAChG,eAAO,MAAM,gBAAgB,GAAI,IAAI,GAAG,KAAG,EAAE,IAAI,gBACqB,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,UAAU,GACrB,cAAc,uBAAuB,EAAE,EACvC,WAAW,gBAAgB,GAAG,SAAS,KACtC,YAAY,GAAG,kBAAkB,GAAG,SAmCtC,CAAA"}
@@ -1,48 +0,0 @@
1
- import { AVAILABLE_CLIENTS } from "@scalar/snippetz";
2
- //#region src/v2/blocks/operation-code-sample/helpers/find-client.ts
3
- var DEFAULT_CLIENT = "shell/curl";
4
- /** Type guard to check if a string is a valid built-in client id */
5
- var isClient = (id) => AVAILABLE_CLIENTS.includes(id);
6
- /** Type guard for any selection the picker can restore (built-in client or custom sample id) */
7
- var isSelectedClient = (id) => isClient(id) || typeof id === "string" && id.startsWith("custom/");
8
- /**
9
- * Finds and returns the appropriate client option to select for an operation.
10
- *
11
- * Selection rules, given the globally selected client/sample id:
12
- *
13
- * 1. A custom sample is selected (`custom/<lang>`): show the matching sample on
14
- * this operation. If this operation has no sample for that exact language, we
15
- * keep showing a custom sample (its first one) so the selection stays "global".
16
- * 2. An explicit built-in client is selected: it wins, even when the operation
17
- * also has custom samples. This includes the default client (`shell/curl`):
18
- * a built-in id only reaches us through a real selection (config, persistence,
19
- * or the picker), never as an implicit default, so a deliberate cURL pick must
20
- * stick instead of snapping back to an SDK example.
21
- * 3. Otherwise (nothing selected yet): prefer a custom sample when the operation
22
- * has one, so custom examples are the default.
23
- * 4. Fall back to the default built-in client, then the first option.
24
- *
25
- * @param clientGroups - Array of client option groups, each containing a label and array of client options
26
- * @param clientId - Optional selection to restore (e.g. 'js/fetch' or 'custom/python')
27
- * @returns The selected client option, or undefined when there is nothing to select
28
- */
29
- var findClient = (clientGroups, clientId) => {
30
- const findById = (id) => {
31
- for (const group of clientGroups) {
32
- const option = group.options.find((option) => option.id === id);
33
- if (option) return option;
34
- }
35
- };
36
- const firstCustom = clientGroups.find((group) => group.key === "custom")?.options[0];
37
- if (clientId?.startsWith("custom")) return findById(clientId) ?? firstCustom ?? findById("shell/curl") ?? clientGroups[0]?.options[0];
38
- if (clientId) {
39
- const option = findById(clientId);
40
- if (option) return option;
41
- }
42
- if (firstCustom) return firstCustom;
43
- return findById("shell/curl") ?? clientGroups[0]?.options[0];
44
- };
45
- //#endregion
46
- export { DEFAULT_CLIENT, findClient, isClient, isSelectedClient };
47
-
48
- //# sourceMappingURL=find-client.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"find-client.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/find-client.ts"],"sourcesContent":["import { AVAILABLE_CLIENTS, type AvailableClients } from '@scalar/snippetz'\n\nimport type { ClientOption, CustomClientOption, CustomClientOptionGroup } from '@/v2/blocks/operation-code-sample/types'\n\nexport const DEFAULT_CLIENT = 'shell/curl'\n\n/**\n * A selection the code sample picker understands: either a built-in client id\n * (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n *\n * The custom part is typed as `string & {}` rather than the `custom/${string}`\n * template literal: unioning that template literal with the (very large) built-in\n * client-id union trips TypeScript's \"union too complex\" limit inside Vue's\n * `defineProps` macro. `string & {}` keeps editor hints for the known client ids\n * without expanding the union.\n */\nexport type SelectedClientId = AvailableClients[number] | (string & {})\n\n/** Type guard to check if a string is a valid built-in client id */\nexport const isClient = (id: any): id is AvailableClients[number] => AVAILABLE_CLIENTS.includes(id)\n\n/** Type guard for any selection the picker can restore (built-in client or custom sample id) */\nexport const isSelectedClient = (id: any): id is SelectedClientId =>\n isClient(id) || (typeof id === 'string' && id.startsWith('custom/'))\n\n/**\n * Finds and returns the appropriate client option to select for an operation.\n *\n * Selection rules, given the globally selected client/sample id:\n *\n * 1. A custom sample is selected (`custom/<lang>`): show the matching sample on\n * this operation. If this operation has no sample for that exact language, we\n * keep showing a custom sample (its first one) so the selection stays \"global\".\n * 2. An explicit built-in client is selected: it wins, even when the operation\n * also has custom samples. This includes the default client (`shell/curl`):\n * a built-in id only reaches us through a real selection (config, persistence,\n * or the picker), never as an implicit default, so a deliberate cURL pick must\n * stick instead of snapping back to an SDK example.\n * 3. Otherwise (nothing selected yet): prefer a custom sample when the operation\n * has one, so custom examples are the default.\n * 4. Fall back to the default built-in client, then the first option.\n *\n * @param clientGroups - Array of client option groups, each containing a label and array of client options\n * @param clientId - Optional selection to restore (e.g. 'js/fetch' or 'custom/python')\n * @returns The selected client option, or undefined when there is nothing to select\n */\nexport const findClient = (\n clientGroups: CustomClientOptionGroup[],\n clientId?: SelectedClientId | undefined,\n): ClientOption | CustomClientOption | undefined => {\n const findById = (id: string) => {\n for (const group of clientGroups) {\n const option = group.options.find((option) => option.id === id)\n if (option) {\n return option\n }\n }\n return undefined\n }\n\n const firstCustom = clientGroups.find((group) => group.key === 'custom')?.options[0]\n\n // 1. A custom sample is selected: match the language, otherwise stay on a custom sample\n if (clientId?.startsWith('custom')) {\n return findById(clientId) ?? firstCustom ?? findById(DEFAULT_CLIENT) ?? clientGroups[0]?.options[0]\n }\n\n // 2. An explicit built-in client wins, even when custom samples exist. A built-in\n // id (including the default `shell/curl`) only reaches us through a real\n // selection, so it must stick rather than snap back to a custom sample.\n if (clientId) {\n const option = findById(clientId)\n if (option) {\n return option\n }\n }\n\n // 3. Nothing selected yet: prefer a custom sample when the operation has one\n if (firstCustom) {\n return firstCustom\n }\n\n // 4. Otherwise fall back to the default built-in client, then the first option\n return findById(DEFAULT_CLIENT) ?? clientGroups[0]?.options[0]\n}\n"],"mappings":";;AAIA,IAAa,iBAAiB;;AAe9B,IAAa,YAAY,OAA4C,kBAAkB,SAAS,GAAG;;AAGnG,IAAa,oBAAoB,OAC/B,SAAS,GAAG,IAAK,OAAO,OAAO,YAAY,GAAG,WAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;AAuBrE,IAAa,cACX,cACA,aACkD;CAClD,MAAM,YAAY,OAAe;AAC/B,OAAK,MAAM,SAAS,cAAc;GAChC,MAAM,SAAS,MAAM,QAAQ,MAAM,WAAW,OAAO,OAAO,GAAG;AAC/D,OAAI,OACF,QAAO;;;CAMb,MAAM,cAAc,aAAa,MAAM,UAAU,MAAM,QAAQ,SAAS,EAAE,QAAQ;AAGlF,KAAI,UAAU,WAAW,SAAS,CAChC,QAAO,SAAS,SAAS,IAAI,eAAe,SAAA,aAAwB,IAAI,aAAa,IAAI,QAAQ;AAMnG,KAAI,UAAU;EACZ,MAAM,SAAS,SAAS,SAAS;AACjC,MAAI,OACF,QAAO;;AAKX,KAAI,YACF,QAAO;AAIT,QAAO,SAAA,aAAwB,IAAI,aAAa,IAAI,QAAQ"}
@@ -1,8 +0,0 @@
1
- /**
2
- * Turn a free-form language identifier into a display label for the code sample picker.
3
- *
4
- * @param lang - The language identifier from a custom code sample (e.g. `typescript`)
5
- * @returns A properly cased label (e.g. `TypeScript`), or `undefined` when no language is given
6
- */
7
- export declare const formatLanguage: (lang?: string) => string | undefined;
8
- //# sourceMappingURL=format-language.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"format-language.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/format-language.ts"],"names":[],"mappings":"AAyDA;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,SAMvD,CAAA"}
@@ -1,70 +0,0 @@
1
- import { capitalize } from "@scalar/helpers/string/capitalize";
2
- //#region src/v2/blocks/operation-code-sample/helpers/format-language.ts
3
- /**
4
- * Display names for the most common languages found in custom code samples.
5
- *
6
- * Custom samples (`x-scalar-examples`, `x-readme`, `x-stainless-*`, …) carry a
7
- * free-form `lang` string that we otherwise show verbatim in the picker. This
8
- * map gives the common ones a properly cased label (e.g. `typescript` →
9
- * `TypeScript`). Anything not listed falls back to a simple capitalization.
10
- */
11
- var LANGUAGE_LABELS = {
12
- c: "C",
13
- clojure: "Clojure",
14
- cpp: "C++",
15
- "c++": "C++",
16
- csharp: "C#",
17
- "c#": "C#",
18
- css: "CSS",
19
- curl: "cURL",
20
- dart: "Dart",
21
- fsharp: "F#",
22
- "f#": "F#",
23
- go: "Go",
24
- golang: "Go",
25
- graphql: "GraphQL",
26
- html: "HTML",
27
- http: "HTTP",
28
- java: "Java",
29
- javascript: "JavaScript",
30
- js: "JavaScript",
31
- json: "JSON",
32
- kotlin: "Kotlin",
33
- node: "Node.js",
34
- nodejs: "Node.js",
35
- objc: "Objective-C",
36
- "objective-c": "Objective-C",
37
- ocaml: "OCaml",
38
- php: "PHP",
39
- powershell: "PowerShell",
40
- py: "Python",
41
- python: "Python",
42
- r: "R",
43
- ruby: "Ruby",
44
- rust: "Rust",
45
- scala: "Scala",
46
- sh: "Shell",
47
- shell: "Shell",
48
- bash: "Shell",
49
- sql: "SQL",
50
- swift: "Swift",
51
- ts: "TypeScript",
52
- typescript: "TypeScript",
53
- xml: "XML",
54
- yaml: "YAML",
55
- yml: "YAML"
56
- };
57
- /**
58
- * Turn a free-form language identifier into a display label for the code sample picker.
59
- *
60
- * @param lang - The language identifier from a custom code sample (e.g. `typescript`)
61
- * @returns A properly cased label (e.g. `TypeScript`), or `undefined` when no language is given
62
- */
63
- var formatLanguage = (lang) => {
64
- if (!lang) return;
65
- return LANGUAGE_LABELS[lang.toLowerCase()] ?? capitalize(lang);
66
- };
67
- //#endregion
68
- export { formatLanguage };
69
-
70
- //# sourceMappingURL=format-language.js.map