@scalar/api-client 3.8.2 → 3.8.4

package/dist/v2/blocks/operation-block/components/Header.vue.script.js

@@ -2,8 +2,9 @@ import OpenApiClientButton_default from "./OpenApiClientButton.vue.js";
 import AddressBar_default from "../../scalar-address-bar-block/components/AddressBar.vue.js";
 import EnvironmentSelector_default from "../../scalar-address-bar-block/components/EnvironmentSelector.vue.js";
 import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, unref } from "vue";
-import { ScalarIcon, ScalarIconButton } from "@scalar/components";
 import { ScalarIconGearSix } from "@scalar/icons";
+import { ScalarIcon } from "@scalar/components/icon";
+import { ScalarIconButton } from "@scalar/components/icon-button";
 //#region src/v2/blocks/operation-block/components/Header.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "lg:min-h-header t-app__top-container @container flex w-full flex-wrap items-center justify-center p-2" };
 var _hoisted_2 = { class: "mb-2 flex flex-1 items-center justify-end gap-2 @3xl:mb-0" };
@@ -104,10 +105,14 @@ var Header_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 						buttonSource: "modal",
 						class: "!w-fit lg:-mr-1",
 						integration: __props.integration ?? null,
+						operationMethod: __props.method,
+						operationPath: __props.path,
 						source: __props.source ?? "api-reference",
 						url: __props.documentUrl
 					}, null, 8, [
 						"integration",
+						"operationMethod",
+						"operationPath",
 						"source",
 						"url"
 					])) : createCommentVNode("", true),

