cedro 0.1.0

package/src/ui/dialog.tsx

@@ -0,0 +1,398 @@
+import { WUICallback } from "../interfaces/widget.interface";
+import { Button } from "./button.ui";
+import { Label } from "./label.ui";
+import "./styles/dialog.css";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+
+const TITLE_BAR_HEIGHT = 40;
+const BUTTON_BAR_HEIGHT = 50;
+const HANDLER_SIZE = 20;
+const MINUMUN_WIDTH = 300;
+const MINUMUN_HEIGHT = 200;
+
+export class Dialog extends Widget {
+    background: Widget;
+
+    titleContainer: Widget;
+    contentCntainer: Widget;
+    buttonContainer: Widget | null;
+    handlerResizable: Widget | null;
+
+    titleBar: Label;
+    close: Button;
+
+    ok: Button | null;
+    cancell: Button | null;
+    btnSpacerLeft: Widget | null;
+    btnSpacerRight: Widget | null;
+
+    titleBarHeight: number;
+    buttonBarHeight: number;
+
+    dragDistX: number;
+    dragDistY: number;
+    draging: boolean;
+    resizing: boolean;
+
+    constructor(
+        id: string,
+        parent: Widget | null = null,
+        hasButtons: boolean = true,
+        resizable: boolean = false
+    ) {
+        super(id, "div", parent);
+
+        this.buttonContainer = null;
+        this.handlerResizable = null;
+
+        this.ok = null;
+        this.cancell = null;
+        this.btnSpacerLeft = null;
+        this.btnSpacerRight = null;
+
+        this.dragDistX = 0;
+        this.dragDistY = 0;
+        this.draging = false;
+        this.resizing = false;
+
+        this.background = new Widget(this.id + ".background", "div", null);
+        this.background.setType(WidgetTypes.CUSTOM);
+        this.background.addClass("WUIDialogBackground");
+        this.background.setVisible(false);
+
+        this.setWH(400, 200);
+
+        this.addClass("WUIDialog");
+        this.addClass("WUIDialogHide");
+
+        this.titleBarHeight = TITLE_BAR_HEIGHT;
+        this.buttonBarHeight = BUTTON_BAR_HEIGHT;
+
+        this.setType(WidgetTypes.CUSTOM);
+        this.setAlign(WidgetAlignTypes.VERTICAL);
+
+        this.titleContainer = new Widget(
+            this.id + ".titleContainer",
+            "div",
+            this
+        );
+        this.contentCntainer = new Widget(
+            this.id + ".contentCntainer",
+            "div",
+            this
+        );
+
+        if (hasButtons) {
+            this.buttonContainer = new Widget(
+                this.id + ".buttonContainer",
+                "div",
+                this
+            );
+
+            this.buttonContainer.setType(WidgetTypes.FILL);
+            this.buttonContainer.setAlign(WidgetAlignTypes.HORIZONTAL);
+            this.buttonContainer.setPadding(5);
+            this.buttonContainer.setFixedSize(BUTTON_BAR_HEIGHT);
+        }
+
+        if (resizable) {
+            this.handlerResizable = new Widget(
+                this.id + ".handlerResizable",
+                "div",
+                this
+            );
+            this.handlerResizable.setType(WidgetTypes.CUSTOM);
+            this.handlerResizable.getBody().innerHTML = " ";
+            this.handlerResizable.addClass("WUIDialogResizeHandler");
+        }
+
+        this.titleContainer.setType(WidgetTypes.FILL);
+        this.contentCntainer.setType(WidgetTypes.FILL);
+
+        this.titleContainer.setAlign(WidgetAlignTypes.HORIZONTAL);
+        this.contentCntainer.setAlign(WidgetAlignTypes.VERTICAL);
+
+        this.titleContainer.setPadding(5);
+        this.contentCntainer.setPadding(20);
+
+        this.titleContainer.setFixedSize(TITLE_BAR_HEIGHT);
+
+        this.titleBar = new Label(
+            this.id + ".titleBar",
+            "span",
+            this.titleContainer
+        );
+        this.titleBar.setType(WidgetTypes.FILL);
+        this.titleBar.setText("Title");
+        this.titleBar.addClass("WUITitlebar");
+
+        this.close = new Button(this.id + ".close", this.titleContainer);
+        this.close.setType(WidgetTypes.FILL);
+        this.close.setColor("primary");
+        this.close.setVariant("text");
+        this.close.setText("X");
+        this.close.setFixedSize(40);
+
+        this.btnSpacerLeft = new Widget(
+            this.id + ".btnSpacerLeft",
+            "div",
+            this.buttonContainer
+        );
+        this.btnSpacerLeft.setType(WidgetTypes.FILL);
+        this.btnSpacerLeft.setAlign(WidgetAlignTypes.HORIZONTAL);
+
+        if (this.buttonContainer) {
+            this.cancell = new Button(
+                this.id + ".cancell",
+                this.buttonContainer
+            );
+            this.cancell.setType(WidgetTypes.FILL);
+            this.cancell.setColor("error");
+            this.cancell.setText("Cancel");
+            this.cancell.setVariant("contained");
+            this.cancell.setFixedSize(100);
+
+            this.ok = new Button(this.id + ".ok", this.buttonContainer);
+            this.ok.setType(WidgetTypes.FILL);
+            this.ok.setText("OK");
+            this.ok.setVariant("contained");
+            this.ok.setColor("success");
+            this.ok.setFixedSize(100);
+
+            this.btnSpacerRight = new Widget(
+                this.id + ".btnSpacerRight",
+                "div",
+                this.buttonContainer
+            );
+            this.btnSpacerRight.setType(WidgetTypes.FILL);
+            this.btnSpacerRight.setAlign(WidgetAlignTypes.HORIZONTAL);
+
+            this.ok.subscribe({
+                event: "click",
+                then: () => {
+                    this.hide();
+                },
+            });
+
+            this.cancell.subscribe({
+                event: "click",
+                then: () => {
+                    this.hide();
+                },
+            });
+        }
+
+        this.raisteTop();
+
+        this.close.subscribe({
+            event: "click",
+            then: () => {
+                this.hide();
+            },
+        });
+
+        this.titleBar.subscribe({
+            event: "mousedown",
+            then: (e: any) => {
+                e.preventDefault();
+                const mouseX = (e as MouseEvent).clientX;
+                const mouseY = (e as MouseEvent).clientY;
+                this.dragDistX = Math.abs(this.getX() - mouseX);
+                this.dragDistY = Math.abs(this.getY() - mouseY);
+                this.draging = true;
+                this.background.setVisible(true);
+                this.background.raisteTop();
+                this.background.deleteClass("WUIDialogBackgroundReisizing");
+                this.background.addClass("WUIDialogBackgroundDragging");
+            },
+        });
+
+        this.background.subscribe({
+            event: "mouseup",
+            then: (e: any) => {
+                e.preventDefault();
+                this.draging = false;
+                this.resizing = false;
+                this.background.setVisible(false);
+                this.raisteTop();
+            },
+        });
+
+        this.background.subscribe({
+            event: "mousemove",
+            then: (e: any) => {
+                e.preventDefault();
+
+                if (this.draging) {
+                    const mouseX = (e as MouseEvent).clientX;
+                    const mouseY = (e as MouseEvent).clientY;
+                    this.setX(mouseX - this.dragDistX);
+                    this.setY(mouseY - this.dragDistY);
+                } else if (this.resizing) {
+                    const mouseX = (e as MouseEvent).clientX;
+                    const mouseY = (e as MouseEvent).clientY;
+
+                    let newWidth = Math.abs(mouseX - this.getPosition().x);
+                    let newHeight = Math.abs(mouseY - this.getPosition().y);
+
+                    if (newWidth < MINUMUN_WIDTH) newWidth = MINUMUN_WIDTH;
+                    if (newHeight < MINUMUN_HEIGHT) newHeight = MINUMUN_HEIGHT;
+
+                    this.setWH(newWidth, newHeight);
+
+                    this.render();
+                }
+
+                return;
+            },
+        });
+
+        /**RESIZE HANDLER  **/
+        if (this.handlerResizable) {
+            this.handlerResizable.subscribe({
+                event: "mousedown",
+                then: (e: any) => {
+                    e.preventDefault();
+                    if (!this.handlerResizable) return;
+                    const mouseX = (e as MouseEvent).clientX;
+                    const mouseY = (e as MouseEvent).clientY;
+                    this.dragDistX = Math.abs(
+                        this.handlerResizable.getPosition().x - mouseX
+                    );
+                    this.dragDistY = Math.abs(
+                        this.handlerResizable.getPosition().y - mouseY
+                    );
+
+                    this.resizing = true;
+                    this.background.setVisible(true);
+                    this.background.raisteTop();
+                    this.background.deleteClass("WUIDialogBackgroundDragging");
+                    this.background.addClass("WUIDialogBackgroundReisizing");
+                },
+            });
+        }
+
+        this.init();
+    }
+
+    /**
+     * Renders the component and its resizable handler.
+     *
+     * @return {void}
+     */
+    public render(): void {
+        super.render();
+        if (this.handlerResizable) {
+            this.handlerResizable.setX(this.getW() - HANDLER_SIZE);
+            this.handlerResizable.setY(this.getH() - HANDLER_SIZE);
+            this.handlerResizable.setW(HANDLER_SIZE);
+            this.handlerResizable.setH(HANDLER_SIZE);
+            this.handlerResizable.raisteTop();
+            this.handlerResizable.render();
+        }
+    }
+
+    /**
+     * Centers the element on the screen.
+     *
+     * @param {void} - No parameters.
+     * @return {void} - No return value.
+     */
+    public center(): void {
+        const ancho = this.getW();
+        const alto = this.getH();
+
+        const screenWidth = window.innerWidth;
+        const screenHeight = window.innerHeight;
+
+        const centerX = screenWidth / 2 - ancho / 2;
+        const centerY = screenHeight / 2 - alto / 2;
+
+        this.setX(centerX);
+        this.setY(centerY);
+    }
+
+    /**
+     * Shows the dialog.
+     *
+     * @return {void} No return value.
+     */
+    public show(): void {
+        //this.setWH(400, 200);
+        this.deleteClass("WUIDialogHide");
+        this.addClass("WUIDialogDisplayed");
+        this.render();
+        this.center();
+
+        this.background.setVisible(true);
+        this.background.raisteTop();
+
+        this.raisteTop();
+    }
+
+    /**
+     * Hides the dialog.
+     *
+     * This function removes the "WUIDialogDisplayed" class from the element,
+     * adds the "WUIDialogHide" class to the element, sets the background element
+     * to be invisible, and raises the dialog element to the bottom of the z-index.
+     */
+    public hide(): void {
+        this.deleteClass("WUIDialogDisplayed");
+        this.addClass("WUIDialogHide");
+        this.background.setVisible(false);
+        this.background.raiseBottom();
+        this.raiseBottom();
+    }
+
+    init() {
+        super.init();
+    }
+
+    /**
+     * Sets the height of the title bar.
+     *
+     * @param {number} height - The height of the title bar.
+     */
+    setTitlebarHeight(height: number) {
+        this.titleBarHeight = height;
+    }
+
+    /**
+     * Set the height of the button bar.
+     *
+     * @param {number} height - The height of the button bar.
+     */
+    setButtonbarHeight(height: number) {
+        this.buttonBarHeight = height;
+    }
+
+    /**
+     * Retrieves the content container widget.
+     *
+     * @return {Widget} The content container widget.
+     */
+    public getContentCntainer(): Widget {
+        return this.contentCntainer;
+    }
+
+    /**
+     * Sets the ok callback function.
+     *
+     * @param {WUICallback} cb - The callback function to be executed when the "ok" button is clicked.
+     */
+    public setOkCallback(cb: WUICallback) {
+        if (!this.ok) return;
+        this.ok.subscribe({ event: "click", then: cb.then });
+    }
+
+    /**
+     * Sets the cancellation callback for the function.
+     *
+     * @param {WUICallback} cb - The cancellation callback to set.
+     */
+    public setCancellCallback(cb: WUICallback) {
+        if (!this.cancell) return;
+        this.cancell.subscribe({ event: "click", then: cb.then });
+    }
+}

