@scalar/api-client
Version:
the open source API testing client
97 lines (96 loc) • 3.76 kB
JavaScript
import { defineComponent as y, mergeModels as u, useSlots as g, ref as B, useModel as W, createBlock as l, openBlock as r, unref as a, withCtx as s, createVNode as $, createSlots as D, renderSlot as d, normalizeProps as c, guardReactiveProps as f, createElementVNode as b, createCommentVNode as p, createElementBlock as C } from "vue";
import { ScalarIconButton as E } from "@scalar/components";
import { ScalarIconMagnifyingGlass as I } from "@scalar/icons";
import { ScalarSidebar as h } from "@scalar/sidebar";
import M from "./SidebarMenu.vue.js";
import V from "../resize/Resize.vue.js";
import z from "../../features/search/components/SearchButton.vue.js";
const N = { class: "bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5" }, R = { class: "flex items-center justify-between" }, P = { key: 1 }, J = /* @__PURE__ */ y({
__name: "Sidebar",
props: /* @__PURE__ */ u({
sidebarState: {},
layout: {},
activeWorkspace: {},
workspaces: {},
eventBus: {},
documents: {},
isDroppable: { type: [Boolean, Function] }
}, {
sidebarWidth: {
required: !0,
default: 288
},
sidebarWidthModifiers: {}
}),
emits: /* @__PURE__ */ u(["selectItem", "select:workspace", "create:workspace", "reorder"], ["update:sidebarWidth"]),
setup(k, { emit: v }) {
const i = v, w = g(), n = B(!1), m = W(k, "sidebarWidth");
return (e, o) => (r(), l(a(V), {
width: m.value,
"onUpdate:width": o[5] || (o[5] = (t) => m.value = t),
class: "flex flex-col"
}, {
default: s(() => [
$(a(h), {
class: "flex w-auto flex-1 pt-2",
indent: 15,
isDraggable: e.layout !== "modal",
isDroppable: e.isDroppable,
isExpanded: e.sidebarState.isExpanded,
isSelected: e.sidebarState.isSelected,
items: e.sidebarState.items.value,
layout: "client",
onReorder: o[3] || (o[3] = (t, S) => i("reorder", t, S)),
onSelectItem: o[4] || (o[4] = (t) => i("selectItem", t))
}, D({
header: s(() => [
b("div", N, [
b("div", R, [
e.layout === "desktop" ? (r(), l(M, {
key: 0,
activeWorkspace: e.activeWorkspace,
workspaces: e.workspaces,
"onCreate:workspace": o[0] || (o[0] = (t) => i("create:workspace")),
"onSelect:workspace": o[1] || (o[1] = (t) => i("select:workspace", t))
}, null, 8, ["activeWorkspace", "workspaces"])) : e.layout === "modal" ? (r(), C("div", P)) : p("", !0),
e.layout !== "web" ? (r(), l(a(E), {
key: 2,
icon: a(I),
label: "Search",
onClick: o[2] || (o[2] = (t) => n.value = !n.value)
}, null, 8, ["icon"])) : p("", !0)
]),
n.value || e.layout === "web" ? (r(), l(a(z), {
key: 0,
documents: e.documents,
eventBus: e.eventBus
}, null, 8, ["documents", "eventBus"])) : p("", !0)
])
]),
decorator: s((t) => [
d(e.$slots, "decorator", c(f(t)))
]),
before: s(() => [
d(e.$slots, "workspaceButton")
]),
footer: s(() => [
d(e.$slots, "footer")
]),
_: 2
}, [
w.empty ? {
name: "empty",
fn: s((t) => [
d(e.$slots, "empty", c(f(t)))
]),
key: "0"
} : void 0
]), 1032, ["isDraggable", "isDroppable", "isExpanded", "isSelected", "items"])
]),
_: 3
}, 8, ["width"]));
}
});
export {
J as default
};