Tabs y Accordion animados
This commit is contained in:
98
dist/sigpro-ui.js
vendored
98
dist/sigpro-ui.js
vendored
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user