cedro 0.1.3 → 0.1.5

package/src/ui/tabs.ui.ts

@@ -0,0 +1,182 @@
+import "./styles/tabs.css";
+
+import { OrientationTypes } from "src/types/orientation.type";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { Toolbar } from "./toolbar.ui";
+import { Label } from "./label.ui";
+import { IconButton } from "./IconButton.ui";
+import { Scroll } from "./scroll.ui";
+
+const TAB_HEADER_SIZE = 40;
+
+export type TabItem = {
+    title: string;
+    content: Widget;
+};
+
+export class Tabs extends Widget {
+    orientation: OrientationTypes;
+
+    content: Widget;
+    itemControls: Toolbar;
+
+    items: Map<string, TabItem>;
+    itemsScrollable: Map<string, boolean>;
+    verticalScrollbar: Scroll | null;
+
+    constructor(
+        id: string,
+        parent: Widget | null = null,
+        orientation: OrientationTypes = "horizontal"
+    ) {
+        super(id, "div", parent);
+        this.orientation = orientation;
+
+        this.content = new Widget(id + ".content", "div");
+        this.content.setType(WidgetTypes.FILL);
+        this.content.addClass("WUITabContainer");
+
+        this.setType(WidgetTypes.FILL);
+
+        if (this.orientation === "horizontal") {
+            this.setAlign(WidgetAlignTypes.VERTICAL);
+        } else {
+            this.setAlign(WidgetAlignTypes.HORIZONTAL);
+        }
+
+        this.items = new Map<string, TabItem>();
+        this.itemsScrollable = new Map<string, boolean>();
+        this.verticalScrollbar = null;
+
+        this.itemControls = new Toolbar(id + ".itemControls", null, orientation);
+        this.itemControls.setVariant("contained");
+        this.itemControls.setFixedSize(TAB_HEADER_SIZE);
+
+        this.addChild(this.itemControls);
+        this.addChild(this.content);
+
+        this.addClass("WUITab");
+    }
+
+    public setOrientation(orientation: OrientationTypes) {
+        this.orientation = orientation;
+    }
+
+    public addTab(id: string, title: string, content: Widget, scrollable: boolean = false) {
+        this.items.set(id, { title, content });
+        this.itemsScrollable.set(id, scrollable);
+
+        const itemControl = new Label(id + ".itemControl", "span");
+
+        itemControl.setText(title);
+        itemControl.addClass("WUITabControl");
+
+        if (this.orientation === "horizontal") {
+            itemControl.setH(TAB_HEADER_SIZE);
+            itemControl.getBody().style.lineHeight = TAB_HEADER_SIZE + "px";
+        } else if (this.orientation === "vertical") {
+            itemControl.getBody().style.writingMode = "vertical-rl";
+            itemControl.getBody().style.transform = "scale(-1,-1)";
+            itemControl.getBody().style.paddingTop = "15px";
+            itemControl.getBody().style.paddingBottom = "15px";
+            itemControl.getBody().style.paddingRight = "12px";
+            itemControl.setW(TAB_HEADER_SIZE);
+        }
+
+        itemControl.subscribe({
+            event: "click",
+            then: (_e, _w) => {
+                this.setTab(id);
+            },
+        });
+
+        this.itemControls.addItem(id, itemControl);
+    }
+
+    public addIconTab(id: string, icon: string, content: Widget, scrollable: boolean = false) {
+        this.items.set(id, { title: icon, content });
+        this.itemsScrollable.set(id, scrollable);
+
+        const itemControl = new IconButton(id + ".itemControl", icon);
+        itemControl.setW(40);
+        itemControl.setH(TAB_HEADER_SIZE);
+
+        itemControl.subscribe({
+            event: "click",
+            then: (_e, _w) => {
+                this.setTab(id);
+            },
+        });
+
+        this.itemControls.addItem(id, itemControl);
+    }
+
+    public setTab(id: string) {
+        this.content.removeAllChilds();
+        const actualTab = this.items.get(id);
+
+        for (const itemId of this.items.keys()) {
+            if (itemId != id) {
+                this.items.get(itemId)?.content.setVisible(false);
+                const ctrlTab = window.w.get(itemId + ".itemControl");
+                if (ctrlTab) {
+                    if (this.orientation === "horizontal") {
+                        ctrlTab.deleteClass("WUITabControlActive");
+                        ctrlTab.addClass("WUITabControl");
+                    } else if (this.orientation === "vertical") {
+                        if (ctrlTab instanceof IconButton) {
+                            ctrlTab.deleteClass("WUITabControlActiveIcon_VL");
+                        } else if (ctrlTab instanceof Label) {
+                            ctrlTab.deleteClass("WUITabControlActive_VL");
+                        }
+                        ctrlTab.addClass("WUITabControl");
+                    }
+                }
+            } else {
+                const ctrlTab = window.w.get(itemId + ".itemControl");
+                if (ctrlTab) {
+                    if (this.orientation === "horizontal") {
+                        ctrlTab.addClass("WUITabControlActive");
+                    } else if (this.orientation === "vertical") {
+                        if (ctrlTab instanceof IconButton) {
+                            ctrlTab.addClass("WUITabControlActiveIcon_VL");
+                        } else if (ctrlTab instanceof Label) {
+                            ctrlTab.addClass("WUITabControlActive_VL");
+                        }
+                    }
+                }
+            }
+        }
+
+        if (actualTab) {
+            this.items.get(id)?.content.setVisible(true);
+            const scrollable = this.itemsScrollable.get(id);
+
+            this.content.addChild(actualTab.content);
+
+            if (scrollable) {
+                if (this.verticalScrollbar == null) {
+                    this.verticalScrollbar = new Scroll(
+                        actualTab.content.id + ".verticalScrollbar",
+                        this.content,
+                        "vertical"
+                    );
+                }
+            } else {
+                if (this.verticalScrollbar) {
+                    this.verticalScrollbar.dispose();
+                    this.verticalScrollbar = null;
+                }
+            }
+        }
+
+        this.render();
+    }
+
+    public render(): void {
+        super.render();
+        if (this.verticalScrollbar) {
+            this.verticalScrollbar.render();
+        }
+    }
+}