package/dist/v2/blocks/operation-block/components/Header.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/operation-block/components/Header.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n  Operation block header: address bar, environment selector, and modal controls.\n\n  Renders the top bar for the API client operation view: URL/method (AddressBar),\n  optional environment selector, optional \"Open API Client\" button in modal layout,\n  and close button for modal. Layout and visibility depend on `layout` and `source` props.\n */\nexport type HeaderProps = {\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: HttpMethod\n  /** Client layout */\n  layout: ClientLayout\n  /** Hides the client button on the header */\n  hideClientButton?: boolean\n  /** Client integration  */\n  integration?: string | null\n  /** Openapi document slug */\n  documentSlug: string\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Openapi document url for `modal` mode to open the client app */\n  documentUrl?: string\n  /** Client source */\n  source?: 'gitbook' | 'api-reference'\n  /** Currently selected server */\n  server: ServerObject | null\n  /** Server list available for operation/document */\n  servers: ServerObject[]\n  /** List of request history */\n  history: History[]\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n  /** Environment list */\n  environments?: string[]\n  /** Currently selected environment */\n  activeEnvironment?: string\n  /** Environment variables */\n  environment: XScalarEnvironment\n  /** Meta information for the server */\n  serverMeta: ServerMeta\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIcon, ScalarIconButton } from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconGearSix } from '@scalar/icons'\nimport type {\n  ServerMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { AddressBar, type History } from '@/v2/blocks/scalar-address-bar-block'\nimport EnvironmentSelector from '@/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport OpenApiClientButton from './OpenApiClientButton.vue'\n\nconst {\n  hideClientButton = false,\n  eventBus,\n  exampleKey,\n  documentSlug,\n} = defineProps<HeaderProps>()\n\nconst emit = defineEmits<{\n  /** Execute the current operation example */\n  (e: 'execute'): void\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Add a new environment */\n  (e: 'add:environment'): void\n  /** Navigate to the settings page for the current entity */\n  (e: 'navigate:settings'): void\n}>()\n\nconst handleSelectEnvironment = (environmentName: string) => {\n  eventBus.emit('workspace:update:active-environment', environmentName)\n}\n\nconst handleAddEnvironment = () => {\n  eventBus.emit('ui:navigate', { page: 'document', path: 'environment' })\n}\n</script>\n\n<template>\n  <!--\n    `@container` declares an unnamed container so the AddressBar can\n    adapt to the right column's actual width (which shrinks when the\n    sidebar opens) instead of the viewport. The query is declared here\n    on the parent rather than on the AddressBar itself so the bar's\n    `w-full` mobile state cannot feed back into its own breakpoint.\n  -->\n  <div\n    class=\"lg:min-h-header t-app__top-container @container flex w-full flex-wrap items-center justify-center p-2\">\n    <!-- Left spacer to center bar -->\n    <div class=\"flex flex-1\"></div>\n    <AddressBar\n      :activeEnvironment\n      :documentSlug\n      :environment\n      :environments\n      :eventBus\n      :exampleKey\n      :history\n      :layout\n      :method\n      :path\n      :server\n      :serverMeta\n      :servers\n      @add:environment=\"emit('add:environment')\"\n      @execute=\"emit('execute')\"\n      @select:history:item=\"\n        (payload) => emit('select:history:item', payload)\n      \" />\n\n    <div class=\"mb-2 flex flex-1 items-center justify-end gap-2 @3xl:mb-0\">\n      <!--\n        Environment Selector\n        Hidden for `modal` layout\n      -->\n      <EnvironmentSelector\n        v-if=\"layout !== 'modal'\"\n        :activeEnvironment=\"activeEnvironment\"\n        :environments=\"environments\"\n        @add:environment=\"handleAddEnvironment\"\n        @select:environment=\"handleSelectEnvironment\" />\n      <!-- Operation settings -->\n      <ScalarIconButton\n        v-if=\"layout !== 'modal'\"\n        :icon=\"ScalarIconGearSix\"\n        label=\"Operation settings\"\n        size=\"sm\"\n        weight=\"bold\"\n        @click=\"emit('navigate:settings')\" />\n      <!--\n          Open API Client Button\n\n          Only shown in `modal` layout\n      -->\n      <OpenApiClientButton\n        v-if=\"layout === 'modal' && documentUrl && !hideClientButton\"\n        buttonSource=\"modal\"\n        class=\"!w-fit lg:-mr-1\"\n        :integration=\"integration ?? null\"\n        :source=\"source ?? 'api-reference'\"\n        :url=\"documentUrl\" />\n\n      <!--\n          Close Button\n\n          Only shown in `modal` layout and hidden for GitBook Integration\n      -->\n      <button\n        v-if=\"layout === 'modal' && source !== 'gitbook'\"\n        class=\"app-exit-button zoomed:static zoomed:p-1 fixed top-2 right-2 rounded-full p-2\"\n        type=\"button\"\n        @click=\"eventBus.emit('ui:close:client-modal')\">\n        <ScalarIcon\n          icon=\"Close\"\n          size=\"lg\"\n          thickness=\"2\" />\n        <span class=\"sr-only\">Close Client</span>\n      </button>\n\n      <!--\n          Close Button for GitBook Integration\n\n          Hidden by default and visible for GitBook Integration in `modal` layout\n      -->\n      <button\n        v-if=\"layout === 'modal' && source === 'gitbook'\"\n        class=\"text-c-1 hover:bg-b-2 active:text-c-1 -mr-1.5 rounded p-2\"\n        type=\"button\"\n        @click=\"eventBus.emit('ui:close:client-modal')\">\n        <ScalarIcon\n          icon=\"Close\"\n          size=\"md\"\n          thickness=\"1.75\" />\n        <span class=\"sr-only\">Close Client</span>\n      </button>\n    </div>\n  </div>\n</template>\n<style scoped>\n.app-exit-button {\n  color: white;\n  background: rgba(0, 0, 0, 0.1);\n}\n.app-exit-button:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsEA,MAAM,OAAO;EAWb,MAAM,2BAA2B,oBAA4B;AAC3D,WAAA,SAAS,KAAK,uCAAuC,gBAAe;;EAGtE,MAAM,6BAA6B;AACjC,WAAA,SAAS,KAAK,eAAe;IAAE,MAAM;IAAY,MAAM;IAAe,CAAA;;;uBAYtE,mBA0FM,OA1FN,YA0FM;8BAvFJ,mBAA+B,OAAA,EAA1B,OAAM,eAAa,EAAA,MAAA,GAAA;IACxB,YAkBM,MAAA,mBAAA,EAAA;KAjBH,mBAAA,QAAA;KACA,cAAA,QAAA;KACA,aAAA,QAAA;KACA,cAAA,QAAA;KACA,UAAA,QAAA;KACA,YAAA,QAAA;KACA,SAAA,QAAA;KACA,QAAA,QAAA;KACA,QAAA,QAAA;KACA,MAAA,QAAA;KACA,QAAA,QAAA;KACA,YAAA,QAAA;KACA,SAAA,QAAA;KACA,qBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,kBAAA;KACrB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;KACb,yBAAmB,OAAA,OAAA,OAAA,MAAY,YAAY,KAAI,uBAAwB,QAAO;;;;;;;;;;;;;;;;IAIjF,mBAiEM,OAjEN,YAiEM;KA3DI,QAAA,WAAM,WAAA,WAAA,EADd,YAKkD,6BAAA;;MAH/C,mBAAmB,QAAA;MACnB,cAAc,QAAA;MACd,qBAAiB;MACjB,wBAAoB;;KAGf,QAAA,WAAM,WAAA,WAAA,EADd,YAMuC,MAAA,iBAAA,EAAA;;MAJpC,MAAM,MAAA,kBAAiB;MACxB,OAAM;MACN,MAAK;MACL,QAAO;MACN,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAA;;KAON,QAAA,WAAM,WAAgB,QAAA,eAAW,CAAK,QAAA,oBAAA,WAAA,EAD9C,YAMuB,6BAAA;;MAJrB,cAAa;MACb,OAAM;MACL,aAAa,QAAA,eAAW;MACxB,QAAQ,QAAA,UAAM;MACd,KAAK,QAAA;;;;;;KAQA,QAAA,WAAM,WAAgB,QAAA,WAAM,aAAA,WAAA,EADpC,mBAUS,UAAA;;MARP,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,SAAS,KAAI,wBAAA;SACrB,YAGkB,MAAA,WAAA,EAAA;MAFhB,MAAK;MACL,MAAK;MACL,WAAU;mCACZ,mBAAyC,QAAA,EAAnC,OAAM,WAAS,EAAC,gBAAY,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;KAS5B,QAAA,WAAM,WAAgB,QAAA,WAAM,aAAA,WAAA,EADpC,mBAUS,UAAA;;MARP,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,SAAS,KAAI,wBAAA;SACrB,YAGqB,MAAA,WAAA,EAAA;MAFnB,MAAK;MACL,MAAK;MACL,WAAU;mCACZ,mBAAyC,QAAA,EAAnC,OAAM,WAAS,EAAC,gBAAY,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"Header.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/operation-block/components/Header.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n  Operation block header: address bar, environment selector, and modal controls.\n\n  Renders the top bar for the API client operation view: URL/method (AddressBar),\n  optional environment selector, optional \"Open API Client\" button in modal layout,\n  and close button for modal. Layout and visibility depend on `layout` and `source` props.\n */\nexport type HeaderProps = {\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: HttpMethod\n  /** Client layout */\n  layout: ClientLayout\n  /** Hides the client button on the header */\n  hideClientButton?: boolean\n  /** Client integration  */\n  integration?: string | null\n  /** Openapi document slug */\n  documentSlug: string\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Openapi document url for `modal` mode to open the client app */\n  documentUrl?: string\n  /** Client source */\n  source?: 'gitbook' | 'api-reference'\n  /** Currently selected server */\n  server: ServerObject | null\n  /** Server list available for operation/document */\n  servers: ServerObject[]\n  /** List of request history */\n  history: History[]\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n  /** Environment list */\n  environments?: string[]\n  /** Currently selected environment */\n  activeEnvironment?: string\n  /** Environment variables */\n  environment: XScalarEnvironment\n  /** Meta information for the server */\n  serverMeta: ServerMeta\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconGearSix } from '@scalar/icons'\nimport type {\n  ServerMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { AddressBar, type History } from '@/v2/blocks/scalar-address-bar-block'\nimport EnvironmentSelector from '@/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport OpenApiClientButton from './OpenApiClientButton.vue'\n\nconst {\n  hideClientButton = false,\n  eventBus,\n  exampleKey,\n  documentSlug,\n} = defineProps<HeaderProps>()\n\nconst emit = defineEmits<{\n  /** Execute the current operation example */\n  (e: 'execute'): void\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Add a new environment */\n  (e: 'add:environment'): void\n  /** Navigate to the settings page for the current entity */\n  (e: 'navigate:settings'): void\n}>()\n\nconst handleSelectEnvironment = (environmentName: string) => {\n  eventBus.emit('workspace:update:active-environment', environmentName)\n}\n\nconst handleAddEnvironment = () => {\n  eventBus.emit('ui:navigate', { page: 'document', path: 'environment' })\n}\n</script>\n\n<template>\n  <!--\n    `@container` declares an unnamed container so the AddressBar can\n    adapt to the right column's actual width (which shrinks when the\n    sidebar opens) instead of the viewport. The query is declared here\n    on the parent rather than on the AddressBar itself so the bar's\n    `w-full` mobile state cannot feed back into its own breakpoint.\n  -->\n  <div\n    class=\"lg:min-h-header t-app__top-container @container flex w-full flex-wrap items-center justify-center p-2\">\n    <!-- Left spacer to center bar -->\n    <div class=\"flex flex-1\"></div>\n    <AddressBar\n      :activeEnvironment\n      :documentSlug\n      :environment\n      :environments\n      :eventBus\n      :exampleKey\n      :history\n      :layout\n      :method\n      :path\n      :server\n      :serverMeta\n      :servers\n      @add:environment=\"emit('add:environment')\"\n      @execute=\"emit('execute')\"\n      @select:history:item=\"\n        (payload) => emit('select:history:item', payload)\n      \" />\n\n    <div class=\"mb-2 flex flex-1 items-center justify-end gap-2 @3xl:mb-0\">\n      <!--\n        Environment Selector\n        Hidden for `modal` layout\n      -->\n      <EnvironmentSelector\n        v-if=\"layout !== 'modal'\"\n        :activeEnvironment=\"activeEnvironment\"\n        :environments=\"environments\"\n        @add:environment=\"handleAddEnvironment\"\n        @select:environment=\"handleSelectEnvironment\" />\n      <!-- Operation settings -->\n      <ScalarIconButton\n        v-if=\"layout !== 'modal'\"\n        :icon=\"ScalarIconGearSix\"\n        label=\"Operation settings\"\n        size=\"sm\"\n        weight=\"bold\"\n        @click=\"emit('navigate:settings')\" />\n      <!--\n          Open API Client Button\n\n          Only shown in `modal` layout\n      -->\n      <OpenApiClientButton\n        v-if=\"layout === 'modal' && documentUrl && !hideClientButton\"\n        buttonSource=\"modal\"\n        class=\"!w-fit lg:-mr-1\"\n        :integration=\"integration ?? null\"\n        :operationMethod=\"method\"\n        :operationPath=\"path\"\n        :source=\"source ?? 'api-reference'\"\n        :url=\"documentUrl\" />\n\n      <!--\n          Close Button\n\n          Only shown in `modal` layout and hidden for GitBook Integration\n      -->\n      <button\n        v-if=\"layout === 'modal' && source !== 'gitbook'\"\n        class=\"app-exit-button zoomed:static zoomed:p-1 fixed top-2 right-2 rounded-full p-2\"\n        type=\"button\"\n        @click=\"eventBus.emit('ui:close:client-modal')\">\n        <ScalarIcon\n          icon=\"Close\"\n          size=\"lg\"\n          thickness=\"2\" />\n        <span class=\"sr-only\">Close Client</span>\n      </button>\n\n      <!--\n          Close Button for GitBook Integration\n\n          Hidden by default and visible for GitBook Integration in `modal` layout\n      -->\n      <button\n        v-if=\"layout === 'modal' && source === 'gitbook'\"\n        class=\"text-c-1 hover:bg-b-2 active:text-c-1 -mr-1.5 rounded p-2\"\n        type=\"button\"\n        @click=\"eventBus.emit('ui:close:client-modal')\">\n        <ScalarIcon\n          icon=\"Close\"\n          size=\"md\"\n          thickness=\"1.75\" />\n        <span class=\"sr-only\">Close Client</span>\n      </button>\n    </div>\n  </div>\n</template>\n<style scoped>\n.app-exit-button {\n  color: white;\n  background: rgba(0, 0, 0, 0.1);\n}\n.app-exit-button:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEA,MAAM,OAAO;EAWb,MAAM,2BAA2B,oBAA4B;AAC3D,WAAA,SAAS,KAAK,uCAAuC,gBAAe;;EAGtE,MAAM,6BAA6B;AACjC,WAAA,SAAS,KAAK,eAAe;IAAE,MAAM;IAAY,MAAM;IAAe,CAAA;;;uBAYtE,mBA4FM,OA5FN,YA4FM;8BAzFJ,mBAA+B,OAAA,EAA1B,OAAM,eAAa,EAAA,MAAA,GAAA;IACxB,YAkBM,MAAA,mBAAA,EAAA;KAjBH,mBAAA,QAAA;KACA,cAAA,QAAA;KACA,aAAA,QAAA;KACA,cAAA,QAAA;KACA,UAAA,QAAA;KACA,YAAA,QAAA;KACA,SAAA,QAAA;KACA,QAAA,QAAA;KACA,QAAA,QAAA;KACA,MAAA,QAAA;KACA,QAAA,QAAA;KACA,YAAA,QAAA;KACA,SAAA,QAAA;KACA,qBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,kBAAA;KACrB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;KACb,yBAAmB,OAAA,OAAA,OAAA,MAAY,YAAY,KAAI,uBAAwB,QAAO;;;;;;;;;;;;;;;;IAIjF,mBAmEM,OAnEN,YAmEM;KA7DI,QAAA,WAAM,WAAA,WAAA,EADd,YAKkD,6BAAA;;MAH/C,mBAAmB,QAAA;MACnB,cAAc,QAAA;MACd,qBAAiB;MACjB,wBAAoB;;KAGf,QAAA,WAAM,WAAA,WAAA,EADd,YAMuC,MAAA,iBAAA,EAAA;;MAJpC,MAAM,MAAA,kBAAiB;MACxB,OAAM;MACN,MAAK;MACL,QAAO;MACN,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAA;;KAON,QAAA,WAAM,WAAgB,QAAA,eAAW,CAAK,QAAA,oBAAA,WAAA,EAD9C,YAQuB,6BAAA;;MANrB,cAAa;MACb,OAAM;MACL,aAAa,QAAA,eAAW;MACxB,iBAAiB,QAAA;MACjB,eAAe,QAAA;MACf,QAAQ,QAAA,UAAM;MACd,KAAK,QAAA;;;;;;;;KAQA,QAAA,WAAM,WAAgB,QAAA,WAAM,aAAA,WAAA,EADpC,mBAUS,UAAA;;MARP,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,SAAS,KAAI,wBAAA;SACrB,YAGkB,MAAA,WAAA,EAAA;MAFhB,MAAK;MACL,MAAK;MACL,WAAU;mCACZ,mBAAyC,QAAA,EAAnC,OAAM,WAAS,EAAC,gBAAY,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;KAS5B,QAAA,WAAM,WAAgB,QAAA,WAAM,aAAA,WAAA,EADpC,mBAUS,UAAA;;MARP,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,SAAS,KAAI,wBAAA;SACrB,YAGqB,MAAA,WAAA,EAAA;MAFnB,MAAK;MACL,MAAK;MACL,WAAU;mCACZ,mBAAyC,QAAA,EAAnC,OAAM,WAAS,EAAC,gBAAY,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/v2/blocks/operation-block/components/OpenApiClientButton.vue.d.ts

