UUUUPPPPP work
This commit is contained in:
552
src/sigpro-ui.js
Normal file
552
src/sigpro-ui.js
Normal file
@@ -0,0 +1,552 @@
|
||||
/**
|
||||
* SigPro UI - daisyUI v5 & Tailwind v4 Plugin
|
||||
* Provides a set of reactive functional components, flow control and i18n.
|
||||
*/
|
||||
export const UI = ($, defaultLang = "es") => {
|
||||
const ui = {};
|
||||
|
||||
// --- I18N CORE ---
|
||||
const i18n = {
|
||||
es: { close: "Cerrar", confirm: "Confirmar", cancel: "Cancelar", search: "Buscar...", loading: "Cargando..." },
|
||||
en: { close: "Close", confirm: "Confirm", cancel: "Cancel", search: "Search...", loading: "Loading..." },
|
||||
};
|
||||
|
||||
const currentLocale = $(defaultLang);
|
||||
|
||||
/** SET LOCALE */
|
||||
ui.SetLocale = (locale) => currentLocale(locale);
|
||||
|
||||
/** TRANSLATE */
|
||||
const tt = (key) => () => i18n[currentLocale()][key] || key;
|
||||
|
||||
// --- INTERNAL HELPERS ---
|
||||
const val = (v) => (typeof v === "function" ? v() : v);
|
||||
|
||||
const joinClass = (base, extra) => {
|
||||
if (typeof extra === "function") {
|
||||
return () => `${base} ${extra() || ""}`.trim();
|
||||
}
|
||||
return `${base} ${extra || ""}`.trim();
|
||||
};
|
||||
|
||||
// --- UTILITY FUNCTIONS ---
|
||||
|
||||
/** IF */
|
||||
ui.If = (condition, thenValue, otherwiseValue = null) => {
|
||||
return () => {
|
||||
const isTrue = val(condition);
|
||||
const result = isTrue ? thenValue : otherwiseValue;
|
||||
if (typeof result === "function" && !(result instanceof HTMLElement)) {
|
||||
return result();
|
||||
}
|
||||
return result;
|
||||
};
|
||||
};
|
||||
|
||||
/** FOR */
|
||||
ui.For = (source, render, keyFn) => {
|
||||
if (typeof keyFn !== "function") throw new Error("SigPro UI: For requires a keyFn.");
|
||||
|
||||
const marker = document.createTextNode("");
|
||||
const container = $.html("div", { style: "display:contents" }, [marker]);
|
||||
const cache = new Map();
|
||||
|
||||
$(() => {
|
||||
const items = val(source) || [];
|
||||
const newKeys = new Set();
|
||||
|
||||
items.forEach((item, index) => {
|
||||
const key = keyFn(item, index);
|
||||
newKeys.add(key);
|
||||
|
||||
if (cache.has(key)) {
|
||||
const runtime = cache.get(key);
|
||||
container.insertBefore(runtime.container, marker);
|
||||
} else {
|
||||
const runtime = $.view(() => {
|
||||
return $.html("div", { style: "display:contents" }, [render(item, index)]);
|
||||
});
|
||||
cache.set(key, runtime);
|
||||
container.insertBefore(runtime.container, marker);
|
||||
}
|
||||
});
|
||||
|
||||
cache.forEach((runtime, key) => {
|
||||
if (!newKeys.has(key)) {
|
||||
runtime.destroy();
|
||||
runtime.container.remove();
|
||||
cache.delete(key);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return container;
|
||||
};
|
||||
|
||||
/** REQ */
|
||||
ui.Request = (url, payload = null, options = {}) => {
|
||||
const data = $(null),
|
||||
loading = $(false),
|
||||
error = $(null),
|
||||
success = $(false);
|
||||
let abortController = null;
|
||||
|
||||
const execute = async (customPayload = null) => {
|
||||
const targetUrl = val(url);
|
||||
if (!targetUrl) return;
|
||||
|
||||
if (abortController) abortController.abort();
|
||||
abortController = new AbortController();
|
||||
|
||||
loading(true);
|
||||
error(null);
|
||||
success(false);
|
||||
try {
|
||||
const bodyData = customPayload || payload;
|
||||
const res = await fetch(targetUrl, {
|
||||
method: options.method || (bodyData ? "POST" : "GET"),
|
||||
headers: { "Content-Type": "application/json", ...options.headers },
|
||||
body: bodyData ? JSON.stringify(bodyData) : null,
|
||||
signal: abortController.signal,
|
||||
...options,
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
|
||||
let json = await res.json();
|
||||
if (typeof options.transform === "function") json = options.transform(json);
|
||||
|
||||
data(json);
|
||||
success(true);
|
||||
} catch (err) {
|
||||
if (err.name !== "AbortError") error(err.message);
|
||||
} finally {
|
||||
loading(false);
|
||||
}
|
||||
};
|
||||
|
||||
$(() => {
|
||||
execute();
|
||||
return () => abortController?.abort();
|
||||
});
|
||||
|
||||
return { data, loading, error, success, reload: (p) => execute(p) };
|
||||
};
|
||||
|
||||
/** RES */
|
||||
ui.Response = (reqObj, renderFn) =>
|
||||
$.html("div", { class: "res-container" }, [
|
||||
ui.If(reqObj.loading, $.html("div", { class: "flex justify-center p-4" }, $.html("span", { class: "loading loading-dots text-primary" }))),
|
||||
ui.If(reqObj.error, () =>
|
||||
$.html("div", { role: "alert", class: "alert alert-error" }, [
|
||||
$.html("span", {}, reqObj.error()),
|
||||
ui.Button({ class: "btn-xs btn-ghost border-current", onclick: () => reqObj.reload() }, "Retry"),
|
||||
]),
|
||||
),
|
||||
ui.If(reqObj.success, () => {
|
||||
const current = reqObj.data();
|
||||
return current !== null ? renderFn(current) : null;
|
||||
}),
|
||||
]);
|
||||
|
||||
// --- UI COMPONENTS ---
|
||||
|
||||
/** BUTTON */
|
||||
ui.Button = (props, children) => {
|
||||
const { badge, badgeClass, tooltip, icon, $loading, ...rest } = props;
|
||||
|
||||
const btn = $.html(
|
||||
"button",
|
||||
{
|
||||
...rest,
|
||||
class: joinClass("btn", props.$class || props.class),
|
||||
$disabled: () => val($loading) || val(props.$disabled) || val(props.disabled),
|
||||
},
|
||||
[
|
||||
() => (val($loading) ? $.html("span", { class: "loading loading-spinner" }) : null),
|
||||
icon ? $.html("span", { class: "mr-1" }, icon) : null,
|
||||
children,
|
||||
],
|
||||
);
|
||||
|
||||
let out = btn;
|
||||
if (badge) {
|
||||
out = $.html("div", { class: "indicator" }, [
|
||||
$.html("span", { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") }, badge),
|
||||
out,
|
||||
]);
|
||||
}
|
||||
|
||||
return tooltip ? $.html("div", { class: "tooltip", "data-tip": tooltip }, out) : out;
|
||||
};
|
||||
|
||||
/** INPUT */
|
||||
ui.Input = (props) => {
|
||||
const { label, tip, $value, $error, isSearch, ...rest } = props;
|
||||
|
||||
const inputEl = $.html("input", {
|
||||
...rest,
|
||||
placeholder: props.placeholder || (isSearch ? tt("search") : " "),
|
||||
class: joinClass("input input-bordered w-full", props.$class || props.class),
|
||||
// 1. Vinculamos el valor a la señal
|
||||
$value: $value || props.value,
|
||||
// 2. ACTUALIZAMOS la señal al escribir para que no se bloquee
|
||||
oninput: (e) => {
|
||||
if (typeof $value === "function") $value(e.target.value);
|
||||
if (typeof props.oninput === "function") props.oninput(e);
|
||||
},
|
||||
$disabled: () => val(props.$disabled) || val(props.disabled),
|
||||
});
|
||||
|
||||
if (!label && !tip && !$error) return inputEl;
|
||||
|
||||
return $.html("label", { class: "input floating-label fieldset-label flex flex-col gap-1" }, [
|
||||
label ? $.html("span", {}, label) : null,
|
||||
tip ? $.html("div", { class: "tooltip tooltip-right", "data-tip": tip }, $.html("span", { class: "badge badge-ghost badge-xs" }, "?")) : null,
|
||||
inputEl,
|
||||
() => (val($error) ? $.html("span", { class: "text-error text-xs" }, val($error)) : null),
|
||||
]);
|
||||
};
|
||||
|
||||
/** SELECT */
|
||||
ui.Select = (props) => {
|
||||
const { label, options, $value, ...rest } = props;
|
||||
|
||||
const selectEl = $.html(
|
||||
"select",
|
||||
{
|
||||
...rest,
|
||||
class: joinClass("select select-bordered w-full", props.$class || props.class),
|
||||
$value: $value,
|
||||
onchange: (e) => $value?.(e.target.value),
|
||||
},
|
||||
ui.For(
|
||||
() => val(options) || [],
|
||||
(opt) =>
|
||||
$.html(
|
||||
"option",
|
||||
{
|
||||
value: opt.value,
|
||||
$selected: () => String(val($value)) === String(opt.value),
|
||||
},
|
||||
opt.label,
|
||||
),
|
||||
(opt) => opt.value,
|
||||
),
|
||||
);
|
||||
|
||||
if (!label) return selectEl;
|
||||
|
||||
return $.html("label", { class: "fieldset-label flex flex-col gap-1" }, [$.html("span", {}, label), selectEl]);
|
||||
};
|
||||
|
||||
/** CHECKBOX */
|
||||
ui.CheckBox = (props) => {
|
||||
const { $value, tooltip, toggle, ...rest } = props;
|
||||
const checkEl = $.html("input", {
|
||||
...rest,
|
||||
type: "checkbox",
|
||||
class: () => (toggle() ? "toggle" : "checkbox"),
|
||||
$checked: $value,
|
||||
onchange: (e) => $value?.(e.target.checked),
|
||||
});
|
||||
|
||||
const layout = $.html("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||
checkEl,
|
||||
props.label ? $.html("span", { class: "label-text" }, props.label) : null,
|
||||
]);
|
||||
|
||||
return tooltip ? $.html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
||||
};
|
||||
|
||||
/** RADIO */
|
||||
ui.Radio = (props) => {
|
||||
const { label, tooltip, $value, value, ...rest } = props;
|
||||
|
||||
const radioEl = $.html("input", {
|
||||
...rest,
|
||||
type: "radio",
|
||||
class: joinClass("radio", props.$class || props.class),
|
||||
$checked: () => val($value) === value,
|
||||
$disabled: () => val(props.$disabled) || val(props.disabled),
|
||||
onclick: () => typeof $value === "function" && $value(value),
|
||||
});
|
||||
|
||||
if (!label && !tooltip) return radioEl;
|
||||
|
||||
const layout = $.html("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||
radioEl,
|
||||
label ? $.html("span", { class: "label-text" }, label) : null,
|
||||
]);
|
||||
|
||||
return tooltip ? $.html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
||||
};
|
||||
|
||||
/** RANGE */
|
||||
ui.Range = (props) => {
|
||||
const { label, tooltip, $value, ...rest } = props;
|
||||
|
||||
const rangeEl = $.html("input", {
|
||||
...rest,
|
||||
type: "range",
|
||||
class: joinClass("range", props.$class || props.class),
|
||||
$value: $value,
|
||||
$disabled: () => val(props.$disabled) || val(props.disabled),
|
||||
oninput: (e) => typeof $value === "function" && $value(e.target.value),
|
||||
});
|
||||
|
||||
if (!label && !tooltip) return rangeEl;
|
||||
|
||||
const layout = $.html("div", { class: "flex flex-col gap-2" }, [label ? $.html("span", { class: "label-text" }, label) : null, rangeEl]);
|
||||
|
||||
return tooltip ? $.html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
||||
};
|
||||
|
||||
/** MODAL */
|
||||
ui.Modal = (props, children) => {
|
||||
const { title, buttons, $open, ...rest } = props;
|
||||
const close = () => $open(false);
|
||||
|
||||
return ui.If($open, () =>
|
||||
$.html("dialog", { ...rest, class: "modal modal-open" }, [
|
||||
$.html("div", { class: "modal-box" }, [
|
||||
title ? $.html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
|
||||
children,
|
||||
$.html("div", { class: "modal-action flex gap-2" }, [buttons, ui.Button({ onclick: close }, tt("close"))]),
|
||||
]),
|
||||
$.html(
|
||||
"form",
|
||||
{
|
||||
method: "dialog",
|
||||
class: "modal-backdrop",
|
||||
onclick: (e) => (e.preventDefault(), close()),
|
||||
},
|
||||
$.html("button", "close"),
|
||||
),
|
||||
]),
|
||||
);
|
||||
};
|
||||
|
||||
/** DROPDOWN */
|
||||
ui.Dropdown = (props, children) => {
|
||||
const { label, ...rest } = props;
|
||||
|
||||
return $.html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: joinClass("dropdown", props.$class || props.class),
|
||||
},
|
||||
[
|
||||
label ? $.html("div", { tabindex: 0, role: "button", class: "btn m-1" }, label) : null,
|
||||
$.html(
|
||||
"div",
|
||||
{
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max",
|
||||
},
|
||||
children,
|
||||
),
|
||||
],
|
||||
);
|
||||
};
|
||||
|
||||
/** ACCORDION */
|
||||
ui.Accordion = (props, children) => {
|
||||
const { title, name, $open, open, ...rest } = props;
|
||||
|
||||
return $.html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.$class || props.class),
|
||||
},
|
||||
[
|
||||
$.html("input", {
|
||||
type: name ? "radio" : "checkbox",
|
||||
name: name,
|
||||
$checked: () => val($open) || val(open),
|
||||
onchange: (e) => typeof $open === "function" && $open(e.target.checked),
|
||||
}),
|
||||
$.html("div", { class: "collapse-title text-xl font-medium" }, title),
|
||||
$.html("div", { class: "collapse-content" }, children),
|
||||
],
|
||||
);
|
||||
};
|
||||
|
||||
/** TABS */
|
||||
ui.Tabs = (props) => {
|
||||
const { items, ...rest } = props;
|
||||
const itemsSignal = typeof items === "function" ? items : () => items || [];
|
||||
|
||||
return $.html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
|
||||
$.html(
|
||||
"div",
|
||||
{
|
||||
role: "tablist",
|
||||
class: joinClass("tabs tabs-lifted", props.$class || props.class),
|
||||
},
|
||||
ui.For(
|
||||
itemsSignal,
|
||||
(it) =>
|
||||
$.html(
|
||||
"a",
|
||||
{
|
||||
role: "tab",
|
||||
class: () => joinClass("tab", val(it.active) && "tab-active", val(it.disabled) && "tab-disabled", it.tip && "tooltip"),
|
||||
"data-tip": it.tip,
|
||||
onclick: (e) => !val(it.disabled) && it.onclick?.(e),
|
||||
},
|
||||
it.label,
|
||||
),
|
||||
(t) => t.label,
|
||||
),
|
||||
),
|
||||
() => {
|
||||
const active = itemsSignal().find((it) => val(it.active));
|
||||
if (!active) return null;
|
||||
const content = val(active.content);
|
||||
return $.html("div", { class: "p-4" }, [typeof content === "function" ? content() : content]);
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
/** BADGE */
|
||||
ui.Badge = (props, children) => $.html("span", { ...props, class: joinClass("badge", props.$class || props.class) }, children);
|
||||
|
||||
/** TOOLTIP */
|
||||
ui.Tooltip = (props, children) =>
|
||||
$.html("div", { ...props, class: joinClass("tooltip", props.$class || props.class), "data-tip": props.tip }, children);
|
||||
|
||||
/** NAVBAR */
|
||||
ui.Navbar = (props, children) =>
|
||||
$.html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.$class || props.class) }, children);
|
||||
|
||||
/** MENU */
|
||||
ui.Menu = (props) => {
|
||||
const renderItems = (items) =>
|
||||
ui.For(
|
||||
() => items || [],
|
||||
(it) =>
|
||||
$.html("li", {}, [
|
||||
it.children
|
||||
? $.html("details", { open: it.open }, [
|
||||
$.html("summary", {}, [it.icon && $.html("span", { class: "mr-2" }, it.icon), it.label]),
|
||||
$.html("ul", {}, renderItems(it.children)),
|
||||
])
|
||||
: $.html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
|
||||
it.icon && $.html("span", { class: "mr-2" }, it.icon),
|
||||
it.label,
|
||||
]),
|
||||
]),
|
||||
(it, i) => it.label || i,
|
||||
);
|
||||
|
||||
return $.html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.$class || props.class) }, renderItems(props.items));
|
||||
};
|
||||
|
||||
/** DRAWER */
|
||||
ui.Drawer = (props) =>
|
||||
$.html("div", { class: joinClass("drawer", props.$class || props.class) }, [
|
||||
$.html("input", {
|
||||
id: props.id,
|
||||
type: "checkbox",
|
||||
class: "drawer-toggle",
|
||||
$checked: props.$open,
|
||||
}),
|
||||
$.html("div", { class: "drawer-content" }, props.content),
|
||||
$.html("div", { class: "drawer-side" }, [
|
||||
$.html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.$open?.(false) }),
|
||||
$.html("div", { class: "min-h-full bg-base-200 w-80" }, props.side),
|
||||
]),
|
||||
]);
|
||||
|
||||
/** FIELDSET */
|
||||
ui.Fieldset = (props, children) =>
|
||||
$.html("fieldset", { ...props, class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.$class || props.class) }, [
|
||||
ui.If(
|
||||
() => props.legend,
|
||||
() => $.html("legend", { class: "fieldset-legend font-bold" }, props.legend),
|
||||
),
|
||||
children,
|
||||
]);
|
||||
|
||||
/** STACK */
|
||||
ui.Stack = (props, children) => $.html("div", { ...props, class: joinClass("stack", props.$class || props.class) }, children);
|
||||
|
||||
/** STAT */
|
||||
ui.Stat = (props) =>
|
||||
$.html("div", { ...props, class: joinClass("stat", props.$class || props.class) }, [
|
||||
props.icon && $.html("div", { class: "stat-figure text-secondary" }, props.icon),
|
||||
props.label && $.html("div", { class: "stat-title" }, props.label),
|
||||
$.html("div", { class: "stat-value" }, () => val(props.$value) ?? props.value),
|
||||
props.desc && $.html("div", { class: "stat-desc" }, props.desc),
|
||||
]);
|
||||
|
||||
/** SWAP */
|
||||
ui.Swap = (props) =>
|
||||
$.html("label", { class: joinClass("swap", props.$class || props.class) }, [
|
||||
$.html("input", {
|
||||
type: "checkbox",
|
||||
$checked: props.$value,
|
||||
onchange: (e) => props.$value?.(e.target.checked),
|
||||
}),
|
||||
$.html("div", { class: "swap-on" }, props.on),
|
||||
$.html("div", { class: "swap-off" }, props.off),
|
||||
]);
|
||||
|
||||
/** INDICATOR */
|
||||
ui.Indicator = (props, children) =>
|
||||
$.html("div", { class: joinClass("indicator", props.$class || props.class) }, [
|
||||
children,
|
||||
$.html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge),
|
||||
]);
|
||||
|
||||
/** TOAST */
|
||||
ui.Toast = (message, type = "alert-success", duration = 3500) => {
|
||||
let container = document.getElementById("sigpro-toast-container");
|
||||
if (!container) {
|
||||
container = $.html("div", { id: "sigpro-toast-container", class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2" });
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
const runtime = $.view(() => {
|
||||
const el = $.html("div", { class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0` }, [
|
||||
$.html("span", message),
|
||||
ui.Button({ class: "btn-xs btn-circle btn-ghost", onclick: () => remove() }, "✕"),
|
||||
]);
|
||||
|
||||
const remove = () => {
|
||||
el.classList.add("translate-x-full", "opacity-0");
|
||||
setTimeout(() => {
|
||||
runtime.destroy();
|
||||
el.remove();
|
||||
if (!container.hasChildNodes()) container.remove();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
setTimeout(remove, duration);
|
||||
return el;
|
||||
});
|
||||
|
||||
container.appendChild(runtime.container);
|
||||
requestAnimationFrame(() => runtime.container.firstChild.classList.remove("translate-x-10", "opacity-0"));
|
||||
};
|
||||
|
||||
/** LOADING */
|
||||
ui.Loading = (props) => {
|
||||
return ui.If(props.$show, () =>
|
||||
$.html("div", { class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30" }, [
|
||||
$.html("span", { class: "loading loading-spinner loading-lg text-primary" }),
|
||||
]),
|
||||
);
|
||||
};
|
||||
|
||||
ui.tt = tt;
|
||||
Object.keys(ui).forEach((key) => {
|
||||
window[key] = ui[key];
|
||||
$[key] = ui[key];
|
||||
});
|
||||
|
||||
return ui;
|
||||
};
|
||||
Reference in New Issue
Block a user