cedro 0.1.8 → 0.1.9

package/src/ui/{label.ui.ts → label.ui.tsx}

@@ -1,5 +1,6 @@
+import { WidgetProps } from "./widget.builder";
 import { Colors } from "./colors.ui";
-import { Widget } from "./widget.ui";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 
 export type LabelVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
 
@@ -80,3 +81,46 @@ export class Label extends Widget {
         return this.text;
     }
 }
+
+export type wLabelProps = WidgetProps & {
+    variant?: string | null;
+    color?: Colors | null;
+    text?: string | null;
+};
+
+export const WLabel = (props: wLabelProps) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <div
+            id={props.id}
+            w-label
+            w-text={props.text}
+            w-variant={props.variant}
+            w-color={props.color}
+        ></div>
+    );
+};
+
+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);
+    }
+
+    return newLabel;
+}

package/src/ui/progressbar.ui.tsx

@@ -0,0 +1,134 @@
+import { Label } from "./label.ui";
+import "./styles/progressbar.css";
+import { 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) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <div
+            id={props.id}
+            w-progressbar
+            w-value={props.value}
+            w-padding-bar={props.paddingBar}
+            w-hide-label={props.hideLabel}
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        ></div>
+    );
+};
+
+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.tsx

@@ -0,0 +1,51 @@
+import { ToggleButton } from "./toggle.ui";
+import { 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) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <div
+            id={props.id}
+            w-radiobutton
+            w-text={props.text}
+            w-checked={props.checked}
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        />
+    );
+};
+
+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/styles/hpanel.css

@@ -1,5 +1,5 @@
 .WUIHPanelHandler {
-    position: absolute;
+    position: absolute !important;
     overflow: hidden;
     cursor: col-resize;
     background-color: var(--palette-divider);

package/src/ui/styles/progressbar.css

@@ -14,6 +14,6 @@
 }
 
 .WUIProgressBarLabel {
-    position: absolute;
+    position: absolute !important;
     color: var(--palette-primary-light);
 }

package/src/ui/styles/valuebar.css

@@ -20,7 +20,7 @@
 }
 
 .WUIValueBarHandler {
-    position: absolute;
+    position: absolute !important;
     border-radius: 50%;
     background-color: var(--palette-primary-dark);
 }

package/src/ui/styles/vpanel.css

@@ -1,5 +1,5 @@
 .WUIVPanelHandler {
-    position: absolute;
+    position: absolute !important;
     overflow: hidden;
     cursor: row-resize;
     background-color: var(--palette-divider);

package/src/ui/switch.ui.tsx

@@ -0,0 +1,46 @@
+import { ToggleButton } from "./toggle.ui";
+import { WidgetProps } from "./widget.builder";
+import { Widget, connectWidgetCallback, getOnlyEventProps } 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);
+    }
+}
+
+export type wSwitchProps = WidgetProps & {
+    text: string;
+    checked?: boolean | null;
+};
+
+export const WSwitch = (props: wSwitchProps) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <div
+            id={props.id}
+            w-switch
+            w-text={props.text}
+            w-checked={props.checked}
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        />
+    );
+};
+
+export function createSwitch(id: string, content: any, parent: Widget | null = null): Switch {
+    const dataText = content.getAttribute("w-text");
+    const dataChecked = content.getAttribute("w-checked");
+
+    let newSwitch = new Switch(id, dataText, parent);
+
+    if (dataChecked !== null) {
+        newSwitch.setState(true);
+    } else {
+        newSwitch.setState(false);
+    }
+
+    return newSwitch;
+}

package/src/ui/{tabs.ui.ts → tabs.ui.tsx}

@@ -6,6 +6,7 @@ import { Toolbar } from "./toolbar.ui";
 import { Label } from "./label.ui";
 import { IconButton } from "./IconButton.ui";
 import { Scroll } from "./scroll.ui";
+import { WidgetProps, createWidget } from "./widget.builder";
 
 const TAB_HEADER_SIZE = 40;
 
