@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 R, onMounted as $, createBlock as b, openBlock as f, withCtx as i, createVNode as c, createElementBlock as D, createTextVNode as E, 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 K from "../../../components/CodeInput/CodeInput.vue.js";
import P from "../../../components/DataTable/DataTable.vue.js";
import T from "../../../components/DataTable/DataTableCell.vue.js";
import U from "../../../components/DataTable/DataTableHeader.vue.js";
import z 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(l) {
const { collectionMutators: d } = Q(), o = m([]), y = m(/* @__PURE__ */ new Set()), k = m(/* @__PURE__ */ new Map()), u = m(!1), M = h(() => {
if (!l.environment?.value)
return [{ key: "", value: "" }];
try {
const e = JSON.parse(l.environment.value), a = Object.entries(e).map(([t, n]) => ({
key: t,
value: String(n)
}));
return a.length === 0 ? [{ key: "", value: "" }] : a;
} catch {
return [{ key: "", value: "" }];
}
}), x = h(() => {
const e = o.value[o.value.length - 1];
return e ? e.key || e.value ? [...o.value, { key: "", value: "" }] : o.value : [{ key: "", value: "" }];
}), p = h(() => {
const e = /* @__PURE__ */ new Map();
return o.value.forEach((a, t) => {
if (a.key) {
const n = e.get(a.key) || [];
n.push(t), e.set(a.key, n);
}
}), k.value.forEach((a, t) => {
if (a) {
const n = e.get(a) || [];
n.push(t), e.set(a, n);
}
}), Array.from(e.values()).filter((a) => a.length > 1).flat();
});
R(
M,
(e) => {
o.value = [...e], y.value = new Set(e.map((a) => a.key).filter(Boolean));
},
{ immediate: !0 }
);
const C = async (e, a, t) => {
if (!u.value) {
if (a === "key") {
k.value.set(e, t);
const n = new Set(y.value), r = o.value[e];
if (r && n.delete(r.key), n.has(t))
return;
}
u.value = !0;
try {
const n = [...o.value], r = n[e];
if (!r)
return;
n[e] = {
key: a === "key" ? t : r.key,
value: a === "value" ? t : r.value
}, !n[e].key && !n[e].value && e !== n.length - 1 && n.splice(e, 1);
const v = n.reduce(
(s, { key: B, value: I }) => ((B || I) && (s[B] = I), s),
{}
);
if (l.collection) {
const s = {
...l.collection["x-scalar-environments"],
[l.environment.name]: {
...l.collection["x-scalar-environments"]?.[l.environment.name],
variables: v
}
};
await d.edit(
l.collection.uid,
"x-scalar-environments",
s
);
}
if (e === o.value.length - 1) {
const s = n[n.length - 1];
s && (s.key || s.value) && await w();
}
await g(), o.value = n, a === "key" && (y.value = new Set(
n.map((s) => s.key).filter(Boolean)
), k.value.delete(e));
} finally {
u.value = !1;
}
}
}, w = async () => {
if (!u.value) {
u.value = !0;
try {
const e = [...o.value, { key: "", value: "" }], a = e.reduce(
(t, { key: n, value: r }) => ((n || r) && (t[n] = r), t),
{}
);
if (l.collection) {
const t = {
...l.collection["x-scalar-environments"],
[l.environment.name]: {
...l.collection["x-scalar-environments"]?.[l.environment.name],
variables: a
}
};
await d.edit(
l.collection.uid,
"x-scalar-environments",
t
);
}
await g(), o.value = e;
} finally {
u.value = !1;
}
}
}, N = async (e) => {
if (!u.value) {
u.value = !0;
try {
const a = [...o.value];
a.splice(e, 1);
const t = a.reduce(
(n, { key: r, value: v }) => ((r || v) && (n[r] = v), n),
{}
);
if (l.collection) {
const n = {
...l.collection["x-scalar-environments"],
[l.environment.name]: {
...l.collection["x-scalar-environments"]?.[l.environment.name],
variables: t
}
};
await d.edit(
l.collection.uid,
"x-scalar-environments",
n
);
}
await g(), o.value = a;
} finally {
u.value = !1;
}
}
}, S = async () => {
if (o.value.length === 0)
await w();
else if (o.value.length >= 1) {
const e = o.value[o.value.length - 1];
e && (e.key || e.value) && await w();
}
};
return $(() => {
S();
}), R(
() => o.value,
() => {
S();
}
), (e, a) => (f(), b(P, {
class: "group/table flex-1",
columns: ["", ""]
}, {
default: i(() => [
c(z, { class: "sr-only !block" }, {
default: i(() => [
c(U, null, {
default: i(() => [...a[0] || (a[0] = [
E("Key", -1)
])]),
_: 1
}),
c(U, null, {
default: i(() => [...a[1] || (a[1] = [
E("Value", -1)
])]),
_: 1
})
]),
_: 1
}),
(f(!0), D(O, null, j(x.value, (t, n) => (f(), b(z, {
key: n,
class: F({
error: p.value.includes(n)
})
}, {
default: i(() => [
c(T, null, {
default: i(() => [
c(K, {
disableCloseBrackets: "",
disableEnter: "",
disableTabIndent: "",
lineWrapping: "",
environment: e.environment,
envVariables: e.envVariables,
modelValue: t.key,
placeholder: "Key",
workspace: e.workspace,
"onUpdate:modelValue": (r) => C(n, "key", r)
}, A({ _: 2 }, [
p.value.includes(n) ? {
name: "icon",
fn: i(() => [
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(T, null, {
default: i(() => [
c(K, {
class: "pr-6 group-hover:pr-10 group-has-[.cm-focused]:pr-10",
disableCloseBrackets: "",
disableEnter: "",
disableTabIndent: "",
lineWrapping: "",
environment: e.environment,
envVariables: e.envVariables,
modelValue: t.value,
placeholder: "Value",
workspace: e.workspace,
"onUpdate:modelValue": (r) => C(n, "value", r)
}, {
icon: i(() => [
t.key || t.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(n), ["stop"])
}, {
default: i(() => [
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
};