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