@scalar/api-client
Version:
the open source API testing client
271 lines (270 loc) • 9.01 kB
JavaScript
import { defineComponent as W, ref as m, computed as h, watch as I, onMounted as $, createBlock as b, openBlock as f, withCtx as s, createVNode as c, createElementBlock as D, createTextVNode as R, Fragment as O, renderList as j, normalizeClass as F, createSlots as A, unref as V, createCommentVNode as J, withModifiers as L, nextTick as g } from "vue";
import { ScalarButton as q } from "@scalar/components";
import { ScalarIconWarning as G, ScalarIconTrash as H } from "@scalar/icons";
import E from "../../../components/CodeInput/CodeInput.vue.js";
import P from "../../../components/DataTable/DataTable.vue.js";
import K from "../../../components/DataTable/DataTableCell.vue.js";
import T from "../../../components/DataTable/DataTableHeader.vue.js";
import U from "../../../components/DataTable/DataTableRow.vue.js";
import { useWorkspace as Q } from "../../../store/store.js";
const oe = /* @__PURE__ */ W({
__name: "EnvironmentForm",
props: {
collection: {},
environment: {},
workspace: {},
envVariables: {}
},
setup(t) {
const { collectionMutators: d } = Q(), o = m([]), y = m(/* @__PURE__ */ new Set()), k = m(/* @__PURE__ */ new Map()), u = m(!1), z = h(() => {
if (!t.environment?.value)
return [{ key: "", value: "" }];
try {
const n = JSON.parse(t.environment.value), a = Object.entries(n).map(([l, e]) => ({
key: l,
value: String(e)
}));
return a.length === 0 ? [{ key: "", value: "" }] : a;
} catch {
return [{ key: "", value: "" }];
}
}), M = h(() => {
const n = o.value[o.value.length - 1];
return n ? n.key || n.value ? [...o.value, { key: "", value: "" }] : o.value : [{ key: "", value: "" }];
}), p = h(() => {
const n = /* @__PURE__ */ new Map();
return o.value.forEach((a, l) => {
if (a.key) {
const e = n.get(a.key) || [];
e.push(l), n.set(a.key, e);
}
}), k.value.forEach((a, l) => {
if (a) {
const e = n.get(a) || [];
e.push(l), n.set(a, e);
}
}), Array.from(n.values()).filter((a) => a.length > 1).flat();
});
I(
z,
(n) => {
o.value = [...n], y.value = new Set(n.map((a) => a.key).filter(Boolean));
},
{ immediate: !0 }
);
const x = async (n, a, l) => {
if (!u.value) {
if (a === "key") {
k.value.set(n, l);
const e = new Set(y.value), r = o.value[n];
if (r && e.delete(r.key), e.has(l))
return;
}
u.value = !0;
try {
const e = [...o.value], r = e[n];
if (!r)
return;
e[n] = {
key: a === "key" ? l : r.key,
value: a === "value" ? l : r.value
}, !e[n].key && !e[n].value && n !== e.length - 1 && e.splice(n, 1);
const v = e.reduce(
(i, { key: S, value: B }) => ((S || B) && (i[S] = B), i),
{}
);
if (t.collection) {
const i = {
...t.collection["x-scalar-environments"],
[t.environment.name]: {
...t.collection["x-scalar-environments"]?.[t.environment.name],
variables: v
}
};
await d.edit(
t.collection.uid,
"x-scalar-environments",
i
);
}
if (n === o.value.length - 1) {
const i = e[e.length - 1];
i && (i.key || i.value) && await w();
}
await g(), o.value = e, a === "key" && (y.value = new Set(
e.map((i) => i.key).filter(Boolean)
), k.value.delete(n));
} finally {
u.value = !1;
}
}
}, w = async () => {
if (!u.value) {
u.value = !0;
try {
const n = [...o.value, { key: "", value: "" }], a = n.reduce(
(l, { key: e, value: r }) => ((e || r) && (l[e] = r), l),
{}
);
if (t.collection) {
const l = {
...t.collection["x-scalar-environments"],
[t.environment.name]: {
...t.collection["x-scalar-environments"]?.[t.environment.name],
variables: a
}
};
await d.edit(
t.collection.uid,
"x-scalar-environments",
l
);
}
await g(), o.value = n;
} finally {
u.value = !1;
}
}
}, N = async (n) => {
if (!u.value) {
u.value = !0;
try {
const a = [...o.value];
a.splice(n, 1);
const l = a.reduce(
(e, { key: r, value: v }) => ((r || v) && (e[r] = v), e),
{}
);
if (t.collection) {
const e = {
...t.collection["x-scalar-environments"],
[t.environment.name]: {
...t.collection["x-scalar-environments"]?.[t.environment.name],
variables: l
}
};
await d.edit(
t.collection.uid,
"x-scalar-environments",
e
);
}
await g(), o.value = a;
} finally {
u.value = !1;
}
}
}, C = async () => {
if (o.value.length === 0)
await w();
else if (o.value.length >= 1) {
const n = o.value[o.value.length - 1];
n && (n.key || n.value) && await w();
}
};
return $(() => {
C();
}), I(
() => o.value,
() => {
C();
}
), (n, a) => (f(), b(P, {
class: "group/table flex-1",
columns: ["", ""]
}, {
default: s(() => [
c(U, { class: "sr-only !block" }, {
default: s(() => [
c(T, null, {
default: s(() => [...a[0] || (a[0] = [
R("Key", -1)
])]),
_: 1
}),
c(T, null, {
default: s(() => [...a[1] || (a[1] = [
R("Value", -1)
])]),
_: 1
})
]),
_: 1
}),
(f(!0), D(O, null, j(M.value, (l, e) => (f(), b(U, {
key: e,
class: F({
error: p.value.includes(e)
})
}, {
default: s(() => [
c(K, null, {
default: s(() => [
c(E, {
disableCloseBrackets: "",
disableEnter: "",
disableTabIndent: "",
lineWrapping: "",
environment: t.environment,
envVariables: t.envVariables,
modelValue: l.key,
placeholder: "Key",
workspace: t.workspace,
"onUpdate:modelValue": (r) => x(e, "key", r)
}, A({ _: 2 }, [
p.value.includes(e) ? {
name: "icon",
fn: s(() => [
c(V(G), { class: "text-red mr-0.75 size-3.5 brightness-[.9]" })
]),
key: "0"
} : void 0
]), 1032, ["environment", "envVariables", "modelValue", "workspace", "onUpdate:modelValue"])
]),
_: 2
}, 1024),
c(K, null, {
default: s(() => [
c(E, {
class: "pr-6 group-hover:pr-10 group-has-[.cm-focused]:pr-10",
disableCloseBrackets: "",
disableEnter: "",
disableTabIndent: "",
lineWrapping: "",
environment: t.environment,
envVariables: t.envVariables,
modelValue: l.value,
placeholder: "Value",
workspace: t.workspace,
"onUpdate:modelValue": (r) => x(e, "value", r)
}, {
icon: s(() => [
l.key || l.value ? (f(), b(V(q), {
key: 0,
class: "text-c-2 hover:text-c-1 hover:bg-b-2 z-context hidden h-fit rounded p-1 group-hover:flex group-has-[.cm-focused]:flex",
size: "sm",
variant: "ghost",
onClick: L((r) => N(e), ["stop"])
}, {
default: s(() => [
c(V(H), { class: "size-3.5" })
]),
_: 1
}, 8, ["onClick"])) : J("", !0)
]),
_: 2
}, 1032, ["environment", "envVariables", "modelValue", "workspace", "onUpdate:modelValue"])
]),
_: 2
}, 1024)
]),
_: 2
}, 1032, ["class"]))), 128))
]),
_: 1
}));
}
});
export {
oe as default
};