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