@scalar/api-client 2.9.0 → 2.10.0

package/dist/v2/features/environments/EnvironmentsList.vue.js

@@ -1,114 +1,66 @@
-import { defineComponent as V, ref as E, createElementBlock as u, openBlock as m, Fragment as S, createCommentVNode as i, createVNode as p, createBlock as v, renderList as y, unref as o, withCtx as F, createTextVNode as U } from "vue";
-import { useModal as s, ScalarButton as $ } from "@scalar/components";
-import { ScalarIconPlus as g } from "@scalar/icons";
-import w from "./components/EnvironmentColorUpdateModal.vue.js";
-import C from "./components/EnvironmentCreateModal.vue.js";
-import M from "./components/EnvironmentDeleteModal.vue.js";
-import B from "./components/EnvironmentNameUpdateModal.vue.js";
-import D from "./components/Environment.vue.js";
-const x = {
-  key: 0,
-  class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4"
-}, q = /* @__PURE__ */ V({
+import { defineComponent as E, ref as y, createElementBlock as u, openBlock as s, Fragment as v, createElementVNode as T, createVNode as l, renderList as b, createBlock as g, unref as r, withCtx as h, createTextVNode as k } from "vue";
+import { useModal as d, ScalarButton as M } from "@scalar/components";
+import { ScalarIconPlus as N } from "@scalar/icons";
+import S from "./components/EnvironmentCreateModal.vue.js";
+import w from "./components/EnvironmentDeleteModal.vue.js";
+import C from "./components/Environment.vue.js";
+const D = { class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4" }, z = /* @__PURE__ */ E({
   __name: "EnvironmentsList",
   props: {
-    documentName: {},
     environments: {},
-    environment: {},
-    envVariables: {}
+    eventBus: {},
+    collectionType: {}
   },
-  emits: ["environment:reorder", "environment:add", "environment:update", "environment:delete", "environment:add:variable", "environment:update:variable", "environment:delete:variable"],
-  setup(A, { emit: k }) {
-    const a = k, b = s(), f = s(), c = s(), N = s(), t = E(null);
-    return (l, n) => (m(), u(S, null, [
-      (m(!0), u(S, null, y(l.environments, (e) => (m(), v(D, {
-        key: e.name,
-        color: e.color,
-        envVariables: l.envVariables,
-        environment: l.environment,
-        isReadonly: !l.documentName,
-        name: e.name,
-        variables: e.variables,
-        "onAdd:variable": (r) => a("environment:add:variable", {
-          environmentName: e.name,
-          environmentVariable: r
-        }),
-        onDelete: () => {
-          t.value = e, o(f).show();
-        },
-        "onDelete:variable": ({ id: r }) => a("environment:delete:variable", {
-          environmentName: e.name,
-          id: r
-        }),
-        onReorder: n[0] || (n[0] = (r, d) => a("environment:reorder", {
-          draggingItem: r,
-          hoveredItem: d
-        })),
-        "onUpdate:color": () => {
-          t.value = e, o(N).show();
-        },
-        "onUpdate:name": () => {
-          t.value = e, o(c).show();
-        },
-        "onUpdate:variable": ({ id: r, value: d }) => a("environment:update:variable", {
-          environmentName: e.name,
-          id: r,
-          environmentVariable: d
-        })
-      }, null, 8, ["color", "envVariables", "environment", "isReadonly", "name", "variables", "onAdd:variable", "onDelete", "onDelete:variable", "onUpdate:color", "onUpdate:name", "onUpdate:variable"]))), 128)),
-      l.documentName !== null ? (m(), u("div", x, [
-        p(o($), {
+  setup(i) {
+    const m = d(), c = d(), n = y(null), p = (e) => {
+      n.value = e, c.show();
+    }, f = () => {
+      n.value && i.eventBus.emit("environment:delete:environment", {
+        environmentName: n.value,
+        collectionType: i.collectionType
+      });
+    }, a = (e) => {
+      n.value = e ?? null, m.show();
+    };
+    return (e, t) => (s(), u(v, null, [
+      (s(!0), u(v, null, b(Object.entries(e.environments), ([o, B]) => (s(), g(C, {
+        key: o,
+        collectionType: e.collectionType,
+        environment: B,
+        environmentName: o,
+        eventBus: e.eventBus,
+        onDelete: () => p(o),
+        onEdit: () => a(o)
+      }, null, 8, ["collectionType", "environment", "environmentName", "eventBus", "onDelete", "onEdit"]))), 128)),
+      T("div", D, [
+        l(r(M), {
           class: "hover:bg-b-2 hover:text-c-1 flex items-center gap-2",
           size: "sm",
           variant: "ghost",
-          onClick: n[1] || (n[1] = (e) => o(b).show())
+          onClick: t[0] || (t[0] = () => a())
         }, {
-          default: F(() => [
-            p(o(g)),
-            n[6] || (n[6] = U(" Add Environment ", -1))
+          default: h(() => [
+            l(r(N)),
+            t[1] || (t[1] = k(" Add Environment ", -1))
           ]),
           _: 1
         })
-      ])) : i("", !0),
-      p(C, {
-        state: o(b),
-        onSubmit: n[2] || (n[2] = (e) => a("environment:add", {
-          environment: {
-            name: e.name,
-            color: e.color,
-            variables: []
-          }
-        }))
-      }, null, 8, ["state"]),
-      t.value ? (m(), v(M, {
-        key: 1,
-        name: t.value.name,
-        state: o(f),
-        onSubmit: n[3] || (n[3] = () => a("environment:delete", {
-          environmentName: t.value.name
-        }))
-      }, null, 8, ["name", "state"])) : i("", !0),
-      t.value ? (m(), v(B, {
-        key: 2,
-        name: t.value.name,
-        state: o(c),
-        onSubmit: n[4] || (n[4] = (e) => a("environment:update", {
-          environmentName: t.value.name,
-          environment: { name: e.name }
-        }))
-      }, null, 8, ["name", "state"])) : i("", !0),
-      t.value ? (m(), v(w, {
-        key: 3,
-        color: t.value.color || "#FFFFFF",
-        state: o(N),
-        onSubmit: n[5] || (n[5] = (e) => a("environment:update", {
-          environmentName: t.value.name,
-          environment: { color: e.color }
-        }))
-      }, null, 8, ["color", "state"])) : i("", !0)
+      ]),
+      l(S, {
+        collectionType: e.collectionType,
+        environments: e.environments,
+        eventBus: e.eventBus,
+        selectedEnvironmentName: n.value,
+        state: r(m)
+      }, null, 8, ["collectionType", "environments", "eventBus", "selectedEnvironmentName", "state"]),
+      l(w, {
+        name: n.value,
+        state: r(c),
+        onSubmit: f
+      }, null, 8, ["name", "state"])
     ], 64));
   }
 });
 export {
-  q as default
+  z as default
 };

package/dist/v2/features/environments/components/Environment.vue.d.ts

@@ -1,70 +1,16 @@
-import type { Environment as EntitiesEnvironment } from '@scalar/oas-utils/entities/environment';
-import type { EnvVariable } from '../../../../store/index.js';
-export type EnvironmentVariable = {
-    name: string;
-    value: string;
-};
-export type Environment = {
-    name: string;
-    color?: string;
-    variables: EnvironmentVariable[];
-};
+import type { CollectionType, WorkspaceEventBus } from '@scalar/workspace-store/events';
+import type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments';
 type __VLS_Props = {
-    /** Environment name */
-    name: string;
-    /** Environment color */
-    color?: string;
-    /** List of all environment variables */
-    variables: EnvironmentVariable[];
-    /** Marks the environment as readonly */
-    isReadonly?: boolean;
-    /** TODO: remove when we migrate to the new store */
-    environment: EntitiesEnvironment;
-    envVariables: EnvVariable[];
-};
-type __VLS_Slots = {
-    default?(): unknown;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    environment: XScalarEnvironment;
+    environmentName: string;
+    eventBus: WorkspaceEventBus;
+} & CollectionType;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: () => any;
-    "update:variable": (payload: {
-        id: number;
-        value: Partial<EnvironmentVariable>;
-    }) => any;
-    reorder: (draggingItem: {
-        id: string;
-    }, hoveredItem: {
-        id: string;
-    }) => any;
-    "add:variable": (payload: Partial<EnvironmentVariable>) => any;
-    "update:name": () => any;
-    "update:color": () => any;
-    "delete:variable": (payload: {
-        id: number;
-    }) => any;
+    edit: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: (() => any) | undefined;
-    "onUpdate:variable"?: ((payload: {
-        id: number;
-        value: Partial<EnvironmentVariable>;
-    }) => any) | undefined;
-    onReorder?: ((draggingItem: {
-        id: string;
-    }, hoveredItem: {
-        id: string;
-    }) => any) | undefined;
-    "onAdd:variable"?: ((payload: Partial<EnvironmentVariable>) => any) | undefined;
-    "onUpdate:name"?: (() => any) | undefined;
-    "onUpdate:color"?: (() => any) | undefined;
-    "onDelete:variable"?: ((payload: {
-        id: number;
-    }) => any) | undefined;
+    onEdit?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
 //# sourceMappingURL=Environment.vue.d.ts.map

package/dist/v2/features/environments/components/Environment.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Environment.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"names":[],"mappings":"AA6IA,OAAO,KAAK,EAAE,WAAW,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAEhG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,mBAAmB,EAAE,CAAA;CACjC,CAAA;AAED,KAAK,WAAW,GAAG;IACjB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,SAAS,EAAE,mBAAmB,EAAE,CAAA;IAChC,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,oDAAoD;IACpD,WAAW,EAAE,mBAAmB,CAAA;IAChC,YAAY,EAAE,WAAW,EAAE,CAAA;CAC5B,CAAC;AAwBF,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,OAAO,CAAA;CACpB,CAAC;AA6QF,QAAA,MAAM,eAAe;;;YAvRX,MAAM;eACH,OAAO,CAAC,mBAAmB,CAAC;;;YAVjB,MAAM;;YACP,MAAM;;;;;;YAYW,MAAM;;;;;YAJpC,MAAM;eACH,OAAO,CAAC,mBAAmB,CAAC;;;YAVjB,MAAM;;YACP,MAAM;;;;;;YAYW,MAAM;;kFA0R5C,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Environment.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"names":[],"mappings":"AAmEA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAInH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;;;;;;;;AA6JrB,wBAOG"}

package/dist/v2/features/environments/components/Environment.vue.js

@@ -1,104 +1,53 @@
-import { defineComponent as g, createBlock as t, openBlock as l, unref as r, withCtx as s, createElementVNode as d, renderSlot as k, createCommentVNode as c, createElementBlock as u, normalizeStyle as p, createTextVNode as F, toDisplayString as v, createVNode as b } from "vue";
-import { ScalarButton as i } from "@scalar/components";
-import { Draggable as w } from "@scalar/draggable";
-import { ScalarIconTrash as R } from "@scalar/icons";
-import V from "./EnvironmentVariablesTable.vue.js";
-const h = { class: "bg-b-2 flex cursor-grab justify-between rounded-t-lg px-1 py-1 text-sm" }, C = { class: "flex items-center gap-1" }, D = {
-  key: 1,
-  class: "flex h-6 w-6 items-center justify-center p-1"
-}, E = {
-  key: 3,
-  class: "px-1 py-0.5 text-sm"
-}, j = /* @__PURE__ */ g({
+import { defineComponent as c, createElementBlock as a, openBlock as d, createElementVNode as n, createVNode as i, normalizeStyle as p, toDisplayString as v, unref as t } from "vue";
+import { ScalarIconButton as r } from "@scalar/components";
+import { ScalarIconNotePencil as u, ScalarIconTrash as f } from "@scalar/icons";
+import y from "./EnvironmentVariablesTable.vue.js";
+const _ = { class: "group rounded-lg border" }, b = { class: "bg-b-2 flex justify-between rounded-t-lg px-1 py-1 text-sm" }, g = { class: "flex items-center gap-1" }, h = { class: "flex h-6 w-6 items-center justify-center p-1" }, N = { class: "px-1 py-0.5 text-sm" }, B = { class: "hidden flex-row items-center gap-1 group-hover:flex" }, w = /* @__PURE__ */ c({
   __name: "Environment",
   props: {
-    name: {},
-    color: {},
-    variables: {},
-    isReadonly: { type: Boolean, default: !1 },
     environment: {},
-    envVariables: {}
+    environmentName: {},
+    eventBus: {},
+    collectionType: {}
   },
-  emits: ["delete", "reorder", "add:variable", "update:name", "update:color", "update:variable", "delete:variable"],
-  setup(B, { emit: f }) {
-    const o = f, y = (e, a) => {
-      o("reorder", e, a);
-    };
-    return (e, a) => (l(), t(r(w), {
-      id: e.name,
-      class: "rounded-lg border",
-      isDraggable: !0,
-      isDroppable: !0,
-      parentIds: [],
-      onOnDragEnd: y
-    }, {
-      default: s(() => [
-        d("div", h, [
-          d("div", C, [
-            e.isReadonly ? (l(), u("div", D, [
-              d("span", {
-                class: "h-2.5 w-2.5 rounded-full",
-                style: p({ backgroundColor: e.color || "#FFFFFF" })
-              }, null, 4)
-            ])) : (l(), t(r(i), {
-              key: 0,
-              class: "hover:bg-b-3 flex h-6 w-6 p-1",
-              disabled: e.isReadonly,
-              variant: "ghost",
-              onClick: a[0] || (a[0] = (n) => o("update:color"))
-            }, {
-              default: s(() => [
-                d("span", {
-                  class: "h-2.5 w-2.5 rounded-full",
-                  style: p({ backgroundColor: e.color || "#FFFFFF" })
-                }, null, 4)
-              ]),
-              _: 1
-            }, 8, ["disabled"])),
-            e.isReadonly ? (l(), u("span", E, v(e.name), 1)) : (l(), t(r(i), {
-              key: 2,
-              class: "hover:bg-b-3 rounded px-1 py-0.5 text-sm",
-              disabled: e.isReadonly,
-              variant: "ghost",
-              onClick: a[1] || (a[1] = (n) => o("update:name"))
-            }, {
-              default: s(() => [
-                F(v(e.name), 1)
-              ]),
-              _: 1
-            }, 8, ["disabled"]))
+  emits: ["edit", "delete"],
+  setup(E, { emit: s }) {
+    const l = s;
+    return (e, o) => (d(), a("div", _, [
+      n("div", b, [
+        n("div", g, [
+          n("div", h, [
+            n("span", {
+              class: "h-2.5 w-2.5 rounded-full",
+              style: p({ backgroundColor: e.environment.color })
+            }, null, 4)
           ]),
-          e.isReadonly ? c("", !0) : (l(), t(r(i), {
-            key: 0,
-            class: "text-c-2 hover:text-c-1 hover:bg-b-3 h-fit rounded p-1",
-            size: "sm",
-            variant: "ghost",
-            onClick: a[2] || (a[2] = (n) => o("delete"))
-          }, {
-            default: s(() => [
-              b(r(R), { class: "size-3.5" })
-            ]),
-            _: 1
-          }))
+          n("span", N, v(e.environmentName), 1)
         ]),
-        k(e.$slots, "default", {}, () => [
-          b(V, {
-            data: e.variables,
-            envVariables: e.envVariables,
-            environment: e.environment,
-            onAddRow: a[3] || (a[3] = (n) => o("add:variable", { name: n.name, value: n.value })),
-            onDeleteRow: a[4] || (a[4] = (n) => o("delete:variable", { id: n })),
-            onUpdateRow: a[5] || (a[5] = (n, m) => o("update:variable", {
-              id: n,
-              value: { name: m.name, value: m.value }
-            }))
-          }, null, 8, ["data", "envVariables", "environment"])
+        n("div", B, [
+          i(t(r), {
+            icon: t(u),
+            label: "Edit Environment",
+            size: "sm",
+            onClick: o[0] || (o[0] = (m) => l("edit"))
+          }, null, 8, ["icon"]),
+          i(t(r), {
+            icon: t(f),
+            label: "Delete Environment",
+            size: "sm",
+            onClick: o[1] || (o[1] = (m) => l("delete"))
+          }, null, 8, ["icon"])
         ])
       ]),
-      _: 3
-    }, 8, ["id"]));
+      i(y, {
+        collectionType: e.collectionType,
+        environment: e.environment,
+        environmentName: e.environmentName,
+        eventBus: e.eventBus
+      }, null, 8, ["collectionType", "environment", "environmentName", "eventBus"])
+    ]));
   }
 });
 export {
-  j as default
+  w as default
 };

package/dist/v2/features/environments/components/EnvironmentColors.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentColors.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"names":[],"mappings":"AA2IA,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAC;;;;;;AAoQF,wBAOG"}
+{"version":3,"file":"EnvironmentColors.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"names":[],"mappings":"AA6LA,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAC;;;;;;AAyUF,wBAOG"}

package/dist/v2/features/environments/components/EnvironmentColors.vue.js

@@ -1,97 +1,121 @@
-import { defineComponent as z, ref as d, computed as m, createElementBlock as v, openBlock as s, createElementVNode as r, Fragment as B, renderList as E, normalizeStyle as C, createBlock as h, createCommentVNode as x, unref as f, withDirectives as I, vModelText as D, createVNode as V, nextTick as $ } from "vue";
-import { ScalarIcon as p } from "@scalar/components";
-const j = {
-  key: 0,
-  class: "flex min-h-10 min-w-[296px] flex-row items-center justify-between gap-1.5 space-x-1"
-}, N = ["onClick"], R = {
+import { defineComponent as D, ref as d, computed as m, createElementBlock as a, openBlock as l, createCommentVNode as c, normalizeStyle as v, createBlock as k, unref as C, createElementVNode as s, Fragment as S, renderList as $, withDirectives as j, vModelText as N, createVNode as T, nextTick as V } from "vue";
+import { ScalarIcon as f } from "@scalar/components";
+const A = {
   key: 1,
-  class: "flex min-h-10 flex-1 items-center gap-2 rounded"
-}, S = ["placeholder"], T = "linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));", O = /* @__PURE__ */ z({
+  class: "color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1"
+}, R = ["onClick"], L = {
+  key: 2,
+  class: "color-selector flex h-4 flex-1 items-center gap-2 rounded"
+}, U = ["placeholder"], W = "linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))", P = /* @__PURE__ */ D({
   __name: "EnvironmentColors",
   props: {
     activeColor: {}
   },
   emits: ["select"],
-  setup(c, { emit: y }) {
-    const w = y, a = d(""), t = m({
-      get: () => a.value,
-      set: (e) => {
-        e && !e.startsWith("#") ? a.value = `#${e}` : a.value = e, e && (n.value = !0);
-      }
-    }), u = d(null), n = d(!1), i = [
-      { color: "#FFFFFF" },
-      { color: "#EF0006" },
-      { color: "#EDBE20" },
-      { color: "#069061" },
-      { color: "#FB892C" },
-      { color: "#0082D0" },
-      { color: "#5203D1" },
-      { color: "#FFC0CB" }
-    ], F = m(() => c.activeColor && !i.some((e) => e.color === c.activeColor) || t.value), k = m(() => `background: ${F.value ? c.activeColor ?? t.value : T}`), b = () => {
-      n.value = !n.value, $(() => {
-        u.value && u.value.focus();
-      });
-    }, g = (e) => {
-      w("select", e);
+  setup(i, { emit: w }) {
+    const F = w, t = d(""), p = d(null), r = d(!1), n = d(!1), b = [
+      "#FFFFFF",
+      "#EF0006",
+      "#EDBE20",
+      "#069061",
+      "#FB892C",
+      "#0082D0",
+      "#5203D1",
+      "#FFC0CB"
+    ], E = m(
+      () => b.includes(i.activeColor)
+    ), h = m(
+      () => i.activeColor && !E.value && !r.value
+    ), I = (e) => i.activeColor === e, y = m(() => {
+      const e = t.value || i.activeColor;
+      return h.value || t.value ? `background-color: ${e};` : `background: ${W};`;
+    }), g = async () => {
+      r.value = !r.value, n.value = !1, r.value && (await V(), p.value?.focus());
+    }, z = () => {
+      n.value = !n.value;
+    }, x = (e) => {
+      const o = e && !e.startsWith("#") ? `#${e}` : e;
+      F("select", o), n.value = !1;
+    }, B = () => {
+      if (!t.value)
+        return;
+      const e = t.value.startsWith("#") ? t.value : `#${t.value}`;
+      t.value = e, x(e);
     };
-    return (e, l) => n.value ? (s(), v("div", R, [
-      l[3] || (l[3] = r("span", { class: "absolute h-5 w-5 rounded-full border border-dashed" }, null, -1)),
-      r("span", {
-        class: "z-[1] h-5 w-5 rounded-full",
-        style: C(k.value)
-      }, null, 4),
-      I(r("input", {
-        ref_key: "customColorInputRef",
-        ref: u,
-        "onUpdate:modelValue": l[0] || (l[0] = (o) => t.value = o),
-        class: "w-full flex-1 border-transparent text-sm outline-none",
-        placeholder: e.activeColor || "#000000",
-        type: "text",
-        onInput: l[1] || (l[1] = (o) => g(t.value))
-      }, null, 40, S), [
-        [D, t.value]
-      ]),
-      r("button", {
-        class: "text-c-3 hover:bg-b-2 rounded-lg p-1.5",
-        type: "button",
-        onClick: b
+    return (e, o) => (l(), a("div", null, [
+      !r.value && !n.value ? (l(), a("div", {
+        key: 0,
+        class: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full",
+        style: v({ backgroundColor: e.activeColor }),
+        onClick: z
       }, [
-        V(f(p), {
-          icon: "Checkmark",
-          size: "xs"
-        })
-      ])
-    ])) : (s(), v("div", j, [
-      (s(), v(B, null, E(i, (o) => r("div", {
-        key: o.color,
-        class: "flex h-5 w-5 cursor-pointer items-center justify-center rounded-full",
-        "data-testid": "color-option",
-        style: C({ backgroundColor: o.color }),
-        onClick: (G) => g(o.color)
-      }, [
-        e.activeColor === o.color && !t.value ? (s(), h(f(p), {
-          key: 0,
-          class: "text-c-btn",
-          icon: "Checkmark",
-          size: "xs"
-        })) : x("", !0)
-      ], 12, N)), 64)),
-      l[2] || (l[2] = r("hr", { class: "border-ghost h-5 w-0.5 border-l" }, null, -1)),
-      r("label", {
-        class: "z-10 flex h-5 w-5 cursor-pointer flex-row items-center justify-center gap-2 rounded-full",
-        style: C(k.value),
-        onClick: b
-      }, [
-        !n.value && (e.activeColor === t.value || e.activeColor && !i.some((o) => o.color === e.activeColor)) ? (s(), h(f(p), {
+        e.activeColor ? (l(), k(C(f), {
           key: 0,
-          class: "text-c-btn",
+          class: "text-c-btn p-0.5",
           icon: "Checkmark",
           size: "xs"
-        })) : x("", !0)
-      ], 4)
+        })) : c("", !0)
+      ], 4)) : c("", !0),
+      !r.value && n.value ? (l(), a("div", A, [
+        (l(), a(S, null, $(b, (u) => s("div", {
+          key: u,
+          class: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full",
+          style: v({ backgroundColor: u }),
+          onClick: (G) => x(u)
+        }, [
+          I(u) ? (l(), k(C(f), {
+            key: 0,
+            class: "text-c-btn p-0.5",
+            icon: "Checkmark",
+            size: "xs"
+          })) : c("", !0)
+        ], 12, R)), 64)),
+        o[1] || (o[1] = s("hr", { class: "border-ghost h-5 w-0.5 border-l" }, null, -1)),
+        s("button", {
+          class: "z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full",
+          style: v(y.value),
+          type: "button",
+          onClick: g
+        }, [
+          h.value ? (l(), k(C(f), {
+            key: 0,
+            class: "text-c-btn",
+            icon: "Checkmark",
+            size: "xs"
+          })) : c("", !0)
+        ], 4)
+      ])) : c("", !0),
+      r.value ? (l(), a("div", L, [
+        o[2] || (o[2] = s("span", { class: "absolute h-4 w-4 rounded-full border border-dashed" }, null, -1)),
+        s("span", {
+          class: "z-[1] h-4 w-4 rounded-full",
+          style: v(y.value)
+        }, null, 4),
+        j(s("input", {
+          ref_key: "customColorInputRef",
+          ref: p,
+          "onUpdate:modelValue": o[0] || (o[0] = (u) => t.value = u),
+          class: "w-full flex-1 border-transparent text-sm outline-none",
+          placeholder: e.activeColor || "#000000",
+          type: "text",
+          onInput: B
+        }, null, 40, U), [
+          [N, t.value]
+        ]),
+        s("button", {
+          class: "text-c-3 hover:bg-b-2 rounded-lg p-1.5",
+          type: "button",
+          onClick: g
+        }, [
+          T(C(f), {
+            icon: "Checkmark",
+            size: "xs"
+          })
+        ])
+      ])) : c("", !0)
     ]));
   }
 });
 export {
-  O as default
+  P as default
 };

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.d.ts

@@ -1,19 +1,12 @@
 import { type ModalState } from '@scalar/components';
+import type { CollectionType, WorkspaceEventBus } from '@scalar/workspace-store/events';
+import type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments';
 type __VLS_Props = {
+    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>;
+    selectedEnvironmentName: string | null;
     state: ModalState;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    submit: (environment: {
-        name: string;
-        color: string;
-    }) => any;
-    cancel: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSubmit?: ((environment: {
-        name: string;
-        color: string;
-    }) => any) | undefined;
-    onCancel?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    eventBus: WorkspaceEventBus;
+} & CollectionType;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=EnvironmentCreateModal.vue.d.ts.map

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentCreateModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"names":[],"mappings":"AAAA,OA6EO,EAAe,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAQjE,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,UAAU,CAAA;CAClB,CAAC;;;cAQU,MAAM;eACL,MAAM;;;;;cADP,MAAM;eACL,MAAM;;;;AA4JnB,wBAOG"}
+{"version":3,"file":"EnvironmentCreateModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"names":[],"mappings":"AA+IA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACjE,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAA;AAQpH,KAAK,WAAW,GAAG;IACf,YAAY,EAAE,WAAW,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAA;IACvE,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;IACtC,KAAK,EAAE,UAAU,CAAA;IACjB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;;AA8MrB,wBAMG"}