@scalar/api-client
Version:
the open source API testing client
146 lines (145 loc) • 6.32 kB
JavaScript
import { defineComponent as j, computed as o, createElementBlock as p, openBlock as s, createVNode as a, unref as e, withCtx as l, normalizeClass as x, createElementVNode as t, toDisplayString as h, createBlock as u, createCommentVNode as v, withModifiers as C, Fragment as B, renderList as I } from "vue";
import { ScalarDropdown as $, ScalarButton as N, ScalarIcon as m, ScalarDropdownItem as b, ScalarDropdownDivider as k } from "@scalar/components";
const V = { class: "relative flex items-center" }, L = { class: "flex max-w-[220px] min-w-0 items-center gap-1.5" }, M = { class: "text-xxs block max-w-[160px] min-w-0 truncate text-left font-medium" }, U = { class: "min-w-0 flex-1 truncate" }, _ = { class: "bg-c-accent text-b-1 mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full p-[3px]" }, F = { class: "min-w-0 flex-1 text-left" }, G = { class: "block truncate" }, O = { class: "flex h-4 w-4 items-center justify-center" }, P = {
key: 5,
class: "text-c-3 px-2 py-1.5 text-xs"
}, H = /* @__PURE__ */ j({
__name: "EnvironmentSelector",
props: {
environments: { default: () => [] },
activeEnvironment: {}
},
emits: ["select:environment", "add:environment"],
setup(n, { emit: S }) {
const w = S, r = o(() => !!n.activeEnvironment), c = o(() => n.environments.length > 0), z = o(() => n.activeEnvironment ? n.environments.includes(n.activeEnvironment) : !1), d = o(
() => r.value && !z.value
), E = o(() => d.value ? `${n.activeEnvironment} (Unavailable)` : r.value ? n.activeEnvironment : c.value ? "Select Environment" : "Add Environment"), A = o(() => d.value ? "hover:bg-b-2 text-c-2 border-transparent" : r.value ? "bg-c-accent/10 text-c-accent hover:bg-c-accent/20 border-c-accent/30" : c.value ? "hover:bg-b-2 text-c-2 border-transparent" : "hover:bg-b-2 text-c-3 border-transparent"), D = () => {
w("add:environment");
}, g = (y) => {
w("select:environment", y);
};
return (y, i) => (s(), p("div", V, [
a(e($), null, {
items: l(() => [
r.value ? (s(), u(e(b), {
key: 0,
class: "group/item flex w-full items-center gap-1.5",
onClick: i[0] || (i[0] = C((f) => g(""), ["stop"]))
}, {
default: l(() => [
t("div", {
class: x([
"flex h-4 w-4 items-center justify-center rounded-full p-[3px]",
n.activeEnvironment ? "shadow-border text-transparent" : "bg-c-accent text-b-1"
])
}, [
a(e(m), {
class: "size-2.5",
icon: "Checkmark",
thickness: "3"
})
], 2),
i[1] || (i[1] = t("span", { class: "text-c-2" }, "No Environment", -1))
]),
_: 1
})) : v("", !0),
r.value && c.value ? (s(), u(e(k), { key: 1 })) : v("", !0),
(s(!0), p(B, null, I(n.environments, (f) => (s(), u(e(b), {
key: f,
class: "group/item flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap",
onClick: C((R) => g(f), ["stop"])
}, {
default: l(() => [
t("div", {
class: x([
"flex h-4 w-4 items-center justify-center rounded-full p-[3px]",
n.activeEnvironment === f ? "bg-c-accent text-b-1" : "shadow-border text-transparent"
])
}, [
a(e(m), {
class: "size-2.5",
icon: "Checkmark",
thickness: "3"
})
], 2),
t("span", U, h(f), 1)
]),
_: 2
}, 1032, ["onClick"]))), 128)),
d.value ? (s(), u(e(k), { key: 2 })) : v("", !0),
d.value ? (s(), u(e(b), {
key: 3,
class: "group/item flex h-auto w-full min-w-0 items-start gap-1.5 overflow-hidden",
disabled: ""
}, {
default: l(() => [
t("div", _, [
a(e(m), {
class: "size-2.5",
icon: "Checkmark",
thickness: "3"
})
]),
t("div", F, [
t("span", G, h(n.activeEnvironment), 1),
i[2] || (i[2] = t("span", { class: "text-c-3 block truncate text-xs" }, " Not available in this context ", -1))
])
]),
_: 1
})) : v("", !0),
c.value ? (s(), u(e(k), { key: 4 })) : v("", !0),
a(e(b), {
class: "text-c-accent flex items-center gap-1.5",
onClick: D
}, {
default: l(() => [
t("div", O, [
a(e(m), {
icon: "Add",
size: "sm"
})
]),
t("span", null, h(c.value ? "New Environment" : "Create Environment"), 1)
]),
_: 1
}),
!c.value && !r.value ? (s(), p("div", P, [...i[3] || (i[3] = [
t("p", { class: "mb-1" }, " Environments let you manage variables like API keys and base URLs across different contexts. ", -1)
])])) : v("", !0)
]),
default: l(() => [
a(e(N), {
"aria-label": `Current environment: ${E.value}`,
class: x(["line-clamp-1 h-full w-fit justify-start border px-2 py-1 font-normal transition-colors", A.value]),
size: "sm",
variant: "ghost"
}, {
default: l(() => [
t("div", L, [
a(e(m), {
class: x([
"shrink-0",
r.value && !d.value ? "text-c-accent" : "text-c-3"
]),
icon: "Globe",
size: "sm"
}, null, 8, ["class"]),
t("span", M, h(E.value), 1),
a(e(m), {
class: "shrink-0",
icon: "ChevronDown",
size: "xs"
})
])
]),
_: 1
}, 8, ["aria-label", "class"])
]),
_: 1
})
]));
}
});
export {
H as default
};