@@ -164,7 +165,7 @@ export class Tabs extends Widget {
                 }
             } else {
                 if (this.verticalScrollbar) {
-                    this.verticalScrollbar.dispose();
+                    this.verticalScrollbar.free();
                     this.verticalScrollbar = null;
                 }
             }
@@ -180,3 +181,87 @@ export class Tabs extends Widget {
         }
     }
 }
+
+export type TabItemType = "text" | "icon-tab";
+
+export type WTabProps = Omit<WidgetProps, "orientation"> & {
+    orientation?: OrientationTypes;
+    children: any;
+};
+
+export type WTabItemProps = {
+    title?: string | null;
+    icon?: string | null;
+    type?: TabItemType | null;
+    scrollable?: boolean | null;
+    children: any;
+};
+
+export const WTab = (props: WTabProps) => {
+    return (
+        <div
+            id={props.id}
+            w-tab
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        >
+            {props.children}
+        </div>
+    );
+};
+
+export const WTabItem = (props: WTabItemProps) => {
+    return (
+        <div w-tab-item w-title={props.title} w-icon={props.icon} w-type={props.type}>
+            {props.children}
+        </div>
+    );
+};
+
+export function createTab(id: string, content: any, parent: Widget | null = null): Tabs {
+    const dataOrientation = content.getAttribute("w-orientation");
+    const dataScrollable = content.getAttribute("w-scrollable") ? true : false;
+
+    let orientation: OrientationTypes = dataOrientation ? dataOrientation : "horizontal";
+
+    let newTab = new Tabs(id, parent, orientation);
+
+    content.childNodes.forEach((tabItem: HTMLElement, index: number) => {
+        if (tabItem.getAttribute("w-tab-item") !== null) {
+            const tabTitle = tabItem.getAttribute("w-title");
+            const tabIcon = tabItem.getAttribute("w-icon");
+            const tabType = tabItem.getAttribute("w-type") || "text";
+
+            if (!tabItem.firstChild) {
+                throw new Error("Tab Item must have a content");
+            }
+
+            const widget = createWidget(tabItem.firstChild);
+
+            if (widget !== null) {
+                if (tabType === "text") {
+                    newTab.addTab(
+                        "Tab.Item." + index,
+                        tabTitle || "Untitled",
+                        widget,
+                        dataScrollable
+                    );
+                } else if (tabType === "icon-tab") {
+                    newTab.addIconTab(
+                        "Tab.Item." + index,
+                        tabIcon || "home",
+                        widget,
+                        dataScrollable
+                    );
+                }
+            }
+        }
+    });
+
+    newTab.setTab("Tab.Item.0");
+
+    return newTab;
+}

package/src/ui/{textbox.ui.ts → textbox.ui.tsx}

@@ -1,5 +1,6 @@
+import { WidgetProps } from "./widget.builder";
 import "./styles/textbox.css";
-import { Widget, WidgetTypes } from "./widget.ui";
+import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 
 export type InputTypes =
     | "text"
@@ -139,3 +140,55 @@ export class Textbox extends Widget {
         return this.inputType;
     }
 }
+
+export type wTextBoxProps = WidgetProps & {
+    title: string;
+    inputType?: InputTypes | null;
+    width?: number | null;
+    height?: number | null;
+};
+
+export const WTextbox = (props: wTextBoxProps) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <input
+            id={props.id}
+            w-textbox
+            w-title={props.title}
+            w-input-type={props.inputType}
+            w-width={props.width}
+            w-height={props.height}
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        />
+    );
+};
+
+export function createTextbox(id: string, content: any, parent: Widget | null = null): Textbox {
+    let newTextbox = new Textbox(id, parent);
+
+    const dataTitle = content.getAttribute("w-title");
+    const dataInputType = content.getAttribute("w-input-type");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    if (dataInputType) {
+        newTextbox.setInputType(dataInputType);
+    }
+
+    if (dataWidth) {
+        newTextbox.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newTextbox.setInitialH(dataHeight);
+    }
+
+    newTextbox.setTitle(dataTitle);
+
+    return newTextbox;
+}

