cedro 0.1.8 → 0.1.10

package/src/ui/styles/textarea.css

@@ -1,13 +1,13 @@
-.WUITextArea {
-    outline: none;
-    /*border-collapse: collapse;*/
-    border: 2px solid var(--palette-action-disabled);
-    border-radius: 4px;
-    box-sizing: border-box;
-    font-size: 1rem;
-    padding-left: 20px;
-    z-index: 1000;
-    background-color: var(--palette-background-default);
-    color: var(--palette-text-primary);
-    overflow-y: auto;
-}
+.WUITextArea {
+    outline: none;
+    /*border-collapse: collapse;*/
+    border: 2px solid var(--palette-action-disabled);
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 1rem;
+    padding-left: 20px;
+    z-index: 1000;
+    background-color: var(--palette-background-default);
+    color: var(--palette-text-primary);
+    overflow-y: auto;
+}

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,42 @@
+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 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) => {
+    if (!props.id) {
+        props.id = "Switch." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div id={props.id} w-switch w-text={props.text} w-checked={props.checked} />,
+        props
+    );
+};
+
+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}

@@ -4,8 +4,10 @@ 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 { Icon } from "./Icon.ui";
 import { Scroll } from "./scroll.ui";
+import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
+import { UID } from "../core/uid";
 
 const TAB_HEADER_SIZE = 40;
 
@@ -34,14 +36,15 @@ export class Tabs extends Widget {
 
         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);
+            this.content.addClass("WUITabContainer-horizontal");
         } else {
             this.setAlign(WidgetAlignTypes.HORIZONTAL);
+            this.content.addClass("WUITabContainer-vertical");
         }
 
         this.items = new Map<string, TabItem>();
@@ -59,7 +62,11 @@ export class Tabs extends Widget {
     }
 
     public setOrientation(orientation: OrientationTypes) {
+        if (this.orientation !== orientation) {
+            this.content.deleteClass("WUITabContainer-" + this.orientation);
+        }
         this.orientation = orientation;
+        this.content.addClass("WUITabContainer-" + this.orientation);
     }
 
     public addTab(id: string, title: string, content: Widget, scrollable: boolean = false) {
@@ -97,9 +104,19 @@ export class Tabs extends Widget {
         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);
+        const itemControl = new Icon(id + ".itemControl", icon);
+
+        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 = "12px";
+            itemControl.getBody().style.paddingBottom = "12px";
+            itemControl.getBody().style.paddingRight = "10px";
+            itemControl.setW(TAB_HEADER_SIZE);
+        }
 
         itemControl.subscribe({
             event: "click",
@@ -124,7 +141,7 @@ export class Tabs extends Widget {
                         ctrlTab.deleteClass("WUITabControlActive");
                         ctrlTab.addClass("WUITabControl");
                     } else if (this.orientation === "vertical") {
-                        if (ctrlTab instanceof IconButton) {
+                        if (ctrlTab instanceof Icon) {
                             ctrlTab.deleteClass("WUITabControlActiveIcon_VL");
                         } else if (ctrlTab instanceof Label) {
                             ctrlTab.deleteClass("WUITabControlActive_VL");
@@ -138,7 +155,7 @@ export class Tabs extends Widget {
                     if (this.orientation === "horizontal") {
                         ctrlTab.addClass("WUITabControlActive");
                     } else if (this.orientation === "vertical") {
-                        if (ctrlTab instanceof IconButton) {
+                        if (ctrlTab instanceof Icon) {
                             ctrlTab.addClass("WUITabControlActiveIcon_VL");
                         } else if (ctrlTab instanceof Label) {
                             ctrlTab.addClass("WUITabControlActive_VL");
@@ -164,7 +181,7 @@ export class Tabs extends Widget {
                 }
             } else {
                 if (this.verticalScrollbar) {
-                    this.verticalScrollbar.dispose();
+                    this.verticalScrollbar.free();
                     this.verticalScrollbar = null;
                 }
             }
@@ -180,3 +197,92 @@ export class Tabs extends Widget {
         }
     }
 }
+
+export type TabItemType = "text" | "icon-tab";
+
+export type WTabProps = Omit<WidgetProps, "orientation"> & {
+    orientation?: OrientationTypes;
+    selectedTab?: number | null;
+    children: any;
+};
+
+export type WTabItemProps = {
+    title?: string | null;
+    icon?: string | null;
+    type?: TabItemType | null;
+    scrollable?: boolean | null;
+    children: any;
+};
+
+export const WTab = (props: WTabProps) => {
+    if (!props.id) {
+        props.id = "Tabs." + UID();
+    }
+    return normalizeWidget(
+        <div id={props.id} w-tab w-class={props.classNames} w-selected-tab={props.selectedTab}>
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+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;
+    const dataSelectedTab = content.getAttribute("w-selected-tab");
+
+    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(
+                        newTab.id + ".Item." + index,
+                        tabTitle || "Untitled",
+                        widget,
+                        dataScrollable
+                    );
+                } else if (tabType === "icon-tab") {
+                    newTab.addIconTab(
+                        newTab.id + ".Item." + index,
+                        tabIcon || "home",
+                        widget,
+                        dataScrollable
+                    );
+                }
+            }
+        }
+    });
+
+    if (dataSelectedTab !== null) {
+        const selectedTab = parseInt(dataSelectedTab);
+        if (selectedTab < newTab.items.size) {
+            newTab.setTab(newTab.id + ".Item." + selectedTab);
+        }
+    } else {
+        newTab.setTab(newTab.id + ".Item.0");
+    }
+
+    return newTab;
+}

package/src/ui/textarea.ui.tsx

@@ -0,0 +1,48 @@
+import { UID } from "../core/uid";
+import "./styles/textarea.css";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { connectWidgetCallback, getOnlyEventProps, 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;
+    }
+}
+
+export type wTextareaProps = WidgetProps & {
+    text: string;
+};
+
+export const WTextarea = (props: wTextareaProps) => {
+    if (!props.id) {
+        props.id = "Textarea." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(<div id={props.id} w-textarea w-text={props.text}></div>, props);
+};
+
+export function createTextarea(id: string, content: any, parent: Widget | null = null): TextArea {
+    let newTextarea = new TextArea(id, parent);
+
+    const dataText = content.getAttribute("w-text");
+
+    if (dataText) {
+        newTextarea.setText(dataText);
+    }
+
+    return newTextarea;
+}

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

@@ -3,6 +3,8 @@ 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, normalizeWidget } from "./widget.builder";
+import { UID } from "../core/uid";
 
 export type ToolbarVariants = "contained" | "outlined";
 
@@ -38,7 +40,7 @@ export class Toolbar extends Widget {
         }
 
         this.setType(WidgetTypes.FILL);
-        this.setFixedSize(TOOLBAR_SIZE);
+        //this.setFixedSize(TOOLBAR_SIZE);
         this.addClass("WUIToolbar-" + this.variant);
 
         this.itemsContainer = new Widget(this.id + ".itemsContainer", "div", this);
@@ -229,3 +231,44 @@ export class Toolbar extends Widget {
         }
     }
 }
