@dogiloki/artha-js 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Julio Villanueva
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# artha-js

package/dist/artha.min.css

@@ -0,0 +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 */

package/dist/artha.min.css.map

@@ -0,0 +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"}

package/dist/artha.min.js

@@ -0,0 +1,32 @@
+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 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);
+    }
+};
+
+Window.Artha=Artha;
+
+export default Artha;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@dogiloki/artha-js",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/artha.min.js",
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "sass --watch src/scss/main.scss:dist/artha.css",
+    "build": "sass src/scss/main.scss dist/artha.min.css --style=compressed"
+  },
+  "keywords": [
+    "task-queue",
+    "javascript",
+    "notifications",
+    "ui"
+  ],
+  "author": "dogiloki",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dogiloki/artha-js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dogiloki/artha-js/issues"
+  },
+  "homepage": "https://github.com/dogiloki/artha-js#readme"
+}

package/src/components/artha-container.js

@@ -0,0 +1,402 @@
+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{
+
+    constructor(){
+        super();
+
+        this.onRenderItem=(element,data)=>{};
+        this.onRenderItemFill=(element,data,fill_element,fill_data)=>{};
+        this.onRenderItemIter=(element,data,iter_element,iter_data)=>{};
+
+        this.task_queue=TaskQueue.singleton();
+        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;
+
+        // Loader
+        this.loader_container=this._createLoader();
+
+        // Contenido
+        this.content=this.querySelector(':scope > dynamic-content') || this.appendChild(document.createElement('dynamic-content'));
+        this._content=this.content.children[0];
+
+        // Input de búsqueda
+        this.input_search=this.querySelector("input-search");
+        if(this.input_search){
+            this.input_search.addEventListener('search',(evt)=>this._handleSearch(evt));
+            this.refresh(this.input_search.value);
+        }else{
+            this.refresh();
+        }
+    }
+
+    _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';
+            }));
+        });
+    }
+
+    _handleSearch(evt){
+        if(this.action){
+            this.refresh(evt.detail.query);
+        }else{
+            const search=evt.detail.query?.toLowerCase()??'';
+            for(const item of this.items??[]){
+                Util.modal(item,item.textContent.toLowerCase().includes(search));
+            }
+        }
+    }
+
+    // value - getter/setter
+    get value(){
+        if(!this.selectable) return null;
+        return this.multiple?this.selection_store.toValues():this.selection_store.toValues()[0]??null;
+    }
+
+    set value(values){
+        if(!this.selectable) return;
+        if(!Array.isArray(values)) values=[values];
+
+        this.selection_store.clear();
+        let count=0;
+        for(const item of this.items){
+            const id=item.dataset.id;
+            if(values.includes(id)){
+                this.selection_store.add(id,item,item.data);
+                this.classList.add('selected');
+                if(!this.multiple && ++count>=1) break;
+            }else{
+                item.classList.remove('selected');
+            }
+        }
+    }
+
+    connectedCallback(){
+        const channels=(this.getAttribute('refresh-on')||'').split(',').map(c=>c.trim()).filter(c=>c.length>0);
+        this._refresh_listeners=[];
+        for(const channel of channels){
+            const listener=(evt)=>evt?.detail?this.refreshWithData(evt.detail):this.refresh();
+            EventBus.on(channel,listener);
+            this._refresh_listeners.push({channel,listener});
+        }
+    }
+
+    disconnectedCallback(){
+        for(const {channel,listener} of this._refresh_listeners??[]){
+            EventBus.off(channel,listener);
+        }
+    }
+
+    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)=>{
+            XHR.request({
+                url:this.action,
+                method:this.method,
+                headers:{
+                    'Accept':'application/json'
+                },
+                response_type:this.response_type,
+                query:Object.keys(query).length?query:{},
+                onLoad:(xhr)=>{
+                    this.dispatchEvent(new CustomEvent('load',{detail:xhr}));
+                },
+                onData:(xhr,data)=>{
+                    // Respuesta procesada en en formato json
+                    task.resolve(xhr,(json)=>{
+                        this.dispatchEvent(new CustomEvent('resolve',{detail:json}));
+                        if(json.message){
+                            this.message?.show(json.message,json.status);
+                        }
+                        this.render(json.data);
+                    });
+                },
+                onError:(err)=>{
+                    this.message?.error(err??"Error de conexión");
+                    task.onFinalize();
+                }
+            });
+        },{
+            message:this.message
+        });
+    }
+
+    refresh(search=null){
+        this.loader_container.remove();
+        if(this.template){
+            this.content.innerHTML="";
+            if(this._content) this.content.appendChild(this._content);
+            this.content.appendChild(this.loader_container);
+        }
+        this.getData(search);
+    }
+
+    refreshWithData(data){
+        for(const child of this.content.querySelectorAll('[data-id]')){
+            if(child.dataset.id==data.id) this.renderItem(data,true,child);
+        }
+    }
+
+    render(results,refresh=false,refresh_children=true){
+        if(refresh) this.refresh();
+        results=Array.isArray(results)?results:[results];
+        this.data=results;
+        this.items=[];
+        this.loader_container.remove();
+        for(const data of results) this.renderItem(data,refresh_children);
+        this.dispatchEvent(new CustomEvent('dynamic-content-loaded',{detail:results}));
+    }
+
+    renderItem(data,refresh_children=true,update=null){
+        const template=this.template?(this.template.tagName==='TEMPLATE'?this.template.content.cloneNode(true):this.template.cloneNode(true)):this;
+        const element=update?update:(this.template?template.children[0]:this);
+
+        const items=this._findWires(update?element:template);
+        let index=0;
+
+        for(const item of items){
+            const wires=item.getAttribute("data-wire").split(",");
+            for(let wire of wires){
+                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";
+                const is_value_array=attrib_json?.endsWith("[]");
+
+                if(item instanceof ArthaContainer) item.render(value,refresh_children);
+                else if(is_value_array) this._fillArray(item,append,chooser);
+                else this._setValue(item,attrib_element,value,append,chooser);
+            }
+        }
+
+        if(!update){
+            this.items.push(element);
+            element.data=data;
+            element.dataset.id=data.id;
+            if(this.selectable) this._bindSelectable(element,data);
+        }
+
+        this.onRenderItem(element,data);
+        if(this.template && !update) this.content.appendChild(element);
+        this.dispatchEvent(new CustomEvent('item-rendered',{detail:{item:element,data,index}}));
+        index++;
+    }
+
+    _fillArray(item,data,value){
+        const fill_template=item.children[0].cloneNode(true);
+        item.innerHTML="";
+        for(const fill of value??[]){
+            const node=fill_template.cloneNode(true);
+            const fill_elements=node.querySelectorAll("[fillable]");
+            const iter_elements=node.querySelectorAll("[iterable]");
+            fill_elements.forEach((element)=>{
+                this.onRenderItemFill(item,data,element,fill);
+                element.textContent=fill;
+                element.value=fill;
+            });
+            iter_elements.forEach((element)=>{
+                this.onRenderItemIter(item,data,element,fill);
+            });
+            item.appendChild(node);
+        }
+    }
+
+    _setValue(item,attrib_element,value,append,chooser){
+        if(attrib_element){
+            if(append){
+                switch(attrib_element){
+                    case 'textcontent': value=item.textContent+value; break;
+                    case 'innerhtml': value=item.innerhtml+value; break;
+                    default: value=item.getAttribute(attrib_element)+value;
+                }
+            }
+            switch(attrib_element.toLowerCase()){
+                case 'textcontent': item.textContent=value; break;
+                case 'innerhtml': item.innerhtml=value; break;
+                case 'boolean':{
+                    if(chooser){
+                        let applied=false;
+                        const templates=item.querySelectorAll('template');
+                        for(const template of templates){
+                            if(template.getAttribute('data-chooser-value')==value){
+                                item.innerHTML="";
+                                item.appendChild(template.content.cloneNode(true));
+                                applied=true;
+                                break;
+                            }
+                        }
+                        if(!applied){
+                            const template=item.querySelector('template[data-chooser-default]')?.content?.cloneNode(true)??document.createElement('span');
+                            item.innerHTML="";
+                            item.appendChild(template);
+                        }
+                    }else{
+                        item.innerHTML="";
+                        item.appendChild(Util.createElement('span',(span)=>{
+                            span.classList.add('check-cross');
+                            if(value){
+                                span.classList.add('check-cross-yes');
+                                span.textContent="✔";
+                            }else{
+                                span.classList.add('check-cross-no');
+                                span.textContent="✘";
+                            }
+                        }));
+                    }
+                    break;
+                }
+                default: this.setAttribute(attrib_element,value);
+            }
+        }else{
+            if(append) value=item.textContent+value;
+            item.textContent=value;
+        }
+    }
+
+    _bindSelectable(element,data){
+        const id=element.dataset.id;
+        element.addEventListener('click',(evt)=>{
+            if(this.selection_store.has(id)){
+                const selection=this.selection_store.remove(id);
+                this.dispatchEvent(new CustomEvent('item-deselected',{detail:selection}));
+            }else{
+                if(!this.multiple) this.reset();
+                const selection=this.selection_store.add(id,element,data);
+                this.dispatchEvent(new CustomEvent('item-selected',{detail:selection}));
+            }
+            element.classList.toggle('selected');
+        });
+        if(this.selection_store.has(id)) element.classList.add('selected');
+    }
+
+    _findWires(root){
+        const result=[];
+        for(const child of root.children){
+            if(child instanceof ArthaContainer && child.hasAttribute('data-ignore-wire')) continue;
+            if(child.hasAttribute('data-wire')) result.push(child);
+            result.push(...this._findWires(child));
+        }
+        return result;
+    }
+
+    selection(){
+        return this.selection_store;
+    }
+
+    reset(){
+        this.selection_store.clear();
+        for(const item of this.items){
+            item.classList.remove('selected');
+        }
+    }
+
+}
+
+class SelectionStore{
+
+    constructor(){
+        this.values=new Set();
+        this.elements=new Map();
+        this.data=new Map();
+    }
+
+    add(value,element,data){
+        this.values.add(value);
+        this.elements.set(value,element);
+        this.data.set(value,data);
+        return {
+            value,element,data
+        };
+    }
+
+    remove(value){
+        const sel={value,element:this.elements.get(value),data:this.data.get(value)};
+        this.values.delete(value);
+        this.elements.delete(value);
+        this.data.delete(value);
+        return sel;
+    }
+
+    clear(){
+        this.values.clear();
+        this.elements.clear();
+        this.data.clear();
+        return this;
+    }
+
+    has(value){
+        return this.values.has(value);
+    }
+
+    toValues(){
+        return Array.from(this.values);
+    }
+
+    toElements(){
+        return Array.from(this.elements);
+    }
+
+    toData(){
+        return Array.from(this.data);
+    }
+
+    toArray(){
+        return Array.from(this.values).map(v=>({
+            value:v,
+            element:this.elements.get(v),
+            data:this.data.get(v)
+        }));
+    }
+
+}

