@scalar/api-client
Version:
the open source API testing client
122 lines (121 loc) • 4.22 kB
JavaScript
import { defineComponent as D, ref as d, computed as m, createElementBlock as a, openBlock as l, createCommentVNode as c, normalizeStyle as v, createBlock as k, unref as C, createElementVNode as s, Fragment as S, renderList as $, withDirectives as j, vModelText as N, createVNode as T, nextTick as V } from "vue";
import { ScalarIcon as f } from "@scalar/components";
const A = {
key: 1,
class: "color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1"
}, R = ["onClick"], L = {
key: 2,
class: "color-selector flex h-4 flex-1 items-center gap-2 rounded"
}, U = ["placeholder"], W = "linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))", P = /* @__PURE__ */ D({
__name: "EnvironmentColors",
props: {
activeColor: {}
},
emits: ["select"],
setup(i, { emit: w }) {
const F = w, t = d(""), p = d(null), r = d(!1), n = d(!1), b = [
"#FFFFFF",
"#EF0006",
"#EDBE20",
"#069061",
"#FB892C",
"#0082D0",
"#5203D1",
"#FFC0CB"
], E = m(
() => b.includes(i.activeColor)
), h = m(
() => i.activeColor && !E.value && !r.value
), I = (e) => i.activeColor === e, y = m(() => {
const e = t.value || i.activeColor;
return h.value || t.value ? `background-color: ${e};` : `background: ${W};`;
}), g = async () => {
r.value = !r.value, n.value = !1, r.value && (await V(), p.value?.focus());
}, z = () => {
n.value = !n.value;
}, x = (e) => {
const o = e && !e.startsWith("#") ? `#${e}` : e;
F("select", o), n.value = !1;
}, B = () => {
if (!t.value)
return;
const e = t.value.startsWith("#") ? t.value : `#${t.value}`;
t.value = e, x(e);
};
return (e, o) => (l(), a("div", null, [
!r.value && !n.value ? (l(), a("div", {
key: 0,
class: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full",
style: v({ backgroundColor: e.activeColor }),
onClick: z
}, [
e.activeColor ? (l(), k(C(f), {
key: 0,
class: "text-c-btn p-0.5",
icon: "Checkmark",
size: "xs"
})) : c("", !0)
], 4)) : c("", !0),
!r.value && n.value ? (l(), a("div", A, [
(l(), a(S, null, $(b, (u) => s("div", {
key: u,
class: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full",
style: v({ backgroundColor: u }),
onClick: (G) => x(u)
}, [
I(u) ? (l(), k(C(f), {
key: 0,
class: "text-c-btn p-0.5",
icon: "Checkmark",
size: "xs"
})) : c("", !0)
], 12, R)), 64)),
o[1] || (o[1] = s("hr", { class: "border-ghost h-5 w-0.5 border-l" }, null, -1)),
s("button", {
class: "z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full",
style: v(y.value),
type: "button",
onClick: g
}, [
h.value ? (l(), k(C(f), {
key: 0,
class: "text-c-btn",
icon: "Checkmark",
size: "xs"
})) : c("", !0)
], 4)
])) : c("", !0),
r.value ? (l(), a("div", L, [
o[2] || (o[2] = s("span", { class: "absolute h-4 w-4 rounded-full border border-dashed" }, null, -1)),
s("span", {
class: "z-[1] h-4 w-4 rounded-full",
style: v(y.value)
}, null, 4),
j(s("input", {
ref_key: "customColorInputRef",
ref: p,
"onUpdate:modelValue": o[0] || (o[0] = (u) => t.value = u),
class: "w-full flex-1 border-transparent text-sm outline-none",
placeholder: e.activeColor || "#000000",
type: "text",
onInput: B
}, null, 40, U), [
[N, t.value]
]),
s("button", {
class: "text-c-3 hover:bg-b-2 rounded-lg p-1.5",
type: "button",
onClick: g
}, [
T(C(f), {
icon: "Checkmark",
size: "xs"
})
])
])) : c("", !0)
]));
}
});
export {
P as default
};