+
+export type ToolbarProps = WidgetProps & {
+    variant?: ToolbarVariants;
+    children: any;
+};
+
+export const WToolbar = (props: ToolbarProps) => {
+    if (!props.id) {
+        props.id = "Toolbar." + UID();
+    }
+
+    return normalizeWidget(
+        <div w-toolbar id={props.id} w-variant={props.variant}>
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export function createToolbar(id: string, content: any, parent: Widget | null = null): Toolbar {
+    const dataOrientation = content.getAttribute("w-orientation");
+    const dataVariant = content.getAttribute("w-variant");
+
+    let orientation: OrientationTypes = dataOrientation ? dataOrientation : "horizontal";
+
+    let newToolbar = new Toolbar(id, parent, orientation);
+
+    if (dataVariant) {
+        newToolbar.setVariant(dataVariant);
+    }
+
+    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,9 @@
 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 { normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
 
 export class ValueBar extends Widget {
     orientation: OrientationTypes;
@@ -48,6 +50,10 @@ export class ValueBar extends Widget {
         this.render();
     }
 
+    public getValue(): number {
+        return this.value;
+    }
+
     public updateValueFromHandlerPosition(): void {
         if (this.orientation === "horizontal") {
             const maxX = this.draggable.maxX ? this.draggable.maxX : 1;
@@ -114,3 +120,31 @@ export class ValueBar extends Widget {
         }
     }
 }
+
+export type wValueBarProps = WidgetProps & {
+    value: number;
+};
+
+export const WValueBar = (props: wValueBarProps) => {
+    if (!props.id) {
+        props.id = "ValueBar." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(<div id={props.id} w-valuebar w-value={props.value}></div>, props);
+};
+
+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,6 +1,13 @@
 import { Draggable } from "./draggable.ui";
 import "./styles/vpanel.css";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
+import {
+    connectWidgetCallback,
+    getOnlyEventProps,
+    Widget,
+    WidgetAlignTypes,
+    WidgetTypes,
+} from "./widget.ui";
 
 const VPANEL_HANDLER_SIZE = 4;
 
@@ -125,4 +132,40 @@ export class VPanel extends Widget {
 
         this.handler.setX(this.getX(true));
     }
+
+    public free(): void {
+        this.handler.free();
+        this.topContent?.free();
+        this.bottomContent?.free();
+        //this.draggable.free();
+        super.free();
+    }
+}
+
+export type WVPanelProps = WidgetProps & {
+    children: any;
+};
+
+export const WVPanel = (props: WVPanelProps) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(<div w-vpanel>{props.children}</div>, props);
+};
+
+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;
 }