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