cedro 0.1.8 → 0.1.10

package/src/ui/index.ts

@@ -1,47 +1,48 @@
+import { WidgetAlignTypes, WidgetTypes, Widget } from "./widget.ui";
+import { Textbox } from "./Textbox.ui";
+import { Select } from "./select.ui";
 import { Accordion } from "./accordion.ui";
 import { Button } from "./button.ui";
 import { ButtonColor } from "./buttonColor.ui";
 import { ButtonMenu } from "./buttonmenu.ui";
 import { ButtonStack } from "./buttonstack.ui";
+import { IconButton } from "./IconButton.ui";
 import { Checkbox } from "./checkbox.ui";
 import { Container, Spacer, ContainerParams } from "./container.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 { Image } from "./image.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 { RadioButton } from "./radiobutton.ui";
 import { ValueBar } from "./valuebar.ui";
 import { VPanel } from "./vpanel.ui";
-import { createWidget } from "./widget.builder.ui";
+import { createWidget } from "./widget.builder";
 import { IconButtonMenu } from "./iconButtonMenu.ui";
 
 export type { ContainerParams };
 
 export {
+    Textbox,
     Accordion,
     Button,
     ButtonColor,
     ButtonMenu,
     ButtonStack,
+    IconButton,
+    IconButtonMenu,
     Checkbox,
     Container,
     Dialog,
     HPanel,
     Icon,
-    IconButton,
-    IconButtonMenu,
     Image,
     Label,
     Menu,
@@ -52,7 +53,6 @@ export {
     Switch,
     Tabs,
     TextArea,
-    Textbox,
     Toolbar,
     ValueBar,
     VPanel,

package/src/ui/label.ui.tsx

@@ -0,0 +1,184 @@
+import "./styles/label.css";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { Colors } from "./colors.ui";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { UID } from "../core/uid";
+
+export type LabelVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+
+export class Label extends Widget {
+    variant: LabelVariants;
+    color: Colors;
+    text: string;
+
+    requiredWidth: number;
+
+    isHCentered: boolean;
+    isVCentered: boolean;
+
+    constructor(id: string, variant: LabelVariants = "span", parent: Widget | null = null) {
+        super(id, variant, parent);
+
+        this.requiredWidth = -1;
+
+        this.isHCentered = false;
+        this.isVCentered = false;
+
+        this.variant = variant;
+        this.color = "primary";
+        this.text = "";
+
+        this.setColor(this.color);
+
+        //this.getBody().style.margin = "0px";
+
+        this.setVariant(this.variant);
+
+        this.init();
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    private updateRequiredWidth(): void {
+        const div = document.createElement("div");
+        div.id = this.id + ".requiredWidth";
+        div.innerHTML = this.text;
+        div.classList.add("WUILabel" + this.variant);
+        div.classList.add("WUILabel-" + this.color);
+        div.style.position = "absolute";
+        div.style.overflow = "hidden";
+        document.body.appendChild(div);
+        this.requiredWidth = div.clientWidth;
+        div.parentNode?.removeChild(div);
+    }
+
+    public setHCentered(isHCentered: boolean = true): void {
+        this.isHCentered = isHCentered;
+    }
+
+    public setVCentered(isVCentered: boolean = true): void {
+        this.isVCentered = isVCentered;
+    }
+
+    public render(): void {
+        super.render();
+
+        if (this.isHCentered) {
+            this.centerH();
+        }
+        if (this.isVCentered) {
+            this.centerV();
+        }
+    }
+
+    private centerV(): void {
+        this.getBody().style.lineHeight = this.getH() + "px";
+    }
+
+    private centerH(): void {
+        this.getBody().style.textAlign = "center";
+    }
+
+    public setText(text: string): void {
+        this.text = text;
+        this.body.innerHTML = text;
+        this.updateRequiredWidth();
+    }
+
+    public setVariant(variant: LabelVariants = "span"): void {
+        if (this.variant !== variant) {
+            this.deleteClass("WUILabel" + this.variant);
+        }
+
+        this.variant = variant;
+        this.addClass("WUILabel-" + this.variant);
+        this.updateRequiredWidth();
+    }
+
+    public setColor(color: Colors = "primary"): void {
+        if (this.color !== color) {
+            this.deleteClass("WUILabel-" + this.color);
+        }
+        this.color = color;
+        this.addClass("WUILabel-" + this.color);
+        this.updateRequiredWidth();
+    }
+
+    public getVariant(): LabelVariants {
+        return this.variant;
+    }
+
+    public getColor(): Colors {
+        return this.color;
+    }
+
+    public getText(): string {
+        return this.text;
+    }
+
+    public getRequiredWidth(): number {
+        return this.requiredWidth;
+    }
+}
+
+export type wLabelProps = WidgetProps & {
+    variant?: string | null;
+    color?: Colors | null;
+    text?: string | null;
+    centerX?: boolean | null;
+    centerY?: boolean | null;
+};
+
+export const WLabel = (props: wLabelProps) => {
+    if (!props.id) {
+        props.id = "Label." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-label
+            w-text={props.text}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-centerX={props.centerX}
+            w-centerY={props.centerY}
+        ></div>,
+        props
+    );
+};
+
+export function createLabel(id: string, content: any, parent: Widget | null = null): Label {
+    const dataText = content.getAttribute("w-text");
+    const dataVariant = content.getAttribute("w-variant");
+    const dataColor = content.getAttribute("w-color");
+    let tag = dataVariant ? dataVariant : "span";
+
+    let newLabel = new Label(id, tag, parent);
+
+    if (dataText) {
+        newLabel.setText(dataText);
+    }
+
+    if (dataVariant) {
+        newLabel.setVariant(dataVariant);
+    }
+
+    if (dataColor) {
+        newLabel.setColor(dataColor);
+    }
+
+    if (content.getAttribute("w-centerX")) {
+        newLabel.setHCentered(true);
+    }
+
+    if (content.getAttribute("w-centerY")) {
+        newLabel.setVCentered(true);
+    }
+
+    return newLabel;
+}

package/src/ui/loading.ui.ts

@@ -1,10 +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);
-    }
-}
+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

