natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
Files
9937f03d0a62e500a0b36b8a77c9b42f9cc77393
sigpro-ui/dist/sigpro-ui.esm.js
natxocc 9937f03d0a Megacompact
2026-05-09 19:23:54 +02:00

320 lines
19 KiB
JavaScript
Raw Blame History

// src/sigpro-ui.js
import { $, h, mount, val, isFunc } from "sigpro";
var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
var filterBy = (items, query, field = "label") => {
const q = String(val(query) || "").toLowerCase();
const list = (val(items) || []).map((i) => typeof i === "object" ? i : { label: i, value: i });
return !q ? list : list.filter((item) => String(item[field] || "").toLowerCase().includes(q));
};
var hide = () => document.activeElement?.blur();
var Accordion = (p, c) => h("div", { ...p, class: `${"collapse"} ${p?.class || ""}`.trim() }, c);
var AccordionRadio = (p) => h("input", { type: "radio", name: p.name, checked: p.checked || undefined, class: p.class });
var AccordionTitle = (p, c) => h("div", { ...p, class: `${"collapse-title"} ${p?.class || ""}`.trim() }, c);
var AccordionContent = (p, c) => h("div", { ...p, class: `${"collapse-content"} ${p?.class || ""}`.trim() }, c);
var Alert = (p, c) => h("div", { ...p, class: `${"alert"} ${p?.class || ""}`.trim() }, c);
var Avatar = (p, c) => h("div", { class: "avatar" }, h("div", { class: p.class }, c));
var AvatarGroup = (p, c) => h("div", { ...p, class: `${"avatar-group -space-x-6"} ${p?.class || ""}`.trim() }, c);
var Badge = (p, c) => h("span", { ...p, class: `${"badge"} ${p?.class || ""}`.trim() }, c);
var Breadcrumbs = (p, c) => h("div", { ...p, class: `${"breadcrumbs"} ${p?.class || ""}`.trim() }, c);
var Button = (p, c) => h("button", { ...p, class: `${"btn"} ${p?.class || ""}`.trim() }, c);
var Calendar = (p) => {
let [d, hv, sh, eh] = [$(new Date), $(0), $(0), $(0)], now = new Date, F = (v) => v?.toISOString().slice(0, 10), P = (n) => (n < 10 ? "0" : "") + n, M = (m, y = 0) => d(new Date(d().getFullYear() + y, d().getMonth() + m, 1)), V = () => typeof p.value == "function" ? p.value() : p.value, G = () => typeof p.range == "function" ? p.range() : p.range, L = (dt) => {
let s = F(dt), v = V(), r = G();
if (!r)
return p.onChange?.(p.hour ? `${s}T${P(sh())}:00:00` : s);
if (!v?.start || v.end)
return p.onChange?.({ start: s, end: null, ...p.hour && { startHour: sh() } });
let nv = s < v.start ? { start: s, end: v.start } : { start: v.start, end: s };
p.onChange?.({ ...nv, ...p.hour && { startHour: v.startHour ?? sh(), endHour: eh() } });
}, I = ({ v, on }) => h("div", { class: "flex-1 flex gap-2 items-center" }, [
h("input", { type: "range", min: 0, max: 23, value: v, class: "range range-xs", oninput: (e) => on(+e.target.value) }),
h("span", { class: "text-sm font-mono" }, () => P(v()) + ":00")
]);
return h("div", { class: `p-4 bg-base-100 border shadow-2xl rounded-box w-80 select-none ${p.class || ""}` }, [
h("div", { class: "flex justify-between items-center mb-4" }, [
h("div", { class: "flex" }, [["-1y", -1, 1], ["-1m", -1, 0]].map(([_, m, y]) => h("button", { class: "btn btn-ghost btn-xs", onclick: () => M(m, y) }, h("span", { class: `icon-[lucide--chevron${y ? "s" : ""}-left]` })))),
h("span", { class: "font-bold uppercase" }, () => d().toLocaleString("es", { month: "short", year: "numeric" })),
h("div", { class: "flex" }, [[1, 0], [1, 1]].map(([m, y]) => h("button", { class: "btn btn-ghost btn-xs", onclick: () => M(m, y) }, h("span", { class: `icon-[lucide--chevron${y ? "s" : ""}-right]` }))))
]),
h("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hv(null) }, [
..."LMXJVSD".split("").map((l) => h("div", { class: "text-[10px] opacity-40 font-bold text-center" }, l)),
() => {
let y = d().getFullYear(), m = d().getMonth(), first = (new Date(y, m, 1).getDay() + 6) % 7;
return [...Array(first).fill(h("div")), ...Array(new Date(y, m + 1, 0).getDate()).keys()].map((i) => {
if (typeof i != "number")
return i;
let day = i + 1, ds = F(new Date(y, m, day)), today = F(now) == ds;
return h("button", {
type: "button",
onclick: () => L(new Date(y, m, day)),
onmouseenter: () => G() && hv(ds),
class: () => {
let v = V(), hov = hv(), s = v?.start || (typeof v == "string" ? v.slice(0, 10) : 0), isE = v?.end == ds, isS = s == ds, inR = G() && v?.start && (v.end ? ds > v.start && ds < v.end : hov && (ds > s && ds <= hov || ds < s && ds >= hov));
return `btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative ${isS || isE ? "btn-primary z-10" : inR ? "bg-primary/20 border-none rounded-none" : "btn-ghost"} ${today ? "ring-1 ring-primary font-black" : ""}`;
}
}, day);
});
}
]),
p.hour && h("div", { class: "mt-3 pt-2 border-t flex gap-4" }, G() ? [I({ v: sh, on: sh }), I({ v: eh, on: eh })] : [I({ v: sh, on: sh })])
]);
};
var Card = (p, c) => h("div", { ...p, class: `${"card"} ${p?.class || ""}`.trim() }, c);
var CardTitle = (p, c) => h("div", { ...p, class: `${"card-title"} ${p?.class || ""}`.trim() }, c);
var CardBody = (p, c) => h("div", { ...p, class: `${"card-body"} ${p?.class || ""}`.trim() }, c);
var CardActions = (p, c) => h("div", { ...p, class: `${"card-actions"} ${p?.class || ""}`.trim() }, c);
var Carousel = (p, c) => h("div", { ...p, class: `${"carousel"} ${p?.class || ""}`.trim() }, c);
var CarouselItem = (p, c) => h("div", { ...p, class: `${"carousel-item"} ${p?.class || ""}`.trim() }, c);
var Chat = (p, c) => h("div", { ...p, class: `${"chat"} ${p?.class || ""}`.trim() }, c);
var ChatBubble = (p, c) => h("div", { ...p, class: `${"chat-bubble"} ${p?.class || ""}`.trim() }, c);
var ChatFooter = (p, c) => h("div", { ...p, class: `${"chat-footer"} ${p?.class || ""}`.trim() }, c);
var ChatHeader = (p, c) => h("div", { ...p, class: `${"chat-header"} ${p?.class || ""}`.trim() }, c);
var ChatImage = (p, c) => h("div", { ...p, class: `${"chat-image avatar"} ${p?.class || ""}`.trim() }, h("div", { class: "w-10 rounded-full" }, typeof c === "string" ? h("img", { src: c, alt: "avatar" }) : c));
var Checkbox = (p) => h("input", { type: "checkbox", ...p, class: `${"checkbox"} ${p?.class || ""}`.trim() });
var ColorPalette = (p) => {
let L = (s) => (s || "").toLowerCase(), C = "#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".split(",");
return h("div", { class: `p-3 bg-base-100 rounded-box shadow w-64 ${p.class || ""}` }, h("div", { class: "grid grid-cols-8 gap-1" }, C.map((c) => h("button", {
type: "button",
style: { background: c },
onclick: () => (isFunc(p.value) ? p.value(c) : p.onchange?.(c), hide()),
class: () => `size-6 rounded-sm transition-all hover:scale-125 hover:z-10 active:scale-95 border border-black/5 p-0 min-h-0 ${L(val(p.value)) == L(c) ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`
}))));
};
var Combo = (p, c) => Dropdown({}, [div({ tabindex: "0", role: "button" }, c), DropdownContent({ class: p?.class }, p.content)]);
var Drawer = (p, c) => h("div", { ...p, class: `${"drawer"} ${p?.class || ""}`.trim() }, c);
var DrawerToggle = (p) => input({ ...p, type: "checkbox", class: "drawer-toggle", checked: () => val(p.checked), onchange: (e) => isFunc(p.checked) && p.checked(e.target.checked) });
var DrawerContent = (p, c) => h("div", { ...p, class: `${"drawer-content"} ${p?.class || ""}`.trim() }, c);
var DrawerSide = (p, c) => h("div", { ...p, class: `${"drawer-side"} ${p?.class || ""}`.trim() }, c);
var DrawerOverlay = (p) => label({ ...p, for: p.for, class: `${"drawer-overlay"} ${p?.class || ""}`.trim() });
var Divider = (p) => h("div", { ...p, class: `${"divider"} ${p?.class || ""}`.trim() });
var Dropdown = (p, c) => h("div", { ...p, class: `${"dropdown"} ${p?.class || ""}`.trim() }, c);
var DropdownButton = (p, c) => h("div", { ...p, tabindex: "0", role: "button", class: `${"btn"} ${p?.class || ""}`.trim() }, c);
var DropdownContent = (p, c) => h("div", { ...p, tabindex: "0", class: `${"dropdown-content"} ${p?.class || ""}`.trim() }, c);
var Fab = (p, c) => h("div", { class: "fab" }, [h("div", { tabindex: "0", role: "button", class: `${"btn"} ${p?.class || ""}`.trim() }, Icon({}, p.icon)), c]);
var Fieldset = (p, c) => h("fieldset", { class: `${"fieldset"} ${p?.class || ""}`.trim() }, [h("legend", { class: "fieldset-legend" }, p.label), c]);
var FileDrag = (p, c) => h("label", {
class: () => `relative flex items-center justify-between h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all ${p.drag ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100"} ${p?.class || ""}`,
ondragover: (e) => {
e.preventDefault();
p.ondrag?.(true);
},
ondragleave: () => p.ondrag?.(false),
ondrop: (e) => {
e.preventDefault();
p.ondrag?.(false);
p.ondrop?.(e.dataTransfer.files);
}
}, c);
var FileInput = (p) => h("input", { type: "file", multiple: true, accept: p.accept || "*", class: `${"file-input"} ${p?.class || ""}`.trim(), onchange: (e) => p.onchange?.(e.target.files) });
var FilePreview = (p) => h("ul", { class: `mt-2 space-y-1 ${p?.class || ""}` }, p.files.map((f, i) => h("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border" }, [
h("div", { class: "flex items-center gap-2 truncate opacity-70" }, [
h("span", {}, "\uD83D\uDCC4"),
h("span", { class: "truncate max-w-[180px]" }, f.name),
h("span", { class: "text-[9px] opacity-50" }, `(${~~(f.size / 1024)}KB)`)
]),
h("button", { class: "btn btn-ghost btn-xs btn-circle", onclick: () => p.onremove?.(i) }, h("span", { class: "icon-[lucide--x]" }))
])));
var FileError = (p) => h("div", { class: `text-[10px] text-error mt-1 px-1 ${p?.class || ""}` }, p.message);
var Filter = (s, i, o, k) => o($(() => val(i).filter((i2) => String(k ? i2[k] : i2).toLowerCase().includes(val(s).toLowerCase()))));
var Icon = (p, c) => h("span", { ...p, class: `${c ?? ""} ${p?.class || ""}`.trim() });
var Indicator = (p, c) => h("div", { ...p, class: `${"indicator"} ${p?.class || ""}`.trim() }, [p.value && h("span", { class: `${"indicator-item badge"} ${p?.class || ""}`.trim() }, p.value), c]);
var Input = (p) => h("input", { ...p, class: `${"input"} ${p?.class || ""}`.trim() });
var InputPass = (p) => {
const show = $(false);
return [
Input({ ...p, type: show() ? "text" : "password" }),
Swap({ class: "ml-2" }, [SwapToggle({ value: show, class: "swap-rotate" }), SwapOn({}, Icon({}, "icon-[lucide--eye]")), SwapOff({}, Icon({}, "icon-[lucide--eye-off]"))])
];
};
var InputHint = (p, c) => h("div", { ...p, class: `${"validator-hint"} ${p?.class || ""}`.trim() }, c);
var Kbd = (p, c) => h("kbd", { ...p, class: `${"kbd"} ${p?.class || ""}`.trim() }, c);
var Label = (p, c) => h("span", { ...p, class: `${"label"} ${p?.class || ""}`.trim() }, c);
var LabelFloating = (p, c) => h("label", { ...p, class: `${"floating-label"} ${p?.class || ""}`.trim() }, c);
var LabelInput = (p, c) => h("label", { ...p, class: `${"input"} ${p?.class || ""}`.trim() }, c);
var LabelSelect = (p, c) => h("label", { ...p, class: `${"select"} ${p?.class || ""}`.trim() }, c);
var List = (p, c) => h("ul", { ...p, class: `${"list"} ${p?.class || ""}`.trim() }, c);
var ListRows = (p) => () => (val(p.items) || []).map((item, idx) => h("li", { class: `${"list-row"} ${p?.class || ""} ${item?.class || ""}`.trim() }, typeof p.render === "function" ? p.render(item, idx) : item));
var Menu = (p, c) => ul({ ...p, class: `${"menu"} ${p?.class || ""}`.trim() }, c);
var MenuTitle = (p, c) => li({ ...p, class: `${"menu-title"} ${p?.class || ""}`.trim() }, c);
var MenuItem = (p) => li({}, a({ onmousedown: (e) => e.preventDefault(), class: p?.class || "", onclick: p.onclick }, p.label));
var Modal = (p, c) => h("dialog", { ...p, class: `${"modal"} ${p?.class || ""}`.trim() }, c);
var ModalBox = (p, c) => h("div", { ...p, class: `${"modal-box"} ${p?.class || ""}`.trim() }, c);
var ModalAction = (p, c) => h("div", { ...p, class: `${"modal-action"} ${p?.class || ""}`.trim() }, c);
var ModalBackdrop = (p) => h("form", { method: "dialog", class: "modal-backdrop" }, [h("button", {}, "close")]);
var ModalClose = (p) => h("form", { method: "dialog" }, [h("button", { ...p, class: `${"btn btn-sm btn-circle btn-ghost absolute right-2 top-2"} ${p?.class || ""}`.trim() }, "✕")]);
var Loading = (p, c) => h("span", { ...p, class: `${"loading loading-spinner"} ${p?.class || ""}`.trim() }, c);
var Navbar = (p, c) => h("div", { ...p, class: `${"navbar"} ${p?.class || ""}`.trim() }, c);
var Progress = (p) => h("progress", { ...p, class: `${"progress"} ${p?.class || ""}`.trim() });
var Radial = (p, c) => h("div", { class: `${"radial-progress"} ${p?.class || ""}`.trim(), style: `--value:${val(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c);
var Radio = (p) => h("input", { type: "radio", ...p, class: `${"radio"} ${p?.class || ""}`.trim() });
var Range = (p) => h("input", { type: "range", ...p, class: `${"range"} ${p?.class || ""}`.trim() });
var Rating = (p, c) => h("div", { ...p, class: `${"rating"} ${p?.class || ""}`.trim() }, c);
var RatingItems = (p) => [...Array(p.count)].map((_, i) => h("input", { class: `${"mask"} ${p?.class || ""}`.trim(), name: p.name, type: "radio", checked: () => val(p.value) === i, onchange: () => isFunc(p.value) ? p.value(i) : p.onchange?.(i) }));
var Select = (p, c) => h("select", { ...p, class: `${"select"} ${p?.class || ""}`.trim() }, c);
var SelectOption = (p, c) => h("option", { ...p, class: p?.class || "" }, c);
var Skeleton = (p) => h("div", { ...p, class: `${"skeleton"} ${p?.class || ""}`.trim() });
var SkeletonText = (p) => h("span", { ...p, class: `${"skeleton skeleton-text"} ${p?.class || ""}`.trim() });
var Stack = (p, c) => h("div", { ...p, class: `${"stack"} ${p?.class || ""}`.trim() }, c);
var Stats = (p, c) => h("div", { ...p, class: `${"stats shadow"} ${p?.class || ""}`.trim() }, c);
var Stat = (p, c) => h("div", { ...p, class: `${"stat"} ${p?.class || ""}`.trim() }, c);
var StatFigure = (p, c) => h("div", { ...p, class: `${"stat-figure"} ${p?.class || ""}`.trim() }, c);
var StatTitle = (p, c) => h("div", { ...p, class: `${"stat-title"} ${p?.class || ""}`.trim() }, c);
var StatValue = (p, c) => h("div", { ...p, class: `${"stat-value"} ${p?.class || ""}`.trim() }, c);
var StatDesc = (p, c) => h("div", { ...p, class: `${"stat-desc"} ${p?.class || ""}`.trim() }, c);
var Steps = (p, c) => h("ul", { ...p, class: `${"steps"} ${p?.class || ""}`.trim() }, c);
var Step = (p, c) => h("li", { ...p, class: `${"step"} ${p?.class || ""}`.trim(), "data-content": p.dataContent }, c);
var Swap = (p, c) => h("label", { ...p, class: `${"swap"} ${p?.class || ""}`.trim() }, c);
var SwapToggle = (p) => h("input", { type: "checkbox", checked: () => val(p.value), onchange: (e) => isFunc(p.value) && p.value(e.target.checked), class: p.class });
var SwapOn = (p, c) => h("div", { ...p, class: `${"swap-on"} ${p?.class || ""}`.trim() }, c);
var SwapOff = (p, c) => h("div", { ...p, class: `${"swap-off"} ${p?.class || ""}`.trim() }, c);
var Tabs = (p, c) => div({ ...p, class: `${"tabs"} ${p?.class || ""}`.trim() }, c);
var Tab = (p) => {
const close = () => p.tabs?.(p.tabs().filter((_, idx) => idx !== p.index));
return [
h("input", { type: "radio", name: p.name, class: `${"tab"} ${p?.class || ""}`.trim(), checked: p.checked || undefined }),
div({ class: `tab-content ${p?.classContent || ""}`.trim() }, p.content),
p.closable ? span({ class: "absolute top-2 right-2 cursor-pointer", onclick: (e) => {
e.stopPropagation();
close();
} }, "✕") : null
];
};
var Table = (p, c) => h("table", { ...p, class: `${"table"} ${p?.class || ""}`.trim() }, c);
var TableHead = (p, c) => h("thead", { ...p, class: p?.class || "" }, c);
var TableBody = (p, c) => h("tbody", { ...p, class: p?.class || "" }, c);
var TableFoot = (p, c) => h("tfoot", { ...p, class: p?.class || "" }, c);
var TableRow = (p, c) => h("tr", { ...p, class: p?.class || "" }, c);
var TableTh = (p, c) => h("th", { ...p, class: p?.class || "" }, c);
var TableTd = (p, c) => h("td", { ...p, class: p?.class || "" }, c);
var Textarea = (p) => h("textarea", { ...p, class: `${"textarea"} ${p?.class || ""}`.trim() });
var Textrotate = (p, c) => h("span", { ...p, class: `${"text-rotate"} ${p?.class || ""}`.trim() }, h("span", {}, c));
var Timeline = (p, c) => h("ul", { ...p, class: `${"timeline"} ${p?.class || ""}`.trim() }, c);
var Toast = (m, t = "alert-success", d = 3500) => {
let C = document.getElementById("stc"), T, E, w = h("div", { style: "display:contents" });
if (!C)
document.body.append(C = h("div", { id: "stc", class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none" }));
C.append(w);
const i = mount(() => {
let v = $(0), l = $(0);
E = () => l() || (l(1), clearTimeout(T), setTimeout(() => (i.destroy(), w.remove(), C.firstChild || C.remove()), 300));
setTimeout(() => v(1));
return h("div", {
class: () => `alert alert-soft ${t} shadow-lg transition-all duration-300 inline-flex w-auto pointer-events-auto ${l() ? "translate-x-full opacity-0" : v() ? "translate-x-0 opacity-100" : "translate-x-10 opacity-0"}`
}, [
typeof m == "function" ? m() : typeof m == "string" ? h("span", m) : m,
h("button", { class: "btn btn-xs btn-circle btn-ghost", onclick: E }, h("span", { class: "icon-[lucide--x]" }))
]);
}, w);
if (d > 0)
T = setTimeout(E, d);
return E;
};
var Toggle = (p) => h("input", { type: "checkbox", ...p, class: `${"toggle"} ${p?.class || ""}`.trim() });
var Tooltip = (p, c) => h("div", { ...p, class: `${"tooltip"} ${p?.class || ""}`.trim(), "data-tip": p.tip }, c);
export {
hide,
getBy,
filterBy,
Tooltip,
Toggle,
Toast,
Timeline,
Textrotate,
Textarea,
Tabs,
TableTh,
TableTd,
TableRow,
TableHead,
TableFoot,
TableBody,
Table,
Tab,
SwapToggle,
SwapOn,
SwapOff,
Swap,
Steps,
Step,
Stats,
StatValue,
StatTitle,
StatFigure,
StatDesc,
Stat,
Stack,
SkeletonText,
Skeleton,
SelectOption,
Select,
RatingItems,
Rating,
Range,
Radio,
Radial,
Progress,
Navbar,
ModalClose,
ModalBox,
ModalBackdrop,
ModalAction,
Modal,
MenuTitle,
MenuItem,
Menu,
Loading,
ListRows,
List,
LabelSelect,
LabelInput,
LabelFloating,
Label,
Kbd,
InputPass,
InputHint,
Input,
Indicator,
Icon,
Filter,
FilePreview,
FileInput,
FileError,
FileDrag,
Fieldset,
Fab,
DropdownContent,
DropdownButton,
Dropdown,
DrawerToggle,
DrawerSide,
DrawerOverlay,
DrawerContent,
Drawer,
Divider,
Combo,
ColorPalette,
Checkbox,
ChatImage,
ChatHeader,
ChatFooter,
ChatBubble,
Chat,
CarouselItem,
Carousel,
CardTitle,
CardBody,
CardActions,
Card,
Calendar,
Button,
Breadcrumbs,
Badge,
AvatarGroup,
Avatar,
Alert,
AccordionTitle,
AccordionRadio,
AccordionContent,
Accordion
};
Reference in New Issue View Git Blame Copy Permalink