@scalar/api-client 2.0.24 → 2.0.25

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @scalar/api-client
 
+## 2.0.25
+
+### Patch Changes
+
+- 591fe24: fix: clipped border radius in requests items
+- 7f17fe4: feat: move command palette into the client app base
+- 1dab515: feat: revamp address bar
+- 4d76ff5: feat: add support for multiple workspaces
+- e8cd161: feat: store workspace in local storage
+- a431eb0: fix: table checkbox for required params on import
+- ff59399: fix: api client spacing issues, and icon thickness
+- ec47287: feat: made request examples functional in client
+- 747e80e: fix: only flex addressbar codemirror
+- 9d561b7: fix: make app topbar draggable
+- Updated dependencies [1dab515]
+- Updated dependencies [5e060b1]
+- Updated dependencies [ff59399]
+- Updated dependencies [694c1d8]
+  - @scalar/oas-utils@0.2.15
+  - @scalar/themes@0.9.15
+  - @scalar/components@0.12.16
+  - @scalar/use-codemirror@0.11.7
+  - @scalar/object-utils@1.1.4
+  - @scalar/use-toasts@0.7.4
+  - @scalar/use-tooltip@1.0.2
+
 ## 2.0.24
 
 ### 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":";AAwpBA,wBAKG"}
+{"version":3,"file":"AddressBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBar.vue"],"names":[],"mappings":";AAkkBA,wBAKG"}

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 d = /* @__PURE__ */ r(o, [["__scopeId", "data-v-02983c4d"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-231a70ec"]]);
 export {
-  d as default
+  e as default
 };

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

@@ -1,125 +1,121 @@
-import { defineComponent as I, ref as p, watch as B, unref as o, openBlock as D, createElementBlock as M, createElementVNode as l, createVNode as r, withCtx as S, normalizeClass as C, normalizeStyle as N, withKeys as V, withModifiers as $, toDisplayString as T, createCommentVNode as A, pushScopeId as K, popScopeId as O } from "vue";
-import { useWorkspace as U } from "../../store/workspace.js";
+import { defineComponent as q, ref as m, watch as V, unref as l, openBlock as B, createElementBlock as I, createElementVNode as o, createVNode as r, withCtx as _, normalizeClass as b, normalizeStyle as R, createCommentVNode as z, pushScopeId as M, popScopeId as U } from "vue";
+import $ from "../CodeInput/CodeInput.vue.js";
+import { useWorkspace as O } from "../../store/workspace.js";
 import { Listbox as H } from "@headlessui/vue";
-import { ScalarButton as L, ScalarIcon as P } from "@scalar/components";
-import { REQUEST_METHODS as W } from "@scalar/oas-utils/helpers";
-import { isMacOS as Q } from "@scalar/use-tooltip";
-import { useMagicKeys as j, whenever as F } from "@vueuse/core";
-import G from "../HttpMethod/HttpMethod.vue.js";
-import J from "./AddressBarHistory.vue.js";
-import X from "./AddressBarServer.vue.js";
-import { executeRequestBus as m } from "../../libs/eventBusses/executeRequestBus.js";
-const v = (d) => (K("data-v-02983c4d"), d = d(), O(), d), Y = {
+import { ScalarButton as N, ScalarIcon as T } from "@scalar/components";
+import { REQUEST_METHODS as L } from "@scalar/oas-utils/helpers";
+import { isMacOS as A } from "@scalar/use-tooltip";
+import { useMagicKeys as D, whenever as K } from "@vueuse/core";
+import Q from "../HttpMethod/HttpMethod.vue.js";
+import W from "./AddressBarHistory.vue.js";
+import { executeRequestBus as c } from "../../libs/eventBusses/executeRequestBus.js";
+const f = (n) => (M("data-v-231a70ec"), n = n(), U(), n), j = {
   key: 0,
   class: "order-last lg:order-none lg:w-auto w-full"
-}, Z = { class: "m-auto flex basis-1/2 flex-row items-center" }, ee = { class: "pointer-events-none absolute left-0 top-0 z-10 block h-full w-full overflow-hidden" }, te = { class: "flex gap-1" }, oe = { class: "scroll-timeline-x scroll-timeline-x-hidden relative flex w-full" }, le = /* @__PURE__ */ v(() => /* @__PURE__ */ l("div", { class: "fade-left" }, null, -1)), ne = ["contenteditable"], se = /* @__PURE__ */ v(() => /* @__PURE__ */ l("div", { class: "fade-right" }, null, -1)), ae = /* @__PURE__ */ v(() => /* @__PURE__ */ l("span", { class: "text-xxs relative z-10 lg:flex hidden" }, "Send", -1)), _e = /* @__PURE__ */ I({
+}, F = { class: "m-auto flex basis-1/2 flex-row items-center" }, G = { class: "pointer-events-none absolute left-0 top-0 z-10 block h-full w-full overflow-hidden" }, J = { class: "flex gap-1" }, P = { class: "scroll-timeline-x scroll-timeline-x-hidden relative flex w-full" }, X = /* @__PURE__ */ f(() => /* @__PURE__ */ o("div", { class: "fade-left" }, null, -1)), Y = /* @__PURE__ */ f(() => /* @__PURE__ */ o("div", { class: "fade-right" }, null, -1)), Z = /* @__PURE__ */ f(() => /* @__PURE__ */ o("span", { class: "text-xxs relative z-10 lg:flex hidden" }, "Send", -1)), me = /* @__PURE__ */ q({
   __name: "AddressBar",
-  setup(d) {
+  setup(n) {
     const {
       activeRequest: t,
-      activeExample: k,
-      isReadOnly: x,
-      requestMutators: h,
-      requestsHistory: R
-    } = U(), g = p(R.value[0]), _ = j();
-    F(
-      Q() ? _.meta_enter : _.ctrl_enter,
-      () => m.emit()
+      activeExample: i,
+      isReadOnly: p,
+      requestMutators: v,
+      requestExampleMutators: g,
+      requestsHistory: w
+    } = O(), x = m(w.value[0]), h = D();
+    K(
+      A() ? h.meta_enter : h.ctrl_enter,
+      () => c.emit()
     );
-    const w = (e) => {
-      !t.value || t.value.path === e || h.edit(t.value.uid, "path", e);
+    const k = (e) => {
+      !t.value || t.value.path === e || v.edit(t.value.uid, "path", e);
     };
-    B(
+    V(
       () => {
         var e;
         return (e = t.value) == null ? void 0 : e.path;
       },
       (e) => {
-        t.value && w(e);
+        t.value && k(e);
       }
     );
-    const u = p(100), c = p(!1);
-    m.on(() => {
-      if (c.value) return;
-      c.value = !0;
+    const d = m(100), u = m(!1);
+    c.on(() => {
+      if (u.value) return;
+      u.value = !0;
       const e = setInterval(() => {
-        u.value -= 5, u.value <= 0 && (clearInterval(e), u.value = 100, c.value = !1);
+        d.value -= 5, d.value <= 0 && (clearInterval(e), d.value = 100, u.value = !1);
       }, 20);
     });
     function E(e) {
-      t.value && h.edit(t.value.uid, "method", e);
+      t.value && v.edit(t.value.uid, "method", e);
     }
-    function q() {
+    function S() {
       if (!t.value) return;
       const { method: e } = t.value;
-      return W[e].backgroundColor;
+      return L[e].backgroundColor;
     }
-    const z = (e) => {
-      var y;
-      e.preventDefault();
-      const a = (((y = e.clipboardData) == null ? void 0 : y.getData("text/plain")) || "").replace(/\n/g, ""), s = window.getSelection();
-      if (!s || s.rangeCount === 0) return;
-      const i = s.getRangeAt(0);
-      i.deleteContents();
-      const b = document.createTextNode(a);
-      i.insertNode(b), i.setStartAfter(b), s.removeAllRanges(), s.addRange(i);
-      const f = i.startContainer.parentElement;
-      f && (f.scrollLeft = f.scrollWidth);
+    const y = (e) => {
+      i.value && g.edit(i.value.uid, "url", e);
     };
-    return (e, n) => o(t) && o(k) ? (D(), M("div", Y, [
-      l("div", Z, [
-        r(o(H), {
-          modelValue: g.value,
-          "onUpdate:modelValue": n[3] || (n[3] = (a) => g.value = a)
+    return (e, a) => l(t) && l(i) ? (B(), I("div", j, [
+      o("div", F, [
+        r(l(H), {
+          modelValue: x.value,
+          "onUpdate:modelValue": a[2] || (a[2] = (s) => x.value = s)
         }, {
-          default: S(({ open: a }) => [
-            l("div", {
-              class: C([
+          default: _(({ open: s }) => [
+            o("div", {
+              class: b([
                 "text-xxs bg-b-1 relative flex w-full lg:min-w-[720px] lg:max-w-[720px] order-last lg:order-none flex-1 flex-row items-stretch rounded border p-[3px]",
-                { "rounded-b-none": a },
-                { "border-transparent": a }
+                { "rounded-b-none": s },
+                { "border-transparent": s }
               ])
             }, [
-              l("div", ee, [
-                l("div", {
-                  class: C(["bg-mix-transparent bg-mix-amount-95 absolute left-0 top-0 h-full w-full", q()]),
-                  style: N({ transform: `translate3d(-${u.value}%,0,0)` })
+              o("div", G, [
+                o("div", {
+                  class: b(["bg-mix-transparent bg-mix-amount-95 absolute left-0 top-0 h-full w-full", S()]),
+                  style: R({ transform: `translate3d(-${d.value}%,0,0)` })
                 }, null, 6)
               ]),
-              l("div", te, [
-                r(G, {
+              o("div", J, [
+                r(Q, {
                   class: "font-code text-xxs font-medium",
-                  isEditable: !o(x),
+                  isEditable: !l(p),
                   isSquare: "",
-                  method: o(t).method,
+                  method: l(t).method,
                   onChange: E
-                }, null, 8, ["isEditable", "method"]),
-                r(X)
+                }, null, 8, ["isEditable", "method"])
               ]),
-              l("div", oe, [
-                le,
-                l("div", {
-                  class: "scroll-timeline-x-address font-code text-c-1 flex flex-1 items-center whitespace-nowrap lg:text-sm text-xs font-medium leading-[24.5px] outline-none",
-                  contenteditable: !o(x),
-                  onInput: n[0] || (n[0] = (s) => w(s.target.innerText)),
-                  onKeydown: n[1] || (n[1] = V($((s) => o(m).emit(), ["prevent"]), ["enter"])),
-                  onPaste: z
-                }, T(o(t).path), 41, ne),
-                se
+              o("div", P, [
+                X,
+                r($, {
+                  disableCloseBrackets: "",
+                  disabled: l(p),
+                  disableEnter: "",
+                  disableTabIndent: "",
+                  emitOnBlur: !1,
+                  modelValue: l(i).url,
+                  placeholder: "Enter URL to get started",
+                  server: "",
+                  onSubmit: a[0] || (a[0] = (C) => l(c).emit()),
+                  "onUpdate:modelValue": y
+                }, null, 8, ["disabled", "modelValue"]),
+                Y
               ]),
-              r(J, { open: a }, null, 8, ["open"]),
-              r(o(L), {
+              r(W, { open: s }, null, 8, ["open"]),
+              r(l(N), {
                 class: "relative h-auto shrink-0 gap-1 overflow-hidden pl-2 pr-2.5 py-1 z-[1]",
-                disabled: c.value,
-                onClick: n[2] || (n[2] = (s) => o(m).emit())
+                disabled: u.value,
+                onClick: a[1] || (a[1] = (C) => l(c).emit())
               }, {
-                default: S(() => [
-                  r(o(P), {
+                default: _(() => [
+                  r(l(T), {
                     class: "relative z-10 shrink-0 fill-current",
                     icon: "Play",
                     size: "xs"
                   }),
-                  ae
+                  Z
                 ]),
                 _: 1
               }, 8, ["disabled"])
@@ -128,9 +124,9 @@ const v = (d) => (K("data-v-02983c4d"), d = d(), O(), d), Y = {
           _: 1
         }, 8, ["modelValue"])
       ])
-    ])) : A("", !0);
+    ])) : z("", !0);
   }
 });
 export {
-  _e as default
+  me as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AddressBarServer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBarServer.vue"],"names":[],"mappings":";AA0ZA,wBAKG"}
+{"version":3,"file":"AddressBarServer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBarServer.vue"],"names":[],"mappings":";AA2ZA,wBAKG"}

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

@@ -17,6 +17,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     enum?: string[];
     type?: string;
     nullable?: boolean;
+    withVariables?: boolean;
+    withServers?: boolean;
 }>, {
     disableCloseBrackets: boolean;
     disableEnter: boolean;
@@ -24,6 +26,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     emitOnBlur: boolean;
     colorPicker: boolean;
     nullable: boolean;
+    withVariables: boolean;
+    withServers: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (v: string) => void;
     "update:modelValue": (v: string) => void;
@@ -45,6 +49,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     enum?: string[];
     type?: string;
     nullable?: boolean;
+    withVariables?: boolean;
+    withServers?: boolean;
 }>, {
     disableCloseBrackets: boolean;
     disableEnter: boolean;
@@ -52,16 +58,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     emitOnBlur: boolean;
     colorPicker: boolean;
     nullable: boolean;
+    withVariables: boolean;
+    withServers: boolean;
 }>>> & {
     onSubmit?: ((v: string) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }, {
     nullable: boolean;
+    withServers: boolean;
     colorPicker: boolean;
     emitOnBlur: boolean;
     disableTabIndent: boolean;
     disableEnter: boolean;
     disableCloseBrackets: boolean;
+    withVariables: boolean;
 }, {}>, {
     warning?(_: {}): any;
     icon?(_: {}): any;

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":"AAAA,OA0PO,EAGL,KAAK,kBAAkB,EAExB,MAAM,wBAAwB,CAAA;;kBAWb,OAAO;gBACT,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;WACR,MAAM;eACF,OAAO;;;;;;;;;;;;kBAhBJ,OAAO;gBACT,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;WACR,MAAM;eACF,OAAO;;;;;;;;;;;;cAAP,OAAO;iBAhBJ,OAAO;gBAGR,OAAO;sBAGD,OAAO;kBAMX,OAAO;0BACC,OAAO;;qBAmPJ,GAAG;kBACN,GAAG;;AApQ9B,wBAuSC;AAMD,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GACvC,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAEN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AAExD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"CodeInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.vue"],"names":[],"mappings":"AAAA,OAoRO,EAGL,KAAK,kBAAkB,EAExB,MAAM,wBAAwB,CAAA;;kBAeb,OAAO;gBACT,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;WACR,MAAM;eACF,OAAO;oBACF,OAAO;kBACT,OAAO;;;;;;;;;;;;;;kBAlBP,OAAO;gBACT,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;WACR,MAAM;eACF,OAAO;oBACF,OAAO;kBACT,OAAO;;;;;;;;;;;;;;cAFV,OAAO;iBAEJ,OAAO;iBAlBP,OAAO;gBAGR,OAAO;sBAGD,OAAO;kBAMX,OAAO;0BACC,OAAO;mBAId,OAAO;;qBAwPG,GAAG;kBACN,GAAG;;AA7Q9B,wBAgTC;AAMD,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GACvC,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAEN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AAExD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

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

@@ -1,7 +1,8 @@
 import o from "./CodeInput.vue2.js";
 /* empty css               */
+/* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c8194af4"]]);
+const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-93d0e1be"]]);
 export {
-  f as default
+  _ as default
 };

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

@@ -1,17 +1,20 @@
-import { defineComponent as F, useAttrs as S, ref as b, toRef as o, watch as $, computed as O, openBlock as t, createElementBlock as u, Fragment as P, createBlock as y, mergeProps as q, unref as E, renderSlot as h, createCommentVNode as g } from "vue";
+import { defineComponent as S, useAttrs as P, ref as b, toRef as o, watch as O, computed as $, openBlock as t, createElementBlock as s, Fragment as R, createBlock as h, mergeProps as q, unref as E, renderSlot as y, createCommentVNode as g } from "vue";
 import { useCodeMirror as I, colorPicker as M } from "@scalar/use-codemirror";
 import { nanoid as N } from "nanoid";
 import B from "../DataTable/DataTableInputSelect.vue.js";
-const R = ["id"], T = {
+import { dropdownPlugin as T } from "./codeDropdownWidget.js";
+import { pillPlugin as A, backspaceCommand as U } from "./codeVariableWidget.js";
+import { useWorkspace as W } from "../../store/workspace.js";
+const j = ["id"], z = {
   key: 3,
   class: "absolute centered-y right-7 text-orange text-xs"
-}, A = {
+}, D = {
   key: 4,
   class: "required absolute centered-y right-0 pt-px pr-2 text-xxs text-c-3 bg-b-1 shadow-[-8px_0_4px_var(--scalar-background-1)] opacity-100 duration-150 transition-opacity peer-has-[.cm-focused]:opacity-0"
-}, U = {
+}, G = {
   inheritAttrs: !1
-}, H = /* @__PURE__ */ F({
-  ...U,
+}, Z = /* @__PURE__ */ S({
+  ...G,
   __name: "CodeInput",
   props: {
     colorPicker: { type: Boolean, default: !1 },
@@ -30,79 +33,81 @@ const R = ["id"], T = {
     disableCloseBrackets: { type: Boolean, default: !1 },
     enum: {},
     type: {},
-    nullable: { type: Boolean, default: !1 }
+    nullable: { type: Boolean, default: !1 },
+    withVariables: { type: Boolean, default: !0 },
+    withServers: { type: Boolean, default: !1 }
   },
   emits: ["submit", "update:modelValue"],
-  setup(V, { emit: k }) {
+  setup(v, { emit: k }) {
     var m;
-    const e = V, a = k, s = S(), v = s.id || `id-${N()}`, i = b(!1);
+    const e = v, a = k, d = P(), V = d.id || `id-${N()}`, p = b(!1), { activeWorkspace: w } = W();
     function C(l) {
       return e.handleFieldChange ? e.handleFieldChange(l) : a("update:modelValue", l);
     }
     function _(l) {
       return e.handleFieldSubmit ? e.handleFieldSubmit(l) : a("submit", l);
     }
-    function w(l) {
-      i.value = !1, e.emitOnBlur && e.modelValue && _(l);
+    function x(l) {
+      p.value = !1, e.emitOnBlur && e.modelValue && _(l);
     }
-    const c = [];
-    e.colorPicker && c.push(M);
-    const p = b(null), { codeMirror: n } = I({
+    const n = [];
+    e.colorPicker && n.push(M), e.withVariables && !w.value.isReadOnly && n.push(T({ withServers: e.withServers })), n.push(A, U);
+    const c = b(null), { codeMirror: r } = I({
       content: o(
         () => e.modelValue !== void 0 ? String(e.modelValue) : ""
       ),
       onChange: C,
-      onFocus: () => i.value = !0,
-      onBlur: (l) => w(l),
-      codeMirrorRef: p,
+      onFocus: () => p.value = !0,
+      onBlur: (l) => x(l),
+      codeMirrorRef: c,
       disableTabIndent: o(() => e.disableTabIndent),
       disableEnter: o(() => e.disableEnter),
       disableCloseBrackets: o(() => e.disableCloseBrackets),
       lineNumbers: o(() => e.lineNumbers),
       language: o(() => e.language),
       lint: o(() => e.lint),
-      extensions: c,
+      extensions: n,
       placeholder: o(() => e.placeholder)
     });
-    (m = n.value) == null || m.focus(), $(n, () => {
-      n.value && Object.prototype.hasOwnProperty.call(s, "autofocus") && n.value.focus();
+    (m = r.value) == null || m.focus(), O(r, () => {
+      r.value && Object.prototype.hasOwnProperty.call(d, "autofocus") && r.value.focus();
     });
-    const x = O(() => {
+    const F = $(() => {
       var l;
       return e.type === "boolean" || (l = e.type) != null && l.includes("boolean") || e.nullable ? ["true", "false", "null"] : ["true", "false"];
     });
-    return (l, r) => {
+    return (l, u) => {
       var f;
-      return t(), u(P, null, [
-        e.enum && e.enum.length ? (t(), y(B, {
+      return t(), s(R, null, [
+        e.enum && e.enum.length ? (t(), h(B, {
           key: 0,
           modelValue: e.modelValue,
           value: e.enum,
-          "onUpdate:modelValue": r[0] || (r[0] = (d) => a("update:modelValue", d))
-        }, null, 8, ["modelValue", "value"])) : e.type === "boolean" || (f = e.type) != null && f.includes("boolean") ? (t(), y(B, {
+          "onUpdate:modelValue": u[0] || (u[0] = (i) => a("update:modelValue", i))
+        }, null, 8, ["modelValue", "value"])) : e.type === "boolean" || (f = e.type) != null && f.includes("boolean") ? (t(), h(B, {
           key: 1,
           modelValue: e.modelValue,
-          value: x.value,
-          "onUpdate:modelValue": r[1] || (r[1] = (d) => a("update:modelValue", d))
-        }, null, 8, ["modelValue", "value"])) : (t(), u("div", q({
+          value: F.value,
+          "onUpdate:modelValue": u[1] || (u[1] = (i) => a("update:modelValue", i))
+        }, null, 8, ["modelValue", "value"])) : (t(), s("div", q({
           key: 2,
-          id: E(v)
+          id: E(V)
         }, l.$attrs, {
           ref_key: "codeMirrorRef",
-          ref: p,
+          ref: c,
           class: ["peer font-code w-full whitespace-nowrap text-xs leading-[1.44] relative", {
             "flow-code-input--error": l.error
           }]
-        }), null, 16, R)),
-        l.$slots.warning ? (t(), u("div", T, [
-          h(l.$slots, "warning", {}, void 0, !0)
+        }), null, 16, j)),
+        l.$slots.warning ? (t(), s("div", z, [
+          y(l.$slots, "warning", {}, void 0, !0)
         ])) : g("", !0),
-        h(l.$slots, "icon", {}, void 0, !0),
-        l.required ? (t(), u("div", A, " Required ")) : g("", !0)
+        y(l.$slots, "icon", {}, void 0, !0),
+        l.required ? (t(), s("div", D, " Required ")) : g("", !0)
       ], 64);
     };
   }
 });
 export {
-  H as default
+  Z as default
 };

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

@@ -0,0 +1,24 @@
+import { type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@scalar/use-codemirror';
+declare class DropdownWidget extends WidgetType {
+    private queryTerm;
+    private onSelect;
+    private dropdown;
+    private withServers?;
+    constructor(queryTerm: string, onSelect: (item: string) => void, withServers?: boolean);
+    updateQueryTerm(newQueryTerm: string): void;
+    getQueryTerm(): string;
+    toDOM(view: EditorView): HTMLSpanElement;
+    destroy(): void;
+    eq(other: WidgetType): boolean;
+}
+export declare const dropdownPlugin: (props: {
+    withServers?: boolean;
+}) => ViewPlugin<{
+    decorations: DecorationSet;
+    widget: DropdownWidget | null;
+    view: EditorView;
+    handleDropdownSelect(item: string): void;
+    update(update: ViewUpdate): void;
+}>;
+export {};
+//# sourceMappingURL=codeDropdownWidget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeDropdownWidget.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/codeDropdownWidget.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,UAAU,EAEf,UAAU,EACV,KAAK,UAAU,EACf,UAAU,EACX,MAAM,wBAAwB,CAAA;AAK/B,cAAM,cAAe,SAAQ,UAAU;IACrC,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,QAAQ,CAAY;IAC5B,OAAO,CAAC,WAAW,CAAC,CAAS;gBAG3B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAChC,WAAW,CAAC,EAAE,OAAO;IAQvB,eAAe,CAAC,YAAY,EAAE,MAAM;IAMpC,YAAY;IAIZ,KAAK,CAAC,IAAI,EAAE,UAAU;IAoCtB,OAAO;IAOP,EAAE,CAAC,KAAK,EAAE,UAAU;CAGrB;AAED,eAAO,MAAM,cAAc,UAAW;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE;iBAG5C,aAAa;YAClB,cAAc,GAAG,IAAI;UACvB,UAAU;+BAQW,MAAM;mBAqClB,UAAU;EAsC5B,CAAA"}

package/dist/components/CodeInput/codeDropdownWidget.js

@@ -0,0 +1,110 @@
+var m = Object.defineProperty;
+var g = (d, t, e) => t in d ? m(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e;
+var n = (d, t, e) => g(d, typeof t != "symbol" ? t + "" : t, e);
+import { router as f } from "../../router.js";
+import { ViewPlugin as y, Decoration as h, StateEffect as T, WidgetType as S } from "@scalar/use-codemirror";
+import { createApp as q, h as p, Teleport as x } from "vue";
+import v from "../../views/Environment/EnvironmentVariableDropdown.vue.js";
+class u extends S {
+  constructor(e, s, o) {
+    super();
+    n(this, "queryTerm");
+    n(this, "onSelect");
+    n(this, "dropdown", null);
+    n(this, "withServers");
+    this.queryTerm = e, this.onSelect = s, this.withServers = o;
+  }
+  updateQueryTerm(e) {
+    this.queryTerm !== e && (this.queryTerm = e);
+  }
+  getQueryTerm() {
+    return this.queryTerm;
+  }
+  toDOM(e) {
+    const s = document.createElement("span");
+    return s.style.position = "fixed", setTimeout(() => {
+      var c;
+      const o = e.state.selection.main.head, i = e.coordsAtPos(o - this.queryTerm.length - 2);
+      if (i) {
+        const r = (c = document.querySelector(".scalar-client")) == null ? void 0 : c.getBoundingClientRect();
+        r && (this.dropdown = q({
+          render: () => p(x, { to: ".scalar-client" }, [
+            p(v, {
+              query: this.queryTerm,
+              onSelect: this.onSelect,
+              withServers: this.withServers,
+              style: {
+                position: "absolute",
+                left: `${i.left - r.left}px`,
+                top: `calc(${i.bottom - r.top}px + 6px)`
+              }
+            })
+          ])
+        })), this.dropdown.use(f), this.dropdown.mount(s);
+      }
+    }, 0), s;
+  }
+  destroy() {
+    this.dropdown && (this.dropdown.unmount(), this.dropdown = null);
+  }
+  eq(e) {
+    return e instanceof u && this.queryTerm === e.queryTerm;
+  }
+}
+const P = (d) => y.fromClass(
+  class {
+    constructor(t) {
+      n(this, "decorations");
+      n(this, "widget", null);
+      n(this, "view");
+      this.view = t, this.decorations = h.none, this.handleDropdownSelect = this.handleDropdownSelect.bind(this);
+    }
+    handleDropdownSelect(t) {
+      var w;
+      if (!this.widget) return;
+      const { state: e, dispatch: s } = this.view, o = e.selection.main.head, i = Math.max(0, o - this.widget.getQueryTerm().length - 2), c = o, r = `{{${t}}}`;
+      s({
+        changes: { from: i, to: c, insert: r }
+      }), (w = this.widget) == null || w.destroy(), this.widget = null, this.decorations = h.none, this.view.dispatch({
+        effects: T.appendConfig.of([])
+      });
+      const l = i + r.length, a = "";
+      this.widget = new u(
+        a,
+        this.handleDropdownSelect,
+        d.withServers
+      ), this.decorations = h.set([
+        h.widget({
+          widget: this.widget,
+          side: 1
+        }).range(l)
+      ]), this.view.dispatch({
+        selection: { anchor: l }
+      }), this.view.focus();
+    }
+    update(t) {
+      var r, l;
+      const e = t.state.selection.main.head, s = t.state.doc.sliceString(0, e), o = [], i = s.lastIndexOf("{{"), c = s.lastIndexOf("}}");
+      if (i > c) {
+        const a = s.slice(i + 2);
+        !this.widget || this.widget.getQueryTerm() !== a ? ((r = this.widget) == null || r.destroy(), this.widget = new u(
+          a,
+          this.handleDropdownSelect
+        )) : this.widget.updateQueryTerm(a), o.push(
+          h.widget({
+            widget: this.widget,
+            side: 1
+          }).range(e)
+        );
+      } else
+        (l = this.widget) == null || l.destroy(), this.widget = null;
+      this.decorations = h.set(o);
+    }
+  },
+  {
+    decorations: (t) => t.decorations
+  }
+);
+export {
+  P as dropdownPlugin
+};

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

@@ -0,0 +1,8 @@
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@scalar/use-codemirror';
+export declare const pillPlugin: ViewPlugin<{
+    decorations: DecorationSet;
+    update(update: ViewUpdate): void;
+    buildDecorations(view: EditorView): import("@codemirror/state").RangeSet<Decoration>;
+}>;
+export declare const backspaceCommand: import("@codemirror/state").Extension;
+//# sourceMappingURL=codeVariableWidget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeVariableWidget.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/codeVariableWidget.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EAEV,UAAU,EACV,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAA;AA+F/B,eAAO,MAAM,UAAU;iBAEN,aAAa;mBAMX,UAAU;2BAMF,UAAU;EA6BpC,CAAA;AAED,eAAO,MAAM,gBAAgB,uCAmB3B,CAAA"}