@scalar/api-client 2.2.57 → 2.2.60

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @scalar/api-client
 
+## 2.2.60
+
+### Patch Changes
+
+- df4dee8: fix(api-client): improve api client request and response area a11y
+- 23bac9d: fix: use operation security scheme if available in request
+- Updated dependencies [df4dee8]
+- Updated dependencies [8c5b0c6]
+- Updated dependencies [fb22645]
+  - @scalar/components@0.13.32
+  - @scalar/oas-utils@0.2.114
+  - @scalar/use-codemirror@0.11.77
+  - @scalar/import@0.2.34
+  - @scalar/postman-to-openapi@0.1.37
+
+## 2.2.59
+
+### Patch Changes
+
+- 168e609: fix: body showing none instead of json
+- Updated dependencies [3f99afc]
+- Updated dependencies [bab7990]
+- Updated dependencies [2c621d4]
+- Updated dependencies [a31973c]
+  - @scalar/components@0.13.31
+  - @scalar/types@0.0.39
+  - @scalar/snippetz@0.2.16
+  - @scalar/oas-utils@0.2.113
+  - @scalar/use-codemirror@0.11.76
+  - @scalar/openapi-parser@0.10.9
+  - @scalar/themes@0.9.74
+  - @scalar/import@0.2.33
+  - @scalar/postman-to-openapi@0.1.36
+  - @scalar/use-hooks@0.1.28
+
+## 2.2.58
+
+### Patch Changes
+
+- 4682a6f: fix: add keyboard instructions for code inputs
+- Updated dependencies [7f1a40e]
+  - @scalar/types@0.0.38
+  - @scalar/oas-utils@0.2.112
+  - @scalar/openapi-parser@0.10.9
+  - @scalar/themes@0.9.73
+  - @scalar/import@0.2.32
+  - @scalar/postman-to-openapi@0.1.35
+  - @scalar/components@0.13.30
+  - @scalar/use-codemirror@0.11.75
+  - @scalar/use-hooks@0.1.27
+
 ## 2.2.57
 
 ### Patch Changes

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

@@ -1 +1 @@
-{"version":3,"file":"AddressBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBar.vue"],"names":[],"mappings":"AAqVA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACzE,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EAET,MAAM,EACP,MAAM,iCAAiC,CAAA;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAA;AAQrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAO1D,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,UAAU,CAAA;IACtB,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,WAAW,EAAE,WAAW,CAAA;IACxB,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,SAAS,EAAE,SAAS,CAAA;CACrB,CAAC;;;;;;AAgaJ,wBAQG"}
+{"version":3,"file":"AddressBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBar.vue"],"names":[],"mappings":"AAiWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACzE,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EAET,MAAM,EACP,MAAM,iCAAiC,CAAA;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAA;AAQrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAO1D,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,UAAU,CAAA;IACtB,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,WAAW,EAAE,WAAW,CAAA;IACxB,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,SAAS,EAAE,SAAS,CAAA;CACrB,CAAC;;;;;;AAibJ,wBAQG"}

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

@@ -1,7 +1,7 @@
 import o from "./AddressBar.vue2.js";
 /* empty css                */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const s = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c8bfbadd"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-5e5a3c5f"]]);
 export {
-  s as default
+  e as default
 };

package/dist/components/AddressBar/AddressBar.vue2.js