package/src/components/artha-form.js

@@ -0,0 +1,146 @@
+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{
+    
+    constructor(){
+        super();
+        this.task_queue=TaskQueue.singleton();
+        this.response_type=this.getAttribute('response-type')??'json';
+        this.disable_submit=this.hasAttribute('disable-submit');
+        this.message=this.querySelector('artha-message')??this.querySelector(this.getAttribute('message-target'))??null;
+        if(!this.message){
+            this.message=Util.createElement('artha-message');
+            this.appendChild(this.message);
+        }
+        this.element_inputs=[];
+        this.ignored_input=[];
+
+        // Cargar inputs iniciales
+        this.loadInputs();
+
+        // Interceptar submit
+        this.addEventListener('submit',(evt)=>{
+            evt.preventDefault();
+            if(!this.disable_submit) this.submit();
+        });
+
+        // Tecla enter
+        this.addEventListener('keydown',(evt)=>{
+            if(this.disable_submit && evt.key==='Enter' && evt.target instanceof HTMLInputElement){
+                evt.preventDefault();
+            }
+        });
+
+        this._bindEvents();
+    }
+
+    _bindEvents(){
+        // Botones
+        this.querySelectorAll('button').forEach((btn)=>{
+            switch(btn.getAttribute('type')){
+                case 'submit': btn.addEventListener('click',(evt)=>this.submit()); break;
+                case 'reset': btn.addEventListener('click',(evt)=>this.reset()); break;
+                default: btn.addEventListener('click',(evt)=>this.submit());
+            }
+        });
+    }
+
+    // Cargar inputs dinámicos
+    loadInputs(selector="input,select,textarea"){
+        this.element_inputs=[];
+        this.querySelectorAll(selector).forEach((element)=>{
+            const name=element.getAttribute('name');
+            if(name){
+                this[name]=element;
+                this.element_inputs.push(element);
+            }
+        });
+    }
+
+    // Obtener valor de un input por el atributo name
+    getValue(name){
+        const element=this[name]??this.querySelector(`[name="${name}"]`);
+        return element?(element.type==='checkbox'?(element.checked?1:0):element.value):null;
+    }
+    input(name){
+        const element=this.querySelector(`[name="${name}"]`);
+        if(element!=null && !(name in this)){
+            this[name]=element;
+        }
+        return element;
+    }
+
+    // Reset general del formulario
+    reset(reset_message=true){
+        this.element_inputs.forEach((element)=>{
+            if(element.type==='checkbox') element.checked=false;
+            else element.value='';
+        });
+        if(reset_message) this.resetMessage();
+    }
+
+    // Reset al mensaje (ocultar)
+    resetMessage(){
+        if(this.message) this.message.hidden();
+    }
+
+    // Validar formulario
+    checkValidity(){
+        let valid=true;
+        for(const element of this.element_inputs){
+            if(typeof element.checkValidity==='function' && !element.checkValidity()){
+                valid=false;
+                break;
+            }
+        }
+        return valid;
+    }
+
+    // Enviar formulario
+    submit(){
+        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');
+        this.task_queue.loadTask(`form-${id}`,null,(task)=>{
+            XHR.request({
+                url:action,
+                method:method,
+                data:form_data,
+                response_type:this.response_type,
+                onLoad:(xhr)=>{
+                    this.dispatchEvent(new CustomEvent('load',{detail:xhr}));
+                },
+                onData:(xhr,data)=>{
+                    // Respuesta procesada en formato json
+                    task.resolve(xhr,(json)=>{
+                        this.dispatchEvent(new CustomEvent('resolve',{detail:json}));
+                        this.fillFromJson(json.data??{},false);
+                    });
+                },
+                onError:(err)=>{
+                    this.message.error(err??"Error de conexión");
+                    task.onFinalize();
+                }
+            })
+        },{
+            message:this.message
+        });
+    }
+
+    // Llenar inputs desde un JSON
+    fillFromJson(json,reset=true){
+        if(reset) this.reset(false);
+        for(const key in json){
+            const element=this[key]??this.querySelector(`[name="${key}"]`);
+            if(element) element.value=json[key];
+        }
+    }
+
+}

