@scalar/api-client 2.2.8 → 2.2.9

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @scalar/api-client
 
+## 2.2.9
+
+### Patch Changes
+
+- 3eb0d11: feat: apply specific OAuth 2.0 security schemes
+- b66a85c: updates environment sidebar to welcome collection environment
+- 3eb0d11: feat: moved api-client auth into references
+- 62e80cd: fix: filters out first request example
+- bccfa3a: fix: scopes scalar button danger overload style
+- 66c1573: fix: edits collection on watch mode toggle from sidebar
+- b66a85c: feat: adds collection environments logic
+- Updated dependencies [3eb0d11]
+- Updated dependencies [b66a85c]
+- Updated dependencies [b66a85c]
+- Updated dependencies [b66a85c]
+  - @scalar/oas-utils@0.2.86
+  - @scalar/use-codemirror@0.11.47
+  - @scalar/components@0.13.3
+  - @scalar/import@0.2.4
+  - @scalar/postman-to-openapi@0.1.9
+
 ## 2.2.8
 
 ### Patch Changes

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,OA6cO,EAGL,KAAK,kBAAkB,EAGxB,MAAM,wBAAwB,CAAA;;kBAkBb,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;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;;;;;;;;kBApBX,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;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;;;;;;gBAjBZ,OAAO;iBAHN,OAAO;sBAMF,OAAO;kBAMX,OAAO;0BACC,OAAO;cAGnB,OAAO;mBACF,OAAO;gBAEV,OAAO;;qBAmZM,GAAG;kBACN,GAAG;;AA1a9B,wBAweC;AAgBD,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":"AAAA,OA8cO,EAGL,KAAK,kBAAkB,EAGxB,MAAM,wBAAwB,CAAA;;kBAkBb,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;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;;;;;;;;kBApBX,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;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;;;;;;gBAjBZ,OAAO;iBAHN,OAAO;sBAMF,OAAO;kBAMX,OAAO;0BACC,OAAO;cAGnB,OAAO;mBACF,OAAO;gBAEV,OAAO;;qBAqZM,GAAG;kBACN,GAAG;;AA5a9B,wBAweC;AAgBD,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-c2f7308b"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4b3bb606"]]);
 export {
-  _ as default
+  a as default
 };

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

@@ -1,14 +1,14 @@
-import { defineComponent as J, useAttrs as L, ref as u, toRef as a, watch as Q, computed as v, openBlock as i, createElementBlock as p, Fragment as G, createBlock as h, mergeProps as H, unref as n, withKeys as w, withModifiers as D, createElementVNode as $, createVNode as X, createCommentVNode as f, renderSlot as q } from "vue";
+import { defineComponent as j, useAttrs as J, ref as u, toRef as a, watch as L, computed as Q, openBlock as r, createElementBlock as p, Fragment as G, createBlock as v, mergeProps as H, unref as s, withKeys as h, withModifiers as D, createElementVNode as E, createVNode as X, createCommentVNode as f, renderSlot as $ } from "vue";
 import { useCodeMirror as Y, useDropdown as Z, colorPicker as ee } from "@scalar/use-codemirror";
 import { nanoid as oe } from "nanoid";
-import R from "../DataTable/DataTableInputSelect.vue.js";
+import q from "../DataTable/DataTableInputSelect.vue.js";
 import { pillPlugin as te, backspaceCommand as le } from "./codeVariableWidget.js";
 import ne from "../../views/Environment/EnvironmentVariableDropdown.vue.js";
-import { useClipboard as re } from "@scalar/use-hooks/useClipboard";
-import { ScalarIcon as ae } from "@scalar/components";
-import { prettyPrintJson as ie } from "@scalar/oas-utils/helpers";
+import { useClipboard as ae } from "@scalar/use-hooks/useClipboard";
+import { ScalarIcon as re } from "@scalar/components";
+import { prettyPrintJson as se } from "@scalar/oas-utils/helpers";
 import { useActiveEntities as ue } from "../../store/active-entities.js";