package/src/ui/index.ts

@@ -0,0 +1,24 @@
+import { Button } from "./button.ui"
+import { Widget } from "./widget.ui"
+import { Dialog } from "./dialog"
+import { Icon } from "./Icon.ui"
+import { IconButton } from "./IconButton.ui"
+import { Label } from "./label.ui"
+import { Menu } from "./menu.ui"
+import { Select } from "./select.ui"
+import { Textbox } from "./textbox.ui"
+import {createWidget} from "./widget.builder.ui"
+
+
+export{
+    Button,
+    Widget,
+    Dialog,
+    Icon,
+    IconButton,
+    Label,
+    Menu,
+    Select,
+    Textbox,
+    createWidget,
+}

package/src/ui/label.ui.ts

@@ -0,0 +1,61 @@
+import { Colors } from "./colors.ui";
+import { Widget } from "./widget.ui";
+
+export type LabelVariants =
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "p"
+    | "span";
+
+export class Label extends Widget {
+    variant: LabelVariants;
+    color: Colors;
+    text: string;
+
+    constructor(
+        id: string,
+        variant: LabelVariants = "span",
+        parent: Widget | null = null
+    ) {
+        super(id, variant, parent);
+
+        this.variant = variant;
+        this.color = "primary";
+        this.text = "";
+
+        this.init();
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    setText(text: string): void {
+        this.text = text;
+        this.body.innerHTML = text;
+    }
+
+    setVariant(variant: LabelVariants = "span"): void {
+        this.variant = variant;
+    }
+
+    setColor(color: Colors = "primary"): void {
+        this.color = color;
+    }
+
+    getVariant(): LabelVariants {
+        return this.variant;
+    }
+
+    getColor(): Colors {
+        return this.color;
+    }
+
+    getText(): string {
+        return this.text;
+    }
+}

package/src/ui/menu.ui.ts

@@ -0,0 +1,192 @@
+import "./styles/menu.css";
+import { IWidget } from "../interfaces/widget.interface";
+import { IconButton } from "./IconButton.ui";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+
+export class Menu extends Widget {
+    background: Widget;
+    options: Map<string, IconButton>;
+    triggeredById: string | null;
+    triggeredBy: IWidget | null;
+    triggeredBySearchCode: any;
+    withCalculation: boolean;
+    constructor(
+        id: string,
+        trigeredById: string | null,
+        parent: IWidget | null = null
+    ) {
+        super(id, "div", parent);
+
+        this.background = new Widget(this.id + ".background", "div", null);
+        this.background.setType(WidgetTypes.CUSTOM);
+        this.background.addClass("WUIMenuBackground");
+        this.background.setVisible(false);
+
+        this.triggeredById = trigeredById;
+        this.setType(WidgetTypes.CUSTOM);
+
+        this.triggeredBy = null;
+
+        this.options = new Map<string, IconButton>();
+
+        this.addClass("WUIMenu");
+        this.addClass("WUIMenuTransparent");
+
+        this.withCalculation = false;
+
+        this.triggeredBySearchCode = setInterval(() => {
+            if (!this.triggeredById) {
+                clearInterval(this.triggeredBySearchCode);
+                return;
+            }
+            if (window.w.get(this.triggeredById)) {
+                this.triggeredBy = window.w.get(this.triggeredById) as IWidget;
+
+                this.triggeredBy.subscribe({
+                    event: "click",
+                    then: () => {
+                        this.wakeUp();
+                    },
+                });
+                clearInterval(this.triggeredBySearchCode);
+            }
+        }, 500);
+
+        this.background.subscribe({
+            event: "click",
+            then: () => {
+                this.close();
+            },
+        });
+    }
+
+    public close(): void {
+        this.deleteClass("WUIMenuVisible");
+        this.addClass("WUIMenuHidden");
+        this.background.setVisible(false);
+    }
+
+    private setFreeOptionWidth(): void {
+        for (const [, dataOption] of this.options) {
+            const option = dataOption as IconButton;
+            option.deleteClass("WUIMenuOptions100w");
+        }
+    }
+
+    private getMaxWidth(): number {
+        this.setFreeOptionWidth();
+        this.deleteClass("WUIMenuHidden");
+        this.addClass("WUIMenuTransparent");
+        let maxWidth = 0;
+        for (const [, dataOption] of this.options) {
+            const option = dataOption as IconButton;
+            const optionWidth = option.getBody().clientWidth;
+
+            if (optionWidth > maxWidth) {
+                maxWidth = optionWidth;
+            }
+        }
+        return maxWidth;
+    }
+
+    wakeUp(): void {
+        if (!this.withCalculation) {
+            let maxWidth = this.getMaxWidth();
+
+            for (const [, dataOption] of this.options) {
+                const option = dataOption as IconButton;
+                option.addClass("WUIMenuOptions100w");
+            }
+            this.deleteClass("WUIMenuTransparent");
+            this.addClass("WUIMenuHidden");
+            this.setW(maxWidth);
+            this.withCalculation = true;
+        }
+
+        this.background.setVisible(true);
+        this.background.raisteTop();
+
+        this.raisteTop();
+
+        this.deleteClass("WUIMenuHidden");
+        this.addClass("WUIMenuVisible");
+
+        if (this.triggeredBy) {
+            const position = this.triggeredBy.getPosition(false);
+
+            const triggerW = this.triggeredBy.getBody().clientWidth;
+            const triggerH = this.triggeredBy.getBody().clientHeight;
+
+            const screenW = window.innerWidth;
+            const screenH = window.innerHeight;
+            const menuW = this.getBody().clientWidth;
+            const menuH = this.getBody().clientHeight;
+            let positionX = position.x;
+            let positionY = position.y;
+
+            let openRight = true;
+            let openBottom = true;
+
+            if (position.x + menuW + triggerW > screenW) {
+                positionX = screenW - menuW - triggerW;
+                openRight = false;
+            }
+
+            if (position.y + menuH + triggerH > screenH) {
+                positionY = screenH - menuH - triggerH;
+                openBottom = false;
+            }
+
+            if (openRight && openBottom) {
+                this.setX(positionX);
+                this.setY(positionY + triggerH);
+            } else if (openRight && !openBottom) {
+                this.setX(positionX + triggerW);
+                this.setY(positionY);
+            } else if (!openRight && openBottom) {
+                /*abajo izq: Works!*/
+                this.setX(positionX + triggerW);
+                this.setY(positionY + triggerH);
+            } else if (!openRight && !openBottom) {
+                this.setX(positionX + triggerW);
+                this.setY(positionY - triggerH);
+            }
+
+            //this.setY(positionY);
+        }
+    }
+
+    public optionClicked(clickedOption: IWidget): void {
+        this.subscribers.forEach((callback) => {
+            if (callback.event == "option-clicked") {
+                callback.then(new Event("option-clicked"), clickedOption);
+            }
+        });
+        this.close();
+    }
+
+    public clearOptions(): void {
+        this.options.clear();
+        this.removeAllChilds();
+        this.withCalculation = false;
+    }
+
+    addOption(id: string, icon: string, label: string) {
+        const newOption = new IconButton(id, icon, this);
+        newOption.setType(WidgetTypes.FREE);
+        newOption.setAlign(WidgetAlignTypes.HORIZONTAL);
+        newOption.setText(label);
+        newOption.addClass("WUIMenuOptions");
+
+        newOption.subscribe({
+            event: "click",
+            then: (_e, a) => {
+                const option = a as IconButton;
+
+                this.optionClicked(option);
+            },
+        });
+
+        this.options.set(id, newOption);
+    }
+}