@@ -4,6 +4,10 @@ type __VLS_Props = {
     isDevelopment?: boolean;
     integration?: string | null;
     url?: string;
+    /** Operation path to open in the client after import */
+    operationPath?: string;
+    /** HTTP method for the operation to open in the client after import */
+    operationMethod?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/v2/blocks/operation-block/components/OpenApiClientButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenApiClientButton.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-block/components/OpenApiClientButton.vue"],"names":[],"mappings":"AA2HA,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,SAAS,GAAG,OAAO,CAAA;IACjC,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAC;AA+GF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"OpenApiClientButton.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-block/components/OpenApiClientButton.vue"],"names":[],"mappings":"AAsIA,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,SAAS,GAAG,OAAO,CAAA;IACjC,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAC;AAsHF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/operation-block/components/OpenApiClientButton.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import OpenApiClientButton_vue_vue_type_script_setup_true_lang_default from "./OpenApiClientButton.vue.script.js";
 /* empty css                                  */
 //#region src/v2/blocks/operation-block/components/OpenApiClientButton.vue
-var OpenApiClientButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OpenApiClientButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-264dd42f"]]);
+var OpenApiClientButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OpenApiClientButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-cd067f84"]]);
 //#endregion
 export { OpenApiClientButton_default as default };
 

