@scalar/api-client 2.38.3 → 2.39.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @scalar/api-client
 
+## 2.39.0
+
+### Minor Changes
+
+- [#8511](https://github.com/scalar/scalar/pull/8511): feat: import postman collection custom ui
+
+### Patch Changes
+
+- [#8564](https://github.com/scalar/scalar/pull/8564): refactor: move context menu to api client
+- [#8480](https://github.com/scalar/scalar/pull/8480): remove the direct `@scalar/openapi-parser` dependency from `@scalar/api-client` and reuse existing shared normalization and ref-resolution helpers
+- [#8526](https://github.com/scalar/scalar/pull/8526): feat: improve filtering of client selector
+- [#8554](https://github.com/scalar/scalar/pull/8554): feat: add telemetry toggle
+- [#8563](https://github.com/scalar/scalar/pull/8563): fix: type declarations don't use the full path for imports
+
+## 2.38.4
+
+### Patch Changes
+
+- [#8529](https://github.com/scalar/scalar/pull/8529): rewrite declaration aliases in built type files
+
 ## 2.38.3
 
 ### Patch Changes

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+export { _plugin_vue_export_helper_default as default };

package/dist/assets/computer.ascii.virtual.js

@@ -0,0 +1,6 @@
+//#region src/assets/computer.ascii?raw
+var computer_default = "                         .,,uod8B8bou,,.\n                ..,uod8BBBBBBBBBBBBBBBBRPFT?l!i:.\n           ||||||||||||||!?TFPRBBBBBBBBBBBBBBB8m=,\n           ||||   '\"\"^^!!||||||||||TFPRBBBVT!:...!\n           ||||            '\"\"^^!!|||||?!:.......!\n           ||||                     ||||.........!\n           ||||                     ||||.........!\n           ||||                     ||||.........!\n           ||||                     ||||.........!\n           ||||                     ||||.........!\n           ||||                     ||||.........!\n           ||||,                    ||||.........`\n           |||||!!-._               ||||.......;.\n           ':!|||||||||!!-._        ||||.....bBBBBWdou,.\n         bBBBBB86foi!|||||||!!-..:|||!..bBBBBBBBBBBBBBBY!\n         ::!?TFPRBBBBBB86foi!||||||||!!bBBBBBBBBBBBBBBY..!\n         :::::::::!?TFPRBBBBBB86ftiaabBBBBBBBBBBBBBBY....!\n         :::;`\"^!:;::::::!?TFPRBBBBBBBBBBBBBBBBBBBY......!\n         ;::::::...''^::::::::::!?TFPRBBBBBBBBBBY........!\n     .ob86foi;::::::::::::::::::::::::!?TFPRBY..........`\n    .b888888888886foi;:::::::::::::::::::::::..........`\n .b888888888888888888886foi;::::::::::::::::..........\n.b888888888888888888888888888886foi;:::::::::......`\n!Tf998888888888888888888888888888888886foi;:::....`\n  '\"^!|Tf9988888888888888888888888888888888!::..`\n       '\"^!|Tf998888888888888888888888889!! '`\n             '\"^!|Tf9988888888888888888!!`            iBBbo.\n                  '\"^!|Tf998888888889!`             WBBBBbo.\n                        '\"^!|Tf9989!`              YBBBP^'\n                              '\"^!`               `\n";
+//#endregion
+export { computer_default as default };
+
+//# sourceMappingURL=computer.ascii.virtual.js.map

package/dist/assets/computer.ascii.virtual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"computer.ascii.virtual.js","names":[],"sources":["../../src/assets/computer.ascii?raw"],"sourcesContent":["export default \"                         .,,uod8B8bou,,.\\n                ..,uod8BBBBBBBBBBBBBBBBRPFT?l!i:.\\n           ||||||||||||||!?TFPRBBBBBBBBBBBBBBB8m=,\\n           ||||   '\\\"\\\"^^!!||||||||||TFPRBBBVT!:...!\\n           ||||            '\\\"\\\"^^!!|||||?!:.......!\\n           ||||                     ||||.........!\\n           ||||                     ||||.........!\\n           ||||                     ||||.........!\\n           ||||                     ||||.........!\\n           ||||                     ||||.........!\\n           ||||                     ||||.........!\\n           ||||,                    ||||.........`\\n           |||||!!-._               ||||.......;.\\n           ':!|||||||||!!-._        ||||.....bBBBBWdou,.\\n         bBBBBB86foi!|||||||!!-..:|||!..bBBBBBBBBBBBBBBY!\\n         ::!?TFPRBBBBBB86foi!||||||||!!bBBBBBBBBBBBBBBY..!\\n         :::::::::!?TFPRBBBBBB86ftiaabBBBBBBBBBBBBBBY....!\\n         :::;`\\\"^!:;::::::!?TFPRBBBBBBBBBBBBBBBBBBBY......!\\n         ;::::::...''^::::::::::!?TFPRBBBBBBBBBBY........!\\n     .ob86foi;::::::::::::::::::::::::!?TFPRBY..........`\\n    .b888888888886foi;:::::::::::::::::::::::..........`\\n .b888888888888888888886foi;::::::::::::::::..........\\n.b888888888888888888888888888886foi;:::::::::......`\\n!Tf998888888888888888888888888888888886foi;:::....`\\n  '\\\"^!|Tf9988888888888888888888888888888888!::..`\\n       '\\\"^!|Tf998888888888888888888888889!! '`\\n             '\\\"^!|Tf9988888888888888888!!`            iBBbo.\\n                  '\\\"^!|Tf998888888889!`             WBBBBbo.\\n                        '\\\"^!|Tf9989!`              YBBBP^'\\n                              '\\\"^!`               `\\n\""],"mappings":";AAAA,IAAA,mBAAe"}

package/dist/assets/keycap.ascii.virtual.js

@@ -0,0 +1,6 @@
+//#region src/assets/keycap.ascii?raw
+var keycap_default = "          .:=+++++=================-\n         .--#*                       :.\n        .-:-**                        -.\n      .:-::-+*                        =:\n     .:-:::-=#                         ::\n    .-:::----**                        ..\n   .-:::::---=#                         ..\n  :-::::::----**                         ..\n.:-::::::::----*=                        ..\n.-::::::::------+-                        ..\n..::::::::-------=                         ..\n .:::::----------++                        ..\n   .:::----------+**+*++*+*++*+++*++++++++++:.\n   ------------+*+=-=======================.\n   .----------+*+=========================:.\n    :--------+*+=-========================.\n    .=------+*+=-========================:.\n     .=----+*+=-------=================+-.\n     .----+*+=----------================.\n     .:=-+*+=----------=-==============-\n      .-+*+=----------------===========.\n       .-+=------------------====-====:.";
+//#endregion
+export { keycap_default as default };
+
+//# sourceMappingURL=keycap.ascii.virtual.js.map

package/dist/assets/keycap.ascii.virtual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keycap.ascii.virtual.js","names":[],"sources":["../../src/assets/keycap.ascii?raw"],"sourcesContent":["export default \"          .:=+++++=================-\\n         .--#*                       :.\\n        .-:-**                        -.\\n      .:-::-+*                        =:\\n     .:-:::-=#                         ::\\n    .-:::----**                        ..\\n   .-:::::---=#                         ..\\n  :-::::::----**                         ..\\n.:-::::::::----*=                        ..\\n.-::::::::------+-                        ..\\n..::::::::-------=                         ..\\n .:::::----------++                        ..\\n   .:::----------+**+*++*+*++*+++*++++++++++:.\\n   ------------+*+=-=======================.\\n   .----------+*+=========================:.\\n    :--------+*+=-========================.\\n    .=------+*+=-========================:.\\n     .=----+*+=-------=================+-.\\n     .----+*+=----------================.\\n     .:=-+*+=----------=-==============-\\n      .-+*+=----------------===========.\\n       .-+=------------------====-====:.\""],"mappings":";AAAA,IAAA,iBAAe"}

package/dist/assets/rabbit.ascii.virtual.js

@@ -0,0 +1,6 @@
+//#region src/assets/rabbit.ascii?raw
+var rabbit_default = "         ,\\\n         \\\\\\,_\n          \\` ,\\\n     __,.-\" =__)\n   .\"        )\n,_/   ,    \\/\\_\n\\_| )_-\\ \\_-`\n   `-----` `--`";
+//#endregion
+export { rabbit_default as default };
+
+//# sourceMappingURL=rabbit.ascii.virtual.js.map

package/dist/assets/rabbit.ascii.virtual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rabbit.ascii.virtual.js","names":[],"sources":["../../src/assets/rabbit.ascii?raw"],"sourcesContent":["export default \"         ,\\\\\\n         \\\\\\\\\\\\,_\\n          \\\\` ,\\\\\\n     __,.-\\\" =__)\\n   .\\\"        )\\n,_/   ,    \\\\/\\\\_\\n\\\\_| )_-\\\\ \\\\_-`\\n   `-----` `--`\""],"mappings":";AAAA,IAAA,iBAAe"}

package/dist/assets/rabbitjump.ascii.virtual.js

@@ -0,0 +1,6 @@
+//#region src/assets/rabbitjump.ascii?raw
+var rabbitjump_default = "         __\n        // \\,_\n          \\` ,\\\n     __,.-\" =__)\n   .\"        )\n,_/   ,    \\/\\ \n\\_| // /  /  /\n   /  /    ";
+//#endregion
+export { rabbitjump_default as default };
+
+//# sourceMappingURL=rabbitjump.ascii.virtual.js.map

package/dist/assets/rabbitjump.ascii.virtual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rabbitjump.ascii.virtual.js","names":[],"sources":["../../src/assets/rabbitjump.ascii?raw"],"sourcesContent":["export default \"         __\\n        // \\\\,_\\n          \\\\` ,\\\\\\n     __,.-\\\" =__)\\n   .\\\"        )\\n,_/   ,    \\\\/\\\\ \\n\\\\_| // /  /  /\\n   /  /    \""],"mappings":";AAAA,IAAA,qBAAe"}

