@scalar/api-client
Version:
the open source API testing client
426 lines (425 loc) • 16.1 kB
JavaScript
import { defineComponent as de, ref as C, computed as ve, watch as fe, onMounted as pe, onBeforeUnmount as be, createBlock as _, openBlock as f, withCtx as c, createVNode as u, createTextVNode as B, createElementVNode as b, createElementBlock as O, unref as l, Fragment as L, renderList as K, withDirectives as xe, normalizeClass as G, toDisplayString as J, createCommentVNode as T, withModifiers as he, vShow as Ee, createSlots as Ce } from "vue";
import { useModal as j, ScalarIcon as H, ScalarButton as ke, ScalarModal as ge } from "@scalar/components";
import { LibraryIcon as ye } from "@scalar/icons/library";
import { useToasts as _e } from "@scalar/use-toasts";
import { useRouter as we, useRoute as De } from "vue-router";
import Ie from "../../components/CodeInput/CodeInput.vue.js";
import Me from "../../components/Sidebar/Actions/EditSidebarListElement.vue.js";
import Se from "../../components/Sidebar/Sidebar.vue.js";
import $e from "../../components/Sidebar/SidebarButton.vue.js";
import Ve from "../../components/Sidebar/SidebarList.vue.js";
import P from "../../components/Sidebar/SidebarListElement.vue.js";
import Oe from "../../components/ViewLayout/ViewLayout.vue.js";
import je from "../../components/ViewLayout/ViewLayoutContent.vue.js";
import Fe from "../../components/ViewLayout/ViewLayoutSection.vue.js";
import { useSidebar as Ne } from "../../hooks/useSidebar.js";
import { PathId as i } from "../../routes.js";
import { useActiveEntities as Re } from "../../store/active-entities.js";
import We from "./EnvironmentColorModal.vue.js";
import Ue from "./EnvironmentModal.vue.js";
import { environmentDragHandlerFactory as ze } from "./handle-drag.js";
import { useWorkspace as Ae } from "../../store/store.js";
const Be = { class: "flex-1" }, Le = ["onClick"], Ke = { class: "flex h-5 max-w-[14px] items-center justify-center" }, vn = /* @__PURE__ */ de({
__name: "Environment",
setup(Ge) {
const k = we(), g = De(), {
activeWorkspace: p,
activeEnvironment: F,
activeWorkspaceCollections: d,
activeEnvVariables: q
} = Re(), { events: N, workspaceMutators: Q, collectionMutators: x } = Ae(), { collapsedSidebarFolders: y, toggleSidebarFolder: w } = Ne(), D = j(), I = j(), M = j(), R = C(null), s = C("default"), W = C(""), h = C(void 0), v = C(void 0), S = C(void 0), { toast: U } = _e(), X = (e) => JSON.parse(e);
function z(e, o, n) {
var t;
e && (o.uid === n ? U(
`Environment name already used in ${(t = o.info) == null ? void 0 : t.title}`,
"error"
) : U("Environment name already used in another collection", "error"));
}
const E = ve(() => d.value.filter(
(e) => {
var o;
return ((o = e.info) == null ? void 0 : o.title) !== "Drafts";
}
));
function Y(e) {
E.value.some(
(n) => {
const t = Object.keys(
n["x-scalar-environments"] || {}
).includes(e.name);
return z(t, n, e.collectionId), t;
}
) || (e.collectionId && (x.addEnvironment(
e.name,
{
variables: {},
color: e.color
},
e.collectionId
), y[e.collectionId] || w(e.collectionId), k.push({
name: "environment.collection",
params: {
[i.Collection]: e.collectionId,
[i.Environment]: e.name
}
})), I.hide());
}
function Z(e) {
var n, t;
if (!F)
return;
const o = X(e);
if (s.value === "default")
Q.edit(
(n = p.value) == null ? void 0 : n.uid,
"environments",
o
);
else {
const a = d.value.find(
(r) => {
var m;
return (m = r["x-scalar-environments"]) == null ? void 0 : m[s.value ?? ""];
}
);
if ((t = a == null ? void 0 : a["x-scalar-environments"]) != null && t[s.value ?? ""]) {
const r = a["x-scalar-environments"][s.value ?? ""];
r && (r.variables = o, x.edit(
a.uid,
"x-scalar-environments",
a["x-scalar-environments"]
));
}
}
}
const $ = (e) => {
h.value = e, I.show();
}, ee = (e, o) => {
v.value = e, h.value = o, S.value = e, M.show();
}, ne = (e) => {
var o, n, t;
R.value = e, W.value = ((t = (n = (o = d.value.find(
(a) => {
var r;
return (r = a["x-scalar-environments"]) == null ? void 0 : r[e];
}
)) == null ? void 0 : o["x-scalar-environments"]) == null ? void 0 : n[e]) == null ? void 0 : t.color) ?? "", D.show();
}, te = (e) => {
const o = R.value;
typeof o == "string" && (d.value.some(
(t) => {
var a;
return (a = t["x-scalar-environments"]) == null ? void 0 : a[o];
}
) && d.value.forEach((t) => {
var a;
(a = t["x-scalar-environments"]) != null && a[o] && (t["x-scalar-environments"][o].color = e, x.edit(
t.uid,
"x-scalar-environments",
t["x-scalar-environments"]
));
}), D.hide());
};
function oe(e) {
var n;
E.value.forEach((t) => {
x.removeEnvironment(e, t.uid);
});
const o = E.value.flatMap(
(t) => Object.keys(t["x-scalar-environments"] || {})
);
if (o.length > 0) {
const t = o[o.length - 1];
if (!t)
return;
const a = d.value.find(
(r) => Object.keys(r["x-scalar-environments"] || {}).includes(
t
)
);
s.value = t, k.push({
name: "environment.collection",
params: {
[i.Collection]: a == null ? void 0 : a.uid,
[i.Environment]: t
}
}), a && !y[a.uid] && w(a.uid);
} else
s.value = "default", k.push({
name: "environment.default",
params: {
[i.Workspace]: (n = p.value) == null ? void 0 : n.uid
}
});
}
const ae = () => s.value === "default" ? "Global Environment" : s.value, re = () => {
var e, o, n, t;
return s.value === "default" ? JSON.stringify((e = p.value) == null ? void 0 : e.environments, null, 2) : JSON.stringify(
(t = (n = (o = d.value.find(
(a) => {
var r;
return (r = a["x-scalar-environments"]) == null ? void 0 : r[s.value ?? ""];
}
)) == null ? void 0 : o["x-scalar-environments"]) == null ? void 0 : n[s.value ?? ""]) == null ? void 0 : t.variables,
null,
2
);
}, le = (e) => y[e], A = (e) => {
e != null && e.createNew && g.name === "environment" && $();
};
fe(
() => [g.params[i.Collection], g.params[i.Environment]],
([e, o]) => {
e ? s.value = o : s.value = "default";
}
), pe(() => {
s.value = g.params[i.Environment] || "default", N.hotKeys.on(A);
const e = g.params[i.Collection];
e && !y[e] && w(e);
}), be(() => N.hotKeys.off(A));
const se = (e, o, n) => {
var a, r;
const t = n ? {
name: "environment.collection",
params: {
[i.Workspace]: (a = p.value) == null ? void 0 : a.uid,
[i.Collection]: n,
[i.Environment]: o
}
} : {
name: "environment.default",
params: {
[i.Workspace]: (r = p.value) == null ? void 0 : r.uid,
[i.Environment]: o
}
};
e.metaKey ? window.open(k.resolve(t).href, "_blank") : k.push(t);
};
function ie() {
v.value = void 0, h.value = void 0, S.value = void 0, M.hide();
}
function ue(e) {
E.value.some(
(n) => {
const t = Object.keys(
n["x-scalar-environments"] || {}
).includes(e);
return z(
t,
n,
h.value
), t;
}
) || (e && v.value !== "default" && d.value.forEach((n) => {
var t;
if ((t = n["x-scalar-environments"]) != null && t[v.value ?? ""]) {
const a = n["x-scalar-environments"], r = {};
Object.keys(a).forEach((m) => {
const V = a[m];
V && (m === v.value ? r[e] = V : r[m] = V);
}), n["x-scalar-environments"] = r, x.edit(
n.uid,
"x-scalar-environments",
n["x-scalar-environments"]
);
}
}), e && s.value === v.value && (s.value = e), v.value = void 0, h.value = void 0, S.value = void 0, M.hide());
}
const { handleDragEnd: me, isDroppable: ce } = ze(
d,
x
);
return (e, o) => (f(), _(Oe, null, {
default: c(() => [
u(Se, { title: "Collections" }, {
content: c(() => [
b("div", Be, [
u(Ve, null, {
default: c(() => [
(f(), _(P, {
key: "default",
class: "text-xs",
isCopyable: !1,
to: {
name: "environment",
params: {
[l(i).Environment]: "default"
}
},
type: "environment",
variable: {
name: "Global Environment",
uid: "default",
icon: "Globe",
isDefault: !0
}
}, null, 8, ["to"])),
(f(!0), O(L, null, K(E.value, (n) => {
var t;
return f(), O("li", {
key: n.uid,
class: "gap-1/2 flex flex-col"
}, [
b("button", {
class: "hover:bg-b-2 group flex w-full items-center gap-1.5 rounded p-1.5 text-left text-sm font-medium break-words",
type: "button",
onClick: (a) => l(w)(n.uid)
}, [
b("span", Ke, [
u(l(ye), {
class: "text-sidebar-c-2 size-3.5 min-w-3.5 stroke-2 group-hover:hidden",
src: n["x-scalar-icon"] || "interface-content-folder"
}, null, 8, ["src"]),
b("div", {
class: G({
"rotate-90": l(y)[n.uid]
})
}, [
u(l(H), {
class: "text-c-3 hover:text-c-1 hidden text-sm group-hover:block",
icon: "ChevronRight",
size: "md"
})
], 2)
]),
B(" " + J(((t = n.info) == null ? void 0 : t.title) ?? ""), 1)
], 8, Le),
xe(b("div", {
class: G({
"before:bg-border relative mb-[.5px] before:pointer-events-none before:absolute before:top-0 before:left-3 before:z-1 before:h-[calc(100%_+_.5px)] before:w-[.5px] last:mb-0 last:before:h-full": Object.keys(n["x-scalar-environments"] || {}).length > 0
})
}, [
(f(!0), O(L, null, K(n["x-scalar-environments"], (a, r) => (f(), _(P, {
key: r,
class: "text-xs",
collectionId: n.uid,
isCopyable: !1,
isDeletable: !0,
isRenameable: !0,
isDraggable: !0,
isDroppable: l(ce),
to: {
name: "environment.collection",
params: {
[l(i).Collection]: n.uid,
[l(i).Environment]: r
}
},
type: "environment",
variable: {
name: r,
uid: r,
color: a.color ?? "#FFFFFF",
isDefault: !1
},
warningMessage: "Are you sure you want to delete this environment?",
onClick: he((m) => se(m, r, n.uid), ["prevent"]),
onColorModal: (m) => ne(r),
onDelete: (m) => oe(r),
onRename: (m) => ee(r, n.uid),
onOnDragEnd: l(me)
}, null, 8, ["collectionId", "isDroppable", "to", "variable", "onClick", "onColorModal", "onDelete", "onRename", "onOnDragEnd"]))), 128)),
Object.keys(n["x-scalar-environments"] || {}).length === 0 ? (f(), _(l(ke), {
key: 0,
class: "text-c-1 hover:bg-b-2 flex h-8 w-full justify-start gap-1.5 py-0 pl-6 text-xs",
variant: "ghost",
onClick: (a) => $(n.uid)
}, {
default: c(() => [
u(l(H), {
icon: "Add",
size: "sm"
}),
o[2] || (o[2] = b("span", null, "Add Environment", -1))
]),
_: 2
}, 1032, ["onClick"])) : T("", !0)
], 2), [
[Ee, le(n.uid)]
])
]);
}), 128))
]),
_: 1
})
])
]),
button: c(() => [
u($e, {
click: $,
hotkey: "N"
}, {
title: c(() => o[3] || (o[3] = [
B(" Add Environment ")
])),
_: 1
})
]),
_: 1
}),
u(je, { class: "flex-1" }, {
default: c(() => [
u(Fe, null, Ce({
default: c(() => [
s.value && l(p) ? (f(), _(Ie, {
key: 0,
class: "py-2 pr-2 pl-px md:px-4",
envVariables: l(q),
environment: l(F),
isCopyable: "",
language: "json",
lineNumbers: "",
lint: "",
modelValue: re(),
workspace: l(p),
"onUpdate:modelValue": Z
}, null, 8, ["envVariables", "environment", "modelValue", "workspace"])) : T("", !0)
]),
_: 2
}, [
s.value ? {
name: "title",
fn: c(() => [
b("span", null, J(ae()), 1)
]),
key: "0"
} : void 0
]), 1024)
]),
_: 1
}),
u(We, {
selectedColor: W.value,
state: l(D),
onCancel: o[0] || (o[0] = (n) => l(D).hide()),
onSubmit: te
}, null, 8, ["selectedColor", "state"]),
u(Ue, {
activeWorkspaceCollections: E.value,
collectionId: h.value,
state: l(I),
onCancel: o[1] || (o[1] = (n) => l(I).hide()),
onSubmit: Y
}, null, 8, ["activeWorkspaceCollections", "collectionId", "state"]),
u(l(ge), {
size: "xxs",
state: l(M),
title: `Edit ${v.value}`
}, {
default: c(() => [
u(Me, {
name: S.value ?? "",
onClose: ie,
onEdit: ue
}, null, 8, ["name"])
]),
_: 1
}, 8, ["state", "title"])
]),
_: 1
}));
}
});
export {
vn as default
};