@scalar/api-client 2.3.26 → 2.3.28

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @scalar/api-client
 
+## 2.3.28
+
+### Patch Changes
+
+- 5d24800: chore: export view layout collapse component
+- Updated dependencies [5d24800]
+  - @scalar/oas-utils@0.2.138
+  - @scalar/import@0.3.21
+  - @scalar/postman-to-openapi@0.2.11
+
+## 2.3.27
+
+### Patch Changes
+
+- 1e9f510: feat: makes collection environment draggable
+- 1e9f510: fix: updates string template replacement value for operation
+- 335da88: fix: updates padding on request input with pill
+- b240f4a: feat: adds select all capability to auth scopes
+- 3cf1457: feat: updates collection server page style
+- 1e9f510: fix: environment collection management
+- 950772d: fix(api-client): make password fields not trigger browser autofill
+- f2b8732: fix: increases reponse loading overlay z index
+- b3f599f: fix: disables view layout section attribute inheritance
+- Updated dependencies [62c4ce3]
+  - @scalar/types@0.1.12
+  - @scalar/oas-utils@0.2.137
+  - @scalar/openapi-parser@0.10.16
+  - @scalar/snippetz@0.2.19
+  - @scalar/themes@0.10.4
+  - @scalar/components@0.13.54
+  - @scalar/draggable@0.1.11
+  - @scalar/icons@0.3.3
+  - @scalar/import@0.3.20
+  - @scalar/object-utils@1.1.13
+  - @scalar/openapi-types@0.2.1
+  - @scalar/postman-to-openapi@0.2.10
+  - @scalar/use-codemirror@0.11.99
+  - @scalar/use-hooks@0.1.46
+  - @scalar/use-toasts@0.7.9
+  - @scalar/use-tooltip@1.0.6
+
 ## 2.3.26
 
 ### Patch Changes

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

@@ -1,6 +1,6 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
 import type { Workspace } from '@scalar/oas-utils/entities/workspace';
-import { type CodeMirrorLanguage } from '@scalar/use-codemirror';
+import { type CodeMirrorLanguage, type Extension } from '@scalar/use-codemirror';
 import { type Ref } from 'vue';
 import type { EnvVariable } from '../../store/active-entities';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
@@ -9,6 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: string | number;
     error?: boolean;
     emitOnBlur?: boolean;
+    extensions?: Extension[];
     lineNumbers?: boolean;
     lint?: boolean;
     disableTabIndent?: boolean;
@@ -51,6 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: string | number;
     error?: boolean;
     emitOnBlur?: boolean;
+    extensions?: Extension[];
     lineNumbers?: boolean;
     lint?: boolean;
     disableTabIndent?: boolean;
@@ -83,6 +85,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     colorPicker: boolean;
     emitOnBlur: boolean;
