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

Tabs y Accordion animados

Browse Source
This commit is contained in:
natxocc
2026-04-13 12:09:35 +02:00
parent 00b9b8f911
commit 0697b4b4b7
12 changed files with 282 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
css/sigpro.css
View File

@@ -6913,6 +6913,32 @@
color: oklch(28% 0.01 260);
font-size: 1.1rem;
}
.collapse .collapse-content {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 0;
opacity: 0;
}
.collapse:has(input:checked) .collapse-content {
transform: scaleY(1);
height: auto;
opacity: 1;
}
.tab-content-inner {
animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top;
}
@keyframes tabFadeIn {
from {
opacity: 0;
transform: scaleY(0.95);
}
to {
opacity: 1;
transform: scaleY(1);
}
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
color-scheme: light;

2
css/sigpro.min.css vendored
View File

File diff suppressed because one or more lines are too long

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;

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

File diff suppressed because one or more lines are too long

98
dist/sigpro-ui.js vendored
View File

@@ -110,6 +110,10 @@
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)
@@ -185,20 +189,16 @@
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;
@@ -233,20 +233,20 @@
}
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) => {
@@ -274,12 +274,33 @@
};
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") {
@@ -300,14 +321,14 @@
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))
@@ -333,15 +354,10 @@
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));
@@ -351,18 +367,16 @@
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);
@@ -399,7 +413,7 @@
node._mounts.forEach((fn) => fn());
}
};
append(children);
mountChild(children);
return elem;
};
var createView = (renderFn) => {
@@ -1847,7 +1861,9 @@
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;

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

File diff suppressed because one or more lines are too long

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

@@ -110,6 +110,10 @@
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)
@@ -185,20 +189,16 @@
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;
@@ -233,20 +233,20 @@
}
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) => {
@@ -274,12 +274,33 @@
};
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") {
@@ -300,14 +321,14 @@
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))
@@ -333,15 +354,10 @@
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));
@@ -351,18 +367,16 @@
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);
@@ -399,7 +413,7 @@
node._mounts.forEach((fn) => fn());
}
};
append(children);
mountChild(children);
return elem;
};
var createView = (renderFn) => {
@@ -1847,7 +1861,9 @@
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;

2
docs/sigpro.css
View File

File diff suppressed because one or more lines are too long

7
src/components/Tabs.js
View File

@@ -49,11 +49,14 @@ export const Tabs = (props) => {
}
elements.push(button);
// Contenido (tab-content) - debe ir inmediatamente después del botón
// Contenido (tab-content) - borde exterior estático
const panel = Tag("div", {
class: "tab-content bg-base-100 border-base-300 p-6",
style: () => isActive() ? "display: block" : "display: none"
}, () => val(item.content));
}, [
// Contenedor interno con animación
Tag("div", { class: "tab-content-inner" }, () => val(item.content))
]);
elements.push(panel);
}

29
src/css/sigpro.css
View File

@@ -109,4 +109,33 @@
.floating-label:has(input:not(:placeholder-shown)) span {
color: oklch(28% 0.01 260); /* Gris oscuro cuando tiene valor */
font-size: 1.1rem; /* Mantiene el mismo tamaño */
}
.collapse .collapse-content {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 0;
opacity: 0;
}
.collapse:has(input:checked) .collapse-content {
transform: scaleY(1);
height: auto;
opacity: 1;
}
.tab-content-inner {
animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top;
}
@keyframes tabFadeIn {
from {
opacity: 0;
transform: scaleY(0.95);
}
to {
opacity: 1;
transform: scaleY(1);
}
}

92
src/sigpro.js
View File

@@ -34,6 +34,10 @@ const onUnmount = fn => {
if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn)
}
const onMount = fn => {
if (activeOwner) (activeOwner._mounts ||= []).push(fn)
}
const createEffect = (fn, isComputed = false) => {
const effect = () => {
if (effect._disposed) return
@@ -99,20 +103,16 @@ const untrack = fn => {
try { return fn() } finally { activeEffect = prev }
}
const onMount = fn => {
if (activeOwner) (activeOwner._mounts ||= []).push(fn)
}
const $ = (value, storageKey = null) => {
const $ = (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
@@ -140,18 +140,18 @@ const $ = (value, storageKey = null) => {
if (activeOwner) onUnmount(computed.stop)
return computed
}
if (storageKey) try { value = JSON.parse(localStorage.getItem(storageKey)) ?? value } catch (e) {}
if (storageKey) try { 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
if (storageKey) localStorage.setItem(storageKey, JSON.stringify(value))
const next = isFunc(args[0]) ? args[0](initialValue) : args[0]
if (!Object.is(initialValue, next)) {
initialValue = next
if (storageKey) localStorage.setItem(storageKey, JSON.stringify(initialValue))
trackUpdate(subs, true)
}
}
trackUpdate(subs)
return value
return initialValue
}
}
@@ -181,33 +181,29 @@ const cleanupNode = node => {
const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i
const isDangerousAttr = key => key === 'src' || key === 'href' || key.startsWith('on')
const validateAttr = (key, val) => {
if (val == null || val === false) return null
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val))) return '#'
return val
}
const setProperty = (elem, key, val, isSVG) => {
val = validateAttr(key, val)
if (key === 'class' || key === 'className') elem.className = val || ''
else if (key === 'style' && typeof val === 'object') Object.assign(elem.style, val)
else if (key in elem && !isSVG) elem[key] = val
else if (isSVG) {
const 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:')) {
if (val == null || val === false) elem.removeAttributeNS('http://www.w3.org/1999/xlink', key.slice(6))
else elem.setAttributeNS('http://www.w3.org/1999/xlink', key, val)
elem.setAttributeNS('http://www.w3.org/1999/xlink', key, value)
} else if (key === 'xmlns' || key.startsWith('xmlns:')) {
if (val == null || val === false) elem.removeAttributeNS('http://www.w3.org/2000/xmlns/', key)
else elem.setAttributeNS('http://www.w3.org/2000/xmlns/', key, val)
elem.setAttributeNS('http://www.w3.org/2000/xmlns/', key, value)
} else {
if (val == null || val === false) elem.removeAttribute(key)
else if (val === true) elem.setAttribute(key, '')
else elem.setAttribute(key, val)
elem.setAttribute(key, value === true ? '' : value)
}
} else {
if (val == null || val === false) elem.removeAttribute(key)
else if (val === true) elem.setAttribute(key, '')
else elem.setAttribute(key, val)
elem.setAttribute(key, value === true ? '' : value)
}
}
@@ -230,14 +226,14 @@ const Tag = (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))) return result
return doc.createTextNode(String(result))
@@ -262,11 +258,9 @@ const Tag = (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))
@@ -276,16 +270,14 @@ const Tag = (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 => {
if (isArr(child)) return child.forEach(append)
const mountChild = child => {
if (isArr(child)) return child.forEach(mountChild)
if (isFunc(child)) {
const anchor = doc.createTextNode("")
elem.appendChild(anchor)
@@ -316,7 +308,7 @@ const Tag = (tag, props = {}, children = []) => {
if (node._mounts) node._mounts.forEach(fn => fn())
}
}
append(children)
mountChild(children)
return elem
}

1
src/sigpro.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long