package/src/components/artha-message.js

@@ -0,0 +1,61 @@
+import Config from "../core/Config.js";
+import Util from "../core/Util.js";
+
+export default class ArthaMessage extends HTMLElement{
+
+    static TYPE=Object.freeze({
+        ERROR:{
+            code:-1,
+            name:"error"
+        },
+        INFO:{
+            code:0,
+            name:"info"
+        },
+        SUCCESS:{
+            code:1,
+            name:"suscess"
+        },
+        WARNING:{
+            code:2,
+            name:"warning"
+        },
+        
+    });
+
+    constructor(){
+        super();
+    }
+
+    connectedCallback(){
+        this.type=this.getAttribute("type")||"info";
+        this.hidden();
+    }
+
+    error(message=null){
+        this.show(message,ArthaMessage.TYPE.ERROR);
+    }
+
+    info(message=null){
+        this.show(message,ArthaMessage.TYPE.INFO);
+    }
+
+    success(message=null){
+        this.show(message,ArthaMessage.TYPE.SUCCESS);
+    }
+
+    warning(message=null){
+        this.show(message,ArthaMessage.TYPE.WARNING);
+    }
+
+    show(message=null,type=null){
+        if(type) this.setAttribute("type",(typeof type==="string"?type:type.name)||"info");
+        if(message) this.innerHTML=message;
+        Util.modal(this,true);
+    }
+
+    hidden(){
+        Util.modal(this,false);
+    }
+
+}