+    extensions: Extension[];
     disableTabIndent: boolean;
     disableEnter: boolean;
     disableCloseBrackets: boolean;

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":"AAuhBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAA;AAErE,OAAO,EAIL,KAAK,kBAAkB,EAExB,MAAM,wBAAwB,CAAA;AAG/B,OAAO,EAAyC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAGrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;;kBAYxC,OAAO;eACV,OAAO;gBACN,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;eACJ,MAAM,EAAE;WACZ,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;eACzB,OAAO;oBACF,OAAO;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;iBACZ,WAAW;kBACV,WAAW,EAAE;eAChB,SAAS;mBACL,OAAO;;IAqLxB,0BAA0B;;0BAxIC,MAAM;0BA0BN,MAAM;wBAOR,MAAM;;;;;;;;;;kBAxGf,OAAO;eACV,OAAO;gBACN,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;eACJ,MAAM,EAAE;WACZ,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;eACzB,OAAO;oBACF,OAAO;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;iBACZ,WAAW;kBACV,WAAW,EAAE;eAChB,SAAS;mBACL,OAAO;;;;;;;cARX,OAAO;cAjBP,OAAO;iBADJ,OAAO;gBAIR,OAAO;sBAGD,OAAO;kBAMX,OAAO;0BACC,OAAO;mBAKd,OAAO;gBAEV,OAAO;kBAKL,OAAO;;qBAkiBI,GAAG;kBACN,GAAG;;AAhkB9B,wBA2nBC;AAeD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CodeInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.vue"],"names":[],"mappings":"AAkiBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAA;AAErE,OAAO,EAIL,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACf,MAAM,wBAAwB,CAAA;AAG/B,OAAO,EAAyC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAGrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;;kBAYxC,OAAO;eACV,OAAO;gBACN,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;iBACP,SAAS,EAAE;kBACV,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;eACJ,MAAM,EAAE;WACZ,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;eACzB,OAAO;oBACF,OAAO;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;iBACZ,WAAW;kBACV,WAAW,EAAE;eAChB,SAAS;mBACL,OAAO;;IA+LxB,0BAA0B;;0BAjJC,MAAM;0BA0BN,MAAM;wBAOR,MAAM;;;;;;;;;;kBA1Gf,OAAO;eACV,OAAO;gBACN,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;iBACP,SAAS,EAAE;kBACV,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;eACJ,MAAM,EAAE;WACZ,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;eACzB,OAAO;oBACF,OAAO;iBACV,OAAO;iBACP,OAAO;cACV,MAAM,GAAG,MAAM;iBACZ,WAAW;kBACV,WAAW,EAAE;eAChB,SAAS;mBACL,OAAO;;;;;;;cARX,OAAO;cAlBP,OAAO;iBADJ,OAAO;gBAIR,OAAO;gBACP,SAAS,EAAE;sBAGL,OAAO;kBAMX,OAAO;0BACC,OAAO;mBAKd,OAAO;gBAEV,OAAO;kBAKL,OAAO;;qBA6iBI,GAAG;kBACN,GAAG;;AA5kB9B,wBAuoBC;AAeD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

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

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

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

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":"AACA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,oBAAoB,CAAA;AAEnE,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;AA+H/B;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW;IAChC,WAAW,EAAE,WAAW,GAAG,SAAS,CAAA;IACpC,YAAY,EAAE,YAAY,GAAG,SAAS,CAAA;IACtC,SAAS,EAAE,SAAS,GAAG,SAAS,CAAA;IAChC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAA;CAChC;iBAGkB,aAAa;mBAMX,UAAU;2BASF,UAAU;EAkCpC,CAAA;AAEH,eAAO,MAAM,gBAAgB,uCA8B3B,CAAA"}
+{"version":3,"file":"codeVariableWidget.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/codeVariableWidget.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,oBAAoB,CAAA;AAEnE,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;AAuI/B;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW;IAChC,WAAW,EAAE,WAAW,GAAG,SAAS,CAAA;IACpC,YAAY,EAAE,YAAY,GAAG,SAAS,CAAA;IACtC,SAAS,EAAE,SAAS,GAAG,SAAS,CAAA;IAChC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAA;CAChC;iBAGkB,aAAa;mBAMX,UAAU;2BASF,UAAU;EAkCpC,CAAA;AAEH,eAAO,MAAM,gBAAgB,uCA8B3B,CAAA"}

package/dist/components/CodeInput/codeVariableWidget.js

