cedro 0.1.32 → 0.1.34

package/package.json

@@ -16,13 +16,13 @@
         "ui-library",
         "widget-based"
     ],
-    "version": "0.1.32",
+    "version": "0.1.34",
     "type": "module",
     "devDependencies": {
         "@fontsource/roboto": "^5.0.5",
         "@oothkoo/seo-js": "1.0.5",
         "@types/color": "3.0.3",
-        "@types/node": "^20.4.4",
+        "@types/node": "^20.19.33",
         "@types/react": "18.2.17",
         "color": "4.2.3",
         "glob": "^11.0.0",

package/src/core/application.builder.tsx

@@ -1,3 +1,4 @@
+import { RouteItem } from "src/interfaces/application.interface";
 import { Widget, WidgetAlignTypes } from "../ui";
 import { createWidget } from "../ui/widget.builder";
 import Application, { ApplicationProps } from "./application.core";
@@ -65,6 +66,21 @@ export function createApplication(content: any): Application {
             newApp.setRouterHostId(item.getAttribute("w-host-id"));
             item.childNodes.forEach((ietmRoute: any) => {
                 if (ietmRoute.getAttribute("w-route-path") && ietmRoute.getAttribute("href")) {
+                    let newRoute: RouteItem = {
+                        src: "",
+                        label: undefined,
+                        icon: undefined
+                    };
+                    if (ietmRoute.getAttribute("href")) {
+                        newRoute.src = decode(ietmRoute.getAttribute("href"));
+                    }
+                    if (ietmRoute.getAttribute("w-label")) {
+                        newRoute.label = ietmRoute.getAttribute("w-label");
+                    }
+                    if (ietmRoute.getAttribute("w-icon")) {
+                        newRoute.icon = ietmRoute.getAttribute("w-icon");
+                    }
+                    newApp.addRoute(newRoute);
                     newApp.router.on(decode(ietmRoute.getAttribute("href")), () => {
                         const url = decode(ietmRoute.getAttribute("href"));
                         const isProduction = process.env.NODE_ENV === "production";
@@ -76,6 +92,7 @@ export function createApplication(content: any): Application {
                             if (host) {
                                 newApp.attachWidget(newApp.getLoadedModule() as Widget, host);
                             }
+                            newApp.run("location-change");
                             newApp.hideLoading();
                         });
 
@@ -96,10 +113,11 @@ export function createApplication(content: any): Application {
                         };
 
                         if (isProduction) loadCss();
+
                     });
                 }
             });
-            newApp.router.on("/", () => {});
+            newApp.router.on("/", () => { });
             newApp.router.resolve();
         }
     });

package/src/core/application.core.tsx

@@ -8,7 +8,7 @@ import "@fontsource/roboto/900.css";
 import "material-icons/iconfont/material-icons.css";
 import { Widget } from "../ui/widget.ui";
 import { Screen } from "./screeen.core";
-import { IApplication, IScreenSize } from "../interfaces/application.interface";
+import { IApplication, IScreenSize, RouteItem } from "../interfaces/application.interface";
 import { IWidget, WUICallback, WUIEvent } from "../interfaces/widget.interface";
 import Navigo from "navigo";
 import { Dialog } from "../ui/dialog";
