@scalar/api-client
Version:
the open source API testing client
144 lines (143 loc) • 5.11 kB
JavaScript
import { defineComponent as M, ref as A, computed as x, createElementBlock as u, openBlock as c, Fragment as S, createElementVNode as r, createVNode as o, createTextVNode as g, renderList as I, createBlock as y, unref as s, toDisplayString as T, withCtx as f, createCommentVNode as V } from "vue";
import { useModal as P, ScalarMarkdown as z, ScalarButton as k, ScalarModal as L } from "@scalar/components";
import { debounce as O } from "@scalar/helpers/general/debounce";
import { ScalarIconTrash as R, ScalarIconPlus as j } from "@scalar/icons";
import E from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
import F from "./Form.vue.js";
import W from "../../../../components/Server/ServerVariablesForm.vue.js";
const Y = { class: "flex flex-col gap-4" }, q = { class: "flex flex-col gap-4" }, G = { class: "bg-b-2 flex items-center justify-between rounded-t-lg px-3 py-1 text-sm" }, H = {
key: 1,
class: "self-center"
}, J = { class: "divide-0 flex w-full flex-col divide-y rounded-b-lg text-sm" }, K = { class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4" }, se = /* @__PURE__ */ M({
__name: "Servers",
props: {
documentSlug: {},
document: {},
eventBus: {},
layout: {},
path: {},
method: {},
exampleName: {},
environment: {},
workspaceStore: {},
activeWorkspace: {},
collectionType: {}
},
setup(l) {
const v = P(), n = A(-1), _ = x(
() => l.document?.servers?.[n.value]
), $ = x(() => l.document?.servers ?? []), B = [
{
label: "URL",
key: "url",
placeholder: "https://void.scalar.com"
},
{
label: "Description",
key: "description",
placeholder: "Production"
}
], w = (t) => {
n.value = t, v.show();
}, p = () => {
v.hide(), n.value = -1;
}, N = () => {
n.value < 0 || (l.eventBus.emit("server:delete:server", { index: n.value }), p());
}, { execute: b } = O({ delay: 328, maxWait: 1e3 }), U = (t, e, a) => b(
`${t}-${e}`,
() => l.eventBus.emit("server:update:server", {
index: t,
server: { [e]: a }
})
), C = (t, e, a) => b(
`${t}-${e}`,
() => l.eventBus.emit("server:update:variables", {
index: t,
key: e,
value: a
})
), D = () => l.eventBus.emit("server:add:server"), h = (t, e = 0) => t?.description || `Server ${e + 1}`;
return (t, e) => (c(), u(S, null, [
r("div", Y, [
e[1] || (e[1] = r("div", { class: "flex flex-col gap-2" }, [
r("h3", { class: "font-bold" }, "Servers"),
r("p", { class: "text-sm" }, [
g(" Add different base URLs for your API. You can use "),
r("code", { class: "font-code text-c-2" }, "{variables}"),
g(" for dynamic parts. ")
])
], -1)),
r("div", q, [
(c(!0), u(S, null, I($.value, (a, d) => (c(), u("div", {
key: d,
class: "rounded-lg border"
}, [
r("div", G, [
a.description ? (c(), y(s(z), {
key: 0,
class: "self-center",
value: a.description
}, null, 8, ["value"])) : (c(), u("span", H, T(h(a, d)), 1)),
o(s(k), {
class: "hover:bg-b-3 hover:text-c-1 h-fit p-1.25",
"data-testid": "delete-server-button",
variant: "ghost",
onClick: (i) => w(d)
}, {
default: f(() => [
o(s(R), { class: "size-3.5" })
]),
_: 1
}, 8, ["onClick"])
]),
r("div", J, [
o(F, {
data: a,
environment: t.environment,
onUpdate: (i, m) => U(d, i, m),
options: B
}, null, 8, ["data", "environment", "onUpdate"]),
a.variables ? (c(), y(s(W), {
key: 0,
variables: a.variables,
"onUpdate:variable": (i, m) => C(d, i, m)
}, null, 8, ["variables", "onUpdate:variable"])) : V("", !0)
])
]))), 128))
]),
r("div", K, [
o(s(k), {
class: "hover:bg-b-2 hover:text-c-1 flex items-center gap-2",
size: "sm",
variant: "ghost",
onClick: D
}, {
default: f(() => [
o(s(j)),
e[0] || (e[0] = r("span", null, "Add Server", -1))
]),
_: 1
})
])
]),
o(s(L), {
size: "xxs",
state: s(v),
title: `Delete ${h(_.value, n.value)}`
}, {
default: f(() => [
o(E, {
variableName: "Server",
warningMessage: "Are you sure you want to delete this server? This action cannot be undone.",
onClose: p,
onDelete: N
})
]),
_: 1
}, 8, ["state", "title"])
], 64));
}
});
export {
se as default
};