@scalar/api-client
Version:
the open source API testing client
99 lines (98 loc) • 4.02 kB
JavaScript
import { defineComponent as k, computed as x, createBlock as n, openBlock as a, unref as e, withCtx as o, createVNode as i, createSlots as _, createCommentVNode as d, createElementVNode as s, normalizeStyle as y, createElementBlock as C, Fragment as S, renderList as b, toDisplayString as l, normalizeClass as H } from "vue";
import { Menu as q, MenuButton as B, MenuItems as M, MenuItem as w } from "@headlessui/vue";
import { ScalarFloating as z, ScalarIcon as I, ScalarFloatingBackdrop as F } from "@scalar/components";
import { httpStatusCodes as N } from "@scalar/oas-utils/helpers";
import { formatMs as R } from "../../libs/formatters.js";
import V from "../HttpMethod/HttpMethod.vue.js";
import { getStatusCodeColor as E } from "./httpStatusCodeColors.js";
import { useWorkspace as A } from "../../store/store.js";
const D = { class: "min-w-0" }, L = { class: "text-c-1 min-w-0 truncate" }, Q = /* @__PURE__ */ k({
__name: "AddressBarHistory",
props: {
operation: {},
target: {}
},
setup(m) {
const { requestHistory: p } = A(), u = x(
() => p.filter((r) => r.request.requestUid === m.operation.uid).slice().reverse()
);
function f(r) {
console.warn(
"Restoring from the request history doesn't work yet. Request History Item:",
r
);
}
return (r, c) => (a(), n(e(q), { as: "div" }, {
default: o(({ open: h }) => [
i(e(z), {
offset: 0,
resize: "",
target: r.target
}, _({
default: o(() => [
u.value?.length ? (a(), n(e(B), {
key: 0,
class: "address-bar-history-button z-context-plus text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5"
}, {
default: o(() => [
i(e(I), {
icon: "History",
size: "sm",
thickness: "2.25"
}),
c[0] || (c[0] = s("span", { class: "sr-only" }, "Request History", -1))
]),
_: 1
})) : d("", !0)
]),
_: 2
}, [
h ? {
name: "floating",
fn: o(({ width: g }) => [
i(e(M), {
class: "custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center border-t p-0.75",
static: "",
style: y({ width: g })
}, {
default: o(() => [
(a(!0), C(S, null, b(u.value, (t, v) => (a(), n(e(w), {
key: t.timestamp,
as: "button",
class: "font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r",
value: v,
onClick: (U) => f(t)
}, {
default: o(() => [
t.response.method ? (a(), n(V, {
key: 0,
class: "text-[11px]",
method: t.response.method
}, null, 8, ["method"])) : d("", !0),
s("div", D, [
s("div", L, l(t.response.path), 1)
]),
s("div", null, l(e(R)(t.response.duration)), 1),
s("div", {
class: H([e(E)(t.response.status).color])
}, l(t.response.status), 3),
s("div", null, l(e(N)[t.response.status]?.name), 1)
]),
_: 2
}, 1032, ["value", "onClick"]))), 128))
]),
_: 1
}, 8, ["style"]),
i(e(F), { class: "-top-(--scalar-address-bar-height) rounded-lg" })
]),
key: "0"
} : void 0
]), 1032, ["target"])
]),
_: 1
}));
}
});
export {
Q as default
};