package/src/core/Config.js

@@ -0,0 +1,47 @@
+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);
+    }
+
+}

package/src/core/EventBus.js

@@ -0,0 +1,33 @@
+const EVENT_BUS=new EventTarget();
+
+export default class EventBus{
+    
+    // Emitir evento
+    static emit(name,data){
+        EVENT_BUS.dispatchEvent(new CustomEvent(name,{detail:data}));
+    }
+
+    // Escuchar evento
+    static on(name,callback){
+        const handler=(evt)=>{
+            callback(evt.detail);
+        };
+        EVENT_BUS.addEventListener(name,callback);
+        return ()=>EVENT_BUS.removeEventListener(name,handler);
+    }
+
+    // Escucha una sola vez
+    static once(name,callback){
+        const handler=(evt)=>{
+            callback(evt.detail);
+            EVENT_BUS.removeEventListener(name,handler);
+        };
+        EVENT_BUS.addEventListener(name,callback);
+    }
+
+    // Remover listener manualmente
+    static off(name,callback){
+        EVENT_BUS.removeEventListener(name,callback);
+    }
+
+}

package/src/core/TaskQueue.js

@@ -0,0 +1,171 @@
+import Config from "./Config.js";
+import Util from "./Util.js";
+import ArthaMessage from "../components/artha-message.js";
+
+export default class TaskQueue{
+    
+    static INSTNACE=null;
+
+    static singleton(){
+        if(!this.INSTNACE){
+            this.INSTNACE=new TaskQueue();
+        }
+        return this.INSTNACE;
+    }
+
+    constructor(){
+        this.queues=new Map();
+    }
+
+    // Crear una nueva tarea
+    loadTask(id,title,callback,options={}){
+        if(typeof options!=='object'){
+            options={close:options};
+        }
+        if(this.queues.has(id)){
+            alert("La petición ya está en proceso... Por favor espere.");
+            return null;
+        }
+        if(title) options.title=title;
+        const task=new TaskQueueItem(id,callback,options);
+        task.onFinalize=(remove=false)=>{
+            if(remove && !task.finalized){
+                task.message_element.warning(task.options.title);
+                return;
+            }
+            task.finalized=true;
+            this.queues.delete(id);
+            if(task.options.close || remove){
+                setTimeout(()=>task.removeElement(),task.options.close?2500:0);
+            }
+        };
+        this.queues.set(id,task);
+        return task;
+    }
+
+}
+
+class TaskQueueItem{
+
+    constructor(id,callback,options){
+        this.id=id;
+        this.callback=callback;
+        options={...Config.get("task_queue"),...options};
+        const {
+            title,
+            close,
+            message
+        }=options;
+        this.options=options;
+        this.message_element=options.message instanceof ArthaMessage?options.message:document.querySelector("#"+options.message)??null;
+        this.resolve_callback=null;
+        this.reject_callback=null;
+        this.finalized=false;
+        this.status="pending";
+        this.message_element?.warning(options.title);
+        this.onFinalize=()=>{};
+
+        // Promesa
+        this.promise=new Promise((resolve,reject)=>{
+            this._resolve=resolve;
+            this._reject=reject;
+        });
+
+        // Ejecutar callback
+        callback(this);
+
+        // Resolver
+        this.promise.then((data)=>{
+            this.handleResponse(data);
+        });
+
+        // Error
+        this.promise.catch((error)=>{
+            this.message_element?.error(error?.message||String(error));
+            this.status="error";
+            this.reject_callback?.(error);
+            this.onFinalize();
+        });
+    }
+
+    // Procesar respuesta
+    handleResponse(data){
+        if(!data){
+            this.message_element?.error("Error en la respuesta del servidor");
+            this.status="error";
+            this.onFinalize();
+            return;
+        }
+        let response=data?.response??data;
+
+        // Blob para descargar
+        if(response instanceof Blob){
+            this.status="success";
+            this.resolve_callback?.(response);
+            this.onFinalize();
+            return;
+        }
+        let json;
+        try{
+            json=(typeof response==='string')?JSON.parse(response):response;
+            if(!json || typeof json!=='object'){
+                throw new Error("Respuesta inválida del servidor");
+            }
+        }catch(ex){
+            this.message_element?.error(ex.message||String(ex));
+            this.status="error";
+            this.onFinalize();
+            return;
+        }
+        // Obtener mensaje
+        let message=null;
+        if(json.errors && typeof json.errors==='object'){
+            const values=Object.values(json.errors);
+            if(values.length>0){
+                const first=values[0];
+                message=Array.isArray(first)?first[0]:first;
+            }
+        }
+        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){
+                this.message_element?.success("Operación completada");
+            }
+            this.status="success";
+        }else{
+            if(!message){
+                this.message_element?.error("Error en la respuesta del servidor");
+            }
+            this.status="error";
+            this.onFinalize();
+            return;
+        }
+        this.resolve_callback?.(json);
+        this.onFinalize();
+    }
+
+    // Cancelar si usa XHR
+    cancel(){
+        if(this.xhr) this.xhr.abort();
+    }
+
+    // Resolver manualmente
+    resolve(data,callback){
+        this.resolve_callback=callback;
+        this._resolve(data);
+    }
+
+    // Recahzar manualmente
+    reject(error){
+        this._reject(error);
+    }
+
+    removeElement(){
+
+    }
+
+}

