cedro 0.1.4 → 0.1.6

package/src/ui/styles/vstackbutton.css

@@ -0,0 +1,202 @@
+/****************************************************************************/
+/***********************************STACK-START******************************/
+/****************************************************************************/
+
+.WUIButton-stack-vertical-start {
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    background-color: transparent;
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-bottom: none;
+    font-size: 1rem;
+    border-top-left-radius: 0.25rem;
+    border-top-right-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-stack-vertical-start-color-primary {
+    color: var(--palette-text-primary);
+    background-color: var(--palette-background-default);
+    border-color: var(--palette-primary-main);
+}
+
+.WUIButton-stack-vertical-start-color-primary:hover {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}
+
+/****************************************************************************/
+/***********************************STACK-MIDDLE******************************/
+/****************************************************************************/
+
+.WUIButton-stack-vertical-middle {
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    background-color: transparent;
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-bottom: none;
+    font-size: 1rem;
+    border-radius: 0;
+    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-stack-vertical-middle-color-primary {
+    color: var(--palette-text-primary);
+    background-color: var(--palette-background-default);
+    border-color: var(--palette-primary-main);
+}
+
+.WUIButton-stack-vertical-middle-color-primary:hover {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}
+
+/**************************************************************************/
+/***********************************STACK-END******************************/
+/**************************************************************************/
+
+.WUIButton-stack-vertical-end {
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    background-color: transparent;
+    border-left: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-bottom: solid 0.13rem;
+    font-size: 1rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0.25rem;
+    border-top-right-radius: 0;
+    border-bottom-right-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-stack-vertical-end-color-primary {
+    color: var(--palette-text-primary);
+    background-color: var(--palette-background-default);
+    border-color: var(--palette-primary-main);
+}
+
+.WUIButton-stack-vertical-end-color-primary:hover {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}
+
+/************************************************************************/
+/******************************STACK-START-ACTIVE************************/
+/************************************************************************/
+
+.WUIButton-stack-vertical-start-active {
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-bottom: none;
+    font-size: 1rem;
+    border-top-left-radius: 0.25rem;
+    border-top-right-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-stack-vertical-start-active-color-primary {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}
+
+.WUIButton-stack-vertical-start-active-color-primary:hover {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}
+
+/*************************************************************************/
+/**************************STACK-MIDDLE-ACTIVE****************************/
+/*************************************************************************/
+
+.WUIButton-stack-vertical-middle-active {
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-bottom: none;
+    font-size: 1rem;
+    border-radius: 0;
+    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-stack-vertical-middle-active-color-primary {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}
+
+.WUIButton-stack-vertical-middle-active-color-primary:hover {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}
+
+/**************************************************************************/
+/********************************STACK-END-ACTIVE**************************/
+/**************************************************************************/
+
+.WUIButton-stack-vertical-end-active {
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-left: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-bottom: solid 0.13rem;
+    font-size: 1rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0.25rem;
+    border-top-right-radius: 0;
+    border-bottom-right-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-stack-vertical-end-active-color-primary {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}
+
+.WUIButton-stack-vertical-end-active-color-primary:hover {
+    color: var(--palette-primary-text-light);
+    background-color: var(--palette-primary-light);
+    border-color: var(--palette-primary-main);
+}

package/src/ui/switch.ui.ts

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

package/src/ui/tabs.ui.ts

@@ -5,31 +5,24 @@ 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_HEIGHT = 40;
+const TAB_HEADER_SIZE = 40;
 
 export type TabItem = {
     title: string;
     content: Widget;
 };
 
-class TabControl extends Label {
-    constructor(id: string, parent: Widget | null = null, text: string) {
-        super(id, "span", parent);
-        this.setText(text);
-        this.addClass("WUITabControl");
-        this.getBody().style.lineHeight = TAB_HEADER_HEIGHT + "px";
-    }
-}
 export class Tabs extends Widget {
     orientation: OrientationTypes;
 
-    header: Widget;
     content: Widget;
-
     itemControls: Toolbar;
 
     items: Map<string, TabItem>;
+    itemsScrollable: Map<string, boolean>;
+    verticalScrollbar: Scroll | null;
 
     constructor(
         id: string,
@@ -39,10 +32,6 @@ export class Tabs extends Widget {
         super(id, "div", parent);
         this.orientation = orientation;
 
-        this.header = new Widget(id + ".header", "div");
-        this.header.setType(WidgetTypes.FILL);
-        this.header.setFixedSize(TAB_HEADER_HEIGHT);
-
         this.content = new Widget(id + ".content", "div");
         this.content.setType(WidgetTypes.FILL);
         this.content.addClass("WUITabContainer");
@@ -55,24 +44,44 @@ export class Tabs extends Widget {
             this.setAlign(WidgetAlignTypes.HORIZONTAL);
         }
 
-        this.addChild(this.header);
-        this.addChild(this.content);
-
         this.items = new Map<string, TabItem>();
+        this.itemsScrollable = new Map<string, boolean>();
+        this.verticalScrollbar = null;
 
-        this.itemControls = new Toolbar(id + ".itemControls", this.header);
+        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) {
+    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");
 
-        const itemControl = new TabControl(id + ".itemControl", null, title);
-        //itemControl.setW(100);
-        itemControl.setH(TAB_HEADER_HEIGHT);
+        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",
@@ -84,12 +93,13 @@ export class Tabs extends Widget {
         this.itemControls.addItem(id, itemControl);
     }
 
-    public addIconTab(id: string, icon: string, content: Widget) {
+    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_HEIGHT);
+        itemControl.setH(TAB_HEADER_SIZE);
 
         itemControl.subscribe({
             event: "click",
@@ -110,22 +120,63 @@ export class Tabs extends Widget {
                 this.items.get(itemId)?.content.setVisible(false);
                 const ctrlTab = window.w.get(itemId + ".itemControl");
                 if (ctrlTab) {
-                    ctrlTab.deleteClass("WUITabControlActive");
-                    ctrlTab.addClass("WUITabControl");
+                    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) {
-                    ctrlTab.addClass("WUITabControlActive");
+                    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";
 
-const TOOLBAR_SIZE = 40;
+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.
 
@@ -15,18 +19,33 @@ export class Toolbar extends Widget {
     btnLeft: IconButton;
     btnRight: IconButton;
 
-    constructor(id: string, parent: Widget | null = null, orientationType: OrientationTypes = "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";
@@ -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();
     }
 }