@@ -42,6 +42,7 @@ class WApplication implements IApplication {
 
     screen: Screen;
     root: Widget;
+    routes: Array<RouteItem>;
     router: Navigo;
     routerHostId: string;
 
@@ -64,6 +65,7 @@ class WApplication implements IApplication {
 
         this.root.setType(WidgetTypes.FILL);
         this.screen = new Screen();
+        this.routes = new Array<RouteItem>();
         this.router = new Navigo("/");
         this.routerHostId = this.getRoot().id;
 
@@ -146,8 +148,8 @@ class WApplication implements IApplication {
     public alert(
         title: string = "",
         msg: string,
-        onOk: () => void = () => {},
-        onCancell: () => void = () => {}
+        onOk: () => void = () => { },
+        onCancell: () => void = () => { }
     ): void {
         const mesageLabel = new Label("alert.label", "span");
 
@@ -170,8 +172,8 @@ class WApplication implements IApplication {
 
     public confirm(
         msg: string,
-        onOk: () => void = () => {},
-        onCancell: () => void = () => {}
+        onOk: () => void = () => { },
+        onCancell: () => void = () => { }
     ): void {
         const mesageLabel = new Label("alert.label", "span");
 
@@ -227,6 +229,11 @@ class WApplication implements IApplication {
         this.mediaQueries.set(query, { minWidth, maxWidth, cb });
     }
 
+    public addRoute(route: RouteItem): void {
+        //add route.
+        this.routes.push(route);
+    }
+
     /**
      * Initializes the application.
      *
@@ -303,6 +310,7 @@ export type ApplicationProps = {
     children: any;
     onResize?: (args: any) => void;
     onLoad?: (args: any) => void;
+    onLocationChange?: (args: any) => void;
 };
 
 export const Application = (props: ApplicationProps) => {
@@ -314,6 +322,10 @@ export const Application = (props: ApplicationProps) => {
         connectApplication({ event: "resize", then: props.onResize });
     }
 
+    if (props.onLocationChange) {
+        connectApplication({ event: "location-change", then: props.onLocationChange });
+    }
+
     return (
         <div
             title={props.title}
@@ -349,10 +361,12 @@ export const Routes = (props: RoutesProps) => {
 
 export type RouteProps = {
     src: string;
+    label?: string;
+    icon?: string;
 };
 
 export const Route = (props: RouteProps) => {
-    return <a w-route-path href={props.src}></a>;
+    return <a w-route-path href={props.src} w-label={props.label} w-icon={props.icon}></a>;
 };
 
 export default WApplication;

package/src/core/path.import.dev.ts

@@ -1,7 +1,8 @@
 export const getAdaptedUrl = (url: string) => {
     const timestamp = new Date().getTime();
     const isProduction = process.env.NODE_ENV === "production";
-    const pathDev = `../../../../src${url}index.js?ts=${timestamp}`;
+    //const pathDev = `../../../../src${url}index.js?ts=${timestamp}`;
+    const pathDev = ".." + url + "?ts=" + timestamp;
     const pathProduction = `../../assets${url}/index.js?ts=${timestamp}`;
     return isProduction ? pathProduction : pathDev;
 };

package/src/interfaces/application.interface.ts

@@ -16,10 +16,17 @@ export enum WUIThemes {
     DARK = "dark",
 }
 
+export interface RouteItem {
+    src: string;
+    label?: string;
+    icon?: string;
+}
+
 export interface IApplication {
     seo: Seo;
     screen: IScreen;
     root: IWidget;
+    routes: Array<RouteItem>;
     router: Navigo;
     alertDialog: Dialog;
     confirmDialog: Dialog;
@@ -44,6 +51,8 @@ export interface IApplication {
         cb: (app: IApplication) => void
     ): void;
 
+    addRoute(route: RouteItem): void;
+
     init(): void;
     setRoot(root: IWidget): void;
     getRoot(): IWidget;

package/src/interfaces/widget.interface.ts

@@ -4,6 +4,7 @@ import { Vector2D } from "../types/vector2d.type";
 export type WUIEvent =
     | "widget-load"
     | "load"
+    | "location-change"
     | "click"
     | "resize"
     | "mousedown"

package/src/ui/IconButton.ui.tsx

@@ -7,6 +7,8 @@ import { UID } from "../core/uid";
 import { WidgetAlignTypes, WidgetTypes } from "./widget.types";
 import { normalizeWidget } from "./widget.normalize";
 
+export type IconButtonIconPosition = "left" | "right";
+
 export class IconButton extends Button {
     icon: Icon;
     label: Label;
@@ -15,10 +17,13 @@ export class IconButton extends Button {
     showText: boolean;
     centerX: boolean;
 
+    iconPosition: IconButtonIconPosition = "left";
+
     constructor(id: string, icon: string = "dark_mode", parent: Widget | null = null) {
         super(id, parent);
 
         this.centerX = false;
+        this.iconPosition = "left";
 
         this.setAlign(WidgetAlignTypes.HORIZONTAL);
         this.icon = new Icon(id + ".icon", icon, undefined, this);
@@ -96,21 +101,48 @@ export class IconButton extends Button {
             const requiredWidth = labelWidth + iconWidth + padding * 5;
 
             const labelHeight = this.label.getBody().clientHeight;
+            let startX = 0;
+            let startY = 0;
+            let startLabelX = 0;
+            let startLabelY = 0;
+            let spaceBetLabelAndIcon = padding * 2;
 
-            let startX = availableWidth / 2 - (iconWidth + padding + labelWidth) / 2;
+            if (this.iconPosition == "left") {
 
-            if (availableWidth < requiredWidth) {
-                startX = padding * 2;
-            }
+                startX = availableWidth / 2 - (iconWidth + spaceBetLabelAndIcon + labelWidth) / 2;
 
-            if (!this.centerX) {
-                startX = padding * 2;
-            }
+                if (availableWidth < requiredWidth) {
+                    startX = padding * 2;
+                }
+
+                if (!this.centerX) {
+                    startX = padding * 2;
+                }
+
+                startLabelX = startX + iconWidth + spaceBetLabelAndIcon;
+
+                startY = this.getH() / 2 - iconWidth / 2;
+                startLabelY = this.getH() / 2 - labelHeight / 2;
+
+
+            } else if (this.iconPosition == "right") {
 
-            const startLabelX = startX + iconWidth + padding;
+                startLabelX = availableWidth / 2 - (iconWidth / 2 + spaceBetLabelAndIcon + labelWidth) / 2;
 
-            let startY = this.getH() / 2 - iconWidth / 2;
-            let startLabelY = this.getH() / 2 - labelHeight / 2;
+                if (!this.centerX) {
+                    startLabelX = padding * 2;
+                }
+
+                startX = startLabelX + labelWidth + spaceBetLabelAndIcon;
+
+                if (availableWidth < requiredWidth) {
+                    startLabelX = padding * 2;
+                }
+
+                startY = this.getH() / 2 - iconWidth / 2;
+                startLabelY = this.getH() / 2 - labelHeight / 2;
+
+            }
 
             if (this.getType() !== WidgetTypes.FILL) {
                 startY = this.getH() / 2 - this.icon.getH() / 2;
@@ -126,7 +158,7 @@ export class IconButton extends Button {
             }
 
             this.icon.setX(startX);
-            this.label.setX(startLabelX + padding);
+            this.label.setX(startLabelX);
 
             this.icon.setY(startY);
             this.label.setY(startLabelY);
@@ -147,6 +179,10 @@ export class IconButton extends Button {
     public setCenterX(centerX: boolean): void {
         this.centerX = centerX;
     }
+
+    public setIconPosition(position: IconButtonIconPosition = "left") {
+        this.iconPosition = position;
+    }
 }
 
 export type wIconButtonProps = Omit<wButtonProps, "text"> & {
@@ -154,6 +190,7 @@ export type wIconButtonProps = Omit<wButtonProps, "text"> & {
     text?: string | null;
     onlyIcon?: boolean | null;
     centerX?: boolean | null;
+    iconPosition?: IconButtonIconPosition | null;
 };
 
 export const WIconButton = (props: wIconButtonProps) => {
@@ -175,6 +212,7 @@ export const WIconButton = (props: wIconButtonProps) => {
             w-width={props.width}
             w-height={props.height}
             w-center-x={props.centerX}
+            w-icon-position={props.iconPosition}
         />,
         props
     );
@@ -193,6 +231,7 @@ export function createIconButton(
     const dataHeight = content.getAttribute("w-height");
     const dataOnlyIcon = content.getAttribute("w-only-icon");
     const dataCenterX = content.getAttribute("w-center-x");
+    const dataIconPosition = content.getAttribute("w-icon-position");
 
     let newIconButton = new IconButton(id, dataIcon, parent);
 
@@ -224,5 +263,9 @@ export function createIconButton(
         newIconButton.setCenterX(true);
     }
 
+    if (dataIconPosition) {
+        newIconButton.setIconPosition(dataIconPosition);
+    }
+
     return newIconButton;
 }

package/src/ui/breadcumbs.ui.tsx

@@ -0,0 +1,137 @@
+/*
+ * Widget: Breadcums
+ * Descripcion:
+ *  El widget muestra la ruta en la que esta parado el usuario.
+ * Por ejemplo:
+ *  - Si el usuario esta en https://mipagina.com/admin/user/profile
+ *    El widget debe mostrar algo asi como Admin >> Usuario >> Perfil.
+ * Implementacion:
+ *  Una idea es que este widget este conectado con las rutas definidas en la aplicacion.
+ *  Entonces a las rutas le podemos agregar la propiedad de label o breadcumbLabel que
+ *  indicaria el texto a mostrar cuando se esta en esa ruta.
+ *  Ademas tambien le podemos definir un icono a cada ruta.
+ *  
+ *  Luego el widget Breadcumbs puede buscar en las rutas de la aplicacion, cual es la ruta actual
+ *  y actualizarse mostrando graficamente donde se encuentra el usuario.
+ *  Para esto podriamos agregar algun evento en las rutas o en la aplicacion que se dispare cuando
+ *  se carga una url y donde los widget puedan suscribirse para capturar ese evento y hacer algo
+ *  en consecuencia.
+ *
+ *  Vamos a usar el widget de toolbar configurado como barra de herramientas horizontal y los botenes
+ *  que usa la barra de herramientas vamos a configurarlos para que muestren el icono hacia la derecha.
+ *
+ * */
+
+import { Toolbar } from "./toolbar.ui";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
+import { WidgetProps } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
+import { UID } from "../core/uid";
+import { Button } from "./button.ui";
+import { IconButton } from "./IconButton.ui";
+import { RouteItem } from "src/interfaces/application.interface";
+
+export class Breadcumbs extends Toolbar {
+    constructor(id: string, parent: Widget | null) {
+        super(id, parent, "horizontal");
+        this.setVariant("contained");
+        const connectEvent = () => {
+            if (!window.app) {
+                setTimeout(connectEvent, 500);
+            }
+            window.app?.subscribe({
+                event: "location-change", then: () => {
+                    this.configItems();
+                }
+            })
+            this.configItems();
+        }
+        connectEvent();
+    }
+
+    private getRoute(name: string): RouteItem | null {
+        if (!window.app) return null;
+        const app = window.app;
+
+        for (const route of app.routes) {
+
+            const parts = route.src.split("/").filter((item) => item != "");
+            const last = parts[parts.length - 1];
+
+            if (!last) continue;
+
+            if (last == name) {
+                return route;
+            }
+
+        }
+
+        return null;
+    }
+
+    private configItems() {
+        if (!window.app) return;
+        const app = window.app;
+        const router = window.app.router;
+        if (!router) return;
+
+        for (const child of this.items.values()) {
+            this.deleteItem(child.id);
+        }
+
+        const url = router.getCurrentLocation().url;
+        const path = url.split("/");
+        for (let i = 0; i < path.length; i++) {
+            const itemName = path[i];
+            const route = this.getRoute(itemName);
+            if (!route) continue;
+            const newWidget = new Button("item." + itemName, this);
+            let widgetText = route.label ? route.label : itemName;
+            newWidget.setText(widgetText.replaceAll(" ", "&nbsp;"))
+            newWidget.setVariant("text");
+            newWidget.subscribe({
+                event: "click", then: () => {
+                    app.goTo(route.src);
+                }
+            })
+            this.addItem(newWidget.id, newWidget);
+
+            if (i == path.length - 1) {
+                //El ultimo no lleva separador
+                break;
+            }
+            const separator = new IconButton("icon." + itemName, "keyboard_double_arrow_right", this);
+            separator.setVariant("text");
+            separator.setW(50);
+            this.addItem(separator.id, separator);
+            separator.setW(20);
+        }
+
+        this.render();
+    }
+}
+
+export type wBreadcumbProps = WidgetProps & {
+};
+
+export const WBreadcumbs = (props: wBreadcumbProps) => {
+    if (!props.id) {
+        props.id = "breadcumbs." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-breadcumbs
+        ></div>,
+        props
+    );
+};
+
+export function createBreadcumbs(id: string, _content: any, parent: Widget | null = null): Breadcumbs {
+    let newBreadcumbs = new Breadcumbs(id, parent);
+
+    return newBreadcumbs;
+}

package/src/ui/index.ts

@@ -27,6 +27,7 @@ import { VPanel, WVPanel } from "./vpanel.ui";
 import { createWidget } from "./widget.builder";
 import { IconButtonMenu, WIconButtonMenu, WIconButtonMenuItem } from "./iconButtonMenu.ui";
 import { WidgetAlignTypes, WidgetTypes } from "./widget.types";
+import { Breadcumbs, WBreadcumbs } from "./breadcumbs.ui";
 
 export type { ContainerParams };
 
@@ -36,6 +37,8 @@ export {
     Accordion,
     WAccordion,
     WAccordionItem,
+    Breadcumbs,
+    WBreadcumbs,
     Button,
     WButton,
     ButtonColor,

package/src/ui/toolbar.ui.tsx

@@ -144,6 +144,16 @@ export class Toolbar extends Widget {
         this.items.set(id, widget);
     }
 
+    public deleteItem(id: string) {
+        const item = this.items.get(id);
+
+        if (!item) return;
+
+        item.free();
+
+        this.items.delete(id);
+    }
+
     public init(): void {
         super.init();
     }

package/src/ui/widget.builder.ts

@@ -28,6 +28,7 @@ import { createDialog, Dialog } from "./dialog";
 import { createDataGrid, DataGrid } from "./datagrid.ui";
 import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
 import { createIconView } from "./IconView.ui";
+import { createBreadcumbs } from "./breadcumbs.ui";
 
 export function createWidget(
     content: any,
@@ -118,6 +119,8 @@ export function createWidget(
         widget = createDataGrid(widgetProps.id, content, parent);
     } else if (content.getAttribute("w-icon-view")) {
         widget = createIconView(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-breadcumbs")) {
+        widget = createBreadcumbs(widgetProps.id, content, parent);
     } else {
         widget = new Widget(widgetProps.id, content.tagName, parent);