cedro 0.1.9 → 0.1.11

package/src/ui/styles/stackbutton.css

@@ -31,6 +31,10 @@
     border-color: var(--palette-divider);
 }
 
+.WUIButton-stack-start-color-primary:hover span {
+    color: var(--palette-primary-text-light);
+}
+
 /****************************************************************************/
 /***********************************STACK-MIDDLE******************************/
 /****************************************************************************/
@@ -64,6 +68,10 @@
     border-color: var(--palette-divider);
 }
 
+.WUIButton-stack-middle-color-primary:hover span {
+    color: var(--palette-primary-text-light);
+}
+
 /**************************************************************************/
 /***********************************STACK-END******************************/
 /**************************************************************************/
@@ -99,6 +107,10 @@
     border-color: var(--palette-divider);
 }
 
+.WUIButton-stack-end-color-primary:hover span {
+    color: var(--palette-primary-text-light);
+}
+
 /************************************************************************/
 /******************************STACK-START-ACTIVE************************/
 /************************************************************************/
@@ -127,12 +139,20 @@
     border-color: var(--palette-divider);
 }
 
+.WUIButton-stack-start-active-color-primary span {
+    color: var(--palette-primary-text-light);
+}
+
 .WUIButton-stack-start-active-color-primary:hover {
     color: var(--palette-primary-text-light);
     background-color: var(--palette-primary-light);
     border-color: var(--palette-divider);
 }
 
+.WUIButton-stack-start-active-color-primary:hover span {
+    color: var(--palette-primary-text-light);
+}
+
 /*************************************************************************/
 /**************************STACK-MIDDLE-ACTIVE****************************/
 /*************************************************************************/
@@ -161,12 +181,20 @@
     border-color: var(--palette-divider);
 }
 
+.WUIButton-stack-middle-active-color-primary span {
+    color: var(--palette-primary-text-light);
+}
+
 .WUIButton-stack-middle-active-color-primary:hover {
     color: var(--palette-primary-text-light);
     background-color: var(--palette-primary-light);
     border-color: var(--palette-divider);
 }
 
+.WUIButton-stack-middle-active-color-primary:hover span {
+    color: var(--palette-primary-text-light);
+}
+
 /**************************************************************************/
 /********************************STACK-END-ACTIVE**************************/
 /**************************************************************************/
@@ -198,8 +226,16 @@
     border-color: var(--palette-divider);
 }
 
+.WUIButton-stack-end-active-color-primary span {
+    color: var(--palette-primary-text-light);
+}
+
 .WUIButton-stack-end-active-color-primary:hover {
     color: var(--palette-primary-text-light);
     background-color: var(--palette-primary-light);
     border-color: var(--palette-divider);
 }
+
+.WUIButton-stack-end-active-color-primary:hover span {
+    color: var(--palette-primary-text-light);
+}

package/src/ui/styles/tabs.css

@@ -39,7 +39,7 @@
     border-radius: 0px !important;
 }
 
-.WUITabContainer {
+.WUITabContainer-horizontal {
     border-top: solid 1px var(--palette-divider);
 }
 
@@ -60,19 +60,17 @@
 
 .WUITabControlActiveIcon_VL {
     border-top: none !important;
-    border-left: none !important;
-    border-right: solid 2px var(--palette-primary-dark) !important;
+    border-right: none !important;
+    border-left: solid 2px var(--palette-primary-dark) !important;
     border-bottom: none !important;
     background-color: var(--palette-divider);
     box-sizing: border-box;
     font-weight: bold;
     text-align: center;
     cursor: default;
-    padding-left: 15px;
-    padding-right: 15px;
     border-radius: 0px !important;
 }
 
-.WUITabContainer_VL {
-    border-right: solid 1px var(--palette-divider);
+.WUITabContainer-vertical {
+    border-left: solid 1px var(--palette-divider);
 }

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/switch.ui.tsx

@@ -1,5 +1,6 @@
+import { UID } from "../core/uid";
 import { ToggleButton } from "./toggle.ui";
-import { WidgetProps } from "./widget.builder";
+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) {
@@ -13,20 +14,15 @@ export type wSwitchProps = WidgetProps & {
 };
 
 export const WSwitch = (props: wSwitchProps) => {
+    if (!props.id) {
+        props.id = "Switch." + UID();
+    }
+
     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}
-        />
+    return normalizeWidget(
+        <div id={props.id} w-switch w-text={props.text} w-checked={props.checked} />,
+        props
     );
 };
 

package/src/ui/tabs.ui.tsx

@@ -4,9 +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 } from "./widget.builder";
+import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
+import { UID } from "../core/uid";
 
 const TAB_HEADER_SIZE = 40;
 