package/src/ui/textarea.ui.ts

@@ -0,0 +1,20 @@
+import "./styles/textarea.css";
+import { Widget } from "./widget.ui";
+
+export class TextArea extends Widget {
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "textarea", parent);
+
+        this.addClass("WUITextArea");
+    }
+
+    public setText(text: string): void {
+        const textArea = this.getBody() as HTMLTextAreaElement;
+        textArea.value = text;
+    }
+
+    public getText(): string {
+        const textArea = this.getBody() as HTMLTextAreaElement;
+        return textArea.value;
+    }
+}

package/src/ui/textbox.ui.ts

@@ -3,10 +3,14 @@ import { Widget, WidgetTypes } from "./widget.ui";
 
 export type InputTypes =
     | "text"
+    | "date"
+    | "datetime-local"
+    | "file"
     | "number"
     | "password"
     | "email"
     | "url"
+    | "color"
     | "tel";
 
 export class Textbox extends Widget {
@@ -71,6 +75,10 @@ export class Textbox extends Widget {
     }
 
     private positionLabel(): void {
+        if (this.title === "") {
+            this.label.setVisible(false);
+            return;
+        }
         if (this.getValue() === "") {
             this.moveLabelToCenter();
         } else {
@@ -99,6 +107,7 @@ export class Textbox extends Widget {
 
         this.positionLabel();
         this.input.setWH(this.getW(), this.getH());
+        this.input.getBody().style.lineHeight = this.getH() + "px";
         this.input.render();
 
         super.render();

package/src/ui/toggle.ui.ts

@@ -0,0 +1,49 @@
+import { Widget } from "./widget.ui";
+import { IconButton } from "./IconButton.ui";
+
+export class ToggleButton extends IconButton {
+    state: boolean;
+    toggleOnIcon: string;
+    toggleOffIcon: string;
+
+    constructor(
+        id: string,
+        text: string = "",
+        toggleOnIcon: string = "toggle_on",
+        toggleOffIcon: string = "toggle_off",
+        parent: Widget | null = null
+    ) {
+        super(id, toggleOffIcon, parent);
+
+        this.toggleOnIcon = toggleOnIcon;
+        this.toggleOffIcon = toggleOffIcon;
+
+        this.state = false;
+
+        if (text) {
+            this.setText(text);
+        }
+
+        this.setVariant("text");
+
+        this.subscribe({
+            event: "click",
+            then: () => {
+                this.toggle();
+            },
+        });
+    }
+
+    public setState(state: boolean): void {
+        this.state = state;
+        this.setIcon(state ? this.toggleOnIcon : this.toggleOffIcon);
+    }
+
+    public toggle(): void {
+        this.setState(!this.state);
+    }
+
+    public getState(): boolean {
+        return this.state;
+    }
+}

package/src/ui/toolbar.ui.ts

@@ -1,13 +1,17 @@
+import "./styles/toolbar.css";
 import { IWidget } from "src/interfaces/widget.interface";
-import { Widget, WidgetTypes } from "./widget.ui";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
 import { IconButton } from "./IconButton.ui";
+import { OrientationTypes } from "src/types/orientation.type";
 
-export type ToolbarOrientationTypes = "horizontal" | "vertical";
-const TOOLBAR_SIZE = 40;
+export type ToolbarVariants = "contained" | "outlined";
+
+const TOOLBAR_SIZE = 48;
 const TOOLBAR_BUTTON_SIZE = 40;
 
 export class Toolbar extends Widget {
-    orientation: ToolbarOrientationTypes;
+    orientation: OrientationTypes;
+    variant: ToolbarVariants;
     items: Map<string, IWidget>;
     size: number; //Indica el alto o ancho de la toolbar.
 
@@ -15,18 +19,33 @@ export class Toolbar extends Widget {
     btnLeft: IconButton;
     btnRight: IconButton;
 
-    constructor(id: string, parent: Widget | null = null, orientationType: ToolbarOrientationTypes = "horizontal") {
+    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.setType(WidgetTypes.FILL);
         this.getBody().style.overflow = "hidden";
 
         this.btnLeft = new IconButton(this.id + ".btnLeft", this.getIconLeft());
@@ -66,6 +85,12 @@ export class Toolbar extends Widget {
         });
     }
 
+    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";
@@ -86,7 +111,7 @@ export class Toolbar extends Widget {
      * @param {ToolbarOrientationTypes} orientationType - the type of orientation to set
      * @return {void}
      */
-    public setOrientation(orientationType: ToolbarOrientationTypes, size: number = TOOLBAR_SIZE): void {
+    public setOrientation(orientationType: OrientationTypes, size: number = TOOLBAR_SIZE): void {
         this.orientation = orientationType;
         this.size = size;
     }
@@ -134,8 +159,11 @@ export class Toolbar extends Widget {
     }
 
     public render(): void {
+        super.render();
         const fullSize = this.getFullSize();
-        const availableSize = this.orientation === "horizontal" ? this.getW() : this.getH();
+        const parent = this.getParent();
+        const parentH = parent?.getH() || 0;
+        const availableSize = this.orientation === "horizontal" ? this.getW() : parentH;
 
         if (fullSize > availableSize) {
             this.btnLeft.setVisible(true);
@@ -190,14 +218,14 @@ export class Toolbar extends Widget {
                 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();
         }
-
-        super.render();
     }
 }

package/src/ui/valuebar.ui.ts

@@ -0,0 +1,116 @@
+import "./styles/valuebar.css";
+import { OrientationTypes } from "src/types/orientation.type";
+import { Widget } from "./widget.ui";
+import { Draggable } from "./draggable.ui";
+
+export class ValueBar extends Widget {
+    orientation: OrientationTypes;
+    value: number;
+
+    containerBar: Widget;
+    bar: Widget;
+    handler: Widget;
+
+    draggable: Draggable;
+
+    constructor(
+        id: string,
+        orientation: OrientationTypes = "horizontal",
+        parent: Widget | null = null
+    ) {
+        super(id, "div", parent);
+
+        this.containerBar = new Widget(id + ".containerBar", "div", this);
+        this.bar = new Widget(id + ".bar", "div", this.containerBar);
+        this.handler = new Widget(id + ".handler", "div", this);
+
+        this.addClass("WUIValueBar");
+        this.containerBar.addClass("WUIValueBarContainer");
+        this.bar.addClass("WUIValueBarBar");
+        this.handler.addClass("WUIValueBarHandler");
+
+        this.draggable = new Draggable(this.handler, orientation);
+
+        this.handler.subscribe({
+            event: "drag",
+            then: (_e, _w) => {
+                this.updateValueFromHandlerPosition();
+            },
+        });
+
+        this.orientation = orientation;
+        this.value = 10;
+        this.handler.raisteTop();
+    }
+
+    public setValue(value: number): void {
+        this.value = value;
+        this.render();
+    }
+
+    public updateValueFromHandlerPosition(): void {
+        if (this.orientation === "horizontal") {
+            const maxX = this.draggable.maxX ? this.draggable.maxX : 1;
+            const ratio = this.handler.getX() / maxX;
+            this.value = Math.round(ratio * 100);
+        } else if (this.orientation === "vertical") {
+            const maxY = this.draggable.maxY ? this.draggable.maxY : 1;
+            const ratio = this.handler.getY() / maxY;
+            this.value = Math.round(ratio * 100);
+        }
+
+        this.render();
+    }
+
+    public render(): void {
+        super.render();
+
+        if (this.orientation === "horizontal") {
+            const handlerSize = 24;
+            const heightBar = 14;
+            const width = this.getW() - 3;
+            const height = this.getH();
+            const widthBar = width * (this.value / 100);
+
+            this.containerBar.setX(0);
+            this.containerBar.setY(height / 2 - heightBar / 2);
+            this.containerBar.setH(heightBar);
+            this.containerBar.setW(width);
+
+            this.bar.setX(0);
+            this.bar.setY(0);
+            this.bar.setW(widthBar);
+            this.bar.setH(heightBar - 4);
+
+            this.handler.setX(widthBar - handlerSize + 2);
+            this.handler.setY(height / 2 - handlerSize / 2);
+            this.handler.setWH(handlerSize, handlerSize);
+
+            this.draggable.setMinX(0);
+            this.draggable.setMaxX(width - handlerSize + 2);
+        } else if (this.orientation === "vertical") {
+            const handlerSize = 24;
+            const widthBar = 14;
+            const height = this.getH() - 3;
+            const width = this.getW();
+            const heightBar = height * (this.value / 100);
+
+            this.containerBar.setY(0);
+            this.containerBar.setX(width / 2 - widthBar / 2);
+            this.containerBar.setW(widthBar);
+            this.containerBar.setH(height);
+
+            this.bar.setX(0);
+            this.bar.setY(0);
+            this.bar.setH(heightBar);
+            this.bar.setW(widthBar - 4);
+
+            this.handler.setY(heightBar - handlerSize + 2);
+            this.handler.setX(width / 2 - handlerSize / 2);
+            this.handler.setWH(handlerSize, handlerSize);
+
+            this.draggable.setMinY(0);
+            this.draggable.setMaxY(height - handlerSize + 2);
+        }
+    }
+}

package/src/ui/vpanel.ui.ts

@@ -0,0 +1,128 @@
+import { Draggable } from "./draggable.ui";
+import "./styles/vpanel.css";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+
+const VPANEL_HANDLER_SIZE = 4;
+
+export class VPanel extends Widget {
+    topContent: Widget | null;
+    bottomContent: Widget | null;
+
+    topHeight: number | null;
+    bottomHeight: number | null;
+
+    handler: Widget;
+    draggable: Draggable;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.setAlign(WidgetAlignTypes.VERTICAL);
+        this.setType(WidgetTypes.FILL);
+        //this.setPadding(VPANEL_HANDLER_SIZE);
+
+        this.handler = new Widget(id + ".handler", "div", null);
+        this.handler.addClass("WUIVPanelHandler");
+
+        this.draggable = new Draggable(this.handler, "vertical");
+        this.draggable.setDraggingClass("WUIVPanelDragging");
+        this.draggable.setBackgroundCursor("row-resize");
+
+        this.handler.subscribe({
+            event: "drag",
+            then: (_e, _w) => {
+                this.updateSizeFromHandlerPosition();
+            },
+        });
+
+        this.subscribe({
+            event: "mousemove",
+            then: (e, _w) => {
+                this.updateHandlerOpacity(e as MouseEvent);
+            },
+        });
+
+        this.topContent = null;
+        this.bottomContent = null;
+
+        this.topHeight = null;
+        this.bottomHeight = null;
+    }
+
+    private updateHandlerOpacity(e: MouseEvent): void {
+        const handlerY = this.handler.getY();
+        const mouseY = e.clientY;
+        const umbral = 100; //Distancia donde comienza a aparecer.
+        const minDistance = 20; //Distancia a la que toma 100 de opacidad
+        const distance = Math.abs(mouseY - handlerY);
+
+        if (distance < umbral && distance > minDistance) {
+            const ratio = 1 - distance / umbral;
+            this.handler.getBody().style.opacity = ratio.toString();
+        } else if (distance < minDistance) {
+            this.handler.getBody().style.opacity = "1";
+        } else {
+            this.handler.getBody().style.opacity = "0";
+        }
+    }
+
+    public setTop(content: Widget, fixHeight: number | null = null): void {
+        this.topContent = content;
+        this.topHeight = fixHeight;
+        if (fixHeight !== null) {
+            this.bottomHeight = null;
+            this.topContent.setFixedSize(fixHeight);
+        }
+        this.addChild(content);
+
+        const spacer = new Widget("spacer." + Date.now().toString(), "div", null);
+        spacer.setType(WidgetTypes.FILL);
+        spacer.setFixedSize(VPANEL_HANDLER_SIZE);
+        this.addChild(spacer);
+    }
+
+    public setBottom(content: Widget, fixHeight: number | null = null): void {
+        this.bottomContent = content;
+        this.bottomHeight = fixHeight;
+        if (fixHeight !== null) {
+            this.topHeight = null;
+            this.bottomContent.setFixedSize(fixHeight);
+        }
+        this.addChild(content);
+    }
+
+    private updateSizeFromHandlerPosition(): void {
+        if (this.topHeight !== null) {
+            const topY = this.topContent ? this.topContent.getY(true) : 0;
+            this.topHeight = this.handler.getY() - topY;
+        } else if (this.bottomHeight !== null) {
+            this.bottomHeight = this.getH() - this.handler.getY();
+        }
+
+        this.render();
+    }
+
+    public render(): void {
+        super.render();
+        this.handler.setH(VPANEL_HANDLER_SIZE);
+        this.handler.setW(this.getW());
+
+        if (this.topHeight !== null) {
+            const topY = this.topContent ? this.topContent.getY(true) : 0;
+            this.handler.setY(topY + this.topHeight);
+            this.topContent?.setFixedSize(this.topHeight);
+        } else if (this.bottomHeight !== null) {
+            const bottomY = this.bottomContent ? this.bottomContent.getY(true) : 0;
+            this.handler.setY(bottomY + this.bottomHeight);
+            this.bottomContent?.setFixedSize(this.bottomHeight);
+        } else {
+            if (this.topHeight === null) {
+                this.topHeight = this.getH() / 2 - VPANEL_HANDLER_SIZE / 2;
+            }
+            const topY = this.topContent ? this.topContent.getY(true) : 0;
+            this.handler.setY(topY + this.topHeight);
+            this.topContent?.setFixedSize(this.topHeight);
+        }
+
+        this.handler.setX(this.getX(true));
+    }
+}