@scalar/api-client
Version:
the open source API testing client
287 lines (286 loc) • 12.2 kB
JavaScript
import { defineComponent as E, createElementBlock as w, openBlock as c, createElementVNode as r, createVNode as a, withCtx as l, createBlock as u, createCommentVNode as p, unref as e, normalizeClass as i, createTextVNode as n, toDisplayString as C, Fragment as z, renderList as $, normalizeStyle as _ } from "vue";
import { cva as L, ScalarButton as x, cx as m, ScalarIcon as b } from "@scalar/components";
import { themeLabels as j } from "@scalar/themes";
import N from "../../components/ImportCollection/IntegrationLogo.vue.js";
import { useActiveEntities as P } from "../../store/active-entities.js";
import R from "./components/SettingsAppearance.vue.js";
import y from "./components/SettingsSection.vue.js";
import { useWorkspace as V } from "../../store/store.js";
const W = { class: "bg-b-1 h-full w-full overflow-auto" }, F = { class: "mr-auto ml-auto w-full max-w-[720px] px-5 py-5" }, O = { class: "flex flex-col gap-8" }, D = { class: "flex flex-col gap-2" }, G = { class: "flex flex-col gap-2" }, q = { class: "grid grid-cols-2 gap-2" }, H = { class: "flex items-center gap-2" }, M = { class: "flex items-center gap-1" }, X = { class: "grid grid-cols-2 gap-2" }, Y = { class: "flex items-center gap-2" }, J = { class: "flex items-center gap-1" }, K = { class: "size-7 rounded-xl" }, g = "https://proxy.scalar.com", ne = /* @__PURE__ */ E({
__name: "SettingsGeneral",
setup(Q) {
const { activeWorkspace: o } = P(), { proxyUrl: f, workspaceMutators: U } = V(), T = [
"default",
"alternate",
// 'moon',
"purple",
"solarized",
// 'bluePlanet',
"saturn",
"kepler"
// 'mars',
// 'deepSpace',
// 'laserwave',
], B = ["elysiajs", "fastify"], v = (d) => ({
default: { light: "#fff", dark: "#0f0f0f", accent: "#0099ff" },
alternate: { light: "#f9f9f9", dark: "#131313", accent: "#e7e7e7" },
moon: { light: "#ccc9b3", dark: "#313332", accent: "#645b0f" },
purple: { light: "#f5f6f8", dark: "#22252b", accent: "#5469d4" },
solarized: { light: "#fdf6e3", dark: "#00212b", accent: "#007acc" },
bluePlanet: { light: "#f0f2f5", dark: "#000e23", accent: "#e0e2e6" },
saturn: { light: "#e4e4df", dark: "#2c2c30", accent: "#1763a6" },
kepler: { light: "#f6f6f6", dark: "#0d0f1e", accent: "#7070ff" },
mars: { light: "#f2efe8", dark: "#321116", accent: "#c75549" },
deepSpace: { light: "#f4f4f5", dark: "#09090b", accent: "#8ab4f8" },
laserwave: { light: "#f4f2f7", dark: "#27212e", accent: "#ed78c2" },
none: { light: "#ffffff", dark: "#000000", accent: "#3b82f6" }
})[d] || { light: "#ffffff", dark: "#000000", accent: "#3b82f6" }, S = (d) => U.edit(o.value?.uid, "themeId", d), k = L({
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"
}
}
}), h = (d) => U.edit(o.value?.uid, "proxyUrl", d);
return (d, t) => (c(), w("div", W, [
r("div", F, [
r("div", O, [
t[13] || (t[13] = r("div", null, [
r("h2", { class: "mt-10 text-xl font-bold" }, "Settings")
], -1)),
a(y, null, {
title: l(() => [...t[3] || (t[3] = [
n(" CORS Proxy ", -1)
])]),
description: l(() => [...t[4] || (t[4] = [
n(" 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),
n(" . Check the ", -1),
r("a", {
class: "hover:text-c-1 underline-offset-2",
href: "https://github.com/scalar/scalar/tree/main/examples/proxy-server",
target: "_blank"
}, " source code on GitHub ", -1),
n(" . ", -1)
])]),
default: l(() => [
r("div", D, [
a(e(x), {
class: i(
e(m)(
e(k)({
active: e(o)?.proxyUrl === g
})
)
),
onClick: t[0] || (t[0] = (s) => h(g))
}, {
default: l(() => [
r("div", {
class: i(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": e(o)?.proxyUrl === g
}])
}, [
e(o)?.proxyUrl === g ? (c(), u(e(b), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : p("", !0)
], 2),
t[5] || (t[5] = n(" Use proxy.scalar.com (default) ", -1))
]),
_: 1
}, 8, ["class"]),
e(f) && e(f) !== g ? (c(), u(e(x), {
key: 0,
class: i(
e(m)(
e(k)({
active: e(o)?.proxyUrl === e(f)
})
)
),
onClick: t[1] || (t[1] = (s) => h(e(f)))
}, {
default: l(() => [
r("div", {
class: i(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": e(o)?.proxyUrl === e(f)
}])
}, [
e(o)?.proxyUrl === e(f) ? (c(), u(e(b), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : p("", !0)
], 2),
n(" Use custom proxy (" + C(e(f)) + ") ", 1)
]),
_: 1
}, 8, ["class"])) : p("", !0),
a(e(x), {
class: i(e(m)(e(k)({ active: !e(o)?.proxyUrl }))),
onClick: t[2] || (t[2] = (s) => h(void 0))
}, {
default: l(() => [
r("div", {
class: i([
"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1",
!e(o)?.proxyUrl && "bg-c-accent text-b-1 border-transparent"
])
}, [
e(o)?.proxyUrl ? p("", !0) : (c(), u(e(b), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
}))
], 2),
t[6] || (t[6] = n(" Skip the proxy ", -1))
]),
_: 1
}, 8, ["class"])
])
]),
_: 1
}),
a(y, null, {
title: l(() => [...t[7] || (t[7] = [
n(" Themes ", -1)
])]),
description: l(() => [...t[8] || (t[8] = [
n(" We've got a whole rainbow of themes for you to play with: ", -1)
])]),
default: l(() => [
r("div", G, [
r("div", q, [
(c(), w(z, null, $(T, (s) => a(e(x), {
key: s,
class: i(
e(m)(
e(k)({
active: e(o)?.themeId === s
})
)
),
onClick: (A) => S(s)
}, {
default: l(() => [
r("div", H, [
r("div", {
class: i(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": e(o)?.themeId === s
}])
}, [
e(o)?.themeId === s ? (c(), u(e(b), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : p("", !0)
], 2),
n(" " + C(e(j)[s]), 1)
]),
r("div", M, [
r("span", {
class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
style: _({
backgroundColor: v(s).light
})
}, null, 4),
r("span", {
class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
style: _({
backgroundColor: v(s).dark
})
}, null, 4),
r("span", {
class: "border-c-3 inline-block h-5 w-5 rounded-full",
style: _({
backgroundColor: v(s).accent
})
}, null, 4)
])
]),
_: 2
}, 1032, ["class", "onClick"])), 64))
])
])
]),
_: 1
}),
a(y, null, {
title: l(() => [...t[9] || (t[9] = [
n(" Framework Themes ", -1)
])]),
description: l(() => [...t[10] || (t[10] = [
n(" Are you a real fan? Show your support by using your favorite framework's theme! ", -1)
])]),
default: l(() => [
r("div", X, [
(c(), w(z, null, $(B, (s) => a(e(x), {
key: s,
class: i(
e(m)(
e(k)({
active: e(o)?.themeId === s
})
)
),
onClick: (A) => S(s)
}, {
default: l(() => [
r("div", Y, [
r("div", {
class: i(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": e(o)?.themeId === s
}])
}, [
e(o)?.themeId === s ? (c(), u(e(b), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : p("", !0)
], 2),
n(" " + C(e(j)[s]), 1)
]),
r("div", J, [
r("div", K, [
a(N, { integration: s }, null, 8, ["integration"])
])
])
]),
_: 2
}, 1032, ["class", "onClick"])), 64))
])
]),
_: 1
}),
a(y, null, {
title: l(() => [...t[11] || (t[11] = [
n(" Appearance ", -1)
])]),
description: l(() => [...t[12] || (t[12] = [
n(" Choose between light, dark, or system-based appearance for your workspace. ", -1)
])]),
default: l(() => [
a(R)
]),
_: 1
})
])
])
]));
}
});
export {
ne as default
};