-import { useWorkspace as se } from "../../store/store.js";
+import { useWorkspace as ie } from "../../store/store.js";
 const de = ["id"], pe = {
   key: 0,
   class: "scalar-code-copy z-context"
@@ -20,7 +20,7 @@ const de = ["id"], pe = {
   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 pointer-events-none"
 }, me = {
   inheritAttrs: !1
-}, Se = /* @__PURE__ */ J({
+}, xe = /* @__PURE__ */ j({
   ...me,
   __name: "CodeInput",
   props: {
@@ -47,43 +47,44 @@ const de = ["id"], pe = {
     default: {}
   },
   emits: ["submit", "update:modelValue", "curl"],
-  setup(N, { expose: O, emit: _ }) {
+  setup(R, { expose: N, emit: O }) {
     var P;
-    const e = N, s = _, V = L(), A = V.id || `id-${oe()}`, g = u(!1), m = u(!1), B = u(""), C = u({ left: 0, top: 0 }), c = u(null), { activeEnvVariables: k, activeEnvironment: E, router: I } = ue(), { isReadOnly: S } = se(), { copyToClipboard: K } = re();
-    function M(o) {
+    const e = R, i = O, w = J(), _ = w.id || `id-${oe()}`, V = u(!1), m = u(!1), g = u(""), B = u({ left: 0, top: 0 }), c = u(null), { activeEnvVariables: C, activeEnvironment: k, activeWorkspace: A } = ue(), { isReadOnly: S } = ie(), { copyToClipboard: I } = ae();
+    function K(o) {
       var t;
-      return o === e.modelValue ? null : e.importCurl && o.trim().toLowerCase().startsWith("curl") ? (s("curl", o), (t = r.value) == null || t.dispatch({
+      return o === e.modelValue ? null : e.importCurl && o.trim().toLowerCase().startsWith("curl") ? (i("curl", o), (t = n.value) == null || t.dispatch({
         changes: {
           from: 0,
-          to: r.value.state.doc.length,
+          to: n.value.state.doc.length,
           insert: String(e.modelValue)
         }
-      }), null) : e.handleFieldChange ? e.handleFieldChange(o) : s("update:modelValue", o);
+      }), null) : e.handleFieldChange ? e.handleFieldChange(o) : i("update:modelValue", o);
     }
-    function T(o) {
-      return e.handleFieldSubmit ? e.handleFieldSubmit(o) : s("submit", o);
+    function M(o) {
+      return e.handleFieldSubmit ? e.handleFieldSubmit(o) : i("submit", o);
     }
-    function z(o) {
-      g.value = !1, e.emitOnBlur && e.modelValue && T(o);
+    function T(o) {
+      V.value = !1, e.emitOnBlur && e.modelValue && M(o);
     }
-    const y = [];
-    e.colorPicker && y.push(ee), y.push(
+    const b = [];
+    e.colorPicker && b.push(ee), b.push(
       te({
-        activeEnvironment: E,
-        activeEnvVariables: k,
+        environment: k.value,
+        envVariables: C.value,
+        workspace: A.value,
         isReadOnly: S
       }),
       le
     );
-    const x = u(null), { codeMirror: r } = Y({
+    const x = u(null), { codeMirror: n } = Y({
       content: a(
         () => e.modelValue !== void 0 ? String(e.modelValue) : ""
       ),
       onChange: (o) => {
-        M(o), W();
+        K(o), z();
       },
-      onFocus: () => g.value = !0,
-      onBlur: (o) => z(o),
+      onFocus: () => V.value = !0,
+      onBlur: (o) => T(o),
       codeMirrorRef: x,
       disableTabIndent: a(() => e.disableTabIndent),
       disableEnter: a(() => e.disableEnter),
@@ -91,49 +92,49 @@ const de = ["id"], pe = {
       lineNumbers: a(() => e.lineNumbers),
       language: a(() => e.language),
       lint: a(() => e.lint),
-      extensions: y,
+      extensions: b,
       placeholder: a(() => e.placeholder)
     });
-    (P = r.value) == null || P.focus(), Q(r, () => {
-      r.value && Object.prototype.hasOwnProperty.call(V, "autofocus") && r.value.focus();
+    (P = n.value) == null || P.focus(), L(n, () => {
+      n.value && Object.prototype.hasOwnProperty.call(w, "autofocus") && n.value.focus();
     });
-    const { handleDropdownSelect: U, updateDropdownVisibility: W } = Z({
-      codeMirror: r,
-      query: B,
+    const { handleDropdownSelect: W, updateDropdownVisibility: z } = Z({
+      codeMirror: n,
+      query: g,
       showDropdown: m,
-      dropdownPosition: C
-    }), j = v(() => {
+      dropdownPosition: B
+    }), U = Q(() => {
       var o;
       return e.type === "boolean" || (o = e.type) != null && o.includes("boolean") || e.nullable ? ["true", "false", "null"] : ["true", "false"];
     });
-    O({
+    N({
       focus: () => {
         var o;
-        (o = r.value) == null || o.focus();
+        (o = n.value) == null || o.focus();
       }
     });
-    const b = (o, t) => {
+    const y = (o, t) => {
       var d, l, F;
       m.value && (o === "down" ? (t.preventDefault(), (d = c.value) == null || d.handleArrowKey("down")) : o === "up" ? (t.preventDefault(), (l = c.value) == null || l.handleArrowKey("up")) : o === "enter" && (t.preventDefault(), (F = c.value) == null || F.handleSelect()));
     };
     return (o, t) => {
       var d;
-      return i(), p(G, null, [
-        e.enum && e.enum.length ? (i(), h(R, {
+      return r(), p(G, null, [
+        e.enum && e.enum.length ? (r(), v(q, {
           key: 0,
           default: e.default,
           modelValue: e.modelValue,
           value: e.enum,
-          "onUpdate:modelValue": t[0] || (t[0] = (l) => s("update:modelValue", l))
-        }, null, 8, ["default", "modelValue", "value"])) : e.type === "boolean" || (d = e.type) != null && d.includes("boolean") ? (i(), h(R, {
+          "onUpdate:modelValue": t[0] || (t[0] = (l) => i("update:modelValue", l))
+        }, null, 8, ["default", "modelValue", "value"])) : e.type === "boolean" || (d = e.type) != null && d.includes("boolean") ? (r(), v(q, {
           key: 1,
           default: e.default,
           modelValue: e.modelValue,
-          value: j.value,
-          "onUpdate:modelValue": t[1] || (t[1] = (l) => s("update:modelValue", l))
-        }, null, 8, ["default", "modelValue", "value"])) : (i(), p("div", H({
+          value: U.value,
+          "onUpdate:modelValue": t[1] || (t[1] = (l) => i("update:modelValue", l))
+        }, null, 8, ["default", "modelValue", "value"])) : (r(), p("div", H({
           key: 2,
-          id: n(A)
+          id: s(_)
         }, o.$attrs, {
           ref_key: "codeMirrorRef",
           ref: x,
@@ -141,45 +142,44 @@ const de = ["id"], pe = {
             "flow-code-input--error": o.error
           }],
           onKeydown: [
-            t[3] || (t[3] = w(D((l) => b("down", l), ["stop"]), ["down"])),
-            t[4] || (t[4] = w((l) => b("enter", l), ["enter"])),
-            t[5] || (t[5] = w(D((l) => b("up", l), ["stop"]), ["up"]))
+            t[3] || (t[3] = h(D((l) => y("down", l), ["stop"]), ["down"])),
+            t[4] || (t[4] = h((l) => y("enter", l), ["enter"])),
+            t[5] || (t[5] = h(D((l) => y("up", l), ["stop"]), ["up"]))
           ]
         }), [
-          o.isCopyable ? (i(), p("div", pe, [
-            $("button", {
+          o.isCopyable ? (r(), p("div", pe, [
+            E("button", {
               class: "copy-button",
               type: "button",
-              onClick: t[2] || (t[2] = (l) => n(K)(n(ie)(e.modelValue)))
+              onClick: t[2] || (t[2] = (l) => s(I)(s(se)(e.modelValue)))
             }, [
-              t[6] || (t[6] = $("span", { class: "sr-only" }, "Copy content", -1)),
-              X(n(ae), {
+              t[6] || (t[6] = E("span", { class: "sr-only" }, "Copy content", -1)),
+              X(s(re), {
                 icon: "Clipboard",
                 size: "md"
               })
             ])
           ])) : f("", !0)
         ], 16, de)),
-        o.$slots.warning ? (i(), p("div", ce, [
-          q(o.$slots, "warning", {}, void 0, !0)
+        o.$slots.warning ? (r(), p("div", ce, [
+          $(o.$slots, "warning", {}, void 0, !0)
         ])) : f("", !0),
-        q(o.$slots, "icon", {}, void 0, !0),
-        o.required ? (i(), p("div", fe, " Required ")) : f("", !0),
-        m.value && e.withVariables && !n(S) ? (i(), h(ne, {
+        $(o.$slots, "icon", {}, void 0, !0),
+        o.required ? (r(), p("div", fe, " Required ")) : f("", !0),
+        m.value && e.withVariables && !s(S) ? (r(), v(ne, {
           key: 5,
           ref_key: "dropdownRef",
           ref: c,
-          activeEnvVariables: v(() => n(k)),
-          activeEnvironment: v(() => n(E)),
-          dropdownPosition: C.value,
-          query: B.value,
-          router: n(I),
-          onSelect: n(U)
-        }, null, 8, ["activeEnvVariables", "activeEnvironment", "dropdownPosition", "query", "router", "onSelect"])) : f("", !0)
+          dropdownPosition: B.value,
+          envVariables: s(C),
+          environment: s(k),
+          query: g.value,
+          onSelect: s(W)
+        }, null, 8, ["dropdownPosition", "envVariables", "environment", "query", "onSelect"])) : f("", !0)
       ], 64);
     };
   }
 });
 export {
-  Se as default
+  xe as default
 };

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

@@ -1,14 +1,16 @@
+import { type EnvVariables } from '../../libs/env-helpers.js';
 import type { WorkspaceStore } from '../../store/index.js';
-import type { ActiveEntitiesStore } from '../../store/active-entities.js';
+import type { Environment } from '@scalar/oas-utils/entities/environment';
+import type { Workspace } from '@scalar/oas-utils/entities/workspace';
 import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@scalar/use-codemirror';
-type ActiveParsedEnvironments = ActiveEntitiesStore['activeEnvVariables'];
 type IsReadOnly = WorkspaceStore['isReadOnly'];
 /**
  * Styles the active environment variable pill
  */
 export declare const pillPlugin: (props: {
-    activeEnvironment: ActiveEntitiesStore["activeEnvironment"];
-    activeEnvVariables: ActiveParsedEnvironments;
+    environment: Environment;
+    envVariables: EnvVariables;
+    workspace: Workspace;
     isReadOnly: IsReadOnly;
 }) => ViewPlugin<{
     decorations: DecorationSet;

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

@@ -1 +1 @@
-{"version":3,"file":"codeVariableWidget.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/codeVariableWidget.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAGlE,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EAEV,UAAU,EACV,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAA;AAI/B,KAAK,wBAAwB,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,CAAA;AACzE,KAAK,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC,CAAA;AAqI9C;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW;IAChC,iBAAiB,EAAE,mBAAmB,CAAC,mBAAmB,CAAC,CAAA;IAC3D,kBAAkB,EAAE,wBAAwB,CAAA;IAC5C,UAAU,EAAE,UAAU,CAAA;CACvB;iBAGkB,aAAa;mBAMX,UAAU;2BAMF,UAAU;EAiCpC,CAAA;AAEH,eAAO,MAAM,gBAAgB,uCA8B3B,CAAA"}
+{"version":3,"file":"codeVariableWidget.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/codeVariableWidget.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,oBAAoB,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAA;AAErE,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EAEV,UAAU,EACV,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAA;AAG/B,KAAK,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC,CAAA;AA+H9C;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW;IAChC,WAAW,EAAE,WAAW,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,SAAS,CAAA;IACpB,UAAU,EAAE,UAAU,CAAA;CACvB;iBAGkB,aAAa;mBAMX,UAAU;2BASF,UAAU;EAkCpC,CAAA;AAEH,eAAO,MAAM,gBAAgB,uCA8B3B,CAAA"}

package/dist/components/CodeInput/codeVariableWidget.js

@@ -1,56 +1,57 @@
-var m = Object.defineProperty;
-var v = (n, t, e) => t in n ? m(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var l = (n, t, e) => v(n, typeof t != "symbol" ? t + "" : t, e);
-import { ScalarButton as h, ScalarIcon as f, ScalarTooltip as b } from "@scalar/components";
-import { REGEX as g } from "@scalar/oas-utils/helpers";
-import { ViewPlugin as E, RangeSetBuilder as y, Decoration as x, EditorView as w, WidgetType as N } from "@scalar/use-codemirror";
-import { defineComponent as C, h as o, createApp as R } from "vue";
+var h = Object.defineProperty;
+var u = (i, t, e) => t in i ? h(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var r = (i, t, e) => u(i, typeof t != "symbol" ? t + "" : t, e);
+import { getEnvColor as f } from "../../libs/env-helpers.js";
+import { ScalarButton as b, ScalarIcon as v, ScalarTooltip as g } from "@scalar/components";
+import { REGEX as w } from "@scalar/oas-utils/helpers";
+import { ViewPlugin as y, RangeSetBuilder as x, Decoration as E, EditorView as N, WidgetType as k } from "@scalar/use-codemirror";
+import { defineComponent as C, h as s, createApp as R } from "vue";
 import { parseEnvVariables as S } from "../../libs/environment-parser.js";
-const V = (n) => n.value ? n.value.color : "#8E8E8E";
-class d extends N {
-  constructor(e, a, i, s) {
+class d extends k {
+  constructor(e, o, n, l, a) {
     super();
-    l(this, "app");
-    l(this, "activeEnvironment");
-    l(this, "activeEnvVariables");
-    l(this, "isReadOnly");
-    this.variableName = e, this.variableName = e, this.activeEnvironment = a, this.activeEnvVariables = i, this.isReadOnly = s;
+    r(this, "app");
+    r(this, "environment");
+    r(this, "envVariables");
+    r(this, "workspace");
+    r(this, "isReadOnly");
+    this.variableName = e, this.variableName = e, this.environment = o, this.envVariables = n, this.workspace = l, this.isReadOnly = a;
   }
   toDOM() {
     const e = document.createElement("span");
     e.className = "cm-pill", e.textContent = `${this.variableName}`;
-    const a = C({
+    const o = C({
       props: { variableName: { type: String, default: null } },
       render: () => {
-        const i = S(this.activeEnvVariables.value).find(
+        const n = S(this.envVariables).find(
           (c) => c.key === this.variableName
-        ), s = i && this.activeEnvironment.value ? V(this.activeEnvironment) : "#8E8E8E";
-        e.style.setProperty("--tw-bg-base", s), e.style.opacity = i != null && i.value ? "1" : "0.5";
-        const r = i != null && i.value ? o("div", { class: "p-2" }, i.value) : o("div", { class: "divide-y divide-1/2 grid" }, [
-          o("span", { class: "p-2 opacity-25" }, "No value"),
-          !this.isReadOnly && o("div", { class: "p-1" }, [
-            o(
-              h,
+        ), l = n && this.environment ? f(this.environment) : "#8E8E8E";
+        e.style.setProperty("--tw-bg-base", l || "#8E8E8E"), e.style.opacity = n != null && n.value ? "1" : "0.5";
+        const a = n != null && n.value ? s("div", { class: "p-2" }, n.value) : s("div", { class: "divide-y divide-1/2 grid" }, [
+          s("span", { class: "p-2 opacity-25" }, "No value"),
+          !this.isReadOnly && s("div", { class: "p-1" }, [
+            s(
+              b,
               {
                 class: "gap-1.5 justify-start font-normal px-1 py-1.5 h-auto transition-colors rounded no-underline text-xxs w-full hover:bg-b-2",
                 variant: "ghost",
-                onClick: () => {
-                  window.location.href = "/environment";
-                }
+                onClick: () => window.location.href = `/workspace/${this.workspace.uid}/environment`
               },
-              [
-                o(f, {
-                  class: "w-2",
-                  icon: "Add",
-                  size: "xs"
-                }),
-                "Add variable"
-              ]
+              {
+                default: () => [
+                  s(v, {
+                    class: "w-2",
+                    icon: "Add",
+                    size: "xs"
+                  }),
+                  "Add variable"
+                ]
+              }
             )
           ])
         ]);
-        return o(
-          b,
+        return s(
+          g,
           {
             align: "center",
             class: "w-full",
@@ -59,22 +60,22 @@ class d extends N {
             sideOffset: 6
           },
           {
-            trigger: () => o("span", `${this.variableName}`),
-            content: () => o(
+            trigger: () => s("span", `${this.variableName}`),
+            content: () => s(
               "div",
               {
                 class: [
                   "border w-content rounded  bg-b-1 brightness-lifted text-xxs leading-5 text-c-1",
-                  i != null && i.value ? "border-solid" : "border-dashed"
+                  n != null && n.value ? "border-solid" : "border-dashed"
                 ]
               },
-              r
+              a
             )
           }
         );
       }
     });
-    return this.app = R(a, { variableName: this.variableName }), this.app.mount(e), e;
+    return this.app = R(o, { variableName: this.variableName }), this.app.mount(e), e;
   }
   destroy() {
     this.app && this.app.unmount();
@@ -86,31 +87,34 @@ class d extends N {
     return !1;
   }
 }
-const I = (n) => E.fromClass(
+const q = (i) => y.fromClass(
   class {
     constructor(t) {
-      l(this, "decorations");
+      r(this, "decorations");
       this.decorations = this.buildDecorations(t);
     }
     update(t) {
-      (t.docChanged || t.viewportChanged) && (this.decorations = this.buildDecorations(t.view));
+      (t.docChanged || t.viewportChanged) && requestAnimationFrame(() => {
+        this.decorations = this.buildDecorations(t.view), t.view.update([]);
+      });
     }
     buildDecorations(t) {
-      const e = new y();
-      for (const { from: a, to: i } of t.visibleRanges) {
-        const s = t.state.doc.sliceString(a, i);
-        let r;
-        for (; (r = g.VARIABLES.exec(s)) !== null; ) {
-          const c = a + r.index, p = c + r[0].length, u = r[1];
+      const e = new x();
+      for (const { from: o, to: n } of t.visibleRanges) {
+        const l = t.state.doc.sliceString(o, n);
+        let a;
+        for (; (a = w.VARIABLES.exec(l)) !== null; ) {
+          const c = o + a.index, p = c + a[0].length, m = a[1];
           e.add(
             c,
             p,
-            x.widget({
+            E.widget({
               widget: new d(
-                u,
-                n.activeEnvironment,
-                n.activeEnvVariables,
-                n.isReadOnly
+                m,
+                i.environment,
+                i.envVariables,
+                i.workspace,
+                i.isReadOnly
               ),
               side: 1
             })
@@ -123,25 +127,25 @@ const I = (n) => E.fromClass(
   {
     decorations: (t) => t.decorations
   }
-), T = w.domEventHandlers({
-  keydown(n, t) {
-    if (n.key === "Backspace") {
-      const { state: e } = t, { from: a, to: i } = e.selection.main;
-      if (a === 0 && i === e.doc.length)
+), I = N.domEventHandlers({
+  keydown(i, t) {
+    if (i.key === "Backspace") {
+      const { state: e } = t, { from: o, to: n } = e.selection.main;
+      if (o === 0 && n === e.doc.length)
         return t.dispatch({
           changes: { from: 0, to: e.doc.length },
           selection: { anchor: 0 }
-        }), n.preventDefault(), !0;
-      if (a === i && a > 0 && e.doc.sliceString(a - 2, a) === "}}")
+        }), i.preventDefault(), !0;
+      if (o === n && o > 0 && e.doc.sliceString(o - 2, o) === "}}")
         return t.dispatch({
-          changes: { from: a - 2, to: i },
-          selection: { anchor: a - 2 }
-        }), n.preventDefault(), !0;
+          changes: { from: o - 2, to: n },
+          selection: { anchor: o - 2 }
+        }), i.preventDefault(), !0;
     }
     return !1;
   }
 });
 export {
-  T as backspaceCommand,
-  I as pillPlugin
+  I as backspaceCommand,
+  q as pillPlugin
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.vue"],"names":[],"mappings":"AA8BA,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAA;IAC/B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAQF,iBAAS,cAAc;WAqDT,OAAO,IAA6B;;yBATrB,GAAG;yBACH,GAAG;;;;EAa/B;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,6SAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.vue"],"names":[],"mappings":"AAuCA,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAA;IAC/B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AASF,iBAAS,cAAc;WAuDT,OAAO,IAA6B;;yBATrB,GAAG;yBACH,GAAG;;;;EAa/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,6SAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/DataTable/DataTable.vue.js

@@ -1,31 +1,36 @@
-import { defineComponent as a, openBlock as e, createElementBlock as l, normalizeClass as s, createElementVNode as n, normalizeStyle as m, renderSlot as r, createCommentVNode as c } from "vue";
-const i = {
+import { defineComponent as t, openBlock as e, createElementBlock as l, normalizeProps as n, guardReactiveProps as m, unref as c, createElementVNode as i, normalizeClass as p, normalizeStyle as u, renderSlot as r, createCommentVNode as d } from "vue";
+import { useBindCx as f } from "@scalar/components";
+const b = {
   key: 0,
   class: "sr-only"
-}, f = /* @__PURE__ */ a({
+}, g = /* @__PURE__ */ t({
   __name: "DataTable",
   props: {
     columns: {},
     scroll: { type: Boolean }
   },
-  setup(p) {
-    return (o, u) => (e(), l("div", {
-      class: s(["border-1/2 rounded bg-b-1", o.scroll ? "overflow-x-auto custom-scroll" : "overflow-visible"])
-    }, [
-      n("table", {
-        class: s(["grid auto-rows-auto min-h-8 mb-0", { "min-w-full w-max": o.scroll }]),
-        style: m({
-          gridTemplateColumns: o.columns.map((t) => t || "1fr").join(" ")
+  setup(v) {
+    const { cx: s } = f();
+    return (o, w) => (e(), l("div", n(m(
+      c(s)(
+        o.scroll ? "overflow-x-auto custom-scroll" : "overflow-visible",
+        "scalar-data-table border-1/2 rounded bg-b-1"
+      )
+    )), [
+      i("table", {
+        class: p(["grid auto-rows-auto min-h-8 mb-0", { "min-w-full w-max": o.scroll }]),
+        style: u({
+          gridTemplateColumns: o.columns.map((a) => a || "1fr").join(" ")
         })
       }, [
-        o.$slots.caption ? (e(), l("caption", i, [
+        o.$slots.caption ? (e(), l("caption", b, [
           r(o.$slots, "caption")
-        ])) : c("", !0),
+        ])) : d("", !0),
         r(o.$slots, "default")
       ], 6)
-    ], 2));
+    ], 16));
   }
 });
 export {
-  f as default
+  g as default
 };

package/dist/components/DataTable/DataTableCell.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableCell.vue"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIpC,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACxB,CAAC;AAYJ,iBAAS,cAAc;WAqDT,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;QAjFZ,MAAM,GAAG,SAAS;6EAyFzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DataTableCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableCell.vue"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIpC,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACxB,CAAC;AAeJ,iBAAS,cAAc;WA+CT,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;QA/EZ,MAAM,GAAG,SAAS;6EAsFzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/DataTable/DataTableCell.vue.js

@@ -1,21 +1,26 @@
-import { defineComponent as r, openBlock as t, createBlock as o, resolveDynamicComponent as l, withCtx as a, renderSlot as n } from "vue";
-const m = /* @__PURE__ */ r({
+import { defineComponent as t, openBlock as o, createBlock as l, resolveDynamicComponent as n, mergeProps as s, unref as a, withCtx as i, renderSlot as p } from "vue";
+import { useBindCx as d } from "@scalar/components";
+const b = /* @__PURE__ */ t({
+  inheritAttrs: !1,
   __name: "DataTableCell",
   props: {
     is: { default: "td" }
   },
-  setup(s) {
-    return (e, d) => (t(), o(l(e.is), {
-      class: "min-h-8 min-w-8 border-l-0 border-t-0 border-b-1/2 border-r-1/2 flex text-sm last:border-r-0 group-last:border-b-transparent p-0 m-0 relative",
-      role: "cell"
-    }, {
-      default: a(() => [
-        n(e.$slots, "default")
+  setup(m) {
+    const { cx: r } = d();
+    return (e, f) => (o(), l(n(e.is), s(
+      a(r)(
+        "max-h-8 min-h-8 min-w-8 border-l-0 group-[:not(:first-child)]:border-t-1/2 border-b-0 border-r-1/2 flex text-sm last:border-r-0 group-last:border-b-transparent p-0 m-0 relative"
+      ),
+      { role: "cell" }
+    ), {
+      default: i(() => [
+        p(e.$slots, "default")
       ]),
       _: 3
-    }));
+    }, 16));
   }
 });
 export {
-  m as default
+  b as default
 };

package/dist/components/DataTable/DataTableHeader.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableHeader.vue"],"names":[],"mappings":"AAqBA,iBAAS,cAAc;WA8CT,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,+QAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DataTableHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableHeader.vue"],"names":[],"mappings":"AA6BA,iBAAS,cAAc;WA0CT,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,+QAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}