@scalar/api-client
Version:
the open source API testing client
433 lines (432 loc) • 16.3 kB
JavaScript
import { defineComponent as ve, ref as k, computed as fe, watch as B, onMounted as pe, onBeforeUnmount as be, createBlock as _, openBlock as f, withCtx as c, createVNode as u, createTextVNode as L, createElementVNode as b, createElementBlock as O, unref as l, Fragment as K, renderList as G, withDirectives as xe, normalizeClass as J, toDisplayString as T, createCommentVNode as H, withModifiers as he, vShow as Ee, createSlots as Ce } from "vue";
import { useModal as j, ScalarIcon as q, ScalarButton as ke, ScalarModal as ye } from "@scalar/components";
import { LibraryIcon as ge } from "@scalar/icons/library";
import { useToasts as _e } from "@scalar/use-toasts";
import { useRouter as we, useRoute as Me } from "vue-router";
import De from "../../components/CodeInput/CodeInput.vue.js";
import Ie 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__ */ ve({
__name: "Environment",
setup(Ge) {
const y = we(), x = Me(), {
activeWorkspace: p,
activeEnvironment: F,
activeWorkspaceCollections: d,
activeEnvVariables: Q
} = Re(), { events: N, workspaceMutators: X, collectionMutators: h } = Ae(), { collapsedSidebarFolders: g, toggleSidebarFolder: w } = Ne(), M = j(), D = j(), I = j(), R = k(null), s = k("default"), W = k(""), E = k(void 0), v = k(void 0), S = k(void 0), { toast: U } = _e(), Y = (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 C = fe(() => d.value.filter(
(e) => {
var o;
return ((o = e.info) == null ? void 0 : o.title) !== "Drafts";
}
));
function Z(e) {
C.value.some(
(n) => {
const t = Object.keys(
n["x-scalar-environments"] || {}
).includes(e.name);
return z(t, n, e.collectionId), t;
}
) || (e.collectionId && (h.addEnvironment(
e.name,
{
variables: {},
color: e.color
},
e.collectionId
), g[e.collectionId] || w(e.collectionId), y.push({
name: "environment.collection",
params: {
[i.Collection]: e.collectionId,
[i.Environment]: e.name
}
})), D.hide());
}
function ee(e) {
var n, t;
if (!F)
return;
const o = Y(e);
if (s.value === "default")
X.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, h.edit(
a.uid,
"x-scalar-environments",
a["x-scalar-environments"]
));
}
}
}
const $ = (e) => {
E.value = e, D.show();
}, ne = (e, o) => {
v.value = e, E.value = o, S.value = e, I.show();
}, te = (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) ?? "", M.show();
}, oe = (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, h.edit(
t.uid,
"x-scalar-environments",
t["x-scalar-environments"]
));
}), M.hide());
};
function ae(e) {
var n;
C.value.forEach((t) => {
h.removeEnvironment(e, t.uid);
});
const o = C.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, y.push({
name: "environment.collection",
params: {
[i.Collection]: a == null ? void 0 : a.uid,
[i.Environment]: t
}
}), a && !g[a.uid] && w(a.uid);
} else
s.value = "default", y.push({
name: "environment.default",
params: {
[i.Workspace]: (n = p.value) == null ? void 0 : n.uid
}
});
}
const re = () => s.value === "default" ? "Global Environment" : s.value, le = () => {
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
);
}, se = (e) => g[e], A = (e) => {
e != null && e.createNew && x.name === "environment" && $();
};
B(
() => [x.params[i.Collection], x.params[i.Environment]],
([e, o]) => {
e ? s.value = o : s.value = "default";
}
), pe(() => {
s.value = x.params[i.Environment] || "default", N.hotKeys.on(A);
const e = x.params[i.Collection];
e && !g[e] && w(e);
}), be(() => N.hotKeys.off(A));
const ie = (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(y.resolve(t).href, "_blank") : y.push(t);
};
function ue() {
v.value = void 0, E.value = void 0, S.value = void 0, I.hide();
}
function me(e) {
C.value.some(
(n) => {
const t = Object.keys(
n["x-scalar-environments"] || {}
).includes(e);
return z(
t,
n,
E.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, h.edit(
n.uid,
"x-scalar-environments",
n["x-scalar-environments"]
);
}
}), e && s.value === v.value && (s.value = e), v.value = void 0, E.value = void 0, S.value = void 0, I.hide());
}
const { handleDragEnd: ce, isDroppable: de } = ze(
d,
h
);
return B(
() => x.query.openEnvironmentModal,
(e) => {
e === "true" && $();
},
{ immediate: !0 }
), (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(K, null, G(C.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(ge), {
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: J({
"rotate-90": l(g)[n.uid]
})
}, [
u(l(q), {
class: "text-c-3 hover:text-c-1 hidden text-sm group-hover:block",
icon: "ChevronRight",
size: "md"
})
], 2)
]),
L(" " + T(((t = n.info) == null ? void 0 : t.title) ?? ""), 1)
], 8, Le),
xe(b("div", {
class: J({
"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(K, null, G(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(de),
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) => ie(m, r, n.uid), ["prevent"]),
onColorModal: (m) => te(r),
onDelete: (m) => ae(r),
onRename: (m) => ne(r, n.uid),
onOnDragEnd: l(ce)
}, 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(q), {
icon: "Add",
size: "sm"
}),
o[2] || (o[2] = b("span", null, "Add Environment", -1))
]),
_: 2,
__: [2]
}, 1032, ["onClick"])) : H("", !0)
], 2), [
[Ee, se(n.uid)]
])
]);
}), 128))
]),
_: 1
})
])
]),
button: c(() => [
u($e, {
click: $,
hotkey: "N"
}, {
title: c(() => o[3] || (o[3] = [
L(" Add Environment ")
])),
_: 1
})
]),
_: 1
}),
u(je, { class: "flex-1" }, {
default: c(() => [
u(Fe, null, Ce({
default: c(() => [
s.value && l(p) ? (f(), _(De, {
key: 0,
class: "py-2 pr-2 pl-px md:px-4",
envVariables: l(Q),
environment: l(F),
isCopyable: "",
language: "json",
lineNumbers: "",
lint: "",
modelValue: le(),
workspace: l(p),
"onUpdate:modelValue": ee
}, null, 8, ["envVariables", "environment", "modelValue", "workspace"])) : H("", !0)
]),
_: 2
}, [
s.value ? {
name: "title",
fn: c(() => [
b("span", null, T(re()), 1)
]),
key: "0"
} : void 0
]), 1024)
]),
_: 1
}),
u(We, {
selectedColor: W.value,
state: l(M),
onCancel: o[0] || (o[0] = (n) => l(M).hide()),
onSubmit: oe
}, null, 8, ["selectedColor", "state"]),
u(Ue, {
activeWorkspaceCollections: C.value,
collectionId: E.value,
state: l(D),
onCancel: o[1] || (o[1] = (n) => l(D).hide()),
onSubmit: Z
}, null, 8, ["activeWorkspaceCollections", "collectionId", "state"]),
u(l(ye), {
size: "xxs",
state: l(I),
title: `Edit ${v.value}`
}, {
default: c(() => [
u(Ie, {
name: S.value ?? "",
onClose: ue,
onEdit: me
}, null, 8, ["name"])
]),
_: 1
}, 8, ["state", "title"])
]),
_: 1
}));
}
});
export {
vn as default
};