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

events on Tabs

Browse Source
This commit is contained in:
natxocc
2026-04-13 22:23:10 +02:00
parent 3c3938b354
commit a29963563e
8 changed files with 804 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

416
dist/sigpro-ui.esm.js vendored
View File

@@ -10,62 +10,81 @@ var __export = (target, all) => {
}; };
// src/sigpro.js // src/sigpro.js
var isFunc = (fn) => typeof fn === "function"; var isFunc = (f) => typeof f === "function";
var isObj = (o) => o && typeof o === "object";
var isArr = Array.isArray; var isArr = Array.isArray;
var doc = typeof document !== "undefined" ? document : null; var doc = typeof document !== "undefined" ? document : null;
var ensureNode = (node) => node?._isRuntime ? node.container : node instanceof Node ? node : doc.createTextNode(node == null ? "" : String(node)); var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n));
var activeEffect = null; var activeEffect = null;
var activeOwner = null; var activeOwner = null;
var isFlushing = false; var isFlushing = false;
var effectQueue = new Set; var effectQueue = new Set;
var MOUNTED_NODES = new WeakMap; var MOUNTED_NODES = new WeakMap;
var dispose = (effect) => { var dispose = (eff) => {
if (!effect || effect._disposed) if (!eff || eff._disposed)
return; return;
effect._disposed = true; eff._disposed = true;
const stack = [effect]; const stack = [eff];
while (stack.length) { while (stack.length) {
const eff = stack.pop(); const e = stack.pop();
if (eff._cleanups) { if (e._cleanups) {
eff._cleanups.forEach((fn) => fn()); e._cleanups.forEach((fn) => fn());
eff._cleanups.clear(); e._cleanups.clear();
} }
if (eff._children) { if (e._children) {
eff._children.forEach((child) => stack.push(child)); e._children.forEach((child) => stack.push(child));
eff._children.clear(); e._children.clear();
} }
if (eff._deps) { if (e._deps) {
eff._deps.forEach((depSet) => depSet.delete(eff)); e._deps.forEach((depSet) => depSet.delete(e));
eff._deps.clear(); e._deps.clear();
} }
} }
}; };
var onMount = (fn) => {
if (activeOwner)
(activeOwner._mounts ||= []).push(fn);
};
var onUnmount = (fn) => { var onUnmount = (fn) => {
if (activeOwner) if (activeOwner)
(activeOwner._cleanups ||= new Set).add(fn); (activeOwner._cleanups ||= new Set).add(fn);
}; };
var onMount = (fn) => { var set = (signal, path, value) => {
if (activeOwner) if (value === undefined)
(activeOwner._mounts ||= []).push(fn); return signal(isFunc(path) ? path(signal()) : path);
const keys = path.split("."), root = { ...signal() };
let acc = root, k;
for (k of keys.slice(0, -1))
acc = acc[k] = { ...acc[k] || {} };
acc[keys.at(-1)] = value;
signal(root);
};
var untrack = (fn) => {
const p = activeEffect;
activeEffect = null;
try {
return fn();
} finally {
activeEffect = p;
}
}; };
var createEffect = (fn, isComputed = false) => { var createEffect = (fn, isComputed = false) => {
const effect = () => { const effect = () => {
if (effect._disposed) if (effect._disposed)
return; return;
if (effect._deps) if (effect._deps)
effect._deps.forEach((depSet) => depSet.delete(effect)); effect._deps.forEach((s) => s.delete(effect));
if (effect._cleanups) { if (effect._cleanups) {
effect._cleanups.forEach((cleanup) => cleanup()); effect._cleanups.forEach((c) => c());
effect._cleanups.clear(); effect._cleanups.clear();
} }
const prevEffect = activeEffect; const prevEffect = activeEffect;
const prevOwner = activeOwner; const prevOwner = activeOwner;
activeEffect = activeOwner = effect; activeEffect = activeOwner = effect;
try { try {
const res = isComputed ? fn() : (fn(), undefined); return effect._result = fn();
if (!isComputed) } catch (e) {
effect._result = res; console.error("[SigPro]", e);
return res;
} finally { } finally {
activeEffect = prevEffect; activeEffect = prevEffect;
activeOwner = prevOwner; activeOwner = prevOwner;
@@ -87,9 +106,9 @@ var flush = () => {
isFlushing = true; isFlushing = true;
const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth); const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth);
effectQueue.clear(); effectQueue.clear();
for (const eff of sorted) for (const e of sorted)
if (!eff._disposed) if (!e._disposed)
eff(); e();
isFlushing = false; isFlushing = false;
}; };
var trackUpdate = (subs, trigger = false) => { var trackUpdate = (subs, trigger = false) => {
@@ -98,15 +117,15 @@ var trackUpdate = (subs, trigger = false) => {
(activeEffect._deps ||= new Set).add(subs); (activeEffect._deps ||= new Set).add(subs);
} else if (trigger) { } else if (trigger) {
let hasQueue = false; let hasQueue = false;
subs.forEach((eff) => { subs.forEach((e) => {
if (eff === activeEffect || eff._disposed) if (e === activeEffect || e._disposed)
return; return;
if (eff._isComputed) { if (e._isComputed) {
eff._dirty = true; e._dirty = true;
if (eff._subs) if (e._subs)
trackUpdate(eff._subs, true); trackUpdate(e._subs, true);
} else { } else {
effectQueue.add(eff); effectQueue.add(e);
hasQueue = true; hasQueue = true;
} }
}); });
@@ -114,25 +133,16 @@ var trackUpdate = (subs, trigger = false) => {
queueMicrotask(flush); queueMicrotask(flush);
} }
}; };
var untrack = (fn) => { var $2 = (val, key = null) => {
const prev = activeEffect;
activeEffect = null;
try {
return fn();
} finally {
activeEffect = prev;
}
};
var $2 = (initialValue, storageKey = null) => {
const subs = new Set; const subs = new Set;
if (isFunc(initialValue)) { if (isFunc(val)) {
let cache, dirty = true; let cache, dirty = true;
const computed = () => { const computed = () => {
if (dirty) { if (dirty) {
const prev = activeEffect; const prev = activeEffect;
activeEffect = computed; activeEffect = computed;
try { try {
const next = initialValue(); const next = val();
if (!Object.is(cache, next)) { if (!Object.is(cache, next)) {
cache = next; cache = next;
dirty = false; dirty = false;
@@ -165,33 +175,33 @@ var $2 = (initialValue, storageKey = null) => {
onUnmount(computed.stop); onUnmount(computed.stop);
return computed; return computed;
} }
if (storageKey) if (key)
try { try {
initialValue = JSON.parse(localStorage.getItem(storageKey)) ?? initialValue; val = JSON.parse(localStorage.getItem(key)) ?? val;
} catch (e) {} } catch (e) {}
return (...args) => { return (...args) => {
if (args.length) { if (args.length) {
const next = isFunc(args[0]) ? args[0](initialValue) : args[0]; const next = isFunc(args[0]) ? args[0](val) : args[0];
if (!Object.is(initialValue, next)) { if (!Object.is(val, next)) {
initialValue = next; val = next;
if (storageKey) if (key)
localStorage.setItem(storageKey, JSON.stringify(initialValue)); localStorage.setItem(key, JSON.stringify(val));
trackUpdate(subs, true); trackUpdate(subs, true);
} }
} }
trackUpdate(subs); trackUpdate(subs);
return initialValue; return val;
}; };
}; };
var Watch2 = (sources, callback) => { var Watch2 = (sources, cb) => {
if (callback === undefined) { if (cb === undefined) {
const effect2 = createEffect(sources); const effect2 = createEffect(sources);
effect2(); effect2();
return () => dispose(effect2); return () => dispose(effect2);
} }
const effect = createEffect(() => { const effect = createEffect(() => {
const vals = isArr(sources) ? sources.map((src) => src()) : sources(); const vals = Array.isArray(sources) ? sources.map((s) => s()) : sources();
untrack(() => callback(vals)); untrack(() => cb(vals));
}); });
effect(); effect();
return () => dispose(effect); return () => dispose(effect);
@@ -208,36 +218,20 @@ var cleanupNode = (node) => {
}; };
var DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i; var DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i;
var isDangerousAttr = (key) => key === "src" || key === "href" || key.startsWith("on"); var isDangerousAttr = (key) => key === "src" || key === "href" || key.startsWith("on");
var applyProp = (elem, key, value, isSVG) => { var validateAttr = (key, val) => {
if (value == null || value === false) { if (val == null || val === false)
if (key === "class" || key === "className") return null;
elem.className = ""; if (isDangerousAttr(key)) {
else if (key in elem && !isSVG) const sVal = String(val);
elem[key] = ""; if (DANGEROUS_PROTOCOL.test(sVal)) {
else console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`);
elem.removeAttribute(key); return "#";
return;
} }
if (key === "class" || key === "className") {
elem.className = value;
} else if (key === "style" && typeof value === "object") {
Object.assign(elem.style, value);
} else if (key in elem && !isSVG) {
elem[key] = value;
} else if (isSVG) {
if (key.startsWith("xlink:")) {
elem.setAttributeNS("http://www.w3.org/1999/xlink", key, value);
} else if (key === "xmlns" || key.startsWith("xmlns:")) {
elem.setAttributeNS("http://www.w3.org/2000/xmlns/", key, value);
} else {
elem.setAttribute(key, value === true ? "" : value);
}
} else {
elem.setAttribute(key, value === true ? "" : value);
} }
return val;
}; };
var Tag2 = (tag, props = {}, children = []) => { var Tag2 = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || props && typeof props !== "object") { if (props instanceof Node || isArr(props) || !isObj(props)) {
children = props; children = props;
props = {}; props = {};
} }
@@ -252,71 +246,75 @@ var Tag2 = (tag, props = {}, children = []) => {
return result2; return result2;
}); });
effect(); effect();
ctx._mounts = effect._mounts || [];
ctx._cleanups = effect._cleanups || new Set;
const result = effect._result; const result = effect._result;
const attach = (node) => {
if (node && typeof node === "object" && !node._isRuntime) {
node._mounts = ctx._mounts;
node._cleanups = ctx._cleanups;
node._ownerEffect = effect;
}
};
isArr(result) ? result.forEach(attach) : attach(result);
if (result == null) if (result == null)
return null; return null;
if (result instanceof Node || isArr(result) && result.every((n) => n instanceof Node)) const node = result instanceof Node || isArr(result) && result.every((n) => n instanceof Node) ? result : doc.createTextNode(String(result));
return result; const attach = (n) => {
return doc.createTextNode(String(result)); if (isObj(n) && !n._isRuntime) {
n._mounts = effect._mounts || [];
n._cleanups = effect._cleanups || new Set;
n._ownerEffect = effect;
} }
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use|image|ellipse|foreignObject|linearGradient|radialGradient|stop|pattern|mask|clipPath|filter|feColorMatrix|feBlend|feGaussianBlur|animate|animateTransform|set|metadata|desc|title|symbol|marker|view)$/i.test(tag); };
const elem = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag); isArr(node) ? node.forEach(attach) : attach(node);
elem._cleanups = new Set; return node;
for (let key in props) { }
if (!props.hasOwnProperty(key)) const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag);
const el = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag);
el._cleanups = new Set;
for (let k in props) {
if (!props.hasOwnProperty(k))
continue; continue;
let value = props[key]; let v = props[k];
if (key === "ref") { if (k === "ref") {
isFunc(value) ? value(elem) : value.current = elem; isFunc(v) ? v(el) : v.current = el;
continue; continue;
} }
if (key.startsWith("on")) { if (k.startsWith("on")) {
const event = key.slice(2).toLowerCase(); const ev = k.slice(2).toLowerCase();
elem.addEventListener(event, value); el.addEventListener(ev, v);
const off = () => elem.removeEventListener(event, value); const off = () => el.removeEventListener(ev, v);
elem._cleanups.add(off); el._cleanups.add(off);
onUnmount(off); onUnmount(off);
} else if (isFunc(value)) { } else if (isFunc(v)) {
const effect = createEffect(() => { const effect = createEffect(() => {
let val = value(); const val = validateAttr(k, v());
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) if (k === "class")
val = "#"; el.className = val || "";
applyProp(elem, key, val, isSVG); else if (val == null)
el.removeAttribute(k);
else if (k in el && !isSVG)
el[k] = val;
else
el.setAttribute(k, val === true ? "" : val);
}); });
effect(); effect();
elem._cleanups.add(() => dispose(effect)); el._cleanups.add(() => dispose(effect));
onUnmount(() => dispose(effect)); onUnmount(() => dispose(effect));
if (/^(INPUT|TEXTAREA|SELECT)$/.test(elem.tagName) && (key === "value" || key === "checked")) { if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) {
const eventType = key === "checked" ? "change" : "input"; const evType = k === "checked" ? "change" : "input";
elem.addEventListener(eventType, (ev) => value(ev.target[key])); el.addEventListener(evType, (ev) => v(ev.target[k]));
} }
} else { } else {
let val = value; const val = validateAttr(k, v);
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) if (val != null) {
val = "#"; if (k in el && !isSVG)
if (val != null) el[k] = val;
applyProp(elem, key, val, isSVG); else
el.setAttribute(k, val === true ? "" : val);
} }
} }
const mountChild = (child) => { }
if (isArr(child)) const append = (c) => {
return child.forEach(mountChild); if (isArr(c))
if (isFunc(child)) { return c.forEach(append);
if (isFunc(c)) {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("");
elem.appendChild(anchor); el.appendChild(anchor);
let currentNodes = []; let currentNodes = [];
const effect = createEffect(() => { const effect = createEffect(() => {
const res = child(); const res = c();
const next = (isArr(res) ? res : [res]).map(ensureNode); const next = (isArr(res) ? res : [res]).map(ensureNode);
currentNodes.forEach((n) => { currentNodes.forEach((n) => {
if (n._isRuntime) if (n._isRuntime)
@@ -338,55 +336,46 @@ var Tag2 = (tag, props = {}, children = []) => {
currentNodes = next; currentNodes = next;
}); });
effect(); effect();
elem._cleanups.add(() => dispose(effect)); el._cleanups.add(() => dispose(effect));
onUnmount(() => dispose(effect)); onUnmount(() => dispose(effect));
} else { } else {
const node = ensureNode(child); const node = ensureNode(c);
elem.appendChild(node); el.appendChild(node);
if (node._mounts) if (node._mounts)
node._mounts.forEach((fn) => fn()); node._mounts.forEach((fn) => fn());
} }
}; };
mountChild(children); append(children);
return elem; return el;
}; };
var createView = (renderFn) => { var Render = (renderFn) => {
const cleanups = new Set; const cleanups = new Set;
const mounts = []; const mounts = [];
const previousOwner = activeOwner; const previousOwner = activeOwner;
activeOwner = { _cleanups: cleanups, _mounts: mounts }; const previousEffect = activeEffect;
const result = renderFn({ onCleanup: (fn) => cleanups.add(fn) });
activeOwner = previousOwner;
if (result == null)
return null;
if (result instanceof Node) {
mounts.forEach((fn) => fn());
return {
_isRuntime: true,
container: result,
destroy: () => {
cleanups.forEach((fn) => fn());
cleanupNode(result);
result.remove();
}
};
}
const container = doc.createElement("div"); const container = doc.createElement("div");
container.style.display = "contents"; container.style.display = "contents";
container.setAttribute("role", "presentation"); container.setAttribute("role", "presentation");
const process = (node) => { activeOwner = { _cleanups: cleanups, _mounts: mounts };
if (!node) activeEffect = null;
const processResult = (result) => {
if (!result)
return; return;
if (node._isRuntime) { if (result._isRuntime) {
cleanups.add(node.destroy); cleanups.add(result.destroy);
container.appendChild(node.container); container.appendChild(result.container);
} else if (isArr(node)) { } else if (isArr(result)) {
node.forEach(process); result.forEach(processResult);
} else { } else {
container.appendChild(node instanceof Node ? node : doc.createTextNode(String(node))); container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result)));
} }
}; };
process(result); try {
processResult(renderFn({ onCleanup: (fn) => cleanups.add(fn) }));
} finally {
activeOwner = previousOwner;
activeEffect = previousEffect;
}
mounts.forEach((fn) => fn()); mounts.forEach((fn) => fn());
return { return {
_isRuntime: true, _isRuntime: true,
@@ -428,7 +417,7 @@ var If2 = (cond, ifYes, ifNot = null, trans = null) => {
} }
const content = show ? ifYes : ifNot; const content = show ? ifYes : ifNot;
if (content) { if (content) {
currentView = createView(() => isFunc(content) ? content() : content); currentView = Render(() => isFunc(content) ? content() : content);
root.insertBefore(currentView.container, anchor); root.insertBefore(currentView.container, anchor);
if (trans?.in) if (trans?.in)
trans.in(currentView.container); trans.in(currentView.container);
@@ -449,7 +438,7 @@ var For2 = (src, itemFn, keyFn) => {
const key = keyFn ? keyFn(item, i) : item?.id ?? i; const key = keyFn ? keyFn(item, i) : item?.id ?? i;
let view = cache.get(key); let view = cache.get(key);
if (!view) if (!view)
view = createView(() => itemFn(item, i)); view = Render(() => itemFn(item, i));
else else
cache.delete(key); cache.delete(key);
nextCache.set(key, view); nextCache.set(key, view);
@@ -474,14 +463,14 @@ var Router = (routes) => {
const handler = () => path(getHash()); const handler = () => path(getHash());
window.addEventListener("hashchange", handler); window.addEventListener("hashchange", handler);
onUnmount(() => window.removeEventListener("hashchange", handler)); onUnmount(() => window.removeEventListener("hashchange", handler));
const outlet = Tag2("div", { class: "router-outlet" }); const hook = Tag2("div", { class: "router-hook" });
let currentView = null; let currentView = null;
Watch2([path], () => { Watch2([path], () => {
const cur = path(); const cur = path();
const route = routes.find((r) => { const route = routes.find((r) => {
const rParts = r.path.split("/").filter(Boolean); const p1 = r.path.split("/").filter(Boolean);
const curParts = cur.split("/").filter(Boolean); const p2 = cur.split("/").filter(Boolean);
return rParts.length === curParts.length && rParts.every((p, i) => p[0] === ":" || p === curParts[i]); return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i]);
}) || routes.find((r) => r.path === "*"); }) || routes.find((r) => r.path === "*");
if (route) { if (route) {
currentView?.destroy(); currentView?.destroy();
@@ -491,14 +480,14 @@ var Router = (routes) => {
params[p.slice(1)] = cur.split("/").filter(Boolean)[i]; params[p.slice(1)] = cur.split("/").filter(Boolean)[i];
}); });
Router.params(params); Router.params(params);
currentView = createView(() => isFunc(route.component) ? route.component(params) : route.component); currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component);
outlet.replaceChildren(currentView.container); hook.replaceChildren(currentView.container);
} }
}); });
return outlet; return hook;
}; };
Router.params = $2({}); Router.params = $2({});
Router.to = (path) => window.location.hash = path.replace(/^#?\/?/, "#/"); Router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
Router.back = () => window.history.back(); Router.back = () => window.history.back();
Router.path = () => window.location.hash.replace(/^#/, "") || "/"; Router.path = () => window.location.hash.replace(/^#/, "") || "/";
var Mount2 = (comp, target) => { var Mount2 = (comp, target) => {
@@ -507,24 +496,12 @@ var Mount2 = (comp, target) => {
return; return;
if (MOUNTED_NODES.has(t)) if (MOUNTED_NODES.has(t))
MOUNTED_NODES.get(t).destroy(); MOUNTED_NODES.get(t).destroy();
const inst = createView(() => isFunc(comp) ? comp() : comp); const inst = Render(isFunc(comp) ? comp : () => comp);
t.replaceChildren(inst.container); t.replaceChildren(inst.container);
MOUNTED_NODES.set(t, inst); MOUNTED_NODES.set(t, inst);
return inst; return inst;
}; };
var set = (signal, path, value) => { var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, set });
if (value === undefined) {
signal(isFunc(path) ? path(signal()) : path);
} else {
const keys = path.split(".");
const last = keys.pop();
const current = signal();
const obj = keys.reduce((o, k) => ({ ...o, [k]: { ...o[k] } }), { ...current });
obj[last] = value;
signal(obj);
}
};
var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, set });
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.assign(window, SigPro); Object.assign(window, SigPro);
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c)); "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));
@@ -579,11 +556,11 @@ var exports_utils = {};
__export(exports_utils, { __export(exports_utils, {
val: () => val, val: () => val,
ui: () => ui, ui: () => ui,
getIcon: () => getIcon2 getIcon: () => getIcon
}); });
var val = (t) => typeof t === "function" ? t() : t; var val = (t) => typeof t === "function" ? t() : t;
var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim(); var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim();
var getIcon2 = (icon) => { var getIcon = (icon) => {
if (!icon) if (!icon)
return null; return null;
if (typeof icon === "function") { if (typeof icon === "function") {
@@ -644,7 +621,7 @@ var Alert = (props, children) => {
role: "alert", role: "alert",
class: ui("alert", allClasses) class: ui("alert", allClasses)
}, () => [ }, () => [
getIcon2(iconMap[type]), getIcon(iconMap[type]),
Tag("div", { class: "flex-1" }, [ Tag("div", { class: "flex-1" }, [
Tag("span", {}, [typeof content === "function" ? content() : content]) Tag("span", {}, [typeof content === "function" ? content() : content])
]), ]),
@@ -713,8 +690,8 @@ var Input = (props) => {
tel: "icon-[lucide--phone]", tel: "icon-[lucide--phone]",
url: "icon-[lucide--link]" url: "icon-[lucide--link]"
}; };
const leftIcon = icon ? getIcon2(icon) : iconMap[type] ? getIcon2(iconMap[type]) : null; const leftIcon = icon ? getIcon(icon) : iconMap[type] ? getIcon(iconMap[type]) : null;
const getPasswordIcon = () => getIcon2(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]"); const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]");
const paddingLeft = leftIcon ? "pl-10" : ""; const paddingLeft = leftIcon ? "pl-10" : "";
const paddingRight = isPassword ? "pr-10" : ""; const paddingRight = isPassword ? "pr-10" : "";
const buttonSize = () => { const buttonSize = () => {
@@ -871,7 +848,7 @@ __export(exports_Button, {
}); });
var Button = (props, children) => { var Button = (props, children) => {
const { class: className, loading, icon, ...rest } = props; const { class: className, loading, icon, ...rest } = props;
const iconEl = getIcon2(icon); const iconEl = getIcon(icon);
return Tag("button", { return Tag("button", {
...rest, ...rest,
class: ui("btn", className), class: ui("btn", className),
@@ -1067,7 +1044,7 @@ var Datepicker = (props) => {
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue, value: displayValue,
readonly: true, readonly: true,
icon: getIcon2("icon-[lucide--calendar]"), icon: getIcon("icon-[lucide--calendar]"),
onclick: (e) => { onclick: (e) => {
e.stopPropagation(); e.stopPropagation();
isOpen(!isOpen()); isOpen(!isOpen());
@@ -1080,15 +1057,15 @@ var Datepicker = (props) => {
}, [ }, [
Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
Tag("div", { class: "flex gap-0.5" }, [ Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon2("icon-[lucide--chevrons-left]")), Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon2("icon-[lucide--chevron-left]")) Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
]), ]),
Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [ Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }) () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
]), ]),
Tag("div", { class: "flex gap-0.5" }, [ Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon2("icon-[lucide--chevron-right]")), Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon2("icon-[lucide--chevrons-right]")) Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
]) ])
]), ]),
Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [ Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
@@ -1296,7 +1273,7 @@ var Fab = (props) => {
role: "button", role: "button",
class: "btn btn-lg btn-circle btn-primary shadow-2xl" class: "btn btn-lg btn-circle btn-primary shadow-2xl"
}, [ }, [
icon ? getIcon2(icon) : null, icon ? getIcon(icon) : null,
!icon && label ? label : null !icon && label ? label : null
]), ]),
...val(actions).map((act) => Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [ ...val(actions).map((act) => Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
@@ -1308,7 +1285,7 @@ var Fab = (props) => {
e.stopPropagation(); e.stopPropagation();
act.onclick?.(e); act.onclick?.(e);
} }
}, [act.icon ? getIcon2(act.icon) : act.text || ""]) }, [act.icon ? getIcon(act.icon) : act.text || ""])
])) ]))
]); ]);
}; };
@@ -1383,7 +1360,7 @@ var Fileinput = (props) => {
} }
}, [ }, [
Tag("div", { class: "flex items-center gap-3 w-full" }, [ Tag("div", { class: "flex items-center gap-3 w-full" }, [
getIcon2("icon-[lucide--upload]"), getIcon("icon-[lucide--upload]"),
Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."), Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`) Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
]), ]),
@@ -1412,7 +1389,7 @@ var Fileinput = (props) => {
e.stopPropagation(); e.stopPropagation();
removeFile(index); removeFile(index);
} }
}, [getIcon2("icon-[lucide--x]")]) }, [getIcon("icon-[lucide--x]")])
]), (file) => file.name + file.lastModified) ]), (file) => file.name + file.lastModified)
])) ]))
]); ]);
@@ -1760,10 +1737,10 @@ __export(exports_Tabs, {
Tabs: () => Tabs Tabs: () => Tabs
}); });
var Tabs = (props) => { var Tabs = (props) => {
const { items, class: className, ...rest } = props; const { items, class: className, onTabClose, ...rest } = props;
const itemsSignal = typeof items === "function" ? items : () => items || []; const itemsSignal = typeof items === "function" ? items : () => items || [];
const activeIndex = $(0); const activeIndex = $2(0);
Watch(() => { Watch2(() => {
const list = itemsSignal(); const list = itemsSignal();
const idx = list.findIndex((it) => val(it.active) === true); const idx = list.findIndex((it) => val(it.active) === true);
if (idx !== -1 && activeIndex() !== idx) { if (idx !== -1 && activeIndex() !== idx) {
@@ -1772,7 +1749,9 @@ var Tabs = (props) => {
}); });
const removeTab = (indexToRemove, item) => { const removeTab = (indexToRemove, item) => {
if (item.onClose) if (item.onClose)
item.onClose(); item.onClose(item);
if (onTabClose)
onTabClose(item, indexToRemove);
const currentItems = itemsSignal(); const currentItems = itemsSignal();
const newItems = currentItems.filter((_, idx) => idx !== indexToRemove); const newItems = currentItems.filter((_, idx) => idx !== indexToRemove);
const isWritableSignal = typeof items === "function" && !items._isComputed; const isWritableSignal = typeof items === "function" && !items._isComputed;
@@ -1790,7 +1769,7 @@ var Tabs = (props) => {
newActive = Math.min(newActive, newItems.length - 1); newActive = Math.min(newActive, newItems.length - 1);
activeIndex(newActive); activeIndex(newActive);
}; };
return Tag("div", { ...rest, class: ui("tabs", className) }, () => { return Tag2("div", { ...rest, class: ui("tabs", className) }, () => {
const list = itemsSignal(); const list = itemsSignal();
const elements = []; const elements = [];
for (let i = 0;i < list.length; i++) { for (let i = 0;i < list.length; i++) {
@@ -1805,16 +1784,13 @@ var Tabs = (props) => {
e.stopPropagation(); e.stopPropagation();
removeTab(i, item); removeTab(i, item);
}; };
const wrapper = Tag("span", { class: "flex items-center" }, [labelNode, closeIcon]); const wrapper = Tag2("span", { class: "flex items-center" }, [labelNode, closeIcon]);
buttonChildren.push(wrapper); buttonChildren.push(wrapper);
} else { } else {
buttonChildren.push(labelNode); buttonChildren.push(labelNode);
} }
const button = Tag("button", { const buttonBase = Tag2("button", {
class: () => { class: () => ui("tab", activeIndex() === i ? "tab-active" : ""),
const isActive = activeIndex() === i;
return ui("tab", isActive ? "tab-active" : "");
},
onclick: (e) => { onclick: (e) => {
e.preventDefault(); e.preventDefault();
if (!val(item.disabled)) { if (!val(item.disabled)) {
@@ -1822,9 +1798,9 @@ var Tabs = (props) => {
item.onclick(); item.onclick();
activeIndex(i); activeIndex(i);
} }
}, }
title: item.tip || ""
}, buttonChildren); }, buttonChildren);
const button = item.tip ? Tag2("div", { class: "tooltip", "data-tip": item.tip }, buttonBase) : buttonBase;
elements.push(button); elements.push(button);
let contentNode; let contentNode;
const rawContent = val(item.content); const rawContent = val(item.content);
@@ -1835,8 +1811,8 @@ var Tabs = (props) => {
} else { } else {
contentNode = document.createTextNode(String(rawContent)); contentNode = document.createTextNode(String(rawContent));
} }
const inner = Tag("div", { class: "tab-content-inner" }, contentNode); const inner = Tag2("div", { class: "tab-content-inner" }, contentNode);
const panel = Tag("div", { const panel = Tag2("div", {
class: "tab-content bg-base-100 border-base-300 p-6", class: "tab-content bg-base-100 border-base-300 p-6",
style: () => activeIndex() === i ? "display: block" : "display: none" style: () => activeIndex() === i ? "display: block" : "display: none"
}, inner); }, inner);
@@ -1875,7 +1851,7 @@ var Timeline = (props) => {
!isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null, !isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null,
Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]), Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]),
Tag("div", { class: "timeline-middle" }, [ Tag("div", { class: "timeline-middle" }, [
() => item.icon ? getIcon2(item.icon) : getIcon2(iconMap[itemType] || iconMap.success) () => item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
]), ]),
Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]), Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]),
!isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null !isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null
@@ -1918,7 +1894,7 @@ var Toast = (message, type = "alert-success", duration = 3500) => {
} }
}; };
const ToastComponent = () => { const ToastComponent = () => {
const closeIcon = getIcon2("icon-[lucide--x]"); const closeIcon = getIcon("icon-[lucide--x]");
const el = Tag("div", { const el = Tag("div", {
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto` class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
}, [ }, [
@@ -2029,7 +2005,7 @@ export {
val, val,
ui, ui,
tt, tt,
getIcon2 as getIcon, getIcon,
Watch2 as Watch, Watch2 as Watch,
Tooltip, Tooltip,
Toast, Toast,

8
dist/sigpro-ui.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

416
dist/sigpro-ui.js vendored
View File

@@ -33,7 +33,7 @@
val: () => val, val: () => val,
ui: () => ui, ui: () => ui,
tt: () => tt, tt: () => tt,
getIcon: () => getIcon2, getIcon: () => getIcon,
Watch: () => Watch2, Watch: () => Watch2,
Tooltip: () => Tooltip, Tooltip: () => Tooltip,
Toast: () => Toast, Toast: () => Toast,
@@ -76,62 +76,81 @@
}); });
// src/sigpro.js // src/sigpro.js
var isFunc = (fn) => typeof fn === "function"; var isFunc = (f) => typeof f === "function";
var isObj = (o) => o && typeof o === "object";
var isArr = Array.isArray; var isArr = Array.isArray;
var doc = typeof document !== "undefined" ? document : null; var doc = typeof document !== "undefined" ? document : null;
var ensureNode = (node) => node?._isRuntime ? node.container : node instanceof Node ? node : doc.createTextNode(node == null ? "" : String(node)); var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n));
var activeEffect = null; var activeEffect = null;
var activeOwner = null; var activeOwner = null;
var isFlushing = false; var isFlushing = false;
var effectQueue = new Set; var effectQueue = new Set;
var MOUNTED_NODES = new WeakMap; var MOUNTED_NODES = new WeakMap;
var dispose = (effect) => { var dispose = (eff) => {
if (!effect || effect._disposed) if (!eff || eff._disposed)
return; return;
effect._disposed = true; eff._disposed = true;
const stack = [effect]; const stack = [eff];
while (stack.length) { while (stack.length) {
const eff = stack.pop(); const e = stack.pop();
if (eff._cleanups) { if (e._cleanups) {
eff._cleanups.forEach((fn) => fn()); e._cleanups.forEach((fn) => fn());
eff._cleanups.clear(); e._cleanups.clear();
} }
if (eff._children) { if (e._children) {
eff._children.forEach((child) => stack.push(child)); e._children.forEach((child) => stack.push(child));
eff._children.clear(); e._children.clear();
} }
if (eff._deps) { if (e._deps) {
eff._deps.forEach((depSet) => depSet.delete(eff)); e._deps.forEach((depSet) => depSet.delete(e));
eff._deps.clear(); e._deps.clear();
} }
} }
}; };
var onMount = (fn) => {
if (activeOwner)
(activeOwner._mounts ||= []).push(fn);
};
var onUnmount = (fn) => { var onUnmount = (fn) => {
if (activeOwner) if (activeOwner)
(activeOwner._cleanups ||= new Set).add(fn); (activeOwner._cleanups ||= new Set).add(fn);
}; };
var onMount = (fn) => { var set = (signal, path, value) => {
if (activeOwner) if (value === undefined)
(activeOwner._mounts ||= []).push(fn); return signal(isFunc(path) ? path(signal()) : path);
const keys = path.split("."), root = { ...signal() };
let acc = root, k;
for (k of keys.slice(0, -1))
acc = acc[k] = { ...acc[k] || {} };
acc[keys.at(-1)] = value;
signal(root);
};
var untrack = (fn) => {
const p = activeEffect;
activeEffect = null;
try {
return fn();
} finally {
activeEffect = p;
}
}; };
var createEffect = (fn, isComputed = false) => { var createEffect = (fn, isComputed = false) => {
const effect = () => { const effect = () => {
if (effect._disposed) if (effect._disposed)
return; return;
if (effect._deps) if (effect._deps)
effect._deps.forEach((depSet) => depSet.delete(effect)); effect._deps.forEach((s) => s.delete(effect));
if (effect._cleanups) { if (effect._cleanups) {
effect._cleanups.forEach((cleanup) => cleanup()); effect._cleanups.forEach((c) => c());
effect._cleanups.clear(); effect._cleanups.clear();
} }
const prevEffect = activeEffect; const prevEffect = activeEffect;
const prevOwner = activeOwner; const prevOwner = activeOwner;
activeEffect = activeOwner = effect; activeEffect = activeOwner = effect;
try { try {
const res = isComputed ? fn() : (fn(), undefined); return effect._result = fn();
if (!isComputed) } catch (e) {
effect._result = res; console.error("[SigPro]", e);
return res;
} finally { } finally {
activeEffect = prevEffect; activeEffect = prevEffect;
activeOwner = prevOwner; activeOwner = prevOwner;
@@ -153,9 +172,9 @@
isFlushing = true; isFlushing = true;
const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth); const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth);
effectQueue.clear(); effectQueue.clear();
for (const eff of sorted) for (const e of sorted)
if (!eff._disposed) if (!e._disposed)
eff(); e();
isFlushing = false; isFlushing = false;
}; };
var trackUpdate = (subs, trigger = false) => { var trackUpdate = (subs, trigger = false) => {
@@ -164,15 +183,15 @@
(activeEffect._deps ||= new Set).add(subs); (activeEffect._deps ||= new Set).add(subs);
} else if (trigger) { } else if (trigger) {
let hasQueue = false; let hasQueue = false;
subs.forEach((eff) => { subs.forEach((e) => {
if (eff === activeEffect || eff._disposed) if (e === activeEffect || e._disposed)
return; return;
if (eff._isComputed) { if (e._isComputed) {
eff._dirty = true; e._dirty = true;
if (eff._subs) if (e._subs)
trackUpdate(eff._subs, true); trackUpdate(e._subs, true);
} else { } else {
effectQueue.add(eff); effectQueue.add(e);
hasQueue = true; hasQueue = true;
} }
}); });
@@ -180,25 +199,16 @@
queueMicrotask(flush); queueMicrotask(flush);
} }
}; };
var untrack = (fn) => { var $2 = (val, key = null) => {
const prev = activeEffect;
activeEffect = null;
try {
return fn();
} finally {
activeEffect = prev;
}
};
var $2 = (initialValue, storageKey = null) => {
const subs = new Set; const subs = new Set;
if (isFunc(initialValue)) { if (isFunc(val)) {
let cache, dirty = true; let cache, dirty = true;
const computed = () => { const computed = () => {
if (dirty) { if (dirty) {
const prev = activeEffect; const prev = activeEffect;
activeEffect = computed; activeEffect = computed;
try { try {
const next = initialValue(); const next = val();
if (!Object.is(cache, next)) { if (!Object.is(cache, next)) {
cache = next; cache = next;
dirty = false; dirty = false;
@@ -231,33 +241,33 @@
onUnmount(computed.stop); onUnmount(computed.stop);
return computed; return computed;
} }
if (storageKey) if (key)
try { try {
initialValue = JSON.parse(localStorage.getItem(storageKey)) ?? initialValue; val = JSON.parse(localStorage.getItem(key)) ?? val;
} catch (e) {} } catch (e) {}
return (...args) => { return (...args) => {
if (args.length) { if (args.length) {
const next = isFunc(args[0]) ? args[0](initialValue) : args[0]; const next = isFunc(args[0]) ? args[0](val) : args[0];
if (!Object.is(initialValue, next)) { if (!Object.is(val, next)) {
initialValue = next; val = next;
if (storageKey) if (key)
localStorage.setItem(storageKey, JSON.stringify(initialValue)); localStorage.setItem(key, JSON.stringify(val));
trackUpdate(subs, true); trackUpdate(subs, true);
} }
} }
trackUpdate(subs); trackUpdate(subs);
return initialValue; return val;
}; };
}; };
var Watch2 = (sources, callback) => { var Watch2 = (sources, cb) => {
if (callback === undefined) { if (cb === undefined) {
const effect2 = createEffect(sources); const effect2 = createEffect(sources);
effect2(); effect2();
return () => dispose(effect2); return () => dispose(effect2);
} }
const effect = createEffect(() => { const effect = createEffect(() => {
const vals = isArr(sources) ? sources.map((src) => src()) : sources(); const vals = Array.isArray(sources) ? sources.map((s) => s()) : sources();
untrack(() => callback(vals)); untrack(() => cb(vals));
}); });
effect(); effect();
return () => dispose(effect); return () => dispose(effect);
@@ -274,36 +284,20 @@
}; };
var DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i; var DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i;
var isDangerousAttr = (key) => key === "src" || key === "href" || key.startsWith("on"); var isDangerousAttr = (key) => key === "src" || key === "href" || key.startsWith("on");
var applyProp = (elem, key, value, isSVG) => { var validateAttr = (key, val) => {
if (value == null || value === false) { if (val == null || val === false)
if (key === "class" || key === "className") return null;
elem.className = ""; if (isDangerousAttr(key)) {
else if (key in elem && !isSVG) const sVal = String(val);
elem[key] = ""; if (DANGEROUS_PROTOCOL.test(sVal)) {
else console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`);
elem.removeAttribute(key); return "#";
return;
} }
if (key === "class" || key === "className") {
elem.className = value;
} else if (key === "style" && typeof value === "object") {
Object.assign(elem.style, value);
} else if (key in elem && !isSVG) {
elem[key] = value;
} else if (isSVG) {
if (key.startsWith("xlink:")) {
elem.setAttributeNS("http://www.w3.org/1999/xlink", key, value);
} else if (key === "xmlns" || key.startsWith("xmlns:")) {
elem.setAttributeNS("http://www.w3.org/2000/xmlns/", key, value);
} else {
elem.setAttribute(key, value === true ? "" : value);
}
} else {
elem.setAttribute(key, value === true ? "" : value);
} }
return val;
}; };
var Tag2 = (tag, props = {}, children = []) => { var Tag2 = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || props && typeof props !== "object") { if (props instanceof Node || isArr(props) || !isObj(props)) {
children = props; children = props;
props = {}; props = {};
} }
@@ -318,71 +312,75 @@
return result2; return result2;
}); });
effect(); effect();
ctx._mounts = effect._mounts || [];
ctx._cleanups = effect._cleanups || new Set;
const result = effect._result; const result = effect._result;
const attach = (node) => {
if (node && typeof node === "object" && !node._isRuntime) {
node._mounts = ctx._mounts;
node._cleanups = ctx._cleanups;
node._ownerEffect = effect;
}
};
isArr(result) ? result.forEach(attach) : attach(result);
if (result == null) if (result == null)
return null; return null;
if (result instanceof Node || isArr(result) && result.every((n) => n instanceof Node)) const node = result instanceof Node || isArr(result) && result.every((n) => n instanceof Node) ? result : doc.createTextNode(String(result));
return result; const attach = (n) => {
return doc.createTextNode(String(result)); if (isObj(n) && !n._isRuntime) {
n._mounts = effect._mounts || [];
n._cleanups = effect._cleanups || new Set;
n._ownerEffect = effect;
} }
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use|image|ellipse|foreignObject|linearGradient|radialGradient|stop|pattern|mask|clipPath|filter|feColorMatrix|feBlend|feGaussianBlur|animate|animateTransform|set|metadata|desc|title|symbol|marker|view)$/i.test(tag); };
const elem = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag); isArr(node) ? node.forEach(attach) : attach(node);
elem._cleanups = new Set; return node;
for (let key in props) { }
if (!props.hasOwnProperty(key)) const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag);
const el = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag);
el._cleanups = new Set;
for (let k in props) {
if (!props.hasOwnProperty(k))
continue; continue;
let value = props[key]; let v = props[k];
if (key === "ref") { if (k === "ref") {
isFunc(value) ? value(elem) : value.current = elem; isFunc(v) ? v(el) : v.current = el;
continue; continue;
} }
if (key.startsWith("on")) { if (k.startsWith("on")) {
const event = key.slice(2).toLowerCase(); const ev = k.slice(2).toLowerCase();
elem.addEventListener(event, value); el.addEventListener(ev, v);
const off = () => elem.removeEventListener(event, value); const off = () => el.removeEventListener(ev, v);
elem._cleanups.add(off); el._cleanups.add(off);
onUnmount(off); onUnmount(off);
} else if (isFunc(value)) { } else if (isFunc(v)) {
const effect = createEffect(() => { const effect = createEffect(() => {
let val = value(); const val = validateAttr(k, v());
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) if (k === "class")
val = "#"; el.className = val || "";
applyProp(elem, key, val, isSVG); else if (val == null)
el.removeAttribute(k);
else if (k in el && !isSVG)
el[k] = val;
else
el.setAttribute(k, val === true ? "" : val);
}); });
effect(); effect();
elem._cleanups.add(() => dispose(effect)); el._cleanups.add(() => dispose(effect));
onUnmount(() => dispose(effect)); onUnmount(() => dispose(effect));
if (/^(INPUT|TEXTAREA|SELECT)$/.test(elem.tagName) && (key === "value" || key === "checked")) { if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) {
const eventType = key === "checked" ? "change" : "input"; const evType = k === "checked" ? "change" : "input";
elem.addEventListener(eventType, (ev) => value(ev.target[key])); el.addEventListener(evType, (ev) => v(ev.target[k]));
} }
} else { } else {
let val = value; const val = validateAttr(k, v);
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) if (val != null) {
val = "#"; if (k in el && !isSVG)
if (val != null) el[k] = val;
applyProp(elem, key, val, isSVG); else
el.setAttribute(k, val === true ? "" : val);
} }
} }
const mountChild = (child) => { }
if (isArr(child)) const append = (c) => {
return child.forEach(mountChild); if (isArr(c))
if (isFunc(child)) { return c.forEach(append);
if (isFunc(c)) {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("");
elem.appendChild(anchor); el.appendChild(anchor);
let currentNodes = []; let currentNodes = [];
const effect = createEffect(() => { const effect = createEffect(() => {
const res = child(); const res = c();
const next = (isArr(res) ? res : [res]).map(ensureNode); const next = (isArr(res) ? res : [res]).map(ensureNode);
currentNodes.forEach((n) => { currentNodes.forEach((n) => {
if (n._isRuntime) if (n._isRuntime)
@@ -404,55 +402,46 @@
currentNodes = next; currentNodes = next;
}); });
effect(); effect();
elem._cleanups.add(() => dispose(effect)); el._cleanups.add(() => dispose(effect));
onUnmount(() => dispose(effect)); onUnmount(() => dispose(effect));
} else { } else {
const node = ensureNode(child); const node = ensureNode(c);
elem.appendChild(node); el.appendChild(node);
if (node._mounts) if (node._mounts)
node._mounts.forEach((fn) => fn()); node._mounts.forEach((fn) => fn());
} }
}; };
mountChild(children); append(children);
return elem; return el;
}; };
var createView = (renderFn) => { var Render = (renderFn) => {
const cleanups = new Set; const cleanups = new Set;
const mounts = []; const mounts = [];
const previousOwner = activeOwner; const previousOwner = activeOwner;
activeOwner = { _cleanups: cleanups, _mounts: mounts }; const previousEffect = activeEffect;
const result = renderFn({ onCleanup: (fn) => cleanups.add(fn) });
activeOwner = previousOwner;
if (result == null)
return null;
if (result instanceof Node) {
mounts.forEach((fn) => fn());
return {
_isRuntime: true,
container: result,
destroy: () => {
cleanups.forEach((fn) => fn());
cleanupNode(result);
result.remove();
}
};
}
const container = doc.createElement("div"); const container = doc.createElement("div");
container.style.display = "contents"; container.style.display = "contents";
container.setAttribute("role", "presentation"); container.setAttribute("role", "presentation");
const process = (node) => { activeOwner = { _cleanups: cleanups, _mounts: mounts };
if (!node) activeEffect = null;
const processResult = (result) => {
if (!result)
return; return;
if (node._isRuntime) { if (result._isRuntime) {
cleanups.add(node.destroy); cleanups.add(result.destroy);
container.appendChild(node.container); container.appendChild(result.container);
} else if (isArr(node)) { } else if (isArr(result)) {
node.forEach(process); result.forEach(processResult);
} else { } else {
container.appendChild(node instanceof Node ? node : doc.createTextNode(String(node))); container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result)));
} }
}; };
process(result); try {
processResult(renderFn({ onCleanup: (fn) => cleanups.add(fn) }));
} finally {
activeOwner = previousOwner;
activeEffect = previousEffect;
}
mounts.forEach((fn) => fn()); mounts.forEach((fn) => fn());
return { return {
_isRuntime: true, _isRuntime: true,
@@ -494,7 +483,7 @@
} }
const content = show ? ifYes : ifNot; const content = show ? ifYes : ifNot;
if (content) { if (content) {
currentView = createView(() => isFunc(content) ? content() : content); currentView = Render(() => isFunc(content) ? content() : content);
root.insertBefore(currentView.container, anchor); root.insertBefore(currentView.container, anchor);
if (trans?.in) if (trans?.in)
trans.in(currentView.container); trans.in(currentView.container);
@@ -515,7 +504,7 @@
const key = keyFn ? keyFn(item, i) : item?.id ?? i; const key = keyFn ? keyFn(item, i) : item?.id ?? i;
let view = cache.get(key); let view = cache.get(key);
if (!view) if (!view)
view = createView(() => itemFn(item, i)); view = Render(() => itemFn(item, i));
else else
cache.delete(key); cache.delete(key);
nextCache.set(key, view); nextCache.set(key, view);
@@ -540,14 +529,14 @@
const handler = () => path(getHash()); const handler = () => path(getHash());
window.addEventListener("hashchange", handler); window.addEventListener("hashchange", handler);
onUnmount(() => window.removeEventListener("hashchange", handler)); onUnmount(() => window.removeEventListener("hashchange", handler));
const outlet = Tag2("div", { class: "router-outlet" }); const hook = Tag2("div", { class: "router-hook" });
let currentView = null; let currentView = null;
Watch2([path], () => { Watch2([path], () => {
const cur = path(); const cur = path();
const route = routes.find((r) => { const route = routes.find((r) => {
const rParts = r.path.split("/").filter(Boolean); const p1 = r.path.split("/").filter(Boolean);
const curParts = cur.split("/").filter(Boolean); const p2 = cur.split("/").filter(Boolean);
return rParts.length === curParts.length && rParts.every((p, i) => p[0] === ":" || p === curParts[i]); return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i]);
}) || routes.find((r) => r.path === "*"); }) || routes.find((r) => r.path === "*");
if (route) { if (route) {
currentView?.destroy(); currentView?.destroy();
@@ -557,14 +546,14 @@
params[p.slice(1)] = cur.split("/").filter(Boolean)[i]; params[p.slice(1)] = cur.split("/").filter(Boolean)[i];
}); });
Router.params(params); Router.params(params);
currentView = createView(() => isFunc(route.component) ? route.component(params) : route.component); currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component);
outlet.replaceChildren(currentView.container); hook.replaceChildren(currentView.container);
} }
}); });
return outlet; return hook;
}; };
Router.params = $2({}); Router.params = $2({});
Router.to = (path) => window.location.hash = path.replace(/^#?\/?/, "#/"); Router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
Router.back = () => window.history.back(); Router.back = () => window.history.back();
Router.path = () => window.location.hash.replace(/^#/, "") || "/"; Router.path = () => window.location.hash.replace(/^#/, "") || "/";
var Mount2 = (comp, target) => { var Mount2 = (comp, target) => {
@@ -573,24 +562,12 @@
return; return;
if (MOUNTED_NODES.has(t)) if (MOUNTED_NODES.has(t))
MOUNTED_NODES.get(t).destroy(); MOUNTED_NODES.get(t).destroy();
const inst = createView(() => isFunc(comp) ? comp() : comp); const inst = Render(isFunc(comp) ? comp : () => comp);
t.replaceChildren(inst.container); t.replaceChildren(inst.container);
MOUNTED_NODES.set(t, inst); MOUNTED_NODES.set(t, inst);
return inst; return inst;
}; };
var set = (signal, path, value) => { var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, set });
if (value === undefined) {
signal(isFunc(path) ? path(signal()) : path);
} else {
const keys = path.split(".");
const last = keys.pop();
const current = signal();
const obj = keys.reduce((o, k) => ({ ...o, [k]: { ...o[k] } }), { ...current });
obj[last] = value;
signal(obj);
}
};
var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, set });
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.assign(window, SigPro); Object.assign(window, SigPro);
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c)); "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));
@@ -645,11 +622,11 @@
__export(exports_utils, { __export(exports_utils, {
val: () => val, val: () => val,
ui: () => ui, ui: () => ui,
getIcon: () => getIcon2 getIcon: () => getIcon
}); });
var val = (t) => typeof t === "function" ? t() : t; var val = (t) => typeof t === "function" ? t() : t;
var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim(); var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim();
var getIcon2 = (icon) => { var getIcon = (icon) => {
if (!icon) if (!icon)
return null; return null;
if (typeof icon === "function") { if (typeof icon === "function") {
@@ -710,7 +687,7 @@
role: "alert", role: "alert",
class: ui("alert", allClasses) class: ui("alert", allClasses)
}, () => [ }, () => [
getIcon2(iconMap[type]), getIcon(iconMap[type]),
Tag("div", { class: "flex-1" }, [ Tag("div", { class: "flex-1" }, [
Tag("span", {}, [typeof content === "function" ? content() : content]) Tag("span", {}, [typeof content === "function" ? content() : content])
]), ]),
@@ -779,8 +756,8 @@
tel: "icon-[lucide--phone]", tel: "icon-[lucide--phone]",
url: "icon-[lucide--link]" url: "icon-[lucide--link]"
}; };
const leftIcon = icon ? getIcon2(icon) : iconMap[type] ? getIcon2(iconMap[type]) : null; const leftIcon = icon ? getIcon(icon) : iconMap[type] ? getIcon(iconMap[type]) : null;
const getPasswordIcon = () => getIcon2(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]"); const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]");
const paddingLeft = leftIcon ? "pl-10" : ""; const paddingLeft = leftIcon ? "pl-10" : "";
const paddingRight = isPassword ? "pr-10" : ""; const paddingRight = isPassword ? "pr-10" : "";
const buttonSize = () => { const buttonSize = () => {
@@ -937,7 +914,7 @@
}); });
var Button = (props, children) => { var Button = (props, children) => {
const { class: className, loading, icon, ...rest } = props; const { class: className, loading, icon, ...rest } = props;
const iconEl = getIcon2(icon); const iconEl = getIcon(icon);
return Tag("button", { return Tag("button", {
...rest, ...rest,
class: ui("btn", className), class: ui("btn", className),
@@ -1133,7 +1110,7 @@
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue, value: displayValue,
readonly: true, readonly: true,
icon: getIcon2("icon-[lucide--calendar]"), icon: getIcon("icon-[lucide--calendar]"),
onclick: (e) => { onclick: (e) => {
e.stopPropagation(); e.stopPropagation();
isOpen(!isOpen()); isOpen(!isOpen());
@@ -1146,15 +1123,15 @@
}, [ }, [
Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
Tag("div", { class: "flex gap-0.5" }, [ Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon2("icon-[lucide--chevrons-left]")), Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon2("icon-[lucide--chevron-left]")) Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
]), ]),
Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [ Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }) () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
]), ]),
Tag("div", { class: "flex gap-0.5" }, [ Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon2("icon-[lucide--chevron-right]")), Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon2("icon-[lucide--chevrons-right]")) Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
]) ])
]), ]),
Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [ Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
@@ -1362,7 +1339,7 @@
role: "button", role: "button",
class: "btn btn-lg btn-circle btn-primary shadow-2xl" class: "btn btn-lg btn-circle btn-primary shadow-2xl"
}, [ }, [
icon ? getIcon2(icon) : null, icon ? getIcon(icon) : null,
!icon && label ? label : null !icon && label ? label : null
]), ]),
...val(actions).map((act) => Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [ ...val(actions).map((act) => Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
@@ -1374,7 +1351,7 @@
e.stopPropagation(); e.stopPropagation();
act.onclick?.(e); act.onclick?.(e);
} }
}, [act.icon ? getIcon2(act.icon) : act.text || ""]) }, [act.icon ? getIcon(act.icon) : act.text || ""])
])) ]))
]); ]);
}; };
@@ -1449,7 +1426,7 @@
} }
}, [ }, [
Tag("div", { class: "flex items-center gap-3 w-full" }, [ Tag("div", { class: "flex items-center gap-3 w-full" }, [
getIcon2("icon-[lucide--upload]"), getIcon("icon-[lucide--upload]"),
Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."), Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`) Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
]), ]),
@@ -1478,7 +1455,7 @@
e.stopPropagation(); e.stopPropagation();
removeFile(index); removeFile(index);
} }
}, [getIcon2("icon-[lucide--x]")]) }, [getIcon("icon-[lucide--x]")])
]), (file) => file.name + file.lastModified) ]), (file) => file.name + file.lastModified)
])) ]))
]); ]);
@@ -1826,10 +1803,10 @@
Tabs: () => Tabs Tabs: () => Tabs
}); });
var Tabs = (props) => { var Tabs = (props) => {
const { items, class: className, ...rest } = props; const { items, class: className, onTabClose, ...rest } = props;
const itemsSignal = typeof items === "function" ? items : () => items || []; const itemsSignal = typeof items === "function" ? items : () => items || [];
const activeIndex = $(0); const activeIndex = $2(0);
Watch(() => { Watch2(() => {
const list = itemsSignal(); const list = itemsSignal();
const idx = list.findIndex((it) => val(it.active) === true); const idx = list.findIndex((it) => val(it.active) === true);
if (idx !== -1 && activeIndex() !== idx) { if (idx !== -1 && activeIndex() !== idx) {
@@ -1838,7 +1815,9 @@
}); });
const removeTab = (indexToRemove, item) => { const removeTab = (indexToRemove, item) => {
if (item.onClose) if (item.onClose)
item.onClose(); item.onClose(item);
if (onTabClose)
onTabClose(item, indexToRemove);
const currentItems = itemsSignal(); const currentItems = itemsSignal();
const newItems = currentItems.filter((_, idx) => idx !== indexToRemove); const newItems = currentItems.filter((_, idx) => idx !== indexToRemove);
const isWritableSignal = typeof items === "function" && !items._isComputed; const isWritableSignal = typeof items === "function" && !items._isComputed;
@@ -1856,7 +1835,7 @@
newActive = Math.min(newActive, newItems.length - 1); newActive = Math.min(newActive, newItems.length - 1);
activeIndex(newActive); activeIndex(newActive);
}; };
return Tag("div", { ...rest, class: ui("tabs", className) }, () => { return Tag2("div", { ...rest, class: ui("tabs", className) }, () => {
const list = itemsSignal(); const list = itemsSignal();
const elements = []; const elements = [];
for (let i = 0;i < list.length; i++) { for (let i = 0;i < list.length; i++) {
@@ -1871,16 +1850,13 @@
e.stopPropagation(); e.stopPropagation();
removeTab(i, item); removeTab(i, item);
}; };
const wrapper = Tag("span", { class: "flex items-center" }, [labelNode, closeIcon]); const wrapper = Tag2("span", { class: "flex items-center" }, [labelNode, closeIcon]);
buttonChildren.push(wrapper); buttonChildren.push(wrapper);
} else { } else {
buttonChildren.push(labelNode); buttonChildren.push(labelNode);
} }
const button = Tag("button", { const buttonBase = Tag2("button", {
class: () => { class: () => ui("tab", activeIndex() === i ? "tab-active" : ""),
const isActive = activeIndex() === i;
return ui("tab", isActive ? "tab-active" : "");
},
onclick: (e) => { onclick: (e) => {
e.preventDefault(); e.preventDefault();
if (!val(item.disabled)) { if (!val(item.disabled)) {
@@ -1888,9 +1864,9 @@
item.onclick(); item.onclick();
activeIndex(i); activeIndex(i);
} }
}, }
title: item.tip || ""
}, buttonChildren); }, buttonChildren);
const button = item.tip ? Tag2("div", { class: "tooltip", "data-tip": item.tip }, buttonBase) : buttonBase;
elements.push(button); elements.push(button);
let contentNode; let contentNode;
const rawContent = val(item.content); const rawContent = val(item.content);
@@ -1901,8 +1877,8 @@
} else { } else {
contentNode = document.createTextNode(String(rawContent)); contentNode = document.createTextNode(String(rawContent));
} }
const inner = Tag("div", { class: "tab-content-inner" }, contentNode); const inner = Tag2("div", { class: "tab-content-inner" }, contentNode);
const panel = Tag("div", { const panel = Tag2("div", {
class: "tab-content bg-base-100 border-base-300 p-6", class: "tab-content bg-base-100 border-base-300 p-6",
style: () => activeIndex() === i ? "display: block" : "display: none" style: () => activeIndex() === i ? "display: block" : "display: none"
}, inner); }, inner);
@@ -1941,7 +1917,7 @@
!isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null, !isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null,
Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]), Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]),
Tag("div", { class: "timeline-middle" }, [ Tag("div", { class: "timeline-middle" }, [
() => item.icon ? getIcon2(item.icon) : getIcon2(iconMap[itemType] || iconMap.success) () => item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
]), ]),
Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]), Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]),
!isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null !isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null
@@ -1984,7 +1960,7 @@
} }
}; };
const ToastComponent = () => { const ToastComponent = () => {
const closeIcon = getIcon2("icon-[lucide--x]"); const closeIcon = getIcon("icon-[lucide--x]");
const el = Tag("div", { const el = Tag("div", {
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto` class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
}, [ }, [

8
dist/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
docs/components/tabs.md
View File

@@ -427,8 +427,8 @@ let nextTabId = 4;
const ClosableTabsDemo = () => { const ClosableTabsDemo = () => {
const tabs = $([ const tabs = $([
{ label: 'Tab 1', content: Div('Content 1') }, // ❌ quita active: true { label: 'Tab 1', tip:"Tab1" , content: Div('Content 1') }, // ❌ quita active: true
{ label: 'Tab 2', content: Div('Content 2'), closable: true }, { label: 'Tab 2', tip: "Tab 2 Default", content: Div('Content 2'), closable: true },
{ label: 'Tab 3', content: Div('Content 3'), closable: true } { label: 'Tab 3', content: Div('Content 3'), closable: true }
]); ]);
@@ -441,13 +441,14 @@ const ClosableTabsDemo = () => {
tabs([...tabs(), { tabs([...tabs(), {
label: `Tab ${newId}`, label: `Tab ${newId}`,
content: Div(`Content ${newId}`), content: Div(`Content ${newId}`),
onClose: (item) => console.log('Closing Individual', item),
closable: true closable: true
}]); }]);
}; };
return Div({ class: 'flex flex-col gap-4' }, [ return Div({ class: 'flex flex-col gap-4' }, [
Button({ class: 'btn btn-sm btn-outline mb-2', onclick: addTab }, 'Add Tab'), Button({ class: 'btn btn-sm btn-outline mb-2', onclick: addTab }, 'Add Tab'),
Tabs({ items: tabs }) Tabs({ items: tabs, onTabClose: (item) => console.log('Closing', item) })
]); ]);
}; };

416
docs/sigpro-ui.min.js vendored
View File

@@ -33,7 +33,7 @@
val: () => val, val: () => val,
ui: () => ui, ui: () => ui,
tt: () => tt, tt: () => tt,
getIcon: () => getIcon2, getIcon: () => getIcon,
Watch: () => Watch2, Watch: () => Watch2,
Tooltip: () => Tooltip, Tooltip: () => Tooltip,
Toast: () => Toast, Toast: () => Toast,
@@ -76,62 +76,81 @@
}); });
// src/sigpro.js // src/sigpro.js
var isFunc = (fn) => typeof fn === "function"; var isFunc = (f) => typeof f === "function";
var isObj = (o) => o && typeof o === "object";
var isArr = Array.isArray; var isArr = Array.isArray;
var doc = typeof document !== "undefined" ? document : null; var doc = typeof document !== "undefined" ? document : null;
var ensureNode = (node) => node?._isRuntime ? node.container : node instanceof Node ? node : doc.createTextNode(node == null ? "" : String(node)); var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n));
var activeEffect = null; var activeEffect = null;
var activeOwner = null; var activeOwner = null;
var isFlushing = false; var isFlushing = false;
var effectQueue = new Set; var effectQueue = new Set;
var MOUNTED_NODES = new WeakMap; var MOUNTED_NODES = new WeakMap;
var dispose = (effect) => { var dispose = (eff) => {
if (!effect || effect._disposed) if (!eff || eff._disposed)
return; return;
effect._disposed = true; eff._disposed = true;
const stack = [effect]; const stack = [eff];
while (stack.length) { while (stack.length) {
const eff = stack.pop(); const e = stack.pop();
if (eff._cleanups) { if (e._cleanups) {
eff._cleanups.forEach((fn) => fn()); e._cleanups.forEach((fn) => fn());
eff._cleanups.clear(); e._cleanups.clear();
} }
if (eff._children) { if (e._children) {
eff._children.forEach((child) => stack.push(child)); e._children.forEach((child) => stack.push(child));
eff._children.clear(); e._children.clear();
} }
if (eff._deps) { if (e._deps) {
eff._deps.forEach((depSet) => depSet.delete(eff)); e._deps.forEach((depSet) => depSet.delete(e));
eff._deps.clear(); e._deps.clear();
} }
} }
}; };
var onMount = (fn) => {
if (activeOwner)
(activeOwner._mounts ||= []).push(fn);
};
var onUnmount = (fn) => { var onUnmount = (fn) => {
if (activeOwner) if (activeOwner)
(activeOwner._cleanups ||= new Set).add(fn); (activeOwner._cleanups ||= new Set).add(fn);
}; };
var onMount = (fn) => { var set = (signal, path, value) => {
if (activeOwner) if (value === undefined)
(activeOwner._mounts ||= []).push(fn); return signal(isFunc(path) ? path(signal()) : path);
const keys = path.split("."), root = { ...signal() };
let acc = root, k;
for (k of keys.slice(0, -1))
acc = acc[k] = { ...acc[k] || {} };
acc[keys.at(-1)] = value;
signal(root);
};
var untrack = (fn) => {
const p = activeEffect;
activeEffect = null;
try {
return fn();
} finally {
activeEffect = p;
}
}; };
var createEffect = (fn, isComputed = false) => { var createEffect = (fn, isComputed = false) => {
const effect = () => { const effect = () => {
if (effect._disposed) if (effect._disposed)
return; return;
if (effect._deps) if (effect._deps)
effect._deps.forEach((depSet) => depSet.delete(effect)); effect._deps.forEach((s) => s.delete(effect));
if (effect._cleanups) { if (effect._cleanups) {
effect._cleanups.forEach((cleanup) => cleanup()); effect._cleanups.forEach((c) => c());
effect._cleanups.clear(); effect._cleanups.clear();
} }
const prevEffect = activeEffect; const prevEffect = activeEffect;
const prevOwner = activeOwner; const prevOwner = activeOwner;
activeEffect = activeOwner = effect; activeEffect = activeOwner = effect;
try { try {
const res = isComputed ? fn() : (fn(), undefined); return effect._result = fn();
if (!isComputed) } catch (e) {
effect._result = res; console.error("[SigPro]", e);
return res;
} finally { } finally {
activeEffect = prevEffect; activeEffect = prevEffect;
activeOwner = prevOwner; activeOwner = prevOwner;
@@ -153,9 +172,9 @@
isFlushing = true; isFlushing = true;
const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth); const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth);
effectQueue.clear(); effectQueue.clear();
for (const eff of sorted) for (const e of sorted)
if (!eff._disposed) if (!e._disposed)
eff(); e();
isFlushing = false; isFlushing = false;
}; };
var trackUpdate = (subs, trigger = false) => { var trackUpdate = (subs, trigger = false) => {
@@ -164,15 +183,15 @@
(activeEffect._deps ||= new Set).add(subs); (activeEffect._deps ||= new Set).add(subs);
} else if (trigger) { } else if (trigger) {
let hasQueue = false; let hasQueue = false;
subs.forEach((eff) => { subs.forEach((e) => {
if (eff === activeEffect || eff._disposed) if (e === activeEffect || e._disposed)
return; return;
if (eff._isComputed) { if (e._isComputed) {
eff._dirty = true; e._dirty = true;
if (eff._subs) if (e._subs)
trackUpdate(eff._subs, true); trackUpdate(e._subs, true);
} else { } else {
effectQueue.add(eff); effectQueue.add(e);
hasQueue = true; hasQueue = true;
} }
}); });
@@ -180,25 +199,16 @@
queueMicrotask(flush); queueMicrotask(flush);
} }
}; };
var untrack = (fn) => { var $2 = (val, key = null) => {
const prev = activeEffect;
activeEffect = null;
try {
return fn();
} finally {
activeEffect = prev;
}
};
var $2 = (initialValue, storageKey = null) => {
const subs = new Set; const subs = new Set;
if (isFunc(initialValue)) { if (isFunc(val)) {
let cache, dirty = true; let cache, dirty = true;
const computed = () => { const computed = () => {
if (dirty) { if (dirty) {
const prev = activeEffect; const prev = activeEffect;
activeEffect = computed; activeEffect = computed;
try { try {
const next = initialValue(); const next = val();
if (!Object.is(cache, next)) { if (!Object.is(cache, next)) {
cache = next; cache = next;
dirty = false; dirty = false;
@@ -231,33 +241,33 @@
onUnmount(computed.stop); onUnmount(computed.stop);
return computed; return computed;
} }
if (storageKey) if (key)
try { try {
initialValue = JSON.parse(localStorage.getItem(storageKey)) ?? initialValue; val = JSON.parse(localStorage.getItem(key)) ?? val;
} catch (e) {} } catch (e) {}
return (...args) => { return (...args) => {
if (args.length) { if (args.length) {
const next = isFunc(args[0]) ? args[0](initialValue) : args[0]; const next = isFunc(args[0]) ? args[0](val) : args[0];
if (!Object.is(initialValue, next)) { if (!Object.is(val, next)) {
initialValue = next; val = next;
if (storageKey) if (key)
localStorage.setItem(storageKey, JSON.stringify(initialValue)); localStorage.setItem(key, JSON.stringify(val));
trackUpdate(subs, true); trackUpdate(subs, true);
} }
} }
trackUpdate(subs); trackUpdate(subs);
return initialValue; return val;
}; };
}; };
var Watch2 = (sources, callback) => { var Watch2 = (sources, cb) => {
if (callback === undefined) { if (cb === undefined) {
const effect2 = createEffect(sources); const effect2 = createEffect(sources);
effect2(); effect2();
return () => dispose(effect2); return () => dispose(effect2);
} }
const effect = createEffect(() => { const effect = createEffect(() => {
const vals = isArr(sources) ? sources.map((src) => src()) : sources(); const vals = Array.isArray(sources) ? sources.map((s) => s()) : sources();
untrack(() => callback(vals)); untrack(() => cb(vals));
}); });
effect(); effect();
return () => dispose(effect); return () => dispose(effect);
@@ -274,36 +284,20 @@
}; };
var DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i; var DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i;
var isDangerousAttr = (key) => key === "src" || key === "href" || key.startsWith("on"); var isDangerousAttr = (key) => key === "src" || key === "href" || key.startsWith("on");
var applyProp = (elem, key, value, isSVG) => { var validateAttr = (key, val) => {
if (value == null || value === false) { if (val == null || val === false)
if (key === "class" || key === "className") return null;
elem.className = ""; if (isDangerousAttr(key)) {
else if (key in elem && !isSVG) const sVal = String(val);
elem[key] = ""; if (DANGEROUS_PROTOCOL.test(sVal)) {
else console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`);
elem.removeAttribute(key); return "#";
return;
} }
if (key === "class" || key === "className") {
elem.className = value;
} else if (key === "style" && typeof value === "object") {
Object.assign(elem.style, value);
} else if (key in elem && !isSVG) {
elem[key] = value;
} else if (isSVG) {
if (key.startsWith("xlink:")) {
elem.setAttributeNS("http://www.w3.org/1999/xlink", key, value);
} else if (key === "xmlns" || key.startsWith("xmlns:")) {
elem.setAttributeNS("http://www.w3.org/2000/xmlns/", key, value);
} else {
elem.setAttribute(key, value === true ? "" : value);
}
} else {
elem.setAttribute(key, value === true ? "" : value);
} }
return val;
}; };
var Tag2 = (tag, props = {}, children = []) => { var Tag2 = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || props && typeof props !== "object") { if (props instanceof Node || isArr(props) || !isObj(props)) {
children = props; children = props;
props = {}; props = {};
} }
@@ -318,71 +312,75 @@
return result2; return result2;
}); });
effect(); effect();
ctx._mounts = effect._mounts || [];
ctx._cleanups = effect._cleanups || new Set;
const result = effect._result; const result = effect._result;
const attach = (node) => {
if (node && typeof node === "object" && !node._isRuntime) {
node._mounts = ctx._mounts;
node._cleanups = ctx._cleanups;
node._ownerEffect = effect;
}
};
isArr(result) ? result.forEach(attach) : attach(result);
if (result == null) if (result == null)
return null; return null;
if (result instanceof Node || isArr(result) && result.every((n) => n instanceof Node)) const node = result instanceof Node || isArr(result) && result.every((n) => n instanceof Node) ? result : doc.createTextNode(String(result));
return result; const attach = (n) => {
return doc.createTextNode(String(result)); if (isObj(n) && !n._isRuntime) {
n._mounts = effect._mounts || [];
n._cleanups = effect._cleanups || new Set;
n._ownerEffect = effect;
} }
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use|image|ellipse|foreignObject|linearGradient|radialGradient|stop|pattern|mask|clipPath|filter|feColorMatrix|feBlend|feGaussianBlur|animate|animateTransform|set|metadata|desc|title|symbol|marker|view)$/i.test(tag); };
const elem = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag); isArr(node) ? node.forEach(attach) : attach(node);
elem._cleanups = new Set; return node;
for (let key in props) { }
if (!props.hasOwnProperty(key)) const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag);
const el = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag);
el._cleanups = new Set;
for (let k in props) {
if (!props.hasOwnProperty(k))
continue; continue;
let value = props[key]; let v = props[k];
if (key === "ref") { if (k === "ref") {
isFunc(value) ? value(elem) : value.current = elem; isFunc(v) ? v(el) : v.current = el;
continue; continue;
} }
if (key.startsWith("on")) { if (k.startsWith("on")) {
const event = key.slice(2).toLowerCase(); const ev = k.slice(2).toLowerCase();
elem.addEventListener(event, value); el.addEventListener(ev, v);
const off = () => elem.removeEventListener(event, value); const off = () => el.removeEventListener(ev, v);
elem._cleanups.add(off); el._cleanups.add(off);
onUnmount(off); onUnmount(off);
} else if (isFunc(value)) { } else if (isFunc(v)) {
const effect = createEffect(() => { const effect = createEffect(() => {
let val = value(); const val = validateAttr(k, v());
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) if (k === "class")
val = "#"; el.className = val || "";
applyProp(elem, key, val, isSVG); else if (val == null)
el.removeAttribute(k);
else if (k in el && !isSVG)
el[k] = val;
else
el.setAttribute(k, val === true ? "" : val);
}); });
effect(); effect();
elem._cleanups.add(() => dispose(effect)); el._cleanups.add(() => dispose(effect));
onUnmount(() => dispose(effect)); onUnmount(() => dispose(effect));
if (/^(INPUT|TEXTAREA|SELECT)$/.test(elem.tagName) && (key === "value" || key === "checked")) { if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) {
const eventType = key === "checked" ? "change" : "input"; const evType = k === "checked" ? "change" : "input";
elem.addEventListener(eventType, (ev) => value(ev.target[key])); el.addEventListener(evType, (ev) => v(ev.target[k]));
} }
} else { } else {
let val = value; const val = validateAttr(k, v);
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) if (val != null) {
val = "#"; if (k in el && !isSVG)
if (val != null) el[k] = val;
applyProp(elem, key, val, isSVG); else
el.setAttribute(k, val === true ? "" : val);
} }
} }
const mountChild = (child) => { }
if (isArr(child)) const append = (c) => {
return child.forEach(mountChild); if (isArr(c))
if (isFunc(child)) { return c.forEach(append);
if (isFunc(c)) {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("");
elem.appendChild(anchor); el.appendChild(anchor);
let currentNodes = []; let currentNodes = [];
const effect = createEffect(() => { const effect = createEffect(() => {
const res = child(); const res = c();
const next = (isArr(res) ? res : [res]).map(ensureNode); const next = (isArr(res) ? res : [res]).map(ensureNode);
currentNodes.forEach((n) => { currentNodes.forEach((n) => {
if (n._isRuntime) if (n._isRuntime)
@@ -404,55 +402,46 @@
currentNodes = next; currentNodes = next;
}); });
effect(); effect();
elem._cleanups.add(() => dispose(effect)); el._cleanups.add(() => dispose(effect));
onUnmount(() => dispose(effect)); onUnmount(() => dispose(effect));
} else { } else {
const node = ensureNode(child); const node = ensureNode(c);
elem.appendChild(node); el.appendChild(node);
if (node._mounts) if (node._mounts)
node._mounts.forEach((fn) => fn()); node._mounts.forEach((fn) => fn());
} }
}; };
mountChild(children); append(children);
return elem; return el;
}; };
var createView = (renderFn) => { var Render = (renderFn) => {
const cleanups = new Set; const cleanups = new Set;
const mounts = []; const mounts = [];
const previousOwner = activeOwner; const previousOwner = activeOwner;
activeOwner = { _cleanups: cleanups, _mounts: mounts }; const previousEffect = activeEffect;
const result = renderFn({ onCleanup: (fn) => cleanups.add(fn) });
activeOwner = previousOwner;
if (result == null)
return null;
if (result instanceof Node) {
mounts.forEach((fn) => fn());
return {
_isRuntime: true,
container: result,
destroy: () => {
cleanups.forEach((fn) => fn());
cleanupNode(result);
result.remove();
}
};
}
const container = doc.createElement("div"); const container = doc.createElement("div");
container.style.display = "contents"; container.style.display = "contents";
container.setAttribute("role", "presentation"); container.setAttribute("role", "presentation");
const process = (node) => { activeOwner = { _cleanups: cleanups, _mounts: mounts };
if (!node) activeEffect = null;
const processResult = (result) => {
if (!result)
return; return;
if (node._isRuntime) { if (result._isRuntime) {
cleanups.add(node.destroy); cleanups.add(result.destroy);
container.appendChild(node.container); container.appendChild(result.container);
} else if (isArr(node)) { } else if (isArr(result)) {
node.forEach(process); result.forEach(processResult);
} else { } else {
container.appendChild(node instanceof Node ? node : doc.createTextNode(String(node))); container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result)));
} }
}; };
process(result); try {
processResult(renderFn({ onCleanup: (fn) => cleanups.add(fn) }));
} finally {
activeOwner = previousOwner;
activeEffect = previousEffect;
}
mounts.forEach((fn) => fn()); mounts.forEach((fn) => fn());
return { return {
_isRuntime: true, _isRuntime: true,
@@ -494,7 +483,7 @@
} }
const content = show ? ifYes : ifNot; const content = show ? ifYes : ifNot;
if (content) { if (content) {
currentView = createView(() => isFunc(content) ? content() : content); currentView = Render(() => isFunc(content) ? content() : content);
root.insertBefore(currentView.container, anchor); root.insertBefore(currentView.container, anchor);
if (trans?.in) if (trans?.in)
trans.in(currentView.container); trans.in(currentView.container);
@@ -515,7 +504,7 @@
const key = keyFn ? keyFn(item, i) : item?.id ?? i; const key = keyFn ? keyFn(item, i) : item?.id ?? i;
let view = cache.get(key); let view = cache.get(key);
if (!view) if (!view)
view = createView(() => itemFn(item, i)); view = Render(() => itemFn(item, i));
else else
cache.delete(key); cache.delete(key);
nextCache.set(key, view); nextCache.set(key, view);
@@ -540,14 +529,14 @@
const handler = () => path(getHash()); const handler = () => path(getHash());
window.addEventListener("hashchange", handler); window.addEventListener("hashchange", handler);
onUnmount(() => window.removeEventListener("hashchange", handler)); onUnmount(() => window.removeEventListener("hashchange", handler));
const outlet = Tag2("div", { class: "router-outlet" }); const hook = Tag2("div", { class: "router-hook" });
let currentView = null; let currentView = null;
Watch2([path], () => { Watch2([path], () => {
const cur = path(); const cur = path();
const route = routes.find((r) => { const route = routes.find((r) => {
const rParts = r.path.split("/").filter(Boolean); const p1 = r.path.split("/").filter(Boolean);
const curParts = cur.split("/").filter(Boolean); const p2 = cur.split("/").filter(Boolean);
return rParts.length === curParts.length && rParts.every((p, i) => p[0] === ":" || p === curParts[i]); return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i]);
}) || routes.find((r) => r.path === "*"); }) || routes.find((r) => r.path === "*");
if (route) { if (route) {
currentView?.destroy(); currentView?.destroy();
@@ -557,14 +546,14 @@
params[p.slice(1)] = cur.split("/").filter(Boolean)[i]; params[p.slice(1)] = cur.split("/").filter(Boolean)[i];
}); });
Router.params(params); Router.params(params);
currentView = createView(() => isFunc(route.component) ? route.component(params) : route.component); currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component);
outlet.replaceChildren(currentView.container); hook.replaceChildren(currentView.container);
} }
}); });
return outlet; return hook;
}; };
Router.params = $2({}); Router.params = $2({});
Router.to = (path) => window.location.hash = path.replace(/^#?\/?/, "#/"); Router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
Router.back = () => window.history.back(); Router.back = () => window.history.back();
Router.path = () => window.location.hash.replace(/^#/, "") || "/"; Router.path = () => window.location.hash.replace(/^#/, "") || "/";
var Mount2 = (comp, target) => { var Mount2 = (comp, target) => {
@@ -573,24 +562,12 @@
return; return;
if (MOUNTED_NODES.has(t)) if (MOUNTED_NODES.has(t))
MOUNTED_NODES.get(t).destroy(); MOUNTED_NODES.get(t).destroy();
const inst = createView(() => isFunc(comp) ? comp() : comp); const inst = Render(isFunc(comp) ? comp : () => comp);
t.replaceChildren(inst.container); t.replaceChildren(inst.container);
MOUNTED_NODES.set(t, inst); MOUNTED_NODES.set(t, inst);
return inst; return inst;
}; };
var set = (signal, path, value) => { var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, set });
if (value === undefined) {
signal(isFunc(path) ? path(signal()) : path);
} else {
const keys = path.split(".");
const last = keys.pop();
const current = signal();
const obj = keys.reduce((o, k) => ({ ...o, [k]: { ...o[k] } }), { ...current });
obj[last] = value;
signal(obj);
}
};
var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, set });
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.assign(window, SigPro); Object.assign(window, SigPro);
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c)); "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));
@@ -645,11 +622,11 @@
__export(exports_utils, { __export(exports_utils, {
val: () => val, val: () => val,
ui: () => ui, ui: () => ui,
getIcon: () => getIcon2 getIcon: () => getIcon
}); });
var val = (t) => typeof t === "function" ? t() : t; var val = (t) => typeof t === "function" ? t() : t;
var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim(); var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim();
var getIcon2 = (icon) => { var getIcon = (icon) => {
if (!icon) if (!icon)
return null; return null;
if (typeof icon === "function") { if (typeof icon === "function") {
@@ -710,7 +687,7 @@
role: "alert", role: "alert",
class: ui("alert", allClasses) class: ui("alert", allClasses)
}, () => [ }, () => [
getIcon2(iconMap[type]), getIcon(iconMap[type]),
Tag("div", { class: "flex-1" }, [ Tag("div", { class: "flex-1" }, [
Tag("span", {}, [typeof content === "function" ? content() : content]) Tag("span", {}, [typeof content === "function" ? content() : content])
]), ]),
@@ -779,8 +756,8 @@
tel: "icon-[lucide--phone]", tel: "icon-[lucide--phone]",
url: "icon-[lucide--link]" url: "icon-[lucide--link]"
}; };
const leftIcon = icon ? getIcon2(icon) : iconMap[type] ? getIcon2(iconMap[type]) : null; const leftIcon = icon ? getIcon(icon) : iconMap[type] ? getIcon(iconMap[type]) : null;
const getPasswordIcon = () => getIcon2(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]"); const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]");
const paddingLeft = leftIcon ? "pl-10" : ""; const paddingLeft = leftIcon ? "pl-10" : "";
const paddingRight = isPassword ? "pr-10" : ""; const paddingRight = isPassword ? "pr-10" : "";
const buttonSize = () => { const buttonSize = () => {
@@ -937,7 +914,7 @@
}); });
var Button = (props, children) => { var Button = (props, children) => {
const { class: className, loading, icon, ...rest } = props; const { class: className, loading, icon, ...rest } = props;
const iconEl = getIcon2(icon); const iconEl = getIcon(icon);
return Tag("button", { return Tag("button", {
...rest, ...rest,
class: ui("btn", className), class: ui("btn", className),
@@ -1133,7 +1110,7 @@
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue, value: displayValue,
readonly: true, readonly: true,
icon: getIcon2("icon-[lucide--calendar]"), icon: getIcon("icon-[lucide--calendar]"),
onclick: (e) => { onclick: (e) => {
e.stopPropagation(); e.stopPropagation();
isOpen(!isOpen()); isOpen(!isOpen());
@@ -1146,15 +1123,15 @@
}, [ }, [
Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
Tag("div", { class: "flex gap-0.5" }, [ Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon2("icon-[lucide--chevrons-left]")), Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon2("icon-[lucide--chevron-left]")) Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
]), ]),
Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [ Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }) () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
]), ]),
Tag("div", { class: "flex gap-0.5" }, [ Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon2("icon-[lucide--chevron-right]")), Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon2("icon-[lucide--chevrons-right]")) Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
]) ])
]), ]),
Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [ Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
@@ -1362,7 +1339,7 @@
role: "button", role: "button",
class: "btn btn-lg btn-circle btn-primary shadow-2xl" class: "btn btn-lg btn-circle btn-primary shadow-2xl"
}, [ }, [
icon ? getIcon2(icon) : null, icon ? getIcon(icon) : null,
!icon && label ? label : null !icon && label ? label : null
]), ]),
...val(actions).map((act) => Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [ ...val(actions).map((act) => Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
@@ -1374,7 +1351,7 @@
e.stopPropagation(); e.stopPropagation();
act.onclick?.(e); act.onclick?.(e);
} }
}, [act.icon ? getIcon2(act.icon) : act.text || ""]) }, [act.icon ? getIcon(act.icon) : act.text || ""])
])) ]))
]); ]);
}; };
@@ -1449,7 +1426,7 @@
} }
}, [ }, [
Tag("div", { class: "flex items-center gap-3 w-full" }, [ Tag("div", { class: "flex items-center gap-3 w-full" }, [
getIcon2("icon-[lucide--upload]"), getIcon("icon-[lucide--upload]"),
Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."), Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`) Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
]), ]),
@@ -1478,7 +1455,7 @@
e.stopPropagation(); e.stopPropagation();
removeFile(index); removeFile(index);
} }
}, [getIcon2("icon-[lucide--x]")]) }, [getIcon("icon-[lucide--x]")])
]), (file) => file.name + file.lastModified) ]), (file) => file.name + file.lastModified)
])) ]))
]); ]);
@@ -1826,10 +1803,10 @@
Tabs: () => Tabs Tabs: () => Tabs
}); });
var Tabs = (props) => { var Tabs = (props) => {
const { items, class: className, ...rest } = props; const { items, class: className, onTabClose, ...rest } = props;
const itemsSignal = typeof items === "function" ? items : () => items || []; const itemsSignal = typeof items === "function" ? items : () => items || [];
const activeIndex = $(0); const activeIndex = $2(0);
Watch(() => { Watch2(() => {
const list = itemsSignal(); const list = itemsSignal();
const idx = list.findIndex((it) => val(it.active) === true); const idx = list.findIndex((it) => val(it.active) === true);
if (idx !== -1 && activeIndex() !== idx) { if (idx !== -1 && activeIndex() !== idx) {
@@ -1838,7 +1815,9 @@
}); });
const removeTab = (indexToRemove, item) => { const removeTab = (indexToRemove, item) => {
if (item.onClose) if (item.onClose)
item.onClose(); item.onClose(item);
if (onTabClose)
onTabClose(item, indexToRemove);
const currentItems = itemsSignal(); const currentItems = itemsSignal();
const newItems = currentItems.filter((_, idx) => idx !== indexToRemove); const newItems = currentItems.filter((_, idx) => idx !== indexToRemove);
const isWritableSignal = typeof items === "function" && !items._isComputed; const isWritableSignal = typeof items === "function" && !items._isComputed;
@@ -1856,7 +1835,7 @@
newActive = Math.min(newActive, newItems.length - 1); newActive = Math.min(newActive, newItems.length - 1);
activeIndex(newActive); activeIndex(newActive);
}; };
return Tag("div", { ...rest, class: ui("tabs", className) }, () => { return Tag2("div", { ...rest, class: ui("tabs", className) }, () => {
const list = itemsSignal(); const list = itemsSignal();
const elements = []; const elements = [];
for (let i = 0;i < list.length; i++) { for (let i = 0;i < list.length; i++) {
@@ -1871,16 +1850,13 @@
e.stopPropagation(); e.stopPropagation();
removeTab(i, item); removeTab(i, item);
}; };
const wrapper = Tag("span", { class: "flex items-center" }, [labelNode, closeIcon]); const wrapper = Tag2("span", { class: "flex items-center" }, [labelNode, closeIcon]);
buttonChildren.push(wrapper); buttonChildren.push(wrapper);
} else { } else {
buttonChildren.push(labelNode); buttonChildren.push(labelNode);
} }
const button = Tag("button", { const buttonBase = Tag2("button", {
class: () => { class: () => ui("tab", activeIndex() === i ? "tab-active" : ""),
const isActive = activeIndex() === i;
return ui("tab", isActive ? "tab-active" : "");
},
onclick: (e) => { onclick: (e) => {
e.preventDefault(); e.preventDefault();
if (!val(item.disabled)) { if (!val(item.disabled)) {
@@ -1888,9 +1864,9 @@
item.onclick(); item.onclick();
activeIndex(i); activeIndex(i);
} }
}, }
title: item.tip || ""
}, buttonChildren); }, buttonChildren);
const button = item.tip ? Tag2("div", { class: "tooltip", "data-tip": item.tip }, buttonBase) : buttonBase;
elements.push(button); elements.push(button);
let contentNode; let contentNode;
const rawContent = val(item.content); const rawContent = val(item.content);
@@ -1901,8 +1877,8 @@
} else { } else {
contentNode = document.createTextNode(String(rawContent)); contentNode = document.createTextNode(String(rawContent));
} }
const inner = Tag("div", { class: "tab-content-inner" }, contentNode); const inner = Tag2("div", { class: "tab-content-inner" }, contentNode);
const panel = Tag("div", { const panel = Tag2("div", {
class: "tab-content bg-base-100 border-base-300 p-6", class: "tab-content bg-base-100 border-base-300 p-6",
style: () => activeIndex() === i ? "display: block" : "display: none" style: () => activeIndex() === i ? "display: block" : "display: none"
}, inner); }, inner);
@@ -1941,7 +1917,7 @@
!isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null, !isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null,
Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]), Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]),
Tag("div", { class: "timeline-middle" }, [ Tag("div", { class: "timeline-middle" }, [
() => item.icon ? getIcon2(item.icon) : getIcon2(iconMap[itemType] || iconMap.success) () => item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
]), ]),
Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]), Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]),
!isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null !isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null
@@ -1984,7 +1960,7 @@
} }
}; };
const ToastComponent = () => { const ToastComponent = () => {
const closeIcon = getIcon2("icon-[lucide--x]"); const closeIcon = getIcon("icon-[lucide--x]");
const el = Tag("div", { const el = Tag("div", {
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto` class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
}, [ }, [

28
src/components/Tabs.js
View File

@@ -1,6 +1,6 @@
// components/Tabs.js // components/Tabs.js
// import { $, Tag, For } from "../sigpro.js"; import { $, Tag, Watch } from "../sigpro.js";
import { val, ui } from "../core/utils.js"; import { val, ui, getIcon } from "..//core/utils.js";
/** /**
* Tabs component * Tabs component
@@ -11,11 +11,10 @@ import { val, ui } from "../core/utils.js";
* - bg-base-100, border-base-300, p-6 * - bg-base-100, border-base-300, p-6
*/ */
export const Tabs = (props) => { export const Tabs = (props) => {
const { items, class: className, ...rest } = props; const { items, class: className, onTabClose, ...rest } = props;
const itemsSignal = typeof items === "function" ? items : () => items || []; const itemsSignal = typeof items === "function" ? items : () => items || [];
const activeIndex = $(0); const activeIndex = $(0);
// Sincroniza con active:true solo cuando cambia la lista de items
Watch(() => { Watch(() => {
const list = itemsSignal(); const list = itemsSignal();
const idx = list.findIndex(it => val(it.active) === true); const idx = list.findIndex(it => val(it.active) === true);
@@ -25,7 +24,9 @@ export const Tabs = (props) => {
}); });
const removeTab = (indexToRemove, item) => { const removeTab = (indexToRemove, item) => {
if (item.onClose) item.onClose(); if (item.onClose) item.onClose(item);
if (onTabClose) onTabClose(item, indexToRemove);
const currentItems = itemsSignal(); const currentItems = itemsSignal();
const newItems = currentItems.filter((_, idx) => idx !== indexToRemove); const newItems = currentItems.filter((_, idx) => idx !== indexToRemove);
const isWritableSignal = typeof items === "function" && !items._isComputed; const isWritableSignal = typeof items === "function" && !items._isComputed;
@@ -48,7 +49,6 @@ export const Tabs = (props) => {
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
const item = list[i]; const item = list[i];
// --- Botón ---
const label = val(item.label); const label = val(item.label);
const labelNode = label instanceof Node ? label : document.createTextNode(String(label)); const labelNode = label instanceof Node ? label : document.createTextNode(String(label));
const buttonChildren = []; const buttonChildren = [];
@@ -66,23 +66,23 @@ export const Tabs = (props) => {
buttonChildren.push(labelNode); buttonChildren.push(labelNode);
} }
const button = Tag("button", { const buttonBase = Tag("button", {
class: () => { class: () => ui("tab", activeIndex() === i ? "tab-active" : ""),
const isActive = activeIndex() === i;
return ui("tab", isActive ? "tab-active" : "");
},
onclick: (e) => { onclick: (e) => {
e.preventDefault(); e.preventDefault();
if (!val(item.disabled)) { if (!val(item.disabled)) {
if (item.onclick) item.onclick(); if (item.onclick) item.onclick();
activeIndex(i); activeIndex(i);
} }
}, }
title: item.tip || ""
}, buttonChildren); }, buttonChildren);
const button = item.tip
? Tag("div", { class: "tooltip", "data-tip": item.tip }, buttonBase)
: buttonBase;
elements.push(button); elements.push(button);
// --- Panel ---
let contentNode; let contentNode;
const rawContent = val(item.content); const rawContent = val(item.content);
if (typeof rawContent === "function") { if (typeof rawContent === "function") {

340
src/sigpro.js
View File

@@ -1,7 +1,9 @@
const isFunc = fn => typeof fn === "function" // sigpro 1.2.0
const isFunc = f => typeof f === "function"
const isObj = o => o && typeof o === "object"
const isArr = Array.isArray const isArr = Array.isArray
const doc = typeof document !== "undefined" ? document : null const doc = typeof document !== "undefined" ? document : null
const ensureNode = node => node?._isRuntime ? node.container : (node instanceof Node ? node : doc.createTextNode(node == null ? "" : String(node))) const ensureNode = n => n?._isRuntime ? n.container : (n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n)))
let activeEffect = null let activeEffect = null
let activeOwner = null let activeOwner = null
@@ -9,50 +11,68 @@ let isFlushing = false
const effectQueue = new Set() const effectQueue = new Set()
const MOUNTED_NODES = new WeakMap() const MOUNTED_NODES = new WeakMap()
const dispose = effect => { // effect cleanup
if (!effect || effect._disposed) return const dispose = eff => {
effect._disposed = true if (!eff || eff._disposed) return
const stack = [effect] eff._disposed = true
const stack = [eff]
while (stack.length) { while (stack.length) {
const eff = stack.pop() const e = stack.pop()
if (eff._cleanups) { if (e._cleanups) {
eff._cleanups.forEach(fn => fn()) e._cleanups.forEach(fn => fn())
eff._cleanups.clear() e._cleanups.clear()
} }
if (eff._children) { if (e._children) {
eff._children.forEach(child => stack.push(child)) e._children.forEach(child => stack.push(child))
eff._children.clear() e._children.clear()
} }
if (eff._deps) { if (e._deps) {
eff._deps.forEach(depSet => depSet.delete(eff)) e._deps.forEach(depSet => depSet.delete(e))
eff._deps.clear() e._deps.clear()
} }
} }
} }
// helpers
const onMount = fn => {
if (activeOwner) (activeOwner._mounts ||= []).push(fn)
}
const onUnmount = fn => { const onUnmount = fn => {
if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn) if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn)
} }
const onMount = fn => { const set = (signal, path, value) => {
if (activeOwner) (activeOwner._mounts ||= []).push(fn) if (value === undefined) return signal(isFunc(path) ? path(signal()) : path)
const keys = path.split('.'), root = { ...signal() }
let acc = root, k
for (k of keys.slice(0, -1)) acc = acc[k] = { ...(acc[k] || {}) }
acc[keys.at(-1)] = value
signal(root)
} }
const untrack = fn => {
const p = activeEffect
activeEffect = null
try { return fn() } finally { activeEffect = p }
}
// effect creation
const createEffect = (fn, isComputed = false) => { const createEffect = (fn, isComputed = false) => {
const effect = () => { const effect = () => {
if (effect._disposed) return if (effect._disposed) return
if (effect._deps) effect._deps.forEach(depSet => depSet.delete(effect)) if (effect._deps) effect._deps.forEach(s => s.delete(effect))
if (effect._cleanups) { if (effect._cleanups) {
effect._cleanups.forEach(cleanup => cleanup()) effect._cleanups.forEach(c => c())
effect._cleanups.clear() effect._cleanups.clear()
} }
const prevEffect = activeEffect const prevEffect = activeEffect
const prevOwner = activeOwner const prevOwner = activeOwner
activeEffect = activeOwner = effect activeEffect = activeOwner = effect
try { try {
const res = isComputed ? fn() : (fn(), undefined) return effect._result = fn()
if (!isComputed) effect._result = res } catch (e) {
return res console.error("[SigPro]", e)
} finally { } finally {
activeEffect = prevEffect activeEffect = prevEffect
activeOwner = prevOwner activeOwner = prevOwner
@@ -73,7 +93,7 @@ const flush = () => {
isFlushing = true isFlushing = true
const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth) const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth)
effectQueue.clear() effectQueue.clear()
for (const eff of sorted) if (!eff._disposed) eff() for (const e of sorted) if (!e._disposed) e()
isFlushing = false isFlushing = false
} }
@@ -83,13 +103,13 @@ const trackUpdate = (subs, trigger = false) => {
; (activeEffect._deps ||= new Set()).add(subs) ; (activeEffect._deps ||= new Set()).add(subs)
} else if (trigger) { } else if (trigger) {
let hasQueue = false let hasQueue = false
subs.forEach(eff => { subs.forEach(e => {
if (eff === activeEffect || eff._disposed) return if (e === activeEffect || e._disposed) return
if (eff._isComputed) { if (e._isComputed) {
eff._dirty = true e._dirty = true
if (eff._subs) trackUpdate(eff._subs, true) if (e._subs) trackUpdate(e._subs, true)
} else { } else {
effectQueue.add(eff) effectQueue.add(e)
hasQueue = true hasQueue = true
} }
}) })
@@ -97,22 +117,17 @@ const trackUpdate = (subs, trigger = false) => {
} }
} }
const untrack = fn => { // signal creation
const prev = activeEffect const $ = (val, key = null) => {
activeEffect = null
try { return fn() } finally { activeEffect = prev }
}
const $ = (initialValue, storageKey = null) => {
const subs = new Set() const subs = new Set()
if (isFunc(initialValue)) { if (isFunc(val)) {
let cache, dirty = true let cache, dirty = true
const computed = () => { const computed = () => {
if (dirty) { if (dirty) {
const prev = activeEffect const prev = activeEffect
activeEffect = computed activeEffect = computed
try { try {
const next = initialValue() const next = val()
if (!Object.is(cache, next)) { if (!Object.is(cache, next)) {
cache = next cache = next
dirty = false dirty = false
@@ -140,30 +155,31 @@ const $ = (initialValue, storageKey = null) => {
if (activeOwner) onUnmount(computed.stop) if (activeOwner) onUnmount(computed.stop)
return computed return computed
} }
if (storageKey) try { initialValue = JSON.parse(localStorage.getItem(storageKey)) ?? initialValue } catch (e) {} if (key) try { val = JSON.parse(localStorage.getItem(key)) ?? val } catch (e) { }
return (...args) => { return (...args) => {
if (args.length) { if (args.length) {
const next = isFunc(args[0]) ? args[0](initialValue) : args[0] const next = isFunc(args[0]) ? args[0](val) : args[0]
if (!Object.is(initialValue, next)) { if (!Object.is(val, next)) {
initialValue = next val = next
if (storageKey) localStorage.setItem(storageKey, JSON.stringify(initialValue)) if (key) localStorage.setItem(key, JSON.stringify(val))
trackUpdate(subs, true) trackUpdate(subs, true)
} }
} }
trackUpdate(subs) trackUpdate(subs)
return initialValue return val
} }
} }
const Watch = (sources, callback) => { // create Watch
if (callback === undefined) { const Watch = (sources, cb) => {
if (cb === undefined) {
const effect = createEffect(sources) const effect = createEffect(sources)
effect() effect()
return () => dispose(effect) return () => dispose(effect)
} }
const effect = createEffect(() => { const effect = createEffect(() => {
const vals = isArr(sources) ? sources.map(src => src()) : sources() const vals = Array.isArray(sources) ? sources.map(s => s()) : sources()
untrack(() => callback(vals)) untrack(() => cb(vals))
}) })
effect() effect()
return () => dispose(effect) return () => dispose(effect)
@@ -181,34 +197,21 @@ const cleanupNode = node => {
const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i
const isDangerousAttr = key => key === 'src' || key === 'href' || key.startsWith('on') const isDangerousAttr = key => key === 'src' || key === 'href' || key.startsWith('on')
const applyProp = (elem, key, value, isSVG) => { const validateAttr = (key, val) => {
if (value == null || value === false) { if (val == null || val === false) return null
if (key === 'class' || key === 'className') elem.className = '' if (isDangerousAttr(key)) {
else if (key in elem && !isSVG) elem[key] = '' const sVal = String(val)
else elem.removeAttribute(key) if (DANGEROUS_PROTOCOL.test(sVal)) {
return console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`)
return '#'
} }
if (key === 'class' || key === 'className') {
elem.className = value
} else if (key === 'style' && typeof value === 'object') {
Object.assign(elem.style, value)
} else if (key in elem && !isSVG) {
elem[key] = value
} else if (isSVG) {
if (key.startsWith('xlink:')) {
elem.setAttributeNS('http://www.w3.org/1999/xlink', key, value)
} else if (key === 'xmlns' || key.startsWith('xmlns:')) {
elem.setAttributeNS('http://www.w3.org/2000/xmlns/', key, value)
} else {
elem.setAttribute(key, value === true ? '' : value)
}
} else {
elem.setAttribute(key, value === true ? '' : value)
} }
return val
} }
// create Tag
const Tag = (tag, props = {}, children = []) => { const Tag = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || (props && typeof props !== 'object')) { if (props instanceof Node || isArr(props) || !isObj(props)) {
children = props children = props
props = {} props = {}
} }
@@ -223,67 +226,74 @@ const Tag = (tag, props = {}, children = []) => {
return result return result
}) })
effect() effect()
ctx._mounts = effect._mounts || []
ctx._cleanups = effect._cleanups || new Set()
const result = effect._result const result = effect._result
const attach = node => {
if (node && typeof node === 'object' && !node._isRuntime) {
node._mounts = ctx._mounts
node._cleanups = ctx._cleanups
node._ownerEffect = effect
}
}
isArr(result) ? result.forEach(attach) : attach(result)
if (result == null) return null if (result == null) return null
if (result instanceof Node || (isArr(result) && result.every(n => n instanceof Node))) return result
return doc.createTextNode(String(result)) const node = (result instanceof Node || (isArr(result) && result.every(n => n instanceof Node)))
? result
: doc.createTextNode(String(result))
const attach = n => {
if (isObj(n) && !n._isRuntime) {
n._mounts = effect._mounts || []
n._cleanups = effect._cleanups || new Set()
n._ownerEffect = effect
}
} }
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use|image|ellipse|foreignObject|linearGradient|radialGradient|stop|pattern|mask|clipPath|filter|feColorMatrix|feBlend|feGaussianBlur|animate|animateTransform|set|metadata|desc|title|symbol|marker|view)$/i.test(tag) isArr(node) ? node.forEach(attach) : attach(node)
const elem = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag) return node
elem._cleanups = new Set() }
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag)
const el = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag)
el._cleanups = new Set()
for (let key in props) { for (let k in props) {
if (!props.hasOwnProperty(key)) continue if (!props.hasOwnProperty(k)) continue
let value = props[key] let v = props[k]
if (key === "ref") { if (k === "ref") {
isFunc(value) ? value(elem) : (value.current = elem) isFunc(v) ? v(el) : (v.current = el)
continue continue
} }
if (key.startsWith("on")) { if (k.startsWith("on")) {
const event = key.slice(2).toLowerCase() const ev = k.slice(2).toLowerCase()
elem.addEventListener(event, value) el.addEventListener(ev, v)
const off = () => elem.removeEventListener(event, value) const off = () => el.removeEventListener(ev, v)
elem._cleanups.add(off) el._cleanups.add(off)
onUnmount(off) onUnmount(off)
} else if (isFunc(value)) { } else if (isFunc(v)) {
const effect = createEffect(() => { const effect = createEffect(() => {
let val = value() const val = validateAttr(k, v())
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) val = '#' if (k === "class") el.className = val || ""
applyProp(elem, key, val, isSVG) else if (val == null) el.removeAttribute(k)
else if (k in el && !isSVG) el[k] = val
else el.setAttribute(k, val === true ? "" : val)
}) })
effect() effect()
elem._cleanups.add(() => dispose(effect)) el._cleanups.add(() => dispose(effect))
onUnmount(() => dispose(effect)) onUnmount(() => dispose(effect))
if (/^(INPUT|TEXTAREA|SELECT)$/.test(elem.tagName) && (key === "value" || key === "checked")) { if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) {
const eventType = key === "checked" ? "change" : "input" const evType = k === "checked" ? "change" : "input"
elem.addEventListener(eventType, ev => value(ev.target[key])) el.addEventListener(evType, ev => v(ev.target[k]))
} }
} else { } else {
let val = value const val = validateAttr(k, v)
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) val = '#' if (val != null) {
if (val != null) applyProp(elem, key, val, isSVG) if (k in el && !isSVG) el[k] = val
else el.setAttribute(k, val === true ? "" : val)
}
} }
} }
const mountChild = child => { const append = c => {
if (isArr(child)) return child.forEach(mountChild) if (isArr(c)) return c.forEach(append)
if (isFunc(child)) { if (isFunc(c)) {
const anchor = doc.createTextNode("") const anchor = doc.createTextNode("")
elem.appendChild(anchor) el.appendChild(anchor)
let currentNodes = [] let currentNodes = []
const effect = createEffect(() => { const effect = createEffect(() => {
const res = child() const res = c()
const next = (isArr(res) ? res : [res]).map(ensureNode) const next = (isArr(res) ? res : [res]).map(ensureNode)
currentNodes.forEach(n => { currentNodes.forEach(n => {
if (n._isRuntime) n.destroy() if (n._isRuntime) n.destroy()
@@ -300,58 +310,48 @@ const Tag = (tag, props = {}, children = []) => {
currentNodes = next currentNodes = next
}) })
effect() effect()
elem._cleanups.add(() => dispose(effect)) el._cleanups.add(() => dispose(effect))
onUnmount(() => dispose(effect)) onUnmount(() => dispose(effect))
} else { } else {
const node = ensureNode(child) const node = ensureNode(c)
elem.appendChild(node) el.appendChild(node)
if (node._mounts) node._mounts.forEach(fn => fn()) if (node._mounts) node._mounts.forEach(fn => fn())
} }
} }
mountChild(children) append(children)
return elem return el
} }
const createView = (renderFn) => { // create Render
const Render = renderFn => {
const cleanups = new Set() const cleanups = new Set()
const mounts = [] const mounts = []
const previousOwner = activeOwner const previousOwner = activeOwner
activeOwner = { _cleanups: cleanups, _mounts: mounts } const previousEffect = activeEffect
const result = renderFn({ onCleanup: fn => cleanups.add(fn) })
activeOwner = previousOwner
if (result == null) return null
if (result instanceof Node) {
mounts.forEach(fn => fn())
return {
_isRuntime: true,
container: result,
destroy: () => {
cleanups.forEach(fn => fn())
cleanupNode(result)
result.remove()
}
}
}
const container = doc.createElement("div") const container = doc.createElement("div")
container.style.display = "contents" container.style.display = "contents"
container.setAttribute("role", "presentation") container.setAttribute("role", "presentation") // ← único cambio real
activeOwner = { _cleanups: cleanups, _mounts: mounts }
activeEffect = null
const process = node => { const processResult = result => {
if (!node) return if (!result) return
if (node._isRuntime) { if (result._isRuntime) {
cleanups.add(node.destroy) cleanups.add(result.destroy)
container.appendChild(node.container) container.appendChild(result.container)
} else if (isArr(node)) { } else if (isArr(result)) {
node.forEach(process) result.forEach(processResult)
} else { } else {
container.appendChild(node instanceof Node ? node : doc.createTextNode(String(node))) container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result)))
} }
} }
process(result)
try {
processResult(renderFn({ onCleanup: fn => cleanups.add(fn) }))
} finally {
activeOwner = previousOwner
activeEffect = previousEffect
}
mounts.forEach(fn => fn()) mounts.forEach(fn => fn())
return { return {
@@ -365,6 +365,7 @@ const createView = (renderFn) => {
} }
} }
// create If
const If = (cond, ifYes, ifNot = null, trans = null) => { const If = (cond, ifYes, ifNot = null, trans = null) => {
const anchor = doc.createTextNode("") const anchor = doc.createTextNode("")
const root = Tag("div", { style: "display:contents" }, [anchor]) const root = Tag("div", { style: "display:contents" }, [anchor])
@@ -397,7 +398,7 @@ const If = (cond, ifYes, ifNot = null, trans = null) => {
const content = show ? ifYes : ifNot const content = show ? ifYes : ifNot
if (content) { if (content) {
currentView = createView(() => isFunc(content) ? content() : content) currentView = Render(() => isFunc(content) ? content() : content)
root.insertBefore(currentView.container, anchor) root.insertBefore(currentView.container, anchor)
if (trans?.in) trans.in(currentView.container) if (trans?.in) trans.in(currentView.container)
} }
@@ -406,6 +407,7 @@ const If = (cond, ifYes, ifNot = null, trans = null) => {
return root return root
} }
// create For
const For = (src, itemFn, keyFn) => { const For = (src, itemFn, keyFn) => {
const anchor = doc.createTextNode("") const anchor = doc.createTextNode("")
const root = Tag("div", { style: "display:contents" }, [anchor]) const root = Tag("div", { style: "display:contents" }, [anchor])
@@ -418,7 +420,7 @@ const For = (src, itemFn, keyFn) => {
const item = newItems[i] const item = newItems[i]
const key = keyFn ? keyFn(item, i) : (item?.id ?? i) const key = keyFn ? keyFn(item, i) : (item?.id ?? i)
let view = cache.get(key) let view = cache.get(key)
if (!view) view = createView(() => itemFn(item, i)) if (!view) view = Render(() => itemFn(item, i))
else cache.delete(key) else cache.delete(key)
nextCache.set(key, view) nextCache.set(key, view)
nextOrder.push(view) nextOrder.push(view)
@@ -436,20 +438,21 @@ const For = (src, itemFn, keyFn) => {
return root return root
} }
// create Router
const Router = routes => { const Router = routes => {
const getHash = () => window.location.hash.slice(1) || "/" const getHash = () => window.location.hash.slice(1) || "/"
const path = $(getHash()) const path = $(getHash())
const handler = () => path(getHash()) const handler = () => path(getHash())
window.addEventListener("hashchange", handler) window.addEventListener("hashchange", handler)
onUnmount(() => window.removeEventListener("hashchange", handler)) onUnmount(() => window.removeEventListener("hashchange", handler))
const outlet = Tag("div", { class: "router-outlet" }) const hook = Tag("div", { class: "router-hook" })
let currentView = null let currentView = null
Watch([path], () => { Watch([path], () => {
const cur = path() const cur = path()
const route = routes.find(r => { const route = routes.find(r => {
const rParts = r.path.split("/").filter(Boolean) const p1 = r.path.split("/").filter(Boolean)
const curParts = cur.split("/").filter(Boolean) const p2 = cur.split("/").filter(Boolean)
return rParts.length === curParts.length && rParts.every((p, i) => p[0] === ":" || p === curParts[i]) return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i])
}) || routes.find(r => r.path === "*") }) || routes.find(r => r.path === "*")
if (route) { if (route) {
currentView?.destroy() currentView?.destroy()
@@ -458,14 +461,14 @@ const Router = routes => {
if (p[0] === ":") params[p.slice(1)] = cur.split("/").filter(Boolean)[i] if (p[0] === ":") params[p.slice(1)] = cur.split("/").filter(Boolean)[i]
}) })
Router.params(params) Router.params(params)
currentView = createView(() => isFunc(route.component) ? route.component(params) : route.component) currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component)
outlet.replaceChildren(currentView.container) hook.replaceChildren(currentView.container)
} }
}) })
return outlet return hook
} }
Router.params = $({}) Router.params = $({})
Router.to = path => window.location.hash = path.replace(/^#?\/?/, "#/") Router.to = p => window.location.hash = p.replace(/^#?\/?/, "#/")
Router.back = () => window.history.back() Router.back = () => window.history.back()
Router.path = () => window.location.hash.replace(/^#/, "") || "/" Router.path = () => window.location.hash.replace(/^#/, "") || "/"
@@ -473,26 +476,13 @@ const Mount = (comp, target) => {
const t = typeof target === "string" ? doc.querySelector(target) : target const t = typeof target === "string" ? doc.querySelector(target) : target
if (!t) return if (!t) return
if (MOUNTED_NODES.has(t)) MOUNTED_NODES.get(t).destroy() if (MOUNTED_NODES.has(t)) MOUNTED_NODES.get(t).destroy()
const inst = createView(() => isFunc(comp) ? comp() : comp) const inst = Render(isFunc(comp) ? comp : () => comp)
t.replaceChildren(inst.container) t.replaceChildren(inst.container)
MOUNTED_NODES.set(t, inst) MOUNTED_NODES.set(t, inst)
return inst return inst
} }
const set = (signal, path, value) => { const SigPro = Object.freeze({ $, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, set })
if (value === undefined) {
signal(isFunc(path) ? path(signal()) : path)
} else {
const keys = path.split('.')
const last = keys.pop()
const current = signal()
const obj = keys.reduce((o, k) => ({ ...o, [k]: { ...o[k] } }), { ...current })
obj[last] = value
signal(obj)
}
}
const SigPro = Object.freeze({ $, Watch, Tag, If, For, Router, Mount, onMount, onUnmount, set })
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.assign(window, SigPro) Object.assign(window, SigPro)
@@ -500,5 +490,5 @@ if (typeof window !== "undefined") {
.split(" ").forEach(t => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c)) .split(" ").forEach(t => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c))
} }
export { $, Watch, Tag, If, For, Router, Mount, onMount, onUnmount, set } export { $, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, set }
export default SigPro export default SigPro