@@ -101,7 +101,7 @@ export class Menu extends Widget {
         if (this.triggeredBy) {
             const position = this.triggeredBy.getPosition(false);
 
-            const triggerW = this.triggeredBy.getBody().clientWidth;
+            //const triggerW = this.triggeredBy.getBody().clientWidth;
             const triggerH = this.triggeredBy.getBody().clientHeight;
 
             const screenW = window.innerWidth;
@@ -162,7 +162,7 @@ export class Menu extends Widget {
         newOption.setAlign(WidgetAlignTypes.VERTICAL);
         newOption.setText(label);
         newOption.setFixedSize(MENU_OPTION_HEIGHT);
-        //newOption.addClass("WUIMenuOptions");
+        newOption.addClass("WUIMenuOptions"); //Esta linea estaba comentada. Con esto se soliciono el ancho del menu
         //newOption.setH(MENU_OPTION_HEIGHT);
 
         newOption.subscribe({

package/src/ui/progressbar.ui.tsx

@@ -0,0 +1,135 @@
+import { UID } from "../core/uid";
+import { Label } from "./label.ui";
+import "./styles/progressbar.css";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } 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.setType(WidgetTypes.CUSTOM);
+        this.lblValue.setVCentered(true);
+        this.lblValue.setHCentered(true);
+        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(padding);
+        this.lblValue.setY(0);
+        this.lblValue.setW(width);
+        this.lblValue.setH(height);
+        this.lblValue.raisteTop();
+        this.lblValue.render();
+
+        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;
+    }
+}
+
+export type wProgressBarProps = WidgetProps & {
+    value: number;
+    paddingBar?: number | null;
+    hideLabel?: boolean | null;
+};
+
+export const WProgressBar = (props: wProgressBarProps) => {
+    if (!props.id) {
+        props.id = "ProgressBar." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-progressbar
+            w-value={props.value}
+            w-padding-bar={props.paddingBar}
+            w-hide-label={props.hideLabel}
+        ></div>,
+        props
+    );
+};
+
+export function createProgressBar(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): ProgressBar {
+    let newProgressBar = new ProgressBar(id, parent);
+
+    const dataValue = content.getAttribute("w-value");
+    const dataPaddingBar = content.getAttribute("w-padding-bar");
+    const dataHideLabel = content.getAttribute("w-hide-label");
+
+    if (dataValue) {
+        newProgressBar.setValue(parseInt(dataValue));
+    }
+
+    if (dataPaddingBar) {
+        newProgressBar.setPaddingBar(parseInt(dataPaddingBar));
+    }
+
+    if (dataHideLabel !== null) {
+        newProgressBar.hideLabel();
+    } else {
+        newProgressBar.displayLabel();
+    }
+
+    return newProgressBar;
+}

package/src/ui/radiobutton.ui.tsx

@@ -0,0 +1,47 @@
+import { UID } from "../core/uid";
+import { ToggleButton } from "./toggle.ui";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+
+export class RadioButton extends ToggleButton {
+    constructor(id: string, text: string = "", parent: Widget | null = null) {
+        super(id, text, "radio_button_checked", "radio_button_unchecked", parent);
+    }
+}
+
+export type wRadioButtonProps = WidgetProps & {
+    text: string;
+    checked?: boolean | null;
+};
+
+export const WRadioButton = (props: wRadioButtonProps) => {
+    if (!props.id) {
+        props.id = "RadioButton." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div id={props.id} w-radiobutton w-text={props.text} w-checked={props.checked} />,
+        props
+    );
+};
+
+export function createRadioButton(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): RadioButton {
+    const dataText = content.getAttribute("w-text");
+    const dataChecked = content.getAttribute("w-checked");
+
+    let newRadioButton = new RadioButton(id, dataText, parent);
+
+    if (dataChecked !== null) {
+        newRadioButton.setState(true);
+    } else {
+        newRadioButton.setState(false);
+    }
+
+    return newRadioButton;
+}

package/src/ui/scroll.ui.ts

@@ -25,7 +25,7 @@ export class Scroll extends Widget {
     drag: Draggable;
 
     constructor(id: string, contentArea: Widget, orientation: OrientationTypes = "vertical") {
-        super(id, "div", contentArea.getParent());
+        super(id, "div");
 
         this.contentArea = contentArea;
         this.orientation = orientation;
@@ -33,7 +33,7 @@ export class Scroll extends Widget {
         this.setType(WidgetTypes.CUSTOM);
 
         this.getBody().style.overflow = "hidden";
-        this.getBody().style.position = "absolute";
+        this.getBody().style.position = "fixed";
 
         this.addClass("WUIScrollbar");
 
@@ -110,14 +110,15 @@ export class Scroll extends Widget {
         if (this.orientation === "vertical") {
             const recorrido = scrollData.scrollHeight - scrollData.areaHeight;
             const maxY = this.drag.maxY ? this.drag.maxY : 1;
-            const ratio = (this.getY() - this.contentArea.getY()) / maxY;
+            const ratio = (this.getY() - this.contentArea.getY(true)) / maxY;
             this.contentArea.getBody().scrollTop = recorrido * ratio;
         } else if (this.orientation === "horizontal") {
             const recorrido = scrollData.scrollWidth - scrollData.areaWidth;
             const maxX = this.drag.maxX ? this.drag.maxX : 1;
-            const ratio = (this.getX() - this.contentArea.getX()) / maxX;
+            const ratio = (this.getX() - this.contentArea.getX(true)) / maxX;
             this.contentArea.getBody().scrollLeft = recorrido * ratio;
         }
+        this.run("scroll");
     }
 
     public render(): void {
@@ -133,14 +134,14 @@ export class Scroll extends Widget {
                 return;
             }
 
-            this.setX(this.contentArea.getX() + this.contentArea.getW() - SCROLL_SIZE - 1);
-            this.setY(1 + this.contentArea.getY() + scrollData.position);
+            this.setX(this.contentArea.getX(true) + this.contentArea.getW() - SCROLL_SIZE - 1);
+            this.setY(1 + this.contentArea.getY(true) + scrollData.position);
             this.setH(scrollData.scrollBarHeight);
             this.setW(SCROLL_SIZE);
             this.raisteTop();
 
-            const minY = 1 + this.contentArea.getY();
-            const maxY = this.contentArea.getY() + scrollData.availablePositionSize;
+            const minY = 1 + this.contentArea.getY(true);
+            const maxY = this.contentArea.getY(true) + scrollData.availablePositionSize;
 
             this.drag.setMinY(minY);
             this.drag.setMaxY(maxY);
@@ -160,14 +161,14 @@ export class Scroll extends Widget {
                 return;
             }
 
-            this.setX(1 + this.contentArea.getX() + scrollData.position);
-            this.setY(scrollData.scrollPositionY - SCROLL_SIZE - 1);
+            this.setX(1 + this.contentArea.getX(true) + scrollData.position);
+            this.setY(this.contentArea.getY(true) + scrollData.scrollPositionY - SCROLL_SIZE - 1);
             this.setW(scrollData.scrollBarWidth);
             this.setH(SCROLL_SIZE);
             this.raisteTop();
 
-            const minX = 1 + this.contentArea.getX();
-            const maxX = this.contentArea.getX() + scrollData.availablePositionSize;
+            const minX = 1 + this.contentArea.getX(true);
+            const maxX = this.contentArea.getX(true) + scrollData.availablePositionSize;
 
             this.drag.setMinX(minX);
             this.drag.setMaxX(maxX);

package/src/ui/select.ui.tsx

@@ -0,0 +1,143 @@
+import "./styles/select.css";
+import { IconButton } from "./IconButton.ui";
+import { Menu } from "./menu.ui";
+import { Widget } from "./widget.ui";
+import { SelectItem } from "../types/select.item.type";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
+
+export class Select extends Widget {
+    menu: Menu;
+    text: string;
+    title: string;
+
+    items: SelectItem[];
+
+    selectedItem: SelectItem | null;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.menu = new Menu(this.id + ".menu", this.id, null);
+        this.text = "";
+        this.title = "";
+        this.addClass("WUISelect");
+        this.items = [];
+        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.getBody().clientWidth > this.menu.getBody().clientWidth) {
+                    this.menu.setW(this.getBody().clientWidth);
+                    this.menu.resize();
+                }
+            },
+        });
+
+        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.setValue(selectedText);
+                } else {
+                    this.setValue("");
+                }
+            },
+        });
+    }
+
+    public setValue(value: string) {
+        this.text = value;
+    }
+
+    public setTitle(title: string) {
+        this.title = title;
+    }
+
+    addItem(id: string, label: string, icon: string) {
+        this.items.push(new SelectItem(id, label, icon));
+    }
+}
+
+export type WSelectProps = WidgetProps & {
+    title?: string;
+    value?: string;
+    children: any;
+};
+
+export type WSelectItemProps = {
+    id: string;
+    label?: string | null;
+    icon?: string | null;
+};
+
+export const WSelect = (props: WSelectProps) => {
+    if (!props.id) {
+        props.id = "Select." + UID();
+    }
+
+    return normalizeWidget(
+        <div id={props.id} w-select w-title={props.title} w-value={props.value}>
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export const WSelectItem = (props: WSelectItemProps) => {
+    return <div w-select-item id={props.id} w-label={props.label} w-icon={props.icon}></div>;
+};
+
+export function createSelect(id: string, content: any, parent: Widget | null = null): Select {
+    let newSelect = new Select(id, parent);
+
+    const dataTitle = content.getAttribute("w-title");
+    const dataValue = content.getAttribute("w-value");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    if (dataTitle) {
+        newSelect.setTitle(dataTitle);
+    }
+
+    if (dataValue) {
+        newSelect.setValue(dataValue);
+    }
+
+    if (dataWidth) {
+        newSelect.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newSelect.setInitialH(dataHeight);
+    }
+
+    content.childNodes.forEach((menuItem: HTMLElement, index: number) => {
+        if (menuItem.getAttribute("w-select-item") !== null) {
+            const itemId = menuItem.getAttribute("id");
+            const itemLabel = menuItem.getAttribute("w-label");
+            const itemIcon = menuItem.getAttribute("w-icon");
+
+            if (itemId !== null) {
+                newSelect.addItem(itemId, itemLabel || "Unnamed" + index, itemIcon || "");
+            }
+        }
+    });
+
+    return newSelect;
+}