@scalar/api-client
Version:
the open source API testing client
267 lines (266 loc) • 10.1 kB
JavaScript
import { defineComponent as $, createElementBlock as x, openBlock as a, createVNode as n, withCtx as l, createElementVNode as s, createBlock as u, createCommentVNode as p, unref as r, normalizeClass as c, createTextVNode as i, toDisplayString as g, Fragment as U, renderList as w, normalizeStyle as h } from "vue";
import { cva as M, ScalarButton as m, cx as y, ScalarIcon as k } from "@scalar/components";
import { themeLabels as P } from "@scalar/themes";
import B from "../../../components/ImportCollection/IntegrationLogo.vue.js";
import L from "./components/Appearance.vue.js";
import b from "./components/Section.vue.js";
import { getThemeColors as C } from "./helpers/get-theme-colors.js";
const N = { class: "flex flex-col gap-4" }, R = { class: "flex flex-col gap-2" }, V = { class: "bg-c-accent text-b-1 flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] border-transparent p-1" }, A = { class: "flex flex-col gap-2" }, E = { class: "grid grid-cols-2 gap-2" }, F = { class: "flex items-center gap-2" }, O = { class: "flex items-center gap-1" }, D = { class: "grid grid-cols-2 gap-2" }, W = { class: "flex items-center gap-2" }, _ = { class: "flex items-center gap-1" }, q = { class: "size-7 rounded-xl" }, v = "https://proxy.scalar.com", I = /* @__PURE__ */ $({
__name: "CollectionSettings",
props: {
activeProxyUrl: {},
customProxyUrl: {},
activeThemeId: {},
colorMode: {}
},
emits: ["update:proxyUrl", "update:themeId", "update:colorMode"],
setup(G, { emit: T }) {
const d = T, S = [
"default",
"alternate",
"purple",
"solarized",
"saturn",
"kepler"
], z = ["elysiajs", "fastify"], f = M({
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"
}
}
});
return (o, e) => (a(), x("div", N, [
n(b, null, {
title: l(() => [...e[4] || (e[4] = [
i(" CORS Proxy ", -1)
])]),
description: l(() => [...e[5] || (e[5] = [
i(" Browsers block cross-origin requests for security. We provide a public proxy to ", -1),
s("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),
i(" . Check the ", -1),
s("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),
i(" . ", -1)
])]),
default: l(() => [
s("div", R, [
n(r(m), {
class: c(
r(y)(
r(f)({
active: o.activeProxyUrl === v
})
)
),
onClick: e[0] || (e[0] = (t) => d("update:proxyUrl", v))
}, {
default: l(() => [
s("div", {
class: c(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": o.activeProxyUrl === v
}])
}, [
o.activeProxyUrl === v ? (a(), u(r(k), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : p("", !0)
], 2),
e[6] || (e[6] = i(" Use proxy.scalar.com (default) ", -1))
]),
_: 1
}, 8, ["class"]),
o.customProxyUrl && o.customProxyUrl !== v ? (a(), u(r(m), {
key: 0,
class: c(
r(y)(
r(f)({
active: o.activeProxyUrl === o.customProxyUrl
})
)
),
onClick: e[1] || (e[1] = (t) => d("update:proxyUrl", o.customProxyUrl))
}, {
default: l(() => [
s("div", V, [
o.customProxyUrl === o.activeProxyUrl ? (a(), u(r(k), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : p("", !0)
]),
i(" Use custom proxy (" + g(o.customProxyUrl) + ") ", 1)
]),
_: 1
}, 8, ["class"])) : p("", !0),
n(r(m), {
class: c(r(y)(r(f)({ active: !o.activeProxyUrl }))),
onClick: e[2] || (e[2] = (t) => d("update:proxyUrl", null))
}, {
default: l(() => [
s("div", {
class: c([
"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1",
!o.activeProxyUrl && "bg-c-accent text-b-1 border-transparent"
])
}, [
o.activeProxyUrl ? p("", !0) : (a(), u(r(k), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
}))
], 2),
e[7] || (e[7] = i(" Skip the proxy ", -1))
]),
_: 1
}, 8, ["class"])
])
]),
_: 1
}),
n(b, null, {
title: l(() => [...e[8] || (e[8] = [
i(" Themes ", -1)
])]),
description: l(() => [...e[9] || (e[9] = [
i(" We've got a whole rainbow of themes for you to play with: ", -1)
])]),
default: l(() => [
s("div", A, [
s("div", E, [
(a(), x(U, null, w(S, (t) => n(r(m), {
key: t,
class: c(
r(y)(
r(f)({
active: o.activeThemeId === t
})
)
),
onClick: (j) => d("update:themeId", t)
}, {
default: l(() => [
s("div", F, [
s("div", {
class: c(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": o.activeThemeId === t
}])
}, [
o.activeThemeId === t ? (a(), u(r(k), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : p("", !0)
], 2),
i(" " + g(r(P)[t]), 1)
]),
s("div", O, [
s("span", {
class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
style: h({
backgroundColor: r(C)(t).light
})
}, null, 4),
s("span", {
class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
style: h({
backgroundColor: r(C)(t).dark
})
}, null, 4),
s("span", {
class: "border-c-3 inline-block h-5 w-5 rounded-full",
style: h({
backgroundColor: r(C)(t).accent
})
}, null, 4)
])
]),
_: 2
}, 1032, ["class", "onClick"])), 64))
])
])
]),
_: 1
}),
n(b, null, {
title: l(() => [...e[10] || (e[10] = [
i(" Framework Themes ", -1)
])]),
description: l(() => [...e[11] || (e[11] = [
i(" Are you a real fan? Show your support by using your favorite framework's theme! ", -1)
])]),
default: l(() => [
s("div", D, [
(a(), x(U, null, w(z, (t) => n(r(m), {
key: t,
class: c(
r(y)(
r(f)({
active: o.activeThemeId === t
})
)
),
onClick: (j) => d("update:themeId", t)
}, {
default: l(() => [
s("div", W, [
s("div", {
class: c(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": o.activeThemeId === t
}])
}, [
o.activeThemeId === t ? (a(), u(r(k), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : p("", !0)
], 2),
i(" " + g(r(P)[t]), 1)
]),
s("div", _, [
s("div", q, [
n(B, { integration: t }, null, 8, ["integration"])
])
])
]),
_: 2
}, 1032, ["class", "onClick"])), 64))
])
]),
_: 1
}),
n(b, null, {
title: l(() => [...e[12] || (e[12] = [
i(" Appearance ", -1)
])]),
description: l(() => [...e[13] || (e[13] = [
i(" Choose between light, dark, or system-based appearance for your workspace. ", -1)
])]),
default: l(() => [
n(L, {
colorMode: o.colorMode,
"onUpdate:colorMode": e[3] || (e[3] = (t) => d("update:colorMode", t))
}, null, 8, ["colorMode"])
]),
_: 1
})
]));
}
});
export {
I as default
};