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

Update TS
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-29 23:23:08 +02:00
parent d2bf6aabfc
commit 7d2ad67513
17 changed files with 1126 additions and 1162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dist/sigpro-ui.css vendored
View File

@@ -3396,9 +3396,6 @@
.-mr-2 { .-mr-2 {
margin-right: calc(var(--spacing) * -2); margin-right: calc(var(--spacing) * -2);
} }
.mr-1 {
margin-right: calc(var(--spacing) * 1);
}
.fieldset-legend { .fieldset-legend {
@layer daisyui.l1.l2.l3 { @layer daisyui.l1.l2.l3 {
margin-bottom: calc(0.25rem * -1); margin-bottom: calc(0.25rem * -1);

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

@@ -16,6 +16,10 @@ var __export = (target, all) => {
// sigpro-ui.js // sigpro-ui.js
var exports_sigpro_ui = {}; var exports_sigpro_ui = {};
__export(exports_sigpro_ui, { __export(exports_sigpro_ui, {
tt: () => tt,
i18n: () => i18n,
hide: () => hide,
currentLocale: () => currentLocale,
Tooltip: () => Tooltip, Tooltip: () => Tooltip,
Toggle: () => Toggle, Toggle: () => Toggle,
Toast: () => Toast, Toast: () => Toast,
@@ -46,6 +50,7 @@ __export(exports_sigpro_ui, {
Navbar: () => Navbar, Navbar: () => Navbar,
Modal: () => Modal, Modal: () => Modal,
Menu: () => Menu, Menu: () => Menu,
Locale: () => Locale,
Loading: () => Loading, Loading: () => Loading,
ListRows: () => ListRows, ListRows: () => ListRows,
List: () => List, List: () => List,
@@ -56,6 +61,7 @@ __export(exports_sigpro_ui, {
Fileinput: () => Fileinput, Fileinput: () => Fileinput,
Fieldset: () => Fieldset, Fieldset: () => Fieldset,
Fab: () => Fab, Fab: () => Fab,
Editor: () => Editor,
DropdownContent: () => DropdownContent, DropdownContent: () => DropdownContent,
DropdownButton: () => DropdownButton, DropdownButton: () => DropdownButton,
Dropdown: () => Dropdown, Dropdown: () => Dropdown,
@@ -92,23 +98,23 @@ __export(exports_sigpro_ui, {
}); });
// node_modules/sigpro/dist/sigpro.esm.min.js // node_modules/sigpro/dist/sigpro.esm.min.js
var w = (e) => typeof e === "function"; var _ = (e) => typeof e === "function";
var B = (e) => e && typeof e === "object"; var O = (e) => e && typeof e === "object";
var g = Array.isArray; var b = Array.isArray;
var E = typeof document < "u" ? document : null; var E = typeof document < "u" ? document : null;
var V = (e) => e?._isRuntime ? e.container : e instanceof Node ? e : E.createTextNode(e == null ? "" : String(e)); var V = (e) => e?._isRuntime ? e.container : e instanceof Node ? e : E.createTextNode(e == null ? "" : String(e));
var d = null; var d = null;
var _ = null; var m = null;
var N = false; var v = false;
var R = 0; var R = 0;
var O = new Set; var T = new Set;
var I = new WeakMap; var I = new WeakMap;
var j = Symbol("iter"); var k = Symbol("iter");
var k = new WeakMap; var L = new WeakMap;
var W = "http://www.w3.org/2000/svg"; var W = "http://www.w3.org/2000/svg";
var M = "http://www.w3.org/1999/xlink"; var M = "http://www.w3.org/1999/xlink";
var q = new Set("svg,path,circle,rect,line,polyline,polygon,g,defs,text,textPath,tspan,use,symbol,image,marker,ellipse".split(",")); var q = new Set("svg,path,circle,rect,line,polyline,polygon,g,defs,text,textPath,tspan,use,symbol,image,marker,ellipse".split(","));
var b = (e) => { var g = (e) => {
if (!e || e._disposed) if (!e || e._disposed)
return; return;
e._disposed = true; e._disposed = true;
@@ -123,9 +129,9 @@ var b = (e) => {
n._deps.forEach((r) => r.delete(n)), n._deps.clear(); n._deps.forEach((r) => r.delete(n)), n._deps.clear();
} }
}; };
var v = (e) => { var S = (e) => {
if (_) if (m)
(_._cleanups ||= new Set).add(e); (m._cleanups ||= new Set).add(e);
}; };
var K = (e) => { var K = (e) => {
let s = d; let s = d;
@@ -144,41 +150,41 @@ var x = (e, s = false) => {
n._deps.forEach((i) => i.delete(n)); n._deps.forEach((i) => i.delete(n));
if (n._cleanups) if (n._cleanups)
n._cleanups.forEach((i) => i()), n._cleanups.clear(); n._cleanups.forEach((i) => i()), n._cleanups.clear();
let r = d, o = _; let r = d, o = m;
d = _ = n; d = m = n;
try { try {
return n._result = e(); return n._result = e();
} catch (i) { } catch (i) {
console.error("[SigPro]", i); console.error("[SigPro]", i);
} finally { } finally {
d = r, _ = o; d = r, m = o;
} }
}; };
if (n._deps = n._cleanups = n._children = null, n._disposed = false, n._isComputed = s, n._depth = d ? d._depth + 1 : 0, n._mounts = [], n._parent = _, _) if (n._deps = n._cleanups = n._children = null, n._disposed = false, n._isComputed = s, n._depth = d ? d._depth + 1 : 0, n._mounts = [], n._parent = m, m)
(_._children ||= new Set).add(n); (m._children ||= new Set).add(n);
return n; return n;
}; };
var $ = () => { var $ = () => {
if (N) if (v)
return; return;
N = true; v = true;
let e = Array.from(O).sort((s, n) => s._depth - n._depth); let e = Array.from(T).sort((s, n) => s._depth - n._depth);
O.clear(); T.clear();
for (let s of e) for (let s of e)
if (!s._disposed) if (!s._disposed)
s(); s();
N = false; v = false;
}; };
var z = (e) => { var z = (e) => {
R++; R++;
try { try {
return e(); return e();
} finally { } finally {
if (R--, R === 0 && O.size > 0 && !N) if (R--, R === 0 && T.size > 0 && !v)
$(); $();
} }
}; };
var m = (e, s = false) => { var w = (e, s = false) => {
if (!s && d && !d._disposed) if (!s && d && !d._disposed)
e.add(d), (d._deps ||= new Set).add(e); e.add(d), (d._deps ||= new Set).add(e);
else if (s && e.size > 0) { else if (s && e.size > 0) {
@@ -188,17 +194,17 @@ var m = (e, s = false) => {
continue; continue;
if (r._isComputed) { if (r._isComputed) {
if (r._dirty = true, r._subs) if (r._dirty = true, r._subs)
m(r._subs, true); w(r._subs, true);
} else } else
O.add(r), n = true; T.add(r), n = true;
} }
if (n && !N && R === 0) if (n && !v && R === 0)
queueMicrotask($); queueMicrotask($);
} }
}; };
var P = (e, s = null) => { var P = (e, s = null) => {
let n = new Set; let n = new Set;
if (w(e)) { if (_(e)) {
let r, o = () => { let r, o = () => {
if (o._dirty) { if (o._dirty) {
let i = d; let i = d;
@@ -206,13 +212,13 @@ var P = (e, s = null) => {
try { try {
let t = e(); let t = e();
if (!Object.is(r, t)) if (!Object.is(r, t))
r = t, m(n, true); r = t, w(n, true);
} finally { } finally {
d = i; d = i;
} }
o._dirty = false; o._dirty = false;
} }
return m(n), r; return w(n), r;
}; };
return o._isComputed = true, o._subs = n, o._dirty = true, o._deps = null, o._disposed = false, o; return o._isComputed = true, o._subs = n, o._dirty = true, o._deps = null, o._disposed = false, o;
} }
@@ -222,18 +228,18 @@ var P = (e, s = null) => {
} catch (r) {} } catch (r) {}
return (...r) => { return (...r) => {
if (r.length) { if (r.length) {
let o = w(r[0]) ? r[0](e) : r[0]; let o = _(r[0]) ? r[0](e) : r[0];
if (!Object.is(e, o)) { if (!Object.is(e, o)) {
if (e = o, s) if (e = o, s)
localStorage.setItem(s, JSON.stringify(e)); localStorage.setItem(s, JSON.stringify(e));
m(n, true); w(n, true);
} }
} }
return m(n), e; return w(n), e;
}; };
}; };
var D = (e) => { var D = (e) => {
if (!B(e)) if (!O(e))
return e; return e;
let s = I.get(e); let s = I.get(e);
if (s) if (s)
@@ -245,35 +251,35 @@ var D = (e) => {
return t; return t;
}, o = new Proxy(e, { get(i, t, c) { }, o = new Proxy(e, { get(i, t, c) {
if (typeof t !== "symbol") if (typeof t !== "symbol")
m(r(t)); w(r(t));
return D(Reflect.get(i, t, c)); return D(Reflect.get(i, t, c));
}, set(i, t, c, l) { }, set(i, t, c, l) {
let a = Reflect.has(i, t), f = Reflect.get(i, t, l), u = Reflect.set(i, t, c, l); let a = Reflect.has(i, t), f = Reflect.get(i, t, l), u = Reflect.set(i, t, c, l);
if (u && !Object.is(f, c)) { if (u && !Object.is(f, c)) {
if (m(r(t), true), !a) if (w(r(t), true), !a)
m(r(j), true); w(r(k), true);
} }
return u; return u;
}, deleteProperty(i, t) { }, deleteProperty(i, t) {
let c = Reflect.deleteProperty(i, t); let c = Reflect.deleteProperty(i, t);
if (c) if (c)
m(r(t), true), m(r(j), true); w(r(t), true), w(r(k), true);
return c; return c;
}, ownKeys(i) { }, ownKeys(i) {
return m(r(j)), Reflect.ownKeys(i); return w(r(k)), Reflect.ownKeys(i);
} }); } });
return I.set(e, o), o; return I.set(e, o), o;
}; };
var T = (e, s) => { var C = (e, s) => {
if (s === undefined) { if (s === undefined) {
let r = x(e); let r = x(e);
return r(), () => b(r); return r(), () => g(r);
} }
let n = x(() => { let n = x(() => {
let r = Array.isArray(e) ? e.map((o) => o()) : e(); let r = Array.isArray(e) ? e.map((o) => o()) : e();
K(() => s(r)); K(() => s(r));
}); });
return n(), () => b(n); return n(), () => g(n);
}; };
var U = (e) => { var U = (e) => {
if (!e) if (!e)
@@ -281,14 +287,14 @@ var U = (e) => {
if (e._cleanups) if (e._cleanups)
e._cleanups.forEach((s) => s()), e._cleanups.clear(); e._cleanups.forEach((s) => s()), e._cleanups.clear();
if (e._ownerEffect) if (e._ownerEffect)
b(e._ownerEffect); g(e._ownerEffect);
if (e.childNodes) if (e.childNodes)
e.childNodes.forEach((s) => U(s)); e.childNodes.forEach((s) => U(s));
}; };
var J = /^\s*(javascript|data|vbscript):/i; var J = /^\s*(javascript|data|vbscript):/i;
var Q = new Set(["src", "href", "formaction", "action", "background", "code", "archive"]); var Q = new Set(["src", "href", "formaction", "action", "background", "code", "archive"]);
var X = (e) => Q.has(e) || e.startsWith("on"); var X = (e) => Q.has(e) || e.startsWith("on");
var L = (e, s) => { var B = (e, s) => {
if (s == null || s === false) if (s == null || s === false)
return null; return null;
if (X(e)) { if (X(e)) {
@@ -299,9 +305,9 @@ var L = (e, s) => {
return s; return s;
}; };
var A = (e, s = {}, n = []) => { var A = (e, s = {}, n = []) => {
if (s instanceof Node || g(s) || !B(s)) if (s instanceof Node || b(s) || !O(s))
n = s, s = {}; n = s, s = {};
if (w(e)) { if (_(e)) {
let t = x(() => { let t = x(() => {
let f = e(s, { children: n, emit: (u, ...h) => s[`on${u[0].toUpperCase()}${u.slice(1)}`]?.(...h) }); let f = e(s, { children: n, emit: (u, ...h) => s[`on${u[0].toUpperCase()}${u.slice(1)}`]?.(...h) });
return t._result = f, f; return t._result = f, f;
@@ -310,22 +316,22 @@ var A = (e, s = {}, n = []) => {
let c = t._result; let c = t._result;
if (c == null) if (c == null)
return null; return null;
let l = c instanceof Node || g(c) && c.every((f) => f instanceof Node) ? c : E.createTextNode(String(c)), a = (f) => { let l = c instanceof Node || b(c) && c.every((f) => f instanceof Node) ? c : E.createTextNode(String(c)), a = (f) => {
if (B(f) && !f._isRuntime) if (O(f) && !f._isRuntime)
f._mounts = t._mounts || [], f._cleanups = t._cleanups || new Set, f._ownerEffect = t; f._mounts = t._mounts || [], f._cleanups = t._cleanups || new Set, f._ownerEffect = t;
}; };
return g(l) ? l.forEach(a) : a(l), l; return b(l) ? l.forEach(a) : a(l), l;
} }
let r = q.has(e), o = r ? E.createElementNS(W, e) : E.createElement(e); let r = q.has(e), o = r ? E.createElementNS(W, e) : E.createElement(e);
o._cleanups = new Set; o._cleanups = new Set;
for (let t of Object.keys(s)) { for (let t of Object.keys(s)) {
let c = s[t]; let c = s[t];
if (t === "ref") { if (t === "ref") {
w(c) ? c(o) : c.current = o; _(c) ? c(o) : c.current = o;
continue; continue;
} }
if (r && t.startsWith("xlink:")) { if (r && t.startsWith("xlink:")) {
let l = L(t.slice(6), c); let l = B(t.slice(6), c);
l == null ? o.removeAttributeNS(M, t.slice(6)) : o.setAttributeNS(M, t.slice(6), l); l == null ? o.removeAttributeNS(M, t.slice(6)) : o.setAttributeNS(M, t.slice(6), l);
continue; continue;
} }
@@ -333,10 +339,10 @@ var A = (e, s = {}, n = []) => {
let l = t.slice(2).toLowerCase(); let l = t.slice(2).toLowerCase();
o.addEventListener(l, c); o.addEventListener(l, c);
let a = () => o.removeEventListener(l, c); let a = () => o.removeEventListener(l, c);
o._cleanups.add(a), v(a); o._cleanups.add(a), S(a);
} else if (w(c)) { } else if (_(c)) {
let l = x(() => { let l = x(() => {
let a = L(t, c()); let a = B(t, c());
if (t === "class") if (t === "class")
o.className = a || ""; o.className = a || "";
else if (a == null) else if (a == null)
@@ -348,12 +354,12 @@ var A = (e, s = {}, n = []) => {
else else
o.setAttribute(t, a === true ? "" : a); o.setAttribute(t, a === true ? "" : a);
}); });
if (l(), o._cleanups.add(() => b(l)), v(() => b(l)), /^(INPUT|TEXTAREA|SELECT)$/.test(o.tagName) && (t === "value" || t === "checked")) { if (l(), o._cleanups.add(() => g(l)), S(() => g(l)), /^(INPUT|TEXTAREA|SELECT)$/.test(o.tagName) && (t === "value" || t === "checked")) {
let a = t === "checked" ? "change" : "input"; let a = t === "checked" ? "change" : "input";
o.addEventListener(a, (f) => c(f.target[t])); o.addEventListener(a, (f) => c(f.target[t]));
} }
} else { } else {
let l = L(t, c); let l = B(t, c);
if (l != null) if (l != null)
if (t === "style" && typeof l === "string") if (t === "style" && typeof l === "string")
o.setAttribute("style", l); o.setAttribute("style", l);
@@ -364,13 +370,13 @@ var A = (e, s = {}, n = []) => {
} }
} }
let i = (t) => { let i = (t) => {
if (g(t)) if (b(t))
return t.forEach(i); return t.forEach(i);
if (w(t)) { if (_(t)) {
let c = E.createTextNode(""); let c = E.createTextNode("");
o.appendChild(c); o.appendChild(c);
let l = [], a = x(() => { let l = [], a = x(() => {
let f = t(), u = (g(f) ? f : [f]).map(V); let f = t(), u = (b(f) ? f : [f]).map(V);
l.forEach((p) => { l.forEach((p) => {
if (p._isRuntime) if (p._isRuntime)
p.destroy(); p.destroy();
@@ -390,7 +396,7 @@ var A = (e, s = {}, n = []) => {
} }
l = u; l = u;
}); });
a(), o._cleanups.add(() => b(a)), v(() => b(a)); a(), o._cleanups.add(() => g(a)), S(() => g(a));
} else { } else {
let c = V(t); let c = V(t);
if (o.appendChild(c), c._mounts) if (o.appendChild(c), c._mounts)
@@ -399,15 +405,15 @@ var A = (e, s = {}, n = []) => {
}; };
return i(n), o; return i(n), o;
}; };
var C = (e) => { var j = (e) => {
let s = new Set, n = _, r = d, o = E.createElement("div"); let s = new Set, n = m, r = d, o = E.createElement("div");
o.style.display = "contents", o.setAttribute("role", "presentation"), _ = { _cleanups: s }, d = null; o.style.display = "contents", o.setAttribute("role", "presentation"), m = { _cleanups: s }, d = null;
let i = (t) => { let i = (t) => {
if (!t) if (!t)
return; return;
if (t._isRuntime) if (t._isRuntime)
s.add(t.destroy), o.appendChild(t.container); s.add(t.destroy), o.appendChild(t.container);
else if (g(t)) else if (b(t))
t.forEach(i); t.forEach(i);
else else
o.appendChild(t instanceof Node ? t : E.createTextNode(String(t == null ? "" : t))); o.appendChild(t instanceof Node ? t : E.createTextNode(String(t == null ? "" : t)));
@@ -415,7 +421,7 @@ var C = (e) => {
try { try {
i(e({ onCleanup: (t) => s.add(t) })); i(e({ onCleanup: (t) => s.add(t) }));
} finally { } finally {
_ = n, d = r; m = n, d = r;
} }
return { _isRuntime: true, container: o, destroy: () => { return { _isRuntime: true, container: o, destroy: () => {
s.forEach((t) => t()), U(o), o.remove(); s.forEach((t) => t()), U(o), o.remove();
@@ -423,22 +429,22 @@ var C = (e) => {
}; };
var F = (e, s, n = null) => { var F = (e, s, n = null) => {
let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = null; let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = null;
return T(() => !!(w(e) ? e() : e), (t) => { return C(() => !!(_(e) ? e() : e), (t) => {
if (i) if (i)
i.destroy(), i = null; i.destroy(), i = null;
let c = t ? s : n; let c = t ? s : n;
if (c) if (c)
i = C(() => w(c) ? c() : c), o.insertBefore(i.container, r); i = j(() => _(c) ? c() : c), o.insertBefore(i.container, r);
}), v(() => i?.destroy()), o; }), S(() => i?.destroy()), o;
}; };
var H = (e, s, n) => { var H = (e, s, n) => {
let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = new Map; let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = new Map;
return T(() => (w(e) ? e() : e) || [], (t) => { return C(() => (_(e) ? e() : e) || [], (t) => {
let c = new Map, l = [], a = t || []; let c = new Map, l = [], a = t || [];
for (let u = 0;u < a.length; u++) { for (let u = 0;u < a.length; u++) {
let h = a[u], p = n ? h?.[n] ?? u : h?.id ?? u, y = i.get(p); let h = a[u], p = n ? h?.[n] ?? u : h?.id ?? u, y = i.get(p);
if (!y) if (!y)
y = C(() => s(h, u)); y = j(() => s(h, u));
else else
i.delete(p); i.delete(p);
c.set(p, y), l.push(y); c.set(p, y), l.push(y);
@@ -454,11 +460,11 @@ var H = (e, s, n) => {
i = c; i = c;
}), o; }), o;
}; };
var S = (e) => { var N = (e) => {
let s = () => window.location.hash.slice(1) || "/", n = P(s()), r = () => n(s()); let s = () => window.location.hash.slice(1) || "/", n = P(s()), r = () => n(s());
window.addEventListener("hashchange", r), v(() => window.removeEventListener("hashchange", r)); window.addEventListener("hashchange", r), S(() => window.removeEventListener("hashchange", r));
let o = A("div", { class: "router-hook" }), i = null; let o = A("div", { class: "router-hook" }), i = null;
return T([n], () => { return C([n], () => {
let t = n(), c = e.find((l) => { let t = n(), c = e.find((l) => {
let a = l.path.split("/").filter(Boolean), f = t.split("/").filter(Boolean); let a = l.path.split("/").filter(Boolean), f = t.split("/").filter(Boolean);
return a.length === f.length && a.every((u, h) => u[0] === ":" || u === f[h]); return a.length === f.length && a.every((u, h) => u[0] === ":" || u === f[h]);
@@ -469,38 +475,56 @@ var S = (e) => {
c.path.split("/").filter(Boolean).forEach((a, f) => { c.path.split("/").filter(Boolean).forEach((a, f) => {
if (a[0] === ":") if (a[0] === ":")
l[a.slice(1)] = t.split("/").filter(Boolean)[f]; l[a.slice(1)] = t.split("/").filter(Boolean)[f];
}), S.params(l), i = C(() => w(c.component) ? c.component(l) : c.component), o.replaceChildren(i.container); }), N.params(l), i = j(() => _(c.component) ? c.component(l) : c.component), o.replaceChildren(i.container);
} }
}), o; }), o;
}; };
S.params = P({}); N.params = P({});
S.to = (e) => window.location.hash = e.replace(/^#?\/?/, "#/"); N.to = (e) => window.location.hash = e.replace(/^#?\/?/, "#/");
S.back = () => window.history.back(); N.back = () => window.history.back();
S.path = () => window.location.hash.replace(/^#/, "") || "/"; N.path = () => window.location.hash.replace(/^#/, "") || "/";
var Y = (e, s) => { var Y = (e, s) => {
let n = typeof s === "string" ? E.querySelector(s) : s; let n = typeof s === "string" ? E.querySelector(s) : s;
if (!n) if (!n)
return; return;
if (k.has(n)) if (L.has(n))
k.get(n).destroy(); L.get(n).destroy();
let r = C(w(e) ? e : () => e); let r = j(_(e) ? e : () => e);
return n.replaceChildren(r.container), k.set(n, r), r; return n.replaceChildren(r.container), L.set(n, r), r;
}; };
if (typeof window < "u") if (typeof window < "u")
Object.assign(window, { $: P, $$: D, watch: T, h: A, when: F, each: H, router: S, mount: Y, batch: z }), "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e) => { Object.assign(window, { $: P, $$: D, watch: C, h: A, when: F, each: H, router: N, mount: Y, batch: z, onUnmount: S, isArr: b, isFunc: _, isObj: O }), "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e) => {
window[e] = (s, n) => A(e, s, n); window[e] = (s, n) => A(e, s, n);
}); });
// sigpro-helpers.js // sigpro-ui.js
var get = (val) => typeof val === "function" ? val() : val; var val = (val2) => typeof val2 === "function" ? val2() : val2;
var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item; var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
var cls = (...classes) => classes.filter(Boolean).join(" ").trim(); var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
var isFn = (f) => typeof f === "function"; var filterBy = (items, query, field = "label", q2 = String(query).toLowerCase()) => !query ? val(items) : val(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q2));
var filterBy = (items, query, field = "label", q2 = String(query).toLowerCase()) => !query ? get(items) : get(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q2));
var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`; var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
var hide = () => document.activeElement?.blur(); var hide = () => document.activeElement?.blur();
var i18n = {
// sigpro-ui.js es: {
close: "Cerrar",
confirm: "Confirmar",
cancel: "Cancelar",
search: "Buscar...",
loading: "Cargando...",
nodata: "Sin datos"
},
en: {
close: "Close",
confirm: "Confirm",
cancel: "Cancel",
search: "Search...",
loading: "Loading...",
nodata: "No data"
}
};
var currentLocale = P("en");
var Locale = (t) => currentLocale(t);
var tt = (t) => () => i18n[currentLocale()][t] || t;
var Accordion = (p) => { var Accordion = (p) => {
const name = p.name || rand("acc"); const name = p.name || rand("acc");
return H(p.items, (it) => { return H(p.items, (it) => {
@@ -515,13 +539,13 @@ var Alert = (p, c) => A("div", { ...p, class: cls("alert", p.class) }, c);
var Avatar = (p, c) => A("div", { class: "avatar" }, A("div", { class: p.class }, c)); var Avatar = (p, c) => A("div", { class: "avatar" }, A("div", { class: p.class }, c));
var AvatarGroup = (p, c) => A("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c); var AvatarGroup = (p, c) => A("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => { var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
const query = P(get(value) || ""); const query = P(val(value) || "");
const filtered = P(() => filterBy(items, query())); const filtered = P(() => filterBy(items, query()));
const pick = (item) => { const pick = (item) => {
const display = getBy(item); const display = getBy(item);
const actual = typeof item === "string" ? item : item.value; const actual = typeof item === "string" ? item : item.value;
query(display); query(display);
if (isFn(value)) if (_(value))
value(actual); value(actual);
onselect?.(item); onselect?.(item);
hide(); hide();
@@ -534,7 +558,7 @@ var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) =
left: A("span", { class: "icon-[lucide--search]" }), left: A("span", { class: "icon-[lucide--search]" }),
oninput: (e) => { oninput: (e) => {
query(e.target.value); query(e.target.value);
if (isFn(value)) if (_(value))
value(e.target.value); value(e.target.value);
} }
})), })),
@@ -560,8 +584,8 @@ var Calendar = (p) => {
const now = new Date; const now = new Date;
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`; const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
const fmt = (d2) => `${d2.getFullYear()}-${String(d2.getMonth() + 1).padStart(2, "0")}-${String(d2.getDate()).padStart(2, "0")}`; const fmt = (d2) => `${d2.getFullYear()}-${String(d2.getMonth() + 1).padStart(2, "0")}-${String(d2.getDate()).padStart(2, "0")}`;
const rangeMode = () => get(p.range) === true; const rangeMode = () => val(p.range) === true;
const current = () => get(p.value); const current = () => val(p.value);
const selectDate = (date) => { const selectDate = (date) => {
const s = fmt(date); const s = fmt(date);
const v2 = current(); const v2 = current();
@@ -592,7 +616,7 @@ var Calendar = (p) => {
const HourSlider = ({ value: hVal, onChange: onH }) => A("div", { class: "flex-1" }, [ const HourSlider = ({ value: hVal, onChange: onH }) => A("div", { class: "flex-1" }, [
A("div", { class: "flex gap-2 items-center" }, [ A("div", { class: "flex gap-2 items-center" }, [
A("input", { type: "range", min: 0, max: 23, value: hVal, class: "range range-xs flex-1", oninput: (e) => onH(+e.target.value) }), A("input", { type: "range", min: 0, max: 23, value: hVal, class: "range range-xs flex-1", oninput: (e) => onH(+e.target.value) }),
A("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(get(hVal)).padStart(2, "0") + ":00") A("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(val(hVal)).padStart(2, "0") + ":00")
]) ])
]); ]);
return A("div", { return A("div", {
@@ -663,7 +687,7 @@ var ChatHeader = (p, c) => A("div", { ...p, class: cls("chat-header", p.class) }
var ChatImage = (p, c) => A("div", { ...p, class: cls("chat-image avatar", p.class) }, A("div", { class: "w-10 rounded-full" }, typeof c === "string" ? A("img", { src: c, alt: "avatar" }) : c)); var ChatImage = (p, c) => A("div", { ...p, class: cls("chat-image avatar", p.class) }, A("div", { class: "w-10 rounded-full" }, typeof c === "string" ? A("img", { src: c, alt: "avatar" }) : c));
var Checkbox = (p) => A("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) }); var Checkbox = (p) => A("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) });
var Colorpicker = (p) => { var Colorpicker = (p) => {
const current = () => get(p.value) || "#000000"; const current = () => val(p.value) || "#000000";
return Dropdown({}, [ return Dropdown({}, [
DropdownButton({ class: "btn" }, [ DropdownButton({ class: "btn" }, [
A("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }), A("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
@@ -672,13 +696,13 @@ var Colorpicker = (p) => {
DropdownContent({ class: "p-0" }, ColorPalette({ DropdownContent({ class: "p-0" }, ColorPalette({
value: p.value, value: p.value,
onchange: (c) => { onchange: (c) => {
isFn(p.value) ? p.value(c) : p.onchange?.(c); _(p.value) ? p.value(c) : p.onchange?.(c);
} }
})) }))
]); ]);
}; };
var ColorPalette = (p) => { var ColorPalette = (p) => {
const current = () => get(p.value) || "#000000"; const current = () => val(p.value) || "#000000";
const palette = [ const palette = [
"#000", "#000",
"#1A1A1A", "#1A1A1A",
@@ -746,7 +770,7 @@ var ColorPalette = (p) => {
"#fae8ff" "#fae8ff"
]; ];
const pick = (c) => { const pick = (c) => {
isFn(p.value) ? p.value(c) : p.onchange?.(c); _(p.value) ? p.value(c) : p.onchange?.(c);
hide(); hide();
}; };
return A("div", { return A("div", {
@@ -765,9 +789,9 @@ var ColorPalette = (p) => {
}; };
var Datepicker = (p) => { var Datepicker = (p) => {
const displayValue = P(""); const displayValue = P("");
const rangeMode = () => get(p.range) === true; const rangeMode = () => val(p.range) === true;
T(() => { C(() => {
const v2 = get(p.value); const v2 = val(p.value);
if (!v2) if (!v2)
return displayValue(""); return displayValue("");
let text = ""; let text = "";
@@ -783,12 +807,12 @@ var Datepicker = (p) => {
} }
displayValue(text); displayValue(text);
}); });
const handleChange = (val) => { const handleChange = (val2) => {
if (isFn(p.value)) if (_(p.value))
p.value(val); p.value(val2);
else else
p.onChange?.(val); p.onChange?.(val2);
if (!rangeMode() || val?.end != null) if (!rangeMode() || val2?.end != null)
hide(); hide();
}; };
return Dropdown({ class: cls("w-full", p.class) }, [ return Dropdown({ class: cls("w-full", p.class) }, [
@@ -807,7 +831,7 @@ var Datepicker = (p) => {
onmousedown: (e) => { onmousedown: (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (isFn(p.value)) if (_(p.value))
p.value(null); p.value(null);
else else
p.onChange?.(null); p.onChange?.(null);
@@ -824,7 +848,7 @@ var Datepicker = (p) => {
]); ]);
}; };
var Drawer = (p, c) => div({ ...p, class: cls("drawer", p.class) }, c); var Drawer = (p, c) => div({ ...p, class: cls("drawer", p.class) }, c);
var DrawerToggle = (p) => input({ ...p, type: "checkbox", class: "drawer-toggle", checked: () => get(p.checked), onchange: (e) => isFn(p.checked) && p.checked(e.target.checked) }); var DrawerToggle = (p) => input({ ...p, type: "checkbox", class: "drawer-toggle", checked: () => val(p.checked), onchange: (e) => _(p.checked) && p.checked(e.target.checked) });
var DrawerContent = (p, c) => div({ ...p, class: cls("drawer-content", p.class) }, c); var DrawerContent = (p, c) => div({ ...p, class: cls("drawer-content", p.class) }, c);
var DrawerSide = (p, c) => div({ ...p, class: cls("drawer-side", p.class) }, c); var DrawerSide = (p, c) => div({ ...p, class: cls("drawer-side", p.class) }, c);
var DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls("drawer-overlay", p.class) }); var DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls("drawer-overlay", p.class) });
@@ -848,17 +872,17 @@ var Fileinput = (p) => {
} }
const updated = [...files(), ...arr]; const updated = [...files(), ...arr];
files(updated); files(updated);
if (isFn(p.onselect)) if (_(p.onselect))
p.onselect(updated); p.onselect(updated);
else if (isFn(p.value)) else if (_(p.value))
p.value(updated); p.value(updated);
}; };
const remove = (idx) => { const remove = (idx) => {
const updated = files().filter((_2, i) => i !== idx); const updated = files().filter((_2, i) => i !== idx);
files(updated); files(updated);
if (isFn(p.onselect)) if (_(p.onselect))
p.onselect(updated); p.onselect(updated);
else if (isFn(p.value)) else if (_(p.value))
p.value(updated); p.value(updated);
}; };
return A("div", { class: cls("fieldset w-full p-0", p.class) }, [ return A("div", { class: cls("fieldset w-full p-0", p.class) }, [
@@ -913,7 +937,7 @@ var Input = (p) => {
const showPassword = P(false); const showPassword = P(false);
const isPassword = p.type === "password"; const isPassword = p.type === "password";
const pattern = rule ?? null; const pattern = rule ?? null;
const inputType = () => isPassword ? get(showPassword) ? "text" : "password" : p.type || "search"; const inputType = () => isPassword ? val(showPassword) ? "text" : "password" : p.type || "search";
return A("label", { class: float ? "floating-label" : "" }, [ return A("label", { class: float ? "floating-label" : "" }, [
float ? A("span", {}, label2) : null, float ? A("span", {}, label2) : null,
A("label", { pattern, class: () => cls("input validator", p.class) }, [ A("label", { pattern, class: () => cls("input validator", p.class) }, [
@@ -932,7 +956,7 @@ var Input = (p) => {
}; };
var Kbd = (p, c) => A("kbd", { ...p, class: cls("kbd", p.class) }, c); var Kbd = (p, c) => A("kbd", { ...p, class: cls("kbd", p.class) }, c);
var List = (p, c) => A("ul", { ...p, class: cls("list", p.class) }, c); var List = (p, c) => A("ul", { ...p, class: cls("list", p.class) }, c);
var ListRows = (p) => () => (get(p.items) || []).map((item, idx) => A("li", { class: cls("list-row", p.class, item?.class) }, typeof p.render === "function" ? p.render(item, idx) : item)); var ListRows = (p) => () => (val(p.items) || []).map((item, idx) => A("li", { class: cls("list-row", p.class, item?.class) }, typeof p.render === "function" ? p.render(item, idx) : item));
var Loading = (p, c) => A("span", { ...p, class: cls("loading loading-spinner", p.class) }, c); var Loading = (p, c) => A("span", { ...p, class: cls("loading loading-spinner", p.class) }, c);
var Menu = (p) => { var Menu = (p) => {
if (p.children !== undefined) if (p.children !== undefined)
@@ -940,7 +964,7 @@ var Menu = (p) => {
const { items } = p; const { items } = p;
const render = (item) => item.children ? A("li", {}, A("details", { open: item.open || undefined }, [ const render = (item) => item.children ? A("li", {}, A("details", { open: item.open || undefined }, [
A("summary", {}, getBy(item)), A("summary", {}, getBy(item)),
A("ul", {}, H(() => get(item.children) || [], render)) A("ul", {}, H(() => val(item.children) || [], render))
])) : A("li", {}, A("a", { ])) : A("li", {}, A("a", {
href: item.href, href: item.href,
onclick: item.onclick ? (e) => { onclick: item.onclick ? (e) => {
@@ -949,17 +973,17 @@ var Menu = (p) => {
item.onclick(e); item.onclick(e);
} : null } : null
}, getBy(item))); }, getBy(item)));
return A("ul", { class: cls("menu", p.class) }, H(() => get(items) || [], render)); return A("ul", { class: cls("menu", p.class) }, H(() => val(items) || [], render));
}; };
var Modal = (p) => { var Modal = (p) => {
let dialogRef = null; let dialogRef = null;
T(() => { C(() => {
const isOpen = get(p.open); const isOpen = val(p.open);
if (!dialogRef) if (!dialogRef)
return; return;
isOpen ? dialogRef.showModal() : dialogRef.hide(); isOpen ? dialogRef.showModal() : dialogRef.hide();
}); });
const close = () => isFn(p.open) && p.open(false); const close = () => _(p.open) && p.open(false);
return A("dialog", { return A("dialog", {
...p, ...p,
ref: (el) => dialogRef = el, ref: (el) => dialogRef = el,
@@ -981,17 +1005,17 @@ var Modal = (p) => {
}; };
var Navbar = (p, c) => A("div", { ...p, class: cls("navbar", p.class) }, c); var Navbar = (p, c) => A("div", { ...p, class: cls("navbar", p.class) }, c);
var Progress = (p) => A("progress", { ...p, class: cls("progress", p.class) }); var Progress = (p) => A("progress", { ...p, class: cls("progress", p.class) });
var Radial = (p, c) => A("div", { class: cls("radial-progress", p.class), style: `--value:${get(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c); var Radial = (p, c) => A("div", { class: cls("radial-progress", p.class), style: `--value:${val(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c);
var Radio = (p) => A("input", { ...p, type: "radio", class: cls("radio", p.class) }); var Radio = (p) => A("input", { ...p, type: "radio", class: cls("radio", p.class) });
var Range = (p) => A("input", { ...p, type: "range", class: cls("range", p.class) }); var Range = (p) => A("input", { ...p, type: "range", class: cls("range", p.class) });
var Rating = (p, c) => A("div", { ...p, class: "rating" }, c); var Rating = (p, c) => A("div", { ...p, class: "rating" }, c);
var RatingItems = (p) => [...Array(p.count)].map((_2, i) => A("input", { class: cls("mask", p.class), name: p.name, type: "radio", checked: () => get(p.value) === i, onchange: () => isFn(p.value) ? p.value(i) : p.onchange?.(i) })); var RatingItems = (p) => [...Array(p.count)].map((_2, i) => A("input", { class: cls("mask", p.class), name: p.name, type: "radio", checked: () => val(p.value) === i, onchange: () => _(p.value) ? p.value(i) : p.onchange?.(i) }));
var Select = (p, c) => { var Select = (p, c) => {
if (c !== undefined) if (c !== undefined)
return A("select", { class: cls("select", p.class), ...p }, c); return A("select", { class: cls("select", p.class), ...p }, c);
const { label: label2, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p; const { label: label2, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p;
const opts = () => { const opts = () => {
const raw = get(items) || []; const raw = val(items) || [];
const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: "" }] : []; const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: "" }] : [];
return [...ph, ...raw]; return [...ph, ...raw];
}; };
@@ -1001,12 +1025,12 @@ var Select = (p, c) => {
!float && label2 ? A("span", { class: "label" }, label2) : null, !float && label2 ? A("span", { class: "label" }, label2) : null,
left ?? null, left ?? null,
A("select", { A("select", {
value: () => get(value), value: () => val(value),
onchange: (e) => isFn(value) ? value(e.target.value) : rest.onchange?.(e) onchange: (e) => _(value) ? value(e.target.value) : rest.onchange?.(e)
}, H(opts, (item) => { }, H(opts, (item) => {
const val = getBy(item, item.value !== undefined ? "value" : undefined); const val2 = getBy(item, item.value !== undefined ? "value" : undefined);
const lab = getBy(item, "label"); const lab = getBy(item, "label");
return A("option", { value: val, disabled: item.disabled || undefined }, lab); return A("option", { value: val2, disabled: item.disabled || undefined }, lab);
})), })),
right ?? null right ?? null
]), ]),
@@ -1025,14 +1049,14 @@ var Stat = (p) => A("div", { ...p, class: cls("stat", p.class) }, [
var Steps = (p, c) => A("ul", { ...p, class: cls("steps", p.class) }, c); var Steps = (p, c) => A("ul", { ...p, class: cls("steps", p.class) }, c);
var Step = (p, c) => A("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c); var Step = (p, c) => A("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
var Swap = (p, c) => A("label", { ...p, class: cls("swap", p.class) }, c); var Swap = (p, c) => A("label", { ...p, class: cls("swap", p.class) }, c);
var SwapToggle = (p) => A("input", { type: "checkbox", checked: () => get(p.value), onchange: (e) => isFn(p.value) && p.value(e.target.checked), class: p.class }); var SwapToggle = (p) => A("input", { type: "checkbox", checked: () => val(p.value), onchange: (e) => _(p.value) && p.value(e.target.checked), class: p.class });
var SwapOn = (p, c) => A("div", { ...p, class: cls("swap-on", p.class) }, c); var SwapOn = (p, c) => A("div", { ...p, class: cls("swap-on", p.class) }, c);
var SwapOff = (p, c) => A("div", { ...p, class: cls("swap-off", p.class) }, c); var SwapOff = (p, c) => A("div", { ...p, class: cls("swap-off", p.class) }, c);
var Table = (p, c) => A("table", { ...p, class: cls("table", p.class) }, c); var Table = (p, c) => A("table", { ...p, class: cls("table", p.class) }, c);
var TableItems = ({ items, columns = [], header = true }) => { var TableItems = ({ items, columns = [], header = true }) => {
const head = header !== false && columns.some((c) => c.label) ? A("thead", {}, A("tr", {}, columns.map((c) => A("th", { class: c.class }, c.label)))) : null; const head = header !== false && columns.some((c) => c.label) ? A("thead", {}, A("tr", {}, columns.map((c) => A("th", { class: c.class }, c.label)))) : null;
const body = A("tbody", {}, () => { const body = A("tbody", {}, () => {
const list = get(items) || []; const list = val(items) || [];
return list.map((it, idx) => A("tr", {}, columns.map((c) => { return list.map((it, idx) => A("tr", {}, columns.map((c) => {
const v2 = c.render ? c.render(it, idx) : it[c.key]; const v2 = c.render ? c.render(it, idx) : it[c.key];
return A("td", { class: c.class }, v2); return A("td", { class: c.class }, v2);
@@ -1046,16 +1070,16 @@ var Tabs = (p, c) => {
return A("div", { ...rest2, class: cls("tabs", className2) }, c); return A("div", { ...rest2, class: cls("tabs", className2) }, c);
} }
const { items, activeIndex, onClose, class: className, ...rest } = p; const { items, activeIndex, onClose, class: className, ...rest } = p;
const get2 = (x2) => isFn(x2) ? x2() : x2; const get = (x2) => _(x2) ? x2() : x2;
const closeH = onClose || (isFn(items) ? (idx, item) => { const closeH = onClose || (_(items) ? (idx, item) => {
const arr = get2(items); const arr = val(items);
const newArr = arr.filter((_2, i) => i !== idx); const newArr = arr.filter((_2, i) => i !== idx);
items(newArr); items(newArr);
if (activeIndex() >= newArr.length) if (activeIndex() >= newArr.length)
activeIndex(Math.max(0, newArr.length - 1)); activeIndex(Math.max(0, newArr.length - 1));
} : null); } : null);
return A("div", { ...rest, class: cls("tabs", className) }, () => { return A("div", { ...rest, class: cls("tabs", className) }, () => {
const list = get2(items) || []; const list = val(items) || [];
return list.flatMap((it, idx) => { return list.flatMap((it, idx) => {
const isActive = () => activeIndex() === idx; const isActive = () => activeIndex() === idx;
const button = A("button", { const button = A("button", {
@@ -1078,7 +1102,7 @@ var Tabs = (p, c) => {
const contentDiv = A("div", { const contentDiv = A("div", {
class: "tab-content bg-base-100 border-base-300 p-6", class: "tab-content bg-base-100 border-base-300 p-6",
style: () => `display: ${isActive() ? "block" : "none"};` style: () => `display: ${isActive() ? "block" : "none"};`
}, isFn(it.content) ? it.content() : it.content); }, _(it.content) ? it.content() : it.content);
return [button, contentDiv]; return [button, contentDiv];
}); });
}); });
@@ -1115,7 +1139,7 @@ var Toast = (message, type = "alert-success", duration = 3500) => {
}, 300); }, 300);
}; };
enterTimer = setTimeout(() => visible(true), 0); enterTimer = setTimeout(() => visible(true), 0);
const content = typeof message === "function" ? get(message) : message; const content = typeof message === "function" ? val(message) : message;
const msgNode = typeof content === "string" ? A("span", {}, content) : content; const msgNode = typeof content === "string" ? A("span", {}, content) : content;
return A("div", { return A("div", {
class: () => { class: () => {
@@ -1141,12 +1165,6 @@ var Toast = (message, type = "alert-success", duration = 3500) => {
}; };
var Toggle = (p) => A("input", { ...p, type: "checkbox", class: cls("toggle", p.class) }); var Toggle = (p) => A("input", { ...p, type: "checkbox", class: cls("toggle", p.class) });
var Tooltip = (p, c) => A("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c); var Tooltip = (p, c) => A("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c);
// sigpro-editor.js
var exports_sigpro_editor = {};
__export(exports_sigpro_editor, {
Editor: () => Editor
});
var Editor = (p) => { var Editor = (p) => {
const { value, class: extraClass } = p; const { value, class: extraClass } = p;
let editorRef = null; let editorRef = null;
@@ -1178,19 +1196,19 @@ var Editor = (p) => {
if (!editorRef) if (!editorRef)
return; return;
const html = editorRef.innerHTML; const html = editorRef.innerHTML;
if (isFn(value)) if (_(value))
value(html); value(html);
else else
p.onchange?.(html); p.onchange?.(html);
triggerRefresh(); triggerRefresh();
}; };
const exec = (cmd, val = null) => { const exec = (cmd, val2 = null) => {
if (!editorRef) if (!editorRef)
return; return;
editorRef.focus(); editorRef.focus();
if (savedRange) if (savedRange)
restoreSelection(); restoreSelection();
document.execCommand(cmd, false, val); document.execCommand(cmd, false, val2);
savedRange = null; savedRange = null;
notify(); notify();
}; };
@@ -1219,7 +1237,7 @@ var Editor = (p) => {
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}; };
const queryState = (cmd, val = null) => { const queryState = (cmd, val2 = null) => {
refreshTick(); refreshTick();
if (!editorRef || isSource()) if (!editorRef || isSource())
return false; return false;
@@ -1227,7 +1245,7 @@ var Editor = (p) => {
if (cmd === "formatBlock") { if (cmd === "formatBlock") {
let node = window.getSelection().getRangeAt(0).commonAncestorContainer; let node = window.getSelection().getRangeAt(0).commonAncestorContainer;
while (node && node !== editorRef) { while (node && node !== editorRef) {
if (node.nodeType === 1 && node.tagName === val) if (node.nodeType === 1 && node.tagName === val2)
return true; return true;
node = node.parentNode; node = node.parentNode;
} }
@@ -1323,7 +1341,7 @@ var Editor = (p) => {
ref: (el) => { ref: (el) => {
if (!editorRef && el) { if (!editorRef && el) {
editorRef = el; editorRef = el;
el.innerHTML = get(value) || ""; el.innerHTML = val(value) || "";
document.execCommand("defaultParagraphSeparator", false, "br"); document.execCommand("defaultParagraphSeparator", false, "br");
el.addEventListener("click", (e) => { el.addEventListener("click", (e) => {
const container = e.target.closest(".resizable-img-container"); const container = e.target.closest(".resizable-img-container");
@@ -1387,42 +1405,10 @@ var Editor = (p) => {
]); ]);
}; };
// sigpro-locale.js
var i18n = {
es: {
close: "Cerrar",
confirm: "Confirmar",
cancel: "Cancelar",
search: "Buscar...",
loading: "Cargando...",
nodata: "Sin datos"
},
en: {
close: "Close",
confirm: "Confirm",
cancel: "Cancel",
search: "Search...",
loading: "Loading...",
nodata: "No data"
}
};
var currentLocale = P("es");
var Locale = (t) => currentLocale(t);
var tt = (t) => () => i18n[currentLocale()][t] || t;
// index.js // index.js
var Components = { var Components = { ...exports_sigpro_ui };
...exports_sigpro_ui,
...exports_sigpro_editor
};
var Utils = {
Locale,
tt,
hide,
get
};
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => { Object.entries({ ...Components }).forEach(([name, value]) => {
Object.defineProperty(window, name, { Object.defineProperty(window, name, {
value, value,
writable: false, writable: false,
@@ -1432,6 +1418,5 @@ if (typeof window !== "undefined") {
}); });
} }
export { export {
Utils,
Components Components
}; };

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

File diff suppressed because one or more lines are too long

349
dist/sigpro-ui.js vendored
View File

@@ -40,13 +40,16 @@
// index.js // index.js
var exports_sigpro_ui2 = {}; var exports_sigpro_ui2 = {};
__export(exports_sigpro_ui2, { __export(exports_sigpro_ui2, {
Utils: () => Utils,
Components: () => Components Components: () => Components
}); });
// sigpro-ui.js // sigpro-ui.js
var exports_sigpro_ui = {}; var exports_sigpro_ui = {};
__export(exports_sigpro_ui, { __export(exports_sigpro_ui, {
tt: () => tt,
i18n: () => i18n,
hide: () => hide,
currentLocale: () => currentLocale,
Tooltip: () => Tooltip, Tooltip: () => Tooltip,
Toggle: () => Toggle, Toggle: () => Toggle,
Toast: () => Toast, Toast: () => Toast,
@@ -77,6 +80,7 @@
Navbar: () => Navbar, Navbar: () => Navbar,
Modal: () => Modal, Modal: () => Modal,
Menu: () => Menu, Menu: () => Menu,
Locale: () => Locale,
Loading: () => Loading, Loading: () => Loading,
ListRows: () => ListRows, ListRows: () => ListRows,
List: () => List, List: () => List,
@@ -87,6 +91,7 @@
Fileinput: () => Fileinput, Fileinput: () => Fileinput,
Fieldset: () => Fieldset, Fieldset: () => Fieldset,
Fab: () => Fab, Fab: () => Fab,
Editor: () => Editor,
DropdownContent: () => DropdownContent, DropdownContent: () => DropdownContent,
DropdownButton: () => DropdownButton, DropdownButton: () => DropdownButton,
Dropdown: () => Dropdown, Dropdown: () => Dropdown,
@@ -123,23 +128,23 @@
}); });
// node_modules/sigpro/dist/sigpro.esm.min.js // node_modules/sigpro/dist/sigpro.esm.min.js
var w = (e) => typeof e === "function"; var _ = (e) => typeof e === "function";
var B = (e) => e && typeof e === "object"; var O = (e) => e && typeof e === "object";
var g = Array.isArray; var b = Array.isArray;
var E = typeof document < "u" ? document : null; var E = typeof document < "u" ? document : null;
var V = (e) => e?._isRuntime ? e.container : e instanceof Node ? e : E.createTextNode(e == null ? "" : String(e)); var V = (e) => e?._isRuntime ? e.container : e instanceof Node ? e : E.createTextNode(e == null ? "" : String(e));
var d = null; var d = null;
var _ = null; var m = null;
var N = false; var v = false;
var R = 0; var R = 0;
var O = new Set; var T = new Set;
var I = new WeakMap; var I = new WeakMap;
var j = Symbol("iter"); var k = Symbol("iter");
var k = new WeakMap; var L = new WeakMap;
var W = "http://www.w3.org/2000/svg"; var W = "http://www.w3.org/2000/svg";
var M = "http://www.w3.org/1999/xlink"; var M = "http://www.w3.org/1999/xlink";
var q = new Set("svg,path,circle,rect,line,polyline,polygon,g,defs,text,textPath,tspan,use,symbol,image,marker,ellipse".split(",")); var q = new Set("svg,path,circle,rect,line,polyline,polygon,g,defs,text,textPath,tspan,use,symbol,image,marker,ellipse".split(","));
var b = (e) => { var g = (e) => {
if (!e || e._disposed) if (!e || e._disposed)
return; return;
e._disposed = true; e._disposed = true;
@@ -154,9 +159,9 @@
n._deps.forEach((r) => r.delete(n)), n._deps.clear(); n._deps.forEach((r) => r.delete(n)), n._deps.clear();
} }
}; };
var v = (e) => { var S = (e) => {
if (_) if (m)
(_._cleanups ||= new Set).add(e); (m._cleanups ||= new Set).add(e);
}; };
var K = (e) => { var K = (e) => {
let s = d; let s = d;
@@ -175,41 +180,41 @@
n._deps.forEach((i) => i.delete(n)); n._deps.forEach((i) => i.delete(n));
if (n._cleanups) if (n._cleanups)
n._cleanups.forEach((i) => i()), n._cleanups.clear(); n._cleanups.forEach((i) => i()), n._cleanups.clear();
let r = d, o = _; let r = d, o = m;
d = _ = n; d = m = n;
try { try {
return n._result = e(); return n._result = e();
} catch (i) { } catch (i) {
console.error("[SigPro]", i); console.error("[SigPro]", i);
} finally { } finally {
d = r, _ = o; d = r, m = o;
} }
}; };
if (n._deps = n._cleanups = n._children = null, n._disposed = false, n._isComputed = s, n._depth = d ? d._depth + 1 : 0, n._mounts = [], n._parent = _, _) if (n._deps = n._cleanups = n._children = null, n._disposed = false, n._isComputed = s, n._depth = d ? d._depth + 1 : 0, n._mounts = [], n._parent = m, m)
(_._children ||= new Set).add(n); (m._children ||= new Set).add(n);
return n; return n;
}; };
var $ = () => { var $ = () => {
if (N) if (v)
return; return;
N = true; v = true;
let e = Array.from(O).sort((s, n) => s._depth - n._depth); let e = Array.from(T).sort((s, n) => s._depth - n._depth);
O.clear(); T.clear();
for (let s of e) for (let s of e)
if (!s._disposed) if (!s._disposed)
s(); s();
N = false; v = false;
}; };
var z = (e) => { var z = (e) => {
R++; R++;
try { try {
return e(); return e();
} finally { } finally {
if (R--, R === 0 && O.size > 0 && !N) if (R--, R === 0 && T.size > 0 && !v)
$(); $();
} }
}; };
var m = (e, s = false) => { var w = (e, s = false) => {
if (!s && d && !d._disposed) if (!s && d && !d._disposed)
e.add(d), (d._deps ||= new Set).add(e); e.add(d), (d._deps ||= new Set).add(e);
else if (s && e.size > 0) { else if (s && e.size > 0) {
@@ -219,17 +224,17 @@
continue; continue;
if (r._isComputed) { if (r._isComputed) {
if (r._dirty = true, r._subs) if (r._dirty = true, r._subs)
m(r._subs, true); w(r._subs, true);
} else } else
O.add(r), n = true; T.add(r), n = true;
} }
if (n && !N && R === 0) if (n && !v && R === 0)
queueMicrotask($); queueMicrotask($);
} }
}; };
var P = (e, s = null) => { var P = (e, s = null) => {
let n = new Set; let n = new Set;
if (w(e)) { if (_(e)) {
let r, o = () => { let r, o = () => {
if (o._dirty) { if (o._dirty) {
let i = d; let i = d;
@@ -237,13 +242,13 @@
try { try {
let t = e(); let t = e();
if (!Object.is(r, t)) if (!Object.is(r, t))
r = t, m(n, true); r = t, w(n, true);
} finally { } finally {
d = i; d = i;
} }
o._dirty = false; o._dirty = false;
} }
return m(n), r; return w(n), r;
}; };
return o._isComputed = true, o._subs = n, o._dirty = true, o._deps = null, o._disposed = false, o; return o._isComputed = true, o._subs = n, o._dirty = true, o._deps = null, o._disposed = false, o;
} }
@@ -253,18 +258,18 @@
} catch (r) {} } catch (r) {}
return (...r) => { return (...r) => {
if (r.length) { if (r.length) {
let o = w(r[0]) ? r[0](e) : r[0]; let o = _(r[0]) ? r[0](e) : r[0];
if (!Object.is(e, o)) { if (!Object.is(e, o)) {
if (e = o, s) if (e = o, s)
localStorage.setItem(s, JSON.stringify(e)); localStorage.setItem(s, JSON.stringify(e));
m(n, true); w(n, true);
} }
} }
return m(n), e; return w(n), e;
}; };
}; };
var D = (e) => { var D = (e) => {
if (!B(e)) if (!O(e))
return e; return e;
let s = I.get(e); let s = I.get(e);
if (s) if (s)
@@ -276,35 +281,35 @@
return t; return t;
}, o = new Proxy(e, { get(i, t, c) { }, o = new Proxy(e, { get(i, t, c) {
if (typeof t !== "symbol") if (typeof t !== "symbol")
m(r(t)); w(r(t));
return D(Reflect.get(i, t, c)); return D(Reflect.get(i, t, c));
}, set(i, t, c, l) { }, set(i, t, c, l) {
let a = Reflect.has(i, t), f = Reflect.get(i, t, l), u = Reflect.set(i, t, c, l); let a = Reflect.has(i, t), f = Reflect.get(i, t, l), u = Reflect.set(i, t, c, l);
if (u && !Object.is(f, c)) { if (u && !Object.is(f, c)) {
if (m(r(t), true), !a) if (w(r(t), true), !a)
m(r(j), true); w(r(k), true);
} }
return u; return u;
}, deleteProperty(i, t) { }, deleteProperty(i, t) {
let c = Reflect.deleteProperty(i, t); let c = Reflect.deleteProperty(i, t);
if (c) if (c)
m(r(t), true), m(r(j), true); w(r(t), true), w(r(k), true);
return c; return c;
}, ownKeys(i) { }, ownKeys(i) {
return m(r(j)), Reflect.ownKeys(i); return w(r(k)), Reflect.ownKeys(i);
} }); } });
return I.set(e, o), o; return I.set(e, o), o;
}; };
var T = (e, s) => { var C = (e, s) => {
if (s === undefined) { if (s === undefined) {
let r = x(e); let r = x(e);
return r(), () => b(r); return r(), () => g(r);
} }
let n = x(() => { let n = x(() => {
let r = Array.isArray(e) ? e.map((o) => o()) : e(); let r = Array.isArray(e) ? e.map((o) => o()) : e();
K(() => s(r)); K(() => s(r));
}); });
return n(), () => b(n); return n(), () => g(n);
}; };
var U = (e) => { var U = (e) => {
if (!e) if (!e)
@@ -312,14 +317,14 @@
if (e._cleanups) if (e._cleanups)
e._cleanups.forEach((s) => s()), e._cleanups.clear(); e._cleanups.forEach((s) => s()), e._cleanups.clear();
if (e._ownerEffect) if (e._ownerEffect)
b(e._ownerEffect); g(e._ownerEffect);
if (e.childNodes) if (e.childNodes)
e.childNodes.forEach((s) => U(s)); e.childNodes.forEach((s) => U(s));
}; };
var J = /^\s*(javascript|data|vbscript):/i; var J = /^\s*(javascript|data|vbscript):/i;
var Q = new Set(["src", "href", "formaction", "action", "background", "code", "archive"]); var Q = new Set(["src", "href", "formaction", "action", "background", "code", "archive"]);
var X = (e) => Q.has(e) || e.startsWith("on"); var X = (e) => Q.has(e) || e.startsWith("on");
var L = (e, s) => { var B = (e, s) => {
if (s == null || s === false) if (s == null || s === false)
return null; return null;
if (X(e)) { if (X(e)) {
@@ -330,9 +335,9 @@
return s; return s;
}; };
var A = (e, s = {}, n = []) => { var A = (e, s = {}, n = []) => {
if (s instanceof Node || g(s) || !B(s)) if (s instanceof Node || b(s) || !O(s))
n = s, s = {}; n = s, s = {};
if (w(e)) { if (_(e)) {
let t = x(() => { let t = x(() => {
let f = e(s, { children: n, emit: (u, ...h) => s[`on${u[0].toUpperCase()}${u.slice(1)}`]?.(...h) }); let f = e(s, { children: n, emit: (u, ...h) => s[`on${u[0].toUpperCase()}${u.slice(1)}`]?.(...h) });
return t._result = f, f; return t._result = f, f;
@@ -341,22 +346,22 @@
let c = t._result; let c = t._result;
if (c == null) if (c == null)
return null; return null;
let l = c instanceof Node || g(c) && c.every((f) => f instanceof Node) ? c : E.createTextNode(String(c)), a = (f) => { let l = c instanceof Node || b(c) && c.every((f) => f instanceof Node) ? c : E.createTextNode(String(c)), a = (f) => {
if (B(f) && !f._isRuntime) if (O(f) && !f._isRuntime)
f._mounts = t._mounts || [], f._cleanups = t._cleanups || new Set, f._ownerEffect = t; f._mounts = t._mounts || [], f._cleanups = t._cleanups || new Set, f._ownerEffect = t;
}; };
return g(l) ? l.forEach(a) : a(l), l; return b(l) ? l.forEach(a) : a(l), l;
} }
let r = q.has(e), o = r ? E.createElementNS(W, e) : E.createElement(e); let r = q.has(e), o = r ? E.createElementNS(W, e) : E.createElement(e);
o._cleanups = new Set; o._cleanups = new Set;
for (let t of Object.keys(s)) { for (let t of Object.keys(s)) {
let c = s[t]; let c = s[t];
if (t === "ref") { if (t === "ref") {
w(c) ? c(o) : c.current = o; _(c) ? c(o) : c.current = o;
continue; continue;
} }
if (r && t.startsWith("xlink:")) { if (r && t.startsWith("xlink:")) {
let l = L(t.slice(6), c); let l = B(t.slice(6), c);
l == null ? o.removeAttributeNS(M, t.slice(6)) : o.setAttributeNS(M, t.slice(6), l); l == null ? o.removeAttributeNS(M, t.slice(6)) : o.setAttributeNS(M, t.slice(6), l);
continue; continue;
} }
@@ -364,10 +369,10 @@
let l = t.slice(2).toLowerCase(); let l = t.slice(2).toLowerCase();
o.addEventListener(l, c); o.addEventListener(l, c);
let a = () => o.removeEventListener(l, c); let a = () => o.removeEventListener(l, c);
o._cleanups.add(a), v(a); o._cleanups.add(a), S(a);
} else if (w(c)) { } else if (_(c)) {
let l = x(() => { let l = x(() => {
let a = L(t, c()); let a = B(t, c());
if (t === "class") if (t === "class")
o.className = a || ""; o.className = a || "";
else if (a == null) else if (a == null)
@@ -379,12 +384,12 @@
else else
o.setAttribute(t, a === true ? "" : a); o.setAttribute(t, a === true ? "" : a);
}); });
if (l(), o._cleanups.add(() => b(l)), v(() => b(l)), /^(INPUT|TEXTAREA|SELECT)$/.test(o.tagName) && (t === "value" || t === "checked")) { if (l(), o._cleanups.add(() => g(l)), S(() => g(l)), /^(INPUT|TEXTAREA|SELECT)$/.test(o.tagName) && (t === "value" || t === "checked")) {
let a = t === "checked" ? "change" : "input"; let a = t === "checked" ? "change" : "input";
o.addEventListener(a, (f) => c(f.target[t])); o.addEventListener(a, (f) => c(f.target[t]));
} }
} else { } else {
let l = L(t, c); let l = B(t, c);
if (l != null) if (l != null)
if (t === "style" && typeof l === "string") if (t === "style" && typeof l === "string")
o.setAttribute("style", l); o.setAttribute("style", l);
@@ -395,13 +400,13 @@
} }
} }
let i = (t) => { let i = (t) => {
if (g(t)) if (b(t))
return t.forEach(i); return t.forEach(i);
if (w(t)) { if (_(t)) {
let c = E.createTextNode(""); let c = E.createTextNode("");
o.appendChild(c); o.appendChild(c);
let l = [], a = x(() => { let l = [], a = x(() => {
let f = t(), u = (g(f) ? f : [f]).map(V); let f = t(), u = (b(f) ? f : [f]).map(V);
l.forEach((p) => { l.forEach((p) => {
if (p._isRuntime) if (p._isRuntime)
p.destroy(); p.destroy();
@@ -421,7 +426,7 @@
} }
l = u; l = u;
}); });
a(), o._cleanups.add(() => b(a)), v(() => b(a)); a(), o._cleanups.add(() => g(a)), S(() => g(a));
} else { } else {
let c = V(t); let c = V(t);
if (o.appendChild(c), c._mounts) if (o.appendChild(c), c._mounts)
@@ -430,15 +435,15 @@
}; };
return i(n), o; return i(n), o;
}; };
var C = (e) => { var j = (e) => {
let s = new Set, n = _, r = d, o = E.createElement("div"); let s = new Set, n = m, r = d, o = E.createElement("div");
o.style.display = "contents", o.setAttribute("role", "presentation"), _ = { _cleanups: s }, d = null; o.style.display = "contents", o.setAttribute("role", "presentation"), m = { _cleanups: s }, d = null;
let i = (t) => { let i = (t) => {
if (!t) if (!t)
return; return;
if (t._isRuntime) if (t._isRuntime)
s.add(t.destroy), o.appendChild(t.container); s.add(t.destroy), o.appendChild(t.container);
else if (g(t)) else if (b(t))
t.forEach(i); t.forEach(i);
else else
o.appendChild(t instanceof Node ? t : E.createTextNode(String(t == null ? "" : t))); o.appendChild(t instanceof Node ? t : E.createTextNode(String(t == null ? "" : t)));
@@ -446,7 +451,7 @@
try { try {
i(e({ onCleanup: (t) => s.add(t) })); i(e({ onCleanup: (t) => s.add(t) }));
} finally { } finally {
_ = n, d = r; m = n, d = r;
} }
return { _isRuntime: true, container: o, destroy: () => { return { _isRuntime: true, container: o, destroy: () => {
s.forEach((t) => t()), U(o), o.remove(); s.forEach((t) => t()), U(o), o.remove();
@@ -454,22 +459,22 @@
}; };
var F = (e, s, n = null) => { var F = (e, s, n = null) => {
let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = null; let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = null;
return T(() => !!(w(e) ? e() : e), (t) => { return C(() => !!(_(e) ? e() : e), (t) => {
if (i) if (i)
i.destroy(), i = null; i.destroy(), i = null;
let c = t ? s : n; let c = t ? s : n;
if (c) if (c)
i = C(() => w(c) ? c() : c), o.insertBefore(i.container, r); i = j(() => _(c) ? c() : c), o.insertBefore(i.container, r);
}), v(() => i?.destroy()), o; }), S(() => i?.destroy()), o;
}; };
var H = (e, s, n) => { var H = (e, s, n) => {
let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = new Map; let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = new Map;
return T(() => (w(e) ? e() : e) || [], (t) => { return C(() => (_(e) ? e() : e) || [], (t) => {
let c = new Map, l = [], a = t || []; let c = new Map, l = [], a = t || [];
for (let u = 0;u < a.length; u++) { for (let u = 0;u < a.length; u++) {
let h = a[u], p = n ? h?.[n] ?? u : h?.id ?? u, y = i.get(p); let h = a[u], p = n ? h?.[n] ?? u : h?.id ?? u, y = i.get(p);
if (!y) if (!y)
y = C(() => s(h, u)); y = j(() => s(h, u));
else else
i.delete(p); i.delete(p);
c.set(p, y), l.push(y); c.set(p, y), l.push(y);
@@ -485,11 +490,11 @@
i = c; i = c;
}), o; }), o;
}; };
var S = (e) => { var N = (e) => {
let s = () => window.location.hash.slice(1) || "/", n = P(s()), r = () => n(s()); let s = () => window.location.hash.slice(1) || "/", n = P(s()), r = () => n(s());
window.addEventListener("hashchange", r), v(() => window.removeEventListener("hashchange", r)); window.addEventListener("hashchange", r), S(() => window.removeEventListener("hashchange", r));
let o = A("div", { class: "router-hook" }), i = null; let o = A("div", { class: "router-hook" }), i = null;
return T([n], () => { return C([n], () => {
let t = n(), c = e.find((l) => { let t = n(), c = e.find((l) => {
let a = l.path.split("/").filter(Boolean), f = t.split("/").filter(Boolean); let a = l.path.split("/").filter(Boolean), f = t.split("/").filter(Boolean);
return a.length === f.length && a.every((u, h) => u[0] === ":" || u === f[h]); return a.length === f.length && a.every((u, h) => u[0] === ":" || u === f[h]);
@@ -500,38 +505,56 @@
c.path.split("/").filter(Boolean).forEach((a, f) => { c.path.split("/").filter(Boolean).forEach((a, f) => {
if (a[0] === ":") if (a[0] === ":")
l[a.slice(1)] = t.split("/").filter(Boolean)[f]; l[a.slice(1)] = t.split("/").filter(Boolean)[f];
}), S.params(l), i = C(() => w(c.component) ? c.component(l) : c.component), o.replaceChildren(i.container); }), N.params(l), i = j(() => _(c.component) ? c.component(l) : c.component), o.replaceChildren(i.container);
} }
}), o; }), o;
}; };
S.params = P({}); N.params = P({});
S.to = (e) => window.location.hash = e.replace(/^#?\/?/, "#/"); N.to = (e) => window.location.hash = e.replace(/^#?\/?/, "#/");
S.back = () => window.history.back(); N.back = () => window.history.back();
S.path = () => window.location.hash.replace(/^#/, "") || "/"; N.path = () => window.location.hash.replace(/^#/, "") || "/";
var Y = (e, s) => { var Y = (e, s) => {
let n = typeof s === "string" ? E.querySelector(s) : s; let n = typeof s === "string" ? E.querySelector(s) : s;
if (!n) if (!n)
return; return;
if (k.has(n)) if (L.has(n))
k.get(n).destroy(); L.get(n).destroy();
let r = C(w(e) ? e : () => e); let r = j(_(e) ? e : () => e);
return n.replaceChildren(r.container), k.set(n, r), r; return n.replaceChildren(r.container), L.set(n, r), r;
}; };
if (typeof window < "u") if (typeof window < "u")
Object.assign(window, { $: P, $$: D, watch: T, h: A, when: F, each: H, router: S, mount: Y, batch: z }), "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e) => { Object.assign(window, { $: P, $$: D, watch: C, h: A, when: F, each: H, router: N, mount: Y, batch: z, onUnmount: S, isArr: b, isFunc: _, isObj: O }), "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e) => {
window[e] = (s, n) => A(e, s, n); window[e] = (s, n) => A(e, s, n);
}); });
// sigpro-helpers.js // sigpro-ui.js
var get = (val) => typeof val === "function" ? val() : val; var val = (val2) => typeof val2 === "function" ? val2() : val2;
var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item; var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
var cls = (...classes) => classes.filter(Boolean).join(" ").trim(); var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
var isFn = (f) => typeof f === "function"; var filterBy = (items, query, field = "label", q2 = String(query).toLowerCase()) => !query ? val(items) : val(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q2));
var filterBy = (items, query, field = "label", q2 = String(query).toLowerCase()) => !query ? get(items) : get(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q2));
var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`; var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
var hide = () => document.activeElement?.blur(); var hide = () => document.activeElement?.blur();
var i18n = {
// sigpro-ui.js es: {
close: "Cerrar",
confirm: "Confirmar",
cancel: "Cancelar",
search: "Buscar...",
loading: "Cargando...",
nodata: "Sin datos"
},
en: {
close: "Close",
confirm: "Confirm",
cancel: "Cancel",
search: "Search...",
loading: "Loading...",
nodata: "No data"
}
};
var currentLocale = P("en");
var Locale = (t) => currentLocale(t);
var tt = (t) => () => i18n[currentLocale()][t] || t;
var Accordion = (p) => { var Accordion = (p) => {
const name = p.name || rand("acc"); const name = p.name || rand("acc");
return H(p.items, (it) => { return H(p.items, (it) => {
@@ -546,13 +569,13 @@
var Avatar = (p, c) => A("div", { class: "avatar" }, A("div", { class: p.class }, c)); var Avatar = (p, c) => A("div", { class: "avatar" }, A("div", { class: p.class }, c));
var AvatarGroup = (p, c) => A("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c); var AvatarGroup = (p, c) => A("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => { var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
const query = P(get(value) || ""); const query = P(val(value) || "");
const filtered = P(() => filterBy(items, query())); const filtered = P(() => filterBy(items, query()));
const pick = (item) => { const pick = (item) => {
const display = getBy(item); const display = getBy(item);
const actual = typeof item === "string" ? item : item.value; const actual = typeof item === "string" ? item : item.value;
query(display); query(display);
if (isFn(value)) if (_(value))
value(actual); value(actual);
onselect?.(item); onselect?.(item);
hide(); hide();
@@ -565,7 +588,7 @@
left: A("span", { class: "icon-[lucide--search]" }), left: A("span", { class: "icon-[lucide--search]" }),
oninput: (e) => { oninput: (e) => {
query(e.target.value); query(e.target.value);
if (isFn(value)) if (_(value))
value(e.target.value); value(e.target.value);
} }
})), })),
@@ -591,8 +614,8 @@
const now = new Date; const now = new Date;
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`; const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
const fmt = (d2) => `${d2.getFullYear()}-${String(d2.getMonth() + 1).padStart(2, "0")}-${String(d2.getDate()).padStart(2, "0")}`; const fmt = (d2) => `${d2.getFullYear()}-${String(d2.getMonth() + 1).padStart(2, "0")}-${String(d2.getDate()).padStart(2, "0")}`;
const rangeMode = () => get(p.range) === true; const rangeMode = () => val(p.range) === true;
const current = () => get(p.value); const current = () => val(p.value);
const selectDate = (date) => { const selectDate = (date) => {
const s = fmt(date); const s = fmt(date);
const v2 = current(); const v2 = current();
@@ -623,7 +646,7 @@
const HourSlider = ({ value: hVal, onChange: onH }) => A("div", { class: "flex-1" }, [ const HourSlider = ({ value: hVal, onChange: onH }) => A("div", { class: "flex-1" }, [
A("div", { class: "flex gap-2 items-center" }, [ A("div", { class: "flex gap-2 items-center" }, [
A("input", { type: "range", min: 0, max: 23, value: hVal, class: "range range-xs flex-1", oninput: (e) => onH(+e.target.value) }), A("input", { type: "range", min: 0, max: 23, value: hVal, class: "range range-xs flex-1", oninput: (e) => onH(+e.target.value) }),
A("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(get(hVal)).padStart(2, "0") + ":00") A("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(val(hVal)).padStart(2, "0") + ":00")
]) ])
]); ]);
return A("div", { return A("div", {
@@ -694,7 +717,7 @@
var ChatImage = (p, c) => A("div", { ...p, class: cls("chat-image avatar", p.class) }, A("div", { class: "w-10 rounded-full" }, typeof c === "string" ? A("img", { src: c, alt: "avatar" }) : c)); var ChatImage = (p, c) => A("div", { ...p, class: cls("chat-image avatar", p.class) }, A("div", { class: "w-10 rounded-full" }, typeof c === "string" ? A("img", { src: c, alt: "avatar" }) : c));
var Checkbox = (p) => A("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) }); var Checkbox = (p) => A("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) });
var Colorpicker = (p) => { var Colorpicker = (p) => {
const current = () => get(p.value) || "#000000"; const current = () => val(p.value) || "#000000";
return Dropdown({}, [ return Dropdown({}, [
DropdownButton({ class: "btn" }, [ DropdownButton({ class: "btn" }, [
A("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }), A("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
@@ -703,13 +726,13 @@
DropdownContent({ class: "p-0" }, ColorPalette({ DropdownContent({ class: "p-0" }, ColorPalette({
value: p.value, value: p.value,
onchange: (c) => { onchange: (c) => {
isFn(p.value) ? p.value(c) : p.onchange?.(c); _(p.value) ? p.value(c) : p.onchange?.(c);
} }
})) }))
]); ]);
}; };
var ColorPalette = (p) => { var ColorPalette = (p) => {
const current = () => get(p.value) || "#000000"; const current = () => val(p.value) || "#000000";
const palette = [ const palette = [
"#000", "#000",
"#1A1A1A", "#1A1A1A",
@@ -777,7 +800,7 @@
"#fae8ff" "#fae8ff"
]; ];
const pick = (c) => { const pick = (c) => {
isFn(p.value) ? p.value(c) : p.onchange?.(c); _(p.value) ? p.value(c) : p.onchange?.(c);
hide(); hide();
}; };
return A("div", { return A("div", {
@@ -796,9 +819,9 @@
}; };
var Datepicker = (p) => { var Datepicker = (p) => {
const displayValue = P(""); const displayValue = P("");
const rangeMode = () => get(p.range) === true; const rangeMode = () => val(p.range) === true;
T(() => { C(() => {
const v2 = get(p.value); const v2 = val(p.value);
if (!v2) if (!v2)
return displayValue(""); return displayValue("");
let text = ""; let text = "";
@@ -814,12 +837,12 @@
} }
displayValue(text); displayValue(text);
}); });
const handleChange = (val) => { const handleChange = (val2) => {
if (isFn(p.value)) if (_(p.value))
p.value(val); p.value(val2);
else else
p.onChange?.(val); p.onChange?.(val2);
if (!rangeMode() || val?.end != null) if (!rangeMode() || val2?.end != null)
hide(); hide();
}; };
return Dropdown({ class: cls("w-full", p.class) }, [ return Dropdown({ class: cls("w-full", p.class) }, [
@@ -838,7 +861,7 @@
onmousedown: (e) => { onmousedown: (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (isFn(p.value)) if (_(p.value))
p.value(null); p.value(null);
else else
p.onChange?.(null); p.onChange?.(null);
@@ -855,7 +878,7 @@
]); ]);
}; };
var Drawer = (p, c) => div({ ...p, class: cls("drawer", p.class) }, c); var Drawer = (p, c) => div({ ...p, class: cls("drawer", p.class) }, c);
var DrawerToggle = (p) => input({ ...p, type: "checkbox", class: "drawer-toggle", checked: () => get(p.checked), onchange: (e) => isFn(p.checked) && p.checked(e.target.checked) }); var DrawerToggle = (p) => input({ ...p, type: "checkbox", class: "drawer-toggle", checked: () => val(p.checked), onchange: (e) => _(p.checked) && p.checked(e.target.checked) });
var DrawerContent = (p, c) => div({ ...p, class: cls("drawer-content", p.class) }, c); var DrawerContent = (p, c) => div({ ...p, class: cls("drawer-content", p.class) }, c);
var DrawerSide = (p, c) => div({ ...p, class: cls("drawer-side", p.class) }, c); var DrawerSide = (p, c) => div({ ...p, class: cls("drawer-side", p.class) }, c);
var DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls("drawer-overlay", p.class) }); var DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls("drawer-overlay", p.class) });
@@ -879,17 +902,17 @@
} }
const updated = [...files(), ...arr]; const updated = [...files(), ...arr];
files(updated); files(updated);
if (isFn(p.onselect)) if (_(p.onselect))
p.onselect(updated); p.onselect(updated);
else if (isFn(p.value)) else if (_(p.value))
p.value(updated); p.value(updated);
}; };
const remove = (idx) => { const remove = (idx) => {
const updated = files().filter((_2, i) => i !== idx); const updated = files().filter((_2, i) => i !== idx);
files(updated); files(updated);
if (isFn(p.onselect)) if (_(p.onselect))
p.onselect(updated); p.onselect(updated);
else if (isFn(p.value)) else if (_(p.value))
p.value(updated); p.value(updated);
}; };
return A("div", { class: cls("fieldset w-full p-0", p.class) }, [ return A("div", { class: cls("fieldset w-full p-0", p.class) }, [
@@ -944,7 +967,7 @@
const showPassword = P(false); const showPassword = P(false);
const isPassword = p.type === "password"; const isPassword = p.type === "password";
const pattern = rule ?? null; const pattern = rule ?? null;
const inputType = () => isPassword ? get(showPassword) ? "text" : "password" : p.type || "search"; const inputType = () => isPassword ? val(showPassword) ? "text" : "password" : p.type || "search";
return A("label", { class: float ? "floating-label" : "" }, [ return A("label", { class: float ? "floating-label" : "" }, [
float ? A("span", {}, label2) : null, float ? A("span", {}, label2) : null,
A("label", { pattern, class: () => cls("input validator", p.class) }, [ A("label", { pattern, class: () => cls("input validator", p.class) }, [
@@ -963,7 +986,7 @@
}; };
var Kbd = (p, c) => A("kbd", { ...p, class: cls("kbd", p.class) }, c); var Kbd = (p, c) => A("kbd", { ...p, class: cls("kbd", p.class) }, c);
var List = (p, c) => A("ul", { ...p, class: cls("list", p.class) }, c); var List = (p, c) => A("ul", { ...p, class: cls("list", p.class) }, c);
var ListRows = (p) => () => (get(p.items) || []).map((item, idx) => A("li", { class: cls("list-row", p.class, item?.class) }, typeof p.render === "function" ? p.render(item, idx) : item)); var ListRows = (p) => () => (val(p.items) || []).map((item, idx) => A("li", { class: cls("list-row", p.class, item?.class) }, typeof p.render === "function" ? p.render(item, idx) : item));
var Loading = (p, c) => A("span", { ...p, class: cls("loading loading-spinner", p.class) }, c); var Loading = (p, c) => A("span", { ...p, class: cls("loading loading-spinner", p.class) }, c);
var Menu = (p) => { var Menu = (p) => {
if (p.children !== undefined) if (p.children !== undefined)
@@ -971,7 +994,7 @@
const { items } = p; const { items } = p;
const render = (item) => item.children ? A("li", {}, A("details", { open: item.open || undefined }, [ const render = (item) => item.children ? A("li", {}, A("details", { open: item.open || undefined }, [
A("summary", {}, getBy(item)), A("summary", {}, getBy(item)),
A("ul", {}, H(() => get(item.children) || [], render)) A("ul", {}, H(() => val(item.children) || [], render))
])) : A("li", {}, A("a", { ])) : A("li", {}, A("a", {
href: item.href, href: item.href,
onclick: item.onclick ? (e) => { onclick: item.onclick ? (e) => {
@@ -980,17 +1003,17 @@
item.onclick(e); item.onclick(e);
} : null } : null
}, getBy(item))); }, getBy(item)));
return A("ul", { class: cls("menu", p.class) }, H(() => get(items) || [], render)); return A("ul", { class: cls("menu", p.class) }, H(() => val(items) || [], render));
}; };
var Modal = (p) => { var Modal = (p) => {
let dialogRef = null; let dialogRef = null;
T(() => { C(() => {
const isOpen = get(p.open); const isOpen = val(p.open);
if (!dialogRef) if (!dialogRef)
return; return;
isOpen ? dialogRef.showModal() : dialogRef.hide(); isOpen ? dialogRef.showModal() : dialogRef.hide();
}); });
const close = () => isFn(p.open) && p.open(false); const close = () => _(p.open) && p.open(false);
return A("dialog", { return A("dialog", {
...p, ...p,
ref: (el) => dialogRef = el, ref: (el) => dialogRef = el,
@@ -1012,17 +1035,17 @@
}; };
var Navbar = (p, c) => A("div", { ...p, class: cls("navbar", p.class) }, c); var Navbar = (p, c) => A("div", { ...p, class: cls("navbar", p.class) }, c);
var Progress = (p) => A("progress", { ...p, class: cls("progress", p.class) }); var Progress = (p) => A("progress", { ...p, class: cls("progress", p.class) });
var Radial = (p, c) => A("div", { class: cls("radial-progress", p.class), style: `--value:${get(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c); var Radial = (p, c) => A("div", { class: cls("radial-progress", p.class), style: `--value:${val(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c);
var Radio = (p) => A("input", { ...p, type: "radio", class: cls("radio", p.class) }); var Radio = (p) => A("input", { ...p, type: "radio", class: cls("radio", p.class) });
var Range = (p) => A("input", { ...p, type: "range", class: cls("range", p.class) }); var Range = (p) => A("input", { ...p, type: "range", class: cls("range", p.class) });
var Rating = (p, c) => A("div", { ...p, class: "rating" }, c); var Rating = (p, c) => A("div", { ...p, class: "rating" }, c);
var RatingItems = (p) => [...Array(p.count)].map((_2, i) => A("input", { class: cls("mask", p.class), name: p.name, type: "radio", checked: () => get(p.value) === i, onchange: () => isFn(p.value) ? p.value(i) : p.onchange?.(i) })); var RatingItems = (p) => [...Array(p.count)].map((_2, i) => A("input", { class: cls("mask", p.class), name: p.name, type: "radio", checked: () => val(p.value) === i, onchange: () => _(p.value) ? p.value(i) : p.onchange?.(i) }));
var Select = (p, c) => { var Select = (p, c) => {
if (c !== undefined) if (c !== undefined)
return A("select", { class: cls("select", p.class), ...p }, c); return A("select", { class: cls("select", p.class), ...p }, c);
const { label: label2, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p; const { label: label2, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p;
const opts = () => { const opts = () => {
const raw = get(items) || []; const raw = val(items) || [];
const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: "" }] : []; const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: "" }] : [];
return [...ph, ...raw]; return [...ph, ...raw];
}; };
@@ -1032,12 +1055,12 @@
!float && label2 ? A("span", { class: "label" }, label2) : null, !float && label2 ? A("span", { class: "label" }, label2) : null,
left ?? null, left ?? null,
A("select", { A("select", {
value: () => get(value), value: () => val(value),
onchange: (e) => isFn(value) ? value(e.target.value) : rest.onchange?.(e) onchange: (e) => _(value) ? value(e.target.value) : rest.onchange?.(e)
}, H(opts, (item) => { }, H(opts, (item) => {
const val = getBy(item, item.value !== undefined ? "value" : undefined); const val2 = getBy(item, item.value !== undefined ? "value" : undefined);
const lab = getBy(item, "label"); const lab = getBy(item, "label");
return A("option", { value: val, disabled: item.disabled || undefined }, lab); return A("option", { value: val2, disabled: item.disabled || undefined }, lab);
})), })),
right ?? null right ?? null
]), ]),
@@ -1056,14 +1079,14 @@
var Steps = (p, c) => A("ul", { ...p, class: cls("steps", p.class) }, c); var Steps = (p, c) => A("ul", { ...p, class: cls("steps", p.class) }, c);
var Step = (p, c) => A("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c); var Step = (p, c) => A("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
var Swap = (p, c) => A("label", { ...p, class: cls("swap", p.class) }, c); var Swap = (p, c) => A("label", { ...p, class: cls("swap", p.class) }, c);
var SwapToggle = (p) => A("input", { type: "checkbox", checked: () => get(p.value), onchange: (e) => isFn(p.value) && p.value(e.target.checked), class: p.class }); var SwapToggle = (p) => A("input", { type: "checkbox", checked: () => val(p.value), onchange: (e) => _(p.value) && p.value(e.target.checked), class: p.class });
var SwapOn = (p, c) => A("div", { ...p, class: cls("swap-on", p.class) }, c); var SwapOn = (p, c) => A("div", { ...p, class: cls("swap-on", p.class) }, c);
var SwapOff = (p, c) => A("div", { ...p, class: cls("swap-off", p.class) }, c); var SwapOff = (p, c) => A("div", { ...p, class: cls("swap-off", p.class) }, c);
var Table = (p, c) => A("table", { ...p, class: cls("table", p.class) }, c); var Table = (p, c) => A("table", { ...p, class: cls("table", p.class) }, c);
var TableItems = ({ items, columns = [], header = true }) => { var TableItems = ({ items, columns = [], header = true }) => {
const head = header !== false && columns.some((c) => c.label) ? A("thead", {}, A("tr", {}, columns.map((c) => A("th", { class: c.class }, c.label)))) : null; const head = header !== false && columns.some((c) => c.label) ? A("thead", {}, A("tr", {}, columns.map((c) => A("th", { class: c.class }, c.label)))) : null;
const body = A("tbody", {}, () => { const body = A("tbody", {}, () => {
const list = get(items) || []; const list = val(items) || [];
return list.map((it, idx) => A("tr", {}, columns.map((c) => { return list.map((it, idx) => A("tr", {}, columns.map((c) => {
const v2 = c.render ? c.render(it, idx) : it[c.key]; const v2 = c.render ? c.render(it, idx) : it[c.key];
return A("td", { class: c.class }, v2); return A("td", { class: c.class }, v2);
@@ -1077,16 +1100,16 @@
return A("div", { ...rest2, class: cls("tabs", className2) }, c); return A("div", { ...rest2, class: cls("tabs", className2) }, c);
} }
const { items, activeIndex, onClose, class: className, ...rest } = p; const { items, activeIndex, onClose, class: className, ...rest } = p;
const get2 = (x2) => isFn(x2) ? x2() : x2; const get = (x2) => _(x2) ? x2() : x2;
const closeH = onClose || (isFn(items) ? (idx, item) => { const closeH = onClose || (_(items) ? (idx, item) => {
const arr = get2(items); const arr = val(items);
const newArr = arr.filter((_2, i) => i !== idx); const newArr = arr.filter((_2, i) => i !== idx);
items(newArr); items(newArr);
if (activeIndex() >= newArr.length) if (activeIndex() >= newArr.length)
activeIndex(Math.max(0, newArr.length - 1)); activeIndex(Math.max(0, newArr.length - 1));
} : null); } : null);
return A("div", { ...rest, class: cls("tabs", className) }, () => { return A("div", { ...rest, class: cls("tabs", className) }, () => {
const list = get2(items) || []; const list = val(items) || [];
return list.flatMap((it, idx) => { return list.flatMap((it, idx) => {
const isActive = () => activeIndex() === idx; const isActive = () => activeIndex() === idx;
const button = A("button", { const button = A("button", {
@@ -1109,7 +1132,7 @@
const contentDiv = A("div", { const contentDiv = A("div", {
class: "tab-content bg-base-100 border-base-300 p-6", class: "tab-content bg-base-100 border-base-300 p-6",
style: () => `display: ${isActive() ? "block" : "none"};` style: () => `display: ${isActive() ? "block" : "none"};`
}, isFn(it.content) ? it.content() : it.content); }, _(it.content) ? it.content() : it.content);
return [button, contentDiv]; return [button, contentDiv];
}); });
}); });
@@ -1146,7 +1169,7 @@
}, 300); }, 300);
}; };
enterTimer = setTimeout(() => visible(true), 0); enterTimer = setTimeout(() => visible(true), 0);
const content = typeof message === "function" ? get(message) : message; const content = typeof message === "function" ? val(message) : message;
const msgNode = typeof content === "string" ? A("span", {}, content) : content; const msgNode = typeof content === "string" ? A("span", {}, content) : content;
return A("div", { return A("div", {
class: () => { class: () => {
@@ -1172,12 +1195,6 @@
}; };
var Toggle = (p) => A("input", { ...p, type: "checkbox", class: cls("toggle", p.class) }); var Toggle = (p) => A("input", { ...p, type: "checkbox", class: cls("toggle", p.class) });
var Tooltip = (p, c) => A("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c); var Tooltip = (p, c) => A("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c);
// sigpro-editor.js
var exports_sigpro_editor = {};
__export(exports_sigpro_editor, {
Editor: () => Editor
});
var Editor = (p) => { var Editor = (p) => {
const { value, class: extraClass } = p; const { value, class: extraClass } = p;
let editorRef = null; let editorRef = null;
@@ -1209,19 +1226,19 @@
if (!editorRef) if (!editorRef)
return; return;
const html = editorRef.innerHTML; const html = editorRef.innerHTML;
if (isFn(value)) if (_(value))
value(html); value(html);
else else
p.onchange?.(html); p.onchange?.(html);
triggerRefresh(); triggerRefresh();
}; };
const exec = (cmd, val = null) => { const exec = (cmd, val2 = null) => {
if (!editorRef) if (!editorRef)
return; return;
editorRef.focus(); editorRef.focus();
if (savedRange) if (savedRange)
restoreSelection(); restoreSelection();
document.execCommand(cmd, false, val); document.execCommand(cmd, false, val2);
savedRange = null; savedRange = null;
notify(); notify();
}; };
@@ -1250,7 +1267,7 @@
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}; };
const queryState = (cmd, val = null) => { const queryState = (cmd, val2 = null) => {
refreshTick(); refreshTick();
if (!editorRef || isSource()) if (!editorRef || isSource())
return false; return false;
@@ -1258,7 +1275,7 @@
if (cmd === "formatBlock") { if (cmd === "formatBlock") {
let node = window.getSelection().getRangeAt(0).commonAncestorContainer; let node = window.getSelection().getRangeAt(0).commonAncestorContainer;
while (node && node !== editorRef) { while (node && node !== editorRef) {
if (node.nodeType === 1 && node.tagName === val) if (node.nodeType === 1 && node.tagName === val2)
return true; return true;
node = node.parentNode; node = node.parentNode;
} }
@@ -1354,7 +1371,7 @@
ref: (el) => { ref: (el) => {
if (!editorRef && el) { if (!editorRef && el) {
editorRef = el; editorRef = el;
el.innerHTML = get(value) || ""; el.innerHTML = val(value) || "";
document.execCommand("defaultParagraphSeparator", false, "br"); document.execCommand("defaultParagraphSeparator", false, "br");
el.addEventListener("click", (e) => { el.addEventListener("click", (e) => {
const container = e.target.closest(".resizable-img-container"); const container = e.target.closest(".resizable-img-container");
@@ -1418,42 +1435,10 @@
]); ]);
}; };
// sigpro-locale.js
var i18n = {
es: {
close: "Cerrar",
confirm: "Confirmar",
cancel: "Cancelar",
search: "Buscar...",
loading: "Cargando...",
nodata: "Sin datos"
},
en: {
close: "Close",
confirm: "Confirm",
cancel: "Cancel",
search: "Search...",
loading: "Loading...",
nodata: "No data"
}
};
var currentLocale = P("es");
var Locale = (t) => currentLocale(t);
var tt = (t) => () => i18n[currentLocale()][t] || t;
// index.js // index.js
var Components = { var Components = { ...exports_sigpro_ui };
...exports_sigpro_ui,
...exports_sigpro_editor
};
var Utils = {
Locale,
tt,
hide,
get
};
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => { Object.entries({ ...Components }).forEach(([name, value]) => {
Object.defineProperty(window, name, { Object.defineProperty(window, name, {
value, value,
writable: false, writable: false,

2
dist/sigpro-ui.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
docs/README.md
View File

@@ -11,7 +11,7 @@
<div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"Atomic components for high-performance interfaces. Zero-boilerplate, pure reactivity."</div> <div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"Atomic components for high-performance interfaces. Zero-boilerplate, pure reactivity."</div>
<div class="flex flex-wrap justify-center gap-4 w-full"> <div class="flex flex-wrap justify-center gap-4 w-full">
<a href="#/install" class="btn btn-secondary btn-lg shadow-xl shadow-secondary/20 group px-10 border-none text-secondary-content">View Components <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a> <a href="#/install" class="btn btn-secondary btn-lg shadow-xl shadow-secondary/20 group px-10 border-none text-secondary-content">View Components <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a>
<button onclick="window.open('https://github.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">GitHub</button> <button onclick="window.open('https://git.natxocc.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">Gitea</button>
</div> </div>
</div> </div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 opacity-10 pointer-events-none"> <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 opacity-10 pointer-events-none">

2
docs/sigpro-ui.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

938
index.d.ts vendored
View File

@@ -1,465 +1,482 @@
declare module 'sigpro-ui' { type Signal<T> = {
type Signal<T> = { (): T;
(): T; (value: T | ((prev: T) => T)): void;
(value: T | ((prev: T) => T)): void; };
};
type ComponentChild = Node | string | number | boolean | null | undefined;
type ComponentChild = Node | string | number | boolean | null | undefined; type ComponentChildren = ComponentChild | ComponentChild[] | (() => ComponentChild | ComponentChildren);
type ComponentChildren = ComponentChild | ComponentChild[] | (() => ComponentChild | ComponentChildren);
interface BaseProps {
interface BaseProps { class?: string | (() => string);
class?: string | (() => string); style?: string | (() => string);
style?: string | (() => string); id?: string | (() => string);
id?: string | (() => string); [key: string]: any;
[key: string]: any;
}
interface AccordionItem {
title?: string | (() => string);
content?: string | (() => string);
open?: boolean;
classTitle?: string;
classContent?: string;
}
interface AccordionProps extends BaseProps {
items: AccordionItem[] | (() => AccordionItem[]);
name?: string;
}
function Accordion(props: AccordionProps): Node;
interface AlertProps extends BaseProps {}
function Alert(props: AlertProps, children?: ComponentChildren): Node;
interface AutocompleteProps extends BaseProps {
items: (string | { label: string; value?: string })[] | (() => (string | { label: string; value?: string })[]);
value?: Signal<string> | string;
onselect?: (item: string | { label: string; value?: string }) => void;
placeholder?: string;
}
function Autocomplete(props: AutocompleteProps): Node;
interface BadgeProps extends BaseProps {}
function Badge(props: BadgeProps, children?: ComponentChildren): Node;
interface ButtonProps extends BaseProps {}
function Button(props: ButtonProps, children?: ComponentChildren): Node;
interface DateRange {
start: string;
end: string | null;
startHour?: number;
endHour?: number;
}
interface CalendarProps extends BaseProps {
value?: Signal<string | DateRange> | string | DateRange;
range?: boolean | (() => boolean);
hour?: boolean;
onChange?: (value: string | DateRange | null) => void;
onAccept?: () => void;
onCancel?: () => void;
}
function Calendar(props: CalendarProps): Node;
interface CardProps extends BaseProps {}
function Card(props: CardProps, children?: ComponentChildren): Node;
interface CardTitleProps extends BaseProps {}
function CardTitle(props: CardTitleProps, children?: ComponentChildren): Node;
interface CardBodyProps extends BaseProps {}
function CardBody(props: CardBodyProps, children?: ComponentChildren): Node;
interface CardActionsProps extends BaseProps {}
function CardActions(props: CardActionsProps, children?: ComponentChildren): Node;
interface CarouselProps extends BaseProps {}
function Carousel(props: CarouselProps, children?: ComponentChildren): Node;
interface CarouselItemProps extends BaseProps {}
function CarouselItem(props: CarouselItemProps, children?: ComponentChildren): Node;
interface ChatProps extends BaseProps {}
function Chat(props: ChatProps, children?: ComponentChildren): Node;
interface ChatBubbleProps extends BaseProps {}
function ChatBubble(props: ChatBubbleProps, children?: ComponentChildren): Node;
interface ChatFooterProps extends BaseProps {}
function ChatFooter(props: ChatFooterProps, children?: ComponentChildren): Node;
interface ChatHeaderProps extends BaseProps {}
function ChatHeader(props: ChatHeaderProps, children?: ComponentChildren): Node;
interface ChatImageProps extends BaseProps {}
function ChatImage(props: ChatImageProps, children?: ComponentChildren): Node;
interface CheckboxProps extends BaseProps {}
function Checkbox(props: CheckboxProps): Node;
interface ColorpickerProps extends BaseProps {
value?: Signal<string> | string;
label?: string | (() => string);
onchange?: (color: string) => void;
}
function Colorpicker(props: ColorpickerProps): Node;
interface ColorPaletteProps extends BaseProps {
value?: Signal<string> | string;
onchange?: (color: string) => void;
}
function ColorPalette(props: ColorPaletteProps): Node;
interface DatepickerProps extends BaseProps {
value?: Signal<string | DateRange> | string | DateRange;
range?: boolean | (() => boolean);
hour?: boolean;
placeholder?: string;
onChange?: (value: string | DateRange | null) => void;
onAccept?: () => void;
onCancel?: () => void;
}
function Datepicker(props: DatepickerProps): Node;
interface DividerProps extends BaseProps {}
function Divider(props: DividerProps): Node;
interface DrawerProps extends BaseProps {}
function Drawer(props: DrawerProps, children?: ComponentChildren): Node;
interface DrawerToggleProps extends BaseProps {
checked?: Signal<boolean> | boolean;
}
function DrawerToggle(props: DrawerToggleProps): Node;
interface DrawerContentProps extends BaseProps {}
function DrawerContent(props: DrawerContentProps, children?: ComponentChildren): Node;
interface DrawerSideProps extends BaseProps {}
function DrawerSide(props: DrawerSideProps, children?: ComponentChildren): Node;
interface DrawerOverlayProps extends BaseProps {
for?: string;
}
function DrawerOverlay(props: DrawerOverlayProps): Node;
interface DropdownProps extends BaseProps {
open?: Signal<boolean>;
}
function Dropdown(props: DropdownProps, children?: ComponentChildren): Node;
interface DropdownButtonProps extends BaseProps {}
function DropdownButton(props: DropdownButtonProps, children?: ComponentChildren): Node;
interface DropdownContentProps extends BaseProps {}
function DropdownContent(props: DropdownContentProps, children?: ComponentChildren): Node;
interface FabProps extends BaseProps {
icon?: string;
}
function Fab(props: FabProps, children?: ComponentChildren): Node;
interface FieldsetProps extends BaseProps {
label?: string | (() => string);
}
function Fieldset(props: FieldsetProps, children?: ComponentChildren): Node;
interface FileinputProps extends BaseProps {
max?: number;
accept?: string;
onselect?: (files: File[]) => void;
value?: Signal<File[]>;
}
function Fileinput(props: FileinputProps): Node;
interface IconProps {
class?: string;
}
function Icon(props: string | IconProps): Node;
interface IndicatorProps extends BaseProps {
value?: string | number | (() => string | number);
}
function Indicator(props: IndicatorProps, children?: ComponentChildren): Node;
interface InputProps extends BaseProps {
value?: Signal<string> | string;
type?: string;
placeholder?: string;
label?: string | (() => string);
float?: boolean;
left?: ComponentChild;
right?: ComponentChild;
rule?: string;
hint?: string | (() => string);
}
function Input(props: InputProps): Node;
interface KbdProps extends BaseProps {}
function Kbd(props: KbdProps, children?: ComponentChildren): Node;
interface ListProps extends BaseProps {}
function List(props: ListProps, children?: ComponentChildren): Node;
interface ListRowsProps extends BaseProps {
items?: any[] | (() => any[]);
render?: (item: any, index: number) => ComponentChild;
}
function ListRows(props: ListRowsProps): Node;
interface LoadingProps extends BaseProps {}
function Loading(props: LoadingProps, children?: ComponentChildren): Node;
interface MenuItem {
label?: string | (() => string);
href?: string;
onclick?: (e: MouseEvent) => void;
children?: MenuItem[] | (() => MenuItem[]);
open?: boolean;
}
interface MenuProps extends BaseProps {
items?: MenuItem[] | (() => MenuItem[]);
children?: ComponentChildren;
}
function Menu(props: MenuProps): Node;
interface ModalProps extends BaseProps {
open?: Signal<boolean> | boolean;
title?: string | (() => string);
actions?: ComponentChild;
}
function Modal(props: ModalProps, children?: ComponentChildren): Node;
interface NavbarProps extends BaseProps {}
function Navbar(props: NavbarProps, children?: ComponentChildren): Node;
interface ProgressProps extends BaseProps {
value?: number | (() => number);
max?: number;
}
function Progress(props: ProgressProps): Node;
interface RadialProps extends BaseProps {
value?: number;
}
function Radial(props: RadialProps, children?: ComponentChildren): Node;
interface RadioProps extends BaseProps {
name?: string;
checked?: boolean | (() => boolean);
}
function Radio(props: RadioProps): Node;
interface RangeProps extends BaseProps {
value?: Signal<number> | number;
min?: number;
max?: number;
}
function Range(props: RangeProps): Node;
interface RatingProps extends BaseProps {}
function Rating(props: RatingProps, children?: ComponentChildren): Node;
interface RatingItemsProps extends BaseProps {
count: number;
name?: string;
value?: Signal<number> | number;
onchange?: (value: number) => void;
}
function RatingItems(props: RatingItemsProps): Node;
interface SelectOption {
label?: string;
value?: string;
disabled?: boolean;
}
interface SelectProps extends BaseProps {
items?: SelectOption[] | (() => SelectOption[]);
value?: Signal<string> | string;
placeholder?: string;
placeholderDisabled?: boolean;
label?: string | (() => string);
float?: boolean;
left?: ComponentChild;
right?: ComponentChild;
hint?: string | (() => string);
onchange?: (e: Event) => void;
}
function Select(props: SelectProps, children?: ComponentChildren): Node;
interface SkeletonProps extends BaseProps {}
function Skeleton(props: SkeletonProps): Node;
interface SkeletonTextProps extends BaseProps {}
function SkeletonText(props: SkeletonTextProps): Node;
interface StackProps extends BaseProps {}
function Stack(props: StackProps, children?: ComponentChildren): Node;
interface StatProps extends BaseProps {
title?: string | (() => string);
value?: string | number | (() => string | number);
desc?: string | (() => string);
}
function Stat(props: StatProps): Node;
interface StatsProps extends BaseProps {}
function Stats(props: StatsProps, children?: ComponentChildren): Node;
interface StepsProps extends BaseProps {}
function Steps(props: StepsProps, children?: ComponentChildren): Node;
interface StepProps extends BaseProps {
dataContent?: string;
}
function Step(props: StepProps, children?: ComponentChildren): Node;
interface SwapProps extends BaseProps {}
function Swap(props: SwapProps, children?: ComponentChildren): Node;
interface SwapToggleProps extends BaseProps {
value?: Signal<boolean> | boolean;
}
function SwapToggle(props: SwapToggleProps): Node;
interface SwapOnProps extends BaseProps {}
function SwapOn(props: SwapOnProps, children?: ComponentChildren): Node;
interface SwapOffProps extends BaseProps {}
function SwapOff(props: SwapOffProps, children?: ComponentChildren): Node;
interface TableProps extends BaseProps {}
function Table(props: TableProps, children?: ComponentChildren): Node;
interface TableColumn {
label?: string;
key?: string;
render?: (item: any, index: number) => ComponentChild;
class?: string;
}
interface TableItemsProps extends BaseProps {
items?: any[] | (() => any[]);
columns?: TableColumn[];
header?: boolean;
}
function TableItems(props: TableItemsProps): Node;
interface TabItem {
label?: string | (() => string);
content?: ComponentChild | (() => ComponentChild);
class?: string;
closable?: boolean;
onclick?: (e: MouseEvent) => void;
}
interface TabsProps extends BaseProps {
items?: TabItem[] | (() => TabItem[]);
activeIndex?: Signal<number>;
onClose?: (index: number, item: TabItem) => void;
children?: ComponentChildren;
}
function Tabs(props: TabsProps): Node;
interface TextareaProps extends BaseProps {
value?: Signal<string> | string;
placeholder?: string;
}
function Textarea(props: TextareaProps): Node;
interface TextrotateProps extends BaseProps {}
function Textrotate(props: TextrotateProps, children?: ComponentChildren): Node;
interface TimelineProps extends BaseProps {}
function Timeline(props: TimelineProps, children?: ComponentChildren): Node;
type ToastType = 'alert-info' | 'alert-success' | 'alert-warning' | 'alert-error';
function Toast(message: string | (() => string), type?: ToastType, duration?: number): () => void;
interface ToggleProps extends BaseProps {
checked?: Signal<boolean> | boolean;
}
function Toggle(props: ToggleProps): Node;
interface TooltipProps extends BaseProps {
tip: string | (() => string);
}
function Tooltip(props: TooltipProps, children?: ComponentChildren): Node;
const Components: {
Accordion: typeof Accordion;
Alert: typeof Alert;
Autocomplete: typeof Autocomplete;
Badge: typeof Badge;
Button: typeof Button;
Calendar: typeof Calendar;
Card: typeof Card;
CardTitle: typeof CardTitle;
CardBody: typeof CardBody;
CardActions: typeof CardActions;
Carousel: typeof Carousel;
CarouselItem: typeof CarouselItem;
Chat: typeof Chat;
ChatBubble: typeof ChatBubble;
ChatFooter: typeof ChatFooter;
ChatHeader: typeof ChatHeader;
ChatImage: typeof ChatImage;
Checkbox: typeof Checkbox;
Colorpicker: typeof Colorpicker;
ColorPalette: typeof ColorPalette;
Datepicker: typeof Datepicker;
Divider: typeof Divider;
Drawer: typeof Drawer;
DrawerToggle: typeof DrawerToggle;
DrawerContent: typeof DrawerContent;
DrawerSide: typeof DrawerSide;
DrawerOverlay: typeof DrawerOverlay;
Dropdown: typeof Dropdown;
DropdownButton: typeof DropdownButton;
DropdownContent: typeof DropdownContent;
Fab: typeof Fab;
Fieldset: typeof Fieldset;
Fileinput: typeof Fileinput;
Icon: typeof Icon;
Indicator: typeof Indicator;
Input: typeof Input;
Kbd: typeof Kbd;
List: typeof List;
ListRows: typeof ListRows;
Loading: typeof Loading;
Menu: typeof Menu;
Modal: typeof Modal;
Navbar: typeof Navbar;
Progress: typeof Progress;
Radial: typeof Radial;
Radio: typeof Radio;
Range: typeof Range;
Rating: typeof Rating;
RatingItems: typeof RatingItems;
Select: typeof Select;
Skeleton: typeof Skeleton;
SkeletonText: typeof SkeletonText;
Stack: typeof Stack;
Stat: typeof Stat;
Stats: typeof Stats;
Steps: typeof Steps;
Step: typeof Step;
Swap: typeof Swap;
SwapToggle: typeof SwapToggle;
SwapOn: typeof SwapOn;
SwapOff: typeof SwapOff;
Table: typeof Table;
TableItems: typeof TableItems;
Tabs: typeof Tabs;
Textarea: typeof Textarea;
Textrotate: typeof Textrotate;
Timeline: typeof Timeline;
Toast: typeof Toast;
Toggle: typeof Toggle;
Tooltip: typeof Tooltip;
};
export { Components };
export default Components;
} }
// ---------- helpers ----------
const hide: () => void;
const i18n: {
es: Record<string, string>;
en: Record<string, string>;
};
const currentLocale: Signal<string>;
const Locale: (locale: string) => void;
const tt: (key: string) => () => string;
// ---------- components ----------
interface AccordionItem {
title?: string | (() => string);
content?: string | (() => string);
open?: boolean;
classTitle?: string;
classContent?: string;
}
interface AccordionProps extends BaseProps {
items: AccordionItem[] | (() => AccordionItem[]);
name?: string;
}
function Accordion(props: AccordionProps): Node;
interface AlertProps extends BaseProps { }
function Alert(props: AlertProps, children?: ComponentChildren): Node;
interface AutocompleteProps extends BaseProps {
items: (string | { label: string; value?: string })[] | (() => (string | { label: string; value?: string })[]);
value?: Signal<string> | string;
onselect?: (item: string | { label: string; value?: string }) => void;
placeholder?: string;
}
function Autocomplete(props: AutocompleteProps): Node;
interface BadgeProps extends BaseProps { }
function Badge(props: BadgeProps, children?: ComponentChildren): Node;
interface ButtonProps extends BaseProps { }
function Button(props: ButtonProps, children?: ComponentChildren): Node;
interface DateRange {
start: string;
end: string | null;
startHour?: number;
endHour?: number;
}
interface CalendarProps extends BaseProps {
value?: Signal<string | DateRange> | string | DateRange;
range?: boolean | (() => boolean);
hour?: boolean;
onChange?: (value: string | DateRange | null) => void;
onAccept?: () => void;
onCancel?: () => void;
}
function Calendar(props: CalendarProps): Node;
interface CardProps extends BaseProps { }
function Card(props: CardProps, children?: ComponentChildren): Node;
interface CardTitleProps extends BaseProps { }
function CardTitle(props: CardTitleProps, children?: ComponentChildren): Node;
interface CardBodyProps extends BaseProps { }
function CardBody(props: CardBodyProps, children?: ComponentChildren): Node;
interface CardActionsProps extends BaseProps { }
function CardActions(props: CardActionsProps, children?: ComponentChildren): Node;
interface CarouselProps extends BaseProps { }
function Carousel(props: CarouselProps, children?: ComponentChildren): Node;
interface CarouselItemProps extends BaseProps { }
function CarouselItem(props: CarouselItemProps, children?: ComponentChildren): Node;
interface ChatProps extends BaseProps { }
function Chat(props: ChatProps, children?: ComponentChildren): Node;
interface ChatBubbleProps extends BaseProps { }
function ChatBubble(props: ChatBubbleProps, children?: ComponentChildren): Node;
interface ChatFooterProps extends BaseProps { }
function ChatFooter(props: ChatFooterProps, children?: ComponentChildren): Node;
interface ChatHeaderProps extends BaseProps { }
function ChatHeader(props: ChatHeaderProps, children?: ComponentChildren): Node;
interface ChatImageProps extends BaseProps { }
function ChatImage(props: ChatImageProps, children?: ComponentChildren): Node;
interface CheckboxProps extends BaseProps { }
function Checkbox(props: CheckboxProps): Node;
interface ColorpickerProps extends BaseProps {
value?: Signal<string> | string;
label?: string | (() => string);
onchange?: (color: string) => void;
}
function Colorpicker(props: ColorpickerProps): Node;
interface ColorPaletteProps extends BaseProps {
value?: Signal<string> | string;
onchange?: (color: string) => void;
}
function ColorPalette(props: ColorPaletteProps): Node;
interface DatepickerProps extends BaseProps {
value?: Signal<string | DateRange> | string | DateRange;
range?: boolean | (() => boolean);
hour?: boolean;
placeholder?: string;
onChange?: (value: string | DateRange | null) => void;
onAccept?: () => void;
onCancel?: () => void;
}
function Datepicker(props: DatepickerProps): Node;
interface DividerProps extends BaseProps { }
function Divider(props: DividerProps): Node;
interface DrawerProps extends BaseProps { }
function Drawer(props: DrawerProps, children?: ComponentChildren): Node;
interface DrawerToggleProps extends BaseProps {
checked?: Signal<boolean> | boolean;
}
function DrawerToggle(props: DrawerToggleProps): Node;
interface DrawerContentProps extends BaseProps { }
function DrawerContent(props: DrawerContentProps, children?: ComponentChildren): Node;
interface DrawerSideProps extends BaseProps { }
function DrawerSide(props: DrawerSideProps, children?: ComponentChildren): Node;
interface DrawerOverlayProps extends BaseProps {
for?: string;
}
function DrawerOverlay(props: DrawerOverlayProps): Node;
interface DropdownProps extends BaseProps {
open?: Signal<boolean>;
}
function Dropdown(props: DropdownProps, children?: ComponentChildren): Node;
interface DropdownButtonProps extends BaseProps { }
function DropdownButton(props: DropdownButtonProps, children?: ComponentChildren): Node;
interface DropdownContentProps extends BaseProps { }
function DropdownContent(props: DropdownContentProps, children?: ComponentChildren): Node;
interface EditorProps extends BaseProps {
value?: Signal<string> | string;
onchange?: (value: string) => void;
}
function Editor(props: EditorProps): Node;
interface FabProps extends BaseProps {
icon?: string;
}
function Fab(props: FabProps, children?: ComponentChildren): Node;
interface FieldsetProps extends BaseProps {
label?: string | (() => string);
}
function Fieldset(props: FieldsetProps, children?: ComponentChildren): Node;
interface FileinputProps extends BaseProps {
max?: number;
accept?: string;
onselect?: (files: File[]) => void;
value?: Signal<File[]>;
}
function Fileinput(props: FileinputProps): Node;
interface IconProps {
class?: string;
}
function Icon(props: string | IconProps): Node;
interface IndicatorProps extends BaseProps {
value?: string | number | (() => string | number);
}
function Indicator(props: IndicatorProps, children?: ComponentChildren): Node;
interface InputProps extends BaseProps {
value?: Signal<string> | string;
type?: string;
placeholder?: string;
label?: string | (() => string);
float?: boolean;
left?: ComponentChild;
right?: ComponentChild;
rule?: string;
hint?: string | (() => string);
}
function Input(props: InputProps): Node;
interface KbdProps extends BaseProps { }
function Kbd(props: KbdProps, children?: ComponentChildren): Node;
interface ListProps extends BaseProps { }
function List(props: ListProps, children?: ComponentChildren): Node;
interface ListRowsProps extends BaseProps {
items?: any[] | (() => any[]);
render?: (item: any, index: number) => ComponentChild;
}
function ListRows(props: ListRowsProps): Node;
interface LoadingProps extends BaseProps { }
function Loading(props: LoadingProps, children?: ComponentChildren): Node;
interface MenuItem {
label?: string | (() => string);
href?: string;
onclick?: (e: MouseEvent) => void;
children?: MenuItem[] | (() => MenuItem[]);
open?: boolean;
}
interface MenuProps extends BaseProps {
items?: MenuItem[] | (() => MenuItem[]);
children?: ComponentChildren;
}
function Menu(props: MenuProps): Node;
interface ModalProps extends BaseProps {
open?: Signal<boolean> | boolean;
title?: string | (() => string);
actions?: ComponentChild;
}
function Modal(props: ModalProps, children?: ComponentChildren): Node;
interface NavbarProps extends BaseProps { }
function Navbar(props: NavbarProps, children?: ComponentChildren): Node;
interface ProgressProps extends BaseProps {
value?: number | (() => number);
max?: number;
}
function Progress(props: ProgressProps): Node;
interface RadialProps extends BaseProps {
value?: Signal<number> | number;
}
function Radial(props: RadialProps, children?: ComponentChildren): Node;
interface RadioProps extends BaseProps {
name?: string;
checked?: boolean | (() => boolean);
}
function Radio(props: RadioProps): Node;
interface RangeProps extends BaseProps {
value?: Signal<number> | number;
min?: number;
max?: number;
}
function Range(props: RangeProps): Node;
interface RatingProps extends BaseProps { }
function Rating(props: RatingProps, children?: ComponentChildren): Node;
interface RatingItemsProps extends BaseProps {
count: number;
name?: string;
value?: Signal<number> | number;
onchange?: (value: number) => void;
}
function RatingItems(props: RatingItemsProps): Node;
interface SelectOption {
label?: string;
value?: string;
disabled?: boolean;
}
interface SelectProps extends BaseProps {
items?: SelectOption[] | (() => SelectOption[]);
value?: Signal<string> | string;
placeholder?: string;
placeholderDisabled?: boolean;
label?: string | (() => string);
float?: boolean;
left?: ComponentChild;
right?: ComponentChild;
hint?: string | (() => string);
onchange?: (e: Event) => void;
}
function Select(props: SelectProps, children?: ComponentChildren): Node;
interface SkeletonProps extends BaseProps { }
function Skeleton(props: SkeletonProps): Node;
interface SkeletonTextProps extends BaseProps { }
function SkeletonText(props: SkeletonTextProps): Node;
interface StackProps extends BaseProps { }
function Stack(props: StackProps, children?: ComponentChildren): Node;
interface StatProps extends BaseProps {
title?: string | (() => string);
value?: string | number | (() => string | number);
desc?: string | (() => string);
}
function Stat(props: StatProps): Node;
interface StatsProps extends BaseProps { }
function Stats(props: StatsProps, children?: ComponentChildren): Node;
interface StepsProps extends BaseProps { }
function Steps(props: StepsProps, children?: ComponentChildren): Node;
interface StepProps extends BaseProps {
dataContent?: string;
}
function Step(props: StepProps, children?: ComponentChildren): Node;
interface SwapProps extends BaseProps { }
function Swap(props: SwapProps, children?: ComponentChildren): Node;
interface SwapToggleProps extends BaseProps {
value?: Signal<boolean> | boolean;
}
function SwapToggle(props: SwapToggleProps): Node;
interface SwapOnProps extends BaseProps { }
function SwapOn(props: SwapOnProps, children?: ComponentChildren): Node;
interface SwapOffProps extends BaseProps { }
function SwapOff(props: SwapOffProps, children?: ComponentChildren): Node;
interface TableProps extends BaseProps { }
function Table(props: TableProps, children?: ComponentChildren): Node;
interface TableColumn {
label?: string;
key?: string;
render?: (item: any, index: number) => ComponentChild;
class?: string;
}
interface TableItemsProps extends BaseProps {
items?: any[] | (() => any[]);
columns?: TableColumn[];
header?: boolean;
}
function TableItems(props: TableItemsProps): Node;
interface TabItem {
label?: string | (() => string);
content?: ComponentChild | (() => ComponentChild);
class?: string;
closable?: boolean;
onclick?: (e: MouseEvent) => void;
}
interface TabsProps extends BaseProps {
items?: TabItem[] | (() => TabItem[]);
activeIndex?: Signal<number>;
onClose?: (index: number, item: TabItem) => void;
children?: ComponentChildren;
}
function Tabs(props: TabsProps): Node;
interface TextareaProps extends BaseProps {
value?: Signal<string> | string;
placeholder?: string;
}
function Textarea(props: TextareaProps): Node;
interface TextrotateProps extends BaseProps { }
function Textrotate(props: TextrotateProps, children?: ComponentChildren): Node;
interface TimelineProps extends BaseProps { }
function Timeline(props: TimelineProps, children?: ComponentChildren): Node;
type ToastType = 'alert-info' | 'alert-success' | 'alert-warning' | 'alert-error';
function Toast(message: string | (() => string), type?: ToastType, duration?: number): () => void;
interface ToggleProps extends BaseProps {
checked?: Signal<boolean> | boolean;
}
function Toggle(props: ToggleProps): Node;
interface TooltipProps extends BaseProps {
tip: string | (() => string);
}
function Tooltip(props: TooltipProps, children?: ComponentChildren): Node;
const Components: {
Accordion: typeof Accordion;
Alert: typeof Alert;
Autocomplete: typeof Autocomplete;
Badge: typeof Badge;
Button: typeof Button;
Calendar: typeof Calendar;
Card: typeof Card;
CardTitle: typeof CardTitle;
CardBody: typeof CardBody;
CardActions: typeof CardActions;
Carousel: typeof Carousel;
CarouselItem: typeof CarouselItem;
Chat: typeof Chat;
ChatBubble: typeof ChatBubble;
ChatFooter: typeof ChatFooter;
ChatHeader: typeof ChatHeader;
ChatImage: typeof ChatImage;
Checkbox: typeof Checkbox;
Colorpicker: typeof Colorpicker;
ColorPalette: typeof ColorPalette;
Datepicker: typeof Datepicker;
Divider: typeof Divider;
Drawer: typeof Drawer;
DrawerToggle: typeof DrawerToggle;
DrawerContent: typeof DrawerContent;
DrawerSide: typeof DrawerSide;
DrawerOverlay: typeof DrawerOverlay;
Dropdown: typeof Dropdown;
DropdownButton: typeof DropdownButton;
DropdownContent: typeof DropdownContent;
Editor: typeof Editor;
Fab: typeof Fab;
Fieldset: typeof Fieldset;
Fileinput: typeof Fileinput;
Icon: typeof Icon;
Indicator: typeof Indicator;
Input: typeof Input;
Kbd: typeof Kbd;
List: typeof List;
ListRows: typeof ListRows;
Loading: typeof Loading;
Menu: typeof Menu;
Modal: typeof Modal;
Navbar: typeof Navbar;
Progress: typeof Progress;
Radial: typeof Radial;
Radio: typeof Radio;
Range: typeof Range;
Rating: typeof Rating;
RatingItems: typeof RatingItems;
Select: typeof Select;
Skeleton: typeof Skeleton;
SkeletonText: typeof SkeletonText;
Stack: typeof Stack;
Stat: typeof Stat;
Stats: typeof Stats;
Steps: typeof Steps;
Step: typeof Step;
Swap: typeof Swap;
SwapToggle: typeof SwapToggle;
SwapOn: typeof SwapOn;
SwapOff: typeof SwapOff;
Table: typeof Table;
TableItems: typeof TableItems;
Tabs: typeof Tabs;
Textarea: typeof Textarea;
Textrotate: typeof Textrotate;
Timeline: typeof Timeline;
Toast: typeof Toast;
Toggle: typeof Toggle;
Tooltip: typeof Tooltip;
};
export { Components };
export default Components;
declare global { declare global {
const Accordion: typeof import('sigpro-ui').Accordion; const Accordion: typeof import('sigpro-ui').Accordion;
const Alert: typeof import('sigpro-ui').Alert; const Alert: typeof import('sigpro-ui').Alert;
@@ -491,6 +508,7 @@ declare global {
const Dropdown: typeof import('sigpro-ui').Dropdown; const Dropdown: typeof import('sigpro-ui').Dropdown;
const DropdownButton: typeof import('sigpro-ui').DropdownButton; const DropdownButton: typeof import('sigpro-ui').DropdownButton;
const DropdownContent: typeof import('sigpro-ui').DropdownContent; const DropdownContent: typeof import('sigpro-ui').DropdownContent;
const Editor: typeof import('sigpro-ui').Editor;
const Fab: typeof import('sigpro-ui').Fab; const Fab: typeof import('sigpro-ui').Fab;
const Fieldset: typeof import('sigpro-ui').Fieldset; const Fieldset: typeof import('sigpro-ui').Fieldset;
const Fileinput: typeof import('sigpro-ui').Fileinput; const Fileinput: typeof import('sigpro-ui').Fileinput;

14
index.js
View File

@@ -1,20 +1,10 @@
import * as All from './sigpro-ui.js'; import * as All from './sigpro-ui.js';
import * as Editor from './sigpro-editor.js';
import { Locale, tt } from './sigpro-locale.js';
import { hide, get } from './sigpro-helpers.js';
export const Components = { export const Components = { ...All };
...All,
...Editor,
};
export const Utils = {
Locale, tt, hide, get
};
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => { Object.entries({ ...Components}).forEach(([name, value]) => {
Object.defineProperty(window, name, { Object.defineProperty(window, name, {
value, value,
writable: false, writable: false,

4
package.json
View File

@@ -45,8 +45,8 @@
"scripts": { "scripts": {
"del": "bun pm cache rm && rm -f bun.lockb $$ rm -f bun.lock", "del": "bun pm cache rm && rm -f bun.lockb $$ rm -f bun.lock",
"clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css", "clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
"build:css": "tailwindcss -i ./sigpro-css.css -o ./dist/sigpro-ui.css --content './src/**/*.js' && du -h ./dist/sigpro-ui.css", "build:css": "tailwindcss -i ./sigpro-ui.css -o ./dist/sigpro-ui.css --content './src/**/*.js' && du -h ./dist/sigpro-ui.css",
"build:cssmin": "tailwindcss -i ./sigpro-css.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css", "build:cssmin": "tailwindcss -i ./sigpro-ui.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css",
"build:js": "bun run build:js:iife && bun run build:js:esm", "build:js": "bun run build:js:iife && bun run build:js:esm",
"build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI", "build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI",
"build:js:iife:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify", "build:js:iife:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",

201
sigpro-editor.js
View File

@@ -1,201 +0,0 @@
import { h, $ } from "sigpro"
import { get, cls, isFn } from "./sigpro-helpers.js"
export const Editor = (p) => {
const { value, class: extraClass } = p
let editorRef = null
let savedRange = null
const isSource = $(false)
const source = $("")
const count = $(0)
const refreshTick = $(0)
const showEmojis = $(false)
const emojis = ["😀", "😊", "😉", "🧐", "😮", "🤔", "😅", "😂", "😍", "😘", "🥰", "👍", "👎", "👌", "🤝", "🤞", "👋", "👏", "🙌", "🙏", "💪", "☝️", "👇", "👈", "👉", "🖕", "✅", "⚠️", "🚀", "📢", "✉️", "❤️"]
const saveSelection = () => {
const sel = window.getSelection()
if (sel.getRangeAt && sel.rangeCount) savedRange = sel.getRangeAt(0)
}
const restoreSelection = () => {
if (savedRange) {
const sel = window.getSelection()
sel.removeAllRanges()
sel.addRange(savedRange)
}
}
const triggerRefresh = () => {
refreshTick(refreshTick() + 1)
if (editorRef) count(editorRef.innerText.length)
}
const notify = () => {
if (!editorRef) return
const html = editorRef.innerHTML
if (isFn(value)) value(html)
else p.onchange?.(html)
triggerRefresh()
}
const exec = (cmd, val = null) => {
if (!editorRef) return
editorRef.focus()
if (savedRange) restoreSelection()
document.execCommand(cmd, false, val)
savedRange = null
notify()
}
const openLightbox = (src) => {
const overlay = document.createElement('div')
overlay.style = `position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;`
const img = document.createElement('img')
img.src = src
img.style = `max-width:95%;max-height:95%;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px;`
overlay.onclick = () => document.body.removeChild(overlay)
overlay.appendChild(img)
document.body.appendChild(overlay)
}
const handleUpload = (file) => {
if (!file) return
const reader = new FileReader()
reader.onload = (re) => {
if (file.type.startsWith('image/')) {
const imgHtml = `<div style="display:inline-block; resize:both; overflow:hidden; vertical-align:bottom; line-height:0; width:200px; height:auto; border:1px dashed #ccc; padding:2px; cursor:pointer;" class="resizable-img-container"><img src="${re.target.result}" style="width:100%; height:100%; object-fit:contain; pointer-events:none;"></div>&nbsp;`
exec("insertHTML", imgHtml)
} else {
const linkHtml = `<a href="${re.target.result}" download="${file.name}" contenteditable="false" style="display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; background:#f9f9f9; text-decoration:none; color:#333; font-size:12px; margin:2px; cursor:pointer;"><span class="icon-[lucide--paperclip] w-3 h-3"></span>${file.name}</a>&nbsp;`
exec("insertHTML", linkHtml)
}
}
reader.readAsDataURL(file)
}
const queryState = (cmd, val = null) => {
refreshTick(); if (!editorRef || isSource()) return false
try {
if (cmd === 'formatBlock') {
let node = window.getSelection().getRangeAt(0).commonAncestorContainer
while (node && node !== editorRef) {
if (node.nodeType === 1 && node.tagName === val) return true
node = node.parentNode
}
return false
}
return document.queryCommandState(cmd)
} catch (e) { return false }
}
const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
h("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('bold') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("bold") }, h("span", { class: "icon-[lucide--bold]" })),
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('italic') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("italic") }, h("span", { class: "icon-[lucide--italic]" })),
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('underline') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("underline") }, h("span", { class: "icon-[lucide--underline]" })),
h("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
h("button", {
type: "button",
class: "btn btn-ghost btn-xs",
onclick: () => exec("justifyLeft")
}, h("span", { class: "icon-[lucide--align-left]" })),
h("button", {
type: "button",
class: "btn btn-ghost btn-xs",
onclick: () => exec("justifyCenter")
}, h("span", { class: "icon-[lucide--align-center]" })),
h("button", {
type: "button",
class: "btn btn-ghost btn-xs",
onclick: () => exec("justifyRight")
}, h("span", { class: "icon-[lucide--align-right]" })),
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h("span", { class: "icon-[lucide--list]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h("span", { class: "icon-[lucide--list-ordered]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h("span", { class: "icon-[lucide--indent-decrease]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent") }, h("span", { class: "icon-[lucide--indent-increase]" })),
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('formatBlock', 'BLOCKQUOTE') ? 'btn-active' : ''}`, onclick: () => exec("formatBlock", queryState('formatBlock', 'BLOCKQUOTE') ? 'P' : 'BLOCKQUOTE') }, h("span", { class: "icon-[lucide--quote]" })),
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const url = window.prompt('URL:'); if (url) exec("createLink", url) } }, h("span", { class: "icon-[lucide--link]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const input = document.createElement('input'); input.type = 'file'; input.onchange = (e) => handleUpload(e.target.files[0]); input.click(); } }, h("span", { class: "icon-[lucide--paperclip]" })),
h("div", { class: "relative" }, [
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => { e.stopPropagation(); saveSelection(); showEmojis(!showEmojis()); } }, h("span", { class: "icon-[lucide--smile]" })),
h("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map(emo => h("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => { e.stopPropagation(); exec("insertText", emo); showEmojis(false); } }, emo)))
]),
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h("span", { class: "icon-[lucide--undo-2]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h("span", { class: "icon-[lucide--redo-2]" })),
]),
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? 'btn-active' : ''}`, onclick: () => { if (!isSource()) source(editorRef?.innerHTML || ""); else if (editorRef) { editorRef.innerHTML = source(); notify(); }; isSource(!isSource()) } }, h("span", { class: "icon-[lucide--code-2]" }))
])
if (typeof document !== 'undefined' && !document.getElementById('editor-styles')) {
const style = document.createElement('style')
style.id = 'editor-styles'
style.textContent = `
[contenteditable="true"] div,
[contenteditable="true"] p {
margin: 0;
padding: 0;
}
`
document.head.appendChild(style)
}
return h("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
toolbar,
h("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
h("div", {
ref: el => {
if (!editorRef && el) {
editorRef = el; el.innerHTML = get(value) || "";
document.execCommand("defaultParagraphSeparator", false, "br");
el.addEventListener('click', (e) => {
const container = e.target.closest('.resizable-img-container');
if (container) { const img = container.querySelector('img'); if (img) openLightbox(img.src); }
});
}
},
style: () => `min-height:22rem;${isSource() ? 'display:none' : ''}`,
class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8",
contenteditable: "true",
oninput: notify,
onkeydown: (e) => { if (e.key === 'Tab') { e.preventDefault(); exec("indent"); } },
onkeyup: () => { triggerRefresh(); saveSelection(); },
onclick: (e) => { triggerRefresh(); saveSelection(); e.stopPropagation(); },
onmouseup: () => { notify(); saveSelection(); },
onpaste: (e) => {
e.preventDefault();
const text = e.clipboardData.getData('text/plain');
exec('insertText', text);
},
ondragover: (e) => e.preventDefault(),
ondrop: (e) => { e.preventDefault(); handleUpload(e.dataTransfer.files[0]) }
}),
h("textarea", {
class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0",
style: () => isSource() ? '' : 'display:none',
value: source,
oninput: (e) => { source(e.target.value); if (editorRef) editorRef.innerHTML = e.target.value; p.onchange?.(e.target.value); }
})
]),
h("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
h("span", () => `${count()}`)
])
])
}

8
sigpro-helpers.js
View File

@@ -1,8 +0,0 @@
// Helpers
export const get = val => typeof val === "function" ? val() : val;
export const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
export const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
export const isFn = f => typeof f === "function";
export const filterBy = (items, query, field = 'label', q = String(query).toLowerCase()) => !query ? get(items) : get(items).filter(item => String(item && typeof item === 'object' ? item[field] : item).toLowerCase().includes(q));
export const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
export const hide = () => document.activeElement?.blur()

62
sigpro-locale.js
View File

@@ -1,62 +0,0 @@
// core/utils.js
import { $, h } from "sigpro";
export const val = t => typeof t === "function" ? t() : t;
export const ui = (baseClass, additionalClassOrFn) =>
typeof additionalClassOrFn === "function"
? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim()
: `${baseClass} ${additionalClassOrFn || ""}`.trim();
export const getIcon = (icon) => {
if (!icon) return null;
if (typeof icon === 'function') {
return h("span", { class: "mr-1" }, icon());
}
if (typeof icon === 'object') {
return h("span", { class: "mr-1" }, icon);
}
if (typeof icon === 'string') {
const parts = icon.trim().split(/\s+/);
const hasRight = parts[parts.length - 1] === 'right';
const iconClass = hasRight ? parts.slice(0, -1).join(' ') : icon;
const spacing = hasRight ? 'ml-1' : 'mr-1';
if (iconClass && !iconClass.startsWith('icon-[') && !iconClass.includes('--')) {
return h("span", { class: spacing }, iconClass);
}
return h("span", { class: `${iconClass} ${spacing}`.trim() });
}
return null;
};
export const i18n = {
es: {
close: "Cerrar",
confirm: "Confirmar",
cancel: "Cancelar",
search: "Buscar...",
loading: "Cargando...",
nodata: "Sin datos"
},
en: {
close: "Close",
confirm: "Confirm",
cancel: "Cancel",
search: "Search...",
loading: "Loading...",
nodata: "No data"
}
};
export const currentLocale = $("es");
// Export design
export const Locale = t => currentLocale(t);
export const tt = t => () => i18n[currentLocale()][t] || t;

0
sigpro-css.css → sigpro-ui.css
View File

340
sigpro-ui.js
View File

@@ -1,7 +1,39 @@
// All base components // All base components
import { h, each, watch, when, mount, $ } from "sigpro"; import { h, each, watch, when, mount, $, isFunc } from "sigpro";
import { get, getBy, cls, isFn, filterBy, rand, hide } from "./sigpro-helpers.js"
// Helpers
const val = val => typeof val === "function" ? val() : val;
const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
const filterBy = (items, query, field = 'label', q = String(query).toLowerCase()) => !query ? val(items) : val(items).filter(item => String(item && typeof item === 'object' ? item[field] : item).toLowerCase().includes(q));
const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
export const hide = () => document.activeElement?.blur()
// Locales
export const i18n = {
es: {
close: "Cerrar",
confirm: "Confirmar",
cancel: "Cancelar",
search: "Buscar...",
loading: "Cargando...",
nodata: "Sin datos"
},
en: {
close: "Close",
confirm: "Confirm",
cancel: "Cancel",
search: "Search...",
loading: "Loading...",
nodata: "No data"
}
};
export const currentLocale = $("en");
export const Locale = t => currentLocale(t);
export const tt = t => () => i18n[currentLocale()][t] || t;
// Components
export const Accordion = (p) => { export const Accordion = (p) => {
const name = p.name || rand('acc') const name = p.name || rand('acc')
return each(p.items, (it) => { return each(p.items, (it) => {
@@ -16,14 +48,14 @@ export const Alert = (p, c) => h("div", { ...p, class: cls("alert", p.class) },
export const Avatar = (p, c) => h("div", { class: "avatar" }, h('div', { class: p.class }, c)); export const Avatar = (p, c) => h("div", { class: "avatar" }, h('div', { class: p.class }, c));
export const AvatarGroup = (p, c) => h("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c); export const AvatarGroup = (p, c) => h("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => { export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
const query = $(get(value) || '') const query = $(val(value) || '')
const filtered = $(() => filterBy(items, query())) const filtered = $(() => filterBy(items, query()))
const pick = (item) => { const pick = (item) => {
const display = getBy(item) const display = getBy(item)
const actual = typeof item === 'string' ? item : item.value const actual = typeof item === 'string' ? item : item.value
query(display) query(display)
if (isFn(value)) value(actual) if (isFunc(value)) value(actual)
onselect?.(item) onselect?.(item)
hide() hide()
} }
@@ -37,7 +69,7 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
left: h('span', { class: 'icon-[lucide--search]' }), left: h('span', { class: 'icon-[lucide--search]' }),
oninput: (e) => { oninput: (e) => {
query(e.target.value) query(e.target.value)
if (isFn(value)) value(e.target.value) if (isFunc(value)) value(e.target.value)
} }
}) })
), ),
@@ -70,8 +102,8 @@ export const Calendar = (p) => {
const now = new Date() const now = new Date()
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}` const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
const fmt = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}` const fmt = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
const rangeMode = () => get(p.range) === true const rangeMode = () => val(p.range) === true
const current = () => get(p.value) const current = () => val(p.value)
const selectDate = (date) => { const selectDate = (date) => {
const s = fmt(date) const s = fmt(date)
const v = current() const v = current()
@@ -93,7 +125,7 @@ export const Calendar = (p) => {
const HourSlider = ({ value: hVal, onChange: onH }) => h('div', { class: 'flex-1' }, [ const HourSlider = ({ value: hVal, onChange: onH }) => h('div', { class: 'flex-1' }, [
h('div', { class: 'flex gap-2 items-center' }, [ h('div', { class: 'flex gap-2 items-center' }, [
h('input', { type: 'range', min: 0, max: 23, value: hVal, class: 'range range-xs flex-1', oninput: e => onH(+e.target.value) }), h('input', { type: 'range', min: 0, max: 23, value: hVal, class: 'range range-xs flex-1', oninput: e => onH(+e.target.value) }),
h('span', { class: 'text-sm font-mono min-w-[48px] text-center' }, () => String(get(hVal)).padStart(2, '0') + ':00') h('span', { class: 'text-sm font-mono min-w-[48px] text-center' }, () => String(val(hVal)).padStart(2, '0') + ':00')
]) ])
]) ])
return h('div', { return h('div', {
@@ -165,7 +197,7 @@ export const ChatHeader = (p, c) => h("div", { ...p, class: cls("chat-header", p
export const ChatImage = (p, c) => h("div", { ...p, class: cls("chat-image avatar", p.class) }, h("div", { class: "w-10 rounded-full" }, typeof c === "string" ? h("img", { src: c, alt: "avatar" }) : c)); export const ChatImage = (p, c) => h("div", { ...p, class: cls("chat-image avatar", p.class) }, h("div", { class: "w-10 rounded-full" }, typeof c === "string" ? h("img", { src: c, alt: "avatar" }) : c));
export const Checkbox = (p) => h("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) }); export const Checkbox = (p) => h("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) });
export const Colorpicker = (p) => { export const Colorpicker = (p) => {
const current = () => get(p.value) || '#000000' const current = () => val(p.value) || '#000000'
return Dropdown({}, [ return Dropdown({}, [
DropdownButton({ class: 'btn' }, [ DropdownButton({ class: 'btn' }, [
h('div', { class: 'size-5 rounded-sm', style: () => `background-color: ${current()}` }), h('div', { class: 'size-5 rounded-sm', style: () => `background-color: ${current()}` }),
@@ -173,13 +205,13 @@ export const Colorpicker = (p) => {
]), ]),
DropdownContent({ class: 'p-0' }, DropdownContent({ class: 'p-0' },
ColorPalette({ ColorPalette({
value: p.value, onchange: (c) => { isFn(p.value) ? p.value(c) : p.onchange?.(c) } value: p.value, onchange: (c) => { isFunc(p.value) ? p.value(c) : p.onchange?.(c) }
}) })
) )
]) ])
} }
export const ColorPalette = (p) => { export const ColorPalette = (p) => {
const current = () => get(p.value) || '#000000' const current = () => val(p.value) || '#000000'
const palette = [ const palette = [
'#000', '#1A1A1A', '#333', '#4D4D4D', '#666', '#808080', '#B3B3B3', '#FFF', '#000', '#1A1A1A', '#333', '#4D4D4D', '#666', '#808080', '#B3B3B3', '#FFF',
'#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626', '#ef4444', '#f87171', '#fca5a5', '#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626', '#ef4444', '#f87171', '#fca5a5',
@@ -191,7 +223,7 @@ export const ColorPalette = (p) => {
'#2e1065', '#4c1d95', '#6d28d9', '#7c3aed', '#8b5cf6', '#a855f7', '#d946ef', '#fae8ff' '#2e1065', '#4c1d95', '#6d28d9', '#7c3aed', '#8b5cf6', '#a855f7', '#d946ef', '#fae8ff'
] ]
const pick = (c) => { const pick = (c) => {
isFn(p.value) ? p.value(c) : p.onchange?.(c) isFunc(p.value) ? p.value(c) : p.onchange?.(c)
hide() hide()
} }
@@ -211,10 +243,10 @@ export const ColorPalette = (p) => {
} }
export const Datepicker = (p) => { export const Datepicker = (p) => {
const displayValue = $("") const displayValue = $("")
const rangeMode = () => get(p.range) === true const rangeMode = () => val(p.range) === true
watch(() => { watch(() => {
const v = get(p.value) const v = val(p.value)
if (!v) return displayValue("") if (!v) return displayValue("")
let text = "" let text = ""
if (typeof v === "string") { if (typeof v === "string") {
@@ -231,7 +263,7 @@ export const Datepicker = (p) => {
}) })
const handleChange = (val) => { const handleChange = (val) => {
if (isFn(p.value)) p.value(val) if (isFunc(p.value)) p.value(val)
else p.onChange?.(val) else p.onChange?.(val)
if (!rangeMode() || val?.end != null) hide() if (!rangeMode() || val?.end != null) hide()
} }
@@ -252,7 +284,7 @@ export const Datepicker = (p) => {
onmousedown: (e) => { onmousedown: (e) => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
if (isFn(p.value)) p.value(null) if (isFunc(p.value)) p.value(null)
else p.onChange?.(null) else p.onChange?.(null)
displayValue("") // Forzar limpieza visual inmediata displayValue("") // Forzar limpieza visual inmediata
} }
@@ -269,7 +301,7 @@ export const Datepicker = (p) => {
]) ])
} }
export const Drawer = (p, c) => div({ ...p, class: cls('drawer', p.class) }, c) export const Drawer = (p, c) => div({ ...p, class: cls('drawer', p.class) }, c)
export const DrawerToggle = (p) => input({ ...p, type: 'checkbox', class: 'drawer-toggle', checked: () => get(p.checked), onchange: (e) => isFn(p.checked) && p.checked(e.target.checked) }) export const DrawerToggle = (p) => input({ ...p, type: 'checkbox', class: 'drawer-toggle', checked: () => val(p.checked), onchange: (e) => isFunc(p.checked) && p.checked(e.target.checked) })
export const DrawerContent = (p, c) => div({ ...p, class: cls('drawer-content', p.class) }, c) export const DrawerContent = (p, c) => div({ ...p, class: cls('drawer-content', p.class) }, c)
export const DrawerSide = (p, c) => div({ ...p, class: cls('drawer-side', p.class) }, c) export const DrawerSide = (p, c) => div({ ...p, class: cls('drawer-side', p.class) }, c)
export const DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls('drawer-overlay', p.class) }) export const DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls('drawer-overlay', p.class) })
@@ -293,15 +325,15 @@ export const Fileinput = (p) => {
} }
const updated = [...files(), ...arr] const updated = [...files(), ...arr]
files(updated) files(updated)
if (isFn(p.onselect)) p.onselect(updated) if (isFunc(p.onselect)) p.onselect(updated)
else if (isFn(p.value)) p.value(updated) else if (isFunc(p.value)) p.value(updated)
} }
const remove = (idx) => { const remove = (idx) => {
const updated = files().filter((_, i) => i !== idx) const updated = files().filter((_, i) => i !== idx)
files(updated) files(updated)
if (isFn(p.onselect)) p.onselect(updated) if (isFunc(p.onselect)) p.onselect(updated)
else if (isFn(p.value)) p.value(updated) else if (isFunc(p.value)) p.value(updated)
} }
return h('div', { class: cls('fieldset w-full p-0', p.class) }, [ return h('div', { class: cls('fieldset w-full p-0', p.class) }, [
h('label', { h('label', {
@@ -354,7 +386,7 @@ export const Input = (p) => {
const pattern = rule ?? null; const pattern = rule ?? null;
const inputType = () => isPassword const inputType = () => isPassword
? (get(showPassword) ? 'text' : 'password') ? (val(showPassword) ? 'text' : 'password')
: (p.type || 'search'); : (p.type || 'search');
return h("label", { class: float ? 'floating-label' : '' }, [ return h("label", { class: float ? 'floating-label' : '' }, [
@@ -376,7 +408,7 @@ export const Input = (p) => {
}; };
export const Kbd = (p, c) => h("kbd", { ...p, class: cls("kbd", p.class) }, c); export const Kbd = (p, c) => h("kbd", { ...p, class: cls("kbd", p.class) }, c);
export const List = (p, c) => h('ul', { ...p, class: cls('list', p.class) }, c) export const List = (p, c) => h('ul', { ...p, class: cls('list', p.class) }, c)
export const ListRows = (p) => () => (get(p.items) || []).map((item, idx) => h('li', { class: cls('list-row', p.class, item?.class) }, typeof p.render === 'function' ? p.render(item, idx) : item)) export const ListRows = (p) => () => (val(p.items) || []).map((item, idx) => h('li', { class: cls('list-row', p.class, item?.class) }, typeof p.render === 'function' ? p.render(item, idx) : item))
export const Loading = (p, c) => h("span", { ...p, class: cls("loading loading-spinner", p.class) }, c); export const Loading = (p, c) => h("span", { ...p, class: cls("loading loading-spinner", p.class) }, c);
export const Menu = (p) => { export const Menu = (p) => {
if (p.children !== undefined) return h('ul', { class: cls('menu', p.class), ...p }, p.children) if (p.children !== undefined) return h('ul', { class: cls('menu', p.class), ...p }, p.children)
@@ -384,26 +416,26 @@ export const Menu = (p) => {
const render = (item) => item.children const render = (item) => item.children
? h('li', {}, h('details', { open: item.open || undefined }, [ ? h('li', {}, h('details', { open: item.open || undefined }, [
h('summary', {}, getBy(item)), h('summary', {}, getBy(item)),
h('ul', {}, each(() => get(item.children) || [], render)) h('ul', {}, each(() => val(item.children) || [], render))
])) ]))
: h('li', {}, h('a', { : h('li', {}, h('a', {
href: item.href, href: item.href,
onclick: item.onclick ? (e) => { if (!item.href) e.preventDefault(); item.onclick(e) } : null onclick: item.onclick ? (e) => { if (!item.href) e.preventDefault(); item.onclick(e) } : null
}, getBy(item))) }, getBy(item)))
return h('ul', { class: cls('menu', p.class) }, return h('ul', { class: cls('menu', p.class) },
each(() => get(items) || [], render) each(() => val(items) || [], render)
) )
} }
export const Modal = (p) => { export const Modal = (p) => {
let dialogRef = null; let dialogRef = null;
watch(() => { watch(() => {
const isOpen = get(p.open); const isOpen = val(p.open);
if (!dialogRef) return; if (!dialogRef) return;
isOpen ? dialogRef.showModal() : dialogRef.hide(); isOpen ? dialogRef.showModal() : dialogRef.hide();
}); });
const close = () => isFn(p.open) && p.open(false); const close = () => isFunc(p.open) && p.open(false);
return h("dialog", { return h("dialog", {
...p, ...p,
@@ -426,18 +458,18 @@ export const Modal = (p) => {
}; };
export const Navbar = (p, c) => h("div", { ...p, class: cls("navbar", p.class) }, c); export const Navbar = (p, c) => h("div", { ...p, class: cls("navbar", p.class) }, c);
export const Progress = (p) => h("progress", { ...p, class: cls("progress", p.class) }); export const Progress = (p) => h("progress", { ...p, class: cls("progress", p.class) });
export const Radial = (p, c) => h("div", { class: cls("radial-progress", p.class,), style: `--value:${get(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c) export const Radial = (p, c) => h("div", { class: cls("radial-progress", p.class,), style: `--value:${val(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c)
export const Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) }); export const Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) });
export const Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) }); export const Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) });
export const Rating = (p, c) => h('div', { ...p, class: "rating" }, c); export const Rating = (p, c) => h('div', { ...p, class: "rating" }, c);
export const RatingItems = (p) => [...Array(p.count)].map((_, i) => h('input', { class: cls('mask', p.class), name: p.name, type: 'radio', checked: () => get(p.value) === i, onchange: () => isFn(p.value) ? p.value(i) : p.onchange?.(i) })) export const RatingItems = (p) => [...Array(p.count)].map((_, i) => h('input', { class: cls('mask', p.class), name: p.name, type: 'radio', checked: () => val(p.value) === i, onchange: () => isFunc(p.value) ? p.value(i) : p.onchange?.(i) }))
export const Select = (p, c) => { export const Select = (p, c) => {
if (c !== undefined) return h('select', { class: cls('select', p.class), ...p }, c) if (c !== undefined) return h('select', { class: cls('select', p.class), ...p }, c)
const { label, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p const { label, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p
const opts = () => { const opts = () => {
const raw = get(items) || [] const raw = val(items) || []
const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: '' }] : [] const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: '' }] : []
return [...ph, ...raw] return [...ph, ...raw]
} }
@@ -448,8 +480,8 @@ export const Select = (p, c) => {
(!float && label) ? h('span', { class: 'label' }, label) : null, (!float && label) ? h('span', { class: 'label' }, label) : null,
left ?? null, left ?? null,
h('select', { h('select', {
value: () => get(value), value: () => val(value),
onchange: (e) => isFn(value) ? value(e.target.value) : rest.onchange?.(e) onchange: (e) => isFunc(value) ? value(e.target.value) : rest.onchange?.(e)
}, },
each(opts, (item) => { each(opts, (item) => {
const val = getBy(item, item.value !== undefined ? 'value' : undefined) const val = getBy(item, item.value !== undefined ? 'value' : undefined)
@@ -474,14 +506,14 @@ export const Stat = (p) => h('div', { ...p, class: cls('stat', p.class) }, [
export const Steps = (p, c) => h("ul", { ...p, class: cls("steps", p.class) }, c); export const Steps = (p, c) => h("ul", { ...p, class: cls("steps", p.class) }, c);
export const Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c); export const Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
export const Swap = (p, c) => h('label', { ...p, class: cls('swap', p.class) }, c) export const Swap = (p, c) => h('label', { ...p, class: cls('swap', p.class) }, c)
export const SwapToggle = (p) => h('input', { type: 'checkbox', checked: () => get(p.value), onchange: (e) => isFn(p.value) && p.value(e.target.checked), class: p.class }) export const SwapToggle = (p) => h('input', { type: 'checkbox', checked: () => val(p.value), onchange: (e) => isFunc(p.value) && p.value(e.target.checked), class: p.class })
export const SwapOn = (p, c) => h('div', { ...p, class: cls('swap-on', p.class) }, c) export const SwapOn = (p, c) => h('div', { ...p, class: cls('swap-on', p.class) }, c)
export const SwapOff = (p, c) => h('div', { ...p, class: cls('swap-off', p.class) }, c) export const SwapOff = (p, c) => h('div', { ...p, class: cls('swap-off', p.class) }, c)
export const Table = (p, c) => h('table', { ...p, class: cls('table', p.class) }, c) export const Table = (p, c) => h('table', { ...p, class: cls('table', p.class) }, c)
export const TableItems = ({ items, columns = [], header = true }) => { export const TableItems = ({ items, columns = [], header = true }) => {
const head = header !== false && columns.some(c => c.label) ? h('thead', {}, h('tr', {}, columns.map(c => h('th', { class: c.class }, c.label)))) : null const head = header !== false && columns.some(c => c.label) ? h('thead', {}, h('tr', {}, columns.map(c => h('th', { class: c.class }, c.label)))) : null
const body = h('tbody', {}, () => { const body = h('tbody', {}, () => {
const list = get(items) || [] const list = val(items) || []
return list.map((it, idx) => h('tr', {}, columns.map(c => { const v = c.render ? c.render(it, idx) : it[c.key]; return h('td', { class: c.class }, v) }))) return list.map((it, idx) => h('tr', {}, columns.map(c => { const v = c.render ? c.render(it, idx) : it[c.key]; return h('td', { class: c.class }, v) })))
}) })
return [head, body].filter(Boolean) return [head, body].filter(Boolean)
@@ -492,16 +524,16 @@ export const Tabs = (p, c) => {
return h('div', { ...rest, class: cls('tabs', className) }, c) return h('div', { ...rest, class: cls('tabs', className) }, c)
} }
const { items, activeIndex, onClose, class: className, ...rest } = p const { items, activeIndex, onClose, class: className, ...rest } = p
const get = x => (isFn(x) ? x() : x) const get = x => (isFunc(x) ? x() : x)
const closeH = onClose || (isFn(items) ? (idx, item) => { const closeH = onClose || (isFunc(items) ? (idx, item) => {
const arr = get(items) const arr = val(items)
const newArr = arr.filter((_, i) => i !== idx) const newArr = arr.filter((_, i) => i !== idx)
items(newArr) items(newArr)
if (activeIndex() >= newArr.length) activeIndex(Math.max(0, newArr.length - 1)) if (activeIndex() >= newArr.length) activeIndex(Math.max(0, newArr.length - 1))
} : null) } : null)
return h('div', { ...rest, class: cls('tabs', className) }, () => { return h('div', { ...rest, class: cls('tabs', className) }, () => {
const list = get(items) || [] const list = val(items) || []
return list.flatMap((it, idx) => { return list.flatMap((it, idx) => {
const isActive = () => activeIndex() === idx const isActive = () => activeIndex() === idx
const button = h('button', { const button = h('button', {
@@ -517,7 +549,7 @@ export const Tabs = (p, c) => {
const contentDiv = h('div', { const contentDiv = h('div', {
class: 'tab-content bg-base-100 border-base-300 p-6', class: 'tab-content bg-base-100 border-base-300 p-6',
style: () => `display: ${isActive() ? 'block' : 'none'};` style: () => `display: ${isActive() ? 'block' : 'none'};`
}, isFn(it.content) ? it.content() : it.content) }, isFunc(it.content) ? it.content() : it.content)
return [button, contentDiv] return [button, contentDiv]
}) })
}) })
@@ -552,7 +584,7 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
}, 300); }, 300);
}; };
enterTimer = setTimeout(() => visible(true), 0); enterTimer = setTimeout(() => visible(true), 0);
const content = typeof message === 'function' ? get(message) : message; const content = typeof message === 'function' ? val(message) : message;
const msgNode = typeof content === 'string' ? h("span", {}, content) : content; const msgNode = typeof content === 'string' ? h("span", {}, content) : content;
return h("div", { return h("div", {
class: () => { class: () => {
@@ -575,3 +607,231 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
}; };
export const Toggle = (p) => h("input", { ...p, type: "checkbox", class: cls("toggle", p.class) }); export const Toggle = (p) => h("input", { ...p, type: "checkbox", class: cls("toggle", p.class) });
export const Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c); export const Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c);
// Editor
export const Editor = (p) => {
const { value, class: extraClass } = p
let editorRef = null
let savedRange = null
const isSource = $(false)
const source = $("")
const count = $(0)
const refreshTick = $(0)
const showEmojis = $(false)
const emojis = ["😀", "😊", "😉", "🧐", "😮", "🤔", "😅", "😂", "😍", "😘", "🥰", "👍", "👎", "👌", "🤝", "🤞", "👋", "👏", "🙌", "🙏", "💪", "☝️", "👇", "👈", "👉", "🖕", "✅", "⚠️", "🚀", "📢", "✉️", "❤️"]
const saveSelection = () => {
const sel = window.getSelection()
if (sel.getRangeAt && sel.rangeCount) savedRange = sel.getRangeAt(0)
}
const restoreSelection = () => {
if (savedRange) {
const sel = window.getSelection()
sel.removeAllRanges()
sel.addRange(savedRange)
}
}
const triggerRefresh = () => {
refreshTick(refreshTick() + 1)
if (editorRef) count(editorRef.innerText.length)
}
const notify = () => {
if (!editorRef) return
const html = editorRef.innerHTML
if (isFunc(value)) value(html)
else p.onchange?.(html)
triggerRefresh()
}
const exec = (cmd, val = null) => {
if (!editorRef) return
editorRef.focus()
if (savedRange) restoreSelection()
document.execCommand(cmd, false, val)
savedRange = null
notify()
}
const openLightbox = (src) => {
const overlay = document.createElement('div')
overlay.style = `position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;`
const img = document.createElement('img')
img.src = src
img.style = `max-width:95%;max-height:95%;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px;`
overlay.onclick = () => document.body.removeChild(overlay)
overlay.appendChild(img)
document.body.appendChild(overlay)
}
const handleUpload = (file) => {
if (!file) return
const reader = new FileReader()
reader.onload = (re) => {
if (file.type.startsWith('image/')) {
const imgHtml = `<div style="display:inline-block; resize:both; overflow:hidden; vertical-align:bottom; line-height:0; width:200px; height:auto; border:1px dashed #ccc; padding:2px; cursor:pointer;" class="resizable-img-container"><img src="${re.target.result}" style="width:100%; height:100%; object-fit:contain; pointer-events:none;"></div>&nbsp;`
exec("insertHTML", imgHtml)
} else {
const linkHtml = `<a href="${re.target.result}" download="${file.name}" contenteditable="false" style="display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; background:#f9f9f9; text-decoration:none; color:#333; font-size:12px; margin:2px; cursor:pointer;"><span class="icon-[lucide--paperclip] w-3 h-3"></span>${file.name}</a>&nbsp;`
exec("insertHTML", linkHtml)
}
}
reader.readAsDataURL(file)
}
const queryState = (cmd, val = null) => {
refreshTick(); if (!editorRef || isSource()) return false
try {
if (cmd === 'formatBlock') {
let node = window.getSelection().getRangeAt(0).commonAncestorContainer
while (node && node !== editorRef) {
if (node.nodeType === 1 && node.tagName === val) return true
node = node.parentNode
}
return false
}
return document.queryCommandState(cmd)
} catch (e) { return false }
}
const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
h("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('bold') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("bold") }, h("span", { class: "icon-[lucide--bold]" })),
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('italic') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("italic") }, h("span", { class: "icon-[lucide--italic]" })),
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('underline') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("underline") }, h("span", { class: "icon-[lucide--underline]" })),
h("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
h("button", {
type: "button",
class: "btn btn-ghost btn-xs",
onclick: () => exec("justifyLeft")
}, h("span", { class: "icon-[lucide--align-left]" })),
h("button", {
type: "button",
class: "btn btn-ghost btn-xs",
onclick: () => exec("justifyCenter")
}, h("span", { class: "icon-[lucide--align-center]" })),
h("button", {
type: "button",
class: "btn btn-ghost btn-xs",
onclick: () => exec("justifyRight")
}, h("span", { class: "icon-[lucide--align-right]" })),
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h("span", { class: "icon-[lucide--list]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h("span", { class: "icon-[lucide--list-ordered]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h("span", { class: "icon-[lucide--indent-decrease]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent") }, h("span", { class: "icon-[lucide--indent-increase]" })),
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('formatBlock', 'BLOCKQUOTE') ? 'btn-active' : ''}`, onclick: () => exec("formatBlock", queryState('formatBlock', 'BLOCKQUOTE') ? 'P' : 'BLOCKQUOTE') }, h("span", { class: "icon-[lucide--quote]" })),
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const url = window.prompt('URL:'); if (url) exec("createLink", url) } }, h("span", { class: "icon-[lucide--link]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const input = document.createElement('input'); input.type = 'file'; input.onchange = (e) => handleUpload(e.target.files[0]); input.click(); } }, h("span", { class: "icon-[lucide--paperclip]" })),
h("div", { class: "relative" }, [
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => { e.stopPropagation(); saveSelection(); showEmojis(!showEmojis()); } }, h("span", { class: "icon-[lucide--smile]" })),
h("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map(emo => h("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => { e.stopPropagation(); exec("insertText", emo); showEmojis(false); } }, emo)))
]),
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h("span", { class: "icon-[lucide--undo-2]" })),
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h("span", { class: "icon-[lucide--redo-2]" })),
]),
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? 'btn-active' : ''}`, onclick: () => { if (!isSource()) source(editorRef?.innerHTML || ""); else if (editorRef) { editorRef.innerHTML = source(); notify(); }; isSource(!isSource()) } }, h("span", { class: "icon-[lucide--code-2]" }))
])
if (typeof document !== 'undefined' && !document.getElementById('editor-styles')) {
const style = document.createElement('style')
style.id = 'editor-styles'
style.textContent = `
[contenteditable="true"] div,
[contenteditable="true"] p {
margin: 0;
padding: 0;
}
`
document.head.appendChild(style)
}
return h("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
toolbar,
h("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
h("div", {
ref: el => {
if (!editorRef && el) {
editorRef = el; el.innerHTML = val(value) || "";
document.execCommand("defaultParagraphSeparator", false, "br");
el.addEventListener('click', (e) => {
const container = e.target.closest('.resizable-img-container');
if (container) { const img = container.querySelector('img'); if (img) openLightbox(img.src); }
});
}
},
style: () => `min-height:22rem;${isSource() ? 'display:none' : ''}`,
class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8",
contenteditable: "true",
oninput: notify,
onkeydown: (e) => { if (e.key === 'Tab') { e.preventDefault(); exec("indent"); } },
onkeyup: () => { triggerRefresh(); saveSelection(); },
onclick: (e) => { triggerRefresh(); saveSelection(); e.stopPropagation(); },
onmouseup: () => { notify(); saveSelection(); },
onpaste: (e) => {
e.preventDefault();
const text = e.clipboardData.getData('text/plain');
exec('insertText', text);
},
ondragover: (e) => e.preventDefault(),
ondrop: (e) => { e.preventDefault(); handleUpload(e.dataTransfer.files[0]) }
}),
h("textarea", {
class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0",
style: () => isSource() ? '' : 'display:none',
value: source,
oninput: (e) => { source(e.target.value); if (editorRef) editorRef.innerHTML = e.target.value; p.onchange?.(e.target.value); }
})
]),
h("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
h("span", () => `${count()}`)
])
])
}