@scalar/api-client
Version:
the open source API testing client
145 lines (144 loc) • 5.12 kB
JavaScript
import { defineComponent as M, ref as A, computed as x, createElementBlock as u, openBlock as c, Fragment as S, createElementVNode as s, createVNode as l, createTextVNode as g, renderList as I, createBlock as y, unref as r, 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" }, re = /* @__PURE__ */ M({
__name: "Servers",
props: {
documentSlug: {},
document: {},
eventBus: {},
layout: {},
path: {},
method: {},
exampleName: {},
environment: {},
workspaceStore: {},
activeWorkspace: {},
plugins: {},
collectionType: {}
},
setup(o) {
const v = P(), n = A(-1), _ = x(
() => o.document?.servers?.[n.value]
), $ = x(() => o.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 || (o.eventBus.emit("server:delete:server", { index: n.value }), p());
}, { execute: b } = O({ delay: 328, maxWait: 1e3 }), U = (t, e, a) => b(
`${t}-${e}`,
() => o.eventBus.emit("server:update:server", {
index: t,
server: { [e]: a }
})
), C = (t, e, a) => b(
`${t}-${e}`,
() => o.eventBus.emit("server:update:variables", {
index: t,
key: e,
value: a
})
), D = () => o.eventBus.emit("server:add:server"), h = (t, e = 0) => t?.description || `Server ${e + 1}`;
return (t, e) => (c(), u(S, null, [
s("div", Y, [
e[1] || (e[1] = s("div", { class: "flex flex-col gap-2" }, [
s("h3", { class: "font-bold" }, "Servers"),
s("p", { class: "text-sm" }, [
g(" Add different base URLs for your API. You can use "),
s("code", { class: "font-code text-c-2" }, "{variables}"),
g(" for dynamic parts. ")
])
], -1)),
s("div", q, [
(c(!0), u(S, null, I($.value, (a, d) => (c(), u("div", {
key: d,
class: "rounded-lg border"
}, [
s("div", G, [
a.description ? (c(), y(r(z), {
key: 0,
class: "self-center",
value: a.description
}, null, 8, ["value"])) : (c(), u("span", H, T(h(a, d)), 1)),
l(r(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(() => [
l(r(R), { class: "size-3.5" })
]),
_: 1
}, 8, ["onClick"])
]),
s("div", J, [
l(F, {
data: a,
environment: t.environment,
onUpdate: (i, m) => U(d, i, m),
options: B
}, null, 8, ["data", "environment", "onUpdate"]),
a.variables ? (c(), y(r(W), {
key: 0,
variables: a.variables,
"onUpdate:variable": (i, m) => C(d, i, m)
}, null, 8, ["variables", "onUpdate:variable"])) : V("", !0)
])
]))), 128))
]),
s("div", K, [
l(r(k), {
class: "hover:bg-b-2 hover:text-c-1 flex items-center gap-2",
size: "sm",
variant: "ghost",
onClick: D
}, {
default: f(() => [
l(r(j)),
e[0] || (e[0] = s("span", null, "Add Server", -1))
]),
_: 1
})
])
]),
l(r(L), {
size: "xxs",
state: r(v),
title: `Delete ${h(_.value, n.value)}`
}, {
default: f(() => [
l(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 {
re as default
};