@scalar/api-client
Version:
the open source API testing client
209 lines (208 loc) • 9.04 kB
JavaScript
import { defineComponent as K, useId as Q, computed as x, ref as m, useTemplateRef as E, onMounted as j, onBeforeUnmount as G, createElementBlock as M, openBlock as b, unref as l, createElementVNode as o, normalizeClass as V, createVNode as a, createCommentVNode as $, normalizeStyle as J, createBlock as X, withCtx as T, createTextVNode as g, toDisplayString as v } from "vue";
import { ScalarButton as q, ScalarWrappingText as Y, ScalarIcon as Z } from "@scalar/components";
import { REQUEST_METHODS as _ } from "@scalar/helpers/http/http-info";
import { ScalarIconCopy as ee, ScalarIconWarningCircle as te } from "@scalar/icons";
import { useClipboard as ne } from "@scalar/use-hooks/useClipboard";
import { getResolvedUrl as oe } from "../../operation-block/helpers/get-resolved-url.js";
import { useLoadingAnimation as se } from "../hooks/use-loading-animation.js";
import le from "./AddressBarHistory.vue.js";
import ae from "../../../../components/HttpMethod/HttpMethod.vue.js";
import re from "../../../components/server/ServerDropdown.vue.js";
import ie from "../../../components/code-input/CodeInput.vue.js";
const de = ["id"], ue = { class: "flex gap-1" }, me = { class: "scroll-timeline-x scroll-timeline-x-hidden relative flex w-full bg-blend-normal" }, ve = {
key: 0,
class: "absolute inset-x-0 top-[calc(100%+4px)] flex flex-col items-center rounded px-6"
}, fe = { class: "text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1" }, ce = { class: "min-w-0 flex-1" }, he = {
"aria-hidden": "true",
class: "inline-flex items-center gap-1"
}, xe = { class: "sr-only" }, be = {
name: "AddressBar"
}, Me = /* @__PURE__ */ K({
...be,
props: {
path: {},
method: {},
server: {},
servers: {},
history: {},
layout: {},
eventBus: {},
environment: {},
serverMeta: {}
},
emits: ["execute", "select:history:item"],
setup(e, { expose: z, emit: D }) {
const f = D, c = Q(), { percentage: I, startLoading: y, stopLoading: h, isLoading: L } = se(), A = x(() => ({
backgroundColor: `color-mix(in srgb, transparent 90%, ${_[e.method].colorVar})`,
transform: `translate3d(-${I.value}%,0,0)`
})), i = m(null), r = m(null), B = x(() => r.value || i.value), C = (n, t, s) => {
const W = d.value?.cursorPosition();
e.eventBus.emit(
"operation:update:pathMethod",
{
meta: { method: e.method, path: e.path },
payload: { method: n, path: t },
callback: (u) => {
(u === "success" || u === "no-change") && (r.value = null, i.value = null), u === "success" ? e.eventBus.emit("ui:focus:address-bar", { position: W }) : u === "conflict" && (n !== e.method && (r.value = n), t !== e.path && (i.value = t));
}
},
s
);
}, O = (n) => C(n, i.value ?? e.path), H = (n) => {
const t = n.startsWith("/") ? n : `/${n}`;
C(r.value ?? e.method, t, {
debounceKey: `operation:update:pathMethod-${e.path}-${e.method}`
});
}, p = E("sendButtonRef"), d = E("addressBarRef"), w = () => p.value?.$el?.focus(), k = (n) => {
if (d.value?.isFocused && e.layout !== "desktop")
return;
const t = n && "position" in n ? n.position : "end";
d.value?.focus(t), n && "event" in n && n.event.preventDefault();
};
j(() => {
e.eventBus.on("ui:focus:address-bar", k), e.eventBus.on("ui:focus:send-button", w), e.eventBus.on("hooks:on:request:sent", y), e.eventBus.on("hooks:on:request:complete", h);
}), G(() => {
e.eventBus.off("ui:focus:address-bar", k), e.eventBus.off("ui:focus:send-button", w), e.eventBus.off("hooks:on:request:sent", y), e.eventBus.off("hooks:on:request:complete", h), h();
});
const { copyToClipboard: N } = ne(), P = async () => {
await N(
oe({ environment: e.environment, server: e.server, path: e.path, pathVariables: {} })
);
}, S = m(!1), U = m(!1), R = x(
() => S.value || U.value
), F = () => e.serverMeta.type === "operation" ? e.eventBus.emit("ui:navigate", {
page: "operation",
path: "servers",
operationPath: e.serverMeta.path,
method: e.serverMeta.method
}) : e.eventBus.emit("ui:navigate", {
page: "document",
path: "servers"
});
return z({
methodConflict: r,
pathConflict: i
}), (n, t) => (b(), M("div", {
id: l(c),
class: "scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-0 lg:w-auto"
}, [
o("div", {
class: V(["address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]", {
"outline-c-danger outline": B.value,
"rounded-b-none": R.value
}])
}, [
o("div", {
class: V(["pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border", {
"rounded-b-none": R.value
}])
}, [
o("div", {
class: "absolute top-0 left-0 h-full w-full",
style: J(A.value)
}, null, 4)
], 2),
o("div", ue, [
a(l(ae), {
isEditable: e.layout !== "modal",
isSquare: "",
method: r.value ?? e.method,
teleport: "",
onChange: O
}, null, 8, ["isEditable", "method"])
]),
o("div", me, [
e.servers.length ? (b(), X(l(re), {
key: 0,
layout: e.layout,
meta: e.serverMeta,
server: e.server,
servers: e.servers,
target: l(c),
"onUpdate:open": t[0] || (t[0] = (s) => S.value = s),
"onUpdate:selectedServer": t[1] || (t[1] = (s) => e.eventBus.emit("server:update:selected", s)),
"onUpdate:servers": F,
"onUpdate:variable": t[2] || (t[2] = (s) => e.eventBus.emit("server:update:variables", s))
}, null, 8, ["layout", "meta", "server", "servers", "target"])) : $("", !0),
t[7] || (t[7] = o("div", { class: "fade-left" }, null, -1)),
a(l(ie), {
ref_key: "addressBarRef",
ref: d,
alwaysEmitChange: "",
"aria-label": "Path",
class: "min-w-fit outline-none",
disableCloseBrackets: "",
disabled: e.layout === "modal",
disableEnter: "",
disableTabIndent: "",
emitOnBlur: !1,
environment: e.environment,
importCurl: "",
layout: e.layout,
modelValue: e.path,
placeholder: e.server ? "" : "Enter a URL",
server: "",
onSubmit: t[3] || (t[3] = (s) => f("execute")),
"onUpdate:modelValue": H
}, null, 8, ["disabled", "environment", "layout", "modelValue", "placeholder"]),
t[8] || (t[8] = o("div", { class: "fade-right" }, null, -1))
]),
a(l(q), {
class: "hover:bg-b-3 mx-1",
size: "xs",
variant: "ghost",
onClick: P
}, {
default: T(() => [
a(l(ee)),
t[9] || (t[9] = o("span", { class: "sr-only" }, "Copy URL", -1))
]),
_: 1
}),
a(le, {
history: e.history,
target: l(c),
"onSelect:history:item": t[4] || (t[4] = (s) => f("select:history:item", s)),
"onUpdate:open": t[5] || (t[5] = (s) => U.value = s)
}, null, 8, ["history", "target"]),
B.value ? (b(), M("div", ve, [
o("div", fe, [
a(l(te), { size: "sm" }),
o("div", ce, [
t[10] || (t[10] = g(" A ", -1)),
o("em", null, v(r.value?.toUpperCase() ?? e.method.toUpperCase()), 1),
t[11] || (t[11] = g(" request to ", -1)),
a(l(Y), {
text: i.value ?? e.path
}, null, 8, ["text"]),
t[12] || (t[12] = g(" already exists in this document ", -1))
])
])
])) : $("", !0),
a(l(q), {
ref_key: "sendButtonRef",
ref: p,
class: "relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold",
disabled: l(L),
onClick: t[6] || (t[6] = (s) => f("execute"))
}, {
default: T(() => [
o("span", he, [
a(l(Z), {
class: "relative shrink-0 fill-current",
icon: "Play",
size: "xs"
}),
t[13] || (t[13] = o("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))
]),
o("span", xe, " Send " + v(e.method) + " request to " + v(e.server?.url ?? "") + v(e.path), 1)
]),
_: 1
}, 8, ["disabled"])
], 2)
], 8, de));
}
});
export {
Me as default
};