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