package/src/core/Util.js

@@ -0,0 +1,86 @@
+import Config from "./Config.js";
+
+export default class Util{
+    
+    static getMeta(name){
+        const meta=document.querySelector(`meta[name="${name}"]`);
+        return meta?meta.getAttribute("content"):null;
+    }
+
+    static getValueByPath(obj,path,default_value=null){
+        return path.split(".").reduce((o,p)=>o?o[p]:default_value,obj);
+    }
+
+    static modal(content,visible=-1){
+        content.style.display=(visible==-1)?
+            (content.style.display=="none"?"block":"none")
+            :(visible?"block":"none");
+        if(visible==-1){
+            content.classList.toggle("hidden");
+            if(content.hasAttribute("hidden")){
+                content.removeAttribute("hidden");
+            }
+        }else{
+            if(visible){
+                content.classList.remove("hidden");
+                content.removeAttribute("hidden");
+            }else{
+                content.classList.add("hidden");
+                content.setAttribute("hidden","");
+            }
+        }
+    }
+
+    static modalById(id,visible=-1){
+        Util.modal(document.getElementById(id),visible);
+    }
+
+    static formatMoney(value,options={}){
+        const {
+            locale=Config.get("locale"),
+            currency=Config.get("currency"),
+            digits=Config.get("money.digits")
+        }=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",
+            currency,
+            minimum,
+            digits
+        }).format(amount);
+    }
+
+    static numberRandom(min,max){
+        return Math.floor(Math.random()*(max-min+1))+min;
+    }
+
+    static withinRange(value,min,max){
+        return value>=min && value<=max;
+    }
+
+    static createElement(type,value=null,options={}){
+        const el=document.createElement(type,options);
+        if(value!==null){
+            return el;
+        }
+        if(Array.isArray(value)){
+            value.forEach((item)=>{
+                el.appendChild(item); 
+            });
+        }else if(typeof value==="function"){
+            value(el);
+        }else{
+            el.textContent=value;
+        }
+        return el;
+    }
+
+}

