natxocc/sigpro-ui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Docs Updated

Browse Source
This commit is contained in:
natxocc
2026-04-03 01:41:07 +02:00
parent b0629ef3d0
commit 257107e198
42 changed files with 1529 additions and 6255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
dist/sigpro-ui.js vendored
View File

@@ -49,7 +49,6 @@
Navbar: () => Navbar,
Modal: () => Modal,
Menu: () => Menu,
Loading: () => Loading,
List: () => List,
Label: () => Label,
Input: () => Input,
@@ -215,7 +214,7 @@
return value;
};
};
var $watch = (target, fn) => {
var $watch2 = (target, fn) => {
const isExplicit = Array.isArray(target);
const callback = isExplicit ? fn : target;
const depsInput = isExplicit ? target : null;
@@ -280,7 +279,7 @@
}
const isSignal = typeof val === "function", isInput = ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName), isBindAttr = key === "value" || key === "checked";
if (isInput && isBindAttr && isSignal) {
el._cleanups.add($watch(() => {
el._cleanups.add($watch2(() => {
const currentVal = val();
if (el[key] !== currentVal)
el[key] = currentVal;
@@ -293,7 +292,7 @@
el.addEventListener(eventName, handler);
el._cleanups.add(() => el.removeEventListener(eventName, handler));
} else if (isSignal) {
el._cleanups.add($watch(() => {
el._cleanups.add($watch2(() => {
const currentVal = _sanitize(key, val());
if (key === "class")
el.className = currentVal || "";
@@ -311,7 +310,7 @@
const marker = document.createTextNode("");
el.appendChild(marker);
let nodes = [];
el._cleanups.add($watch(() => {
el._cleanups.add($watch2(() => {
const result = child(), nextNodes = (Array.isArray(result) ? result : [result]).map((item) => item?._isRuntime ? item.container : item instanceof Node ? item : document.createTextNode(item ?? ""));
nodes.forEach((node) => {
sweep(node);
@@ -330,7 +329,7 @@
const marker = document.createTextNode("");
const container = $html2("div", { style: "display:contents" }, [marker]);
let current = null, last = null;
$watch(() => {
$watch2(() => {
const state = !!(typeof condition === "function" ? condition() : condition);
if (state !== last) {
last = state;
@@ -350,7 +349,7 @@
const marker = document.createTextNode("");
const container = $html2("div", { style: "display:contents" }, [marker]);
let cache = new Map;
$watch(() => {
$watch2(() => {
const items = (typeof source === "function" ? source() : source) || [];
const newCache = new Map;
const newOrder = [];
@@ -387,7 +386,7 @@
window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
const outlet = $html2("div", { class: "router-outlet" });
let current = null;
$watch([sPath], async () => {
$watch2([sPath], async () => {
const path = sPath();
const route = routes.find((r) => {
const rp = r.path.split("/").filter(Boolean), pp = path.split("/").filter(Boolean);
@@ -434,7 +433,7 @@
MOUNTED_NODES.set(el, instance);
return instance;
};
var SigProCore = { $, $watch, $html: $html2, $if, $for, $router, $mount };
var SigProCore = { $, $watch: $watch2, $html: $html2, $if, $for, $router, $mount };
if (typeof window !== "undefined") {
const install = (registry) => {
Object.keys(registry).forEach((key) => {
@@ -470,7 +469,6 @@
Navbar: () => Navbar,
Modal: () => Modal,
Menu: () => Menu,
Loading: () => Loading,
List: () => List,
Label: () => Label,
Input: () => Input,
@@ -1315,10 +1313,18 @@
__export(exports_Indicator, {
Indicator: () => Indicator
});
var Indicator = (props, children) => $html2("div", { class: "indicator" }, () => [
children,
props.value && $html2("span", { class: ui("indicator-item badge", props.class) }, props.value)
].filter(Boolean));
var Indicator = (props, children) => {
const { value, class: className, ...rest } = props;
return $html2("div", {
...rest,
class: "indicator"
}, () => [
value ? $html2("span", {
class: ui("indicator-item badge", className)
}, () => typeof value === "function" ? value() : value) : null,
children
].filter(Boolean));
};
// src/components/Label.js
var exports_Label = {};
@@ -1355,19 +1361,6 @@
}, header ? [$if(header, () => $html2("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems);
};
// src/components/Loading.js
var exports_Loading = {};
__export(exports_Loading, {
Loading: () => Loading
});
var Loading = (props) => {
return $if(props.$show, () => $html2("div", {
class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"
}, [
$html2("span", { class: "loading loading-spinner loading-lg text-primary" })
]));
};
// src/components/Menu.js
var exports_Menu = {};
__export(exports_Menu, {
@@ -1394,46 +1387,48 @@
});
var Modal = (props, children) => {
const { class: className, title, buttons, open, ...rest } = props;
const dialogRef = { current: null };
$watch(() => {
const dialog = dialogRef.current;
if (!dialog)
let dialogElement = null;
const handleOpen = () => {
const isOpen = typeof open === "function" ? open() : open;
if (!dialogElement)
return;
if (val(open)) {
if (!dialog.open)
dialog.showModal();
if (isOpen) {
if (!dialogElement.open)
dialogElement.showModal();
} else {
if (dialog.open)
dialog.close();
if (dialogElement.open)
dialogElement.close();
}
});
const close = (e) => {
if (e && e.preventDefault)
e.preventDefault();
};
$watch2(() => handleOpen());
const close = () => {
if (typeof open === "function")
open(false);
};
return $html2("dialog", {
...rest,
ref: dialogRef,
ref: (el) => {
dialogElement = el;
if (el)
handleOpen();
},
class: ui("modal", className),
oncancel: () => typeof open === "function" && open(false)
onclose: close,
oncancel: close
}, [
$html2("div", { class: "modal-box" }, [
title ? $html2("h3", { class: "text-lg font-bold mb-4" }, title) : null,
title ? $html2("h3", { class: "text-lg font-bold mb-4" }, () => typeof title === "function" ? title() : title) : null,
$html2("div", { class: "py-2" }, [
typeof children === "function" ? children() : children
]),
$html2("div", { class: "modal-action flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "button", onclick: close }, tt("close")())
$html2("div", { class: "modal-action" }, [
$html2("form", { method: "dialog", class: "flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "submit" }, tt("close")())
])
])
]),
$html2("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
$html2("form", { method: "dialog", class: "modal-backdrop" }, [
$html2("button", {}, "close")
])
]);
@@ -1588,7 +1583,12 @@
return $html2("label", { ...rest, class: ui("swap", className) }, [
$html2("input", {
type: "checkbox",
checked: val(value)
checked: () => val(value),
onclick: (e) => {
if (typeof value === "function") {
value(e.target.checked);
}
}
}),
$html2("div", { class: "swap-on" }, on),
$html2("div", { class: "swap-off" }, off)
@@ -1643,37 +1643,57 @@
Tabs: () => Tabs
});
var Tabs = (props) => {
const { class: className, items, activeIndex = $(0), ...rest } = props;
const { items, class: className, ...rest } = props;
const itemsSignal = typeof items === "function" ? items : () => items || [];
const internalActive = $(0);
const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
const handleTabClick = (idx, onClick) => (e) => {
if (typeof currentActive === "function") {
currentActive(idx);
}
onClick?.(e);
const name = `tabs-${Math.random().toString(36).slice(2, 9)}`;
const getActiveIndex = () => {
const arr = itemsSignal();
const idx = arr.findIndex((it) => val(it.active) === true);
return idx === -1 ? 0 : idx;
};
return $html2("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
$html2("div", {
role: "tablist",
class: ui("tabs tabs-box", className)
}, $for(itemsSignal, (it, idx) => {
const isActive = val(it.active) ?? currentActive() === idx;
return $html2("a", {
role: "tab",
class: () => ui("tab", isActive ? "tab-active" : "", val(it.disabled) ? "tab-disabled" : ""),
onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined
}, it.label);
}, (t, idx) => t.label + idx)),
() => {
const activeItem = itemsSignal().find((it, idx) => val(it.active) ?? currentActive() === idx);
if (!activeItem)
return null;
const content = val(activeItem.content);
return $html2("div", { class: "p-4" }, [
typeof content === "function" ? content() : content
]);
}
const activeIndex = $(getActiveIndex);
const updateActiveIndex = () => {
const newIndex = getActiveIndex();
if (newIndex !== activeIndex())
activeIndex(newIndex);
};
$watch(() => updateActiveIndex());
return $html2("div", {
...rest,
class: ui("tabs", className || "tabs-box")
}, [
$for(itemsSignal, (it, idx) => {
const isChecked = () => activeIndex() === idx;
const getLabelText = () => {
const label = typeof it.label === "function" ? it.label() : it.label;
return typeof label === "string" ? label : `Tab ${idx + 1}`;
};
return [
$html2("input", {
type: "radio",
name,
class: "tab",
"aria-label": getLabelText(),
checked: isChecked,
disabled: () => val(it.disabled),
onchange: (e) => {
if (e.target.checked && !val(it.disabled)) {
if (it.onclick)
it.onclick();
if (typeof it.active === "function")
it.active(true);
activeIndex(idx);
}
}
}),
$html2("div", {
class: "tab-content bg-base-100 border-base-300 p-6",
style: () => isChecked() ? "display: block" : "display: none"
}, [
typeof it.content === "function" ? it.content() : it.content
])
];
}, (it, idx) => idx)
]);
};
@@ -1690,23 +1710,24 @@
warning: "icon-[lucide--alert-triangle]",
error: "icon-[lucide--alert-circle]"
};
const itemsSource = typeof items === "function" ? items : () => items || [];
return $html2("ul", {
...rest,
class: () => ui(`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, className)
}, [
$for(items, (item, i) => {
$for(itemsSource, (item, i) => {
const isFirst = i === 0;
const isLast = i === val(items).length - 1;
const isLast = i === itemsSource().length - 1;
const itemType = item.type || "success";
const renderSlot = (content) => typeof content === "function" ? content() : content;
return $html2("li", { class: "flex-1" }, [
!isFirst ? $html2("hr", { class: item.completed ? "bg-primary" : "" }) : null,
$html2("div", { class: "timeline-start" }, [renderSlot(item.title)]),
$html2("div", { class: "timeline-middle" }, [
!isFirst ? $html2("hr", { class: () => item.completed ? "bg-primary" : "" }) : null,
$html2("div", { class: "timeline-start" }, () => renderSlot(item.title)),
$html2("div", { class: "timeline-middle" }, () => [
item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
]),
$html2("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
!isLast ? $html2("hr", { class: item.completed ? "bg-primary" : "" }) : null
$html2("div", { class: "timeline-end timeline-box shadow-sm" }, () => renderSlot(item.detail)),
!isLast ? $html2("hr", { class: () => item.completed ? "bg-primary" : "" }) : null
]);
}, (item, i) => item.id || i)
]);
@@ -1796,7 +1817,6 @@
...exports_Input,
...exports_Label,
...exports_List,
...exports_Loading,
...exports_Menu,
...exports_Modal,
...exports_Navbar,