@scalar/api-client
Version:
the open source API testing client
132 lines (131 loc) • 4.71 kB
JavaScript
import { defineComponent as y, ref as m, computed as _, watch as h, createBlock as u, openBlock as v, unref as i, withCtx as o, createVNode as s, createElementVNode as p, createTextVNode as w, normalizeClass as I, toDisplayString as E } from "vue";
import { ScalarModal as N, ScalarListbox as T, ScalarButton as C, ScalarIcon as $ } from "@scalar/components";
import { useToasts as z } from "@scalar/use-toasts";
import B from "../../components/CommandPalette/CommandActionForm.vue.js";
import D from "../../components/CommandPalette/CommandActionInput.vue.js";
import P from "./EnvironmentColors.vue.js";
import { useWorkspace as U } from "../../store/store.js";
const W = { class: "flex items-start gap-2" }, J = /* @__PURE__ */ y({
__name: "EnvironmentModal",
props: {
state: {},
activeWorkspaceCollections: {},
collectionId: {}
},
emits: ["cancel", "submit"],
setup(x, { emit: g }) {
const a = x, f = g, { events: F } = U(), n = m(""), r = m("#FFFFFF"), c = _(() => [
...a.activeWorkspaceCollections.filter((t) => t.info?.title !== "Drafts").map((t) => ({
id: t.uid,
label: t.info?.title ?? "Untitled Collection"
}))
]), e = m(
c.value.find((t) => t.id === a.collectionId)
), { toast: b } = z(), S = (t) => {
r.value = t;
};
h(
() => a.state.open,
(t) => {
t && (n.value = "", r.value = "#FFFFFF", a.collectionId ? e.value = c.value.find(
(l) => l.id === a.collectionId
) : e.value = void 0);
}
);
const V = () => {
if (!n.value.trim()) {
b("Please enter a name before adding an environment.", "error");
return;
}
if (!e.value?.id) {
b("Please select a collection before adding an environment.", "error");
return;
}
f("submit", {
name: n.value,
color: r.value,
type: e.value?.id === "global" ? "global" : "collection",
collectionId: e.value?.id !== "global" ? e.value?.id : void 0
});
}, k = () => {
a.state.hide(), F.commandPalette.emit({ commandName: "Create Collection" });
};
return (t, l) => (v(), u(i(N), {
bodyClass: "border-t-0 rounded-t-lg",
size: "xs",
state: t.state
}, {
default: o(() => [
s(B, {
disabled: !e.value || !n.value.trim(),
onCancel: l[2] || (l[2] = (d) => f("cancel")),
onSubmit: V
}, {
options: o(() => [
s(i(T), {
modelValue: e.value,
"onUpdate:modelValue": l[1] || (l[1] = (d) => e.value = d),
options: c.value,
placeholder: "Select Type"
}, {
default: o(() => [
c.value.length > 0 ? (v(), u(i(C), {
key: 0,
class: "hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs",
variant: "outlined"
}, {
default: o(() => [
p("span", {
class: I(e.value ? "text-c-1" : "text-c-3")
}, E(e.value ? e.value.label : "Select Collection"), 3),
s(i($), {
class: "text-c-3",
icon: "ChevronDown",
size: "xs"
})
]),
_: 1
})) : (v(), u(i(C), {
key: 1,
class: "hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs",
variant: "outlined",
onClick: k
}, {
default: o(() => [...l[3] || (l[3] = [
p("span", { class: "text-c-1" }, "Create Collection", -1)
])]),
_: 1
}))
]),
_: 1
}, 8, ["modelValue", "options"])
]),
submit: o(() => [...l[4] || (l[4] = [
w(" Add Environment ", -1)
])]),
default: o(() => [
p("div", W, [
s(P, {
activeColor: r.value,
class: "peer",
selector: "",
onSelect: S
}, null, 8, ["activeColor"]),
s(D, {
modelValue: n.value,
"onUpdate:modelValue": l[0] || (l[0] = (d) => n.value = d),
class: "-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden",
placeholder: "Environment name"
}, null, 8, ["modelValue"])
])
]),
_: 1
}, 8, ["disabled"])
]),
_: 1
}, 8, ["state"]));
}
});
export {
J as default
};