@@ -1,16 +1,16 @@
-import { defineComponent as S, useId as V, ref as i, watch as z, openBlock as b, createElementBlock as I, unref as r, createElementVNode as l, normalizeClass as L, normalizeStyle as U, createVNode as d, createBlock as M, createCommentVNode as A, withCtx as H } from "vue";
-import { ScalarButton as N, ScalarIcon as T } from "@scalar/components";
-import { REQUEST_METHODS as $ } from "@scalar/oas-utils/helpers";
-import O from "../CodeInput/CodeInput.vue.js";
-import P from "../HttpMethod/HttpMethod.vue.js";
-import D from "./AddressBarHistory.vue.js";
-import K from "../Server/ServerDropdown.vue.js";
-import { useWorkspace as Q } from "../../store/store.js";
-import { useLayout as W } from "../../hooks/useLayout.js";
-const j = ["id"], F = { class: "m-auto flex flex-row items-center" }, G = { class: "address-bar-bg-states text-xxs p-0.75 group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg lg:order-none lg:min-w-[580px] lg:max-w-[580px] xl:min-w-[720px] xl:max-w-[720px]" }, J = { class: "pointer-events-none absolute left-0 top-0 block h-full w-full overflow-hidden rounded-lg border" }, X = { class: "z-context-plus flex gap-1" }, Y = { class: "scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal" }, Z = {
+import { defineComponent as z, useId as I, ref as i, watch as A, openBlock as k, createElementBlock as L, unref as r, createElementVNode as l, normalizeClass as U, normalizeStyle as M, createVNode as u, createBlock as $, createCommentVNode as H, withCtx as N, toDisplayString as x } from "vue";
+import { ScalarButton as T, ScalarIcon as D } from "@scalar/components";
+import { REQUEST_METHODS as O } from "@scalar/oas-utils/helpers";
+import P from "../CodeInput/CodeInput.vue.js";
+import K from "../HttpMethod/HttpMethod.vue.js";
+import Q from "./AddressBarHistory.vue.js";
+import W from "../Server/ServerDropdown.vue.js";
+import { useWorkspace as j } from "../../store/store.js";
+import { useLayout as F } from "../../hooks/useLayout.js";
+const G = ["id"], J = { class: "m-auto flex flex-row items-center" }, X = { class: "address-bar-bg-states text-xxs p-0.75 group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg lg:order-none lg:min-w-[580px] lg:max-w-[580px] xl:min-w-[720px] xl:max-w-[720px]" }, Y = { class: "pointer-events-none absolute left-0 top-0 block h-full w-full overflow-hidden rounded-lg border" }, Z = { class: "z-context-plus flex gap-1" }, _ = { class: "scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal" }, ee = {
   "aria-hidden": "true",
   class: "inline-flex items-center gap-1"
-}, ie = /* @__PURE__ */ S({
+}, oe = { class: "sr-only" }, ce = /* @__PURE__ */ z({
   __name: "AddressBar",
   props: {
     collection: {},
@@ -22,88 +22,91 @@ const j = ["id"], F = { class: "m-auto flex flex-row items-center" }, G = { clas
   },
   emits: ["importCurl"],
   setup(n) {
-    const u = V(), { requestMutators: c, events: f } = Q(), { layout: p } = W(), v = i(null), x = (e) => {
-      n.operation.path !== e && c.edit(n.operation.uid, "path", e);
+    const p = I(), { requestMutators: v, events: c } = j(), { layout: h } = F(), f = i(null), g = i(null), B = (e) => {
+      n.operation.path !== e && v.edit(n.operation.uid, "path", e);
     };
-    z(
+    A(
       () => n.operation.path,
       (e) => {
-        e && x(e);
+        e && B(e);
       }
     );
-    const o = i(100), h = i(0), a = i(!1), s = i();
-    function w() {
-      a.value ? o.value -= (o.value - 15) / 60 : o.value -= h.value / 20, o.value <= 0 && (clearInterval(s.value), s.value = void 0, o.value = 100, a.value = !1);
-    }
-    function k() {
-      s.value || (a.value = !0, s.value = setInterval(w, 20));
-    }
+    const t = i(100), w = i(0), a = i(!1), s = i();
     function C() {
-      h.value = o.value, a.value = !1;
+      a.value ? t.value -= (t.value - 15) / 60 : t.value -= w.value / 20, t.value <= 0 && (clearInterval(s.value), s.value = void 0, t.value = 100, a.value = !1);
     }
     function y() {
-      clearInterval(s.value), s.value = void 0, o.value = 100, a.value = !1;
+      s.value || (a.value = !0, s.value = setInterval(C, 20));
     }
-    f.requestStatus.on((e) => {
-      e === "start" && k(), e === "stop" && C(), e === "abort" && y();
-    });
-    function B(e) {
-      c.edit(n.operation.uid, "method", e);
+    function R() {
+      w.value = t.value, a.value = !1;
     }
     function q() {
+      clearInterval(s.value), s.value = void 0, t.value = 100, a.value = !1;
+    }
+    c.requestStatus.on((e) => {
+      e === "start" && y(), e === "stop" && R(), e === "abort" && q();
+    }), c.focusAddressBar.on(() => {
+      var e, o, d;
+      console.log("focusAddressBar", g.value, f.value), h === "modal" ? (o = (e = g.value) == null ? void 0 : e.$el) == null || o.focus() : (d = f.value) == null || d.focus();
+    });
+    function S(e) {
+      v.edit(n.operation.uid, "method", e);
+    }
+    function E() {
       const { method: e } = n.operation;
-      return $[e].backgroundColor;
+      return O[e].backgroundColor;
     }
-    function m() {
-      a.value || (a.value = !0, f.executeRequest.emit({ requestUid: n.operation.uid }));
+    function b() {
+      a.value || (a.value = !0, c.executeRequest.emit({ requestUid: n.operation.uid }));
     }
-    f.hotKeys.on((e) => {
-      var t;
-      e != null && e.focusAddressBar && ((t = v.value) == null || t.focus()), e != null && e.executeRequest && m();
+    c.hotKeys.on((e) => {
+      var o;
+      e != null && e.focusAddressBar && ((o = f.value) == null || o.focus()), e != null && e.executeRequest && b();
     });
-    function R(e) {
-      c.edit(n.operation.uid, "path", e);
+    function V(e) {
+      v.edit(n.operation.uid, "path", e);
     }
-    return (e, t) => {
-      var g;
-      return b(), I("div", {
-        id: r(u),
+    return (e, o) => {
+      var d;
+      return k(), L("div", {
+        id: r(p),
         class: "scalar-address-bar order-last h-[--scalar-address-bar-height] w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto"
       }, [
-        l("div", F, [
-          l("div", G, [
-            l("div", J, [
+        l("div", J, [
+          l("div", X, [
+            l("div", Y, [
               l("div", {
-                class: L(["bg-mix-transparent bg-mix-amount-90 absolute left-0 top-0 z-[1002] h-full w-full", q()]),
-                style: U({ transform: `translate3d(-${o.value}%,0,0)` })
+                class: U(["bg-mix-transparent bg-mix-amount-90 absolute left-0 top-0 z-[1002] h-full w-full", E()]),
+                style: M({ transform: `translate3d(-${t.value}%,0,0)` })
               }, null, 6)
             ]),
-            l("div", X, [
-              d(P, {
-                isEditable: r(p) !== "modal",
+            l("div", Z, [
+              u(K, {
+                isEditable: r(h) !== "modal",
                 isSquare: "",
                 method: e.operation.method,
                 teleport: "",
-                onChange: B
+                onChange: S
               }, null, 8, ["isEditable", "method"])
             ]),
-            l("div", Y, [
-              e.collection.servers.length ? (b(), M(r(K), {
+            l("div", _, [
+              e.collection.servers.length ? (k(), $(r(W), {
                 key: 0,
                 collection: e.collection,
                 layout: "client",
                 operation: e.operation,
                 server: e.server,
-                target: r(u)
-              }, null, 8, ["collection", "operation", "server", "target"])) : A("", !0),
-              t[1] || (t[1] = l("div", { class: "fade-left" }, null, -1)),
-              d(O, {
+                target: r(p)
+              }, null, 8, ["collection", "operation", "server", "target"])) : H("", !0),
+              o[1] || (o[1] = l("div", { class: "fade-left" }, null, -1)),
+              u(P, {
                 ref_key: "addressBarRef",
-                ref: v,
+                ref: f,
                 "aria-label": "Path",
                 class: "min-w-fit outline-none",
                 disableCloseBrackets: "",
-                disabled: r(p) === "modal",
+                disabled: r(h) === "modal",
                 disableEnter: "",
                 disableTabIndent: "",
                 emitOnBlur: !1,
@@ -111,43 +114,48 @@ const j = ["id"], F = { class: "m-auto flex flex-row items-center" }, G = { clas
                 environment: e.environment,
                 importCurl: "",
                 modelValue: e.operation.path,
-                placeholder: (g = e.server) != null && g.uid && e.collection.servers.includes(e.server.uid) ? "" : "Enter a URL or cURL command",
+                placeholder: (d = e.server) != null && d.uid && e.collection.servers.includes(e.server.uid) ? "" : "Enter a URL or cURL command",
                 server: "",
                 workspace: e.workspace,
-                onCurl: t[0] || (t[0] = (E) => e.$emit("importCurl", E)),
-                onSubmit: m,
-                "onUpdate:modelValue": R
+                onCurl: o[0] || (o[0] = (m) => e.$emit("importCurl", m)),
+                onSubmit: b,
+                "onUpdate:modelValue": V
               }, null, 8, ["disabled", "envVariables", "environment", "modelValue", "placeholder", "workspace"]),
-              t[2] || (t[2] = l("div", { class: "fade-right" }, null, -1))
+              o[2] || (o[2] = l("div", { class: "fade-right" }, null, -1))
             ]),
-            d(D, {
+            u(Q, {
               operation: e.operation,
-              target: r(u)
+              target: r(p)
             }, null, 8, ["operation", "target"]),
-            d(r(N), {
+            u(r(T), {
+              ref_key: "sendButtonRef",
+              ref: g,
               class: "z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pl-2 pr-2.5 font-bold",
               disabled: a.value,
-              onClick: m
+              onClick: b
             }, {
-              default: H(() => [
-                l("span", Z, [
-                  d(r(T), {
-                    class: "relative shrink-0 fill-current",
-                    icon: "Play",
-                    size: "xs"
-                  }),
-                  t[3] || (t[3] = l("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))
-                ]),
-                t[4] || (t[4] = l("span", { class: "sr-only" }, " Send Request ", -1))
-              ]),
+              default: N(() => {
+                var m;
+                return [
+                  l("span", ee, [
+                    u(r(D), {
+                      class: "relative shrink-0 fill-current",
+                      icon: "Play",
+                      size: "xs"
+                    }),
+                    o[3] || (o[3] = l("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))
+                  ]),
+                  l("span", oe, " Send " + x(e.operation.method) + " request to " + x(((m = e.server) == null ? void 0 : m.url) ?? "") + x(e.operation.path), 1)
+                ];
+              }),
               _: 1
             }, 8, ["disabled"])
           ])
         ])
-      ], 8, j);
+      ], 8, G);
     };
   }
 });
 export {
-  ie as default
+  ce as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.vue"],"names":[],"mappings":"AAkfA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAEzE,OAAO,EAIL,KAAK,kBAAkB,EAExB,MAAM,wBAAwB,CAAA;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;;kBAYxC,OAAO;eACV,OAAO;gBACN,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;eACJ,MAAM,EAAE;WACZ,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;eACzB,OAAO;oBACF,OAAO;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;iBACZ,WAAW;kBACV,WAAW,EAAE;eAChB,SAAS;;;;;;;;;kBAzBN,OAAO;eACV,OAAO;gBACN,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;eACJ,MAAM,EAAE;WACZ,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;eACzB,OAAO;oBACF,OAAO;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;iBACZ,WAAW;kBACV,WAAW,EAAE;eAChB,SAAS;;;;;;;cAPT,OAAO;cAjBP,OAAO;iBADJ,OAAO;gBAIR,OAAO;sBAGD,OAAO;kBAMX,OAAO;0BACC,OAAO;mBAKd,OAAO;gBAEV,OAAO;;qBA4dM,GAAG;kBACN,GAAG;;AArf9B,wBAgjBC;AAeD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CodeInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.vue"],"names":[],"mappings":"AA6fA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAEzE,OAAO,EAIL,KAAK,kBAAkB,EAExB,MAAM,wBAAwB,CAAA;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;;kBAYxC,OAAO;eACV,OAAO;gBACN,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;eACJ,MAAM,EAAE;WACZ,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;eACzB,OAAO;oBACF,OAAO;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;iBACZ,WAAW;kBACV,WAAW,EAAE;eAChB,SAAS;;;;;;;;;kBAzBN,OAAO;eACV,OAAO;gBACN,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;eACJ,MAAM,EAAE;WACZ,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;eACzB,OAAO;oBACF,OAAO;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;iBACZ,WAAW;kBACV,WAAW,EAAE;eAChB,SAAS;;;;;;;cAPT,OAAO;cAjBP,OAAO;iBADJ,OAAO;gBAIR,OAAO;sBAGD,OAAO;kBAMX,OAAO;0BACC,OAAO;mBAKd,OAAO;gBAEV,OAAO;;qBA4fM,GAAG;kBACN,GAAG;;AArhB9B,wBAglBC;AAeD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -2,7 +2,7 @@ import o from "./CodeInput.vue2.js";
 /* empty css               */
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-18f34311"]]);
+const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-082b146a"]]);
 export {
   _ as default
 };

package/dist/components/CodeInput/CodeInput.vue2.js

@@ -1,26 +1,30 @@
-import { defineComponent as j, useAttrs as H, ref as d, toRef as r, watch as J, computed as $, openBlock as n, createElementBlock as i, Fragment as Q, normalizeClass as W, unref as u, createElementVNode as w, toDisplayString as G, createBlock as f, mergeProps as X, withKeys as h, withModifiers as q, createVNode as Y, createCommentVNode as c, renderSlot as R } from "vue";
-import { ScalarIcon as Z } from "@scalar/components";
-import { prettyPrintJson as _ } from "@scalar/oas-utils/helpers";
-import { useCodeMirror as ee, useDropdown as oe, colorPicker as le } from "@scalar/use-codemirror";
-import { useClipboard as te } from "@scalar/use-hooks/useClipboard";
-import { nanoid as ne } from "nanoid";
-import ae from "../../views/Environment/EnvironmentVariableDropdown.vue.js";
-import V from "../DataTable/DataTableInputSelect.vue.js";
-import { pillPlugin as re, backspaceCommand as se } from "./codeVariableWidget.js";
-import { useLayout as ue } from "../../hooks/useLayout.js";
-const de = { class: "whitespace-nowrap" }, ie = ["id"], pe = {
+import { defineComponent as H, useAttrs as J, ref as i, toRef as r, watch as Q, computed as $, openBlock as n, createElementBlock as u, Fragment as W, normalizeClass as G, unref as d, createElementVNode as m, toDisplayString as X, createBlock as y, mergeProps as Y, withKeys as g, withModifiers as q, createVNode as Z, createCommentVNode as f, createTextVNode as V, renderSlot as E } from "vue";
+import { ScalarIcon as _ } from "@scalar/components";
+import { prettyPrintJson as ee } from "@scalar/oas-utils/helpers";
+import { useCodeMirror as oe, useDropdown as te, colorPicker as le } from "@scalar/use-codemirror";
+import { useClipboard as ne } from "@scalar/use-hooks/useClipboard";
+import { nanoid as ae } from "nanoid";
+import re from "../../views/Environment/EnvironmentVariableDropdown.vue.js";
+import k from "../DataTable/DataTableInputSelect.vue.js";
+import { pillPlugin as se, backspaceCommand as ue } from "./codeVariableWidget.js";
+import { useLayout as de } from "../../hooks/useLayout.js";
+const ie = { class: "whitespace-nowrap" }, pe = ["id"], me = {
   key: 0,
   class: "scalar-code-copy z-context"
-}, me = {
+}, fe = {
+  key: 1,
+  class: "z-context text-c-2 absolute bottom-1 right-1.5 hidden font-sans group-has-[:focus-visible]/input:block",
+  role: "alert"
+}, ce = {
   key: 5,
   class: "centered-y text-orange absolute right-7 text-xs"
-}, fe = {
+}, be = {
   key: 6,
   class: "required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 pr-2 pt-px opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.error]:bg-transparent group-[.alert]:shadow-none group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0"
-}, ce = {
+}, ye = {
   inheritAttrs: !1
-}, Se = /* @__PURE__ */ j({
-  ...ce,
+}, Pe = /* @__PURE__ */ H({
+  ...ye,
   __name: "CodeInput",
   props: {
     colorPicker: { type: Boolean, default: !1 },
@@ -51,12 +55,12 @@ const de = { class: "whitespace-nowrap" }, ie = ["id"], pe = {
     workspace: {}
   },
   emits: ["submit", "update:modelValue", "curl", "blur"],
-  setup(A, { expose: E, emit: M }) {
-    var P;
-    const o = A, s = M, C = H(), N = C.id || `id-${ne()}`, B = d(!1), y = d(!1), k = d(""), S = d({ left: 0, top: 0 }), m = d(null), { layout: b } = ue(), { copyToClipboard: O } = te();
-    function T(e) {
-      var l;
-      return e === o.modelValue ? null : o.importCurl && e.trim().toLowerCase().startsWith("curl") ? (s("curl", e), (l = a.value) == null || l.dispatch({
+  setup(I, { expose: N, emit: R }) {
+    var T;
+    const o = I, s = R, C = J(), A = C.id || `id-${ae()}`, B = i(!1), v = i(!1), x = i(""), S = i({ left: 0, top: 0 }), c = i(null), { layout: w } = de(), { copyToClipboard: M } = ne();
+    function O(e) {
+      var t;
+      return e === o.modelValue ? null : o.importCurl && e.trim().toLowerCase().startsWith("curl") ? (s("curl", e), (t = a.value) == null || t.dispatch({
         changes: {
           from: 0,
           to: a.value.state.doc.length,
@@ -64,31 +68,31 @@ const de = { class: "whitespace-nowrap" }, ie = ["id"], pe = {
         }
       }), null) : o.handleFieldChange ? o.handleFieldChange(e) : s("update:modelValue", e);
     }
-    function x(e) {
+    function P(e) {
       return o.handleFieldSubmit ? o.handleFieldSubmit(e) : s("submit", e);
     }
-    function I(e) {
-      B.value = !1, o.emitOnBlur && o.modelValue && x(e), s("blur", e);
+    function K(e) {
+      B.value = !1, o.emitOnBlur && o.modelValue && P(e), s("blur", e);
     }
-    const v = [];
-    o.colorPicker && v.push(le), v.push(
-      re({
+    const h = [];
+    o.colorPicker && h.push(le), h.push(
+      se({
         environment: o.environment,
         envVariables: o.envVariables,
         workspace: o.workspace,
-        isReadOnly: b === "modal"
+        isReadOnly: w === "modal"
       }),
-      se
+      ue
     );
-    const D = d(null), { codeMirror: a } = ee({
+    const D = i(null), { codeMirror: a } = oe({
       content: r(
         () => o.modelValue !== void 0 ? String(o.modelValue) : ""
       ),
       onChange: (e) => {
-        T(e), z();
+        O(e), L();
       },
       onFocus: () => B.value = !0,
-      onBlur: (e) => I(e),
+      onBlur: (e) => K(e),
       codeMirrorRef: D,
       disableTabIndent: r(() => o.disableTabIndent),
       disableEnter: r(() => o.disableEnter),
@@ -96,112 +100,120 @@ const de = { class: "whitespace-nowrap" }, ie = ["id"], pe = {
       lineNumbers: r(() => o.lineNumbers),
       language: r(() => o.language),
       lint: r(() => o.lint),
-      extensions: v,
+      extensions: h,
       placeholder: r(() => o.placeholder)
     });
-    (P = a.value) == null || P.focus(), J(a, () => {
+    (T = a.value) == null || T.focus(), Q(a, () => {
       a.value && Object.prototype.hasOwnProperty.call(C, "autofocus") && a.value.focus();
     });
-    const { handleDropdownSelect: K, updateDropdownVisibility: z } = oe({
+    const { handleDropdownSelect: z, updateDropdownVisibility: L } = te({
       codeMirror: a,
-      query: k,
-      showDropdown: y,
+      query: x,
+      showDropdown: v,
       dropdownPosition: S
-    }), L = $(() => {
+    }), U = $(() => {
       var e;
       return o.type === "boolean" || (e = o.type) != null && e.includes("boolean") || o.nullable ? ["true", "false", "null"] : ["true", "false"];
     });
-    E({
+    N({
       focus: () => {
         var e;
         (e = a.value) == null || e.focus();
       }
     });
-    const g = (e, l) => {
-      var p, t, F;
-      y.value ? e === "down" ? (l.preventDefault(), (p = m.value) == null || p.handleArrowKey("down")) : e === "up" ? (l.preventDefault(), (t = m.value) == null || t.handleArrowKey("up")) : e === "enter" && (l.preventDefault(), (F = m.value) == null || F.handleSelect()) : e === "enter" && l.target instanceof HTMLDivElement && x(l.target.textContent ?? "");
-    }, U = $(() => Array.isArray(o.type) ? (
+    const b = (e, t) => {
+      var p, l, F;
+      v.value ? e === "down" ? (t.preventDefault(), (p = c.value) == null || p.handleArrowKey("down")) : e === "up" ? (t.preventDefault(), (l = c.value) == null || l.handleArrowKey("up")) : e === "enter" && (t.preventDefault(), (F = c.value) == null || F.handleSelect()) : e === "escape" ? o.disableTabIndent || t.stopPropagation() : e === "enter" && t.target instanceof HTMLDivElement && P(t.target.textContent ?? "");
+    }, j = $(() => Array.isArray(o.type) ? (
       // Find the first type, that’s not 'null'
       o.type.find((e) => e !== "null") ?? "string"
     ) : (
       // If it’s not an array, just return the type
       o.type
     ));
-    return (e, l) => {
+    return (e, t) => {
       var p;
-      return n(), i(Q, null, [
-        e.disabled ? (n(), i("div", {
+      return n(), u(W, null, [
+        e.disabled ? (n(), u("div", {
           key: 0,
-          class: W(["text-c-2 flex cursor-default items-center justify-center", u(b) === "modal" ? "font-code pl-1 pr-2 text-sm" : "px-2"])
+          class: G(["text-c-2 flex cursor-default items-center justify-center", d(w) === "modal" ? "font-code pl-1 pr-2 text-sm" : "px-2"])
         }, [
-          w("span", de, G(e.modelValue), 1)
-        ], 2)) : o.enum && o.enum.length ? (n(), f(V, {
+          m("span", ie, X(e.modelValue), 1)
+        ], 2)) : o.enum && o.enum.length ? (n(), y(k, {
           key: 1,
           default: o.default,
           modelValue: e.modelValue,
-          type: U.value,
+          type: j.value,
           value: o.enum,
-          "onUpdate:modelValue": l[0] || (l[0] = (t) => s("update:modelValue", t))
-        }, null, 8, ["default", "modelValue", "type", "value"])) : e.type === "boolean" || (p = e.type) != null && p.includes("boolean") ? (n(), f(V, {
+          "onUpdate:modelValue": t[0] || (t[0] = (l) => s("update:modelValue", l))
+        }, null, 8, ["default", "modelValue", "type", "value"])) : e.type === "boolean" || (p = e.type) != null && p.includes("boolean") ? (n(), y(k, {
           key: 2,
           default: o.default,
           modelValue: e.modelValue,
-          value: L.value,
-          "onUpdate:modelValue": l[1] || (l[1] = (t) => s("update:modelValue", t))
-        }, null, 8, ["default", "modelValue", "value"])) : o.examples && o.examples.length ? (n(), f(V, {
+          value: U.value,
+          "onUpdate:modelValue": t[1] || (t[1] = (l) => s("update:modelValue", l))
+        }, null, 8, ["default", "modelValue", "value"])) : o.examples && o.examples.length ? (n(), y(k, {
           key: 3,
           default: o.default,
           modelValue: o.modelValue,
           value: o.examples,
-          "onUpdate:modelValue": l[2] || (l[2] = (t) => s("update:modelValue", t))
-        }, null, 8, ["default", "modelValue", "value"])) : (n(), i("div", X({
+          "onUpdate:modelValue": t[2] || (t[2] = (l) => s("update:modelValue", l))
+        }, null, 8, ["default", "modelValue", "value"])) : (n(), u("div", Y({
           key: 4,
-          id: u(N)
+          id: d(A)
         }, e.$attrs, {
           ref_key: "codeMirrorRef",
           ref: D,
-          class: ["group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden whitespace-nowrap text-xs leading-[1.44] -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline", {
+          class: ["group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden whitespace-nowrap text-xs leading-[1.44] -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline", {
             "flow-code-input--error": e.error
           }],
           onKeydown: [
-            l[4] || (l[4] = h(q((t) => g("down", t), ["stop"]), ["down"])),
-            l[5] || (l[5] = h((t) => g("enter", t), ["enter"])),
-            l[6] || (l[6] = h(q((t) => g("up", t), ["stop"]), ["up"]))
+            t[4] || (t[4] = g(q((l) => b("down", l), ["stop"]), ["down"])),
+            t[5] || (t[5] = g((l) => b("enter", l), ["enter"])),
+            t[6] || (t[6] = g((l) => b("escape", l), ["escape"])),
+            t[7] || (t[7] = g(q((l) => b("up", l), ["stop"]), ["up"]))
           ]
         }), [
-          e.isCopyable ? (n(), i("div", pe, [
-            w("button", {
+          e.isCopyable ? (n(), u("div", me, [
+            m("button", {
               class: "copy-button",
               type: "button",
-              onClick: l[3] || (l[3] = (t) => u(O)(u(_)(e.modelValue)))
+              onClick: t[3] || (t[3] = (l) => d(M)(d(ee)(e.modelValue)))
             }, [
-              l[7] || (l[7] = w("span", { class: "sr-only" }, "Copy content", -1)),
-              Y(u(Z), {
+              t[8] || (t[8] = m("span", { class: "sr-only" }, "Copy content", -1)),
+              Z(d(_), {
                 icon: "Clipboard",
                 size: "md"
               })
             ])
-          ])) : c("", !0)
-        ], 16, ie)),
-        e.$slots.warning ? (n(), i("div", me, [
-          R(e.$slots, "warning", {}, void 0, !0)
-        ])) : c("", !0),
-        R(e.$slots, "icon", {}, void 0, !0),
-        e.required ? (n(), i("div", fe, " Required ")) : c("", !0),
-        y.value && e.withVariables && u(b) !== "modal" && e.environment ? (n(), f(ae, {
+          ])) : f("", !0),
+          e.disableTabIndent ? f("", !0) : (n(), u("div", fe, t[9] || (t[9] = [
+            V(" Press "),
+            m("kbd", { class: "-mx-0.25 rounded border px-0.5 font-mono" }, "Esc", -1),
+            V(" then "),
+            m("kbd", { class: "-mx-0.25 rounded border px-0.5 font-mono" }, "Tab", -1),
+            V(" to exit ")
+          ])))
+        ], 16, pe)),
+        e.$slots.warning ? (n(), u("div", ce, [
+          E(e.$slots, "warning", {}, void 0, !0)
+        ])) : f("", !0),
+        E(e.$slots, "icon", {}, void 0, !0),
+        e.required ? (n(), u("div", be, " Required ")) : f("", !0),
+        v.value && e.withVariables && d(w) !== "modal" && e.environment ? (n(), y(re, {
           key: 7,
           ref_key: "dropdownRef",
-          ref: m,
+          ref: c,
           dropdownPosition: S.value,
           envVariables: e.envVariables,
           environment: e.environment,
-          query: k.value,
-          onSelect: u(K)
-        }, null, 8, ["dropdownPosition", "envVariables", "environment", "query", "onSelect"])) : c("", !0)
+          query: x.value,
+          onSelect: d(z)
+        }, null, 8, ["dropdownPosition", "envVariables", "environment", "query", "onSelect"])) : f("", !0)
       ], 64);
     };
   }
 });
 export {
-  Se as default
+  Pe as default
 };

package/dist/components/CommandPalette/TheCommandPalette.vue.d.ts

@@ -106,6 +106,7 @@ export declare const PaletteComponents: {
                 }[] | undefined;
                 requestBody?: any;
                 responses?: Record<string, any> | undefined;
+                'x-scalar-stability'?: unknown;
                 method?: "options" | "connect" | "delete" | "get" | "head" | "patch" | "post" | "put" | "trace" | undefined;
             } & {
                 url?: string;
@@ -154,6 +155,7 @@ export declare const PaletteComponents: {
                 }[] | undefined;
                 requestBody?: any;
                 responses?: Record<string, any> | undefined;
+                'x-scalar-stability'?: unknown;
                 method?: "options" | "connect" | "delete" | "get" | "head" | "patch" | "post" | "put" | "trace" | undefined;
             } & {
                 url?: string;