@scalar/api-client
Version:
the open source API testing client
305 lines (304 loc) • 12.4 kB
JavaScript
import { defineComponent as j, mergeModels as C, computed as S, capitalize as F, useModel as W, ref as G, createElementBlock as b, openBlock as d, createVNode as u, createBlock as f, createCommentVNode as c, unref as s, normalizeClass as $, createSlots as H, withCtx as l, createTextVNode as y, createElementVNode as r, withKeys as p, withModifiers as m, toDisplayString as J, renderSlot as U, Fragment as I, nextTick as Y } from "vue";
import { useModal as Q, ScalarSidebarItem as E, ScalarIconButton as O, ScalarButton as A, ScalarModal as X } from "@scalar/components";
import { isMacOS as Z } from "@scalar/helpers/general/is-mac-os";
import { ScalarIconPlus as _, ScalarIconGearSix as ee, ScalarIconDotsThree as te } from "@scalar/icons";
import { LibraryIcon as ae } from "@scalar/icons/library";
import { getParentEntry as g } from "@scalar/workspace-store/navigation";
import oe from "../../../../assets/rabbit.ascii.js";
import ne from "../../../../assets/rabbitjump.ascii.js";
import D from "../../../../components/ScalarAsciiArt.vue.js";
import se from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
import ie from "./DownloadAppButton.vue.js";
import re from "./SidebarItemMenu.vue.js";
import { dragHandleFactory as le } from "../../../helpers/drag-handle-factory.js";
import de from "../../../components/sidebar/Sidebar.vue.js";
const ue = { class: "flex" }, me = { class: "flex items-center gap-0.5" }, ce = {
key: 0,
class: "relative flex items-center"
}, pe = {
key: 0,
class: "empty-sidebar-item-content overflow-hidden px-2.5 py-2.5"
}, ve = { class: "rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]" }, be = { class: "flex flex-col gap-1.5 p-2" }, fe = { class: "text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase" }, Oe = /* @__PURE__ */ j({
__name: "AppSidebar",
props: /* @__PURE__ */ C({
layout: {},
sidebarState: {},
isWorkspaceOpen: { type: Boolean },
activeWorkspace: {},
workspaces: {},
eventBus: {},
store: {}
}, {
isSidebarOpen: { type: Boolean, required: !0 },
isSidebarOpenModifiers: {},
sidebarWidth: {
required: !0,
default: 288
},
sidebarWidthModifiers: {}
}),
emits: /* @__PURE__ */ C(["click:workspace", "selectItem", "select:workspace", "create:workspace"], ["update:isSidebarOpen", "update:sidebarWidth"]),
setup(o, { emit: N }) {
const k = N, K = S(() => F(o.activeWorkspace.label)), T = W(o, "isSidebarOpen"), B = W(o, "sidebarWidth"), x = S(() => o.sidebarState.items.value.length <= 1), M = S(
() => le({
store: o.store,
sidebarState: o.sidebarState
})
), z = (a, e) => M.value.handleDragEnd(a, e), P = (a, e) => M.value.isDroppable(a, e), i = G(null), w = Q(), q = S(() => {
const a = i.value?.item;
return a?.type === "document" ? "This cannot be undone. You're about to delete the document and all tags and operations inside it." : `Are you sure you want to delete this ${a?.type ?? "item"}? This action cannot be undone.`;
}), L = () => {
const a = i.value?.item;
if (!a)
return;
const e = o.sidebarState.getEntryById(a.id), t = g("document", e), n = g("operation", e);
if (t) {
if (a.type === "document")
o.eventBus.emit("document:delete:document", { name: t.name });
else if (a.type === "tag")
o.eventBus.emit("tag:delete:tag", {
documentName: t.name,
name: a.name
});
else if (a.type === "operation") {
if (!n)
return;
o.eventBus.emit("operation:delete:operation", {
meta: {
method: n.method,
path: n.path
},
documentName: t.name
});
} else if (a.type === "example") {
if (!n)
return;
o.eventBus.emit("operation:delete:example", {
meta: {
method: n.method,
path: n.path,
exampleKey: a.name
},
documentName: t.name
});
}
w.hide(), i.value = null;
}
}, v = async (a, e) => {
if (i.value?.showMenu)
return;
const t = a.currentTarget;
i.value = { item: e, el: t, showMenu: !0 }, await Y();
const n = a instanceof MouseEvent ? new MouseEvent(a.type, a) : new KeyboardEvent(a.type, a);
i.value?.el.dispatchEvent(n);
}, R = () => {
i.value && (i.value.showMenu = !1);
}, V = (a) => {
const e = o.sidebarState.getEntryById(a.id), t = g("document", e), n = g("tag", e);
o.eventBus.emit("ui:open:command-palette", {
action: "create-request",
payload: {
documentName: t?.name,
tagId: n?.name
}
});
}, h = (a) => {
const e = o.sidebarState.getEntryById(a.id), t = g("document", e)?.name;
o.eventBus.emit("ui:navigate", {
page: "operation",
path: "overview",
operationPath: a.path,
method: a.method,
documentSlug: t
});
};
return (a, e) => (d(), b("div", ue, [
u(s(de), {
sidebarWidth: B.value,
"onUpdate:sidebarWidth": e[3] || (e[3] = (t) => B.value = t),
activeWorkspace: o.activeWorkspace,
class: $([
"max-md:inset-y-0 max-md:z-2 max-md:w-full!",
T.value ? "max-md:fixed! max-md:flex!" : "max-md:hidden!"
]),
documents: Object.values(o.store.workspace.documents),
isDroppable: P,
layout: o.layout,
sidebarState: o.sidebarState,
workspaces: o.workspaces,
"onCreate:workspace": e[4] || (e[4] = (t) => k("create:workspace")),
"onNavigate:to:settings": e[5] || (e[5] = (t) => o.eventBus.emit("ui:navigate", { page: "workspace", path: "settings" })),
onReorder: e[6] || (e[6] = (t, n) => z(t, n)),
"onSelect:workspace": e[7] || (e[7] = (t) => k("select:workspace", t)),
onSelectItem: e[8] || (e[8] = (t) => k("selectItem", t))
}, H({
sidebarMenuActions: l(() => [
U(a.$slots, "sidebarMenuActions", {}, void 0, !0)
]),
workspaceButton: l(() => [
u(s(E), {
is: "button",
active: o.isWorkspaceOpen,
onClick: e[0] || (e[0] = (t) => k("click:workspace"))
}, {
default: l(() => [
y(J(K.value), 1)
]),
_: 1
}, 8, ["active"])
]),
decorator: l(({ item: t }) => [
r("div", me, [
t.type === "operation" ? (d(), f(s(O), {
key: 0,
icon: s(ee),
label: "Operation settings",
size: "sm",
weight: "bold",
onClick: m((n) => h(t), ["stop"]),
onKeydown: [
p(m((n) => h(t), ["stop"]), ["enter"]),
p(m((n) => h(t), ["stop"]), ["space"])
]
}, null, 8, ["icon", "onClick", "onKeydown"])) : c("", !0),
u(s(O), {
"aria-expanded": "false",
"aria-haspopup": "menu",
icon: s(te),
label: "More options",
size: "sm",
weight: "bold",
onClick: m((n) => v(n, t), ["stop"]),
onKeydown: [
p(m((n) => v(n, t), ["stop"]), ["down"]),
p(m((n) => v(n, t), ["stop"]), ["enter"]),
p(m((n) => v(n, t), ["stop"]), ["space"]),
p(m((n) => v(n, t), ["stop"]), ["up"])
]
}, null, 8, ["icon", "onClick", "onKeydown"])
])
]),
icon: l(({ item: t }) => [
t.type === "document" && o.store.workspace.documents[t.name]?.["x-scalar-is-dirty"] === !0 ? (d(), b("div", ce, [
u(s(ae), {
class: "block",
src: "icon" in t && t.icon || "interface-content-folder"
}, null, 8, ["src"]),
e[11] || (e[11] = r("div", { class: "bg-orange absolute -top-1.25 -right-1.25 flex h-2.5 w-2.5 items-center justify-center rounded-full text-[9px] font-bold text-white" }, " ! ", -1))
])) : c("", !0)
]),
empty: l(({ item: t }) => [
u(s(E), {
is: "button",
onClick: (n) => V(t)
}, {
icon: l(() => [
u(s(_))
]),
default: l(() => [...e[12] || (e[12] = [
y("Add operation", -1)
])]),
_: 1
}, 8, ["onClick"])
]),
_: 2
}, [
o.layout !== "modal" ? {
name: "footer",
fn: l(() => [
r("div", {
class: $({
"empty-sidebar-item border-t": x.value
})
}, [
x.value ? (d(), b("div", pe, [
r("div", ve, [
u(D, {
art: s(oe),
class: "rabbitsit font-bold"
}, null, 8, ["art"]),
u(D, {
art: s(ne),
class: "rabbitjump absolute top-0 left-0 font-bold"
}, null, 8, ["art"])
]),
e[13] || (e[13] = r("div", { class: "mt-2 mb-2 text-center text-sm text-balance" }, [
r("b", { class: "font-medium" }, "Let's Get Started"),
r("p", { class: "mt-2 leading-5" }, " Create request, folder, collection or import from OpenAPI/Postman ")
], -1))
])) : c("", !0),
r("div", be, [
x.value ? (d(), f(s(A), {
key: 0,
class: "w-full",
size: "sm",
onClick: e[1] || (e[1] = (t) => o.eventBus.emit("ui:open:command-palette", {
action: "import-from-openapi-swagger-postman-curl",
payload: void 0
}))
}, {
default: l(() => [...e[14] || (e[14] = [
y(" Import Collection ", -1)
])]),
_: 1
})) : c("", !0),
u(s(A), {
class: "w-full",
hotkey: "K",
size: "sm",
variant: "outlined",
onClick: e[2] || (e[2] = (t) => o.eventBus.emit("ui:open:command-palette"))
}, {
default: l(() => [
e[20] || (e[20] = y(" Add Item ", -1)),
r("span", fe, [
s(Z)() ? (d(), b(I, { key: 0 }, [
e[15] || (e[15] = r("span", { class: "sr-only" }, "Command", -1)),
e[16] || (e[16] = r("span", { "aria-hidden": "true" }, "⌘", -1))
], 64)) : (d(), b(I, { key: 1 }, [
e[17] || (e[17] = r("span", { class: "sr-only" }, "CTRL", -1)),
e[18] || (e[18] = r("span", { "aria-hidden": "true" }, "⌃", -1))
], 64)),
e[19] || (e[19] = y(" K ", -1))
])
]),
_: 1
}),
o.layout === "web" ? (d(), f(ie, { key: 1 })) : c("", !0)
])
], 2)
]),
key: "0"
} : void 0
]), 1032, ["sidebarWidth", "activeWorkspace", "class", "documents", "layout", "sidebarState", "workspaces"]),
i.value?.showMenu ? (d(), f(re, {
key: 0,
eventBus: o.eventBus,
item: i.value.item,
sidebarState: o.sidebarState,
target: i.value.el,
onCloseMenu: R,
onShowDeleteModal: e[9] || (e[9] = (t) => s(w).show())
}, null, 8, ["eventBus", "item", "sidebarState", "target"])) : c("", !0),
i.value ? (d(), f(s(X), {
key: 1,
size: "xxs",
state: s(w),
title: `Delete ${i.value.item.title}`
}, {
default: l(() => [
u(se, {
variableName: i.value.item.title,
warningMessage: q.value,
onClose: e[10] || (e[10] = (t) => s(w).hide()),
onDelete: L
}, null, 8, ["variableName", "warningMessage"])
]),
_: 1
}, 8, ["state", "title"])) : c("", !0)
]));
}
});
export {
Oe as default
};