@scalar/api-client
Version:
the open source API testing client
208 lines (207 loc) • 8.68 kB
JavaScript
import { defineComponent as V, computed as b, ref as z, useTemplateRef as I, createElementBlock as d, openBlock as r, Fragment as m, createElementVNode as o, createVNode as a, createCommentVNode as w, withCtx as l, createBlock as T, unref as n, createTextVNode as f, normalizeClass as D, nextTick as N } from "vue";
import { useModal as O, ScalarMarkdown as R, ScalarButton as p, ScalarToggle as U, ScalarModal as j } from "@scalar/components";
import { isHttpMethod as B } from "@scalar/helpers/http/is-http-method";
import { ScalarIconPencil as C } from "@scalar/icons";
import E from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
import y from "../../settings/components/Section.vue.js";
import H from "../../../components/code-input/CodeInput.vue.js";
const L = { class: "flex flex-col gap-8" }, W = { class: "has-focus-visible:bg-b-1 group rounded-lg" }, F = {
key: 1,
class: "text-c-3 flex items-center justify-center rounded-lg border p-4"
}, P = { class: "flex items-center justify-between gap-4 rounded-lg p-4" }, Z = { class: "min-w-0 flex-1" }, q = { class: "bg-b-2 flex items-center justify-between gap-4 rounded-lg border border-(--scalar-background-3) p-4 text-sm" }, _ = /* @__PURE__ */ V({
__name: "Overview",
props: {
documentSlug: {},
document: {},
eventBus: {},
layout: {},
path: {},
method: {},
exampleName: {},
environment: {},
securitySchemes: {},
workspaceStore: {},
activeWorkspace: {},
plugins: {},
customThemes: {},
currentTheme: {},
isDarkMode: { type: Boolean },
collectionType: {}
},
setup(e) {
const x = b(() => !e.method || !e.path ? "this operation" : `${typeof e.method == "string" ? e.method.toUpperCase() : e.method} ${e.path}`), h = b(() => e.collectionType === "operation" ? !e.path || !e.method || !B(e.method) ? "" : e.document?.paths?.[e.path]?.[e.method]?.description ?? "" : e.document?.info?.description ?? ""), v = b(() => e.collectionType !== "operation" || !e.path || !B(e.method) ? !1 : e.document?.paths?.[e.path]?.[e.method]?.deprecated ?? !1), g = z("preview"), k = I("codeInputRef"), s = async (i) => {
g.value = i, i === "edit" && (await N(), k.value?.focus());
}, S = async (i) => {
if (await s("preview"), e.collectionType === "document")
return e.eventBus.emit("document:update:info", { description: i });
if (e.collectionType === "operation") {
if (!e.path || !e.method) {
console.error("Invalid path or method", { path: e.path, method: e.method });
return;
}
return e.eventBus.emit("operation:update:meta", {
meta: { path: e.path, method: e.method },
payload: {
description: i
}
});
}
console.error("Invalid collection type", { collectionType: e.collectionType });
}, M = (i) => {
e.collectionType !== "operation" || !e.path || !e.method || e.eventBus.emit("operation:update:meta", {
meta: { path: e.path, method: e.method },
payload: { deprecated: i }
});
}, u = O(), $ = () => {
e.collectionType !== "operation" || !e.path || !e.method || !e.documentSlug || (e.eventBus.emit("operation:delete:operation", {
documentName: e.documentSlug,
meta: { path: e.path, method: e.method }
}), u.hide());
};
return (i, t) => (r(), d(m, null, [
o("div", L, [
a(y, null, {
title: l(() => [...t[5] || (t[5] = [
f("Description", -1)
])]),
actions: l(() => [
g.value === "preview" ? (r(), T(n(p), {
key: 0,
class: "text-c-2 hover:text-c-1 flex items-center gap-2",
size: "sm",
type: "button",
variant: "outlined",
onClick: t[0] || (t[0] = (c) => s("edit"))
}, {
default: l(() => [
a(n(C), {
size: "sm",
thickness: "1.5"
}),
t[6] || (t[6] = o("span", null, "Edit", -1))
]),
_: 1
})) : w("", !0)
]),
default: l(() => [
o("div", W, [
g.value === "preview" ? (r(), d(m, { key: 0 }, [
h.value.trim().length ? (r(), d(m, { key: 0 }, [
a(n(R), {
class: "flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)",
value: h.value,
withImages: "",
onDblclick: t[1] || (t[1] = (c) => s("edit"))
}, null, 8, ["value"]),
t[7] || (t[7] = o("div", { class: "brightness-lifted bg-b-1 absolute inset-0 -z-1 hidden rounded group-hover:block group-has-focus-visible:hidden" }, null, -1))
], 64)) : (r(), d("div", F, [
a(n(p), {
class: "hover:bg-b-2 hover:text-c-1 text-c-2 flex items-center gap-2",
size: "sm",
variant: "ghost",
onClick: t[2] || (t[2] = (c) => s("edit"))
}, {
default: l(() => [
a(n(C), {
size: "sm",
thickness: "1.5"
}),
t[8] || (t[8] = o("span", null, "Write a description", -1))
]),
_: 1
})
]))
], 64)) : (r(), T(n(H), {
key: 1,
ref_key: "codeInputRef",
ref: k,
class: "border px-0.5 py-0",
environment: void 0,
layout: e.layout,
modelValue: h.value,
onBlur: S
}, null, 8, ["layout", "modelValue"]))
])
]),
_: 1
}),
e.collectionType === "operation" ? (r(), d(m, { key: 0 }, [
a(y, null, {
title: l(() => [...t[9] || (t[9] = [
f("Status", -1)
])]),
default: l(() => [
o("div", {
class: D([
"rounded-lg border text-sm transition-colors",
v.value ? "border-(--scalar-color-alert) bg-(--scalar-background-alert)" : "bg-b-2 border-(--scalar-background-3)"
])
}, [
o("div", P, [
o("div", Z, [
o("h4", {
class: D([
"font-medium",
v.value ? "text-(--scalar-color-alert)" : "text-c-1"
])
}, " Deprecated ", 2),
t[10] || (t[10] = o("p", { class: "text-c-2 mt-1.5" }, " Mark this operation as deprecated. Consumers SHOULD refrain from using it. ", -1))
]),
a(n(U), {
class: "shrink-0",
modelValue: v.value,
"onUpdate:modelValue": M
}, null, 8, ["modelValue"])
])
], 2)
]),
_: 1
}),
a(y, null, {
title: l(() => [...t[11] || (t[11] = [
f("Danger Zone", -1)
])]),
default: l(() => [
o("div", q, [
t[13] || (t[13] = o("div", { class: "min-w-0 flex-1" }, [
o("h4", { class: "text-c-1 font-medium" }, "Delete Operation"),
o("p", { class: "text-c-2 mt-1.5" }, " Be careful, my friend. Once deleted, there is no way to recover the operation. ")
], -1)),
a(n(p), {
class: "shrink-0",
size: "sm",
variant: "danger",
onClick: t[3] || (t[3] = (c) => n(u).show())
}, {
default: l(() => [...t[12] || (t[12] = [
f(" Delete Operation ", -1)
])]),
_: 1
})
])
]),
_: 1
})
], 64)) : w("", !0)
]),
a(n(j), {
size: "xxs",
state: n(u),
title: `Delete ${x.value}`
}, {
default: l(() => [
a(E, {
variableName: x.value,
warningMessage: "This action cannot be undone.",
onClose: t[4] || (t[4] = (c) => n(u).hide()),
onDelete: $
}, null, 8, ["variableName"])
]),
_: 1
}, 8, ["state", "title"])
], 64));
}
});
export {
_ as default
};