@scalar/api-client
Version:
the open source API testing client
116 lines (115 loc) • 4.84 kB
JavaScript
import { defineComponent as V, mergeModels as g, useSlots as B, ref as C, useModel as M, computed as E, createBlock as u, openBlock as r, unref as l, withCtx as s, createVNode as y, createSlots as z, renderSlot as i, createElementBlock as w, createCommentVNode as c, Fragment as N, normalizeProps as f, guardReactiveProps as b, createElementVNode as p, normalizeClass as R, isRef as h } from "vue";
import { ScalarIconButton as F, ScalarSidebarSearchInput as q } from "@scalar/components";
import { ScalarIconFileDashed as A, ScalarIconMagnifyingGlass as U } from "@scalar/icons";
import { ScalarSidebar as j } from "@scalar/sidebar";
import G from "./SidebarMenu.vue.js";
import { useSearchIndex as H } from "../../features/search/hooks/use-search-index.js";
import J from "../resize/Resize.vue.js";
const K = { class: "flex items-center justify-between" }, L = { key: 1 }, _ = /* @__PURE__ */ V({
__name: "Sidebar",
props: /* @__PURE__ */ g({
sidebarState: {},
layout: {},
activeWorkspace: {},
workspaces: {},
documents: {},
isDroppable: { type: [Boolean, Function] }
}, {
sidebarWidth: {
required: !0,
default: 288
},
sidebarWidthModifiers: {}
}),
emits: /* @__PURE__ */ g(["selectItem", "select:workspace", "create:workspace", "reorder", "navigate:to:settings"], ["update:sidebarWidth"]),
setup(a, { emit: x }) {
const n = x, v = B(), d = C(!1), k = M(a, "sidebarWidth"), S = (o) => o.type === "example" && o.title === "draft", { query: m, results: $ } = H(() => a.documents), I = E(() => $.value ?? a.sidebarState.items.value), W = (o) => {
n("selectItem", o), m.value = "", d.value = !1;
};
return (o, e) => (r(), u(l(J), {
width: k.value,
"onUpdate:width": e[6] || (e[6] = (t) => k.value = t),
class: "flex flex-col"
}, {
default: s(() => [
y(l(j), {
class: "flex w-auto flex-1",
indent: 20,
isDraggable: a.layout !== "modal",
isDroppable: a.isDroppable,
isExpanded: a.sidebarState.isExpanded,
isSelected: a.sidebarState.isSelected,
items: I.value,
layout: "client",
onReorder: e[5] || (e[5] = (t, D) => n("reorder", t, D)),
onSelectItem: W
}, z({
header: s(() => [
e[7] || (e[7] = p("div", { class: "mac:h-12 mac:app-drag-region h-2" }, null, -1)),
p("div", {
class: R(["bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5", { "max-md:pt-12": a.layout !== "modal" }])
}, [
p("div", K, [
a.layout !== "modal" ? (r(), u(G, {
key: 0,
activeWorkspace: a.activeWorkspace,
workspaces: a.workspaces,
"onCreate:workspace": e[0] || (e[0] = (t) => n("create:workspace")),
"onNavigate:to:settings": e[1] || (e[1] = (t) => n("navigate:to:settings")),
"onSelect:workspace": e[2] || (e[2] = (t) => n("select:workspace", t))
}, {
sidebarMenuActions: s(() => [
i(o.$slots, "sidebarMenuActions")
]),
_: 3
}, 8, ["activeWorkspace", "workspaces"])) : a.layout === "modal" ? (r(), w("div", L)) : c("", !0),
y(l(F), {
icon: l(U),
label: "Search",
onClick: e[3] || (e[3] = (t) => d.value = !d.value)
}, null, 8, ["icon"])
]),
d.value ? (r(), u(l(q), {
key: 0,
modelValue: l(m),
"onUpdate:modelValue": e[4] || (e[4] = (t) => h(m) ? m.value = t : null),
autofocus: ""
}, null, 8, ["modelValue"])) : c("", !0)
], 2)
]),
spacer: s(() => [
e[8] || (e[8] = p("div", { class: "mac:app-drag-region flex-1" }, null, -1))
]),
decorator: s((t) => [
i(o.$slots, "decorator", f(b(t)))
]),
icon: s((t) => [
v.icon || S(t.item) ? (r(), w(N, { key: 0 }, [
S(t.item) ? (r(), u(l(A), { key: 0 })) : c("", !0),
i(o.$slots, "icon", f(b(t)))
], 64)) : c("", !0)
]),
before: s(() => [
i(o.$slots, "workspaceButton")
]),
footer: s(() => [
i(o.$slots, "footer")
]),
_: 2
}, [
v.empty ? {
name: "empty",
fn: s((t) => [
i(o.$slots, "empty", f(b(t)))
]),
key: "0"
} : void 0
]), 1032, ["isDraggable", "isDroppable", "isExpanded", "isSelected", "items"])
]),
_: 3
}, 8, ["width"]));
}
});
export {
_ as default
};