@dogiloki/artha-js 1.0.0 → 1.2.0

package/dist/artha.min.css

@@ -1 +1 @@
-artha-message{width:100%;padding:10px;text-align:left;font-size:1em;cursor:default}artha-message[type=error]{background-color:#f2dede;color:#b94a48}artha-message[type=success]{background-color:#dff0d8;color:#468847}artha-message[type=warning]{background-color:#fcf8e3;color:#c09853}artha-message[type=info]{background-color:#d9edf7;color:#3a87ad}/*# sourceMappingURL=artha.min.css.map */
+artha-message{width:100%;padding:10px;text-align:left;font-size:1em;cursor:default}artha-message[type=error]{background-color:#f2dede;color:#b94a48}artha-message[type=success]{background-color:#dff0d8;color:#468847}artha-message[type=warning]{background-color:#fcf8e3;color:#c09853}artha-message[type=info]{background-color:#d9edf7;color:#3a87ad}artha-loader{display:inline-flex;flex-direction:column;align-items:center}artha-loader .loader-content{display:flex;justify-content:center;align-items:center;gap:10px}artha-loader[type=dots] .loader-content>div{width:10px;height:10px;background-color:#3b82f6;border-radius:50%;animation:dot 1.2s infinite ease-in-out}artha-loader[type=dots] .loader-content>div:nth-of-type(1){animation-delay:0s}artha-loader[type=dots] .loader-content>div:nth-of-type(2){animation-delay:.2s}artha-loader[type=dots] .loader-content>div:nth-of-type(3){animation-delay:.4s}artha-loader[type=ring] .loader-content>div{width:32px;height:32px;border:3px solid #93c5fd;border-top-color:#3b82f6;border-radius:50%;animation:ring .8s linear infinite}artha-loader span{font-size:1rem;color:#5b6e8c}@keyframes dot{0%,100%{transform:scale(0.8);opacity:.4}50%{transform:scale(1.2);opacity:1}}@keyframes ring{to{transform:rotate(360deg)}}/*# sourceMappingURL=artha.min.css.map */

package/dist/artha.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/scss/message.scss","../src/scss/colors.scss"],"names":[],"mappings":"AAEA,cACI,WACA,aACA,gBACA,cACA,eAEA,0BACI,iBCLqB,QDMrB,MCVe,QDYnB,4BACI,iBCRuB,QDSvB,MCbiB,QDerB,4BACI,iBCXuB,QDYvB,MChBiB,QDkBrB,yBACI,iBCdoB,QDepB,MCnBc","file":"artha.min.css"}
+{"version":3,"sourceRoot":"","sources":["../src/scss/message.scss","../src/scss/colors.scss","../src/scss/loader.scss"],"names":[],"mappings":"AAEA,cACI,WACA,aACA,gBACA,cACA,eAEA,0BACI,iBCLqB,QDMrB,MCVe,QDYnB,4BACI,iBCRuB,QDSvB,MCbiB,QDerB,4BACI,iBCXuB,QDYvB,MChBiB,QDkBrB,yBACI,iBCdoB,QDepB,MCnBc,QCFtB,aACI,oBACA,sBACA,mBAEA,6BACI,aACA,uBACA,mBACA,SAKI,4CACI,WACA,YACA,iBDTO,QCUP,kBACA,wCAEA,2DACI,mBAEJ,2DACI,oBAEJ,2DACI,oBAQR,4CACI,WACA,YACA,yBACA,iBDhCO,QCiCP,kBACA,mCAIZ,kBACI,eACA,MDtCa,QC0CrB,eACI,QACI,qBACA,WAEJ,IACI,qBACA,WAIR,gBACI,GACI","file":"artha.min.css"}

package/dist/artha.min.js

@@ -1,32 +1,40 @@
-import Config from '../src/core/Config.js';
 import Util from '../src/core/Util.js';
 import EventBus from '../src/core/EventBus.js';
 import TaskQueue from '../src/core/TaskQueue.js';
 import XHR from '../src/core/XHR.js';
 import ArthaMessage from '../src/components/artha-message.js';
+import ArthaLoader from '../src/components/artha-loader.js';
 import ArthaContainer from '../src/components/artha-container.js';
 import ArthaForm from '../src/components/artha-form.js';
 
-if(!customElements.get('artha-container')){
-    customElements.define('artha-container',ArthaContainer);
-}
-if(!customElements.get('artha-form')){
-    customElements.define('artha-form',ArthaForm);
-}
-if(!customElements.get('artha-message')){
-    customElements.define('artha-message',ArthaMessage);
-}
-
-const Artha={
-    version:"1.0.0",
-    config(options){
-        Config.set(options);
-    },
-    get(path,def=null){
-        return Config.get(path,def);
-    }
+export {
+    Util,
+    EventBus,
+    TaskQueue,
+    XHR,
+    ArthaMessage,
+    ArthaLoader,
+    ArthaContainer,
+    ArthaForm
 };
 
-Window.Artha=Artha;
+Promise.resolve().then(()=>{
+    EventBus.emit('artha:before-register',{});
+    registerComponents();
+    EventBus.emit('artha:after-register',{});
+});
 
-export default Artha;
+function registerComponents(){
+    if(!customElements.get('artha-container')){
+        customElements.define('artha-container',ArthaContainer);
+    }
+    if(!customElements.get('artha-form')){
+        customElements.define('artha-form',ArthaForm);
+    }
+    if(!customElements.get('artha-message')){
+        customElements.define('artha-message',ArthaMessage);
+    }
+    if(!customElements.get('artha-loader')){
+        customElements.define('artha-loader',ArthaLoader);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogiloki/artha-js",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "",
   "main": "dist/artha.min.js",
   "type": "module",
@@ -9,7 +9,9 @@
     "src"
   ],
   "scripts": {
-    "dev": "sass --watch src/scss/main.scss:dist/artha.css",
+    "dev:css": "sass --watch src/scss/main.scss:dist/artha.min.css --style=compressed",
+    "dev:server": "live-server --watch=. --port=8080",
+    "dev": "concurrently \"npm run dev:css\" \"npm run dev:server\"",
     "build": "sass src/scss/main.scss dist/artha.min.css --style=compressed"
   },
   "keywords": [
@@ -27,5 +29,10 @@
   "bugs": {
     "url": "https://github.com/dogiloki/artha-js/issues"
   },
-  "homepage": "https://github.com/dogiloki/artha-js#readme"
-}
+  "homepage": "https://github.com/dogiloki/artha-js#readme",
+  "devDependencies": {
+    "concurrently": "^9.2.1",
+    "live-server": "^1.2.2",
+    "sass": "^1.98.0"
+  }
+}

package/src/abstract/BaseComponent.js

@@ -0,0 +1,201 @@
+export default class BaseComponent extends HTMLElement{
+
+    static counter=0;
+
+    // Método estático para definir atributos observados
+    static get observedAttributes(){
+        return [];
+    }
+
+    constructor(props=null,options={}){
+        super();
+        BaseComponent.counter+=1;
+        // Cache de elementos DOM referenciados por ID
+        this._elements={};
+        // Flag para evitar ciclos de actualización
+        this._updating=false;
+        // Mapeo de atributos
+        this._props=[];
+        // Mapeo para indicar comportamiento especiales en el mapeo de atributos
+        this._special_props={
+            booleans:[], // Propiedades booleanas
+            element_refs:[], // Propiedades de referencian elementos por ID
+            defaults:{}, // Propiedades con valor por defecto
+            resolvers:{} // Propiedades con un callback
+        };
+        this.configureProperties(props,options);
+    }
+
+    connectedCallback(){
+        this.onConnected();
+        this.dispatchEvent(new CustomEvent('component-ready',{
+            detail:this,
+            bubbles:true
+        }));
+    }
+    onConnected(){}
+
+    disconnectedCallback(){
+        this.onDisconnected();
+        this.clearElementCache();
+    }
+    onDisconnected(){}
+
+    attributeChangedCallback(name,old_value,new_value){
+        if(old_value===new_value) return;
+        if(this._props.includes(name)){
+            this._triggerUpdate(name,this._getPropertyValue(name));
+        }
+        this.onAttributeChanged(name,old_value,new_value);
+    }
+    onAttributeChanged(name,old_value,new_value){}
+
+    configureProperties(props,options={}){
+        if(props==null) return;
+        this._props=props;
+        this._special_props={
+            booleans:options.booleans||[],
+            element_refs:options.element_refs||[],
+            defaults:options.defaults||{},
+            resolvers:options.resolvers||{}
+        };
+        this._setupProperties();
+    }
+
+    _setupProperties(){
+        this._props.forEach((prop)=>{
+            Object.defineProperty(this,prop,{
+                get:()=>this._getPropertyValue(prop),
+                set:(value)=>this._setPropertyValue(prop,value),
+                enumerable:true,
+                configurable:true
+            });
+        });
+        // Iniciar con valores de atributos existentes
+        this._initializeProperties();
+    }
+
+    _getPropertyValue(prop){
+        // Propiedade que referencia un elemento por ID
+        if(this._special_props.element_refs.includes(prop)){
+            const element_id=this.getAttribute(prop);
+            if(!element_id) return null;
+            // Cache para evitar múltiples búsquedas en el DOM
+            if(!this._elements[prop] || this._elements[prop].id!==element_id){
+                this._elements[prop]=document.getElementById(element_id);
+            }
+            return this._elements[prop];
+        }
+        // Propiedades con callback
+        if(this._special_props.resolvers[prop]){
+            const raw_value=this.getAttribute(prop);
+            return this._special_props.resolvers[prop].get(raw_value,this);
+        }
+        // Propiedad booleana
+        if(this._special_props.booleans.includes(prop)){
+            return this.hasAttribute(prop) && this.getAttribute(prop)!=='false';
+        }
+        // Propiedad con valor por defecto
+        const value=this.getAttribute(prop);
+        if(value===null && this._special_props.defaults[prop]!==undefined){
+            return this._special_props.defaults[prop];
+        }
+        return value;
+    }
+
+    _setPropertyValue(prop,value){
+        if(this._updating) return;
+        const current_value=this.getAttribute(prop);
+        let new_value=value;
+        // Convertir a string para atributos
+        if(value===null || value===undefined){
+            new_value=null;
+        }else if (typeof value==='boolean'){
+            new_value=value?'':null;
+        }else if(typeof value==='object'){
+            // Para objetos como referencia a elementos, no actualizar el atributo
+            this._elements[prop]=value;
+            this._triggerUpdate(prop,value);
+            return;
+        }else if(this._special_props.resolvers[prop]){
+            new_value=this._special_props.resolvers[prop].set(value,this);
+            this._triggerUpdate(prop,value);
+        }else{
+            new_value=String(value);
+        }
+        // Solo actualizar si cambió
+        if(current_value!==new_value){
+            if(new_value===null){
+                this.removeAttribute(prop);
+            }else{
+                this.setAttribute(prop,new_value);
+            }
+            this._triggerUpdate(prop,value);
+        }
+    }
+
+    _initializeProperties(){
+        this._props.forEach((prop)=>{
+            const attrib_value=this.getAttribute(prop);
+            if(attrib_value!==null){
+                this[prop]=this._getPropertyValue(prop);
+            }else if(this._special_props.defaults[prop]!==undefined){
+                this[prop]=this._special_props.defaults[prop];
+            }
+        })
+    }
+
+    _triggerUpdate(prop,value){
+        if(this._updating) return;
+        this._updating=true;
+        // Evento específico para cambio de la propiedad
+        this.dispatchEvent(new CustomEvent(`${prop}-changed`,{
+            detail:{
+                property:prop,
+                value,
+                component:this
+            },
+            bubbles:true
+        }));
+        // Evento genérico para cualquier cambio
+        this.dispatchEvent(new CustomEvent('property-changed',{
+            detail:{
+                property:prop,
+                value,
+                component:this
+            },
+            bubbles:true
+        }));
+        // Actualización (puede ser sobrescrito)
+        this.onPropertyChanged(prop,value);
+        this._updating=false;
+    }
+
+    onPropertyChanged(prop,value){
+
+    }
+
+    setProperties(props){
+        this._updating=true;
+        Object.entries(props).forEach(([key,value])=>{
+            if(this._props.includes(key)){
+                this[key]=value;
+            }
+        });
+        this._updating=false;
+        this._triggerUpdate('batch',props);
+    }
+
+    getProperties(){
+        const props={};
+        this._props.forEach((prop)=>{
+            props[prop]=this[prop];
+        });
+        return props;
+    }
+
+    clearElementCache(){
+        this._elements={};
+    }
+
+}

package/src/components/artha-container.js

@@ -1,13 +1,25 @@
+import BaseComponent from '../abstract/BaseComponent.js';
 import Util from '../core/Util.js';
 import EventBus from '../core/EventBus.js';
 import XHR from '../core/XHR.js';
 import TaskQueue from '../core/TaskQueue.js';
 import ArthaMessage from './artha-message.js';
 
-export default class ArthaContainer extends HTMLElement{
+export default class ArthaContainer extends BaseComponent{
 
     constructor(){
-        super();
+        super(
+            ["template","action","action_router","method",
+            "pagination","message","searcher","selectable","multiple"],
+            {
+                booleans:['searcher','selectable','multiple'],
+                element_refs:['template','mesage'],
+                defaults:{
+                    method:'GET',
+                    pagination:10
+                }
+            }
+        );
 
         this.onRenderItem=(element,data)=>{};
         this.onRenderItemFill=(element,data,fill_element,fill_data)=>{};
@@ -17,37 +29,8 @@ export default class ArthaContainer extends HTMLElement{
         this.items={};
         this.selection_store=new SelectionStore();
         this.response_type='json';
-        this._elements={};
-        this._props=[
-            "template","action","action_router","method",
-            "pagination","message","searcher","selectable","multiple"];
-        this._props.forEach((prop)=>{
-            Object.defineProperty(this,prop,{
-                get:()=>{
-                    switch(prop){
-                        case 'template':
-                            if(!this._elements[prop] || this._elements[prop].id!==this.getAttribute(prop)){
-                                this._elements[prop]=document.getElementById(this.getAttribute(prop));
-                            }
-                            return this._elements[prop];
-                        case 'method': return this.getAttribute(prop)??'GET';
-                        default: return this.getAttribute(prop);
-                    }
-                },
-                set:(value)=>{
-                    if(this.getAttribute(prop)!==value){
-                        this.setAttribute(prop,value);
-                    }
-                }
-            });
-            const attr_val=this.getAttribute(prop);
-            if(attr_val!==null) this[prop]=attr_val;
-        });
-        this.pagination=this.getAttribute("pagination");
-        this.searcher=this.hasAttribute("searcher");
-        this.selectable=this.hasAttribute("selectable");
-        this.multiple=this.hasAttribute("multiple");
-        this.message=this.querySelector('artha-message')??this.querySelector(this.getAttribute('message-target'))??null;
+        this.message??=this.querySelector('artha-message')??this.querySelector(this.getAttribute('message-target'))??null;
+        this.id=this.getAttribute('id')??'container-'+BaseComponent.counter;
 
         // Loader
         this.loader_container=this._createLoader();
@@ -67,22 +50,7 @@ export default class ArthaContainer extends HTMLElement{
     }
 
     _createLoader(){
-        return Util.createElement('div',(div)=>{
-            div.classList.add('loader-container');
-            div.setAttribute('title','Procesando...');
-            div.appendChild(Util.createElement('div',(div2)=>{
-                div2.classList.add('background-overlay');
-            }));
-            div.appendChild(Util.createElement('div',(div3)=>{
-                div3.classList.add('loader','active');
-            }));
-            const img_container=div.appendChild(Util.createElement('div',(div4)=>{
-                div4.classList.add('img-container');
-            }));
-            img_container.appendChild(Util.createElement('img',(img)=>{
-                img.src='/assets/logo.png';
-            }));
-        });
+        return Util.createElement('artha-loader');
     }
 
     _handleSearch(evt){
@@ -139,8 +107,7 @@ export default class ArthaContainer extends HTMLElement{
     getData(search=null){
         if(!this.action) return;
         const query=search?{search}:{};
-        const id=this.getAttribute("id")??Util.numberRandom(10000,99999);
-        this.task_queue.loadTask(`container-${id}`,null,(task)=>{
+        this.task_queue.loadTask(`container-${this.id}`,null,(task)=>{
             XHR.request({
                 url:this.action,
                 method:this.method,
@@ -152,9 +119,9 @@ export default class ArthaContainer extends HTMLElement{
                 onLoad:(xhr)=>{
                     this.dispatchEvent(new CustomEvent('load',{detail:xhr}));
                 },
-                onData:(xhr,data)=>{
+                onData:(xhr,json)=>{
                     // Respuesta procesada en en formato json
-                    task.resolve(xhr,(json)=>{
+                    task.resolve(xhr,()=>{
                         this.dispatchEvent(new CustomEvent('resolve',{detail:json}));
                         if(json.message){
                             this.message?.show(json.message,json.status);
@@ -206,9 +173,9 @@ export default class ArthaContainer extends HTMLElement{
         let index=0;
 
         for(const item of items){
-            const wires=item.getAttribute("data-wire").split(",");
+            const wires=item.getAttribute("data-wire").split(":");
             for(let wire of wires){
-                const [attrib_json,attrib_element,attrib_action]=wire.split(",");
+                const [attrib_json,attrib_element,attrib_action]=wire.split(":");
                 let value=attrib_json?Util.getValueByPath(data,attrib_json.replaceAll("[]","")):data[index]??"";
                 const append=attrib_action==="append";
                 const chooser=attrib_action==="chooser";

package/src/components/artha-form.js

@@ -1,9 +1,10 @@
+import BaseComponent from '../abstract/BaseComponent.js';
 import Util from '../core/Util.js';
 import XHR from '../core/XHR.js';
 import TaskQueue from '../core/TaskQueue.js';
 import ArthaMessage from './artha-message.js';
 
-export default class ArthaForm extends HTMLElement{
+export default class ArthaForm extends BaseComponent{
     
     constructor(){
         super();
@@ -46,6 +47,8 @@ export default class ArthaForm extends HTMLElement{
                 default: btn.addEventListener('click',(evt)=>this.submit());
             }
         });
+        this.querySelector('[type="submit"]')?.addEventListener('click',(evt)=>this.submit());
+        this.querySelector('[type="reset"]')?.addEventListener('click',(evt)=>this.reset());
     }
 
     // Cargar inputs dinámicos
@@ -101,10 +104,14 @@ export default class ArthaForm extends HTMLElement{
 
     // Enviar formulario
     submit(){
+        if(!this.checkValidity()){
+            this.message.warning('Formulario incompleto');
+            return;
+        }
         const form_data={};
         this.element_inputs.forEach((element)=>{
             form_data[element.name]=element.type==='checkbox'?(element.checked?1:0):element.value;
-        })
+        });
         const action=this.getAttribute('action')??'';
         const method=this.getAttribute('method')??'GET';
         const id=this.getAttribute('id');
@@ -117,9 +124,9 @@ export default class ArthaForm extends HTMLElement{
                 onLoad:(xhr)=>{
                     this.dispatchEvent(new CustomEvent('load',{detail:xhr}));
                 },
-                onData:(xhr,data)=>{
+                onData:(xhr,json)=>{
                     // Respuesta procesada en formato json
-                    task.resolve(xhr,(json)=>{
+                    task.resolve(xhr,()=>{
                         this.dispatchEvent(new CustomEvent('resolve',{detail:json}));
                         this.fillFromJson(json.data??{},false);
                     });

package/src/components/artha-loader.js

@@ -0,0 +1,68 @@
+import BaseComponent from '../abstract/BaseComponent.js';
+import TaskQueue from '../core/TaskQueue.js';
+import LoaderDots from '../components/loaders/LoaderDots.js';
+import LoaderRing from '../components/loaders/LoaderRing.js';
+
+export default class ArthaLoader extends BaseComponent{
+
+    static TYPE=Object.freeze({
+        DOTS:{
+            name:'dots',
+            clazz:LoaderDots
+        },
+        RING:{
+            name:'ring',
+            clazz:LoaderRing
+        },
+        BAR:{
+            name:'bar',
+            clazz:LoaderDots
+        },
+        WAVE:{
+            name:'wave',
+            clazz:LoaderDots
+        }
+    });
+
+    constructor(){
+        super(
+            ['type','text'],
+            {
+                defaults:{
+                    type:ArthaLoader.TYPE.RING.name,
+                    text:TaskQueue.defaults.title
+                },
+                resolvers:{
+                    type:{
+                        get:(value)=>{
+                            return Object.values(ArthaLoader.TYPE).find((item)=>{
+                                return item.name==value;
+                            })?.clazz;
+                        },
+                        set:(value)=>{
+                            return Object.values(ArthaLoader.TYPE).find((item)=>{
+                                return item.clazz==value;
+                            })?.name||value;
+                        }
+                    }
+                }
+            }
+        );
+        this.addEventListener('property-changed',()=>{
+            this.render();
+        });
+        this.render();
+    }
+
+    getLoaderInstance(){
+        return new (this.type)(this.getAttribute("type"),this.text);
+    }
+
+    render(){
+        this.innerHTML="";
+        const content=this.getLoaderInstance().render();
+        this.appendChild(content[0]);
+        this.appendChild(content[1]);
+    }
+
+}

package/src/components/artha-message.js

@@ -1,7 +1,7 @@
-import Config from "../core/Config.js";
+import BaseComponent from '../abstract/BaseComponent.js';
 import Util from "../core/Util.js";
 
-export default class ArthaMessage extends HTMLElement{
+export default class ArthaMessage extends BaseComponent{
 
     static TYPE=Object.freeze({
         ERROR:{
@@ -14,7 +14,7 @@ export default class ArthaMessage extends HTMLElement{
         },
         SUCCESS:{
             code:1,
-            name:"suscess"
+            name:"success"
         },
         WARNING:{
             code:2,
@@ -25,10 +25,7 @@ export default class ArthaMessage extends HTMLElement{
 
     constructor(){
         super();
-    }
-
-    connectedCallback(){
-        this.type=this.getAttribute("type")||"info";
+        this.type=this.getAttribute("type")||ArthaMessage.TYPE.INFO.name;
         this.hidden();
     }
 
@@ -49,7 +46,8 @@ export default class ArthaMessage extends HTMLElement{
     }
 
     show(message=null,type=null){
-        if(type) this.setAttribute("type",(typeof type==="string"?type:type.name)||"info");
+        if(!message || type==null) return this.hidden();
+        if(type) this.setAttribute("type",(typeof type==="string"?type:type.name)||ArthaMessage.TYPE.INFO.name);
         if(message) this.innerHTML=message;
         Util.modal(this,true);
     }

package/src/components/loaders/LoaderBase.js

@@ -0,0 +1,30 @@
+import Util  from "../../core/Util.js";
+
+export default class LoaderBase{
+
+    constructor(type,text){
+        this.type=type;
+        this.text=text;
+    }
+
+    renderType(){
+        return Util.createElement('div',(div)=>{
+            div.classList.add('loader-content');
+        });
+    }
+
+    renderLoader=(loader)=>{
+        loader.appendChild(document.createElement('div'));
+    }
+
+    renderText(){
+        return Util.createElement('span',this.text);
+    }
+
+    render(){
+        let loader=this.renderType();
+        this.renderLoader(loader);
+        return [loader,this.renderText()];
+    }
+
+}

package/src/components/loaders/LoaderDots.js

@@ -0,0 +1,11 @@
+import LoaderBase from './LoaderBase.js';
+
+export default class LoaderDots extends LoaderBase{
+
+    renderLoader=(loader)=>{
+        loader.appendChild(document.createElement('div'));
+        loader.appendChild(document.createElement('div'));
+        loader.appendChild(document.createElement('div'));
+    };
+
+}

package/src/components/loaders/LoaderRing.js

@@ -0,0 +1,5 @@
+import LoaderBase from './LoaderBase.js';
+
+export default class LoaderRing extends LoaderBase{
+
+}

package/src/core/EventBus.js

@@ -1,33 +1,122 @@
 const EVENT_BUS=new EventTarget();
 
 export default class EventBus{
+
+    static debug=false;
+    static listeners=new Map();
+    static any_listeners=new Set();
     
     // Emitir evento
     static emit(name,data){
+        if(this.debug){
+            try{
+                console.log(`[EventBus] emit -> ${name}`,structuredClone(data));
+            }catch(ex){
+                console.log(`[EventBus] emit -> ${name}`,data);
+            }
+        }
+        this.any_listeners.forEach(cb=>{
+            try{
+                cb(name,data);
+            }catch(ex){
+                console.error(`[EventBus error] ${name}`,ex);
+            }
+        });
         EVENT_BUS.dispatchEvent(new CustomEvent(name,{detail:data}));
     }
 
+    // Emitir y esperar promesa (async listeners)
+    static emitAsync(name,data){
+        this.any_listeners.forEach(cb=>{
+            try{
+                cb(name,data);
+            }catch(ex){
+                console.error(`[EventBus error] ${name}`,ex);
+            }
+        });
+        const listeners=this.listeners.get(name)||[];
+        const results=listeners.map(async({callback})=>{
+            try{
+                return await callback(data);
+            }catch(ex){
+                console.error(`[EventBus error] ${name}`,ex);
+                return null;
+            }
+        });
+        return Promise.all(results);
+    }
+
     // Escuchar evento
     static on(name,callback){
         const handler=(evt)=>{
             callback(evt.detail);
         };
-        EVENT_BUS.addEventListener(name,callback);
-        return ()=>EVENT_BUS.removeEventListener(name,handler);
+        EVENT_BUS.addEventListener(name,handler);
+        if(!this.listeners.has(name)){
+            this.listeners.set(name,[]);
+        }
+        this.listeners.get(name).push({callback,handler});
+        return ()=>this.off(name,callback);
     }
 
     // Escucha una sola vez
     static once(name,callback){
         const handler=(evt)=>{
             callback(evt.detail);
-            EVENT_BUS.removeEventListener(name,handler);
+            this.off(name,callback);
         };
-        EVENT_BUS.addEventListener(name,callback);
+        EVENT_BUS.addEventListener(name,handler,{once:true});
+        // Guardar referencia
+        if(!this.listeners.has(name)){
+            this.listeners.set(name,[]);
+        }
+        this.listeners.get(name).push({callback,handler});
+    }
+
+    // Escuchar todos los eventos
+    static onAny(callback){
+        this.any_listeners.add(callback);
+        return ()=>this.any_listeners.delete(callback);
     }
 
     // Remover listener manualmente
     static off(name,callback){
-        EVENT_BUS.removeEventListener(name,callback);
+        if(!this.listeners.has(name)) return;
+        const arr=this.listeners.get(name);
+        const filtered=arr.filter(item=>{
+            if(item.callback===callback){
+                EVENT_BUS.removeEventListener(name,item.handler);
+                return false;
+            }
+            return true;
+        });
+        if(filtered.length!==arr.length){
+            this.listeners.set(name,filtered);
+        }
+        if(filtered.length===0){
+            this.listeners.delete(name);
+        }
+    }
+
+    // Limpiar todos los listeners de un evento
+    static clean(name){
+        if(!this.listeners.has(name)) return;
+        const arr=this.listeners.get(name);
+        arr.forEach(({handler})=>{
+            EVENT_BUS.removeEventListener(name,handler);
+        });
+        this.listeners.delete(name);
+    }
+
+    // Limpiar todo
+    static clearAll(){
+        this.listeners.forEach((arr,name)=>{
+            arr.forEach(({handler})=>{
+                EVENT_BUS.removeEventListener(name,handler);
+            });
+        });
+        this.listeners.clear();
+        this.any_listeners.clear();
     }
 
 }

package/src/core/TaskQueue.js

@@ -1,9 +1,13 @@
-import Config from "./Config.js";
 import Util from "./Util.js";
 import ArthaMessage from "../components/artha-message.js";
 
 export default class TaskQueue{
     
+    static defaults={
+        title:"Petición en proceso...",
+        close:false,
+        message:null
+    };
     static INSTNACE=null;
 
     static singleton(){
@@ -50,7 +54,7 @@ class TaskQueueItem{
     constructor(id,callback,options){
         this.id=id;
         this.callback=callback;
-        options={...Config.get("task_queue"),...options};
+        options={...TaskQueue.defaults,...options};
         const {
             title,
             close,
@@ -127,20 +131,21 @@ class TaskQueueItem{
             }
         }
         message=message||json.message||"Operación completada";
-        if(message){
-            this.message_element?.show(message,json?.status??null);
-        }
         // Validar respuesta http
         if(Util.withinRange(data.status,200,299)){
-            if(!message){
+            if(message){
+                this.message_element?.show(message,json?.status??null);
+            }else{
                 this.message_element?.success("Operación completada");
             }
-            this.status="success";
+            this.status=json?.status||"success";
         }else{
-            if(!message){
+            if(message){
+                this.message_element?.show(message,json?.status??null);
+            }else{
                 this.message_element?.error("Error en la respuesta del servidor");
             }
-            this.status="error";
+            this.status=json?.status||"error";
             this.onFinalize();
             return;
         }

package/src/core/Util.js

@@ -1,6 +1,13 @@
-import Config from "./Config.js";
-
 export default class Util{
+
+    static defaults={
+        locale:"es-MX",
+        currency:"MXN",
+        money:{
+            style:"currency",
+            digits:2
+        }
+    };
     
     static getMeta(name){
         const meta=document.querySelector(`meta[name="${name}"]`);
@@ -37,21 +44,19 @@ export default class Util{
 
     static formatMoney(value,options={}){
         const {
-            locale=Config.get("locale"),
-            currency=Config.get("currency"),
-            digits=Config.get("money.digits")
+            locale=this.defaults.locale,
+            currency=this.defaults.currency,
+            digits=this.defaults.money.digits,
+            style=this.defaults.money.style
         }=options;
         value=value.toString();
-        if(value.endsWith(".") && !add_decimals){
-            add_decimals=true;
-        }
         let amount=Number(value.replace(/[^0-9.]/g,""));
         if(isNaN(amount)){
             return value;
         }
         let minimum=0;
         return new Intl.NumberFormat(locale,{
-            style:"currency",
+            style:style,
             currency,
             minimum,
             digits
@@ -68,9 +73,7 @@ export default class Util{
 
     static createElement(type,value=null,options={}){
         const el=document.createElement(type,options);
-        if(value!==null){
-            return el;
-        }
+        if(value===null) return el;
         if(Array.isArray(value)){
             value.forEach((item)=>{
                 el.appendChild(item); 

package/src/core/XHR.js

@@ -1,10 +1,34 @@
-import Config from './Config.js';
 import Util from './Util.js';
 
 export default class XHR{
 
+    static defaults={
+        method:"GET",
+        url:null,
+        uri:"",
+        headers:{},
+        data:{},
+        query:{},
+        files:{},
+        response_type:"json",
+        with_credentials:false,
+        timeout:0,
+        retry:false,
+        retry_delay:5000,
+        transformResponse:(xhr)=>{
+            return xhr.response;
+        },
+        onLoad:()=>{},
+        onData:()=>{},
+        onError:()=>{},
+        onTimeout:()=>{},
+        onProgress:()=>{},
+        onAbort:()=>{},
+        onAction:()=>{},
+    };
+
     static request(options){
-        options={...Config.get("xhr"),...options};
+        options={...this.defaults,...options};
         const {
             method,
             url,
@@ -18,6 +42,7 @@ export default class XHR{
             timeout,
             retry,
             retry_delay,
+            transformResponse,
             onLoad,
             onData,
             onError,
@@ -26,6 +51,14 @@ export default class XHR{
             onAbort,
             onAction
         }=options;
+        const safeTransform=(xhr)=>{
+            try{
+                return transformResponse(xhr);
+            }catch(ex){
+                console.error("transformResponse error:",ex);
+                return xhr.response;
+            }
+        };
         url??="/"+uri;
         const xhr=new XMLHttpRequest();
         const query_string=Object.keys(query).length?"?"+Object.entries(query)
@@ -71,35 +104,37 @@ export default class XHR{
         xhr.addEventListener("load",()=>{
             onLoad(xhr);
             if(Util.withinRange(xhr.status,200,299)){
-                onData(xhr,xhr.response);
+                onData(xhr,safeTransform(xhr));
             }else{
-                onError(xhr.response);
+                onError(safeTransform(xhr));
             }
         });
 
         // Error
         xhr.addEventListener("error",()=>{
+            const retry_options={...options};
             if(retry){
                 setTimeout(()=>{
-                    XHR.request(options);
+                    XHR.request(retry_options);
                 },retry_delay);
             }
-            onError(xhr.response);
+            onError(safeTransform(xhr));
         });
 
         // Aborto
         xhr.addEventListener("abort",()=>{
-            onAbort(xhr.response);
+            onAbort(safeTransform(xhr));
         });
 
         // Tiempo de espera
         xhr.addEventListener("timeout",()=>{
+            const retry_options={...options};
             if(retry){
                 setTimeout(()=>{
-                    XHR.request(options);
+                    XHR.request(retry_options);
                 },retry_delay);
             }
-            onTimeout(xhr.response);
+            onTimeout(safeTransform(xhr));
         });
 
         // Progreso

package/src/scss/colors.scss

@@ -6,4 +6,8 @@ $msg-text-info-color: #3a87ad;
 $msg-background-error-color: #f2dede;
 $msg-background-success-color: #dff0d8;
 $msg-background-warning-color: #fcf8e3;
-$msg-background-info-color: #d9edf7;
+$msg-background-info-color: #d9edf7;
+
+$loader-primary-color: #3b82f6;
+$loader-secondary-color: #93c5fd;
+$loader-muted-color: #5b6e8c;

package/src/scss/loader.scss

@@ -0,0 +1,70 @@
+@use './colors.scss' as *;
+
+artha-loader{
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+
+    .loader-content{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+    }
+    &[type="dots"]{
+        .loader-content{
+
+            >div{
+                width: 10px;
+                height: 10px;
+                background-color: $loader-primary-color;
+                border-radius: 50%;
+                animation: dot 1.2s infinite ease-in-out;
+
+                &:nth-of-type(1){
+                    animation-delay: 0s;
+                }
+                &:nth-of-type(2){
+                    animation-delay: 0.2s;
+                }
+                &:nth-of-type(3){
+                    animation-delay: 0.4s;
+                }
+            }
+        }
+    }
+    &[type="ring"]{
+        .loader-content{
+
+            >div{
+                width: 32px;
+                height: 32px;
+                border: 3px solid $loader-secondary-color;
+                border-top-color: $loader-primary-color;
+                border-radius: 50%;
+                animation: ring 0.8s linear infinite;
+            }
+        }
+    }
+    span{
+        font-size: 1rem;
+        color: $loader-muted-color;
+    }
+}
+
+@keyframes dot{
+    0%,100%{
+        transform: scale(0.8);
+        opacity: 0.4;
+    }
+    50%{
+        transform: scale(1.2);
+        opacity: 1;
+    }
+}
+
+@keyframes ring{
+    to{
+        transform: rotate(360deg);
+    }
+}

package/src/scss/main.scss

@@ -1 +1,2 @@
 @use './message.scss' as *;
+@use './loader.scss' as *;

package/src/scss/message.scss

@@ -8,19 +8,19 @@ artha-message{
     cursor: default;
 
     &[type="error"]{
-        background-color: $msg_background_error_color;
-        color: $msg_text_error_color;
+        background-color: $msg-background-error-color;
+        color: $msg-text-error-color;
     }
     &[type="success"]{
-        background-color: $msg_background_success_color;
-        color: $msg_text_success_color;
+        background-color: $msg-background-success-color;
+        color: $msg-text-success-color;
     }
     &[type="warning"]{
-        background-color: $msg_background_warning_color;
-        color: $msg_text_warning_color;
+        background-color: $msg-background-warning-color;
+        color: $msg-text-warning-color;
     }
     &[type="info"]{
-        background-color: $msg_background_info_color;
-        color: $msg_text_info_color;
+        background-color: $msg-background-info-color;
+        color: $msg-text-info-color;
     }
 }

package/src/core/Config.js

@@ -1,47 +0,0 @@
-const DEFAULT_CONFIG={
-    locale:"es-MX",
-    currency:"MXN",
-    money:{
-        digits:2
-    },
-    xhr:{
-        method:"GET",
-        url:null,
-        uri:"",
-        headers:{},
-        data:{},
-        query:{},
-        files:{},
-        response_type:"json",
-        with_credentials:false,
-        timeout:0,
-        retry:false,
-        retry_delay:5000,
-        onLoad:()=>{},
-        onData:()=>{},
-        onError:()=>{},
-        onTimeout:()=>{},
-        onProgress:()=>{},
-        onAbort:()=>{},
-        onAction:()=>{},
-    },
-    task_queue:{
-        title:"Petición en proceso...",
-        close:false,
-        message:null
-    }
-};
-
-export default class Config{
-
-    static SETTINGS={...DEFAULT_CONFIG};
-
-    static set(options){
-        this.SETTINGS={...this.SETTINGS,...options};
-    }
-
-    static get(path,def=null){
-        return path.split(".").reduce((o,p)=>o?o[p]:def,this.SETTINGS);
-    }
-
-}