@@ -1,46 +1,52 @@
-var h = Object.defineProperty;
-var u = (n, t, e) => t in n ? h(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var l = (n, t, e) => u(n, 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 V } from "vue";
-import { parseEnvVariables as R } from "../../libs/environment-parser.js";
-class d extends k {
-  constructor(e, o, i, c, a) {
+var f = Object.defineProperty;
+var b = (n, t, e) => t in n ? f(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var r = (n, t, e) => b(n, typeof t != "symbol" ? t + "" : t, e);
+import { getEnvColor as v } from "../../libs/env-helpers.js";
+import { ScalarIcon as h, ScalarButton as g, ScalarTooltip as w } from "@scalar/components";
+import { REGEX as y } from "@scalar/oas-utils/helpers";
+import { ViewPlugin as x, RangeSetBuilder as F, Decoration as N, EditorView as k, WidgetType as C } from "@scalar/use-codemirror";
+import { defineComponent as E, h as s, createApp as V } from "vue";
+import { nanoid as R } from "nanoid";
+import { parseEnvVariables as S } from "../../libs/environment-parser.js";
+class u extends C {
+  constructor(e, o, i, l, a) {
     super();
-    l(this, "app");
-    l(this, "environment");
-    l(this, "envVariables");
-    l(this, "workspace");
-    l(this, "isReadOnly");
-    this.variableName = e, this.variableName = e, this.environment = o, this.envVariables = i, this.workspace = c, this.isReadOnly = a ?? !1;
+    r(this, "app");
+    r(this, "uid");
+    r(this, "environment");
+    r(this, "envVariables");
+    r(this, "workspace");
+    r(this, "isReadOnly");
+    this.variableName = e, this.variableName = e, this.environment = o, this.envVariables = i, this.workspace = l, this.isReadOnly = a ?? !1, this.uid = R();
   }
   toDOM() {
     const e = document.createElement("span");
     e.className = "cm-pill", e.textContent = `${this.variableName}`;
-    const o = C({
+    const o = E({
       props: { variableName: { type: String, default: null } },
       render: () => {
-        const i = this.envVariables ? R(this.envVariables).find((r) => r.key === this.variableName) : void 0, c = i && this.environment ? f(this.environment) : "#8E8E8E";
-        e.style.setProperty("--tw-bg-base", c || "#8E8E8E"), e.style.opacity = i != null && i.value ? "1" : "0.5";
-        const a = i != null && i.value ? s("div", { class: "p-2" }, i.value) : s("div", { class: "divide-y divide-1/2 grid" }, [
+        var d;
+        const i = this.envVariables ? S(this.envVariables).find((m) => m.key === this.variableName) : void 0, l = (i == null ? void 0 : i.source) === "global", a = l ? "#FFFFFF" : i && this.environment ? v(this.environment) : "#FFFFFF";
+        e.style.setProperty("--tw-bg-base", a), e.style.opacity = i != null && i.value ? "1" : "0.5";
+        const c = s("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [
+          (l || ((d = this.environment) == null ? void 0 : d.name) === "No Environment" && (i == null ? void 0 : i.value)) && s(h, { class: "size-2.5 -ml-1", icon: "Globe" }),
+          s("span", this.variableName)
+        ]), p = i != null && i.value ? s("div", { class: "p-2" }, i.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,
+              g,
               {
                 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: () => {
-                  var r;
-                  window.location.href = `/workspace/${(r = this.workspace) == null ? void 0 : r.uid}/environment`;
+                  var m;
+                  window.location.href = `/workspace/${(m = this.workspace) == null ? void 0 : m.uid}/environment`;
                 }
               },
               {
                 default: () => [
-                  s(v, {
+                  s(h, {
                     class: "w-2",
                     icon: "Add",
                     size: "xs"
@@ -52,7 +58,7 @@ class d extends k {
           ])
         ]);
         return s(
-          g,
+          w,
           {
             align: "center",
             class: "w-full",
@@ -61,16 +67,13 @@ class d extends k {
             sideOffset: 6
           },
           {
-            trigger: () => s("span", `${this.variableName}`),
+            trigger: () => c,
             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"
-                ]
+                class: ["border w-content rounded bg-b-1 brightness-lifted text-xxs leading-5 text-c-1"]
               },
-              a
+              p
             )
           }
         );
@@ -82,16 +85,16 @@ class d extends k {
     this.app && this.app.unmount();
   }
   eq(e) {
-    return e instanceof d && e.variableName === this.variableName;
+    return e instanceof u && e.variableName === this.variableName && e.uid === this.uid;
   }
   ignoreEvent() {
     return !1;
   }
 }
-const q = (n) => y.fromClass(
+const z = (n) => x.fromClass(
   class {
     constructor(t) {
-      l(this, "decorations");
+      r(this, "decorations");
       this.decorations = this.buildDecorations(t);
     }
     update(t) {
@@ -100,18 +103,18 @@ const q = (n) => y.fromClass(
       });
     }
     buildDecorations(t) {
-      const e = new x();
+      const e = new F();
       for (const { from: o, to: i } of t.visibleRanges) {
-        const c = t.state.doc.sliceString(o, i);
+        const l = t.state.doc.sliceString(o, i);
         let a;
-        for (; (a = w.VARIABLES.exec(c)) !== null; ) {
-          const r = o + a.index, p = r + a[0].length, m = a[1] ?? "";
+        for (; (a = y.VARIABLES.exec(l)) !== null; ) {
+          const c = o + a.index, p = c + a[0].length, d = a[1] ?? "";
           e.add(
-            r,
+            c,
             p,
-            E.widget({
-              widget: new d(
-                m,
+            N.widget({
+              widget: new u(
+                d,
                 n.environment,
                 n.envVariables,
                 n.workspace,
@@ -128,7 +131,7 @@ const q = (n) => y.fromClass(
   {
     decorations: (t) => t.decorations
   }
-), I = N.domEventHandlers({
+), I = k.domEventHandlers({
   keydown(n, t) {
     if (n.key === "Backspace") {
       const { state: e } = t, { from: o, to: i } = e.selection.main;
@@ -148,5 +151,5 @@ const q = (n) => y.fromClass(
 });
 export {
   I as backspaceCommand,
-  q as pillPlugin
+  z as pillPlugin
 };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/CodeInput/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./CodeInput.vue.js";
+export {
+  t as CodeInput
+};

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

@@ -19,6 +19,7 @@ type __VLS_Props = {
     envVariables: EnvVariable[];
     workspace: Workspace;
     description?: string | undefined;
+    lineWrapping?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -37,6 +38,7 @@ declare function __VLS_template(): {
                 readonly modelValue: string | number;
                 readonly error?: boolean;
                 readonly emitOnBlur?: boolean;
+                readonly extensions?: import("@codemirror/state").Extension[];
                 readonly lineNumbers?: boolean;
                 readonly lint?: boolean;
                 readonly disableTabIndent?: boolean;
@@ -84,6 +86,7 @@ declare function __VLS_template(): {
                 modelValue: string | number;
                 error?: boolean;
                 emitOnBlur?: boolean;
+                extensions?: import("@codemirror/state").Extension[];
                 lineNumbers?: boolean;
                 lint?: boolean;
                 disableTabIndent?: boolean;
@@ -129,6 +132,7 @@ declare function __VLS_template(): {
                 disabled: boolean;
                 colorPicker: boolean;
                 emitOnBlur: boolean;
+                extensions: import("@codemirror/state").Extension[];
                 disableTabIndent: boolean;
                 disableEnter: boolean;
                 disableCloseBrackets: boolean;
@@ -160,6 +164,7 @@ declare function __VLS_template(): {
             disabled: boolean;
             colorPicker: boolean;
             emitOnBlur: boolean;
+            extensions: import("@codemirror/state").Extension[];
             disableTabIndent: boolean;
             disableEnter: boolean;
             disableCloseBrackets: boolean;
@@ -172,6 +177,7 @@ declare function __VLS_template(): {
             modelValue: string | number;
             error?: boolean;
             emitOnBlur?: boolean;
+            extensions?: import("@codemirror/state").Extension[];
             lineNumbers?: boolean;
             lint?: boolean;
             disableTabIndent?: boolean;
@@ -199,7 +205,7 @@ declare function __VLS_template(): {
             "onUpdate:modelValue"?: (v: string) => any;
             onBlur?: (v: string) => any;
             onCurl?: (v: string) => any;
-        }>, "modelValue" | "handleBlur" | "focus" | "codeMirror" | "handleChange" | "handleSubmit" | "booleanOptions" | ("nullable" | "disabled" | "colorPicker" | "emitOnBlur" | "disableTabIndent" | "disableEnter" | "disableCloseBrackets" | "withVariables" | "isCopyable" | "lineWrapping")> & import("vue").ShallowUnwrapRef<{
+        }>, "modelValue" | "handleBlur" | "focus" | "codeMirror" | "handleChange" | "handleSubmit" | "booleanOptions" | ("nullable" | "disabled" | "colorPicker" | "emitOnBlur" | "extensions" | "disableTabIndent" | "disableEnter" | "disableCloseBrackets" | "withVariables" | "isCopyable" | "lineWrapping")> & import("vue").ShallowUnwrapRef<{
             focus: () => void;
             handleChange: (value: string) => void | null;
             handleSubmit: (value: string) => void;
@@ -230,6 +236,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }>, {
     required: boolean;
     readOnly: boolean;
+    lineWrapping: boolean;
     canAddCustomEnumValue: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;