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