@scalar/api-client
Version:
the open source API testing client
64 lines (63 loc) • 3.01 kB
JavaScript
import { defineComponent as S, ref as h, withDirectives as D, createElementBlock as l, openBlock as m, normalizeStyle as L, normalizeClass as y, unref as t, renderSlot as r, createCommentVNode as u, createElementVNode as n, toDisplayString as _, Fragment as N, vShow as W } from "vue";
import { useBreakpoints as $ } from "@scalar/use-hooks/useBreakpoints";
import { useLayout as z } from "../../hooks/useLayout.js";
import { useSidebar as C } from "../../hooks/useSidebar.js";
import { useWorkspace as B } from "../../store/store.js";
const I = {
key: 0,
class: "xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5"
}, X = { class: "m-0 text-sm font-medium whitespace-nowrap" }, R = { class: "bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5" }, q = /* @__PURE__ */ S({
__name: "Sidebar",
props: {
title: {}
},
setup(c) {
const { isSidebarOpen: w } = C(), { sidebarWidth: o, setSidebarWidth: i } = B(), { layout: p } = z(), a = h(!1), f = h(null), { breakpoints: d } = $(), x = (e) => {
e.preventDefault();
const b = e.clientX, k = Number.parseInt(
getComputedStyle(f.value).width || o.value,
10
), v = (E) => {
a.value = !0, document.body.classList.add("dragging");
let s = k + E.clientX - b;
s > 420 && (s = 420 + (s - 420) * 0.2), s < 240 && (s = 240), i(`${s}px`);
}, g = () => {
a.value = !1, document.body.classList.remove("dragging"), document.documentElement.removeEventListener("mousemove", v, !1), document.documentElement.removeEventListener("mouseup", g, !1), Number.parseInt(o.value, 10) > 420 ? i("360px") : Number.parseInt(o.value, 10) < 240 && i("240px");
};
document.documentElement.addEventListener("mousemove", v, !1), document.documentElement.addEventListener("mouseup", g, !1);
};
return (e, b) => D((m(), l("aside", {
ref_key: "sidebarRef",
ref: f,
class: y(["sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-3 md:min-w-fit md:flex-none md:border-r md:border-b-0", { dragging: a.value }]),
style: L({ width: t(d).lg ? t(o) : "100%" })
}, [
r(e.$slots, "header", {}, void 0, !0),
t(p) !== "modal" && c.title ? (m(), l("div", I, [
n("h2", X, _(c.title), 1),
t(d).lg ? u("", !0) : r(e.$slots, "button", { key: 0 }, void 0, !0)
])) : u("", !0),
n("div", {
class: y(["custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]", {
"sidebar-mask": t(p) !== "modal"
}])
}, [
r(e.$slots, "content", {}, void 0, !0)
], 2),
t(d).lg ? (m(), l(N, { key: 1 }, [
n("div", R, [
r(e.$slots, "button", {}, void 0, !0)
]),
n("div", {
class: "resizer",
onMousedown: x
}, null, 32)
], 64)) : u("", !0)
], 6)), [
[W, t(w)]
]);
}
});
export {
q as default
};