cedro 0.1.9 → 0.1.10

package/src/ui/button.ui.tsx

@@ -2,8 +2,9 @@ import "./styles/button.css";
 import "./styles/stackbutton.css";
 import "./styles/vstackbutton.css";
 import { Colors } from "./colors.ui";
-import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
-import { WidgetProps } from "./widget.builder";
+import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
 
 export type ButonVariants =
     | "contained"
@@ -27,14 +28,19 @@ export class Button extends Widget {
     variant: ButonVariants;
     color: Colors;
     fullWidth: boolean;
+    minWidth: boolean;
     size: ButonSizes;
     href: string;
     text: string;
+    requiredWidth: number;
 
     constructor(id: string, parent: Widget | null = null) {
         super(id, "button", parent);
 
+        this.requiredWidth = -1;
+
         this.fullWidth = false;
+        this.minWidth = false;
         //this.setType(WidgetTypes.CUSTOM);
         this.variant = "text";
         this.color = "primary"; //primary";
@@ -51,32 +57,64 @@ export class Button extends Widget {
         this.deleteAllClasses();
         this.addClass(`WUIButton-${this.variant}`);
         this.addClass(`WUIButton-${this.variant}-color-${this.color}`);
+        if (this.type === WidgetTypes.FILL) {
+            this.addClass("WUINonFreePosition");
+        } else if (this.type === WidgetTypes.CUSTOM) {
+            this.addClass("WUINonFreePosition");
+        } else if (this.type === WidgetTypes.FREE) {
+            this.addClass("WUIFixPosition");
+        }
+        this.updateRequiredWidth();
+    }
+
+    protected updateRequiredWidth(): void {
+        const div = document.createElement("div");
+        div.id = this.id + ".requiredWidth";
+        div.innerHTML = this.text;
+        div.classList.add(`WUIButton-${this.variant}`);
+        div.classList.add(`WUIButton-${this.variant}-color-${this.color}`);
+        div.style.position = "absolute";
+        div.style.overflow = "hidden";
+        document.body.appendChild(div);
+        this.requiredWidth = div.clientWidth;
+        div.parentNode?.removeChild(div);
     }
 
     public init(): void {
         super.init();
     }
 
-    setText(text: string): void {
+    public setText(text: string): void {
         this.text = text;
         this.body.innerHTML = text;
+        this.updateRequiredWidth();
     }
 
-    setVariant(variant: ButonVariants = "contained"): void {
+    public setVariant(variant: ButonVariants = "contained"): void {
         this.variant = variant;
         this.configureStyles();
     }
 
-    setColor(color: Colors = "primary"): void {
+    public setColor(color: Colors = "primary"): void {
         this.color = color;
         this.configureStyles();
     }
 
-    setFullWidth(fullWidth: boolean = false): void {
+    public setFullWidth(fullWidth: boolean = false): void {
         this.fullWidth = fullWidth;
     }
 
-    setSize(size: ButonSizes = "medium"): void {
+    public setMinWidth(minWidth: boolean = false): void {
+        this.minWidth = minWidth;
+        if (this.minWidth) {
+            if (this.requiredWidth > 0) {
+                console.log("cambiando tamano:", this.requiredWidth, " id:", this.id);
+                this.setW(this.requiredWidth);
+            }
+        }
+    }
+
+    public setSize(size: ButonSizes = "medium"): void {
         this.size = size;
     }
 
@@ -103,6 +141,10 @@ export class Button extends Widget {
     getText(): string {
         return this.text;
     }
+
+    public getRequiredWidth(): number {
+        return this.requiredWidth;
+    }
 }
 
 export type wButtonProps = WidgetProps & {
@@ -114,9 +156,13 @@ export type wButtonProps = WidgetProps & {
 };
 
 export const WButton = (props: wButtonProps) => {
+    if (!props.id) {
+        props.id = "button." + UID();
+    }
+
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
-    return (
+    return normalizeWidget(
         <button
             id={props.id}
             w-button
@@ -125,12 +171,8 @@ export const WButton = (props: wButtonProps) => {
             w-color={props.color}
             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}
-        />
+        />,
+        props
     );
 };
 

package/src/ui/buttonColor.ui.tsx

@@ -0,0 +1,87 @@
+import "./styles/buttoncolor.css";
+import { Button, wButtonProps } from "./button.ui";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
+import { normalizeWidget } from "./widget.builder";
+import { UID } from "../core/uid";
+
+export class ButtonColor extends Button {
+    inputColor: Widget;
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, parent);
+
+        this.inputColor = new Widget(id + ".inputColor", "input", this);
+        this.inputColor.getBody().setAttribute("type", "color");
+        this.inputColor.addClass("WUIButtonColorInput");
+    }
+
+    public setValue(value: string): void {
+        this.inputColor.getBody().setAttribute("value", value);
+    }
+
+    public getValue(): string {
+        const value = this.inputColor.getBody().getAttribute("value");
+
+        return value ? value : "";
+    }
+}
+
+export type wButtonColorProps = Omit<wButtonProps, "text"> & {
+    value: string;
+};
+
+export const WButtonColor = (props: wButtonColorProps) => {
+    if (!props.id) {
+        props.id = "ButtonColor." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <button
+            id={props.id}
+            w-button-color
+            w-value={props.value}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-width={props.width}
+            w-height={props.height}
+        />,
+        props
+    );
+};
+
+export function createButtonColor(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): ButtonColor {
+    let newButton = new ButtonColor(id, parent);
+
+    const dataValue = content.getAttribute("w-value");
+    const dataVariant = content.getAttribute("w-variant");
+    const dataColor = content.getAttribute("w-color");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    if (dataValue) {
+        newButton.setValue(dataValue);
+    }
+
+    if (dataVariant) {
+        newButton.setVariant(dataVariant);
+    }
+
+    if (dataColor) {
+        newButton.setColor(dataColor);
+    }
+
+    if (dataWidth) {
+        newButton.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newButton.setInitialH(dataHeight);
+    }
+
+    return newButton;
+}

package/src/ui/buttonmenu.ui.tsx

@@ -0,0 +1,134 @@
+import { UID } from "../core/uid";
+import { SelectItem } from "../types/select.item.type";
+import { Button, wButtonProps } from "./button.ui";
+import { Menu } from "./menu.ui";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { Widget } from "./widget.ui";
+
+export class ButtonMenu extends Button {
+    menu: Menu;
+    items: Array<SelectItem>;
+    selectedItem: SelectItem | null;
+
+    public constructor(id: string) {
+        super(id);
+
+        this.menu = new Menu(this.id + ".menu", this.id, null);
+
+        this.items = new Array<SelectItem>();
+        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.getW() > this.menu.getW()) {
+                    this.menu.setW(this.getBody().clientWidth);
+                    console.log("cambiando ancho...");
+                }
+            },
+        });
+
+        /*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.setText(selectedText);
+                } else {
+                    this.setText("");
+                }
+            },
+        });*/
+    }
+
+    public addItem(id: string, label: string, icon: string): void {
+        this.items.push(new SelectItem(id, label, icon));
+    }
+}
+
+export type WButtonMenuProps = WidgetProps &
+    wButtonProps & {
+        children: any;
+    };
+
+export type WButtonMenuItemProps = {
+    id: string;
+    label?: string | null;
+    icon?: string | null;
+};
+
+export const WButtonMenu = (props: WButtonMenuProps) => {
+    if (!props.id) {
+        props.id = "ButtonMenu." + UID();
+    }
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-button-menu
+            w-text={props.text}
+            w-variant={props.variant}
+            w-color={props.color}
+        >
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export const WButtonMenuItem = (props: WButtonMenuItemProps) => {
+    return <div w-button-menu-item id={props.id} w-label={props.label} w-icon={props.icon}></div>;
+};
+
+export function createButtonMenu(
+    id: string,
+    content: any,
+    _parent: Widget | null = null
+): ButtonMenu {
+    let newButtonMenu = new ButtonMenu(id);
+
+    const btnText = content.getAttribute("w-text");
+    const btnColor = content.getAttribute("w-color");
+    const btnVariant = content.getAttribute("w-variant");
+
+    if (btnText) {
+        newButtonMenu.setText(btnText);
+    }
+
+    if (btnColor) {
+        newButtonMenu.setColor(btnColor);
+    }
+
+    if (btnVariant) {
+        newButtonMenu.setVariant(btnVariant);
+    }
+
+    content.childNodes.forEach((menuItem: HTMLElement, index: number) => {
+        if (menuItem.getAttribute("w-button-menu-item") !== null) {
+            const itemId = menuItem.getAttribute("id");
+            const itemLabel = menuItem.getAttribute("w-label");
+            const itemIcon = menuItem.getAttribute("w-icon");
+
+            if (itemId !== null) {
+                newButtonMenu.addItem(itemId, itemLabel || "Unnamed" + index, itemIcon || "");
+            }
+        }
+    });
+
+    return newButtonMenu;
+}

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

@@ -1,12 +1,21 @@
 import { OrientationTypes } from "src/types/orientation.type";
 import { IconButton } from "./IconButton.ui";
 import { ButonVariants, Button } from "./button.ui";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import {
+    connectWidgetCallback,
+    getOnlyEventProps,
+    Widget,
+    WidgetAlignTypes,
+    WidgetTypes,
+} from "./widget.ui";
+import { createWidget, normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
 
 export class ButtonStack extends Widget {
     orientation: OrientationTypes;
     buttons: Map<string, Button | IconButton>;
     activeButton: string | null;
+    centeredButtons: boolean;
     constructor(
         id: string,
         orientation: OrientationTypes = "horizontal",
@@ -14,6 +23,8 @@ export class ButtonStack extends Widget {
     ) {
         super(id, "div", parent);
 
+        this.centeredButtons = false;
+
         this.orientation = orientation;
 
         if (this.orientation === "horizontal") {
@@ -74,6 +85,9 @@ export class ButtonStack extends Widget {
 
     public addButton(button: Button | IconButton): void {
         this.buttons.set(button.id, button);
+        if (button instanceof IconButton && this.centeredButtons) {
+            (button as IconButton).setCenterX(true);
+        }
         button.setType(WidgetTypes.FILL);
         button.subscribe({ event: "click", then: () => this.setActive(button.id) });
         this.addChild(button);
@@ -91,4 +105,56 @@ export class ButtonStack extends Widget {
     private thereAreMoreThanTwoButtons(): boolean {
         return this.buttons.size > 2;
     }
+
+    public setCenteredButtons(centeredButtons: boolean): void {
+        this.centeredButtons = centeredButtons;
+    }
+}
+
+export type WButtonStackProps = WidgetProps & {
+    centerX?: boolean | null;
+    children: any;
+};
+
+export const WButtonStack = (props: WButtonStackProps) => {
+    if (!props.id) {
+        props.id = "ButtonStack." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div id={props.id} w-button-stack w-centerX={props.centerX}>
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export function createButtonStack(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): ButtonStack {
+    const dataOrientation = content.getAttribute("w-orientation")
+        ? content.getAttribute("w-orientation")
+        : "vertical";
+
+    let newStack = new ButtonStack(id, dataOrientation, parent);
+
+    if (content.getAttribute("w-centerX")) {
+        newStack.setCenteredButtons(true);
+    }
+
+    content.childNodes.forEach((item: HTMLElement, _index: number) => {
+        if (item.getAttribute("w-button") || item.getAttribute("w-icon-button")) {
+            const widget = createWidget(item) as Button;
+
+            if (widget !== null) {
+                newStack.addButton(widget);
+            }
+        }
+    });
+
+    return newStack;
 }

package/src/ui/checkbox.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 Checkbox extends ToggleButton {
@@ -14,20 +15,15 @@ export type wCheckboxProps = WidgetProps & {
 };
 
 export const WCheckbox = (props: wCheckboxProps) => {
+    if (!props.id) {
+        props.id = "Checkbox." + UID();
+    }
+
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
-    return (
-        <div
-            id={props.id}
-            w-checkbox
-            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-checkbox w-text={props.text} w-checked={props.checked} />,
+        props
     );
 };