@scalar/api-client
Version:
the open source API testing client
101 lines (100 loc) • 3.95 kB
JavaScript
import { defineComponent as h, ref as p, watch as w, nextTick as x, createElementBlock as i, openBlock as o, createElementVNode as n, createBlock as u, createCommentVNode as a, unref as r, withCtx as v, createVNode as d, Fragment as f } from "vue";
import { ScalarButton as c, ScalarIcon as b, ScalarMarkdown as y } from "@scalar/components";
import z from "../../../components/CodeInput/CodeInput.vue.js";
const B = { class: "flex h-full w-full flex-col gap-2 pt-8" }, C = { class: "flex min-h-8 items-center justify-between gap-2 pl-1.5" }, I = { class: "has-[:focus-visible]:bg-b-1 group relative z-1 flex flex-col rounded-lg" }, E = { class: "flex h-full min-h-[calc(1rem*4)] flex-col" }, N = {
key: 1,
class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4"
}, F = /* @__PURE__ */ h({
__name: "MarkdownInput",
props: {
modelValue: {},
environment: {},
envVariables: {},
workspace: {}
},
emits: ["update:modelValue"],
setup(S, { emit: k }) {
const g = k, t = p("preview"), m = p(null);
w(t, (l) => {
l === "edit" && x(() => {
m.value?.focus();
});
});
const V = () => {
requestAnimationFrame(() => {
t.value = "preview";
});
};
return (l, e) => (o(), i("div", B, [
n("div", C, [
e[5] || (e[5] = n("h3", { class: "font-bold" }, "Description", -1)),
t.value === "preview" ? (o(), u(r(c), {
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] = (s) => t.value = "edit")
}, {
default: v(() => [
d(r(b), {
icon: "Pencil",
size: "sm",
thickness: "1.5"
}),
e[4] || (e[4] = n("span", null, "Edit", -1))
]),
_: 1
})) : a("", !0)
]),
n("div", I, [
n("div", E, [
t.value === "preview" ? (o(), i(f, { key: 0 }, [
l.modelValue && l.modelValue.trim().length ? (o(), i(f, { key: 0 }, [
l.modelValue ? (o(), u(r(y), {
key: 0,
class: "h-full flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)",
value: l.modelValue,
withImages: "",
onDblclick: e[1] || (e[1] = (s) => t.value = "edit")
}, null, 8, ["value"])) : a("", !0),
e[6] || (e[6] = n("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)) : (o(), i("div", N, [
d(r(c), {
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] = (s) => t.value = "edit")
}, {
default: v(() => [
d(r(b), {
icon: "Pencil",
size: "sm",
thickness: "1.5"
}),
e[7] || (e[7] = n("span", null, "Write a description", -1))
]),
_: 1
})
]))
], 64)) : a("", !0),
t.value === "edit" ? (o(), u(z, {
key: 1,
ref_key: "codeInputRef",
ref: m,
class: "h-full flex-1 border px-0.5 py-0",
envVariables: l.envVariables,
environment: l.environment,
modelValue: l.modelValue,
workspace: l.workspace,
onBlur: V,
"onUpdate:modelValue": e[3] || (e[3] = (s) => g("update:modelValue", s))
}, null, 8, ["envVariables", "environment", "modelValue", "workspace"])) : a("", !0)
])
])
]));
}
});
export {
F as default
};