package/src/ui/{toolbar.ui.ts → toolbar.ui.tsx}

@@ -3,6 +3,7 @@ import { IWidget } from "src/interfaces/widget.interface";
 import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
 import { IconButton } from "./IconButton.ui";
 import { OrientationTypes } from "src/types/orientation.type";
+import { WidgetProps, createWidget } from "./widget.builder";
 
 export type ToolbarVariants = "contained" | "outlined";
 
@@ -229,3 +230,40 @@ export class Toolbar extends Widget {
         }
     }
 }
+
+export type ToolbarProps = WidgetProps & {
+    children: any;
+};
+
+export const WToolbar = (props: ToolbarProps) => {
+    return (
+        <div
+            w-toolbar
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        >
+            {props.children}
+        </div>
+    );
+};
+
+export function createToolbar(id: string, content: any, parent: Widget | null = null): Toolbar {
+    const dataOrientation = content.getAttribute("w-orientation");
+
+    let orientation: OrientationTypes = dataOrientation ? dataOrientation : "horizontal";
+
+    let newToolbar = new Toolbar(id, parent, orientation);
+
+    content.childNodes.forEach((item: HTMLElement) => {
+        const widget = createWidget(item);
+
+        if (widget !== null) {
+            newToolbar.addItem(widget.id, widget);
+        }
+    });
+
+    return newToolbar;
+}

package/src/ui/{valuebar.ui.ts → valuebar.ui.tsx}

@@ -1,7 +1,8 @@
 import "./styles/valuebar.css";
 import { OrientationTypes } from "src/types/orientation.type";
-import { Widget } from "./widget.ui";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 import { Draggable } from "./draggable.ui";
+import { WidgetProps } from "./widget.builder";
 
 export class ValueBar extends Widget {
     orientation: OrientationTypes;
@@ -114,3 +115,38 @@ export class ValueBar extends Widget {
         }
     }
 }
+
+export type wValueBarProps = WidgetProps & {
+    value: number;
+};
+
+export const WValueBar = (props: wValueBarProps) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <div
+            id={props.id}
+            w-valuebar
+            w-value={props.value}
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        ></div>
+    );
+};
+
+export function createValueBar(id: string, content: any, parent: Widget | null = null): ValueBar {
+    const dataOrientation = content.getAttribute("w-orientation");
+    const dataValue = content.getAttribute("w-value");
+    let orientation: OrientationTypes = dataOrientation ? dataOrientation : "horizontal";
+
+    let newValueBar = new ValueBar(id, orientation, parent);
+
+    if (dataValue) {
+        newValueBar.setValue(parseInt(dataValue));
+    }
+
+    return newValueBar;
+}

package/src/ui/{vpanel.ui.ts → vpanel.ui.tsx}

@@ -1,5 +1,6 @@
 import { Draggable } from "./draggable.ui";
 import "./styles/vpanel.css";
+import { WidgetProps, createWidget } from "./widget.builder";
 import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
 
 const VPANEL_HANDLER_SIZE = 4;
@@ -126,3 +127,39 @@ export class VPanel extends Widget {
         this.handler.setX(this.getX(true));
     }
 }
+
+export type WVPanelProps = WidgetProps & {
+    children: any;
+};
+
+export const WVPanel = (props: WVPanelProps) => {
+    return (
+        <div
+            w-vpanel
+            w-class={props.classNames}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        >
+            {props.children}
+        </div>
+    );
+};
+
+export function createVPanel(id: string, content: any, parent: Widget | null = null): VPanel {
+    let newPanel = new VPanel(id, parent);
+
+    content.childNodes.forEach((item: HTMLElement, index: number) => {
+        const widget = createWidget(item);
+
+        if (widget !== null) {
+            if (index === 0) {
+                newPanel.setTop(widget, widget.getFixedSize());
+            } else if (index === 1) {
+                newPanel.setBottom(widget);
+            }
+        }
+    });
+
+    return newPanel;
+}