cedro 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cedro",
-    "version": "0.1.4",
+    "version": "0.1.6",
     "type": "module",
     "devDependencies": {
         "@types/node": "^20.4.4",

package/src/core/application.core.ts

@@ -15,6 +15,7 @@ import { Dialog } from "../ui/dialog";
 import { Label } from "../ui/label.ui";
 import { Seo } from "./seo";
 import { DarkTheme, LightTheme, ThemeManager } from "./themes.core";
+import { Loading } from "../ui/loading.ui";
 
 class WApplication implements IApplication {
     seo: Seo;
@@ -25,6 +26,7 @@ class WApplication implements IApplication {
 
     alertDialog: Dialog;
     confirmDialog: Dialog;
+    loading: Loading;
 
     mediaQueries: Map<string, IScreenSize>;
 
@@ -56,6 +58,8 @@ class WApplication implements IApplication {
         this.alertDialog = new Dialog("Dialog.alert", null);
         this.confirmDialog = new Dialog("Dialog.confirm", null);
 
+        this.loading = new Loading("loading", null);
+
         this.theme.load();
     }
 
@@ -116,7 +120,12 @@ class WApplication implements IApplication {
         this.root.render();
     }
 
-    addMediaQuery(query: string, minWidth: number, maxWidth: number, cb: (app: IApplication) => void): void {
+    addMediaQuery(
+        query: string,
+        minWidth: number,
+        maxWidth: number,
+        cb: (app: IApplication) => void
+    ): void {
         this.mediaQueries.set(query, { minWidth, maxWidth, cb });
     }
 
@@ -162,6 +171,15 @@ class WApplication implements IApplication {
     setRoot(root: Widget): void {
         this.root = root;
     }
+
+    public showLoading(): void {
+        this.loading.setVisible(true);
+        this.loading.raisteTop();
+    }
+
+    public hideLoading(): void {
+        this.loading.setVisible(false);
+    }
 }
 
 export default WApplication;

package/src/index.ts

@@ -1,16 +1,17 @@
-import Application from "./core/application.core"
-import {DOMcreateElement, DOMcreateFragment} from "./core/jsxsupport"
-import {Widget, WidgetTypes, WidgetAlignTypes} from "./ui/widget.ui"
-import {initWidgetCollection} from "./ui/widget.collection"
+import Application from "./core/application.core";
+import { DOMcreateElement, DOMcreateFragment } from "./core/jsxsupport";
+import { Widget, WidgetTypes, WidgetAlignTypes } from "./ui/widget.ui";
+import { initWidgetCollection } from "./ui/widget.collection";
+import { createWidget } from "./ui/widget.builder.ui";
 
 initWidgetCollection();
 
-export{
+export {
     Application,
+    createWidget,
     Widget,
     WidgetTypes,
     WidgetAlignTypes,
     DOMcreateElement,
-    DOMcreateFragment
-}
-
+    DOMcreateFragment,
+};

package/src/interfaces/application.interface.ts

@@ -4,6 +4,7 @@ import { IWidget } from "./widget.interface";
 import { Dialog } from "../ui/dialog";
 import { Seo } from "../core/seo";
 import { ThemeManager } from "../core/themes.core";
+import { Vector2D } from "src/types/vector2d.type";
 
 export interface IScreenSize {
     minWidth: number;
@@ -42,4 +43,7 @@ export interface IApplication {
 
     confirm(msg: string): void;
     alert(msg: string): void;
+
+    showLoading(): void;
+    hideLoading(): void;
 }

package/src/interfaces/widget.interface.ts

@@ -54,6 +54,8 @@ export interface IWidget {
     unsubscribe: (event: WUIEvent) => void;
     run(eventId: WUIEvent): void;
 
+    dispose(): void;
+
     setPadding(p: number): void;
 
     setX(x: number): void;
@@ -85,8 +87,8 @@ export interface IWidget {
 
     getPadding(): number;
 
-    getX(): number;
-    getY(): number;
+    getX(recursive?: boolean): number;
+    getY(recursive?: boolean): number;
     getW(): number;
     getH(): number;
 

package/src/ui/Icon.ui.ts

@@ -1,12 +1,7 @@
 import { Colors } from "./colors.ui";
 import { Widget } from "./widget.ui";
 
-export type IconVariants =
-    | "Filled"
-    | "Outlined"
-    | "Round"
-    | "Sharp"
-    | "Two Tone";
+export type IconVariants = "Filled" | "Outlined" | "Round" | "Sharp" | "Two Tone";
 
 export class Icon extends Widget {
     variant: IconVariants;
@@ -17,7 +12,7 @@ export class Icon extends Widget {
         id: string,
         icon: string,
         variant: IconVariants = "Filled",
-        parent: Widget
+        parent: Widget | null = null
     ) {
         super(id, "span", parent);
 
@@ -29,8 +24,7 @@ export class Icon extends Widget {
             this.addClass("material-icons");
         } else {
             this.addClass(
-                "material-icons-" +
-                    this.variant.toString().replace(" ", "-").toLowerCase()
+                "material-icons-" + this.variant.toString().replace(" ", "-").toLowerCase()
             );
         }
 

package/src/ui/IconButton.ui.ts

@@ -8,6 +8,9 @@ export class IconButton extends Button {
     icon: Icon;
     label: Label;
 
+    showIcon: boolean;
+    showText: boolean;
+
     constructor(id: string, icon: string = "dark_mode", parent: Widget | null = null) {
         super(id, parent);
 
@@ -15,9 +18,36 @@ export class IconButton extends Button {
         this.icon = new Icon(id + ".icon", icon, undefined, this);
         this.label = new Label(id + ".label", undefined, this);
 
+        this.showIcon = true;
+        this.showText = true;
+
         this.init();
     }
 
+    public displayIcon(): void {
+        this.showIcon = true;
+        this.icon.setVisible(true);
+        this.render();
+    }
+
+    public hideIcon(): void {
+        this.showIcon = false;
+        this.icon.setVisible(false);
+        this.render();
+    }
+
+    public displayText(): void {
+        this.showText = true;
+        this.label.setVisible(true);
+        this.render();
+    }
+
+    public hideText(): void {
+        this.showText = false;
+        this.label.setVisible(false);
+        this.render();
+    }
+
     public init(): void {
         super.init();
     }
@@ -37,7 +67,7 @@ export class IconButton extends Button {
             this.icon.getBody().style.position = "absolute";
 
             const startX = this.getBody().clientWidth / 2 - iconWidth / 2;
-            const startY = this.getH() / 2 - iconWidth / 2;
+            const startY = this.getH() / 2 - this.icon.getH() / 2;
 
             this.icon.setX(startX);
             this.icon.setY(startY);
@@ -49,8 +79,14 @@ export class IconButton extends Button {
 
             const startX = padding; //this.getBody().clientWidth / 2 - (iconWidth + labelWidth) / 2;
             const startLabelX = startX + iconWidth + padding;
-            const startY = this.getH() / 2 - iconWidth / 2;
-            const startLabelY = this.getH() / 2 - labelHeight / 2;
+            let startY = this.getH() / 2 - iconWidth / 2;
+            let startLabelY = this.getH() / 2 - labelHeight / 2;
+
+            if (this.getType() !== WidgetTypes.FILL) {
+                startY = this.getH() / 2 - this.icon.getH() / 2;
+                this.label.getBody().style.lineHeight = this.getH() + "px";
+                startLabelY = this.getH() / 2 - this.label.getH() / 2;
+            }
 
             if (startX < 0 || startY < 0) {
                 setTimeout(() => {

package/src/ui/accordion.ui.ts

@@ -0,0 +1,71 @@
+import "./styles/accordion.css";
+import { IconButton } from "./IconButton.ui";
+import { Label } from "./label.ui";
+import { Widget, WidgetTypes } from "./widget.ui";
+
+const ACCORDION_HEADER_HEIGHT = 40;
+
+type AccordionItem = {
+    header: Widget;
+    content: Widget;
+};
+
+export class Accordion extends Widget {
+    items: Map<string, AccordionItem>;
+    selectedItemId: string | null;
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+
+        this.items = new Map<string, AccordionItem>();
+
+        this.selectedItemId = null;
+
+        this.addClass("WUIAccordion");
+    }
+
+    public selectItem(id: string): void {
+        const selected = this.items.get(id);
+
+        if (this.selectedItemId !== null) {
+            //deseleccionamos
+            const previous = this.items.get(this.selectedItemId);
+
+            if (previous) {
+                previous.content.setFixedSize(0);
+            }
+        }
+
+        if (selected) {
+            this.selectedItemId = id;
+            selected.content.setFixedSize(null);
+        }
+
+        this.render();
+    }
+
+    public addItem(title: string, icon: string, content: Widget): void {
+        const header =
+            icon !== ""
+                ? new IconButton(content.id + ".header", icon, null)
+                : new Label(content.id + ".header", "span", null);
+
+        header.setType(WidgetTypes.FILL);
+        header.setFixedSize(ACCORDION_HEADER_HEIGHT);
+        header.setText(title);
+
+        header.subscribe({
+            event: "click",
+            then: (_e, _w) => {
+                this.selectItem(content.id);
+            },
+        });
+
+        content.setType(WidgetTypes.FILL);
+        content.setFixedSize(0);
+
+        this.items.set(content.id, { header, content });
+
+        this.addChild(header);
+        this.addChild(content);
+    }
+}

package/src/ui/button.ui.ts

@@ -1,8 +1,25 @@
 import "./styles/button.css";
+import "./styles/stackbutton.css";
+import "./styles/vstackbutton.css";
 import { Colors } from "./colors.ui";
 import { Widget } from "./widget.ui";
 
-export type ButonVariants = "contained" | "outlined" | "text";
+export type ButonVariants =
+    | "contained"
+    | "outlined"
+    | "text"
+    | "stack-start"
+    | "stack-middle"
+    | "stack-end"
+    | "stack-start-active"
+    | "stack-middle-active"
+    | "stack-end-active"
+    | "stack-vertical-start"
+    | "stack-vertical-middle"
+    | "stack-vertical-end"
+    | "stack-vertical-start-active"
+    | "stack-vertical-middle-active"
+    | "stack-vertical-end-active";
 export type ButonSizes = "small" | "medium" | "large";
 
 export class Button extends Widget {

package/src/ui/buttonColor.ui.ts

@@ -0,0 +1,24 @@
+import "./styles/buttoncolor.css";
+import { Button } from "./button.ui";
+import { Widget } from "./widget.ui";
+
+export class ButtonColor extends Button {
+    inputColor: Widget;
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, parent);
+
+        this.inputColor = new Widget(id + ".inputColor", "input", this);
+        this.inputColor.getBody().setAttribute("type", "color");
+        this.inputColor.addClass("WUIButtonColorInput");
+    }
+
+    public setValue(value: string): void {
+        this.inputColor.getBody().setAttribute("value", value);
+    }
+
+    public getValue(): string {
+        const value = this.inputColor.getBody().getAttribute("value");
+
+        return value ? value : "";
+    }
+}

package/src/ui/buttonmenu.ui.ts

@@ -0,0 +1,59 @@
+import { Button } from "./button.ui";
+import { Menu } from "./menu.ui";
+import { SelectItem } from "./select.ui";
+
+export class ButtonMenu extends Button {
+    menu: Menu;
+    items: Array<SelectItem>;
+    selectedItem: SelectItem | null;
+
+    public constructor(id: string) {
+        super(id);
+
+        this.menu = new Menu(this.id + ".menu", this.id, null);
+
+        this.items = new Array<SelectItem>();
+        this.selectedItem = null;
+
+        this.subscribe({
+            event: "click",
+            then: () => {
+                this.menu.clearOptions();
+                this.items.forEach((item) => {
+                    this.menu.addOption(item.id, item.icon, item.label);
+                });
+
+                this.menu.wakeUp();
+
+                if (this.getW() > this.menu.getW()) {
+                    this.menu.setW(this.getBody().clientWidth);
+                    console.log("cambiando ancho...");
+                }
+            },
+        });
+
+        /*this.menu.subscribe({
+            event: "option-clicked",
+            then: (_e, clickedOption) => {
+                const option = clickedOption as IconButton;
+
+                const fintOption = this.items.find((item) => item.id === option.id);
+
+                if (fintOption) {
+                    this.selectedItem = fintOption;
+                }
+
+                const selectedText = this.selectedItem?.label;
+                if (selectedText) {
+                    this.setText(selectedText);
+                } else {
+                    this.setText("");
+                }
+            },
+        });*/
+    }
+
+    public addItem(id: string, label: string, icon: string): void {
+        this.items.push(new SelectItem(id, label, icon));
+    }
+}

package/src/ui/buttonstack.ui.ts

@@ -0,0 +1,94 @@
+import { OrientationTypes } from "src/types/orientation.type";
+import { IconButton } from "./IconButton.ui";
+import { ButonVariants, Button } from "./button.ui";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+
+export class ButtonStack extends Widget {
+    orientation: OrientationTypes;
+    buttons: Map<string, Button | IconButton>;
+    activeButton: string | null;
+    constructor(
+        id: string,
+        orientation: OrientationTypes = "horizontal",
+        parent: Widget | null = null
+    ) {
+        super(id, "div", parent);
+
+        this.orientation = orientation;
+
+        if (this.orientation === "horizontal") {
+            this.setAlign(WidgetAlignTypes.HORIZONTAL);
+        } else {
+            this.setAlign(WidgetAlignTypes.VERTICAL);
+        }
+
+        this.activeButton = null;
+
+        this.buttons = new Map<string, Button | IconButton>();
+    }
+
+    public setActive(buttonId: string): void {
+        this.activeButton = buttonId;
+        this.configureStyles();
+    }
+
+    private configureStyles(): void {
+        const buttonsList = Array.from(this.buttons.entries());
+        for (let i = 0; i < buttonsList.length; i++) {
+            const [_key, button] = buttonsList[i] as [string, Button | IconButton];
+
+            button.deleteAllClasses();
+
+            if (this.thereIsOnlyOneButton()) {
+                this.setButtonVariant(button, "outlined");
+            } else if (this.thereAreTwoButtons()) {
+                if (i === 0) {
+                    this.setButtonVariant(button, "stack-start");
+                } else if (i === 1) {
+                    this.setButtonVariant(button, "stack-end");
+                }
+            } else if (this.thereAreMoreThanTwoButtons()) {
+                if (i === 0) {
+                    this.setButtonVariant(button, "stack-start");
+                } else if (i === buttonsList.length - 1) {
+                    this.setButtonVariant(button, "stack-end");
+                } else {
+                    this.setButtonVariant(button, "stack-middle");
+                }
+            }
+        }
+    }
+
+    private setButtonVariant(button: Button | IconButton, variant: ButonVariants): void {
+        let fixedVariant = variant as string;
+
+        if (this.orientation === "vertical") {
+            fixedVariant = fixedVariant.replace("stack", "stack-vertical");
+        }
+        if (button.id === this.activeButton) {
+            button.setVariant((fixedVariant + "-active") as ButonVariants);
+        } else {
+            button.setVariant(fixedVariant as ButonVariants);
+        }
+    }
+
+    public addButton(button: Button | IconButton): void {
+        this.buttons.set(button.id, button);
+        button.setType(WidgetTypes.FILL);
+        button.subscribe({ event: "click", then: () => this.setActive(button.id) });
+        this.addChild(button);
+        this.configureStyles();
+    }
+
+    private thereIsOnlyOneButton(): boolean {
+        return this.buttons.size === 1;
+    }
+
+    private thereAreTwoButtons(): boolean {
+        return this.buttons.size === 2;
+    }
+
+    private thereAreMoreThanTwoButtons(): boolean {
+        return this.buttons.size > 2;
+    }
+}

package/src/ui/checkbox.ui.ts

@@ -0,0 +1,8 @@
+import { ToggleButton } from "./toggle.ui";
+import { Widget } from "./widget.ui";
+
+export class Checkbox extends ToggleButton {
+    constructor(id: string, text: string = "", parent: Widget | null = null) {
+        super(id, text, "check_box_outline_blank", "check_box_outlined", parent);
+    }
+}

package/src/ui/datagrid.ui.ts

@@ -51,11 +51,25 @@ export class DataGrid extends Widget {
         this.addChild(this.footerContainer);
 
         this.verticalScrollbar = new Scroll(id + ".VerticalScrollbar", this.dataContainer);
-        this.horizontalScrollbar = new Scroll(id + ".HorizontalScrollbar", this.dataContainer, "horizontal");
+        this.horizontalScrollbar = new Scroll(
+            id + ".HorizontalScrollbar",
+            this.dataContainer,
+            "horizontal"
+        );
 
         this.columns = new Array<DataGridColumn>();
 
         this.data = new Array<any>();
+
+        this.addClass("WUIDataGrid");
+    }
+
+    public hideFooter(): void {
+        this.footerContainer.setFixedSize(0);
+    }
+
+    public showFooter(): void {
+        this.footerContainer.setFixedSize(DATA_GRID_FOOTER_HEIGHT);
     }
 
     private getFreeWidth(): number {
@@ -138,6 +152,7 @@ export class DataGrid extends Widget {
             row.setType(WidgetTypes.CUSTOM);
             row.getBody().style.position = "absolute";
             row.getBody().style.overflow = "hidden";
+            row.addClass("WUIDataGrid-Row");
 
             this.dataContainer.addChild(row);
 

package/src/ui/draggable.ui.ts

@@ -18,6 +18,8 @@ export class Draggable {
     maxX: number | null;
     maxY: number | null;
 
+    draggingClass: string | null;
+
     constructor(widget: Widget, orientation: DragOrientation = "both") {
         this.target = widget;
 
@@ -25,6 +27,8 @@ export class Draggable {
         this.background.setType(WidgetTypes.CUSTOM);
         this.background.addClass("WUIDraggableBackground");
 
+        this.draggingClass = null;
+
         this.dragDistX = 0;
         this.dragDistY = 0;
 
@@ -70,6 +74,16 @@ export class Draggable {
                 this.endDrag();
             },
         });
+
+        this.background.setVisible(false);
+    }
+
+    public setBackgroundCursor(cursor: string): void {
+        this.background.getBody().style.cursor = cursor;
+    }
+
+    public setDraggingClass(draggingClass: string | null): void {
+        this.draggingClass = draggingClass;
     }
 
     private startDrag(e: MouseEvent): void {
@@ -81,6 +95,10 @@ export class Draggable {
         this.dragging = true;
         this.background.setVisible(true);
         this.background.raisteTop();
+
+        if (this.draggingClass) {
+            this.target.addClass(this.draggingClass);
+        }
     }
 
     private draggingTarget(e: MouseEvent): void {
@@ -123,6 +141,10 @@ export class Draggable {
     private endDrag(): void {
         this.dragging = false;
         this.background.setVisible(false);
+
+        if (this.draggingClass) {
+            this.target.deleteClass(this.draggingClass);
+        }
     }
 
     public setMaxX(x: number | null): void {