@scalar/api-client
Version:
the open source API testing client
129 lines (128 loc) • 4.66 kB
JavaScript
import { defineComponent as R, ref as m, computed as w, onMounted as I, createBlock as v, createCommentVNode as x, openBlock as r, unref as l, withCtx as y, createElementVNode as c, normalizeStyle as b, createElementBlock as u, Fragment as P, renderList as T, normalizeClass as j, createTextVNode as k, toDisplayString as g, createVNode as q } from "vue";
import { ScalarTeleport as D, ScalarIcon as V, ScalarButton as F } from "@scalar/components";
import { onClickOutside as K } from "@vueuse/core";
import O from "fuse.js";
import { useRouter as G } from "vue-router";
import { getEnvColor as L } from "../../libs/env-helpers.js";
import { parseEnvVariables as _ } from "../../libs/environment-parser.js";
const M = {
key: 0,
class: "gap-1/2 flex flex-col"
}, Q = ["onClick"], $ = { class: "flex items-center gap-2 whitespace-nowrap" }, H = { class: "w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap" }, ne = /* @__PURE__ */ R({
__name: "EnvironmentVariableDropdown",
props: {
query: {},
environment: {},
envVariables: {},
dropdownPosition: {}
},
emits: ["select"],
setup(C, { expose: S, emit: E }) {
const s = C, z = E, d = m(!0), p = m(null), n = m(0), f = G(), A = () => {
if (!f)
return;
const { currentRoute: t, push: o } = f, e = t.value.params.workspace;
o({
name: "environment.default",
params: {
workspace: e
}
}), d.value = !1;
}, B = new O(_(s.envVariables), {
keys: ["key", "value"]
}), i = w(() => {
const t = s.query;
if (!t)
return _(s.envVariables).slice(-4).filter(({ key: e, value: a }) => e !== "" || a !== "");
const o = B.search(t, { limit: 10 });
return o.length > 0 ? o.map((e) => e.item).filter(({ key: e, value: a }) => e !== "" || a !== "") : [];
}), h = (t) => {
z("select", t);
};
S({
handleArrowKey: (t) => {
const o = t === "up" ? -1 : 1, e = i.value.length;
e !== 0 && (n.value = (n.value + o + e) % e);
},
handleSelect: () => {
if (n.value >= 0) {
const t = i.value[n.value];
t && h(t.key);
}
}
}), I(() => {
n.value = 0;
});
const N = w(() => {
var t, o;
return {
left: (((t = s.dropdownPosition) == null ? void 0 : t.left) ?? 0) + "px",
// Add a 5px offset from the editor
top: (((o = s.dropdownPosition) == null ? void 0 : o.top) ?? 0) + 5 + "px"
};
});
return K(
p,
() => {
d.value = !1;
},
{ ignore: [p] }
), (t, o) => d.value ? (r(), v(l(D), {
key: 0,
class: "scalar-client"
}, {
default: y(() => [
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: b(N.value)
}, [
i.value.length ? (r(), u("ul", M, [
(r(!0), u(P, null, T(i.value, (e, a) => (r(), 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 === n.value }]),
onClick: (W) => h(e.key)
}, [
c("div", $, [
e.source === "collection" ? (r(), u("span", {
key: 0,
class: "h-2.25 w-2.25 min-w-2.25 rounded-full",
style: b({
backgroundColor: l(L)(t.environment)
})
}, null, 4)) : (r(), v(l(V), {
key: 1,
class: "-ml-1/2 h-2.5 w-2.5",
icon: "Globe"
})),
k(" " + g(e.key), 1)
]),
c("span", H, g(e.value), 1)
], 10, Q))), 128))
])) : l(f) ? (r(), v(l(F), {
key: 1,
class: "font-code text-xxs hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150",
variant: "outlined",
onClick: A
}, {
default: y(() => [
q(l(V), {
icon: "Add",
size: "sm"
}),
o[0] || (o[0] = k(" Add Variable "))
]),
_: 1,
__: [0]
})) : x("", !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
})) : x("", !0);
}
});
export {
ne as default
};