@scalar/api-client
Version:
the open source API testing client
57 lines (56 loc) • 2.05 kB
JavaScript
import { defineComponent as m, ref as p, useId as u, watch as f, nextTick as v, onBeforeMount as w, onBeforeUnmount as k, withDirectives as _, createElementBlock as h, openBlock as S, createElementVNode as a, unref as c, createVNode as x, withCtx as y, vShow as E } from "vue";
import { addScalarClassesToHeadless as C, ScalarTeleportRoot as T } from "@scalar/components";
import { useFocusTrap as F } from "@vueuse/integrations/useFocusTrap";
const B = { class: "scalar scalar-app" }, b = { class: "scalar-container" }, I = ["id"], L = {}, U = /* @__PURE__ */ m({
...L,
__name: "Modal",
props: {
workspaceStore: {},
modalState: {}
},
setup(o) {
const n = p(null), l = u(), { activate: i, deactivate: d } = F(n, {
allowOutsideClick: !0,
fallbackFocus: `#${l}`
}), s = (e) => e.key === "Escape" && o.modalState.hide(), r = () => {
window.removeEventListener("keydown", s), document.documentElement.style.removeProperty("overflow"), d();
};
return f(
() => o.modalState.open,
(e) => {
e ? (window.addEventListener("keydown", s), document.documentElement.style.overflow = "hidden", i({ checkCanFocusTrap: () => v() })) : r();
}
), w(() => C()), k(() => {
r();
}), (e, t) => _((S(), h("div", B, [
a("div", b, [
a("div", {
id: c(l),
ref_key: "client",
ref: n,
"aria-label": "API Client",
"aria-modal": "true",
class: "scalar-app-layout scalar-client flex",
role: "dialog",
tabindex: "-1"
}, [
x(c(T), null, {
default: y(() => [...t[1] || (t[1] = [
a("main", { class: "flex flex-1 flex-row" }, " Insert operation page here ", -1)
])]),
_: 1
})
], 8, I),
a("div", {
class: "scalar-app-exit",
onClick: t[0] || (t[0] = (g) => e.modalState.hide())
})
])
], 512)), [
[E, e.modalState.open]
]);
}
});
export {
U as default
};