package/dist/v2/blocks/operation-block/components/OpenApiClientButton.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenApiClientButton.vue.js","names":[],"sources":["../../../../../src/v2/blocks/operation-block/components/OpenApiClientButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { makeUrlAbsolute } from '@scalar/helpers/url/make-url-absolute'\nimport { ScalarIconArrowUpRight } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst {\n  integration,\n  isDevelopment,\n  url,\n  buttonSource,\n  source = 'api-reference',\n} = defineProps<{\n  buttonSource: 'sidebar' | 'modal'\n  source?: 'api-reference' | 'gitbook'\n  isDevelopment?: boolean\n  integration?: string | null\n  url?: string\n}>()\n\n/** Link to import an OpenAPI document */\nconst href = computed((): string | undefined => {\n  /**\n   * The URL we want to pass to client.scalar.com for the import.\n   * Might be an OpenAPI document URL, but could also just be the URL of the API reference.\n   */\n  const urlToImportFrom =\n    url ?? (typeof window !== 'undefined' ? window.location.href : undefined)\n\n  if (!urlToImportFrom) {\n    return undefined\n  }\n\n  const absoluteUrl = makeUrlAbsolute(urlToImportFrom)\n\n  if (!absoluteUrl?.length) {\n    return undefined\n  }\n\n  // Base URL\n  const link = new URL(\n    isDevelopment ? 'http://localhost:5065' : 'https://client.scalar.com',\n  )\n\n  // URL that we'd like to import\n  link.searchParams.set('url', absoluteUrl)\n\n  // Integration identifier\n  if (integration !== null) {\n    link.searchParams.set('integration', integration ?? 'vue')\n  }\n\n  // UTM Source\n  link.searchParams.set('utm_source', 'api-reference')\n  link.searchParams.set('utm_medium', 'button')\n  link.searchParams.set('utm_campaign', buttonSource)\n\n  // Special for gitbook, set the source and grab the logos (hacky)\n  if (source === 'gitbook') {\n    link.searchParams.set('utm_source', 'gitbook')\n\n    const darkLogo = document.querySelector(\"img.dark\\\\:block[alt='Logo']\")\n    const lightLogo = document.querySelector(\"img.dark\\\\:hidden[alt='Logo']\")\n\n    if (darkLogo && darkLogo instanceof HTMLImageElement) {\n      link.searchParams.set('dark_logo', encodeURIComponent(darkLogo.src))\n    }\n    if (lightLogo && lightLogo instanceof HTMLImageElement) {\n      link.searchParams.set('light_logo', encodeURIComponent(lightLogo.src))\n    }\n  }\n\n  return link.toString()\n})\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    class=\"open-api-client-button\"\n    :href=\"href\"\n    target=\"_blank\">\n    <ScalarIconArrowUpRight\n      class=\"size-3\"\n      weight=\"regular\" />\n    Open API Client\n  </a>\n</template>\n\n<style scoped>\n.open-api-client-button {\n  cursor: pointer;\n  width: 100%;\n  padding: 9px 12px;\n  height: 31px;\n  display: block;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-size: var(--scalar-small);\n  line-height: 1.385;\n  text-decoration: none;\n  border-radius: var(--scalar-radius);\n  box-shadow: 0 0 0 0.5px var(--scalar-border-color);\n  gap: 6px;\n  color: var(--scalar-sidebar-color-1);\n}\n\n.open-api-client-button:hover {\n  background: var(\n    --scalar-sidebar-item-hover-background,\n    var(--scalar-background-2)\n  );\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"OpenApiClientButton.vue.js","names":[],"sources":["../../../../../src/v2/blocks/operation-block/components/OpenApiClientButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { makeUrlAbsolute } from '@scalar/helpers/url/make-url-absolute'\nimport { ScalarIconArrowUpRight } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst {\n  integration,\n  isDevelopment,\n  url,\n  operationPath,\n  operationMethod,\n  buttonSource,\n  source = 'api-reference',\n} = defineProps<{\n  buttonSource: 'sidebar' | 'modal'\n  source?: 'api-reference' | 'gitbook'\n  isDevelopment?: boolean\n  integration?: string | null\n  url?: string\n  /** Operation path to open in the client after import */\n  operationPath?: string\n  /** HTTP method for the operation to open in the client after import */\n  operationMethod?: string\n}>()\n\n/** Link to import an OpenAPI document */\nconst href = computed((): string | undefined => {\n  /**\n   * The URL we want to pass to client.scalar.com for the import.\n   * Might be an OpenAPI document URL, but could also just be the URL of the API reference.\n   */\n  const urlToImportFrom =\n    url ?? (typeof window !== 'undefined' ? window.location.href : undefined)\n\n  if (!urlToImportFrom) {\n    return undefined\n  }\n\n  const absoluteUrl = makeUrlAbsolute(urlToImportFrom)\n\n  if (!absoluteUrl?.length) {\n    return undefined\n  }\n\n  // Base URL\n  const link = new URL(\n    isDevelopment ? 'http://localhost:5065' : 'https://client.scalar.com',\n  )\n\n  // URL that we'd like to import\n  link.searchParams.set('url', absoluteUrl)\n\n  if (operationPath?.length && operationMethod?.length) {\n    link.searchParams.set('operation_path', operationPath)\n    link.searchParams.set('operation_method', operationMethod.toLowerCase())\n  }\n\n  // Integration identifier\n  if (integration !== null) {\n    link.searchParams.set('integration', integration ?? 'vue')\n  }\n\n  // UTM Source\n  link.searchParams.set('utm_source', 'api-reference')\n  link.searchParams.set('utm_medium', 'button')\n  link.searchParams.set('utm_campaign', buttonSource)\n\n  // Special for gitbook, set the source and grab the logos (hacky)\n  if (source === 'gitbook') {\n    link.searchParams.set('utm_source', 'gitbook')\n\n    const darkLogo = document.querySelector(\"img.dark\\\\:block[alt='Logo']\")\n    const lightLogo = document.querySelector(\"img.dark\\\\:hidden[alt='Logo']\")\n\n    if (darkLogo && darkLogo instanceof HTMLImageElement) {\n      link.searchParams.set('dark_logo', encodeURIComponent(darkLogo.src))\n    }\n    if (lightLogo && lightLogo instanceof HTMLImageElement) {\n      link.searchParams.set('light_logo', encodeURIComponent(lightLogo.src))\n    }\n  }\n\n  return link.toString()\n})\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    class=\"open-api-client-button\"\n    :href=\"href\"\n    target=\"_blank\">\n    <ScalarIconArrowUpRight\n      class=\"size-3\"\n      weight=\"regular\" />\n    Open API Client\n  </a>\n</template>\n\n<style scoped>\n.open-api-client-button {\n  cursor: pointer;\n  width: 100%;\n  padding: 9px 12px;\n  height: 31px;\n  display: block;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-size: var(--scalar-small);\n  line-height: 1.385;\n  text-decoration: none;\n  border-radius: var(--scalar-radius);\n  box-shadow: 0 0 0 0.5px var(--scalar-border-color);\n  gap: 6px;\n  color: var(--scalar-sidebar-color-1);\n}\n\n.open-api-client-button:hover {\n  background: var(\n    --scalar-sidebar-item-hover-background,\n    var(--scalar-background-2)\n  );\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/operation-block/components/OpenApiClientButton.vue.script.js

@@ -10,7 +10,9 @@ var OpenApiClientButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		source: { default: "api-reference" },
 		isDevelopment: { type: Boolean },
 		integration: {},
-		url: {}
+		url: {},
+		operationPath: {},
+		operationMethod: {}
 	},
 	setup(__props) {
 		/** Link to import an OpenAPI document */
@@ -25,6 +27,10 @@ var OpenApiClientButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 			if (!absoluteUrl?.length) return;
 			const link = new URL(__props.isDevelopment ? "http://localhost:5065" : "https://client.scalar.com");
 			link.searchParams.set("url", absoluteUrl);
+			if (__props.operationPath?.length && __props.operationMethod?.length) {
+				link.searchParams.set("operation_path", __props.operationPath);
+				link.searchParams.set("operation_method", __props.operationMethod.toLowerCase());
+			}
 			if (__props.integration !== null) link.searchParams.set("integration", __props.integration ?? "vue");
 			link.searchParams.set("utm_source", "api-reference");
 			link.searchParams.set("utm_medium", "button");

package/dist/v2/blocks/operation-block/components/OpenApiClientButton.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenApiClientButton.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/operation-block/components/OpenApiClientButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { makeUrlAbsolute } from '@scalar/helpers/url/make-url-absolute'\nimport { ScalarIconArrowUpRight } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst {\n  integration,\n  isDevelopment,\n  url,\n  buttonSource,\n  source = 'api-reference',\n} = defineProps<{\n  buttonSource: 'sidebar' | 'modal'\n  source?: 'api-reference' | 'gitbook'\n  isDevelopment?: boolean\n  integration?: string | null\n  url?: string\n}>()\n\n/** Link to import an OpenAPI document */\nconst href = computed((): string | undefined => {\n  /**\n   * The URL we want to pass to client.scalar.com for the import.\n   * Might be an OpenAPI document URL, but could also just be the URL of the API reference.\n   */\n  const urlToImportFrom =\n    url ?? (typeof window !== 'undefined' ? window.location.href : undefined)\n\n  if (!urlToImportFrom) {\n    return undefined\n  }\n\n  const absoluteUrl = makeUrlAbsolute(urlToImportFrom)\n\n  if (!absoluteUrl?.length) {\n    return undefined\n  }\n\n  // Base URL\n  const link = new URL(\n    isDevelopment ? 'http://localhost:5065' : 'https://client.scalar.com',\n  )\n\n  // URL that we'd like to import\n  link.searchParams.set('url', absoluteUrl)\n\n  // Integration identifier\n  if (integration !== null) {\n    link.searchParams.set('integration', integration ?? 'vue')\n  }\n\n  // UTM Source\n  link.searchParams.set('utm_source', 'api-reference')\n  link.searchParams.set('utm_medium', 'button')\n  link.searchParams.set('utm_campaign', buttonSource)\n\n  // Special for gitbook, set the source and grab the logos (hacky)\n  if (source === 'gitbook') {\n    link.searchParams.set('utm_source', 'gitbook')\n\n    const darkLogo = document.querySelector(\"img.dark\\\\:block[alt='Logo']\")\n    const lightLogo = document.querySelector(\"img.dark\\\\:hidden[alt='Logo']\")\n\n    if (darkLogo && darkLogo instanceof HTMLImageElement) {\n      link.searchParams.set('dark_logo', encodeURIComponent(darkLogo.src))\n    }\n    if (lightLogo && lightLogo instanceof HTMLImageElement) {\n      link.searchParams.set('light_logo', encodeURIComponent(lightLogo.src))\n    }\n  }\n\n  return link.toString()\n})\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    class=\"open-api-client-button\"\n    :href=\"href\"\n    target=\"_blank\">\n    <ScalarIconArrowUpRight\n      class=\"size-3\"\n      weight=\"regular\" />\n    Open API Client\n  </a>\n</template>\n\n<style scoped>\n.open-api-client-button {\n  cursor: pointer;\n  width: 100%;\n  padding: 9px 12px;\n  height: 31px;\n  display: block;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-size: var(--scalar-small);\n  line-height: 1.385;\n  text-decoration: none;\n  border-radius: var(--scalar-radius);\n  box-shadow: 0 0 0 0.5px var(--scalar-border-color);\n  gap: 6px;\n  color: var(--scalar-sidebar-color-1);\n}\n\n.open-api-client-button:hover {\n  background: var(\n    --scalar-sidebar-item-hover-background,\n    var(--scalar-background-2)\n  );\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAoBA,MAAM,OAAO,eAAmC;;;;;GAK9C,MAAM,kBACJ,QAAA,QAAQ,OAAO,WAAW,cAAc,OAAO,SAAS,OAAO,KAAA;AAEjE,OAAI,CAAC,gBACH;GAGF,MAAM,cAAc,gBAAgB,gBAAe;AAEnD,OAAI,CAAC,aAAa,OAChB;GAIF,MAAM,OAAO,IAAI,IACf,QAAA,gBAAgB,0BAA0B,4BAC5C;AAGA,QAAK,aAAa,IAAI,OAAO,YAAW;AAGxC,OAAI,QAAA,gBAAgB,KAClB,MAAK,aAAa,IAAI,eAAe,QAAA,eAAe,MAAK;AAI3D,QAAK,aAAa,IAAI,cAAc,gBAAe;AACnD,QAAK,aAAa,IAAI,cAAc,SAAQ;AAC5C,QAAK,aAAa,IAAI,gBAAgB,QAAA,aAAY;AAGlD,OAAI,QAAA,WAAW,WAAW;AACxB,SAAK,aAAa,IAAI,cAAc,UAAS;IAE7C,MAAM,WAAW,SAAS,cAAc,+BAA8B;IACtE,MAAM,YAAY,SAAS,cAAc,gCAA+B;AAExE,QAAI,YAAY,oBAAoB,iBAClC,MAAK,aAAa,IAAI,aAAa,mBAAmB,SAAS,IAAI,CAAA;AAErE,QAAI,aAAa,qBAAqB,iBACpC,MAAK,aAAa,IAAI,cAAc,mBAAmB,UAAU,IAAI,CAAA;;AAIzE,UAAO,KAAK,UAAS;IACtB;;UAKS,KAAA,SAAA,WAAA,EADR,mBASI,KAAA;;IAPF,OAAM;IACL,MAAM,KAAA;IACP,QAAO;OACP,YAEqB,MAAA,uBAAA,EAAA;IADnB,OAAM;IACN,QAAO;iDAAY,qBAEvB,GAAA,EAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"OpenApiClientButton.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/operation-block/components/OpenApiClientButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { makeUrlAbsolute } from '@scalar/helpers/url/make-url-absolute'\nimport { ScalarIconArrowUpRight } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst {\n  integration,\n  isDevelopment,\n  url,\n  operationPath,\n  operationMethod,\n  buttonSource,\n  source = 'api-reference',\n} = defineProps<{\n  buttonSource: 'sidebar' | 'modal'\n  source?: 'api-reference' | 'gitbook'\n  isDevelopment?: boolean\n  integration?: string | null\n  url?: string\n  /** Operation path to open in the client after import */\n  operationPath?: string\n  /** HTTP method for the operation to open in the client after import */\n  operationMethod?: string\n}>()\n\n/** Link to import an OpenAPI document */\nconst href = computed((): string | undefined => {\n  /**\n   * The URL we want to pass to client.scalar.com for the import.\n   * Might be an OpenAPI document URL, but could also just be the URL of the API reference.\n   */\n  const urlToImportFrom =\n    url ?? (typeof window !== 'undefined' ? window.location.href : undefined)\n\n  if (!urlToImportFrom) {\n    return undefined\n  }\n\n  const absoluteUrl = makeUrlAbsolute(urlToImportFrom)\n\n  if (!absoluteUrl?.length) {\n    return undefined\n  }\n\n  // Base URL\n  const link = new URL(\n    isDevelopment ? 'http://localhost:5065' : 'https://client.scalar.com',\n  )\n\n  // URL that we'd like to import\n  link.searchParams.set('url', absoluteUrl)\n\n  if (operationPath?.length && operationMethod?.length) {\n    link.searchParams.set('operation_path', operationPath)\n    link.searchParams.set('operation_method', operationMethod.toLowerCase())\n  }\n\n  // Integration identifier\n  if (integration !== null) {\n    link.searchParams.set('integration', integration ?? 'vue')\n  }\n\n  // UTM Source\n  link.searchParams.set('utm_source', 'api-reference')\n  link.searchParams.set('utm_medium', 'button')\n  link.searchParams.set('utm_campaign', buttonSource)\n\n  // Special for gitbook, set the source and grab the logos (hacky)\n  if (source === 'gitbook') {\n    link.searchParams.set('utm_source', 'gitbook')\n\n    const darkLogo = document.querySelector(\"img.dark\\\\:block[alt='Logo']\")\n    const lightLogo = document.querySelector(\"img.dark\\\\:hidden[alt='Logo']\")\n\n    if (darkLogo && darkLogo instanceof HTMLImageElement) {\n      link.searchParams.set('dark_logo', encodeURIComponent(darkLogo.src))\n    }\n    if (lightLogo && lightLogo instanceof HTMLImageElement) {\n      link.searchParams.set('light_logo', encodeURIComponent(lightLogo.src))\n    }\n  }\n\n  return link.toString()\n})\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    class=\"open-api-client-button\"\n    :href=\"href\"\n    target=\"_blank\">\n    <ScalarIconArrowUpRight\n      class=\"size-3\"\n      weight=\"regular\" />\n    Open API Client\n  </a>\n</template>\n\n<style scoped>\n.open-api-client-button {\n  cursor: pointer;\n  width: 100%;\n  padding: 9px 12px;\n  height: 31px;\n  display: block;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-size: var(--scalar-small);\n  line-height: 1.385;\n  text-decoration: none;\n  border-radius: var(--scalar-radius);\n  box-shadow: 0 0 0 0.5px var(--scalar-border-color);\n  gap: 6px;\n  color: var(--scalar-sidebar-color-1);\n}\n\n.open-api-client-button:hover {\n  background: var(\n    --scalar-sidebar-item-hover-background,\n    var(--scalar-background-2)\n  );\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA0BA,MAAM,OAAO,eAAmC;;;;;GAK9C,MAAM,kBACJ,QAAA,QAAQ,OAAO,WAAW,cAAc,OAAO,SAAS,OAAO,KAAA;AAEjE,OAAI,CAAC,gBACH;GAGF,MAAM,cAAc,gBAAgB,gBAAe;AAEnD,OAAI,CAAC,aAAa,OAChB;GAIF,MAAM,OAAO,IAAI,IACf,QAAA,gBAAgB,0BAA0B,4BAC5C;AAGA,QAAK,aAAa,IAAI,OAAO,YAAW;AAExC,OAAI,QAAA,eAAe,UAAU,QAAA,iBAAiB,QAAQ;AACpD,SAAK,aAAa,IAAI,kBAAkB,QAAA,cAAa;AACrD,SAAK,aAAa,IAAI,oBAAoB,QAAA,gBAAgB,aAAa,CAAA;;AAIzE,OAAI,QAAA,gBAAgB,KAClB,MAAK,aAAa,IAAI,eAAe,QAAA,eAAe,MAAK;AAI3D,QAAK,aAAa,IAAI,cAAc,gBAAe;AACnD,QAAK,aAAa,IAAI,cAAc,SAAQ;AAC5C,QAAK,aAAa,IAAI,gBAAgB,QAAA,aAAY;AAGlD,OAAI,QAAA,WAAW,WAAW;AACxB,SAAK,aAAa,IAAI,cAAc,UAAS;IAE7C,MAAM,WAAW,SAAS,cAAc,+BAA8B;IACtE,MAAM,YAAY,SAAS,cAAc,gCAA+B;AAExE,QAAI,YAAY,oBAAoB,iBAClC,MAAK,aAAa,IAAI,aAAa,mBAAmB,SAAS,IAAI,CAAA;AAErE,QAAI,aAAa,qBAAqB,iBACpC,MAAK,aAAa,IAAI,cAAc,mBAAmB,UAAU,IAAI,CAAA;;AAIzE,UAAO,KAAK,UAAS;IACtB;;UAKS,KAAA,SAAA,WAAA,EADR,mBASI,KAAA;;IAPF,OAAM;IACL,MAAM,KAAA;IACP,QAAO;OACP,YAEqB,MAAA,uBAAA,EAAA;IADnB,OAAM;IACN,QAAO;iDAAY,qBAEvB,GAAA,EAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExamplePicker.vue.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/ExamplePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { examples = {} } = defineProps<{\n  examples?: MediaTypeObject['examples'] | Record<string, string>\n}>()\n\nconst selectedExampleKey = defineModel<string>({\n  required: true,\n})\n\ndefineOptions({ inheritAttrs: false })\n\nconst exampleOptions = computed<ScalarListboxOption[]>(() =>\n  Object.entries(examples).map(([key, example]) => ({\n    id: key,\n    label: example?.summary ?? key,\n  })),\n)\n\nconst selectedExample = computed<ScalarListboxOption | undefined>({\n  get: () =>\n    exampleOptions.value.find(({ id }) => id === selectedExampleKey.value),\n  set: (v) => (selectedExampleKey.value = v?.id ?? ''),\n})\n</script>\n\n<template>\n  <ScalarListbox\n    v-model=\"selectedExample\"\n    class=\"w-fit min-w-32\"\n    :options=\"exampleOptions\"\n    placement=\"bottom-start\"\n    teleport>\n    <ScalarButton\n      class=\"text-c-2 hover:text-c-1 flex h-full w-fit min-w-0 gap-1.5 px-1.5 py-0.75 text-base font-normal\"\n      data-testid=\"example-picker\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\">\n      <div class=\"min-w-0 flex-1 truncate\">\n        {{ selectedExample?.label ?? 'Select an example' }}\n      </div>\n      <ScalarIconCaretDown\n        class=\"ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ExamplePicker.vue.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/ExamplePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { examples = {} } = defineProps<{\n  examples?: MediaTypeObject['examples'] | Record<string, string>\n}>()\n\nconst selectedExampleKey = defineModel<string>({\n  required: true,\n})\n\ndefineOptions({ inheritAttrs: false })\n\nconst exampleOptions = computed<ScalarListboxOption[]>(() =>\n  Object.entries(examples).map(([key, example]) => ({\n    id: key,\n    label: example?.summary ?? key,\n  })),\n)\n\nconst selectedExample = computed<ScalarListboxOption | undefined>({\n  get: () =>\n    exampleOptions.value.find(({ id }) => id === selectedExampleKey.value),\n  set: (v) => (selectedExampleKey.value = v?.id ?? ''),\n})\n</script>\n\n<template>\n  <ScalarListbox\n    v-model=\"selectedExample\"\n    class=\"w-fit min-w-32\"\n    :options=\"exampleOptions\"\n    placement=\"bottom-start\"\n    teleport>\n    <ScalarButton\n      class=\"text-c-2 hover:text-c-1 flex h-full w-fit min-w-0 gap-1.5 px-1.5 py-0.75 text-base font-normal\"\n      data-testid=\"example-picker\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\">\n      <div class=\"min-w-0 flex-1 truncate\">\n        {{ selectedExample?.label ?? 'Select an example' }}\n      </div>\n      <ScalarIconCaretDown\n        class=\"ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":""}

package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.script.js

@@ -1,5 +1,6 @@
 import { computed, createBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, openBlock, toDisplayString, unref, useModel, withCtx } from "vue";
-import { ScalarButton, ScalarListbox } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
+import { ScalarListbox } from "@scalar/components/listbox";
 import { ScalarIconCaretDown } from "@scalar/icons";
 //#region src/v2/blocks/operation-code-sample/components/ExamplePicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "min-w-0 flex-1 truncate" };

package/dist/v2/blocks/operation-code-sample/components/ExamplePicker.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExamplePicker.vue.script.js","names":["$attrs"],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/ExamplePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { examples = {} } = defineProps<{\n  examples?: MediaTypeObject['examples'] | Record<string, string>\n}>()\n\nconst selectedExampleKey = defineModel<string>({\n  required: true,\n})\n\ndefineOptions({ inheritAttrs: false })\n\nconst exampleOptions = computed<ScalarListboxOption[]>(() =>\n  Object.entries(examples).map(([key, example]) => ({\n    id: key,\n    label: example?.summary ?? key,\n  })),\n)\n\nconst selectedExample = computed<ScalarListboxOption | undefined>({\n  get: () =>\n    exampleOptions.value.find(({ id }) => id === selectedExampleKey.value),\n  set: (v) => (selectedExampleKey.value = v?.id ?? ''),\n})\n</script>\n\n<template>\n  <ScalarListbox\n    v-model=\"selectedExample\"\n    class=\"w-fit min-w-32\"\n    :options=\"exampleOptions\"\n    placement=\"bottom-start\"\n    teleport>\n    <ScalarButton\n      class=\"text-c-2 hover:text-c-1 flex h-full w-fit min-w-0 gap-1.5 px-1.5 py-0.75 text-base font-normal\"\n      data-testid=\"example-picker\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\">\n      <div class=\"min-w-0 flex-1 truncate\">\n        {{ selectedExample?.label ?? 'Select an example' }}\n      </div>\n      <ScalarIconCaretDown\n        class=\"ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAcA,MAAM,qBAAqB,SAAmB,SAAA,aAE7C;EAID,MAAM,iBAAiB,eACrB,OAAO,QAAQ,QAAA,SAAS,CAAC,KAAK,CAAC,KAAK,cAAc;GAChD,IAAI;GACJ,OAAO,SAAS,WAAW;GAC5B,EAAE,CACL;EAEA,MAAM,kBAAkB,SAA0C;GAChE,WACE,eAAe,MAAM,MAAM,EAAE,SAAS,OAAO,mBAAmB,MAAM;GACxE,MAAM,MAAO,mBAAmB,QAAQ,GAAG,MAAM;GAClD,CAAA;;uBAIC,YAkBgB,MAAA,cAAA,EAAA;gBAjBL,gBAAA;iFAAe,QAAA;IACxB,OAAM;IACL,SAAS,eAAA;IACV,WAAU;IACV,UAAA;;2BAYe,CAXf,YAWe,MAAA,aAAA,EAXf,WAWe;KAVb,OAAM;KACN,eAAY;KACZ,SAAQ;OACAA,KAAAA,OAAM,EAAA;4BAGR,CAFN,mBAEM,OAFN,YAEM,gBADD,gBAAA,OAAiB,SAAK,oBAAA,EAAA,EAAA,EAE3B,YAEkB,MAAA,oBAAA,EAAA;MADhB,OAAM;MACN,QAAO"}
+{"version":3,"file":"ExamplePicker.vue.script.js","names":["$attrs"],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/ExamplePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { examples = {} } = defineProps<{\n  examples?: MediaTypeObject['examples'] | Record<string, string>\n}>()\n\nconst selectedExampleKey = defineModel<string>({\n  required: true,\n})\n\ndefineOptions({ inheritAttrs: false })\n\nconst exampleOptions = computed<ScalarListboxOption[]>(() =>\n  Object.entries(examples).map(([key, example]) => ({\n    id: key,\n    label: example?.summary ?? key,\n  })),\n)\n\nconst selectedExample = computed<ScalarListboxOption | undefined>({\n  get: () =>\n    exampleOptions.value.find(({ id }) => id === selectedExampleKey.value),\n  set: (v) => (selectedExampleKey.value = v?.id ?? ''),\n})\n</script>\n\n<template>\n  <ScalarListbox\n    v-model=\"selectedExample\"\n    class=\"w-fit min-w-32\"\n    :options=\"exampleOptions\"\n    placement=\"bottom-start\"\n    teleport>\n    <ScalarButton\n      class=\"text-c-2 hover:text-c-1 flex h-full w-fit min-w-0 gap-1.5 px-1.5 py-0.75 text-base font-normal\"\n      data-testid=\"example-picker\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\">\n      <div class=\"min-w-0 flex-1 truncate\">\n        {{ selectedExample?.label ?? 'Select an example' }}\n      </div>\n      <ScalarIconCaretDown\n        class=\"ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAcA,MAAM,qBAAqB,SAAmB,SAAA,aAE7C;EAID,MAAM,iBAAiB,eACrB,OAAO,QAAQ,QAAA,SAAS,CAAC,KAAK,CAAC,KAAK,cAAc;GAChD,IAAI;GACJ,OAAO,SAAS,WAAW;GAC5B,EAAE,CACL;EAEA,MAAM,kBAAkB,SAA0C;GAChE,WACE,eAAe,MAAM,MAAM,EAAE,SAAS,OAAO,mBAAmB,MAAM;GACxE,MAAM,MAAO,mBAAmB,QAAQ,GAAG,MAAM;GAClD,CAAA;;uBAIC,YAkBgB,MAAA,cAAA,EAAA;gBAjBL,gBAAA;iFAAe,QAAA;IACxB,OAAM;IACL,SAAS,eAAA;IACV,WAAU;IACV,UAAA;;2BAYe,CAXf,YAWe,MAAA,aAAA,EAXf,WAWe;KAVb,OAAM;KACN,eAAY;KACZ,SAAQ;OACAA,KAAAA,OAAM,EAAA;4BAGR,CAFN,mBAEM,OAFN,YAEM,gBADD,gBAAA,OAAiB,SAAK,oBAAA,EAAA,EAAA,EAE3B,YAEkB,MAAA,oBAAA,EAAA;MADhB,OAAM;MACN,QAAO"}

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

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

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

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

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

@@ -8,9 +8,13 @@ import { getCustomCodeSamples } from "../helpers/get-custom-code-samples.js";
 import { getSecrets } from "../helpers/get-secrets.js";
 import { generateCodeSnippet } from "../helpers/generate-code-snippet.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, onBeforeMount, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, watch, withCtx } from "vue";
-import { ScalarButton, ScalarCard, ScalarCardFooter, ScalarCardHeader, ScalarCardSection, ScalarCodeBlock, ScalarCombobox, ScalarVirtualText } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
 import { ScalarIconCaretDown } from "@scalar/icons";
+import { ScalarCombobox } from "@scalar/components/combobox";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { ScalarCard, ScalarCardFooter, ScalarCardHeader, ScalarCardSection } from "@scalar/components/card";
+import { ScalarCodeBlock } from "@scalar/components/code-block";
+import { ScalarVirtualText } from "@scalar/components/virtual-text";
 import { freezeElement } from "@scalar/helpers/dom/freeze-element";
 //#region src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["innerHTML"];

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

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

package/dist/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-clients-by-query.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.ts"],"sourcesContent":["import type { ScalarComboboxFilterFunction } from '@scalar/components'\n\nimport type { CustomClientOptionGroup, CustomOrDefaultClientOption } from '@/v2/blocks/operation-code-sample/types'\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesOption = (option: CustomOrDefaultClientOption, query: string) => {\n  const q = query.toLowerCase()\n  return (\n    option.label.toLowerCase().includes(q) ||\n    option.clientKey.toLowerCase().includes(q) ||\n    option.lang.toLowerCase().includes(q)\n  )\n}\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesGroup = (group: CustomClientOptionGroup, query: string) => {\n  const q = query.toLowerCase()\n  return group.label.toLowerCase().includes(q) || group.key.toLowerCase().includes(q)\n}\n\n/**\n * Filters the clients based on a query\n *\n * When dealing with multiple groups, include all options from a group if the\n * group label itself matches — so searching \"JavaScript\" shows all JS clients.\n */\nexport const filterClientsByQuery = ((\n  query: string,\n  options: CustomOrDefaultClientOption[],\n  groups: CustomClientOptionGroup[],\n): CustomOrDefaultClientOption[] => {\n  if (query === '') {\n    return options\n  }\n\n  const q = query.toLowerCase()\n\n  // Only activate when more than one group is actually visible (has a label and options).\n  const visibleGroupCount = groups ? groups.filter((g) => g.label && g.options.length > 0).length : 0\n\n  if (groups && visibleGroupCount > 1) {\n    const result: CustomOrDefaultClientOption[] = []\n    for (const group of groups) {\n      if (matchesGroup(group, q)) {\n        result.push(...group.options)\n      } else {\n        result.push(...group.options.filter((o) => matchesOption(o, q)))\n      }\n    }\n    return result\n  }\n\n  return options.filter((o) => matchesOption(o, q))\n}) satisfies ScalarComboboxFilterFunction<CustomOrDefaultClientOption, CustomClientOptionGroup>\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,QAAqC,UAAkB;CAC5E,MAAM,IAAI,MAAM,aAAa;AAC7B,QACE,OAAO,MAAM,aAAa,CAAC,SAAS,EAAE,IACtC,OAAO,UAAU,aAAa,CAAC,SAAS,EAAE,IAC1C,OAAO,KAAK,aAAa,CAAC,SAAS,EAAE;;;;;AAOzC,IAAM,gBAAgB,OAAgC,UAAkB;CACtE,MAAM,IAAI,MAAM,aAAa;AAC7B,QAAO,MAAM,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,MAAM,IAAI,aAAa,CAAC,SAAS,EAAE;;;;;;;;AASrF,IAAa,yBACX,OACA,SACA,WACkC;AAClC,KAAI,UAAU,GACZ,QAAO;CAGT,MAAM,IAAI,MAAM,aAAa;CAG7B,MAAM,oBAAoB,SAAS,OAAO,QAAQ,MAAM,EAAE,SAAS,EAAE,QAAQ,SAAS,EAAE,CAAC,SAAS;AAElG,KAAI,UAAU,oBAAoB,GAAG;EACnC,MAAM,SAAwC,EAAE;AAChD,OAAK,MAAM,SAAS,OAClB,KAAI,aAAa,OAAO,EAAE,CACxB,QAAO,KAAK,GAAG,MAAM,QAAQ;MAE7B,QAAO,KAAK,GAAG,MAAM,QAAQ,QAAQ,MAAM,cAAc,GAAG,EAAE,CAAC,CAAC;AAGpE,SAAO;;AAGT,QAAO,QAAQ,QAAQ,MAAM,cAAc,GAAG,EAAE,CAAC"}
+{"version":3,"file":"filter-clients-by-query.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.ts"],"sourcesContent":["import type { ScalarComboboxFilterFunction } from '@scalar/components/combobox'\n\nimport type { CustomClientOptionGroup, CustomOrDefaultClientOption } from '@/v2/blocks/operation-code-sample/types'\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesOption = (option: CustomOrDefaultClientOption, query: string) => {\n  const q = query.toLowerCase()\n  return (\n    option.label.toLowerCase().includes(q) ||\n    option.clientKey.toLowerCase().includes(q) ||\n    option.lang.toLowerCase().includes(q)\n  )\n}\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesGroup = (group: CustomClientOptionGroup, query: string) => {\n  const q = query.toLowerCase()\n  return group.label.toLowerCase().includes(q) || group.key.toLowerCase().includes(q)\n}\n\n/**\n * Filters the clients based on a query\n *\n * When dealing with multiple groups, include all options from a group if the\n * group label itself matches — so searching \"JavaScript\" shows all JS clients.\n */\nexport const filterClientsByQuery = ((\n  query: string,\n  options: CustomOrDefaultClientOption[],\n  groups: CustomClientOptionGroup[],\n): CustomOrDefaultClientOption[] => {\n  if (query === '') {\n    return options\n  }\n\n  const q = query.toLowerCase()\n\n  // Only activate when more than one group is actually visible (has a label and options).\n  const visibleGroupCount = groups ? groups.filter((g) => g.label && g.options.length > 0).length : 0\n\n  if (groups && visibleGroupCount > 1) {\n    const result: CustomOrDefaultClientOption[] = []\n    for (const group of groups) {\n      if (matchesGroup(group, q)) {\n        result.push(...group.options)\n      } else {\n        result.push(...group.options.filter((o) => matchesOption(o, q)))\n      }\n    }\n    return result\n  }\n\n  return options.filter((o) => matchesOption(o, q))\n}) satisfies ScalarComboboxFilterFunction<CustomOrDefaultClientOption, CustomClientOptionGroup>\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,QAAqC,UAAkB;CAC5E,MAAM,IAAI,MAAM,aAAa;AAC7B,QACE,OAAO,MAAM,aAAa,CAAC,SAAS,EAAE,IACtC,OAAO,UAAU,aAAa,CAAC,SAAS,EAAE,IAC1C,OAAO,KAAK,aAAa,CAAC,SAAS,EAAE;;;;;AAOzC,IAAM,gBAAgB,OAAgC,UAAkB;CACtE,MAAM,IAAI,MAAM,aAAa;AAC7B,QAAO,MAAM,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,MAAM,IAAI,aAAa,CAAC,SAAS,EAAE;;;;;;;;AASrF,IAAa,yBACX,OACA,SACA,WACkC;AAClC,KAAI,UAAU,GACZ,QAAO;CAGT,MAAM,IAAI,MAAM,aAAa;CAG7B,MAAM,oBAAoB,SAAS,OAAO,QAAQ,MAAM,EAAE,SAAS,EAAE,QAAQ,SAAS,EAAE,CAAC,SAAS;AAElG,KAAI,UAAU,oBAAoB,GAAG;EACnC,MAAM,SAAwC,EAAE;AAChD,OAAK,MAAM,SAAS,OAClB,KAAI,aAAa,OAAO,EAAE,CACxB,QAAO,KAAK,GAAG,MAAM,QAAQ;MAE7B,QAAO,KAAK,GAAG,MAAM,QAAQ,QAAQ,MAAM,cAAc,GAAG,EAAE,CAAC,CAAC;AAGpE,SAAO;;AAGT,QAAO,QAAQ,QAAQ,MAAM,cAAc,GAAG,EAAE,CAAC"}

package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"process-body.d.ts","sourceRoot":"","sources":["../../../../../../src/v2/blocks/operation-code-sample/helpers/operation-to-har/process-body.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,8DAA8D,CAAA;AAErE,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAE7D,KAAK,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,aAAa,GAAG,SAAS,GAAG,iCAAiC,CAAC,GAAG;IACjH,WAAW,EAAE,iBAAiB,CAAA;CAC/B,CAAA;AAoED;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,yEAKzB,gBAAgB,KAAG,QAAQ,GAAG,SAyFhC,CAAA"}
+{"version":3,"file":"process-body.d.ts","sourceRoot":"","sources":["../../../../../../src/v2/blocks/operation-code-sample/helpers/operation-to-har/process-body.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,8DAA8D,CAAA;AAErE,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAE7D,KAAK,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,aAAa,GAAG,SAAS,GAAG,iCAAiC,CAAC,GAAG;IACjH,WAAW,EAAE,iBAAiB,CAAA;CAC/B,CAAA;AAwOD;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,yEAKzB,gBAAgB,KAAG,QAAQ,GAAG,SAyFhC,CAAA"}