@scalar/api-client
Version:
the open source API testing client
95 lines (94 loc) • 3.56 kB
JavaScript
import { defineComponent as g, computed as x, ref as y, useTemplateRef as w, createElementBlock as i, openBlock as t, createElementVNode as o, createBlock as c, createCommentVNode as h, unref as n, withCtx as m, createVNode as d, Fragment as v, nextTick as B } from "vue";
import { ScalarButton as f, ScalarMarkdown as C } from "@scalar/components";
import { ScalarIconPencil as b } from "@scalar/icons";
import I from "../../../components/code-input/CodeInput.vue.js";
const V = { class: "flex flex-col gap-2" }, z = { class: "flex items-center justify-between gap-2 pl-1.5" }, S = { class: "has-[:focus-visible]:bg-b-1 group rounded-lg" }, N = {
key: 1,
class: "text-c-3 flex items-center justify-center rounded-lg border p-4"
}, j = /* @__PURE__ */ g({
__name: "Overview",
props: {
documentSlug: {},
document: {},
eventBus: {},
layout: {},
path: {},
method: {},
exampleName: {},
environment: {},
workspaceStore: {},
activeWorkspace: {},
collectionType: {}
},
setup(k) {
const u = x(
() => k.document?.info?.description ?? ""
), a = y("preview"), p = w("codeInputRef"), r = async (s) => {
a.value = s, s === "edit" && (await B(), p.value?.focus());
};
return (s, e) => (t(), i("div", V, [
o("div", z, [
e[6] || (e[6] = o("h3", { class: "font-bold" }, "Description", -1)),
a.value === "preview" ? (t(), c(n(f), {
key: 0,
class: "text-c-2 hover:text-c-1 flex items-center gap-2",
size: "sm",
type: "button",
variant: "outlined",
onClick: e[0] || (e[0] = (l) => r("edit"))
}, {
default: m(() => [
d(n(b), {
size: "sm",
thickness: "1.5"
}),
e[5] || (e[5] = o("span", null, "Edit", -1))
]),
_: 1
})) : h("", !0)
]),
o("div", S, [
a.value === "preview" ? (t(), i(v, { key: 0 }, [
u.value.trim().length ? (t(), i(v, { key: 0 }, [
d(n(C), {
class: "flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)",
value: u.value,
withImages: "",
onDblclick: e[1] || (e[1] = (l) => r("edit"))
}, null, 8, ["value"]),
e[7] || (e[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)) : (t(), i("div", N, [
d(n(f), {
class: "hover:bg-b-2 hover:text-c-1 text-c-2 flex items-center gap-2",
size: "sm",
variant: "ghost",
onClick: e[2] || (e[2] = (l) => r("edit"))
}, {
default: m(() => [
d(n(b), {
size: "sm",
thickness: "1.5"
}),
e[8] || (e[8] = o("span", null, "Write a description", -1))
]),
_: 1
})
]))
], 64)) : (t(), c(n(I), {
key: 1,
ref_key: "codeInputRef",
ref: p,
class: "border px-0.5 py-0",
environment: void 0,
layout: s.layout,
modelValue: u.value,
onBlur: e[3] || (e[3] = (l) => r("preview")),
"onUpdate:modelValue": e[4] || (e[4] = (l) => s.eventBus.emit("document:update:info", { description: l }))
}, null, 8, ["layout", "modelValue"]))
])
]));
}
});
export {
j as default
};