@scalar/api-client
Version:
the open source API testing client
213 lines (212 loc) • 7.46 kB
JavaScript
import { defineComponent as V, reactive as $, ref as j, computed as _, watch as S, onMounted as O, onBeforeUnmount as W, createElementBlock as C, openBlock as c, createElementVNode as v, createVNode as n, unref as a, withCtx as u, createTextVNode as L, createBlock as g, createCommentVNode as D, toDisplayString as K, Fragment as q, renderList as F } from "vue";
import { ScalarContextMenu as H, ScalarFloating as G, ScalarDropdownMenu as J, ScalarDropdownButton as I, ScalarIcon as d, ScalarHotkey as P } from "@scalar/components";
import { LibraryIcon as Q } from "@scalar/icons/library";
import { useClipboard as X } from "@scalar/use-hooks/useClipboard";
import { useRouter as Y } from "vue-router";
import { ROUTES as Z } from "../../constants.js";
import { useActiveEntities as ee } from "../../store/active-entities.js";
import te from "./TopNavItem.vue.js";
import { useWorkspace as oe } from "../../store/store.js";
const le = { class: "mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2" }, ae = { class: "relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium" }, ne = {
key: 0,
class: "h-full w-full overflow-hidden"
}, de = /* @__PURE__ */ V({
__name: "TopNav",
props: {
openNewTab: {}
},
setup(U) {
const A = U, { activeRequest: E, activeCollection: f } = ee(), i = Y(), { events: k } = oe(), { copyToClipboard: M } = X(), t = $([
{
label: "",
path: "",
icon: "Add",
isCollection: !1
}
]), l = j(0), T = _(() => l.value), y = _(() => i.currentRoute.value.name?.toString().startsWith("collection."));
function N() {
if (y.value) {
t[l.value] = {
label: f.value?.info?.title || "Untitled Collection",
path: i.currentRoute.value.path,
icon: f.value?.["x-scalar-icon"] || "Collection",
isCollection: !0
};
return;
}
if (i.currentRoute.value.name?.toString().startsWith("request")) {
t[l.value] = {
label: E.value?.summary || "",
path: i.currentRoute.value.path,
icon: "ExternalLink",
isCollection: !1
};
return;
}
const e = Z.find((o) => o.to.name.startsWith(
i.currentRoute.value.name?.toString() ?? ""
));
if (e) {
t[l.value] = {
label: e.displayName,
path: i.currentRoute.value.path,
icon: e.icon,
isCollection: !1
};
return;
}
}
function h() {
const e = t[l.value]?.path;
e && i.push(e);
}
function m() {
t.push({
label: "",
path: "",
icon: "Add",
isCollection: !1
}), l.value = t.length - 1, N();
}
function p(e) {
l.value = e, h();
}
S(
() => i.currentRoute.value.path,
() => {
N();
},
{ immediate: !0 }
);
function x(e) {
t.splice(e, 1), l.value = Math.min(
l.value,
t.length - 1
), h();
}
const w = (e) => {
if (!t[e]?.path)
return;
const o = new URL(window.location.href);
o.pathname = t[e].path, M(o.toString());
}, z = (e) => {
t.splice(0, e), t.splice(1), l.value = 0, h();
}, R = (e) => {
if (e) {
if (e.addTopNav && m(), e.closeTopNav && x(l.value), e.navigateTopNavLeft && p(Math.max(l.value - 1, 0)), e.navigateTopNavRight && p(Math.min(l.value + 1, t.length - 1)), e.jumpToTab) {
const o = Number(e.jumpToTab.key) - 1;
o >= 0 && o < t.length && p(o);
}
e.jumpToLastTab && p(t.length - 1);
}
}, B = (e) => {
t.push({
label: e.name,
path: e.uid,
icon: "ExternalLink",
isCollection: !1
});
};
return S(
() => A.openNewTab,
(e) => {
e && B(e);
},
{ immediate: !0 }
), O(() => k.hotKeys.on(R)), W(() => k.hotKeys.off(R)), (e, o) => (c(), C("nav", le, [
o[3] || (o[3] = v("div", { class: "app-drag-region absolute inset-0" }, null, -1)),
v("div", ae, [
t.length === 1 ? (c(), C("div", ne, [
n(a(H), { triggerClass: "flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap" }, {
trigger: u(() => [
y.value ? (c(), g(a(Q), {
key: 0,
class: "size-3.5 min-w-3.5 stroke-2",
src: a(f)?.["x-scalar-icon"] || "Collection"
}, null, 8, ["src"])) : t[0]?.icon ? (c(), g(a(d), {
key: 1,
icon: t[0]?.icon,
size: "xs",
thickness: "2.5"
}, null, 8, ["icon"])) : D("", !0),
v("span", null, K(t[0]?.label), 1)
]),
content: u(() => [
n(a(G), { placement: "right-start" }, {
floating: u(() => [
n(a(J), { class: "scalar-app scalar-client" }, {
default: u(() => [
n(a(I), {
class: "flex items-center gap-1.5",
onClick: m
}, {
default: u(() => [
n(a(d), {
icon: "AddTab",
size: "sm",
thickness: "1.5"
}),
o[1] || (o[1] = L(" New Tab ")),
n(a(P), {
class: "bg-b-2 ml-auto",
hotkey: "T"
})
]),
_: 1,
__: [1]
}),
n(a(I), {
class: "flex items-center gap-1.5",
onClick: o[0] || (o[0] = (s) => w(T.value))
}, {
default: u(() => [
n(a(d), {
icon: "Link",
size: "sm",
thickness: "1.5"
}),
o[2] || (o[2] = L(" Copy URL "))
]),
_: 1,
__: [2]
})
]),
_: 1
})
]),
_: 1
})
]),
_: 1
})
])) : (c(!0), C(q, { key: 1 }, F(t, (s, r) => (c(), g(te, {
key: s.path,
active: r === T.value,
hotkey: (r + 1).toString(),
icon: s.isCollection ? a(f)?.["x-scalar-icon"] || "Collection" : s.icon,
isCollection: s.isCollection || !1,
label: s.label,
onClick: (b) => p(r),
onClose: (b) => x(r),
onCloseOtherTabs: (b) => z(r),
onCopyUrl: (b) => w(r),
onNewTab: m
}, null, 8, ["active", "hotkey", "icon", "isCollection", "label", "onClick", "onClose", "onCloseOtherTabs", "onCopyUrl"]))), 128)),
v("button", {
class: "text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5",
type: "button",
onClick: m
}, [
n(a(d), {
icon: "Add",
size: "sm",
thickness: "2.5"
})
])
])
]));
}
});
export {
de as default
};