82 lines
2.8 KiB
JavaScript
82 lines
2.8 KiB
JavaScript
import { $, $html, $if } from "sigpro";
|
|
import { val } from "../core/utils.js";
|
|
|
|
/** COLORPICKER */
|
|
export const Colorpicker = (props) => {
|
|
const { value, label, ...rest } = props;
|
|
const isOpen = $(false);
|
|
|
|
const palette = [
|
|
...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"],
|
|
...["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"],
|
|
...["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"],
|
|
...["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"],
|
|
...["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"],
|
|
...["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"],
|
|
...["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"],
|
|
...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"],
|
|
];
|
|
|
|
const getColor = () => val(value) || "#000000";
|
|
|
|
return $html("div", { class: "relative w-fit" }, [
|
|
$html(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
|
|
onclick: (e) => {
|
|
e.stopPropagation();
|
|
isOpen(!isOpen());
|
|
},
|
|
...rest,
|
|
},
|
|
[
|
|
$html("div", {
|
|
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
|
|
style: () => `background-color: ${getColor()}`,
|
|
}),
|
|
label ? $html("span", { class: "opacity-80" }, label) : null,
|
|
],
|
|
),
|
|
|
|
$if(isOpen, () =>
|
|
$html(
|
|
"div",
|
|
{
|
|
class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
|
|
onclick: (e) => e.stopPropagation(),
|
|
},
|
|
[
|
|
$html(
|
|
"div",
|
|
{ class: "grid grid-cols-8 gap-1" },
|
|
palette.map((c) =>
|
|
$html("button", {
|
|
type: "button",
|
|
style: `background-color: ${c}`,
|
|
class: () => {
|
|
const active = getColor().toLowerCase() === c.toLowerCase();
|
|
return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5
|
|
${active ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
|
|
},
|
|
onclick: () => {
|
|
if (typeof value === "function") value(c);
|
|
isOpen(false);
|
|
},
|
|
}),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
$if(isOpen, () =>
|
|
$html("div", {
|
|
class: "fixed inset-0 z-[100]",
|
|
onclick: () => isOpen(false),
|
|
}),
|
|
),
|
|
]);
|
|
};
|