cedro 0.1.4 → 0.1.5

package/src/ui/hpanel.ui.ts

@@ -0,0 +1,127 @@
+import { Draggable } from "./draggable.ui";
+import "./styles/hpanel.css";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+
+const HPANEL_HANDLER_SIZE = 4;
+
+export class HPanel extends Widget {
+    leftContent: Widget | null;
+    rightContent: Widget | null;
+
+    leftWidth: number | null;
+    rightWidth: number | null;
+
+    handler: Widget;
+    draggable: Draggable;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.setAlign(WidgetAlignTypes.HORIZONTAL);
+        this.setType(WidgetTypes.FILL);
+
+        this.handler = new Widget(id + ".handler", "div", null);
+        this.handler.addClass("WUIHPanelHandler");
+
+        this.draggable = new Draggable(this.handler, "horizontal");
+        this.draggable.setDraggingClass("WUIHPanelDragging");
+        this.draggable.setBackgroundCursor("col-resize");
+
+        this.handler.subscribe({
+            event: "drag",
+            then: (_e, _w) => {
+                this.updateSizeFromHandlerPosition();
+            },
+        });
+
+        this.subscribe({
+            event: "mousemove",
+            then: (e, _w) => {
+                this.updateHandlerOpacity(e as MouseEvent);
+            },
+        });
+
+        this.leftContent = null;
+        this.rightContent = null;
+
+        this.leftWidth = null;
+        this.rightWidth = null;
+    }
+
+    private updateHandlerOpacity(e: MouseEvent): void {
+        const handlerX = this.handler.getX();
+        const mouseX = e.clientX;
+        const umbral = 100; //Distancia donde comienza a aparecer.
+        const minDistance = 20; //Distancia a la que toma 100 de opacidad
+        const distance = Math.abs(mouseX - handlerX);
+
+        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 setLeft(content: Widget, fixWidth: number | null = null): void {
+        this.leftContent = content;
+        this.leftWidth = fixWidth;
+        if (fixWidth !== null) {
+            this.rightWidth = null;
+            this.leftContent.setFixedSize(fixWidth);
+        }
+        this.addChild(content);
+
+        const spacer = new Widget("spacer." + Date.now().toString(), "div", null);
+        spacer.setType(WidgetTypes.FILL);
+        spacer.setFixedSize(HPANEL_HANDLER_SIZE);
+        this.addChild(spacer);
+    }
+
+    public setRight(content: Widget, fixWidth: number | null = null): void {
+        this.rightContent = content;
+        this.rightWidth = fixWidth;
+        if (fixWidth !== null) {
+            this.leftWidth = null;
+            this.rightContent.setFixedSize(fixWidth);
+        }
+        this.addChild(content);
+    }
+
+    private updateSizeFromHandlerPosition(): void {
+        if (this.leftWidth !== null) {
+            const leftX = this.leftContent ? this.leftContent.getX(true) : 0;
+            this.leftWidth = this.handler.getX() - leftX;
+        } else if (this.rightWidth !== null) {
+            this.rightWidth = this.getW() - this.handler.getX();
+        }
+
+        this.render();
+    }
+
+    public render(): void {
+        super.render();
+        this.handler.setW(HPANEL_HANDLER_SIZE);
+        this.handler.setH(this.getH());
+
+        if (this.leftWidth !== null) {
+            const leftX = this.leftContent ? this.leftContent.getX(true) : 0;
+            this.handler.setX(leftX + this.leftWidth);
+            this.leftContent?.setFixedSize(this.leftWidth);
+        } else if (this.rightWidth !== null) {
+            const rightX = this.rightContent ? this.rightContent.getX(true) : 0;
+            this.handler.setX(rightX + this.rightWidth);
+            this.rightContent?.setFixedSize(this.rightWidth);
+        } else {
+            if (this.leftWidth === null) {
+                this.leftWidth = this.getW() / 2 - HPANEL_HANDLER_SIZE / 2;
+            }
+            const leftX = this.leftContent ? this.leftContent.getX(true) : 0;
+            this.handler.setX(leftX + this.leftWidth);
+            this.leftContent?.setFixedSize(this.leftWidth);
+        }
+
+        this.handler.setY(this.getY(true));
+    }
+}

package/src/ui/iconButtonMenu.ui.ts

