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