npm - @scalar/api-reference - Versions diffs - 1.52.1 → 1.52.2 - Mend

@scalar/api-reference 1.52.1 → 1.52.2

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 (171) hide show

package/dist/features/Operation/layouts/ClassicLayout.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClassicLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport {\n ScalarErrorBoundary,\n ScalarIconButton,\n ScalarMarkdown,\n} from '@scalar/components'\nimport {\n ScalarIconCopy,\n ScalarIconPlay,\n ScalarIconWebhooksLogo,\n} from '@scalar/icons'\nimport {\n getOperationStability,\n getOperationStabilityColor,\n isOperationDeprecated,\n} from '@scalar/oas-utils/helpers'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport { SectionAccordion } from '@/components/Section'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n clientOptions,\n eventBus,\n isWebhook,\n method,\n operation,\n options,\n path,\n selectedServer,\n selectedSecuritySchemes,\n selectedClient,\n} = defineProps<\n Omit<\n OperationProps,\n 'document' \| 'pathValue' \| 'server' \| 'securitySchemes' \| 'authStore'\n > & {\n /** Operation object with path params /\n operation: OperationObject\n /* The selected server for the operation /\n selectedServer: ServerObject \| null\n /* The selected security schemes for the operation /\n selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n }\n>()\n\nconst operationTitle = computed(() => operation.summary \|\| path \|\| '')\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/* Track the currently selected example for passing to the modal /\nconst selectedExampleKey = ref<string>('')\n\n/* Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample /\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n (): RequestBodyCompositionSelection => ({\n ...requestBodyCompositionSelection.value,\n }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n\nconst { copyToClipboard } = useClipboard()\n</script>\n<template>\n <SectionAccordion\n :id=\"id\"\n :aria-label=\"operationTitle\"\n class=\"reference-endpoint\"\n :modelValue=\"!isCollapsed\"\n transparent\n @update:modelValue=\"\n (value) => eventBus?.emit('toggle:nav-item', { id, open: value })\n \">\n <template #title>\n <div class=\"operation-title\">\n <div class=\"operation-details\">\n <HttpMethod\n class=\"endpoint-type\"\n :method=\"method\"\n short />\n <Anchor\n class=\"endpoint-anchor\"\n @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n <h3 class=\"endpoint-label\">\n <div class=\"endpoint-label-path\">\n <OperationPath\n :deprecated=\"isOperationDeprecated(operation)\"\n :path=\"path\" />\n </div>\n <div class=\"endpoint-label-name\">\n {{ operationTitle }}\n </div>\n <!-- Stability badge -->\n <Badge\n v-if=\"getOperationStability(operation)\"\n class=\"capitalize\"\n :class=\"getOperationStabilityColor(operation)\">\n {{ getOperationStability(operation) }}\n </Badge>\n\n <!-- Webhook badge -->\n <Badge\n v-if=\"isWebhook\"\n class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n </Badge>\n\n <!-- x-badges before -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"before\" />\n </h3>\n </Anchor>\n </div>\n </div>\n </template>\n <template #actions=\"{ active }\">\n <!-- x-badges after -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"after\" />\n <template v-if=\"!options.hideTestRequestButton\">\n <TestRequestButton\n v-if=\"active && !isWebhook\"\n :id\n :eventBus\n :exampleName=\"selectedExampleKey\"\n :method\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \" />\n <ScalarIconPlay\n v-else\n class=\"endpoint-try-hint size-4.5\" />\n </template>\n <span\n v-if=\"options.showOperationId && operation.operationId\"\n class=\"font-code text-sm\">\n {{ operation.operationId }}\n </span>\n <ScalarIconButton\n class=\"endpoint-copy p-0.5\"\n :icon=\"ScalarIconCopy\"\n label=\"Copy endpoint URL\"\n size=\"xs\"\n variant=\"ghost\"\n @click.stop=\"copyToClipboard(path)\" />\n </template>\n <template\n v-if=\"operation.description\"\n #description>\n <ScalarMarkdown\n :anchorPrefix=\"id\"\n aria-label=\"Operation Description\"\n role=\"group\"\n transformType=\"heading\"\n :value=\"operation.description\"\n withAnchors\n withImages />\n </template>\n <div class=\"endpoint-content\">\n <div class=\"operation-details-card\">\n <div\n v-if=\"Object.keys(operationExtensions).length > 0\"\n class=\"operation-details-card-item\">\n <SpecificationExtension :value=\"operationExtensions\" />\n </div>\n <div class=\"operation-details-card-item\">\n <OperationParameters\n :eventBus\n :options\n :parameters=\"operation.parameters\"\n :requestBody=\"getResolvedRef(operation.requestBody)\" />\n </div>\n <div class=\"operation-details-card-item\">\n <OperationResponses\n :eventBus\n :options\n :responses=\"operation.responses\" />\n </div>\n\n <!-- Callbacks -->\n <div\n v-if=\"operation?.callbacks\"\n class=\"operation-details-card-item\">\n <Callbacks\n :callbacks=\"operation.callbacks\"\n :eventBus\n :options\n :path />\n </div>\n </div>\n\n <ExampleResponses\n v-if=\"operation.responses\"\n class=\"operation-example-card\"\n :responses=\"operation.responses\" />\n\n <!-- New Example Request -->\n <div>\n <!-- External Docs -->\n <LinkList v-if=\"operation.externalDocs\">\n <ExternalDocs :value=\"operation.externalDocs\" />\n </LinkList>\n <!-- Request Example -->\n <ScalarErrorBoundary>\n <OperationCodeSample\n v-model:selectedExample=\"selectedExampleKey\"\n :key=\"requestBodyCompositionSelectionKey\"\n class=\"operation-example-card\"\n :clientOptions\n :eventBus\n fallback\n :isWebhook\n :method\n :operation\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \"\n :securitySchemes=\"selectedSecuritySchemes\"\n :selectedClient\n :selectedServer />\n </ScalarErrorBoundary>\n </div>\n </div>\n </SectionAccordion>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.operation-title {\n display: flex;\n justify-content: space-between;\n}\n.operation-details {\n display: flex;\n align-items: center;\n margin-top: 0;\n gap: 9px;\n\n min-width: 0;\n flex-shrink: 1;\n}\n.operation-details :deep(.endpoint-anchor .scalar-button svg) {\n width: 16px;\n height: 16px;\n}\n.endpoint-type {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n\n position: relative;\n z-index: 0;\n\n width: 60px;\n padding: 6px;\n flex-shrink: 0;\n\n font-size: var(--scalar-small);\n\n text-transform: uppercase;\n font-weight: var(--scalar-bold);\n font-family: var(--scalar-font);\n}\n.endpoint-type::after {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n\n background: currentColor;\n opacity: 0.15;\n\n border-radius: var(--scalar-radius);\n}\n\n.endpoint-anchor {\n display: flex;\n align-items: center;\n min-width: 0;\n flex-shrink: 1;\n}\n.endpoint-anchor.label {\n display: flex;\n}\n.endpoint-label {\n display: flex;\n align-items: baseline;\n gap: 9px;\n\n min-width: 0;\n flex-shrink: 1;\n\n color: var(--scalar-color-1);\n}\n\n.endpoint-label-path {\n font-family: var(--scalar-font-code);\n font-size: var(--scalar-mini);\n\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n.endpoint-label-path :deep(em) {\n color: var(--scalar-color-2);\n}\n.endpoint-label-name {\n color: var(--scalar-color-2);\n font-size: var(--scalar-small);\n\n / Concatenate the name before we shrink the path /\n flex-shrink: 1000000000;\n\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.endpoint-try-hint {\n padding: 2px;\n flex-shrink: 0;\n}\n.endpoint-copy {\n color: currentColor;\n}\n.endpoint-copy :deep(svg) {\n stroke-width: 2px;\n}\n\n.endpoint-content {\n display: grid;\n grid-auto-columns: 1fr;\n grid-auto-flow: row;\n gap: 9px;\n padding: 9px;\n}\n\n@variant lg {\n .endpoint-content {\n grid-auto-flow: column;\n }\n}\n\n@container (max-width: 900px) {\n .endpoint-content {\n grid-template-columns: 1fr;\n }\n}\n\n.endpoint-content > {\n min-width: 0;\n}\n\n.operation-details-card {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-width: 0;\n}\n.operation-details-card-item :deep(.parameter-list),\n.operation-details-card-item :deep(.callbacks-list) {\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-lg);\n margin-top: 0;\n}\n\n.operation-details-card-item {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.operation-details-card-item :deep(.parameter-list-items) {\n margin-bottom: 0;\n}\n.operation-details-card :deep(.parameter-item:last-of-type .parameter-schema) {\n padding-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-list .parameter-list) {\n margin-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-item) {\n margin: 0;\n padding: 0;\n}\n.operation-details-card :deep(.property) {\n padding: 9px;\n margin: 0;\n}\n.operation-details-card :deep(.parameter-list-title),\n.operation-details-card :deep(.request-body-title),\n.operation-details-card :deep(.callbacks-title) {\n text-transform: uppercase;\n font-weight: var(--scalar-bold);\n font-size: var(--scalar-mini);\n color: var(--scalar-color-2);\n line-height: 1.33;\n padding: 9px;\n margin: 0;\n}\n\n.operation-details-card :deep(.callback-list-item-title) {\n padding-left: 28px;\n padding-right: 12px;\n}\n\n.operation-details-card :deep(.callback-list-item-icon) {\n left: 6px;\n}\n\n.operation-details-card :deep(.callback-operation-container) {\n padding-inline: 9px;\n padding-bottom: 9px;\n}\n\n.operation-details-card :deep(.callback-operation-container > .request-body),\n.operation-details-card :deep(.callback-operation-container > .parameter-list) {\n border: none;\n}\n\n.operation-details-card\n :deep(.callback-operation-container > .request-body > .request-body-header) {\n padding: 0;\n padding-bottom: 9px;\n border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body-description) {\n margin-top: 0;\n padding: 9px 9px 0 9px;\n border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body) {\n margin-top: 0;\n border-radius: var(--scalar-radius-lg);\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.operation-details-card\n :deep(.request-body .schema-card--level-0 > .schema-card-description) {\n padding-inline: 9px;\n}\n\n.operation-details-card :deep(.request-body-header) {\n padding-bottom: 0;\n border-bottom: 0;\n}\n\n.operation-details-card :deep(.contents button) {\n margin-right: 9px;\n}\n\n.operation-details-card\n :deep(.schema-card--open + .schema-card:not(.schema-card--open)) {\n margin-inline: 9px;\n margin-bottom: 9px;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n padding: 0;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n padding: 0;\n}\n\n.operation-details-card :deep(.selected-content-type) {\n margin-right: 9px;\n}\n\n.operation-example-card {\n position: sticky;\n top: calc(var(--refs-viewport-offset) + 24px);\n max-height: calc(var(--refs-viewport-height) - 48px);\n}\n\n@media (max-width: 600px) {\n .operation-example-card {\n max-height: unset;\n position: static;\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwEA,MAAM,iBAAiB,eAAe,QAAA,UAAU,WAAW,QAAA,QAAQ,GAAE;EACrE,MAAM,sBAAsB,eAAe,mBAAmB,QAAA,UAAU,CAAA;;EAGxE,MAAM,qBAAqB,IAAY,GAAE;;EAGzC,MAAM,kCAAkC,IAAqC,EAAE,CAAA;EAE/E,MAAM,+CAA+C,gBACX,EACtC,GAAG,gCAAgC,OACpC,EACH;EAEA,MAAM,qCAAqC,eACzC,KAAK,UAAU,6CAA6C,MAAM,CACpE;AAEA,UAAQ,uCAAuC,gCAA+B;EAE9E,MAAM,EAAE,oBAAoB,cAAa;;uBAGvC,YAmKmB,MAAA,yBAAA,EAAA;IAlKhB,IAAI,QAAA;IACJ,cAAY,eAAA;IACb,OAAM;IACL,YAAU,CAAG,QAAA;IACd,aAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAU,UAAU,QAAA,UAAU,KAAI,mBAAA;KAAA,IAAsB,QAAA;KAAE,MAAQ;KAAK,CAAA;;IAG9E,OAAK,cAyCR,CAxCN,mBAwCM,OAxCN,YAwCM,CAvCJ,mBAsCM,OAtCN,YAsCM,CArCJ,YAGU,MAAA,mBAAA,EAAA;KAFR,OAAM;KACL,QAAQ,QAAA;KACT,OAAA;6BACF,YAgCS,MAAA,eAAA,EAAA;KA/BP,OAAM;KACL,iBAAa,OAAA,OAAA,OAAA,WAAQ,QAAA,UAAU,KAAI,qBAAA,EAAA,IAAwB,QAAA,IAAE,CAAA;;4BA6BzD,CA5BL,mBA4BK,MA5BL,YA4BK;MA3BH,mBAIM,OAJN,YAIM,CAHJ,YAEiB,uBAAA;OADd,YAAY,MAAA,sBAAqB,CAAC,QAAA,UAAS;OAC3C,MAAM,QAAA;;MAEX,mBAEM,OAFN,YAEM,gBADD,eAAA,MAAc,EAAA,EAAA;MAIX,MAAA,sBAAqB,CAAC,QAAA,UAAS,IAAA,WAAA,EADvC,YAKQ,MAAA,cAAA,EAAA;;OAHN,OAAK,eAAA,CAAC,cACE,MAAA,2BAA0B,CAAC,QAAA,UAAS,CAAA,CAAA;;8BACN,CAAA,gBAAA,gBAAnC,MAAA,sBAAqB,CAAC,QAAA,UAAS,CAAA,EAAA,EAAA,CAAA,CAAA;;;MAK5B,QAAA,aAAA,WAAA,EADR,YAIQ,MAAA,cAAA,EAAA;;OAFN,OAAM;;8BACkC,CAAxC,YAAwC,MAAA,uBAAA,EAAA,EAAhB,QAAO,QAAM,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAAG,YAC1C,GAAA,EAAA,CAAA;;;MAGA,YAEsB,MAAA,gBAAA,EAAA;OADnB,QAAQ,QAAA,UAAS;OAClB,UAAS;;;;;IAMV,SAAO,SAIK,EAJD,aAAM;KAE1B,YAEqB,MAAA,gBAAA,EAAA;MADlB,QAAQ,QAAA,UAAS;MAClB,UAAS;;MACM,QAAA,QAAQ,yBAAA,WAAA,EAAzB,mBAcW,UAAA,EAAA,KAAA,GAAA,EAAA,CAZD,UAAM,CAAK,QAAA,aAAA,WAAA,EADnB,YASM,MAAA,0BAAA,EAAA;;MAPH,IAAA,QAAA;MACA,UAAA,QAAA;MACA,aAAa,mBAAA;MACb,QAAA,QAAA;MACA,MAAA,QAAA;MACA,iCAA8C,6CAAA;;;;;;;;yBAGjD,YAEuC,MAAA,eAAA,EAAA;;MAArC,OAAM;;KAGF,QAAA,QAAQ,mBAAmB,QAAA,UAAU,eAAA,WAAA,EAD7C,mBAIO,QAJP,YAIO,gBADF,QAAA,UAAU,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAE1B,YAMwC,MAAA,iBAAA,EAAA;MALtC,OAAM;MACL,MAAM,MAAA,eAAc;MACrB,OAAM;MACN,MAAK;MACL,SAAQ;MACP,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,gBAAe,CAAC,QAAA,KAAI,EAAA,CAAA,OAAA,CAAA;;;2BA+E/B,CAjEN,mBAiEM,OAjEN,YAiEM;KAhEJ,mBA8BM,OA9BN,YA8BM;MA5BI,OAAO,KAAK,oBAAA,MAAmB,CAAE,SAAM,KAAA,WAAA,EAD/C,mBAIM,OAJN,YAIM,CADJ,YAAuD,gCAAA,EAA9B,OAAO,oBAAA,OAAmB,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;MAErD,mBAMM,OANN,aAMM,CALJ,YAIyD,6BAAA;OAHtD,UAAA,QAAA;OACA,SAAA,QAAA;OACA,YAAY,QAAA,UAAU;OACtB,aAAa,MAAA,eAAc,CAAC,QAAA,UAAU,YAAW;;;;;;;MAEtD,mBAKM,OALN,aAKM,CAJJ,YAGqC,4BAAA;OAFlC,UAAA,QAAA;OACA,SAAA,QAAA;OACA,WAAW,QAAA,UAAU;;;;;;MAKlB,QAAA,WAAW,aAAA,WAAA,EADnB,mBAQM,OARN,aAQM,CALJ,YAIU,mBAAA;OAHP,WAAW,QAAA,UAAU;OACrB,UAAA,QAAA;OACA,SAAA,QAAA;OACA,MAAA,QAAA;;;;;;;;KAKC,QAAA,UAAU,aAAA,WAAA,EADlB,YAGqC,MAAA,yBAAA,EAAA;;MADnC,OAAM;MACL,WAAW,QAAA,UAAU;;KAGxB,mBAyBM,OAAA,MAAA,CAvBY,QAAA,UAAU,gBAAA,WAAA,EAA1B,YAEW,MAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;6BADuC,CAAhD,YAAgD,MAAA,qBAAA,EAAA,EAAjC,OAAO,QAAA,UAAU,cAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;yCAGlC,YAkBsB,MAAA,oBAAA,EAAA,MAAA;6BADA,EAAA,WAAA,EAhBpB,YAgBoB,MAAA,oBAAA,EAAA;OAfV,iBAAiB,mBAAA;4FAAkB,QAAA;OAC1C,KAAK,mCAAA;OACN,OAAM;OACL,eAAA,QAAA;OACA,UAAA,QAAA;OACD,UAAA;OACC,WAAA,QAAA;OACA,QAAA,QAAA;OACA,WAAA,QAAA;OACA,MAAA,QAAA;OACA,iCAAgD,6CAAA;OAGhD,iBAAiB,QAAA;OACjB,gBAAA,QAAA;OACA,gBAAA,QAAA;;;;;;;;;;;;;;;;;;OAzED,QAAA,UAAU,cAAA;UACf;sBAQc,CAPf,YAOe,MAAA,eAAA,EAAA;KANZ,cAAc,QAAA;KACf,cAAW;KACX,MAAK;KACL,eAAc;KACb,OAAO,QAAA,UAAU;KAClB,aAAA;KACA,YAAA"}
1	+ {"version":3,"file":"ClassicLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n ScalarErrorBoundary,\n ScalarIconButton,\n ScalarMarkdown,\n} from '@scalar/components'\nimport {\n ScalarIconCopy,\n ScalarIconPlay,\n ScalarIconWebhooksLogo,\n} from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport { SectionAccordion } from '@/components/Section'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport {\n getOperationStability,\n getOperationStabilityColor,\n isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n clientOptions,\n eventBus,\n isWebhook,\n method,\n operation,\n options,\n path,\n selectedServer,\n selectedSecuritySchemes,\n selectedClient,\n} = defineProps<\n Omit<\n OperationProps,\n 'document' \| 'pathValue' \| 'server' \| 'securitySchemes' \| 'authStore'\n > & {\n /** Operation object with path params /\n operation: OperationObject\n /* The selected server for the operation /\n selectedServer: ServerObject \| null\n /* The selected security schemes for the operation /\n selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n }\n>()\n\nconst operationTitle = computed(() => operation.summary \|\| path \|\| '')\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/* Track the currently selected example for passing to the modal /\nconst selectedExampleKey = ref<string>('')\n\n/* Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample /\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n (): RequestBodyCompositionSelection => ({\n ...requestBodyCompositionSelection.value,\n }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n\nconst { copyToClipboard } = useClipboard()\n</script>\n<template>\n <SectionAccordion\n :id=\"id\"\n :aria-label=\"operationTitle\"\n class=\"reference-endpoint\"\n :modelValue=\"!isCollapsed\"\n transparent\n @update:modelValue=\"\n (value) => eventBus?.emit('toggle:nav-item', { id, open: value })\n \">\n <template #title>\n <div class=\"operation-title\">\n <div class=\"operation-details\">\n <HttpMethod\n class=\"endpoint-type\"\n :method=\"method\"\n short />\n <Anchor\n class=\"endpoint-anchor\"\n @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n <h3 class=\"endpoint-label\">\n <div class=\"endpoint-label-path\">\n <OperationPath\n :deprecated=\"isOperationDeprecated(operation)\"\n :path=\"path\" />\n </div>\n <div class=\"endpoint-label-name\">\n {{ operationTitle }}\n </div>\n <!-- Stability badge -->\n <Badge\n v-if=\"getOperationStability(operation)\"\n class=\"capitalize\"\n :class=\"getOperationStabilityColor(operation)\">\n {{ getOperationStability(operation) }}\n </Badge>\n\n <!-- Webhook badge -->\n <Badge\n v-if=\"isWebhook\"\n class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n </Badge>\n\n <!-- x-badges before -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"before\" />\n </h3>\n </Anchor>\n </div>\n </div>\n </template>\n <template #actions=\"{ active }\">\n <!-- x-badges after -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"after\" />\n <template v-if=\"!options.hideTestRequestButton\">\n <TestRequestButton\n v-if=\"active && !isWebhook\"\n :id\n :eventBus\n :exampleName=\"selectedExampleKey\"\n :method\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \" />\n <ScalarIconPlay\n v-else\n class=\"endpoint-try-hint size-4.5\" />\n </template>\n <span\n v-if=\"options.showOperationId && operation.operationId\"\n class=\"font-code text-sm\">\n {{ operation.operationId }}\n </span>\n <ScalarIconButton\n class=\"endpoint-copy p-0.5\"\n :icon=\"ScalarIconCopy\"\n label=\"Copy endpoint URL\"\n size=\"xs\"\n variant=\"ghost\"\n @click.stop=\"copyToClipboard(path)\" />\n </template>\n <template\n v-if=\"operation.description\"\n #description>\n <ScalarMarkdown\n :anchorPrefix=\"id\"\n aria-label=\"Operation Description\"\n role=\"group\"\n transformType=\"heading\"\n :value=\"operation.description\"\n withAnchors\n withImages />\n </template>\n <div class=\"endpoint-content\">\n <div class=\"operation-details-card\">\n <div\n v-if=\"Object.keys(operationExtensions).length > 0\"\n class=\"operation-details-card-item\">\n <SpecificationExtension :value=\"operationExtensions\" />\n </div>\n <div class=\"operation-details-card-item\">\n <OperationParameters\n :eventBus\n :options\n :parameters=\"operation.parameters\"\n :requestBody=\"getResolvedRef(operation.requestBody)\" />\n </div>\n <div class=\"operation-details-card-item\">\n <OperationResponses\n :eventBus\n :options\n :responses=\"operation.responses\" />\n </div>\n\n <!-- Callbacks -->\n <div\n v-if=\"operation?.callbacks\"\n class=\"operation-details-card-item\">\n <Callbacks\n :callbacks=\"operation.callbacks\"\n :eventBus\n :options\n :path />\n </div>\n </div>\n\n <ExampleResponses\n v-if=\"operation.responses\"\n class=\"operation-example-card\"\n :responses=\"operation.responses\" />\n\n <!-- New Example Request -->\n <div>\n <!-- External Docs -->\n <LinkList v-if=\"operation.externalDocs\">\n <ExternalDocs :value=\"operation.externalDocs\" />\n </LinkList>\n <!-- Request Example -->\n <ScalarErrorBoundary>\n <OperationCodeSample\n :key=\"requestBodyCompositionSelectionKey\"\n v-model:selectedExample=\"selectedExampleKey\"\n class=\"operation-example-card\"\n :clientOptions\n :eventBus\n fallback\n :isWebhook\n :method\n :operation\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \"\n :securitySchemes=\"selectedSecuritySchemes\"\n :selectedClient\n :selectedServer />\n </ScalarErrorBoundary>\n </div>\n </div>\n </SectionAccordion>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.operation-title {\n display: flex;\n justify-content: space-between;\n}\n.operation-details {\n display: flex;\n align-items: center;\n margin-top: 0;\n gap: 9px;\n\n min-width: 0;\n flex-shrink: 1;\n}\n.operation-details :deep(.endpoint-anchor .scalar-button svg) {\n width: 16px;\n height: 16px;\n}\n.endpoint-type {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n\n position: relative;\n z-index: 0;\n\n width: 60px;\n padding: 6px;\n flex-shrink: 0;\n\n font-size: var(--scalar-small);\n\n text-transform: uppercase;\n font-weight: var(--scalar-bold);\n font-family: var(--scalar-font);\n}\n.endpoint-type::after {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n\n background: currentColor;\n opacity: 0.15;\n\n border-radius: var(--scalar-radius);\n}\n\n.endpoint-anchor {\n display: flex;\n align-items: center;\n min-width: 0;\n flex-shrink: 1;\n}\n.endpoint-anchor.label {\n display: flex;\n}\n.endpoint-label {\n display: flex;\n align-items: baseline;\n gap: 9px;\n\n min-width: 0;\n flex-shrink: 1;\n\n color: var(--scalar-color-1);\n}\n\n.endpoint-label-path {\n font-family: var(--scalar-font-code);\n font-size: var(--scalar-mini);\n\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n.endpoint-label-path :deep(em) {\n color: var(--scalar-color-2);\n}\n.endpoint-label-name {\n color: var(--scalar-color-2);\n font-size: var(--scalar-small);\n\n / Concatenate the name before we shrink the path /\n flex-shrink: 1000000000;\n\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.endpoint-try-hint {\n padding: 2px;\n flex-shrink: 0;\n}\n.endpoint-copy {\n color: currentColor;\n}\n.endpoint-copy :deep(svg) {\n stroke-width: 2px;\n}\n\n.endpoint-content {\n display: grid;\n grid-auto-columns: 1fr;\n grid-auto-flow: row;\n gap: 9px;\n padding: 9px;\n}\n\n@variant lg {\n .endpoint-content {\n grid-auto-flow: column;\n }\n}\n\n@container (max-width: 900px) {\n .endpoint-content {\n grid-template-columns: 1fr;\n }\n}\n\n.endpoint-content > {\n min-width: 0;\n}\n\n.operation-details-card {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-width: 0;\n}\n.operation-details-card-item :deep(.parameter-list),\n.operation-details-card-item :deep(.callbacks-list) {\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-lg);\n margin-top: 0;\n}\n\n.operation-details-card-item {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.operation-details-card-item :deep(.parameter-list-items) {\n margin-bottom: 0;\n}\n.operation-details-card :deep(.parameter-item:last-of-type .parameter-schema) {\n padding-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-list .parameter-list) {\n margin-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-item) {\n margin: 0;\n padding: 0;\n}\n.operation-details-card :deep(.property) {\n padding: 9px;\n margin: 0;\n}\n.operation-details-card :deep(.parameter-list-title),\n.operation-details-card :deep(.request-body-title),\n.operation-details-card :deep(.callbacks-title) {\n text-transform: uppercase;\n font-weight: var(--scalar-bold);\n font-size: var(--scalar-mini);\n color: var(--scalar-color-2);\n line-height: 1.33;\n padding: 9px;\n margin: 0;\n}\n\n.operation-details-card :deep(.callback-list-item-title) {\n padding-left: 28px;\n padding-right: 12px;\n}\n\n.operation-details-card :deep(.callback-list-item-icon) {\n left: 6px;\n}\n\n.operation-details-card :deep(.callback-operation-container) {\n padding-inline: 9px;\n padding-bottom: 9px;\n}\n\n.operation-details-card :deep(.callback-operation-container > .request-body),\n.operation-details-card :deep(.callback-operation-container > .parameter-list) {\n border: none;\n}\n\n.operation-details-card\n :deep(.callback-operation-container > .request-body > .request-body-header) {\n padding: 0;\n padding-bottom: 9px;\n border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body-description) {\n margin-top: 0;\n padding: 9px 9px 0 9px;\n border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body) {\n margin-top: 0;\n border-radius: var(--scalar-radius-lg);\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.operation-details-card\n :deep(.request-body .schema-card--level-0 > .schema-card-description) {\n padding-inline: 9px;\n}\n\n.operation-details-card :deep(.request-body-header) {\n padding-bottom: 0;\n border-bottom: 0;\n}\n\n.operation-details-card :deep(.contents button) {\n margin-right: 9px;\n}\n\n.operation-details-card\n :deep(.schema-card--open + .schema-card:not(.schema-card--open)) {\n margin-inline: 9px;\n margin-bottom: 9px;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n padding: 0;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n padding: 0;\n}\n\n.operation-details-card :deep(.selected-content-type) {\n margin-right: 9px;\n}\n\n.operation-example-card {\n position: sticky;\n top: calc(var(--refs-viewport-offset) + 24px);\n max-height: calc(var(--refs-viewport-height) - 48px);\n}\n\n@media (max-width: 600px) {\n .operation-example-card {\n max-height: unset;\n position: static;\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwEA,MAAM,iBAAiB,eAAe,QAAA,UAAU,WAAW,QAAA,QAAQ,GAAE;EACrE,MAAM,sBAAsB,eAAe,mBAAmB,QAAA,UAAU,CAAA;;EAGxE,MAAM,qBAAqB,IAAY,GAAE;;EAGzC,MAAM,kCAAkC,IAAqC,EAAE,CAAA;EAE/E,MAAM,+CAA+C,gBACX,EACtC,GAAG,gCAAgC,OACpC,EACH;EAEA,MAAM,qCAAqC,eACzC,KAAK,UAAU,6CAA6C,MAAM,CACpE;AAEA,UAAQ,uCAAuC,gCAA+B;EAE9E,MAAM,EAAE,oBAAoB,cAAa;;uBAGvC,YAmKmB,MAAA,yBAAA,EAAA;IAlKhB,IAAI,QAAA;IACJ,cAAY,eAAA;IACb,OAAM;IACL,YAAU,CAAG,QAAA;IACd,aAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAU,UAAU,QAAA,UAAU,KAAI,mBAAA;KAAA,IAAsB,QAAA;KAAE,MAAQ;KAAK,CAAA;;IAG9E,OAAK,cAyCR,CAxCN,mBAwCM,OAxCN,YAwCM,CAvCJ,mBAsCM,OAtCN,YAsCM,CArCJ,YAGU,MAAA,mBAAA,EAAA;KAFR,OAAM;KACL,QAAQ,QAAA;KACT,OAAA;6BACF,YAgCS,MAAA,eAAA,EAAA;KA/BP,OAAM;KACL,iBAAa,OAAA,OAAA,OAAA,WAAQ,QAAA,UAAU,KAAI,qBAAA,EAAA,IAAwB,QAAA,IAAE,CAAA;;4BA6BzD,CA5BL,mBA4BK,MA5BL,YA4BK;MA3BH,mBAIM,OAJN,YAIM,CAHJ,YAEiB,uBAAA;OADd,YAAY,MAAA,sBAAqB,CAAC,QAAA,UAAS;OAC3C,MAAM,QAAA;;MAEX,mBAEM,OAFN,YAEM,gBADD,eAAA,MAAc,EAAA,EAAA;MAIX,MAAA,sBAAqB,CAAC,QAAA,UAAS,IAAA,WAAA,EADvC,YAKQ,MAAA,cAAA,EAAA;;OAHN,OAAK,eAAA,CAAC,cACE,MAAA,2BAA0B,CAAC,QAAA,UAAS,CAAA,CAAA;;8BACN,CAAA,gBAAA,gBAAnC,MAAA,sBAAqB,CAAC,QAAA,UAAS,CAAA,EAAA,EAAA,CAAA,CAAA;;;MAK5B,QAAA,aAAA,WAAA,EADR,YAIQ,MAAA,cAAA,EAAA;;OAFN,OAAM;;8BACkC,CAAxC,YAAwC,MAAA,uBAAA,EAAA,EAAhB,QAAO,QAAM,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAAG,YAC1C,GAAA,EAAA,CAAA;;;MAGA,YAEsB,MAAA,gBAAA,EAAA;OADnB,QAAQ,QAAA,UAAS;OAClB,UAAS;;;;;IAMV,SAAO,SAIK,EAJD,aAAM;KAE1B,YAEqB,MAAA,gBAAA,EAAA;MADlB,QAAQ,QAAA,UAAS;MAClB,UAAS;;MACM,QAAA,QAAQ,yBAAA,WAAA,EAAzB,mBAcW,UAAA,EAAA,KAAA,GAAA,EAAA,CAZD,UAAM,CAAK,QAAA,aAAA,WAAA,EADnB,YASM,MAAA,0BAAA,EAAA;;MAPH,IAAA,QAAA;MACA,UAAA,QAAA;MACA,aAAa,mBAAA;MACb,QAAA,QAAA;MACA,MAAA,QAAA;MACA,iCAA8C,6CAAA;;;;;;;;yBAGjD,YAEuC,MAAA,eAAA,EAAA;;MAArC,OAAM;;KAGF,QAAA,QAAQ,mBAAmB,QAAA,UAAU,eAAA,WAAA,EAD7C,mBAIO,QAJP,YAIO,gBADF,QAAA,UAAU,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAE1B,YAMwC,MAAA,iBAAA,EAAA;MALtC,OAAM;MACL,MAAM,MAAA,eAAc;MACrB,OAAM;MACN,MAAK;MACL,SAAQ;MACP,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,gBAAe,CAAC,QAAA,KAAI,EAAA,CAAA,OAAA,CAAA;;;2BA+E/B,CAjEN,mBAiEM,OAjEN,YAiEM;KAhEJ,mBA8BM,OA9BN,YA8BM;MA5BI,OAAO,KAAK,oBAAA,MAAmB,CAAE,SAAM,KAAA,WAAA,EAD/C,mBAIM,OAJN,YAIM,CADJ,YAAuD,gCAAA,EAA9B,OAAO,oBAAA,OAAmB,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;MAErD,mBAMM,OANN,aAMM,CALJ,YAIyD,6BAAA;OAHtD,UAAA,QAAA;OACA,SAAA,QAAA;OACA,YAAY,QAAA,UAAU;OACtB,aAAa,MAAA,eAAc,CAAC,QAAA,UAAU,YAAW;;;;;;;MAEtD,mBAKM,OALN,aAKM,CAJJ,YAGqC,4BAAA;OAFlC,UAAA,QAAA;OACA,SAAA,QAAA;OACA,WAAW,QAAA,UAAU;;;;;;MAKlB,QAAA,WAAW,aAAA,WAAA,EADnB,mBAQM,OARN,aAQM,CALJ,YAIU,mBAAA;OAHP,WAAW,QAAA,UAAU;OACrB,UAAA,QAAA;OACA,SAAA,QAAA;OACA,MAAA,QAAA;;;;;;;;KAKC,QAAA,UAAU,aAAA,WAAA,EADlB,YAGqC,MAAA,yBAAA,EAAA;;MADnC,OAAM;MACL,WAAW,QAAA,UAAU;;KAGxB,mBAyBM,OAAA,MAAA,CAvBY,QAAA,UAAU,gBAAA,WAAA,EAA1B,YAEW,MAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;6BADuC,CAAhD,YAAgD,MAAA,qBAAA,EAAA,EAAjC,OAAO,QAAA,UAAU,cAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;yCAGlC,YAkBsB,MAAA,oBAAA,EAAA,MAAA;6BADA,EAAA,WAAA,EAhBpB,YAgBoB,MAAA,oBAAA,EAAA;OAfjB,KAAK,mCAAA;OACE,iBAAiB,mBAAA;4FAAkB,QAAA;OAC3C,OAAM;OACL,eAAA,QAAA;OACA,UAAA,QAAA;OACD,UAAA;OACC,WAAA,QAAA;OACA,QAAA,QAAA;OACA,WAAA,QAAA;OACA,MAAA,QAAA;OACA,iCAAgD,6CAAA;OAGhD,iBAAiB,QAAA;OACjB,gBAAA,QAAA;OACA,gBAAA,QAAA;;;;;;;;;;;;;;;;;;OAzED,QAAA,UAAU,cAAA;UACf;sBAQc,CAPf,YAOe,MAAA,eAAA,EAAA;KANZ,cAAc,QAAA;KACf,cAAW;KACX,MAAK;KACL,eAAc;KACb,OAAO,QAAA,UAAU;KAClB,aAAA;KACA,YAAA"}

package/dist/features/Operation/layouts/ModernLayout.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModernLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"names":[],"mappings":"~~AAkSA~~,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;~~AAqBrE~~,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAUxE,KAAK,WAAW,GAAG,IAAI,CACnB,cAAc,EACZ,UAAU,GACV,WAAW,GACX,QAAQ,GACR,aAAa,GACb,iBAAiB,GACjB,WAAW,CACd,GAAG;IACF,wCAAwC;IACxC,SAAS,EAAE,eAAe,CAAA;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,sDAAsD;IACtD,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;CACtD,CAAC;AAklBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"ModernLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"names":[],"mappings":"AA6RA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AA0BrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAUxE,KAAK,WAAW,GAAG,IAAI,CACnB,cAAc,EACZ,UAAU,GACV,WAAW,GACX,QAAQ,GACR,aAAa,GACb,iBAAiB,GACjB,WAAW,CACd,GAAG;IACF,wCAAwC;IACxC,SAAS,EAAE,eAAe,CAAA;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,sDAAsD;IACtD,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;CACtD,CAAC;AAklBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Operation/layouts/ModernLayout.vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import ModernLayout_vue_vue_type_script_setup_true_lang_default from "./ModernLayout.vue.script.js";
 /* empty css                           */
 //#region src/features/Operation/layouts/ModernLayout.vue
-var ModernLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModernLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6488f75e"]]);
+var ModernLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModernLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-25de20c7"]]);
 //#endregion
 export { ModernLayout_default as default };

package/dist/features/Operation/layouts/ModernLayout.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModernLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/~~v2/~~blocks/operation-code-sample'\nimport { ScalarErrorBoundary, ScalarMarkdown } from '@scalar/components'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport {~~\n getOperationStability,\n getOperationStabilityColor,\n isOperationDeprecated,\n}~~ ~~from '@scalar/oas-utils/helpers'\nimport {~~ getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref, useId } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport {\n Section,\n SectionColumn,\n SectionColumns,\n SectionContent,\n SectionHeader,\n SectionHeaderTag,\n} from '@/components/Section'\nimport AskAgentButton from '@/features/ask-agent-button/AskAgentButton.vue'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n clientOptions,\n eventBus,\n isWebhook,\n method,\n operation,\n options,\n path,\n selectedServer,\n selectedSecuritySchemes,\n selectedClient,\n} = defineProps<\n Omit<\n OperationProps,\n \| 'document'\n \| 'pathValue'\n \| 'server'\n \| 'isCollapsed'\n \| 'securitySchemes'\n \| 'authStore'\n > & {\n /** Operation object with path params /\n operation: OperationObject\n /* The selected server for the operation /\n selectedServer: ServerObject \| null\n /* The selected security schemes for the operation /\n selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n }\n>()\n\nconst operationTitle = computed(() => operation.summary \|\| path \|\| '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/* Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample /\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n (): RequestBodyCompositionSelection => ({\n ...requestBodyCompositionSelection.value,\n }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n</script>\n\n<template>\n <Section\n :id=\"id\"\n :aria-labelledby=\"labelId\"\n :label=\"operationTitle\"\n tabindex=\"-1\"\n @intersecting=\"() => eventBus?.emit('intersecting:nav-item', { id })\">\n <SectionContent>\n <div class=\"flex flex-row justify-between gap-1\">\n <!-- Left -->\n <div class=\"flex gap-1\">\n <!-- Operation ID -->\n <Badge v-if=\"options?.showOperationId && operation.operationId\">\n {{ operation.operationId }}\n </Badge>\n <!-- Stability badge -->\n <Badge\n v-if=\"getOperationStability(operation)\"\n class=\"capitalize\"\n :class=\"getOperationStabilityColor(operation)\">\n {{ getOperationStability(operation) }}\n </Badge>\n <!-- Webhook badge -->\n <Badge\n v-if=\"isWebhook\"\n class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n </Badge>\n <!-- x-badges before -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"before\" />\n </div>\n <!-- Right -->\n <div class=\"flex gap-1\">\n <!-- x-badges after -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"after\" />\n </div>\n </div>\n <div :class=\"isOperationDeprecated(operation) ? 'deprecated' : ''\">\n <SectionHeader>\n <Anchor\n @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n <SectionHeaderTag\n :id=\"labelId\"\n :level=\"3\">\n {{ operationTitle }}\n </SectionHeaderTag>\n </Anchor>\n </SectionHeader>\n </div>\n <SectionColumns>\n <SectionColumn>\n <div class=\"operation-details\">\n <SpecificationExtension :value=\"operationExtensions\" />\n <ScalarMarkdown\n :anchorPrefix=\"id\"\n aria-label=\"Operation Description\"\n role=\"group\"\n transformType=\"heading\"\n :value=\"operation.description\"\n withAnchors\n withImages />\n <OperationParameters\n :breadcrumb=\"[id]\"\n :eventBus\n :options\n :parameters=\"operation.parameters\"\n :requestBody=\"getResolvedRef(operation.requestBody)\" />\n <OperationResponses\n :breadcrumb=\"[id]\"\n :collapsableItems=\"!options.expandAllResponses\"\n :eventBus\n :options\n :responses=\"operation.responses\" />\n\n <!-- Callbacks -->\n <ScalarErrorBoundary>\n <Callbacks\n v-if=\"operation.callbacks\"\n :callbacks=\"operation.callbacks\"\n class=\"mt-6\"\n :eventBus\n :options\n :path />\n </ScalarErrorBoundary>\n </div>\n </SectionColumn>\n <SectionColumn>\n <div class=\"examples\">\n <!-- External Docs -->\n <LinkList v-if=\"operation.externalDocs\">\n <ExternalDocs :value=\"operation.externalDocs\" />\n </LinkList>\n\n <!-- New Example Request -->\n <ScalarErrorBoundary>\n <OperationCodeSample\n :key=\"requestBodyCompositionSelectionKey\"\n :clientOptions\n :eventBus\n fallback\n :isWebhook\n :method\n :operation\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \"\n :securitySchemes=\"selectedSecuritySchemes\"\n :selectedClient\n :selectedServer>\n <template #header>\n <OperationPath\n class=\"font-code text-c-2 [&_em]:text-c-1 [&_em]:not-italic\"\n :deprecated=\"operation?.deprecated\"\n :path=\"path\" />\n </template>\n <template\n v-if=\"!isWebhook\"\n #footer=\"{ exampleName }\">\n <div class=\"flex\">\n <AskAgentButton />\n <TestRequestButton\n v-if=\"!options.hideTestRequestButton\"\n :id\n :eventBus\n :exampleName\n :method\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \" />\n </div>\n </template>\n </OperationCodeSample>\n </ScalarErrorBoundary>\n\n <ScalarErrorBoundary>\n <ExampleResponses\n v-if=\"operation.responses\"\n :responses=\"operation.responses\"\n style=\"margin-top: 12px\" />\n </ScalarErrorBoundary>\n </div>\n </SectionColumn>\n </SectionColumns>\n </SectionContent>\n </Section>\n</template>\n\n<style scoped>\n.examples {\n position: sticky;\n top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n.examples > {\n max-height: calc((var(--refs-viewport-height) - 60px) / 2);\n position: relative;\n}\n\n.examples > :first-of-type:last-of-type {\n max-height: calc((var(--refs-viewport-height) - 60px));\n}\n\n/\n * Don't constrain card height on mobile\n * (or zoomed in screens)\n /\n@media (max-width: 600px) {\n .examples > {\n max-height: unset;\n }\n}\n.deprecated * {\n text-decoration: line-through;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"ModernLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarErrorBoundary, ScalarMarkdown } from '@scalar/components'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref, useId } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport {\n Section,\n SectionColumn,\n SectionColumns,\n SectionContent,\n SectionHeader,\n SectionHeaderTag,\n} from '@/components/Section'\nimport AskAgentButton from '@/features/ask-agent-button/AskAgentButton.vue'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport {\n getOperationStability,\n getOperationStabilityColor,\n isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n clientOptions,\n eventBus,\n isWebhook,\n method,\n operation,\n options,\n path,\n selectedServer,\n selectedSecuritySchemes,\n selectedClient,\n} = defineProps<\n Omit<\n OperationProps,\n \| 'document'\n \| 'pathValue'\n \| 'server'\n \| 'isCollapsed'\n \| 'securitySchemes'\n \| 'authStore'\n > & {\n /** Operation object with path params /\n operation: OperationObject\n /* The selected server for the operation /\n selectedServer: ServerObject \| null\n /* The selected security schemes for the operation /\n selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n }\n>()\n\nconst operationTitle = computed(() => operation.summary \|\| path \|\| '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/* Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample /\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n (): RequestBodyCompositionSelection => ({\n ...requestBodyCompositionSelection.value,\n }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n</script>\n\n<template>\n <Section\n :id=\"id\"\n :aria-labelledby=\"labelId\"\n :label=\"operationTitle\"\n tabindex=\"-1\"\n @intersecting=\"() => eventBus?.emit('intersecting:nav-item', { id })\">\n <SectionContent>\n <div class=\"flex flex-row justify-between gap-1\">\n <!-- Left -->\n <div class=\"flex gap-1\">\n <!-- Operation ID -->\n <Badge v-if=\"options?.showOperationId && operation.operationId\">\n {{ operation.operationId }}\n </Badge>\n <!-- Stability badge -->\n <Badge\n v-if=\"getOperationStability(operation)\"\n class=\"capitalize\"\n :class=\"getOperationStabilityColor(operation)\">\n {{ getOperationStability(operation) }}\n </Badge>\n <!-- Webhook badge -->\n <Badge\n v-if=\"isWebhook\"\n class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n </Badge>\n <!-- x-badges before -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"before\" />\n </div>\n <!-- Right -->\n <div class=\"flex gap-1\">\n <!-- x-badges after -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"after\" />\n </div>\n </div>\n <div :class=\"isOperationDeprecated(operation) ? 'deprecated' : ''\">\n <SectionHeader>\n <Anchor\n @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n <SectionHeaderTag\n :id=\"labelId\"\n :level=\"3\">\n {{ operationTitle }}\n </SectionHeaderTag>\n </Anchor>\n </SectionHeader>\n </div>\n <SectionColumns>\n <SectionColumn>\n <div class=\"operation-details\">\n <SpecificationExtension :value=\"operationExtensions\" />\n <ScalarMarkdown\n :anchorPrefix=\"id\"\n aria-label=\"Operation Description\"\n role=\"group\"\n transformType=\"heading\"\n :value=\"operation.description\"\n withAnchors\n withImages />\n <OperationParameters\n :breadcrumb=\"[id]\"\n :eventBus\n :options\n :parameters=\"operation.parameters\"\n :requestBody=\"getResolvedRef(operation.requestBody)\" />\n <OperationResponses\n :breadcrumb=\"[id]\"\n :collapsableItems=\"!options.expandAllResponses\"\n :eventBus\n :options\n :responses=\"operation.responses\" />\n\n <!-- Callbacks -->\n <ScalarErrorBoundary>\n <Callbacks\n v-if=\"operation.callbacks\"\n :callbacks=\"operation.callbacks\"\n class=\"mt-6\"\n :eventBus\n :options\n :path />\n </ScalarErrorBoundary>\n </div>\n </SectionColumn>\n <SectionColumn>\n <div class=\"examples\">\n <!-- External Docs -->\n <LinkList v-if=\"operation.externalDocs\">\n <ExternalDocs :value=\"operation.externalDocs\" />\n </LinkList>\n\n <!-- New Example Request -->\n <ScalarErrorBoundary>\n <OperationCodeSample\n :key=\"requestBodyCompositionSelectionKey\"\n :clientOptions\n :eventBus\n fallback\n :isWebhook\n :method\n :operation\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \"\n :securitySchemes=\"selectedSecuritySchemes\"\n :selectedClient\n :selectedServer>\n <template #header>\n <OperationPath\n class=\"font-code text-c-2 [&_em]:text-c-1 [&_em]:not-italic\"\n :deprecated=\"operation?.deprecated\"\n :path=\"path\" />\n </template>\n <template\n v-if=\"!isWebhook\"\n #footer=\"{ exampleName }\">\n <div class=\"flex\">\n <AskAgentButton />\n <TestRequestButton\n v-if=\"!options.hideTestRequestButton\"\n :id\n :eventBus\n :exampleName\n :method\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \" />\n </div>\n </template>\n </OperationCodeSample>\n </ScalarErrorBoundary>\n\n <ScalarErrorBoundary>\n <ExampleResponses\n v-if=\"operation.responses\"\n :responses=\"operation.responses\"\n style=\"margin-top: 12px\" />\n </ScalarErrorBoundary>\n </div>\n </SectionColumn>\n </SectionColumns>\n </SectionContent>\n </Section>\n</template>\n\n<style scoped>\n.examples {\n position: sticky;\n top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n.examples > {\n max-height: calc((var(--refs-viewport-height) - 60px) / 2);\n position: relative;\n}\n\n.examples > :first-of-type:last-of-type {\n max-height: calc((var(--refs-viewport-height) - 60px));\n}\n\n/\n * Don't constrain card height on mobile\n * (or zoomed in screens)\n /\n@media (max-width: 600px) {\n .examples > {\n max-height: unset;\n }\n}\n.deprecated * {\n text-decoration: line-through;\n}\n</style>\n"],"mappings":""}

package/dist/features/Operation/layouts/ModernLayout.vue.script.js CHANGED Viewed

@@ -16,14 +16,14 @@ import ExampleResponses_default from "../../example-responses/ExampleResponses.v
 import OperationParameters_default from "../components/OperationParameters.vue.js";
 import OperationResponses_default from "../components/OperationResponses.vue.js";
 import Callbacks_default from "../components/callbacks/Callbacks.vue.js";
+import { getOperationStability, getOperationStabilityColor, isOperationDeprecated } from "../helpers/operation-stability.js";
 import TestRequestButton_default from "../../test-request-button/TestRequestButton.vue.js";
 import XBadges_default from "../../x-badges/XBadges.vue.js";
 import AskAgentButton_default from "../../ask-agent-button/AskAgentButton.vue.js";
 import { computed, createBlock, createCommentVNode, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, provide, ref, toDisplayString, unref, useId, withCtx } from "vue";
 import { ScalarErrorBoundary, ScalarMarkdown } from "@scalar/components";
 import { ScalarIconWebhooksLogo } from "@scalar/icons";
-import { getOperationStability, getOperationStabilityColor, isOperationDeprecated } from "@scalar/oas-utils/helpers";
-import { OperationCodeSample } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { OperationCodeSample } from "@scalar/api-client/blocks/operation-code-sample";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
 //#region src/features/Operation/layouts/ModernLayout.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-row justify-between gap-1" };

package/dist/features/Operation/layouts/ModernLayout.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModernLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport { ScalarErrorBoundary, ScalarMarkdown } from '@scalar/components'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport {\n getOperationStability,\n getOperationStabilityColor,\n isOperationDeprecated,\n} from '@scalar/oas-utils/helpers'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref, useId } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport {\n Section,\n SectionColumn,\n SectionColumns,\n SectionContent,\n SectionHeader,\n SectionHeaderTag,\n} from '@/components/Section'\nimport AskAgentButton from '@/features/ask-agent-button/AskAgentButton.vue'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n clientOptions,\n eventBus,\n isWebhook,\n method,\n operation,\n options,\n path,\n selectedServer,\n selectedSecuritySchemes,\n selectedClient,\n} = defineProps<\n Omit<\n OperationProps,\n \| 'document'\n \| 'pathValue'\n \| 'server'\n \| 'isCollapsed'\n \| 'securitySchemes'\n \| 'authStore'\n > & {\n /** Operation object with path params /\n operation: OperationObject\n /* The selected server for the operation /\n selectedServer: ServerObject \| null\n /* The selected security schemes for the operation /\n selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n }\n>()\n\nconst operationTitle = computed(() => operation.summary \|\| path \|\| '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/* Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample /\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n (): RequestBodyCompositionSelection => ({\n ...requestBodyCompositionSelection.value,\n }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n</script>\n\n<template>\n <Section\n :id=\"id\"\n :aria-labelledby=\"labelId\"\n :label=\"operationTitle\"\n tabindex=\"-1\"\n @intersecting=\"() => eventBus?.emit('intersecting:nav-item', { id })\">\n <SectionContent>\n <div class=\"flex flex-row justify-between gap-1\">\n <!-- Left -->\n <div class=\"flex gap-1\">\n <!-- Operation ID -->\n <Badge v-if=\"options?.showOperationId && operation.operationId\">\n {{ operation.operationId }}\n </Badge>\n <!-- Stability badge -->\n <Badge\n v-if=\"getOperationStability(operation)\"\n class=\"capitalize\"\n :class=\"getOperationStabilityColor(operation)\">\n {{ getOperationStability(operation) }}\n </Badge>\n <!-- Webhook badge -->\n <Badge\n v-if=\"isWebhook\"\n class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n </Badge>\n <!-- x-badges before -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"before\" />\n </div>\n <!-- Right -->\n <div class=\"flex gap-1\">\n <!-- x-badges after -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"after\" />\n </div>\n </div>\n <div :class=\"isOperationDeprecated(operation) ? 'deprecated' : ''\">\n <SectionHeader>\n <Anchor\n @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n <SectionHeaderTag\n :id=\"labelId\"\n :level=\"3\">\n {{ operationTitle }}\n </SectionHeaderTag>\n </Anchor>\n </SectionHeader>\n </div>\n <SectionColumns>\n <SectionColumn>\n <div class=\"operation-details\">\n <SpecificationExtension :value=\"operationExtensions\" />\n <ScalarMarkdown\n :anchorPrefix=\"id\"\n aria-label=\"Operation Description\"\n role=\"group\"\n transformType=\"heading\"\n :value=\"operation.description\"\n withAnchors\n withImages />\n <OperationParameters\n :breadcrumb=\"[id]\"\n :eventBus\n :options\n :parameters=\"operation.parameters\"\n :requestBody=\"getResolvedRef(operation.requestBody)\" />\n <OperationResponses\n :breadcrumb=\"[id]\"\n :collapsableItems=\"!options.expandAllResponses\"\n :eventBus\n :options\n :responses=\"operation.responses\" />\n\n <!-- Callbacks -->\n <ScalarErrorBoundary>\n <Callbacks\n v-if=\"operation.callbacks\"\n :callbacks=\"operation.callbacks\"\n class=\"mt-6\"\n :eventBus\n :options\n :path />\n </ScalarErrorBoundary>\n </div>\n </SectionColumn>\n <SectionColumn>\n <div class=\"examples\">\n <!-- External Docs -->\n <LinkList v-if=\"operation.externalDocs\">\n <ExternalDocs :value=\"operation.externalDocs\" />\n </LinkList>\n\n <!-- New Example Request -->\n <ScalarErrorBoundary>\n <OperationCodeSample\n :key=\"requestBodyCompositionSelectionKey\"\n :clientOptions\n :eventBus\n fallback\n :isWebhook\n :method\n :operation\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \"\n :securitySchemes=\"selectedSecuritySchemes\"\n :selectedClient\n :selectedServer>\n <template #header>\n <OperationPath\n class=\"font-code text-c-2 [&_em]:text-c-1 [&_em]:not-italic\"\n :deprecated=\"operation?.deprecated\"\n :path=\"path\" />\n </template>\n <template\n v-if=\"!isWebhook\"\n #footer=\"{ exampleName }\">\n <div class=\"flex\">\n <AskAgentButton />\n <TestRequestButton\n v-if=\"!options.hideTestRequestButton\"\n :id\n :eventBus\n :exampleName\n :method\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \" />\n </div>\n </template>\n </OperationCodeSample>\n </ScalarErrorBoundary>\n\n <ScalarErrorBoundary>\n <ExampleResponses\n v-if=\"operation.responses\"\n :responses=\"operation.responses\"\n style=\"margin-top: 12px\" />\n </ScalarErrorBoundary>\n </div>\n </SectionColumn>\n </SectionColumns>\n </SectionContent>\n </Section>\n</template>\n\n<style scoped>\n.examples {\n position: sticky;\n top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n.examples > {\n max-height: calc((var(--refs-viewport-height) - 60px) / 2);\n position: relative;\n}\n\n.examples > :first-of-type:last-of-type {\n max-height: calc((var(--refs-viewport-height) - 60px));\n}\n\n/\n * Don't constrain card height on mobile\n * (or zoomed in screens)\n /\n@media (max-width: 600px) {\n .examples > {\n max-height: unset;\n }\n}\n.deprecated * {\n text-decoration: line-through;\n}\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"ModernLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarErrorBoundary, ScalarMarkdown } from '@scalar/components'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n OperationObject,\n ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref, useId } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport {\n Section,\n SectionColumn,\n SectionColumns,\n SectionContent,\n SectionHeader,\n SectionHeaderTag,\n} from '@/components/Section'\nimport AskAgentButton from '@/features/ask-agent-button/AskAgentButton.vue'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport {\n getOperationStability,\n getOperationStabilityColor,\n isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n clientOptions,\n eventBus,\n isWebhook,\n method,\n operation,\n options,\n path,\n selectedServer,\n selectedSecuritySchemes,\n selectedClient,\n} = defineProps<\n Omit<\n OperationProps,\n \| 'document'\n \| 'pathValue'\n \| 'server'\n \| 'isCollapsed'\n \| 'securitySchemes'\n \| 'authStore'\n > & {\n /** Operation object with path params /\n operation: OperationObject\n /* The selected server for the operation /\n selectedServer: ServerObject \| null\n /* The selected security schemes for the operation /\n selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n }\n>()\n\nconst operationTitle = computed(() => operation.summary \|\| path \|\| '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/* Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample /\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n (): RequestBodyCompositionSelection => ({\n ...requestBodyCompositionSelection.value,\n }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n</script>\n\n<template>\n <Section\n :id=\"id\"\n :aria-labelledby=\"labelId\"\n :label=\"operationTitle\"\n tabindex=\"-1\"\n @intersecting=\"() => eventBus?.emit('intersecting:nav-item', { id })\">\n <SectionContent>\n <div class=\"flex flex-row justify-between gap-1\">\n <!-- Left -->\n <div class=\"flex gap-1\">\n <!-- Operation ID -->\n <Badge v-if=\"options?.showOperationId && operation.operationId\">\n {{ operation.operationId }}\n </Badge>\n <!-- Stability badge -->\n <Badge\n v-if=\"getOperationStability(operation)\"\n class=\"capitalize\"\n :class=\"getOperationStabilityColor(operation)\">\n {{ getOperationStability(operation) }}\n </Badge>\n <!-- Webhook badge -->\n <Badge\n v-if=\"isWebhook\"\n class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n </Badge>\n <!-- x-badges before -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"before\" />\n </div>\n <!-- Right -->\n <div class=\"flex gap-1\">\n <!-- x-badges after -->\n <XBadges\n :badges=\"operation['x-badges']\"\n position=\"after\" />\n </div>\n </div>\n <div :class=\"isOperationDeprecated(operation) ? 'deprecated' : ''\">\n <SectionHeader>\n <Anchor\n @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n <SectionHeaderTag\n :id=\"labelId\"\n :level=\"3\">\n {{ operationTitle }}\n </SectionHeaderTag>\n </Anchor>\n </SectionHeader>\n </div>\n <SectionColumns>\n <SectionColumn>\n <div class=\"operation-details\">\n <SpecificationExtension :value=\"operationExtensions\" />\n <ScalarMarkdown\n :anchorPrefix=\"id\"\n aria-label=\"Operation Description\"\n role=\"group\"\n transformType=\"heading\"\n :value=\"operation.description\"\n withAnchors\n withImages />\n <OperationParameters\n :breadcrumb=\"[id]\"\n :eventBus\n :options\n :parameters=\"operation.parameters\"\n :requestBody=\"getResolvedRef(operation.requestBody)\" />\n <OperationResponses\n :breadcrumb=\"[id]\"\n :collapsableItems=\"!options.expandAllResponses\"\n :eventBus\n :options\n :responses=\"operation.responses\" />\n\n <!-- Callbacks -->\n <ScalarErrorBoundary>\n <Callbacks\n v-if=\"operation.callbacks\"\n :callbacks=\"operation.callbacks\"\n class=\"mt-6\"\n :eventBus\n :options\n :path />\n </ScalarErrorBoundary>\n </div>\n </SectionColumn>\n <SectionColumn>\n <div class=\"examples\">\n <!-- External Docs -->\n <LinkList v-if=\"operation.externalDocs\">\n <ExternalDocs :value=\"operation.externalDocs\" />\n </LinkList>\n\n <!-- New Example Request -->\n <ScalarErrorBoundary>\n <OperationCodeSample\n :key=\"requestBodyCompositionSelectionKey\"\n :clientOptions\n :eventBus\n fallback\n :isWebhook\n :method\n :operation\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \"\n :securitySchemes=\"selectedSecuritySchemes\"\n :selectedClient\n :selectedServer>\n <template #header>\n <OperationPath\n class=\"font-code text-c-2 [&_em]:text-c-1 [&_em]:not-italic\"\n :deprecated=\"operation?.deprecated\"\n :path=\"path\" />\n </template>\n <template\n v-if=\"!isWebhook\"\n #footer=\"{ exampleName }\">\n <div class=\"flex\">\n <AskAgentButton />\n <TestRequestButton\n v-if=\"!options.hideTestRequestButton\"\n :id\n :eventBus\n :exampleName\n :method\n :path\n :requestBodyCompositionSelection=\"\n requestBodyCompositionSelectionForCodeSample\n \" />\n </div>\n </template>\n </OperationCodeSample>\n </ScalarErrorBoundary>\n\n <ScalarErrorBoundary>\n <ExampleResponses\n v-if=\"operation.responses\"\n :responses=\"operation.responses\"\n style=\"margin-top: 12px\" />\n </ScalarErrorBoundary>\n </div>\n </SectionColumn>\n </SectionColumns>\n </SectionContent>\n </Section>\n</template>\n\n<style scoped>\n.examples {\n position: sticky;\n top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n.examples > {\n max-height: calc((var(--refs-viewport-height) - 60px) / 2);\n position: relative;\n}\n\n.examples > :first-of-type:last-of-type {\n max-height: calc((var(--refs-viewport-height) - 60px));\n}\n\n/\n * Don't constrain card height on mobile\n * (or zoomed in screens)\n /\n@media (max-width: 600px) {\n .examples > {\n max-height: unset;\n }\n}\n.deprecated * {\n text-decoration: line-through;\n}\n</style>\n"],"mappings":"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"}

package/dist/features/Search/components/SearchModal.vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import SearchModal_vue_vue_type_script_setup_true_lang_default from "./SearchModal.vue.script.js";
 /* empty css                          */
 //#region src/features/Search/components/SearchModal.vue
-var SearchModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SearchModal_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c1c368f9"]]);
+var SearchModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SearchModal_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9b0e55ef"]]);
 //#endregion
 export { SearchModal_default as default };

package/dist/features/Search/components/SearchModal.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchModal.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n ScalarModal,\n ScalarSearchInput,\n ScalarSearchResultList,\n type ModalState,\n} from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useSearchIndex } from '@/features/Search/hooks/useSearchIndex'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n modalState: ModalState\n document: OpenApiDocument \| undefined\n eventBus: WorkspaceEventBus\n}>()\n\n/** Base id for the search form /\nconst id = nanoid()\n/* An id for the results listbox /\nconst listboxId = `${id}-search-result`\n/* An id for the results instructions /\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useSearchIndex(() => props.document)\n\nconst selectedIndex = ref<number \| undefined>(undefined)\n\n/* Clear the query value when the modal is opened /\nwatch(\n () => props.modalState.open,\n (open) => {\n if (open) {\n query.value = ''\n }\n },\n)\n\n/* Keyboard navigation /\nconst navigateSearchResults = (direction: 'up' \| 'down') => {\n const offset = direction === 'up' ? -1 : 1\n const length = results.value.length\n\n if (typeof selectedIndex.value === 'number') {\n // Ensures we loop around the array by using the remainder\n selectedIndex.value = (selectedIndex.value + offset + length) % length\n } else {\n // If no index is selected, we select the first or last item depending on the direction\n\n selectedIndex.value = offset === -1 ? length - 1 : 0\n }\n}\n\n/* Handle the selection of a search result /\nfunction handleSelect(idx: number \| undefined) {\n if (typeof idx !== 'number' \|\| !results.value[idx]) {\n return\n }\n\n const result = results.value[idx]\n props.modalState.hide()\n props.eventBus.emit('scroll-to:nav-item', { id: result.item.id })\n}\n\n/\n Active descendant id for the search input\n * NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly\n */\nconst activeDescendantId = computed(() => {\n const selectedResult = results.value[selectedIndex.value ?? -1]\n\n return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n<template>\n <ScalarModal\n aria-label=\"Reference Search\"\n :state=\"modalState\"\n variant=\"search\">\n <div\n class=\"mb-0 flex flex-col\"\n role=\"search\">\n <ScalarSearchInput\n v-model=\"query\"\n :aria-activedescendant=\"activeDescendantId\"\n aria-autocomplete=\"list\"\n :aria-controls=\"listboxId\"\n :aria-describedby=\"instructionsId\"\n role=\"combobox\"\n @blur=\"selectedIndex = undefined\"\n @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n </div>\n <ScalarSearchResultList\n :id=\"listboxId\"\n aria-label=\"Reference Search Results\"\n class=\"custom-scroll p-1 pt-0\"\n :noResults=\"!results.length\">\n <template #query>\n {{ query }}\n </template>\n <SearchResult\n v-for=\"(result, idx) in results\"\n :id=\"`search-result-${result.item.id}`\"\n :key=\"result.refIndex\"\n :isSelected=\"selectedIndex === idx\"\n :result=\"result\"\n @click.prevent=\"() => handleSelect(idx)\" />\n </ScalarSearchResultList>\n <div\n :id=\"instructionsId\"\n class=\"ref-search-meta\">\n <span\n aria-hidden=\"true\"\n class=\"contents\">\n <span>↑↓ Navigate</span>\n <span>⏎ Select</span>\n </span>\n <span class=\"sr-only\">\n Press up arrow / down arrow to navigate, enter to select, type to filter\n results\n </span>\n </div>\n </ScalarModal>\n</template>\n<style scoped>\n.ref-search-meta {\n background: var(--scalar-background-1);\n border-bottom-left-radius: var(--scalar-radius-lg);\n border-bottom-right-radius: var(--scalar-radius-lg);\n padding: 6px 12px;\n font-size: var(--scalar-font-size-4);\n color: var(--scalar-color-3);\n font-weight: var(--scalar-semibold);\n display: flex;\n gap: 12px;\n border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"SearchModal.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n ScalarModal,\n ScalarSearchInput,\n ScalarSearchResultList,\n type ModalState,\n} from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useSearchIndex } from '@/features/Search/hooks/useSearchIndex'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n modalState: ModalState\n document: OpenApiDocument \| undefined\n eventBus: WorkspaceEventBus\n}>()\n\n/** Base id for the search form /\nconst id = nanoid()\n/* An id for the results listbox /\nconst listboxId = `${id}-search-result`\n/* An id for the results instructions /\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useSearchIndex(() => props.document)\n\nconst selectedIndex = ref<number \| undefined>(undefined)\n\n/* Clear the query value when the modal is opened /\nwatch(\n () => props.modalState.open,\n (open) => {\n if (open) {\n query.value = ''\n }\n },\n)\n\n/* Keyboard navigation /\nconst navigateSearchResults = (direction: 'up' \| 'down') => {\n const offset = direction === 'up' ? -1 : 1\n const length = results.value.length\n\n if (typeof selectedIndex.value === 'number') {\n // Ensures we loop around the array by using the remainder\n selectedIndex.value = (selectedIndex.value + offset + length) % length\n } else {\n // If no index is selected, we select the first or last item depending on the direction\n\n selectedIndex.value = offset === -1 ? length - 1 : 0\n }\n}\n\n/* Handle the selection of a search result /\nfunction handleSelect(idx: number \| undefined) {\n if (typeof idx !== 'number' \|\| !results.value[idx]) {\n return\n }\n\n const result = results.value[idx]\n props.modalState.hide()\n props.eventBus.emit('scroll-to:nav-item', { id: result.item.id })\n}\n\n/\n Active descendant id for the search input\n * NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly\n */\nconst activeDescendantId = computed(() => {\n const selectedResult = results.value[selectedIndex.value ?? -1]\n\n return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n<template>\n <ScalarModal\n aria-label=\"Reference Search\"\n :state=\"modalState\"\n variant=\"search\">\n <div\n class=\"mb-0 flex flex-col\"\n role=\"search\">\n <ScalarSearchInput\n v-model=\"query\"\n :aria-activedescendant=\"activeDescendantId\"\n aria-autocomplete=\"list\"\n :aria-controls=\"listboxId\"\n :aria-describedby=\"instructionsId\"\n role=\"combobox\"\n @blur=\"selectedIndex = undefined\"\n @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n </div>\n <ScalarSearchResultList\n :id=\"listboxId\"\n aria-label=\"Reference Search Results\"\n class=\"custom-scroll px-1 pb-1\"\n :noResults=\"!results.length\">\n <template #query>\n {{ query }}\n </template>\n <SearchResult\n v-for=\"(result, idx) in results\"\n :id=\"`search-result-${result.item.id}`\"\n :key=\"result.refIndex\"\n :isSelected=\"selectedIndex === idx\"\n :result=\"result\"\n @click.prevent=\"() => handleSelect(idx)\" />\n </ScalarSearchResultList>\n <div\n :id=\"instructionsId\"\n class=\"ref-search-meta\">\n <span\n aria-hidden=\"true\"\n class=\"contents\">\n <span>↑↓ Navigate</span>\n <span>⏎ Select</span>\n </span>\n <span class=\"sr-only\">\n Press up arrow / down arrow to navigate, enter to select, type to filter\n results\n </span>\n </div>\n </ScalarModal>\n</template>\n<style scoped>\n.ref-search-meta {\n background: var(--scalar-background-1);\n border-bottom-left-radius: var(--scalar-radius-lg);\n border-bottom-right-radius: var(--scalar-radius-lg);\n padding: 6px 12px;\n font-size: var(--scalar-font-size-4);\n color: var(--scalar-color-3);\n font-weight: var(--scalar-semibold);\n display: flex;\n gap: 12px;\n border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":""}

package/dist/features/Search/components/SearchModal.vue.script.js CHANGED Viewed

@@ -76,7 +76,7 @@ var SearchModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					createVNode(unref(ScalarSearchResultList), {
 						id: listboxId,
 						"aria-label": "Reference Search Results",
-						class: "custom-scroll p-1 pt-0",
+						class: "custom-scroll px-1 pb-1",
 						noResults: !unref(results).length
 					}, {
 						query: withCtx(() => [createTextVNode(toDisplayString(unref(query)), 1)]),

package/dist/features/Search/components/SearchModal.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchModal.vue.script.js","names":[],"sources":["../../../../src/features/Search/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n ScalarModal,\n ScalarSearchInput,\n ScalarSearchResultList,\n type ModalState,\n} from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useSearchIndex } from '@/features/Search/hooks/useSearchIndex'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n modalState: ModalState\n document: OpenApiDocument \| undefined\n eventBus: WorkspaceEventBus\n}>()\n\n/** Base id for the search form /\nconst id = nanoid()\n/* An id for the results listbox /\nconst listboxId = `${id}-search-result`\n/* An id for the results instructions /\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useSearchIndex(() => props.document)\n\nconst selectedIndex = ref<number \| undefined>(undefined)\n\n/* Clear the query value when the modal is opened /\nwatch(\n () => props.modalState.open,\n (open) => {\n if (open) {\n query.value = ''\n }\n },\n)\n\n/* Keyboard navigation /\nconst navigateSearchResults = (direction: 'up' \| 'down') => {\n const offset = direction === 'up' ? -1 : 1\n const length = results.value.length\n\n if (typeof selectedIndex.value === 'number') {\n // Ensures we loop around the array by using the remainder\n selectedIndex.value = (selectedIndex.value + offset + length) % length\n } else {\n // If no index is selected, we select the first or last item depending on the direction\n\n selectedIndex.value = offset === -1 ? length - 1 : 0\n }\n}\n\n/* Handle the selection of a search result /\nfunction handleSelect(idx: number \| undefined) {\n if (typeof idx !== 'number' \|\| !results.value[idx]) {\n return\n }\n\n const result = results.value[idx]\n props.modalState.hide()\n props.eventBus.emit('scroll-to:nav-item', { id: result.item.id })\n}\n\n/\n Active descendant id for the search input\n * NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly\n */\nconst activeDescendantId = computed(() => {\n const selectedResult = results.value[selectedIndex.value ?? -1]\n\n return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n<template>\n <ScalarModal\n aria-label=\"Reference Search\"\n :state=\"modalState\"\n variant=\"search\">\n <div\n class=\"mb-0 flex flex-col\"\n role=\"search\">\n <ScalarSearchInput\n v-model=\"query\"\n :aria-activedescendant=\"activeDescendantId\"\n aria-autocomplete=\"list\"\n :aria-controls=\"listboxId\"\n :aria-describedby=\"instructionsId\"\n role=\"combobox\"\n @blur=\"selectedIndex = undefined\"\n @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n </div>\n <ScalarSearchResultList\n :id=\"listboxId\"\n aria-label=\"Reference Search Results\"\n class=\"custom-scroll p-1 pt-0\"\n :noResults=\"!results.length\">\n <template #query>\n {{ query }}\n </template>\n <SearchResult\n v-for=\"(result, idx) in results\"\n :id=\"`search-result-${result.item.id}`\"\n :key=\"result.refIndex\"\n :isSelected=\"selectedIndex === idx\"\n :result=\"result\"\n @click.prevent=\"() => handleSelect(idx)\" />\n </ScalarSearchResultList>\n <div\n :id=\"instructionsId\"\n class=\"ref-search-meta\">\n <span\n aria-hidden=\"true\"\n class=\"contents\">\n <span>↑↓ Navigate</span>\n <span>⏎ Select</span>\n </span>\n <span class=\"sr-only\">\n Press up arrow / down arrow to navigate, enter to select, type to filter\n results\n </span>\n </div>\n </ScalarModal>\n</template>\n<style scoped>\n.ref-search-meta {\n background: var(--scalar-background-1);\n border-bottom-left-radius: var(--scalar-radius-lg);\n border-bottom-right-radius: var(--scalar-radius-lg);\n padding: 6px 12px;\n font-size: var(--scalar-font-size-4);\n color: var(--scalar-color-3);\n font-weight: var(--scalar-semibold);\n display: flex;\n gap: 12px;\n border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ;;EAOd,MAAM,KAAK,QAAO;;EAElB,MAAM,YAAY,GAAG,GAAG;;EAExB,MAAM,iBAAiB,GAAG,GAAG;EAE7B,MAAM,EAAE,OAAO,YAAY,qBAAqB,MAAM,SAAQ;EAE9D,MAAM,gBAAgB,IAAwB,KAAA,EAAS;;AAGvD,cACQ,MAAM,WAAW,OACtB,SAAS;AACR,OAAI,KACF,OAAM,QAAQ;IAGpB;;EAGA,MAAM,yBAAyB,cAA6B;GAC1D,MAAM,SAAS,cAAc,OAAO,KAAK;GACzC,MAAM,SAAS,QAAQ,MAAM;AAE7B,OAAI,OAAO,cAAc,UAAU,SAEjC,eAAc,SAAS,cAAc,QAAQ,SAAS,UAAU;OAIhE,eAAc,QAAQ,WAAW,KAAK,SAAS,IAAI;;;EAKvD,SAAS,aAAa,KAAyB;AAC7C,OAAI,OAAO,QAAQ,YAAY,CAAC,QAAQ,MAAM,KAC5C;GAGF,MAAM,SAAS,QAAQ,MAAM;AAC7B,SAAM,WAAW,MAAK;AACtB,SAAM,SAAS,KAAK,sBAAsB,EAAE,IAAI,OAAO,KAAK,IAAI,CAAA;;;;;;EAOlE,MAAM,qBAAqB,eAAe;GACxC,MAAM,iBAAiB,QAAQ,MAAM,cAAc,SAAS;AAE5D,UAAO,iBAAiB,iBAAiB,eAAe,KAAK,OAAO,KAAA;IACrE;;uBAGC,YAiDc,MAAA,YAAA,EAAA;IAhDZ,cAAW;IACV,OAAO,QAAA;IACR,SAAQ;;2BAeF;KAdN,mBAcM,OAdN,YAcM,CAXJ,YAU2D,MAAA,kBAAA,EAAA;kBAThD,MAAA,MAAK;wFAAA,QAAA,SAAA;MACb,yBAAuB,mBAAA;MACxB,qBAAkB;MACjB,iBAAe;MACf,oBAAkB;MACnB,MAAK;MACJ,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAgB,KAAA;MACtB,WAAO;oEAAoB,sBAAqB,OAAA,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,OAAA,CAAA;8DACd,aAAa,cAAA,MAAa,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,QAAA,CAAA;oEACnC,sBAAqB,KAAA,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,KAAA,CAAA;;;KAEnD,YAeyB,MAAA,uBAAA,EAAA;MAdtB,IAAI;MACL,cAAW;MACX,OAAM;MACL,WAAS,CAAG,MAAA,QAAO,CAAC;;MACV,OAAK,cACH,CAAA,gBAAA,gBAAR,MAAA,MAAK,CAAA,EAAA,EAAA,CAAA,CAAA;6BAGwB,EAAA,UAAA,KAAA,EADlC,mBAM6C,UAAA,MAAA,WALnB,MAAA,QAAO,GAAvB,QAAQ,QAAG;2BADrB,YAM6C,sBAAA;QAJ1C,IAAE,iBAAmB,OAAO,KAAK;QACjC,KAAK,OAAO;QACZ,YAAY,cAAA,UAAkB;QACtB;QACR,SAAK,oBAAgB,aAAa,IAAG,EAAA,CAAA,UAAA,CAAA;;;;;;;;;;KAE1C,mBAaM,OAAA;MAZH,IAAI;MACL,OAAM;uCACN,mBAKO,QAAA;MAJL,eAAY;MACZ,OAAM;SACN,mBAAwB,QAAA,MAAlB,cAAW,EACjB,mBAAqB,QAAA,MAAf,WAAQ,CAAA,EAAA,GAAA,EAEhB,mBAGO,QAAA,EAHD,OAAM,WAAS,EAAC,sFAGtB,GAAA,CAAA,EAAA,CAAA"}
1	+ {"version":3,"file":"SearchModal.vue.script.js","names":[],"sources":["../../../../src/features/Search/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n ScalarModal,\n ScalarSearchInput,\n ScalarSearchResultList,\n type ModalState,\n} from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useSearchIndex } from '@/features/Search/hooks/useSearchIndex'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n modalState: ModalState\n document: OpenApiDocument \| undefined\n eventBus: WorkspaceEventBus\n}>()\n\n/** Base id for the search form /\nconst id = nanoid()\n/* An id for the results listbox /\nconst listboxId = `${id}-search-result`\n/* An id for the results instructions /\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useSearchIndex(() => props.document)\n\nconst selectedIndex = ref<number \| undefined>(undefined)\n\n/* Clear the query value when the modal is opened /\nwatch(\n () => props.modalState.open,\n (open) => {\n if (open) {\n query.value = ''\n }\n },\n)\n\n/* Keyboard navigation /\nconst navigateSearchResults = (direction: 'up' \| 'down') => {\n const offset = direction === 'up' ? -1 : 1\n const length = results.value.length\n\n if (typeof selectedIndex.value === 'number') {\n // Ensures we loop around the array by using the remainder\n selectedIndex.value = (selectedIndex.value + offset + length) % length\n } else {\n // If no index is selected, we select the first or last item depending on the direction\n\n selectedIndex.value = offset === -1 ? length - 1 : 0\n }\n}\n\n/* Handle the selection of a search result /\nfunction handleSelect(idx: number \| undefined) {\n if (typeof idx !== 'number' \|\| !results.value[idx]) {\n return\n }\n\n const result = results.value[idx]\n props.modalState.hide()\n props.eventBus.emit('scroll-to:nav-item', { id: result.item.id })\n}\n\n/\n Active descendant id for the search input\n * NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly\n */\nconst activeDescendantId = computed(() => {\n const selectedResult = results.value[selectedIndex.value ?? -1]\n\n return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n<template>\n <ScalarModal\n aria-label=\"Reference Search\"\n :state=\"modalState\"\n variant=\"search\">\n <div\n class=\"mb-0 flex flex-col\"\n role=\"search\">\n <ScalarSearchInput\n v-model=\"query\"\n :aria-activedescendant=\"activeDescendantId\"\n aria-autocomplete=\"list\"\n :aria-controls=\"listboxId\"\n :aria-describedby=\"instructionsId\"\n role=\"combobox\"\n @blur=\"selectedIndex = undefined\"\n @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n </div>\n <ScalarSearchResultList\n :id=\"listboxId\"\n aria-label=\"Reference Search Results\"\n class=\"custom-scroll px-1 pb-1\"\n :noResults=\"!results.length\">\n <template #query>\n {{ query }}\n </template>\n <SearchResult\n v-for=\"(result, idx) in results\"\n :id=\"`search-result-${result.item.id}`\"\n :key=\"result.refIndex\"\n :isSelected=\"selectedIndex === idx\"\n :result=\"result\"\n @click.prevent=\"() => handleSelect(idx)\" />\n </ScalarSearchResultList>\n <div\n :id=\"instructionsId\"\n class=\"ref-search-meta\">\n <span\n aria-hidden=\"true\"\n class=\"contents\">\n <span>↑↓ Navigate</span>\n <span>⏎ Select</span>\n </span>\n <span class=\"sr-only\">\n Press up arrow / down arrow to navigate, enter to select, type to filter\n results\n </span>\n </div>\n </ScalarModal>\n</template>\n<style scoped>\n.ref-search-meta {\n background: var(--scalar-background-1);\n border-bottom-left-radius: var(--scalar-radius-lg);\n border-bottom-right-radius: var(--scalar-radius-lg);\n padding: 6px 12px;\n font-size: var(--scalar-font-size-4);\n color: var(--scalar-color-3);\n font-weight: var(--scalar-semibold);\n display: flex;\n gap: 12px;\n border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ;;EAOd,MAAM,KAAK,QAAO;;EAElB,MAAM,YAAY,GAAG,GAAG;;EAExB,MAAM,iBAAiB,GAAG,GAAG;EAE7B,MAAM,EAAE,OAAO,YAAY,qBAAqB,MAAM,SAAQ;EAE9D,MAAM,gBAAgB,IAAwB,KAAA,EAAS;;AAGvD,cACQ,MAAM,WAAW,OACtB,SAAS;AACR,OAAI,KACF,OAAM,QAAQ;IAGpB;;EAGA,MAAM,yBAAyB,cAA6B;GAC1D,MAAM,SAAS,cAAc,OAAO,KAAK;GACzC,MAAM,SAAS,QAAQ,MAAM;AAE7B,OAAI,OAAO,cAAc,UAAU,SAEjC,eAAc,SAAS,cAAc,QAAQ,SAAS,UAAU;OAIhE,eAAc,QAAQ,WAAW,KAAK,SAAS,IAAI;;;EAKvD,SAAS,aAAa,KAAyB;AAC7C,OAAI,OAAO,QAAQ,YAAY,CAAC,QAAQ,MAAM,KAC5C;GAGF,MAAM,SAAS,QAAQ,MAAM;AAC7B,SAAM,WAAW,MAAK;AACtB,SAAM,SAAS,KAAK,sBAAsB,EAAE,IAAI,OAAO,KAAK,IAAI,CAAA;;;;;;EAOlE,MAAM,qBAAqB,eAAe;GACxC,MAAM,iBAAiB,QAAQ,MAAM,cAAc,SAAS;AAE5D,UAAO,iBAAiB,iBAAiB,eAAe,KAAK,OAAO,KAAA;IACrE;;uBAGC,YAiDc,MAAA,YAAA,EAAA;IAhDZ,cAAW;IACV,OAAO,QAAA;IACR,SAAQ;;2BAeF;KAdN,mBAcM,OAdN,YAcM,CAXJ,YAU2D,MAAA,kBAAA,EAAA;kBAThD,MAAA,MAAK;wFAAA,QAAA,SAAA;MACb,yBAAuB,mBAAA;MACxB,qBAAkB;MACjB,iBAAe;MACf,oBAAkB;MACnB,MAAK;MACJ,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAgB,KAAA;MACtB,WAAO;oEAAoB,sBAAqB,OAAA,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,OAAA,CAAA;8DACd,aAAa,cAAA,MAAa,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,QAAA,CAAA;oEACnC,sBAAqB,KAAA,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,KAAA,CAAA;;;KAEnD,YAeyB,MAAA,uBAAA,EAAA;MAdtB,IAAI;MACL,cAAW;MACX,OAAM;MACL,WAAS,CAAG,MAAA,QAAO,CAAC;;MACV,OAAK,cACH,CAAA,gBAAA,gBAAR,MAAA,MAAK,CAAA,EAAA,EAAA,CAAA,CAAA;6BAGwB,EAAA,UAAA,KAAA,EADlC,mBAM6C,UAAA,MAAA,WALnB,MAAA,QAAO,GAAvB,QAAQ,QAAG;2BADrB,YAM6C,sBAAA;QAJ1C,IAAE,iBAAmB,OAAO,KAAK;QACjC,KAAK,OAAO;QACZ,YAAY,cAAA,UAAkB;QACtB;QACR,SAAK,oBAAgB,aAAa,IAAG,EAAA,CAAA,UAAA,CAAA;;;;;;;;;;KAE1C,mBAaM,OAAA;MAZH,IAAI;MACL,OAAM;uCACN,mBAKO,QAAA;MAJL,eAAY;MACZ,OAAM;SACN,mBAAwB,QAAA,MAAlB,cAAW,EACjB,mBAAqB,QAAA,MAAf,WAAQ,CAAA,EAAA,GAAA,EAEhB,mBAGO,QAAA,EAHD,OAAM,WAAS,EAAC,sFAGtB,GAAA,CAAA,EAAA,CAAA"}

package/dist/features/Search/hooks/useSearchIndex.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSearchIndex.d.ts","sourceRoot":"","sources":["../../../../src/features/Search/hooks/useSearchIndex.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAEnG,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,KAAK,CAAA;AAInE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAIxC;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC;;;;;;~~EAkCrF~~"}
1	+ {"version":3,"file":"useSearchIndex.d.ts","sourceRoot":"","sources":["../../../../src/features/Search/hooks/useSearchIndex.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAEnG,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,KAAK,CAAA;AAInE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAIxC;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC;;;;;;EAiCrF"}

package/dist/features/Search/hooks/useSearchIndex.js CHANGED Viewed

@@ -7,17 +7,18 @@ var MAX_SEARCH_RESULTS = 25;
 * Creates the search index from an OpenAPI document.
 */
 function useSearchIndex(document) {
+	const searchIndex = computed(() => createSearchIndex(toValue(document)));
 	/** When the document changes we replace the search index */
 	const fuse = computed(() => {
 		const instance = createFuseInstance();
-		instance.setCollection(createSearchIndex(toValue(document)));
+		instance.setCollection(searchIndex.value);
 		return instance;
 	});
 	const query = ref("");
 	return {
 		results: computed(() => {
 			if (query.value.length !== 0) return fuse.value.search(query.value, { limit: MAX_SEARCH_RESULTS });
-			return fuse.value._docs.slice(0, MAX_SEARCH_RESULTS).map((item, index) => ({
+			return searchIndex.value.slice(0, MAX_SEARCH_RESULTS).map((item, index) => ({
 				item,
 				refIndex: index
 			}));

package/dist/features/Search/hooks/useSearchIndex.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSearchIndex.js","names":[],"sources":["../../../../src/features/Search/hooks/useSearchIndex.ts"],"sourcesContent":["import type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport type { FuseResult } from 'fuse.js'\nimport { type MaybeRefOrGetter, computed, ref, toValue } from 'vue'\n\nimport { createFuseInstance } from '../helpers/create-fuse-instance'\nimport { createSearchIndex } from '../helpers/create-search-index'\nimport type { FuseData } from '../types'\n\nconst MAX_SEARCH_RESULTS = 25\n\n/*\n Creates the search index from an OpenAPI document.\n /\nexport function useSearchIndex(document: MaybeRefOrGetter<OpenApiDocument \| undefined>) {\n /* When the document changes we replace the search index */\n const fuse = computed(() => {\n const instance = createFuseInstance()\n instance.setCollection(~~createSearchIndex(toValue(document~~)))\n return instance\n })\n\n const query = ref<string>('')\n\n const results = computed(() => {\n if (query.value.length !== 0) {\n return fuse.value.search(query.value, {\n limit: MAX_SEARCH_RESULTS,\n })\n }\n\n // ~~@ts-expect-error - _docs is a private property\n const allEntries: FuseData[] = fuse.value._docs\n\n //~~ Show a few entries as a placeholder\n return ~~allEntries~~.slice(0, MAX_SEARCH_RESULTS).map(\n (item: FuseData, index: number) =>\n ({\n item,\n refIndex: index,\n }) satisfies FuseResult<FuseData>,\n )\n })\n\n return {\n results,\n query,\n }\n}\n"],"mappings":";;;;AAQA,IAAM,qBAAqB;;;;AAK3B,SAAgB,eAAe,UAAyD;;~~CAEtF~~,MAAM,OAAO,eAAe;EAC1B,MAAM,WAAW,oBAAoB;AACrC,WAAS,cAAc,~~kBAAkB~~,~~QAAQ,SAAS,CAAC,CAAC~~;~~AAC5D~~,SAAO;GACP;CAEF,MAAM,QAAQ,IAAY,GAAG;~~AAsB7B~~,QAAO;EACL,~~SArBc~~,eAAe;AAC7B,OAAI,MAAM,MAAM,WAAW,EACzB,QAAO,KAAK,MAAM,OAAO,MAAM,OAAO,EACpC,OAAO,oBACR,CAAC;~~AAOJ~~,~~UAH+B~~,~~KAAK~~,MAAM,~~MAGxB,~~MAAM,GAAG,mBAAmB,CAAC,~~KAC5C~~,MAAgB,WACd;IACC;IACA,UAAU;IACX,EACJ;IACD;EAIA;EACD"}
1	+ {"version":3,"file":"useSearchIndex.js","names":[],"sources":["../../../../src/features/Search/hooks/useSearchIndex.ts"],"sourcesContent":["import type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport type { FuseResult } from 'fuse.js'\nimport { type MaybeRefOrGetter, computed, ref, toValue } from 'vue'\n\nimport { createFuseInstance } from '../helpers/create-fuse-instance'\nimport { createSearchIndex } from '../helpers/create-search-index'\nimport type { FuseData } from '../types'\n\nconst MAX_SEARCH_RESULTS = 25\n\n/*\n Creates the search index from an OpenAPI document.\n /\nexport function useSearchIndex(document: MaybeRefOrGetter<OpenApiDocument \| undefined>) {\n const searchIndex = computed<FuseData[]>(() => createSearchIndex(toValue(document)))\n\n /* When the document changes we replace the search index */\n const fuse = computed(() => {\n const instance = createFuseInstance()\n instance.setCollection(searchIndex.value)\n return instance\n })\n\n const query = ref<string>('')\n\n const results = computed(() => {\n if (query.value.length !== 0) {\n return fuse.value.search(query.value, {\n limit: MAX_SEARCH_RESULTS,\n })\n }\n\n // Show a few entries as a placeholder\n return searchIndex.value.slice(0, MAX_SEARCH_RESULTS).map(\n (item: FuseData, index: number) =>\n ({\n item,\n refIndex: index,\n }) satisfies FuseResult<FuseData>,\n )\n })\n\n return {\n results,\n query,\n }\n}\n"],"mappings":";;;;AAQA,IAAM,qBAAqB;;;;AAK3B,SAAgB,eAAe,UAAyD;CACtF,MAAM,cAAc,eAA2B,kBAAkB,QAAQ,SAAS,CAAC,CAAC;;CAGpF,MAAM,OAAO,eAAe;EAC1B,MAAM,WAAW,oBAAoB;AACrC,WAAS,cAAc,YAAY,MAAM;AACzC,SAAO;GACP;CAEF,MAAM,QAAQ,IAAY,GAAG;AAmB7B,QAAO;EACL,SAlBc,eAAe;AAC7B,OAAI,MAAM,MAAM,WAAW,EACzB,QAAO,KAAK,MAAM,OAAO,MAAM,OAAO,EACpC,OAAO,oBACR,CAAC;AAIJ,UAAO,YAAY,MAAM,MAAM,GAAG,mBAAmB,CAAC,KACnD,MAAgB,WACd;IACC;IACA,UAAU;IACX,EACJ;IACD;EAIA;EACD"}

package/dist/features/example-responses/ExampleResponse.vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ExampleResponse_vue_vue_type_script_setup_true_lang_default from "./ExampleResponse.vue.script.js";
 /* empty css                              */
 //#region src/features/example-responses/ExampleResponse.vue
-var ExampleResponse_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ExampleResponse_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c29c16d8"]]);
+var ExampleResponse_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ExampleResponse_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-87500bd9"]]);
 //#endregion
 export { ExampleResponse_default as default };

package/dist/features/example-responses/ExampleResponse.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExampleResponse.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponse.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { getResolvedRefDeep } from '@scalar/api-client/~~v2/~~blocks/operation-code-sample'\nimport { ScalarCodeBlock, ScalarVirtualText } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { getExampleFromSchema } from '@scalar/workspace-store/request-example'\nimport type {\n ExampleObject,\n MediaTypeObject,\n SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { example, response } = defineProps<{\n response: MediaTypeObject \| undefined\n example: ExampleObject \| undefined\n}>()\n\n/** Get content from the appropriate source /\nconst getContent = () => {\n if (example !== undefined) {\n return getResolvedRefDeep(example)?.value ?? ''\n }\n\n if (response?.schema) {\n return getExampleFromSchema(\n // Should be safe to deep resolve the schema here because we don't have to do any sibling resolution for example generation\n getResolvedRefDeep(response.schema) as SchemaObject,\n {\n emptyString: 'string',\n mode: 'read',\n },\n )\n }\n\n return undefined\n}\n\n/* Pre-pretty printed content string, avoids multiple pretty prints/\nconst prettyPrintedContent = computed(() => {\n const content = getContent()\n if (content === undefined) {\n return undefined\n }\n return prettyPrintJson(content)\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\n// Virtualize the code block if it's too large\nconst shouldVirtualize = computed(() => {\n if (prettyPrintedContent.value === undefined) {\n return false\n }\n return prettyPrintedContent.value.length > VIRTUALIZATION_THRESHOLD\n})\n</script>\n<template>\n <!-- Example -->\n <ScalarCodeBlock\n v-if=\"prettyPrintedContent !== undefined && !shouldVirtualize\"\n class=\"bg-b-2\"\n lang=\"json\"\n :prettyPrintedContent=\"prettyPrintedContent\" />\n\n <ScalarVirtualText\n v-else-if=\"prettyPrintedContent !== undefined && shouldVirtualize\"\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=\"prettyPrintedContent\" />\n\n <div\n v-else\n class=\"empty-state\">\n No Body\n </div>\n</template>\n\n<style scoped>\n.empty-state {\n margin: 10px 0 10px 12px;\n text-align: center;\n font-size: var(--scalar-mini);\n min-height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--scalar-radius-lg);\n color: var(--scalar-color-2);\n}\n\n.rule-title {\n font-family: var(--scalar-font-code);\n color: var(--scalar-color-1);\n display: inline-block;\n margin: 12px 0 6px;\n border-radius: var(--scalar-radius);\n}\n\n.rule {\n margin: 0 12px 0;\n border-radius: var(--scalar-radius-lg);\n}\n\n.rule-items {\n counter-reset: list-number;\n display: flex;\n flex-direction: column;\n gap: 12px;\n border-left: 1px solid var(--scalar-border-color);\n padding: 12px 0 12px;\n}\n.rule-item {\n counter-increment: list-number;\n border: 1px solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-lg);\n overflow: hidden;\n margin-left: 24px;\n}\n.rule-item:before {\n / content: counter(list-number); */\n border: 1px solid var(--scalar-border-color);\n border-top: 0;\n border-right: 0;\n content: ' ';\n display: block;\n width: 24px;\n height: 6px;\n border-radius: 0 0 0 var(--scalar-radius-lg);\n margin-top: 6px;\n color: var(--scalar-color-2);\n transform: translateX(-25px);\n color: var(--scalar-color-1);\n position: absolute;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"ExampleResponse.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponse.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock, ScalarVirtualText } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { getExampleFromSchema } from '@scalar/workspace-store/request-example'\nimport type {\n ExampleObject,\n MediaTypeObject,\n SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { example, response } = defineProps<{\n response: MediaTypeObject \| undefined\n example: ExampleObject \| undefined\n}>()\n\n/** Get content from the appropriate source /\nconst getContent = () => {\n if (example !== undefined) {\n return getResolvedRefDeep(example)?.value ?? ''\n }\n\n if (response?.schema) {\n return getExampleFromSchema(\n // Should be safe to deep resolve the schema here because we don't have to do any sibling resolution for example generation\n getResolvedRefDeep(response.schema) as SchemaObject,\n {\n emptyString: 'string',\n mode: 'read',\n },\n )\n }\n\n return undefined\n}\n\n/* Pre-pretty printed content string, avoids multiple pretty prints/\nconst prettyPrintedContent = computed(() => {\n const content = getContent()\n if (content === undefined) {\n return undefined\n }\n return prettyPrintJson(content)\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\n// Virtualize the code block if it's too large\nconst shouldVirtualize = computed(() => {\n if (prettyPrintedContent.value === undefined) {\n return false\n }\n return prettyPrintedContent.value.length > VIRTUALIZATION_THRESHOLD\n})\n</script>\n<template>\n <!-- Example -->\n <ScalarCodeBlock\n v-if=\"prettyPrintedContent !== undefined && !shouldVirtualize\"\n class=\"bg-b-2\"\n lang=\"json\"\n :prettyPrintedContent=\"prettyPrintedContent\" />\n\n <ScalarVirtualText\n v-else-if=\"prettyPrintedContent !== undefined && shouldVirtualize\"\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=\"prettyPrintedContent\" />\n\n <div\n v-else\n class=\"empty-state\">\n No Body\n </div>\n</template>\n\n<style scoped>\n.empty-state {\n margin: 10px 0 10px 12px;\n text-align: center;\n font-size: var(--scalar-mini);\n min-height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--scalar-radius-lg);\n color: var(--scalar-color-2);\n}\n\n.rule-title {\n font-family: var(--scalar-font-code);\n color: var(--scalar-color-1);\n display: inline-block;\n margin: 12px 0 6px;\n border-radius: var(--scalar-radius);\n}\n\n.rule {\n margin: 0 12px 0;\n border-radius: var(--scalar-radius-lg);\n}\n\n.rule-items {\n counter-reset: list-number;\n display: flex;\n flex-direction: column;\n gap: 12px;\n border-left: 1px solid var(--scalar-border-color);\n padding: 12px 0 12px;\n}\n.rule-item {\n counter-increment: list-number;\n border: 1px solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-lg);\n overflow: hidden;\n margin-left: 24px;\n}\n.rule-item:before {\n / content: counter(list-number); */\n border: 1px solid var(--scalar-border-color);\n border-top: 0;\n border-right: 0;\n content: ' ';\n display: block;\n width: 24px;\n height: 6px;\n border-radius: 0 0 0 var(--scalar-radius-lg);\n margin-top: 6px;\n color: var(--scalar-color-2);\n transform: translateX(-25px);\n color: var(--scalar-color-1);\n position: absolute;\n}\n</style>\n"],"mappings":""}

package/dist/features/example-responses/ExampleResponse.vue.script.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { computed, createBlock, createElementBlock, defineComponent, openBlock, unref } from "vue";
 import { ScalarCodeBlock, ScalarVirtualText } from "@scalar/components";
 import { getExampleFromSchema } from "@scalar/workspace-store/request-example";
-import { getResolvedRefDeep } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { getResolvedRefDeep } from "@scalar/api-client/blocks/operation-code-sample";
 import { prettyPrintJson } from "@scalar/helpers/json/pretty-print-json";
 //#region src/features/example-responses/ExampleResponse.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {

package/dist/features/example-responses/ExampleResponse.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExampleResponse.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponse.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { getResolvedRefDeep } from '@scalar/api-client/~~v2/~~blocks/operation-code-sample'\nimport { ScalarCodeBlock, ScalarVirtualText } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { getExampleFromSchema } from '@scalar/workspace-store/request-example'\nimport type {\n ExampleObject,\n MediaTypeObject,\n SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { example, response } = defineProps<{\n response: MediaTypeObject \| undefined\n example: ExampleObject \| undefined\n}>()\n\n/** Get content from the appropriate source /\nconst getContent = () => {\n if (example !== undefined) {\n return getResolvedRefDeep(example)?.value ?? ''\n }\n\n if (response?.schema) {\n return getExampleFromSchema(\n // Should be safe to deep resolve the schema here because we don't have to do any sibling resolution for example generation\n getResolvedRefDeep(response.schema) as SchemaObject,\n {\n emptyString: 'string',\n mode: 'read',\n },\n )\n }\n\n return undefined\n}\n\n/* Pre-pretty printed content string, avoids multiple pretty prints/\nconst prettyPrintedContent = computed(() => {\n const content = getContent()\n if (content === undefined) {\n return undefined\n }\n return prettyPrintJson(content)\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\n// Virtualize the code block if it's too large\nconst shouldVirtualize = computed(() => {\n if (prettyPrintedContent.value === undefined) {\n return false\n }\n return prettyPrintedContent.value.length > VIRTUALIZATION_THRESHOLD\n})\n</script>\n<template>\n <!-- Example -->\n <ScalarCodeBlock\n v-if=\"prettyPrintedContent !== undefined && !shouldVirtualize\"\n class=\"bg-b-2\"\n lang=\"json\"\n :prettyPrintedContent=\"prettyPrintedContent\" />\n\n <ScalarVirtualText\n v-else-if=\"prettyPrintedContent !== undefined && shouldVirtualize\"\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=\"prettyPrintedContent\" />\n\n <div\n v-else\n class=\"empty-state\">\n No Body\n </div>\n</template>\n\n<style scoped>\n.empty-state {\n margin: 10px 0 10px 12px;\n text-align: center;\n font-size: var(--scalar-mini);\n min-height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--scalar-radius-lg);\n color: var(--scalar-color-2);\n}\n\n.rule-title {\n font-family: var(--scalar-font-code);\n color: var(--scalar-color-1);\n display: inline-block;\n margin: 12px 0 6px;\n border-radius: var(--scalar-radius);\n}\n\n.rule {\n margin: 0 12px 0;\n border-radius: var(--scalar-radius-lg);\n}\n\n.rule-items {\n counter-reset: list-number;\n display: flex;\n flex-direction: column;\n gap: 12px;\n border-left: 1px solid var(--scalar-border-color);\n padding: 12px 0 12px;\n}\n.rule-item {\n counter-increment: list-number;\n border: 1px solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-lg);\n overflow: hidden;\n margin-left: 24px;\n}\n.rule-item:before {\n / content: counter(list-number); */\n border: 1px solid var(--scalar-border-color);\n border-top: 0;\n border-right: 0;\n content: ' ';\n display: block;\n width: 24px;\n height: 6px;\n border-radius: 0 0 0 var(--scalar-radius-lg);\n margin-top: 6px;\n color: var(--scalar-color-2);\n transform: translateX(-25px);\n color: var(--scalar-color-1);\n position: absolute;\n}\n</style>\n"],"mappings":";;;;;;;;;;AA8CA,IAAM,2BAA2B;;;;;;;;;EA5BjC,MAAM,mBAAmB;AACvB,OAAI,QAAA,YAAY,KAAA,EACd,QAAO,mBAAmB,QAAA,QAAQ,EAAE,SAAS;AAG/C,OAAI,QAAA,UAAU,OACZ,QAAO,qBAEL,mBAAmB,QAAA,SAAS,OAAO,EACnC;IACE,aAAa;IACb,MAAM;IACP,CACH;;;EAOJ,MAAM,uBAAuB,eAAe;GAC1C,MAAM,UAAU,YAAW;AAC3B,OAAI,YAAY,KAAA,EACd;AAEF,UAAO,gBAAgB,QAAO;IAC/B;EAKD,MAAM,mBAAmB,eAAe;AACtC,OAAI,qBAAqB,UAAU,KAAA,EACjC,QAAO;AAET,UAAO,qBAAqB,MAAM,SAAS;IAC5C;;UAKS,qBAAA,UAAyB,KAAA,KAAS,CAAK,iBAAA,SAAA,WAAA,EAD/C,YAIiD,MAAA,gBAAA,EAAA;;IAF/C,OAAM;IACN,MAAK;IACJ,sBAAsB,qBAAA;4CAGZ,qBAAA,UAAyB,KAAA,KAAa,iBAAA,SAAA,WAAA,EADnD,YAKiC,MAAA,kBAAA,EAAA;;IAH/B,gBAAe;IACf,cAAa;IACZ,YAAY;IACZ,MAAM,qBAAA;0CAET,mBAIM,OAJN,YAEsB,YAEtB"}
1	+ {"version":3,"file":"ExampleResponse.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponse.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock, ScalarVirtualText } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { getExampleFromSchema } from '@scalar/workspace-store/request-example'\nimport type {\n ExampleObject,\n MediaTypeObject,\n SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { example, response } = defineProps<{\n response: MediaTypeObject \| undefined\n example: ExampleObject \| undefined\n}>()\n\n/** Get content from the appropriate source /\nconst getContent = () => {\n if (example !== undefined) {\n return getResolvedRefDeep(example)?.value ?? ''\n }\n\n if (response?.schema) {\n return getExampleFromSchema(\n // Should be safe to deep resolve the schema here because we don't have to do any sibling resolution for example generation\n getResolvedRefDeep(response.schema) as SchemaObject,\n {\n emptyString: 'string',\n mode: 'read',\n },\n )\n }\n\n return undefined\n}\n\n/* Pre-pretty printed content string, avoids multiple pretty prints/\nconst prettyPrintedContent = computed(() => {\n const content = getContent()\n if (content === undefined) {\n return undefined\n }\n return prettyPrintJson(content)\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\n// Virtualize the code block if it's too large\nconst shouldVirtualize = computed(() => {\n if (prettyPrintedContent.value === undefined) {\n return false\n }\n return prettyPrintedContent.value.length > VIRTUALIZATION_THRESHOLD\n})\n</script>\n<template>\n <!-- Example -->\n <ScalarCodeBlock\n v-if=\"prettyPrintedContent !== undefined && !shouldVirtualize\"\n class=\"bg-b-2\"\n lang=\"json\"\n :prettyPrintedContent=\"prettyPrintedContent\" />\n\n <ScalarVirtualText\n v-else-if=\"prettyPrintedContent !== undefined && shouldVirtualize\"\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=\"prettyPrintedContent\" />\n\n <div\n v-else\n class=\"empty-state\">\n No Body\n </div>\n</template>\n\n<style scoped>\n.empty-state {\n margin: 10px 0 10px 12px;\n text-align: center;\n font-size: var(--scalar-mini);\n min-height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--scalar-radius-lg);\n color: var(--scalar-color-2);\n}\n\n.rule-title {\n font-family: var(--scalar-font-code);\n color: var(--scalar-color-1);\n display: inline-block;\n margin: 12px 0 6px;\n border-radius: var(--scalar-radius);\n}\n\n.rule {\n margin: 0 12px 0;\n border-radius: var(--scalar-radius-lg);\n}\n\n.rule-items {\n counter-reset: list-number;\n display: flex;\n flex-direction: column;\n gap: 12px;\n border-left: 1px solid var(--scalar-border-color);\n padding: 12px 0 12px;\n}\n.rule-item {\n counter-increment: list-number;\n border: 1px solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-lg);\n overflow: hidden;\n margin-left: 24px;\n}\n.rule-item:before {\n / content: counter(list-number); */\n border: 1px solid var(--scalar-border-color);\n border-top: 0;\n border-right: 0;\n content: ' ';\n display: block;\n width: 24px;\n height: 6px;\n border-radius: 0 0 0 var(--scalar-radius-lg);\n margin-top: 6px;\n color: var(--scalar-color-2);\n transform: translateX(-25px);\n color: var(--scalar-color-1);\n position: absolute;\n}\n</style>\n"],"mappings":";;;;;;;;;;AA8CA,IAAM,2BAA2B;;;;;;;;;EA5BjC,MAAM,mBAAmB;AACvB,OAAI,QAAA,YAAY,KAAA,EACd,QAAO,mBAAmB,QAAA,QAAQ,EAAE,SAAS;AAG/C,OAAI,QAAA,UAAU,OACZ,QAAO,qBAEL,mBAAmB,QAAA,SAAS,OAAO,EACnC;IACE,aAAa;IACb,MAAM;IACP,CACH;;;EAOJ,MAAM,uBAAuB,eAAe;GAC1C,MAAM,UAAU,YAAW;AAC3B,OAAI,YAAY,KAAA,EACd;AAEF,UAAO,gBAAgB,QAAO;IAC/B;EAKD,MAAM,mBAAmB,eAAe;AACtC,OAAI,qBAAqB,UAAU,KAAA,EACjC,QAAO;AAET,UAAO,qBAAqB,MAAM,SAAS;IAC5C;;UAKS,qBAAA,UAAyB,KAAA,KAAS,CAAK,iBAAA,SAAA,WAAA,EAD/C,YAIiD,MAAA,gBAAA,EAAA;;IAF/C,OAAM;IACN,MAAK;IACJ,sBAAsB,qBAAA;4CAGZ,qBAAA,UAAyB,KAAA,KAAa,iBAAA,SAAA,WAAA,EADnD,YAKiC,MAAA,kBAAA,EAAA;;IAH/B,gBAAe;IACf,cAAa;IACZ,YAAY;IACZ,MAAM,qBAAA;0CAET,mBAIM,OAJN,YAEsB,YAEtB"}

package/dist/features/example-responses/ExampleResponses.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExampleResponses.vue.d.ts","sourceRoot":"","sources":["../../../src/features/example-responses/ExampleResponses.vue"],"names":[],"mappings":"~~AAwWA~~,OAAO,KAAK,EAEV,eAAe,EAChB,MAAM,8DAA8D,CAAA;~~AAWrE~~;;GAEG;AAEH,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,eAAe,CAAA;CAC3B,CAAC;AA4WF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"ExampleResponses.vue.d.ts","sourceRoot":"","sources":["../../../src/features/example-responses/ExampleResponses.vue"],"names":[],"mappings":"AAmWA,OAAO,KAAK,EAEV,eAAe,EAChB,MAAM,8DAA8D,CAAA;AAYrE;;GAEG;AAEH,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,eAAe,CAAA;CAC3B,CAAC;AA4WF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/example-responses/ExampleResponses.vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ExampleResponses_vue_vue_type_script_setup_true_lang_default from "./ExampleResponses.vue.script.js";
 /* empty css                               */
 //#region src/features/example-responses/ExampleResponses.vue
-var ExampleResponses_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ExampleResponses_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e0da130d"]]);
+var ExampleResponses_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ExampleResponses_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4e56e3cf"]]);
 //#endregion
 export { ExampleResponses_default as default };

package/dist/features/example-responses/ExampleResponses.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExampleResponses.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/api-client/~~v2/~~blocks/operation-code-sample'\nimport {\n ScalarCard,\n ScalarCardFooter,\n ScalarCardSection,\n ScalarIcon,\n ScalarMarkdown,\n} from '@scalar/components'\nimport {~~\n getObjectKeys,\n normalizeMimeTypeObject,\n~~} from '@scalar/~~oas~~-~~utils/helpers~~'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n MediaTypeObject,\n ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './has-response-content'\n\n/*\n TODO: copyToClipboard isn't using the right content if there are multiple examples\n /\n\nconst { responses } = defineProps<{\n responses: ResponsesObject\n}>()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n orderedStatusCodes.value.filter((statusCode) =>\n hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/\n Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n \n We also reset `selectedExampleKey` to match the behavior of `changeTab`,\n * since the new response may not have the same example keys.\n /\nwatch(statusCodesWithContent, (codes) => {\n if (codes.length === 0) {\n selectedResponseIndex.value = 0\n selectedExampleKey.value = ''\n } else if (selectedResponseIndex.value >= codes.length) {\n selectedResponseIndex.value = codes.length - 1\n selectedExampleKey.value = ''\n }\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n const currentStatusCode =\n toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject \| undefined>(() => {\n const normalizedContent = normalizeMimeTypeObject(\n currentResponse.value?.content,\n )\n\n /* All the keys of the normalized content /\n const keys = ~~getObjectKeys~~(normalizedContent ?? {})\n return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n () =>\n !!currentResponseContent.value?.examples &&\n Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>(\n Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? '',\n)\n\n/* Get the current example to display /\nconst currentExample = computed(() => {\n if (!currentResponseContent.value) {\n return undefined\n }\n\n // When multiple examples exist and one is selected, we access it directly\n if (hasMultipleExamples.value && selectedExampleKey.value) {\n return currentResponseContent.value.examples?.[selectedExampleKey.value]\n }\n\n // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n selectedResponseIndex.value = index\n selectedExampleKey.value = ''\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n <ScalarCard\n v-if=\"statusCodesWithContent.length\"\n aria-label=\"Example Responses\"\n class=\"response-card\"\n role=\"region\">\n <ExampleResponseTabList @change=\"changeTab\">\n <ExampleResponseTab\n v-for=\"statusCode in statusCodesWithContent\"\n :key=\"statusCode\"\n :aria-controls=\"id\">\n <ScreenReader>Status:</ScreenReader>\n {{ statusCode }}\n </ExampleResponseTab>\n\n <template #actions>\n <button\n v-if=\"currentResponseContent?.example\"\n class=\"code-copy\"\n type=\"button\"\n @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n <ScalarIcon\n icon=\"Clipboard\"\n width=\"12px\" />\n </button>\n <label\n v-if=\"currentResponseContent?.schema\"\n class=\"scalar-card-checkbox\">\n Show Schema\n <input\n v-model=\"showSchema\"\n :aria-controls=\"id\"\n class=\"scalar-card-checkbox-input\"\n type=\"checkbox\" />\n <span class=\"scalar-card-checkbox-checkmark\" />\n </label>\n </template>\n </ExampleResponseTabList>\n <ScalarCardSection class=\"grid flex-1\">\n <!-- Schema -->\n <ExampleSchema\n v-if=\"currentResponseContent?.schema && showSchema\"\n :id=\"id\"\n :schema=\"currentResponseContent?.schema\" />\n\n <!-- Example -->\n <ExampleResponse\n v-else\n :id=\"id\"\n :example=\"currentExample\"\n :response=\"currentResponseContent\" />\n </ScalarCardSection>\n <ScalarCardFooter\n v-if=\"currentResponse?.description \|\| hasMultipleExamples\"\n class=\"response-card-footer\">\n <ExamplePicker\n v-if=\"hasMultipleExamples\"\n v-model=\"selectedExampleKey\"\n class=\"response-example-selector px-0\"\n :examples=\"currentResponseContent?.examples\" />\n <div class=\"response-description\">\n <ScalarMarkdown\n v-if=\"currentResponse?.description\"\n class=\"response-description-markdown\"\n :value=\"currentResponse.description\" />\n </div>\n </ScalarCardFooter>\n </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n display: flex;\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n outline: none;\n background: transparent;\n cursor: pointer;\n color: var(--scalar-color-3);\n border: none;\n padding: 0;\n margin-right: 12px;\n}\n.code-copy:hover {\n color: var(--scalar-color-1);\n}\n.code-copy svg {\n width: 13px;\n height: 13px;\n}\n.response-card-footer {\n display: flex;\n flex-direction: row-reverse;\n flex-wrap: wrap;\n justify-content: start;\n flex-shrink: 0;\n padding: 7px 12px;\n column-gap: 8px;\n}\n.response-example-selector {\n flex-shrink: 0;\n margin: -4px;\n}\n.response-description {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-small);\n color: var(--scalar-color--1);\n\n box-sizing: border-box;\n\n flex-grow: 1;\n}\n.response-description-markdown {\n max-height: 3lh;\n}\n\n.response-description-markdown :deep() {\n margin: 0;\n}\n.schema-type {\n font-size: var(--scalar-micro);\n color: var(--scalar-color-2);\n font-weight: var(--scalar-semibold);\n background: var(--scalar-background-3);\n padding: 2px 4px;\n border-radius: 4px;\n margin-right: 4px;\n}\n.schema-example {\n font-size: var(--scalar-micro);\n color: var(--scalar-color-2);\n font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n display: block;\n margin: 6px;\n}\n\n.scalar-card-checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n min-height: 17px;\n cursor: pointer;\n user-select: none;\n font-size: var(--scalar-small);\n font-weight: var(--scalar-font-normal);\n color: var(--scalar-color-2);\n width: fit-content;\n white-space: nowrap;\n gap: 6px;\n padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n .scalar-card-checkbox-checkmark {\n outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n height: 16px;\n width: 16px;\n border-radius: var(--scalar-radius);\n background-color: transparent;\n background-color: var(--scalar-background-3);\n box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n color: var(--scalar-color-1);\n font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n .scalar-card-checkbox-input:checked\n ~ .scalar-card-checkbox-checkmark {\n background-color: var(--scalar-button-1);\n box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n content: '';\n position: absolute;\n display: none;\n}\n\n.scalar-card-checkbox\n .scalar-card-checkbox-input:checked\n ~ .scalar-card-checkbox-checkmark:after {\n display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n right: 11.5px;\n top: 12.5px;\n width: 5px;\n height: 9px;\n border: solid 1px var(--scalar-button-1-color);\n border-width: 0 1.5px 1.5px 0;\n transform: rotate(45deg);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"ExampleResponses.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n ScalarCard,\n ScalarCardFooter,\n ScalarCardSection,\n ScalarIcon,\n ScalarMarkdown,\n} from '@scalar/components'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n MediaTypeObject,\n ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/*\n TODO: copyToClipboard isn't using the right content if there are multiple examples\n /\n\nconst { responses } = defineProps<{\n responses: ResponsesObject\n}>()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n orderedStatusCodes.value.filter((statusCode) =>\n hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/\n Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n \n We also reset `selectedExampleKey` to match the behavior of `changeTab`,\n * since the new response may not have the same example keys.\n /\nwatch(statusCodesWithContent, (codes) => {\n if (codes.length === 0) {\n selectedResponseIndex.value = 0\n selectedExampleKey.value = ''\n } else if (selectedResponseIndex.value >= codes.length) {\n selectedResponseIndex.value = codes.length - 1\n selectedExampleKey.value = ''\n }\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n const currentStatusCode =\n toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject \| undefined>(() => {\n const normalizedContent = normalizeMimeTypeObject(\n currentResponse.value?.content,\n )\n\n /* All the keys of the normalized content /\n const keys = objectKeys(normalizedContent ?? {})\n return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n () =>\n !!currentResponseContent.value?.examples &&\n Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>(\n Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? '',\n)\n\n/* Get the current example to display /\nconst currentExample = computed(() => {\n if (!currentResponseContent.value) {\n return undefined\n }\n\n // When multiple examples exist and one is selected, we access it directly\n if (hasMultipleExamples.value && selectedExampleKey.value) {\n return currentResponseContent.value.examples?.[selectedExampleKey.value]\n }\n\n // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n selectedResponseIndex.value = index\n selectedExampleKey.value = ''\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n <ScalarCard\n v-if=\"statusCodesWithContent.length\"\n aria-label=\"Example Responses\"\n class=\"response-card\"\n role=\"region\">\n <ExampleResponseTabList @change=\"changeTab\">\n <ExampleResponseTab\n v-for=\"statusCode in statusCodesWithContent\"\n :key=\"statusCode\"\n :aria-controls=\"id\">\n <ScreenReader>Status:</ScreenReader>\n {{ statusCode }}\n </ExampleResponseTab>\n\n <template #actions>\n <button\n v-if=\"currentResponseContent?.example\"\n class=\"code-copy\"\n type=\"button\"\n @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n <ScalarIcon\n icon=\"Clipboard\"\n width=\"12px\" />\n </button>\n <label\n v-if=\"currentResponseContent?.schema\"\n class=\"scalar-card-checkbox\">\n Show Schema\n <input\n v-model=\"showSchema\"\n :aria-controls=\"id\"\n class=\"scalar-card-checkbox-input\"\n type=\"checkbox\" />\n <span class=\"scalar-card-checkbox-checkmark\" />\n </label>\n </template>\n </ExampleResponseTabList>\n <ScalarCardSection class=\"grid flex-1\">\n <!-- Schema -->\n <ExampleSchema\n v-if=\"currentResponseContent?.schema && showSchema\"\n :id=\"id\"\n :schema=\"currentResponseContent?.schema\" />\n\n <!-- Example -->\n <ExampleResponse\n v-else\n :id=\"id\"\n :example=\"currentExample\"\n :response=\"currentResponseContent\" />\n </ScalarCardSection>\n <ScalarCardFooter\n v-if=\"currentResponse?.description \|\| hasMultipleExamples\"\n class=\"response-card-footer\">\n <ExamplePicker\n v-if=\"hasMultipleExamples\"\n v-model=\"selectedExampleKey\"\n class=\"response-example-selector px-0\"\n :examples=\"currentResponseContent?.examples\" />\n <div class=\"response-description\">\n <ScalarMarkdown\n v-if=\"currentResponse?.description\"\n class=\"response-description-markdown\"\n :value=\"currentResponse.description\" />\n </div>\n </ScalarCardFooter>\n </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n display: flex;\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n outline: none;\n background: transparent;\n cursor: pointer;\n color: var(--scalar-color-3);\n border: none;\n padding: 0;\n margin-right: 12px;\n}\n.code-copy:hover {\n color: var(--scalar-color-1);\n}\n.code-copy svg {\n width: 13px;\n height: 13px;\n}\n.response-card-footer {\n display: flex;\n flex-direction: row-reverse;\n flex-wrap: wrap;\n justify-content: start;\n flex-shrink: 0;\n padding: 7px 12px;\n column-gap: 8px;\n}\n.response-example-selector {\n flex-shrink: 0;\n margin: -4px;\n}\n.response-description {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-small);\n color: var(--scalar-color--1);\n\n box-sizing: border-box;\n\n flex-grow: 1;\n}\n.response-description-markdown {\n max-height: 3lh;\n}\n\n.response-description-markdown :deep() {\n margin: 0;\n}\n.schema-type {\n font-size: var(--scalar-micro);\n color: var(--scalar-color-2);\n font-weight: var(--scalar-semibold);\n background: var(--scalar-background-3);\n padding: 2px 4px;\n border-radius: 4px;\n margin-right: 4px;\n}\n.schema-example {\n font-size: var(--scalar-micro);\n color: var(--scalar-color-2);\n font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n display: block;\n margin: 6px;\n}\n\n.scalar-card-checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n min-height: 17px;\n cursor: pointer;\n user-select: none;\n font-size: var(--scalar-small);\n font-weight: var(--scalar-font-normal);\n color: var(--scalar-color-2);\n width: fit-content;\n white-space: nowrap;\n gap: 6px;\n padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n .scalar-card-checkbox-checkmark {\n outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n height: 16px;\n width: 16px;\n border-radius: var(--scalar-radius);\n background-color: transparent;\n background-color: var(--scalar-background-3);\n box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n color: var(--scalar-color-1);\n font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n .scalar-card-checkbox-input:checked\n ~ .scalar-card-checkbox-checkmark {\n background-color: var(--scalar-button-1);\n box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n content: '';\n position: absolute;\n display: none;\n}\n\n.scalar-card-checkbox\n .scalar-card-checkbox-input:checked\n ~ .scalar-card-checkbox-checkmark:after {\n display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n right: 11.5px;\n top: 12.5px;\n width: 5px;\n height: 9px;\n border: solid 1px var(--scalar-button-1-color);\n border-width: 0 1.5px 1.5px 0;\n transform: rotate(45deg);\n}\n</style>\n"],"mappings":""}

package/dist/features/example-responses/ExampleResponses.vue.script.js CHANGED Viewed

@@ -3,14 +3,15 @@ import ExampleSchema_default from "./ExampleSchema.vue.js";
 import ExampleResponse_default from "./ExampleResponse.vue.js";
 import ExampleResponseTab_default from "./ExampleResponseTab.vue.js";
 import ExampleResponseTabList_default from "./ExampleResponseTabList.vue.js";
-import { hasResponseContent } from "./has-response-content.js";
+import { normalizeMimeTypeObject } from "./helpers/normalize-mime-type-object.js";
+import { hasResponseContent } from "./helpers/has-response-content.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, toValue, unref, useId, vModelCheckbox, watch, withCtx, withDirectives } from "vue";
 import { ScalarCard, ScalarCardFooter, ScalarCardSection, ScalarIcon, ScalarMarkdown } from "@scalar/components";
 import { useClipboard } from "@scalar/use-hooks/useClipboard";
 import { getExample } from "@scalar/workspace-store/request-example";
-import { getObjectKeys, normalizeMimeTypeObject } from "@scalar/oas-utils/helpers";
-import { ExamplePicker } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { ExamplePicker } from "@scalar/api-client/blocks/operation-code-sample";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { objectKeys } from "@scalar/helpers/object/object-keys";
 //#region src/features/example-responses/ExampleResponses.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 1,
@@ -54,7 +55,7 @@ var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const currentResponseContent = computed(() => {
 			const normalizedContent = normalizeMimeTypeObject(currentResponse.value?.content);
 			/** All the keys of the normalized content */
-			const keys = getObjectKeys(normalizedContent ?? {});
+			const keys = objectKeys(normalizedContent ?? {});
 			return normalizedContent?.[keys[0] ?? ""];
 		});
 		const hasMultipleExamples = computed(() => !!currentResponseContent.value?.examples && Object.keys(currentResponseContent.value?.examples ?? {}).length > 1);