@@ -0,0 +1,59 @@
+import { IconButton } from "./IconButton.ui";
+import { Menu } from "./menu.ui";
+import { SelectItem } from "./select.ui";
+
+export class IconButtonMenu extends IconButton {
+    menu: Menu;
+    items: Array<SelectItem>;
+    selectedItem: SelectItem | null;
+
+    public constructor(id: string, icon: string) {
+        super(id, icon);
+
+        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/index.ts

@@ -1,29 +1,57 @@
+import { Accordion } from "./accordion";
 import { Button } from "./button.ui";
-import { Widget } from "./widget.ui";
+import { ButtonColor } from "./buttonColor.ui";
+import { ButtonMenu } from "./buttonmenu.ui";
+import { ButtonStack } from "./buttonstack.ui";
+import { Checkbox } from "./checkbox.ui";
+import { WidgetAlignTypes, WidgetTypes, Widget } from "./widget.ui";
 import { Dialog } from "./dialog";
+import { HPanel } from "./hpanel.ui";
 import { Icon } from "./Icon.ui";
 import { IconButton } from "./IconButton.ui";
 import { Label } from "./label.ui";
 import { Menu } from "./menu.ui";
+import { ProgressBar } from "./progressbar.ui";
 import { Select } from "./select.ui";
+import { Switch } from "./switch.ui";
 import { Textbox } from "./textbox.ui";
 import { Tabs } from "./tabs.ui";
+import { TextArea } from "./textarea.ui";
 import { Toolbar } from "./toolbar.ui";
 import { DataGrid } from "./datagrid.ui";
+import { RadioButton } from "./radiobutton";
+import { ValueBar } from "./valuebar.ui";
+import { VPanel } from "./vpanel.ui";
 import { createWidget } from "./widget.builder.ui";
+import { IconButtonMenu } from "./iconButtonMenu.ui";
 
 export {
+    Accordion,
     Button,
-    Widget,
+    ButtonColor,
+    ButtonMenu,
+    ButtonStack,
+    Checkbox,
     Dialog,
+    HPanel,
     Icon,
     IconButton,
+    IconButtonMenu,
     Label,
     Menu,
+    ProgressBar,
+    RadioButton,
     Select,
+    Switch,
     Tabs,
+    TextArea,
     Textbox,
     Toolbar,
+    ValueBar,
+    VPanel,
     DataGrid,
+    Widget,
+    WidgetAlignTypes,
+    WidgetTypes,
     createWidget,
 };

package/src/ui/loading.ui.ts

@@ -0,0 +1,10 @@
+import "./styles/loading.css";
+import { Widget } from "./widget.ui";
+
+export class Loading extends Widget {
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.addClass("WUILoading");
+        this.setVisible(false);
+    }
+}

package/src/ui/menu.ui.ts

@@ -3,13 +3,16 @@ import { IWidget } from "../interfaces/widget.interface";
 import { IconButton } from "./IconButton.ui";
 import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
 
+const MENU_OPTION_HEIGHT = 40;
+
 export class Menu extends Widget {
     background: Widget;
     options: Map<string, IconButton>;
+    optionsWidth: Array<number>;
     triggeredById: string | null;
     triggeredBy: IWidget | null;
     triggeredBySearchCode: any;
-    withCalculation: boolean;
+
     constructor(id: string, trigeredById: string | null, parent: IWidget | null = null) {
         super(id, "div", parent);
 
@@ -20,16 +23,17 @@ export class Menu extends Widget {
 
         this.triggeredById = trigeredById;
         this.setType(WidgetTypes.CUSTOM);
+        this.setAlign(WidgetAlignTypes.VERTICAL);
+        this.setPadding(4);
 
         this.triggeredBy = null;
 
         this.options = new Map<string, IconButton>();
+        this.optionsWidth = new Array<number>();
 
         this.addClass("WUIMenu");
         this.addClass("WUIMenuTransparent");
 
-        this.withCalculation = false;
-
         this.triggeredBySearchCode = setInterval(() => {
             if (!this.triggeredById) {
                 clearInterval(this.triggeredBySearchCode);
@@ -64,44 +68,26 @@ export class Menu extends Widget {
         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;
+        return Math.max(...this.optionsWidth) * 1.1;
     }
 
     wakeUp(): void {
-        if (!this.withCalculation) {
-            let maxWidth = this.getMaxWidth();
-
-            for (const [, dataOption] of this.options) {
-                const option = dataOption as IconButton;
-                option.addClass("WUIMenuOptions100w");
-                option.render();
+        const maxWidth = this.getMaxWidth();
+        let menuWidth = 0;
+        if (this.triggeredBy) {
+            const triggerWidth = this.triggeredBy.getBody().clientWidth;
+            if (triggerWidth > maxWidth) {
+                menuWidth = triggerWidth;
+            } else {
+                menuWidth = maxWidth;
             }
-            this.deleteClass("WUIMenuTransparent");
-            this.addClass("WUIMenuHidden");
-            this.setW(maxWidth);
-            this.withCalculation = true;
+        } else {
+            menuWidth = maxWidth;
         }
 
+        this.setW(menuWidth);
+
         this.background.setVisible(true);
         this.background.raisteTop();
 
@@ -110,6 +96,8 @@ export class Menu extends Widget {
         this.deleteClass("WUIMenuHidden");
         this.addClass("WUIMenuVisible");
 
+        this.render();
+
         if (this.triggeredBy) {
             const position = this.triggeredBy.getPosition(false);
 
@@ -118,7 +106,7 @@ export class Menu extends Widget {
 
             const screenW = window.innerWidth;
             const screenH = window.innerHeight;
-            const menuW = this.getBody().clientWidth;
+            const menuW = menuWidth;
             const menuH = this.getBody().clientHeight;
             let positionX = position.x;
             let positionY = position.y;
@@ -126,8 +114,8 @@ export class Menu extends Widget {
             let openRight = true;
             let openBottom = true;
 
-            if (position.x + menuW + triggerW > screenW) {
-                positionX = screenW - menuW - triggerW;
+            if (position.x + menuW > screenW) {
+                positionX = screenW - menuW;
                 openRight = false;
             }
 
@@ -140,18 +128,16 @@ export class Menu extends Widget {
                 this.setX(positionX);
                 this.setY(positionY + triggerH);
             } else if (openRight && !openBottom) {
-                this.setX(positionX + triggerW);
+                this.setX(positionX);
                 this.setY(positionY);
             } else if (!openRight && openBottom) {
                 /*abajo izq: Works!*/
-                this.setX(positionX + triggerW);
+                this.setX(positionX);
                 this.setY(positionY + triggerH);
             } else if (!openRight && !openBottom) {
-                this.setX(positionX + triggerW);
+                this.setX(positionX);
                 this.setY(positionY - triggerH);
             }
-
-            //this.setY(positionY);
         }
     }
 
@@ -165,17 +151,19 @@ export class Menu extends Widget {
     }
 
     public clearOptions(): void {
+        this.optionsWidth = new Array<number>();
         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);
+        const newOption = new IconButton(id, icon, null);
+        newOption.setType(WidgetTypes.FILL);
+        newOption.setAlign(WidgetAlignTypes.VERTICAL);
         newOption.setText(label);
-        newOption.addClass("WUIMenuOptions");
+        newOption.setFixedSize(MENU_OPTION_HEIGHT);
+        //newOption.addClass("WUIMenuOptions");
+        //newOption.setH(MENU_OPTION_HEIGHT);
 
         newOption.subscribe({
             event: "click",
@@ -187,5 +175,11 @@ export class Menu extends Widget {
         });
 
         this.options.set(id, newOption);
+
+        const width = newOption.getBody().clientWidth;
+        this.optionsWidth.push(width);
+        const height = this.options.size * MENU_OPTION_HEIGHT;
+        this.addChild(newOption);
+        this.setH(height);
     }
 }

package/src/ui/progressbar.ui.ts

@@ -0,0 +1,74 @@
+import { Label } from "./label.ui";
+import "./styles/progressbar.css";
+import { Widget } from "./widget.ui";
+
+const PROGRESS_BAR_HEIGHT = 40;
+
+//icono para el progress bar interactivo humidity_high
+
+export class ProgressBar extends Widget {
+    private value: number;
+    private paddingBar: number;
+
+    private bar: Widget;
+    private lblValue: Label;
+
+    public constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+
+        this.setH(PROGRESS_BAR_HEIGHT);
+
+        this.paddingBar = 0;
+
+        this.bar = new Widget(id + ".bar", "div", this);
+        this.bar.addClass("WUIProgressBarBar");
+
+        this.value = 0;
+        this.addClass("WUIProgressBarContainer");
+
+        this.lblValue = new Label(id + ".value", "span", this);
+        this.lblValue.setText(this.value + "%");
+
+        this.lblValue.addClass("WUIProgressBarLabel");
+    }
+
+    public setPaddingBar(p: number): void {
+        this.paddingBar = p;
+    }
+
+    public hideLabel(): void {
+        this.lblValue.setVisible(false);
+    }
+
+    public displayLabel(): void {
+        this.lblValue.setVisible(true);
+    }
+
+    public render(): void {
+        super.render();
+
+        const padding = this.paddingBar;
+        const width = this.getW() - padding;
+        const height = this.getH();
+        const widthBar = width * (this.value / 100);
+
+        this.lblValue.setX(width / 2 - this.lblValue.getW() / 2);
+        this.lblValue.setY(height / 2 - this.lblValue.getH() / 2);
+        this.lblValue.raisteTop();
+
+        this.bar.setX(padding);
+        this.bar.setY(padding);
+        this.bar.setW(widthBar);
+        this.bar.setH(height - padding * 2);
+    }
+
+    public setValue(value: number): void {
+        this.value = value;
+        this.lblValue.setText(this.value + "%");
+        this.render();
+    }
+
+    public getValue(): number {
+        return this.value;
+    }
+}

package/src/ui/radiobutton.ts

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

package/src/ui/scroll.ui.ts

@@ -22,7 +22,6 @@ type ScrollData = {
 export class Scroll extends Widget {
     contentArea: Widget;
     orientation: OrientationTypes;
-
     drag: Draggable;
 
     constructor(id: string, contentArea: Widget, orientation: OrientationTypes = "vertical") {
@@ -134,7 +133,7 @@ export class Scroll extends Widget {
                 return;
             }
 
-            this.setX(this.contentArea.getW() - SCROLL_SIZE - 1);
+            this.setX(this.contentArea.getX() + this.contentArea.getW() - SCROLL_SIZE - 1);
             this.setY(1 + this.contentArea.getY() + scrollData.position);
             this.setH(scrollData.scrollBarHeight);
             this.setW(SCROLL_SIZE);

package/src/ui/select.ui.ts

@@ -37,8 +37,11 @@ export class Select extends Textbox {
 
                 this.menu.wakeUp();
 
+                console.log(this.getBody().clientWidth, this.menu.getBody().clientWidth);
+
                 if (this.getBody().clientWidth > this.menu.getBody().clientWidth) {
                     this.menu.setW(this.getBody().clientWidth);
+                    this.menu.resize();
                 }
             },
         });

package/src/ui/styles/accordion.css

@@ -0,0 +1,9 @@
+.WUIAccordion {
+    background-color: transparent;
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-bottom: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-radius: 0.25rem;
+    border-color: var(--palette-divider);
+}

package/src/ui/styles/button.css

@@ -12,7 +12,6 @@
     border-radius: 0.25rem;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    text-transform: uppercase;
 }
 
 .WUIButton-text-color-primary {
@@ -89,7 +88,6 @@
     border-radius: 0.25rem;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    text-transform: uppercase;
 }
 
 .WUIButton-outlined-color-primary {
@@ -173,7 +171,6 @@
     border-radius: 0.25rem;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    text-transform: uppercase;
 }
 
 .WUIButton-contained-color-primary {

package/src/ui/styles/buttoncolor.css

@@ -0,0 +1,8 @@
+.WUIButtonColorInput {
+    width: 100%;
+    border: none;
+    background-color: transparent;
+    height: 100%;
+    padding: 5px;
+    margin: auto;
+}

package/src/ui/styles/datagrid.css

@@ -1,10 +1,36 @@
+.WUIDataGrid {
+    background-color: transparent;
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-bottom: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-radius: 0.25rem;
+    border-color: var(--palette-divider);
+}
+
 .WUIDataGrid-Header {
-    border-bottom: solid 1px var(--palette-primary-text-light);
+    border-bottom: solid 1px var(--palette-divider);
+}
+
+.WUIDataGrid-HeaderLabel:hover {
+    border-bottom: solid 1px var(--palette-divider);
+    background-color: var(--palette-action-hover) !important;
+    cursor: default;
 }
 
 .WUIDataGrid-HeaderLabel {
-    border-right: solid 1px var(--palette-primary-text-light);
+    border-right: solid 1px var(--palette-divider);
     /*border-bottom: solid 1px var(--palette-primary-text-light);*/
     padding-left: 5px;
     font-weight: bold;
 }
+
+.WUIDataGrid-Row {
+    border-bottom: solid 1px var(--palette-divider);
+    background-color: transparent;
+}
+
+.WUIDataGrid-Row:hover {
+    border-bottom: solid 1px var(--palette-divider);
+    background-color: var(--palette-action-hover) !important;
+}

package/src/ui/styles/hpanel.css

@@ -0,0 +1,12 @@
+.WUIHPanelHandler {
+    position: absolute;
+    overflow: hidden;
+    cursor: col-resize;
+    background-color: var(--palette-divider);
+    opacity: 0.1;
+}
+
+.WUIHPanelDragging {
+    background-color: var(--palette-divider) !important;
+    opacity: 1;
+}

package/src/ui/styles/loading.css

@@ -0,0 +1,12 @@
+.WUILoading {
+    background-color: var(--palette-background-default);
+    background-image: url("loading.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute !important;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    opacity: 0.8;
+}