@scalar/api-client/dist/v2/components/sidebar/Sidebar.vue.js

the open source API testing client

import { defineComponent as w, mergeModels as f, useModel as c, ref as y, createBlock as s, openBlock as r, unref as a, withCtx as l, createVNode as B, renderSlot as b, createElementVNode as k, createCommentVNode as n } from "vue";
import { ScalarIconButton as W } from "@scalar/components";
import { ScalarIconMagnifyingGlass as V } from "@scalar/icons";
import { ScalarSidebar as $ } from "@scalar/sidebar";
import g from "./SidebarMenu.vue.js";
import C from "./SidebarToggle.vue.js";
import I from "../resize/Resize.vue.js";
import M from "../../features/search/components/SearchButton.vue.js";
const O = { class: "bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5" }, D = { class: "flex items-center justify-between" }, F = /* @__PURE__ */ w({
  __name: "Sidebar",
  props: /* @__PURE__ */ f({
    sidebarState: {},
    layout: {},
    activeWorkspace: {},
    workspaces: {},
    eventBus: {},
    documents: {},
    isDroppable: { type: [Boolean, Function] }
  }, {
    isSidebarOpen: { type: Boolean, required: !0 },
    isSidebarOpenModifiers: {},
    sidebarWidth: {
      required: !0,
      default: 288
    },
    sidebarWidthModifiers: {}
  }),
  emits: /* @__PURE__ */ f(["selectItem", "select:workspace", "create:workspace", "reorder"], ["update:isSidebarOpen", "update:sidebarWidth"]),
  setup(p, { emit: S }) {
    const i = S, u = c(p, "isSidebarOpen"), d = y(!1), m = c(p, "sidebarWidth");
    return (e, t) => (r(), s(a(I), {
      width: m.value,
      "onUpdate:width": t[6] || (t[6] = (o) => m.value = o),
      class: "flex flex-col"
    }, {
      default: l(() => [
        B(a($), {
          class: "flex w-auto flex-1 pt-2",
          indent: 15,
          isDroppable: e.isDroppable,
          isExpanded: e.sidebarState.isExpanded,
          isSelected: e.sidebarState.isSelected,
          items: e.sidebarState.items.value,
          layout: "client",
          onReorder: t[4] || (t[4] = (o, v) => i("reorder", o, v)),
          onSelectItem: t[5] || (t[5] = (o) => i("selectItem", o))
        }, {
          header: l(() => [
            k("div", O, [
              k("div", D, [
                e.layout === "desktop" ? (r(), s(g, {
                  key: 0,
                  activeWorkspace: e.activeWorkspace,
                  workspaces: e.workspaces,
                  onCreateWorkspace: t[0] || (t[0] = (o) => i("create:workspace")),
                  "onSelect:workspace": t[1] || (t[1] = (o) => i("select:workspace", o))
                }, null, 8, ["activeWorkspace", "workspaces"])) : e.layout === "modal" ? (r(), s(C, {
                  key: 1,
                  modelValue: u.value,
                  "onUpdate:modelValue": t[2] || (t[2] = (o) => u.value = o)
                }, null, 8, ["modelValue"])) : n("", !0),
                e.layout !== "web" ? (r(), s(a(W), {
                  key: 2,
                  icon: a(V),
                  label: "Search",
                  onClick: t[3] || (t[3] = (o) => d.value = !d.value)
                }, null, 8, ["icon"])) : n("", !0)
              ]),
              d.value || e.layout === "web" ? (r(), s(a(M), {
                key: 0,
                documents: e.documents,
                eventBus: e.eventBus
              }, null, 8, ["documents", "eventBus"])) : n("", !0)
            ])
          ]),
          before: l(() => [
            b(e.$slots, "workspaceButton")
          ]),
          footer: l(() => [
            b(e.$slots, "footer")
          ]),
          _: 3
        }, 8, ["isDroppable", "isExpanded", "isSelected", "items"])
      ]),
      _: 3
    }, 8, ["width"]));
  }
});
export {
  F as default
};