@scalar/api-client
Version:
the open source API testing client
276 lines (275 loc) • 10.4 kB
JavaScript
import { defineComponent as L, computed as $, createElementBlock as h, openBlock as n, createVNode as d, createBlock as c, createCommentVNode as g, withCtx as o, createElementVNode as r, unref as s, normalizeClass as u, createTextVNode as a, Fragment as S, renderList as C, toDisplayString as w, normalizeStyle as U } from "vue";
import { cva as O, ScalarButton as y, cx as f, ScalarIcon as x } from "@scalar/components";
import { presets as F, themeLabels as V } from "@scalar/themes";
import H from "../../../components/ImportCollection/IntegrationLogo.vue.js";
import G from "./components/Appearance.vue.js";
import p from "./components/Section.vue.js";
import { getThemeColors as N } from "./helpers/get-theme-colors.js";
const W = { class: "flex flex-col gap-10" }, q = { class: "flex flex-col gap-2" }, I = { class: "grid grid-cols-2 gap-2" }, X = { class: "flex items-center gap-2" }, Y = { class: "flex items-center gap-1" }, J = { class: "grid grid-cols-2 gap-2" }, K = { class: "flex items-center gap-2" }, Q = { class: "flex items-center gap-1" }, Z = { class: "size-7 rounded-xl" }, _ = { class: "grid grid-cols-2 gap-2" }, ee = { class: "flex items-center gap-2" }, T = "https://proxy.scalar.com", ne = /* @__PURE__ */ L({
__name: "CollectionSettings",
props: {
activeProxyUrl: {},
customThemes: { default: () => [] },
activeThemeSlug: {},
colorMode: {}
},
emits: ["update:proxyUrl", "update:themeSlug", "update:colorMode"],
setup(l, { emit: A }) {
const m = A, B = [
"none",
"default",
"alternate",
"purple",
"solarized",
"saturn",
"kepler"
], R = ["elysiajs", "fastify"], z = B.map((i) => i === "none" ? {
slug: i,
name: "None",
description: "No theme",
theme: ""
} : F[i]), M = R.map((i) => ({
slug: i,
name: V[i],
description: V[i],
theme: ""
})), j = $(
() => new Set(l.customThemes.map((i) => i.slug))
), v = O({
base: "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border",
variants: {
active: {
true: "bg-primary text-c-1 hover:bg-inherit",
false: "bg-b-1 hover:bg-b-2"
}
}
}), D = $(() => l.activeThemeSlug === void 0 || l.activeThemeSlug === "none" ? !0 : !(j.value.has(l.activeThemeSlug) || z.some((e) => e.slug === l.activeThemeSlug) || M.some((e) => e.slug === l.activeThemeSlug))), P = (i) => i === "none", b = (i) => l.activeThemeSlug === i || P(i) && D.value, k = (i) => f(
"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1",
i && "bg-c-accent text-b-1 border-transparent"
);
return (i, e) => (n(), h("div", W, [
d(p, null, {
title: o(() => [...e[3] || (e[3] = [
a("CORS Proxy", -1)
])]),
description: o(() => [...e[4] || (e[4] = [
a(" Browsers block cross-origin requests for security. We provide a public proxy to ", -1),
r("a", {
class: "hover:text-c-1 underline-offset-2",
href: "https://en.wikipedia.org/wiki/Cross-origin_resource_sharing",
target: "_blank"
}, " bypass CORS issues ", -1),
a(" . Check the ", -1),
r("a", {
class: "hover:text-c-1 underline-offset-2",
href: "https://github.com/scalar/scalar/tree/main/projects/proxy-scalar-com",
target: "_blank"
}, " source code on GitHub ", -1),
a(" . ", -1)
])]),
default: o(() => [
r("div", q, [
d(s(y), {
class: u(
s(f)(
s(v)({
active: l.activeProxyUrl === T
})
)
),
onClick: e[0] || (e[0] = (t) => m("update:proxyUrl", T))
}, {
default: o(() => [
r("div", {
class: u(k(l.activeProxyUrl === T))
}, [
l.activeProxyUrl === T ? (n(), c(s(x), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : g("", !0)
], 2),
e[5] || (e[5] = a(" Use proxy.scalar.com (default) ", -1))
]),
_: 1
}, 8, ["class"]),
d(s(y), {
class: u(s(f)(s(v)({ active: !l.activeProxyUrl }))),
onClick: e[1] || (e[1] = (t) => m("update:proxyUrl", null))
}, {
default: o(() => [
r("div", {
class: u(k(!l.activeProxyUrl))
}, [
l.activeProxyUrl ? g("", !0) : (n(), c(s(x), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
}))
], 2),
e[6] || (e[6] = a(" Skip the proxy ", -1))
]),
_: 1
}, 8, ["class"])
])
]),
_: 1
}),
d(p, null, {
title: o(() => [...e[7] || (e[7] = [
a("Themes", -1)
])]),
description: o(() => [...e[8] || (e[8] = [
a(" We've got a whole rainbow of themes for you to play with: ", -1)
])]),
default: o(() => [
r("div", I, [
(n(!0), h(S, null, C(s(z), (t) => (n(), c(s(y), {
key: t.slug,
class: u(s(f)(s(v)({ active: b(t.slug) }))),
onClick: (E) => m(
"update:themeSlug",
P(t.slug) ? void 0 : t.slug
)
}, {
default: o(() => [
r("div", X, [
r("div", {
class: u(k(b(t.slug)))
}, [
b(t.slug) ? (n(), c(s(x), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : g("", !0)
], 2),
a(" " + w(t.name), 1)
]),
r("div", Y, [
r("span", {
class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
style: U({
backgroundColor: s(N)(t.slug).light
})
}, null, 4),
r("span", {
class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
style: U({
backgroundColor: s(N)(t.slug).dark
})
}, null, 4),
r("span", {
class: "border-c-3 inline-block h-5 w-5 rounded-full",
style: U({
backgroundColor: s(N)(t.slug).accent
})
}, null, 4)
])
]),
_: 2
}, 1032, ["class", "onClick"]))), 128))
])
]),
_: 1
}),
d(p, null, {
title: o(() => [...e[9] || (e[9] = [
a("Framework Themes", -1)
])]),
description: o(() => [...e[10] || (e[10] = [
a(" Are you a real fan? Show your support by using your favorite framework's theme! ", -1)
])]),
default: o(() => [
r("div", J, [
(n(!0), h(S, null, C(s(M), (t) => (n(), c(s(y), {
key: t.slug,
class: u(s(f)(s(v)({ active: l.activeThemeSlug === t.slug }))),
onClick: (E) => m("update:themeSlug", t.slug)
}, {
default: o(() => [
r("div", K, [
r("div", {
class: u(k(l.activeThemeSlug === t.slug))
}, [
l.activeThemeSlug === t.slug ? (n(), c(s(x), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : g("", !0)
], 2),
a(" " + w(t.name), 1)
]),
r("div", Q, [
r("div", Z, [
d(H, {
integration: t.slug
}, null, 8, ["integration"])
])
])
]),
_: 2
}, 1032, ["class", "onClick"]))), 128))
])
]),
_: 1
}),
l.customThemes.length > 0 ? (n(), c(p, { key: 0 }, {
title: o(() => [...e[11] || (e[11] = [
a(" Custom Themes ", -1)
])]),
description: o(() => [...e[12] || (e[12] = [
a(" Team defined themes are available to all workspaces in the team. ", -1)
])]),
default: o(() => [
r("div", _, [
(n(!0), h(S, null, C(l.customThemes, (t) => (n(), c(s(y), {
key: t.slug,
class: u(s(f)(s(v)({ active: l.activeThemeSlug === t.slug }))),
onClick: (E) => m("update:themeSlug", t.slug)
}, {
default: o(() => [
r("div", ee, [
r("div", {
class: u(k(l.activeThemeSlug === t.slug))
}, [
l.activeThemeSlug === t.slug ? (n(), c(s(x), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : g("", !0)
], 2),
a(" " + w(t.name), 1)
])
]),
_: 2
}, 1032, ["class", "onClick"]))), 128))
])
]),
_: 1
})) : g("", !0),
d(p, null, {
title: o(() => [...e[13] || (e[13] = [
a("Appearance", -1)
])]),
description: o(() => [...e[14] || (e[14] = [
a(" Choose between light, dark, or system-based appearance for your workspace. ", -1)
])]),
default: o(() => [
d(G, {
colorMode: l.colorMode,
"onUpdate:colorMode": e[2] || (e[2] = (t) => m("update:colorMode", t))
}, null, 8, ["colorMode"])
]),
_: 1
})
]));
}
});
export {
ne as default
};