@scalar/api-client 2.0.22 → 2.0.25

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @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
+
+- 7076725: feat(components): add outline icons
+- 1e72b03: fix(components): polish history icon
+- cbe984b: fix: adjust command palette icon thickness
+- Updated dependencies [7076725]
+- Updated dependencies [1e72b03]
+- Updated dependencies [dd2a42e]
+  - @scalar/components@0.12.15
+
+## 2.0.23
+
+### Patch Changes
+
+- 3928ac3: feat: add routing portion for multiple workspaces
+- Updated dependencies [96e7106]
+  - @scalar/themes@0.9.14
+  - @scalar/components@0.12.14
+  - @scalar/oas-utils@0.2.14
+
 ## 2.0.22
 
 ### 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":";AAupBA,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-1d480492"]]);
+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-1d480492"), 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), {
-                    class: "relative z-10 shrink-0",
+                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-1d480492"), d = d(), O(), d), Y = {
           _: 1
         }, 8, ["modelValue"])
       ])
-    ])) : A("", !0);
+    ])) : z("", !0);
   }
 });
 export {
-  _e as default
+  me as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AddressBarHistory.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBarHistory.vue"],"names":[],"mappings":";UA6HQ,OAAO;;UAAP,OAAO;;AAqPf,wBAMG;AAOH,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":"AddressBarHistory.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBarHistory.vue"],"names":[],"mappings":";UA8HQ,OAAO;;UAAP,OAAO;;AAqPf,wBAMG;AAOH,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/AddressBar/AddressBarHistory.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as U, openBlock as n, createElementBlock as f, Fragment as d, unref as t, createBlock as i, withCtx as m, createVNode as x, createCommentVNode as b, createElementVNode as o, normalizeClass as g, renderList as k, toDisplayString as c } from "vue";
+import { defineComponent as q, openBlock as n, createElementBlock as f, Fragment as d, unref as t, createBlock as i, withCtx as m, createVNode as x, createCommentVNode as b, createElementVNode as o, normalizeClass as h, renderList as U, toDisplayString as c } from "vue";
 import { formatMs as w } from "../../libs/formatters.js";
 import { useWorkspace as y } from "../../store/workspace.js";
 import { ListboxButton as C, ListboxOptions as L, ListboxOption as R } from "@headlessui/vue";
@@ -7,20 +7,20 @@ import { httpStatusCodes as S } from "@scalar/oas-utils/helpers";
 import { useRouter as H } from "vue-router";
 import P from "../HttpMethod/HttpMethod.vue.js";
 import { getStatusCodeColor as z } from "./httpStatusCodeColors.js";
-const E = { class: "font-code flex flex-1 gap-1.5 text-sm font-medium" }, N = { class: "text-c-2 gap-0" }, V = { class: "font-code text-c-3 flex flex-row items-center gap-1.5 text-sm font-medium" }, Q = /* @__PURE__ */ U({
+const E = { class: "font-code flex flex-1 gap-1.5 text-sm font-medium" }, N = { class: "text-c-2 gap-0" }, V = { class: "font-code text-c-3 flex flex-row items-center gap-1.5 text-sm font-medium" }, Q = /* @__PURE__ */ q({
   __name: "AddressBarHistory",
   props: {
     open: { type: Boolean }
   },
   setup($) {
-    const { requestsHistory: u, activeRequest: h, requestExampleMutators: _ } = y(), v = H();
+    const { requestsHistory: u, activeRequest: g, requestExampleMutators: _ } = y(), v = H();
     function p(a, r) {
       const e = new URL(a.responseURL), s = new URLSearchParams(e.search).get("scalar_url");
       return s ? new URL(s)[r].toString() : e.origin;
     }
-    function q(a) {
+    function k(a) {
       const r = u.value[a];
-      h.value.uid !== r.request.requestUid && v.push(`/request/${r.request.requestUid}`), _.set(r.request);
+      g.value.uid !== r.request.requestUid && v.push(`/request/${r.request.requestUid}`), _.set(r.request);
     }
     return (a, r) => (n(), f(d, null, [
       t(u).length ? (n(), i(t(C), {
@@ -31,24 +31,25 @@ const E = { class: "font-code flex flex-1 gap-1.5 text-sm font-medium" }, N = {
           x(t(B), {
             class: "text-c-3",
             icon: "History",
-            size: "xs"
+            size: "sm",
+            thickness: "2.25"
           })
         ]),
         _: 1
       })) : b("", !0),
       o("div", {
-        class: g([
+        class: h([
           "absolute left-0 top-[33px] w-full rounded before:pointer-events-none before:absolute before:left-0 before:top-[-33px] before:h-[calc(100%+33px)] before:w-full before:rounded z-50",
           { "before:shadow-lg": a.open }
         ])
       }, [
         x(t(L), { class: "bg-b-1 custom-scroll bg-mix-transparent bg-mix-amount-30 max-h-[300px] rounded-b p-[3px] pt-0 backdrop-blur" }, {
           default: m(() => [
-            (n(!0), f(d, null, k(t(u), ({ response: e }, l) => (n(), i(t(R), {
+            (n(!0), f(d, null, U(t(u), ({ response: e }, l) => (n(), i(t(R), {
               key: l,
               class: "ui-active:bg-b-2 text-c-1 ui-active:text-c-1 flex cursor-pointer flex-row gap-2.5 rounded py-1.5 pr-3",
               value: l,
-              onClick: (s) => q(l)
+              onClick: (s) => k(l)
             }, {
               default: m(() => {
                 var s;
@@ -64,7 +65,7 @@ const E = { class: "font-code flex flex-1 gap-1.5 text-sm font-medium" }, N = {
                   o("div", V, [
                     o("span", null, c(t(w)(e.duration)), 1),
                     o("span", {
-                      class: g([t(z)(e.status).color])
+                      class: h([t(z)(e.status).color])
                     }, c(e.status), 3),
                     o("span", null, c((s = t(S)[e.status]) == null ? void 0 : s.name), 1)
                   ])

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":";AA6YA,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"}