@scalar/api-client
Version:
the open source API testing client
131 lines (130 loc) • 4.94 kB
JavaScript
import { defineComponent as B, ref as v, computed as w, onMounted as R, createBlock as h, createCommentVNode as y, openBlock as n, unref as l, withCtx as k, createElementVNode as c, normalizeStyle as x, createElementBlock as u, Fragment as D, renderList as T, normalizeClass as j, createTextVNode as g, toDisplayString as V, createVNode as q } from "vue";
import { ScalarTeleport as F, ScalarButton as G } from "@scalar/components";
import { ScalarIconGlobe as K, ScalarIconPlus as O } from "@scalar/icons";
import { onClickOutside as L } from "@vueuse/core";
import M from "fuse.js";
import { useRouter as Q } from "vue-router";
import { getEnvColor as W } from "../../libs/env-helpers.js";
import { PathId as _ } from "../../routes.js";
import { useActiveEntities as $ } from "../../store/active-entities.js";
import { parseEnvVariables as C } from "../../libs/environment-parser.js";
const H = {
key: 0,
class: "gap-1/2 flex flex-col"
}, J = ["onClick"], U = { class: "flex items-center gap-2 whitespace-nowrap" }, X = { class: "w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap" }, de = /* @__PURE__ */ B({
__name: "EnvironmentVariableDropdown",
props: {
query: {},
environment: {},
envVariables: {},
dropdownPosition: {}
},
emits: ["select"],
setup(S, { expose: E, emit: z }) {
const s = S, I = z, d = v(!0), p = v(null), r = v(0), f = Q(), { activeCollection: m } = $(), N = () => {
if (!f)
return;
const { currentRoute: t, push: o } = f, e = t.value.params.workspace;
!m.value || m.value.info?.title === "Drafts" ? o({
name: "environment.default",
params: {
[_.Workspace]: e
}
}) : o({
name: "collection.environment",
params: {
[_.Collection]: m.value.uid
}
}), d.value = !1;
}, P = new M(C(s.envVariables), {
keys: ["key", "value"]
}), i = w(() => {
const t = s.query;
if (!t)
return C(s.envVariables).slice(-4).filter(({ key: e, value: a }) => e !== "" || a !== "");
const o = P.search(t, { limit: 10 });
return o.length > 0 ? o.map((e) => e.item).filter(({ key: e, value: a }) => e !== "" || a !== "") : [];
}), b = (t) => {
I("select", t);
};
E({
handleArrowKey: (t) => {
const o = t === "up" ? -1 : 1, e = i.value.length;
e !== 0 && (r.value = (r.value + o + e) % e);
},
handleSelect: () => {
if (r.value >= 0) {
const t = i.value[r.value];
t && b(t.key);
}
}
}), R(() => {
r.value = 0;
});
const A = w(() => ({
left: (s.dropdownPosition?.left ?? 0) + "px",
// Add a 5px offset from the editor
top: (s.dropdownPosition?.top ?? 0) + 5 + "px"
}));
return L(
p,
() => {
d.value = !1;
},
{ ignore: [p] }
), (t, o) => d.value ? (n(), h(l(F), {
key: 0,
class: "scalar-client"
}, {
default: k(() => [
c("div", {
ref_key: "dropdownRef",
ref: p,
class: "custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75",
style: x(A.value)
}, [
i.value.length ? (n(), u("ul", H, [
(n(!0), u(D, null, T(i.value, (e, a) => (n(), u("li", {
key: e.key,
class: j(["font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150", { "bg-b-2": a === r.value }]),
onClick: (ee) => b(e.key)
}, [
c("div", U, [
e.source === "collection" && t.environment.name !== "No Environment" ? (n(), u("span", {
key: 0,
class: "h-2.25 w-2.25 min-w-2.25 rounded-full",
style: x({
backgroundColor: l(W)(t.environment)
})
}, null, 4)) : (n(), h(l(K), {
key: 1,
class: "-ml-0.25 size-2.5",
icon: "Globe"
})),
g(" " + V(e.key), 1)
]),
c("span", X, V(e.value), 1)
], 10, J))), 128))
])) : l(f) ? (n(), h(l(G), {
key: 1,
class: "font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150",
variant: "outlined",
onClick: N
}, {
default: k(() => [
q(l(O), { class: "size-3" }),
o[0] || (o[0] = g(" Add Variable "))
]),
_: 1,
__: [0]
})) : y("", !0),
o[1] || (o[1] = c("div", { class: "bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg" }, null, -1))
], 4)
]),
_: 1
})) : y("", !0);
}
});
export {
de as default
};