package/src/core/XHR.js

@@ -0,0 +1,116 @@
+import Config from './Config.js';
+import Util from './Util.js';
+
+export default class XHR{
+
+    static request(options){
+        options={...Config.get("xhr"),...options};
+        const {
+            method,
+            url,
+            uri,
+            headers,
+            data,
+            query,
+            files,
+            response_type,
+            with_credentials,
+            timeout,
+            retry,
+            retry_delay,
+            onLoad,
+            onData,
+            onError,
+            onTimeout,
+            onProgress,
+            onAbort,
+            onAction
+        }=options;
+        url??="/"+uri;
+        const xhr=new XMLHttpRequest();
+        const query_string=Object.keys(query).length?"?"+Object.entries(query)
+        .filter(([_,v])=>v!=null)
+        .map(([k,v])=>`${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&"):"";
+        xhr.open(method,url+query_string,true);
+        xhr.responseType=response_type;
+        xhr.withCredentials=with_credentials;
+        xhr.timeout=timeout;
+
+        // Encabezados
+        const token=Util.getMeta("csrf-token")??Util.getMeta("csrf_token");
+        if(token){
+            xhr.setRequestHeader("X-CSRF-Token",token);
+        }
+        for(let key in headers){
+            xhr.setRequestHeader(key,headers[key]);
+        }
+
+        // Cuerpo
+        let body=null;
+        if(method!=='GET'){
+            const form_data=new FormData();
+            if(token) form_data.append("csrf_token",token);
+            form_data.append("_method",method);
+            for(let key in data){
+                form_data.append(key,data[key]);
+            }
+            for(let key in files){
+                const value=files[key];
+                if(Array.isArray(value) || value instanceof FileList){
+                    for(let index=0; index<value.length; index++){
+                        form_data.append(`${key}[]`,value[index]);
+                    }
+                }else{
+                    form_data.append(key,value);
+                }
+            }
+            body=form_data;
+        }
+
+        // Carga con datos según la respuesta
+        xhr.addEventListener("load",()=>{
+            onLoad(xhr);
+            if(Util.withinRange(xhr.status,200,299)){
+                onData(xhr,xhr.response);
+            }else{
+                onError(xhr.response);
+            }
+        });
+
+        // Error
+        xhr.addEventListener("error",()=>{
+            if(retry){
+                setTimeout(()=>{
+                    XHR.request(options);
+                },retry_delay);
+            }
+            onError(xhr.response);
+        });
+
+        // Aborto
+        xhr.addEventListener("abort",()=>{
+            onAbort(xhr.response);
+        });
+
+        // Tiempo de espera
+        xhr.addEventListener("timeout",()=>{
+            if(retry){
+                setTimeout(()=>{
+                    XHR.request(options);
+                },retry_delay);
+            }
+            onTimeout(xhr.response);
+        });
+
+        // Progreso
+        xhr.addEventListener("progress",(evt)=>{
+            onProgress(evt,evt.loaded,evt.total);
+        });
+
+        // Enviar
+        onAction(xhr);
+        xhr.send(body);
+        return xhr;
+    }
+    
+}

package/src/scss/colors.scss

@@ -0,0 +1,9 @@
+// Colores de ventanas de mensajes
+$msg-text-error-color: #b94a48;
+$msg-text-success-color: #468847;
+$msg-text-warning-color: #c09853;
+$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;

package/src/scss/main.scss

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

package/src/scss/message.scss

@@ -0,0 +1,26 @@
+@use './colors.scss' as *;
+
+artha-message{
+    width: 100%;
+    padding: 10px;
+    text-align: left;
+    font-size: 1em;
+    cursor: default;
+
+    &[type="error"]{
+        background-color: $msg_background_error_color;
+        color: $msg_text_error_color;
+    }
+    &[type="success"]{
+        background-color: $msg_background_success_color;
+        color: $msg_text_success_color;
+    }
+    &[type="warning"]{
+        background-color: $msg_background_warning_color;
+        color: $msg_text_warning_color;
+    }
+    &[type="info"]{
+        background-color: $msg_background_info_color;
+        color: $msg_text_info_color;
+    }
+}