@dogiloki/artha-js 1.0.0 → 1.2.1

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.1",
   "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{
+
+}