diff --git a/docs/index.html b/docs/index.html index 69d120e..0f0e13d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,42 +1,52 @@ - + - - - SigPro-UI Docs - - - - - - - - - -
+ + + SigPro-UI Docs + - + - - - - - \ No newline at end of file + + + + + +
+ + + + + + + + diff --git a/index.js b/index.js index 6d34416..d493457 100644 --- a/index.js +++ b/index.js @@ -1,2 +1,1130 @@ -// /plugins/index.js -export * from './sigpro-ui/sigpro-ui.js'; +/** + * SigPro UI - daisyUI v5 & Tailwind v4 Plugin + * Provides a set of reactive functional components, flow control and i18n. + */ +import { $, $if, $for, $watch, $html, $mount } from 'sigpro'; + +// --- I18N CORE --- +const i18n = { + es: { close: "Cerrar", confirm: "Confirmar", cancel: "Cancelar", search: "Buscar...", loading: "Cargando..." , nodata: "Sindatos"}, + en: { close: "Close", confirm: "Confirm", cancel: "Cancel", search: "Search...", loading: "Loading...", nodata: "No data" }, +}; + +let currentLocale = $("es"); + +/** SET LOCALE */ +export const Locale = (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(); +}; + +/** ICONS */ +const iconShow = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg=="; +const iconHide = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC"; +const iconClose = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAESSURBVDiNtdO7LoRBHAXwXyhVG5ddEq9AgbXiskS1dOJS6DyDRKLmFRCvQY9aIi6FnpDsrkuiQCWKmS/5dmW/VXCSyWTm/GfmnPzP8A8oYBc3eEMd59iKXCZW8YpDzCOHHszgAE9Ya3V4EY8YzXhgAndYaib68YxiO4kYRg290Bk3t/GAvbiuII/7uJ7CGG5RxSCGcJrceh2LEkzGwnIctTgnGMdFWtZ7IimFcrykirkmrkvokI7WVn1lcD9wpdFCKfVyYmE2xRdFC4mCY2ykCgaEfp/gTGhbX4pfx1FaQUEIyW/bWBUC1oAFIUgjGYdLWgQpwTJesC/4z6Eb00JG6lhpJzGPHVziEx/CZ9qM3N/iGy1pNoTrsd1eAAAAAElFTkSuQmCC"; +const iconCalendar = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC"; +const iconLock = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII="; +const iconAbc = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMRJREFUOI3t0bFKAmAUBeAPURD1HQwUTKPJEmzQoSWQcKpVfIuWdvU9WnqNhsYWBx0a2lvLSMKGbvQ7SO564HA497/3cu/92SPFAS5QDN9CftviDhZYYRpNPtH/rzATOsQT6jhCFzmc4DTJL6AX067hPiimuAr95RglzMJ/4AyyUXSMw3iEauhN6C0eUEMFAyzTFZ7xiOvwL3jbsPYSr3hPg3dB/o43SVYY+TnsPPwXztMG5SDr39dGM8kr4RKNDdPtJL4BNXEmsdKC+S4AAAAASUVORK5CYII="; +const icon123 = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg=="; +const iconMail = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC"; +const iconInfo = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC"; +const iconSuccess = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg=="; +const iconError = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC"; +const iconWarning = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII="; +const iconLeft = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg=="; +const iconRight = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg=="; +const iconLLeft = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg=="; +const iconRRight = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII="; + +// --- UI COMPONENTS --- + +/** BUTTON */ +export const 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 */ +export const Input = (props) => { + const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props; + const isPassword = type === "password"; + const visible = $(false); + + const iconsByType = { + text: iconAbc, + password: iconLock, + date: iconCalendar, + number: icon123, + email: iconMail, + }; + + const inputEl = $html("input", { + ...rest, + type: () => (isPassword ? (visible() ? "text" : "password") : type), + placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "), + class: joinClass("grow order-2 focus:outline-none", props.class), + value: value, + oninput: (e) => props.oninput?.(e), + disabled: () => val(props.disabled), + }); + + const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "w-5 h-5 opacity-50", alt: type }) : null; + + return $html( + "label", + { + class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""), + }, + [ + leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null, + label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null, + inputEl, + isPassword + ? $html( + "button", + { + type: "button", + class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100", + onclick: (e) => { + e.preventDefault(); + visible(!visible()); + }, + }, + () => + $html("img", { + class: "w-5 h-5", + src: visible() ? iconShow : iconHide, + }), + ) + : null, + tip + ? $html( + "div", + { class: "tooltip tooltip-left order-4", "data-tip": tip }, + $html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"), + ) + : null, + () => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null), + ], + ); +}; + +/** SELECT */ +export const 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 + }, + $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]); +}; + +/** AUTOCOMPLETE */ +export const Autocomplete = (props) => { + const { options = [], value, onSelect, label, placeholder, ...rest } = props; + + const query = $(val(value) || ""); + const isOpen = $(false); + const cursor = $(-1); + + const list = $(() => { + const q = query().toLowerCase(); + const data = val(options) || []; + return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data; + }); + + const pick = (opt) => { + const valStr = typeof opt === "string" ? opt : opt.value; + const labelStr = typeof opt === "string" ? opt : opt.label; + + query(labelStr); + if (typeof value === "function") value(valStr); + onSelect?.(opt); + + isOpen(false); + cursor(-1); + }; + + const nav = (e) => { + const items = list(); + if (e.key === "ArrowDown") { + e.preventDefault(); + isOpen(true); + cursor(Math.min(cursor() + 1, items.length - 1)); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + cursor(Math.max(cursor() - 1, 0)); + } else if (e.key === "Enter" && cursor() >= 0) { + e.preventDefault(); + pick(items[cursor()]); + } else if (e.key === "Escape") { + isOpen(false); + } + }; + + return $html("div", { class: "relative w-full" }, [ + Input({ + label, + placeholder: placeholder || tt("search")(), + value: query, + onfocus: () => isOpen(true), + onblur: () => setTimeout(() => isOpen(false), 150), + onkeydown: nav, + oninput: (e) => { + const v = e.target.value; + query(v); + if (typeof value === "function") value(v); + isOpen(true); + cursor(-1); + }, + ...rest, + }), + $html( + "ul", + { + class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50", + style: () => (isOpen() && list().length ? "display:block" : "display:none"), + }, + [ + $for( + list, + (opt, i) => + $html("li", {}, [ + $html( + "a", + { + class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`, + onclick: () => pick(opt), + onmouseenter: () => cursor(i), + }, + typeof opt === "string" ? opt : opt.label, + ), + ]), + (opt, i) => (typeof opt === "string" ? opt : opt.value) + i, + ), + () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results")), + ], + ), + ]); +}; + +/** DATEPICKER */ +export const Datepicker = (props) => { + const { value, range, label, placeholder, ...rest } = props; + + const isOpen = $(false); + const internalDate = $(new Date()); + const hoverDate = $(null); + const isRangeMode = () => val(range) === true; + + const now = new Date(); + const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`; + + const formatDate = (d) => { + const year = d.getFullYear(); + const month = String(d.getMonth() + 1).padStart(2, "0"); + const day = String(d.getDate()).padStart(2, "0"); + return `${year}-${month}-${day}`; + }; + + const selectDate = (date) => { + const dateStr = formatDate(date); + const current = val(value); + + if (isRangeMode()) { + if (!current?.start || (current.start && current.end)) { + if (typeof value === "function") value({ start: dateStr, end: null }); + } else { + const start = current.start; + if (typeof value === "function") { + value(dateStr < start ? { start: dateStr, end: start } : { start, end: dateStr }); + } + isOpen(false); + } + } else { + if (typeof value === "function") value(dateStr); + isOpen(false); + } + }; + + const displayValue = $(() => { + const v = val(value); + if (!v) return ""; + if (typeof v === "string") return v; + if (v.start && v.end) return `${v.start} - ${v.end}`; + if (v.start) return `${v.start}...`; + return ""; + }); + + const move = (m) => { + const d = internalDate(); + internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1)); + }; + + const moveYear = (y) => { + const d = internalDate(); + internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1)); + }; + + return $html("div", { class: "relative w-full" }, [ + Input({ + label, + placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), + value: displayValue, + readonly: true, + icon: $html("img", { src: iconCalendar, class: "opacity-40" }), + onclick: (e) => { + e.stopPropagation(); + isOpen(!isOpen()); + }, + ...rest, + }), + + $if(isOpen, () => + $html( + "div", + { + class: "absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none", + onclick: (e) => e.stopPropagation(), + }, + [ + $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ + $html("div", { class: "flex gap-0.5" }, [ + $html( + "button", + { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, + $html("img", { src: iconLLeft, class: "opacity-40" }), + ), + $html( + "button", + { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, + $html("img", { src: iconLeft, class: "opacity-40" }), + ), + ]), + $html("span", { class: "font-bold uppercase flex-1 text-center" }, [ + () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }), + ]), + $html("div", { class: "flex gap-0.5" }, [ + $html( + "button", + { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, + $html("img", { src: iconRight, class: "opacity-40" }), + ), + $html( + "button", + { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, + $html("img", { src: iconRRight, class: "opacity-40" }), + ), + ]), + ]), + + $html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [ + ...["L", "M", "X", "J", "V", "S", "D"].map((d) => $html("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)), + () => { + const d = internalDate(); + const year = d.getFullYear(); + const month = d.getMonth(); + const firstDay = new Date(year, month, 1).getDay(); + const offset = firstDay === 0 ? 6 : firstDay - 1; + const daysInMonth = new Date(year, month + 1, 0).getDate(); + + const nodes = []; + for (let i = 0; i < offset; i++) nodes.push($html("div")); + + for (let i = 1; i <= daysInMonth; i++) { + const date = new Date(year, month, i); + const dStr = formatDate(date); + + nodes.push( + $html( + "button", + { + type: "button", + class: () => { + const v = val(value); + const h = hoverDate(); + const isStart = typeof v === "string" ? v === dStr : v?.start === dStr; + const isEnd = v?.end === dStr; + let inRange = false; + + if (isRangeMode() && v?.start) { + const start = v.start; + if (!v.end && h) { + inRange = (dStr > start && dStr <= h) || (dStr < start && dStr >= h); + } else if (v.end) { + inRange = dStr > start && dStr < v.end; + } + } + + const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative"; + const state = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost"; + const today = dStr === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : ""; + + return `${base} ${state} ${today}`; + }, + onmouseenter: () => { + if (isRangeMode()) hoverDate(dStr); + }, + onclick: () => selectDate(date), + }, + [i.toString()], + ), + ); + } + return nodes; + }, + ]), + ], + ), + ), + + $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })), + ]); +}; + +/** COLORPICKER */ +export const Colorpicker = (props) => { + const { value, label, ...rest } = props; + const isOpen = $(false); + + const palette = [ + ...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"], + ...["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"], + ...["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"], + ...["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"], + ...["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"], + ...["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"], + ...["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"], + ...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"], + ]; + + const getColor = () => val(value) || "#000000"; + + return $html("div", { class: "relative w-fit" }, [ + $html( + "button", + { + type: "button", + class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case", + onclick: (e) => { + e.stopPropagation(); + isOpen(!isOpen()); + }, + ...rest, + }, + [ + $html("div", { + class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0", + style: () => `background-color: ${getColor()}`, + }), + label ? $html("span", { class: "opacity-80" }, label) : null, + ], + ), + + $if(isOpen, () => + $html( + "div", + { + class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none", + onclick: (e) => e.stopPropagation(), + }, + [ + $html( + "div", + { class: "grid grid-cols-8 gap-1" }, + palette.map((c) => + $html("button", { + type: "button", + style: `background-color: ${c}`, + class: () => { + const active = getColor().toLowerCase() === c.toLowerCase(); + return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 + ${active ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`; + }, + onclick: () => { + value(c); + isOpen(false); + }, + }), + ), + ), + ], + ), + ), + + $if(isOpen, () => + $html("div", { + class: "fixed inset-0 z-[100]", + onclick: () => isOpen(false), + }), + ), + ]); +}; + +/** CHECKBOX */ +export const Checkbox = (props) => { + const { value, tooltip, toggle, ...rest } = props; + const checkEl = $html("input", { + ...rest, + type: "checkbox", + class: () => (val(toggle) ? "toggle" : "checkbox"), + checked: value + }); + + 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 */ +export const Radio = (props) => { + const { label, tooltip, 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 */ +export const Range = (props) => { + const { label, tooltip, value, ...rest } = props; + + const rangeEl = $html("input", { + ...rest, + type: "range", + class: joinClass("range", props.class), + value: value, + disabled: () => val(props.disabled) + }); + + 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 */ +export const Modal = (props, children) => { + const { title, buttons, open, ...rest } = props; + const close = () => open(false); + + return $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, + typeof children === "function" ? children() : children, + $html("div", { class: "modal-action flex gap-2" }, [ + ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean), + Button({ onclick: close }, tt("close")()), + ]), + ]), + $html( + "form", + { + method: "dialog", + class: "modal-backdrop", + onclick: (e) => (e.preventDefault(), close()), + }, + [$html("button", {}, "close")], + ), + ]), + ); +}; + +/** DROPDOWN */ +export const Dropdown = (props, children) => { + const { label, icon, ...rest } = props; + + return $html( + "div", + { + ...rest, + class: () => `dropdown ${val(props.class) || props.class || ""}`, + }, + [ + $html( + "div", + { + tabindex: 0, + role: "button", + class: "btn m-1 flex items-center gap-2", + }, + [icon ? (typeof icon === "function" ? icon() : icon) : null, label ? (typeof label === "function" ? label() : label) : null], + ), + $html( + "ul", + { + tabindex: 0, + class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300", + }, + [typeof children === "function" ? children() : children], + ), + ], + ); +}; + +/** ACCORDION */ +export const Accordion = (props, children) => { + const { title, name, 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: open + }), + $html("div", { class: "collapse-title text-xl font-medium" }, title), + $html("div", { class: "collapse-content" }, children), + ], + ); +}; + +/** TABS */ +export const 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-box", props.class || props.class), + }, + $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]); + }, + ]); +}; + +/** TABLE */ +export const Table = (props) => { + const { + items = [], + columns = [], + keyFn, + zebra = false, + pinRows = false, + empty = tt("nodata"), + ...rest + } = props; + + const tableClass = () => joinClass( + "table", + `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}` + ); + + return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [ + $html("table", { ...rest, class: tableClass }, [ + $html("thead", {}, [ + $html("tr", {}, + columns.map(col => $html("th", { class: col.class || "" }, col.label)) + ) + ]), + $html("tbody", {}, [ + $for(items, (item, index) => { + return $html("tr", { class: "hover" }, + columns.map(col => { + const cellContent = () => { + if (col.render) return col.render(item, index); + const value = item[col.key]; + return val(value); + }; + return $html("td", { class: col.class || "" }, [cellContent]); + }) + ); + }, keyFn || ((item, idx) => item.id || idx)), + + $if(() => val(items).length === 0, () => + $html("tr", {}, [ + $html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [ + val(empty) + ]) + ]) + ) + ]), + $if(() => columns.some(c => c.footer), () => + $html("tfoot", {}, [ + $html("tr", {}, + columns.map(col => $html("th", {}, col.footer || "")) + ) + ]) + ) + ]) + ]); +}; + +/** BADGE */ +export const Badge = (props, children) => $html("span", { ...props, class: joinClass("badge", props.class || props.class) }, children); + +/** TOOLTIP */ +export const Tooltip = (props, children) => + $html("div", { ...props, class: joinClass("tooltip", props.class || props.class), "data-tip": props.tip }, children); + +/** NAVBAR */ +export const Navbar = (props, children) => + $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class || props.class) }, children); + +/** MENU */ +export const Menu = (props) => { + const renderItems = (items) => + $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 */ +export const 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 */ +export const Fieldset = (props, children) => + $html( + "fieldset", + { + ...props, + class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class || props.class), + }, + [ + () => { + const legendText = val(props.legend); + return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null; + }, + children, + ], + ); + +/** LIST */ +export const List = (props) => { + const { items, header, render, keyFn, class: className } = props; + + return $html( + "ul", + { + class: joinClass("list bg-base-100 rounded-box shadow-md", className), + }, + [ + $if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])), + $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn), + ], + ); +}; + +/** STACK */ +export const Stack = (props, children) => $html("div", { ...props, class: joinClass("stack", props.class || props.class) }, children); + +/** STAT */ +export const 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 */ +export const Swap = (props) => + $html("label", { class: joinClass("swap", props.class || props.class) }, [ + $html("input", { + type: "checkbox", + checked: props.value + }), + $html("div", { class: "swap-on" }, props.on), + $html("div", { class: "swap-off" }, props.off), + ]); + +/** INDICATOR */ +export const Indicator = (props, children) => + $html("div", { class: joinClass("indicator", props.class || props.class) }, [ + children, + $html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge), + ]); + +/** RATING */ +export const Rating = (props) => { + const { value, count = 5, mask = "mask-star", readonly = false, ...rest } = props; + const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`; + + return $html("div", { + ...rest, + class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`, + }, + Array.from({ length: val(count) }, (_, i) => { + const starValue = i + 1; + + return $html("input", { + type: "radio", + name: ratingGroup, + class: `mask ${mask}`, + "aria-label": `${starValue} star`, + checked: () => Math.round(val(value)) === starValue, + onchange: () => { + if (!val(readonly) && typeof value === "function") { + value(starValue); + } + }, + }); + })); +}; + +/** ALERT */ +export const Alert = (props, children) => { + const { type = "info", soft = true, ...rest } = props; + const icons = { + info: iconInfo, + success: iconSuccess, + warning: iconWarning, + error: iconError, + }; + + const typeClass = () => { + const t = val(type); + const map = { + info: "alert-info", + success: "alert-success", + warning: "alert-warning", + error: "alert-error", + }; + return map[t] || t; + }; + + const content = children || props.message; + + return $html( + "div", + { + ...rest, + role: "alert", + class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`, + }, + [ + $html("img", { + src: icons[val(type)] || icons.info, + class: "w-4 h-4 object-contain", + alt: val(type), + }), + $html("div", { class: "flex-1" }, [$html("span", {}, [typeof content === "function" ? content() : content])]), + props.actions ? $html("div", { class: "flex-none" }, [typeof props.actions === "function" ? props.actions() : props.actions]) : null, + ], + ); +}; + +/** TIMELINE */ +export const Timeline = (props) => { + const { items = [], vertical = true, compact = false, ...rest } = props; + + const icons = { + info: iconInfo, + success: iconSuccess, + warning: iconWarning, + error: iconError, + }; + + return $html( + "ul", + { + ...rest, + class: () => + `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""} ${props.class || ""}`, + }, + [ + $for( + items, + (item, i) => { + const isFirst = i === 0; + const isLast = i === val(items).length - 1; + const itemType = item.type || "success"; + const renderSlot = (content) => (typeof content === "function" ? content() : content); + + return $html("li", { class: "flex-1" }, [ + !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, + $html("div", { class: "timeline-start" }, [renderSlot(item.title)]), + $html("div", { class: "timeline-middle" }, [ + $html("img", { + src: icons[itemType] || item.icon || icons.success, + class: "w-4 h-4 object-contain mx-1", + alt: itemType, + }), + ]), + $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]), + !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, + ]); + }, + (item, i) => item.id || i, + ), + ], + ); +}; + +/** FAB */ +export const Fab = (props) => { + const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props; + + return $html( + "div", + { + ...rest, + class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${props.class || ""}`, + }, + [ + $html( + "div", + { + tabindex: 0, + role: "button", + class: "btn btn-lg btn-circle btn-primary shadow-2xl", + }, + [icon ? (typeof icon === "function" ? icon() : icon) : null, !icon && label ? label : null], + ), + + ...val(actions).map((act) => + $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [ + act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null, + $html( + "button", + { + type: "button", + class: `btn btn-circle shadow-lg ${act.class || ""}`, + onclick: (e) => { + e.stopPropagation(); + act.onclick?.(e); + }, + }, + [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""], + ), + ]), + ), + ], + ); +}; + +/** TOAST */ +export const 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 pointer-events-none", + }); + document.body.appendChild(container); + } + + const toastHost = $html("div", { style: "display: contents" }); + container.appendChild(toastHost); + + let timeoutId; + const close = () => { + clearTimeout(timeoutId); + const el = toastHost.firstElementChild; + if (el && !el.classList.contains("opacity-0")) { + el.classList.add("translate-x-full", "opacity-0"); + setTimeout(() => { + instance.destroy(); + toastHost.remove(); + if (!container.hasChildNodes()) container.remove(); + }, 300); + } else { + instance.destroy(); + toastHost.remove(); + } + }; + + const ToastComponent = () => { + const el = $html( + "div", + { + class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`, + }, + [ + $html("span", typeof message === "function" ? message : () => message), + Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕"), + ], + ); + + requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0")); + return el; + }; + + const instance = $mount(ToastComponent, toastHost); + + if (duration > 0) { + timeoutId = setTimeout(close, duration); + } + + return close; +}; + +/** LOADING */ +export const Loading = (props) => { + return $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" }), + ]), + ); +}; + +// --- EXPORT UI FUNCTION --- +export const UI = (defaultLang = "es") => { + // Set initial locale + if (defaultLang) currentLocale(defaultLang); + + // Create UI object with all components + const ui = { + Locale, tt, Button, Input, Select, Autocomplete, Datepicker, Colorpicker, + Checkbox, Radio, Range, Modal, Dropdown, Accordion, Tabs, Badge, + Tooltip, Navbar, Menu, Drawer, Fieldset, List, Stack, Stat, Swap, Indicator, + Rating, Alert, Timeline, Fab, Toast, Loading, Table + }; + + // Inject all components into window + Object.keys(ui).forEach((key) => { + Object.defineProperty(window, key, { + value: ui[key], + writable: false, + configurable: true, + enumerable: true + }); + }); + + return ui; +}; diff --git a/package.json b/package.json index 23e168a..c12815d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sigpro-ui", - "version": "1.0.0", + "version": "1.0.1", "type": "module", "license": "MIT", "main": "./index.js", @@ -10,8 +10,6 @@ }, "files": [ "index.js", - "sigpro-ui", - "vite", "README.md", "LICENSE" ], diff --git a/sigpro-ui/sigpro-ui.js b/sigpro-ui/sigpro-ui.js deleted file mode 100644 index d493457..0000000 --- a/sigpro-ui/sigpro-ui.js +++ /dev/null @@ -1,1130 +0,0 @@ -/** - * SigPro UI - daisyUI v5 & Tailwind v4 Plugin - * Provides a set of reactive functional components, flow control and i18n. - */ -import { $, $if, $for, $watch, $html, $mount } from 'sigpro'; - -// --- I18N CORE --- -const i18n = { - es: { close: "Cerrar", confirm: "Confirmar", cancel: "Cancelar", search: "Buscar...", loading: "Cargando..." , nodata: "Sindatos"}, - en: { close: "Close", confirm: "Confirm", cancel: "Cancel", search: "Search...", loading: "Loading...", nodata: "No data" }, -}; - -let currentLocale = $("es"); - -/** SET LOCALE */ -export const Locale = (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(); -}; - -/** ICONS */ -const iconShow = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg=="; -const iconHide = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC"; -const iconClose = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAESSURBVDiNtdO7LoRBHAXwXyhVG5ddEq9AgbXiskS1dOJS6DyDRKLmFRCvQY9aIi6FnpDsrkuiQCWKmS/5dmW/VXCSyWTm/GfmnPzP8A8oYBc3eEMd59iKXCZW8YpDzCOHHszgAE9Ya3V4EY8YzXhgAndYaib68YxiO4kYRg290Bk3t/GAvbiuII/7uJ7CGG5RxSCGcJrceh2LEkzGwnIctTgnGMdFWtZ7IimFcrykirkmrkvokI7WVn1lcD9wpdFCKfVyYmE2xRdFC4mCY2ykCgaEfp/gTGhbX4pfx1FaQUEIyW/bWBUC1oAFIUgjGYdLWgQpwTJesC/4z6Eb00JG6lhpJzGPHVziEx/CZ9qM3N/iGy1pNoTrsd1eAAAAAElFTkSuQmCC"; -const iconCalendar = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC"; -const iconLock = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII="; -const iconAbc = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMRJREFUOI3t0bFKAmAUBeAPURD1HQwUTKPJEmzQoSWQcKpVfIuWdvU9WnqNhsYWBx0a2lvLSMKGbvQ7SO564HA497/3cu/92SPFAS5QDN9CftviDhZYYRpNPtH/rzATOsQT6jhCFzmc4DTJL6AX067hPiimuAr95RglzMJ/4AyyUXSMw3iEauhN6C0eUEMFAyzTFZ7xiOvwL3jbsPYSr3hPg3dB/o43SVYY+TnsPPwXztMG5SDr39dGM8kr4RKNDdPtJL4BNXEmsdKC+S4AAAAASUVORK5CYII="; -const icon123 = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg=="; -const iconMail = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC"; -const iconInfo = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC"; -const iconSuccess = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg=="; -const iconError = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC"; -const iconWarning = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII="; -const iconLeft = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg=="; -const iconRight = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg=="; -const iconLLeft = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg=="; -const iconRRight = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII="; - -// --- UI COMPONENTS --- - -/** BUTTON */ -export const 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 */ -export const Input = (props) => { - const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props; - const isPassword = type === "password"; - const visible = $(false); - - const iconsByType = { - text: iconAbc, - password: iconLock, - date: iconCalendar, - number: icon123, - email: iconMail, - }; - - const inputEl = $html("input", { - ...rest, - type: () => (isPassword ? (visible() ? "text" : "password") : type), - placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "), - class: joinClass("grow order-2 focus:outline-none", props.class), - value: value, - oninput: (e) => props.oninput?.(e), - disabled: () => val(props.disabled), - }); - - const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "w-5 h-5 opacity-50", alt: type }) : null; - - return $html( - "label", - { - class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""), - }, - [ - leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null, - label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null, - inputEl, - isPassword - ? $html( - "button", - { - type: "button", - class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100", - onclick: (e) => { - e.preventDefault(); - visible(!visible()); - }, - }, - () => - $html("img", { - class: "w-5 h-5", - src: visible() ? iconShow : iconHide, - }), - ) - : null, - tip - ? $html( - "div", - { class: "tooltip tooltip-left order-4", "data-tip": tip }, - $html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"), - ) - : null, - () => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null), - ], - ); -}; - -/** SELECT */ -export const 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 - }, - $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]); -}; - -/** AUTOCOMPLETE */ -export const Autocomplete = (props) => { - const { options = [], value, onSelect, label, placeholder, ...rest } = props; - - const query = $(val(value) || ""); - const isOpen = $(false); - const cursor = $(-1); - - const list = $(() => { - const q = query().toLowerCase(); - const data = val(options) || []; - return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data; - }); - - const pick = (opt) => { - const valStr = typeof opt === "string" ? opt : opt.value; - const labelStr = typeof opt === "string" ? opt : opt.label; - - query(labelStr); - if (typeof value === "function") value(valStr); - onSelect?.(opt); - - isOpen(false); - cursor(-1); - }; - - const nav = (e) => { - const items = list(); - if (e.key === "ArrowDown") { - e.preventDefault(); - isOpen(true); - cursor(Math.min(cursor() + 1, items.length - 1)); - } else if (e.key === "ArrowUp") { - e.preventDefault(); - cursor(Math.max(cursor() - 1, 0)); - } else if (e.key === "Enter" && cursor() >= 0) { - e.preventDefault(); - pick(items[cursor()]); - } else if (e.key === "Escape") { - isOpen(false); - } - }; - - return $html("div", { class: "relative w-full" }, [ - Input({ - label, - placeholder: placeholder || tt("search")(), - value: query, - onfocus: () => isOpen(true), - onblur: () => setTimeout(() => isOpen(false), 150), - onkeydown: nav, - oninput: (e) => { - const v = e.target.value; - query(v); - if (typeof value === "function") value(v); - isOpen(true); - cursor(-1); - }, - ...rest, - }), - $html( - "ul", - { - class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50", - style: () => (isOpen() && list().length ? "display:block" : "display:none"), - }, - [ - $for( - list, - (opt, i) => - $html("li", {}, [ - $html( - "a", - { - class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`, - onclick: () => pick(opt), - onmouseenter: () => cursor(i), - }, - typeof opt === "string" ? opt : opt.label, - ), - ]), - (opt, i) => (typeof opt === "string" ? opt : opt.value) + i, - ), - () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results")), - ], - ), - ]); -}; - -/** DATEPICKER */ -export const Datepicker = (props) => { - const { value, range, label, placeholder, ...rest } = props; - - const isOpen = $(false); - const internalDate = $(new Date()); - const hoverDate = $(null); - const isRangeMode = () => val(range) === true; - - const now = new Date(); - const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`; - - const formatDate = (d) => { - const year = d.getFullYear(); - const month = String(d.getMonth() + 1).padStart(2, "0"); - const day = String(d.getDate()).padStart(2, "0"); - return `${year}-${month}-${day}`; - }; - - const selectDate = (date) => { - const dateStr = formatDate(date); - const current = val(value); - - if (isRangeMode()) { - if (!current?.start || (current.start && current.end)) { - if (typeof value === "function") value({ start: dateStr, end: null }); - } else { - const start = current.start; - if (typeof value === "function") { - value(dateStr < start ? { start: dateStr, end: start } : { start, end: dateStr }); - } - isOpen(false); - } - } else { - if (typeof value === "function") value(dateStr); - isOpen(false); - } - }; - - const displayValue = $(() => { - const v = val(value); - if (!v) return ""; - if (typeof v === "string") return v; - if (v.start && v.end) return `${v.start} - ${v.end}`; - if (v.start) return `${v.start}...`; - return ""; - }); - - const move = (m) => { - const d = internalDate(); - internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1)); - }; - - const moveYear = (y) => { - const d = internalDate(); - internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1)); - }; - - return $html("div", { class: "relative w-full" }, [ - Input({ - label, - placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), - value: displayValue, - readonly: true, - icon: $html("img", { src: iconCalendar, class: "opacity-40" }), - onclick: (e) => { - e.stopPropagation(); - isOpen(!isOpen()); - }, - ...rest, - }), - - $if(isOpen, () => - $html( - "div", - { - class: "absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none", - onclick: (e) => e.stopPropagation(), - }, - [ - $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ - $html("div", { class: "flex gap-0.5" }, [ - $html( - "button", - { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, - $html("img", { src: iconLLeft, class: "opacity-40" }), - ), - $html( - "button", - { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, - $html("img", { src: iconLeft, class: "opacity-40" }), - ), - ]), - $html("span", { class: "font-bold uppercase flex-1 text-center" }, [ - () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }), - ]), - $html("div", { class: "flex gap-0.5" }, [ - $html( - "button", - { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, - $html("img", { src: iconRight, class: "opacity-40" }), - ), - $html( - "button", - { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, - $html("img", { src: iconRRight, class: "opacity-40" }), - ), - ]), - ]), - - $html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [ - ...["L", "M", "X", "J", "V", "S", "D"].map((d) => $html("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)), - () => { - const d = internalDate(); - const year = d.getFullYear(); - const month = d.getMonth(); - const firstDay = new Date(year, month, 1).getDay(); - const offset = firstDay === 0 ? 6 : firstDay - 1; - const daysInMonth = new Date(year, month + 1, 0).getDate(); - - const nodes = []; - for (let i = 0; i < offset; i++) nodes.push($html("div")); - - for (let i = 1; i <= daysInMonth; i++) { - const date = new Date(year, month, i); - const dStr = formatDate(date); - - nodes.push( - $html( - "button", - { - type: "button", - class: () => { - const v = val(value); - const h = hoverDate(); - const isStart = typeof v === "string" ? v === dStr : v?.start === dStr; - const isEnd = v?.end === dStr; - let inRange = false; - - if (isRangeMode() && v?.start) { - const start = v.start; - if (!v.end && h) { - inRange = (dStr > start && dStr <= h) || (dStr < start && dStr >= h); - } else if (v.end) { - inRange = dStr > start && dStr < v.end; - } - } - - const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative"; - const state = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost"; - const today = dStr === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : ""; - - return `${base} ${state} ${today}`; - }, - onmouseenter: () => { - if (isRangeMode()) hoverDate(dStr); - }, - onclick: () => selectDate(date), - }, - [i.toString()], - ), - ); - } - return nodes; - }, - ]), - ], - ), - ), - - $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })), - ]); -}; - -/** COLORPICKER */ -export const Colorpicker = (props) => { - const { value, label, ...rest } = props; - const isOpen = $(false); - - const palette = [ - ...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"], - ...["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"], - ...["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"], - ...["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"], - ...["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"], - ...["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"], - ...["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"], - ...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"], - ]; - - const getColor = () => val(value) || "#000000"; - - return $html("div", { class: "relative w-fit" }, [ - $html( - "button", - { - type: "button", - class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case", - onclick: (e) => { - e.stopPropagation(); - isOpen(!isOpen()); - }, - ...rest, - }, - [ - $html("div", { - class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0", - style: () => `background-color: ${getColor()}`, - }), - label ? $html("span", { class: "opacity-80" }, label) : null, - ], - ), - - $if(isOpen, () => - $html( - "div", - { - class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none", - onclick: (e) => e.stopPropagation(), - }, - [ - $html( - "div", - { class: "grid grid-cols-8 gap-1" }, - palette.map((c) => - $html("button", { - type: "button", - style: `background-color: ${c}`, - class: () => { - const active = getColor().toLowerCase() === c.toLowerCase(); - return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 - ${active ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`; - }, - onclick: () => { - value(c); - isOpen(false); - }, - }), - ), - ), - ], - ), - ), - - $if(isOpen, () => - $html("div", { - class: "fixed inset-0 z-[100]", - onclick: () => isOpen(false), - }), - ), - ]); -}; - -/** CHECKBOX */ -export const Checkbox = (props) => { - const { value, tooltip, toggle, ...rest } = props; - const checkEl = $html("input", { - ...rest, - type: "checkbox", - class: () => (val(toggle) ? "toggle" : "checkbox"), - checked: value - }); - - 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 */ -export const Radio = (props) => { - const { label, tooltip, 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 */ -export const Range = (props) => { - const { label, tooltip, value, ...rest } = props; - - const rangeEl = $html("input", { - ...rest, - type: "range", - class: joinClass("range", props.class), - value: value, - disabled: () => val(props.disabled) - }); - - 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 */ -export const Modal = (props, children) => { - const { title, buttons, open, ...rest } = props; - const close = () => open(false); - - return $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, - typeof children === "function" ? children() : children, - $html("div", { class: "modal-action flex gap-2" }, [ - ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean), - Button({ onclick: close }, tt("close")()), - ]), - ]), - $html( - "form", - { - method: "dialog", - class: "modal-backdrop", - onclick: (e) => (e.preventDefault(), close()), - }, - [$html("button", {}, "close")], - ), - ]), - ); -}; - -/** DROPDOWN */ -export const Dropdown = (props, children) => { - const { label, icon, ...rest } = props; - - return $html( - "div", - { - ...rest, - class: () => `dropdown ${val(props.class) || props.class || ""}`, - }, - [ - $html( - "div", - { - tabindex: 0, - role: "button", - class: "btn m-1 flex items-center gap-2", - }, - [icon ? (typeof icon === "function" ? icon() : icon) : null, label ? (typeof label === "function" ? label() : label) : null], - ), - $html( - "ul", - { - tabindex: 0, - class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300", - }, - [typeof children === "function" ? children() : children], - ), - ], - ); -}; - -/** ACCORDION */ -export const Accordion = (props, children) => { - const { title, name, 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: open - }), - $html("div", { class: "collapse-title text-xl font-medium" }, title), - $html("div", { class: "collapse-content" }, children), - ], - ); -}; - -/** TABS */ -export const 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-box", props.class || props.class), - }, - $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]); - }, - ]); -}; - -/** TABLE */ -export const Table = (props) => { - const { - items = [], - columns = [], - keyFn, - zebra = false, - pinRows = false, - empty = tt("nodata"), - ...rest - } = props; - - const tableClass = () => joinClass( - "table", - `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}` - ); - - return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [ - $html("table", { ...rest, class: tableClass }, [ - $html("thead", {}, [ - $html("tr", {}, - columns.map(col => $html("th", { class: col.class || "" }, col.label)) - ) - ]), - $html("tbody", {}, [ - $for(items, (item, index) => { - return $html("tr", { class: "hover" }, - columns.map(col => { - const cellContent = () => { - if (col.render) return col.render(item, index); - const value = item[col.key]; - return val(value); - }; - return $html("td", { class: col.class || "" }, [cellContent]); - }) - ); - }, keyFn || ((item, idx) => item.id || idx)), - - $if(() => val(items).length === 0, () => - $html("tr", {}, [ - $html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [ - val(empty) - ]) - ]) - ) - ]), - $if(() => columns.some(c => c.footer), () => - $html("tfoot", {}, [ - $html("tr", {}, - columns.map(col => $html("th", {}, col.footer || "")) - ) - ]) - ) - ]) - ]); -}; - -/** BADGE */ -export const Badge = (props, children) => $html("span", { ...props, class: joinClass("badge", props.class || props.class) }, children); - -/** TOOLTIP */ -export const Tooltip = (props, children) => - $html("div", { ...props, class: joinClass("tooltip", props.class || props.class), "data-tip": props.tip }, children); - -/** NAVBAR */ -export const Navbar = (props, children) => - $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class || props.class) }, children); - -/** MENU */ -export const Menu = (props) => { - const renderItems = (items) => - $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 */ -export const 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 */ -export const Fieldset = (props, children) => - $html( - "fieldset", - { - ...props, - class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class || props.class), - }, - [ - () => { - const legendText = val(props.legend); - return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null; - }, - children, - ], - ); - -/** LIST */ -export const List = (props) => { - const { items, header, render, keyFn, class: className } = props; - - return $html( - "ul", - { - class: joinClass("list bg-base-100 rounded-box shadow-md", className), - }, - [ - $if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])), - $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn), - ], - ); -}; - -/** STACK */ -export const Stack = (props, children) => $html("div", { ...props, class: joinClass("stack", props.class || props.class) }, children); - -/** STAT */ -export const 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 */ -export const Swap = (props) => - $html("label", { class: joinClass("swap", props.class || props.class) }, [ - $html("input", { - type: "checkbox", - checked: props.value - }), - $html("div", { class: "swap-on" }, props.on), - $html("div", { class: "swap-off" }, props.off), - ]); - -/** INDICATOR */ -export const Indicator = (props, children) => - $html("div", { class: joinClass("indicator", props.class || props.class) }, [ - children, - $html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge), - ]); - -/** RATING */ -export const Rating = (props) => { - const { value, count = 5, mask = "mask-star", readonly = false, ...rest } = props; - const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`; - - return $html("div", { - ...rest, - class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`, - }, - Array.from({ length: val(count) }, (_, i) => { - const starValue = i + 1; - - return $html("input", { - type: "radio", - name: ratingGroup, - class: `mask ${mask}`, - "aria-label": `${starValue} star`, - checked: () => Math.round(val(value)) === starValue, - onchange: () => { - if (!val(readonly) && typeof value === "function") { - value(starValue); - } - }, - }); - })); -}; - -/** ALERT */ -export const Alert = (props, children) => { - const { type = "info", soft = true, ...rest } = props; - const icons = { - info: iconInfo, - success: iconSuccess, - warning: iconWarning, - error: iconError, - }; - - const typeClass = () => { - const t = val(type); - const map = { - info: "alert-info", - success: "alert-success", - warning: "alert-warning", - error: "alert-error", - }; - return map[t] || t; - }; - - const content = children || props.message; - - return $html( - "div", - { - ...rest, - role: "alert", - class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`, - }, - [ - $html("img", { - src: icons[val(type)] || icons.info, - class: "w-4 h-4 object-contain", - alt: val(type), - }), - $html("div", { class: "flex-1" }, [$html("span", {}, [typeof content === "function" ? content() : content])]), - props.actions ? $html("div", { class: "flex-none" }, [typeof props.actions === "function" ? props.actions() : props.actions]) : null, - ], - ); -}; - -/** TIMELINE */ -export const Timeline = (props) => { - const { items = [], vertical = true, compact = false, ...rest } = props; - - const icons = { - info: iconInfo, - success: iconSuccess, - warning: iconWarning, - error: iconError, - }; - - return $html( - "ul", - { - ...rest, - class: () => - `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""} ${props.class || ""}`, - }, - [ - $for( - items, - (item, i) => { - const isFirst = i === 0; - const isLast = i === val(items).length - 1; - const itemType = item.type || "success"; - const renderSlot = (content) => (typeof content === "function" ? content() : content); - - return $html("li", { class: "flex-1" }, [ - !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, - $html("div", { class: "timeline-start" }, [renderSlot(item.title)]), - $html("div", { class: "timeline-middle" }, [ - $html("img", { - src: icons[itemType] || item.icon || icons.success, - class: "w-4 h-4 object-contain mx-1", - alt: itemType, - }), - ]), - $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]), - !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, - ]); - }, - (item, i) => item.id || i, - ), - ], - ); -}; - -/** FAB */ -export const Fab = (props) => { - const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props; - - return $html( - "div", - { - ...rest, - class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${props.class || ""}`, - }, - [ - $html( - "div", - { - tabindex: 0, - role: "button", - class: "btn btn-lg btn-circle btn-primary shadow-2xl", - }, - [icon ? (typeof icon === "function" ? icon() : icon) : null, !icon && label ? label : null], - ), - - ...val(actions).map((act) => - $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [ - act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null, - $html( - "button", - { - type: "button", - class: `btn btn-circle shadow-lg ${act.class || ""}`, - onclick: (e) => { - e.stopPropagation(); - act.onclick?.(e); - }, - }, - [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""], - ), - ]), - ), - ], - ); -}; - -/** TOAST */ -export const 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 pointer-events-none", - }); - document.body.appendChild(container); - } - - const toastHost = $html("div", { style: "display: contents" }); - container.appendChild(toastHost); - - let timeoutId; - const close = () => { - clearTimeout(timeoutId); - const el = toastHost.firstElementChild; - if (el && !el.classList.contains("opacity-0")) { - el.classList.add("translate-x-full", "opacity-0"); - setTimeout(() => { - instance.destroy(); - toastHost.remove(); - if (!container.hasChildNodes()) container.remove(); - }, 300); - } else { - instance.destroy(); - toastHost.remove(); - } - }; - - const ToastComponent = () => { - const el = $html( - "div", - { - class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`, - }, - [ - $html("span", typeof message === "function" ? message : () => message), - Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕"), - ], - ); - - requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0")); - return el; - }; - - const instance = $mount(ToastComponent, toastHost); - - if (duration > 0) { - timeoutId = setTimeout(close, duration); - } - - return close; -}; - -/** LOADING */ -export const Loading = (props) => { - return $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" }), - ]), - ); -}; - -// --- EXPORT UI FUNCTION --- -export const UI = (defaultLang = "es") => { - // Set initial locale - if (defaultLang) currentLocale(defaultLang); - - // Create UI object with all components - const ui = { - Locale, tt, Button, Input, Select, Autocomplete, Datepicker, Colorpicker, - Checkbox, Radio, Range, Modal, Dropdown, Accordion, Tabs, Badge, - Tooltip, Navbar, Menu, Drawer, Fieldset, List, Stack, Stat, Swap, Indicator, - Rating, Alert, Timeline, Fab, Toast, Loading, Table - }; - - // Inject all components into window - Object.keys(ui).forEach((key) => { - Object.defineProperty(window, key, { - value: ui[key], - writable: false, - configurable: true, - enumerable: true - }); - }); - - return ui; -};