@dogiloki/artha-js 1.0.0 → 1.2.1

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);
-    }
-
-}