@scalar/api-client
Version:
the open source API testing client
161 lines (160 loc) • 6.22 kB
JavaScript
import { defineComponent as E, useId as I, ref as i, watch as z, createElementBlock as L, openBlock as w, unref as a, createElementVNode as t, createVNode as u, normalizeStyle as U, createBlock as $, createCommentVNode as A, withCtx as M, toDisplayString as h } from "vue";
import { ScalarButton as H } from "@scalar/components";
import { REQUEST_METHODS as N } from "@scalar/helpers/http/http-info";
import { ScalarIconPlay as T } from "@scalar/icons";
import D from "../CodeInput/CodeInput.vue.js";
import O from "../HttpMethod/HttpMethod.vue.js";
import P from "./AddressBarHistory.vue.js";
import K from "../Server/ServerDropdown.vue.js";
import { useWorkspace as Q } from "../../store/store.js";
import { useLayout as W } from "../../hooks/useLayout.js";
const j = ["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]" }, G = { class: "pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border" }, J = { class: "z-context-plus flex gap-1" }, X = { class: "scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal" }, Y = {
"aria-hidden": "true",
class: "inline-flex items-center gap-1"
}, Z = { class: "sr-only" }, ue = /* @__PURE__ */ E({
__name: "AddressBar",
props: {
collection: {},
operation: {},
server: {},
environment: {},
envVariables: {},
workspace: {}
},
emits: ["importCurl"],
setup(n) {
const f = I(), { requestMutators: c, events: d } = Q(), { layout: p } = W(), m = i(null), g = i(null), x = (e) => {
n.operation.path !== e && c.edit(n.operation.uid, "path", e);
};
z(
() => n.operation.path,
(e) => {
e && x(e);
}
);
const o = i(100), b = i(0), l = i(!1), s = i();
function k() {
l.value ? o.value -= (o.value - 15) / 60 : o.value -= b.value / 20, o.value <= 0 && (clearInterval(s.value), s.value = void 0, o.value = 100, l.value = !1);
}
function B() {
s.value || (l.value = !0, s.value = setInterval(k, 20));
}
function y() {
b.value = o.value, l.value = !1;
}
function C() {
clearInterval(s.value), s.value = void 0, o.value = 100, l.value = !1;
}
d.requestStatus.on((e) => {
if (e === "start")
return B();
if (e === "stop")
return y();
if (e === "abort")
return C();
}), d.focusAddressBar.on(() => {
p === "modal" ? g.value?.$el?.focus() : m.value?.focus();
});
function R(e) {
c.edit(n.operation.uid, "method", e);
}
function q() {
const { method: e } = n.operation;
return N[e].colorVar;
}
function v() {
l.value || (l.value = !0, d.executeRequest.emit({ requestUid: n.operation.uid }));
}
d.hotKeys.on((e) => {
e?.focusAddressBar && m.value?.focus(), e?.executeRequest && v();
});
function S(e) {
c.edit(n.operation.uid, "path", e);
}
return (e, r) => (w(), L("div", {
id: a(f),
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"
}, [
t("div", F, [
t("div", G, [
t("div", {
class: "absolute top-0 left-0 z-[1002] h-full w-full",
style: U({
backgroundColor: `color-mix(in srgb, transparent 90%, ${q()})`,
transform: `translate3d(-${o.value}%,0,0)`
})
}, null, 4)
]),
t("div", J, [
u(O, {
isEditable: a(p) !== "modal",
isSquare: "",
method: e.operation.method,
teleport: "",
onChange: R
}, null, 8, ["isEditable", "method"])
]),
t("div", X, [
e.collection.servers.length ? (w(), $(a(K), {
key: 0,
collection: e.collection,
layout: "client",
operation: e.operation,
server: e.server,
target: a(f)
}, null, 8, ["collection", "operation", "server", "target"])) : A("", !0),
r[1] || (r[1] = t("div", { class: "fade-left" }, null, -1)),
u(D, {
ref_key: "addressBarRef",
ref: m,
"aria-label": "Path",
class: "min-w-fit outline-none",
disableCloseBrackets: "",
disabled: a(p) === "modal",
disableEnter: "",
disableTabIndent: "",
emitOnBlur: !1,
envVariables: e.envVariables,
environment: e.environment,
importCurl: "",
modelValue: e.operation.path,
placeholder: e.server?.uid && e.collection.servers.includes(e.server.uid) ? "" : "Enter a URL or cURL command",
server: "",
workspace: e.workspace,
onCurl: r[0] || (r[0] = (V) => e.$emit("importCurl", V)),
onSubmit: v,
"onUpdate:modelValue": S
}, null, 8, ["disabled", "envVariables", "environment", "modelValue", "placeholder", "workspace"]),
r[2] || (r[2] = t("div", { class: "fade-right" }, null, -1))
]),
u(P, {
operation: e.operation,
target: a(f)
}, null, 8, ["operation", "target"]),
u(a(H), {
ref_key: "sendButtonRef",
ref: g,
class: "z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold",
disabled: l.value,
onClick: v
}, {
default: M(() => [
t("span", Y, [
u(a(T), {
class: "relative shrink-0",
size: "xs",
weight: "fill"
}),
r[3] || (r[3] = t("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))
]),
t("span", Z, " Send " + h(e.operation.method) + " request to " + h(e.server?.url ?? "") + h(e.operation.path), 1)
]),
_: 1
}, 8, ["disabled"])
])
], 8, j));
}
});
export {
ue as default
};