cedro 0.1.35 → 0.1.36

package/package.json

@@ -16,7 +16,7 @@
         "ui-library",
         "widget-based"
     ],
-    "version": "0.1.35",
+    "version": "0.1.36",
     "type": "module",
     "devDependencies": {
         "@fontsource/roboto": "^5.0.5",

package/src/ui/breadcumbs.ui.tsx

@@ -10,7 +10,7 @@
  *  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
@@ -22,7 +22,7 @@
  *
  * */
 
-import { Toolbar } from "./toolbar.ui";
+import { Toolbar } from "./toolbar.class";
 import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
 import { WidgetProps } from "./widget.types";
 import { normalizeWidget } from "./widget.normalize";
@@ -40,12 +40,13 @@ export class Breadcumbs extends Toolbar {
                 setTimeout(connectEvent, 500);
             }
             window.app?.subscribe({
-                event: "location-change", then: () => {
+                event: "location-change",
+                then: () => {
                     this.configItems();
-                }
-            })
+                },
+            });
             this.configItems();
-        }
+        };
         connectEvent();
     }
 
@@ -54,7 +55,6 @@ export class Breadcumbs extends Toolbar {
         const app = window.app;
 
         for (const route of app.routes) {
-
             const parts = route.src.split("/").filter((item) => item != "");
             const last = parts[parts.length - 1];
 
@@ -63,7 +63,6 @@ export class Breadcumbs extends Toolbar {
             if (last == name) {
                 return route;
             }
-
         }
 
         return null;
@@ -87,20 +86,25 @@ export class Breadcumbs extends Toolbar {
             if (!route) continue;
             const newWidget = new Button("item." + itemName, this);
             let widgetText = route.label ? route.label : itemName;
-            newWidget.setText(widgetText.replaceAll(" ", " "))
+            newWidget.setText(widgetText.replaceAll(" ", " "));
             newWidget.setVariant("text");
             newWidget.subscribe({
-                event: "click", then: () => {
+                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);
+            const separator = new IconButton(
+                "icon." + itemName,
+                "keyboard_double_arrow_right",
+                this
+            );
             separator.setVariant("text");
             separator.setW(50);
             this.addItem(separator.id, separator);
@@ -111,8 +115,7 @@ export class Breadcumbs extends Toolbar {
     }
 }
 
-export type wBreadcumbProps = WidgetProps & {
-};
+export type wBreadcumbProps = WidgetProps & {};
 
 export const WBreadcumbs = (props: wBreadcumbProps) => {
     if (!props.id) {
@@ -121,16 +124,14 @@ export const WBreadcumbs = (props: wBreadcumbProps) => {
 
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
-    return normalizeWidget(
-        <div
-            id={props.id}
-            w-breadcumbs
-        ></div>,
-        props
-    );
+    return normalizeWidget(<div id={props.id} w-breadcumbs></div>, props);
 };
 
-export function createBreadcumbs(id: string, _content: any, parent: Widget | null = null): Breadcumbs {
+export function createBreadcumbs(
+    id: string,
+    _content: any,
+    parent: Widget | null = null
+): Breadcumbs {
     let newBreadcumbs = new Breadcumbs(id, parent);
 
     return newBreadcumbs;

package/src/ui/tabs.ui.tsx

@@ -2,7 +2,7 @@ import "./styles/tabs.css";
 
 import { OrientationTypes } from "../types/orientation.type";
 import { Widget } from "./widget.ui";
-import { Toolbar } from "./toolbar.ui";
+import { Toolbar } from "./toolbar.class";
 import { Label } from "./label.ui";
 import { Icon } from "./Icon.ui";
 import { Scroll } from "./scroll.ui";

package/src/ui/toolbar.class.ts

@@ -0,0 +1,242 @@
+import "./styles/toolbar.css";
+import { IWidget } from "../interfaces/widget.interface";
+import { Widget } from "./widget.ui";
+import { IconButton } from "./IconButton.ui";
+import { OrientationTypes } from "../types/orientation.type";
+import { WidgetAlignTypes, WidgetTypes } from "./widget.types";
+
+export type ToolbarVariants = "contained" | "outlined";
+
+const TOOLBAR_SIZE = 48;
+const TOOLBAR_BUTTON_SIZE = 40;
+
+export class Toolbar extends Widget {
+    orientation: OrientationTypes;
+    variant: ToolbarVariants;
+    items: Map<string, IWidget>;
+    size: number; //Indica el alto o ancho de la toolbar.
+
+    itemsContainer: Widget;
+    btnLeft: IconButton;
+    btnRight: IconButton;
+
+    constructor(
+        id: string,
+        parent: Widget | null = null,
+        orientationType: OrientationTypes = "horizontal"
+    ) {
+        super(id, "div", parent);
+        this.orientation = orientationType;
+        this.size = TOOLBAR_SIZE;
+        this.items = new Map<string, IWidget>();
+
+        this.variant = "outlined";
+
+        if (this.orientation === "vertical") {
+            this.setAlign(WidgetAlignTypes.VERTICAL);
+        } else {
+            this.setAlign(WidgetAlignTypes.HORIZONTAL);
+        }
+
+        this.setType(WidgetTypes.FILL);
+        //this.setFixedSize(TOOLBAR_SIZE);
+        this.addClass("WUIToolbar-" + this.variant);
+
+        this.itemsContainer = new Widget(this.id + ".itemsContainer", "div", this);
+        this.itemsContainer.setType(WidgetTypes.CUSTOM);
+        this.itemsContainer.getBody().style.position = "absolute";
+        this.itemsContainer.getBody().style.overflow = "hidden";
+
+        this.getBody().style.overflow = "hidden";
+
+        this.btnLeft = new IconButton(this.id + ".btnLeft", this.getIconLeft());
+        this.btnLeft.setType(WidgetTypes.CUSTOM);
+        this.btnLeft.getBody().style.position = "absolute";
+        this.btnLeft.setW(TOOLBAR_BUTTON_SIZE);
+        this.btnLeft.setH(TOOLBAR_SIZE);
+        this.addChild(this.btnLeft);
+
+        this.btnRight = new IconButton(this.id + ".btnRight", this.getIconRight());
+        this.btnRight.setType(WidgetTypes.CUSTOM);
+        this.btnRight.getBody().style.position = "absolute";
+        this.btnRight.setW(TOOLBAR_BUTTON_SIZE);
+        this.btnRight.setH(TOOLBAR_SIZE);
+        this.addChild(this.btnRight);
+
+        this.btnLeft.subscribe({
+            event: "click",
+            then: () => {
+                if (this.orientation === "horizontal") {
+                    this.itemsContainer.getBody().scrollLeft -= TOOLBAR_SIZE;
+                } else {
+                    this.itemsContainer.getBody().scrollTop -= TOOLBAR_SIZE;
+                }
+            },
+        });
+
+        this.btnRight.subscribe({
+            event: "click",
+            then: () => {
+                if (this.orientation === "horizontal") {
+                    this.itemsContainer.getBody().scrollLeft += TOOLBAR_SIZE;
+                } else {
+                    this.itemsContainer.getBody().scrollTop += TOOLBAR_SIZE;
+                }
+            },
+        });
+    }
+
+    public setVariant(variant: ToolbarVariants): void {
+        this.deleteClass("WUIToolbar-" + this.variant);
+        this.variant = variant;
+        this.addClass("WUIToolbar-" + this.variant);
+    }
+
+    public getIconLeft(): string {
+        if (this.orientation === "horizontal") {
+            return "arrow_left";
+        }
+        return "arrow_drop_up";
+    }
+
+    public getIconRight(): string {
+        if (this.orientation === "horizontal") {
+            return "arrow_right";
+        }
+        return "arrow_drop_down";
+    }
+
+    /**
+     * Set the orientation of the toolbar.
+     *
+     * @param {ToolbarOrientationTypes} orientationType - the type of orientation to set
+     * @return {void}
+     */
+    public setOrientation(orientationType: OrientationTypes, size: number = TOOLBAR_SIZE): void {
+        this.orientation = orientationType;
+        this.size = size;
+    }
+
+    public setSize(size: number): void {
+        this.size = size;
+    }
+
+    /**
+     * Adds an item to the collection.
+     *
+     * @param {string} id - The ID of the item.
+     * @param {IWidget} widget - The widget to be added.
+     */
+    addItem(id: string, widget: IWidget) {
+        widget.setParent(this.itemsContainer);
+
+        widget.setType(WidgetTypes.CUSTOM);
+
+        if (this.orientation === "vertical") {
+            widget.setW(this.size);
+        } else {
+            widget.setH(this.size);
+        }
+
+        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();
+    }
+
+    public getFullSize(): number {
+        //Devuelve el tamaño que tiene la toolbar para mostrar todos los botones.
+
+        let size = 0;
+        for (const item of this.items.values()) {
+            if (this.orientation === "horizontal") {
+                size += item.getW();
+            } else if (this.orientation === "vertical") {
+                size += item.getH();
+            }
+        }
+        return size;
+    }
+
+    public render(): void {
+        super.render();
+        const fullSize = this.getFullSize();
+        const parent = this.getParent();
+        const parentH = parent?.getH() || 0;
+        const availableSize = this.orientation === "horizontal" ? this.getW() : parentH;
+
+        if (fullSize > availableSize) {
+            this.btnLeft.setVisible(true);
+            this.btnRight.setVisible(true);
+
+            if (this.orientation === "horizontal") {
+                this.itemsContainer.setY(0);
+                this.itemsContainer.setX(TOOLBAR_BUTTON_SIZE);
+                this.itemsContainer.setW(availableSize - TOOLBAR_BUTTON_SIZE * 2);
+                this.itemsContainer.setH(TOOLBAR_SIZE);
+
+                this.btnLeft.setX(0);
+                this.btnLeft.setW(TOOLBAR_BUTTON_SIZE);
+                this.btnLeft.setH(TOOLBAR_SIZE);
+                this.btnRight.setX(availableSize - TOOLBAR_BUTTON_SIZE);
+                this.btnRight.setW(TOOLBAR_BUTTON_SIZE);
+                this.btnRight.setH(TOOLBAR_SIZE);
+            } else {
+                this.itemsContainer.setY(TOOLBAR_BUTTON_SIZE);
+                this.itemsContainer.setX(0);
+                this.itemsContainer.setW(TOOLBAR_SIZE);
+                this.itemsContainer.setH(availableSize - TOOLBAR_BUTTON_SIZE * 2);
+
+                this.btnLeft.setY(0);
+                this.btnLeft.setW(TOOLBAR_SIZE);
+                this.btnLeft.setH(TOOLBAR_BUTTON_SIZE);
+                this.btnRight.setY(availableSize - TOOLBAR_BUTTON_SIZE);
+                this.btnRight.setW(TOOLBAR_SIZE);
+                this.btnRight.setH(TOOLBAR_BUTTON_SIZE);
+            }
+        } else {
+            this.btnLeft.setVisible(false);
+            this.btnRight.setVisible(false);
+
+            if (this.orientation === "horizontal") {
+                this.itemsContainer.setY(0);
+                this.itemsContainer.setX(0);
+                this.itemsContainer.setW(fullSize);
+                this.itemsContainer.setH(TOOLBAR_SIZE);
+            } else {
+                this.itemsContainer.setY(0);
+                this.itemsContainer.setX(0);
+                this.itemsContainer.setW(TOOLBAR_SIZE);
+                this.itemsContainer.setH(fullSize);
+            }
+        }
+
+        let currentPosition: number = 0;
+
+        for (const item of this.items.values()) {
+            if (this.orientation === "vertical") {
+                item.setY(currentPosition);
+                currentPosition += item.getH();
+                item.setX(0);
+                item.setW(TOOLBAR_BUTTON_SIZE);
+            } else {
+                item.setX(currentPosition);
+                item.setY(0);
+                item.setH(TOOLBAR_BUTTON_SIZE);
+                currentPosition += item.getW();
+            }
+            item.render();
+        }
+    }
+}

package/src/ui/toolbar.ui.tsx

@@ -1,248 +1,14 @@
 import "./styles/toolbar.css";
-import { IWidget } from "../interfaces/widget.interface";
 import { Widget } from "./widget.ui";
-import { IconButton } from "./IconButton.ui";
 import { OrientationTypes } from "../types/orientation.type";
 import { createWidget } from "./widget.builder";
 import { UID } from "../core/uid";
-import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { WidgetProps } from "./widget.types";
 import { normalizeWidget } from "./widget.normalize";
 
-export type ToolbarVariants = "contained" | "outlined";
+import { Toolbar, ToolbarVariants } from "./toolbar.class";
 
-const TOOLBAR_SIZE = 48;
-const TOOLBAR_BUTTON_SIZE = 40;
-
-export class Toolbar extends Widget {
-    orientation: OrientationTypes;
-    variant: ToolbarVariants;
-    items: Map<string, IWidget>;
-    size: number; //Indica el alto o ancho de la toolbar.
-
-    itemsContainer: Widget;
-    btnLeft: IconButton;
-    btnRight: IconButton;
-
-    constructor(
-        id: string,
-        parent: Widget | null = null,
-        orientationType: OrientationTypes = "horizontal"
-    ) {
-        super(id, "div", parent);
-        this.orientation = orientationType;
-        this.size = TOOLBAR_SIZE;
-        this.items = new Map<string, IWidget>();
-
-        this.variant = "outlined";
-
-        if (this.orientation === "vertical") {
-            this.setAlign(WidgetAlignTypes.VERTICAL);
-        } else {
-            this.setAlign(WidgetAlignTypes.HORIZONTAL);
-        }
-
-        this.setType(WidgetTypes.FILL);
-        //this.setFixedSize(TOOLBAR_SIZE);
-        this.addClass("WUIToolbar-" + this.variant);
-
-        this.itemsContainer = new Widget(this.id + ".itemsContainer", "div", this);
-        this.itemsContainer.setType(WidgetTypes.CUSTOM);
-        this.itemsContainer.getBody().style.position = "absolute";
-        this.itemsContainer.getBody().style.overflow = "hidden";
-
-        this.getBody().style.overflow = "hidden";
-
-        this.btnLeft = new IconButton(this.id + ".btnLeft", this.getIconLeft());
-        this.btnLeft.setType(WidgetTypes.CUSTOM);
-        this.btnLeft.getBody().style.position = "absolute";
-        this.btnLeft.setW(TOOLBAR_BUTTON_SIZE);
-        this.btnLeft.setH(TOOLBAR_SIZE);
-        this.addChild(this.btnLeft);
-
-        this.btnRight = new IconButton(this.id + ".btnRight", this.getIconRight());
-        this.btnRight.setType(WidgetTypes.CUSTOM);
-        this.btnRight.getBody().style.position = "absolute";
-        this.btnRight.setW(TOOLBAR_BUTTON_SIZE);
-        this.btnRight.setH(TOOLBAR_SIZE);
-        this.addChild(this.btnRight);
-
-        this.btnLeft.subscribe({
-            event: "click",
-            then: () => {
-                if (this.orientation === "horizontal") {
-                    this.itemsContainer.getBody().scrollLeft -= TOOLBAR_SIZE;
-                } else {
-                    this.itemsContainer.getBody().scrollTop -= TOOLBAR_SIZE;
-                }
-            },
-        });
-
-        this.btnRight.subscribe({
-            event: "click",
-            then: () => {
-                if (this.orientation === "horizontal") {
-                    this.itemsContainer.getBody().scrollLeft += TOOLBAR_SIZE;
-                } else {
-                    this.itemsContainer.getBody().scrollTop += TOOLBAR_SIZE;
-                }
-            },
-        });
-    }
-
-    public setVariant(variant: ToolbarVariants): void {
-        this.deleteClass("WUIToolbar-" + this.variant);
-        this.variant = variant;
-        this.addClass("WUIToolbar-" + this.variant);
-    }
-
-    public getIconLeft(): string {
-        if (this.orientation === "horizontal") {
-            return "arrow_left";
-        }
-        return "arrow_drop_up";
-    }
-
-    public getIconRight(): string {
-        if (this.orientation === "horizontal") {
-            return "arrow_right";
-        }
-        return "arrow_drop_down";
-    }
-
-    /**
-     * Set the orientation of the toolbar.
-     *
-     * @param {ToolbarOrientationTypes} orientationType - the type of orientation to set
-     * @return {void}
-     */
-    public setOrientation(orientationType: OrientationTypes, size: number = TOOLBAR_SIZE): void {
-        this.orientation = orientationType;
-        this.size = size;
-    }
-
-    public setSize(size: number): void {
-        this.size = size;
-    }
-
-    /**
-     * Adds an item to the collection.
-     *
-     * @param {string} id - The ID of the item.
-     * @param {IWidget} widget - The widget to be added.
-     */
-    addItem(id: string, widget: IWidget) {
-        widget.setParent(this.itemsContainer);
-
-        widget.setType(WidgetTypes.CUSTOM);
-
-        if (this.orientation === "vertical") {
-            widget.setW(this.size);
-        } else {
-            widget.setH(this.size);
-        }
-
-        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();
-    }
-
-    public getFullSize(): number {
-        //Devuelve el tamaño que tiene la toolbar para mostrar todos los botones.
-
-        let size = 0;
-        for (const item of this.items.values()) {
-            if (this.orientation === "horizontal") {
-                size += item.getW();
-            } else if (this.orientation === "vertical") {
-                size += item.getH();
-            }
-        }
-        return size;
-    }
-
-    public render(): void {
-        super.render();
-        const fullSize = this.getFullSize();
-        const parent = this.getParent();
-        const parentH = parent?.getH() || 0;
-        const availableSize = this.orientation === "horizontal" ? this.getW() : parentH;
-
-        if (fullSize > availableSize) {
-            this.btnLeft.setVisible(true);
-            this.btnRight.setVisible(true);
-
-            if (this.orientation === "horizontal") {
-                this.itemsContainer.setY(0);
-                this.itemsContainer.setX(TOOLBAR_BUTTON_SIZE);
-                this.itemsContainer.setW(availableSize - TOOLBAR_BUTTON_SIZE * 2);
-                this.itemsContainer.setH(TOOLBAR_SIZE);
-
-                this.btnLeft.setX(0);
-                this.btnLeft.setW(TOOLBAR_BUTTON_SIZE);
-                this.btnLeft.setH(TOOLBAR_SIZE);
-                this.btnRight.setX(availableSize - TOOLBAR_BUTTON_SIZE);
-                this.btnRight.setW(TOOLBAR_BUTTON_SIZE);
-                this.btnRight.setH(TOOLBAR_SIZE);
-            } else {
-                this.itemsContainer.setY(TOOLBAR_BUTTON_SIZE);
-                this.itemsContainer.setX(0);
-                this.itemsContainer.setW(TOOLBAR_SIZE);
-                this.itemsContainer.setH(availableSize - TOOLBAR_BUTTON_SIZE * 2);
-
-                this.btnLeft.setY(0);
-                this.btnLeft.setW(TOOLBAR_SIZE);
-                this.btnLeft.setH(TOOLBAR_BUTTON_SIZE);
-                this.btnRight.setY(availableSize - TOOLBAR_BUTTON_SIZE);
-                this.btnRight.setW(TOOLBAR_SIZE);
-                this.btnRight.setH(TOOLBAR_BUTTON_SIZE);
-            }
-        } else {
-            this.btnLeft.setVisible(false);
-            this.btnRight.setVisible(false);
-
-            if (this.orientation === "horizontal") {
-                this.itemsContainer.setY(0);
-                this.itemsContainer.setX(0);
-                this.itemsContainer.setW(fullSize);
-                this.itemsContainer.setH(TOOLBAR_SIZE);
-            } else {
-                this.itemsContainer.setY(0);
-                this.itemsContainer.setX(0);
-                this.itemsContainer.setW(TOOLBAR_SIZE);
-                this.itemsContainer.setH(fullSize);
-            }
-        }
-
-        let currentPosition: number = 0;
-
-        for (const item of this.items.values()) {
-            if (this.orientation === "vertical") {
-                item.setY(currentPosition);
-                currentPosition += item.getH();
-                item.setX(0);
-                item.setW(TOOLBAR_BUTTON_SIZE);
-            } else {
-                item.setX(currentPosition);
-                item.setY(0);
-                item.setH(TOOLBAR_BUTTON_SIZE);
-                currentPosition += item.getW();
-            }
-            item.render();
-        }
-    }
-}
+export { Toolbar, type ToolbarVariants };
 
 export type ToolbarProps = WidgetProps & {
     variant?: ToolbarVariants;