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