Tabs y Accordion animados

This commit is contained in:
2026-04-13 12:09:35 +02:00
parent 00b9b8f911
commit 0697b4b4b7
12 changed files with 282 additions and 183 deletions

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

@@ -44,6 +44,10 @@ var onUnmount = (fn) => {
if (activeOwner)
(activeOwner._cleanups ||= new Set).add(fn);
};
var onMount = (fn) => {
if (activeOwner)
(activeOwner._mounts ||= []).push(fn);
};
var createEffect = (fn, isComputed = false) => {
const effect = () => {
if (effect._disposed)
@@ -119,20 +123,16 @@ var untrack = (fn) => {
activeEffect = prev;
}
};
var onMount = (fn) => {
if (activeOwner)
(activeOwner._mounts ||= []).push(fn);
};
var $2 = (value, storageKey = null) => {
var $2 = (initialValue, storageKey = null) => {
const subs = new Set;
if (isFunc(value)) {
if (isFunc(initialValue)) {
let cache, dirty = true;
const computed = () => {
if (dirty) {
const prev = activeEffect;
activeEffect = computed;
try {
const next = value();
const next = initialValue();
if (!Object.is(cache, next)) {
cache = next;
dirty = false;
@@ -167,20 +167,20 @@ var $2 = (value, storageKey = null) => {
}
if (storageKey)
try {
value = JSON.parse(localStorage.getItem(storageKey)) ?? value;
initialValue = JSON.parse(localStorage.getItem(storageKey)) ?? initialValue;
} catch (e) {}
return (...args) => {
if (args.length) {
const next = isFunc(args[0]) ? args[0](value) : args[0];
if (!Object.is(value, next)) {
value = next;
const next = isFunc(args[0]) ? args[0](initialValue) : args[0];
if (!Object.is(initialValue, next)) {
initialValue = next;
if (storageKey)
localStorage.setItem(storageKey, JSON.stringify(value));
localStorage.setItem(storageKey, JSON.stringify(initialValue));
trackUpdate(subs, true);
}
}
trackUpdate(subs);
return value;
return initialValue;
};
};
var Watch2 = (sources, callback) => {
@@ -208,12 +208,33 @@ var cleanupNode = (node) => {
};
var DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i;
var isDangerousAttr = (key) => key === "src" || key === "href" || key.startsWith("on");
var validateAttr = (key, val) => {
if (val == null || val === false)
return null;
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val)))
return "#";
return val;
var applyProp = (elem, key, value, isSVG) => {
if (value == null || value === false) {
if (key === "class" || key === "className")
elem.className = "";
else if (key in elem && !isSVG)
elem[key] = "";
else
elem.removeAttribute(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);
}
};
var Tag2 = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || props && typeof props !== "object") {
@@ -234,14 +255,14 @@ var Tag2 = (tag, props = {}, children = []) => {
ctx._mounts = effect._mounts || [];
ctx._cleanups = effect._cleanups || new Set;
const result = effect._result;
const attachLifecycle = (node) => {
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(attachLifecycle) : attachLifecycle(result);
isArr(result) ? result.forEach(attach) : attach(result);
if (result == null)
return null;
if (result instanceof Node || isArr(result) && result.every((n) => n instanceof Node))
@@ -267,15 +288,10 @@ var Tag2 = (tag, props = {}, children = []) => {
onUnmount(off);
} else if (isFunc(value)) {
const effect = createEffect(() => {
const val = validateAttr(key, value());
if (key === "class")
elem.className = val || "";
else if (val == null)
elem.removeAttribute(key);
else if (key in elem && !isSVG)
elem[key] = val;
else
elem.setAttribute(key, val === true ? "" : val);
let val = value();
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val)))
val = "#";
applyProp(elem, key, val, isSVG);
});
effect();
elem._cleanups.add(() => dispose(effect));
@@ -285,18 +301,16 @@ var Tag2 = (tag, props = {}, children = []) => {
elem.addEventListener(eventType, (ev) => value(ev.target[key]));
}
} else {
const val = validateAttr(key, value);
if (val != null) {
if (key in elem && !isSVG)
elem[key] = val;
else
elem.setAttribute(key, val === true ? "" : val);
}
let val = value;
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val)))
val = "#";
if (val != null)
applyProp(elem, key, val, isSVG);
}
}
const append = (child) => {
const mountChild = (child) => {
if (isArr(child))
return child.forEach(append);
return child.forEach(mountChild);
if (isFunc(child)) {
const anchor = doc.createTextNode("");
elem.appendChild(anchor);
@@ -333,7 +347,7 @@ var Tag2 = (tag, props = {}, children = []) => {
node._mounts.forEach((fn) => fn());
}
};
append(children);
mountChild(children);
return elem;
};
var createView = (renderFn) => {
@@ -1781,7 +1795,9 @@ var Tabs = (props) => {
const panel = Tag("div", {
class: "tab-content bg-base-100 border-base-300 p-6",
style: () => isActive() ? "display: block" : "display: none"
}, () => val(item.content));
}, [
Tag("div", { class: "tab-content-inner" }, () => val(item.content))
]);
elements.push(panel);
}
return elements;