@scalar/api-client
Version:
the open source API testing client
230 lines (229 loc) • 8.91 kB
JavaScript
import { defineComponent as q, ref as k, computed as J, createBlock as F, openBlock as _, withCtx as u, createElementVNode as a, createVNode as r, createElementBlock as L, createTextVNode as M, Fragment as U, renderList as G, unref as e, createCommentVNode as H, normalizeStyle as K, toDisplayString as P } from "vue";
import { useModal as C, ScalarButton as y, ScalarIcon as Q, ScalarModal as I } from "@scalar/components";
import { Draggable as X } from "@scalar/draggable";
import { ScalarIconTrash as Y } from "@scalar/icons";
import Z from "../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
import ee from "../../components/Sidebar/Actions/EditSidebarListElement.vue.js";
import te from "../../components/ViewLayout/ViewLayoutSection.vue.js";
import ne from "../Environment/EnvironmentColorModal.vue.js";
import oe from "../Environment/EnvironmentModal.vue.js";
import le from "./components/EnvironmentForm.vue.js";
import { useActiveEntities as se } from "../../store/active-entities.js";
import { useWorkspace as ae } from "../../store/store.js";
const re = { class: "flex h-full w-full flex-col gap-12 px-1.5 pt-8" }, ie = { class: "flex flex-col gap-4" }, ce = { class: "rounded-lg border" }, de = { class: "bg-b-2 flex cursor-grab items-center justify-between rounded-t-lg px-1 py-1 text-sm" }, ue = { class: "flex items-center" }, ve = ["onClick"], me = { class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4" }, $e = /* @__PURE__ */ q({
__name: "CollectionEnvironment",
setup(fe) {
const { activeCollection: n, activeWorkspace: w, activeEnvVariables: S } = se(), { collectionMutators: m } = ae(), x = C(), b = C(), h = C(), g = C(), $ = k(""), l = k(null), E = k(void 0), D = J(() => n.value?.["x-scalar-environments"] ? Object.entries(n.value["x-scalar-environments"]).map(
([o, t]) => ({
uid: o,
name: o,
value: JSON.stringify(t.variables || {}),
color: t.color || "#FFFFFF"
})
) : []), V = () => {
!n.value?.uid || !l.value || (m.removeEnvironment(
l.value,
n.value.uid
), b.hide());
}, N = (o) => {
l.value = o, b.show();
}, j = (o) => {
n.value?.uid && (m.addEnvironment(
o.name,
{
variables: {},
color: o.color
},
n.value.uid
), h.hide());
}, z = (o) => {
l.value = o.name, $.value = o.color || "#FFFFFF", x.show();
}, O = (o) => {
if (!n.value?.uid || !l.value)
return;
const t = {
...n.value["x-scalar-environments"],
[l.value]: {
variables: n.value["x-scalar-environments"]?.[l.value]?.variables || {},
color: o
}
};
m.edit(
n.value.uid,
"x-scalar-environments",
t
), x.hide();
}, A = (o) => {
l.value = o, E.value = o, g.show();
}, B = () => {
l.value = null, E.value = void 0, g.hide();
}, W = (o) => {
if (!n.value?.uid || !l.value)
return;
const t = { ...n.value["x-scalar-environments"] };
if (!t[l.value])
return;
const i = {}, c = Object.entries(t), f = c.findIndex(
([v]) => v === l.value
);
c.forEach(([v, p], d) => {
d === f ? i[o] = p : i[v] = p;
}), m.edit(
n.value.uid,
"x-scalar-environments",
i
), l.value = null, E.value = void 0, g.hide();
}, R = (o, t) => {
if (!n.value?.uid)
return;
const s = { ...n.value["x-scalar-environments"] }, i = {}, c = Object.entries(s), f = c.findIndex(([d]) => d === o.id), v = c.findIndex(([d]) => d === t.id);
if (f === -1 || v === -1)
return;
const p = c[f];
p && (c.splice(f, 1), c.splice(v, 0, p), c.forEach(([d, T]) => {
i[d] = T;
}), m.edit(
n.value.uid,
"x-scalar-environments",
i
));
};
return (o, t) => (_(), F(te, null, {
default: u(() => [
a("div", re, [
a("div", ie, [
t[5] || (t[5] = a("div", { class: "flex items-start justify-between gap-2" }, [
a("div", { class: "flex flex-col gap-2" }, [
a("div", { class: "flex h-8 items-center" }, [
a("h3", { class: "font-bold" }, "Environment Variables")
]),
a("p", { class: "text-sm" }, [
M(" Set environment variables at your collection level. Use "),
a("code", { class: "font-code text-c-2" }, "{{ variable }}"),
M(" to add / search among the selected environment's variables in your request inputs. ")
])
])
], -1)),
(_(!0), L(U, null, G(D.value, (s) => (_(), F(e(X), {
key: s.name,
id: s.name,
isDraggable: !0,
isDroppable: !0,
parentIds: [],
onOnDragEnd: R
}, {
default: u(() => [
a("div", ce, [
a("div", de, [
a("div", ue, [
r(e(y), {
class: "hover:bg-b-3 flex h-6 w-6 p-1",
onClick: (i) => z(s),
variant: "ghost"
}, {
default: u(() => [
a("span", {
style: K({ backgroundColor: s.color || "#FFFFFF" }),
class: "h-2.5 w-2.5 rounded-full"
}, null, 4)
]),
_: 2
}, 1032, ["onClick"]),
a("button", {
class: "hover:bg-b-3 rounded px-1 py-0.5 text-sm",
onClick: (i) => A(s.name)
}, P(s.name), 9, ve)
]),
r(e(y), {
class: "hover:bg-b-3 hover:text-c-1 h-fit p-1.25",
variant: "ghost",
onClick: (i) => N(s.name)
}, {
default: u(() => [
r(e(Y), { class: "size-3.5" })
]),
_: 1
}, 8, ["onClick"])
]),
e(n) && e(w) ? (_(), F(le, {
key: 0,
collection: e(n),
environment: s,
envVariables: e(S),
workspace: e(w)
}, null, 8, ["collection", "environment", "envVariables", "workspace"])) : H("", !0)
])
]),
_: 2
}, 1032, ["id"]))), 128)),
a("div", me, [
r(e(y), {
class: "hover:bg-b-2 hover:text-c-1 flex items-center gap-2",
size: "sm",
variant: "ghost",
onClick: t[0] || (t[0] = (s) => e(h).show())
}, {
default: u(() => [
r(e(Q), {
class: "inline-flex",
icon: "Add",
size: "sm",
thickness: "1.5"
}),
t[4] || (t[4] = a("span", null, "Add Environment", -1))
]),
_: 1
})
])
]),
r(e(I), {
size: "xxs",
state: e(b),
title: `Delete ${l.value || "Environment"}`
}, {
default: u(() => [
r(Z, {
variableName: "Environment",
warningMessage: "Are you sure you want to delete this environment? This action cannot be undone.",
onClose: t[1] || (t[1] = (s) => e(b).hide()),
onDelete: V
})
]),
_: 1
}, 8, ["state", "title"]),
r(oe, {
activeWorkspaceCollections: e(n) ? [e(n)] : [],
collectionId: e(n)?.uid,
state: e(h),
onCancel: t[2] || (t[2] = (s) => e(h).hide()),
onSubmit: j
}, null, 8, ["activeWorkspaceCollections", "collectionId", "state"]),
r(ne, {
selectedColor: $.value,
state: e(x),
onCancel: t[3] || (t[3] = (s) => e(x).hide()),
onSubmit: O
}, null, 8, ["selectedColor", "state"]),
r(e(I), {
size: "xxs",
state: e(g),
title: `Edit ${l.value}`
}, {
default: u(() => [
r(ee, {
name: E.value ?? "",
onClose: B,
onEdit: W
}, null, 8, ["name"])
]),
_: 1
}, 8, ["state", "title"])
])
]),
_: 1
}));
}
});
export {
$e as default
};