package/dist/components/AddressBar/AddressBar.vue.d.ts

@@ -1,7 +1,7 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
 import type { Collection, Operation, Server } from '@scalar/oas-utils/entities/spec';
 import type { Workspace } from '@scalar/oas-utils/entities/workspace';
-import type { EnvVariable } from '@/store/active-entities';
+import type { EnvVariable } from '../../store/active-entities.js';
 type __VLS_Props = {
     collection: Collection;
     operation: Operation;

package/dist/components/AddressBar/AddressBar.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import AddressBar_vue_vue_type_script_setup_true_lang_default from "./AddressBar.vue.script.js";
+/* empty css                         */
+//#region src/components/AddressBar/AddressBar.vue
+var AddressBar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(AddressBar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-cb2a35da"]]);
+//#endregion
+export { AddressBar_default as default };
+
+//# sourceMappingURL=AddressBar.vue.js.map

package/dist/components/AddressBar/AddressBar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressBar.vue.js","names":[],"sources":["../../../src/components/AddressBar/AddressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport { ScalarIconPlay } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type {\n  Collection,\n  Operation,\n  RequestMethod,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { ref, useId, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport { ServerDropdown } from '@/components/Server'\nimport { useLayout } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport AddressBarHistory from './AddressBarHistory.vue'\n\nconst { collection, operation, server, environment, envVariables, workspace } =\n  defineProps<{\n    collection: Collection\n    operation: Operation\n    server: Server | undefined\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n  }>()\n\ndefineEmits<{\n  (e: 'importCurl', value: string): void\n}>()\n\nconst id = useId()\n\nconst { requestMutators, events } = useWorkspace()\n\nconst { layout } = useLayout()\n\nconst addressBarRef = ref<typeof CodeInput | null>(null)\nconst sendButtonRef = ref<typeof ScalarButton | null>(null)\n\n/** update the instance path parameters on change */\nconst onUrlChange = (newPath: string) => {\n  if (operation.path === newPath) {\n    return\n  }\n  requestMutators.edit(operation.uid, 'path', newPath)\n}\n\n/** watch for changes in the URL */\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (!newURL) {\n      return\n    }\n    onUrlChange(newURL)\n  },\n)\n\n/** The amount remaining to load from 100 -> 0 */\nconst percentage = ref(100)\n/** Keeps track of how much was left when the request finished */\nconst remaining = ref(0)\n/** Whether or not there is a request loading */\nconst isRequesting = ref(false)\n/** The loading interval */\nconst interval = ref<ReturnType<typeof setInterval>>()\n\nfunction load() {\n  if (isRequesting.value) {\n    // Reduce asymptotically up to 85% loaded\n    percentage.value -= (percentage.value - 15) / 60\n  } else {\n    // Always finish loading linearly over 400ms\n    percentage.value -= remaining.value / 20\n  }\n  if (percentage.value <= 0) {\n    clearInterval(interval.value)\n    interval.value = undefined\n    percentage.value = 100\n    isRequesting.value = false\n  }\n}\n\nfunction startLoading() {\n  if (interval.value) {\n    return\n  }\n  isRequesting.value = true\n  interval.value = setInterval(load, 20)\n}\n\nfunction stopLoading() {\n  remaining.value = percentage.value\n  isRequesting.value = false\n}\n\nfunction abortLoading() {\n  clearInterval(interval.value)\n  interval.value = undefined\n  percentage.value = 100\n  isRequesting.value = false\n}\n\nevents.requestStatus.on((status) => {\n  if (status === 'start') {\n    return startLoading()\n  }\n  if (status === 'stop') {\n    return stopLoading()\n  }\n  if (status === 'abort') {\n    return abortLoading()\n  }\n\n  status satisfies undefined\n})\n\n/** Focus the address bar (or the send button if in modal layout) */\nevents.focusAddressBar.on(() => {\n  if (layout === 'modal') {\n    sendButtonRef.value?.$el?.focus()\n  } else {\n    addressBarRef.value?.focus()\n  }\n})\n\nfunction updateRequestMethod(method: RequestMethod) {\n  requestMutators.edit(operation.uid, 'method', method)\n}\n\nfunction getBackgroundColor() {\n  const { method } = operation\n  return REQUEST_METHODS[method].colorVar\n}\n\nfunction handleExecuteRequest() {\n  if (isRequesting.value) {\n    return\n  }\n  isRequesting.value = true\n  events.executeRequest.emit({ requestUid: operation.uid })\n}\n\n/** Handle hotkeys */\nevents.hotKeys.on((event) => {\n  if (event?.focusAddressBar) {\n    addressBarRef.value?.focus()\n  }\n  if (event?.executeRequest) {\n    handleExecuteRequest()\n  }\n})\n\n/**\n * TODO: Should we handle query params here somehow?\n */\nfunction updateRequestPath(url: string) {\n  requestMutators.edit(operation.uid, 'path', url)\n}\n</script>\n<template>\n  <div\n    :id=\"id\"\n    class=\"scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto\">\n    <!-- Address Bar -->\n    <div\n      class=\"address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\">\n        <div\n          class=\"absolute top-0 left-0 z-[1002] h-full w-full\"\n          :style=\"{\n            backgroundColor: `color-mix(in srgb, transparent 90%, ${getBackgroundColor()})`,\n            transform: `translate3d(-${percentage}%,0,0)`,\n          }\" />\n      </div>\n      <div class=\"z-context-plus flex gap-1\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal'\"\n          isSquare\n          :method=\"operation.method\"\n          teleport\n          @change=\"updateRequestMethod\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"collection.servers.length\"\n          :collection=\"collection\"\n          layout=\"client\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :target=\"id\" />\n\n        <div class=\"fade-left\" />\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          aria-label=\"Path\"\n          class=\"min-w-fit outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal'\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          importCurl\n          :modelValue=\"operation.path\"\n          :placeholder=\"\n            server?.uid && collection.servers.includes(server.uid)\n              ? ''\n              : 'Enter a URL or cURL command'\n          \"\n          server\n          :workspace=\"workspace\"\n          @curl=\"$emit('importCurl', $event)\"\n          @submit=\"handleExecuteRequest\"\n          @update:modelValue=\"updateRequestPath\" />\n        <div class=\"fade-right\" />\n      </div>\n\n      <AddressBarHistory\n        :operation=\"operation\"\n        :target=\"id\" />\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        :disabled=\"isRequesting\"\n        @click=\"handleExecuteRequest\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIconPlay\n            class=\"relative shrink-0\"\n            size=\"xs\"\n            weight=\"fill\" />\n          <span class=\"text-xxs hidden lg:flex\">Send</span>\n        </span>\n        <span class=\"sr-only\">\n          Send {{ operation.method }} request to {{ server?.url ?? ''\n          }}{{ operation.path }}\n        </span>\n      </ScalarButton>\n    </div>\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  width: 100%;\n}\n:deep(.cm-line) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  font-size: var(--scalar-small);\n}\n.scroll-timeline-x {\n  scroll-timeline: --scroll-timeline x;\n  /* Firefox supports */\n  scroll-timeline: --scroll-timeline horizontal;\n  -ms-overflow-style: none; /* IE and Edge */\n}\n.scroll-timeline-x-hidden {\n  overflow-x: auto;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller) {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 20px;\n  overflow: auto;\n}\n.scroll-timeline-x-hidden::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller::-webkit-scrollbar) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-address {\n  line-height: 27px;\n  scrollbar-width: none; /* Firefox */\n}\n/* make clickable are to left of send button */\n.scroll-timeline-x-address:after {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 24px;\n  right: 0;\n  cursor: text;\n}\n.scroll-timeline-x-address:empty:before {\n  content: 'Enter URL or cURL request';\n  color: var(--scalar-color-3);\n  pointer-events: none;\n}\n.fade-left,\n.fade-right {\n  content: '';\n  position: sticky;\n  height: 100%;\n  animation-name: fadein;\n  animation-duration: 1ms;\n  animation-direction: reverse;\n  animation-timeline: --scroll-timeline;\n  pointer-events: none;\n  z-index: 1;\n}\n.fade-left {\n  background: linear-gradient(\n    -90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  left: -1px;\n  min-width: 6px;\n  animation-direction: normal;\n}\n.fade-right {\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  right: -1px;\n  min-width: 24px;\n}\n@keyframes fadein {\n  0% {\n    opacity: 0;\n  }\n  1% {\n    opacity: 1;\n  }\n}\n.address-bar-bg-states {\n  --scalar-address-bar-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: var(--scalar-address-bar-bg);\n}\n.address-bar-bg-states:has(.cm-focused) {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n  border-color: var(--scalar-border-color);\n  outline: 1px solid var(--scalar-color-accent);\n}\n.address-bar-bg-states:has(.cm-focused) .fade-left,\n.address-bar-bg-states:has(.cm-focused) .fade-right {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n}\n</style>\n"],"mappings":""}

package/dist/components/AddressBar/AddressBar.vue.script.js

@@ -0,0 +1,204 @@
+import { useLayout } from "../../hooks/useLayout.js";
+import { useWorkspace } from "../../store/store.js";
+import HttpMethod_default from "../HttpMethod/HttpMethod.vue.js";
+import CodeInput_default from "../CodeInput/CodeInput.vue.js";
+import ServerDropdown_default from "../Server/ServerDropdown.vue.js";
+import AddressBarHistory_default from "./AddressBarHistory.vue.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, openBlock, ref, toDisplayString, unref, useId, watch, withCtx } from "vue";
+import { ScalarButton } from "@scalar/components";
+import { REQUEST_METHODS } from "@scalar/helpers/http/http-info";
+import { ScalarIconPlay } from "@scalar/icons";
+//#region src/components/AddressBar/AddressBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = { class: "address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]" };
+var _hoisted_3 = { class: "pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border" };
+var _hoisted_4 = { class: "z-context-plus flex gap-1" };
+var _hoisted_5 = { class: "scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal" };
+var _hoisted_6 = {
+	"aria-hidden": "true",
+	class: "inline-flex items-center gap-1"
+};
+var _hoisted_7 = { class: "sr-only" };
+var AddressBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "AddressBar",
+	props: {
+		collection: {},
+		operation: {},
+		server: {},
+		environment: {},
+		envVariables: {},
+		workspace: {}
+	},
+	emits: ["importCurl"],
+	setup(__props) {
+		const id = useId();
+		const { requestMutators, events } = useWorkspace();
+		const { layout } = useLayout();
+		const addressBarRef = ref(null);
+		const sendButtonRef = ref(null);
+		/** update the instance path parameters on change */
+		const onUrlChange = (newPath) => {
+			if (__props.operation.path === newPath) return;
+			requestMutators.edit(__props.operation.uid, "path", newPath);
+		};
+		/** watch for changes in the URL */
+		watch(() => __props.operation.path, (newURL) => {
+			if (!newURL) return;
+			onUrlChange(newURL);
+		});
+		/** The amount remaining to load from 100 -> 0 */
+		const percentage = ref(100);
+		/** Keeps track of how much was left when the request finished */
+		const remaining = ref(0);
+		/** Whether or not there is a request loading */
+		const isRequesting = ref(false);
+		/** The loading interval */
+		const interval = ref();
+		function load() {
+			if (isRequesting.value) percentage.value -= (percentage.value - 15) / 60;
+			else percentage.value -= remaining.value / 20;
+			if (percentage.value <= 0) {
+				clearInterval(interval.value);
+				interval.value = void 0;
+				percentage.value = 100;
+				isRequesting.value = false;
+			}
+		}
+		function startLoading() {
+			if (interval.value) return;
+			isRequesting.value = true;
+			interval.value = setInterval(load, 20);
+		}
+		function stopLoading() {
+			remaining.value = percentage.value;
+			isRequesting.value = false;
+		}
+		function abortLoading() {
+			clearInterval(interval.value);
+			interval.value = void 0;
+			percentage.value = 100;
+			isRequesting.value = false;
+		}
+		events.requestStatus.on((status) => {
+			if (status === "start") return startLoading();
+			if (status === "stop") return stopLoading();
+			if (status === "abort") return abortLoading();
+		});
+		/** Focus the address bar (or the send button if in modal layout) */
+		events.focusAddressBar.on(() => {
+			if (layout === "modal") sendButtonRef.value?.$el?.focus();
+			else addressBarRef.value?.focus();
+		});
+		function updateRequestMethod(method) {
+			requestMutators.edit(__props.operation.uid, "method", method);
+		}
+		function getBackgroundColor() {
+			const { method } = __props.operation;
+			return REQUEST_METHODS[method].colorVar;
+		}
+		function handleExecuteRequest() {
+			if (isRequesting.value) return;
+			isRequesting.value = true;
+			events.executeRequest.emit({ requestUid: __props.operation.uid });
+		}
+		/** Handle hotkeys */
+		events.hotKeys.on((event) => {
+			if (event?.focusAddressBar) addressBarRef.value?.focus();
+			if (event?.executeRequest) handleExecuteRequest();
+		});
+		/**
+		* TODO: Should we handle query params here somehow?
+		*/
+		function updateRequestPath(url) {
+			requestMutators.edit(__props.operation.uid, "path", url);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(id),
+				class: "scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto"
+			}, [createElementVNode("div", _hoisted_2, [
+				createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+					class: "absolute top-0 left-0 z-[1002] h-full w-full",
+					style: normalizeStyle({
+						backgroundColor: `color-mix(in srgb, transparent 90%, ${getBackgroundColor()})`,
+						transform: `translate3d(-${percentage.value}%,0,0)`
+					})
+				}, null, 4)]),
+				createElementVNode("div", _hoisted_4, [createVNode(HttpMethod_default, {
+					isEditable: unref(layout) !== "modal",
+					isSquare: "",
+					method: __props.operation.method,
+					teleport: "",
+					onChange: updateRequestMethod
+				}, null, 8, ["isEditable", "method"])]),
+				createElementVNode("div", _hoisted_5, [
+					__props.collection.servers.length ? (openBlock(), createBlock(unref(ServerDropdown_default), {
+						key: 0,
+						collection: __props.collection,
+						layout: "client",
+						operation: __props.operation,
+						server: __props.server,
+						target: unref(id)
+					}, null, 8, [
+						"collection",
+						"operation",
+						"server",
+						"target"
+					])) : createCommentVNode("", true),
+					_cache[1] || (_cache[1] = createElementVNode("div", { class: "fade-left" }, null, -1)),
+					createVNode(CodeInput_default, {
+						ref_key: "addressBarRef",
+						ref: addressBarRef,
+						"aria-label": "Path",
+						class: "min-w-fit outline-none",
+						disableCloseBrackets: "",
+						disabled: unref(layout) === "modal",
+						disableEnter: "",
+						disableTabIndent: "",
+						emitOnBlur: false,
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						importCurl: "",
+						modelValue: __props.operation.path,
+						placeholder: __props.server?.uid && __props.collection.servers.includes(__props.server.uid) ? "" : "Enter a URL or cURL command",
+						server: "",
+						workspace: __props.workspace,
+						onCurl: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("importCurl", $event)),
+						onSubmit: handleExecuteRequest,
+						"onUpdate:modelValue": updateRequestPath
+					}, null, 8, [
+						"disabled",
+						"envVariables",
+						"environment",
+						"modelValue",
+						"placeholder",
+						"workspace"
+					]),
+					_cache[2] || (_cache[2] = createElementVNode("div", { class: "fade-right" }, null, -1))
+				]),
+				createVNode(AddressBarHistory_default, {
+					operation: __props.operation,
+					target: unref(id)
+				}, null, 8, ["operation", "target"]),
+				createVNode(unref(ScalarButton), {
+					ref_key: "sendButtonRef",
+					ref: sendButtonRef,
+					class: "z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold",
+					disabled: isRequesting.value,
+					onClick: handleExecuteRequest
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_6, [createVNode(unref(ScalarIconPlay), {
+						class: "relative shrink-0",
+						size: "xs",
+						weight: "fill"
+					}), _cache[3] || (_cache[3] = createElementVNode("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))]), createElementVNode("span", _hoisted_7, " Send " + toDisplayString(__props.operation.method) + " request to " + toDisplayString(__props.server?.url ?? "") + toDisplayString(__props.operation.path), 1)]),
+					_: 1
+				}, 8, ["disabled"])
+			])], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { AddressBar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AddressBar.vue.script.js.map

package/dist/components/AddressBar/AddressBar.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressBar.vue.script.js","names":["$emit"],"sources":["../../../src/components/AddressBar/AddressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport { ScalarIconPlay } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type {\n  Collection,\n  Operation,\n  RequestMethod,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { ref, useId, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport { ServerDropdown } from '@/components/Server'\nimport { useLayout } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport AddressBarHistory from './AddressBarHistory.vue'\n\nconst { collection, operation, server, environment, envVariables, workspace } =\n  defineProps<{\n    collection: Collection\n    operation: Operation\n    server: Server | undefined\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n  }>()\n\ndefineEmits<{\n  (e: 'importCurl', value: string): void\n}>()\n\nconst id = useId()\n\nconst { requestMutators, events } = useWorkspace()\n\nconst { layout } = useLayout()\n\nconst addressBarRef = ref<typeof CodeInput | null>(null)\nconst sendButtonRef = ref<typeof ScalarButton | null>(null)\n\n/** update the instance path parameters on change */\nconst onUrlChange = (newPath: string) => {\n  if (operation.path === newPath) {\n    return\n  }\n  requestMutators.edit(operation.uid, 'path', newPath)\n}\n\n/** watch for changes in the URL */\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (!newURL) {\n      return\n    }\n    onUrlChange(newURL)\n  },\n)\n\n/** The amount remaining to load from 100 -> 0 */\nconst percentage = ref(100)\n/** Keeps track of how much was left when the request finished */\nconst remaining = ref(0)\n/** Whether or not there is a request loading */\nconst isRequesting = ref(false)\n/** The loading interval */\nconst interval = ref<ReturnType<typeof setInterval>>()\n\nfunction load() {\n  if (isRequesting.value) {\n    // Reduce asymptotically up to 85% loaded\n    percentage.value -= (percentage.value - 15) / 60\n  } else {\n    // Always finish loading linearly over 400ms\n    percentage.value -= remaining.value / 20\n  }\n  if (percentage.value <= 0) {\n    clearInterval(interval.value)\n    interval.value = undefined\n    percentage.value = 100\n    isRequesting.value = false\n  }\n}\n\nfunction startLoading() {\n  if (interval.value) {\n    return\n  }\n  isRequesting.value = true\n  interval.value = setInterval(load, 20)\n}\n\nfunction stopLoading() {\n  remaining.value = percentage.value\n  isRequesting.value = false\n}\n\nfunction abortLoading() {\n  clearInterval(interval.value)\n  interval.value = undefined\n  percentage.value = 100\n  isRequesting.value = false\n}\n\nevents.requestStatus.on((status) => {\n  if (status === 'start') {\n    return startLoading()\n  }\n  if (status === 'stop') {\n    return stopLoading()\n  }\n  if (status === 'abort') {\n    return abortLoading()\n  }\n\n  status satisfies undefined\n})\n\n/** Focus the address bar (or the send button if in modal layout) */\nevents.focusAddressBar.on(() => {\n  if (layout === 'modal') {\n    sendButtonRef.value?.$el?.focus()\n  } else {\n    addressBarRef.value?.focus()\n  }\n})\n\nfunction updateRequestMethod(method: RequestMethod) {\n  requestMutators.edit(operation.uid, 'method', method)\n}\n\nfunction getBackgroundColor() {\n  const { method } = operation\n  return REQUEST_METHODS[method].colorVar\n}\n\nfunction handleExecuteRequest() {\n  if (isRequesting.value) {\n    return\n  }\n  isRequesting.value = true\n  events.executeRequest.emit({ requestUid: operation.uid })\n}\n\n/** Handle hotkeys */\nevents.hotKeys.on((event) => {\n  if (event?.focusAddressBar) {\n    addressBarRef.value?.focus()\n  }\n  if (event?.executeRequest) {\n    handleExecuteRequest()\n  }\n})\n\n/**\n * TODO: Should we handle query params here somehow?\n */\nfunction updateRequestPath(url: string) {\n  requestMutators.edit(operation.uid, 'path', url)\n}\n</script>\n<template>\n  <div\n    :id=\"id\"\n    class=\"scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto\">\n    <!-- Address Bar -->\n    <div\n      class=\"address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\">\n        <div\n          class=\"absolute top-0 left-0 z-[1002] h-full w-full\"\n          :style=\"{\n            backgroundColor: `color-mix(in srgb, transparent 90%, ${getBackgroundColor()})`,\n            transform: `translate3d(-${percentage}%,0,0)`,\n          }\" />\n      </div>\n      <div class=\"z-context-plus flex gap-1\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal'\"\n          isSquare\n          :method=\"operation.method\"\n          teleport\n          @change=\"updateRequestMethod\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"collection.servers.length\"\n          :collection=\"collection\"\n          layout=\"client\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :target=\"id\" />\n\n        <div class=\"fade-left\" />\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          aria-label=\"Path\"\n          class=\"min-w-fit outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal'\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          importCurl\n          :modelValue=\"operation.path\"\n          :placeholder=\"\n            server?.uid && collection.servers.includes(server.uid)\n              ? ''\n              : 'Enter a URL or cURL command'\n          \"\n          server\n          :workspace=\"workspace\"\n          @curl=\"$emit('importCurl', $event)\"\n          @submit=\"handleExecuteRequest\"\n          @update:modelValue=\"updateRequestPath\" />\n        <div class=\"fade-right\" />\n      </div>\n\n      <AddressBarHistory\n        :operation=\"operation\"\n        :target=\"id\" />\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        :disabled=\"isRequesting\"\n        @click=\"handleExecuteRequest\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIconPlay\n            class=\"relative shrink-0\"\n            size=\"xs\"\n            weight=\"fill\" />\n          <span class=\"text-xxs hidden lg:flex\">Send</span>\n        </span>\n        <span class=\"sr-only\">\n          Send {{ operation.method }} request to {{ server?.url ?? ''\n          }}{{ operation.path }}\n        </span>\n      </ScalarButton>\n    </div>\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  width: 100%;\n}\n:deep(.cm-line) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  font-size: var(--scalar-small);\n}\n.scroll-timeline-x {\n  scroll-timeline: --scroll-timeline x;\n  /* Firefox supports */\n  scroll-timeline: --scroll-timeline horizontal;\n  -ms-overflow-style: none; /* IE and Edge */\n}\n.scroll-timeline-x-hidden {\n  overflow-x: auto;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller) {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 20px;\n  overflow: auto;\n}\n.scroll-timeline-x-hidden::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller::-webkit-scrollbar) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-address {\n  line-height: 27px;\n  scrollbar-width: none; /* Firefox */\n}\n/* make clickable are to left of send button */\n.scroll-timeline-x-address:after {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 24px;\n  right: 0;\n  cursor: text;\n}\n.scroll-timeline-x-address:empty:before {\n  content: 'Enter URL or cURL request';\n  color: var(--scalar-color-3);\n  pointer-events: none;\n}\n.fade-left,\n.fade-right {\n  content: '';\n  position: sticky;\n  height: 100%;\n  animation-name: fadein;\n  animation-duration: 1ms;\n  animation-direction: reverse;\n  animation-timeline: --scroll-timeline;\n  pointer-events: none;\n  z-index: 1;\n}\n.fade-left {\n  background: linear-gradient(\n    -90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  left: -1px;\n  min-width: 6px;\n  animation-direction: normal;\n}\n.fade-right {\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  right: -1px;\n  min-width: 24px;\n}\n@keyframes fadein {\n  0% {\n    opacity: 0;\n  }\n  1% {\n    opacity: 1;\n  }\n}\n.address-bar-bg-states {\n  --scalar-address-bar-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: var(--scalar-address-bar-bg);\n}\n.address-bar-bg-states:has(.cm-focused) {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n  border-color: var(--scalar-border-color);\n  outline: 1px solid var(--scalar-color-accent);\n}\n.address-bar-bg-states:has(.cm-focused) .fade-left,\n.address-bar-bg-states:has(.cm-focused) .fade-right {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA,MAAM,KAAK,OAAM;EAEjB,MAAM,EAAE,iBAAiB,WAAW,cAAa;EAEjD,MAAM,EAAE,WAAW,WAAU;EAE7B,MAAM,gBAAgB,IAA6B,KAAI;EACvD,MAAM,gBAAgB,IAAgC,KAAI;;EAG1D,MAAM,eAAe,YAAoB;AACvC,OAAI,QAAA,UAAU,SAAS,QACrB;AAEF,mBAAgB,KAAK,QAAA,UAAU,KAAK,QAAQ,QAAO;;;AAIrD,cACQ,QAAA,UAAU,OACf,WAAW;AACV,OAAI,CAAC,OACH;AAEF,eAAY,OAAM;IAEtB;;EAGA,MAAM,aAAa,IAAI,IAAG;;EAE1B,MAAM,YAAY,IAAI,EAAC;;EAEvB,MAAM,eAAe,IAAI,MAAK;;EAE9B,MAAM,WAAW,KAAoC;EAErD,SAAS,OAAO;AACd,OAAI,aAAa,MAEf,YAAW,UAAU,WAAW,QAAQ,MAAM;OAG9C,YAAW,SAAS,UAAU,QAAQ;AAExC,OAAI,WAAW,SAAS,GAAG;AACzB,kBAAc,SAAS,MAAK;AAC5B,aAAS,QAAQ,KAAA;AACjB,eAAW,QAAQ;AACnB,iBAAa,QAAQ;;;EAIzB,SAAS,eAAe;AACtB,OAAI,SAAS,MACX;AAEF,gBAAa,QAAQ;AACrB,YAAS,QAAQ,YAAY,MAAM,GAAE;;EAGvC,SAAS,cAAc;AACrB,aAAU,QAAQ,WAAW;AAC7B,gBAAa,QAAQ;;EAGvB,SAAS,eAAe;AACtB,iBAAc,SAAS,MAAK;AAC5B,YAAS,QAAQ,KAAA;AACjB,cAAW,QAAQ;AACnB,gBAAa,QAAQ;;AAGvB,SAAO,cAAc,IAAI,WAAW;AAClC,OAAI,WAAW,QACb,QAAO,cAAa;AAEtB,OAAI,WAAW,OACb,QAAO,aAAY;AAErB,OAAI,WAAW,QACb,QAAO,cAAa;IAIvB;;AAGD,SAAO,gBAAgB,SAAS;AAC9B,OAAI,WAAW,QACb,eAAc,OAAO,KAAK,OAAM;OAEhC,eAAc,OAAO,OAAM;IAE9B;EAED,SAAS,oBAAoB,QAAuB;AAClD,mBAAgB,KAAK,QAAA,UAAU,KAAK,UAAU,OAAM;;EAGtD,SAAS,qBAAqB;GAC5B,MAAM,EAAE,WAAW,QAAA;AACnB,UAAO,gBAAgB,QAAQ;;EAGjC,SAAS,uBAAuB;AAC9B,OAAI,aAAa,MACf;AAEF,gBAAa,QAAQ;AACrB,UAAO,eAAe,KAAK,EAAE,YAAY,QAAA,UAAU,KAAK,CAAA;;;AAI1D,SAAO,QAAQ,IAAI,UAAU;AAC3B,OAAI,OAAO,gBACT,eAAc,OAAO,OAAM;AAE7B,OAAI,OAAO,eACT,uBAAqB;IAExB;;;;EAKD,SAAS,kBAAkB,KAAa;AACtC,mBAAgB,KAAK,QAAA,UAAU,KAAK,QAAQ,IAAG;;;uBAI/C,mBAsFM,OAAA;IArFH,IAAI,MAAA,GAAE;IACP,OAAM;OAEN,mBAiFM,OAjFN,YAiFM;IA/EJ,mBAQM,OARN,YAQM,CANJ,mBAKO,OAAA;KAJL,OAAM;KACL,OAAK,eAAA;8DAAwE,oBAAkB,CAAA;iCAA8C,WAAA,MAAU;;;IAK5J,mBAOM,OAPN,YAOM,CANJ,YAKkC,oBAAA;KAJ/B,YAAY,MAAA,OAAM,KAAA;KACnB,UAAA;KACC,QAAQ,QAAA,UAAU;KACnB,UAAA;KACC,UAAQ;;IAGb,mBAqCM,OArCN,YAqCM;KAjCI,QAAA,WAAW,QAAQ,UAAA,WAAA,EAD3B,YAMiB,MAAA,uBAAA,EAAA;;MAJd,YAAY,QAAA;MACb,QAAO;MACN,WAAW,QAAA;MACX,QAAQ,QAAA;MACR,QAAQ,MAAA,GAAE;;;;;;;+BAEb,mBAAyB,OAAA,EAApB,OAAM,aAAW,EAAA,MAAA,GAAA;KAEtB,YAsB2C,mBAAA;eArBrC;MAAJ,KAAI;MACJ,cAAW;MACX,OAAM;MACN,sBAAA;MACC,UAAU,MAAA,OAAM,KAAA;MACjB,cAAA;MACA,kBAAA;MACC,YAAY;MACZ,cAAc,QAAA;MACd,aAAa,QAAA;MACd,YAAA;MACC,YAAY,QAAA,UAAU;MACtB,aAA0B,QAAA,QAAQ,OAAO,QAAA,WAAW,QAAQ,SAAS,QAAA,OAAO,IAAG,GAAA,KAAA;MAKhF,QAAA;MACC,WAAW,QAAA;MACX,QAAI,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,cAAe,OAAM;MAChC,UAAQ;MACR,uBAAmB;;;;;;;;;+BACtB,mBAA0B,OAAA,EAArB,OAAM,cAAY,EAAA,MAAA,GAAA;;IAGzB,YAEiB,2BAAA;KADd,WAAW,QAAA;KACX,QAAQ,MAAA,GAAE;;IACb,YAkBe,MAAA,aAAA,EAAA;cAjBT;KAAJ,KAAI;KACJ,OAAM;KACL,UAAU,aAAA;KACV,SAAO;;4BASD,CARP,mBAQO,QARP,YAQO,CALL,YAGkB,MAAA,eAAA,EAAA;MAFhB,OAAM;MACN,MAAK;MACL,QAAO;mCACT,mBAAiD,QAAA,EAA3C,OAAM,2BAAyB,EAAC,QAAI,GAAA,EAAA,CAAA,EAE5C,mBAGO,QAHP,YAAsB,WACf,gBAAG,QAAA,UAAU,OAAM,GAAG,iBAAY,gBAAG,QAAA,QAAQ,OAAG,GAAA,GAAA,gBAChD,QAAA,UAAU,KAAI,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/AddressBar/AddressBarHistory.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import AddressBarHistory_vue_vue_type_script_setup_true_lang_default from "./AddressBarHistory.vue.script.js";
+/* empty css                                */
+//#region src/components/AddressBar/AddressBarHistory.vue
+var AddressBarHistory_default = /* @__PURE__ */ _plugin_vue_export_helper_default(AddressBarHistory_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a93fa60f"]]);
+//#endregion
+export { AddressBarHistory_default as default };
+
+//# sourceMappingURL=AddressBarHistory.vue.js.map

package/dist/components/AddressBar/AddressBarHistory.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressBarHistory.vue.js","names":[],"sources":["../../../src/components/AddressBar/AddressBarHistory.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n} from '@scalar/components'\nimport type { Operation, RequestEvent } from '@scalar/oas-utils/entities/spec'\nimport { httpStatusCodes } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { formatMs } from '@/libs/formatters'\nimport { useWorkspace } from '@/store'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { operation, target } = defineProps<{\n  operation: Operation\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { requestHistory } = useWorkspace()\n\n/** Use a local copy to prevent mutation of the reactive object */\nconst history = computed(() =>\n  requestHistory\n    .filter((entry) => entry.request.requestUid === operation.uid)\n    .slice()\n    .reverse(),\n)\n\nfunction handleHistoryClick(requestHistoryItem: RequestEvent) {\n  console.warn(\n    \"Restoring from the request history doesn't work yet. Request History Item:\",\n    requestHistoryItem,\n  )\n  // TODO: Restore the request data with the history item\n  // TODO: Restore the response data with the history item\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history?.length\"\n        class=\"address-bar-history-button z-context-plus text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">Request History</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center border-t p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"entry.timestamp\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"handleHistoryClick(entry)\">\n            <HttpMethod\n              v-if=\"entry.response.method\"\n              class=\"text-[11px]\"\n              :method=\"entry.response.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.response.path }}\n              </div>\n            </div>\n            <div>{{ formatMs(entry.response.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.response.status).color]\">\n              {{ entry.response.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.response.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop\n          class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n"],"mappings":""}

package/dist/components/AddressBar/AddressBarHistory.vue.script.js

@@ -0,0 +1,85 @@
+import { formatMs } from "../../libs/formatters.js";
+import { useWorkspace } from "../../store/store.js";
+import HttpMethod_default from "../HttpMethod/HttpMethod.vue.js";
+import { getStatusCodeColor } from "./httpStatusCodeColors.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { ScalarFloating, ScalarFloatingBackdrop, ScalarIcon } from "@scalar/components";
+import { httpStatusCodes } from "@scalar/oas-utils/helpers";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+//#region src/components/AddressBar/AddressBarHistory.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0" };
+var _hoisted_2 = { class: "text-c-1 min-w-0 truncate" };
+var AddressBarHistory_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "AddressBarHistory",
+	props: {
+		operation: {},
+		target: {}
+	},
+	setup(__props) {
+		const { requestHistory } = useWorkspace();
+		/** Use a local copy to prevent mutation of the reactive object */
+		const history = computed(() => requestHistory.filter((entry) => entry.request.requestUid === __props.operation.uid).slice().reverse());
+		function handleHistoryClick(requestHistoryItem) {
+			console.warn("Restoring from the request history doesn't work yet. Request History Item:", requestHistoryItem);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Menu), { as: "div" }, {
+				default: withCtx(({ open }) => [createVNode(unref(ScalarFloating), {
+					offset: 0,
+					resize: "",
+					target: __props.target
+				}, createSlots({
+					default: withCtx(() => [history.value?.length ? (openBlock(), createBlock(unref(MenuButton), {
+						key: 0,
+						class: "address-bar-history-button z-context-plus text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5"
+					}, {
+						default: withCtx(() => [createVNode(unref(ScalarIcon), {
+							icon: "History",
+							size: "sm",
+							thickness: "2.25"
+						}), _cache[0] || (_cache[0] = createElementVNode("span", { class: "sr-only" }, "Request History", -1))]),
+						_: 1
+					})) : createCommentVNode("", true)]),
+					_: 2
+				}, [open ? {
+					name: "floating",
+					fn: withCtx(({ width }) => [createVNode(unref(MenuItems), {
+						class: "custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center border-t p-0.75",
+						static: "",
+						style: normalizeStyle({ width })
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(history.value, (entry, index) => {
+							return openBlock(), createBlock(unref(MenuItem), {
+								key: entry.timestamp,
+								as: "button",
+								class: "font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r",
+								value: index,
+								onClick: ($event) => handleHistoryClick(entry)
+							}, {
+								default: withCtx(() => [
+									entry.response.method ? (openBlock(), createBlock(HttpMethod_default, {
+										key: 0,
+										class: "text-[11px]",
+										method: entry.response.method
+									}, null, 8, ["method"])) : createCommentVNode("", true),
+									createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, toDisplayString(entry.response.path), 1)]),
+									createElementVNode("div", null, toDisplayString(unref(formatMs)(entry.response.duration)), 1),
+									createElementVNode("div", { class: normalizeClass([unref(getStatusCodeColor)(entry.response.status).color]) }, toDisplayString(entry.response.status), 3),
+									createElementVNode("div", null, toDisplayString(unref(httpStatusCodes)[entry.response.status]?.name), 1)
+								]),
+								_: 2
+							}, 1032, ["value", "onClick"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["style"]), createVNode(unref(ScalarFloatingBackdrop), { class: "-top-(--scalar-address-bar-height) rounded-lg" })]),
+					key: "0"
+				} : void 0]), 1032, ["target"])]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { AddressBarHistory_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AddressBarHistory.vue.script.js.map

package/dist/components/AddressBar/AddressBarHistory.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressBarHistory.vue.script.js","names":[],"sources":["../../../src/components/AddressBar/AddressBarHistory.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n} from '@scalar/components'\nimport type { Operation, RequestEvent } from '@scalar/oas-utils/entities/spec'\nimport { httpStatusCodes } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { formatMs } from '@/libs/formatters'\nimport { useWorkspace } from '@/store'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { operation, target } = defineProps<{\n  operation: Operation\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { requestHistory } = useWorkspace()\n\n/** Use a local copy to prevent mutation of the reactive object */\nconst history = computed(() =>\n  requestHistory\n    .filter((entry) => entry.request.requestUid === operation.uid)\n    .slice()\n    .reverse(),\n)\n\nfunction handleHistoryClick(requestHistoryItem: RequestEvent) {\n  console.warn(\n    \"Restoring from the request history doesn't work yet. Request History Item:\",\n    requestHistoryItem,\n  )\n  // TODO: Restore the request data with the history item\n  // TODO: Restore the response data with the history item\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history?.length\"\n        class=\"address-bar-history-button z-context-plus text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">Request History</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center border-t p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"entry.timestamp\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"handleHistoryClick(entry)\">\n            <HttpMethod\n              v-if=\"entry.response.method\"\n              class=\"text-[11px]\"\n              :method=\"entry.response.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.response.path }}\n              </div>\n            </div>\n            <div>{{ formatMs(entry.response.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.response.status).color]\">\n              {{ entry.response.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.response.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop\n          class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,mBAAmB,cAAa;;EAGxC,MAAM,UAAU,eACd,eACG,QAAQ,UAAU,MAAM,QAAQ,eAAe,QAAA,UAAU,IAAG,CAC5D,OAAM,CACN,SAAS,CACd;EAEA,SAAS,mBAAmB,oBAAkC;AAC5D,WAAQ,KACN,8EACA,mBACF;;;uBAMA,YAuDO,MAAA,KAAA,EAAA,EArDL,IAAG,OAAK,EAAA;sBAoDS,EArDP,WAAI,CAEd,YAmDiB,MAAA,eAAA,EAAA;KAlDd,QAAQ;KACT,QAAA;KACC,QAAQ,QAAA;;4BAUI,CAPL,QAAA,OAAS,UAAA,WAAA,EADjB,YAQa,MAAA,WAAA,EAAA;;MANX,OAAM;;6BAIe,CAHrB,YAGqB,MAAA,WAAA,EAAA;OAFnB,MAAK;OACL,MAAK;OACL,WAAU;oCACZ,mBAA4C,QAAA,EAAtC,OAAM,WAAS,EAAC,mBAAe,GAAA,EAAA,CAAA;;;;QAI/B,OAAA;WACL;kBA8BW,EA9BC,YAAK,CAElB,YA4BY,MAAA,UAAA,EAAA;MA3BV,OAAM;MACN,QAAA;MACC,OAAK,eAAA,EAAI,OAAK,CAAA;;6BAEoB,EAAA,UAAA,KAAA,EADnC,mBAuBW,UAAA,MAAA,WAtBgB,QAAA,QAAjB,OAAO,UAAK;2BADtB,YAuBW,MAAA,SAAA,EAAA;QArBR,KAAK,MAAM;QACZ,IAAG;QACH,OAAM;QACL,OAAO;QACP,UAAK,WAAE,mBAAmB,MAAK;;+BAII;SAF5B,MAAM,SAAS,UAAA,WAAA,EADvB,YAGoC,oBAAA;;UADlC,OAAM;UACL,QAAQ,MAAM,SAAS;;SAC1B,mBAIM,OAJN,YAIM,CAHJ,mBAEM,OAFN,YAEM,gBADD,MAAM,SAAS,KAAI,EAAA,EAAA,CAAA,CAAA;SAG1B,mBAAkD,OAAA,MAAA,gBAA1C,MAAA,SAAQ,CAAC,MAAM,SAAS,SAAQ,CAAA,EAAA,EAAA;SACxC,mBAEM,OAAA,EAFA,OAAK,eAAA,CAAG,MAAA,mBAAkB,CAAC,MAAM,SAAS,OAAM,CAAE,MAAK,CAAA,EAAA,EAAA,gBACxD,MAAM,SAAS,OAAM,EAAA,EAAA;SAE1B,mBAEM,OAAA,MAAA,gBADD,MAAA,gBAAe,CAAC,MAAM,SAAS,SAAS,KAAI,EAAA,EAAA;;;;;;uBAIrD,YAC0D,MAAA,uBAAA,EAAA,EAAxD,OAAM,iDAA+C,CAAA,CAAA,CAAA"}

package/dist/components/AddressBar/httpStatusCodeColors.js

@@ -0,0 +1,20 @@
+//#region src/components/AddressBar/httpStatusCodeColors.ts
+var STATUS_CODES_COLORS = {
+	100: { color: "text-yellow" },
+	200: { color: "text-green" },
+	202: { color: "text-green" },
+	300: { color: "text-blue" },
+	304: { color: "text-blue" },
+	400: { color: "text-red" },
+	401: { color: "text-orange" },
+	422: { color: "text-yellow" },
+	423: { color: "text-purple" },
+	505: { color: "text-orange" }
+};
+var getStatusCodeColor = (statusCode) => {
+	return STATUS_CODES_COLORS[statusCode] || { color: "text-grey" };
+};
+//#endregion
+export { getStatusCodeColor };
+
+//# sourceMappingURL=httpStatusCodeColors.js.map

package/dist/components/AddressBar/httpStatusCodeColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"httpStatusCodeColors.js","names":[],"sources":["../../../src/components/AddressBar/httpStatusCodeColors.ts"],"sourcesContent":["const STATUS_CODES_COLORS = {\n  100: {\n    color: 'text-yellow',\n  },\n  200: {\n    color: 'text-green',\n  },\n  202: {\n    color: 'text-green',\n  },\n  300: {\n    color: 'text-blue',\n  },\n  304: {\n    color: 'text-blue',\n  },\n  400: {\n    color: 'text-red',\n  },\n  401: {\n    color: 'text-orange',\n  },\n  422: {\n    color: 'text-yellow',\n  },\n  423: {\n    color: 'text-purple',\n  },\n  505: {\n    color: 'text-orange',\n  },\n} as const\n\ntype StatusCode = keyof typeof STATUS_CODES_COLORS\n\nexport const getStatusCodeColor = (statusCode: number) => {\n  const code = statusCode as StatusCode\n  return (\n    STATUS_CODES_COLORS[code] || {\n      /** default color */\n      color: 'text-grey',\n    }\n  )\n}\n"],"mappings":";AAAA,IAAM,sBAAsB;CAC1B,KAAK,EACH,OAAO,eACR;CACD,KAAK,EACH,OAAO,cACR;CACD,KAAK,EACH,OAAO,cACR;CACD,KAAK,EACH,OAAO,aACR;CACD,KAAK,EACH,OAAO,aACR;CACD,KAAK,EACH,OAAO,YACR;CACD,KAAK,EACH,OAAO,eACR;CACD,KAAK,EACH,OAAO,eACR;CACD,KAAK,EACH,OAAO,eACR;CACD,KAAK,EACH,OAAO,eACR;CACF;AAID,IAAa,sBAAsB,eAAuB;AAExD,QACE,oBAFW,eAEkB,EAE3B,OAAO,aACR"}

package/dist/components/AddressBar/index.d.ts

@@ -1,2 +1,2 @@
-export { default as AddressBar } from './AddressBar.vue';
+export { default as AddressBar } from './AddressBar.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/AddressBar/index.js

@@ -1,5 +1,2 @@
-import "../../HttpMethod-rnWEgC3T.js";
-import "../../CodeInput-BN7uw3Bh.js";
-import "../../Server-BS4zjUdO.js";
-import { t as AddressBar_default } from "../../AddressBar-CX8xiYoe.js";
+import AddressBar_default from "./AddressBar.vue.js";
 export { AddressBar_default as AddressBar };

package/dist/components/CodeInput/CodeInput.vue.d.ts

@@ -1,7 +1,7 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
 import { type CodeMirrorLanguage, type Extension } from '@scalar/use-codemirror';
 import { type Ref } from 'vue';
-import type { EnvVariable } from '@/store/active-entities';
+import type { EnvVariable } from '../../store/active-entities.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/components/CodeInput/CodeInput.vue.js

@@ -0,0 +1,10 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import CodeInput_vue_vue_type_script_setup_true_lang_default from "./CodeInput.vue.script.js";
+/* empty css                        */
+/* empty css                          */
+//#region src/components/CodeInput/CodeInput.vue
+var CodeInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CodeInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-103d9d56"]]);
+//#endregion
+export { CodeInput_default as default };
+
+//# sourceMappingURL=CodeInput.vue.js.map

package/dist/components/CodeInput/CodeInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.vue.js","names":[],"sources":["../../../src/components/CodeInput/CodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport { useLayout } from '@/hooks'\nimport type { EnvVariable } from '@/store/active-entities'\nimport EnvironmentVariableDropdown from '@/views/Environment/EnvironmentVariableDropdown.vue'\n\nimport DataTableInputSelect from '../DataTable/DataTableInputSelect.vue'\nimport { backspaceCommand, pillPlugin } from './codeVariableWidget'\n\nconst props = withDefaults(\n  defineProps<{\n    colorPicker?: boolean\n    disabled?: boolean\n    modelValue: string | number\n    error?: boolean\n    emitOnBlur?: boolean\n    extensions?: Extension[]\n    lineNumbers?: boolean\n    lint?: boolean\n    disableTabIndent?: boolean\n    language?: CodeMirrorLanguage\n    handleFieldSubmit?: (e: string) => void\n    handleFieldChange?: (e: string) => void\n    placeholder?: string\n    required?: boolean\n    disableEnter?: boolean\n    disableCloseBrackets?: boolean\n    enum?: string[]\n    examples?: string[]\n    type?: string | string[] | undefined\n    nullable?: boolean\n    withVariables?: boolean\n    importCurl?: boolean\n    default?: string | number\n    environment: Environment\n    envVariables: EnvVariable[]\n    lineWrapping?: boolean\n  }>(),\n  {\n    disableCloseBrackets: false,\n    disableEnter: false,\n    extensions: () => [],\n    disableTabIndent: false,\n    emitOnBlur: true,\n    colorPicker: false,\n    nullable: false,\n    withVariables: true,\n    disabled: false,\n    lineWrapping: false,\n  },\n)\nconst emit = defineEmits<{\n  (e: 'submit', v: string): void\n  (e: 'update:modelValue', v: string): void\n  (e: 'curl', v: string): void\n  (e: 'blur', v: string): void\n}>()\n\nconst attrs = useAttrs() as { id?: string }\nconst uid = (attrs.id as string) || `id-${nanoid()}`\n\nconst isFocused = ref(false)\n\n// Environment variable dropdown init\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { layout } = useLayout()\n\n// ---------------------------------------------------------------------------\n// Event mapping from codemirror to standard input interfaces\n\n/** Change is emitted during typing. This does not trigger validation */\nfunction handleChange(value: string) {\n  // We need to be careful, only if the value is different we trigger an update\n  // on initial load of the component, this gets triggered cause we set the content\n  if (value === props.modelValue) {\n    return null\n  }\n  if (props.importCurl && value.trim().toLowerCase().startsWith('curl')) {\n    emit('curl', value)\n    // Maintain previous input value\n    codeMirror.value?.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: String(props.modelValue),\n      },\n    })\n    // Prevent table value population on current request\n    return null\n  }\n\n  return props.handleFieldChange\n    ? props.handleFieldChange(value)\n    : emit('update:modelValue', value)\n}\n\n/** Submit is emitted on blur and enter. This will trigger validation */\nfunction handleSubmit(value: string) {\n  return props.handleFieldSubmit\n    ? props.handleFieldSubmit(value)\n    : emit('submit', value)\n}\n\n/** Optional submit on blur.  */\nfunction handleBlur(value: string) {\n  isFocused.value = false\n  if (props.emitOnBlur && props.modelValue) {\n    handleSubmit(value)\n  }\n  emit('blur', value)\n}\n\n// ---------------------------------------------------------------------------\n// Codemirror instance handling\n\n// WARNING: Extensions are non-reactive! If props change nothing will happen\n\nconst extensions: Extension[] = [...props.extensions]\nif (props.colorPicker) {\n  extensions.push(colorPickerExtension)\n}\n\n// Create a reactive pill plugin that updates when environment changes\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment: props.environment,\n    envVariables: props.envVariables,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n// Base extensions that will be used for the editor\nconst baseExtensions = computed(() => [\n  ...extensions,\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() =>\n    props.modelValue !== undefined ? String(props.modelValue) : '',\n  ),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => (isFocused.value = true),\n  onBlur: (val) => handleBlur(val),\n  codeMirrorRef,\n  disableTabIndent: toRef(() => props.disableTabIndent),\n  disableEnter: toRef(() => props.disableEnter),\n  disableCloseBrackets: toRef(() => props.disableCloseBrackets),\n  lineNumbers: toRef(() => props.lineNumbers),\n  language: toRef(() => props.language),\n  lint: toRef(() => props.lint),\n  extensions: baseExtensions,\n  placeholder: toRef(() => props.placeholder),\n})\n\ncodeMirror.value?.focus()\n\n// If we specify autofocus then focus codemirror on creation\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n// Computed property to check if type is boolean and nullable\nconst booleanOptions = computed(() =>\n  props.nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\nconst handleKeyDown = (key: string, event: KeyboardEvent) => {\n  if (showDropdown.value) {\n    if (key === 'down') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('down')\n    } else if (key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('up')\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n  } else if (key === 'escape') {\n    if (!props.disableTabIndent) {\n      event.stopPropagation()\n    }\n  } else if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\nconst defaultType = computed(() => {\n  return Array.isArray(props.type)\n    ? // Find the first type, that's not 'null'\n      (props.type.find((type) => type !== 'null') ?? 'string')\n    : // If it's not an array, just return the type\n      props.type\n})\n\nconst displayVariablesDropdown = computed(\n  () =>\n    showDropdown.value &&\n    props.withVariables &&\n    layout !== 'modal' &&\n    props.environment,\n)\n\ndefineExpose({\n  /** Expose focus method */\n  focus: () => {\n    codeMirror.value?.focus()\n  },\n  // Expose these methods for testing\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue: props.modelValue,\n})\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n}\n</script>\n<template>\n  <template v-if=\"disabled\">\n    <div\n      class=\"text-c-2 flex cursor-default items-center justify-center\"\n      :class=\"layout === 'modal' ? 'font-code pr-2 pl-1 text-base' : 'px-2'\"\n      data-testid=\"code-input-disabled\">\n      <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n    </div>\n  </template>\n  <template v-else-if=\"props.enum && props.enum.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :type=\"defaultType\"\n      :value=\"props.enum\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"type === 'boolean' || type?.includes('boolean')\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :value=\"booleanOptions\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"props.examples && props.examples.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"props.modelValue\"\n      :value=\"props.examples\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else>\n    <div\n      :id=\"uid\"\n      v-bind=\"$attrs\"\n      ref=\"codeMirrorRef\"\n      class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n      :class=\"{\n        'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n          lineWrapping,\n        'flow-code-input--error': error,\n      }\"\n      @keydown.down.stop=\"handleKeyDown('down', $event)\"\n      @keydown.enter=\"handleKeyDown('enter', $event)\"\n      @keydown.escape=\"handleKeyDown('escape', $event)\"\n      @keydown.up.stop=\"handleKeyDown('up', $event)\">\n      <div\n        v-if=\"!disableTabIndent\"\n        class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n        role=\"alert\">\n        Press\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n      </div>\n    </div>\n  </template>\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :envVariables=\"envVariables\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n Deep styling for customizing Codemirror\n*/\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  --tw-bg-base: var(--scalar-color-1);\n  color: var(--tw-bg-base);\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 94%) !important;\n}\n.cm-pill.bg-grey {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":""}