cedro 0.1.9 → 0.1.11

package/dist/assets/ui/valuebar.ui.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var o=(e,i,t)=>i in e?d(e,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[i]=t;var h=(e,i,t)=>o(e,typeof i!="symbol"?i+"":i,t);import{DOMcreateElement as u}from"../core/jsxsupport.js";/* empty css                   */import{connectWidgetCallback as g,getOnlyEventProps as c,Widget as l}from"./widget.ui.js";import{Draggable as B}from"./draggable.ui.js";import{normalizeWidget as b}from"./widget.builder.js";import{UID as m}from"../core/uid.js";class v extends l{constructor(t,r="horizontal",a=null){super(t,"div",a);h(this,"orientation");h(this,"value");h(this,"containerBar");h(this,"bar");h(this,"handler");h(this,"draggable");this.containerBar=new l(t+".containerBar","div",this),this.bar=new l(t+".bar","div",this.containerBar),this.handler=new l(t+".handler","div",this),this.addClass("WUIValueBar"),this.containerBar.addClass("WUIValueBarContainer"),this.bar.addClass("WUIValueBarBar"),this.handler.addClass("WUIValueBarHandler"),this.draggable=new B(this.handler,r),this.handler.subscribe({event:"drag",then:(s,n)=>{this.updateValueFromHandlerPosition()}}),this.orientation=r,this.value=10,this.handler.raisteTop()}setValue(t){this.value=t,this.render()}getValue(){return this.value}updateValueFromHandlerPosition(){if(this.orientation==="horizontal"){const t=this.draggable.maxX?this.draggable.maxX:1,r=this.handler.getX()/t;this.value=Math.round(r*100)}else if(this.orientation==="vertical"){const t=this.draggable.maxY?this.draggable.maxY:1,r=this.handler.getY()/t;this.value=Math.round(r*100)}this.render()}render(){if(super.render(),this.orientation==="horizontal"){const a=this.getW()-3,s=this.getH(),n=a*(this.value/100);this.containerBar.setX(0),this.containerBar.setY(s/2-14/2),this.containerBar.setH(14),this.containerBar.setW(a),this.bar.setX(0),this.bar.setY(0),this.bar.setW(n),this.bar.setH(10),this.handler.setX(n-24+2),this.handler.setY(s/2-24/2),this.handler.setWH(24,24),this.draggable.setMinX(0),this.draggable.setMaxX(a-24+2)}else if(this.orientation==="vertical"){const a=this.getH()-3,s=this.getW(),n=a*(this.value/100);this.containerBar.setY(0),this.containerBar.setX(s/2-14/2),this.containerBar.setW(14),this.containerBar.setH(a),this.bar.setX(0),this.bar.setY(0),this.bar.setH(n),this.bar.setW(10),this.handler.setY(n-24+2),this.handler.setX(s/2-24/2),this.handler.setWH(24,24),this.draggable.setMinY(0),this.draggable.setMaxY(a-24+2)}}}const Y=e=>(e.id||(e.id="ValueBar."+m()),g(e.id,c(e)),b(u("div",{id:e.id,"w-valuebar":!0,"w-value":e.value}),e));function H(e,i,t=null){const r=i.getAttribute("w-orientation"),a=i.getAttribute("w-value");let s=r||"horizontal",n=new v(e,s,t);return a&&n.setValue(parseInt(a)),n}export{v as ValueBar,Y as WValueBar,H as createValueBar};

package/dist/assets/ui/vpanel.ui.js

@@ -0,0 +1 @@
+var u=Object.defineProperty;var c=(i,o,t)=>o in i?u(i,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[o]=t;var l=(i,o,t)=>c(i,typeof o!="symbol"?o+"":o,t);import{DOMcreateElement as m}from"../core/jsxsupport.js";import{Draggable as b}from"./draggable.ui.js";/* empty css                 */import{normalizeWidget as C,createWidget as H}from"./widget.builder.js";import{Widget as a,WidgetAlignTypes as f,WidgetTypes as g,connectWidgetCallback as Y,getOnlyEventProps as y}from"./widget.ui.js";const d=4;class S extends a{constructor(t,e=null){super(t,"div",e);l(this,"topContent");l(this,"bottomContent");l(this,"topHeight");l(this,"bottomHeight");l(this,"handler");l(this,"draggable");this.setAlign(f.VERTICAL),this.setType(g.FILL),this.handler=new a(t+".handler","div",null),this.handler.addClass("WUIVPanelHandler"),this.draggable=new b(this.handler,"vertical"),this.draggable.setDraggingClass("WUIVPanelDragging"),this.draggable.setBackgroundCursor("row-resize"),this.handler.subscribe({event:"drag",then:(s,n)=>{this.updateSizeFromHandlerPosition()}}),this.subscribe({event:"mousemove",then:(s,n)=>{this.updateHandlerOpacity(s)}}),this.topContent=null,this.bottomContent=null,this.topHeight=null,this.bottomHeight=null}updateHandlerOpacity(t){const e=this.handler.getY(),s=t.clientY,n=100,h=20,r=Math.abs(s-e);if(r<n&&r>h){const p=1-r/n;this.handler.getBody().style.opacity=p.toString()}else r<h?this.handler.getBody().style.opacity="1":this.handler.getBody().style.opacity="0"}setTop(t,e=null){this.topContent=t,this.topHeight=e,e!==null&&(this.bottomHeight=null,this.topContent.setFixedSize(e)),this.addChild(t);const s=new a("spacer."+Date.now().toString(),"div",null);s.setType(g.FILL),s.setFixedSize(d),this.addChild(s)}setBottom(t,e=null){this.bottomContent=t,this.bottomHeight=e,e!==null&&(this.topHeight=null,this.bottomContent.setFixedSize(e)),this.addChild(t)}updateSizeFromHandlerPosition(){if(this.topHeight!==null){const t=this.topContent?this.topContent.getY(!0):0;this.topHeight=this.handler.getY()-t}else this.bottomHeight!==null&&(this.bottomHeight=this.getH()-this.handler.getY());this.render()}render(){var t,e,s;if(super.render(),this.handler.setH(d),this.handler.setW(this.getW()),this.topHeight!==null){const n=this.topContent?this.topContent.getY(!0):0;this.handler.setY(n+this.topHeight),(t=this.topContent)==null||t.setFixedSize(this.topHeight)}else if(this.bottomHeight!==null){const n=this.bottomContent?this.bottomContent.getY(!0):0;this.handler.setY(n+this.bottomHeight),(e=this.bottomContent)==null||e.setFixedSize(this.bottomHeight)}else{this.topHeight===null&&(this.topHeight=this.getH()/2-d/2);const n=this.topContent?this.topContent.getY(!0):0;this.handler.setY(n+this.topHeight),(s=this.topContent)==null||s.setFixedSize(this.topHeight)}this.handler.setX(this.getX(!0))}free(){var t,e;this.handler.free(),(t=this.topContent)==null||t.free(),(e=this.bottomContent)==null||e.free(),super.free()}}const D=i=>(Y(i.id,y(i)),C(m("div",{"w-vpanel":!0},i.children),i));function E(i,o,t=null){let e=new S(i,t);return o.childNodes.forEach((s,n)=>{const h=H(s);h!==null&&(n===0?e.setTop(h,h.getFixedSize()):n===1&&e.setBottom(h))}),e}export{S as VPanel,D as WVPanel,E as createVPanel};

package/dist/assets/ui/widget.builder.js

@@ -0,0 +1 @@
+import{UID as d}from"../core/uid.js";import{WidgetTypes as l,Widget as b,WidgetAlignTypes as f}from"./widget.ui.js";import{addNewWidget as g}from"./widget.collection.js";import{createTextbox as A}from"./Textbox.ui.js";import{createButton as w}from"./button.ui.js";import{createLabel as x}from"./label.ui.js";import{createContainer as h}from"./container.ui.js";import{createIconButton as p}from"./IconButton.ui.js";import{createImage as y}from"./image.ui.js";import{createCheckbox as T}from"./checkbox.ui.js";import{createRadioButton as I}from"./radiobutton.ui.js";import{createToolbar as N}from"./toolbar.ui.js";import{createProgressBar as z}from"./progressbar.ui.js";import{createValueBar as B}from"./valuebar.ui.js";import{createVPanel as C,VPanel as S}from"./vpanel.ui.js";import{createHPanel as v,HPanel as E}from"./hpanel.ui.js";import{createTab as L,Tabs as P}from"./tabs.ui.js";import{createSwitch as R}from"./switch.ui.js";import{createAccordion as V,Accordion as c}from"./accordion.ui.js";import{createButtonStack as W}from"./buttonstack.ui.js";import{createButtonColor as D}from"./buttonColor.ui.js";import{createButtonMenu as F}from"./buttonmenu.ui.js";import{createIconButtonMenu as k}from"./iconButtonMenu.ui.js";import{createIcon as H}from"./Icon.ui.js";import{createTextarea as M}from"./textarea.ui.js";import{createSelect as O}from"./select.ui.js";import{createDialog as G,Dialog as u}from"./dialog.js";import{createDataGrid as U,DataGrid as o}from"./datagrid.ui.js";function Z(i,r=null,s=!1){if(!i.tagName)return null;let e=null,t={id:i.id?i.id:d(),type:i.getAttribute("w-type")===null?l.FILL:parseInt(i.getAttribute("w-type")),orientation:i.getAttribute("w-orientation")===null?"horizontal":i.getAttribute("w-orientation"),hidden:i.getAttribute("w-hidden")!==null,padding:i.getAttribute("w-padding")===null?0:parseInt(i.getAttribute("w-padding")),fixedSize:i.getAttribute("w-fixed-size")===null?null:parseInt(i.getAttribute("w-fixed-size")),classNames:i.getAttribute("w-classes")===null?null:i.getAttribute("w-classes")};if(t.id||(t.id=d()),i.getAttribute("w-textbox")?e=A(t.id,i,r):i.getAttribute("w-textarea")?e=M(t.id,i,r):i.getAttribute("w-button")?e=w(t.id,i,r):i.getAttribute("w-icon-button")?e=p(t.id,i,r):i.getAttribute("w-button-stack")?e=W(t.id,i,r):i.getAttribute("w-button-color")?e=D(t.id,i,r):i.getAttribute("w-button-menu")?e=F(t.id,i,r):i.getAttribute("w-icon-button-menu")?e=k(t.id,i,r):i.getAttribute("w-label")?e=x(t.id,i,r):i.getAttribute("w-image")?e=y(t.id,i,r):i.getAttribute("w-icon")?e=H(t.id,i,r):i.getAttribute("w-checkbox")?e=T(t.id,i,r):i.getAttribute("w-radiobutton")?e=I(t.id,i,r):i.getAttribute("w-switch")?e=R(t.id,i,r):i.getAttribute("w-toolbar")?e=N(t.id,i,r):i.getAttribute("w-progressbar")?e=z(t.id,i,r):i.getAttribute("w-valuebar")?e=B(t.id,i,r):i.getAttribute("w-tab")?e=L(t.id,i,r):i.getAttribute("w-accordion")?e=V(t.id,i,r):i.getAttribute("w-vpanel")?e=C(t.id,i,r):i.getAttribute("w-hpanel")?e=v(t.id,i,r):i.getAttribute("w-container")?e=h(i,r):i.getAttribute("w-select")?e=O(t.id,i,r):i.getAttribute("w-dialog")?e=G(t.id,i,null):i.getAttribute("w-data-grid")?e=U(t.id,i,r):(e=new b(t.id,i.tagName,r),t.type===l.FREE&&(s=!0),i.getAttributeNames().forEach(a=>{e&&e.getBody().setAttribute(a,i.getAttribute(a))}),i.childNodes.forEach(a=>{a.hasChildNodes()==!0?Z(a,e,s):e&&e.getBody().appendChild(a)})),e){if(!s&&t.type?e.setType(t.type):e.setType(l.FREE),e instanceof u&&e.setType(l.CUSTOM),t.orientation&&!(e instanceof S)&&!(e instanceof E)&&!(e instanceof u)&&!(e instanceof o)&&!(e instanceof P)&&(t.orientation==="vertical"?e.setAlign(f.VERTICAL):e.setAlign(f.HORIZONTAL)),e instanceof c&&e.setAlign(f.VERTICAL),e instanceof o&&e.setAlign(f.VERTICAL),t.padding&&e.setPadding(t.padding),t.fixedSize&&e.setFixedSize(t.fixedSize),t.classNames){const a=t.classNames.split(" ");for(const m of a)e.addClass(m)}return t.hidden&&e.setVisible(!1),g(t.id,e),e}return null}function pi(i,r){return r.fixedSize!==void 0&&i.setAttribute("w-fixed-size",r.fixedSize),r.padding!==void 0&&i.setAttribute("w-padding",r.padding),r.type!==void 0&&i.setAttribute("w-type",r.type),r.hidden!==void 0&&i.setAttribute("w-hidden",r.hidden),r.classNames!==void 0&&i.setAttribute("w-classes",r.classNames),r.orientation!==void 0&&i.setAttribute("w-orientation",r.orientation),i}export{Z as createWidget,pi as normalizeWidget};

package/dist/assets/ui/widget.collection.js

@@ -0,0 +1 @@
+const i=()=>{window.w||(window.w=new Map,w=window.w),o()},o=()=>{window.widgetConnections||(window.widgetConnections=new Map),window.widgetCustomConnections||(window.widgetCustomConnections=new Map)},c=(n,t)=>{i(),w.get(n)||w.set(n,t),setTimeout(()=>{s("widget-added-"+n),d("widget-custom-added-"+n)})},C=(n,t)=>{o(),widgetConnections.set(n,t)},g=(n,t)=>{o(),widgetCustomConnections.set(n,t)},s=n=>{for(const[t,e]of widgetConnections.entries())t==n&&e.then(new Event(n),null);widgetConnections.delete(n)},d=n=>{for(const[t,e]of widgetCustomConnections.entries())t==n&&e.then(new Event(n),null);widgetCustomConnections.delete(n)};export{c as addNewWidget,g as connectCustomWidget,C as connectWidget,i as initWidgetCollection,o as initWidgetConnections,s as run,d as runCustom};

package/dist/assets/ui/widget.ui.js

@@ -0,0 +1 @@
+var f=Object.defineProperty;var b=(i,e,t)=>e in i?f(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var d=(i,e,t)=>b(i,typeof e!="symbol"?e+"":e,t);import{UID as y}from"../core/uid.js";import{addNewWidget as c,connectWidget as g}from"./widget.collection.js";var v=(i=>(i[i.FILL=1]="FILL",i[i.CUSTOM=2]="CUSTOM",i[i.FREE=3]="FREE",i))(v||{}),m=(i=>(i[i.HORIZONTAL=1]="HORIZONTAL",i[i.VERTICAL=2]="VERTICAL",i))(m||{});class M{constructor(e="",t="div",h=null){d(this,"id");d(this,"subscribers");d(this,"padding");d(this,"left");d(this,"top");d(this,"width");d(this,"height");d(this,"initialWidth");d(this,"initialHeight");d(this,"overflow");d(this,"fixedSize");d(this,"type");d(this,"align");d(this,"visible");d(this,"enabled");d(this,"parent");d(this,"childs");d(this,"bodyTagName");d(this,"body");this.id=e||y(),this.overflow=!1,this.subscribers=new Map,this.padding=0,this.left=0,this.top=0,this.width=0,this.height=0,this.initialWidth=0,this.initialHeight=0,this.fixedSize=null,this.type=3,this.align=2,this.visible=!0,this.enabled=!0,this.parent=h,this.childs=[],this.bodyTagName=t,this.body=document.createElement(this.bodyTagName),this.body.id=`WUI.${e}.body`,h?(h.addChild(this),h.getBody().appendChild(this.body)):(this.setType(3),document.body.appendChild(this.body)),this.body.addEventListener("click",s=>{this.subscribers.forEach(n=>{n.event=="click"&&n.then(s,this)})}),this.body.addEventListener("mousedown",s=>{this.subscribers.forEach(n=>{n.event=="mousedown"&&n.then(s,this)})}),this.body.addEventListener("mouseup",s=>{this.subscribers.forEach(n=>{n.event=="mouseup"&&n.then(s,this)})}),this.body.addEventListener("mousemove",s=>{this.subscribers.forEach(n=>{n.event=="mousemove"&&n.then(s,this)})}),this.body.addEventListener("wheel",s=>{this.subscribers.forEach(n=>{n.event=="wheel"&&n.then(s,this)})}),this.body.addEventListener("mouseout",s=>{this.subscribers.forEach(n=>{n.event=="mouseout"&&n.then(s,this)})}),this.body.addEventListener("mouseleave",s=>{this.subscribers.forEach(n=>{n.event=="mouseleave"&&n.then(s,this)})}),this.init(),this.getMaxZIndex(),c(this.id,this)}run(e){this.subscribers.forEach(t=>{t.event==e&&t.then(new Event(e),this)})}subscribe(e){const t=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15);this.subscribers.set(`${t}.${e.event}`,e)}unsubscribe(e){this.subscribers.delete(`${e}`)}setPadding(e){this.padding=e}setX(e){this.left=e,this.body.style.left=`${e}px`}setY(e){this.top=e,this.body.style.top=`${e}px`}setW(e){this.body.style.width=`${e}px`}setInitialW(e){this.initialWidth=e}setH(e){this.body.style.height=`${e}px`}setInitialH(e){this.initialHeight=e}setWH(e,t){this.width=e,this.height=t,this.body.style.width=`${e}px`,this.body.style.height=`${t}px`,this.subscribers.forEach(h=>{h.event=="resize"&&h.then(new Event("resize"),this)})}setFixedSize(e){this.fixedSize=e}setType(e){this.type=e;let t=!1;this.type===3&&(t=!0);const h=this.getParent();h&&h.type===3&&(t=!0),t?(this.deleteClass("WUINonFreePosition"),this.addClass("WUIFixPosition"),this.body.style.left="",this.body.style.top="",this.body.style.width="",this.body.style.height="",this.body.style.bottom="",this.body.style.right=""):(this.type===2||this.type===1)&&(this.deleteClass("WUIFixPosition"),this.addClass("WUINonFreePosition")),this.initialWidth!=0&&(this.body.style.width=`${this.initialWidth}px`),this.initialHeight!=0&&(this.body.style.height=`${this.initialHeight}px`)}setAlign(e){this.align=e}setVisible(e){this.visible=e,this.body.style.display=e?"":"none"}setEnabled(e){this.enabled=e}setParent(e){var t;this.parent&&this.body&&this.body.parentNode&&this.body.parentNode.removeChild(this.body),this.parent=e,(t=this.parent)==null||t.body.appendChild(this.body),this.setType(this.type)}setBody(e){var t;this.body.parentNode&&this.body.parentNode.removeChild(this.body),this.body=e,(t=this.parent)==null||t.getBody().appendChild(this.body)}setChilds(e){this.childs=e}setOverflow(e){this.overflow=e,this.getBody().style.overflow=this.overflow?"auto":"hidden"}addClass(e){this.body.classList.add(e)}deleteClass(e){this.body.classList.remove(e)}deleteAllClasses(){this.body.classList.forEach(e=>{this.deleteClass(e)})}getPadding(){return this.padding}getX(e=!1){if(!e)return this.left;const t=this.getParent();return t?this.left+t.getX(!0):this.left}getY(e=!1){if(!e)return this.top;const t=this.getParent();return t?this.top+t.getY(!0):this.top}getW(){return this.getBody().clientWidth}getH(){return this.getBody().clientHeight}getPosition(e=!1){var t=this.getBody().getBoundingClientRect(),h=document.body,s=document.documentElement,n=e?s.scrollTop||h.scrollTop:0,l=e?s.scrollLeft||h.scrollLeft:0,u=s.clientTop||h.clientTop||0,a=s.clientLeft||h.clientLeft||0,o=t.top+n-u,r=t.left+l-a;return{x:Math.round(r),y:Math.round(o)}}getFixedSize(){return this.fixedSize}getType(){return this.type}getAlign(){return this.align}getEnabled(){return this.enabled}getVisible(){return this.visible}getParent(){return this.parent}getBody(){return this.body}getChilds(){return this.childs}getOverflow(){return this.overflow}addChild(e=null){e&&(this.childs.push(e),e.setParent(this),e.init())}populate(){window.w.get(this.id)||window.w.set(this.id,this);for(const e of this.childs)e.populate()}disableSelection(){console.log("disableSelection")}enableSelection(){console.log("enableSelection")}hide(){this.setVisible(!1)}init(){let e=!1;this.type===3&&(e=!0);const t=this.getParent();t&&t.type===3&&(e=!0),e||(this.deleteClass("WUIFixPosition"),this.addClass("WUINonFreePosition")),this.initPosition()}initPosition(){if(this.type===1)if(!this.parent)this.setX(0),this.setY(0),this.setWH(window.innerWidth,window.innerHeight);else return}render(){const e=this.padding,t=this.align===1?this.width:this.height;let h=e,s=0,n=0;for(const o of this.childs)o.type===1&&n++;let l=n;for(const o of this.childs)o.getFixedSize()!==null&&(s+=o.getFixedSize(),l--);let u=t-s;const a=this.getParent();a&&a.type===3&&(this.addClass("WUIFixPosition"),this.getBody().style.left="",this.getBody().style.top="",this.getBody().style.height="",this.getBody().style.width="",this.initialWidth!=0&&(this.getBody().style.width=`${this.initialWidth}px`),this.initialHeight!=0&&(this.getBody().style.height=`${this.initialHeight}px`));for(const o of this.childs){if(o.type!==1){o.render();continue}let r=(u-e)/l;o.getFixedSize()!==null&&(r=o.getFixedSize()),this.align===1?(o.setY(e),o.setX(h),o.type===1?o.setWH(r-e,this.getH()-e*2):o.setWH(r-e,this.getH()-e*2)):this.align===2&&(o.setX(e),o.setY(h),o.type===1?o.setWH(this.getW()-e*2,r-e):o.setWH(this.getW()-e*2,r-e)),h+=r,o.render()}this.subscribers.forEach(o=>{o.event=="render"&&o.then(new Event("render"),this)})}resize(){this.initPosition(),this.render()}display(){this.setVisible(!0)}toggle(){this.setVisible(!this.visible)}renderHTML(e){return this.body.appendChild(e),e}getMaxZIndex(e=0,t=null){const h=t||document.body;return h instanceof HTMLElement&&parseInt(window.getComputedStyle(h).zIndex)>e&&(e=parseInt(window.getComputedStyle(h).zIndex)),h==null||h.childNodes.forEach(s=>{e=this.getMaxZIndex(e,s)}),e}setZIndex(e){this.getBody().style.zIndex=`${e}`}raisteTop(){this.setZIndex(this.getMaxZIndex()+1)}raiseBottom(){this.setZIndex(0)}attachWidget(e){this.removeAllChilds(),this.addChild(e),e.setParent(this),e.render(),this.resize(),this.render()}removeAllChilds(){for(;this.getBody().childNodes.length>0;){const e=this.getBody().firstChild;e&&this.getBody().removeChild(e)}this.childs=[]}free(){if(this.childs)for(const h of this.childs)h.free();window.w.delete(this.id);const e=this.getBody(),t=e.parentNode;!t&&!e||t==null||t.removeChild(e)}dispose(){this.removeAllChilds();const e=this.getBody(),t=e.parentNode;t==null||t.removeChild(e)}}function x(i){return{onClick:i.onClick,onDrag:i.onDrag,onResize:i.onResize,onMouseDown:i.onMouseDown,onMouseUp:i.onMouseUp,onMouseMove:i.onMouseMove,onMouseOut:i.onMouseOut,onMouseLeave:i.onMouseLeave,onWheel:i.onWheel,onRender:i.onRender}}function L(i,e){i&&g("widget-added-"+i,{event:"widget-load",then:(t,h)=>{const s=w.get(i);s&&(s.subscribe({event:"click",then:(n,l)=>{e.onClick&&e.onClick({})}}),s.subscribe({event:"drag",then:(n,l)=>{e.onDrag&&e.onDrag({})}}),s.subscribe({event:"resize",then:(n,l)=>{e.onResize&&e.onResize({})}}),s.subscribe({event:"mousedown",then:(n,l)=>{e.onMouseDown&&e.onMouseDown({})}}),s.subscribe({event:"mouseup",then:(n,l)=>{e.onMouseUp&&e.onMouseUp({})}}),s.subscribe({event:"mousemove",then:(n,l)=>{e.onMouseMove&&e.onMouseMove({})}}),s.subscribe({event:"mouseout",then:(n,l)=>{e.onMouseOut&&e.onMouseOut({})}}),s.subscribe({event:"mouseleave",then:(n,l)=>{e.onMouseLeave&&e.onMouseLeave({})}}),s.subscribe({event:"wheel",then:(n,l)=>{e.onWheel&&e.onWheel({})}}),s.subscribe({event:"render",then:(n,l)=>{e.onRender&&e.onRender({})}}))}})}export{M as Widget,m as WidgetAlignTypes,v as WidgetTypes,L as connectWidgetCallback,x as getOnlyEventProps};

package/dist/cedro-logo.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="63.999996"
+   height="63.999996"
+   viewBox="0 0 16.933332 16.933332"
+   version="1.1"
+   id="svg1"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1">
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient43"
+       id="linearGradient4-4-2-8-2"
+       x1="-2.3303316"
+       y1="4.1695919"
+       x2="35.675308"
+       y2="27.438389"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient43"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#c55a36;stop-opacity:1;"
+         offset="0"
+         id="stop41" />
+      <stop
+         style="stop-color:#653916;stop-opacity:1;"
+         offset="1"
+         id="stop43" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g43-97"
+       inkscape:label="logo"
+       transform="matrix(0.35787036,0,0,0.35787036,-28.673691,-14.901542)">
+      <path
+         sodipodi:type="star"
+         style="fill:url(#linearGradient4-4-2-8-2);fill-opacity:1;stroke-width:0.264583"
+         id="path3-9-1-9-3"
+         inkscape:flatsided="true"
+         sodipodi:sides="6"
+         sodipodi:cx="14.4682"
+         sodipodi:cy="10.85115"
+         sodipodi:r1="33.404415"
+         sodipodi:r2="28.929071"
+         sodipodi:arg1="1.0471976"
+         sodipodi:arg2="1.5707963"
+         inkscape:rounded="-8.6736174e-17"
+         inkscape:randomized="0"
+         d="m 31.170406,39.780222 -33.4044152,-1e-6 -16.7022058,-28.929073 16.7022086,-28.929071 33.4044154,10e-7 16.702206,28.929073 z"
+         transform="matrix(0.61335724,0.35412196,-0.35412196,0.61335724,98.750054,53.518832)"
+         inkscape:label="hexagon" />
+      <g
+         id="g24-0-1-8"
+         transform="matrix(-0.10705088,-1.1567783,1.1567783,-0.10705088,-42.580249,112.06565)"
+         style="fill:#f3e6c6;fill-opacity:1"
+         inkscape:label="nut">
+        <path
+           style="fill:#f3e6c6;fill-opacity:1;stroke-width:0.205808"
+           d="m 37.695391,137.67201 c -4.335995,0.12348 -8.322511,-0.1629 -11.716092,-1.8082 -3.88948,-1.88571 -3.172757,-3.90894 -4.3329,-4.71833 -1.160142,-0.80938 -2.396324,-0.45638 -3.605738,-1.29419 -0.603327,3.56778 0.585177,7.57188 3.574494,9.76572 2.475445,1.94075 5.836913,2.56868 8.869641,1.79277 2.655797,-0.6397 5.120805,-1.99503 7.210595,-3.73777 z"
+           id="path5-29-8-8"
+           sodipodi:nodetypes="csscccc" />
+        <path
+           style="fill:#f3e6c6;fill-opacity:1;stroke-width:0.205808"
+           d="m 18.498269,128.08787 c 3.295382,-2.82073 6.576454,-5.10303 10.250209,-5.95563 4.210585,-0.97721 4.924417,1.04705 6.335504,0.94765 1.411079,-0.0994 2.150886,-1.1508 3.618159,-1.25904 -1.772618,-3.15451 -5.21328,-5.52246 -8.917253,-5.3506 -3.145193,0.0458 -6.154665,1.66966 -8.026256,4.17897 -1.663968,2.16649 -2.729828,4.76978 -3.260363,7.43865 z"
+           id="path5-2-2-5-2"
+           sodipodi:nodetypes="csscccc" />
+        <path
+           style="fill:#f3e6c6;fill-opacity:1;stroke-width:0.168787"
+           d="m 37.926149,126.16714 c -4.099583,0.20247 -10.320435,-0.90098 -11.157646,2.98893 -0.837211,3.88992 6.600086,3.11085 11.595712,6.01708 1.249664,-1.53842 1.810365,-3.89641 1.639598,-5.55579 -0.170766,-1.65938 -0.955994,-2.63481 -2.077664,-3.45022 z"
+           id="path6-9-7-2"
+           sodipodi:nodetypes="czczc" />
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/material-icons-list.json/357/200/272Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://github.com/

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cedro",
-    "version": "0.1.9",
+    "version": "0.1.11",
     "type": "module",
     "devDependencies": {
         "@types/node": "^20.4.4",
@@ -11,8 +11,10 @@
         "@oothkoo/seo-js": "1.0.5",
         "@types/color": "3.0.3",
         "@types/react": "18.2.17",
+        "html-entities": "^2.5.2",
         "color": "4.2.3",
-        "material-icons": "1.13.9",
+        "glob": "^11.0.0",
+        "material-icons": "1.13.12",
         "navigo": "8.11.1"
     }
 }

package/src/core/application.builder.tsx

@@ -1,60 +1,122 @@
-//import { createWidget } from "src/ui/builder/widget.builder";
-import { WidgetAlignTypes } from "../ui";
-import { createWidget } from "../ui/widget.builder";
-import Application, { ApplicationProps } from "./application.core";
-
-function getApplicationProps(content: any): ApplicationProps {
-    let props: ApplicationProps = {
-        title: content.title,
-        padding: 0,
-        orientation: null,
-        children: null,
-    };
-
-    if (content.getAttribute("w-title") !== null) {
-        props.title = content.getAttribute("w-title");
-    }
-
-    if (content.getAttribute("w-padding") !== null) {
-        props.padding = parseInt(content.getAttribute("w-padding"));
-    }
-
-    if (content.getAttribute("w-orientation") !== null) {
-        props.orientation = content.getAttribute("w-orientation");
-    }
-
-    return props;
-}
-
-export function createApplication(content: any): Application {
-    const appProps = getApplicationProps(content);
-    const newApp = new Application(appProps.title);
-
-    if (appProps.padding) {
-        newApp.getRoot().setPadding(appProps.padding);
-    }
-
-    if (appProps.orientation) {
-        if (appProps.orientation === "horizontal") {
-            newApp.getRoot().setAlign(WidgetAlignTypes.HORIZONTAL);
-        } else {
-            newApp.getRoot().setAlign(WidgetAlignTypes.VERTICAL);
-        }
-    }
-
-    content.childNodes.forEach((item: HTMLElement) => {
-        if (item.getAttribute("w-widget-collection")) {
-            item.childNodes.forEach((ietmWidget: any) => {
-                const appWidgets = createWidget(ietmWidget);
-
-                if (appWidgets !== null) {
-                    newApp.getRoot().addChild(appWidgets);
-                }
-            });
-        } else if (item.getAttribute("w-routes")) {
-            console.log("routes:", item);
-        }
-    });
-
-    return newApp;
-}
+//import { createWidget } from "src/ui/builder/widget.builder";
+import { Widget, WidgetAlignTypes } from "../ui";
+import { createWidget } from "../ui/widget.builder";
+import Application, { ApplicationProps } from "./application.core";
+import { decode } from "html-entities";
+
+function getApplicationProps(content: any): ApplicationProps {
+    let props: ApplicationProps = {
+        title: content.title,
+        padding: 0,
+        theme: null,
+        orientation: null,
+        children: null,
+    };
+
+    if (content.getAttribute("w-title") !== null) {
+        props.title = content.getAttribute("w-title");
+    }
+
+    if (content.getAttribute("w-padding") !== null) {
+        props.padding = parseInt(content.getAttribute("w-padding"));
+    }
+
+    if (content.getAttribute("w-orientation") !== null) {
+        props.orientation = content.getAttribute("w-orientation");
+    }
+
+    if (content.getAttribute("w-theme") !== null) {
+        props.theme = content.getAttribute("w-theme");
+    }
+
+    return props;
+}
+
+export function createApplication(content: any): Application {
+    const appProps = getApplicationProps(content);
+    const newApp = new Application(appProps.title);
+
+    if (appProps.padding) {
+        newApp.getRoot().setPadding(appProps.padding);
+    }
+
+    if (appProps.orientation) {
+        if (appProps.orientation === "horizontal") {
+            newApp.getRoot().setAlign(WidgetAlignTypes.HORIZONTAL);
+        } else {
+            newApp.getRoot().setAlign(WidgetAlignTypes.VERTICAL);
+        }
+    }
+
+    if (appProps.theme) {
+        newApp.theme.setTheme(appProps.theme);
+    }
+
+    content.childNodes.forEach((item: HTMLElement) => {
+        if (item.getAttribute("w-widget-collection")) {
+            item.childNodes.forEach((ietmWidget: any) => {
+                const appWidgets = createWidget(ietmWidget);
+
+                if (appWidgets !== null) {
+                    newApp.getRoot().addChild(appWidgets);
+                }
+            });
+        } else if (item.getAttribute("w-routes")) {
+            newApp.setRouterHostId(item.getAttribute("w-host-id"));
+            item.childNodes.forEach((ietmRoute: any) => {
+                if (ietmRoute.getAttribute("w-route-path") && ietmRoute.getAttribute("href")) {
+                    newApp.router.on(decode(ietmRoute.getAttribute("href")), () => {
+                        const url = decode(ietmRoute.getAttribute("href"));
+                        const timestamp = new Date().getTime();
+                        const isProduction = process.env.NODE_ENV === "production";
+
+                        const pathDev = ".." + url + "?ts=" + timestamp;
+
+                        const pathProduction = `../../assets${decode(
+                            ietmRoute.getAttribute("href")
+                        )}/index.js?ts=${timestamp}`;
+
+                        const path = isProduction ? pathProduction : pathDev;
+
+                        import(/*@vite-ignore*/ path).then((module) => {
+                            newApp.clearLoadedModule();
+                            newApp.setLoadedModule(module.default);
+                            const host = w.get(newApp.getRouterHostId());
+                            if (host) {
+                                newApp.attachWidget(newApp.getLoadedModule() as Widget, host);
+                            }
+                            newApp.hideLoading();
+                        });
+
+                        const loadCss = async () => {
+                            try {
+                                const timestamp = new Date().getTime();
+                                //const cssName = "../../assets" + url + "/style.css?ts=" + timestamp;
+                                const cssName = "/assets" + url + "/style.css?ts=" + timestamp;
+
+                                // Crear un elemento <link> para cargar el CSS
+                                const link = document.createElement("link");
+                                link.rel = "stylesheet";
+                                link.href = cssName;
+                                document.head.appendChild(link);
+                            } catch (error) {
+                                console.log(error);
+                            }
+                        };
+
+                        if (isProduction) loadCss();
+                    });
+                }
+            });
+            newApp.router.resolve();
+        }
+    });
+
+    appConnections.forEach((cb) => {
+        newApp.subscribe(cb);
+    });
+
+    appConnections = [];
+
+    return newApp;
+}

package/src/core/application.core.tsx

@@ -14,10 +14,20 @@ import Navigo from "navigo";
 import { Dialog } from "../ui/dialog";
 import { Label } from "../ui/label.ui";
 import { Seo } from "./seo";
-import { DarkTheme, LightTheme, ThemeManager } from "./themes.core";
+import {
+    CedroLightTheme,
+    CedroDarkTheme,
+    DarkTheme,
+    LightTheme,
+    ThemeManager,
+} from "./themes.core";
 import { Loading } from "../ui/loading.ui";
 import { OrientationTypes } from "../types/orientation.type";
 
+declare global {
+    var appConnections: Array<WUICallback>;
+}
+
 class WApplication implements IApplication {
     seo: Seo;
 
@@ -26,6 +36,7 @@ class WApplication implements IApplication {
     screen: Screen;
     root: Widget;
     router: Navigo;
+    routerHostId: string;
 
     alertDialog: Dialog;
     confirmDialog: Dialog;
@@ -35,6 +46,8 @@ class WApplication implements IApplication {
 
     theme: ThemeManager;
 
+    loadedModule: any;
+
     constructor(title: string) {
         this.seo = new Seo(title);
 
@@ -45,12 +58,15 @@ class WApplication implements IApplication {
         this.root.setType(WidgetTypes.FILL);
         this.screen = new Screen();
         this.router = new Navigo("/");
+        this.routerHostId = this.getRoot().id;
 
         this.mediaQueries = new Map<string, IScreenSize>();
 
         this.theme = new ThemeManager();
         this.theme.add(LightTheme);
         this.theme.add(DarkTheme);
+        this.theme.add(CedroDarkTheme);
+        this.theme.add(CedroLightTheme);
 
         this.screen.onResize(() => {
             this.getRoot().resize();
@@ -62,6 +78,12 @@ class WApplication implements IApplication {
             this.run("load");
         });
 
+        window.addEventListener("resize", () => {
+            this.screen.updateSize();
+            this.getRoot().resize();
+            this.run("resize");
+        });
+
         this.alertDialog = new Dialog("Dialog.alert", null);
         this.confirmDialog = new Dialog("Dialog.confirm", null);
 
@@ -70,6 +92,30 @@ class WApplication implements IApplication {
         this.theme.load();
     }
 
+    public setLoadedModule(module: any): void {
+        this.loadedModule = module;
+    }
+
+    public getLoadedModule(): any {
+        return this.loadedModule;
+    }
+
+    public clearLoadedModule(): void {
+        this.loadedModule = null;
+    }
+
+    public setRouterHostId(id: string | null): void {
+        if (!id) {
+            this.routerHostId = this.getRoot().id;
+            return;
+        }
+        this.routerHostId = id;
+    }
+
+    public getRouterHostId(): string {
+        return this.routerHostId;
+    }
+
     public run(eventId: WUIEvent): void {
         this.subscribers.forEach((callback) => {
             if (callback.event == eventId) {
@@ -90,13 +136,20 @@ class WApplication implements IApplication {
         this.subscribers.delete(`${event}`);
     }
 
-    alert(msg: string, onOk: () => void = () => {}, onCancell: () => void = () => {}): void {
+    public alert(
+        title: string = "",
+        msg: string,
+        onOk: () => void = () => {},
+        onCancell: () => void = () => {}
+    ): void {
         const mesageLabel = new Label("alert.label", "span");
 
         mesageLabel.setType(WidgetTypes.FILL);
         mesageLabel.setAlign(WidgetAlignTypes.VERTICAL);
         mesageLabel.setText(msg);
 
+        this.alertDialog.titleBar.setText(title);
+
         this.alertDialog.setOkCallback({ event: "click", then: onOk });
         this.alertDialog.setCancellCallback({
             event: "click",
@@ -108,7 +161,11 @@ class WApplication implements IApplication {
         this.alertDialog.show();
     }
 
-    confirm(msg: string, onOk: () => void = () => {}, onCancell: () => void = () => {}): void {
+    public confirm(
+        msg: string,
+        onOk: () => void = () => {},
+        onCancell: () => void = () => {}
+    ): void {
         const mesageLabel = new Label("alert.label", "span");
 
         mesageLabel.setType(WidgetTypes.FILL);
@@ -126,10 +183,16 @@ class WApplication implements IApplication {
         this.confirmDialog.show();
     }
 
-    attachWidget(guest: IWidget, host: IWidget): void {
+    public attachWidget(guest: IWidget, host: IWidget): void {
         if (!host) {
             console.log("guest:", guest);
+            return;
         }
+
+        if (!guest) {
+            return;
+        }
+
         for (const child of host.getBody().childNodes) {
             child.parentNode?.removeChild(child);
         }
@@ -141,13 +204,14 @@ class WApplication implements IApplication {
         host.removeAllChilds();
 
         host.addChild(guest);
+        guest.populate(); //tiene que recorrer todos los widgets hijos en forma recursiva e ir agregandolos a window.w
         guest.setParent(host);
         guest.render();
         this.root.resize();
         this.root.render();
     }
 
-    addMediaQuery(
+    public addMediaQuery(
         query: string,
         minWidth: number,
         maxWidth: number,
@@ -161,7 +225,7 @@ class WApplication implements IApplication {
      *
      * @return {void} This function does not return a value.
      */
-    init(): void {
+    public init(): void {
         this.root.subscribe({
             event: "resize",
             then: () => {
@@ -186,7 +250,7 @@ class WApplication implements IApplication {
      *
      * @return {Widget} The root widget of the application.
      */
-    getRoot(): Widget {
+    public getRoot(): Widget {
         return this.root;
     }
 
@@ -196,7 +260,7 @@ class WApplication implements IApplication {
      * @param {Widget} root - The root widget to set.
      * @return {void}
      */
-    setRoot(root: Widget): void {
+    public setRoot(root: Widget): void {
         this.root = root;
     }
 
@@ -208,18 +272,48 @@ class WApplication implements IApplication {
     public hideLoading(): void {
         this.loading.setVisible(false);
     }
+
+    public goTo(path: string): void {
+        this.router.navigate(path);
+    }
 }
 
+export const initApplicationConnections = () => {
+    if (!window.appConnections) {
+        window.appConnections = new Array<WUICallback>();
+    }
+};
+export const connectApplication = (cb: WUICallback) => {
+    initApplicationConnections();
+    window.appConnections.push(cb);
+};
+
 export type ApplicationProps = {
     title: string;
     padding?: number | null;
     orientation?: OrientationTypes | null;
+    theme?: string | null;
     children: any;
+    onResize?: (args: any) => void;
+    onLoad?: (args: any) => void;
 };
 
 export const Application = (props: ApplicationProps) => {
+    if (props.onLoad) {
+        connectApplication({ event: "load", then: props.onLoad });
+    }
+
+    if (props.onResize) {
+        connectApplication({ event: "resize", then: props.onResize });
+    }
+
     return (
-        <div title={props.title} w-padding={props.padding} w-orientation={props.orientation}>
+        <div
+            title={props.title}
+            w-padding={props.padding}
+            w-orientation={props.orientation}
+            w-theme={props.theme}
+        >
             {props.children}
         </div>
     );
@@ -234,11 +328,16 @@ export const Widgets = (props: WidgetsProps) => {
 };
 
 export type RoutesProps = {
+    hostId: string;
     children: any;
 };
 
 export const Routes = (props: RoutesProps) => {
-    return <div w-routes>{props.children}</div>;
+    return (
+        <div w-routes w-host-id={props.hostId}>
+            {props.children}
+        </div>
+    );
 };
 
 export type RouteProps = {
@@ -246,7 +345,7 @@ export type RouteProps = {
 };
 
 export const Route = (props: RouteProps) => {
-    return <a w-path href={props.src}></a>;
+    return <a w-route-path href={props.src}></a>;
 };
 
 export default WApplication;