@scalar/api-client
Version:
the open source API testing client
122 lines (121 loc) • 5.53 kB
JavaScript
import { defineComponent as c, useId as B, computed as y, useTemplateRef as p, onMounted as x, onBeforeUnmount as w, createElementBlock as k, openBlock as b, unref as l, createElementVNode as r, createVNode as a, normalizeStyle as S, createBlock as C, createCommentVNode as R, withCtx as E, toDisplayString as i } from "vue";
import { ScalarButton as U, ScalarIcon as V } from "@scalar/components";
import { REQUEST_METHODS as $ } from "@scalar/helpers/http/http-info";
import z from "./AddressBarHistory.vue.js";
import I from "../../../../components/HttpMethod/HttpMethod.vue.js";
import T from "../../../components/server/ServerDropdown.vue.js";
import A from "../../../components/code-input/CodeInput.vue.js";
const D = ["id"], F = { class: "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]" }, H = { class: "pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border" }, M = { class: "z-context-plus flex gap-1" }, N = { class: "scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal" }, q = {
"aria-hidden": "true",
class: "inline-flex items-center gap-1"
}, L = { class: "sr-only" }, W = /* @__PURE__ */ c({
__name: "AddressBar",
props: {
path: {},
method: {},
server: {},
servers: {},
history: {},
layout: {},
percentage: { default: 100 },
eventBus: {},
environment: {}
},
emits: ["execute", "update:path", "update:method", "update:servers"],
setup(o, { emit: h }) {
const n = h, d = B(), g = y(() => ({
backgroundColor: `color-mix(in srgb, transparent 90%, ${$[o.method].colorVar})`,
transform: `translate3d(-${o.percentage}%,0,0)`
})), m = p("sendButtonRef"), u = p("addressBarRef"), f = () => m.value?.$el?.focus(), v = ({
event: t
}) => {
u.value?.isFocused && o.layout !== "desktop" || (u.value?.focus(), t.preventDefault());
};
return x(() => {
o.eventBus.on("ui:focus:address-bar", v), o.eventBus.on("ui:focus:send-button", f);
}), w(() => {
o.eventBus.off("ui:focus:address-bar", v), o.eventBus.off("ui:focus:send-button", f);
}), (t, e) => (b(), k("div", {
id: l(d),
class: "scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto"
}, [
r("div", F, [
r("div", H, [
r("div", {
class: "absolute top-0 left-0 z-[1002] h-full w-full",
style: S(g.value)
}, null, 4)
]),
r("div", M, [
a(l(I), {
isEditable: t.layout !== "modal",
isSquare: "",
method: t.method,
teleport: "",
onChange: e[0] || (e[0] = (s) => n("update:method", { value: s }))
}, null, 8, ["isEditable", "method"])
]),
r("div", N, [
t.servers.length ? (b(), C(l(T), {
key: 0,
layout: t.layout,
server: t.server,
servers: t.servers,
target: l(d),
"onUpdate:selectedServer": e[1] || (e[1] = (s) => t.eventBus.emit("server:update:selected", s)),
"onUpdate:servers": e[2] || (e[2] = (s) => n("update:servers")),
"onUpdate:variable": e[3] || (e[3] = (s) => t.eventBus.emit("server:update:variables", s))
}, null, 8, ["layout", "server", "servers", "target"])) : R("", !0),
e[8] || (e[8] = r("div", { class: "fade-left" }, null, -1)),
a(l(A), {
ref_key: "addressBarRef",
ref: u,
"aria-label": "Path",
class: "min-w-fit outline-none",
disableCloseBrackets: "",
disabled: t.layout === "modal",
disableEnter: "",
disableTabIndent: "",
emitOnBlur: !1,
environment: t.environment,
importCurl: "",
modelValue: t.path,
placeholder: t.server ? "" : "Enter a URL or cURL command",
server: "",
onCurl: e[4] || (e[4] = (s) => t.eventBus.emit("import:curl", { value: s })),
onSubmit: e[5] || (e[5] = (s) => n("execute")),
"onUpdate:modelValue": e[6] || (e[6] = (s) => n("update:path", { value: s }))
}, null, 8, ["disabled", "environment", "modelValue", "placeholder"]),
e[9] || (e[9] = r("div", { class: "fade-right" }, null, -1))
]),
a(z, {
history: t.history,
target: l(d)
}, null, 8, ["history", "target"]),
a(l(U), {
ref_key: "sendButtonRef",
ref: m,
class: "z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold",
disabled: t.percentage < 100,
onClick: e[7] || (e[7] = (s) => n("execute"))
}, {
default: E(() => [
r("span", q, [
a(l(V), {
class: "relative shrink-0 fill-current",
icon: "Play",
size: "xs"
}),
e[10] || (e[10] = r("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))
]),
r("span", L, " Send " + i(t.method) + " request to " + i(t.server?.url ?? "") + i(t.path), 1)
]),
_: 1
}, 8, ["disabled"])
])
], 8, D));
}
});
export {
W as default
};