@@ -35,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>();
@@ -60,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) {
@@ -98,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",
@@ -125,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");
@@ -139,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");
@@ -186,6 +202,7 @@ export type TabItemType = "text" | "icon-tab";
 
 export type WTabProps = Omit<WidgetProps, "orientation"> & {
     orientation?: OrientationTypes;
+    selectedTab?: number | null;
     children: any;
 };
 
@@ -198,18 +215,14 @@ export type WTabItemProps = {
 };
 
 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}
-        >
+    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>
+        </div>,
+        props
     );
 };
 
@@ -224,6 +237,7 @@ export const WTabItem = (props: WTabItemProps) => {
 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";
 
@@ -244,14 +258,14 @@ export function createTab(id: string, content: any, parent: Widget | null = null
             if (widget !== null) {
                 if (tabType === "text") {
                     newTab.addTab(
-                        "Tab.Item." + index,
+                        newTab.id + ".Item." + index,
                         tabTitle || "Untitled",
                         widget,
                         dataScrollable
                     );
                 } else if (tabType === "icon-tab") {
                     newTab.addIconTab(
-                        "Tab.Item." + index,
+                        newTab.id + ".Item." + index,
                         tabIcon || "home",
                         widget,
                         dataScrollable
@@ -261,7 +275,14 @@ export function createTab(id: string, content: any, parent: Widget | null = null
         }
     });
 
-    newTab.setTab("Tab.Item.0");
+    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.tsx

@@ -3,7 +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 } from "./widget.builder";
+import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
+import { UID } from "../core/uid";
 
 export type ToolbarVariants = "contained" | "outlined";
 
@@ -39,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);
@@ -232,31 +233,35 @@ export class Toolbar extends Widget {
 }
 
 export type ToolbarProps = WidgetProps & {
+    variant?: ToolbarVariants;
     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}
-        >
+    if (!props.id) {
+        props.id = "Toolbar." + UID();
+    }
+
+    return normalizeWidget(
+        <div w-toolbar id={props.id} w-variant={props.variant}>
             {props.children}
-        </div>
+        </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);
 

package/src/ui/valuebar.ui.tsx

@@ -2,7 +2,8 @@ import "./styles/valuebar.css";
 import { OrientationTypes } from "src/types/orientation.type";
 import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 import { Draggable } from "./draggable.ui";
-import { WidgetProps } from "./widget.builder";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
 
 export class ValueBar extends Widget {
     orientation: OrientationTypes;
@@ -49,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;
@@ -121,20 +126,13 @@ export type wValueBarProps = WidgetProps & {
 };
 
 export const WValueBar = (props: wValueBarProps) => {
+    if (!props.id) {
+        props.id = "ValueBar." + UID();
+    }
+
     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>
-    );
+    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 {

package/src/ui/vpanel.ui.tsx

@@ -1,7 +1,13 @@
 import { Draggable } from "./draggable.ui";
 import "./styles/vpanel.css";
-import { WidgetProps, createWidget } from "./widget.builder";
-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;
 
@@ -126,6 +132,14 @@ 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 & {
@@ -133,17 +147,9 @@ export type WVPanelProps = WidgetProps & {
 };
 
 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>
-    );
+    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 {